/* Studio world — the palette of content.json (named after the studio); Bricolage Grotesque for display, Onest for text
   (both OFL, self-hosted in core/fonts). Daylight in a paper studio; the close is golden hour, still light. Corners are
   cut square like paper, never pills. */
:root {
  --paper: #f4f5f7; --graphite: #141414; --ultramarine: #2a3cc7; --vermilion: #e5482b; --blush: #f1d3c9; --sky: #cfdde4;
  --ink: var(--graphite); --ink-2: #33322e; --hair: 20, 20, 20;
  --text: 'Onest', ui-sans-serif, sans-serif;
  --face: 'Bricolage Grotesque', ui-sans-serif, sans-serif;
  --display: clamp(46px, 8.4vw, 136px);
  --gutter: clamp(16px, 2.2vw, 32px);
  --reveal-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --reveal-dur: 0.86s;
}
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: var(--text); font-weight: 400; -webkit-font-smoothing: antialiased; background: transparent; }
#world { position: fixed; inset: 0; width: 100vw; height: 100svh; z-index: 0; display: block; pointer-events: none; }
main { position: relative; z-index: 2; pointer-events: none; }
main a, main button, main input, main label { pointer-events: auto; }

/* the loader: a square sheet whose corner folds over while the studio is built */
.loader { position: fixed; inset: 0; z-index: 30; background: var(--paper); display: flex; align-items: center; justify-content: center; gap: 18px; transition: opacity 0.9s var(--reveal-ease), visibility 0s linear 0.9s; }
.loader__name { font-family: var(--face); font-weight: 700; font-size: clamp(38px, 5.6vw, 80px); letter-spacing: -0.04em; line-height: 1; color: var(--graphite); }
.loader__sheet { position: relative; width: 44px; height: 44px; background: var(--graphite); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); perspective: 120px; }
.loader__sheet i { position: absolute; inset: 0; background: var(--ultramarine); clip-path: polygon(0 0, 100% 0, 0 100%); transform-origin: 50% 50%; transform: rotate3d(1, -1, 0, calc(var(--load, 0) * 180deg)); transition: transform 0.4s var(--reveal-ease); }
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; }

/* a section: tall for scroll, its words held on screen while the paper answers behind them */
.ch { position: relative; }
.ch__hold { position: sticky; top: 0; height: 100svh; display: grid; padding: calc(var(--gutter) * 3.4) var(--gutter) max(calc(var(--gutter) * 1.6), var(--edge-badge-room)); box-sizing: border-box; }
.pos-l .ch__hold { align-content: center; justify-items: start; }
.pos-r .ch__hold { align-content: center; justify-items: end; }
.pos-bl .ch__hold { align-content: end; justify-items: start; }
.pos-tl .ch__hold { align-content: start; justify-items: start; }
.pos-tr .ch__hold { align-content: start; justify-items: end; }
.ch--close .ch__hold { align-content: end; }
.ch--close .ch__inner { width: 100%; }
.pos-tr .ch__inner { width: min(560px, 100%); }
.pos-r .ch__inner { width: min(440px, 100%); }
/* how we work sits low on the desk, under the sheet's far corner, where the table is in its own shade */
@media (min-width: 721px) { [data-id='approach'] .ch__hold { align-content: end; } }
/* the six as one narrow column on a desk: the first card on the table stands beside their words, never behind them */
@media (min-width: 721px) {
  [data-id='people'] .ch__hold { padding-bottom: 6svh; }
  .list--people { grid-template-columns: 1fr; }
  [data-id='people'] .body { max-width: 17ch; }
  .list--people .item { padding-top: 7px; padding-bottom: 7px; }
  [data-id='people'] .list--people li:nth-child(2) > .item { border-top: 1px solid rgba(var(--hair), 0.12); }
}
.pos-l .ch__inner { width: min(480px, 100%); }
.pos-tl .ch__inner { width: min(620px, 100%); }

