/* Atelier — shared system for every page: tokens, grid, header, footer, homepage index, contact, motion. */

:root {
  --bg: #efede7;
  --ink: #171613;
  --soft: #5e5d58;       /* labels, numbers, meta */
  --text2: #3f3e3a;      /* reading text */
  --fill: #94502f;       /* the accent, as a fill only: the contact band, link lines (burnt sienna, same in dark mode) */
  --on-fill: #efede7;    /* text on the accent */
  --fill-text: var(--fill);   /* the accent as text: the hero's bold words (5.2:1 on paper) */
  --fill-tint: #e0d4ca;  /* row hover: a much lighter tint of the accent (16% on paper) */
  --panel: #e6e3db;      /* behind phone screens, and the row hover */
  --tint: var(--panel);
  --rule: rgba(23, 22, 19, 0.2);
  --rule-soft: rgba(23, 22, 19, 0.12);
  /* Hanken Grotesk is loaded for the hyphen only (Host Grotesk's is as long as an en dash) */
  --sans: "Hanken Grotesk", "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --m: clamp(16px, 2.6vw, 40px);           /* gap between columns */
  /* page margin, left and right: the live site's (20–100px, content capped at 1800px wide) */
  --side: max(clamp(1.25rem, 6vw, 100px), calc((100vw - 1800px) / 2 + 100px));
  --hair: rgba(23, 22, 19, 0.05);          /* the vertical grid lines */
  --cols: 12;
  --sect: clamp(6rem, 10vw, 10rem);
  --snap: cubic-bezier(.77, 0, .175, 1);   /* lines drawing */
  --out: cubic-bezier(.16, 1, .3, 1);      /* things arriving */
  /* Type scale: display, page and contact 58, numbers 48, pullquote 34, title 29, lead 22, body 17–18, small 14 */
  --t-display: var(--t-contact);           /* the hero headline is the same size as "Let’s Connect" */
  --t-contact: clamp(2.25rem, 4vw, 4rem);  /* same step as page titles */
  --t-page: clamp(2.25rem, 4vw, 4rem);
  --t-title: clamp(1.375rem, 2vw, 1.875rem);
  --t-lead: clamp(1.25rem, 1.55vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-small: .875rem;
  /* Names the shared case-study layout (case-study.css) expects */
  --font-display: var(--sans);
  --ink-soft: var(--text2);
  --accent: var(--ink);
  --line: var(--rule);
  --surface: var(--bg);
  --radius: 0px;
  --ease: var(--out);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141311; --ink: #ece9e2; --soft: #9a978f; --text2: #b5b2aa;
    --panel: #23211d;
    --fill-tint: #41281c;
    --fill-text: #c46d47;   /* dark mode: a lighter sienna so the hero's bold words stay readable */   /* dark mode: the accent mixed into the dark page */
    --rule: rgba(236, 233, 226, 0.18); --rule-soft: rgba(236, 233, 226, 0.1); --hair: rgba(236, 233, 226, 0.07);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 65px; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--t-body); line-height: 1.5rem; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3 { font-weight: 500; }
p { text-wrap: pretty; }
img, video { max-width: 100%; }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.small { font-size: var(--t-small); line-height: 1.25rem; letter-spacing: .015em; }
.icon { display: inline-block; fill: none; stroke: currentColor; stroke-linecap: butt; stroke-linejoin: miter; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip { position: fixed; left: 16px; top: -100px; z-index: 60; background: var(--ink); color: var(--bg); padding: 10px 14px; }
.skip:focus { top: 16px; }

.g { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: var(--m); padding: 0 var(--side); }
.wrap { position: relative; z-index: 1; padding: 0 var(--side); }

/* Vertical grid lines: a hairline at the start of every column and at the right edge, drawn in on arrival */
.gridlines { position: fixed; inset: 0 var(--side); pointer-events: none; z-index: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: var(--m); }
.gridlines i { border-left: 1px solid var(--hair); transform-origin: top; }
.gridlines i:nth-child(12) { border-right: 1px solid var(--hair); }

/* Navigation bar copied from the live site: fixed, 65px (20px above and below), frosted, a faint line under it, same margins.
   The lettering stays Atelier's: the name in medium, the links in regular, both ink at body size. No footer. */
body { padding-top: 65px; }
header.g { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: 20px; padding-bottom: 20px; align-items: center;
  background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule-soft); }
header .h-name { grid-column: 1 / 7; justify-self: start; font-size: .875rem; line-height: 1.5rem; text-transform: uppercase; letter-spacing: .14em; }   /* 14px capitals, the same as the line above the headline */
header nav { grid-column: 7 / 13; justify-self: end; }
header nav ul { display: flex; gap: 32px; }
header nav a { position: relative; display: inline-block; }
/* Bigger tap areas (44px tall) without moving anything: an invisible layer around the name and the links */
header .h-name { position: relative; }
header .h-name::before, header nav a::before { content: ""; position: absolute; inset: -10px -8px; }
header nav a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: currentColor; transition: width .25s var(--out); }
header nav a:hover::after, header nav a[aria-current="page"]::after { width: 100%; }

