/* freksen — minimal portfolio
   Anchored to the Figma: cream bg, beige thumbs, Helvetica Neue, -0.080em, 24/15 pair.
*/

:root {
  /* tweakable */
  --bg: #EBE8DF;
  --fg: #E92D0F;
  --thumb: #D8BE99;
  --hover-overlay: color-mix(in srgb, var(--bg) 20%, transparent);
  --hover-style: overlay;          /* overlay | scale | crossfade | caption */
  --type-scale: 1;                 /* multiplier */

  /* Typography tokens — 5 sizes total.
     All Helvetica Neue except --t-mono. All weight 400 unless paired with .t-display-* / weight 700 below. */
  --t-display-l: calc(48px * var(--type-scale));   /* hero titles */
  --t-display-s: calc(24px * var(--type-scale));   /* wordmark, nav, card titles, section labels */
  --t-body:      calc(18px * var(--type-scale));   /* descriptions, lists */
  --t-ui:        calc(15px * var(--type-scale));   /* default UI text, meta, footer, credits */
  --t-mono:      10px;                             /* video timecode label, fixed (not scaled) */

  /* Aliases (kept so older selectors keep working) */
  --t-title: var(--t-display-s);
  --t-meta:  var(--t-ui);
  --t-mark:  var(--t-display-s);

  --gutter: 50px;
  --row-gap: 60px;
  --col-gap: 24px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--t-ui);
  letter-spacing: 0;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

#root { min-height: 100vh; display: flex; flex-direction: column; }

/* ───────── Header ───────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--gutter) var(--gutter) calc(var(--gutter) * 1.5);
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  /* Longer fade out toward the bottom */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 100%);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
/* Hide-on-scroll-down (index/about only). Transform driven imperatively from
   app.jsx; this transition eases it smoothly in real browsers. */
.site-header { transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }

.wordmark {
  font-weight: 700;
  font-size: var(--t-display-s);
  letter-spacing: -0.08em;
  line-height: 1;
}

.site-nav {
  display: flex;
  gap: 24px;
}

.nav-link {
  font-weight: 700;
  font-size: var(--t-display-s);
  letter-spacing: -0.08em;
  line-height: 1;
  position: relative;
  transition: opacity 160ms ease;
}
.nav-link:hover { opacity: 0.6; }

.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
}

/* ───────── Index / case grid ───────── */

.index-view {
  flex: 1;
  padding: 0 var(--gutter) calc(var(--gutter) * 2);
  margin-top: 0;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--row-gap) var(--col-gap);
}

/* twoUp — Figma rhythm: each row has a different mismatched split.
   Rows: [1,2] 8/4 · [3,4] 4/8 · [5,6] 7/5 · [7,8] 5/7. */
.layout-twoUp .case-card { grid-column: span 6; }

/* Row 1 — card 1 big: 8/4 */
.layout-twoUp .case-card:nth-child(1) { grid-column: span 8; }
.layout-twoUp .case-card:nth-child(2) { grid-column: span 4; }

/* Row 2 — card 4 big: 4/8 */
.layout-twoUp .case-card:nth-child(3) { grid-column: span 4; }
.layout-twoUp .case-card:nth-child(4) { grid-column: span 8; }

/* Row 3 — card 5 big: 8/4 (matches row 1) */
.layout-twoUp .case-card:nth-child(5) { grid-column: span 8; }
.layout-twoUp .case-card:nth-child(6) { grid-column: span 4; }

/* Row 4 — card 8 big: 5/7 */
.layout-twoUp .case-card:nth-child(7) { grid-column: span 5; }
.layout-twoUp .case-card:nth-child(8) { grid-column: span 7; }

/* even 2x — strict 6/6 columns, consistent aspect */
.layout-evenGrid .case-card { grid-column: span 6; }

/* list — single column */
.layout-list .case-card { grid-column: 1 / -1; }

