/* ══════════════════════════════════════════════════════════════════════════
   Fonts: Figtree (open source, self-hosted) replaces Adobe Fonts Proxima Nova
   and Google Fonts Chivo. It is registered under the old family names so the
   existing rules in site.css keep working without edits.
   ══════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: "proxima-nova"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("/fonts/figtree-latin-ext-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "proxima-nova"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("/fonts/figtree-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "proxima-nova"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "proxima-nova"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/fonts/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "proxima-nova-condensed"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("/fonts/figtree-latin-ext-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "proxima-nova-condensed"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("/fonts/figtree-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "proxima-nova-condensed"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "proxima-nova-condensed"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/fonts/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chivo"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("/fonts/figtree-latin-ext-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Chivo"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("/fonts/figtree-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chivo"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Chivo"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/fonts/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/*
 * portfolio-overrides.css
 * Fixes for static-site migration from Squarespace:
 *   1. Image fill inside aspect-ratio container
 *   2. Show date meta item (not in body tweaks)
 *   3. Hide author (not shown on original)
 *   4. Mobile single-column collapse
 */

/* ══════════════════════════════════════════════════════════════════════════
   ISSUE 1 — Header: logo left / nav right + hamburger menu
   ══════════════════════════════════════════════════════════════════════════ */

/* Show the left container (Squarespace hid it via JS; we override here) */
[data-nc-base="header"] [data-nc-container="left"] {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: nowrap;
}

/* Hide the unused center/right containers */
[data-nc-base="header"] [data-nc-container="center"],
[data-nc-base="header"] [data-nc-container="right"] {
  display: none !important;
}

/* Nav links inline with gap, pushed to the right */
.primary-nav-wrapper {
  margin-left: auto;
}

