/* ==========================================================================
   Melissa Tran — portfolio
   Tokens → base → nav → hero → work (rail + grid) → about → motion → responsive
   ========================================================================== */

:root {
  /* colour */
  --white: #fff;
  --bg: #f7f7f7;
  --ink: #000;
  --ink-2: #525252;      /* body copy */
  --ink-3: #6b6b6b;      /* inactive nav */
  --mute: #737373;       /* mono labels (AA on #f7f7f7) */
  --faint: #8d8d8d;      /* large index numerals */
  --orange: #ff632f;
  --line: rgba(0, 0, 0, 0.08);

  /* type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-bio: 20px;
  --fs-title: 32px;
  --fs-index: 24px;
  --fs-body: 16px;
  --fs-mono: 12px;

  /* space */
  --gutter: 32px;
  --nav-h: 83px;
  --work-pad: 32px;
  --col-gap: clamp(48px, 8.333vw, 120px);
  --card-gap: 16px;
  --radius: 16px;
  --maxw: 1600px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.is-locked { overflow: hidden; }

/* ---------- scrollbars: native bars hidden on mouse devices, replaced by a slim overlay thumb (see main.js) ---------- */
@media (hover: hover) and (pointer: fine) {
  html, .sheet__scroll { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, .sheet__scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
.sb {
  position: fixed; top: 6px; bottom: 6px; right: 2px; width: 14px; z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
.sb--sheet { position: absolute; top: 12px; bottom: 12px; right: 2px; z-index: 6; }
.sb.is-active { opacity: 1; pointer-events: auto; }
.sb__thumb {
  position: absolute; top: 0; right: 3px; width: 5px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  transition: background-color 0.3s ease, width 0.3s var(--ease), right 0.3s var(--ease);
  will-change: transform; touch-action: none; cursor: default;
}
.sb__thumb:hover, .sb.is-dragging .sb__thumb { background: rgba(0, 0, 0, 0.45); width: 7px; right: 2px; }
@media (hover: none), (pointer: coarse) { .sb { display: none; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; overflow: visible; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 4px;
}
::selection { background: rgba(255, 99, 47, 0.22); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 10px 14px; background: var(--ink); color: #fff; border-radius: 8px;
  font-size: 14px; transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* mono label style shared across the site */
.label, .nav__name, .more {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ---------- hand-drawn strokes (draw-on) ---------- */
.dr path {
  fill: none;
  stroke: var(--orange);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.33, 0.7, 0.3, 1) calc(var(--dl, 0s) + var(--dd, 0s));
}
.dr.is-drawn path { stroke-dashoffset: 0; }
.dr path { filter: url(#rough); }
.no-motion .dr path { transition: none; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  background: var(--white);
}

.nav__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.tabs { position: relative; display: flex; gap: 16px; align-items: center; }
.tab {
  position: relative; display: block;
  margin: -14px -8px; padding: 14px 8px;      /* ≥44px tap target, layout unchanged */
  font-size: 16px; font-weight: 400; letter-spacing: 0;
  color: var(--ink-3);
  transition: color 0.3s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab::after {                                  /* reserve bold width so tabs never shift */
  content: attr(data-label); display: block; height: 0; visibility: hidden;
  font-weight: 500; overflow: hidden;
}
.tab[aria-current="page"] { color: var(--ink); font-weight: 500; }
.tab[aria-current="page"]::after { display: none; }

.tabs__ul {
  position: absolute; left: 0; top: 26px; height: 10px;
  width: var(--uw, 59px);
  transform: translateX(var(--ux, 0px));
  pointer-events: none;
}
.tabs__ul[data-variant="projects"] .v--about, .tabs__ul[data-variant="about"] .v--projects { display: none; }
.tabs__ul.is-drawn path { transition-delay: calc(var(--dl, 0s) + var(--dd, 0s)); }
.tabs__ul path { transition-duration: 0.7s; }

.nav__name { padding-right: 8px; transition: opacity 0.45s var(--ease), visibility 0.45s; }
/* the badge stands in for the name while it is on screen */
html.hide-name .nav__name { opacity: 0; visibility: hidden; }

/* ---------- views ---------- */
.js .view:not(.is-current) { display: none; }
.view {
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.view.is-out { opacity: 0; transform: translate3d(0, 10px, 0); }


/* ---------- ID badge in the header ---------- */
.hero-badge {                                   /* no clipping: the badge hangs over the work section, shadow and all */
  position: absolute; top: 0; left: 0; right: 0; height: 0;
  overflow-x: clip; overflow-y: visible; pointer-events: none; z-index: 60;     /* clip sideways only */
}
.hero-badge__sway {
  position: absolute; top: 4px; right: calc(max(0px, calc((100vw - 1664px) / 2)) - 48px);
  width: min(450px, max(380px, calc(100vw - 640px))); aspect-ratio: 510 / 460;   /* full size from ~1150px up, so the same amount of badge shows on wide screens */
  transform-origin: 53.7% 12.6%;                       /* the clip: swings from here */
  animation: badge-in 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards, badge-sway 8s ease-in-out 3.2s infinite alternate;
}
.hero-badge__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.badge-hit { pointer-events: auto; }                 /* only the painted badge reacts, not the empty space around it */
.badge-photo[href=""] { display: none; }


@keyframes badge-in {
  0% { transform: rotate(9deg); opacity: 0; } 12% { opacity: 1; }
  32% { transform: rotate(-4.2deg); } 52% { transform: rotate(2.2deg); } 72% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); }
}
@keyframes badge-sway { from { transform: rotate(-0.9deg); } to { transform: rotate(0.9deg); } }
@media (max-width: 1000px) { .hero-badge { display: none; } }

/* ---------- hero / bio ---------- */
.hero {
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: 72px;
  background: var(--white);
  position: relative; z-index: 1;
}
.bio {
  max-width: 560px;
  font-size: var(--fs-bio);
  letter-spacing: -0.015em;      /* −0.3px @20 */
  line-height: 1.3;              /* 26px @20 */
  color: var(--ink);
  will-change: opacity, transform;
}
.hero:not(.hero--about) .bio { padding-top: 8px; }
.hero--about { padding-bottom: 64px; }

/* word mask reveal */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.18em; margin-bottom: -0.18em; }
.w--free { overflow: visible; }
.w__i { display: inline-block; }
.js [data-split] .w__i { transform: translate3d(0, 108%, 0); opacity: 0; }
.js [data-split].is-revealed .w__i {
  transform: none; opacity: 1;
  transition: transform 0.9s var(--ease) calc(var(--k, 0) * 28ms + 0.15s), opacity 0.7s var(--ease) calc(var(--k, 0) * 28ms + 0.15s);
}
.js [data-split] .w--free .w__i { transform: translate3d(0, 10px, 0); }

/* soft orange highlight on key phrases in the bio, the same tint as the project titles */
.bio .hl { background: rgba(255, 99, 47, 0.18); padding: 0.04em 0; }
.bio .hl--s { padding-left: 0.14em; margin-left: -0.14em; }
.bio .hl--e { padding-right: 0.14em; margin-right: -0.14em; }
.js [data-split] .hl--gap { opacity: 0; }                       /* the tint between highlighted words fades in with the words, not before them */
.js [data-split].is-revealed .hl--gap { opacity: 1; transition: opacity 0.7s var(--ease) calc(var(--k, 0) * 28ms + 0.15s); }
.js .bio.is-revealed .w--free .w__i { transform: none; }   /* highlighted phrases sit level with the text once revealed */

/* hand-drawn marks around words */
.mark { position: relative; display: inline-block; }
.mark svg { position: absolute; pointer-events: none; }
.mark--underline svg { left: -2px; width: calc(100% + 4px); bottom: -5px; height: 8px; }
.mark--underline svg path { stroke-width: 2.6; }


/* ---------- work section ---------- */
.work {
  background: var(--bg);
  padding-block: var(--work-pad);
  position: relative; z-index: 0;
}
.work__inner { padding-inline: var(--gutter); }

.projects { display: flex; flex-direction: column; gap: var(--card-gap); min-width: 0; }
.project { display: flex; flex-direction: column; gap: var(--card-gap); }

.rows { display: flex; flex-direction: column; gap: var(--card-gap); container-type: inline-size; }
.row {
  display: flex; gap: var(--card-gap);
  height: calc((100vw - 64px) * 0.68);                   /* fallback */
  height: calc(100cqw * 600 / 880);                      /* Figma: 880 × 600 */
}
.card {
  position: relative; min-width: 0;
  flex: var(--w) 1 0;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);       /* keep radius clip crisp during transforms */
}
.card__media {
  display: block; width: 100%; height: 100%; position: relative; z-index: 0;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.9s var(--ease), filter 0.6s ease, opacity 0.6s ease;
  will-change: transform;
}

/* reveal on entry */
.js .card { opacity: 0; transform: translate3d(0, 28px, 0); }
.js .card.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s);
}

/* home: project images are links to their case study, with a slight lift on hover */
.project .rows .card { cursor: pointer; }
.js .project .rows .card.is-in {
  transition: opacity 0.9s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s),
    translate 0.5s var(--ease), scale 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.project .rows .card:hover, .project .rows .card:focus-visible { translate: 0 -3px; scale: 1.003; box-shadow: 0 22px 44px -22px rgba(24, 24, 48, 0.4); }
.project .rows .card:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .project .rows .card:hover, .project .rows .card:focus-visible { translate: none; scale: none; } }

/* ----- project backgrounds: soft blended gradients + fine grain (Set B). Per-image direction comes from --g1x/--g1y/--g2x/--g2y ----- */
.ph--1 {
  background:
    radial-gradient(86% 78% at var(--g1x,12%) var(--g1y,92%), rgba(142,162,198,0.80) 0%, rgba(142,162,198,0.50) 28%, rgba(142,162,198,0.21) 55%, rgba(142,162,198,0.00) 82%),
    radial-gradient(68% 60% at var(--g2x,94%) var(--g2y,8%), rgba(183,174,212,0.78) 0%, rgba(183,174,212,0.48) 28%, rgba(183,174,212,0.20) 55%, rgba(183,174,212,0.00) 82%),
    #e6ecf4;
}
.ph--2 {
  background:
    radial-gradient(86% 78% at var(--g1x,88%) var(--g1y,84%), rgba(143,178,155,0.78) 0%, rgba(143,178,155,0.48) 28%, rgba(143,178,155,0.20) 55%, rgba(143,178,155,0.00) 82%),
    radial-gradient(70% 60% at var(--g2x,8%) var(--g2y,8%), rgba(229,225,179,0.82) 0%, rgba(229,225,179,0.51) 28%, rgba(229,225,179,0.21) 55%, rgba(229,225,179,0.00) 82%),
    #e5eee8;
}
.ph--3 {
  background:
    radial-gradient(86% 78% at var(--g1x,8%) var(--g1y,90%), rgba(160,147,197,0.78) 0%, rgba(160,147,197,0.48) 28%, rgba(160,147,197,0.20) 55%, rgba(160,147,197,0.00) 82%),
    radial-gradient(70% 62% at var(--g2x,94%) var(--g2y,12%), rgba(215,172,191,0.78) 0%, rgba(215,172,191,0.48) 28%, rgba(215,172,191,0.20) 55%, rgba(215,172,191,0.00) 82%),
    #ece6f2;
}
.ph { position: relative; }
.ph::after {                                   /* grain on the coloured background only; the screen sits above it */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 -.25'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 110px; opacity: 0.3; mix-blend-mode: multiply;
}


/* ----- project 1: real screenshots (geometry in cqw of each card, so it scales with the grid) ----- */
.row--tall { height: calc((100vw - 64px) * 0.8); height: calc(100cqw * 680 / 880); }      /* 880 × 680 */
.pshot, .pshot-sheet { position: absolute; z-index: 2; display: block; height: auto; border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.3); }
.rows .row--wide { height: calc(100cqw * 669 / 880); }                                                  /* 880 × 669: whole image + 40px margins */
.card--p1a .pshot { top: 4.545cqw; left: 4.545cqw; width: 90.909cqw; }                                   /* fully visible, no bleed */
.card--p1b .pshot { top: 11.905cqw; left: 11.905cqw; width: 76.19cqw; border-radius: 10px 10px 0 0; }  /* bleeds bottom */
.pshot-lay { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); top: 7.576cqw; bottom: 7.576cqw; aspect-ratio: 1440 / 2000; }  /* sheet fully visible */
.pshot-sheet { top: 0; left: 18.8194%; width: 62.2917%; height: 100%; }
.pshot-ann { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 767px) {
  .rows .row--tall { height: auto; flex-direction: column; }
  .row--tall .card { flex: none; width: 100%; }
  .card--p1b { aspect-ratio: 1 / 1.2; }
  .card--p1c { aspect-ratio: 528 / 680; }
  .card--p1b .pshot { top: 6cqw; left: 6cqw; width: 88cqw; }
}


/* ----- project 2: real screenshots (cqw of each card; margins 40px at design size) ----- */
.rows .row--v { height: calc(100cqw * var(--rh) / 880); }
.p2-phones { position: absolute; z-index: 2; inset: 6.849cqw; display: flex; justify-content: center; gap: 2.74cqw; }
.p2-phones img { display: block; height: 100%; width: auto; aspect-ratio: 720 / 1560; border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.3); }
.p2-stack { position: absolute; z-index: 2; inset: 14.286cqw; display: flex; flex-direction: column; justify-content: center; gap: 5.714cqw; }
.p2-stack img, .pshot2 { display: block; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.06)) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.14)); }
.p2-stack img { width: 100%; flex: none; }
.pshot2 { position: absolute; z-index: 2; top: 4.545cqw; left: 4.545cqw; }
.pshot2--flow { width: 91.09cqw; }
.pshot2--tok { width: 107.95cqw; border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.3); filter: none; }
@media (max-width: 767px) {
  .row--stack { height: auto !important; flex-direction: column; }
  .row--stack .card { flex: none; width: 100%; }
  .card--p2a { aspect-ratio: 584 / 609; }
  .card--p2b .card__media { position: absolute; inset: 0; }
  .card--p2b .p2-stack { position: relative; inset: auto; padding: 9cqw 14.286cqw; }
}