/* asymmetric — more dramatic varied widths + vertical staggering */
.layout-asymmetric .case-card:nth-child(8n+1) { grid-column: span 5; }
.layout-asymmetric .case-card:nth-child(8n+2) { grid-column: span 7; margin-top: 80px; }
.layout-asymmetric .case-card:nth-child(8n+3) { grid-column: span 7; }
.layout-asymmetric .case-card:nth-child(8n+4) { grid-column: span 5; margin-top: 60px; }
.layout-asymmetric .case-card:nth-child(8n+5) { grid-column: span 4; }
.layout-asymmetric .case-card:nth-child(8n+6) { grid-column: span 8; margin-top: 40px; }
.layout-asymmetric .case-card:nth-child(8n+7) { grid-column: span 8; }
.layout-asymmetric .case-card:nth-child(8n+8) { grid-column: span 4; margin-top: 100px; }

/* ───────── Case card ───────── */

.case-card {
  display: block;
  position: relative;
}

.case-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect, 1123 / 638);
  overflow: hidden;
  background: var(--thumb);
}

/* In twoUp mode each row equalises height. The wider card in each pair sets
   the row height via aspect-ratio; the narrower card stretches to match. */
.layout-twoUp .case-card {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.layout-twoUp .case-thumb {
  flex: 1 1 auto;
  min-height: 0;
}
/* Pair pattern — in each row the wider card drives the row height via its
   natural aspect ratio; the narrower card stretches to match.
   Wider cards: 1, 4, 5, 8.  Narrower (stretch): 2, 3, 6, 7. */
.layout-twoUp .case-card:nth-child(1) .case-thumb,
.layout-twoUp .case-card:nth-child(4) .case-thumb,
.layout-twoUp .case-card:nth-child(5) .case-thumb,
.layout-twoUp .case-card:nth-child(8) .case-thumb {
  aspect-ratio: var(--aspect, 1123 / 638);
  height: auto;
}
.layout-twoUp .case-card:nth-child(2) .case-thumb,
.layout-twoUp .case-card:nth-child(3) .case-thumb,
.layout-twoUp .case-card:nth-child(6) .case-thumb,
.layout-twoUp .case-card:nth-child(7) .case-thumb {
  aspect-ratio: auto;
  height: 100%;
}

.case-overlay {
  position: absolute;
  inset: 0;
  background: var(--hover-overlay);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

/* hover styles */
.case-card:hover .case-overlay { opacity: 1; }

[data-hover="scale"] .case-thumb > .media-placeholder { transition: transform 380ms cubic-bezier(.2,.7,.2,1); }
[data-hover="scale"] .case-card:hover .case-thumb > .media-placeholder { transform: scale(1.04); }
[data-hover="scale"] .case-card:hover .case-overlay { opacity: 0; }

[data-hover="crossfade"] .case-card:hover .case-overlay { opacity: 0.35; mix-blend-mode: difference; }

[data-hover="caption"] .case-card:hover .case-overlay { opacity: 0; }
[data-hover="caption"] .case-meta { transition: transform 220ms ease, opacity 220ms ease; }
[data-hover="caption"] .case-card:hover .case-meta { transform: translateY(-4px); }

/* Combined: overlay AND caption animation together */
[data-hover="both"] .case-card:hover .case-overlay { opacity: 1; }
[data-hover="both"] .case-meta { transition: transform 220ms ease, opacity 220ms ease; }
[data-hover="both"] .case-card:hover .case-meta { transform: translateY(-4px); }

/* On touch / smaller screens, disable the caption-translate hover effect entirely.
   Hover doesn't really exist on touch, and the meta jumping up looks broken. */
@media (max-width: 1024px), (hover: none) {
  [data-hover="caption"] .case-card:hover .case-meta,
  [data-hover="both"]    .case-card:hover .case-meta {
    transform: none;
  }
  [data-hover="caption"] .case-meta,
  [data-hover="both"]    .case-meta {
    transition: none;
  }
}

.case-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 0 0;
  height: 29px;
}

.case-title {
  font-weight: 700;
  font-size: var(--t-display-s);
  letter-spacing: -0.08em;
  line-height: 1;
}

.case-client {
  font-weight: 400;
  font-size: var(--t-ui);
  letter-spacing: 0;
  line-height: 1;
}

/* ───────── Media placeholder ───────── */

.media-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--thumb);
}