.site-navigation {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Each nav item: remove Squarespace's default block/inline-block */
.site-navigation .nav-item {
  display: flex !important;
  margin: 0 !important;
}

/* ── Hamburger button (hidden on desktop) ───────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
}

/* ── Mobile: show hamburger, hide nav until toggled ─────────────────────── */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .primary-nav-wrapper {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    padding: 16px 24px;
    border-top: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 999;
  }

  .primary-nav-wrapper.open {
    display: block;
  }

  .site-navigation {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .site-navigation .nav-item {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .site-header {
    position: relative;
  }

  /* Hide tagline on mobile to save space */
  .site-tagline-wrapper {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ISSUE 1 — END
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Images fill their aspect-ratio box ──────────────────────────────── */
.tweak-blog-list-style-grid .BlogList-item-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── 2. Show date meta item ─────────────────────────────────────────────── */
.Blog-meta-item--date {
  display: inline !important;
}

/* ── 3. Hide author (not part of original portfolio display) ────────────── */
.Blog-meta-item--author {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ISSUE 4 — Gallery / Slideshow fixes
   ══════════════════════════════════════════════════════════════════════════ */

/* Grid gallery: responsive image grid */
.sqs-gallery-block-grid .sqs-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  width: 100%;
}

.sqs-gallery-block-grid .slide {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.sqs-gallery-block-grid .slide img,
.sqs-gallery-block-grid .slide .image-slide-anchor {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: static;
}

/* Remove the pseudo-element aspect ratio trick on grid slides (we use aspect-ratio property) */
.sqs-gallery-block-grid .slide::before {
  display: none !important;
}

/* Slider gallery: already handled by sq-replace.js; ensure images fill slide */
.sqs-gallery-block-slider .slide img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  display: block;
}

/* Generic fallback for any gallery image */
.sqs-gallery img,
.sqs-gallery-container img {
  max-width: 100%;
  height: auto;
}

/* Prevent gallery overflow */
.sqs-gallery-container,
.sqs-gallery-block-grid,
.sqs-gallery-block-slider {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Hide orphan noscript elements (belt-and-suspenders; most are removed by script) */
noscript {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   ISSUE 4 — END
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 4. Responsive: collapse to 1 column on mobile ─────────────────────── */
@media screen and (max-width: 768px) {
  .tweak-blog-list-style-grid .BlogList-item {
    width: 100% !important;
    margin-right: 0 !important;
    float: none !important;
    clear: both !important;
  }

  /* Reset first-child margin-top removal that only applies to 2-up */
  .tweak-blog-list-style-grid [data-columns='2'] .BlogList-item:nth-child(-n+2) {
    margin-top: 48px;
  }
  .tweak-blog-list-style-grid [data-columns='2'] .BlogList-item:nth-child(-n+1) {
    margin-top: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Case study pages (post-AI) + era labels
   ══════════════════════════════════════════════════════════════════════════ */
.jl-era {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.6;
}
.jl-era--post { background: #385aea; color: #fff; }
.jl-era--pre  { background: #eceef2; color: #444; }

.cs-note { max-width: 760px; margin: 0 auto 32px; text-align: center; font-size: 15px; }

.cs { max-width: 760px; margin: 0 auto; text-align: left; font-size: 17px; line-height: 1.65; }
.cs h2 { margin: 48px 0 12px; font-size: 26px; line-height: 1.25; }
.cs p, .cs ul { margin: 0 0 16px; }
.cs ul { padding-left: 1.2em; }
.cs li { margin-bottom: 6px; }
.cs code { background: #f1f2f4; padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
.cs-meta { text-align: center; color: #666; font-size: 15px; margin-bottom: 24px; }
.cs-back { margin-top: 48px; }

.cs-fig { margin: 0 0 8px; }
.cs-fig img { display: block; width: 100%; height: auto; border: 1px solid #e6e6e6; border-radius: 6px; }
.cs-fig figcaption { margin-top: 8px; font-size: 14px; color: #777; text-align: center; }
.cs-wide { margin: 0 -80px 24px; }
.cs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0 24px; align-items: start; }
.cs-phones { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; }
.cs-scroll-frame { max-height: 420px; overflow-y: auto; border: 1px solid #e6e6e6; border-radius: 6px; }
.cs-scroll-frame img { border: 0; border-radius: 0; }

.cs-table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 15px; line-height: 1.5; }
.cs-table th, .cs-table td { padding: 10px 12px; border-bottom: 1px solid #e6e6e6; text-align: left; vertical-align: top; }
.cs-table thead th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: #666; border-bottom-color: #ccc; }
.cs-table tbody th { white-space: nowrap; font-weight: 700; }

/* Featured card on the Works page: full width, one up */
.tweak-blog-list-style-grid .BlogList-item.jl-featured { width: 100% !important; float: none !important; clear: both; margin-right: 0 !important; }
.tweak-blog-list-style-grid .BlogList-item.jl-featured .BlogList-item-title { font-size: 1.4em; }

@media screen and (max-width: 768px) {
  .cs { font-size: 16px; }
  .cs-wide { margin: 0 0 24px; }
  .cs-pair, .cs-phones { grid-template-columns: 1fr; }
  .cs-phones { grid-template-columns: minmax(0, 260px); }
  .cs-table { font-size: 14px; }
  .cs-table tbody th { white-space: normal; }
}

/* Featured card: wide, shorter crop anchored to the top of the screenshot */
.tweak-blog-list-style-grid .BlogList-item.jl-featured .BlogList-item-image { padding-bottom: 46% !important; height: 0; }
.tweak-blog-list-style-grid .BlogList-item.jl-featured .BlogList-item-image img { object-position: top center; }

/* Separator between date and year tag in list meta (was running together) */
.Blog-meta-item--date + .Blog-meta-item--tags::before { content: " · "; }

/* Case study pages: article is a flex column where the title has order 2; keep our content after it */
.BlogItem > .cs { order: 3; }
.BlogItem > .BlogItem-title { margin: 40px 0 8px; }