@font-face {
  font-family: "Portfolio Helvetica";
  src: url("assets/fonts/helvetica/Helvetica.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Portfolio Helvetica";
  src: url("assets/fonts/helvetica/helvetica-light-587ebe5a59211.woff") format("woff");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Portfolio Helvetica";
  src: url("assets/fonts/helvetica/Helvetica-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Portfolio Helvetica";
  src: url("assets/fonts/helvetica/Helvetica-Oblique.woff") format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Portfolio Helvetica";
  src: url("assets/fonts/helvetica/Helvetica-BoldOblique.woff") format("woff");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #f9f9f7;
  --ink: #0e0e0e;
  --body: #3e3e3e;
  --muted: #757575;
  --line: #c7c7c2;
  --orange: #fea772;
  --lavender: #c7c5ff;
  --pink: #ffc7d7;
  --sourcewise-bg: #fbfbfa;
  --content: 1200px;
  --case-content: 1368px;
  --sans: "Portfolio Helvetica", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 400; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, blockquote { margin: 0; }
button, input, textarea, select { font: inherit; }

.wrap { width: min(var(--content), calc(100% - 48px)); margin-inline: auto; }
.case-wrap { width: min(var(--case-content), calc(100% - 80px)); margin-inline: auto; }
.page { min-height: 100vh; overflow: clip; background: var(--paper); border-radius: 16px; }
.eyebrow, .label, .case-label { color: var(--muted); font-size: 12px; line-height: 16px; letter-spacing: .02em; text-transform: uppercase; }
.h1 { font-size: 88px; line-height: 1; letter-spacing: -3.67px; font-weight: 400; }
.h2 { font-size: 38px; line-height: 1.1; letter-spacing: -1.1px; font-weight: 400; }
.h3 { font-size: 24px; line-height: 1.25; font-weight: 400; }
.lead { font-size: 18px; line-height: 27px; color: #474747; }
.small { font-size: 14px; line-height: 21px; color: #535353; }
.figure { position: relative; overflow: hidden; background: #ececea; }
.figure > img, .figure > video, .case-media > img, .project-shot > img { width: 100%; height: 100%; object-fit: cover; }

.things-video { cursor: pointer; }
.things-video:focus-visible { outline: 2px solid #635eb8; outline-offset: 4px; }
.video-playback-status { position: absolute; right: 16px; bottom: 16px; padding: 7px 11px; border-radius: 999px; background: rgba(20, 20, 20, .76); color: #fff; font-size: 13px; line-height: 1; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.things-video:hover .video-playback-status, .things-video:focus-visible .video-playback-status, .things-video.is-paused .video-playback-status { opacity: 1; }

.pill-nav { position: fixed; left: 50%; bottom: 56px; z-index: 50; display: flex; width: 208px; height: 48px; padding: 4px; transform: translate(-50%, calc(100% + 56px)); opacity: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.78); border-radius: 24px; background: rgba(232,232,232,.68); box-shadow: 0 3px 6px rgba(0,0,0,.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 260ms ease, opacity 220ms ease; will-change: transform, opacity; }
.pill-nav.nav-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.pill-nav.nav-hidden { transform: translate(-50%, calc(100% + 56px)); opacity: 0; pointer-events: none; }
.pill-nav a { display: grid; width: 100px; height: 40px; place-items: center; border-radius: 20px; color: #999; font-size: 12px; line-height: 16px; }
.pill-nav a.active { color: #111; background: rgba(255,255,255,.97); box-shadow: 0 1px 2px rgba(0,0,0,.04); font-weight: 600; }

/* Section utility bar ---------------------------------------------------- */
.section-utility-bar { position: fixed; z-index: 60; top: 0; right: 0; left: 0; display: flex; width: 100%; height: 68px; align-items: center; justify-content: space-between; padding: 0 32px; border-radius: 0; background: #FFCDDB; color: #000; font-family: Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 28px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 140ms ease, visibility 0s linear 140ms; }
.section-utility-bar.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 140ms ease; }
.section-utility-bar__home, .section-utility-bar__about { padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; line-height: inherit; white-space: nowrap; }
.section-utility-bar__home { display: inline-flex; align-items: center; gap: 8px; }
.section-utility-bar__home-arrow { display: inline-flex; height: 1em; align-items: center; font-family: Arial, sans-serif; line-height: 1; }
.section-utility-bar__home-label { line-height: inherit; }
.section-utility-bar__home:hover, .section-utility-bar__home:focus-visible, .section-utility-bar__about:hover, .section-utility-bar__about:focus-visible, .section-page-close:hover, .section-page-close:focus-visible { color: #625fa8; }
.section-utility-bar__home:focus-visible, .section-utility-bar__about:focus-visible, .section-page-close:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; border-radius: 2px; }
.section-page-close { position: relative; width: 13px; height: 28px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; line-height: 28px; text-align: center; }
.section-page-close::before { position: absolute; inset: -8px; content: ""; }
.section-page-close { position: fixed; z-index: 59; top: 20px; right: 32px; color: #000; font-family: Inter, var(--sans); font-size: 24px; font-weight: 400; line-height: 28px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 140ms ease, visibility 0s linear 140ms; }
.section-page-close.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 140ms ease; }

@media (max-width: 700px) {
  .section-page-close { right: 16px; }
}

/* Home */
.home-grid { display: grid; width: 100%; height: 100svh; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); background: #fff; }
body:has(.home-grid) { overflow: hidden; }
.home-cell { min-width: 0; min-height: 0; overflow: hidden; }
.home-portrait { position: relative; background: #a6a3ff; }
.home-portrait img { position: absolute; top: 0; left: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.home-project, .home-about { display: flex; padding: 40px; }
.home-project { flex-direction: column; justify-content: flex-end; gap: 16px; }
.home-project.sourcewise { background: var(--paper); }
.home-project.before { background: var(--lavender); }
.home-project.fireline { background: #ffcddb; }
.home-project.things { background: #fff; }
.project-meta { display: flex; width: 100%; height: 16px; align-items: center; justify-content: space-between; color: #4c4c4a; font-size: 12px; line-height: 16px; }
.project-tags { display: flex; align-items: center; gap: 8px; }
.project-tags span { display: inline-flex; height: 16px; align-items: center; justify-content: center; padding: 0 4px; border: 1px solid #4c4c4a; border-radius: 2px; color: #4c4c4a; font-family: Arial, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .4px; line-height: 16px; white-space: nowrap; }
.project-content { display: flex; width: 100%; height: 356px; min-height: 0; flex-direction: column; gap: 20px; }
.project-shot { position: relative; width: 100%; height: 219px; flex: 0 0 219px; overflow: hidden; border-radius: 4px; background: #fff; }
.project-shot img { width: 100%; height: 100%; object-fit: cover; }
.sourcewise .project-shot { height: 212px; flex-basis: 212px; background: #f9f9f7; }
.project-title-row { display: flex; width: 100%; height: 40px; align-items: center; justify-content: flex-start; gap: 4px; }
.project-title-row h2 { margin: 0; color: #0e0e0e; font-family: Arial, sans-serif; font-size: 32px; font-weight: 500; letter-spacing: -.5px; line-height: 40px; white-space: nowrap; }
.project-arrow { width: 18px; height: 18px; flex: 0 0 18px; }
.project-desc { min-height: 57px; color: #3e3e3e; font-size: 14px; line-height: 21px; }
.arrow { display: inline-block; font-size: .62em; line-height: 1; transform: translateY(-.25em); }

/* Homepage card interactions stay desktop-only so touch layouts keep their
   always-available labels and do not retain a hover state. */
.home-grid .arrow { margin-left: .18em; }

.portfolio-cursor { display: none; }
.secondary-page-cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  body.custom-cursor-active,
  body.custom-cursor-active * { cursor: none !important; }

  .portfolio-cursor {
    position: fixed;
    z-index: 2147483647;
    top: 0;
    left: 0;
    display: grid;
    width: 13px;
    height: 13px;
    place-items: center;
    border-radius: 50%;
    background: #C7C5FF;
    color: #171717;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
    transition: width 360ms cubic-bezier(.22, 1, .36, 1), height 360ms cubic-bezier(.22, 1, .36, 1), border-radius 360ms cubic-bezier(.22, 1, .36, 1), background-color 260ms cubic-bezier(.22, 1, .36, 1), opacity 160ms ease;
    will-change: transform, width, height, border-radius;
  }

  .portfolio-cursor.is-visible { opacity: 1; }

  .portfolio-cursor.is-card {
    width: var(--cursor-pill-width, 132px);
    height: 36px;
    border-radius: 999px;
  }

  .portfolio-cursor.is-pink { background: #FFC7D7; }

  .portfolio-cursor__label {
    color: inherit;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .015em;
    line-height: 1;
    opacity: 0;
    text-align: center;
    text-transform: uppercase;
    transform: translateY(2px);
    transition: opacity 180ms ease, transform 280ms cubic-bezier(.22, 1, .36, 1);
    white-space: nowrap;
  }

  .portfolio-cursor.is-card .portfolio-cursor__label {
    opacity: 1;
    transform: translateY(0);
  }

.home-grid .home-portrait img,
  .home-grid .home-project .project-shot > img {
    transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }

  .home-grid .home-portrait:hover img { transform: scale(1.04); }
  .home-grid .home-project:hover .project-shot > img { transform: scale(1.05); }

  /* Things I make: only the gallery stills (and its grey placeholder) share
     the homepage's restrained media zoom. The hero art and interactive/video
     areas deliberately remain outside this selector. */
  .things-page .things-grid .figure {
    isolation: isolate;
  }

  .things-page .things-grid .figure > img {
    transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }

  .things-page .things-wide img {
    transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }

  .things-page .things-grid:not(.bottom) .figure:not(.blank):hover > img,
  .things-page .things-grid.bottom .figure:first-child:hover > img {
    transform: scale(1.05);
  }

  .things-page .things-grid.bottom .figure:last-child:hover > img {
    transform: translate(-29.88%, 0) scale(1.05);
  }

  .things-page .things-wide:hover img {
    transform: scale(1.05);
  }

  .things-page .things-grid .blank {
    background: transparent;
    opacity: 1;
  }

  .things-page .things-grid .blank::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: '';
    background: #d9d9d9;
    opacity: .3;
    pointer-events: none;
    transform: scale(1);
    transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }

  .things-page .things-grid .blank:hover::before {
    transform: scale(1.05);
  }

  /* Before Product uses the same restrained image zoom as the homepage. */
  .before-product-page .before-project .figure > img {
    transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }

  .before-product-page .before-project .figure:hover > img {
    transform: scale(1.05);
  }

  body.secondary-cursor-active,
  body.secondary-cursor-active * { cursor: none !important; }

  .secondary-page-cursor {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    display: block;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    outline: 0;
    background: #C7C5FF;
    box-shadow: none;
    filter: none;
    mix-blend-mode: normal;
    opacity: 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: none;
    visibility: hidden;
  }

  .secondary-page-cursor.is-visible { visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
  body.custom-cursor-active,
  body.custom-cursor-active * { cursor: auto !important; }
  .portfolio-cursor { display: none !important; }
}
.case-label { flex: 0 0 auto; color: #4c4c4a; }
.project-desc { color: var(--body); font-size: 14px; line-height: 21px; }
.placeholder-label { position: absolute; inset: 0; display: grid; place-items: center; color: #4c4c48; font-size: 14px; line-height: 20px; text-align: center; }
.home-about { align-items: flex-end; background: #fff; }
.home-about-inner { position: relative; display: flex; width: 100%; flex-direction: column; gap: 24px; }
.home-about-inner > span { color: #4c4c4a; font-size: 12px; line-height: 16px; }
.home-about h2 { margin: 0; color: #0e0e0e; font-size: 28px; line-height: 32px; letter-spacing: -1px; font-weight: 400; }
.home-about p { color: #323230; font-size: 14px; line-height: 21px; }
.about-arrow { position: absolute; top: 111px; left: 155px; width: 20px; height: 20px; }

/* About */
body:has(.about-page) .section-utility-bar, body:has(.about-page) .section-page-close { font-family: Helvetica, Arial, sans-serif; }
.about-page { --about-content-width: min(1200px, calc(100% - 48px)); position: relative; display: flex; min-height: 2605px; padding-bottom: 36px; flex-direction: column; gap: 0; overflow: visible; background: var(--paper); font-family: Helvetica, Arial, sans-serif; }
.about-hero { position: relative; display: grid; width: var(--about-content-width); height: 946px; margin-inline: auto; grid-template-columns: 640px 1fr; gap: 142px; overflow: visible; }
.about-left { display: flex; height: 934px; flex-direction: column; gap: 96px; padding-top: 150px; }
.about-copy { display: flex; height: 416px; flex-direction: column; gap: 38px; overflow: hidden; }
.about-title { font-size: 88px; line-height: 107.56px; letter-spacing: -3.67px; font-weight: 400; }
.about-intro { width: 640px; font-size: 18px; line-height: 27px; }
.about-intro p + p { margin-top: 27px; }
.background-block { position: relative; height: 272px; border-block: 1px solid var(--line); }
.background-block > .label { position: absolute; top: 23px; left: 0; text-transform: none; font-size: 14px; line-height: 18px; }
.education-grid { position: absolute; top: 71px; left: 0; display: grid; width: 628px; grid-template-columns: 298px 298px; gap: 32px; }
.edu { font-size: 18px; line-height: 27px; }
.edu h4 { margin-bottom: 8px; color: #0d0d0d; font-size: 18px; line-height: 23px; font-weight: 400; }
.edu p { color: #474747; }
.edu .year { margin-top: 8px; color: var(--muted); }
.about-cv-link { position: absolute; right: 21px; bottom: 10px; display: inline-flex; height: 24px; align-items: center; gap: 4px; color: #0d0d0d; font-size: 18px; line-height: 24px; }
.about-cv-link img { width: 12px; height: 12px; }
.about-cv-link:hover, .about-cv-link:focus-visible { color: #635eb8; }
.about-badge-slot { width: 417px; height: 824px; justify-self: end; }
.about-badge-overlay { position: absolute; top: 0; right: 0; z-index: 20; width: 417px; height: 824px; overflow: visible; pointer-events: none; }
.about-badge { width: 100%; height: 100%; overflow: visible; pointer-events: auto; }
.badge-physics-root { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; }
.badge-physics-root canvas { pointer-events: none !important; }
.hanging-badge { cursor: grab; outline: none; touch-action: none; user-select: none; }
.hanging-badge.is-entering { pointer-events: none; }
.hanging-badge:active, .hanging-badge.is-dragging { cursor: grabbing; }
.hanging-badge__svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hanging-badge__asset { image-rendering: auto; }
.about-section { width: var(--about-content-width); margin-inline: auto; color: #000; }
.about-section h2 { height: 55px; font-size: 36px; line-height: 44px; letter-spacing: -1.5px; font-weight: 400; }
.about-section p { width: min(1164px, 100%); font-size: 18px; line-height: 27px; }
.about-experience { margin-top: 45px; }
.about-experience > p { margin-top: 36px; }
.about-work { margin-top: 147px; }
.about-work .about-section-copy { width: min(1158px, 100%); margin-top: 26px; }
.about-work .about-section-copy p { width: 100%; }
.ai-section { height: 216px; margin-top: 123px; }
.ai-section p { width: min(1158px, 100%); margin-top: 26px; }
.about-closing { width: var(--about-content-width); height: 648px; margin: 110px auto 0; }
.about-closing .closing-art { right: auto; left: 569px; background: url("assets/figma/closing/about-closing-art-transparent.png") center / 100% 100% no-repeat; }
.about-closing .closing-art img { opacity: 0; }

/* Editorial galleries */
.editorial-hero { height: 591px; padding-top: 160px; }
.editorial-hero h1 { width: max-content; height: 88px; }
.editorial-hero .intro { width: min(1440px, calc(100vw - 120px)); margin-top: 48px; font-size: 18px; line-height: 27px; }
.editorial-hero .intro-meta { display: block; margin-top: 27px; color: #535353; }
.before-row-a, .gallery-row { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 582px)); gap: 36px; }
.before-stack { display: grid; height: 718px; grid-template-rows: 359px 332px; gap: 27px; }
.before-row-a > .figure { height: 718px; }
.before-project .figure img { width: 100%; height: 100%; object-fit: cover; }
.p1 { height: 1786px; }
.p1 .gallery-row { margin-top: 27px; }
.p1 .medium-row .figure { height: 616px; }
.gallery-wide { width: 100%; }
.p1 .banner { height: 272px; margin-top: 31px; }
.gallery-caption { display: flex; margin-top: 21px; flex-direction: column; gap: 4px; font-size: 16px; line-height: 21px; }
.gallery-caption .cat { color: #666; font-size: 14px; }
.p2 { height: 1115px; }
.p2 .gallery-row + .gallery-row { margin-top: 38px; }
.standard-row .figure { height: 484px; }
.p2 .gallery-caption { margin-top: 16px; }
.p3 { height: 895px; }
.tall-row .figure { height: 768px; }
.p3 .gallery-caption { margin-top: 22px; }
.p4 { height: 1133px; }
.p4 .gallery-row + .gallery-row { margin-top: 38px; }
.p4 .gallery-caption { margin-top: 10px; }
.p5 { height: 693px; }
.square-row .figure { height: 582px; }
.p5 .gallery-caption { margin-top: 4px; }
.p6 { height: 1405px; }
.p6 .hero-wide { height: 699px; }
.p6 .gallery-row { margin-top: 27px; }
.p6 .gallery-caption { margin-top: 16px; }
.closing { position: relative; height: 648px; }
.closing::before { position: absolute; top: 0; left: -84px; width: calc(100% + 168px); height: 1px; background: #b8b8b8; content: ""; }
.closing-copy { padding-top: 104px; }
.closing h3 { font-size: 24px; line-height: 30px; font-weight: 400; }
.closing-copy > p { width: 490px; margin-top: 16px; font-size: 18px; line-height: 27px; color: #141414; }
.closing-columns { display: grid; width: 473px; margin-top: 66px; grid-template-columns: 1fr 1fr; gap: 80px; }
.closing-col { display: flex; flex-direction: column; gap: 16px; }
.closing-col .label { color: #737373; text-transform: none; font-size: 14px; }
.closing-col a { display: inline-flex; width: max-content; align-items: baseline; gap: 4px; color: #3b3b3b; font-size: 18px; line-height: 24px; white-space: nowrap; }
.closing-link-arrow { display: inline-block; flex: 0 0 auto; font-family: Arial, Helvetica, sans-serif; font-size: .78em; line-height: 1; transform: translateY(-.08em); }
.closing-col a, .back-top { transition: color .2s ease; }
.closing-col a:hover, .closing-col a:focus-visible, .back-top:hover, .back-top:focus-visible { color: #635eb8; }
.closing-art { position: absolute; top: 113px; left: 569px; width: 703px; height: 474px; overflow: hidden; }
.closing-art img { width: 100%; height: 100%; object-fit: fill; }
.back-top { position: absolute; top: 627px; left: 0; display: inline-flex; align-items: baseline; gap: 4px; color: #3b3b3b; font-size: 16px; line-height: 20px; white-space: nowrap; }
.before-bottom-space { height: 115px; }

@media (min-width: 1200px) {
  .about-page { min-height: 2712px; padding-bottom: 0; }
  .about-hero { height: 934px; }
  .about-left { height: 934px; padding-top: 152px; }
  .about-copy { height: 418px; gap: 40px; }
  .about-title { line-height: 108px; }
  .background-block { height: 268px; }
  .background-block > .label { top: 22px; }
  .education-grid { top: 73px; width: 640px; grid-template-columns: 304px 304px; gap: 32px; }
  .edu h4 { margin-bottom: 8px; line-height: 24px; }
  .edu .year { margin-top: 32px; }
  .about-cv-link { right: 0; bottom: 7px; }
  .about-section h2 { height: 44px; }
  .about-section p { width: calc(100% - 40px); }
  .about-experience { height: 138px; margin-top: 128px; }
  .about-experience > p { margin-top: 40px; }
  .about-work { height: 192px; margin-top: 128px; }
  .about-work .about-section-copy { width: calc(100% - 40px); margin-top: 40px; }
  .ai-section { height: 219px; margin-top: 128px; }
  .ai-section p { width: calc(100% - 40px); margin-top: 40px; }
  .closing.about-closing { height: 717px; margin-top: 128px; }
  .about-closing .closing-copy { padding-top: 129px; }
  .about-closing .closing-copy > p { width: 490px; }
  .about-closing .closing-columns { width: 477px; margin-top: 64px; grid-template-columns: 304px 141px; gap: 32px; }
  .about-closing .closing-art { top: 137px; right: auto; left: 560px; width: 712px; height: 480px; }
  .about-closing .back-top { top: 657px; }

  /* Shift only the badge's outer positioned wrapper. This keeps the SVG,
     pointer hit area, and the invisible Rapier physics scene aligned. */
  .about-badge-overlay { right: calc(500px - 35vw); }
}

@media (min-width: 1400px) {
  .about-hero,
  .about-section,
  .about-closing { width: calc(100vw - 240px); margin-right: 0; margin-left: 120px; }

  .about-badge-overlay { right: max(0px, calc(50vw - 708.5px)); }
}

@media (min-width: 1600px) {
  .about-badge-overlay { right: min(250px, calc(60vw - 868.5px)); }
  .about-closing .closing-art { right: -57px; left: auto; }
}

/* Things I make */
.things-page { min-height: 4641px; }
.things-hero { position: relative; height: 564px; padding-top: 150px; }
.things-hero h1 { font-size: 88px; line-height: 107.56px; letter-spacing: -3.67px; font-weight: 400; }
.things-hero p { width: min(980px, 100%); margin-top: 38px; font-size: 18px; line-height: 19px; }
.things-tools { margin-top: 32px; color: #535353; font-family: var(--sans); font-size: 18px; line-height: 24px; font-weight: 400; text-transform: uppercase; }
.things-mushroom { position: absolute; right: 2%; top: 43%; width: 31%; height: auto; transform: translateY(-50%); pointer-events: none; }
.things-sketch { width: calc(100% + 70px); height: 754px; margin-left: -35px; }
.things-sketch img { width: 100%; height: 746px; object-fit: cover; }
.things-grid { display: grid; width: 100%; grid-template-columns: 673px 491px; gap: 36px; margin-top: 36px; }
.things-grid .figure { height: 848px; }
.things-grid .blank { opacity: .3; background: #d9d9d9; }
.things-wide { width: 100%; height: 691px; margin-top: 31px; }
.things-grid.bottom { grid-template-columns: 510px 654px; margin-top: 31px; }
.things-grid.bottom .figure { height: 848px; }
.things-grid.bottom .figure:last-child img { width: 248.52%; max-width: none; height: 107.87%; object-fit: cover; transform: translate(-29.88%, 0); }
.things-closing { margin-top: 80px; }
.things-bottom-space { height: 134px; }

/* The 1440px SITE READY composition remains 1200px wide. On wider displays,
   the Things gallery grows proportionally so the surrounding paper margin is
   approximately 60% smaller instead of leaving a narrow column in the centre. */
@media (min-width: 1500px) {
  .things-page .wrap {
    width: min(1900px, calc(60vw + 480px), calc(100% - 96px));
  }

  .things-page .things-sketch {
    height: auto;
    aspect-ratio: 1270 / 754;
  }

  .things-page .things-sketch img {
    height: 100%;
  }

  .things-page .things-grid {
    grid-template-columns: 673fr 491fr;
  }

  .things-page .things-grid.bottom {
    grid-template-columns: 510fr 654fr;
  }

  .things-page .things-grid .figure,
  .things-page .things-grid.bottom .figure {
    height: auto;
  }

  .things-page .things-grid:not(.bottom) .figure:first-child {
    aspect-ratio: 673 / 848;
  }

  .things-page .things-grid:not(.bottom) .figure:last-child {
    aspect-ratio: 491 / 848;
  }

  .things-page .things-grid.bottom .figure:first-child {
    aspect-ratio: 510 / 848;
  }

  .things-page .things-grid.bottom .figure:last-child {
    aspect-ratio: 654 / 848;
  }

  .things-page .things-wide {
    height: auto;
    aspect-ratio: 1200 / 691;
  }

  /* Let the closing composition share the gallery's wide outer edges while
     preserving the artwork's designed size and crop. */
  .things-page .things-closing {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .things-page .things-closing .closing-art {
    right: 0;
    left: auto;
  }

  /* Keep the 1440px editorial layout intact, but let Before Product use the
     same generous wide-screen canvas as Things I Make. The media retains its
     original proportions rather than being widened and cropped. */
  .before-product-page .wrap {
    width: min(1900px, calc(60vw + 480px), calc(100% - 96px));
  }

  .before-product-page .before-row-a,
  .before-product-page .gallery-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .before-product-page .before-project {
    height: auto;
    margin-bottom: clamp(72px, 5vw, 116px);
  }

  .before-product-page .before-row-a > .figure {
    height: auto;
    aspect-ratio: 582 / 718;
  }

  .before-product-page .before-stack {
    height: auto;
    aspect-ratio: 582 / 718;
    grid-template-rows: 359fr 332fr;
  }

  .before-product-page .p1 .medium-row .figure {
    height: auto;
    aspect-ratio: 582 / 616;
  }

  .before-product-page .p1 .banner {
    height: auto;
    aspect-ratio: 1200 / 272;
  }

  .before-product-page .standard-row .figure {
    height: auto;
    aspect-ratio: 582 / 484;
  }

  .before-product-page .tall-row .figure {
    height: auto;
    aspect-ratio: 582 / 768;
  }

  .before-product-page .square-row .figure {
    height: auto;
    aspect-ratio: 1;
  }

  .before-product-page .p6 .hero-wide {
    height: auto;
    aspect-ratio: 1200 / 699;
  }

  .before-product-page .closing-art {
    right: 0;
    left: auto;
  }

}

/* Interactive Paper Journal */
.things-journal { width: calc(100% + 70px); margin-left: -35px; outline: none; container-type: inline-size; }
.things-journal--portfolio { margin-top: 0; margin-bottom: 36px; }
.things-journal:focus-visible { outline: 2px solid #111; outline-offset: 8px; }
.things-journal__stage { position: relative; width: 100%; padding: clamp(.65rem, 1.7cqw, 1.15rem); isolation: isolate; user-select: none; -webkit-user-select: none; }
.things-journal .aj-book { position: relative; width: 46.8%; aspect-ratio: 26 / 25; margin-inline: auto; perspective: 5500px; perspective-origin: 50% 46%; transform-style: preserve-3d; touch-action: pan-y; cursor: grab; }
.things-journal .aj-book:active { cursor: grabbing; }
.things-journal .aj-ground-shadow { position: absolute; z-index: 0; inset: 9% 4% 0; border-radius: 48%; background: rgba(8,10,20,.42); filter: blur(clamp(.8rem,2.5cqw,1.55rem)); transform: translateY(5%) scaleY(.88); }
.things-journal .aj-stack, .things-journal .aj-stack__sheet, .things-journal .aj-spread { position: absolute; inset: 0; transform-style: preserve-3d; }
.things-journal .aj-stack { z-index: 1; }
.things-journal .aj-stack__sheet { pointer-events: none; }
.things-journal .aj-stack__sheet--1 { transform: translate3d(0,.25%,-1px) scale(.998,.995); }
.things-journal .aj-stack__sheet--2 { transform: translate3d(0,.65%,-2px) scale(.996,.99); }
.things-journal .aj-stack__sheet--3 { transform: translate3d(0,1.05%,-3px) scale(.994,.985); }
.things-journal .aj-stack__sheet--4 { transform: translate3d(0,1.5%,-4px) scale(.992,.98); }
.things-journal .aj-stack__half { position: absolute; top: 0; bottom: 0; width: 50.15%; background: #f8f7f4; border: 1px solid rgba(45,43,38,.09); box-shadow: 0 .14rem 0 rgba(104,101,91,.16); }
.things-journal .aj-stack__half--left { left: 0; transform: rotateY(1.4deg); transform-origin: 100% 50%; border-radius: 8% 0 0 8% / 6% 0 0 6%; }
.things-journal .aj-stack__half--right { right: 0; transform: rotateY(-1.4deg); transform-origin: 0 50%; border-radius: 0 8% 8% 0 / 0 6% 6% 0; }
.things-journal .aj-spread { z-index: 3; }
.things-journal .aj-leaf { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; filter: drop-shadow(0 .2rem .25rem rgba(15,16,22,.05)); }
.things-journal .aj-leaf--left { left: 0; transform: rotateY(1.4deg); transform-origin: 100% 50%; }
.things-journal .aj-leaf--right { right: 0; transform: rotateY(-1.4deg); transform-origin: 0 50%; }
.things-journal .aj-leaf__paper { position: absolute; inset: 0; overflow: hidden; background: #fff; backface-visibility: hidden; }
.things-journal .aj-leaf--left .aj-leaf__paper { border-radius: 3.2% .55% .8% 3% / 4.2% 1.4% 1.4% 4.2%; clip-path: polygon(1.8% 1.1%,23% .5%,52% 0,78% .4%,100% .55%,100% 99.45%,78% 99.6%,52% 100%,23% 99.5%,1.8% 98.9%,0 95.5%,0 4.5%); }
.things-journal .aj-leaf--right .aj-leaf__paper { border-radius: .55% 3.2% 3% .8% / 1.4% 4.2% 4.2% 1.4%; clip-path: polygon(0 .55%,22% .4%,48% 0,77% .5%,98.2% 1.1%,100% 4.5%,100% 95.5%,98.2% 98.9%,77% 99.5%,48% 100%,22% 99.6%,0 99.45%); }
.things-journal .aj-artwork { position: absolute; top: 0; width: 200%; height: 100%; max-width: none; object-fit: fill; pointer-events: none; user-select: none; }
.things-journal .aj-leaf--left .aj-artwork { left: 0; }.things-journal .aj-leaf--right .aj-artwork { right: 0; }
.things-journal .aj-leaf__shadow, .things-journal .aj-leaf__edge { position: absolute; inset-block: 0; pointer-events: none; }
.things-journal .aj-leaf--left .aj-leaf__shadow { right: 0; width: 3%; background: linear-gradient(90deg,transparent,rgba(41,39,34,.075)); mix-blend-mode: multiply; }
.things-journal .aj-leaf--right .aj-leaf__shadow { left: 0; width: 3%; background: linear-gradient(90deg,rgba(41,39,34,.075),transparent); mix-blend-mode: multiply; }
.things-journal .aj-leaf--left .aj-leaf__edge { left: 0; width: .35%; background: rgba(75,70,59,.08); }
.things-journal .aj-leaf--right .aj-leaf__edge { right: 0; width: .35%; background: rgba(75,70,59,.08); }
.things-journal .aj-turn { position: absolute; z-index: 8; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.things-journal .aj-turn__cast-shadow { position: absolute; z-index: 0; top: 2.2%; bottom: 2.2%; border-radius: 48%; background: radial-gradient(ellipse at center,rgba(22,21,19,.72) 0%,rgba(22,21,19,.34) 46%,transparent 78%); transform: translate3d(-50%,1.2%,8px); transform-origin: 50% 50%; pointer-events: none; will-change: left,width,opacity,filter; }
.things-journal .aj-turn__strip { position: absolute; z-index: 1; top: 0; bottom: 0; transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform; }
.things-journal .aj-turn__face { position: absolute; inset: 0; background-color: #fbfaf6; background-repeat: no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.things-journal .aj-turn__face::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(28,27,24,.45),transparent 38%,rgba(255,255,255,.16) 100%); mix-blend-mode: multiply; opacity: var(--aj-face-shade); pointer-events: none; }
.things-journal .aj-turn--backward .aj-turn__face::after { background: linear-gradient(270deg,rgba(28,27,24,.45),transparent 38%,rgba(255,255,255,.16) 100%); }
.things-journal .aj-turn__face--back { transform: rotateY(180deg) translateZ(.1px); }
.things-journal .aj-turn--forward .aj-turn__strip:last-of-type, .things-journal .aj-turn--backward .aj-turn__strip:first-child { border-radius: 0 4% 4% 0 / 0 4.2% 4.2% 0; overflow: hidden; }
.things-journal .aj-controls { display: flex; align-items: center; justify-content: center; min-height: 48px; gap: 12px; margin-top: 16px; color: #111; font-family: var(--sans); font-size: 16px; }
.things-journal .aj-controls button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: 36px; line-height: 1; cursor: pointer; }
.things-journal .aj-controls button:hover:not(:disabled), .things-journal .aj-controls button:focus-visible { background: rgba(0,0,0,.08); }.things-journal .aj-controls button:disabled { opacity: .24; cursor: default; }.things-journal .aj-controls output { min-width: 72px; text-align: center; font-variant-numeric: tabular-nums; }
.things-journal .journal-fallback { width: 100%; height: 100%; object-fit: cover; }

@container (max-width: 560px) { .things-journal__stage { padding-inline: .45rem; }.things-journal .aj-stack__sheet--4 { transform: translate3d(0,1.2%,-4px) scale(.992,.98); } }
@media (prefers-reduced-motion: reduce) { .things-journal .aj-leaf, .things-journal .aj-ground-shadow, .things-journal .aj-turn__cast-shadow { filter: none; } }

/* Shared case study */
.case { width: min(1504px, 100%); margin-inline: auto; overflow: hidden; background: #fbfbfa; border-radius: 12px; }
.case h1 { font-size: 56px; line-height: 1; letter-spacing: -2.2px; font-weight: 400; }
.case .subtitle { max-width: 1100px; font-size: 22px; line-height: 26px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 12px; }
.tag { padding: 5px 8px; border: 1px solid #b8b8b8; color: #6f6d6b; font-size: 13px; line-height: 16px; letter-spacing: .3px; }
.meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.meta-item .label { margin-bottom: 10px; }
.meta-item .value { font-size: 18px; line-height: 24px; }
.story .eyebrow { margin-bottom: 12px; }
.story h2 { font-size: 38px; line-height: 1.1; letter-spacing: -1.2px; font-weight: 400; }
.story p { max-width: 1080px; font-size: 18px; line-height: 26px; }
.section-title { margin-bottom: 40px; }
.section-title .eyebrow { display: block; margin-bottom: 10px; }
.section-title .h2 + .lead { margin-top: 12px; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.outcome-card { min-height: 220px; padding: 28px; border: 1px solid #e3e3df; border-radius: 10px; background: #f5f5f3; }
.outcome-card h3 { margin-bottom: 14px; font-size: 20px; line-height: 24px; font-weight: 400; }
.outcome-card p { color: #545451; font-size: 16px; line-height: 22px; }
.prompt-card { display: flex; min-height: 144px; align-items: center; padding: 28px 34px 28px 142px; border: 1px solid #ddd8ce; border-radius: 12px; background: #fffdf8; font-size: 26px; line-height: 32px; letter-spacing: -.4px; }
.case-media { overflow: hidden; border: 1px solid #e6e6e3; border-radius: 8px; background: #f2f2ef; }
.logo-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.logo { display: grid; height: 80px; place-items: center; padding: 15px; border: 1px solid #e0e0dc; border-radius: 8px; background: #fff; }
.logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.quote-card { min-height: 190px; padding: 28px; border-left: 4px solid var(--orange); border-radius: 4px; background: #f1f1f1; }
.quote-card h3 { margin-bottom: 16px; font-size: 20px; font-weight: 400; }
.quote-card blockquote { color: #555; font-size: 18px; line-height: 27px; font-style: italic; }
.finding-card { padding-top: 12px; border-top: 1px solid #b8b8b4; }
.finding-card .num { margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.finding-card h3 { margin-bottom: 8px; font-size: 20px; font-weight: 400; }
.finding-card p { color: #555; font-size: 15px; line-height: 22px; }
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px; }
.timeline { display: grid; grid-template-columns: repeat(4,1fr); border-top: 2px solid #222; }
.timeline-item { position: relative; padding: 34px 28px 0 0; }
.timeline-item::before { position: absolute; top: -9px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #111; content: ""; }
.timeline-item .date { margin-bottom: 22px; color: #666; font-size: 12px; }
.timeline-item h4 { margin-bottom: 8px; font-size: 20px; font-weight: 400; }
.timeline-item p { color: #555; font-size: 14px; line-height: 20px; }
.status-row { display: flex; flex-wrap: wrap; gap: 18px; }
.status { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.status .dot { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid #888; }
.learning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.learning-card { min-height: 191px; padding: 20px 28px 28px; border: 1px solid #e6e6e6; border-radius: 12px; background: #fff; }
.learning-card.wide { grid-column: 1 / -1; }
.learning-icon { display: grid; width: 40px; height: 40px; margin-bottom: 8px; place-items: center; border-radius: 10px; }
.learning-icon img { width: 20px; height: 20px; }
.learning-icon--balance { background: #d3e5ff; }
.learning-icon--target { background: #ffe5d3; }
.learning-icon--search { background: #d3ffe5; }
.learning-card h3 { margin-bottom: 10px; font-size: 20px; line-height: 26px; font-weight: 600; }
.learning-card p { color: #535353; font-size: 15px; line-height: 22px; }

/* SourceWise */
.sourcewise-page,
.sourcewise-page #root,
html:has(body.sourcewise-page) { background: var(--sourcewise-bg); }
html:has(body.sourcewise-page) { overflow-x: clip; }
.sourcewise-page { width: 100%; min-height: 100vh; }
.sourcewise-page .case { background: var(--sourcewise-bg); }
.sourcewise-case { overflow: visible; }
.sourcewise-hero-visual { position: relative; width: 100vw; height: 560px; margin-left: calc(50% - 50vw); overflow: hidden; background: #494949; }
.sourcewise-hero-content { position: relative; width: min(1504px, 100%); height: 100%; margin-inline: auto; }
.hero-connector { position: absolute; z-index: 0; display: block; pointer-events: none; transform-origin: center; }
.hero-connector--primary { top: 57.68%; left: 27.91%; width: 48.11%; height: 3px; transform: rotate(-42.09deg); }
.hero-connector--secondary { top: 84%; left: 61.75%; width: 17.34%; height: 9.13%; transform: rotate(-45deg); }
.sourcewise-hero-visual .main-shot { position: absolute; top: 58px; left: 4.79%; width: 50.53%; height: 440px; overflow: hidden; border: 1px solid #d1d1d1; background: #fbfbfa; }
.sourcewise-hero-visual .main-shot img { width: 100%; height: 106.6%; object-fit: cover; }
.sourcewise-hero-visual .detail-one { position: absolute; top: 20px; left: 63.16%; width: 19.08%; height: 322px; }
.sourcewise-hero-visual .detail-two { position: absolute; top: 391px; left: 72.21%; width: 23.87%; height: 160px; }
.sourcewise-hero-visual .detail-one img, .sourcewise-hero-visual .detail-two img { width: 100%; height: 100%; object-fit: cover; }
.sourcewise-hero-visual .hero-label { position: absolute; bottom: 25px; left: 4.79%; color: #d4d4d4; font-size: 12px; letter-spacing: .8px; }
.sourcewise-intro { padding: 60px 0 0; }
.sourcewise-intro h1 { margin-top: 36px; }
.sourcewise-intro .subtitle { margin-top: 12px; }
.sourcewise-intro .meta-grid { margin-top: 48px; padding: 34px 0 24px; border-block: 1px solid #d6d6d2; }
.sourcewise-intro .story { padding-top: 68px; }
.sourcewise-intro .story h2 { margin-bottom: 18px; }
.sourcewise-outcomes { margin-top: 65px; gap: 30px; }
.sourcewise-outcomes .outcome-card { display: flex; height: 255px; min-height: 255px; flex-direction: column; align-items: flex-start; padding: 32px 34px 28px; gap: 18px; border: 0; border-radius: 8px; background: #f2f2f2; }
.sourcewise-outcome-spacer { display: block; width: 0; height: 26px; flex: 0 0 26px; }
.sourcewise-outcomes .outcome-card h3 { margin: 0; color: #232323; font-size: 20px; line-height: 26px; font-weight: 600; }
.sourcewise-outcomes .outcome-card p { margin: 0; color: #535353; font-size: 16px; line-height: 24px; }
.sourcewise-prompt { min-height: 144px; margin-top: 36px; padding: 28px 34px; gap: 20px; border: 0; border-radius: 12px; background: #fff1de; color: #535353; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: 0; }
.sourcewise-prompt-icon { width: 88px; height: 88px; flex: 0 0 88px; }
.sourcewise-prompt p { min-width: 0; flex: 1; }
.sw-section { padding-top: 120px; }
.competitor-card { min-height: 347px; padding: 32px; border-radius: 12px; background: #f2f2f2; }
.competitor-table { border-top: 1px solid #d1d1d1; }
.competitor-row { display: flex; height: 120px; align-items: center; }
.competitor-count { display: flex; width: 118px; flex: 0 0 118px; flex-direction: column; align-items: center; }
.competitor-count strong { color: var(--orange); font-size: 48px; line-height: 50px; font-weight: 600; letter-spacing: -1.6px; }
.competitor-count span { font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: -.6px; }
.competitor-divider { width: 1px; height: 88px; flex: 0 0 1px; background: #d1d1d1; }
.competitor-logos { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: space-between; padding: 0 48px; gap: 24px; }
.competitor-logo { width: auto; max-width: 180px; object-fit: contain; }
.competitor-logo--supy { width: 56px; height: 56px; }
.competitor-logo--margin-edge { width: 66px; height: 44px; object-position: center; }
.competitor-logo--c { width: 50px; height: 50px; }
.competitor-logo--marketman { width: 52px; height: 50px; }
.competitor-logo--levelpath { width: 180px; height: 50px; }
.competitor-analysis { display: grid; min-height: 146px; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); }
.competitor-analysis-divider { width: 1px; min-height: 146px; background: #d1d1d1; }
.competitor-findings { padding: 16px 56px; }
.competitor-findings h3 { margin-bottom: 12px; text-align: center; font-size: 24px; line-height: 26px; font-weight: 600; letter-spacing: -.8px; }
.competitor-findings ul { margin: 0; padding-left: 14px; color: #434343; font-size: 16px; line-height: 24px; }
.research-layout { display: grid; grid-template-columns: minmax(0, 800px) minmax(0, 520px); gap: 48px; }
.research-layout .section-title { margin-bottom: 36px; }
.research-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.interview-panel { min-height: 260px; padding: 22px; border-radius: 8px; background: #191919; color: #fff; }
.interview-panel h3 { margin-bottom: 16px; font-size: 24px; font-weight: 400; }
.interview-panel li { margin-bottom: 7px; font-size: 13px; line-height: 18px; }
.research-media { display: grid; grid-template-rows: 331px 334px; gap: 19px; }
.interview-material { overflow: hidden; border: 1px solid #414141; border-radius: 8px; background: #191919; }
.interview-material img { width: 100%; height: 100%; object-fit: cover; }
.research-media .synthesis-placeholder { display: flex; min-height: 0; margin-top: 0; flex-direction: column; align-items: center; justify-content: center; }
.research-media .synthesis-placeholder img { width: 48px; height: 38px; margin-bottom: 35px; }

/* On desktop, the research title occupies the first grid row. Keeping the
   interview panel in the quotes row makes its top edge line up exactly with
   the first two research cards. */
.synthesis-placeholder { display: grid; min-height: 250px; margin-top: 18px; place-items: center; border: 1px solid #ccc; border-radius: 8px; background: #ececec; color: #555; font-size: 14px; text-align: center; }
.hypothesis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hypothesis-card { position: relative; height: 328px; min-height: 328px; overflow: hidden; padding: 26px 28px 24px; border: 1px solid #e6e6e6; border-radius: 12px; background: #ececec; }
.hypothesis-label { display: block; width: 118px; height: 28px; padding-top: 6px; color: #969291; font-size: 12px; line-height: 16px; letter-spacing: .6px; text-align: center; }
.hypothesis-card h3 { margin: 10px 0 10px; color: #232323; font-size: 20px; line-height: 26px; font-weight: 600; }
.hypothesis-card p { max-width: 616px; color: #535353; font-size: 16px; line-height: 24px; }
.hypothesis-card .mini-shot { position: absolute; left: 64px; bottom: 24px; width: calc(100% - 128px); height: 132px; margin: 0; overflow: hidden; background: #fff; }
.hypothesis-card .mini-shot img { position: absolute; max-width: none; object-fit: fill; }
.hypothesis-card--reasoning .mini-shot img { top: -.01%; left: 0; width: 284.25%; height: 100.02%; }
.hypothesis-card--verification .mini-shot img { top: 1.5%; left: 13.56%; width: 71.54%; height: 99.8%; }
.sourcewise-hypotheses .hypothesis-grid { min-height: 353px; }
.design-tension { margin-top: 64px; }
.design-tension > .eyebrow { display: block; margin-bottom: 36px; color: #969291; font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: .8px; }
.design-tension-card { min-height: 98px; padding: 18px 34px 19px; border: 1px solid #e6e6e6; border-radius: 12px; background: rgba(255,241,222,.37); color: #535353; font-size: 24px; line-height: 30px; font-weight: 600; }
.testing-section { padding-top: 120px; }
.iteration-title { margin: 46px 0 18px; font-size: 24px; line-height: 30px; font-weight: 600; }
.testing-section > .section-title { margin-bottom: 48px; }
.testing-findings { margin-bottom: 40px; }
.testing-findings .eyebrow { display: block; margin-bottom: 12px; color: #969291; font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: .8px; }
.testing-findings h3 { font-size: 24px; line-height: 30px; font-weight: 600; }
.iteration-title--first { margin-top: 0; margin-bottom: 10px; }
.iteration-stage { padding: 14px 33px 41px; background: #f2f2f2; }
.iteration-label { display: block; margin: 0 0 24px 33px; color: #969291; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .6px; }
.iteration-stage .case-media { width: 100%; height: 822px; margin-bottom: 28px; border-radius: 10px; }
.iteration-stage .case-media + .iteration-label { margin-top: 0; }
.iteration-stage .case-media:last-child { margin-bottom: 0; }
.iteration-stage .case-media img { object-fit: contain; background: #f2f2f2; }
.sourcewise-prototype-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #f2f2f2; }
.iteration-stage .sourcewise-prototype-video { position: relative; overflow: hidden; container-type: size; }
.iteration-stage .sourcewise-prototype-video video { position: absolute; top: 50%; left: 50%; width: min(100%, 153.409cqh); max-width: none; height: auto; transform: translate(-50%, -49.5833%); object-fit: fill; }
.iteration-stage .sourcewise-prototype-video::before, .iteration-stage .sourcewise-prototype-video::after { position: absolute; z-index: 1; right: 0; left: 0; height: max(0px, calc((100cqh - 65.185cqw) / 2 + 8px)); background: #f2f2f2; content: ""; pointer-events: none; }
.iteration-stage .sourcewise-prototype-video::before { top: 0; }
.iteration-stage .sourcewise-prototype-video::after { bottom: 0; }
.finding-notes { display: grid; max-width: 1040px; margin-top: 20px; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 16px; color: #535353; font-size: 15px; line-height: 20px; }
.finding-label { color: #969291; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .6px; }
.verification-stage { padding: 28px 48px 68px; background: #f2f2f2; }
.verification-labels { display: grid; margin-bottom: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; color: #969291; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .6px; }
.verification-media { gap: 48px; }
.verification-media .case-media { aspect-ratio: 612 / 380.465; border: 0; border-radius: 0; background: #fff; }
.verification-media .case-media img { object-fit: cover; }
.testing-holds-heading { margin-top: 46px; }
.testing-holds-heading h3 { margin-top: 12px; font-size: 24px; line-height: 30px; font-weight: 600; }
.testing-holds { display: grid; width: min(1236px, 100%); margin-top: 32px; padding: 30px 36px 36px; grid-template-columns: 420px minmax(0, 610px); gap: 65.2px; }
.sourcewise-mobile-capture { min-width: 0; margin: 0; }
.sourcewise-mobile-capture figcaption { display: block; margin-bottom: 18px; font-size: 12px; line-height: 16px; letter-spacing: .6px; }
.sourcewise-mobile-stage { display: grid; height: 520px; place-items: center; }
/* The asset is cropped to the full 390 x 844 screen; CSS masks only its rounded corners. */
.sourcewise-mobile-screen { width: min(100%, calc(520px * 390 / 844)); aspect-ratio: 390 / 844; overflow: hidden; border-radius: 5.641% / 2.607%; isolation: isolate; }
.sourcewise-mobile-screen video { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: contain; }
.hold-copy { display: flex; align-self: center; min-width: 0; flex-direction: column; gap: 36px; }
.hold-copy article { padding-bottom: 36px; border-bottom: 1px solid #ddd; }
.hold-copy article:last-child { padding-bottom: 0; border-bottom: 0; }
.hold-copy h3 { margin: 10px 0; font-size: 20px; font-weight: 400; }
.hold-copy p { color: #555; font-size: 15px; line-height: 22px; }
.visual-language { margin-top: 92px; }
.visual-language .section-title { margin-bottom: 36px; }
.visual-grid { display: grid; grid-template-columns: minmax(0, 796fr) minmax(0, 546fr); gap: 39px; }
.visual-grid > * { min-width: 0; }
.visual-shot { height: 416px; overflow: hidden; background: #f2f2f2; }
.visual-shot img { width: 100%; height: 100%; object-fit: cover; }
.visual-shot--status { display: flex; height: 419px; padding: 54px 38px 53px; flex-direction: column; }
.visual-shot--status > img { width: 100%; height: auto; aspect-ratio: 470 / 226; border: 1px solid #e6e6e6; border-radius: 8px; object-fit: cover; }
.status-system { margin-top: 29px; }
.status-system-label { display: block; margin-bottom: 9px; color: #969291; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .6px; }
.status-system .status-row { width: max-content; max-width: 100%; padding: 8px 10px; flex-wrap: nowrap; gap: 22px; border-radius: 6px; background: #f2f2f2; }
.status-system .status { gap: 8px; font-size: 11px; line-height: 14px; font-weight: 500; white-space: nowrap; }
.status-system .status .dot { width: 16px; height: 16px; font-size: 10px; line-height: 11px; }
.status--missing { color: #6e3a3a; }
.status--missing .dot { border-color: #d98b8b; background: #fbeaea; }
.status--uncertain { color: #6b5715; }
.status--uncertain .dot { border-color: #d8b85a; background: #fff3cc; }
.status--progress { color: #1f4d8e; }
.status--progress .dot { border-color: #5e8fd9; background: #e5efff; }
.status--complete { color: #285f40; }
.status--complete .dot { border-color: #86c79b; background: #dcf5e4; }
.visual-caption { margin-top: 24px; color: #535353; font-size: 15px; line-height: 22px; }
.final-designs { padding-top: 120px; }
.final-piece { margin-top: 52px; }
.final-piece .case-media { width: 100%; height: auto; aspect-ratio: 1368 / 850; background: #f1f1f1; }
.final-piece .case-media img { object-fit: contain; }
.final-piece h3 { margin-top: 26px; font-size: 22px; font-weight: 400; }
.final-piece p { margin-top: 8px; color: #555; font-size: 16px; line-height: 24px; }
.sourcewise-opportunities .section-title,
.sourcewise-hypotheses .section-title { margin-bottom: 36px; }
.sourcewise-opportunities .section-title .eyebrow,
.sourcewise-hypotheses .section-title .eyebrow,
.sourcewise-learnings .section-title .eyebrow { margin-bottom: 12px; color: #969291; font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: .8px; }
.sourcewise-opportunities .section-title .h2,
.sourcewise-hypotheses .section-title .h2,
.sourcewise-learnings .section-title .h2 { color: #232323; font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: 0; }
.sourcewise-opportunities .section-title .h2 + .lead { max-width: 1040px; margin-top: 54px; color: #535353; font-size: 18px; line-height: 26px; }
.opportunity-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.opportunity-card { height: 190px; min-height: 190px; padding: 24px; overflow: hidden; border: 1px solid #e6e6e6; border-radius: 12px; background: #fbfbfb; }
.opportunity-icon { display: grid; width: 40px; height: 40px; margin-bottom: 14px; place-items: center; border-radius: 10px; color: #232323; }
.opportunity-icon svg { width: 20px; height: 20px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.opportunity-icon--extraction { background: #ffe5d3; }
.opportunity-icon--comparison { background: #d3e5ff; }
.opportunity-icon--tradeoff { background: #efd3ff; }
.opportunity-icon--verify { background: #d3ffe5; }
.opportunity-card h3 { margin-bottom: 14px; color: #232323; font-size: 20px; line-height: 26px; font-weight: 600; }
.opportunity-card p { color: #535353; font-size: 16px; line-height: 24px; }
.sourcewise-hypotheses .section-title .h2 + .lead { max-width: 1040px; margin-top: 10px; color: #535353; font-size: 18px; line-height: 26px; }
.sourcewise-learnings { padding: 120px 0 0; }
.sourcewise-learnings .research-limitations { margin: 0 0 64px; }
.sourcewise-learnings .research-limitations .eyebrow { color: #969291; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .6px; }
.sourcewise-learnings .research-limitations p { max-width: 1200px; margin-top: 12px; color: #232323; font-size: 16px; line-height: 22px; }
.sourcewise-learnings .section-title { margin-bottom: 48px; }
.sourcewise-case .section-title .eyebrow { margin-bottom: 12px; color: #969291; font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: .8px; }
.sourcewise-case .section-title .h2 { color: #232323; font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: 0; }
.sourcewise-case .section-title .h2 + .lead { max-width: 1040px; margin-top: 8px; color: #535353; font-size: 18px; line-height: 26px; }
.sourcewise-intro + .sw-section .section-title .eyebrow { margin-bottom: 8px; }
.research-layout .section-title .h2 + .lead,
.sourcewise-opportunities .section-title .h2 + .lead { margin-top: 54px; }
.sourcewise-hypotheses .section-title .h2 + .lead { margin-top: 10px; }
.testing-section > .section-title .h2 + .lead { margin-top: 16px; }
.final-piece:first-of-type .case-media { aspect-ratio: 1368 / 816; }
.sourcewise-next-up { display: flex; padding: 80px 0 120px; flex-direction: column; gap: 40px; }
.next-up-divider { width: 100%; height: 1px; flex: 0 0 1px; background: #b8b8b8; }
.sourcewise-next-up > .eyebrow { margin: 0; color: #969291; font-family: var(--sans); font-size: 16px; line-height: 20px; font-weight: 400; letter-spacing: .8px; text-align: center; }
.next-up-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.next-up-card { display: block; min-width: 0; }
.next-up-media { width: 100%; aspect-ratio: 672 / 430; overflow: hidden; border-radius: 12px; background: var(--lavender); }
.next-up-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.next-up-media--fireline { display: grid; place-items: center; background: var(--pink); }
.next-up-media--fireline span { font-size: 12px; line-height: 16px; }
.next-up-title { display: block; margin-top: 16px; color: #232323; font-family: var(--sans); font-size: 20px; line-height: 26px; font-weight: 700; }

/* Fireline */
.fireline-hero { height: 689px; padding-top: 93px; }
.fireline-hero h1 { margin-top: 36px; }
.fireline-hero .subtitle { margin-top: 12px; }
.fireline-hero .meta-grid { margin-top: 47px; padding: 28px 0 24px; border-block: 1px solid #d6d6d2; }
.fireline-hero .story { padding-top: 68px; }
.fireline-hero .story h2 { margin-bottom: 14px; }
.fireline-research { min-height: 4311px; }
.fireline-research .outcome-grid { margin-top: 22px; }
.fire-map { height: 1390px; margin-top: 70px; }
.fire-map img { object-fit: cover; object-position: center top; }
.fire-caption { margin-top: 12px; }
.fire-timeline-block { margin-top: 155px; }
.fire-timeline-block .timeline { margin-top: 86px; }
.fire-prompt { margin-top: 92px; }
.fire-user { margin-top: 88px; }
.fire-findings { margin-top: 62px; }
.fire-insights { margin-top: 54px; }
.fire-insights .case-media { height: 391px; }
.fire-insights .case-media img { object-fit: cover; }
.fire-design { min-height: 1648px; padding: 0 56px 180px; }
.fire-design-inner { width: min(1368px, 100%); margin-inline: auto; }
.state-row { display: grid; min-height: 300px; margin-top: 54px; grid-template-columns: 420px minmax(0, 900px); gap: 48px; }
.state-copy .eyebrow { margin-bottom: 10px; }
.state-copy h3 { margin-bottom: 12px; font-size: 30px; line-height: 32px; letter-spacing: -.8px; font-weight: 400; }
.state-copy p { width: 400px; color: #4b4b48; font-size: 16px; line-height: 24px; }
.state-screen { min-height: 300px; padding: 22px 24px; border: 1px dashed #c8c8c3; border-radius: 8px; background: #f3f2ef; color: #777; font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 1050px) {
  .home-project, .home-about { padding: 28px; }
  .project-content { height: 356px; }
  .about-hero { height: auto; grid-template-columns: minmax(0,1fr) 34vw; gap: 6vw; }
  .about-left { height: auto; }
  .about-badge-slot, .about-badge-overlay { width: 34vw; height: 70vw; }
  .before-row-a, .gallery-row { grid-template-columns: 1fr 1fr; }
  .things-grid { grid-template-columns: 58% 42%; gap: 24px; }
  .things-grid.bottom { grid-template-columns: 44% 56%; }
  .grid-4, .opportunity-grid { grid-template-columns: 1fr 1fr; }
  .research-layout, .visual-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1350px) and (min-width: 1051px) {
  .opportunity-card { height: auto; }
}

@media (max-width: 700px) {
  body:has(.home-grid) { overflow-x: hidden; overflow-y: auto; }
  .wrap, .case-wrap { width: calc(100% - 32px); }
  .h1, .about-title, .things-hero h1 { font-size: 52px; line-height: 1.04; letter-spacing: -2px; }
  .h2, .story h2 { font-size: 31px; }
  .pill-nav { bottom: 18px; }
  .home-grid { height: auto; min-height: auto; grid-template-columns: 1fr; grid-template-rows: none; }
  .home-portrait { order: 1; }
  .home-about { order: 2; }
  .home-project.fireline { order: 3; }
  .home-project.sourcewise { order: 4; }
  .home-project.before { order: 5; }
  .home-project.things { order: 6; }
  .home-cell { min-height: 100vw; }
  .home-project { min-height: 118vw; padding: 28px; }
  .home-project .project-content { height: auto; gap: 20px; }
  .project-shot, .sourcewise .project-shot { height: auto; min-height: 0; flex-basis: auto; aspect-ratio: 400 / 219; }
  .project-title-row h2 { font-size: 30px; line-height: 38px; }
  .home-about { min-height: 100vw; padding: 28px; }
  .about-page { gap: 0; }
  .about-hero { display: flex; width: calc(100% - 40px); height: auto; flex-direction: column; gap: 46px; overflow: visible; }
  .about-left { height: auto; gap: 64px; padding-top: 90px; }
  .about-copy { height: auto; gap: 30px; overflow: visible; }
  .about-intro { width: auto; font-size: 17px; line-height: 26px; }
  .background-block { height: auto; min-height: 430px; }
  .education-grid { position: static; display: grid; width: auto; padding-top: 70px; grid-template-columns: 1fr; gap: 34px; }
  .about-badge-slot, .about-badge-overlay { display: none; }
  .about-section { width: calc(100% - 40px); height: auto; }
  .about-section h2 { height: auto; font-size: 32px; line-height: 39px; letter-spacing: -1.33px; }
  .about-section p { width: auto; font-size: 17px; line-height: 26px; }
  .about-experience { margin-top: 72px; }
  .about-work, .ai-section { margin-top: 96px; }
  .ai-section { padding-bottom: 0; }
  .about-closing { width: calc(100% - 40px); margin-top: 96px; }
  .editorial-hero { height: auto; padding: 100px 0 90px; }
  .editorial-hero h1 { height: auto; }
  .editorial-hero .intro { width: auto; font-size: 17px; line-height: 26px; }
  .before-project, .p1, .p2, .p3, .p4, .p5, .p6 { height: auto; margin-bottom: 72px; }
  .before-row-a, .gallery-row { grid-template-columns: 1fr; gap: 20px; }
  .before-stack { height: auto; grid-template-rows: none; gap: 20px; }
  .before-stack .figure, .before-row-a > .figure, .standard-row .figure, .tall-row .figure, .square-row .figure, .p1 .medium-row .figure { height: auto; aspect-ratio: 1 / 1; }
  .p1 .gallery-row, .p6 .gallery-row, .p2 .gallery-row + .gallery-row, .p4 .gallery-row + .gallery-row { margin-top: 20px; }
  .p1 .banner, .p6 .hero-wide { height: auto; aspect-ratio: 16 / 9; margin-top: 20px; }
  .closing { display: flex; height: auto; padding: 48px 0 120px; flex-direction: column; }
  .closing::before { right: 0; left: 0; width: 100%; }
  .closing-copy { padding-top: 0; }
  .closing-copy > p { width: auto; }
  .closing-columns { width: 100%; grid-template-columns: 1fr 1fr; gap: 30px; }
  .closing-art { position: static; width: 100%; height: auto; margin-top: 48px; aspect-ratio: 703 / 474; }
  .back-top { position: static; display: inline-flex; margin-top: 56px; }
  .things-page { min-height: 0; }
  .things-hero { height: auto; padding: 100px 0; }
  .things-hero p { width: auto; font-size: 17px; line-height: 24px; }
  .things-mushroom { position: static; display: block; width: 42%; margin: 28px 0 0 auto; transform: none; }
  .things-sketch { width: 100%; height: auto; margin-left: 0; aspect-ratio: 1270 / 746; }
  .things-sketch img { height: 100%; }
  .things-journal--portfolio { width: 100%; margin: 0 0 24px; }
  .things-grid, .things-grid.bottom { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
  .things-grid .figure, .things-grid.bottom .figure { height: auto; aspect-ratio: 3 / 4; }
  .things-grid .blank { aspect-ratio: 4 / 3; }
  .things-wide { height: auto; margin-top: 20px; aspect-ratio: 1200 / 691; }
  .things-closing { margin-top: 72px; }
  .case { width: 100%; border-radius: 0; }
  .case h1 { font-size: 48px; }
  .case .subtitle { font-size: 19px; line-height: 27px; }
  .meta-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .grid-2, .grid-3, .grid-4, .opportunity-grid, .media-grid, .hypothesis-grid, .learning-grid { grid-template-columns: 1fr; }
  .learning-card.wide { grid-column: auto; }
  .prompt-card { padding: 28px; font-size: 22px; line-height: 29px; }
  .sourcewise-hero-visual { width: 100%; height: 390px; margin-left: 0; }
  .sourcewise-hero-visual .main-shot { top: 42px; left: 16px; width: 78%; height: 250px; }
  .sourcewise-hero-visual .detail-one { top: 18px; right: 12px; left: auto; width: 30%; height: 165px; }
  .sourcewise-hero-visual .detail-two { top: 264px; right: 8px; left: auto; width: 43%; height: 90px; }
  .sourcewise-hero-visual .hero-label { left: 16px; bottom: 18px; }
  .sourcewise-hero-visual .hero-connector { display: none; }
  .competitor-card { min-height: 0; padding: 20px; }
  .competitor-row { height: auto; flex-direction: column; padding: 22px 0 24px; }
  .competitor-count { width: auto; flex-basis: auto; }
  .competitor-divider { width: 100%; height: 1px; margin: 22px 0; }
  .competitor-logos { width: 100%; padding: 0; gap: 14px; }
  .competitor-logo--supy { width: 38px; height: 38px; }
  .competitor-logo--margin-edge { width: 46px; height: 31px; }
  .competitor-logo--c { width: 36px; height: 36px; }
  .competitor-logo--marketman { width: 38px; height: 37px; }
  .competitor-logo--levelpath { width: 92px; height: 30px; }
  .competitor-analysis { grid-template-columns: 1fr; }
  .competitor-analysis-divider { width: 100%; min-height: 1px; height: 1px; }
  .competitor-findings { padding: 22px 8px; }
  .research-quotes { grid-template-columns: 1fr; }
  .iteration-stage { padding: 18px; }
  .iteration-stage .case-media { height: auto; aspect-ratio: 16 / 10; margin-bottom: 24px; }
  .finding-notes { flex-direction: column; }
  .testing-holds { grid-template-columns: 1fr; }
  .sourcewise-mobile-stage { height: auto; }
  .visual-shot { height: auto; aspect-ratio: 16 / 10; }
  .visual-shot--status { min-height: 360px; padding: 32px 20px; aspect-ratio: auto; }
  .status-system .status-row { width: 100%; flex-wrap: wrap; gap: 10px 14px; }
  .final-piece .case-media { aspect-ratio: 16 / 10; }
  .sourcewise-next-up { padding: 88px 0 120px; }
  .next-up-grid { grid-template-columns: 1fr; gap: 32px; }
  .fireline-hero { height: auto; padding: 80px 0 74px; }
  .fireline-hero .meta-grid { margin-top: 40px; }
  .fireline-research { min-height: 0; padding-bottom: 100px; }
  .fire-map { height: auto; aspect-ratio: 1 / 1.02; margin-top: 50px; }
  .fire-timeline-block, .fire-user, .fire-findings { margin-top: 90px; }
  .timeline { grid-template-columns: 1fr; gap: 28px; border-top: 0; }
  .timeline-item { padding: 0 0 28px 24px; border-left: 2px solid #222; }
  .timeline-item::before { top: 0; left: -9px; }
  .fire-insights .case-media { height: auto; aspect-ratio: 16 / 10; }
  .fire-design { min-height: 0; padding: 80px 16px 160px; }
  .state-row { grid-template-columns: 1fr; gap: 24px; }
  .state-copy p { width: auto; }
}

@media (prefers-reduced-motion: reduce) { .pill-nav { transition: none; } }

/* Responsive system -------------------------------------------------------
   Desktop keeps the art-directed compositions above. Tablet and mobile use
   fluid geometry and preserve each media item's intended aspect ratio. */

@media (min-width: 1200px) and (max-height: 900px) {
  .home-project,
  .home-about { padding: clamp(20px, 3.2vh, 32px); }

  .home-project { gap: clamp(8px, 1.4vh, 14px); }

  .home-project .project-content {
    height: min(320px, calc(50svh - clamp(64px, 9vh, 92px)));
    gap: clamp(8px, 1.5vh, 16px);
  }

  .home-project .project-shot,
  .home-project.sourcewise .project-shot {
    height: auto;
    min-height: 112px;
    flex: 1 1 auto;
  }

  .project-title-row { height: auto; min-height: 32px; }
  .project-title-row h2 { font-size: clamp(24px, 3.2vh, 30px); line-height: 1.15; }
  .project-desc { min-height: 0; font-size: 13px; line-height: 18px; }
  .home-about-inner { gap: clamp(14px, 2vh, 22px); }
  .home-about h2 { font-size: clamp(23px, 3vh, 28px); line-height: 1.1; }
  .home-about p { font-size: 13px; line-height: 18px; }
}

@media (min-width: 701px) and (max-width: 1199px) {
  :root { --tablet-gutter: clamp(24px, 4vw, 48px); }

  body:has(.home-grid) { overflow-x: hidden; overflow-y: auto; }
  .wrap,
  .case-wrap { width: calc(100% - (2 * var(--tablet-gutter))); }

  .h1,
  .about-title,
  .things-hero h1 { font-size: clamp(58px, 8vw, 78px); line-height: 1.02; letter-spacing: -.04em; }
  .h2,
  .story h2 { font-size: clamp(32px, 4.2vw, 38px); }

  /* Home becomes a balanced two-column index on tablet. */
  .home-grid {
    height: auto;
    min-height: 100svh;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
  .home-cell { min-height: 0; aspect-ratio: 1 / 1; }
  .home-project,
  .home-about { padding: clamp(24px, 3.5vw, 36px); }
  .home-project { justify-content: flex-end; gap: 12px; }
  .home-project .project-content { height: auto; gap: clamp(12px, 2vw, 18px); }
  .home-project .project-shot,
  .home-project.sourcewise .project-shot { height: auto; min-height: 0; flex-basis: auto; aspect-ratio: 400 / 219; }
  .project-title-row { height: auto; min-height: 34px; }
  .project-title-row h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.15; }
  .project-desc { min-height: 0; font-size: 13px; line-height: 19px; }
  .home-about h2 { font-size: clamp(24px, 3.2vw, 28px); line-height: 1.12; }
  .about-arrow { top: 105px; }

  /* Keep the ID card aligned with its real slot and fully draggable. */
  .about-page { --about-content-width: calc(100% - (2 * var(--tablet-gutter))); min-height: 0; padding-bottom: 48px; }
  .about-hero {
    height: auto;
    min-height: 820px;
    grid-template-columns: minmax(0, 1fr) clamp(290px, 34vw, 380px);
    gap: clamp(36px, 5vw, 72px);
  }
  .about-left { height: auto; min-width: 0; gap: 72px; padding-top: 112px; }
  .about-copy { height: auto; gap: 30px; overflow: visible; }
  .about-intro { width: auto; font-size: 17px; line-height: 25px; }
  .about-intro p + p { margin-top: 22px; }
  .background-block { height: auto; min-height: 420px; }
  .education-grid { position: static; width: 100%; padding-top: 72px; grid-template-columns: 1fr; gap: 28px; }
  .edu,
  .edu h4 { font-size: 17px; line-height: 24px; }
  .about-badge-slot,
  .about-badge-overlay { width: clamp(290px, 34vw, 380px); height: auto; aspect-ratio: 417 / 824; }
  .about-badge-overlay { right: 0; }
  .about-section { width: var(--about-content-width); height: auto; }
  .about-experience { margin-top: 72px; }
  .about-work, .ai-section { margin-top: 96px; }
  .ai-section { padding-bottom: 0; }
  .ai-section p { width: 100%; }
  .about-closing { width: var(--about-content-width); margin-top: 96px; }

  /* Editorial galleries keep their proportions while their columns flex. */
  .editorial-hero { height: auto; padding: 120px 0 100px; }
  .editorial-hero h1 { width: auto; height: auto; }
  .editorial-hero .intro { width: min(640px, 76%); }
  .before-project,
  .p1,
  .p2,
  .p3,
  .p4,
  .p5,
  .p6 { height: auto; margin-bottom: 96px; }
  .before-row-a,
  .gallery-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
  .before-row-a > .figure { height: auto; aspect-ratio: 582 / 718; }
  .before-stack { height: auto; grid-template-rows: 1.081fr 1fr; gap: clamp(16px, 2.2vw, 24px); }
  .p1 .medium-row .figure { height: auto; aspect-ratio: 582 / 616; }
  .p1 .banner { height: auto; aspect-ratio: 1200 / 272; }
  .standard-row .figure { height: auto; aspect-ratio: 582 / 484; }
  .tall-row .figure { height: auto; aspect-ratio: 582 / 768; }
  .square-row .figure { height: auto; aspect-ratio: 1; }
  .p6 .hero-wide { height: auto; aspect-ratio: 1200 / 699; }

  /* Things I Make: fluid media, stable videos, touch-friendly journal. */
  .things-page { min-height: 0; }
  .things-hero { height: auto; min-height: 500px; padding-top: 120px; padding-right: 34%; }
  .things-hero p { width: 100%; line-height: 24px; }
  .things-mushroom { right: 0; top: 47%; width: 32%; }
  .things-journal,
  .things-sketch { width: 100%; height: auto; margin-left: 0; }
  .things-journal .aj-book { width: min(82%, 820px); }
  .things-grid { grid-template-columns: 57.8fr 42.2fr; gap: clamp(20px, 3vw, 32px); }
  .things-grid .figure { height: auto; aspect-ratio: 673 / 848; }
  .things-grid .figure:nth-child(2) { aspect-ratio: 491 / 848; }
  .things-wide { height: auto; aspect-ratio: 1200 / 691; }
  .things-grid.bottom { grid-template-columns: 43.8fr 56.2fr; }
  .things-grid.bottom .figure:first-child { height: auto; aspect-ratio: 510 / 848; }
  .things-grid.bottom .figure:last-child { height: auto; aspect-ratio: 654 / 848; }

  /* Shared closing section scales without changing its composition. */
  .closing { height: clamp(590px, 67vw, 648px); }
  .closing::before { right: 0; left: 0; width: 100%; }
  .closing-copy > p,
  .closing-columns { width: 44%; }
  .closing-columns { gap: clamp(24px, 4vw, 56px); }
  .closing-art { right: 0; left: auto; width: 53%; height: auto; aspect-ratio: 703 / 474; }
  .about-closing .closing-art { right: 0; left: auto; }
  .back-top { top: auto; bottom: 0; }

  /* Case studies use a two-column tablet rhythm instead of squeezed desktop. */
  .case h1 { font-size: clamp(46px, 6.5vw, 56px); }
  .grid-4,
  .opportunity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sourcewise-outcomes .outcome-card { height: auto; min-height: 230px; }
  .sourcewise-hero-visual { width: 100%; height: clamp(430px, 48vw, 540px); margin-left: 0; }
  .sourcewise-hero-visual .main-shot { top: 10%; height: 78%; }
  .sourcewise-hero-visual .detail-one { height: 58%; }
  .sourcewise-hero-visual .detail-two { top: 69%; height: 28%; }
  .iteration-stage { padding: clamp(28px, 5vw, 48px); }
  .iteration-stage .case-media { height: auto; aspect-ratio: 1368 / 815; margin-bottom: clamp(36px, 5vw, 60px); }
  .testing-holds { padding-inline: 0; grid-template-columns: minmax(240px, .8fr) 1fr; gap: 36px; }
  .fireline-research { min-height: 0; padding-bottom: 120px; }
  .fire-map { height: auto; aspect-ratio: 1368 / 1390; }
  .fire-design { min-height: 0; padding-inline: var(--tablet-gutter); }
  .state-row { grid-template-columns: minmax(260px, .75fr) 1.25fr; gap: 32px; }
  .state-copy p { width: auto; }
}

@media (max-width: 700px) {
  :root { --mobile-gutter: clamp(16px, 5vw, 24px); }

  body { overflow-wrap: break-word; }
  .wrap,
  .case-wrap { width: calc(100% - (2 * var(--mobile-gutter))); }
  .pill-nav { bottom: max(18px, env(safe-area-inset-bottom)); }

  .home-cell { min-height: 0; aspect-ratio: 1 / 1; }
  .home-project { min-height: 0; aspect-ratio: auto; padding: clamp(22px, 7vw, 30px); }
  .home-project .project-meta { height: auto; min-height: 16px; }
  .home-project .project-content { min-height: 0; }
  .home-about { min-height: 0; aspect-ratio: 1 / 1; }
  .project-tags { flex-wrap: wrap; }
  .project-title-row h2 { white-space: normal; }

  .about-page { --about-content-width: calc(100% - (2 * var(--mobile-gutter))); min-height: 0; }
  .about-hero { width: var(--about-content-width); align-items: stretch; }
  .about-badge-slot { width: min(100%, 417px); align-self: center; }
  .about-badge-overlay {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    width: min(100%, 417px);
    transform: translateX(-50%);
  }
  .education-grid { padding-bottom: 58px; }
  .about-cv-link { right: 0; }
  .about-section,
  .about-closing { width: var(--about-content-width); }
  .ai-section { padding-bottom: 0; }

  .editorial-hero .intro { width: 100%; }
  .before-row-a > .figure { aspect-ratio: 582 / 718; }
  .before-stack .figure:first-child { aspect-ratio: 582 / 359; }
  .before-stack .figure:last-child { aspect-ratio: 582 / 332; }
  .p1 .medium-row .figure { aspect-ratio: 582 / 616; }
  .p1 .banner { aspect-ratio: 1200 / 272; }
  .standard-row .figure { aspect-ratio: 582 / 484; }
  .tall-row .figure { aspect-ratio: 582 / 768; }
  .square-row .figure { aspect-ratio: 1; }
  .p6 .hero-wide { aspect-ratio: 1200 / 699; }

  .things-hero { padding-bottom: 72px; }
  .things-tools { font-size: 15px; line-height: 22px; }
  .things-journal .aj-book { width: 94%; }
  .things-journal .aj-controls { margin-top: 8px; }
  .things-grid .figure:first-child { aspect-ratio: 673 / 848; }
  .things-grid .figure:nth-child(2) { aspect-ratio: 491 / 848; }
  .things-grid.bottom .figure:first-child { aspect-ratio: 510 / 848; }
  .things-grid.bottom .figure:last-child { aspect-ratio: 654 / 848; }
  .video-playback-status { right: 10px; bottom: 10px; }

  .closing { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .closing-columns { gap: clamp(20px, 8vw, 42px); }
  .closing-col a { font-size: 16px; line-height: 22px; }
  .about-closing .closing-art { right: auto; }

  .sourcewise-intro { padding-top: 48px; }
  .sourcewise-intro h1 { margin-top: 28px; }
  .sourcewise-intro .meta-grid { margin-top: 36px; }
  .sourcewise-outcomes .outcome-card { height: auto; min-height: 0; }
  .sourcewise-prompt { align-items: flex-start; padding: 24px; font-size: 20px; line-height: 28px; }
  .sourcewise-prompt-icon { width: 58px; height: 58px; flex-basis: 58px; }
  .sw-section,
  .testing-section,
  .final-designs { padding-top: 88px; }
  .hypothesis-card { height: auto; min-height: 360px; }
  .hypothesis-card .mini-shot { right: 20px; left: 20px; width: auto; }
  .design-tension-card { padding: 18px 22px; font-size: 20px; line-height: 27px; }
  .testing-holds { padding: 0; grid-template-columns: 1fr; gap: 32px; }
  .fireline-hero { padding-top: 64px; }
  .fire-design { padding-bottom: 128px; }
}

@media (max-width: 430px) {
  .h1,
  .about-title,
  .things-hero h1 { font-size: clamp(44px, 13vw, 52px); }
  .project-title-row h2 { font-size: 27px; }
  .project-desc { font-size: 13px; line-height: 19px; }
  .closing-columns { grid-template-columns: 1fr; gap: 34px; }
  .closing-art { margin-top: 40px; }
  .meta-grid { grid-template-columns: 1fr; }
  .tag-row { gap: 8px; }
  .sourcewise-prompt { flex-direction: column; }
  .sourcewise-hero-visual .detail-one { width: 36%; }
  .sourcewise-hero-visual .detail-two { width: 48%; }
}

/* Touch affordances remain visible without relying on hover. */
@media (hover: none), (pointer: coarse) {
  .pill-nav { width: 216px; height: 52px; }
  .pill-nav a { width: 104px; height: 44px; }
  .things-video .video-playback-status { opacity: 1; }
}