/* case-study pages: the project's own pastel panel (--c, set on the page; --d its deeper shade) in the cream frame,
   like its panel on the home page. The story stays on the left, screens curve in on the right as paper prints. */
html.case-html { --frame-inset: 16px; --frame-r: 34px; background: var(--paper); }
.case-sheet { position: relative; z-index: 1; margin: var(--frame-inset); min-height: calc(100vh - var(--frame-inset) * 2); border-radius: var(--frame-r); background: var(--c, var(--sage)); color: var(--ink); }
.case-grid { position: relative; z-index: 1; }
/* two paper cut-outs held still in the bottom-left corner of the panel; the frame cuts them at its rounded edge */
.case-shp { position: fixed; z-index: 0; left: -8vw; bottom: -15vw; width: 30vw; height: 30vw; border-radius: 50%; pointer-events: none; background: var(--d, #fff) var(--grain);
  box-shadow: 0 26px 50px -30px rgba(26, 20, 16, .45), inset 0 1px 0 rgba(255, 255, 255, .55); }
.case-shp.pill { left: 13vw; bottom: 8vh; width: 17vw; height: 3.8vw; border-radius: 999px; rotate: -20deg; background-color: #fff; }
.side h1 .accent { --hl: #fff; }
/* a fixed dark frame keeps the page rounded and inset on all four sides while it scrolls; its edges bow on fast scrolls */
.case-frame { position: fixed; inset: 0; z-index: 25; width: 100%; height: 100%; pointer-events: none; fill: var(--paper); }
.case-close { position: fixed; top: 36px; right: 40px; z-index: 30; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff var(--grain); color: var(--ink); box-shadow: 0 18px 34px -16px rgba(26,20,16,.55), inset 0 1px 0 rgba(255,255,255,.6); transition: transform .4s var(--ease), background-color .3s; }
.case-close:hover { background: var(--butter); color: var(--ink); transform: rotate(90deg); }
.case-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.case-grid { display: grid; grid-template-columns: minmax(330px, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 96px); padding: 0 clamp(110px, 8vw, 150px) 0 clamp(28px, 4vw, 64px); }

/* the story column */
.side { position: sticky; top: var(--frame-inset); display: flex; flex-direction: column; height: calc(100vh - var(--frame-inset) * 2); padding: 46px 0 26px; overflow-y: auto; scrollbar-width: none; }
.side::-webkit-scrollbar { display: none; }
.case-html .mono { font-size: 13.5px; }
.side h1 { margin: 0; font-family: var(--head); font-size: clamp(44px, 4.4vw, 76px); font-weight: 700; line-height: .96; letter-spacing: -.05em; text-wrap: balance; }
.side .he { font-size: .6em; color: var(--ink-2); }
.side .lede { margin: 14px 0 0; font-size: 17px; line-height: 1.45; text-wrap: pretty; }
.side .ba { display: grid; gap: 4px; margin: 34px 0 0; font-family: var(--head); font-size: clamp(24px, 2vw, 30px); font-weight: 600; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.side .ba .was { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: color-mix(in oklab, var(--ink-2) 70%, transparent); }
.chap-nav ol { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(26,20,16,.14); }
.chap-nav a { display: grid; grid-template-columns: 42px 1fr; padding: 12px 0; border-bottom: 1px solid rgba(26,20,16,.14); color: rgba(26,20,16,.42); transition: color .4s var(--ease); }
.chap-nav a:hover { color: var(--ink); }
.chap-nav a .mono { padding-top: 2px; font-size: 15px; transition: color .4s var(--ease); }
.chap-nav a b { font-size: 17.5px; font-weight: 500; letter-spacing: -.01em; }
.chap-nav a.on { color: var(--ink); }
.chap-nav a.on .mono { color: var(--ink); }
.mini-next { display: flex; align-items: center; gap: 14px; margin-top: auto; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s; }
.mini-next:hover { box-shadow: 0 0 0 1.5px var(--ink); }
.mini-next img { width: 84px; height: 55px; object-fit: cover; border-radius: 10px; }
.mini-next span { display: grid; gap: 2px; font-size: 16px; font-weight: 500; }
.mini-next .mono { color: var(--ink-2); font-weight: 400; }

/* the screens column */
.reel { padding: 46px 0 12vh; }
.ch-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shot { margin: 0 0 clamp(90px, 16vh, 180px); }
.shot > :first-child { transform-origin: 50% 0; }
.shot figcaption { display: flex; gap: 14px; max-width: 62ch; margin-top: 18px; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.shot figcaption .mono { flex: none; padding-top: 2px; font-size: 15px; color: var(--ink); }
.shot figcaption b { color: var(--ink); font-weight: 500; }
/* screens are paper prints: a white mat with grain, a soft shadow, and a slight tilt that alternates */
.m-wide img, .m-video, .m-pair img { padding: 12px; border-radius: 20px; background: #fff var(--grain); box-shadow: 0 50px 80px -40px rgba(26,20,16,.5), inset 0 2px 0 rgba(255,255,255,.6); }
.m-wide img { display: block; width: 100%; height: auto; }
.shot:nth-of-type(odd) > :first-child { rotate: -1.2deg; }
.shot:nth-of-type(even) > :first-child { rotate: 1deg; }
.shot.phone-shot > :first-child { rotate: none; }
/* The video's own layer ignores border-radius in some browsers, so the wrapper does the clipping. */
.m-video { overflow: hidden; isolation: isolate; }
.m-video video { display: block; width: 100%; height: auto; border-radius: 10px; clip-path: inset(0 round 10px); background: #fff; }
.seek { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.seek button { appearance: none; padding: 9px 14px; border: 0; border-radius: 99px; background: rgba(255,255,255,.6); color: var(--ink); font: inherit; font-size: 15.5px; cursor: pointer; transition: background-color .3s, color .3s; }
.seek button:hover { background: var(--ink); color: #fff; }
.seek button .mono { margin-right: 8px; font-size: 14px; color: var(--ink-2); }
.shot.phone-shot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
.shot.phone-shot figcaption { display: grid; gap: 8px; margin: 0; font-size: 17px; }
.shot.phone-shot figcaption b { font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -.03em; line-height: 1.1; }
.phone { height: min(74vh, 760px); aspect-ratio: 880 / 1912; padding: 2.6%; border-radius: 15% / 7%; background: #111216; box-shadow: inset 0 0 0 1.5px #3a3b42, 0 40px 70px -36px rgba(26,20,16,.6); }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12.5% / 5.8%; }
.m-boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 26px); align-items: center; }
.m-boards img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 34px 60px -32px rgba(26,20,16,.55); }
.m-boards img:nth-child(1) { rotate: -2deg; }
.m-boards img:nth-child(3) { rotate: 2deg; }
.m-device img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(40,32,14,.22)); }
.m-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.m-pair img { display: block; width: 100%; height: auto; padding: 8px; border-radius: 14px; }
.m-stats { display: grid; gap: 12px; margin: 0; }
.m-stats > div { display: flex; align-items: baseline; gap: clamp(16px, 3vw, 30px); padding: clamp(18px, 3vh, 30px) clamp(20px, 3vw, 34px); border-radius: 22px; background: rgba(255,255,255,.5); }
.m-stats dt { min-width: 3.6ch; font-family: var(--head); font-size: clamp(52px, 7vw, 112px); font-weight: 700; line-height: .9; letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.m-stats dd { margin: 0; font-size: clamp(17px, 1.6vw, 24px); letter-spacing: -.02em; }
.facts-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.facts-row > div { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 99px; background: rgba(255,255,255,.55); }
.facts-row dt { font-family: var(--head); font-weight: 700; color: var(--ink); }
.facts-row dd { margin: 0; font-size: 14px; color: var(--ink-2); }
.note-line { margin: -110px 0 120px; font-size: 14px; color: var(--ink-2); }

/* about the project + the next one */
.about-case { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 0 clamp(70px, 12vh, 140px); padding-top: 22px; border-top: 1px solid rgba(26,20,16,.14); }
.about-case dt { color: var(--ink-2); }
.about-case dd { margin: 6px 0 0; font-size: 17px; }
.next-case { position: relative; display: block; overflow: hidden; aspect-ratio: 1280 / 840; border-radius: 24px; color: #fff; box-shadow: 0 40px 80px -40px rgba(26,20,16,.7); }
.next-case img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.next-case:hover img { transform: scale(1.03); }
.next-case > span { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; padding: 120px clamp(22px, 3vw, 40px) clamp(22px, 3vw, 36px); background: linear-gradient(transparent, rgba(8,9,12,.8)); }
.next-case .mono { color: rgba(255,255,255,.7); }
.next-case b { font-family: var(--head); font-size: clamp(34px, 4.4vw, 72px); font-weight: 700; letter-spacing: -.045em; line-height: .95; }
.case-foot { display: flex; justify-content: space-between; padding: 60px 0 40px; color: var(--ink-2); }

/* screen ticks on the right edge */
.ticks-v { position: fixed; right: 62px; top: 50%; z-index: 20; display: grid; gap: 8px; translate: 0 -50%; }
.ticks-v i { display: block; width: 3px; height: 22px; border-radius: 3px; background: rgba(26,20,16,.18); transition: background-color .4s var(--ease); }
.ticks-v i.done { background: var(--ink); }
.ticks-v i.on { background: #fff; }

/* first paint: the story column rises in */
@keyframes rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } }
.js .side > * { animation: rise .9s var(--ease) both; }
.js .side > :nth-child(2) { animation-delay: .06s; }
.js .side > :nth-child(3) { animation-delay: .12s; }
.js .side > :nth-child(4) { animation-delay: .18s; }
.js .side > :nth-child(n+5) { animation-delay: .24s; }

/* with a chapter open the side column needs about 980px for the mini card too; the big next card ends the page anyway */
@media (max-height: 980px) { .mini-next { display: none; } }
/* laptop screens: the whole story column still fits without its hidden scroll */
@media (min-width: 901px) and (max-height: 820px) {
  .side { padding: 30px 0 18px; }
  .side h1 { margin-top: 10px; font-size: clamp(28px, 2.4vw, 40px); }
  .side .lede { margin-top: 10px; font-size: 16px; }
  .chap-nav ol { margin-top: 18px; }
  .chap-nav a { padding: 9px 0; }
}
@media (max-width: 900px) {
  html.case-html { --frame-inset: 10px; --frame-r: 20px; }
  .case-close { top: 20px; right: 20px; width: 50px; height: 50px; }
  .case-shp { width: 60vw; height: 60vw; left: -22vw; bottom: -30vw; }
  .case-shp.pill { left: 22vw; bottom: 5vh; width: 34vw; height: 7.4vw; }
  .case-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 20px; }
  .side { position: static; height: auto; padding: 70px 0 10px; overflow: visible; }
  .chap-nav, .mini-next, .ticks-v { display: none; }
  .reel { padding-top: 30px; }
  .ch-head { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin: 10px 0 26px; }
  .ch-head h2 { margin: 0; font-family: var(--head); font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
  .ch-head h2 .mono { display: block; margin-bottom: 8px; color: var(--ink-2); }
  .ch-head p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
  .shot { margin-bottom: 64px; }
  .shot.phone-shot { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; }
  .shot.phone-shot figcaption { justify-items: center; text-align: center; font-size: 15.5px; }
  .shot.phone-shot figcaption b { font-size: 22px; }
  .phone { height: min(64vh, 560px); }
  .note-line { margin: -40px 0 60px; }
  .about-case { grid-template-columns: 1fr; gap: 14px; }
}
/* phones: everything a size up, wide screens run edge to edge at 1.5x and pan sideways, so their text is readable */
@media (max-width: 560px) {
  .case-grid { padding: 0 18px; }
  .case-html .mono { font-size: 15px; }
  .side { padding-top: 84px; }
  .side h1 { font-size: 12vw; line-height: 1; }
  .side .lede { margin-top: 18px; font-size: 19px; }
  .side .ba { margin-top: 30px; font-size: 32px; }
  .ch-head { margin: 14px 0 28px; }
  .ch-head h2 { font-size: 34px; line-height: 1.05; }
  .ch-head p { font-size: 18px; }
  .shot { margin-bottom: 80px; }
  .shot figcaption { margin-top: 16px; font-size: 18px; }
  .shot figcaption .mono { font-size: 16px; }
  .m-wide, .m-pair, .m-boards { margin-inline: -18px; }
  .m-wide { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 18px 40px; margin-bottom: -36px; }
  .m-wide::-webkit-scrollbar { display: none; }
  .m-wide img { width: 150%; max-width: none; padding: 9px; border-radius: 16px; }
  .m-video { margin-inline: -8px; padding: 8px; border-radius: 16px; }
  .m-video video { border-radius: 9px; clip-path: inset(0 round 9px); }
  .m-pair { grid-template-columns: 1fr; gap: 14px; padding: 0 8px; }
  .m-boards { padding: 0 8px; gap: 8px; }
  .seek { gap: 8px; margin-top: 16px; }
  .seek button { padding: 12px 16px; font-size: 17px; }
  .seek button .mono { font-size: 15px; }
  .phone { height: min(76vh, 640px); }
  .shot.phone-shot figcaption { font-size: 18px; }
  .shot.phone-shot figcaption b { font-size: 28px; }
  .m-stats dd { font-size: 19px; }
  .facts-row dd { font-size: 16px; }
  .note-line { font-size: 16px; }
  .about-case dd { font-size: 19px; }
  .next-case { border-radius: 18px; }
  .next-case b { font-size: 44px; }
  .case-foot { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .side > * { animation: none; }
  .next-case img { transition: none; }
}