/* Tokens: two typefaces, cream/ink, one accent */
:root {
  --cream: #F3ECDF;
  --cream-deep: #E8DDCB;
  --paper: #FFFFFF;
  --ink: #1B1916;
  --ink-soft: #564F45;
  --rose: #984C42;       /* accent on light */
  --rose-light: #DDB0A5; /* accent on ink */
  --blush: #E6D6CC;
  --line: rgba(27, 25, 22, .2);
  --line-inv: rgba(255, 255, 255, .18);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --nav-h: 1rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; }
body {
  margin: 0;
  overflow-x: clip;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; border-radius: 2px; }

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

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: 4px;
}
.skip:focus { top: 1rem; }

.label { font-size: .9375rem; color: var(--ink-soft); }

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.link {
  display: inline-flex; gap: .5em; align-items: baseline;
  text-decoration: none;
  font-weight: 500;
  padding-block: .5rem;
  border-bottom: 1px solid currentColor;
}
.link span { transition: transform .3s var(--ease); }
.link:hover span { transform: translateX(.3em); }

/* ---------- Hero typefaces chosen by Vibha ----------
   Sloop Script and Brittany are loaded from assets/fonts. London has no file in the project yet,
   so it only shows if installed on the viewer's machine; otherwise Playfair stands in. */