.big { font-family: var(--face); font-size: var(--display); font-weight: 700; line-height: 0.9; letter-spacing: -0.045em; margin: 0; max-width: 10ch; }
.head { font-family: var(--face); font-size: clamp(36px, 4.4vw, 68px); font-weight: 700; line-height: 0.95; letter-spacing: -0.04em; margin: 0; }
.mid { font-family: var(--face); font-size: clamp(23px, 2.3vw, 34px); font-weight: 500; line-height: 1.16; letter-spacing: -0.02em; margin: 0; }
.body { font-size: 17px; line-height: 1.5; margin: 12px 0 0; max-width: 34ch; color: var(--ink-2); }
/* the eyebrow: a folded ultramarine corner and a line of full ink, no tag behind it (22/10) */
.small { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; margin: 0 0 16px; color: var(--graphite); }
.small::before { content: ''; width: 9px; height: 9px; background: var(--ultramarine); clip-path: polygon(0 0, 100% 0, 0 100%); }

/* no plate, no wash, no glass and no shadow behind the words (22–23/10): the camera leaves them the white sweep */
.phone-gap { display: none; }
@media (min-width: 721px) {
  .block-top { margin-bottom: 18px; }
}

/* lists: the projects, the steps, the people; the one in hand marked by a folded ultramarine corner */
.list { list-style: none; margin: 0; padding: 0; display: grid; }
.item { appearance: none; display: grid; gap: 3px; box-sizing: border-box; width: 100%; background: none; border: 0; padding: 10px 0 10px 26px; margin: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; position: relative; border-top: 1px solid rgba(var(--hair), 0.12); transition: color 0.35s var(--reveal-ease); }
li:first-child > .item { border-top: 0; }
.item__name { font-family: var(--face); font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.1; letter-spacing: -0.025em; }
.item__detail { font-size: 14px; line-height: 1.35; }
.item::before { content: ''; position: absolute; left: 0; top: 15px; width: 12px; height: 12px; background: var(--ultramarine); clip-path: polygon(0 0, 100% 0, 0 100%); transform: scale(0); transform-origin: 0 0; transition: transform 0.45s var(--reveal-ease); }
.item.is-on::before { transform: scale(1); }
.item:focus-visible { outline: 2px solid var(--ultramarine); outline-offset: 2px; }
div.item { cursor: default; }
/* an open project: what was asked, what we made, what changed, under its name */
.case { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; margin: 0 0 12px 26px; max-width: 30em; font-size: 14px; line-height: 1.4; }
.case[hidden] { display: none; }
.case dt { font-weight: 600; }
.case dd { margin: 0; }
.list--people { grid-template-columns: 1fr 1fr; column-gap: 18px; }
.list--people li:nth-child(2) > .item { border-top: 0; }
.hint { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.hint svg { width: 18px; height: 18px; }

/* contact: what are you making, as paper chips that can be picked together */
.ask { font-size: 13px; font-weight: 600; margin: 18px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { appearance: none; font: inherit; font-size: 15px; padding: 9px 14px; border-radius: 3px; border: 1px solid rgba(var(--hair), 0.24); background: rgba(255, 255, 255, 0.55); color: var(--ink); cursor: pointer; transition: background-color 0.3s, border-color 0.3s, color 0.3s; }
.chip:hover { border-color: rgba(var(--hair), 0.55); }
.chip[aria-pressed='true'] { background: var(--ultramarine); border-color: var(--ultramarine); color: var(--paper); }
.chip:focus-visible, .cta:focus-visible { outline: 2px solid var(--ultramarine); outline-offset: 2px; }
.contact__go { margin-top: 18px; }
.contact__note { margin: 12px 0 0; font-size: 14px; line-height: 1.45; min-height: 1.45em; }

/* the close: golden hour on the paper, the line and the two ways in */
.close__statement { font-family: var(--face); font-weight: 700; font-size: clamp(46px, 8vw, 132px); line-height: 0.9; letter-spacing: -0.045em; margin: 0; max-width: 12ch; }
.close__row { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-top: 28px; font-size: 15px; }
.close__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.cta { display: inline-flex; align-items: center; height: 50px; padding: 0 22px; border-radius: 3px; font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--ink); border: 1px solid rgba(var(--hair), 0.45); background: rgba(244, 245, 247, 0.6); cursor: pointer; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.cta:hover { border-color: currentColor; }
.cta--primary { background: var(--ultramarine); border-color: var(--ultramarine); color: var(--paper); }
.cta--primary:hover { background: var(--graphite); border-color: var(--graphite); }

/* the edges (core/edges.css): a paper bar with square corners, ultramarine for the one call; the sheet is ultramarine,
   the footer paper with the name in ultramarine, solid, inside the margins. The readout is the places left this spring. */
:root {
  --edge-accent: var(--ultramarine); --edge-accent-ink: var(--paper); --edge-face: var(--face); --edge-text: var(--text);
  --edge-backdrop: rgba(244, 245, 247, 0.88); --edge-line: rgba(20, 20, 20, 0.14);
  --edge-sheet-bg: var(--ultramarine); --edge-sheet-ink: var(--paper); --edge-foot-bg: var(--paper); --edge-foot-ink: var(--graphite);
  --ef-leaf: #ffffff; --ef-envelope: var(--vermilion); /* a white sheet folded on the paper table, the brief in a vermilion envelope */
  --edge-radius: 3px;
}
/* the header is paper on the edge of the screen, never a bar (23/10: «todas as gerações têm o mesmo header — serif à
   esquerda, links à direita, CTA pequeno»): the name on a bookmark hanging from the top, the parts of the page as index
   tabs cut from the same sheet, the one being read pulled further down, and the call to action as the screen's corner
   folded over, ultramarine on its back, with the places left this spring written on the fold. One shadow under all
   the paper. While the visitor scrolls back up the bookmark rolls up to the mark and the corner folds smaller. */
:root { --tab: #f6f7f9; --tab-ink: var(--graphite); --tab-shade: rgba(20, 20, 20, 0.3); --dog: 228px; }
:root[data-theme='dark'] { --tab: #26282d; --tab-ink: var(--paper); --tab-shade: rgba(0, 0, 0, 0.55); }
.edge-head, .edge-head[data-state='pinned'] { display: flex; align-items: flex-start; gap: 4px; padding: 0 var(--gutter); color: var(--tab-ink); background: none; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  pointer-events: none; filter: drop-shadow(0 6px 9px var(--tab-shade)) drop-shadow(0 1px 1px var(--tab-shade)); }
.edge-head > * { pointer-events: auto; }
.edge-head[data-state='hidden'] { transform: translate3d(0, -260px, 0); }
.edge-progress { top: 0; bottom: auto; height: 3px; pointer-events: none; } /* the top edge of the screen fills as the page goes */
.edge-brand { position: relative; flex: none; margin-right: 18px; width: 50px; height: var(--len, 212px); box-sizing: border-box; padding: 18px 0 0; flex-direction: column; justify-content: flex-start; gap: 14px;
  overflow: hidden; background: var(--tab); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 16px), 0 100%); }
.edge-brand svg { height: 20px; flex: none; }
.edge-brand__word { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; font-size: 21px; letter-spacing: -0.03em; white-space: nowrap; }
.edge-brand__word { transition: opacity 0.3s; }
.edge-head[data-state='pinned'] .edge-brand__word { opacity: 0; }
.edge-nav { justify-content: flex-start; align-items: flex-start; gap: 4px; }
.edge-nav__link { display: block; padding: calc(22px + var(--pull, 0px)) 17px 13px; opacity: 1; background: var(--tab); border-radius: 0 0 3px 3px; font-weight: 600;
  transition: background-color 0.3s, color 0.3s; }
.edge-nav__link.is-on { background: var(--ultramarine); color: var(--paper); }
.edge-nav__bar { display: none; }
.edge-nav__detail { padding: 7px 10px; background: var(--tab); color: var(--tab-ink); border-radius: 3px; font-weight: 500; }
.edge-nav__link:hover .edge-nav__detail, .edge-nav__link:focus-visible .edge-nav__detail { opacity: 1; }
.edge-head > .edge-theme, .edge-head > .edge-menu { flex: none; height: calc(48px + var(--pull, 0px)); border: 0; border-radius: 0 0 3px 3px; background: var(--tab); }
.edge-head > .edge-theme { margin-left: 14px; width: 48px; }
.edge-head > .edge-menu { padding: 0 6px 0 16px; }
.edge-head > .edge-cta { position: absolute; top: 0; right: 0; width: var(--dog); height: var(--dog); box-sizing: border-box; padding: 0 0 20px 20px; display: flex; align-items: flex-end; justify-content: flex-start;
  border-radius: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--paper);
  background: linear-gradient(225deg, #4a57de 50%, var(--ultramarine) 64%, #1d2797 100%); clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: width 0.55s var(--edge-ease), height 0.55s var(--edge-ease), filter 0.3s; }
.edge-head > .edge-cta, .edge-head > .edge-live { opacity: 0; }
.edge-head > .edge-cta { pointer-events: none; }
.edge-head > .edge-live { position: absolute; z-index: 1; top: calc(var(--dog) - 104px); left: calc(100% - var(--dog) + 20px); grid-template-columns: auto; grid-template-rows: auto auto 3px; row-gap: 6px; padding: 0; border: 0; pointer-events: none;
  color: var(--paper); transition: opacity 0.3s; }
.edge-head > .edge-live .edge-live__k { opacity: 0.82; }
.edge-head > .edge-live .edge-live__v { text-align: left; }
.edge-head > .edge-live .edge-live__meter { width: 96px; background: rgba(244, 245, 247, 0.28); }
.edge-head > .edge-live .edge-live__meter i { background: #ffffff; }
.edge-head[data-state='pinned'] { --dog: 132px; }
.edge-head[data-state='pinned'] > .edge-live { opacity: 0; }
.edge-head[data-state='pinned'] > .edge-cta { padding-right: 52px; white-space: normal; font-size: 15px; line-height: 1.15; }
body.edge-open .edge-head { color: var(--tab-ink); filter: none; }
body.edge-open .edge-nav__link.is-on { background: var(--paper); color: var(--ultramarine); }
body.edge-open .edge-head > .edge-cta, body.edge-open .edge-head > .edge-live { opacity: 0; pointer-events: none; }
.edge-brand, .edge-theme, .edge-nav__link, .edge-menu { touch-action: none; -webkit-user-select: none; user-select: none; }
/* the folded corner, alive (paper.js): the sheet under the corner with the brief printed on it, the fold and its
   shadows drawn over everything, and two areas the hand takes hold of (the sheet under, the flap) */
:root { --peel-under: #fafbfc; --peel-ink: var(--ultramarine); --peel-back: #2a3cc7; --peel-back-lit: #3442cf; --peel-crease: #5563e2; --peel-sheen: #8d97f3; --peel-back-far: #1b2590; --peel-edge: #10175e;
  --peel-shade: rgba(20, 20, 20, 0.32); --peel-cast: rgba(20, 20, 20, 0.45); }
:root[data-theme='dark'] { --peel-under: #202227; --peel-ink: var(--paper); --peel-shade: rgba(0, 0, 0, 0.6); --peel-cast: rgba(0, 0, 0, 0.75); }
.edge-peel__under { position: fixed; inset: 0; z-index: 21; pointer-events: none; background: var(--peel-under); clip-path: polygon(0 0, 0 0, 0 0); }
.edge-peel__print { position: absolute; top: clamp(150px, 21vh, 210px); right: clamp(96px, 9vw, 150px); max-width: 30rem; text-align: right; color: var(--peel-ink); }
.edge-peel__print p, .edge-peel__list { margin: 0; }
.edge-peel__k { font-size: 13px; font-weight: 600; }
.edge-peel__t { margin-top: 10px !important; font-family: var(--face); font-weight: 700; font-size: clamp(40px, 5vw, 76px); line-height: 0.95; letter-spacing: -0.035em; }
.edge-peel__list { list-style: none; padding: 0; font-family: var(--face); font-weight: 700; font-size: 30px; line-height: 1.15; letter-spacing: -0.03em; }
.edge-peel__h { margin-top: 14px !important; font-size: 15px; color: var(--tab-ink); }
.edge-peel__under.is-ready .edge-peel__h { color: var(--peel-ink); font-weight: 700; }
.edge-peel { position: fixed; inset: 0; width: 100vw; height: 100svh; z-index: 22; pointer-events: none; overflow: visible; font-family: var(--text); }
.edge-peel__cast { fill: var(--peel-cast); }
.edge-peel__flap { transition: filter 0.3s; }
.edge-peel.is-ready .edge-peel__flap { filter: brightness(1.12); }
.edge-peel__label { color: var(--paper); } .edge-peel__label text { fill: currentColor; } /* ink as colour, so the label reads as text */
.edge-peel__lk { font-size: 12px; opacity: 0.82; }
.edge-peel__lv { font-size: 12px; font-weight: 600; }
.edge-peel__cta { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.edge-peel__cta--s { font-size: 15px; }
.edge-peel__meter { fill: rgba(244, 245, 247, 0.28); } .edge-peel__meter-on { fill: #ffffff; } .edge-peel__bar { fill: var(--paper); }
.edge-peel__ring { fill: none; }
.edge-peel.is-focus .edge-peel__ring { stroke: var(--paper); stroke-width: 2; }
.edge-peel__hit { position: fixed; inset: 0; z-index: 23; clip-path: polygon(0 0, 0 0, 0 0); touch-action: none; }
body.edge-open .edge-peel__hit { pointer-events: none; } /* the open sheet answers to its own corner */
/* on a phone the folded corner is the menu: lift it and the sheet comes; the name stays on its bookmark */
@media (max-width: 720px) {
  :root { --dog: 128px; }
  .edge-head[data-state='pinned'] { --dog: 104px; }
  .edge-brand { width: 42px; height: var(--len, 164px); padding-top: 14px; gap: 12px; margin-right: 8px; }
  .edge-brand__word { font-size: 18px; }
  .edge-head > .edge-live, .edge-head > .edge-cta { display: none; } /* the call to action waits in the sheet, as the kit has it on a phone */
  .edge-head > .edge-theme { margin-left: 0; width: 44px; height: calc(44px + var(--pull, 0px)); }
  .edge-head > .edge-menu { position: absolute; top: 0; right: 0; width: var(--dog); height: var(--dog); box-sizing: border-box; padding: 0 0 12px 14px; flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start; gap: 0;
    border-radius: 0; color: var(--paper); background: linear-gradient(225deg, transparent 50%, #4a57de 50%, var(--ultramarine) 64%, #1d2797 100%); transition: width 0.55s var(--edge-ease), height 0.55s var(--edge-ease); }
  .edge-head .edge-menu__word { display: block; font-weight: 700; font-size: 15px; }
  .edge-head > .edge-menu .edge-menu__icon { margin-left: -9px; }
  /* the flap is painted, not clipped, so the whole corner square takes the tap (a clip would let the tip fall through to the sheet) */
  body.edge-open .edge-head > .edge-menu { background: linear-gradient(225deg, transparent 50%, var(--paper) 50%); color: var(--ultramarine); }
  .edge-head > .edge-menu[aria-expanded='false'] { opacity: 0; } /* closed, the corner is drawn by paper.js */
  .edge-peel__print { top: 132px; right: 40px; }
}
.edge-sheet__detail { opacity: 0.88; }
.edge-sheet .edge-cta { background: var(--paper); color: var(--ultramarine); }
.edge-sheet__link.is-on .edge-sheet__label { color: #ffffff; text-decoration: underline; text-underline-offset: 5px; }
.edge-sheet .edge-live__meter i { background: #ffffff; }
.edge-foot__mark { color: var(--ultramarine); font-weight: 800; letter-spacing: -0.05em; }
.edge-foot__text, .edge-tile__detail, .edge-foot__title, .edge-foot__legal, .edge-form__row label { opacity: 0.86; }

/* the footer: the dieline. Creases are lines drawn on the sheet, never a border round a panel */
.ef-die__panels::before, .ef-die__panel::before { --valley: repeating-linear-gradient(var(--dir, 180deg), currentColor 0 9px, transparent 9px 15px); --mountain: repeating-linear-gradient(var(--dir, 180deg), currentColor 0 12px, transparent 12px 16px, currentColor 16px 18px, transparent 18px 22px); }
.ef-die {
  position: relative; display: grid; padding: clamp(30px, 4.5vh, 48px) clamp(22px, 2.6vw, 40px) clamp(10px, 2vh, 20px); margin-bottom: clamp(20px, 3vh, 32px); }
.ef-die__crop { position: absolute; width: 22px; height: 22px; opacity: 0.6; pointer-events: none; }
.ef-die__crop::before, .ef-die__crop::after { content: ''; position: absolute; background: currentColor; }
.ef-die__crop::before { width: 16px; height: 1px; } .ef-die__crop::after { width: 1px; height: 16px; }
.ef-die__crop--tl { top: 0; left: 0; } .ef-die__crop--tl::before { top: 0; left: -10px; } .ef-die__crop--tl::after { top: -10px; left: 0; }
.ef-die__crop--tr { top: 0; right: 0; } .ef-die__crop--tr::before { top: 0; right: -10px; } .ef-die__crop--tr::after { top: -10px; right: 0; }
.ef-die__crop--bl { bottom: 0; left: 0; } .ef-die__crop--bl::before { bottom: 0; left: -10px; } .ef-die__crop--bl::after { bottom: -10px; left: 0; }
.ef-die__crop--br { bottom: 0; right: 0; } .ef-die__crop--br::before { bottom: 0; right: -10px; } .ef-die__crop--br::after { bottom: -10px; right: 0; }
.ef-die__ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 30ch); align-items: end; column-gap: clamp(28px, 4vw, 64px); padding-bottom: clamp(30px, 5vh, 56px); }
.ef-die__ask .edge-foot__statement { font-size: clamp(52px, 6.6vw, 120px); line-height: 0.9; letter-spacing: -0.035em; max-width: 15ch; }
.ef-die__panels { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.9fr); perspective: 1600px; }
.ef-die__panels::before { content: ''; position: absolute; left: calc(clamp(22px, 2.6vw, 40px) * -1); right: calc(clamp(22px, 2.6vw, 40px) * -1); top: 0; height: 1px; --dir: 90deg; background: var(--valley); opacity: 0.55; } /* the cross crease */
.ef-die__panel { position: relative; padding: clamp(26px, 4vh, 42px) clamp(18px, 2.2vw, 34px) 0; transform-origin: 0 50%; transition: transform 0.9s var(--reveal-ease), opacity 0.9s var(--reveal-ease); }
.ef-die__panel:first-child { padding-left: 0; }
.ef-die__panel:last-child { padding-right: 0; }
.ef-die__panel + .ef-die__panel::before { content: ''; position: absolute; left: 0; top: 0; bottom: calc(clamp(10px, 2vh, 20px) * -1); width: 1px; background: var(--valley); opacity: 0.55; }
.ef-die__brief::before { background: var(--mountain) !important; }
.ef-die__pages { display: grid; align-content: start; gap: 18px; }
.ef-die__page { display: grid; gap: 3px; color: inherit; text-decoration: none; }
.ef-die__label { font-family: var(--face); font-size: clamp(22px, 1.9vw, 30px); line-height: 1.02; letter-spacing: -0.02em; }
.ef-die__detail { font-size: 13px; opacity: 0.8; }
.ef-die__page:hover .ef-die__label, .ef-die__page:focus-visible .ef-die__label { color: var(--ultramarine); }
html[data-theme='dark'] .ef-die__page:hover .ef-die__label { color: #b9c2ff; }
.ef-die__colo > .edge-foot__title { margin: 0 0 14px; }
.ef-die__facts { margin: 0; display: grid; gap: 11px; }
.ef-die__fact { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.ef-die__fact dt { font-size: 12px; opacity: 0.72; }
.ef-die__fact dd { margin: 0; font-size: 15px; line-height: 1.35; }
.ef-die__fact dd a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.edge-form--brief > .edge-foot__title { font-family: var(--face); font-size: 24px; letter-spacing: -0.02em; opacity: 1; margin: 0 0 4px; }
.edge-form--brief .edge-form__rows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
.edge-form--brief .edge-form__row:has(textarea) { grid-column: 1 / -1; }
.edge-form--brief .edge-cta { justify-self: start; }
.ef-die:not(.is-flat) .ef-die__panel { opacity: 0; transform: rotateY(-38deg); }
.ef-die:not(.is-flat) .ef-die__panel:nth-child(2) { transform: rotateY(38deg); }
.ef-die__panel:nth-child(2) { transition-delay: 0.12s; } .ef-die__panel:nth-child(3) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .ef-die__panel { transition: none; } .ef-die:not(.is-flat) .ef-die__panel { opacity: 1; transform: none; } }
@media (max-width: 1000px) {
  .ef-die__panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ef-die__brief { grid-column: 1 / -1; padding-left: 0; }
  .ef-die__brief::before { left: calc(clamp(22px, 2.6vw, 40px) * -1) !important; right: calc(clamp(22px, 2.6vw, 40px) * -1); width: auto !important; bottom: auto !important; height: 1px; --dir: 90deg; }
  .ef-die__panel:nth-child(2) { padding-right: 0; }
}
@media (max-width: 720px) {
  .ef-die__ask { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .ef-die__ask .edge-foot__statement { font-size: clamp(40px, 11.6vw, 54px); }
  .ef-die__panels { grid-template-columns: minmax(0, 1fr); }
  .ef-die__panel { padding: 30px 0; transform-origin: 50% 0; }
  .ef-die__panel + .ef-die__panel::before { left: calc(clamp(22px, 2.6vw, 40px) * -1); right: calc(clamp(22px, 2.6vw, 40px) * -1); width: auto; top: 0; bottom: auto; height: 1px; --dir: 90deg; }
  .ef-die:not(.is-flat) .ef-die__panel, .ef-die:not(.is-flat) .ef-die__panel:nth-child(2) { transform: rotateX(-30deg); }
  .edge-form--brief .edge-form__rows { grid-template-columns: minmax(0, 1fr); }
}

/* dark: the studio after hours. The room goes to its own shadow and the arm lamp lights the sheet; the words turn to
   paper ink, the bar and the footer to the room's dark. The leaflet in the footer stays paper, it is lit by the lamp. */
html[data-theme='dark'] { background: #1b1a18; }
:root[data-theme='dark'] {
  --ink: var(--paper); --ink-2: #dfe1e6; --hair: 244, 245, 247;
  --edge-backdrop: rgba(27, 26, 24, 0.88); --edge-line: rgba(244, 245, 247, 0.16);
  --edge-foot-bg: #1c1d21; --edge-foot-ink: var(--paper); --ef-leaf: #eef0f3;
}
[data-theme='dark'] .loader { background: #1b1a18; }
[data-theme='dark'] .loader__name, [data-theme='dark'] .small { color: var(--paper); }
[data-theme='dark'] .loader__sheet { background: var(--paper); }
[data-theme='dark'] .chip, [data-theme='dark'] .cta { background: rgba(27, 26, 24, 0.6); }
[data-theme='dark'] .chip[aria-pressed='true'], [data-theme='dark'] .cta--primary { background: var(--ultramarine); color: var(--paper); }
[data-theme='dark'] .cta--primary:hover { background: var(--paper); border-color: var(--paper); color: var(--ultramarine); }

/* lines are measured so a heading breaks where it was set; each block enters on its own (core/page-motion.js) */
.line { display: block; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.line > span { display: inline-block; }

/* the hand: a small square; a frame over the paper it can press; ultramarine while it presses */
.cursor { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; width: 0; height: 0; color: var(--ink); opacity: 0; transition: opacity 0.3s; }
.cursor.is-live { opacity: 1; }
.cursor span { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: currentColor; box-sizing: border-box; border: 1.5px solid transparent; transition: width 0.45s var(--reveal-ease), height 0.45s var(--reveal-ease), left 0.45s var(--reveal-ease), top 0.45s var(--reveal-ease), background-color 0.3s, border-color 0.3s, transform 0.45s var(--reveal-ease); }
.cursor.is-hot span { width: 40px; height: 40px; left: -20px; top: -20px; background: transparent; border-color: currentColor; transform: rotate(45deg); }
.cursor.is-press span { width: 28px; height: 28px; left: -14px; top: -14px; background: rgba(42, 60, 199, 0.18); border-color: var(--ultramarine); transform: rotate(45deg); }
body.is-pressing { user-select: none; }
@media (pointer: fine) { html, body { cursor: none; } a, button, input, textarea { cursor: none; } }
@media (pointer: coarse) { .cursor { display: none; } }

@media (max-width: 720px) {
  /* on a phone the paper holds the middle: words go to the upper or the lower third */
  .ch__hold { padding: max(84px, 12svh) 16px max(22px, var(--edge-badge-room)); }
  .pos-r .ch__hold, .pos-tr .ch__hold { justify-items: start; }
  .pos-tr .ch__inner, .pos-r .ch__inner, .pos-l .ch__inner, .pos-tl .ch__inner { width: 100%; }
  .pos-l .ch__hold { align-content: start; }
  .split-phone .ch__hold { align-content: stretch; }
  .split-phone .ch__inner { display: grid; grid-template-rows: auto 1fr auto; height: 100%; width: 100%; }
  .split-phone .ch__inner > .phone-gap { display: block; min-height: 0; }
  .item { padding: 6px 0 6px 22px; }
  .item::before { top: 11px; width: 10px; height: 10px; }
  .item__detail { display: none; }
  .item.is-on .item__detail { display: block; }
  .case { grid-template-columns: 1fr; gap: 0; margin: 0 0 8px 22px; font-size: 13px; line-height: 1.35; }
  .case dd + dt { margin-top: 4px; }
  .list--people .item__detail { display: block; font-size: 13px; }
  .chip { padding: 7px 11px; font-size: 14px; }
  .close__row { flex-direction: column; align-items: start; }
}


/* each block of words takes the ink that reads on what the studio paints under it (core/text-ink.js): graphite on the
   paper sweep, paper on the shade and the desk, where the room's own shadow protects it (core/text-grade.js). Chips and
   buttons follow their block, so a control always sits on the ground its ink was chosen for. */
[data-ink] { color: var(--ink); transition: color 0.3s var(--reveal-ease); }
[data-ink='dark'] { --ink: var(--graphite); --ink-2: #33322e; --hair: 20, 20, 20; }
[data-ink='light'] { --ink: var(--paper); --ink-2: #dfe1e6; --hair: 244, 245, 247; }
body [data-ink] .small, body [data-ink] .body, body [data-ink] .hint { color: var(--ink); }
body [data-ink='dark'] .chip { background: rgba(255, 255, 255, 0.55); }
body [data-ink='dark'] .cta { background: rgba(244, 245, 247, 0.6); }
body [data-ink='light'] .chip, body [data-ink='light'] .cta { background: rgba(27, 26, 24, 0.6); }
body [data-ink] .chip[aria-pressed='true'], body [data-ink] .cta--primary { background: var(--ultramarine); border-color: var(--ultramarine); color: var(--paper); }
/* the footer fills the screen on a desktop and stands at its foot (a capture of it no longer cuts through the tabs) */
.edge-foot { display: grid; align-content: end; box-sizing: border-box; min-height: 100svh; }
@media (max-width: 720px) { .edge-foot { min-height: 0; } }