/* ----- project 3: AI suggestions + chat (cqw of each card; margins 40px at design size) ----- */
.pshot3 { position: absolute; z-index: 2; display: block; height: auto; top: 4.545cqw; left: 4.545cqw; width: 97.727cqw; border-radius: 10px 10px 0 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.3); }          /* zoomed out, still bleeds right + bottom */
.p3-chat { position: absolute; z-index: 2; inset: 4.545cqw; display: flex; gap: 1.818cqw; }
.p3-chat img { display: block; flex: 1 1 0; min-width: 0; height: auto; align-self: flex-start; border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.3); }
.p3-lay { position: absolute; z-index: 2; left: 4.545cqw; top: 4.545cqw; width: 90.909cqw; aspect-ratio: 2000 / 790; }
.p3 { position: absolute; overflow: hidden; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.3); }
.p3 img { position: absolute; display: block; max-width: none; }
.p3-ann { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 767px) {
  /* three tall chat screens would be tiny side by side, so let them scroll sideways with the next one peeking */
  .rows .row--chat { height: calc(100cqw * 1.72); }
  .p3-chat { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; inset: 4.545cqw 0 4.545cqw 4.545cqw; padding-right: 4.545cqw; gap: 3cqw; }
  .p3-chat::-webkit-scrollbar { display: none; }
  .p3-chat img { flex: 0 0 62cqw; scroll-snap-align: start; }
}