@font-face {
  font-family: "Sloop Script";
  src: url("assets/fonts/SloopScriptPro-Bold.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Brittany";
  src: url("assets/fonts/BrittanySignatureScript.ttf") format("truetype");
  font-display: swap;
}
@font-face { font-family: "London"; src: local("London"), local("London Regular"), local("London-Regular"); font-display: swap; }

/* ---------- Nav + hero: helloayushi.com's structure, styled from Vibha's mockup ---------- */
.topnav, .dock, .totop, .hero {
  --h-ink: #0B0B0B; --h-grey: #737373; --h-line: rgba(11, 11, 11, .08); --h-fill: #F5F4EF; --h-bg: #FFFFFF;
  --spring: cubic-bezier(.16, 1, .3, 1);
  font-family: "Playfair", "Playfair Display", Georgia, serif;
  color: var(--h-ink);
}

.topnav {
  position: fixed; inset: clamp(1rem, 3.5vw, 3.75rem) 0 auto 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
  transition: transform .4s var(--spring), opacity .3s ease-out;
}
.topnav.is-away { transform: translateY(-150px); opacity: 0; }
.topnav__pill {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: clamp(700px, 52vw, 880px); height: clamp(44px, 3.15vw, 52px);
  padding: 0 clamp(22px, 2vw, 32px);
  background: var(--h-fill);
  border-radius: 37px;
  box-shadow: 4px 5px 10px rgba(40, 40, 36, .14);
}
.topnav__id, .topnav__links a, .topnav__sheet a {
  font-size: clamp(13.5px, .95vw, 15.5px); font-weight: 400; line-height: 1.35; letter-spacing: .02em; text-decoration: none;
  font-variation-settings: "opsz" 36;
}
.topnav__id { display: flex; align-items: center; white-space: nowrap; }
.topnav__divider { width: 1px; height: 1em; margin-inline: 1em .75em; background: var(--h-ink); }
.topnav__place { color: var(--h-grey); }
.topnav__links { display: flex; align-items: center; gap: clamp(32px, 3.2vw, 56px); margin-right: 6px; }
.topnav__links a { padding-block: 9px; transition: opacity .2s; }
.topnav__links a:hover { opacity: .55; }
.topnav__wrap { position: relative; display: flex; }
.topnav__menu { display: none; }

/* Small card under Work that cycles through the kinds of work */
.tip {
  position: absolute; left: 50%; top: calc(100% - 4px);
  padding: 8px 12px;
  background: var(--h-bg); border: 1px solid var(--h-line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 15, 17, .1);
  opacity: 0; transform: translate(-50%, -4px);
  transition: opacity .2s, transform .3s var(--spring);
  pointer-events: none;
}
.topnav__wrap:hover .tip, .topnav__wrap:focus-within .tip { opacity: 1; transform: translate(-50%, 0); }
.tip__view { display: block; height: 18px; overflow: hidden; }
.tip__track { display: block; animation: tip 6s var(--spring) infinite; }
.tip__track span { display: block; font-size: 14px; line-height: 18px; letter-spacing: -.12px; white-space: nowrap; }
@keyframes tip {
  0%, 20% { transform: translateY(0); }
  25%, 45% { transform: translateY(-18px); }
  50%, 70% { transform: translateY(-36px); }
  75%, 95% { transform: translateY(-54px); }
  100% { transform: translateY(-72px); }
}

.topnav__sheet {
  pointer-events: auto;
  display: grid; width: 100%; max-width: 350px;
  padding: 8px;
  background: var(--h-fill); border: 1px solid var(--h-line); border-radius: 20px;
  box-shadow: 0 8px 24px rgba(16, 15, 17, .1);
}
.topnav__sheet[hidden] { display: none; }
.topnav__sheet a { padding: 13px 16px; border-radius: 12px; }
.topnav__sheet a:hover { background: rgba(16, 15, 17, .05); }

/* Bottom dock: takes over from the top nav once the page has scrolled */
.dock {
  position: fixed; inset: auto 0 40px 0; z-index: 50;
  display: flex; justify-content: center;
  pointer-events: none;
  opacity: 0; transform: translateY(150px);
  transition: transform .5s var(--spring), opacity .3s ease-out;
}
.dock.is-here, .totop.is-here { opacity: 1; transform: none; }
.dock__inner, .totop {
  background: rgba(245, 244, 239, .94);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.dock__inner {
  pointer-events: auto;
  display: flex; gap: 4px;
  padding: 8px 12px;
  border-radius: 60px;
}
.dock__link {
  display: flex; align-items: center;
  height: 52px; padding: 0 16px;
  border-radius: 30px;
  text-decoration: none;
  transition: background-color .2s;
}
.dock__link span {
  max-width: 0; overflow: hidden; opacity: 0;
  font-size: 16px; white-space: nowrap;
  transform: translateX(-8px);
  transition: max-width .4s var(--spring), opacity .25s, transform .4s var(--spring), margin .4s var(--spring);
}
.dock__link:hover, .dock__link:focus-visible, .dock__link[aria-current="true"] { background: rgba(16, 15, 17, .06); }
.dock__link:hover span, .dock__link:focus-visible span { max-width: 80px; margin-left: 8px; opacity: 1; transform: none; }
.totop {
  position: fixed; right: 32px; bottom: 48px; z-index: 50;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  opacity: 0; transform: translateY(150px);
  transition: transform .5s var(--spring), opacity .3s ease-out;
}

/* ---------- Hero, from Vibha's mockup (drawn 1602px wide, so sizes are in vw) ---------- */
.opening { position: relative; background: var(--h-bg, #FFFFFF); }
.hero {
  --role: clamp(3rem, 6vw, 7rem);
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(8rem, 15.4vw, 17.5rem) 20px 0;
  text-align: center;
}
.hero__title { position: relative; font-size: var(--role); font-weight: 400; line-height: 1; }
.hero__role {
  display: block;
  font-family: "London", "Playfair", "Playfair Display", Georgia, serif;
  font-variation-settings: "opsz" 144;
  font-weight: 900; line-height: .76; letter-spacing: -.02em; text-transform: uppercase;
  color: #050505;
  /* A soft outline, like letters cut out and stuck down */
  -webkit-text-stroke: .17em #EDECE6; paint-order: stroke fill;
}
/* PRODUCT is set a touch larger so both lines are exactly the same width */
.hero__product { font-size: 1.076em; line-height: 0; }
.hero__senior {
  position: absolute; left: .04em; bottom: calc(100% - .37em); z-index: 2;

  font-family: "Sloop Script", "Luxurious Script", cursive;
  font-size: .58em; line-height: 1;
  color: #671813;
}
.hero__line {
  margin-top: clamp(2.5rem, 5.6vw, 6.25rem);
  font-family: "Brittany", "Luxurious Script", cursive;
  font-size: clamp(1.75rem, 2.3vw, 2.7rem); line-height: 1.5;
  color: #050505;
}
/* ---------- Horizon: skyline band between the hero and About ----------
   main.js drives these from scroll, each 0 → 1:
   --fade  hero type leaves      --name  her name arrives
   --rise  the cities lift */
.hero {
  position: relative; z-index: 0;
  opacity: calc(1 - var(--fade, 0));
  transform: translateY(calc(var(--sy, 0) * .38px)) scale(calc(1 - var(--fade, 0) * .05));
  filter: blur(calc(var(--fade, 0) * 6px));
  transform-origin: 50% 100%;
}
/* The band rises until her name sits where PRODUCT DESIGNER was (--stop, set by main.js),
   holds there for --hold of scrolling while the plane flies, then scrolls on with the page. */
.horizon-track {
  --hold: 55vh;
  position: relative; z-index: 1;
  margin-top: clamp(1.25rem, 2.6vw, 3rem);
}
/* The extra scroll distance has to be real content (not padding) for the band to hold within it */
.horizon-track::after { content: ""; display: block; height: var(--hold); }
.horizon {
  --bw: min(56%, 980px);
  position: sticky; top: var(--stop, 30vh);
  overflow-x: clip;
}
.horizon__inner {
  position: relative;
  width: var(--bw); margin-left: calc((100% - var(--bw)) / 2);
  aspect-ratio: 1000 / 300;
  container-type: inline-size;
}
.horizon__name {
  position: absolute; inset: 5% -10% auto; z-index: 0;
  font-family: "Sloop Script", "Luxurious Script", cursive; font-weight: 400;
  font-size: 9.4cqw; line-height: 1; white-space: nowrap; text-align: center;
  color: #D9D6CB;
  opacity: var(--name, 1);
  transform: translateY(calc((1 - var(--name, 1)) * 1.2cqw));
}
/* Each city unrolls from underneath the portrait, outward to its own side */
.horizon__city {
  position: absolute; bottom: 4.7%; z-index: 1;
  opacity: min(1, calc(var(--rise, 1) * 5));
  will-change: transform;
}
.horizon__city img { display: block; width: 100%; height: auto; max-width: none; }
.horizon__city--blr {
  left: 3.5%; width: 39.5%;
  -webkit-mask-image: linear-gradient(to left, #000 calc(var(--rise, 1) * 114% - 14%), transparent calc(var(--rise, 1) * 114%));
  mask-image: linear-gradient(to left, #000 calc(var(--rise, 1) * 114% - 14%), transparent calc(var(--rise, 1) * 114%));
  transform: translateX(calc((1 - var(--rise, 1)) * 16%));
}
.horizon__city--ldn {
  right: 3.5%; width: 40.5%;
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--rise, 1) * 114% - 14%), transparent calc(var(--rise, 1) * 114%));
  mask-image: linear-gradient(to right, #000 calc(var(--rise, 1) * 114% - 14%), transparent calc(var(--rise, 1) * 114%));
  transform: translateX(calc((1 - var(--rise, 1)) * -16%));
}
/* The portrait sits in front of the skyline, as a plain cut-out with no fade. Its bottom edge is
   trimmed level with the cities' ground line, and the cities run in behind her on either side. */
.horizon__portrait {
  position: absolute; left: 50%; bottom: 7.3%; z-index: 2;
  width: 25.5cqw; height: 21.5cqw;
  transform: translateX(-50%);
  overflow: hidden;
}
.horizon__portrait img { width: 100%; max-width: none; }

.flight { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flight--front { z-index: 3; }
.flight__trail { fill: none; stroke: #8D8A80; stroke-width: .9; stroke-linecap: round; stroke-dasharray: 2.4 3.8; }
.flight__plane { visibility: hidden; }
/* A glint that runs along each city's roofline as the plane passes over it */
.shine use { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.shine__glow { stroke: rgba(255, 238, 200, .8); stroke-width: 9; filter: url(#shine-glow); }   /* a soft warm bloom, not a gold line */
.shine__core { stroke: rgba(255, 255, 255, .55); stroke-width: 1; }

/* ---------- Version B (index.html?version=flyin) ----------
   No parallax and no hold. Once the page is scrolled, the plane flies in from the left and
   each city appears beneath it as it passes (--rv-blr / --rv-ldn, 0 → 1, set by main.js). */
[data-variant="flyin"] .hero { transform: none; opacity: 1; filter: none; }
[data-variant="flyin"] .horizon-track::after { display: none; }
[data-variant="flyin"] .horizon { position: relative; top: auto; }
[data-variant="flyin"] .horizon__name { display: none; }
/* Each city is revealed by a window that slides open from left to right while the picture inside
   stays still. Only transforms move, so the browser can do it without repainting, which keeps it smooth.
   The window is a fifth wider than the city; that spare width holds the soft leading edge. */
[data-variant="flyin"] .horizon__city {
  opacity: 1; overflow: hidden;
  transform: translateX(calc((var(--rv, 1) - 1) * 100%));
  -webkit-mask-image: linear-gradient(to right, #000 84%, transparent 100%);
  mask-image: linear-gradient(to right, #000 84%, transparent 100%);
  will-change: transform;
}
[data-variant="flyin"] .horizon__city img {
  width: calc(100% / 1.2);
  transform: translateX(calc((1 - var(--rv, 1)) * 120%));
  will-change: transform;
}
/* The cities reach in behind her, so the skyline forms behind the portrait */
[data-variant="flyin"] .horizon__city--blr { --rv: var(--rv-blr, 1); left: 5.5%; width: calc(39.5% * 1.2); }
[data-variant="flyin"] .horizon__city--ldn { --rv: var(--rv-ldn, 1); left: 54%; right: auto; width: calc(40.5% * 1.2); }
[data-variant="flyin"] [data-shine="blr"] { transform: translateX(20px); }
[data-variant="flyin"] [data-shine="ldn"] { transform: translateX(-20px); }

/* ---------- Intro: scrapbook folder over a painted meadow ---------- */
/* Everything here is sized from the window width, so the composition looks the same in a narrow
   preview pane as on a wide screen. The painting is always shown whole, edge to edge (never cropped
   or enlarged to fill), so its flowers stay small. Above it the page colour runs on for a stretch,
   then the painting's sky fades in. The folder sits inside the painting, flowers showing below it. */
.intro {
  --breather: clamp(9rem, 22vw, 20rem);          /* plain page colour before the painting starts */
  --after: clamp(5rem, 13vw, 12rem);             /* and again after it, before the work */
  position: relative; z-index: 1;
  padding: var(--breather) 0 var(--after);
  background: #FFFFFF;
  overflow: hidden;
}
.intro__bg {
  position: absolute; inset: auto 0 var(--after) 0;
  aspect-ratio: 2000 / 1010;                     /* the painting's own shape */
  background: url("assets/intro-meadow.webp") center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(transparent 0%, #000 34%, #000 86%, transparent 100%);
  mask-image: linear-gradient(transparent 0%, #000 34%, #000 86%, transparent 100%);
  pointer-events: none;
  /* The meadow drifts up into place a little behind the page, then keeps sliding gently as you read on */
  transform: translateY(calc((1 - var(--in, 1)) * 6vw - var(--past, 0) * 2.5vw));
  will-change: transform;
}
.intro__scroll { position: relative; padding: 3.5vw 4vw 7vw; perspective: 1400px; }   /* 3.5 + folder + 7 adds up to the painting's height */
/* The folder keeps the Story graphic's proportions; every sheet is laid over the same frame.
   The shadow is on the folder as a whole, so it stays steady while sheets change. */
.intro__folder {
  position: relative; width: 62vw; margin-inline: auto; aspect-ratio: 2000 / 1292;
  /* Scroll play, driven by --in (0 as the section arrives, 1 once it has settled; set by main.js):
     the folder lifts off the table, tilted back and slightly askew, and lays itself flat. */
  transform-origin: 50% 100%;
  transform:
    translateY(calc((1 - var(--in, 1)) * 9vw))
    rotateX(calc((1 - var(--in, 1)) * 16deg))
    rotate(calc((1 - var(--in, 1)) * -2.5deg))
    scale(calc(.9 + var(--in, 1) * .1));
  opacity: min(1, calc(var(--in, 1) * 1.6));
  will-change: transform, opacity;
  filter: drop-shadow(0 1.25rem 2rem rgba(60, 50, 60, .22));
}
/* Once it has landed, drop the 3D treatment so the browser draws the artwork at full sharpness */
.intro__folder.is-flat { transform: none; will-change: auto; }

/* Switching tabs: nothing moves. The chosen sheet simply develops over the one already there,
   so the polaroids stay put and only the words and the folder colour change. */
.intro__panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.intro__panel.is-leaving { opacity: 1; visibility: visible; z-index: 1; }
.intro__panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; }
.intro__panel.is-entering { animation: sheet-in .36s ease-out; }
@keyframes sheet-in { from { opacity: 0; } }
.intro__panel img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; }
/* The TL;DR artwork was drawn a hair larger; this lines its tabs up with the others */
.intro__panel--tldr img { left: .985%; width: 99.14%; }
/* Clear buttons over the tab labels painted in the artwork */
.intro__tabs { position: absolute; left: 33.8%; top: 0; z-index: 3; display: flex; gap: .15%; width: 63.4%; height: 9.1%; }
.intro__tab {
  flex: 1; border: 0; border-radius: 1.6em 1.6em 0 0; background: none; color: transparent; cursor: pointer;
  font-size: clamp(.75rem, 1.4vw, 1.25rem);
  transition: background-color .2s;
}
.intro__tab:focus-visible { outline: 3px solid #1B1916; outline-offset: -5px; }
.intro__tab[aria-selected="false"]:hover { background: rgba(255, 255, 255, .32); }
.intro__tab[aria-selected="false"]:active { background: rgba(255, 255, 255, .5); }

/* ---------- Work: centred heading, filter chips, bento grid ---------- */
.work {
  position: relative; z-index: 2;
  padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem) clamp(3rem, 7vw, 6rem);
  color: #0B0B0B;
}
.work__head { text-align: center; }
.work__kicker { font-family: "Brittany", "Luxurious Script", cursive; font-size: clamp(1.5rem, 2.7vw, 2.4rem); line-height: 1.6; color: #671813; }
.work__title {
  margin-top: clamp(.75rem, 1.6vw, 1.5rem);
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.3rem, 2.5vw, 2.2rem); line-height: 1.15; letter-spacing: 0;
  /* the same cut-out outline as the hero title */
  -webkit-text-stroke: .3em #EDECE6; paint-order: stroke fill;
}

.work__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: clamp(1.75rem, 3.5vw, 3rem); }
.chip {
  font-family: var(--serif); font-weight: 600; font-size: clamp(.95rem, 1.25vw, 1.125rem); line-height: 1;
  min-height: 2.5rem; padding: .5rem 1.1rem;
  color: #0B0B0B; background: transparent;
  border: 1px solid rgba(11, 11, 11, .22); border-radius: 99px;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover { background: #F5F4EF; }
.chip[aria-pressed="true"] { background: #0B0B0B; border-color: #0B0B0B; color: #FFFFFF; }
.chip:disabled { color: #8A877C; border-style: dashed; cursor: default; background: transparent; }
.chip span { margin-left: .35em; font-weight: 400; font-style: italic; }

.bento {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(.6rem, 1.5vw, 1.4rem);
  width: min(100%, 78rem); margin: clamp(1.5rem, 3vw, 2.75rem) auto 0;
}
.tile--a     { grid-column: 1 / span 7; grid-row: 1; }
.tile--quote { grid-column: 1 / span 7; grid-row: 2; }
.tile--b     { grid-column: 8 / span 5; grid-row: 1 / span 2; }
.tile--c     { grid-column: 1 / span 5; grid-row: 3; }
.tile--d     { grid-column: 6 / span 7; grid-row: 3; }
.tile--e     { grid-column: 1 / span 7; grid-row: 4; }
.tile--f     { grid-column: 8 / span 5; grid-row: 4; }

.tile {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(.6rem, 1.3vw, 1.15rem);
  background: #F5F4EF;
  border-radius: clamp(.75rem, 1.3vw, 1.1rem);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, opacity .35s, filter .35s;
}
.tile:has(a:hover), .tile:has(a:focus-visible) { transform: translateY(-4px); box-shadow: 0 1rem 2rem -1rem rgba(60, 55, 30, .35); }
/* Placeholder picture: a tinted panel until the real cover arrives */
.tile__media {
  display: grid; place-items: center;
  aspect-ratio: 16 / 9.2;
  border-radius: clamp(.5rem, 1vw, .8rem);
  background:
    linear-gradient(135deg, rgba(255, 253, 241, .55), transparent 55%),
    var(--tint, #E3DFCD);
}
.tile__media--tall { flex: 1; aspect-ratio: auto; min-height: 16rem; }
.tile__media span { font-family: var(--serif); font-style: italic; font-size: clamp(.9rem, 1.2vw, 1.05rem); color: #6F6C61; }
.tile--a { --tint: #DCE3D6; } .tile--b { --tint: #E8D9C4; } .tile--c { --tint: #EBD6D2; }
.tile--d { --tint: #D8DEE6; } .tile--e { --tint: #E4D8E6; } .tile--f { --tint: #DDE2CF; }
.tile__meta { margin: clamp(.8rem, 1.5vw, 1.4rem) clamp(.3rem, .8vw, .7rem) 0; font-family: var(--serif); font-weight: 600; font-size: clamp(.8rem, 1.05vw, .95rem); color: #6F6C61; }
.tile__title { margin: clamp(.35rem, .8vw, .7rem) clamp(.3rem, .8vw, .7rem) 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.8rem); line-height: 1.1; text-wrap: balance; }
.tile__title a { color: inherit; text-decoration: none; }
.tile__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the whole tile is the link */
.tile__title a:focus-visible { outline: none; }
.tile:has(a:focus-visible) { outline: 2px solid #671813; outline-offset: 3px; }
.tile__desc { margin: clamp(.3rem, .6vw, .55rem) clamp(.3rem, .8vw, .7rem) clamp(.4rem, .8vw, .7rem); font-family: var(--serif); font-size: clamp(.95rem, 1.3vw, 1.2rem); line-height: 1.2; max-width: 44ch; }
.tile--quote { justify-content: center; padding: clamp(1.25rem, 2.6vw, 2.25rem) clamp(1rem, 2.2vw, 2rem); }
.tile--quote p { font-family: var(--serif); font-weight: 500; font-size: clamp(1.05rem, 1.75vw, 1.55rem); line-height: 1.2; max-width: 30ch; }

/* Filtering keeps the bento in place and quietens the tiles that do not match */
.tile.is-dim { opacity: .3; filter: grayscale(1); pointer-events: none; }
/* Tiles rise in as the grid scrolls into view (classes added by main.js) */
.tile.is-waiting { opacity: 0; transform: translateY(2.5rem) scale(.98); }
.tile.is-arriving { transition: opacity .7s ease-out var(--delay, 0s), transform .9s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s); }

/* ---------- Footer: the lettering is the top edge ---------- */
.footer {
  position: relative; z-index: 3;
  background: var(--ink); color: var(--paper);
  padding-block: clamp(3rem, 8vw, 7rem) 2rem;
}
.closing {
  position: absolute; left: 0; right: 0; bottom: 100%;
  padding-inline: var(--gutter);
  color: var(--ink);
  font-family: var(--serif);
  pointer-events: none;
}
.closing__lead {
  display: block;
  font-size: clamp(1.5rem, 3.4vw, 3rem); line-height: 1.1;
  margin-bottom: .55em;
}
.closing__edge, .tails span {
  display: block;
  font-family: var(--serif); font-style: italic;
  font-size: 17.5vw; line-height: .72; letter-spacing: -.02em;
  white-space: nowrap;
}
.closing__edge { margin: 0 0 -.05em -.04em; }   /* puts the baseline on the footer's top edge */
/* A second copy, clipped to the footer, so the tails of f and y dip into it in ink */
.tails { position: absolute; inset: .35vw 0 0 0; overflow: hidden; pointer-events: none; color: var(--paper); }
.tails span { position: absolute; left: var(--gutter); top: calc(.05em - .35vw); margin-left: -.04em; transform: translateY(-100%); }
.footer__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
}
.footer__links { display: flex; gap: 2rem; }
.footer__note { font-size: .875rem; color: rgba(255, 255, 255, .7); }

/* ---------- Narrow windows ---------- */
@media (max-width: 47.99rem) {
  .topnav { top: 16px; }
  .topnav__pill { width: calc(100% - 40px); max-width: 350px; height: 48px; padding: 0 12px 0 24px; }
  .topnav__divider { width: auto; height: auto; margin-inline: 0 4px; background: none; }
  .topnav__divider::before { content: ","; color: var(--h-ink); }
  .topnav__links { display: none; }
  .topnav__menu { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; }
  .topnav__id, .topnav__sheet a { font-size: 16px; }
  .hero { --role: 14vw; padding-top: 8.5rem; }
  .hero__line { font-size: clamp(1.55rem, 6.9vw, 2.1rem); line-height: 1.35; max-width: 11em; }
  .horizon-track { margin-top: 2.75rem; }
  .horizon { --bw: 124%; }
  .dock { bottom: 24px; }
  .totop { right: 16px; bottom: 96px; }
}

/* ---------- Phones: the folder takes nearly the full width so it stays as readable as it can ---------- */
@media (max-width: 29.99rem) {
  .intro__scroll { padding-inline: 4vw; }
  .intro__folder { width: 92vw; }
  /* the bento becomes one column */
  .bento { grid-template-columns: 1fr; }
  .bento .tile { grid-column: 1 / -1; grid-row: auto; }
  .tile__media--tall { min-height: 0; aspect-ratio: 4 / 5; }
}

/* ---------- Reduced motion: nothing pins, fades or draws ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro__panel.is-entering { animation: none; }
  .tile.is-waiting { opacity: 1; transform: none; }
  .horizon-track::after { display: none; }
  .horizon { position: relative; top: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Nav on white: white pills with a hairline and a soft shadow ---------- */
.topnav, .dock, .totop, .hero { --h-fill: #FFFFFF; }
.topnav__pill, .topnav__sheet { background: #FFFFFF; border: 1px solid rgba(11, 11, 11, .07); box-shadow: 0 1px 2px rgba(11, 11, 11, .04), 0 10px 28px -12px rgba(11, 11, 11, .22); }
.dock__inner, .totop { background: rgba(255, 255, 255, .88); border: 1px solid rgba(11, 11, 11, .07); box-shadow: 0 1px 2px rgba(11, 11, 11, .05), 0 14px 34px -12px rgba(11, 11, 11, .28); }

/* ---------- Experience: a horizontal timeline ---------- */
.xp { position: relative; padding-bottom: calc(24vw + 9rem); }   /* bottom room is for the footer lettering */
.xp__sticky { display: flex; flex-direction: column; justify-content: center; gap: clamp(1.5rem, 3vw, 2.5rem); padding-block: clamp(3rem, 7vw, 5rem); overflow: hidden; }
.xp__head { text-align: center; padding-inline: var(--gutter); }
.xp__sub { max-width: 34rem; margin: 1rem auto 0; color: #6B675E; }
.xp__track { position: relative; display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); width: max-content; padding: 4rem max(8vw, calc(50vw - 14rem)); transform: translate3d(calc(var(--x, 0) * -1px), 0, 0); will-change: transform; }
.xp__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(11, 11, 11, .1); }
.xp__item { position: relative; flex: none; width: min(28rem, 78vw); display: flex; flex-direction: column; align-items: center; transform: translateY(-2.5rem); }
.xp__item:nth-child(even) { flex-direction: column-reverse; transform: translateY(2.5rem); }
.xp__card { width: 100%; background: #fff; border-radius: 4px; text-align: left; box-shadow: 0 0 0 1px rgba(11, 11, 11, .05), 0 22px 40px -22px rgba(11, 11, 11, .3); }
.xp__card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: 1.4rem 1.5rem; border-bottom: 1px solid rgba(11, 11, 11, .07); }
.xp__logo { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .5rem; background: #F5F4EF; font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: #671813; }
.xp__card h3 { font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.xp__card header p { font-size: .9375rem; color: #6B675E; }
.xp__place { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.xp__card ul { padding: 1.4rem 1.5rem 1.6rem 2.6rem; list-style: disc; color: rgba(11, 11, 11, .75); }
.xp__card li + li { margin-top: .9rem; }
.xp__card li strong { font-weight: 600; }
.xp__stem { position: relative; width: 1px; height: 3rem; background: rgba(11, 11, 11, .16); }
.xp__stem::after { content: ""; position: absolute; left: 50%; bottom: -.4rem; width: .8rem; height: .8rem; margin-left: -.4rem; border-radius: 50%; background: #D9E4EC; }
.xp__item:nth-child(even) .xp__stem::after { bottom: auto; top: -.4rem; }
.xp__date { margin-block: .9rem; padding: .35rem .95rem; border: 1px solid #A9C6DC; border-radius: 2rem; background: #EEF5FA; font-size: .9375rem; font-weight: 500; color: #29292B; white-space: nowrap; }
.xp__date b { font-weight: 500; color: #29910F; }
/* Pinned travel, switched on by main.js when there is room and motion is welcome */
.xp.is-pinned .xp__pin { height: calc(100vh + var(--travel, 0px)); }
.xp.is-pinned .xp__sticky { position: sticky; top: 0; height: 100vh; }
.xp:not(.is-pinned) .xp__track { width: auto; flex-direction: column; padding-inline: var(--gutter); gap: 0; transform: none; }
.xp:not(.is-pinned) .xp__track::before { display: none; }
.xp:not(.is-pinned) .xp__item, .xp:not(.is-pinned) .xp__item:nth-child(even) { flex-direction: column-reverse; transform: none; width: min(100%, 34rem); }
.xp:not(.is-pinned) .xp__item:nth-child(even) .xp__stem::after { top: -.4rem; }
.xp:not(.is-pinned) .xp__item .xp__stem::after { bottom: auto; top: -.4rem; }
.xp:not(.is-pinned) .xp__item + .xp__item { margin-top: 1rem; }
.xp.is-pinned .xp__sticky { justify-content: flex-start; gap: 0; padding-block: clamp(4.5rem, 9vh, 6.5rem) 6rem; }
.xp.is-pinned .xp__track { padding-block: 2.75rem; }
.xp.is-pinned .xp__item { transform: translateY(-1.25rem); }
.xp.is-pinned .xp__item:nth-child(even) { transform: translateY(1.25rem); }
.xp.is-pinned .xp__card ul { padding-block: 1.1rem 1.25rem; }
.xp.is-pinned .xp__card li + li { margin-top: .6rem; }
.xp.is-pinned .xp__stem { height: 2rem; }

/* Date pills: one pastel per step of the journey */
.xp { --p1: #E3F3E1; --l1: #A9D3A4; --p2: #E9E4F8; --l2: #BDB1E6; --p3: #E2EEF9; --l3: #A9C6DC; --p4: #FCEBD6; --l4: #EBC592; --p5: #FBE3E6; --l5: #EBB1B8; --p6: #FBF3C9; --l6: #E2D27F; }
.xp__date { background: var(--pill, #EEF5FA); border-color: var(--pill-line, #A9C6DC); }
.xp__stem::after { background: var(--pill-line, #D9E4EC); }

/* Credentials: a badge on the card; the certificate slides out on hover, focus or tap */
.xp__card { position: relative; }
.xp__credbtn { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; margin: 0 1.5rem 1.25rem; padding: 0 .95rem; border: 1px solid var(--pill-line, #A9C6DC); border-radius: 2rem; background: var(--pill, #EEF5FA); font: 500 .875rem var(--sans); color: #29292B; cursor: pointer; }
.xp__cred { position: absolute; z-index: 5; right: -2.5rem; bottom: 3.2rem; width: min(17rem, 62%); margin: 0; padding: .4rem; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px rgba(11, 11, 11, .06), 0 24px 40px -18px rgba(11, 11, 11, .45); opacity: 0; transform: translateY(1rem) rotate(0deg) scale(.92); transform-origin: 80% 100%; pointer-events: none; transition: opacity .25s ease-out, transform .45s cubic-bezier(.16, 1, .3, 1); }
.xp__cred img { display: block; width: 100%; height: auto; }
.xp__card.has-cred:hover .xp__cred, .xp__card.has-cred:focus-within .xp__cred, .xp__card.is-open .xp__cred { opacity: 1; transform: translateY(0) rotate(4deg) scale(1); }
.xp__item:nth-child(even) .xp__card.has-cred:hover .xp__cred, .xp__item:nth-child(even) .xp__card.has-cred:focus-within .xp__cred, .xp__item:nth-child(even) .xp__card.is-open .xp__cred { transform: translateY(0) rotate(-3deg) scale(1); }
.xp:not(.is-pinned) .xp__cred { right: .75rem; }
@media (prefers-reduced-motion: reduce) { .xp__cred { transition: none; } }
/* Pinned timeline: compact cards so both rows clear the dock */
.xp.is-pinned .xp__sticky { padding-top: clamp(3.5rem, 7vh, 5rem); }
.xp.is-pinned .work__kicker { line-height: 1.2; }
.xp.is-pinned .xp__sub { margin-top: .6rem; font-size: .9375rem; }
.xp.is-pinned .xp__track { padding-block: 1.75rem; }
.xp.is-pinned .xp__item { width: min(27rem, 78vw); transform: translateY(-.75rem); }
.xp.is-pinned .xp__item:nth-child(even) { transform: translateY(.75rem); }
.xp.is-pinned .xp__card > header { padding: 1rem 1.25rem; }
.xp.is-pinned .xp__logo { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.xp.is-pinned .xp__card h3 { font-size: 1rem; }
.xp.is-pinned .xp__card header p { font-size: .875rem; }
.xp.is-pinned .xp__card ul { padding: .9rem 1.25rem 1rem 2.3rem; font-size: .9375rem; line-height: 1.5; }
.xp.is-pinned .xp__card li + li { margin-top: .4rem; }
.xp.is-pinned .xp__credbtn { min-height: 34px; margin: 0 1.25rem 1rem; font-size: .8125rem; }
.xp.is-pinned .xp__stem { height: 1.5rem; }
.xp.is-pinned .xp__date { margin-block: .7rem; font-size: .875rem; }
.xp__cred { width: min(20rem, 72%); }

.xp { --p7: #DDF1EF; --l7: #9CCFC9; --p8: #F3E4F5; --l8: #D2A9D8; }

/* Date pills: a wide, see-through outer ring around the outline */
.xp__date { position: relative; box-shadow: 0 0 0 7px color-mix(in srgb, var(--pill-line, #A9C6DC) 30%, transparent), 0 6px 14px -6px color-mix(in srgb, var(--pill-line, #A9C6DC) 80%, transparent); }
.xp__date, .xp.is-pinned .xp__date { margin-block: 1.1rem; }
.xp__credbtn { box-shadow: 0 0 0 5px color-mix(in srgb, var(--pill-line, #A9C6DC) 26%, transparent); }

/* A stack of photographs fanning out of the card */
.xp__cred--stack { width: min(24rem, 86%); height: 15.5rem; padding: 0; background: none; box-shadow: none; right: -3.5rem; bottom: 2.6rem; }
.xp__cred--stack img { position: absolute; width: 50%; height: auto; max-height: 82%; object-fit: cover; padding: .3rem; background: #fff; border-radius: 3px; box-shadow: 0 0 0 1px rgba(11, 11, 11, .06), 0 16px 28px -14px rgba(11, 11, 11, .5); left: 25%; top: 18%; transform: rotate(0deg) scale(.9); transition: left .5s cubic-bezier(.16, 1, .3, 1), top .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1); }
.xp__card.has-cred:hover .xp__cred--stack, .xp__card.has-cred:focus-within .xp__cred--stack, .xp__card.is-open .xp__cred--stack,
.xp__item:nth-child(even) .xp__card.has-cred:hover .xp__cred--stack, .xp__item:nth-child(even) .xp__card.has-cred:focus-within .xp__cred--stack, .xp__item:nth-child(even) .xp__card.is-open .xp__cred--stack { transform: none; }
:is(.xp__card:hover, .xp__card:focus-within, .xp__card.is-open) .xp__cred--stack img:nth-child(1) { left: 0; top: 4%; transform: rotate(-8deg); }
:is(.xp__card:hover, .xp__card:focus-within, .xp__card.is-open) .xp__cred--stack img:nth-child(2) { left: 52%; top: 0; transform: rotate(7deg); transition-delay: .05s; }
:is(.xp__card:hover, .xp__card:focus-within, .xp__card.is-open) .xp__cred--stack img:nth-child(3) { left: 4%; top: 44%; transform: rotate(4deg); transition-delay: .1s; }
:is(.xp__card:hover, .xp__card:focus-within, .xp__card.is-open) .xp__cred--stack img:nth-child(4) { left: 46%; top: 46%; transform: rotate(-4deg); transition-delay: .15s; }
.xp:not(.is-pinned) .xp__cred--stack { right: .5rem; }
@media (prefers-reduced-motion: reduce) { .xp__cred--stack img { transition: none; } }

/* Pills: a wide, barely-there grey ring, so the pill reads like a sticker on the page */
.xp__date { box-shadow: 0 0 0 7px rgba(20, 20, 20, .055), 0 8px 14px -8px rgba(20, 20, 20, .25); }
.xp__credbtn { box-shadow: 0 0 0 5px rgba(20, 20, 20, .05); }

/* Cards: a white header that sits above a quieter body */
.xp__card { background: #F8F8F6; }
.xp__card > header { position: relative; z-index: 1; background: #fff; border-bottom: 0; border-radius: 4px 4px 0 0; box-shadow: 0 12px 16px -12px rgba(20, 20, 20, .16); }
.xp__card ul { padding-top: 1.6rem; }
.xp.is-pinned .xp__card ul { padding-top: 1.25rem; }

/* Logos */
.xp__logo--img { width: auto; min-width: 3rem; max-width: 6.5rem; padding: .3rem; background: #fff; box-shadow: 0 0 0 1px rgba(20, 20, 20, .08); }
.xp__logo--img img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.xp.is-pinned .xp__logo--img { width: auto; min-width: 2.5rem; }
.xp__logo--img, .xp.is-pinned .xp__logo--img { height: auto; display: block; overflow: hidden; }
.xp__logo--img img { height: 2.4rem; width: auto; max-width: 5.9rem; }
.xp.is-pinned .xp__logo--img img { height: 2rem; }

.xp__logo--img { padding: 0; border-radius: .5rem; }
.xp__logo--img img { height: 2.75rem; }
.xp.is-pinned .xp__logo--img img { height: 2.4rem; }

/* ---------- Work: case study cards, in the same soft-tile style as the case study pages ---------- */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2.4vw, 2rem); width: min(100%, 72rem); margin: clamp(2rem, 4.5vw, 3.75rem) auto 0; }
.case { position: relative; display: flex; flex-direction: column; text-align: left; transition: opacity .4s, filter .4s; }
.case__media { position: relative; aspect-ratio: 16 / 11; border-radius: 1.25rem; overflow: hidden; background: linear-gradient(165deg, color-mix(in srgb, var(--glow) 22%, #F5F4EF), #F5F4EF 72%); }
.case__browser { position: absolute; left: 9%; right: 9%; top: 13%; border-radius: .6rem .6rem 0 0; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(20, 20, 20, .07), 0 2rem 3rem -1.8rem rgba(20, 20, 20, .5); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.case__browser span { display: flex; gap: 5px; padding: .45rem .6rem; background: #FAFAF8; border-bottom: 1px solid rgba(20, 20, 20, .07); }
.case__browser i { width: 6px; height: 6px; border-radius: 50%; background: #D2D0C8; }
.case__browser img { display: block; width: 100%; }
.case__phones { position: absolute; inset: 12% 8% 0; display: flex; justify-content: center; align-items: flex-start; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.case__phones img { flex: 0 0 34%; width: 34%; height: auto; border: 5px solid #14120F; border-radius: 1.3rem; background: #14120F; box-shadow: 0 2rem 3rem -1.8rem rgba(20, 20, 20, .55); }
.case__phones img:nth-child(1) { transform: rotate(-8deg) translate(14%, 10%); }
.case__phones img:nth-child(2) { transform: scale(1.06); z-index: 1; }
.case__phones img:nth-child(3) { transform: rotate(8deg) translate(-14%, 10%); }
.case__phones--bare img { border: 0; background: none; border-radius: 0; box-shadow: none; filter: drop-shadow(0 1.5rem 1.5rem rgba(20, 20, 20, .28)); }
.case__type { position: absolute; inset: 14% 12% 0; display: grid; grid-template-columns: 1fr 1fr; border-radius: .8rem .8rem 0 0; overflow: hidden; box-shadow: 0 2rem 3rem -1.8rem rgba(20, 20, 20, .5); font: 500 clamp(3rem, 7vw, 6rem)/1 var(--sans); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.case__type span { display: grid; place-items: center; }
.case__type span:first-child { background: #000; color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, .9), 0 0 22px rgba(255, 255, 255, .55); }
.case__type span:last-child { background: #FBF8EC; color: #1B1916; }
.case:has(a:hover) :is(.case__browser, .case__phones, .case__type), .case:has(a:focus-visible) :is(.case__browser, .case__phones, .case__type) { transform: translateY(-3%); }
.case__body { padding: 1.4rem .25rem 0; }
.case__tags { display: flex; flex-wrap: wrap; gap: .9rem; }
.case__tags span { padding: .2rem .8rem; border: 1px solid rgba(20, 20, 20, .1); border-radius: 2rem; background: #fff; font-size: .8125rem; color: #5F584D; box-shadow: 0 0 0 5px rgba(20, 20, 20, .05); }
.case__title { margin-top: 1.1rem; font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.case__title a { color: inherit; text-decoration: none; }
.case__title a::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the link */
.case__title a:focus-visible { outline: none; }
.case:has(a:focus-visible) .case__media { outline: 2px solid #671813; outline-offset: 4px; }
.case__desc { margin-top: .5rem; max-width: 46ch; color: #5F584D; }
.case__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(20, 20, 20, .1); font-size: .875rem; color: #5F584D; }
.case__go { font-weight: 500; color: #1B1916; white-space: nowrap; }
.case__go i { display: inline-block; font-style: normal; transition: transform .3s var(--ease); }
.case:has(a:hover) .case__go i { transform: translateX(.3em); }
.case.is-dim { opacity: .3; filter: grayscale(1); pointer-events: none; }
.case.is-waiting { opacity: 0; transform: translateY(2.5rem); }
.case.is-arriving { transition: opacity .7s ease-out var(--delay, 0s), transform .9s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s); }
.chip { box-shadow: 0 0 0 5px rgba(20, 20, 20, .05); }
.work__filters { gap: .9rem; }
@media (max-width: 47.99rem) { .cases { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .case.is-waiting { opacity: 1; transform: none; } }
.case__desc { max-width: none; }

/* Work cards, second pass: one frame for every picture, a platform label, aligned footers */
.work__count { margin-top: 1.25rem; text-align: center; font-size: .875rem; color: #5F584D; }
.cases { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.case[hidden] { display: none; }
.case__body { display: flex; flex-direction: column; flex: 1; }
.case__foot { margin-top: auto; }
.case__desc { margin-bottom: 1rem; }
.case__media { aspect-ratio: 16 / 10.5; }
.case__plat { position: absolute; left: 1rem; top: 1rem; z-index: 3; padding: .2rem .7rem; border-radius: 2rem; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .75rem; font-weight: 500; color: #3C382F; box-shadow: 0 0 0 1px rgba(20, 20, 20, .06); }
.case__arrow { position: absolute; right: 1rem; bottom: 1rem; z-index: 3; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #fff; color: #1B1916; font-size: 1.1rem; box-shadow: 0 0 0 5px rgba(20, 20, 20, .06), 0 8px 18px -8px rgba(20, 20, 20, .4); transform: translateY(.5rem) scale(.9); opacity: 0; transition: opacity .3s, transform .45s cubic-bezier(.16, 1, .3, 1), background .3s, color .3s; }
.case:has(a:hover) .case__arrow, .case:has(a:focus-visible) .case__arrow { opacity: 1; transform: none; background: #1B1916; color: #fff; }
.case__browser, .case__sheet { left: 10%; right: 10%; top: 20%; }
.case__phones { inset: 20% 10% 0; }
.case__sheet { position: absolute; bottom: 0; border-radius: .6rem .6rem 0 0; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(20, 20, 20, .07), 0 2rem 3rem -1.8rem rgba(20, 20, 20, .5); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.case:has(a:hover) .case__sheet, .case:has(a:focus-visible) .case__sheet { transform: translateY(-3%); }
.case__sheet--split { display: grid; grid-template-columns: 1fr 1fr; font: 500 clamp(3rem, 7vw, 6rem)/1 var(--sans); }
.case__sheet--split span { display: grid; place-items: center; }
.case__sheet--split span:first-child { background: #000; color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, .9), 0 0 22px rgba(255, 255, 255, .55); }
.case__sheet--split span:last-child { background: #FBF8EC; color: #1B1916; }
.case__sheet--audit { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: start; padding: clamp(1rem, 2.4vw, 1.75rem) clamp(1rem, 2.6vw, 2rem) 0; }
.case__sheet--audit p { display: flex; flex-direction: column; gap: .4rem; }
.case__sheet--audit b { font: 700 clamp(3.5rem, 8vw, 6.5rem)/.85 var(--serif); letter-spacing: -.03em; }
.case__sheet--audit p span { font-size: .8125rem; line-height: 1.3; color: #5F584D; }
.case__sheet--audit ul { font-size: clamp(.7rem, 1.05vw, .875rem); }
.case__sheet--audit li { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid rgba(20, 20, 20, .08); white-space: nowrap; }
.case__sheet--audit li em { margin-left: auto; font-style: normal; font-weight: 500; color: #A01F16; }
.case__sheet--audit li i { flex: none; width: 2.4rem; height: .4rem; border-radius: 1rem; background: linear-gradient(90deg, #A01F16 var(--f, 100%), #EDECE6 0); }
.case__sheet--audit li i.s4 { --f: 78%; }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
.case__sheet--audit b { font-variant-numeric: lining-nums; }

/* ---------- Work: motion ----------
   main.js feeds each card: --rx/--ry (tilt), --mx/--my (pointer, 0–1), --dx (pointer offset, -1–1), --par (scroll drift in px). */
.case__media { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .4s; will-change: transform; }
.case.is-tilting .case__media { transition: transform .12s linear, box-shadow .4s; }
.case:has(a:hover) .case__media, .case:has(a:focus-visible) .case__media { box-shadow: 0 2.2rem 3rem -2rem rgba(20, 20, 20, .35); }
.case__media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(22rem circle at calc(var(--mx, .5) * 100%) calc(var(--my, .5) * 100%), rgba(255, 255, 255, .55), transparent 60%); mix-blend-mode: soft-light; }
.case:has(a:hover) .case__media::after { opacity: 1; }
.case__browser, .case__sheet, .case__phones,
.case:has(a:hover) :is(.case__browser, .case__sheet, .case__phones), .case:has(a:focus-visible) :is(.case__browser, .case__sheet, .case__phones) {
  transform: translate3d(calc(var(--dx, 0) * var(--shift, 0px)), calc(var(--par, 0) * 1px - var(--lift, 0px)), 0) scale(var(--zoom, 1));
  transform-origin: 50% 0;
}
.case:has(a:hover), .case:has(a:focus-visible) { --lift: 10px; --zoom: 1.025; --shift: -8px; }
.case__sheet { bottom: -12%; }
/* Phones open like a hand of cards */
.case__phones img { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.case:has(a:hover) .case__phones img:nth-child(1), .case:has(a:focus-visible) .case__phones img:nth-child(1) { transform: rotate(-12deg) translate(2%, 13%); }
.case:has(a:hover) .case__phones img:nth-child(2), .case:has(a:focus-visible) .case__phones img:nth-child(2) { transform: scale(1.1) translateY(-2%); }
.case:has(a:hover) .case__phones img:nth-child(3), .case:has(a:focus-visible) .case__phones img:nth-child(3) { transform: rotate(12deg) translate(-2%, 13%); }
/* Research sheets: the split slides, the severity bars fill */
.case__sheet--split span { transition: flex .6s, transform .7s cubic-bezier(.16, 1, .3, 1); }
.case:has(a:hover) .case__sheet--split span:first-child { transform: translateX(-3%); }
.case:has(a:hover) .case__sheet--split span:last-child { transform: translateX(3%); }
.case__sheet--audit li i { background-size: 0% 100%; background-repeat: no-repeat; background-color: #EDECE6; background-image: linear-gradient(#A01F16, #A01F16); transition: background-size .8s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 70ms); }
.case.is-seen .case__sheet--audit li i { background-size: var(--f, 100%) 100%; }
.case:has(a:hover) .case__sheet--audit li i { background-size: 0% 100%; transition-duration: 0s; transition-delay: 0s; }
.case__sheet--audit li:nth-child(2) i { --i: 1; } .case__sheet--audit li:nth-child(3) i { --i: 2; } .case__sheet--audit li:nth-child(4) i { --i: 3; } .case__sheet--audit li:nth-child(5) i { --i: 4; }
/* Press, title and tags */
.case:has(a:active) .case__media { transform: perspective(1000px) scale(.985); transition-duration: .15s; }
.case__title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s cubic-bezier(.16, 1, .3, 1); }
.case:has(a:hover) .case__title a, .case:has(a:focus-visible) .case__title a { background-size: 100% 1px; }
.case__tags span { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.case:has(a:hover) .case__tags span:nth-child(1) { transform: translateY(-2px); }
.case:has(a:hover) .case__tags span:nth-child(2) { transform: translateY(-2px); transition-delay: .05s; }
.case__plat { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.case:has(a:hover) .case__plat { transform: translate3d(0, 0, 30px); }
/* Arrival: the tile wipes open as it rises */
.case.is-waiting .case__media { clip-path: inset(12% 6% 0 6% round 1.25rem); }
.case__media { clip-path: inset(0 round 1.25rem); }
.case.is-arriving .case__media { transition: clip-path 1s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s), transform .6s; }
/* Filters: one dark pill glides between the chips */
.work__filters { position: relative; }
.chip { position: relative; z-index: 1; transition: color .3s, transform .2s; }
.chip:active:not(:disabled) { transform: scale(.96); }
.work__glider { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 2rem; background: #0B0B0B; pointer-events: none; transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0); width: var(--gw, 0px); height: var(--gh, 0px); transition: transform .5s cubic-bezier(.16, 1, .3, 1), width .5s cubic-bezier(.16, 1, .3, 1); }
.work__filters.has-glider .chip[aria-pressed="true"] { background: transparent; border-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .case__media, .case__browser, .case__sheet, .case__phones, .case__phones img { transform: none !important; }
  .case.is-waiting .case__media { clip-path: inset(0 round 1.25rem); }
  .case__sheet--audit li i { background-size: var(--f, 100%) 100%; }
}
@media (hover: none) { .case__arrow { opacity: 1; transform: none; } }

/* ---------- Breather between Work and Experience ---------- */
.pause { position: relative; z-index: 2; padding: clamp(5rem, 13vw, 12rem) var(--gutter) clamp(3rem, 7vw, 6rem); text-align: center; overflow: hidden; }
.pause__line { max-width: 22ch; margin: clamp(.75rem, 1.6vw, 1.5rem) auto 0; font-family: var(--serif); font-weight: 500; font-style: italic; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.06; letter-spacing: -.015em; text-wrap: balance; color: #1B1916; }
.pause__line span { transition: opacity .5s ease-out; }
.pause.is-live .pause__line span { opacity: .16; }
.pause.is-live .pause__line span.is-lit { opacity: 1; }
.pause__sky { position: relative; height: clamp(6rem, 15vw, 12rem); margin: clamp(1.5rem, 4vw, 3.5rem) calc(var(--gutter) * -1) 0; }
.pause__sky svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pause__sky path { fill: none; stroke: #8D8A80; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 4 7; vector-effect: non-scaling-stroke; }
.pause__sky img { position: absolute; left: 0; top: 0; width: clamp(2.75rem, 5.5vw, 4.5rem); height: auto; margin: calc(clamp(2.75rem, 5.5vw, 4.5rem) * -.4) 0 0 calc(clamp(2.75rem, 5.5vw, 4.5rem) * -.5); transform: translate3d(var(--px, 68vw), var(--py, 3rem), 0) rotate(var(--pr, -12deg)); will-change: transform; filter: drop-shadow(0 .6rem .6rem rgba(20, 20, 20, .16)); }

/* ---------- Beyond UX: a bento of three tiles ---------- */
.xp { padding-bottom: clamp(2rem, 5vw, 4rem); }
.beyond { position: relative; z-index: 2; padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 4rem) calc(24vw + 9rem); }   /* bottom room is for the footer lettering */
.beyond__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(17rem, auto)); gap: clamp(1rem, 2vw, 1.5rem); width: min(100%, 72rem); margin: clamp(2rem, 4.5vw, 3.75rem) auto 0; }
.btile { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 1.25rem; overflow: hidden; text-align: left; background: linear-gradient(165deg, color-mix(in srgb, var(--glow) 20%, #F5F4EF), #F5F4EF 72%); transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .4s, opacity .7s ease-out; }
.btile--photo { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.btile--music { grid-column: 8 / span 5; grid-row: 1; }
.btile--cook { grid-column: 8 / span 5; grid-row: 2; }
.btile:hover { transform: translateY(-4px); box-shadow: 0 2.2rem 3rem -2rem rgba(20, 20, 20, .35); }
.btile.is-waiting { opacity: 0; transform: translateY(2.5rem); }
.btile__tag { position: absolute; left: 1rem; top: 1rem; z-index: 3; padding: .2rem .7rem; border-radius: 2rem; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .8125rem; font-weight: 500; color: #1B1916; box-shadow: 0 0 0 1px rgba(20, 20, 20, .06); }
.btile__art { position: relative; flex: 1; min-height: 10rem; }
.btile__body { position: relative; z-index: 2; padding: 0 clamp(1.1rem, 2vw, 1.6rem) clamp(1.2rem, 2vw, 1.6rem); }
.btile__body h3 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.05; letter-spacing: -.01em; }
.btile__body p { margin-top: .45rem; max-width: 44ch; color: #5F584D; }
.btile--music, .btile--cook { flex-direction: row; align-items: flex-end; }
.btile--music .btile__body, .btile--cook .btile__body { flex: 1 1 52%; padding-top: 3.5rem; padding-right: .5rem; }
.btile--music .btile__art, .btile--cook .btile__art { flex: 1 1 48%; align-self: stretch; order: 2; }

/* The tiles and their labels carry the same sticker ring as the pills */
.beyond__grid { gap: clamp(1.5rem, 2.6vw, 2rem); }
.btile { border: 1px solid rgba(20, 20, 20, .08); box-shadow: 0 0 0 8px rgba(20, 20, 20, .045), 0 1.6rem 2.2rem -1.8rem rgba(20, 20, 20, .35); }
.btile:hover { box-shadow: 0 0 0 8px rgba(20, 20, 20, .06), 0 2.4rem 3rem -1.8rem rgba(20, 20, 20, .42); }
.btile__tag { background: #fff; border: 1px solid rgba(20, 20, 20, .1); box-shadow: 0 0 0 5px rgba(20, 20, 20, .055), 0 8px 14px -8px rgba(20, 20, 20, .22); }
/* Objects are die-cut stickers: a white edge, then a soft shadow */
.stick { position: absolute; overflow: visible; filter: url(#sticker) drop-shadow(0 0 1px rgba(20, 20, 20, .28)) drop-shadow(0 .8rem .9rem rgba(20, 20, 20, .2)); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }

/* Photography: three prints, fanned like the phones in the work cards, and a camera */
.print { position: absolute; left: 50%; top: 52%; width: 34%; aspect-ratio: 4 / 5; margin: -21% 0 0 -17%; padding: 3% 3% 9%; background: #fff; border-radius: .25rem; box-shadow: 0 0 0 1px rgba(20, 20, 20, .06), 0 2rem 3rem -1.6rem rgba(20, 20, 20, .5); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.print::before { content: ""; display: block; height: 100%; border-radius: .1rem; background: var(--scene); }
.print img { position: absolute; inset: 3% 3% 9%; width: 94%; height: 88%; object-fit: cover; border-radius: .1rem; }
.print--a { --scene: linear-gradient(180deg, #F3C9A8, #E79C8B 55%, #5B4A63); transform: translateX(-78%) rotate(-9deg); }
.print--b { --scene: linear-gradient(180deg, #BFD8EE, #EAF1F4 58%, #6E8A62 58%, #4F6B49); z-index: 2; transform: translateY(-4%) scale(1.06); }
.print--c { --scene: linear-gradient(180deg, #24304A, #5A5F88 60%, #E4B77A); transform: translateX(78%) rotate(9deg); }
.btile--photo:hover .print--a { transform: translateX(-92%) rotate(-13deg); }
.btile--photo:hover .print--b { transform: translateY(-7%) scale(1.1); }
.btile--photo:hover .print--c { transform: translateX(92%) rotate(13deg); }
.stick--camera { z-index: 3; right: 7%; bottom: 2%; width: 24%; transform: rotate(8deg); }
.btile--photo:hover .stick--camera { transform: rotate(-4deg) scale(1.08); }

/* Music: a record half out of its sleeve, and a few bars keeping time */
.stick--record { left: 0; right: 8%; top: 50%; width: 92%; max-height: 78%; transform: translateY(-46%) rotate(-4deg); }
.btile--music:hover .stick--record { transform: translateY(-48%) rotate(0deg); }
.rec { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.rec__spin { transform-box: fill-box; transform-origin: 50% 50%; }
.btile--music:hover .rec { transform: translateX(8px); }
.btile--music:hover .rec__spin { animation: spin 3.2s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.bars { position: absolute; right: 1.1rem; top: 1.1rem; display: flex; align-items: flex-end; gap: 3px; height: 1.4rem; }
.bars i { width: 3px; height: 100%; border-radius: 2px; background: #671813; transform-origin: 50% 100%; transform: scaleY(var(--h, .4)); }
.bars i:nth-child(1) { --h: .35; } .bars i:nth-child(2) { --h: .7; } .bars i:nth-child(3) { --h: .5; } .bars i:nth-child(4) { --h: 1; } .bars i:nth-child(5) { --h: .6; } .bars i:nth-child(6) { --h: .85; } .bars i:nth-child(7) { --h: .4; }
.btile--music:hover .bars i { animation: beat .9s ease-in-out infinite alternate; }
.bars i:nth-child(2n) { animation-delay: -.3s !important; } .bars i:nth-child(3n) { animation-delay: -.6s !important; }
@keyframes beat { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* Cooking: a dosa on a steel plate with sambar and chutney, and steam */
.stick--plate { left: 0; right: 8%; top: 52%; width: 92%; max-height: 80%; transform: translateY(-46%) rotate(5deg); }
.btile--cook:hover .stick--plate { transform: translateY(-48%) rotate(-3deg) scale(1.04); }
.steam { position: absolute; z-index: 2; left: 38%; top: 6%; width: 3rem; color: rgba(27, 25, 22, .3); opacity: 0; transform: translateY(.6rem); transition: opacity .5s, transform .9s cubic-bezier(.16, 1, .3, 1); }
.btile--cook:hover .steam { opacity: 1; transform: none; }

@media (max-width: 61.99rem) {
  .beyond__grid { grid-template-rows: none; }
  .btile--photo, .btile--music, .btile--cook { grid-column: 1 / -1; grid-row: auto; }
  .btile--photo { min-height: 26rem; }
  .btile--music, .btile--cook { min-height: 15rem; }
}
@media (max-width: 29.99rem) {
  .btile--music, .btile--cook { flex-direction: column; align-items: stretch; }
  .btile--music .btile__art, .btile--cook .btile__art { order: 0; min-height: 12rem; }
  .btile--music .btile__body, .btile--cook .btile__body { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btile, .print, .stick, .rec, .steam, .pause__line span { transition: none; }
  .btile--music:hover .rec__spin, .btile--music:hover .bars i { animation: none; }
  .btile.is-waiting { opacity: 1; transform: none; }
}

/* ---------- Intro, brought in line with the other sections ----------
   A kicker and title like Work and Experience; the story set in real type on the sheet;
   the painted Timeline tab leads to the Experience section; less empty page above and below. */
.intro { --breather: clamp(4rem, 9vw, 8rem); --after: clamp(2rem, 5vw, 4.5rem); }
.intro__head { position: relative; z-index: 2; padding-inline: var(--gutter); }
.intro__stage { position: relative; margin-top: clamp(1rem, 3vw, 2.5rem); }
.intro__bg { inset: 0; aspect-ratio: auto; }
.intro__folder { container-type: inline-size; }
.intro__tabs > div { display: flex; gap: .23%; flex: 2.01; }
.intro__tab--jump { display: block; text-decoration: none; }
.intro__tab--jump:hover { background: rgba(255, 255, 255, .32); }
.intro__copy { position: absolute; left: 11.4%; top: 21%; width: 46%; transform: rotate(-.85deg); transform-origin: 0 0; font-size: 1.42cqw; line-height: 1.5; color: #2A2622; text-align: left; }
.intro__panel--tldr .intro__copy { left: 10.4%; top: 22%; width: 46%; }
.intro__copy p + p { margin-top: .8em; }
.intro__copy p:first-child { font-family: var(--serif); font-weight: 600; font-size: 1.3em; line-height: 1.22; color: #1B1916; }
.intro__copy u { text-decoration-thickness: .09em; text-underline-offset: .2em; }
.intro__more { display: none; }
@media (max-width: 69.99rem) {
  .intro__bg { background-size: cover; }
  .intro__scroll { padding: 4vw 4vw 10vw; }
  .intro__folder { width: 92vw; }
  .intro__copy { font-size: 2.6cqw; }
  .intro__copy p:nth-child(n+2) { display: none; }
  .intro__more:not(:empty) { position: relative; z-index: 2; display: block; width: min(92vw, 42rem); margin: -5vw auto 0; padding: clamp(1.25rem, 4vw, 2rem); border-radius: .4rem; background: #FFFEEF; box-shadow: 0 0 0 1px rgba(20, 20, 20, .05), 0 1.6rem 2.2rem -1.6rem rgba(60, 50, 60, .4); line-height: 1.6; color: #2A2622; text-align: left; }
  .intro__more p + p { margin-top: .9em; }
  .intro__more u { text-decoration-thickness: .09em; text-underline-offset: .2em; }
}
.btile--music .btile__body, .btile--cook .btile__body { flex: 1 1 44%; }
.btile--music .btile__art, .btile--cook .btile__art { flex: 1 1 56%; }
.stick--record, .stick--plate { left: 4%; right: 6%; width: 90%; max-height: 86%; }
@media (max-width: 69.99rem) { .intro__copy, .intro__panel--tldr .intro__copy { width: 47%; font-size: 2.6cqw; } }

/* ---------- Hero to About: the plane flies down into the section ---------- */
.intro { --breather: 0rem; }
.glide { position: relative; z-index: 2; height: clamp(18rem, 44vw, 40rem); margin-bottom: clamp(.5rem, 1.5vw, 1.25rem); pointer-events: none; }
.glide svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.glide svg > path { fill: none; stroke: #8D8A80; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 4 7; vector-effect: non-scaling-stroke; }
.glide img { position: absolute; left: 0; top: 0; width: clamp(2.75rem, 5.5vw, 4.5rem); height: auto; margin: calc(clamp(2.75rem, 5.5vw, 4.5rem) * -.4) 0 0 calc(clamp(2.75rem, 5.5vw, 4.5rem) * -.5); transform: translate3d(var(--px, 50vw), var(--py, 96%), 0) rotate(var(--pr, 60deg)) scaleY(var(--flip, 1)); will-change: transform; filter: drop-shadow(0 .6rem .6rem rgba(20, 20, 20, .16)); }
.glide.is-live img { opacity: var(--show, 0); transition: opacity .3s; }

/* ---------- The third tab: Craft (what I do) ---------- */
.intro__tabs > div { flex: 1; gap: .15%; }
.intro__tab--lettered { display: grid; place-items: center; color: #14120F; font-family: "Playfair", "Playfair Display", Georgia, serif; font-weight: 400; font-size: 2.3cqw; letter-spacing: .01em; text-transform: uppercase; }
.intro__tab--lettered span { transform: translateY(8%); }
.intro__do { position: absolute; inset: 15.5% 7% 12.5% 9.5%; display: flex; flex-direction: column; text-align: left; color: #1B1916; }
.intro__do-label { display: flex; align-items: center; gap: .6em; font-size: 1.25cqw; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #671813; }
.intro__do-label::before { content: ""; width: .6em; height: .6em; background: #671813; transform: rotate(45deg); }
.intro__say { margin-top: 1.6cqw; font-family: var(--serif); font-weight: 700; font-size: 3.5cqw; line-height: 1.08; letter-spacing: -.012em; }
.intro__say em { font-family: "Brittany", "Luxurious Script", cursive; font-style: normal; font-weight: 400; font-size: 1.15em; line-height: .6; color: #671813; padding-inline: .1em; }
.intro__panel.is-active .intro__say :is(span, em) { animation: say-in .7s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 38ms + .1s) both; }
@keyframes say-in { from { opacity: .12; filter: blur(5px); transform: translateY(.18em); } }
.intro__say span { display: inline-block; }
.intro__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 5cqw; margin-top: auto; }
.intro__stats dt { font-weight: 600; font-size: 1.7cqw; line-height: 1.2; }
.intro__stats b { display: block; margin-bottom: 1cqw; padding-bottom: .8cqw; border-bottom: 1px solid rgba(27, 25, 22, .16); font-family: var(--serif); font-weight: 700; font-size: 6cqw; line-height: .9; letter-spacing: -.02em; color: #671813; font-variant-numeric: lining-nums; }
.intro__stats dd { margin: .5cqw 0 0; font-size: 1.42cqw; line-height: 1.45; color: #5F584D; }
@media (max-width: 69.99rem) {
  .intro__do-label { font-size: 2.1cqw; }
  .intro__say { font-size: 4.1cqw; }
  .intro__stats dt { font-size: 2.5cqw; }
  .intro__stats b { font-size: 8cqw; }
  .intro__stats dd { display: none; }
  .intro__more dl { display: grid; gap: 1rem; }
  .intro__more dt { font-weight: 600; }
  .intro__more dt b { margin-right: .4em; font-family: var(--serif); font-size: 1.5em; color: #671813; }
  .intro__more dd { margin: .2rem 0 0; color: #5F584D; }
}
@media (prefers-reduced-motion: reduce) { .intro__panel.is-active .intro__say :is(span, em) { animation: none; } }
.intro__tab--lettered { font-size: 3.15cqw; letter-spacing: 0; }
.intro__say { font-size: 4.1cqw; line-height: 1.16; }
.intro__say em { font-size: 1.5em; line-height: 0; vertical-align: -.06em; padding-inline: .12em .18em; }
@media (max-width: 69.99rem) {
  .intro__say { font-size: 4.3cqw; line-height: 1.14; }
  .intro__more .intro__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0; }
  .intro__more .intro__stats dt { font-size: 1rem; }
  .intro__more .intro__stats b { margin-bottom: .6rem; padding-bottom: .5rem; font-size: 2.6rem; }
  .intro__more .intro__stats dd { display: block; margin-top: .35rem; font-size: .9375rem; }
}
.intro__tab--lettered { font-size: 2.85cqw; letter-spacing: -.01em; }
.intro__say { line-height: 1.3; }
.intro__say em { font-size: 1.4em; padding-inline: .1em .12em; }
@media (max-width: 69.99rem) {
  .intro__do .intro__stats { display: none; }
  .intro__say { font-size: 5.1cqw; line-height: 1.28; }
}

/* ---------- Beyond UX, second pass: white tiles on a soft backdrop, photographs running off the edges ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bento { --row: clamp(19rem, 25vw, 22.5rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: var(--row); gap: clamp(.6rem, 1vw, .85rem); width: min(100%, 76rem); margin: clamp(2rem, 4.5vw, 3.75rem) auto 0; padding: clamp(.9rem, 3.4vw, 3rem); border-radius: clamp(1.5rem, 3vw, 2.5rem); background: radial-gradient(60% 55% at 0% 0%, #E7EBCB 0, transparent 70%), radial-gradient(70% 60% at 100% 100%, #C9D8F6 0, transparent 72%), radial-gradient(50% 50% at 100% 0%, #F6E9E4 0, transparent 70%), #F3F3EE; }
.bx { position: relative; display: flex; min-width: 0; border-radius: 1.5rem; overflow: hidden; background: #fff; text-align: left; box-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 1.4rem 2.4rem -1.8rem rgba(20, 20, 20, .3); transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .4s, opacity .7s ease-out; }
.bx:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(20, 20, 20, .05), 0 2.2rem 3rem -1.8rem rgba(20, 20, 20, .38); }
.bx.is-waiting { opacity: 0; transform: translateY(2.5rem); }
.bx--photo, .bx--lang { grid-column: span 8; }
.bx--music, .bx--cook { grid-column: span 4; }
.bx--chat { grid-column: 1 / -1; grid-row: span 1; }
.bx__text { position: relative; z-index: 2; padding: clamp(1.4rem, 2.6vw, 2.5rem); }
.bx__text h3 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem, 2.7vw, 2.4rem); line-height: .98; letter-spacing: -.015em; color: #14120F; }
.bx__text p { margin-top: .7rem; max-width: 30ch; font-size: .9375rem; line-height: 1.45; color: #5F584D; }
.bx__more { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; margin-top: .4rem; font-size: .9375rem; font-weight: 500; color: #671813; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.bx__more i { font-style: normal; color: #14120F; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.bx__more:hover i { transform: translateX(.3em); }
.bx__shot { position: absolute; max-width: none; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }

/* Photography: words on the left, three of her prints running off the right edge */
.bx--photo { align-items: center; }
.bx--photo .bx__text { flex: 0 0 44%; }
.bx__prints { position: absolute; right: -3%; top: 6%; width: 60%; height: 118%; transform: rotate(5deg); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.bx--photo:hover .bx__prints { transform: rotate(3deg) translateY(-2%); }
.bx__prints .print { top: 44%; width: 40%; margin: -25% 0 0 -20%; }
.bx--photo:hover .print--a { transform: translateX(-92%) rotate(-13deg); }
.bx--photo:hover .print--b { transform: translateY(-7%) scale(1.1); }
.bx--photo:hover .print--c { transform: translateX(92%) rotate(13deg); }

/* Music: words on top, the record below, cropped by the tile */
.bx--music { flex-direction: column; }
.bx--music .bx__shot { left: -34%; bottom: -24%; width: 150%; height: auto; -webkit-mask-image: linear-gradient(transparent 4%, #000 34%); mask-image: linear-gradient(transparent 4%, #000 34%); }
.bx--music:hover .bx__shot { transform: translateY(-3%) scale(1.03); }

/* Cooking: the plate on top, words below */
.bx--cook { flex-direction: column; justify-content: flex-end; }
.bx--cook .bx__shot { left: -12%; top: -14%; width: 124%; height: auto; -webkit-mask-image: linear-gradient(#000 52%, transparent 78%); mask-image: linear-gradient(#000 52%, transparent 78%); }
.bx--cook:hover .bx__shot { transform: translateY(2%) scale(1.03); }

/* Languages: one greeting per language */
.bx--lang { align-items: flex-end; }
.bx--lang .bx__text { flex: 0 0 46%; }
.bx__hello { flex: 1; align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: clamp(.9rem, 2vw, 1.75rem) clamp(1rem, 2vw, 2rem); padding: clamp(1.25rem, 2.4vw, 2.25rem) clamp(1.4rem, 2.6vw, 2.5rem) clamp(1.25rem, 2.4vw, 2.25rem) 0; }
.bx__hello li { padding-top: .7rem; border-top: 1px solid rgba(20, 20, 20, .12); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.bx__hello b { display: block; font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.25; color: #14120F; font-family: var(--sans), "Noto Sans Kannada", "Kannada Sangam MN", "Noto Sans Devanagari", "Kohinoor Devanagari", "Noto Sans Tamil", "Tamil Sangam MN", sans-serif; transition: color .3s; }
.bx__hello span { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: #5F584D; }
.bx__hello li:hover { transform: translateY(-3px); }
.bx__hello li:hover b { color: #671813; }

/* Chat: a scripted stand-in */
.bento > .bx--chat { height: auto; min-height: var(--row); align-items: stretch; }
.bento { grid-auto-rows: minmax(var(--row), auto); }
.bx--chat .bx__text { flex: 0 0 38%; align-self: center; }
.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; margin: clamp(.9rem, 1.6vw, 1.4rem); margin-left: 0; border-radius: 1.1rem; background: #F5F4EF; overflow: hidden; }
.chat__head { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; background: #fff; border-bottom: 1px solid rgba(20, 20, 20, .07); }
.chat__head img { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #F1E3C8; }
.chat__head p { display: grid; line-height: 1.25; }
.chat__head b { font-weight: 600; font-size: .9375rem; }
.chat__head span { font-size: .8125rem; color: #5F584D; }
.chat__log { flex: 1; display: flex; flex-direction: column; gap: .5rem; height: 11.5rem; padding: 1rem; overflow-y: auto; overscroll-behavior: contain; }
.chat__msg { width: fit-content; max-width: 85%; padding: .6rem .9rem; border-radius: 1.1rem 1.1rem 1.1rem .3rem; background: #fff; font-size: .9375rem; line-height: 1.4; box-shadow: 0 1px 1px rgba(20, 20, 20, .04); animation: msg-in .35s cubic-bezier(.16, 1, .3, 1); }
.chat__msg--me { margin-left: auto; border-radius: 1.1rem 1.1rem .3rem 1.1rem; background: #14120F; color: #fff; }
.chat__msg a { color: #671813; text-underline-offset: .2em; }
.chat__msg--typing { display: flex; gap: 4px; padding: .8rem .9rem; }
.chat__msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: #9A968B; animation: dot 1s ease-in-out infinite; }
.chat__msg--typing i:nth-child(2) { animation-delay: .15s; } .chat__msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes msg-in { from { opacity: 0; transform: translateY(.4rem); } }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.chat__chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1rem .75rem; }
.chat__chips button { min-height: 36px; padding: .3rem .85rem; border: 1px solid rgba(20, 20, 20, .14); border-radius: 2rem; background: #fff; font: 500 .875rem var(--sans); color: #14120F; cursor: pointer; transition: background-color .2s, transform .2s; }
.chat__chips button:hover { background: #EDECE6; }
.chat__chips button:active { transform: scale(.96); }
.chat__form { display: flex; gap: .5rem; padding: .7rem .8rem; background: #fff; border-top: 1px solid rgba(20, 20, 20, .07); }
.chat__form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 1rem; border: 1px solid rgba(20, 20, 20, .14); border-radius: 2rem; background: #fff; font: 1rem var(--sans); color: #14120F; }
.chat__form input::placeholder { color: #6F6B61; }
.chat__form button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #14120F; color: #fff; cursor: pointer; transition: transform .2s; }
.chat__form button:active { transform: scale(.94); }
.chat :focus-visible { outline: 2px solid #671813; outline-offset: 2px; }

@media (max-width: 61.99rem) {
  .bento { --row: 20rem; }
  .bx--photo, .bx--lang, .bx--music, .bx--cook { grid-column: 1 / -1; }
  .bx--music, .bx--cook { grid-column: span 6; }
  .bx--chat { flex-direction: column; }
  .bx--chat .bx__text { flex: none; align-self: stretch; }
  .chat { margin: 0 clamp(.9rem, 1.6vw, 1.4rem) clamp(.9rem, 1.6vw, 1.4rem); }
}
@media (max-width: 39.99rem) {
  .bx--music, .bx--cook { grid-column: 1 / -1; }
  .bx--photo { flex-direction: column; align-items: stretch; min-height: 27rem; }
  .bx--photo .bx__text { flex: none; }
  .bx__prints { right: 4%; top: 46%; width: 92%; height: 70%; }
  .bx--lang { flex-direction: column; align-items: stretch; }
  .bx--lang .bx__text { flex: none; padding-bottom: 0; }
  .bx__hello { padding: clamp(1.25rem, 2.4vw, 2.25rem) clamp(1.4rem, 2.6vw, 2.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .bx, .bx__shot, .bx__prints, .bx__hello li { transition: none; }
  .bx.is-waiting { opacity: 1; transform: none; }
  .chat__msg, .chat__msg--typing i { animation: none; }
}
@media (max-width: 39.99rem) {
  .bx--music, .bx--cook { min-height: 24rem; }
  .bx--music .bx__shot { left: -10%; bottom: -34%; width: 120%; -webkit-mask-image: linear-gradient(transparent 0, #000 22%); mask-image: linear-gradient(transparent 0, #000 22%); }
  .bx--cook .bx__shot { left: -10%; top: -22%; width: 120%; -webkit-mask-image: linear-gradient(#000 48%, transparent 68%); mask-image: linear-gradient(#000 48%, transparent 68%); }
}

/* Breather line, a size down */
.pause__line { max-width: 26ch; font-size: clamp(1.6rem, 3.3vw, 3rem); line-height: 1.12; }

/* Bento, third pass: a baby photo for the dosa tile, a Bengaluru tile, languages in a narrow tile */
.bx--blr, .bento > .bx--chat { grid-column: span 8; }
.bx--lang { grid-column: span 4; flex-direction: column; align-items: stretch; }
.bx--lang .bx__text { flex: none; padding-bottom: 0; }
.bx--lang .bx__hello { padding: clamp(1.1rem, 2vw, 1.75rem) clamp(1.4rem, 2.6vw, 2.5rem) clamp(1.4rem, 2.6vw, 2.5rem); gap: clamp(.8rem, 1.4vw, 1.2rem) 1rem; align-content: end; }
.bx--lang .bx__hello b { font-size: clamp(1.2rem, 1.75vw, 1.55rem); }
.bx--chat .bx__text { flex: 0 0 34%; }
.bx__snap { position: absolute; left: 50%; top: 7%; width: 74%; margin: 0 0 0 -37%; padding: 3.2% 3.2% 0; background: #fff; border-radius: .25rem; box-shadow: 0 0 0 1px rgba(20, 20, 20, .07), 0 1.6rem 2.2rem -1.4rem rgba(20, 20, 20, .5); transform: rotate(-4deg); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.bx__snap img { display: block; width: 100%; height: auto; border-radius: .1rem; }
.bx__snap figcaption { padding: .35rem 0 .5rem; text-align: center; font-family: "Brittany", "Luxurious Script", cursive; font-size: 1.15rem; line-height: 1.5; color: #671813; }
.bx--cook:hover .bx__snap { transform: rotate(2deg) scale(1.04); }
.bx--blr { align-items: flex-start; }
.bx--blr .bx__text { flex: 0 0 52%; }
.bx--blr .bx__shot { right: -6%; bottom: -2%; width: 66%; height: auto; }
.bx--blr:hover .bx__shot { transform: translateY(-3%) scale(1.03); }
.bx__tags { display: flex; flex-wrap: wrap; gap: .75rem .7rem; margin-top: 1.1rem; }
.bx__tags li { padding: .25rem .8rem; border: 1px solid rgba(20, 20, 20, .1); border-radius: 2rem; background: #fff; font-size: .8125rem; color: #5F584D; box-shadow: 0 0 0 5px rgba(20, 20, 20, .05); }
@media (max-width: 61.99rem) {
  .bx--blr, .bento > .bx--chat { grid-column: 1 / -1; }
  .bx--lang { grid-column: 1 / -1; }
  .bx--cook { min-height: 26rem; }
}
@media (max-width: 39.99rem) {
  .bx--cook { min-height: 27rem; }
  .bx__snap { width: 70%; margin-left: -35%; }
  .bx--blr { flex-direction: column; min-height: 27rem; }
  .bx--blr .bx__text { flex: none; }
  .bx--blr .bx__shot { right: -8%; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .bx__snap { transition: none; } }
@media (min-width: 40rem) {
  .bx__snap { top: 5%; width: 50%; margin-left: -25%; }
  .bx__snap figcaption { padding: .15rem 0 .3rem; font-size: 1rem; }
  .bx--cook .bx__text p { max-width: none; }
}

/* ---------- Bento, fourth pass: seven tiles of different sizes, each opening a window ---------- */
.beyond { padding-bottom: clamp(4rem, 9vw, 8rem); }
.bx__open { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; margin-top: .5rem; padding: 0 1.05rem; border: 1px solid rgba(20, 20, 20, .12); border-radius: 2rem; background: #fff; font: 500 .875rem var(--sans); color: #14120F; cursor: pointer; box-shadow: 0 0 0 5px rgba(20, 20, 20, .05); transition: background-color .25s, color .25s, transform .25s; }
.bx__open i { font-style: normal; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.bx__open:hover { background: #14120F; color: #fff; }
.bx__open:hover i { transform: translateX(.25em); }
.bx__open:active { transform: scale(.97); }
.bx__open:focus-visible, .win :focus-visible { outline: 2px solid #671813; outline-offset: 3px; }
.bx--lang { flex-direction: column; justify-content: center; gap: .7rem; padding: 1rem clamp(1.2rem, 2vw, 1.75rem); }
.bx--lang > h3 { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; line-height: 1.1; color: #14120F; }
.bx--lang .bx__hello { flex: none; align-self: stretch; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: .5rem; padding: 0; }
.bx--lang .bx__hello li { padding-top: .5rem; }
.bx--lang .bx__hello b { font-size: 1.05rem; }
.bx--lang .bx__hello span { font-size: .6875rem; }
.bx--line { align-items: center; padding: 1rem clamp(1.2rem, 2vw, 1.75rem); background: #14120F; }
.bx--line p { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.1; color: #fff; text-wrap: balance; }
@media (min-width: 62rem) {
  .bento { --u: clamp(8.75rem, 10.6vw, 10rem); grid-auto-rows: var(--u); }
  .bento > .bx { min-height: 0; }
  .bento > .bx--photo { grid-column: 1 / span 8; grid-row: 1 / span 3; }
  .bento > .bx--music { grid-column: 9 / span 4; grid-row: 1 / span 2; }
  .bento > .bx--lang  { grid-column: 9 / span 4; grid-row: 3; }
  .bento > .bx--cook  { grid-column: 1 / span 4; grid-row: 4 / span 3; }
  .bento > .bx--blr   { grid-column: 5 / span 8; grid-row: 4 / span 2; }
  .bento > .bx--chat  { grid-column: 5 / span 8; grid-row: 6 / span 2; height: auto; }
  .bento > .bx--line  { grid-column: 1 / span 4; grid-row: 7; }
  .bx--photo .bx__text { flex-basis: 40%; }
  .bx--photo .bx__text h3 { font-size: clamp(2.2rem, 3.6vw, 3.25rem); }
  .bx__prints { right: -2%; top: 10%; width: 62%; height: 110%; }
  .bx--music .bx__shot { left: -40%; bottom: -30%; width: 160%; }
  .bx__snap { top: 6%; width: 78%; margin-left: -39%; }
  .bx__snap figcaption { padding: .3rem 0 .5rem; font-size: 1.15rem; }
  .bx--blr .bx__text { flex-basis: 48%; }
  .bx--blr .bx__shot { right: -5%; width: 62%; }
  .bx--chat .bx__text { flex-basis: 30%; padding-right: .5rem; }
  .bx--chat .chat__log { height: auto; min-height: 0; }
  .bx--chat .chat__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bx--chat .chat__chips button { flex: none; }
}
@media (max-width: 61.99rem) {
  .bx--lang, .bx--line { grid-column: 1 / -1; }
  .bx--lang .bx__hello { grid-template-columns: repeat(2, 1fr); gap: .8rem 1rem; }
  .bx--line { min-height: 7rem; }
}

/* Windows */
.win { width: min(92vw, 54rem); max-height: min(88vh, 44rem); padding: 0; border: 0; border-radius: 1.1rem; background: #fff; color: #14120F; overflow: hidden; box-shadow: 0 0 0 1px rgba(20, 20, 20, .08), 0 3rem 5rem -2rem rgba(20, 20, 20, .55); }
.win[open] { display: flex; flex-direction: column; animation: win-in .4s cubic-bezier(.16, 1, .3, 1); }
.win::backdrop { background: rgba(20, 18, 15, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in .3s ease-out; }
@keyframes win-in { from { opacity: 0; transform: translateY(1.2rem) scale(.96); } }
@keyframes fade-in { from { opacity: 0; } }
.win__bar { display: flex; align-items: center; gap: .9rem; padding: .55rem .6rem .55rem 1rem; background: #F5F4EF; border-bottom: 1px solid rgba(20, 20, 20, .08); }
.win__dots { display: flex; gap: 6px; }
.win__dots i { width: 10px; height: 10px; border-radius: 50%; background: #D2D0C8; }
.win__dots i:first-child { background: #E7A9A0; } .win__dots i:nth-child(2) { background: #EBD08A; } .win__dots i:nth-child(3) { background: #A9D3A4; }
.win__bar h3 { flex: 1; font-family: var(--sans); font-weight: 500; font-size: .9375rem; }
.win__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; font-size: 1.4rem; line-height: 1; color: #14120F; cursor: pointer; }
.win__close:hover { background: rgba(20, 20, 20, .07); }
.win__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; text-align: left; }
.win h4 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.05; letter-spacing: -.01em; }
.win h5 { margin-bottom: .5rem; font-family: var(--sans); font-weight: 500; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #671813; }

.win--gallery { width: min(94vw, 62rem); background: #14120F; color: #fff; }
.win--gallery .win__bar { background: #1F1C18; border-color: rgba(255, 255, 255, .08); }
.win--gallery .win__close { color: #fff; }
.win--gallery .win__close:hover { background: rgba(255, 255, 255, .12); }
.win--gallery .win__body { display: flex; flex-direction: column; overflow: hidden; }
.gal__stage { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; padding: 1rem 1rem 0; }
.gal__stage img { flex: 1; min-height: 0; width: 100%; height: min(58vh, 30rem); object-fit: contain; border-radius: .4rem; }
.gal__stage.is-swapping img { animation: fade-in .35s ease-out; }
.gal__stage figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .25rem; font-size: .875rem; color: rgba(255, 255, 255, .78); }
.gal__nav { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 0 1rem 1rem; }
.gal__nav > button { flex: none; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: none; color: #fff; font-size: 1.1rem; cursor: pointer; transition: background-color .2s; }
.gal__nav > button:hover { background: rgba(255, 255, 255, .14); }
.gal__thumbs { display: flex; gap: .5rem; }
.gal__thumbs button { display: block; width: 3.5rem; height: 3.5rem; padding: 0; border: 2px solid transparent; border-radius: .5rem; background: none; overflow: hidden; cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s; }
.gal__thumbs button[aria-current="true"] { opacity: 1; border-color: #fff; }
.gal__thumbs button:hover { opacity: 1; }
.gal__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pl { display: flex; align-items: center; gap: clamp(1.25rem, 4vw, 2.5rem); padding: clamp(1.5rem, 4vw, 2.5rem); }
.pl__disc { flex: none; width: clamp(7rem, 22vw, 11rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #F1E3C8 0 5%, #8E2A3C 5.5% 30%, transparent 30.5%), repeating-radial-gradient(circle, #14120F 0 2px, #2C2925 2px 3px); box-shadow: 0 1.2rem 2rem -1rem rgba(20, 20, 20, .5); animation: spin 6s linear infinite; }
.pl__label { font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #671813; }
.pl__text h4 { margin-top: .4rem; }
.pl__text p:not(.pl__label) { margin-top: .6rem; color: #5F584D; }
.pl__slot:not(:empty) { margin-top: 1.25rem; }
.pl__slot iframe { display: block; width: 100%; border: 0; border-radius: .75rem; }

.split { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); }
.split__list { display: flex; flex-direction: column; gap: .25rem; padding: 1rem .75rem; background: #FAFAF7; border-right: 1px solid rgba(20, 20, 20, .08); }
.split__list button { min-height: 44px; padding: .5rem .9rem; border: 0; border-radius: .6rem; background: none; text-align: left; font: 500 .9375rem var(--sans); color: #14120F; cursor: pointer; transition: background-color .2s; }
.split__list button:hover { background: rgba(20, 20, 20, .06); }
.split__list button[aria-selected="true"] { background: #14120F; color: #fff; }
.split__note { margin-top: auto; padding: .9rem .9rem .25rem; font-size: .8125rem; color: #5F584D; }
.split__panels { padding: clamp(1.25rem, 3vw, 2.25rem); }
.split__panels section:not([hidden]) { animation: msg-in .4s cubic-bezier(.16, 1, .3, 1); }
.split__panels section > p:not(.rc__meta) { margin-top: .8rem; max-width: 46ch; font-size: 1.0625rem; line-height: 1.55; color: #3C382F; }
.rc__meta { font-size: .8125rem; color: #5F584D; }
.split__panels h4 { margin-top: .35rem; }
.rc__cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem clamp(1.25rem, 3vw, 2.25rem); margin-top: 1.25rem; font-size: .9375rem; line-height: 1.5; color: #3C382F; }
.rc__cols ul li { padding: .35rem 0; border-bottom: 1px solid rgba(20, 20, 20, .08); }
.rc__cols ol { counter-reset: s; }
.rc__cols ol li { counter-increment: s; position: relative; padding: 0 0 .7rem 2rem; }
.rc__cols ol li::before { content: counter(s); position: absolute; left: 0; top: .1rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #F1E3C8; font-size: .75rem; font-weight: 600; color: #671813; }
@media (max-width: 39.99rem) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__list { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(20, 20, 20, .08); padding: .6rem; }
  .split__list button { flex: none; white-space: nowrap; }
  .split__note { display: none; }
  .rc__cols { grid-template-columns: minmax(0, 1fr); }
  .pl { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .win[open], .win::backdrop, .pl__disc, .gal__stage.is-swapping img, .split__panels section:not([hidden]) { animation: none; } .bx__open, .bx__open i { transition: none; } }

/* ---------- Footer: light, like the rest of the site ---------- */
.foot { position: relative; z-index: 3; padding: 0 clamp(1rem, 4vw, 4rem) clamp(6.5rem, 10vw, 8rem); background: #fff; color: #14120F; }
.foot > * { width: min(100%, 72rem); margin-inline: auto; }
.foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; padding: clamp(2.5rem, 6vw, 4.5rem) 0; border-top: 1px solid rgba(20, 20, 20, .1); }
.foot__line { max-width: 20ch; font-family: var(--serif); font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
.foot__line em { font-weight: 500; color: #671813; }
.foot__cta { display: inline-flex; align-items: center; gap: .6em; min-height: 48px; padding: 0 1.6rem; border-radius: 2rem; background: #14120F; color: #fff; font-weight: 500; font-size: .9375rem; text-decoration: none; box-shadow: 0 0 0 6px rgba(20, 20, 20, .07), 0 14px 28px -14px rgba(11, 11, 11, .5); transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.foot__cta i { font-style: normal; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.foot__cta:hover { transform: translateY(-2px); }
.foot__cta:hover i { transform: translateX(.3em); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; padding: clamp(1.75rem, 4vw, 2.5rem) 0; border-top: 1px solid rgba(20, 20, 20, .1); font-size: .9375rem; line-height: 1.55; color: #5F584D; }
.foot__name { font-family: var(--serif); font-weight: 700; font-size: 1.35rem; line-height: 1.2; color: #14120F; }
.foot__label { margin-bottom: .6rem; font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #671813; }
.foot li + li { margin-top: .15rem; }
.foot__grid a, .foot__base a { display: inline-block; padding: .2rem 0; color: #14120F; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s cubic-bezier(.16, 1, .3, 1); }
.foot__grid a:hover, .foot__base a:hover, .foot__grid a:focus-visible, .foot__base a:focus-visible { background-size: 100% 1px; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(20, 20, 20, .1); font-size: .875rem; color: #5F584D; }
@media (max-width: 39.99rem) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__id { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .foot__cta, .foot__cta i, .foot__grid a, .foot__base a { transition: none; } }
@media (min-width: 62rem) {
  .bx--music .bx__shot { left: -22%; bottom: -40%; width: 122%; -webkit-mask-image: linear-gradient(transparent 0, #000 26%); mask-image: linear-gradient(transparent 0, #000 26%); }
  .bx--music .bx__text p { max-width: none; }
  .bx__snap { top: 5%; width: 68%; margin-left: -34%; }
}
@media (max-width: 61.99rem) {
  .bento { grid-auto-rows: auto; }
  .bx--photo, .bx--blr, .bx--music, .bx--cook { min-height: 22rem; }
  .bx--lang { padding-block: 1.4rem; }
  .bx--line { min-height: 0; padding-block: 1.6rem; }
}
@media (max-width: 39.99rem) {
  .bx--photo { min-height: 29rem; }
  .bx--music { min-height: 24rem; }
  .bx--cook { min-height: 30rem; }
  .bx--blr { min-height: 27rem; }
  .bx__snap { top: 5%; width: 62%; margin-left: -31%; }
  .bx__prints { top: 52%; height: 62%; }
}

/* ---------- Footer, uncovered: the page is a sheet that lifts away to show it ---------- */
main { position: relative; z-index: 2; background: #fff; border-radius: 0 0 clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem); box-shadow: 0 2.5rem 4rem -2rem rgba(0, 0, 0, .45); }
.foot { z-index: 1; margin-top: calc(clamp(1.5rem, 3vw, 2.5rem) * -1); padding: calc(clamp(1.5rem, 3vw, 2.5rem) + clamp(2rem, 5vw, 4rem)) clamp(1rem, 4vw, 4rem) 0; background: #14120F; color: #F5F4EF; overflow: hidden; }
.foot > * { width: min(100%, 72rem); margin-inline: auto; }
.foot__inner { transform: translateY(calc((1 - var(--seen, 1)) * -3rem)); opacity: calc(.35 + var(--seen, 1) * .65); will-change: transform, opacity; }
.foot__top { align-items: flex-end; padding: 0 0 clamp(2rem, 5vw, 3.5rem); border-top: 0; }
.foot__line { max-width: 16ch; font-size: clamp(2.2rem, 5.2vw, 4.5rem); color: #fff; }
.foot__line em { color: #E3B9A6; }
.foot__hello { display: grid; justify-items: start; gap: 1rem; max-width: 21rem; font-size: .9375rem; line-height: 1.5; color: rgba(245, 244, 239, .75); }
.foot__cta { background: #fff; color: #14120F; box-shadow: 0 0 0 6px rgba(255, 255, 255, .1); }
.foot__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); border-color: rgba(255, 255, 255, .14); color: rgba(245, 244, 239, .75); }
.foot__label { color: #E3B9A6; }
.foot__grid a, .foot__base a { color: #fff; }
.foot__base { border-color: rgba(255, 255, 255, .14); color: rgba(245, 244, 239, .7); }
.foot__clocks { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.5rem); }
.foot__clocks p { display: grid; gap: .1rem; }
.foot__clocks span { font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #E3B9A6; }
.foot__clocks b { font-family: var(--serif); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.foot__clocks small { font-size: .8125rem; color: rgba(245, 244, 239, .7); }
.foot__clocks svg { flex: none; width: clamp(4rem, 9vw, 7.5rem); color: rgba(245, 244, 239, .6); }
.foot__mark { margin-top: clamp(1rem, 2.5vw, 2rem); font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(3.4rem, 13.4vw, 11.5rem); line-height: .8; letter-spacing: -.03em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(245, 244, 239, .28); padding-bottom: clamp(5.5rem, 8vw, 6.5rem); user-select: none; }
.foot.is-under { position: sticky; bottom: 0; }   /* set by main.js only when the whole footer fits in the window */
.foot__line { max-width: 24ch; font-size: clamp(2rem, 4.3vw, 3.6rem); }
.foot__top { padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
.foot { padding-top: calc(clamp(1.5rem, 3vw, 2.5rem) + clamp(1.75rem, 4vw, 3rem)); }
.foot__grid { padding-block: clamp(1.25rem, 3vw, 2rem); }
.foot__mark { margin-top: clamp(.5rem, 1.5vw, 1.25rem); font-size: clamp(3.2rem, 12.6vw, 10.5rem); padding-bottom: clamp(5rem, 7vw, 5.75rem); }
@media (max-width: 39.99rem) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__clocks { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .foot__inner { transform: none; opacity: 1; } }

/* ---------- Footer, simplified: paper-coloured, centred like the page's sections, no black ---------- */
main { box-shadow: 0 1.5rem 3rem -2rem rgba(20, 20, 20, .22); }
.foot { background: #F5F4EF; color: #14120F; text-align: center; padding-bottom: 0; }
.foot__inner { display: flex; flex-direction: column; align-items: center; padding: clamp(1.5rem, 4vw, 3rem) 0 0; }
.foot__line { max-width: 22ch; margin-top: clamp(.75rem, 1.6vw, 1.5rem); font-size: clamp(1.9rem, 3.8vw, 3.25rem); color: #14120F; }
.foot__line em { color: #671813; }
.foot__cta { margin-top: clamp(1.5rem, 3vw, 2.25rem); background: #fff; color: #14120F; border: 1px solid rgba(20, 20, 20, .1); box-shadow: 0 0 0 6px rgba(20, 20, 20, .05), 0 10px 24px -14px rgba(20, 20, 20, .35); }
.foot__clocks { justify-content: center; margin-top: clamp(2rem, 4.5vw, 3.5rem); text-align: left; }
.foot__clocks span { color: #671813; }
.foot__clocks b { font-size: clamp(1.5rem, 2.4vw, 2rem); color: #14120F; }
.foot__clocks svg { color: #8D8A80; }
.foot__base { align-self: stretch; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem 2rem; margin-top: clamp(2rem, 4.5vw, 3.5rem); padding: 1.25rem 0 clamp(6rem, 9vw, 7rem); border-top: 1px solid rgba(20, 20, 20, .1); color: #5F584D; }
.foot__base > :first-child { text-align: left; }
.foot__base > :last-child { text-align: right; }
.foot__base ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; }
.foot__base li + li { margin-top: 0; }
.foot__base a { color: #14120F; }
@media (max-width: 61.99rem) {
  .foot__base { grid-template-columns: 1fr; justify-items: center; }
  .foot__base > :first-child, .foot__base > :last-child { text-align: center; }
  .foot__base ul { order: -1; }
}

/* ---------- Chat, tidied: one bordered card, suggestions that wrap instead of running off the edge ---------- */
.chat { border: 1px solid rgba(20, 20, 20, .09); background: #F7F6F2; }
.chat__head { padding: .7rem .9rem; }
.chat__head img { width: 2.25rem; height: 2.25rem; }
.chat__log { padding: .9rem; gap: .45rem; }
.chat__chips, .bx--chat .chat__chips { flex-wrap: wrap; overflow: visible; gap: .4rem; padding: 0 .9rem .8rem; }
.chat__chips button { min-height: 34px; padding: .25rem .8rem; font-size: .8125rem; }
.chat__form { padding: .6rem .7rem; }
.chat__form input { background: #F7F6F2; border-color: transparent; }
.chat__form input:focus-visible { background: #fff; border-color: rgba(20, 20, 20, .14); }
@media (min-width: 62rem) { .bx--chat .chat__log { min-height: 3.25rem; } }
@media (min-width: 62rem) {
  .bento { grid-auto-rows: minmax(var(--u), auto); }
  .bx--chat .chat__log { min-height: 5.75rem; }
  .bx--chat .bx__text { flex-basis: 27%; }
}

/* ================= About: an index-card folder over a sky ================= */
.intro__bg { background: url("assets/intro-sky.webp") center / cover no-repeat; -webkit-mask-image: linear-gradient(transparent 0, #000 26%, #000 74%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 26%, #000 74%, transparent 100%); }
.intro__scroll { padding: clamp(5rem, 12vw, 11rem) clamp(1rem, 4vw, 4rem) clamp(6rem, 13vw, 12rem); }
.intro__folder.card { width: min(100%, 58rem); aspect-ratio: auto; container-type: normal; filter: drop-shadow(0 2rem 2.6rem rgba(30, 50, 60, .3));
  transform: translateY(calc((1 - var(--in, 1)) * 9vw)) rotateX(calc((1 - var(--in, 1)) * 16deg)) rotate(calc(-1.6deg + (1 - var(--in, 1)) * -2.5deg)) scale(calc(.9 + var(--in, 1) * .1)); }
.intro__folder.card.is-flat { transform: rotate(-1.6deg); }
.card__tabs { position: relative; z-index: 1; display: flex; gap: .3rem; padding-left: clamp(1.25rem, 5vw, 3.5rem); }
.card__tab { min-height: 44px; padding: .35rem 1.4rem .2rem; border: 0; border-radius: .7rem .7rem 0 0; background: var(--tab); font: 500 .75rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #3C382F; cursor: pointer; transform: translateY(6px); transition: transform .35s cubic-bezier(.16, 1, .3, 1), background-color .3s; }
.card__tab:hover { transform: translateY(2px); }
.card__tab[aria-selected="true"] { background: #FBF9F1; color: #14120F; transform: none; }
.card__tab:focus-visible { outline: 2px solid #671813; outline-offset: -4px; }
.card__sheet { position: relative; z-index: 2; min-height: clamp(21rem, 40vw, 27rem); padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4.5vw, 3.5rem) clamp(1.75rem, 4vw, 3rem); border-radius: .5rem; background: #FBF9F1; text-align: left; color: #1B1916; }
.card__sticker { position: absolute; right: clamp(-1.25rem, -2vw, -.5rem); top: clamp(-2.25rem, -4vw, -1.25rem); width: clamp(4rem, 9vw, 6.5rem); height: auto; transform: rotate(14deg); filter: drop-shadow(0 .6rem .7rem rgba(20, 20, 20, .22)); pointer-events: none; }
.card .intro__panel { position: static; inset: auto; display: none; opacity: 1; visibility: visible; pointer-events: auto; }
.card .intro__panel.is-active { display: block; animation: sheet-in .4s ease-out; }
.card .intro__panel.is-leaving { display: none; }
.card__label { display: flex; align-items: center; gap: .6em; font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #671813; }
.card__label::before { content: ""; width: .5em; height: .5em; background: #671813; transform: rotate(45deg); }
.card .intro__say { margin-top: 1.1rem; max-width: 24ch; font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.22; }
.card .intro__say em { font-size: 1.35em; }
.card .intro__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); margin-top: clamp(1.75rem, 4vw, 3rem); }
.card .intro__stats dt { font-size: 1rem; }
.card .intro__stats b { margin-bottom: .6rem; padding-bottom: .5rem; font-size: clamp(2.4rem, 5vw, 3.5rem); }
.card .intro__stats dd { display: block; margin-top: .35rem; font-size: .9375rem; line-height: 1.5; }
.card__cols { display: grid; grid-template-columns: minmax(0, 1fr) clamp(11rem, 26%, 15rem); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-top: 1.1rem; }
.card__copy { font-size: 1rem; line-height: 1.6; color: #2A2622; }
.card__copy--wide { margin-top: 1.1rem; max-width: 46rem; }
.card__copy p + p { margin-top: .85em; }
.card__copy p:first-child { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; line-height: 1.25; color: #14120F; }
.card__copy u { text-decoration-thickness: .08em; text-underline-offset: .2em; }
.card__snaps { display: grid; gap: .9rem; }
.card__snaps figure { margin: 0; padding: .45rem .45rem 1.3rem; background: #fff; box-shadow: 0 0 0 1px rgba(20, 20, 20, .06), 0 1rem 1.4rem -1rem rgba(20, 20, 20, .45); transform: rotate(var(--r, 3deg)); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.card__snaps figure:nth-child(2) { --r: -4deg; margin-left: 14%; }
.card__snaps figure:nth-child(3) { --r: 2deg; margin-right: 10%; }
.card__snaps figure:hover { transform: rotate(0deg) scale(1.04); }
.card__snaps img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 47.99rem) {
  .intro__folder.card, .intro__folder.card.is-flat { transform: none; }
  .card__tab { padding-inline: 1rem; }
  .card__cols { grid-template-columns: minmax(0, 1fr); }
  .card__snaps { grid-template-columns: repeat(3, minmax(0, 1fr)); order: -1; }
  .card__snaps figure:nth-child(n) { margin: 0; }
  .card .intro__stats { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .card__tab, .card__snaps figure { transition: none; } .card .intro__panel.is-active { animation: none; } }

/* ================= Work: cards swing up into place with the scroll ================= */
.cases { perspective: 1400px; }
.cases .case { transform-origin: 50% 100%; opacity: calc(.2 + var(--enter, 1) * .8);
  transform: translate3d(calc((1 - var(--enter, 1)) * var(--side, 0) * 3.5rem), calc((1 - var(--enter, 1)) * 5.5rem), 0) rotateX(calc((1 - var(--enter, 1)) * 14deg)) rotateZ(calc((1 - var(--enter, 1)) * var(--side, 0) * 2.2deg)) scale(calc(.9 + var(--enter, 1) * .1)); will-change: transform, opacity; }
.cases .case:nth-child(odd) { --side: -1; }
.cases .case:nth-child(even) { --side: 1; }
.work__head { transform: scale(calc(.94 + var(--enter, 1) * .06)); opacity: calc(.3 + var(--enter, 1) * .7); transform-origin: 50% 100%; }
@media (max-width: 47.99rem) { .cases .case:nth-child(n) { --side: 0; } }

/* ================= Footer: compact, sliding up over the last section ================= */
main { position: sticky; top: calc(100vh - var(--main-h, 100000px)); border-radius: 0; box-shadow: none; }
.beyond { padding-bottom: clamp(3rem, 6vw, 5rem); }
.foot, .foot.is-under { position: relative; z-index: 4; margin-top: 0; padding: 0 clamp(1rem, 4vw, 4rem); border-radius: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2rem) 0 0; background: #F5F4EF; box-shadow: 0 -1.5rem 3rem -1.5rem rgba(20, 20, 20, .28); text-align: left; overflow: visible; }
.foot__inner { display: block; padding: 0; transform: none; opacity: 1; }
.foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: clamp(1.75rem, 3.5vw, 2.5rem) 0 clamp(1.25rem, 2.5vw, 1.75rem); border: 0; }
.foot__line { max-width: none; margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.15; }
.foot__cta { margin: 0; min-height: 44px; }
.foot__base { margin-top: 0; padding: 1.1rem 0 clamp(5.75rem, 8vw, 6.5rem); }
.foot__clocks { display: flex; justify-content: flex-end; gap: 1.25rem; margin: 0; text-align: right; font-size: .875rem; color: #5F584D; }
.foot__clocks span { font-size: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.foot__clocks b { font-family: var(--sans); font-weight: 500; font-size: inherit; color: #14120F; font-variant-numeric: tabular-nums; }
@media (max-width: 61.99rem) { .foot__clocks { justify-content: center; } }
.card .intro__panel img { position: static; left: auto; top: auto; width: 100%; max-width: 100%; }
.card .intro__say { max-width: none; font-size: clamp(1.6rem, 3.1vw, 2.5rem); }
@media (max-width: 47.99rem) { .card__snaps { margin-bottom: .5rem; } .card__snaps figure { padding: .3rem .3rem .9rem; } }
@media (min-width: 48rem) { .card__cols { grid-template-columns: minmax(0, 1fr) clamp(8.5rem, 19%, 11rem); } .card__snaps { gap: .7rem; } }

/* ================= About card, second pass: built like an index-divider card =================
   A grained cream card tipped to the left, three equal divider tabs along its top-right edge, a large
   centred title, two stickers on its edges, and small captions in the corners of the sky. */
.intro__bg { -webkit-mask-image: linear-gradient(transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 22%, #000 78%, transparent 100%); }
.intro__bg::after { content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: soft-light; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
.intro__scroll { position: relative; }
.card__corner { position: absolute; z-index: 1; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(20, 60, 80, .35); }
.card__corner--tl { left: clamp(1rem, 6vw, 5rem); top: clamp(4.5rem, 9vw, 8rem); }
.card__corner--tr { right: clamp(1rem, 6vw, 5rem); top: clamp(4.5rem, 9vw, 8rem); }
.card__corner--bl { left: clamp(1rem, 6vw, 5rem); bottom: clamp(5rem, 10vw, 9rem); }
.card__corner--br { right: clamp(1rem, 6vw, 5rem); bottom: clamp(5rem, 10vw, 9rem); font-variant-numeric: tabular-nums; }
.intro__folder.card { width: min(100%, 54rem); filter: drop-shadow(0 1.6rem 2.4rem rgba(20, 50, 70, .28));
  transform: translateY(calc((1 - var(--in, 1)) * 9vw)) rotateX(calc((1 - var(--in, 1)) * 16deg)) rotate(calc(-3.5deg + (1 - var(--in, 1)) * -2.5deg)) scale(calc(.9 + var(--in, 1) * .1)); }
.intro__folder.card.is-flat { transform: rotate(-3.5deg); }
.card__tabs { justify-content: flex-end; gap: .2rem; padding: 0 clamp(.75rem, 3vw, 2rem) 0 0; }
.card__tab { flex: 0 1 8.25rem; min-height: 2.9rem; padding: .3rem .5rem 0; border-radius: .95rem .95rem 0 0; background: var(--tab); color: var(--tab-ink, #3C382F); font-size: .8125rem; letter-spacing: .2em; transform: none; }
.card__tab:hover { transform: translateY(-3px); }
.card__tab[aria-selected="true"] { background: #F6F1E7; color: #2A2622; transform: none; }
.card__sheet { min-height: clamp(22rem, 42vw, 27rem); border-radius: .35rem; background-color: #F6F1E7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E"); text-align: center; }
.card__sticker { position: absolute; z-index: 3; height: auto; pointer-events: none; filter: drop-shadow(0 .5rem .6rem rgba(20, 20, 20, .18)); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.card__sticker--flower { right: clamp(-2.6rem, -4vw, -1.25rem); top: 16%; width: clamp(4rem, 9vw, 6.25rem); transform: rotate(12deg); }
.card__sticker--note { left: clamp(-2.4rem, -3.5vw, -1rem); right: auto; top: auto; bottom: clamp(-2.75rem, -4vw, -1.5rem); width: clamp(4.25rem, 9.5vw, 6.75rem); transform: rotate(-14deg); }
.card:hover .card__sticker--flower { transform: rotate(28deg) scale(1.06); }
.card:hover .card__sticker--note { transform: rotate(-6deg) scale(1.06); }
.card__title { font-family: "Playfair", "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(3.4rem, 9vw, 6.5rem); line-height: .95; letter-spacing: -.04em; color: #2A1F2B; transform: scaleX(.86); }
.card__sub { margin-top: .6rem; font-size: .8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #6B5F52; }
.card .intro__say { margin: clamp(1.5rem, 3.5vw, 2.5rem) auto 0; max-width: 34ch; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.3; font-weight: 600; }
.card .intro__stats { margin-top: clamp(1.5rem, 3.5vw, 2.5rem); text-align: left; }
.card .intro__stats b { font-size: clamp(2rem, 4vw, 2.75rem); }
.card__cols, .card__copy--wide { margin-top: clamp(1.5rem, 3.5vw, 2.5rem); text-align: left; }
.card__copy--wide { margin-inline: auto; }
@media (max-width: 47.99rem) {
  .intro__folder.card, .intro__folder.card.is-flat { transform: rotate(-1.5deg); }
  .card__tabs { padding-right: .5rem; }
  .card__tab { flex-basis: 6.5rem; letter-spacing: .14em; font-size: .75rem; }
  .card__corner--bl, .card__corner--br { bottom: 3.5rem; }
  .card__corner--tl, .card__corner--tr { top: 2.5rem; }
  .card__sticker--flower { top: 3.25rem; right: -.6rem; width: 3.25rem; }
  .card__sticker--note { left: -.5rem; bottom: -2.6rem; width: 3.75rem; }
  .card .card__sheet { padding-bottom: 2.75rem; }
}
.card .intro__say em { font-family: inherit; font-style: italic; font-size: 1em; line-height: inherit; vertical-align: baseline; padding: 0; }
@media (prefers-reduced-motion: reduce) { .card__sticker { transition: none; } }

/* ================= About, third pass: sky from the skyline, and a layered folder =================
   The sky starts under the hero's skyline as loose cloud and thickens toward the folder, then
   breaks up again before the work. Both edges are cloud-shaped masks, so there is no straight line. */
.intro__bg { display: none; }
.intro__sky {
  --top: clamp(34rem, 74vw, 66rem); --bottom: clamp(11rem, 24vw, 22rem);
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/intro-sky.webp") center / cover no-repeat;
  -webkit-mask: url("assets/sky-fade-top.webp") top / 100% var(--top) no-repeat, url("assets/sky-fade-bottom.webp") bottom / 100% var(--bottom) no-repeat, linear-gradient(#000, #000) 0 calc(var(--top) - 1px) / 100% calc(100% - var(--top) - var(--bottom) + 2px) no-repeat;
  mask: url("assets/sky-fade-top.webp") top / 100% var(--top) no-repeat, url("assets/sky-fade-bottom.webp") bottom / 100% var(--bottom) no-repeat, linear-gradient(#000, #000) 0 calc(var(--top) - 1px) / 100% calc(100% - var(--top) - var(--bottom) + 2px) no-repeat;
}
.intro__stage { z-index: 1; }
.intro__head .work__title, .intro__head .work__kicker { text-shadow: 0 0 .9em rgba(255, 255, 255, .95), 0 0 2em rgba(255, 255, 255, .85), 0 0 3.2em rgba(255, 255, 255, .7); }
.glide img { width: clamp(2.1rem, 3.9vw, 3.3rem); margin: calc(clamp(2.1rem, 3.9vw, 3.3rem) * -.4) 0 0 calc(clamp(2.1rem, 3.9vw, 3.3rem) * -.5); }

.intro__folder.fold { width: min(100%, 56rem); aspect-ratio: auto; filter: drop-shadow(0 1.6rem 2.4rem rgba(20, 50, 70, .3));
  transform: translateY(calc((1 - var(--in, 1)) * 9vw)) rotateX(calc((1 - var(--in, 1)) * 16deg)) rotate(calc(-3.5deg + (1 - var(--in, 1)) * -2.5deg)) scale(calc(.9 + var(--in, 1) * .1)); }
.intro__folder.fold.is-flat { transform: rotate(-3.5deg); }
.fold { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .2 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E");
  --narrow: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif; }
.fold__tabs { position: relative; z-index: 1; display: flex; justify-content: flex-end; gap: .25rem; padding-right: clamp(.6rem, 3vw, 2.25rem); }
.fold__tab { flex: 0 1 8.5rem; min-width: 0; min-height: 3rem; margin-bottom: -1px; padding: .3rem .4rem 0; border: 0; border-radius: 1rem 1rem 0 0; background: var(--tab) var(--grain); color: var(--ink, #2E2A33); font: 500 .8125rem var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.fold__tab:hover { transform: translateY(-4px); }
.fold__tab[aria-selected="true"] { transform: none; font-weight: 600; }
.fold__tab:focus-visible { outline: 2px solid #14120F; outline-offset: -5px; }
.fold__body { position: relative; z-index: 2; display: grid; }
.fold__panel { grid-area: 1 / 1; position: relative; display: grid; min-height: clamp(23rem, 41vw, 29rem); padding: clamp(1.1rem, 3vw, 2.25rem) clamp(1.1rem, 3vw, 2.5rem); border-radius: .4rem; background: var(--face) var(--grain); color: #1E1A17; visibility: hidden; opacity: 0; }
.fold__panel.is-active { visibility: visible; opacity: 1; z-index: 2; animation: sheet-in .4s ease-out; }
.fold__panel.is-leaving { visibility: visible; opacity: 1; z-index: 1; }

/* The paper page lying on the folder, with a second sheet peeking out behind it */
.fold__page { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.7fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; margin-left: clamp(2rem, 6vw, 4.5rem); padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3.4vw, 2.75rem); transform: rotate(.8deg); }
.fold__page::before, .fold__page::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #F7F3EB var(--grain); box-shadow: 0 .6rem 1rem -.7rem rgba(50, 35, 25, .45), 0 0 0 1px rgba(60, 45, 30, .04); }
.fold__page::before { z-index: -2; background-color: #EFE9DC; transform: rotate(-1.7deg) translate(-.5rem, .55rem); }
.fold__page--flip { grid-template-columns: minmax(0, 1.7fr) minmax(0, .74fr); margin-left: 0; margin-right: clamp(2rem, 6vw, 4.5rem); transform: rotate(-.8deg); }
.fold__page--flip::before { transform: rotate(1.6deg) translate(.5rem, .5rem); }
.fold__text { font-family: var(--narrow); font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.3; }
.fold__text p + p { margin-top: .7em; }
.fold__text u { text-decoration-thickness: .07em; text-underline-offset: .18em; }

/* Photos: a coloured border, a strip of tape, and hanging off the edge of the page */
.fold__pics { position: relative; display: grid; margin-left: calc(clamp(3rem, 8vw, 6rem) * -1); }
.fold__page--flip .fold__pics { margin-left: 0; margin-right: calc(clamp(3rem, 8vw, 6rem) * -1); }
.fold__pic { position: relative; margin: 0; border: clamp(.3rem, .7vw, .5rem) solid var(--edge); background: var(--edge); box-shadow: 0 .9rem 1.2rem -.8rem rgba(40, 25, 15, .55); transform: rotate(var(--r, -5deg)); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.fold__pic::before { content: ""; position: absolute; z-index: 1; left: 26%; top: clamp(-1.2rem, -1.6vw, -.8rem); width: clamp(3rem, 7vw, 4.75rem); height: clamp(1rem, 2.1vw, 1.5rem); background: rgba(248, 244, 234, .86); box-shadow: 0 1px 2px rgba(40, 30, 20, .16); transform: rotate(-5deg); }
.fold__pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.fold__pic:hover { transform: rotate(0deg) scale(1.03); z-index: 2; }
.fold__pics--two .fold__pic:first-child { --r: 4deg; width: 78%; }
.fold__pics--two .fold__pic:last-child { --r: -6deg; width: 86%; margin: -22% 0 0 18%; }
.fold__pics--two .fold__pic:last-child img { aspect-ratio: 4 / 3; }
.fold__pics--two .fold__pic:last-child::before { left: 52%; transform: rotate(7deg); }

/* Craft: the folder itself, one statement, three promises */
.fold__panel--craft { align-content: center; padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 5vw, 4rem); text-align: center; color: #FFFDF6; }
.fold__quote { font-family: "Playfair", "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(2.3rem, 6.2vw, 4.6rem); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; transform: scaleX(.88); }
.fold__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.25rem); margin: clamp(1.75rem, 4.5vw, 3rem) 0 0; padding: 0; list-style: none; text-align: left; font-family: var(--narrow); font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.22; }
.fold__trio li { padding-top: .7rem; border-top: 1px solid rgba(255, 253, 246, .6); }
.fold__trio b { display: block; margin-bottom: .4rem; font: 500 .75rem var(--sans); letter-spacing: .2em; }
.fold__aside { margin-top: clamp(1.5rem, 3.5vw, 2.5rem); font-family: var(--narrow); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.3; }

/* TL;DR: the cover card, title on the left, the short version on the right */
.fold__page--plain { grid-template-columns: minmax(0, .9fr) minmax(0, 1.7fr); margin-inline: clamp(.5rem, 2vw, 1.5rem); transform: rotate(.9deg); }
.fold__page--plain::after { background-color: #FFFDF8; }
.fold__title { font-family: "Playfair", "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(3rem, 7.4vw, 5.4rem); line-height: .95; letter-spacing: -.04em; color: #2A1F2B; transform: scaleX(.86); transform-origin: 0 50%; }
.fold__sub { margin-top: .9rem; max-width: 16ch; font-size: .75rem; font-weight: 500; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: #5E5347; }
.fold__page--plain .fold__text { font-size: clamp(1.1rem, 1.6vw, 1.26rem); }
.fold__sticker { position: absolute; z-index: 3; height: auto; pointer-events: none; filter: drop-shadow(0 .5rem .6rem rgba(20, 20, 20, .18)); }
.fold__sticker--flower { right: clamp(-2.4rem, -3.6vw, -1rem); top: 9%; width: clamp(3.5rem, 8vw, 5.75rem); transform: rotate(12deg); }
.fold__sticker--note { left: clamp(-2.2rem, -3.2vw, -.75rem); bottom: clamp(-2.5rem, -3.6vw, -1.25rem); width: clamp(3.75rem, 8.5vw, 6.25rem); transform: rotate(-14deg); }

@media (max-width: 47.99rem) {
  .intro__folder.fold, .intro__folder.fold.is-flat { transform: rotate(-1.5deg); }
  .fold__tab { font-size: .6875rem; letter-spacing: .09em; border-radius: .8rem .8rem 0 0; }
  .fold__panel { display: none; min-height: 0; }
  .fold__panel.is-active { display: grid; }
  .fold__page, .fold__page--flip, .fold__page--plain { grid-template-columns: minmax(0, 1fr); margin: 1.25rem 0 0; transform: rotate(.6deg); }
  .fold__pics, .fold__page--flip .fold__pics { order: -1; width: 46%; margin: -2.25rem 0 0 -.25rem; }
  .fold__page--flip .fold__pics { width: 58%; }
  .fold__trio { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .fold__sub { max-width: none; }
  .fold__sticker--flower { top: -1rem; right: -.5rem; width: 3.25rem; }
  .fold__sticker--note { left: -.4rem; bottom: -2.2rem; width: 3.5rem; }
  .intro__sky { --top: clamp(30rem, 120vw, 44rem); }
}
@media (prefers-reduced-motion: reduce) { .fold__tab, .fold__pic { transition: none; } .fold__panel.is-active { animation: none; } }

/* About, fourth pass: the sky reaches up to the skyline, and the tabs are cut like the reference:
   four equal dividers that start a little in from the left and run to the folder's right edge. */
.intro { overflow: visible; overflow-x: clip; }
.intro__sky { top: clamp(-9rem, -10vw, -4rem); }
.fold__tabs { justify-content: stretch; gap: 0; padding: 0 0 0 15.5%; }
.fold__tab { flex: 1 1 0; min-height: clamp(2.9rem, 5.4vw, 3.9rem); margin: 0 -.3rem -1px 0; padding: .2rem .5rem .1rem; border-radius: clamp(.9rem, 1.6vw, 1.25rem) clamp(.9rem, 1.6vw, 1.25rem) 0 0; font: 500 clamp(.95rem, 1.75vw, 1.3rem) var(--narrow); letter-spacing: .14em; box-shadow: inset 0 -.5rem .5rem -.5rem rgba(40, 30, 20, .12); }
.fold__tab:last-child { margin-right: 0; border-top-right-radius: clamp(.9rem, 1.6vw, 1.25rem); }
.fold__tab:nth-child(1) { z-index: 1; } .fold__tab:nth-child(2) { z-index: 2; } .fold__tab:nth-child(3) { z-index: 3; } .fold__tab:nth-child(4) { z-index: 4; }
.fold__tab[aria-selected="true"] { z-index: 5; font-weight: 500; box-shadow: none; min-height: clamp(3.2rem, 6vw, 4.3rem); align-self: flex-end; }
.fold__tabs { align-items: flex-end; }
.fold__panel { border-radius: .55rem 0 .55rem .55rem; }
@media (max-width: 47.99rem) {
  .fold__tabs { padding-left: 4%; }
  .fold__tab { font-size: .9rem; letter-spacing: .08em; margin-right: -.2rem; padding-inline: .2rem; }
}
/* Nothing may push the page sideways: tilted cards and flight paths are clipped at the viewport edge. */
html, body { overflow-x: clip; }

.fold__page--flip::before { transform: rotate(1.1deg) translate(.15rem, .5rem); }

/* ================= Round five =================
   Sky: no more abstract masks. The sky is plain photo, and a bank of the photo's own clouds
   (washed to white) lies over its top and bottom edges, thinning out toward the middle. */
.intro__sky { -webkit-mask: none; mask: none; }
.intro__sky::before, .intro__sky::after { content: ""; position: absolute; left: 0; right: 0; background: center / 100% 100% no-repeat; }
.intro__sky::before { top: -1px; height: var(--top); background-image: url("assets/cloud-bank-top.webp"); }
.intro__sky::after { bottom: -1px; height: var(--bottom); background-image: url("assets/cloud-bank-bottom.webp"); }
.intro__sky { --top: clamp(40rem, 86vw, 76rem); --bottom: clamp(16rem, 34vw, 30rem); }
.intro { --after: clamp(1rem, 3vw, 2.5rem); }
@media (max-width: 47.99rem) { .intro__sky { --top: clamp(34rem, 150vw, 50rem); --bottom: 18rem; } .intro__sky::before, .intro__sky::after { background-size: 220% 100%; } }

/* Title outline: a pale sky blue instead of the old grey-cream, white where the title sits on the sky */
.hero__role { -webkit-text-stroke-color: #DCEAF2; }
.work__title { -webkit-text-stroke-color: #DCEAF2; }
.intro__head .work__title { -webkit-text-stroke-color: #fff; }
.intro__head .work__title, .intro__head .work__kicker { text-shadow: 0 0 1.2em rgba(255, 255, 255, .9), 0 0 2.6em rgba(255, 255, 255, .7); }

/* The plane keeps flying: short hops between sections, drawn by the same script as the first glide */
.glide--hop { height: clamp(8rem, 17vw, 14rem); margin: 0; }
.glide--out { margin-top: clamp(-5rem, -6vw, -2rem); }
.pause { padding-top: clamp(3.5rem, 8vw, 7rem); }

/* Beyond UX: every tile starts its text at the same top-left corner, with the same padding */
.bento > .bx { align-items: flex-start; justify-content: flex-start; }
.bento .bx__text { padding: clamp(1.4rem, 2.4vw, 2.25rem); align-self: flex-start; }
.bx--chat .bx__text { align-self: flex-start; }
.bento > .bx--chat { align-items: stretch; }
.bx--cook { flex-direction: column; justify-content: flex-start; }
.bx--cook .bx__snap { position: relative; left: auto; top: auto; order: 2; width: 72%; margin: auto auto clamp(1.25rem, 2.2vw, 2rem); }
.bx--lang { justify-content: center; padding: clamp(1rem, 1.6vw, 1.4rem) clamp(1.4rem, 2.4vw, 2.25rem); }
.bx--lang .bx__hello { align-self: stretch; }
.bx--line { align-items: center; padding: 1rem clamp(1.4rem, 2.4vw, 2.25rem); background: #F8E3E8; }
.bento > .bx--line { align-items: center; }
.bx--line p { color: #14120F; }
.bx--line em { color: #671813; }
.bx__open:hover { background: #671813; border-color: #671813; }
@media (max-width: 47.99rem) { .bx--cook .bx__snap { width: 62%; } }
/* A small breather under the grid, plus room for the footer that slides over the page's end */
.beyond { padding-bottom: calc(var(--foot-h, 16rem) + clamp(1.5rem, 3vw, 2.75rem)); }

/* Gallery: photos standing in a ring that turns */
.win--gallery { width: min(96vw, 66rem); background: #F5F4EF; color: #14120F; }
.win--gallery .win__bar { background: #F5F4EF; border-color: rgba(20, 20, 20, .08); }
.win--gallery .win__close { color: #14120F; }
.win--gallery .win__close:hover { background: rgba(20, 20, 20, .07); }
.ring { display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(70% 60% at 50% 40%, #fff 0, #F5F4EF 70%); }
.ring__stage { --w: clamp(10rem, 24vw, 16rem); position: relative; height: calc(var(--w) * 1.25 + clamp(5rem, 9vw, 8rem)); perspective: 1100px; perspective-origin: 50% 42%; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; overflow: hidden; }
.ring__stage.is-held { cursor: grabbing; }
.ring__spin { position: absolute; left: 50%; top: 50%; width: var(--w); aspect-ratio: 4 / 5; margin: calc(var(--w) * -.625) 0 0 calc(var(--w) * -.5); transform-style: preserve-3d; transform: translateZ(calc(var(--r, 20rem) * -1)) rotateY(var(--a, 0deg)); will-change: transform; }
.ring__card { position: absolute; inset: 0; margin: 0; padding: .4rem; border-radius: .5rem; background: #fff; box-shadow: 0 0 0 1px rgba(20, 20, 20, .06), 0 1.6rem 2rem -1.4rem rgba(20, 20, 20, .5); transform: rotateY(calc(var(--i) * var(--step))) translateZ(var(--r, 20rem)); backface-visibility: hidden; }
.ring__card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: .25rem; pointer-events: none; }
.ring__bar { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0 1rem 1.25rem; }
.ring__bar p { min-width: 13rem; text-align: center; font-size: .9375rem; font-weight: 500; }
.ring__bar small { display: block; font-size: .75rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: #5F584D; }
.ring__bar button, .book__bar button { flex: none; width: 44px; height: 44px; border: 1px solid rgba(20, 20, 20, .16); border-radius: 50%; background: #fff; color: #14120F; font-size: 1.1rem; cursor: pointer; transition: background-color .2s, color .2s; }
.ring__bar button:hover, .book__bar button:hover:not(:disabled) { background: #671813; color: #fff; }
.book__bar button:disabled { opacity: .4; cursor: default; }

/* Recipe book: leaves that turn on the spine. Each recipe is a spread: what goes in, then how. */
.win--recipes { width: min(97vw, 68rem); max-height: 96vh; background: #EDE6D8; }
.win--recipes .win__bar { background: #EDE6D8; }
.bookwrap { display: flex; flex-direction: column; overflow: hidden; }
.book__view { --pw: min(30rem, 45vw, calc((100vh - 12rem) / 1.32)); display: grid; place-items: center; padding: clamp(.75rem, 2vw, 1.5rem) 0 .5rem; overflow: hidden; }
.book { position: relative; width: calc(var(--pw) * 2); height: calc(var(--pw) * 1.32); perspective: 2600px; transition: transform .9s cubic-bezier(.3, .1, .2, 1); }
.book[data-at="start"] { transform: translateX(-25%); }
.book[data-at="end"] { transform: translateX(25%); }
.leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3, .1, .2, 1); cursor: pointer; }
.leaf.is-flipped { transform: rotateY(-180deg); }
.leaf__face { position: absolute; inset: 0; overflow: hidden; background: #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 0 .35rem .35rem 0; box-shadow: inset 1.2rem 0 1.4rem -1.2rem rgba(40, 30, 20, .28), 0 .8rem 1.6rem -1rem rgba(40, 30, 20, .5); }
.leaf__face--back { transform: rotateY(180deg); border-radius: .35rem 0 0 .35rem; box-shadow: inset -1.2rem 0 1.4rem -1.2rem rgba(40, 30, 20, .28), 0 .8rem 1.6rem -1rem rgba(40, 30, 20, .5); }
.book__bar { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .25rem 1rem 1rem; }
.book__bar p { min-width: 14rem; text-align: center; font-size: .9375rem; font-weight: 500; }

.pg { --u: calc(var(--pw) / 30); position: relative; display: flex; flex-direction: column; height: 100%; padding: calc(var(--u) * 2) calc(var(--u) * 2.2) calc(var(--u) * 2.6); font-family: var(--sans); color: #1E1A17; text-align: center; }
.pg__foot { position: absolute; left: calc(var(--u) * 2.2); right: calc(var(--u) * 2.2); bottom: calc(var(--u) * 1); display: flex; justify-content: space-between; font-size: calc(var(--u) * .62); letter-spacing: .22em; text-transform: uppercase; color: #5F584D; }
.pg__foot b { font-family: var(--serif); font-weight: 500; font-size: 1.5em; letter-spacing: 0; }
.pg__tag { font-size: calc(var(--u) * .68); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #5F584D; }
/* what goes in: bowls seen from above, each with a label on a leader line */
.bowls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(var(--u) * .5) calc(var(--u) * 1.1); margin: calc(var(--u) * 1) 0 0; padding: 0; list-style: none; }
.bowls li { display: flex; flex-direction: column; align-items: center; width: calc(var(--u) * 5.6); }
.bowls li:nth-child(even) { flex-direction: column-reverse; }
.bowls b { font-size: calc(var(--u) * .56); font-weight: 600; line-height: 1.15; letter-spacing: .1em; text-transform: uppercase; }
.bowls li::before { content: ""; order: 1; width: 1px; height: calc(var(--u) * 1); margin: calc(var(--u) * .25) 0; background: #1E1A17; }
.bowls b { order: 0; } .bowl { order: 2; }
.bowl { width: calc(var(--u) * var(--s, 3.6)); aspect-ratio: 1; border-radius: 50%; border: calc(var(--u) * .34) solid var(--rim, #58BFB0); background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .28) 0, transparent 46%), var(--fill, #ccc); box-shadow: calc(var(--u) * .28) calc(var(--u) * .4) calc(var(--u) * .45) rgba(30, 30, 30, .3), inset 0 calc(var(--u) * .16) calc(var(--u) * .3) rgba(0, 0, 0, .22); }
.bowls li:nth-child(4n+1) { --rim: #58BFB0; } .bowls li:nth-child(4n+2) { --rim: #BFE6D8; } .bowls li:nth-child(4n+3) { --rim: #2E6F9E; } .bowls li:nth-child(4n) { --rim: #2C5A44; }
.bowls li:nth-child(3n) { --s: 3; } .bowls li:nth-child(5n+2) { --s: 4.2; }
.bowl--bare { border: 0; border-radius: 46% 54% 52% 48% / 50% 44% 56% 50%; }
/* the dish on its mat */
.pg__mat { position: relative; flex: 1; min-height: 0; margin: calc(var(--u) * 1.2) calc(var(--u) * -2.2) calc(var(--u) * .4) calc(var(--u) * -2.2); display: grid; place-items: center; background-color: var(--mat, #BFE6E0); }
.pat--gingham { background-image: linear-gradient(rgba(255, 255, 255, .5) 50%, transparent 0), linear-gradient(90deg, rgba(255, 255, 255, .5) 50%, transparent 0); background-size: calc(var(--u) * 1.4) calc(var(--u) * 1.4); }
.pat--stripe { background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .55) 0 calc(var(--u) * .5), transparent 0 calc(var(--u) * 1)); }
.pat--tri { background-image: linear-gradient(135deg, rgba(255, 255, 255, .55) 25%, transparent 0), linear-gradient(225deg, rgba(255, 255, 255, .55) 25%, transparent 0); background-size: calc(var(--u) * 1.5) calc(var(--u) * 1.5); }
.pat--dot { background-image: radial-gradient(rgba(255, 255, 255, .7) 22%, transparent 0); background-size: calc(var(--u) * 1.2) calc(var(--u) * 1.2); }
.plate { height: 82%; aspect-ratio: 1; border-radius: 50%; background: var(--plate, #2F8F6B); display: grid; place-items: center; box-shadow: calc(var(--u) * .6) calc(var(--u) * .8) calc(var(--u) * 1) rgba(20, 30, 30, .35), inset 0 0 0 calc(var(--u) * .5) rgba(255, 255, 255, .12); }
.plate i { width: 70%; aspect-ratio: 1; border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%; background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .35) 0, transparent 40%), radial-gradient(circle at 68% 70%, rgba(0, 0, 0, .14) 0, transparent 46%), var(--dish, #E5B95C); box-shadow: inset 0 calc(var(--u) * -.2) calc(var(--u) * .5) rgba(0, 0, 0, .18); }
/* how: the recipe itself, set like a magazine column */
.pg--how { justify-content: center; padding-inline: calc(var(--u) * 3.4); }
.pg__no { font-size: calc(var(--u) * .68); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ink2, #2F8F6B); }
.pg__title { margin-top: calc(var(--u) * .7); font-family: var(--sans); font-weight: 700; font-size: calc(var(--u) * 2.1); line-height: .95; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.pg__time { margin-top: calc(var(--u) * .7); font-size: calc(var(--u) * .78); }
.pg__time b { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .86em; }
.pg__rule { width: 100%; height: 2px; margin: calc(var(--u) * .8) 0; border: 0; background: var(--ink2, #2F8F6B); opacity: .55; }
.pg__how { font-size: calc(var(--u) * .86); line-height: 1.5; text-align: left; }
.pg__how b { font-weight: 700; }
.pg__makes { margin-top: calc(var(--u) * .6); font-size: calc(var(--u) * .86); font-weight: 700; text-align: left; }
.pg__note { margin-top: calc(var(--u) * .3); font-size: calc(var(--u) * .8); font-style: italic; line-height: 1.45; text-align: left; color: #4A443C; }
/* covers */
.pg--cover { justify-content: center; gap: calc(var(--u) * 1); background: #671813 var(--cloth); color: #F6EBD8; }
.pg--cover { --cloth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23c)'/%3E%3C/svg%3E"); }
.pg--cover::before { content: ""; position: absolute; inset: calc(var(--u) * 1.3); border: 1px solid rgba(246, 235, 216, .55); border-radius: .2rem; pointer-events: none; }
.pg--cover h4 { font-family: "Playfair", "Playfair Display", Georgia, serif; font-weight: 500; font-size: calc(var(--u) * 4.6); line-height: .92; letter-spacing: -.03em; color: #F6EBD8; }
.pg--cover p { font-size: calc(var(--u) * .7); letter-spacing: .26em; text-transform: uppercase; }
.pg--cover em { font-family: "Brittany", "Luxurious Script", cursive; font-style: normal; font-size: calc(var(--u) * 1.7); letter-spacing: 0; text-transform: none; }

@media (max-width: 47.99rem) {
  /* one page at a time: the book slides sideways to show the left or the right page */
  .book__view { --pw: min(88vw, 25rem, calc((100vh - 11rem) / 1.32)); width: var(--pw); margin-inline: auto; place-items: start; }
  .book, .book[data-at] { transform: translateX(-50%); }
  .book[data-side="L"] { transform: translateX(0); }
  .book__bar p { min-width: 0; flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .book, .leaf { transition: none; } }
.intro__sky { top: 0; }
.intro__head .work__title { -webkit-text-stroke-width: .16em; }
/* book fixes: one soft shadow for the whole book, magazine sans for titles, roomier text */
.leaf__face, .leaf__face--back { box-shadow: inset 1.2rem 0 1.4rem -1.2rem rgba(40, 30, 20, .28), 0 0 0 1px rgba(40, 30, 20, .06); }
.leaf__face--back { box-shadow: inset -1.2rem 0 1.4rem -1.2rem rgba(40, 30, 20, .28), 0 0 0 1px rgba(40, 30, 20, .06); }
.book__view { filter: drop-shadow(0 1rem 1.1rem rgba(40, 30, 20, .28)); }
.win .pg__title { font-family: var(--sans); font-weight: 700; font-size: calc(var(--u) * 2.5); line-height: .95; letter-spacing: .01em; }
.pg__how { font-size: calc(var(--u) * .98); }
.pg__makes { font-size: calc(var(--u) * .98); } .pg__note { font-size: calc(var(--u) * .9); }
.pg__time { font-size: calc(var(--u) * .88); }
.win .pg--cover h4 { font-family: "Playfair", "Playfair Display", Georgia, serif; font-weight: 500; font-size: calc(var(--u) * 4.6); line-height: .92; letter-spacing: -.03em; }
.bowl--bare { box-shadow: calc(var(--u) * .28) calc(var(--u) * .4) calc(var(--u) * .45) rgba(30, 30, 30, .26), inset calc(var(--u) * -.2) calc(var(--u) * -.3) calc(var(--u) * .5) rgba(0, 0, 0, .16); }
.bowls { gap: calc(var(--u) * .7) calc(var(--u) * 1.6); margin-top: calc(var(--u) * 1.4); }
/* ring: wider, tilted a little, and you can see the far side */
.ring__stage { --w: clamp(8.5rem, 17vw, 12.5rem); height: calc(var(--w) * 1.25 + clamp(7rem, 12vw, 11rem)); perspective: 1400px; perspective-origin: 50% 20%; }
.ring__spin { transform: translateZ(calc(var(--r, 20rem) * -1)) rotateX(-7deg) rotateY(var(--a, 0deg)); }
.ring__card { backface-visibility: visible; }
.leaf__face, .leaf__face--back { box-shadow: inset 1.2rem 0 1.4rem -1.2rem rgba(40, 30, 20, .28); }
.leaf__face--back { box-shadow: inset -1.2rem 0 1.4rem -1.2rem rgba(40, 30, 20, .28); }
@media (max-width: 47.99rem) {
  /* phone pages: bigger type, tighter margins */
  .pg--how { padding-inline: calc(var(--u) * 2.2); }
  .pg__how, .pg__makes { font-size: calc(var(--u) * 1.16); line-height: 1.42; }
  .pg__note { font-size: calc(var(--u) * 1.05); }
  .pg__time { font-size: calc(var(--u) * 1); }
  .bowls b { font-size: calc(var(--u) * .74); letter-spacing: .06em; }
  .bowls li { width: calc(var(--u) * 7); }
  .pg__tag, .pg__no { font-size: calc(var(--u) * .8); }
}

/* ================= Round six ================= */
/* Title outline: a quiet warm off-white, barely there on the white page */
.hero__role, .work__title { -webkit-text-stroke-color: #F4F3EF; }
.intro__head .work__title { -webkit-text-stroke-color: #fff; }

/* Recipe book: the pages are Vibha's own page images; the cover is drawn to match her reference */
.book__view { --pw: min(30rem, 45vw, calc((100vh - 12rem) / 1.335)); }
.book { height: calc(var(--pw) * 1.335); }
.leaf__face { background: #FBF8F1; }
.page { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-select: none; }
.cover { position: relative; height: 100%; background: #F6E9DA; }
.cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(120, 80, 50, .16) 0, rgba(255, 255, 255, .28) 2.2%, transparent 5%), linear-gradient(135deg, rgba(255, 255, 255, .3), transparent 45%); }
.leaf__face--back .cover::after { transform: scaleX(-1); }
.cover__art { display: block; width: 100%; height: 100%; }
.cover__caps { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 500; font-size: 64px; letter-spacing: 1px; fill: #F3A9B6; }
.cover__script { font-family: "Brittany", "Luxurious Script", cursive; font-size: 40px; fill: #C9879A; }
.cover__script--end { font-size: 30px; }
.cover--inside { display: grid; place-items: center; background: #FBF8F1; }
.cover--inside p { font-family: "Brittany", "Luxurious Script", cursive; font-size: calc(var(--pw) / 14); color: #C9879A; }
@media (max-width: 47.99rem) { .book__view { --pw: min(90vw, 26rem, calc((100vh - 11rem) / 1.335)); } }

/* Craft: the years get their own line, a big numeral with a short aside */
.fold__years { display: flex; align-items: center; justify-content: center; gap: clamp(.75rem, 2vw, 1.4rem); margin-top: clamp(1.5rem, 3.5vw, 2.5rem); text-align: left; }
.fold__years b { font-family: "Playfair", "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(3.4rem, 8vw, 6rem); line-height: .8; letter-spacing: -.04em; font-variant-numeric: lining-nums; }
.fold__years span { padding-left: clamp(.75rem, 2vw, 1.4rem); border-left: 1px solid rgba(255, 253, 246, .6); font-family: var(--narrow); font-size: clamp(1.25rem, 2.3vw, 1.75rem); line-height: 1.15; }

/* Hero role: the first line types and backspaces; a thin caret blinks at its end */
.roll { position: relative; display: block; height: .76em; line-height: .76em; white-space: nowrap; }
.hero__product.roll { height: .706em; line-height: .706em; }
.roll__word { position: relative; display: inline-block; min-width: 1px; min-height: 1em; white-space: pre; }
.roll.is-typing .roll__word::after { content: ""; position: absolute; left: calc(100% + .06em); top: 50%; width: .05em; height: .74em; margin-top: -.37em; background: #671813; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ================= Hero details ================= */
/* "Senior" in the same script as the section kickers, tucked onto the first letter */
.hero__senior { font-family: "Brittany", "Luxurious Script", cursive; font-size: .46em; line-height: 1; left: -.42em; bottom: calc(100% - .4em); transform: rotate(-7deg); transform-origin: 0 100%; }
/* the typing caret stands as tall as the capitals */
.roll.is-typing .roll__word::after { top: .05em; height: .66em; margin-top: 0; width: .045em; }
/* DESIGNER, selected: a highlight swept across it, two grips, and a note hanging off the end */
.hero__designer .sel { padding: .1em .09em .07em; margin: -.1em -.09em -.07em; -webkit-text-stroke: 0; background: linear-gradient(#F7ECC4, #F7ECC4) 0 0 / 100% 100% no-repeat; animation: sel-sweep .8s cubic-bezier(.65, 0, .35, 1) 1.1s backwards; }
.sel__grip { position: absolute; top: 0; bottom: 0; width: .04em; background: #D2A62E; }
.sel__grip::after { content: ""; position: absolute; left: 50%; width: .2em; height: .2em; margin-left: -.1em; border-radius: 50%; background: #D2A62E; }
.sel__grip--a { left: 0; } .sel__grip--a::after { top: -.16em; }
.sel__grip--b { left: 100%; margin-left: -.04em; animation: sel-drag .8s cubic-bezier(.65, 0, .35, 1) 1.1s backwards; } .sel__grip--b::after { bottom: -.16em; }
.sel__grip { animation: sel-pop .3s ease-out .9s backwards; }
.sel__grip--b { animation: sel-pop .3s ease-out .9s backwards, sel-drag .8s cubic-bezier(.65, 0, .35, 1) 1.1s backwards; }
.sel__tip { position: absolute; right: -.35em; top: calc(100% + .42em); padding: .5em .95em .55em; border-radius: .7em; background: #671813; color: #FBF6E6; font: 500 clamp(.8125rem, .2em, 1.0625rem) / 1.2 var(--sans); letter-spacing: .01em; text-transform: none; white-space: nowrap; transform: rotate(-3deg); transform-origin: 85% 0; animation: tip-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.9s backwards; }
.sel__tip::before { content: ""; position: absolute; right: 1.5em; bottom: calc(100% - 1px); border: .45em solid transparent; border-top: 0; border-bottom-color: #671813; }
@keyframes sel-sweep { from { background-size: 0% 100%; } }
@keyframes sel-drag { from { left: 0%; } }
@keyframes sel-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes tip-pop { from { opacity: 0; transform: rotate(-3deg) translateY(-.4em) scale(.8); } }
.hero__line { margin-top: clamp(3.25rem, 6.2vw, 6rem); }
@media (prefers-reduced-motion: reduce) { .hero__designer .sel, .sel__grip, .sel__tip { animation: none; } }
/* cursor trail, hero only: the letters of her name drop behind the pointer and fade */
.trail { position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none; font-family: "Brittany", "Luxurious Script", cursive; font-size: 1.5rem; line-height: 1; color: #671813; animation: trail 1s ease-out forwards; }
@keyframes trail { from { opacity: .85; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); } to { opacity: 0; transform: translate(-50%, calc(-50% + .9rem)) rotate(var(--r)) scale(.7); } }

/* Cooking tile: the recipe book peeks out from behind the polaroid */
.bx__stack { position: relative; order: 2; width: 72%; margin: auto auto clamp(1.25rem, 2.2vw, 2rem); }
.bx--cook .bx__stack .bx__snap { position: relative; width: 100%; margin: 0; }
.bx__book { position: absolute; right: -13%; top: -50%; width: 50%; border-radius: .25rem; box-shadow: 0 0 0 1px rgba(60, 40, 30, .08), 0 1rem 1.4rem -1rem rgba(40, 25, 15, .5); transform: rotate(11deg); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.bx__book svg { display: block; width: 100%; height: auto; border-radius: .25rem; }
.bx--cook:hover .bx__book { transform: rotate(15deg) translate(6%, -10%); }
@media (max-width: 47.99rem) { .bx__stack { width: 62%; } }
@media (prefers-reduced-motion: reduce) { .bx__book { transition: none; } }
@media (max-width: 47.99rem) { .hero__line { margin-top: 4.75rem; } .bx__book { top: -40%; } }

/* Hero tweaks: DESIGNER sits lower, clear of the typed line; the note is a proper tooltip; the trail is louder */
.hero__designer.roll { margin-top: .2em; }
.sel__tip { right: 6%; top: calc(100% + .5em); padding: .55em 1.1em .6em; border-radius: .65em; background: #4A4643; color: #F1EEE8; font: 400 clamp(.9375rem, .23em, 1.25rem) / 1.2 var(--sans); letter-spacing: .02em; transform: none; transform-origin: 50% 0; box-shadow: 0 .5em 1em -.5em rgba(40, 35, 30, .5); animation-name: tip-drop; }
.sel__tip::before { right: auto; left: 50%; margin-left: -.5em; border-width: .5em; border-top: 0; border-bottom-color: #4A4643; }
@keyframes tip-drop { from { opacity: 0; transform: translateY(-.4em) scale(.85); } }
.trail { font-size: clamp(2.6rem, 4vw, 3.6rem); -webkit-text-stroke: .3em #fff; paint-order: stroke fill; filter: drop-shadow(0 .12em .22em rgba(60, 30, 25, .28)); animation-duration: 1.2s; }
@keyframes trail { from { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); } 60% { opacity: 1; } to { opacity: 0; transform: translate(-50%, calc(-50% + 1.1rem)) rotate(var(--r)) scale(.8); } }
.hero__line { margin-top: clamp(4rem, 7vw, 6.75rem); }
@media (max-width: 47.99rem) { .hero__line { margin-top: 5.25rem; } }

/* Hero, higher: the title group moves up and the tagline keeps its place */
.hero { padding-top: calc(clamp(8rem, 15.4vw, 17.5rem) - clamp(1.25rem, 2.6vw, 3rem)); }
.hero__line { margin-top: calc(clamp(4rem, 7vw, 6.75rem) + clamp(1.25rem, 2.6vw, 3rem)); }
@media (max-width: 47.99rem) { .hero { padding-top: 7.25rem; } .hero__line { margin-top: 6.5rem; } }
/* Cursor train: VIBHA in the hero's own display caps, cut out like stickers */
.train { position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .35s ease-out; font-family: "London", "Playfair", "Playfair Display", Georgia, serif; font-variation-settings: "opsz" 144; font-weight: 900; font-size: clamp(2.2rem, 3.3vw, 3.1rem); line-height: 1; color: #671813; -webkit-text-stroke: .2em #fff; paint-order: stroke fill; filter: drop-shadow(0 .1em .2em rgba(60, 30, 25, .3)); }
.train.is-on { opacity: 1; }
.train span { position: absolute; left: 0; top: 0; will-change: transform; }

/* Cursor signature: her name in Sloop Script, written once, following the pointer */
.sign { position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .45s ease-out; transform-origin: 0 50%; font-family: "Sloop Script", "Luxurious Script", cursive; font-size: clamp(2.4rem, 3.6vw, 3.4rem); line-height: 1; white-space: nowrap; color: #671813; text-shadow: 0 0 .18em #fff, 0 0 .4em #fff, 0 0 .7em rgba(255, 255, 255, .9); will-change: transform; }
.sign.is-on { opacity: 1; }

/* ================= Copy and Beyond UX, another pass ================= */
/* The breather line fits on two lines */
.pause__line { max-width: 30ch; }
/* Cursor signature gets a sticker outline */
.sign { -webkit-text-stroke: .16em #fff; paint-order: stroke fill; text-shadow: none; filter: drop-shadow(0 .06em .14em rgba(60, 30, 25, .28)); }

/* Custom cursor (mouse only): a small maroon dot with a ring that trails and opens over anything clickable */
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor dialog, .has-cursor dialog *, .has-cursor dialog::backdrop { cursor: auto !important; }
.has-cursor dialog :is(button, a, .leaf, [role="tab"]) { cursor: pointer !important; }
.has-cursor dialog .ring__stage { cursor: grab !important; }
.cur { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .25s; will-change: transform; }
.cur.is-on { opacity: 1; }
.cur--dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #671813; }
.cur--ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgba(103, 24, 19, .55); transition: opacity .25s, width .25s cubic-bezier(.16, 1, .3, 1), height .25s cubic-bezier(.16, 1, .3, 1), margin .25s cubic-bezier(.16, 1, .3, 1), background-color .25s, border-color .25s; }
.cur--ring.is-over { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(103, 24, 19, .09); border-color: rgba(103, 24, 19, .8); }
.cur--ring.is-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* Photography tile: copy on the left, three portraits fanned across the rest, no dead space */
.bx__kicker { margin: 0 0 .7rem !important; font-size: .75rem !important; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #671813 !important; }
.bx--photo .bx__prints { display: none; }
.bx--photo .bx__text { flex: 0 0 43%; }
.bx--photo .bx__text p { max-width: 32ch; }
.bx__faces { position: absolute; left: 44%; right: 0; top: 0; bottom: 0; }
.face { position: absolute; height: 80%; aspect-ratio: 3 / 4; padding: .45rem; border-radius: .4rem; background: #fff; box-shadow: 0 0 0 1px rgba(20, 20, 20, .06), 0 1.6rem 2.2rem -1.4rem rgba(20, 20, 20, .55); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; border-radius: .2rem; }
.face--a { left: 0; top: 15%; transform: rotate(-6deg); }
.face--b { left: 29%; top: 7%; z-index: 2; transform: rotate(2deg); }
.face--c { left: 59%; top: 17%; transform: rotate(8deg); }
.bx--photo:hover .face--a { transform: rotate(-9deg) translate(-4%, -2%); }
.bx--photo:hover .face--b { transform: rotate(1deg) translateY(-3%) scale(1.03); }
.bx--photo:hover .face--c { transform: rotate(11deg) translate(4%, -2%); }
@media (max-width: 47.99rem) {
  .bx--photo { min-height: 0; }
  .bx__faces { position: relative; left: auto; right: auto; width: 100%; height: 19rem; margin-top: -.5rem; }
  .face { height: 86%; } .face--a { left: 2%; } .face--b { left: 27%; } .face--c { left: 52%; }
}
@media (prefers-reduced-motion: reduce) { .face { transition: none; } }
/* a bigger ring for fourteen photos */
.ring__stage { --w: clamp(7.5rem, 13vw, 10.5rem); height: calc(var(--w) * 1.25 + clamp(8rem, 13vw, 12rem)); perspective: 1700px; }
.ring__card img { object-position: 50% 22%; }

/* The dosa tile: warm, with the plate itself in the corner */
.bx--line { position: relative; overflow: hidden; align-items: center; background: radial-gradient(120% 140% at 100% 100%, #F6D9A6 0, #FBEFD4 46%, #FDF7E8 100%); }
.bx--line p { position: relative; z-index: 1; max-width: 62%; margin: 0; color: #14120F; font-style: normal; }
.bx--line small { display: block; margin-bottom: .45rem; font: 500 .75rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #6B5330; }
.bx--line em { display: block; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.02; letter-spacing: -.01em; color: #671813; }
.bx__dosa { position: absolute; right: -9%; top: 50%; width: 46%; height: auto; transform: translateY(-50%) rotate(-8deg); filter: drop-shadow(0 .7rem .8rem rgba(120, 80, 30, .3)); transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.bx--line:hover .bx__dosa { transform: translateY(-50%) rotate(14deg) scale(1.04); }
@media (max-width: 47.99rem) { .bx--line { min-height: 9rem; } .bx__dosa { width: 40%; right: -6%; } }
@media (prefers-reduced-motion: reduce) { .bx__dosa { transition: none; } }

.bento .bx--photo .bx__text { flex: 0 0 42%; }
.bento .bx--photo .bx__text h3 { font-size: clamp(1.8rem, 2.5vw, 2.25rem); }
.bx__faces { left: 43%; }
.face { height: 64%; }
.face--a { left: 0; top: 22%; z-index: 1; transform: rotate(-7deg); }
.face--b { left: 27%; top: 12%; z-index: 2; transform: rotate(1deg); }
.face--c { left: 55%; top: 24%; z-index: 3; transform: rotate(8deg); }
@media (max-width: 47.99rem) { .face { height: 80%; } .face--a { left: 3%; top: 10%; } .face--b { left: 28%; top: 4%; } .face--c { left: 53%; top: 12%; } }

.bento > .bx--photo { align-items: stretch; }
.bento .bx--photo .bx__text { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; }
.bx--photo .bx__meta { margin-top: auto !important; padding-top: 1rem; max-width: 26ch; font-family: var(--serif); font-style: italic; font-size: 1.0625rem !important; line-height: 1.3; color: #671813 !important; }
.face { height: 72%; }
.face--a { top: 17%; } .face--b { top: 9%; } .face--c { top: 21%; }
@media (max-width: 47.99rem) {
  .bento .bx--photo .bx__text { flex: none; }
  .bx--photo .bx__meta { margin-top: .9rem !important; padding-top: 0; max-width: none; }
  .bx__faces { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; height: 19rem; margin-top: 0; }
  .face { height: 82%; }
  .face--a { left: 4%; top: 9%; } .face--b { left: 29%; top: 3%; } .face--c { left: 54%; top: 11%; }
}

.face { aspect-ratio: 2 / 3; }
.face--a { left: 0; } .face--b { left: 33%; } .face--c { left: 66%; }
.face--a img { object-position: 78% 20%; } .face--b img { object-position: 56% 20%; } .face--c img { object-position: 42% 30%; }
@media (max-width: 47.99rem) { .face--a { left: 3%; } .face--b { left: 32%; } .face--c { left: 61%; } }

/* ================= Clouds at the skyline, chrome cursor, real stickers ================= */
/* The sky now starts behind the skyline: the hero sits above it, and cotton clouds gather at its feet */
.opening { background: none; z-index: 2; }
.intro__sky { top: clamp(-13rem, -15vw, -7rem); --top: clamp(46rem, 96vw, 84rem); }
@media (max-width: 47.99rem) { .intro__sky { top: -6rem; --top: clamp(38rem, 160vw, 54rem); } }

/* Chrome arrow cursor (her own artwork). Links and buttons keep the pointing hand. */
html { cursor: url("assets/cursor.png") 2 1, auto; cursor: -webkit-image-set(url("assets/cursor.png") 1x, url("assets/cursor@2x.png") 2x) 2 1, auto; cursor: image-set(url("assets/cursor.png") 1x, url("assets/cursor@2x.png") 2x) 2 1, auto; }
.cur { display: none; }
/* Name tag beside the pointer in the hero */
.nametag { position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .3s ease-out; padding: .32rem .7rem .36rem; border-radius: .25rem 1rem 1rem 1rem; background: #671813; color: #FBF6E6; font: 500 .875rem / 1 var(--sans); letter-spacing: .01em; white-space: nowrap; box-shadow: 0 .4rem .8rem -.3rem rgba(60, 20, 15, .5); will-change: transform; }
.nametag.is-on { opacity: 1; }

/* Craft: labelled promises */
.fold__trio b { letter-spacing: .14em; text-transform: uppercase; }
.fold__quote { font-size: clamp(2.1rem, 5.4vw, 4rem); }

/* Stickers: Vibha's own cut-outs. Two live on the folder; the rest belong to a tab. */
.stk { position: absolute; z-index: 4; height: auto; pointer-events: none; filter: drop-shadow(0 .35rem .4rem rgba(40, 25, 15, .3)); }
.stk--hibiscus { right: clamp(-2.75rem, -4vw, -1.25rem); top: clamp(3.5rem, 9vw, 6.5rem); width: clamp(4.25rem, 9vw, 7rem); transform: rotate(14deg); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.stk--tulips { left: clamp(-2.5rem, -3.6vw, -1rem); bottom: clamp(-3.25rem, -4vw, -1.5rem); width: clamp(3.5rem, 7vw, 5.5rem); transform: rotate(-16deg); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.fold:hover .stk--hibiscus { transform: rotate(30deg) scale(1.05); }
.fold:hover .stk--tulips { transform: rotate(-9deg) scale(1.05); }
.fold__pic--clip::before { display: none; }
.stk--clip { left: 50%; top: clamp(-2.2rem, -3.4vw, -1.4rem); width: clamp(3rem, 6vw, 4.5rem) !important; margin-left: clamp(-2.25rem, -3vw, -1.5rem); aspect-ratio: auto !important; z-index: 2; }
.stk--seal { right: -6%; bottom: -7%; width: 30% !important; transform: rotate(12deg); }
.stk--envelope { right: clamp(-1.75rem, -2.6vw, -.75rem); bottom: 14%; width: clamp(4rem, 8vw, 6rem); transform: rotate(-12deg); }
.stk--butterfly { left: 30%; top: clamp(-1.6rem, -2.4vw, -.9rem); width: clamp(3.25rem, 6vw, 4.75rem); transform: rotate(10deg); }
#panel-tldr .stk { z-index: 3; }
#panel-tldr.is-active ~ * { }
/* the TL;DR tab has its own flower pair, so the folder's hibiscus sits a little lower there */
.fold__pic--mini { width: min(74%, 11rem); margin-top: 1.25rem; --r: -4deg; }
.fold__pics--two .fold__pic:last-child img { aspect-ratio: 4 / 5; }
.fold__pics--two .fold__pic:last-child { width: 72%; margin: -30% 0 0 34%; }
@media (max-width: 47.99rem) {
  .stk--hibiscus { top: 4.25rem; right: -.6rem; width: 3.75rem; }
  .stk--tulips { left: -.5rem; bottom: -2.4rem; width: 3rem; }
  .fold__pic--mini { width: 44%; }
  .stk--envelope { bottom: 3%; }
}
@media (prefers-reduced-motion: reduce) { .stk { transition: none; } }
.intro__sky::before { background-image: url("assets/cloud-bank-top.webp?c=3"); }
.fold__pics--two .fold__pic:first-child { width: 84%; }

/* ================= Clean sky with cotton clouds, folder back to reference shape, more stickers ================= */
/* Sky: a plain soft blue that fades to the page at both ends, with cumulus clouds gathered at the skyline */
.intro__sky { background: linear-gradient(#fff 0, #D5E9F8 7rem, #9CCBEE 24rem, #8FC4EC 50%, #9CCBEE calc(100% - 26rem), #D9EBF8 calc(100% - 9rem), #fff 100%); --top: 56.25vw; --bottom: 43.75vw; }
.intro__sky::before { top: clamp(1rem, 3vw, 3rem); height: var(--top); background: url("assets/clouds-top.webp") center / 100% 100% no-repeat; }
.intro__sky::after { bottom: -1px; height: var(--bottom); background: url("assets/clouds-bottom.webp") center / 100% 100% no-repeat; }
.intro__stage::before { content: ""; position: absolute; left: 0; right: 0; top: 30%; height: 31.25vw; z-index: -1; pointer-events: none; background: url("assets/clouds-mid.webp") center / 100% 100% no-repeat; }
.intro__head .work__title, .intro__head .work__kicker { text-shadow: 0 0 1em rgba(255, 255, 255, .95), 0 0 2.4em rgba(255, 255, 255, .8); }
.card__corner { color: #fff; text-shadow: 0 1px 5px rgba(30, 80, 130, .45); }
@media (max-width: 47.99rem) { .intro__sky { --top: 100vw; --bottom: 78vw; } .intro__sky::before, .intro__sky::after { background-size: 178% 100%; } }

/* Tagline: small Cormorant, sentence case, with the same cut-out outline as the titles */
.hero .hero__line { margin-top: clamp(5rem, 9vw, 9rem); max-width: none; font-family: var(--serif); font-weight: 600; font-style: italic; font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.3; letter-spacing: .005em; color: #14120F; -webkit-text-stroke: .32em #F4F3EF; paint-order: stroke fill; }
@media (max-width: 47.99rem) { .hero .hero__line { margin-top: 6rem; font-size: 1.125rem; max-width: 17em; } }
/* Tooltip, a size down */
.sel__tip { padding: .42em .85em .46em; font-size: clamp(.8125rem, .185em, 1rem); border-radius: .55em; }
/* Cursor at natural size, and her name sticker riding beside it */
html { cursor: url("assets/cursor.png?s=18") 1 1, auto; cursor: -webkit-image-set(url("assets/cursor.png?s=18") 1x, url("assets/cursor@2x.png?s=18") 2x) 1 1, auto; cursor: image-set(url("assets/cursor.png?s=18") 1x, url("assets/cursor@2x.png?s=18") 2x) 1 1, auto; }
img.nametag { width: clamp(5rem, 7vw, 6.75rem); height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 .3rem .4rem rgba(60, 40, 25, .3)); rotate: -6deg; }

/* Folder: back to the reference's landscape shape, whatever the tab holds */
@media (min-width: 48rem) {
  .fold__body { aspect-ratio: 655 / 425; grid-template: minmax(0, 1fr) / minmax(0, 1fr); min-height: 0; }
  .fold__panel { min-height: 0; align-content: center; }
  .fold__text { font-size: clamp(1.02rem, 1.62vw, 1.3rem); line-height: 1.28; }
  .fold__page--plain .fold__text { font-size: clamp(.95rem, 1.42vw, 1.14rem); }
  .fold__page { padding-block: clamp(1rem, 2.4vw, 1.75rem); }
  .fold__pics--two .fold__pic:first-child { width: 66%; }
  .fold__pics--two .fold__pic:last-child { width: 60%; margin: -40% 0 0 44%; }
  .fold__pic--mini { width: min(58%, 8rem); margin-top: .9rem; }
  .fold__title { font-size: clamp(2.6rem, 6vw, 4.4rem); }
  .fold__sub { margin-top: .6rem; }
}

/* Photography tile: a pile of prints, the top one showing */
.bx__faces { display: none; }
.pile { position: absolute; right: 5%; top: 50%; width: 47%; aspect-ratio: 4 / 3; transform: translateY(-50%); }
.pile__p { position: absolute; inset: 0; padding: 3.2%; background: #F4F0E6; box-shadow: 0 0 0 1px rgba(60, 50, 40, .08), 0 1.2rem 1.6rem -1.1rem rgba(30, 25, 20, .55); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.pile__p img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.pile__p--d { transform: rotate(-9deg) translate(-4%, 3%); }
.pile__p--c { transform: rotate(6deg) translate(4%, 2%); }
.pile__p--b { transform: rotate(-3.5deg) translate(-2%, -2%); }
.pile__p--a { transform: rotate(2deg); }
.bx--photo:hover .pile__p--d { transform: rotate(-14deg) translate(-9%, 5%); }
.bx--photo:hover .pile__p--c { transform: rotate(10deg) translate(9%, 4%); }
.bx--photo:hover .pile__p--b { transform: rotate(-6deg) translate(-5%, -5%); }
.deco--pile { right: -5%; top: -9%; width: 13%; transform: rotate(14deg); z-index: 5; }
@media (max-width: 47.99rem) { .pile { position: relative; right: auto; top: auto; width: 80%; margin: 1.5rem auto 2.25rem; transform: none; } }

/* Dosa tile: rich burgundy, with her torn-paper lines */
.bx--line { background: #5C1220 radial-gradient(120% 130% at 20% 0%, #7A1B2C 0, #5C1220 55%, #47101A 100%); padding: clamp(.9rem, 1.6vw, 1.4rem); justify-content: center; }
.bento > .bx--line { align-items: center; }
.bx__strips { display: block; width: min(100%, 21rem); height: auto; margin: auto; transform: rotate(-2deg); filter: drop-shadow(0 .5rem .6rem rgba(20, 0, 5, .45)); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.bx--line:hover .bx__strips { transform: rotate(1deg) scale(1.03); }

/* Bengaluru tile: the name hand-lettered in Kannada, and her favourite person behind the skyline */
.bx--blr .bx__shot { z-index: 2; }
.bx__kn { position: absolute; right: 7%; top: 9%; z-index: 1; margin: 0; font-family: "Anek Kannada", "Noto Sans Kannada", "Kannada Sangam MN", sans-serif; font-weight: 200; font-size: clamp(1.7rem, 3.1vw, 2.7rem); line-height: 1.2; color: #671813; transform: rotate(-5deg); white-space: nowrap; }
.bx__fav { position: absolute; z-index: 1; right: 3%; bottom: 0; width: 31%; height: auto; transform: translateY(46%) rotate(4deg); transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.34, 1.4, .64, 1); }
.bx--blr:hover .bx__fav, .bx--blr:focus-within .bx__fav { transform: translateY(-36%) rotate(-3deg); }
@media (hover: none) { .bx__fav { transform: translateY(-36%) rotate(-3deg); } }
@media (max-width: 47.99rem) { .bx__kn { right: auto; left: 1.5rem; top: 46%; font-size: 1.6rem; } .bx__fav { width: 38%; right: 2%; transform: translateY(-48%) rotate(-3deg); } }
.bx--lang > h3 { font-size: 1.12rem; }

/* Stickers scattered through the page */
.deco { position: absolute; z-index: 3; height: auto; pointer-events: none; filter: drop-shadow(0 .3rem .35rem rgba(40, 25, 15, .28)); }
.work__head, .pause, .xp__head, .foot__top, .bx__snap { position: relative; }
.deco--work { left: calc(50% + clamp(6rem, 13vw, 11rem)); top: -.4rem; width: clamp(2.6rem, 4.4vw, 3.9rem); transform: rotate(14deg); }
.deco--pause { left: calc(50% - clamp(8rem, 16vw, 13.5rem)); top: clamp(3rem, 7vw, 6rem); width: clamp(3rem, 5.4vw, 4.75rem); transform: rotate(-16deg); }
.deco--xp { left: calc(50% + clamp(5.5rem, 11vw, 9rem)); top: -1rem; width: clamp(1.9rem, 3vw, 2.6rem); transform: rotate(18deg); }
.deco--beyond { left: calc(50% - clamp(7.5rem, 13vw, 10.5rem)); top: .2rem; width: clamp(2.4rem, 3.8vw, 3.3rem); transform: rotate(-12deg); }
.deco--foot { right: 2%; top: -1.5rem; width: clamp(3rem, 5vw, 4.25rem); transform: rotate(12deg); }
.deco--foot2 { left: 2%; bottom: -.5rem; width: clamp(3.25rem, 5.4vw, 4.5rem); transform: rotate(-10deg); }
.deco--cook { left: -11%; bottom: -8%; width: 22%; transform: rotate(-8deg); }
@media (max-width: 47.99rem) { .deco--foot, .deco--foot2 { display: none; } .deco--pause { left: 6%; top: 2.2rem; } .deco--work { left: auto; right: 8%; } .deco--beyond { left: 8%; } .deco--xp { left: auto; right: 10%; } }

/* The sky begins at the skyline's feet; a row of cotton clouds sits in front of that line */
.intro__sky { top: 0; background: linear-gradient(#fff 0, #CFE6F7 5rem, #9CCBEE 18rem, #8FC4EC 50%, #9CCBEE calc(100% - 26rem), #D9EBF8 calc(100% - 9rem), #fff 100%); }
.intro__sky::before { display: none; }
.opening::after { content: ""; position: absolute; left: 0; right: 0; bottom: -53vw; height: 56.25vw; z-index: 3; pointer-events: none; background: url("assets/clouds-top.webp?c=2") center / 100% 100% no-repeat; }
.intro__sky::after { background-image: url("assets/clouds-bottom.webp?c=2"); }
.intro__stage::before { background-image: url("assets/clouds-mid.webp?c=2"); }
@media (max-width: 47.99rem) { .opening::after { bottom: -94vw; height: 100vw; background-size: 178% 100%; } }
.bx__snap .deco--cook { width: 22%; }
.bx__kn { top: 6%; right: 5%; font-size: clamp(1.5rem, 2.5vw, 2.2rem); }
.bx--blr:hover .bx__fav, .bx--blr:focus-within .bx__fav { transform: translateY(-14%) rotate(-3deg); }
@media (hover: none) { .bx__fav { transform: translateY(-14%) rotate(-3deg); } }
@media (min-width: 48rem) {
  .fold__pics--two .fold__pic:first-child { width: 56%; }
  .fold__pics--two .fold__pic:last-child { width: 54%; margin: -36% 0 0 48%; }
  .fold__pics--two .fold__pic:last-child img { aspect-ratio: 1; }
}

.opening::after { bottom: -46vw; }
.bx--blr .bx__fav { z-index: 3; right: 4%; width: 29%; transform: translateY(58%) rotate(5deg); }
.bx--blr:hover .bx__fav, .bx--blr:focus-within .bx__fav { transform: translateY(4%) rotate(-3deg); }
@media (hover: none) { .bx--blr .bx__fav { transform: translateY(4%) rotate(-3deg); } }
@media (min-width: 48rem) {
  .fold__pics--two .fold__pic:first-child { width: 50%; }
  .fold__pics--two .fold__pic:last-child { width: 50%; margin: -38% 0 0 50%; }
}
@media (max-width: 47.99rem) { .opening::after { bottom: -84vw; } .bx--blr .bx__fav { width: 40%; } }

@media (max-width: 47.99rem) {
  .bx--blr .bx__kn { left: 1.5rem; right: auto; top: 50%; font-size: 1.6rem; }
  .bx--blr .bx__fav { width: 42%; right: 3%; transform: translateY(6%) rotate(-3deg); }
}

/* Lighter, natural clouds; name sticker tucked right under the pointer; brother peeks in from the side */
.opening::after { background-image: url("assets/clouds-top.webp?c=3"); bottom: -50vw; }
.intro__sky::after { background-image: url("assets/clouds-bottom.webp?c=3"); }
.intro__stage::before { background-image: url("assets/clouds-mid.webp?c=3"); }
.intro__sky { background: linear-gradient(#fff 0, #DCEDFA 6rem, #B4D8F3 22rem, #A6D0F0 50%, #B4D8F3 calc(100% - 26rem), #E0EFFA calc(100% - 9rem), #fff 100%); }
img.nametag { width: clamp(4.25rem, 5.6vw, 5.5rem); rotate: -4deg; transform-origin: 0 0; }
.bx--blr .bx__fav { z-index: 1; right: 0; top: 7%; bottom: auto; width: 21%; transform: translateX(62%) rotate(8deg); transform-origin: 100% 100%; transition: transform .8s cubic-bezier(.34, 1.3, .64, 1); }
.bx--blr:hover .bx__fav, .bx--blr:focus-within .bx__fav { transform: translateX(-12%) rotate(-3deg); }
@media (hover: none) { .bx--blr .bx__fav { transform: translateX(-12%) rotate(-3deg); } }
@media (max-width: 47.99rem) { .bx--blr .bx__fav { top: auto; bottom: 27%; width: 34%; right: 0; transform: translateX(-6%) rotate(-3deg); } }

.opening::after { bottom: -56.25vw; }
.intro__stage::before { display: none; }
.bx--blr .bx__fav { top: 13%; }
@media (max-width: 47.99rem) { .opening::after { bottom: -100vw; } .bx--blr .bx__fav { top: auto; } }
img.nametag { rotate: none; transform-origin: 0 0; }

/* Gallery: masonry wall with a zoom-up popup */
.win--gallery { position: relative; width: min(96vw, 74rem); height: min(92vh, 58rem); max-height: none; background: #fff; }
.win--gallery .win__bar { background: #fff; }
.mason-wrap { padding: clamp(.75rem, 2vw, 1.5rem); }
.mason { columns: 4; column-gap: clamp(.5rem, 1vw, .9rem); }
.mason__item { display: block; width: 100%; margin: 0 0 clamp(.5rem, 1vw, .9rem); padding: 0; border: 0; border-radius: 1.2rem; background: #EFEDE6; overflow: hidden; cursor: zoom-in !important; break-inside: avoid; transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .2s; }
.mason__item img { display: block; width: 100%; height: auto; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.mason__item:hover img { transform: scale(1.05); }
.mason__item:active { transform: scale(.98); }
.mason__item.is-out { opacity: 0; }
.mason__item:nth-child(3n+1) img { aspect-ratio: 3 / 5; object-fit: cover; object-position: 50% 25%; }
.mason__item:nth-child(4n+2) img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 25%; }
.zoom { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 3.5rem clamp(3.5rem, 7vw, 6rem) 4.5rem; background: rgba(245, 244, 239, .96); cursor: zoom-out !important; }
.zoom[hidden] { display: none; }
.zoom > img { max-width: 100%; max-height: 100%; min-height: 0; width: auto; height: auto; object-fit: contain; border-radius: .75rem; box-shadow: 0 2rem 3.5rem -1.5rem rgba(20, 20, 20, .5); cursor: zoom-out !important; }
.zoom { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.zoom__nav, .zoom__close { position: absolute; width: 44px; height: 44px; border: 1px solid rgba(20, 20, 20, .14); border-radius: 50%; background: #fff; color: #14120F; font-size: 1.1rem; line-height: 1; transition: background-color .2s, color .2s; }
.zoom__nav:hover, .zoom__close:hover { background: #671813; color: #fff; }
.zoom__nav { top: 50%; margin-top: -22px; } .zoom__nav--prev { left: clamp(.5rem, 1.5vw, 1.25rem); } .zoom__nav--next { right: clamp(.5rem, 1.5vw, 1.25rem); }
.zoom__close { right: .75rem; top: .6rem; font-size: 1.4rem; }
.zoom__cap { position: absolute; left: 0; right: 0; bottom: 1rem; margin: 0; text-align: center; font-size: .9375rem; font-weight: 500; color: #14120F; }
.zoom__cap small { display: block; font-size: .75rem; font-weight: 400; letter-spacing: .08em; color: #5F584D; font-variant-numeric: tabular-nums; }
@media (max-width: 63.99rem) { .mason { columns: 3; } }
@media (max-width: 47.99rem) { .mason { columns: 2; } .mason__item { border-radius: .9rem; } .zoom { padding: 3.5rem .75rem 7.5rem; } .zoom__nav { top: auto; bottom: 4rem; margin: 0; } .zoom__nav--prev { left: calc(50% - 52px); } .zoom__nav--next { right: calc(50% - 52px); } }
@media (prefers-reduced-motion: reduce) { .mason__item, .mason__item img { transition: none; } }
.win--gallery .win__body.mason-wrap { display: block; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.opening::after { background-image: url("assets/clouds-top.webp?c=4"); }
.intro__sky::after { background-image: url("assets/clouds-bottom.webp?c=4"); bottom: 0; }

/* Story and Plot twist: both pages sit inside the folder with the same margins; Plot twist's two photos overlap as a pair */
#panel-twist .fold__pics--two { display: block; align-self: center; }
#panel-twist .fold__pics--two .fold__pic:first-child { width: 60%; margin: 0; --r: -4deg; }
#panel-twist .fold__pics--two .fold__pic:last-child { width: 60%; margin: -50% 0 0 40%; --r: 5deg; }
#panel-twist .fold__pics--two .fold__pic img { aspect-ratio: 4 / 5; object-fit: cover; }
#panel-twist .fold__pics--two .fold__pic:last-child::before { left: 34%; }
#panel-twist .stk--seal { right: -5%; bottom: -8%; width: 24% !important; }
@media (min-width: 48rem) {
  #panel-story .fold__page, #panel-twist .fold__page { align-self: center; align-items: center; padding-block: clamp(1.5rem, 3vw, 2.25rem); }
  #panel-twist .fold__page { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); margin-left: clamp(.5rem, 2vw, 1.5rem); }
  #panel-twist .fold__pics--two { margin-right: calc(clamp(2rem, 5vw, 4rem) * -1); }
  #panel-story .fold__page { grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); margin-right: clamp(.5rem, 2vw, 1.5rem); }
  #panel-story .fold__text, #panel-twist .fold__text { font-size: clamp(1.05rem, 1.7vw, 1.36rem); line-height: 1.3; }
}
@media (max-width: 47.99rem) {
  #panel-twist .fold__page--flip .fold__pics { order: -1; width: 86%; margin: -1.75rem auto .5rem; }
}

#panel-twist .fold__pics--two .fold__pic ~ .fold__pic { width: 60%; margin: -50% 0 0 40%; --r: 5deg; }
#panel-twist .fold__pics--two .fold__pic ~ .fold__pic::before { left: 34%; transform: rotate(7deg); }

#panel-twist .fold__pics--two .fold__pic:first-child { width: 62%; margin: 0 0 0 38%; --r: 4deg; }
#panel-twist .fold__pics--two .fold__pic ~ .fold__pic { width: 56%; margin: -34% 0 0 0; --r: -6deg; }
#panel-twist .stk--seal { right: auto; left: 40%; bottom: -6%; }

/* ================= Premium cards: Selected Work and Experience ================= */
/* Work: each case is one contained card: inset artwork, an eyebrow line, a numbered corner, a quiet button */
.cases { counter-reset: case; gap: clamp(1.25rem, 2.4vw, 2rem); }
.case { counter-increment: case; padding: .6rem; border-radius: 1.75rem; background: #fff; box-shadow: 0 0 0 1px rgba(20, 20, 20, .07), 0 1px 2px rgba(20, 20, 20, .04), 0 2.2rem 3rem -2.4rem rgba(20, 20, 20, .32); transition: opacity .4s, filter .4s, box-shadow .5s cubic-bezier(.16, 1, .3, 1); }
.case:has(a:hover), .case:has(a:focus-visible) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 38%, rgba(20, 20, 20, .08)), 0 1px 2px rgba(20, 20, 20, .04), 0 2.8rem 3.6rem -2rem color-mix(in srgb, var(--glow) 34%, rgba(20, 20, 20, .32)); }
.case__media { border-radius: 1.25rem; background: linear-gradient(165deg, color-mix(in srgb, var(--glow) 20%, #F7F6F1), #F7F6F1 74%); }
.case:has(a:hover) .case__media, .case:has(a:focus-visible) .case__media { box-shadow: none; }
.case:has(a:focus-visible) .case__media { outline: none; }
.case:has(a:focus-visible) { outline: 2px solid #671813; outline-offset: 4px; }
.case__arrow { display: none; }
.case__plat { left: .85rem; top: .85rem; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.case__body { position: relative; padding: 1.5rem clamp(.9rem, 1.6vw, 1.25rem) 1rem; }
.case__body::before { content: "0" counter(case); position: absolute; right: clamp(.9rem, 1.6vw, 1.25rem); top: 1.35rem; font-family: var(--serif); font-style: italic; font-size: 1.125rem; color: #8D8A80; font-variant-numeric: lining-nums; }
.case__tags { gap: 0; padding-right: 2.5rem; }
.case__tags span { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #5F584D; }
.case__tags span:first-child { color: #671813; }
.case__tags span + span::before { content: "·"; margin-inline: .6em; color: #8D8A80; }
.case:has(a:hover) .case__tags span:nth-child(n) { transform: none; }
.case__title { margin-top: .7rem; font-size: clamp(1.7rem, 2.7vw, 2.35rem); }
.case__desc { margin-top: .55rem; font-size: 1rem; line-height: 1.5; }
.case__foot { align-items: center; padding-top: .85rem; font-size: .8125rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.case__go { display: inline-flex; align-items: center; gap: .5em; min-height: 2.5rem; padding: 0 1rem; border: 1px solid rgba(20, 20, 20, .14); border-radius: 2rem; background: #fff; font-size: .8125rem; letter-spacing: 0; transition: background-color .3s, color .3s, border-color .3s; }
.case:has(a:hover) .case__go, .case:has(a:focus-visible) .case__go { background: #671813; border-color: #671813; color: #fff; }
@media (max-width: 47.99rem) { .case { padding: .45rem; border-radius: 1.4rem; } .case__media { border-radius: 1.05rem; clip-path: inset(0 round 1.05rem); } }
@media (prefers-reduced-motion: reduce) { .case, .case__go { transition: none; } }



/* Experience cards: the original layout, rounder to match the rest of the site, with the same
   thick see-through outline the pills use. Flat surfaces, one light shadow. */
.xp__card { border-radius: 1.25rem; background: #F8F8F6; box-shadow: 0 0 0 1px rgba(20, 20, 20, .07), 0 0 0 9px rgba(20, 20, 20, .045), 0 1.4rem 2rem -1.6rem rgba(20, 20, 20, .22); }
.xp__card > header { border-radius: 1.25rem 1.25rem 0 0; background: #fff; border-bottom: 1px solid rgba(20, 20, 20, .07); box-shadow: none; }

/* Bento actions: a quiet text link instead of a pill, so nothing sits on top of the artwork.
   The link's hit area covers the whole tile. */
.bx__open { position: static; min-height: 44px; margin-top: .4rem; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 500 .9375rem var(--sans); color: #671813; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.bx__open i { color: #14120F; }
.bx__open:hover { background: none; color: #671813; }
.bx__open:active { transform: none; }
.bx:has(.bx__open) .bx__text { z-index: 4; }
.bx__open::after { content: ""; position: absolute; inset: -100vmax; } /* the tile clips it to its own shape */
.bx:has(.bx__open):hover .bx__open i { transform: translateX(.3em); }
.bx:has(.bx__open:focus-visible) { outline: 2px solid #671813; outline-offset: 3px; }
.bx__open:focus-visible { outline: none; }

/* Travel & friends: two postcards and a boarding pass, on a full-width row at the foot of the bento. */
.bx--trip { grid-column: 1 / -1; flex-direction: column; min-height: 34rem; }
.bx--trip .bx__text p:not(.bx__kicker) { max-width: 36ch; }
.trip { position: relative; flex: 1; align-self: stretch; min-height: 21rem; }
.trip__card { position: absolute; left: 7%; top: 0; width: min(38%, 11rem); aspect-ratio: 3 / 4; padding: 1.1%; background: #F4F0E6; box-shadow: 0 0 0 1px rgba(60, 50, 40, .08), 0 1.2rem 1.6rem -1.1rem rgba(30, 25, 20, .55); transform: rotate(-5deg); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.trip__card--b { left: calc(7% + min(27%, 7.8rem)); top: 5%; transform: rotate(4deg); }
.trip__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.deco--trip { left: calc(7% + min(30%, 8.7rem)); top: -4%; width: min(9%, 2.6rem); transform: rotate(-12deg); }
.trip__pass { position: absolute; right: 6%; bottom: 7%; width: min(17rem, 68%); padding: .9rem 1.1rem 1rem; border-radius: .7rem; background: #FBF6EC; box-shadow: 0 0 0 1px rgba(60, 50, 40, .1), 0 1.2rem 1.6rem -1.1rem rgba(30, 25, 20, .5); transform: rotate(3deg); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.trip__label { font: 500 .6875rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #671813; }
.trip__route { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .35rem; padding-bottom: .6rem; border-bottom: 1px dashed rgba(60, 50, 40, .3); font-family: var(--serif); font-size: 1.75rem; line-height: 1; color: #14120F; }
.trip__route svg { flex: 1; min-width: 0; color: #671813; }
.trip__pass dl { display: grid; gap: .3rem; margin: .6rem 0 0; }
.trip__pass dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.trip__pass dt { font: 500 .6875rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #6B6358; }
.trip__pass dd { margin: 0; font: 500 .8125rem var(--sans); color: #14120F; text-align: right; }
.bx--trip:hover .trip__card--a { transform: rotate(-8deg) translate(-3%, -1%); }
.bx--trip:hover .trip__card--b { transform: rotate(7deg) translate(3%, -1%); }
.bx--trip:hover .trip__pass { transform: rotate(0deg) translateY(-3%); }
@media (min-width: 62rem) {
  .bento > .bx--trip { grid-column: 1 / -1; grid-row: 8 / span 2; flex-direction: row; min-height: 0; }
  .bx--trip .bx__text { flex: 0 0 38%; }
  .trip { min-height: 0; }
  .trip__card { left: 3%; top: 50%; width: auto; height: 76%; padding: .45rem; transform: translateY(-50%) rotate(-5deg); }
  .trip__card--b { left: 24%; transform: translateY(-46%) rotate(4deg); }
  .deco--trip { left: 23%; top: 3%; width: 6.5%; }
  .trip__pass { right: 5%; bottom: auto; top: 50%; width: 41%; transform: translateY(-50%) rotate(3deg); }
  .bx--trip:hover .trip__card--a { transform: translateY(-50%) rotate(-8deg) translateX(-4%); }
  .bx--trip:hover .trip__card--b { transform: translateY(-46%) rotate(7deg) translateX(4%); }
  .bx--trip:hover .trip__pass { transform: translateY(-53%) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .trip__card, .trip__pass { transition: none; } }

/* Travel takes the slot beside the recipe tile; the chat closes the bento on a full-width row. */
@media (min-width: 62rem) {
  .bento > .bx--trip { grid-column: 5 / span 8; grid-row: 6 / span 2; }
  .bento > .bx--chat { grid-column: 1 / -1; grid-row: 8 / span 2; }
  .bx--trip .bx__text { flex: 0 0 43%; }
  .bx--trip .bx__text h3 { font-size: clamp(1.6rem, 2.2vw, 2rem); }
  .trip__card { height: 68%; }
  .trip__card--b { left: 22%; }
  .deco--trip { left: 21%; top: 6%; width: 8.5%; }
  .trip__pass { right: 3.5%; top: 64%; width: max(50%, 13.75rem); padding: .7rem .9rem .8rem; }
  .trip__route { font-size: 1.4rem; }
  .trip__pass dl div { gap: .5rem; }
  .trip__pass dd { font-size: .78rem; white-space: nowrap; }
  .trip__card { top: 44%; }
}

/* Dosa strip: kraft-paper strips on flat burgundy, no gradient or glow. */
.bx--line { background: #5C1220; }
.bx__strips { width: min(100%, 22rem); transform: rotate(-1.5deg); filter: drop-shadow(0 .3rem .35rem rgba(20, 0, 5, .3)); }

/* Favourite person: tucked behind the far end of the skyline, pops up on hover. */
.bx--blr .bx__fav { z-index: 1; top: auto; bottom: 0; right: 3%; width: 21%; transform: translateY(64%) rotate(6deg); transform-origin: 50% 100%; }
.bx--blr:hover .bx__fav, .bx--blr:focus-within .bx__fav { transform: translateY(-46%) rotate(-4deg); }
@media (hover: none) { .bx--blr .bx__fav { transform: translateY(-46%) rotate(-4deg); } }
@media (max-width: 47.99rem) { .bx--blr .bx__fav { top: auto; bottom: 0; right: 4%; width: 32%; transform: translateY(-62%) rotate(-4deg); } }
.trip__pass dd { font-size: .78rem; white-space: nowrap; }
.trip__pass dl div { gap: .5rem; }
@media (max-width: 61.99rem) { .trip__pass { width: min(17.5rem, 88%); } }

/* Travel tile: the friends photo alone, anchored to the bottom edge the way the skyline is. */
.bx__crew { right: 4%; bottom: -22%; width: 72%; height: auto; }
.bx--trip:hover .bx__crew { transform: translateY(-2%) scale(1.02); }
.bx--trip { min-height: 30rem; }
@media (min-width: 62rem) {
  .bx--trip .bx__text { flex: 0 0 47%; }
  .bx__crew { right: 2%; bottom: -30%; width: 46%; }
}
@media (max-width: 61.99rem) {
  .bx--trip { min-height: 31rem; }
  .bx__crew { right: 3%; bottom: -6%; width: min(94%, 22rem); }
}
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .bx--trip { min-height: 22rem; }
  .bx--trip .bx__text { max-width: 46%; }
  .bx__crew { bottom: -12%; width: min(50%, 22rem); }
}

/* Friends photo, waist-up crop: sits flush on the bottom edge. */
.bx__crew { bottom: 0; }
@media (min-width: 62rem) { .bx__crew { right: 2%; bottom: 0; width: 50%; } }
@media (max-width: 61.99rem) { .bx__crew { bottom: 0; right: 2%; width: min(96%, 26rem); } .bx--trip { min-height: 27rem; } }
@media (min-width: 40rem) and (max-width: 61.99rem) { .bx__crew { bottom: 0; width: min(52%, 26rem); } .bx--trip { min-height: 19rem; } }

/* Favourite person pops a little higher. */
.bx--blr:hover .bx__fav, .bx--blr:focus-within .bx__fav { transform: translateY(-68%) rotate(-4deg); }
@media (hover: none) { .bx--blr .bx__fav { transform: translateY(-68%) rotate(-4deg); } }
@media (max-width: 47.99rem) { .bx--blr .bx__fav { transform: translateY(-78%) rotate(-4deg); } }

/* ---------- Top nav: "More" ---------- */
.topnav__links { gap: clamp(22px, 2.3vw, 40px); }
.more__btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; font-size: clamp(13.5px, .95vw, 15.5px); letter-spacing: .02em; font-variation-settings: "opsz" 36; transition: opacity .2s; }
.more__btn:hover { opacity: .55; }
.more__btn svg { transition: transform .3s var(--spring); }
.more:hover .more__btn svg, .more:focus-within .more__btn svg, .more.is-open .more__btn svg { transform: rotate(180deg); }
.more__menu { position: absolute; right: -14px; top: calc(100% - 2px); display: grid; min-width: 10.5rem; padding: 6px; background: #fff; border: 1px solid var(--h-line); border-radius: 14px; box-shadow: 0 8px 24px rgba(16, 15, 17, .1); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .3s var(--spring), visibility 0s .2s; }
.more:hover .more__menu, .more:focus-within .more__menu, .more.is-open .more__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.topnav__links .more__menu a { padding: 10px 12px; border-radius: 9px; white-space: nowrap; }
.topnav__links .more__menu a:hover { opacity: 1; background: rgba(16, 15, 17, .05); }
.more__btn:focus-visible, .more__menu a:focus-visible { outline: 2px solid #671813; outline-offset: 3px; border-radius: 6px; }

/* Dock: seven links now, so they sit a little closer; on phones closer still. */
.dock__link { padding: 0 13px; }
.dock__link:hover span, .dock__link:focus-visible span { max-width: 96px; }
@media (max-width: 39.99rem) {
  .dock__inner { gap: 0; padding: 6px 8px; }
  .dock__link { height: 46px; padding: 0 10px; }
  .dock__link:hover span, .dock__link:focus-visible span { max-width: 0; margin-left: 0; opacity: 0; }
}

/* ---------- House rules ---------- */
.rules, .blog { position: relative; z-index: 2; padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 4rem); background: #fff; }
.rules__stage { position: relative; display: flex; flex-direction: column; align-items: center; width: min(100%, 68rem); margin: clamp(3rem, 6vw, 4.75rem) auto 0; }
.rules__card { position: relative; display: flex; width: min(100%, 28.5rem); }
.rules__body { position: relative; z-index: 2; flex: 1; min-width: 0; display: grid; padding: clamp(.9rem, 2.2vw, 1.4rem); padding-bottom: clamp(1.6rem, 3vw, 2.25rem); background: #F4F0E6; border-radius: 1.5rem; box-shadow: 0 0 0 1px rgba(60, 50, 40, .06), 0 1.8rem 2.6rem -2rem rgba(30, 25, 20, .45); }
.rules__panel { grid-area: 1 / 1; display: flex; flex-direction: column; text-align: center; visibility: hidden; opacity: 0; transition: opacity .35s ease-out, visibility 0s .35s; }
.rules__panel.is-active { visibility: visible; opacity: 1; transition-delay: 0s; }
.rules__art { display: grid; place-items: center; aspect-ratio: 1 / .8; padding: 7%; border-radius: .6rem; overflow: hidden; background: var(--bg, #C9DCF3); }
.rules__art--2 { --bg: #F6B7CB; } .rules__art--3 { --bg: #E4DDB4; } .rules__art--4 { --bg: #D9E6D0; } .rules__art--5 { --bg: #F4D9C3; }
.rules__panel h3 { margin-top: clamp(1.1rem, 2.4vw, 1.6rem); font: 500 clamp(1.5rem, 2.5vw, 1.95rem) / 1.08 var(--serif); letter-spacing: -.01em; color: #2B2620; text-wrap: balance; }
.rules__panel h3 em { display: block; font-style: italic; }
.rules__text { max-width: 31ch; margin: .8rem auto 0; font-size: .9375rem; line-height: 1.45; color: #4A443B; }
.rules__tabs { position: relative; z-index: 1; display: flex; flex-direction: column; flex: none; width: 3rem; margin: 1.5rem 0 1.5rem -.8rem; }
.rules__tabs button { position: relative; flex: 1; display: grid; place-items: center; min-height: 4.2rem; margin-top: -.5rem; padding: .5rem 0 .5rem .8rem; border: 0; border-radius: 0 1rem 1rem 0; background: #E9E3D5; box-shadow: 0 0 0 1px rgba(60, 50, 40, .07), 0 .8rem 1rem -.8rem rgba(30, 25, 20, .35); color: #5A5246; cursor: pointer; font: 500 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: background-color .25s, color .25s, transform .3s cubic-bezier(.16, 1, .3, 1); }
.rules__tabs button:first-child { margin-top: 0; }
.rules__tabs button span { writing-mode: vertical-rl; }
.rules__tabs button:hover { transform: translateX(3px); }
.rules__tabs button[aria-selected="true"] { z-index: 2; background: #F4F0E6; color: #671813; transform: translateX(5px); }
.rules__tabs button:focus-visible { outline: 2px solid #671813; outline-offset: 2px; z-index: 3; }
.rules__stamp { position: absolute; z-index: 3; left: -1.9rem; top: -1.9rem; display: grid; place-items: center; width: 5.4rem; height: 5.4rem; transform: rotate(-8deg); filter: drop-shadow(0 .3rem .35rem rgba(40, 25, 15, .2)); }
.rules__stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #F3E3A1; }
.rules__stamp > span { position: relative; display: grid; justify-items: center; line-height: 1; color: #671813; }
.rules__stamp small { font: 500 .625rem var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.rules__stamp b { font: 600 1.7rem var(--serif); }
.rules__quote { width: min(100%, 34rem); margin: clamp(2.5rem, 5vw, 4rem) auto 0; text-align: center; }
.rules__quote p { font: italic 500 clamp(1.25rem, 2.2vw, 1.6rem) / 1.25 var(--serif); color: #671813; text-wrap: balance; }

/* The artefacts on each rule card */
.art { width: 100%; text-align: left; font-family: var(--sans); color: #14120F; }
.art p, .art dl, .art ol { margin: 0; }
.art--phone { max-width: 15rem; padding: .7rem .9rem 1rem; border-radius: 1.2rem; background: rgba(255, 255, 255, .86); box-shadow: 0 1rem 1.4rem -1rem rgba(30, 40, 60, .45); }
.art__bar { display: flex; align-items: center; gap: .5rem; font-size: .6875rem; font-weight: 500; }
.art__bar span:first-child { margin-right: auto; }
.art__sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.art__sig i { width: 3px; border-radius: 1px; background: rgba(20, 18, 15, .2); }
.art__sig i:nth-child(1) { height: 4px; background: #14120F; } .art__sig i:nth-child(2) { height: 6px; } .art__sig i:nth-child(3) { height: 8px; } .art__sig i:nth-child(4) { height: 11px; }
.art__time { margin-top: .5rem !important; font: 500 2.6rem / 1 var(--serif); text-align: center; }
.art__day { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: #5F584D; }
.art__ping { margin-top: .7rem !important; padding: .5rem .65rem; border-radius: .7rem; background: #fff; font-size: .75rem; line-height: 1.3; box-shadow: 0 0 0 1px rgba(20, 20, 20, .06); }
.art--ticket, .art--tag, .art--sign { max-width: 16rem; padding: .9rem 1rem 1rem; border-radius: .7rem; background: #fff; box-shadow: 0 1rem 1.4rem -1rem rgba(60, 20, 30, .45); transform: rotate(-2deg); }
.art__id { font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #671813; }
.art__h { margin-top: .2rem !important; font: 600 1.35rem / 1.1 var(--serif); }
.art dl { display: grid; gap: .3rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed rgba(60, 50, 40, .3); }
.art dl div { display: flex; justify-content: space-between; gap: .75rem; font-size: .75rem; }
.art dt { color: #6B6358; } .art dd { margin: 0; font-weight: 500; text-align: right; }
.art--tag { transform: rotate(2deg); text-align: center; }
.art--tag svg { display: block; margin: 0 auto .3rem; }
.art--tag ol { display: grid; gap: .3rem; margin-top: .6rem; padding: .6rem 0 0; border-top: 1px dashed rgba(60, 50, 40, .3); list-style: none; text-align: left; font-size: .8125rem; }
.art--tag li { display: flex; align-items: center; gap: .5rem; }
.art--tag li::before { content: ""; width: .85rem; height: .85rem; border: 1.5px solid #671813; border-radius: .2rem; }
.art--tag li.is-done::before { background: #671813 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.500 6.200 2.300 2.300 4.700-5' fill='none' stroke='%23fff' stroke-width='1.600' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.art--btn { display: grid; justify-items: center; gap: .55rem; text-align: center; }
.art__step { display: inline-flex; align-items: center; gap: .35rem; font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #4F5B45; }
.art__cta { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.9rem; border-radius: 3rem; background: #671813; color: #fff; font-size: 1.05rem; font-weight: 500; box-shadow: 0 0 0 6px rgba(103, 24, 19, .14), 0 1rem 1.4rem -1rem rgba(60, 20, 15, .6); }
.art__cta i { font-style: normal; }
.art--sign { transform: rotate(-1.5deg); }
.art__lines { display: grid; gap: .4rem; margin: .7rem 0 .2rem; }
.art__lines i { height: 5px; border-radius: 3px; background: rgba(60, 50, 40, .14); }
.art__lines i:nth-child(2) { width: 86%; } .art__lines i:nth-child(3) { width: 58%; }
.art__sig2 { margin: .2rem 0 .1rem !important; padding-bottom: .1rem; border-bottom: 1px solid rgba(60, 50, 40, .35); font: 2rem / 1.3 "Brittany", "Luxurious Script", cursive; color: #671813; }
.art--sign .art__step { color: #6B6358; }

/* Tool stack: knick-knacks around the card on wide screens, a tidy row under it otherwise. */
.tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem 1.3rem; width: min(100%, 28rem); margin: 2.25rem 0 0; padding: 0; list-style: none; }
.tool { display: grid; justify-items: center; gap: .4rem; font: 500 .72rem var(--sans); letter-spacing: .02em; color: #5F584D; transform: rotate(var(--r, 0deg)); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.tool b { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px rgba(20, 20, 20, .07), 0 0 0 6px rgba(20, 20, 20, .04), 0 1rem 1.4rem -1rem rgba(20, 20, 20, .35); font: 700 1.2rem var(--serif); color: var(--c, #671813); }
.tool:hover { transform: rotate(0deg) translateY(-4px); }
.rules__note { position: relative; width: min(100%, 15rem); margin: 2rem 0 0; padding: 1rem 1.1rem; border-radius: .4rem; background: #FBF6EC; box-shadow: 0 0 0 1px rgba(60, 50, 40, .08), 0 1.2rem 1.6rem -1.2rem rgba(30, 25, 20, .45); font-size: .875rem; line-height: 1.4; color: #4A443B; transform: rotate(-2deg); }
.rules__note b { display: block; margin-bottom: .2rem; font: 600 1.15rem var(--serif); color: #14120F; }
.rules__note::before { content: ""; position: absolute; left: 1rem; top: -.45rem; width: .9rem; height: .9rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #B8463C, #671813 70%); box-shadow: 0 .25rem .3rem rgba(40, 10, 10, .35); }
@media (min-width: 62rem) {
  .rules__stage { min-height: 38rem; justify-content: center; }
  .tools { position: static; width: auto; margin: 0; }
  .tool { position: absolute; }
  .tool--1 { left: 13%; top: 6%; --r: -8deg; }
  .tool--2 { left: 3%; top: 30%; --r: 6deg; }
  .tool--3 { left: 17%; top: 44%; --r: -4deg; }
  .tool--4 { right: 12%; top: 3%; --r: 7deg; }
  .tool--5 { right: 2%; top: 24%; --r: -6deg; }
  .tool--6 { right: 16%; top: 40%; --r: 4deg; }
  .tool--7 { right: 4%; top: 62%; --r: 9deg; }
  .tool--8 { right: 17%; top: 78%; --r: -7deg; }
  .rules__note { position: absolute; left: 3%; bottom: 6%; margin: 0; transform: rotate(-4deg); }
}
@media (max-width: 30rem) {
  .rules__stamp { left: -.6rem; top: -1.7rem; width: 4.6rem; height: 4.6rem; }
  .rules__tabs { width: 2.7rem; }
}
@media (prefers-reduced-motion: reduce) { .rules__panel, .rules__tabs button, .tool { transition: none; } }

/* ---------- Blog ---------- */
.blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.2vw, 2rem); width: min(100%, 68rem); margin: clamp(2.25rem, 4.5vw, 3.5rem) auto 0; }
.post { display: flex; flex-direction: column; border-radius: 1.25rem; background: #F8F8F6; box-shadow: 0 0 0 1px rgba(20, 20, 20, .07), 0 0 0 9px rgba(20, 20, 20, .045), 0 1.4rem 2rem -1.6rem rgba(20, 20, 20, .22); overflow: hidden; }
.post__top { display: grid; place-items: center; aspect-ratio: 16 / 8; background: var(--tint, #E9E4F8); }
.post__top span { font: clamp(1.6rem, 2.6vw, 2.2rem) / 1 "Brittany", "Luxurious Script", cursive; color: #671813; }
.post__body { padding: 1.3rem 1.4rem 1.4rem; background: #fff; flex: 1; }
.post__tag { font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #671813; }
.post h3 { margin-top: .5rem; font: 700 clamp(1.3rem, 1.9vw, 1.55rem) / 1.1 var(--serif); color: #14120F; text-wrap: balance; }
.post__body p:last-child { margin-top: .6rem; font-size: .9375rem; line-height: 1.45; color: #5F584D; }
.post__foot { display: flex; justify-content: space-between; padding: .85rem 1.4rem; border-top: 1px solid rgba(20, 20, 20, .07); font-size: .8125rem; color: #6B6358; }
.post__foot span:first-child { font-weight: 500; color: #14120F; }
.blog__all { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.blog__all a { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font-size: .9375rem; font-weight: 500; color: #671813; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.blog__all i { font-style: normal; color: #14120F; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.blog__all a:hover i { transform: translateX(.3em); }
@media (max-width: 61.99rem) { .blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.99rem) { .blog__grid { grid-template-columns: 1fr; } }
.blogpage { padding-top: clamp(8rem, 14vw, 12rem); min-height: 100vh; }
.blogpage__back { display: block; width: min(100%, 68rem); margin: 0 auto 1.5rem; font-size: .9375rem; }
.blogpage__back a { color: #671813; text-underline-offset: .25em; }
.blogpage__end { padding: 2rem clamp(1rem, 4vw, 4rem) 3rem; text-align: center; font-size: .8125rem; color: #6B6358; }

/* Tool tiles now carry the official marks. */
.tool b img { display: block; width: 58%; height: 58%; object-fit: contain; }
@media (max-width: 39.99rem) { .dock__link { padding: 0 8px; } }

/* Eleven tools around the card now. */
@media (min-width: 62rem) {
  .rules__stage { min-height: 41rem; }
  .tool--1 { left: 14%; top: 2%; --r: -8deg; }
  .tool--2 { left: 3%; top: 15%; --r: 6deg; }
  .tool--3 { left: 17%; top: 27%; --r: -4deg; }
  .tool--9 { left: 4%; top: 40%; --r: 7deg; }
  .tool--10 { left: 16%; top: 52%; --r: -6deg; }
  .tool--4 { right: 13%; top: 1%; --r: 7deg; }
  .tool--5 { right: 2%; top: 13%; --r: -6deg; }
  .tool--6 { right: 16%; top: 26%; --r: 4deg; }
  .tool--7 { right: 4%; top: 39%; --r: 9deg; }
  .tool--8 { right: 17%; top: 52%; --r: -7deg; }
  .tool--11 { right: 5%; top: 66%; --r: 5deg; }
  .rules__note { bottom: 3%; }
}
.rules, .blog { padding-top: clamp(1rem, 3vw, 2.5rem); }

/* Taller strips for the loop, the falling leaf and the heart. */
.glide--tall { height: clamp(11rem, 22vw, 19rem); }
/* Footer: the envelope sits on the corner of the "Say hello" button. */
.foot__top .deco--foot2 { left: auto; right: clamp(5.5rem, 8.5vw, 7.5rem); bottom: auto; top: 50%; width: clamp(3rem, 4.6vw, 4rem); transform: translateY(-105%) rotate(-12deg); z-index: 1; }

/* Thirteen tools: six down the left, seven down the right. */
@media (min-width: 62rem) {
  .rules__stage { min-height: 46rem; }
  .tool--1 { left: 14%; top: 1%; } .tool--2 { left: 3%; top: 11%; } .tool--3 { left: 17%; top: 22%; }
  .tool--9 { left: 4%; top: 33%; } .tool--10 { left: 16%; top: 44%; } .tool--12 { left: 3%; top: 55%; --r: -5deg; }
  .tool--4 { right: 13%; top: 0; } .tool--5 { right: 2%; top: 10%; } .tool--6 { right: 16%; top: 21%; }
  .tool--7 { right: 4%; top: 32%; } .tool--8 { right: 17%; top: 43%; } .tool--11 { right: 4%; top: 54%; }
  .tool--13 { right: 16%; top: 66%; --r: 6deg; }
  .rules__note { bottom: 2%; }
}
.tools { width: min(100%, 30rem); }

/* Blog cards are links now: the title's hit area covers the card. */
.post { position: relative; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.post:hover { transform: translateY(-3px); }
.post h3 a { color: inherit; text-decoration: none; }
.post h3 a::after { content: ""; position: absolute; inset: 0; }
.post h3 a:focus-visible { outline: none; }
.post:has(a:focus-visible) { outline: 2px solid #671813; outline-offset: 4px; }
.post__foot i { font-style: normal; display: inline-block; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.post:hover .post__foot i { transform: translateX(.3em); }
.post__foot span:last-child { color: #671813; font-weight: 500; }

/* ---------- A blog post ---------- */
.article { padding: clamp(8rem, 14vw, 12rem) clamp(1.25rem, 4vw, 4rem) clamp(3rem, 6vw, 5rem); }
.article > * { width: min(100%, 42rem); margin-inline: auto; }
.article .blogpage__back { margin-bottom: 1.5rem; }
.article__head { padding: clamp(1.5rem, 3.5vw, 2.5rem); border-radius: 1.25rem; background: var(--tint, #E9E4F8); }
.article__head h1 { margin-top: .7rem; font: 700 clamp(2rem, 4.6vw, 3.1rem) / 1.02 var(--serif); letter-spacing: -.015em; color: #14120F; text-wrap: balance; }
.article__dek { margin-top: .9rem; font: italic 500 clamp(1.15rem, 2vw, 1.4rem) / 1.3 var(--serif); color: #3B352C; }
.article__meta { margin-top: 1.1rem; font-size: .8125rem; color: #5F584D; }
.article__body { margin-top: clamp(2rem, 4vw, 3rem); font-size: 1.0625rem; line-height: 1.65; color: #2B2620; }
.article__body p + p, .article__body ul + p { margin-top: 1.1em; }
.article__body h2 { margin: 2.2em 0 .6em; font: 700 clamp(1.4rem, 2.6vw, 1.8rem) / 1.12 var(--serif); color: #14120F; text-wrap: balance; }
.article__body ul { display: grid; gap: .6em; margin: 1.1em 0 0; padding-left: 1.2em; }
.article__body li::marker { color: #671813; }
.article__body strong { font-weight: 600; color: #14120F; }
.article__next { display: grid; gap: .3rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid rgba(20, 20, 20, .1); }
.article__next span { font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #671813; }
.article__next a { font: 700 clamp(1.25rem, 2.2vw, 1.6rem) / 1.15 var(--serif); color: #14120F; text-decoration: none; }
.article__next a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.article__next i { font-style: normal; }

/* Blog cards carry the post's cover illustration. */
.post__top { aspect-ratio: 16 / 10; overflow: hidden; }
.post__top img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.post:hover .post__top img { transform: scale(1.04); }

/* ---------- Blog post, editorial layout: tinted band, big initial, cover overlapping the band, sidebar ---------- */
.readbar { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 3px; pointer-events: none; }
.readbar i { display: block; height: 100%; background: #671813; transform: scaleX(0); transform-origin: 0 50%; }
.art2 { --gut: clamp(1.25rem, 4vw, 4rem); }
.art2__band { position: relative; overflow: hidden; padding: clamp(8.5rem, 13vw, 11.5rem) var(--gut) clamp(2.5rem, 5vw, 4rem); background: var(--tint, #E9E4F8); }
.art2__initial { position: absolute; left: max(0rem, calc(50% - 37rem)); bottom: -.16em; font: 700 clamp(15rem, 34vw, 30rem) / .8 var(--serif); color: rgba(255, 255, 255, .5); pointer-events: none; user-select: none; }
.art2__wrap { position: relative; width: min(100%, 68rem); margin-inline: auto; }
.art2__back { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); font-size: .9375rem; }
.art2__back a { color: #671813; text-underline-offset: .25em; }
.art2__tag { display: inline-block; padding: .4rem .75rem; border-radius: .3rem; background: #671813; color: #fff; font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.art2__band h1 { max-width: 15ch; margin-top: 1rem; font: 700 clamp(2.3rem, 5.4vw, 4rem) / 1 var(--serif); letter-spacing: -.02em; color: #14120F; text-wrap: balance; }
.art2__meta { margin-top: 1.25rem; font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #5F584D; }
.art2__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); align-items: start; gap: clamp(2rem, 5vw, 5rem); width: min(100% - 2 * var(--gut), 68rem); margin: 0 auto; padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(3rem, 6vw, 5rem); }
.art2__dek { font: italic 500 clamp(1.3rem, 2.3vw, 1.65rem) / 1.3 var(--serif); color: #3B352C; text-wrap: balance; }
.art2 .article__body { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.art2 .article__body > p:first-child::first-letter { float: left; margin: .08em .12em 0 0; font: 700 4.4em / .78 var(--serif); color: #671813; }
.art2 .article__body h2::before { content: ""; display: block; width: 2.25rem; height: 3px; margin-bottom: .9rem; border-radius: 2px; background: #671813; }
.art2__quote { position: relative; margin: 2.4em 0 0; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem) clamp(3.5rem, 6vw, 4.75rem); border-radius: 1rem; background: var(--tint, #E9E4F8); }
.art2__quote::before { content: "“"; position: absolute; left: clamp(.9rem, 2vw, 1.4rem); top: .05em; font: 700 clamp(4.5rem, 8vw, 6rem) / 1 var(--serif); color: rgba(255, 255, 255, .85); }
.art2__quote p { font: 600 clamp(1.3rem, 2.4vw, 1.7rem) / 1.2 var(--serif); color: #14120F; text-wrap: balance; }
.art2__side { display: grid; gap: clamp(2rem, 4vw, 2.75rem); margin-top: clamp(-17rem, -19vw, -11rem); }
.art2__cover { position: relative; margin: 0; }
.art2__cover img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1rem; box-shadow: 0 0 0 1px rgba(20, 20, 20, .06), 0 0 0 9px rgba(255, 255, 255, .55), 0 2rem 2.6rem -2rem rgba(20, 20, 20, .45); transform: rotate(1.5deg); }
.art2__about img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; object-position: 50% 100%; border-radius: 1rem; background: var(--tint, #E9E4F8); }
.art2__side h2 { margin-top: 1rem; font: 700 1.35rem / 1.1 var(--serif); color: #14120F; }
.art2__about p { margin-top: .5rem; font-size: .9375rem; line-height: 1.5; color: #5F584D; }
.art2__about a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; font-size: .9375rem; font-weight: 500; color: #671813; text-underline-offset: .25em; }
.art2__about i, .art2__link i { font-style: normal; }
.art2__more h2 { margin: 0 0 .9rem; }
.art2__link { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: center; gap: .9rem; padding: .5rem; border-radius: .9rem; text-decoration: none; color: #14120F; transition: background-color .25s; }
.art2__link + .art2__link { margin-top: .4rem; }
.art2__link:hover { background: var(--tint); }
.art2__link img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: .6rem; }
.art2__link span { font: 700 1.1rem / 1.15 var(--serif); }
.art2__link small { display: block; margin-bottom: .3rem; font: 500 .6875rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #671813; }
.art2__link:focus-visible, .art2__about a:focus-visible, .art2__back a:focus-visible { outline: 2px solid #671813; outline-offset: 3px; border-radius: .6rem; }
@media (min-width: 56.01rem) { .art2__band h1 { max-width: min(15ch, 60%); } }
@media (max-width: 56rem) {
  .art2__grid { grid-template-columns: minmax(0, 1fr); }
  .art2__side { display: contents; }
  .art2__cover { order: -1; width: min(100%, 24rem); margin: clamp(-4rem, -8vw, -2rem) auto 0; }
  .art2__band { padding-bottom: clamp(4.5rem, 12vw, 6rem); }
  .art2__initial { left: -.06em; }
}
@media (prefers-reduced-motion: reduce) { .post__top img { transition: none; } }
/* The blog index needs its own top room under the fixed nav (a later .blog rule had flattened it). */
.blog.blogpage { padding-top: clamp(8rem, 14vw, 12rem); }
.post__top img { object-position: 50% 42%; }
.art2__cover img { aspect-ratio: 1; }

/* Blog index: the newest post leads as a wide card, the rest sit two across. */
.blog__grid--all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: 1fr auto; }
.post--lead .post__top { grid-row: 1 / -1; aspect-ratio: auto; min-height: 22rem; }
.post--lead .post__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 3vw, 2.75rem); }
.post--lead h3 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.02; }
.post--lead .post__body p:last-child { font-size: 1.0625rem; }
.post--lead .post__top img { object-position: 50% 30%; }
@media (max-width: 47.99rem) {
  .blog__grid--all { grid-template-columns: 1fr; }
  .post--lead { display: flex; }
  .post--lead .post__top { aspect-ratio: 16 / 10; min-height: 0; }
}
/* Long titles in the post header. */
.art2__band h1 { max-width: 18ch; font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
@media (min-width: 56.01rem) { .art2__band h1 { max-width: min(18ch, 62%); } }
/* Cover credit, numbered lists and the question-swap table inside a post. */
.art2__cover figcaption { margin-top: .9rem; font-size: .75rem; letter-spacing: .04em; color: #6B6358; text-align: right; }
.article__body ol { display: grid; gap: .7em; margin: 1.1em 0 0; padding: 0; list-style: none; counter-reset: q; }
.article__body ol li { position: relative; padding-left: 2.6em; counter-increment: q; }
.article__body ol li::before { content: counter(q); position: absolute; left: 0; top: .05em; display: grid; place-items: center; width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--tint, #E9E4F8); font: 700 .95em var(--serif); color: #671813; }
.article__body ol + p, .art2__swap + p { margin-top: 1.1em; }
.art2__swap { margin-top: 1.4em; border-radius: 1rem; overflow: hidden; box-shadow: 0 0 0 1px rgba(20, 20, 20, .08); }
.art2__swap table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.4; }
.art2__swap th { padding: .8rem 1.1rem; background: var(--tint, #E9E4F8); font: 500 .6875rem var(--sans); letter-spacing: .14em; text-transform: uppercase; text-align: left; color: #671813; }
.art2__swap td { width: 50%; padding: .85rem 1.1rem; border-top: 1px solid rgba(20, 20, 20, .08); vertical-align: top; }
.art2__swap td:first-child { color: #7A7266; text-decoration: line-through; text-decoration-color: rgba(103, 24, 19, .45); }
.art2__swap td:last-child { font-weight: 500; color: #14120F; }
@media (max-width: 30rem) { .art2__swap th, .art2__swap td { padding: .7rem .75rem; font-size: .9375rem; } .art2__swap th { font-size: .625rem; } }
@media (min-width: 48rem) {
  .post--lead .post__top { position: relative; min-height: 24rem; }
  .post--lead .post__top img { position: absolute; inset: 0; }
}

/* ---------- Blog post: figures, contents list, finer details ---------- */
html { scroll-padding-top: 7rem; }
.fig { margin: 2.2em 0 0; }
.fig > img { display: block; width: min(100%, 26rem); height: auto; margin-inline: auto; border-radius: 1.25rem; box-shadow: 0 0 0 1px rgba(20, 20, 20, .06), 0 1.6rem 2.2rem -1.8rem rgba(20, 20, 20, .4); }
.fig figcaption { margin-top: 1rem; font: italic 500 1.05rem / 1.35 var(--serif); color: #5F584D; text-align: center; text-wrap: balance; }
.fig--duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.fig--duo figcaption { grid-column: 1 / -1; margin-top: .3rem; }
.fig__card { padding: 1.2rem 1.3rem 1.3rem; border-radius: 1.1rem; background: #F8F8F6; box-shadow: 0 0 0 1px rgba(20, 20, 20, .07); }
.fig__card--b { background: var(--tint); box-shadow: 0 0 0 1px rgba(103, 24, 19, .16), 0 1.2rem 1.6rem -1.3rem rgba(103, 24, 19, .45); transform: rotate(1.2deg); }
.fig__card b { display: block; font: 700 1.45rem / 1.05 var(--serif); color: #14120F; }
.fig__card--b b { color: #671813; }
.article__body .fig__card ul { display: grid; gap: .45rem; margin: .8rem 0 0; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.35; }
.fig__card li { display: flex; gap: .55rem; align-items: baseline; }
.fig__card li::before { content: ""; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: #B9B3A8; transform: translateY(-.1em); }
.fig__card--b li::before { background: #671813; }
.article__body .fig--ladder ol { display: grid; gap: .7rem; margin: 0; padding: 0; counter-reset: none; }
.article__body .fig--ladder li { padding: 1rem 1.2rem; border-radius: 1rem; background: #F8F8F6; box-shadow: 0 0 0 1px rgba(20, 20, 20, .07); }
.article__body .fig--ladder li::before { content: none; }
.article__body .fig--ladder li:nth-child(2) { margin-left: 7%; background: color-mix(in srgb, var(--tint) 55%, #fff); }
.article__body .fig--ladder li:nth-child(3) { margin-left: 14%; background: var(--tint); box-shadow: 0 0 0 1px rgba(103, 24, 19, .16), 0 1.2rem 1.6rem -1.3rem rgba(103, 24, 19, .45); }
.fig--ladder small { display: block; font: 500 .6875rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #671813; }
.fig--ladder b { display: block; margin-top: .25rem; font: 700 1.3rem / 1.1 var(--serif); color: #14120F; }
.fig--ladder span { display: block; margin-top: .2rem; font-size: .9375rem; color: #5F584D; }
.fig + h2, .art2__quote + h2 { margin-top: 1.8em; }
/* Contents: follows you down the page on wide screens. */
.art2__toc { display: none; }
@media (min-width: 56.01rem) {
  .art2__side { align-self: stretch; align-content: start; }
  .art2__toc { display: block; position: sticky; top: 7.5rem; padding: 1.2rem 1.3rem 1.3rem; border-radius: 1rem; background: #F8F8F6; box-shadow: 0 0 0 1px rgba(20, 20, 20, .07); }
  .art2__toc h2 { margin: 0; font: 500 .6875rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #671813; }
  .art2__toc ol { display: grid; gap: .1rem; margin: .7rem 0 0; padding: 0; list-style: none; counter-reset: t; }
  .art2__toc a { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); padding: .4rem 0; font: 600 1.02rem / 1.2 var(--serif); color: #4A443B; text-decoration: none; counter-increment: t; transition: color .2s; }
  .art2__toc a::before { content: counter(t, decimal-leading-zero); font: 500 .6875rem / 1.9 var(--sans); letter-spacing: .06em; color: #9A9388; }
  .art2__toc a:hover, .art2__toc a[aria-current="true"] { color: #671813; }
  .art2__toc a[aria-current="true"]::before { color: #671813; }
}
@media (max-width: 30rem) { .fig--duo { grid-template-columns: 1fr; } .fig__card--b { transform: none; } }

/* House rules: a faint graph-paper backdrop that dissolves into the white page on every side. */
.rules::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: #F8F8F7;
  background-image: linear-gradient(rgba(20, 20, 20, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 20, 20, .055) 1px, transparent 1px);
  background-size: 2.75rem 2.75rem; background-position: 50% 0;
  -webkit-mask-image: linear-gradient(transparent 0, #000 9rem, #000 calc(100% - 9rem), transparent 100%), linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(transparent 0, #000 9rem, #000 calc(100% - 9rem), transparent 100%), linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.rules { background: #fff; }
.rules__body { background: #fff; }
.rules__tabs button { background: #F1F0EC; }
.rules__tabs button[aria-selected="true"] { background: #fff; }