.media-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-iframe {
  border: 0;
}

/* Fullscreen wrapper for controls-mode videos */
.media-fs-wrap {
  position: absolute;
  inset: 0;
}
.media-fs-wrap:fullscreen,
.media-fs-wrap:-webkit-full-screen {
  position: fixed;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-fs-wrap:fullscreen .media-real {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.media-fs-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s ease, background 0.18s ease;
}
.media-fs-wrap:hover .media-fs-btn,
.media-fs-wrap:focus-within .media-fs-btn {
  opacity: 1;
}
.media-fs-btn:hover {
  background: rgba(0,0,0,0.72);
}
.media-fs-wrap:fullscreen .media-fs-btn {
  opacity: 1;
}

/* CSS fallback fullscreen — used when the native Fullscreen API is blocked
   (e.g. inside a nested/sandboxed iframe). Covers the whole viewport. */
.media-fs-wrap.is-css-fs {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-fs-wrap.is-css-fs .media-real {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.media-fs-wrap.is-css-fs .media-fs-btn {
  opacity: 1;
}

/* Cover wrapper for iframe-based videos (Vimeo/YouTube).
   Iframes ignore object-fit:cover, so we size the iframe larger than the
   wrapper to crop the letterboxing. Uses container query units so it scales
   to the actual case-thumb size. */
.media-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
  /* Let clicks pass through to the parent <a> (case-card) */
  pointer-events: none;
}
.media-cover .media-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:  max(100cqw, calc(100cqh * (var(--video-ar))));
  height: max(100cqh, calc(100cqw / (var(--video-ar))));
}

.media-placeholder .media-stripes {
  position: absolute;
  inset: 0;
  display: block;
}

.media-label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, monospace;
  font-size: var(--t-mono);
  letter-spacing: 0;
  color: rgba(0,0,0,0.45);
  display: flex;
  gap: 6px;
  text-transform: uppercase;
}
.media-label .dot { opacity: 0.5; }

.media-vid-mark {
  position: absolute;
  right: 16px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: var(--t-mono);
  color: rgba(0,0,0,0.55);
}
.media-vid-mark svg { color: rgba(0,0,0,0.55); }

/* ───────── Footer ───────── */

.site-footer {
  margin-top: auto;
  padding: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid rgba(0,0,0,0.12);
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 24px;
}

.footer-row-end {
  justify-content: space-between;
}

.foot-label {
  font-weight: 700;
  font-size: var(--t-display-s);
  letter-spacing: -0.08em;
  margin-right: 8px;
}

.foot-link {
  font-size: var(--t-ui);
  letter-spacing: 0;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms;
}
.foot-link:hover { border-bottom-color: currentColor; }

.foot-meta {
  font-size: var(--t-ui);
  letter-spacing: 0;
  opacity: 0.6;
}

/* ───────── Case detail (Figma: static left, only right column scrolls) ───────── */

/* Lock the page itself when on a case route — only the media column scrolls.
   Footer is hidden in this locked desktop layout (it reappears on mobile where
   the lock is dropped). */
html[data-case], html[data-case] body { height: 100%; overflow: hidden; }
html[data-case] body { display: flex; flex-direction: column; }
html[data-case] #root { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; }
html[data-case] .route-fade { display: flex; flex-direction: column; flex: 1; min-height: 0; }
html[data-case] .site-footer { display: none; }

/* On case pages the header overlays the content so the gallery can scroll up
   behind the blur and out of view at the top. Columns are padded down so their
   initial content starts below the header. */
html[data-case] .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.case-view {
  flex: 1;
  padding: 0 var(--gutter) 0;
  overflow: hidden;
  min-height: 0;
}