/* Eyebrow: the line above each page title, in capitals (tracked a little, as capitals need), on the margin */
.eyebrow { color: var(--soft); text-transform: uppercase; text-wrap: balance; }
.eyebrow.small { font-size: .875rem; line-height: 1.25rem; letter-spacing: .14em; }   /* 14px capitals, the same as the name in the nav */

/* Display headings, split into masked lines by atelier.js; a weight change starts a new line unless .one-line */
.display { line-height: 1.1; letter-spacing: -0.03em; word-spacing: -0.04em; margin-left: -0.05em; }
.display em, .display .lt { font-style: normal; font-weight: 300; }
.display em { display: block; }
.display.one-line em { display: inline; }   /* "Let's Connect": the light word stays on the same line */
.line { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.line > span { display: block; }
.split > span:not(.line), .line > span > span { white-space: nowrap; }   /* a word never breaks inside itself (add-ons) */

/* ---------- Homepage ---------- */
.hero { padding-top: clamp(3.5rem, 6vw, 5.5rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.hero .eyebrow { grid-column: 1 / -1; margin-bottom: 30px; }
.hero h1 { grid-column: 1 / -1; font-size: var(--t-display); color: var(--fill-text); }   /* bold words in the accent */
.hero h1 :is(em, .lt) { color: var(--ink); }   /* light words stay ink */

/* Index: an ink rule opens it. Hover: the row takes a slightly deeper paper and its rule darkens. */
.index-head { padding-top: 8px; padding-bottom: 28px; align-items: baseline; }   /* the heading, room under it, then the line that starts the list */
.index-head::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); transform-origin: left; }
.index-head h2 { grid-column: 2 / 10; font-size: var(--t-lead);   /* on the project titles' line, not the numbers' */ line-height: 1.75rem; letter-spacing: -0.015em; font-weight: 500; color: var(--ink); }
.c-no { grid-column: 1 / 2; font-variant-numeric: tabular-nums; }
.index-head > span { color: var(--soft); }   /* column titles: No. / Focus / Year */
@media (min-width: 761px) {   /* desktop: numbers the size of the line above the headline, on the title baseline; phones keep the small numbers */
  .item .c-no { font-size: .875rem; line-height: 1.25rem; letter-spacing: .14em; }
}
.c-proj { grid-column: 2 / 10; }
.c-focus { grid-column: 10 / 12; }
.c-year { grid-column: 12 / 13; text-align: right; font-variant-numeric: tabular-nums; }
.c-meta { display: contents; }
.item { padding-top: 36px; padding-bottom: 32px; align-items: baseline; }
.item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill-tint); opacity: 0; transition: opacity .3s var(--out); }   /* hover: a light tint of the accent; text stays as it is */
.item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); transform-origin: left; transition: background-color .3s var(--out); }
.item .c-no, .item .c-meta > * { color: var(--soft); }
.item .c-proj { display: grid; grid-template-columns: subgrid; }
.item h3 { grid-column: 1 / -1; font-size: var(--t-title); line-height: 1.25; letter-spacing: -0.025em; margin-left: -.04em; text-wrap: balance; }
.item p { grid-column: 1 / -1; max-width: 52em; margin-top: 16px; line-height: 1.75rem; color: var(--text2); }
.item p, .item .c-no, .item .c-meta > *, .item .c-soon { transition: opacity .35s linear .35s, color .25s linear; }   /* after the title has risen */
.item h3 { transition: color .25s linear; }
.item .c-soon { grid-column: 10 / 13; display: flex; align-items: center; gap: 8px; color: var(--soft); }
.item .c-soon::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; transform: translateY(1px); }   /* no accent colour */
a.item:focus-visible::before { opacity: 1; }
a.item:focus-visible { outline-offset: -2px; outline-color: var(--ink); }
@media (hover: hover) {
  a.item:hover::before { opacity: 1; transition-duration: .2s; }
}