/* ----- placeholder product screens (swap for <img class="card__shot">) ----- */
.card { container-type: inline-size; }
.card .ui, .card__shot { position: absolute; z-index: 2; background: #fff; border-radius: 1.4cqw 1.4cqw 0 0; overflow: hidden;
  box-shadow: 0 0.2cqw 0.5cqw rgba(0, 0, 0, 0.07), 0 3cqw 6cqw -2cqw rgba(0, 0, 0, 0.3); }
.card__shot { display: block; left: 13%; width: 74%; top: 22%; height: auto; }
.card .ui { font: 500 1.7cqw var(--font-sans); color: #222; }
.ui .u-sp { flex: 1; } .ui .u-sk { display: block; border-radius: 0.8cqw; background: #e9e9ec; flex: none; } .ui .u-sk.u-d { background: #cdcdd2; }
.ui .u-tb { display: flex; align-items: center; gap: 1.6cqw; padding: 1.8cqw 2.4cqw; border-bottom: 1px solid #eee; }
.ui .u-arr { width: 1.6cqw; height: 1.6cqw; border-left: 0.3cqw solid #444; border-bottom: 0.3cqw solid #444; transform: rotate(45deg) scale(0.7); }
.ui .u-seg { display: flex; background: #f1f1f3; border-radius: 0.9cqw; padding: 0.3cqw; font-style: normal; gap: 0.2cqw; }
.ui .u-seg b { font-weight: 500; padding: 0.5cqw 1.3cqw; border-radius: 0.7cqw; color: #666; }
.ui .u-seg b.u-on { background: #fff; color: #111; box-shadow: 0 0 0.3cqw rgba(0, 0, 0, 0.15); }
.ui .u-btn { font-style: normal; padding: 0.8cqw 1.5cqw; border: 1px solid #e3e3e6; border-radius: 0.9cqw; color: #222; }
.ui .u-btn.u-k { background: #111; border-color: #111; color: #fff; } .ui .u-btn.u-del { color: #c0392b; background: #fdf1ef; border-color: #fdf1ef; }
.ui .u-bd { display: flex; height: 100%; } .ui .u-mn { flex: 1; padding: 2.4cqw 3cqw; background: #f7f7f8; }
.ui .u-side { width: 34%; border-left: 1px solid #eee; padding: 1.6cqw; display: flex; flex-direction: column; gap: 1.8cqw; }
.ui .u-ttl { display: flex; align-items: center; margin-bottom: 2cqw; }
.ui .u-pg { background: #fff; padding: 3cqw; border-radius: 0.6cqw; display: flex; flex-direction: column; gap: 1.4cqw; }
.ui .u-lg { display: flex; align-items: center; gap: 1.2cqw; } .ui .u-sq { width: 2.6cqw; height: 2.6cqw; border-radius: 0.6cqw; background: var(--orange); display: block; }
.ui .u-chips { display: flex; gap: 1.2cqw; } .ui .u-chip { flex: 1; border-radius: 0.8cqw; padding: 1.2cqw; font-style: normal; height: 6cqw; display: block; }
.ui .u-chip em { font-style: normal; font-size: 2.6cqw; font-weight: 600; }
.ui .u-chip.u-a { background: #e3f1ea; } .ui .u-chip.u-b { background: #fbe4de; } .ui .u-chip.u-c { background: #e1e9fb; }
.ui .u-pill { font-style: normal; background: #e3f1ea; color: #2a6a4c; padding: 0.4cqw 1.2cqw; border-radius: 2cqw; font-size: 1.5cqw; }
.ui .u-tr { display: flex; align-items: center; gap: 1.4cqw; padding: 1cqw 0; border-bottom: 1px solid #f0f0f2; } .ui .u-fr { display: flex; align-items: center; gap: 1.4cqw; }
.ui .u-tabs { display: flex; gap: 2.2cqw; border-bottom: 1px solid #eee; padding: 0 0 1cqw; } .ui .u-tabs b { font-weight: 500; color: #777; }
.ui .u-tabs b.u-on { color: #111; border-bottom: 0.3cqw solid #111; padding-bottom: 1cqw; margin-bottom: -1.1cqw; }
.ui .u-tabs.u-big { padding: 3cqw 3cqw 1.4cqw; font-size: 2cqw; } .ui .u-acts { display: flex; gap: 1cqw; margin-top: auto; padding-top: 1.6cqw; }
.ui .u-two { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3cqw; margin-top: 3cqw; }
.ui .u-card2 { border: 1px solid #ececef; border-radius: 1cqw; padding: 2cqw; margin-bottom: 1.6cqw; display: flex; flex-direction: column; gap: 1cqw; }
.ui .u-tg { width: 5cqw; height: 2.8cqw; border-radius: 2cqw; background: #d6d6db; position: relative; display: block; flex: none; } .ui .u-tg.u-on { background: #111; }
.ui .u-tg b { position: absolute; top: 0.35cqw; left: 0.35cqw; width: 2.1cqw; height: 2.1cqw; border-radius: 50%; background: #fff; } .ui .u-tg.u-on b { left: 2.55cqw; }
.ui .u-chev { width: 1.4cqw; height: 1.4cqw; border-left: 0.3cqw solid #777; border-top: 0.3cqw solid #777; transform: rotate(45deg); display: block; }

/* grey-out previous projects (desktop only, see media block) */
@media (min-width: 768px) {
  .js .project.is-past .card > * { filter: grayscale(1); opacity: 0.45; }
}

/* ---------- project info (shared by article + rail panels) ---------- */
.info { display: flex; flex-direction: column; }
.info__top { display: flex; flex-direction: column; }
.idx {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--fs-index); letter-spacing: 0.04em; color: var(--faint);
  margin-bottom: 24px;
}
.title {
  font-weight: 400; font-size: var(--fs-title);
  letter-spacing: -0.02em; line-height: 1.2083;
  margin-bottom: 48px;
  text-wrap: pretty;
}
/* soft orange highlight behind each project title: one box per line, drawn by main.js (see paintTitleHighlights) */
.title { position: relative; isolation: isolate; }
.title__hl { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.title__hl i { position: absolute; background: rgba(255, 99, 47, 0.18); }   /* translucent, so where two lines overlap it deepens */
.meta { display: flex; flex-direction: column; gap: 28px; }
.meta__item { display: flex; gap: 16px; align-items: flex-start; }
.meta__item .value a { text-decoration: underline; text-decoration-color: rgba(255, 99, 47, 0.5); text-decoration-thickness: 1.5px; text-underline-offset: 6px; transition: text-decoration-color 0.25s var(--ease); }
.meta__item .value a:hover, .meta__item .value a:focus-visible { text-decoration-color: #FF632F; }
.cs-copy a { text-decoration: underline; text-decoration-color: rgba(255, 99, 47, 0.5); text-decoration-thickness: 1.5px; text-underline-offset: 6px; transition: text-decoration-color 0.25s var(--ease); }
.cs-copy a:hover, .cs-copy a:focus-visible { text-decoration-color: #FF632F; }
.doodle { flex: none; width: 15px; height: 20px; margin-top: 0; }
.label { display: block; margin-bottom: 6px; }
.value { font-size: 16px; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); }
.info__bottom { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.desc {
  max-width: 336px; font-size: 14px; line-height: 20px; letter-spacing: -0.01em; color: var(--ink-2);
}

/* "VIEW MORE" — arrow + scribble underline on hover */
.more {
  position: relative; display: inline-flex; align-items: center;
  padding: 14px 0; margin: -14px 0;
  transition: color 0.3s var(--ease);
}
.more:hover, .more:focus-visible { color: var(--ink); }

/* ---------- rail (desktop sticky column) ---------- */
.rail { display: none; }

.rail__bottom .panel { align-self: end; }
.panel { grid-area: 1 / 1; visibility: hidden; transition: visibility 0s linear 0.45s; }
.panel.is-active { visibility: visible; transition-delay: 0s; }
.panel .t {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.panel.is-past .t { transform: translate3d(0, -14px, 0); }
.panel.is-active .t {
  opacity: 1; transform: none;
  transition:
    opacity 0.7s var(--ease) calc(0.14s + var(--i, 0) * 0.055s),
    transform 0.85s var(--ease) calc(0.14s + var(--i, 0) * 0.055s);
}
/* asterisks draw when their panel becomes active, and reset when it leaves */
.panel .doodle path { transition: none; }
.panel.is-active .doodle path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.33, 0.7, 0.3, 1) calc(0.4s + var(--i, 0) * 0.07s + var(--dd, 0s));
}

/* ---------- about ---------- */
#view-about.is-current { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }   /* the grey section fills what is left of the screen, so the page never scrolls unless the content needs it */
.work--about { flex: 1; }
#view-about.is-out { transform: none; }   /* fade only: the 10px drift would add a brief scrollbar to a page that fits the screen */
.about__inner { display: grid; grid-template-columns: minmax(0, 360fr) minmax(0, 896fr); column-gap: var(--col-gap); padding-block: 8px; }
.contact { display: flex; flex-direction: column; gap: 28px; }
.about__copy { display: flex; flex-direction: column; gap: 24px; max-width: 560px; }
.about__copy p { font-size: 16px; line-height: 22px; letter-spacing: -0.01em; color: var(--ink-2); }
.link { position: relative; display: inline-block; padding: 12px 0; margin: -12px 0; }
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
/* contact links use the same orange underline as the project links: no extra black line on hover, and a plain inline box so the underline sits at the same offset */
.meta__item .value a.link { display: inline; padding: 0; margin: 0; }
.meta__item .value a.link::after { content: none; }

/* ---------- page-load choreography ---------- */
.js .nav { opacity: 0; }
.js.is-loaded .nav { opacity: 1; transition: opacity 0.7s var(--ease); }

/* ---------- ≥768 : two columns + sticky rail ---------- */
@media (min-width: 768px) {
  .js .work__inner {
    display: grid;
    grid-template-columns: minmax(0, 360fr) minmax(0, 896fr);
    column-gap: var(--col-gap);
  }
  .js .rail { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
  .js .project > .info { display: none; }

  .rail__top {
    position: sticky; top: calc(var(--nav-h) + var(--work-pad));
    padding-top: 8px; display: grid;
  }
  .rail__bottom {
    position: sticky; bottom: var(--work-pad);
    padding-bottom: 8px; display: grid;
  }
  .nav__inner { padding-right: calc(var(--gutter) + 16px); }
}


/* ---------- rail fit levels (set by JS from the real viewport height) ---------- */
@media (min-width: 768px) {
  .rail[data-fit="1"] .title, .rail[data-fit="2"] .title { font-size: min(var(--fs-title), 26px); margin-bottom: 28px; }
  .rail[data-fit="1"] .idx, .rail[data-fit="2"] .idx { margin-bottom: 14px; }
  .rail[data-fit="1"] .meta, .rail[data-fit="2"] .meta { gap: 20px; }
  .rail[data-fit="1"] .info__bottom, .rail[data-fit="2"] .info__bottom { gap: 20px; }
  .rail[data-fit="2"] .title { font-size: min(var(--fs-title), 22px); margin-bottom: 22px; }
  .rail[data-fit="2"] .meta { gap: 16px; }
  .rail[data-fit="2"] .desc { display: none; }
  /* level 3: too short to pin anything — let the column scroll with the page */
  .rail[data-fit="3"] .rail__top, .rail[data-fit="3"] .rail__bottom { position: static; }
  .rail[data-fit="3"] { gap: 32px; justify-content: flex-start; }
}

/* ---------- 768–1199 : narrower left column ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  :root { --gutter: 24px; --work-pad: 24px; --col-gap: 40px; --fs-title: 24px; --fs-index: 20px; }
  .js .work__inner { grid-template-columns: minmax(240px, 0.86fr) minmax(0, 1.94fr); }
  .title { margin-bottom: 36px; }
  .nav__inner { padding-right: var(--gutter); }
  .about__inner { grid-template-columns: minmax(240px, 0.86fr) minmax(0, 1.94fr); }
}

/* ---------- <768 : single column ---------- */
@media (max-width: 767px) {
  :root {
    --gutter: 20px; --nav-h: 64px; --work-pad: 20px; --card-gap: 12px;
    --fs-bio: 20px; --fs-title: 26px; --fs-index: 20px; --col-gap: 0px;
  }
  .hero { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 52px; }
  .projects { gap: 72px; }
  .info { padding: 8px 0 20px; gap: 36px; }
  .title { margin-bottom: 32px; }
  .row { height: 100cqw; }
  .about__inner { grid-template-columns: 1fr; row-gap: 40px; }
  /* the sticky rail is off on mobile; cards just fade up */
}

/* very wide screens: keep hero/nav aligned with the 1600 content box */
@media (min-width: 1700px) {
  .wrap { padding-inline: var(--gutter); }
}


/* ==========================================================================
   Case study dialog
   ========================================================================== */
dialog.case {
  position: fixed; inset: 0; margin: 0; padding: 28px;
  width: 100%; height: 100%; max-width: none; max-height: none;
  border: 0; background: transparent; color: var(--ink);
  overflow: hidden;
  opacity: 0; transition: opacity 0.45s var(--ease);
}
dialog.case:not([open]) { display: none; }
dialog.case::backdrop { background: rgba(17, 17, 17, 0.4); opacity: 0; transition: opacity 0.45s var(--ease); }
dialog.case.is-open { opacity: 1; }
dialog.case.is-open::backdrop { opacity: 1; }

.sheet {
  position: relative; height: 100%;
  max-width: 1600px; margin-inline: auto;
  background: var(--white); border-radius: 20px;
  overflow: hidden;
  transform: translate3d(0, 40px, 0);
  transition: transform 0.7s var(--ease);
}
dialog.case.is-open .sheet { transform: none; }
.sheet__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; border-radius: inherit; }
.sheet__scroll:focus { outline: none; }

.cs-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding-inline: var(--gutter);
  background: var(--white);
}
.cs-bar__label { margin: 0; }
.cs-bar__label span { margin-left: 8px; color: var(--ink); }
.cs-close {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-right: -10px; padding: 0 10px;
  background: none; border: 0; cursor: pointer; border-radius: 8px;
  color: var(--mute); transition: color 0.3s var(--ease);
}
.cs-close .label { margin: 0; color: inherit; }
.cs-close:hover, .cs-close:focus-visible { color: var(--ink); }
.cs-x { width: 16px; height: 16px; }
.cs-x path { fill: none; stroke: var(--orange); stroke-width: 2.7; stroke-linecap: round; filter: url(#rough); }
.cs-close .cs-x { transition: transform 0.5s var(--ease); }
.cs-close:hover .cs-x { transform: rotate(90deg); }

.cs-wrap { max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* sections alternate white / grey to separate the story */
.cs-sec { background: var(--white); padding: 56px 0; }
.cs-sec--grey { background: var(--bg); }
.cs-sec--hero { padding: 32px 0 64px; }
.cs-sec .cs-wrap { display: flex; flex-direction: column; gap: 16px; }

.cs-sec--hero .idx { margin-bottom: 16px; }
.cs-title {
  max-width: 34ch; font-weight: 400; font-size: clamp(26px, 3.2vw, 46px);
  letter-spacing: -0.03em; line-height: 1.06; margin-bottom: 28px; text-wrap: balance;
}
.cs-meta { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-bottom: 36px; }
.cs-meta .meta__item { gap: 12px; }

.cs-block { display: flex; flex-direction: column; gap: 20px; padding-block: 0 36px; }
.cs-block .label { margin: 0; }
.cs-copy { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.cs-copy p { font-size: 16px; line-height: 22px; letter-spacing: -0.01em; color: var(--ink); }
.cs-xxxx { width: 84px; height: 16px; margin-top: 8px; }
.cs-text__body .cs-xxxx { margin-top: 28px; }
.cs-xxxx path { stroke-width: 2.7; }

/* galleries: same radius / varied-width rhythm as the main grid */
.cs-gallery { container-type: inline-size; display: flex; gap: var(--card-gap); height: calc(100cqw * var(--ar, 0.5)); }
.cs-gallery--cover { --ar: 0.4; }
.cs-fig { position: relative; min-width: 0; flex: var(--w) 1 0; border-radius: var(--radius); overflow: hidden; isolation: isolate; transform: translateZ(0); }
.cs-fig .card__media { transition: transform 0.9s var(--ease); }

/* caption overlaid on the image itself */
.cs-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; pointer-events: none;
  padding: 44px 18px 16px;
  background: linear-gradient(to top, rgba(10, 10, 14, 0.38), rgba(10, 10, 14, 0));
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff;
}

/* ---------- before / after slider ---------- */
.ba {
  --p: 50;
  position: relative; aspect-ratio: 16 / 7.5; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y;
  transform: translateZ(0);
}
.ba__layer { position: absolute; inset: 0; }
.ba__layer .card__media { width: 100%; height: 100%; }
/* screenshots in a slider: whole images on the project's gradient, with the usual 40px margin */
.ba--shots { container-type: inline-size; }
.ba--shots > .ph { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.ba--shots .ba__layer > img { position: absolute; left: 4.545cqw; top: 4.545cqw; width: calc(100% - 9.09cqw); height: auto; border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.3); }
/* a row of screens in a slider layer: same 40px margin as a single screenshot, screens identically placed on both sides */
.ba--shots .ba__layer > .shots4 { position: absolute; left: 6.364cqw; top: 5.9cqw; width: calc(100% - 12.728cqw); display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.273cqw; }
.ba--shots .shots4 img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 14px 28px -12px rgba(0, 0, 0, 0.3); }
/* divider for the screenshot sliders: slim white line, orange knob with white arrows, and the smaller side is dimmed.
   --s eases from 0 (divider at 50% or left of it) to 1 (12 points right of centre), so the dim hands over smoothly */
.ba--shots { --s: clamp(0, calc((var(--p) - 50) / 12), 1); }
.ba--shots .ba__handle::before { left: 22px; width: 3px; background: #fff; box-shadow: 0 0 18px rgba(0, 0, 0, 0.3); }
.ba--shots .ba__knob { background: var(--orange); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
.ba--shots .ba__knob path { stroke: #fff; }
.ba--shots .ba__tag { z-index: 4; }
.ba--shots .ba__before::after { content: ""; position: absolute; inset: 0; background: rgba(24, 24, 48, 0.16); pointer-events: none;
  opacity: calc(1 - var(--s)); transition: opacity 0.45s cubic-bezier(0.33, 0.7, 0.3, 1); }
.ba--shots::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--p) * 1%); background: rgba(24, 24, 48, 0.16); pointer-events: none; z-index: 3;
  opacity: var(--s); transition: opacity 0.45s cubic-bezier(0.33, 0.7, 0.3, 1); }
.ba__before { clip-path: inset(0 calc((100 - var(--p)) * 1%) 0 0); }
.ph--before { position: relative; filter: grayscale(1) contrast(0.9) brightness(1.1); }
.ph--before::after {                       /* wireframe-ish texture for the "old" placeholder */
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 32px);
}
.ba__tag {
  position: absolute; top: 16px; z-index: 3; margin: 0; padding: 7px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink); pointer-events: none; line-height: 1;
}
.ba__tag--before { left: 16px; opacity: clamp(0, calc((var(--p) - 14) / 10), 1); }
.ba__tag--after { right: 16px; opacity: clamp(0, calc((86 - var(--p)) / 10), 1); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 1%); width: 48px; margin-left: -24px; z-index: 4;
  cursor: ew-resize; touch-action: none; outline: none;
}
.ba__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 23px; width: 2px; background: #fff; }
.ba__knob {
  position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  display: grid; place-items: center; border-radius: 50%; background: #fff;
  transition: transform 0.5s var(--ease);
}
.ba__knob svg { width: 28px; height: 28px; }
.ba__knob path { fill: none; stroke: var(--orange); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: url(#rough); }
.ba:hover .ba__knob { transform: scale(1.06); }
.ba.is-dragging .ba__knob { transform: scale(0.92); }
.ba__handle:focus-visible .ba__knob { outline: 2px solid var(--orange); outline-offset: 3px; }

/* reveals inside the dialog */
.js .cs-fig, .js .ba { opacity: 0; transform: translate3d(0, 28px, 0); }
.js .cs-fig.is-in, .js .ba.is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s); }
.js .cs-r { opacity: 0; transform: translate3d(0, 18px, 0); }
/* sections below the hero fade up as you scroll to them */
.js .cs-fade { opacity: 0; transform: translate3d(0, 28px, 0); }
.js .cs-fade.is-in { opacity: 1; transform: none; transition: opacity 1.4s var(--ease), transform 1.5s var(--ease); }
.js .cs-img { opacity: 0; transform: translate3d(0, 22px, 0); }
.js .cs-img.is-in { opacity: 1; transform: none; transition: opacity 1.1s var(--ease) var(--d, 0s), transform 1.2s var(--ease) var(--d, 0s); }
.js dialog.is-open .cs-r { opacity: 1; transform: none; transition: opacity 0.8s var(--ease) calc(0.2s + var(--r, 0) * 0.07s), transform 0.9s var(--ease) calc(0.2s + var(--r, 0) * 0.07s); }
#csBody { transition: opacity 0.3s var(--ease); }
#csBody.is-swapping { opacity: 0; }

.cs-next { background: var(--white); }
.cs-next__a {
  display: block; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto;
  padding: 48px var(--gutter) 56px;
}
.cs-next__a .label { display: block; margin-bottom: 14px; }
.cs-next__row { display: block; }
/* same type as the home-page bio, followed by a hand-drawn chevron */
.cs-next__row { display: block; max-width: 560px; }
.cs-next__t { font-size: var(--fs-bio); letter-spacing: -0.015em; line-height: 1.3; }
.cs-next__chev { display: inline-block; vertical-align: -1px; margin-left: 11px; width: 30px; height: 11px; transition: transform 0.6s var(--ease); }
.cs-next__chev path { fill: none; stroke: var(--orange); stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; filter: url(#rough); }
/* on hover the arrow is sketched again: shaft first, then the head, with the same slow ease as the asterisks */
.cs-next__chev path { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.cs-next__a:hover .cs-next__chev .s, .cs-next__a:focus-visible .cs-next__chev .s { animation: cs-arrow-draw 0.9s cubic-bezier(0.33, 0.7, 0.3, 1) both; }
.cs-next__a:hover .cs-next__chev .h, .cs-next__a:focus-visible .cs-next__chev .h { animation: cs-arrow-draw 0.65s cubic-bezier(0.33, 0.7, 0.3, 1) 0.55s both; }
@keyframes cs-arrow-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* project screenshots reused inside the case study: always visible, no scroll reveal */
.js .cs .card { opacity: 1; transform: none; }
.cs-rows { margin-top: 8px; gap: 44px; }
.cs-rows.cs-rows--tight { gap: var(--card-gap); }   /* rows without captions stack at the same 16px as the gap between side-by-side images */   /* extra room between stacked image rows, which also have captions */
/* captions live under each image, in the mono face */
.cs .row--v { height: auto; align-items: flex-start; }
.cs-item { flex: var(--w, 1) 1 0; min-width: 0; display: flex; flex-direction: column; }
.cs .row--v .cs-item .card { flex: none; width: 100%; height: calc(100cqw * var(--rh) / 880); }
.cs-fcap { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 14px 0 0; padding-right: 20px;
  font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: #737373; text-align: left; }
.cs-fcap__dash { flex: none; width: 22px; height: 6px; overflow: visible; }
.cs-fcap__dash path { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round; filter: url(#rough); }
/* section text row: label + pull quote on the left (wide column), body on the right */
.cs-text { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: clamp(64px, 11vw, 200px); row-gap: 32px; align-items: start; padding-block: 40px 64px; }
.cs-sec:not(.cs-sec--hero) { padding-top: 0; }
/* label sits on row 1; the quote and the body share row 2 so their tops line up */
.cs-text__lead { display: contents; }
.cs-text__lead .label { margin: 0; grid-column: 1; grid-row: 1; }
.cs-text__lead .cs-quote { grid-column: 1; grid-row: 2; }
.cs-text__body { grid-column: 2; grid-row: 2; }
.cs-quote { position: relative; isolation: isolate; font-size: 28px; line-height: 1.2; letter-spacing: -0.025em; max-width: none; margin: 0; text-wrap: pretty; }
.cs-text__body .cs-copy { max-width: 560px; }
/* freely placed screenshots inside case-study cards (positions are cqw of the card) */
.pimg { position: absolute; z-index: 2; display: block; height: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.3); }
.pimg--drop { box-shadow: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.06)) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.14)); }
.ba .card { border-radius: 0; }
/* an image seen through a window: whatever falls below the window is cut off */
.pclip { position: absolute; z-index: 2; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.3); }
.pclip img, .pclip video { display: block; width: 100%; height: auto; }
/* a freely arranged board of several screens (positions are % of the board) */
.pcomp { position: absolute; z-index: 2; }
.pcomp .pc { position: absolute; display: block; height: auto; }
.pcomp .pc--panel { border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 14px 28px -12px rgba(0, 0, 0, 0.3); }
.pcomp .pc--label { border-radius: 6px; }
.pcomp--tight .pc--panel, .pcomp--tight .pc--label { border-radius: 3px; }
/* a page with something laid on top of it (the polaroid on the old report) */
.play { position: absolute; z-index: 2; }
.play img { position: absolute; display: block; height: auto; }
.play__base { top: 0; border-radius: 10px 10px 0 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.3); }
.play__top { z-index: 2; transform: rotate(-3.5deg); }

@media (min-width: 768px) and (max-width: 1199px) {
}
/* on narrower screens the two text columns share the width equally so the body never gets squeezed */
@media (max-width: 1199px) {
  .cs-text__body { padding-right: 16px; }   /* a little more air between the body text and the dialog edge */
}
@media (min-width: 768px) and (max-width: 1199px) {
  .cs-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 72px); }
}
@media (max-width: 767px) {
  dialog.case { padding: 12px; }
  .sheet { border-radius: 16px; }
  .cs-bar { height: 52px; }
  .cs-sec { padding: 40px 0; }
  .cs-sec--hero { padding: 20px 0 32px; }
  .cs-title { margin-bottom: 24px; }
  .cs-meta { gap: 12px 24px; margin-bottom: 28px; }
  .cs-block { gap: 14px; padding-block: 0 24px; }
  .cs-text { grid-template-columns: 1fr; gap: 20px; padding-bottom: 24px; }
  .cs-text__lead .label, .cs-text__lead .cs-quote, .cs-text__body { grid-column: 1; grid-row: auto; }
  .cs-quote { font-size: 24px; max-width: none; }
  .cs-gallery { --ar: 0.8 !important; }
  .cs-gallery--cover { --ar: 0.7 !important; }
  .ba { aspect-ratio: 4 / 5; }
  .cs-cap { padding: 32px 12px 12px; }
  .cs-next__a { padding: 36px var(--gutter) 44px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important; }
  .js .card, .js .cs-fig, .js .ba, .js .cs-r, .js .cs-fade, .js .cs-img { opacity: 1; transform: none; }
  .js [data-split] .w__i { opacity: 1; transform: none; }
  .js .nav { opacity: 1; }
  .dr path { stroke-dashoffset: 0; }
  .panel .t { transform: none; }
  .hero-badge__sway { animation: none; }
}