html[data-case] .case-layout {
  padding-top: 0;
}
html[data-case] .case-sidebar {
  padding-top: calc(var(--gutter) * 2.5 + var(--t-mark));
}
html[data-case] .case-media-col {
  padding-top: calc(var(--gutter) * 2.5 + var(--t-mark));
}

.case-layout {
  display: grid;
  grid-template-columns: 505fr 1093fr;
  column-gap: 30px;
  align-items: stretch;
  height: 100%;
  padding-top: 8px;
}

/* Left sidebar — full-height, no scroll, credits + pager pinned to bottom */
.case-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 50px;
  min-height: 0;
}

/* Credits + pager sit together, pinned to the bottom of the sidebar */
.case-pager {
  margin-top: 0;
}

.case-crumb {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 24px;
  font-size: var(--t-ui);
}
.crumb-link { border-bottom: 1px solid transparent; }
.crumb-link:hover { border-bottom-color: currentColor; }
.crumb-sep { opacity: 0.4; padding: 0 12px; }
.crumb-current { letter-spacing: -0.08em; }

.case-hero-title {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: var(--t-display-l);
  letter-spacing: -0.08em;
  line-height: 1;
  text-wrap: pretty;
}
.case-hero-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--t-ui);
  margin-bottom: 32px;
}
.case-hero-line .dot { opacity: 0.5; }

.case-description {
  margin: 0 0 48px;
  font-size: var(--t-body);
  letter-spacing: 0;
  line-height: 1.4;
  max-width: 60ch;
  font-weight: 400;
  text-wrap: pretty;
}
.case-description-note {
  margin-top: 0;
  opacity: 0.75;
}

/* Inline "Read more" trigger */
.read-more-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  font-weight: 700;
  letter-spacing: -0.04em;
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
.read-more-btn:hover { opacity: 0.6; }

/* Read more modal */
.readmore-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  opacity: 1;
}

.readmore-dialog {
  position: relative;
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid rgb(206, 199, 183);
  padding: 48px;
  scrollbar-width: none;
}
.readmore-dialog::-webkit-scrollbar { width: 0; display: none; }

.readmore-close {
  position: absolute;
  top: 18px;
  right: 20px;
  appearance: none;
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  padding: 4px;
}
.readmore-close:hover { opacity: 0.6; }

.readmore-title {
  margin: 0 0 24px;
  font-size: var(--t-display-s);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 1;
  padding-right: 32px;
}
.readmore-body p {
  margin: 0 0 18px;
  font-size: var(--t-body);
  line-height: 1.4;
  letter-spacing: 0;
}
.readmore-body p:last-child { margin-bottom: 0; }

.case-credits {
  list-style: none;
  margin: 0 0 24px;
  margin-top: auto;
  padding: 0;
  max-width: 354px;
  border-top: 1px solid rgb(206, 199, 183);
}
.case-credit {
  font-size: var(--t-ui);
  letter-spacing: 0;
  line-height: 1;
  padding: 14px 0;
  border-bottom: 1px solid rgb(206, 199, 183);
}
.case-credit:last-child {
  border-bottom: none;
}

/* Right column — the only thing that scrolls. Padding pushes content below the header
   initially; on scroll, items pass behind the blurred header. */
.case-media-col {
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 24px;
  /* Hide the scrollbar but keep scrolling */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.case-media-col::-webkit-scrollbar { width: 0; height: 0; display: none; }

.case-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.case-gallery-item {
  position: relative;
  width: 100%;
  aspect-ratio: var(--g-aspect, 1093 / 615);
  overflow: hidden;
  background: var(--thumb);
}
.case-gallery-item.span-12 { grid-column: span 12; }
.case-gallery-item.has-image {
  background: transparent;
}
.case-gallery-item.span-6  { grid-column: span 6; }
.case-gallery-item.span-4  { grid-column: span 4; }

/* Default: desktop pager visible, mobile pager hidden.
   Override below 1100px: hide desktop, show mobile.
   !important needed because the generic .case-pager rule below sets display: grid
   with the same specificity and comes later in the source. */
.case-pager-mobile { display: none !important; }
@media (max-width: 1100px) {
  .case-pager-desktop { display: none !important; }
  .case-pager-mobile { display: grid !important; }
}

/* Pager — at bottom of left sidebar */
.case-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgb(206, 199, 183);
}
.pager-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pager-next { text-align: right; align-items: flex-end; }
.pager-label { font-size: 12px; opacity: 0.5; letter-spacing: 0; }
.pager-title { font-size: var(--t-ui); font-weight: 700; letter-spacing: -0.08em; transition: opacity 160ms ease; }
.pager-link:hover .pager-title { opacity: 0.6; }