/* Contact: an accent-coloured band that ends the page, paper-coloured text. Same space above and below
   (the last link row has 20px of its own padding). The band runs to the bottom of the window, however tall. */
.contact { padding-top: clamp(4.5rem, 7vw, 7rem); padding-bottom: calc(clamp(4.5rem, 7vw, 7rem) - 20px); align-items: last baseline;
  background: var(--fill); color: var(--on-fill); box-shadow: 0 0 0 100vmax var(--fill); clip-path: inset(0 -100vmax -100vmax -100vmax); }
.contact .links li:not(:last-child) a::after { background: rgba(239, 237, 231, 0.18); }
.contact .links li a .hl { background: var(--on-fill); }
.contact :focus-visible { outline-color: var(--on-fill); }
.contact h2 { grid-column: 1 / 7; font-size: var(--t-contact); }
.links { position: relative; }
.contact .links { grid-column: 7 / 13; }
.links li a { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-size: var(--t-lead); line-height: 2rem; letter-spacing: -0.015em; }
.links li a .hl { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--fill); transform: scaleX(0); transform-origin: right; transition: transform .25s var(--snap); z-index: 1; }
.links li:not(:last-child) a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-soft); }
.links li a .icon { width: .72em; height: .72em; stroke-width: 1.2; }
.links li a:hover .hl, .links li a:focus-visible .hl { transform: none; transform-origin: left; transition-duration: .5s; }

/* Living grid: a canvas draws the column lines (they bend around the cursor), so the plain ones step aside */
.grid-live .gridlines i { border-color: transparent !important; }
.grid-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

/* Lines in the dark band: faint column lines that light up near the cursor */
.band-canvas { position: absolute; left: 0; top: 0; pointer-events: none; z-index: -1; }