.case-404 {
  padding-top: 200px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.back-link { font-weight: 700; }

/* ───────── About ───────── */

.about-view {
  flex: 1;
  padding: 0 var(--gutter) calc(var(--gutter) * 2);
}

/* Intro: portrait + lede in 2-col like the case page */
.about-intro {
  display: grid;
  grid-template-columns: 505fr 1093fr;
  column-gap: 30px;
  padding-top: 24px;
  margin-bottom: 120px;
  align-items: start;
}

.about-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 360px;
  overflow: hidden;
  background: var(--thumb);
}

.about-lede {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 60ch;
}
.about-name {
  margin: 0 0 16px;
  font-size: var(--t-display-l);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 1;
}
.about-text {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 400;
  text-wrap: pretty;
}

/* Sections (Awards, Press, etc.) */
.about-section {
  display: grid;
  grid-template-columns: 505fr 1093fr;
  column-gap: 30px;
  padding-top: 32px;
  margin-bottom: 64px;
  border-top: 1px solid rgb(206, 199, 183);
}
.about-section-label {
  margin: 0;
  font-size: var(--t-display-s);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 1;
}
.about-section-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.about-row {
  border-bottom: 1px solid rgb(206, 199, 183);
}
.about-row > a,
.about-row > span,
.about-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 14px 0;
  font-size: var(--t-body);
  letter-spacing: 0;
  line-height: 1.2;
}
.about-row-link {
  color: inherit;
  text-decoration: none;
  width: 100%;
}
.about-row-link:hover .about-row-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.about-row-arrow { display: inline-block; margin-left: 4px; opacity: 0.7; }
.about-row-year { opacity: 0.6; white-space: nowrap; flex-shrink: 0; }

/* ───────── Responsive ───────── */

@media (max-width: 1100px) {
  :root { --gutter: 32px; --row-gap: 80px; }
  .case-crumb, .about-lede { margin-top: 140px; }
  .case-crumb { margin-top: 0; }
  .about-lede { margin-top: 0; }
  .about-intro,
  .about-section { grid-template-columns: 1fr; row-gap: 32px; }
  .about-portrait { max-width: 240px; }
  .layout-asymmetric .case-card { grid-column: span 12 !important; margin-top: 0 !important; }
  .layout-asymmetric { grid-template-columns: 1fr; }

  /* Below 1100px, drop the case-page viewport lock — let it scroll normally */
  html[data-case], html[data-case] body { height: auto; overflow: visible; }
  html[data-case] body,
  html[data-case] #root,
  html[data-case] .route-fade { display: block; }
  .case-view { height: auto; overflow: visible; padding-bottom: 60px; }
  .case-layout { grid-template-columns: 1fr; row-gap: 100px; padding-top: 16px; height: auto; }
  .case-sidebar { height: auto; padding-bottom: 0; }
  .case-media-col { height: auto; overflow: visible; }
  /* Below 1100px the header is sticky in flow again, so undo the overlay padding */
  html[data-case] .site-header { position: sticky; }
  html[data-case] .case-sidebar { padding-top: 0; }
  html[data-case] .case-media-col { padding-top: 0; }
  /* When columns stack, the desktop pager would appear between text and images.
     Hide it and show the mobile pager (which sits below the gallery) instead. */
  .case-pager-desktop { display: none; }
  .case-pager-mobile { display: grid; margin-top: 60px; padding-top: 20px; border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); }

  /* Footer reappears on mobile case pages */
  html[data-case] .site-footer { display: block; }
}