/* Page change: the columns close over the page like blinds, and open on the next one */
.blinds { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.blinds i { position: absolute; top: 0; bottom: 0; background: var(--fill); transform: scaleY(0); transform-origin: top;
  transition: transform .32s var(--snap); }   /* close: 12 panels, 15ms apart, all shut by ~.49s */
.blinds.shut i { transform: scaleY(1); }
.blinds.opening i { transform-origin: bottom; transition-duration: .5s; transition-timing-function: var(--out); }   /* open: eases out */

/* Headline: after the intro, the light words may leave their line masks while being pushed */
.free .line { overflow: visible; }
.free .lt { display: inline-block; will-change: transform; }

/* Access footnote under the list: an asterisk, no underline, no background, more room before the band */
.access { padding-top: 24px; padding-bottom: clamp(3.5rem, 6vw, 6rem); }
.access a { grid-column: 2 / 10; justify-self: start; color: var(--soft); transition: color .25s; }
.access a:hover { color: var(--ink); }
.access a { position: relative; }
.access a::before { content: ""; position: absolute; inset: -12px -6px; }   /* 44px tap area, no visible change */
.access .ast { display: inline-block; width: 0; transform: translateX(-.7em); }   /* hung asterisk: "Case" sits on the titles' edge */
@media (max-width: 900px) { .access a { grid-column: 1 / -1; } }

/* ---------- Motion: lines draw, lines rise, nothing drifts ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .intro { opacity: 0; transition: opacity .5s linear .1s; }
  .js .split .line > span { transform: translateY(105%); transition: transform .9s var(--out); }
  .js .intro-late { opacity: 0; transition: opacity .5s linear .6s; }
  .ready .intro, .ready .intro-late { opacity: 1; }
  .ready .split:not(.wait) .line > span, .ready .split.wait.in .line > span { transform: none; }
  /* List headings and project titles rise with their row, like "Let’s Connect"; the rest of the row fades in after */
  .js :is(.index-head, .item):not(.in) .split .line > span { transform: translateY(105%); }
  /* Case studies and Writings: each section heading rises as it comes into view, then its text fades in */
  .js .cs-block > :not(h2, figure, .reveal) { transition: opacity .5s linear .35s; }
  .js .cs-block:has(> h2.split:not(.in)) > :not(h2, figure, .reveal) { opacity: 0; }

  .js .index-head::before, .js .item::after { transform: scaleX(0); transition: transform .7s var(--snap), background-color .3s var(--out); }
  .js .index-head > * { opacity: 0; transition: opacity .35s linear .12s; }
  .js .index-head.in::before, .js .item.in::after { transform: none; }
  .js .index-head.in > * { opacity: 1; }
  .js .item:not(.in) :is(p, .c-no, .c-meta > *, .c-soon) { opacity: 0; }

  .js .links li a > :not(.hl) { opacity: 0; transition: opacity .4s linear .35s; }
  .js .in .links li a > :not(.hl), .js .links.in li a > :not(.hl) { opacity: 1; }

  .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .4s linear, transform .6s var(--out); }
  .js .reveal.in { opacity: 1; transform: none; }

  .js .gridlines i { transform: scaleY(0); transition: transform .6s var(--snap); }
  .ready .gridlines i { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}
@media print { .js * { opacity: 1 !important; transform: none !important; } .skip, .motion-toggle, .gridlines, .grid-canvas, .band-canvas { display: none; } }

@media (max-width: 760px) {
  /* Phone type scale: 30 titles (hero, page titles, Let's Connect: one size, as on desktop) / 22 headings and project
     titles / 18 intros, subheadings, list headings, contact links / 16 body and screen titles / 14 labels */
  :root { --cols: 4; --t-contact: 1.875rem; --t-page: 1.875rem; --t-title: 1.375rem; --t-lead: 1.125rem; --t-body: 1rem; }
  .display { line-height: 1.08; }
  /* Phones get more air: between the hero and the list, around each project, and inside it */
  .hero { padding-top: 4rem; padding-bottom: 4rem; }
  .hero .eyebrow { margin-bottom: 24px; }
  .index-head { padding-bottom: 24px; }
  header .h-name { grid-column: 1 / 3; }
  header nav { grid-column: 3 / 5; }
  .gridlines i:nth-child(n+5) { display: none; }
  .gridlines i:nth-child(4) { border-right: 1px solid var(--hair); }
  .item { padding-top: 32px; padding-bottom: 40px; }
  .item .c-no { grid-column: 1 / 2; grid-row: 1; }
  .item .c-meta { display: flex; justify-content: flex-end; gap: .35em; grid-column: 2 / 5; grid-row: 1; text-align: right; }
  .item .c-year::before { content: "· "; }
  .item .c-soon { grid-column: 2 / 5; grid-row: 1; justify-content: flex-end; }
  .item .c-proj { grid-column: 1 / -1; grid-row: 2; margin-top: 20px; }
  .item p { margin-top: 12px; line-height: 1.625rem; }
  .item p { grid-column: 1 / -1; }
  .contact h2, .contact .links { grid-column: 1 / -1; }
  .contact { padding-top: 4.5rem; padding-bottom: calc(4.5rem - 20px); }
  .contact .links { margin-top: 32px; }
  .index-head h2 { grid-column: 1 / -1; }   /* phones: the titles start at the edge too */
  .index-head > span { display: none; }   /* phones: each row shows its own focus and year */
}