@media (max-width: 720px) {
  :root {
    --gutter: 20px;
    --row-gap: 48px;
    --col-gap: 16px;
    /* Mobile type scale — pull display sizes down */
    --t-display-l: calc(34px * var(--type-scale));
    --t-display-s: calc(20px * var(--type-scale));
    --t-body:      calc(16px * var(--type-scale));
    --t-ui:        calc(14px * var(--type-scale));
  }

  /* Header — tighter spacing, no longer overhanging the page */
  .site-header { padding: 16px 20px 32px; }
  .site-nav { gap: 18px; }

  /* Index — every layout collapses to 1 column on mobile */
  .case-grid {
    grid-template-columns: 1fr !important;
    gap: 48px;
  }
  .case-grid .case-card {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
    display: block !important;
  }
  .case-thumb,
  .layout-twoUp .case-thumb,
  .layout-twoUp .case-card:nth-child(4n+1) .case-thumb,
  .layout-twoUp .case-card:nth-child(4n+4) .case-thumb {
    aspect-ratio: 2246 / 1276 !important; /* CurrenSEE thumbnail ratio (~16:9) */
    height: auto !important;
    flex: none !important;
    min-height: 0;
  }
  /* On mobile, video cases keep the standard box ratio; the .media-cover
     scales the video up to fill it (never letterbox, never reshape the box). */
  .case-card[style*="--video-ar"] .case-thumb {
    aspect-ratio: 2246 / 1276 !important;
  }
  /* Let titles wrap and stack with client info */
  .case-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    height: auto;
    padding: 0;
    margin-top: 12px;
  }

  /* Case detail */
  .case-view { padding-bottom: 40px; }
  .case-layout { padding-top: 16px; row-gap: 100px; }
  .case-sidebar { padding: 0; padding-bottom: 0; }
  .case-body { grid-template-columns: 1fr; gap: 32px; }
  .case-stack { grid-template-columns: 1fr; }
  .case-hero-title { font-size: var(--t-display-l); margin-bottom: 12px; }
  .case-description { margin-bottom: 16px; max-width: none; }
  .case-credits { max-width: none; margin-bottom: 0; }
  .case-gallery { gap: 16px; }
  .case-gallery > * { grid-column: 1 / -1 !important; }
  .case-pager { grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 20px; }
  /* Move Previous/Next below all media on mobile */
  .case-pager-desktop { display: none; }
  .case-pager-mobile { display: grid; margin-top: 32px; padding-top: 20px; border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); }

  /* About */
  .about-intro,
  .about-section { grid-template-columns: 1fr; row-gap: 20px; column-gap: 0; }
  .about-intro { padding-top: 24px; margin-bottom: 64px; }
  .about-section { margin-bottom: 40px; padding-top: 24px; }
  .about-portrait { max-width: 200px; aspect-ratio: 1 / 1; }
  .about-name { font-size: var(--t-display-l); margin-bottom: 12px; }
  .about-row > a, .about-row > span, .about-row {
    padding: 12px 0;
    font-size: var(--t-body);
    gap: 16px;
  }

  /* Footer */
  .site-footer { padding: var(--gutter); }
  .footer-row-end { gap: 16px; }
  .foot-link { font-size: var(--t-ui); }
}

@media (max-width: 420px) {
  /* Very small phones — stack the footer so the email never overflows */
  .footer-row-end { flex-direction: column; align-items: flex-start; gap: 12px; }
  .about-row > a, .about-row > span, .about-row {
    flex-wrap: wrap;
  }
  .about-row-year { width: 100%; opacity: 0.5; }
}

/* Animation removed — it was getting stuck on long pages. Keep classes harmless. */
.fade-in { opacity: 1; }
.route-fade { opacity: 1; }