/* EB Atelier — Esmail Bahous Atelier. Identity: "structure meets craft". Palette: Fez green, copper, sage, ivory.
   Logo: "EB." in Syne ExtraBold with a Fern/Mint square full stop, ATELIER in Geist Medium beneath.
   Layout: the atelier as a house of rooms. Calm product-page spacing and rounded tiles, with dark forest
   rooms (hero, statement, personal, footer) alternating with paper and mist rooms; big outlined room numbers;
   a quiet room indicator on the right. The square full stop is the recurring device. */
:root {
  /* colour — EB Atelier palette */
  --paper: #FBF9F4;
  --mist: #F4F0E6;
  --ink: #13221E;
  --stone: #5F5E57;           /* 6.2:1 on paper, 5.7:1 on ivory */
  --fern: #9C5A2A;            /* copper — full stop on light, links, buttons — 5.1:1 on paper */
  --fern-deep: #7E4620;
  --forest: #0F3B33;          /* fez green — brand dark */
  --forest-2: #14473E;        /* raised surface on forest */
  --forest-line: #2A5A50;
  --mint: #D9935E;            /* copper light — full stop on dark — 4.9:1 on fez green */
  --on-forest: #F4F0E6;
  --on-forest-2: #B4CBC2;     /* sage light — 7.2:1 on fez green */
  --rule: #E2DCCB;
  --field-line: #8A8577;      /* 3.5:1 on paper — input borders */
  --danger: #b42318;          /* 6.0:1 on mist */
  --scrim: rgba(11, 44, 38, .94);

  /* type */
  --f: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --t-label: .75rem;                              /* 12 mono */
  --t-eyebrow: 1rem;                              /* 16 */
  --t-body: 1.0625rem;                            /* 17 */
  --t-sub: clamp(1.1875rem, 1rem + .6vw, 1.5rem); /* 19 → 24 */
  --t-tile: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  --t-h2: clamp(2.5rem, 1.5rem + 3.6vw, 4.75rem);
  --t-hero: clamp(3.25rem, 1.6rem + 6vw, 7rem);
  --t-num: clamp(5rem, 2rem + 9vw, 11rem);

  /* space */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 5rem; --s-9: 8rem;
  --gutter: clamp(1rem, .4rem + 3vw, 2.5rem);
  --radius-tile: 6px;
  --radius-card: 3px;
  --radius-pill: 3px;           /* the logo is square: no pills, no circles */
  --radius-ctl: 3px;
  --ease: cubic-bezier(.25, .1, .25, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 56px; overflow-x: clip; background: var(--forest); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f); font-size: var(--t-body);
  line-height: 1.5; letter-spacing: -.011em; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
button { font: inherit; color: inherit; }
a { color: var(--fern); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--fern); outline-offset: 3px; border-radius: var(--radius-ctl); }
.tone-dark :focus-visible, .tile--dark :focus-visible, .gnav.is-dark :focus-visible { outline-color: var(--mint); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; z-index: 200; top: 8px; left: 8px; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--mint); color: var(--forest); transform: translateY(-200%); }
.skip:focus { transform: none; }

.wrap-wide { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }
.wrap { width: min(100% - 2 * var(--gutter), 980px); margin-inline: auto; }
.eyebrow { font-size: var(--t-eyebrow); font-weight: 600; color: var(--fern); letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 7px; height: 7px; background: currentColor; flex: none; }
.tone-dark .eyebrow, .tile--dark .eyebrow { color: var(--mint); }

/* tones */
.tone-dark { background: var(--forest); color: var(--on-forest); }
.tone-mist { background: var(--mist); }

/* logo */
.ebmark { display: block; height: 15px; width: auto; flex: none; }
.ebmark__e, .ebmark__s { fill: currentColor; }
.ebmark__line { fill: var(--fern); }
.tone-dark .ebmark__line, .gnav.is-dark .ebmark__line { fill: var(--mint); }

/* ---------- global nav (turns dark over dark rooms) ---------- */
.gnav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255,255,255,.82); color: var(--ink); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule); transition: background .4s var(--ease), color .4s var(--ease), border-color .4s; }
.gnav.is-dark { background: rgba(11, 44, 38,.74); color: var(--on-forest); border-bottom-color: rgba(244, 240, 230,.08); }
.gnav__inner { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.gnav__brand { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
.gnav__brand .ebmark { height: 16px; }
.gnav__links { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem); }
.gnav__links a { color: inherit; opacity: .78; font-size: .8125rem; padding-block: 12px; }
.gnav__links a:hover, .gnav__links a[aria-current="true"] { opacity: 1; text-decoration: none; }
.gnav__links a[aria-current="true"]:not(.gnav__cta) { color: var(--fern); }
.gnav.is-dark .gnav__links a[aria-current="true"]:not(.gnav__cta) { color: var(--mint); }
.gnav__links .gnav__cta { opacity: 1; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--fern); color: #fff; }
.gnav.is-dark .gnav__links .gnav__cta { background: var(--mint); color: var(--forest); }
.gnav__menu { display: none; border: 0; background: none; color: inherit; font-size: .9375rem; min-height: 44px; padding: 0 var(--s-2); cursor: pointer; }

/* ---------- room indicator ---------- */
.rooms { position: fixed; z-index: 90; right: clamp(10px, 1.6vw, 26px); top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.rooms.is-on { opacity: 1; pointer-events: auto; }
.rooms ol { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rooms a { position: relative; display: grid; place-items: center; width: 28px; height: 28px; color: var(--stone); font-family: var(--f-mono); font-size: .6875rem; border-radius: var(--radius-ctl); }
.rooms a:hover { text-decoration: none; color: var(--ink); }
.rooms a span { display: block; width: 7px; height: 7px; background: currentColor; opacity: .4; font-size: 0; transform-origin: 50% 50%; transition: transform .3s var(--ease), opacity .3s, background .3s; }
.rooms a em { position: absolute; right: calc(100% + 14px); top: 50%; translate: 0 -50%; font-style: normal; white-space: nowrap; padding: 3px 8px; border-radius: var(--radius-ctl); background: var(--forest); color: var(--on-forest); opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s var(--ease); pointer-events: none; }
.rooms a:hover em, .rooms a:focus-visible em { opacity: 1; transform: none; }
.rooms a:hover span { opacity: .8; }
.rooms a[aria-current="true"] span { opacity: 1; background: var(--fern); transform: scale(1.5); }
.rooms.on-dark a { color: var(--on-forest-2); }
.rooms.on-dark a[aria-current="true"] span { background: var(--mint); }

/* ---------- buttons ---------- */
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: var(--radius-pill); background: var(--fern); color: #fff; font-size: 1.0625rem; font-weight: 500; transition: background .2s var(--ease); }
.btn:hover { background: var(--fern-deep); text-decoration: none; }
.btn--mint { background: var(--mint); color: var(--forest); }
.btn--mint:hover { background: #E6AE83; }
.link-cta { font-size: 1.0625rem; min-height: 44px; display: inline-flex; align-items: center; gap: .25em; }
.tone-dark .link-cta { color: var(--mint); }

/* ---------- hero (dark room) ---------- */
.hero { position: relative; overflow: hidden; padding-top: calc(52px + var(--s-8)); }
.hero__contours { position: absolute; inset: 0; background: url("assets/img/contours.svg") center / cover no-repeat; pointer-events: none; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-items: end; gap: var(--s-6); }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); padding-bottom: var(--s-8); }
.hero__logo .ebmark { height: clamp(58px, 3vw + 40px, 82px); color: var(--on-forest); }
.hero__title { font-size: var(--t-hero); line-height: .98; letter-spacing: -.045em; }
.hero__title .line:last-child > span { color: var(--mint); }
.hero__sub { font-size: var(--t-sub); line-height: 1.4; color: var(--on-forest-2); max-width: 36ch; }
.hero__fig { justify-self: end; width: min(100%, 440px); }
.hero__fig .fig { display: block; width: 100%; height: auto; overflow: visible; -webkit-mask-image: linear-gradient(#000 84%, transparent); mask-image: linear-gradient(#000 84%, transparent); }
.facts { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--forest-line); }
.facts div { display: flex; flex-direction: column-reverse; gap: var(--s-1); padding: var(--s-5) var(--s-4) var(--s-6) 0; }
.facts div + div { padding-left: var(--s-5); border-left: 1px solid var(--forest-line); }
.facts dt { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .04em; text-transform: uppercase; color: var(--on-forest-2); }
.facts dd { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--mint); font-variant-numeric: tabular-nums; }

/* ---------- rooms ---------- */
.room { position: relative; padding-block: var(--s-9); }
.room__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--s-4) clamp(1.5rem, 4vw, 4rem); margin-bottom: var(--s-8); }
.room__num { font-size: var(--t-num); font-weight: 600; line-height: .78; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--fern); font-variant-numeric: tabular-nums; }
.tone-dark .room__num { -webkit-text-stroke-color: var(--mint); }
.room__title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding-bottom: .4rem; }
.room__title h2, .contact h2 { font-size: var(--t-h2); line-height: 1.04; }
.room__sub { font-size: var(--t-sub); line-height: 1.4; color: var(--stone); max-width: 44ch; }
.tone-dark .room__sub { color: var(--on-forest-2); }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.tile { background: var(--mist); border-radius: var(--radius-tile); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.tone-mist .tile { background: var(--paper); }
.tile--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: center; }
.tile__text { padding: var(--s-7) var(--s-6) var(--s-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.tile__text h3 { font-size: var(--t-tile); line-height: 1.08; }
.tile__text p:not(.eyebrow) { color: var(--stone); max-width: 44ch; }
.tile--dark { background: var(--forest) !important; color: var(--on-forest); }
.tile--dark .tile__text p:not(.eyebrow) { color: var(--on-forest-2); }
.tile__media { margin: auto var(--s-6) var(--s-6); border: 0; padding: 0; background: none; cursor: zoom-in; display: block; width: auto; overflow: hidden; border-radius: var(--radius-card); }
.tile--wide .tile__media { margin: var(--s-6) var(--s-6) var(--s-6) 0; }
.tile__media img { width: 100%; border-radius: var(--radius-card); aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--ease); }

/* an odd tile out spans the row instead of sitting alone */
.tiles--brand .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tiles--brand .tile:last-child:nth-child(odd) .tile__media img { aspect-ratio: 21 / 9; }

/* compare */
.compare { position: relative; margin: var(--s-6) var(--s-6) var(--s-6) 0; border-radius: var(--radius-card); overflow: hidden; --pos: 50%; touch-action: pan-y; }
.compare img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.compare__top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.compare__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: var(--radius-ctl); background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-4 5 4 5M15 7l4 5-4 5' fill='none' stroke='%231b1f1d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 22px; background-repeat: no-repeat; background-position: center; }
.compare__tag { position: absolute; top: var(--s-3); padding: 2px 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,.9); color: var(--ink); font-family: var(--f-mono); font-size: var(--t-label); }
.compare__tag--l { left: var(--s-3); } .compare__tag--r { right: var(--s-3); }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare input:focus-visible + .compare__handle::after { outline: 2px solid var(--fern); outline-offset: 2px; }

/* ---------- logos (grey until hover, as in the old identity room) ---------- */
.logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.logos li { display: flex; flex-direction: column; gap: var(--s-3); }
.logos img { width: 100%; border-radius: var(--radius-card); aspect-ratio: 1; object-fit: contain; padding: 15%; background: #fff; outline: 1px solid var(--rule); outline-offset: -1px; transition: filter .5s var(--ease), transform .6s var(--ease); }
.logos li:hover img { transform: translateY(-4px); }
.logos span { font-size: .875rem; color: var(--stone); display: flex; justify-content: space-between; gap: var(--s-2); }
.logos span b { color: var(--ink); font-weight: 600; }

/* traced logos carry their own background and margins */
.logos img.is-traced { padding: 0; object-fit: cover; }

/* ---------- countries band ---------- */
.countries { margin-top: var(--s-9); display: flex; flex-direction: column; gap: var(--s-5); }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; flex: none; align-items: baseline; gap: clamp(1.5rem, 3vw, 3rem); padding-right: clamp(1.5rem, 3vw, 3rem); }
.marquee__track li { font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; white-space: nowrap; color: var(--ink); }
.marquee__track li:nth-child(even) { color: var(--stone); }
@media (prefers-reduced-motion: reduce) { .marquee { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; } .marquee__track[aria-hidden] { display: none; } .marquee__track { flex-wrap: wrap; padding-inline: var(--gutter); } }

/* ---------- statement (dark room) ---------- */
.statement { padding-block: var(--s-9) 0; overflow: hidden; }
.statement__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); align-items: end; gap: var(--s-6); }
.statement blockquote { margin: 0 0 var(--s-9); font-size: clamp(1.875rem, 1.1rem + 2.6vw, 3.5rem); font-weight: 600; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.statement blockquote .hl { color: var(--mint); }
.statement__fig .fig { display: block; height: auto; width: min(100%, 340px); margin-left: auto; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }

/* ---------- segmented control ---------- */
.segmented-wrap { margin-top: calc(-1 * var(--s-6)); margin-bottom: var(--s-6); }
.segmented { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.segmented button { min-height: 38px; padding: 0 var(--s-5); border: 0; border-radius: var(--radius-pill); background: none; cursor: pointer; font-size: .9375rem; color: var(--stone); transition: background .25s var(--ease), color .25s; }
.segmented button[aria-selected="true"] { background: var(--forest); color: var(--on-forest); }

/* ---------- galleries ---------- */
.gallery { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: max(var(--gutter), (100% - 1200px) / 2); }
.gallery::-webkit-scrollbar { display: none; }
.gallery[hidden] { display: none; }
.gallery__track { display: flex; gap: var(--s-5); padding-inline: max(var(--gutter), (100% - 1200px) / 2); width: max-content; }
.card { scroll-snap-align: start; width: clamp(260px, 28vw, 360px); display: flex; flex-direction: column; gap: var(--s-3); }
.card button { border: 0; padding: 0; background: var(--paper); border-radius: var(--radius-card); overflow: hidden; cursor: zoom-in; display: block; width: 100%; }
.card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s var(--ease); }
.card--sq img { aspect-ratio: 1; }
.card p { font-size: .9375rem; color: var(--stone); padding-inline: var(--s-1); }
.card p b { color: var(--ink); font-weight: 600; display: block; }
/* print: sheets hang from a wire with a clip */
.line-wrap { position: relative; }
.line-wire { position: absolute; top: 14px; left: 0; right: 0; height: 1px; background: var(--ink); opacity: .22; }
.card--hang { padding-top: 30px; transform-origin: 50% 0; }
.card--hang button { position: relative; overflow: visible; box-shadow: 0 22px 40px -26px rgba(11, 44, 38,.55); }
.card--hang button img { border-radius: var(--radius-card); }
.card--hang button::before { content: ""; position: absolute; z-index: 2; top: -22px; left: 50%; width: 22px; height: 28px; margin-left: -11px; border-radius: var(--radius-ctl); background: var(--forest); }
.card--hang button::after { content: ""; position: absolute; z-index: 3; top: -13px; left: 50%; width: 6px; height: 6px; margin-left: -3px; background: var(--mint); }
.paddles { display: flex; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-5); }
.paddle { width: 44px; height: 44px; border-radius: var(--radius-ctl); border: 0; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s; }
.paddle:hover { background: var(--rule); }
.paddle:disabled { opacity: .35; cursor: default; }
.paddle svg { width: 18px; height: 18px; }
/* packaging: conveyor */
.belt { overflow: hidden; padding-block: var(--s-2) var(--s-7); position: relative; }
.belt::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--s-5); height: 6px; background: repeating-linear-gradient(90deg, var(--rule) 0 26px, transparent 26px 38px); background-size: 38px 6px; animation: belt 1.4s linear infinite; }
@keyframes belt { to { background-position: 38px 0; } }
.belt__track { display: flex; gap: var(--s-5); width: max-content; padding-inline: var(--gutter); }
.belt .card button { background: var(--mist); }
.belt__ctrl { display: flex; justify-content: flex-end; }
.toggle { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-5); border-radius: var(--radius-pill); border: 0; background: var(--mist); color: var(--ink); font-size: .875rem; cursor: pointer; }
.toggle svg { width: 10px; height: 10px; }
.toggle:hover { background: var(--rule); }

/* ---------- bento (digital) ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); }
.bento .tile { grid-column: span 3; }
.bento .tile:nth-child(n+3) { grid-column: span 2; }
.tile--feed .tile__text { padding: var(--s-6) var(--s-5) var(--s-4); }
.tile--feed h3 { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); padding: 0 var(--s-5) var(--s-5); margin-top: auto; }
.pair button { border: 0; padding: 0; border-radius: var(--radius-ctl); overflow: hidden; cursor: zoom-in; background: none; }
.pair img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s var(--ease); }

/* ---------- personal (dark room with stars) ---------- */
.observatory { overflow: hidden; }
.observatory canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.observatory > *:not(canvas):not(.room__art) { position: relative; }
.planets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); perspective: 1200px; }
.planets li:nth-child(3n+2) { margin-top: var(--s-8); }
.planets li:nth-child(3n) { margin-top: var(--s-6); }
.planets button { border: 0; padding: 0; background: var(--forest-2); border-radius: var(--radius-card); overflow: hidden; cursor: zoom-in; display: block; width: 100%; box-shadow: 0 0 70px -25px rgba(217, 147, 94,.35); }
.planets img { width: 100%; aspect-ratio: 1274 / 1792; object-fit: cover; transition: transform .8s var(--ease); }

/* ---------- contact ---------- */
.contact { padding-block: var(--s-9) 0; background: var(--mist); overflow: hidden; }
.contact__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--s-7); align-items: end; }
.contact__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding-bottom: var(--s-9); }
/* contact form */
.cform { width: 100%; max-width: 680px; margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-5); }
.cform fieldset { border: 0; margin: 0; padding: 0; }
.cform legend, .field label { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .04em; text-transform: uppercase; color: var(--stone); margin-bottom: var(--s-2); padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-4); border-radius: var(--radius-pill); background: var(--paper); box-shadow: inset 0 0 0 1px var(--field-line); font-size: .9375rem; transition: background .2s, color .2s, box-shadow .2s; }
.chips input:checked + span { background: var(--forest); color: var(--on-forest); box-shadow: none; }
.chips input:checked + span::before { content: ""; width: 6px; height: 6px; background: var(--mint); margin-right: 8px; }
.chips input:focus-visible + span { outline: 2px solid var(--fern); outline-offset: 2px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field { display: flex; flex-direction: column; min-width: 0; }
.field input, .field textarea { font: inherit; font-size: 1.0625rem; color: var(--ink); background: var(--paper); border: 1px solid var(--field-line); border-radius: var(--radius-ctl); padding: 12px 14px; min-height: 50px; width: 100%; transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--stone); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--fern); box-shadow: 0 0 0 3px rgba(156, 90, 42,.18); }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--danger); }
.field__err { margin-top: var(--s-2); font-size: .875rem; color: var(--danger); display: flex; gap: 6px; align-items: baseline; }
.field__err::before { content: "!"; flex: none; width: 16px; height: 16px; border-radius: var(--radius-ctl); background: var(--danger); color: #fff; font-size: .6875rem; font-weight: 700; display: grid; place-items: center; transform: translateY(2px); }
.field__err[hidden] { display: none; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.cform__send { border: 0; cursor: pointer; min-width: 168px; justify-content: center; }
.cform__send[aria-busy="true"] { opacity: .75; cursor: progress; }
.cform__send[aria-busy="true"] span::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-ctl); vertical-align: -2px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cform__note { font-size: .875rem; color: var(--stone); }
.cform__status:empty { display: none; }
.cform__status { border-radius: var(--radius-ctl); padding: var(--s-4) var(--s-5); display: flex; gap: var(--s-3); align-items: flex-start; }
.cform__status b { display: block; font-weight: 600; }
.cform__status.is-ok { background: var(--forest); color: var(--on-forest); }
.cform__status.is-ok::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 7px; background: var(--mint); }
.cform__status.is-error { background: #fbe9e7; color: #7a1d14; box-shadow: inset 0 0 0 1px #f0c4bd; }
.cform__status.is-error::before { content: "!"; flex: none; width: 20px; height: 20px; border-radius: var(--radius-ctl); background: var(--danger); color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center; margin-top: 2px; }
.cform.is-sent .cform__topic, .cform.is-sent .cform__row, .cform.is-sent .field, .cform.is-sent .cform__foot { display: none; }
@media (max-width: 760px) { .cform__row { grid-template-columns: 1fr; } }
.contact__fig .fig { display: block; height: auto; width: min(100%, 300px); margin-left: auto; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }

/* ---------- footer (dark) ---------- */
.footer__inner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s-5) var(--s-6); padding-block: var(--s-8) calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); }
.footer__brand { display: inline-flex; color: var(--on-forest); min-height: 44px; }
.footer__brand:hover { text-decoration: none; }
.footer__brand .ebmark { height: clamp(64px, 6vw, 96px); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-5); font-size: .9375rem; }
.footer__links a { color: var(--on-forest); min-height: 44px; display: inline-flex; align-items: center; }
.footer__legal { grid-column: 1 / -1; font-size: var(--t-label); color: var(--on-forest-2); border-top: 1px solid var(--forest-line); padding-top: var(--s-4); }

/* ---------- image viewer ---------- */
.lb { cursor: default; border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; background: transparent; color: var(--on-forest); overflow: hidden; }
.lb::backdrop { background: rgba(8, 34, 29, .96); backdrop-filter: blur(10px); }
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.lb__top { display: flex; align-items: center; gap: var(--s-4); padding: calc(var(--s-4) + env(safe-area-inset-top, 0px)) var(--gutter) var(--s-3); }
.lb__meta { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-3); }
.lb__room { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .04em; text-transform: uppercase; color: var(--mint); display: inline-flex; align-items: center; gap: 8px; }
.lb__room::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.lb__title { font-size: 1.0625rem; font-weight: 600; }
.lb__sub { font-size: .9375rem; color: var(--on-forest-2); }
.lb__count { font-family: var(--f-mono); font-size: .8125rem; color: var(--on-forest-2); font-variant-numeric: tabular-nums; }
.lb__tools { display: flex; gap: 6px; }
.lb__btn { min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: var(--radius-ctl); background: rgba(244, 240, 230,.1); color: var(--on-forest); display: grid; place-items: center; cursor: pointer; font-family: var(--f-mono); font-size: .75rem; transition: background .2s; }
.lb__btn:hover { background: rgba(244, 240, 230,.2); }
.lb__btn:disabled { opacity: .35; cursor: default; }
.lb__btn svg, .lb__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lb__close { background: var(--mint); color: var(--forest); }
.lb__close:hover { background: #E6AE83; }
.lb__fit { min-width: 64px; }
.lb__stage { position: relative; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: 0 var(--gutter); }
.lb__frame { position: relative; height: 100%; min-height: 0; overflow: hidden; display: grid; place-items: center; touch-action: none; border-radius: var(--radius-card); }
.lb__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-card); transform-origin: 0 0; will-change: transform; user-select: none; cursor: zoom-in; }
.lb.is-zoomed .lb__img { cursor: grab; border-radius: 0; }
.lb.is-panning .lb__img { cursor: grabbing; }
.lb__nav { width: 52px; height: 52px; border: 0; border-radius: var(--radius-ctl); background: rgba(244, 240, 230,.1); color: var(--on-forest); display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .3s var(--pop); }
.lb__nav:hover { background: var(--mint); color: var(--forest); transform: scale(1.06); }
.lb__nav:disabled { opacity: 0; pointer-events: none; }
.lb__spin { position: absolute; width: 14px; height: 14px; background: var(--mint); animation: lbspin 1s var(--ease) infinite; opacity: 0; transition: opacity .2s; }
.lb.is-loading .lb__spin { opacity: 1; }
@keyframes lbspin { 0% { transform: scale(.4) rotate(0); } 50% { transform: scale(1) rotate(90deg); } 100% { transform: scale(.4) rotate(180deg); } }
.lb__error { position: absolute; max-width: 34ch; text-align: center; color: var(--on-forest-2); }
.lb__strip { display: flex; gap: 8px; padding: var(--s-4) var(--gutter) var(--s-2); overflow-x: auto; scrollbar-width: none; justify-content: safe center; }
.lb__strip::-webkit-scrollbar { display: none; }
.lb__thumb { flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: var(--radius-ctl); overflow: hidden; cursor: pointer; opacity: .45; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .25s, outline-color .25s; background: var(--forest-2); }
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; filter: none !important; translate: none !important; scale: none !important; }
.lb__thumb:hover { opacity: .8; }
.lb__thumb[aria-current="true"] { opacity: 1; outline-color: var(--mint); }
.lb__hint { padding: var(--s-2) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); text-align: center; font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .03em; color: var(--on-forest-2); }
.lb .hint-touch { display: none; }
@media (hover: none) { .lb .hint-wide { display: none; } .lb .hint-touch { display: inline; } }
@media (max-width: 760px) {
  .lb__top { flex-wrap: wrap; }
  .lb__meta { order: 1; flex-basis: 100%; }
  .lb__tools [data-lb="out"], .lb__tools [data-lb="in"], .lb__tools [data-lb="full"] { display: none; }
  .lb__stage { grid-template-columns: minmax(0, 1fr); padding: 0 var(--s-2); }
  .lb__nav { display: none; }
  .lb__thumb { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .lb__spin { animation: none; } }

/* split-line headings */
.line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.line > span { display: inline-block; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .rooms { display: none; } }
@media (max-width: 980px) {
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento .tile, .bento .tile:nth-child(n+3) { grid-column: span 3; }
  .bento .tile:last-child { grid-column: 1 / -1; }
  .tile--wide { grid-template-columns: 1fr; }
  .tile--wide .tile__media { margin: 0 var(--s-6) var(--s-6); }
  .compare { margin: 0 var(--s-6) var(--s-6); }
}
@media (max-width: 760px) {
  .gnav__menu { display: inline-flex; align-items: center; }
  .gnav__links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-2) var(--gutter) var(--s-5); display: none; }
  .gnav.is-dark .gnav__links { background: var(--forest); }
  .gnav:not(.is-dark) .gnav__links { background: var(--paper); border-bottom: 1px solid var(--rule); }
  .gnav__links.is-open { display: flex; }
  .gnav__links a { display: block; font-size: 1.5rem; font-weight: 600; opacity: 1; padding-block: var(--s-2); }
  .gnav__links .gnav__cta { align-self: flex-start; margin-top: var(--s-3); font-size: 1rem; padding: 10px 18px; }
  .hero { padding-top: calc(52px + var(--s-7)); }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__text { padding-bottom: 0; }
  .hero__fig { justify-self: center; width: min(80%, 320px); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts div:nth-child(n+3) { border-top: 1px solid var(--forest-line); }
  .room__head { grid-template-columns: 1fr; gap: var(--s-2); margin-bottom: var(--s-7); }
  .room__num { font-size: 4.5rem; }
  .tiles, .statement__inner, .contact__inner { grid-template-columns: 1fr; }
  .tile__text { padding: var(--s-6) var(--s-5) var(--s-5); }
  .tile__media, .tile--wide .tile__media { margin: 0 var(--s-4) var(--s-4); }
  .compare { margin: 0 var(--s-4) var(--s-4); }
  .tile__media img, .compare img { aspect-ratio: 4 / 3; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .logos span { flex-direction: column; gap: 0; }
  .bento .tile, .bento .tile:nth-child(n+3), .bento .tile:last-child { grid-column: 1 / -1; }
  .planets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .planets li:nth-child(n) { margin-top: 0; }
  .planets li:nth-child(even) { margin-top: var(--s-6); }
  .card { width: 76vw; }
  .paddles { display: none; }
  .belt { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .belt__ctrl { display: none; }
  .statement blockquote { margin-bottom: var(--s-5); }
  .statement__fig .fig, .contact__fig .fig { margin: 0 auto; width: 240px; }
  .contact__text { padding-bottom: 0; }
  .footer__inner { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .belt { overflow-x: auto; }
}

/* ---------- the full stop: EB Atelier's motion signature ---------- */
:root { --pop: cubic-bezier(.34, 1.9, .64, 1); }   /* overshoot, matches GSAP back.out(3) */
.fs { display: inline-block; width: .17em; height: .17em; margin-left: .06em; background: var(--fern); vertical-align: baseline; }
.tone-dark .fs { background: var(--mint); }
.statement .hl .fs { background: var(--mint); }
.hero__title .fs { background: var(--mint); }
/* cursor: a square that follows the pointer (desktop only) */
.cursor { position: fixed; z-index: 150; top: 0; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--fern); pointer-events: none;
  display: grid; place-items: center; opacity: 0; transition: width .35s var(--pop), height .35s var(--pop), margin .35s var(--pop), background .3s, opacity .3s; }
.cursor span { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--forest); opacity: 0; transition: opacity .2s; }
.cursor.is-live { opacity: 1; }
.cursor.on-dark { background: var(--mint); }
.cursor.is-link { width: 22px; height: 22px; margin: -11px 0 0 -11px; opacity: .55; }
.cursor.is-view { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--mint); opacity: 1; }
.cursor.is-view span { opacity: 1; }
.cursor.is-down { transform: scale(.7); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
/* room indicator square pops */
.rooms a span { transition: transform .45s var(--pop), opacity .3s, background .3s; }
/* button: a full stop pops after the label on hover */
.btn::after { content: ""; width: 7px; height: 7px; margin-left: 0; background: currentColor; transform: scale(0); transition: transform .35s var(--pop), margin .35s var(--pop); }
.btn:hover::after, .btn:focus-visible::after { transform: scale(1); margin-left: 10px; }
/* chips: the selected dot pops */
.chips input:checked + span::before { animation: pop .45s var(--pop) both; }
/* sent message lands */
.cform__status.is-ok::before { width: 14px; height: 14px; margin-top: 5px; animation: pop .6s var(--pop) .1s both; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cursor { display: none; } .btn::after { transition: none; } }

/* ---------- black & white until engaged: the work stays quiet until you reach for it ---------- */
[data-full] img, .compare img, .logos img {
  filter: grayscale(1) contrast(1.04);
  transition: filter .7s var(--ease), transform .6s var(--ease);
}
[data-full]:hover img, [data-full]:focus-visible img,
.compare:hover img, .compare:focus-within img,
.logos li:hover img,
.is-color img, .is-color[data-full] img { filter: none; }
.lb__img { filter: none; }
@media (prefers-reduced-motion: reduce) { [data-full] img, .compare img, .logos img { transition: none; } }

/* ---------- hover parallax: the frame tilts toward the pointer, the picture drifts the other way ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-full] { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s var(--ease); will-change: transform; }
  [data-full].is-tilting { transition: transform .15s linear; }
  /* !important: GSAP writes translate/scale: none inline on scroll-animated images; these layer on top of its transform */
  [data-full] img { translate: var(--tx, 0) var(--ty, 0) !important; scale: var(--zs, 1) !important; transition: filter .7s var(--ease), translate .7s var(--ease), scale .7s var(--ease); }
  [data-full].is-tilting img { transition: filter .7s var(--ease), translate .15s linear, scale .5s var(--ease); }
  .card--hang [data-full] img { translate: none !important; scale: none !important; }   /* hanging sheets only tilt, like paper */
}

/* ---------- drag to scroll: no text selection or image ghosting while dragging ---------- */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, .cform { -webkit-user-select: text; user-select: text; }
img, svg { -webkit-user-drag: none; user-drag: none; }
::selection { background: transparent; }
input::selection, textarea::selection { background: rgba(156, 90, 42,.22); }
@media (hover: hover) and (pointer: fine) {
  body { cursor: grab; }
  body.is-dragging, body.is-dragging * { cursor: grabbing !important; }
  a, button, label, input, textarea, [data-full] { cursor: pointer; }
  input, textarea { cursor: text; }
}
.cursor.is-drag { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--mint); opacity: 1; }
.cursor.is-drag span { opacity: 1; }

/* ---------- room line art: each room is identified by its own icon family, drawn faintly in the margins ---------- */
.contact { position: relative; }
.room__art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.room > :not(.room__art):not(canvas), .contact > :not(.room__art) { position: relative; z-index: 1; }
.art { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); rotate: var(--r);
  fill: none; stroke: var(--fern); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: .34; }   /* .8 of 48 units ≈ 1.3–2px at the sizes used */
.tone-dark .art { stroke: var(--mint); opacity: .28; }
@media (max-width: 1100px) { .art { width: calc(var(--s) * .78); height: calc(var(--s) * .78); } }
@media (max-width: 760px) { .art--wide { display: none; } .art { width: calc(var(--s) * .8); height: calc(var(--s) * .8); stroke-width: 1.2; opacity: .26; } }

/* ---------- surfaces: paper ----------
   The folded corner in the logo sets the material: everything is a sheet. Paper rooms carry a fine grain and
   fibre, sheets lift off each other with soft contact shadows, and each room is laid over the one before.
   Gradients stay on the dark rooms (card stock, lit from one side). Glass survives only as a hint, on the
   controls that float over pictures: the image viewer, the compare tags and the case-study bar. */
:root {
  --grain: url("assets/img/grain-dark.png");          /* pre-rendered: a live SVG noise filter was costly to paint while scrolling */
  --grain-light: url("assets/img/grain-light.png");
  --grad-forest:
    radial-gradient(55% 65% at 80% 22%, rgba(217, 147, 94, .12), transparent 62%),
    radial-gradient(50% 60% at 8% 92%, rgba(156, 90, 42, .24), transparent 62%),
    linear-gradient(165deg, #12463C 0%, #0C3029 55%, #0F3B33 100%);
  --grad-mist: linear-gradient(180deg, #F4F0E6 0%, #EFE9DC 100%);
  --grad-fern: linear-gradient(180deg, #A9632F 0%, #8E5126 100%);
  --grad-mint: linear-gradient(180deg, #E2A271 0%, #D18A55 100%);
  --sheet: #FFFDF8;                      /* a sheet: a shade whiter than the room it lies on */
  --sheet-dark: #14473E;                 /* card stock on Fez green */
  --sheet-edge: rgba(19, 34, 30, .07);
  --sheet-edge-dark: rgba(244, 240, 230, .09);
  --shadow-sheet: 0 1px 1px rgba(19, 34, 30, .05), 0 3px 6px -2px rgba(19, 34, 30, .06), 0 18px 36px -24px rgba(19, 34, 30, .22);
  --shadow-sheet-lift: 0 1px 1px rgba(19, 34, 30, .05), 0 8px 14px -6px rgba(19, 34, 30, .10), 0 34px 60px -30px rgba(19, 34, 30, .32);
  --shadow-sheet-dark: 0 1px 1px rgba(0, 0, 0, .18), 0 18px 36px -22px rgba(0, 0, 0, .55);
  --shadow-stack: 0 -1px 0 rgba(19, 34, 30, .06), 0 -26px 44px -34px rgba(19, 34, 30, .5);   /* a room laid over the one before */
  /* glass, kept for hints only */
  --glass-light: linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,255,255,.5));
  --glass-dark: linear-gradient(135deg, rgba(20, 71, 62, .62), rgba(11, 44, 38, .48));
  --glass-edge-light: rgba(255, 255, 255, .85);
  --glass-edge-dark: rgba(244, 240, 230, .16);
  --glass-blur: blur(18px) saturate(180%);
  --radius-tile: 6px;                    /* paper has crisp corners; just softened */
  --radius-card: 3px;
}

/* the paper itself */
body, .case { background-color: var(--paper); background-image: var(--grain); }
.tone-mist, .contact { background: var(--grain), var(--grad-mist); }
.hero, .statement, .footer.tone-dark { background: var(--grain-light), var(--grad-forest); }
.observatory { background: var(--grain-light), radial-gradient(45% 40% at 85% 15%, rgba(217, 147, 94,.10), transparent 70%), var(--forest); }
.tone-dark:not(.hero):not(.statement):not(.footer):not(.observatory) { background-image: var(--grain-light); }

/* rooms are sheets laid one over the other */
.room, .statement, .contact, .footer { position: relative; box-shadow: var(--shadow-stack); }

/* tiles are sheets: they sit on the room and lift a little when you reach for them */
.tile { background: var(--grain), var(--sheet); box-shadow: var(--shadow-sheet), inset 0 0 0 1px var(--sheet-edge); transition: box-shadow .5s var(--ease), translate .5s var(--ease); }
.tone-mist .tile, .tile { background-color: var(--sheet); }
.tile:has(:hover), .tile:focus-within { box-shadow: var(--shadow-sheet-lift), inset 0 0 0 1px var(--sheet-edge); translate: 0 -2px; }
.tile--dark { background: var(--grain-light), linear-gradient(160deg, #165045, #0F3B33 70%) !important; box-shadow: var(--shadow-sheet-dark), inset 0 0 0 1px var(--sheet-edge-dark); }
.logos li { box-shadow: none; }
.card button, .planets button { box-shadow: var(--shadow-sheet); }

/* ink, not light: buttons are printed flat */
.btn { background: var(--fern); box-shadow: 0 1px 0 rgba(19, 34, 30, .12); }
.btn:hover { background: var(--fern-deep); }
.btn--mint { background: var(--mint); box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.btn--mint:hover { background: #E6AE83; }
.hero .facts dd { background: linear-gradient(180deg, #EDC29E, #D9935E); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* paper controls */
.gnav, .rooms ol, .paddle, .toggle { background: var(--grain), var(--sheet); box-shadow: var(--shadow-sheet), inset 0 0 0 1px var(--sheet-edge); }
.gnav.is-dark, .rooms.on-dark ol { background: var(--grain-light), var(--sheet-dark); box-shadow: var(--shadow-sheet-dark), inset 0 0 0 1px var(--sheet-edge-dark); }
.hero .link-cta { padding: 0 20px; border-radius: var(--radius-ctl); color: var(--on-forest); min-height: 48px; box-shadow: inset 0 0 0 1px rgba(244, 240, 230, .32); transition: box-shadow .3s var(--ease), background .3s var(--ease); }
.hero .link-cta:hover { text-decoration: none; background: rgba(244, 240, 230, .06); box-shadow: inset 0 0 0 1px rgba(244, 240, 230, .6); }
/* index tabs: the print room's switcher is a set of folder tabs; the open one is a sheet */
.segmented { position: relative; padding: 4px; border-radius: var(--radius-ctl); background: var(--grain), #EAE4D6; box-shadow: inset 0 1px 2px rgba(19, 34, 30, .10); }
.segmented button { border-radius: var(--radius-ctl); }
.segmented button[aria-selected="true"] { background: var(--grain), var(--sheet); color: var(--ink); box-shadow: var(--shadow-sheet), inset 0 0 0 1px var(--sheet-edge); }

/* glass, the hints that remain */
.compare__tag, .lb__btn:not(.lb__close), .lb__nav { isolation: isolate; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.compare__tag { background: var(--glass-light); box-shadow: inset 0 1px 0 var(--glass-edge-light), inset 0 0 0 1px rgba(255,255,255,.35); color: var(--ink); }
.lb__btn:not(.lb__close), .lb__nav { background: var(--glass-dark); box-shadow: inset 0 1px 0 rgba(244, 240, 230,.22), inset 0 0 0 1px var(--glass-edge-dark); }

/* the nav: a plain strip of paper (the fold belongs to the logo, the letter and the pictures) */
.gnav { top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; right: auto; width: min(100% - 2 * var(--gutter), 1240px); transform: translateX(-50%);
  border: 0; border-radius: var(--radius-ctl); padding-top: 0; }
.gnav__inner { width: auto; padding-inline: 20px; height: 56px; }   /* logo and last button sit the same distance from their edges */
.gnav__links .gnav__cta { background: var(--fern); }
.gnav.is-dark .gnav__links .gnav__cta { background: var(--mint); }
html { scroll-padding-top: 78px; }
.hero { padding-top: calc(76px + var(--s-8)); }
.rooms ol { padding: 8px 4px; border-radius: var(--radius-ctl); }

/* the contact form is a letter: a sheet with its corner turned */
.cform { position: relative; padding: var(--s-7) var(--s-6) var(--s-6); background: var(--grain), var(--sheet); border-radius: var(--radius-tile);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 20px, 100% 100%, 0 100%); }
.letter { width: 100%; max-width: 680px; margin-top: var(--s-5); filter: drop-shadow(0 1px 1px rgba(19, 34, 30, .07)) drop-shadow(0 22px 28px rgba(19, 34, 30, .14)); }
.letter .cform { margin-top: 0; max-width: none; }
.cform::before { content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 30px; z-index: 2; pointer-events: none;
  background: color-mix(in srgb, var(--forest) 55%, var(--paper)); clip-path: polygon(0 0, 100% 66%, 50.2% 100%); }
.field input, .field textarea { border-radius: var(--radius-ctl); background: #FFFDF8; }
.cform__status { border-radius: var(--radius-ctl); }

@media (max-width: 760px) {
  .gnav { width: calc(100% - 20px); }
  .gnav__links { top: calc(100% + 8px); border-radius: var(--radius-ctl); overflow: hidden; background: var(--grain), var(--sheet); box-shadow: var(--shadow-sheet-lift), inset 0 0 0 1px var(--sheet-edge); }
  .gnav.is-dark .gnav__links { background: var(--grain-light), var(--sheet-dark); }
  .hero { padding-top: calc(72px + var(--s-7)); }
  .cform { padding: var(--s-6) var(--s-4) var(--s-5); }
}
@media (prefers-reduced-transparency: reduce) {
  .compare__tag, .lb__btn, .lb__nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .compare__tag { background: var(--paper); }
  .lb__btn:not(.lb__close), .lb__nav { background: var(--forest-2); }
}

/* palette: Fez green + copper. Sage supports on dark rooms (line art, outlined numbers) so copper stays rare. */
:root { --sage: #7FA89B; --copper: var(--fern); --copper-light: var(--mint); }
.tone-dark .room__num { -webkit-text-stroke-color: var(--sage); }
.tone-dark .art { stroke: var(--sage); opacity: .34; }
/* the folded corner: the E is dog-eared like a sketchbook page; the flap shows the back of the page (a tint of the letter colour) */
.ebmark__fold { fill: currentColor; fill-opacity: .55; }
.tone-dark .ebmark__fold, .gnav.is-dark .ebmark__fold, .bb-hero .ebmark__fold, .stage--dark .ebmark__fold,
.card-mock--front .ebmark__fold, .avatar .ebmark__fold { fill-opacity: .7; }   /* ivory over Fez green needs more to read as the same tint */
.ebmark__fold.is-front { fill-opacity: 1; }
.ebmark__patch { fill: currentColor; }
.ebmark__patch, .ebmark__fold.is-front { stroke: currentColor; stroke-width: .6; stroke-linejoin: round; }   /* hides seams while the corner is still flat */

/* ---------- the fold, in the work: a project image dog-ears its corner when you reach for it ---------- */
@property --fold { syntax: '<length>'; inherits: true; initial-value: 0px; }
[data-full] { position: relative; --fold: 0px; transition: transform .7s var(--ease), --fold .45s var(--ease); }
[data-full] { clip-path: polygon(0 0, calc(100% - var(--fold) * 1.15) 0, 100% calc(var(--fold) * .6624), 100% 100%, 0 100%); }
[data-full]:focus-visible { outline-offset: -4px; }   /* the cut would clip an outside ring */
[data-full]::after {
  content: ""; position: absolute; top: 0; right: 0; z-index: 2; pointer-events: none;
  width: calc(var(--fold) * 1.15); height: calc(var(--fold) * .995);
  background: color-mix(in srgb, var(--forest) 55%, var(--paper)); clip-path: polygon(0 0, 100% 66%, 50.2% 100%);   /* the back of the page, as in the logo */
}
[data-full]:hover, [data-full]:focus-visible, .is-color[data-full] { --fold: 30px; }
@media (prefers-reduced-motion: reduce) { [data-full] { transition: none; } }

/* ---------- case studies: a project opens like a page turning at its corner ---------- */
.tile__case { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin-top: var(--s-1); padding: 0; border: 0; background: none;
  color: var(--fern); font-weight: 600; cursor: pointer; }
.tile__case::after { content: "\2192"; transition: transform .4s var(--ease); }
.tile__case:hover::after { transform: translateX(4px); }
.tile--dark .tile__case { color: var(--mint); }

html.case-open { overflow: hidden; }
.case { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--paper); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
.case::backdrop { background: var(--scrim); }
.case__bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: 10px var(--gutter); background: color-mix(in srgb, var(--paper) 80%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--rule); }
@media (prefers-reduced-transparency: reduce) { .case__bar { background: var(--paper); } }
.case__count { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
.case__tools { display: flex; gap: var(--s-2); }
.case__btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-ctl); border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink); cursor: pointer; transition: border-color .2s var(--ease); }
.case__btn:hover { border-color: var(--ink); }
.case__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.case__head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-5) var(--s-8); align-items: end;
  padding: var(--s-8) 0 var(--s-7); }
.case__head .eyebrow { grid-column: 1 / -1; }
.case__title { grid-column: 1; font-size: var(--t-hero); line-height: .95; letter-spacing: -.045em; overflow-wrap: anywhere; }
.case__lede { grid-column: 1; font-size: var(--t-sub); line-height: 1.35; color: var(--stone); max-width: 34ch; }
.case__facts { grid-column: 2; grid-row: 2 / span 2; align-self: end; border-top: 1px solid var(--rule); }
.case__facts div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.case__facts dt { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); padding-top: 3px; }
.case__facts dd { font-weight: 500; }

.case__shot { margin: 0; }
.case__media { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius-tile); background: var(--mist); overflow: hidden; cursor: zoom-in; }
.case__media img { width: 100%; }
.case [data-full] img { filter: none; }          /* you opened it: the work is in colour here */
.case__shot--hero .case__media img { max-height: 78vh; object-fit: contain; }
.case__shot figcaption { margin-top: var(--s-2); font-size: .875rem; color: var(--stone); }

.case__story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6) var(--s-8); padding: var(--s-8) 0; }
.case__h { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fern); margin-bottom: var(--s-4); }
.case__story p { font-size: var(--t-sub); line-height: 1.4; max-width: 32ch; }
.case__did { counter-reset: did; border-top: 1px solid var(--rule); }
.case__did li { counter-increment: did; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.case__did li::before { content: counter(did, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--t-label); color: var(--fern); padding-top: 4px; }

.case__ctx { position: relative; display: grid; background: var(--forest); color: var(--on-forest); overflow: hidden; }
.case__ctx--pair { grid-template-columns: 1fr 1fr; }
.case__ctx figure { position: relative; margin: 0; height: min(78vh, 760px); overflow: hidden; }
.case__ctx img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.85);   /* the setting, not the work: black and white */
  transform: translateY(var(--py, 0px)) scale(1.12); will-change: transform; }
.case__ctx::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(15, 59, 51, .9), rgba(15, 59, 51, .35) 45%, rgba(15, 59, 51, 0) 70%); }
.case__ctxline { position: absolute; z-index: 2; left: var(--gutter); bottom: var(--s-7); max-width: 16ch;
  font-size: var(--t-h2); font-weight: 600; line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
.case__ctx figcaption { position: absolute; z-index: 2; right: var(--s-4); bottom: var(--s-4); padding: 6px 12px; border-radius: var(--radius-pill);
  font-size: .75rem; color: var(--on-forest); background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.case__ctx figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.case__ctx :focus-visible { outline-color: var(--mint); }

.case__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); align-items: start; padding: var(--s-8) 0; }
.case__shot--wide { grid-column: 1 / -1; }

.case__next { display: block; padding: var(--s-8) 0 var(--s-9); background: var(--grad-forest, var(--forest)); color: var(--on-forest); }
.case__next:hover { text-decoration: none; }
.case__next > span { display: grid; gap: var(--s-3); }
.case__next .eyebrow { color: var(--mint); }
.case__next b { display: flex; align-items: baseline; gap: .3em; font-size: var(--t-hero); font-weight: 600; line-height: .95; letter-spacing: -.045em; overflow-wrap: anywhere; }
.case__arrow { color: var(--mint); transition: transform .5s var(--ease); }
.case__next:hover .case__arrow, .case__next:focus-visible .case__arrow { transform: translateX(.2em); }
.case__nextkind { color: var(--on-forest-2); }
.case__next:focus-visible { outline: 2px solid var(--mint); outline-offset: -8px; border-radius: 0; }

@media (max-width: 760px) {
  .case__head { grid-template-columns: minmax(0, 1fr); padding: var(--s-7) 0 var(--s-6); }
  .case__facts { grid-column: 1; grid-row: auto; }
  .case__story { grid-template-columns: minmax(0, 1fr); padding: var(--s-7) 0; }
  .case__ctx--pair { grid-template-columns: minmax(0, 1fr); }
  .case__ctx figure { height: 62vh; }
  .case__ctx--pair figure { height: 42vh; }
  .case__ctxline { bottom: var(--s-8); }
  .case__gallery { grid-template-columns: minmax(0, 1fr); padding: var(--s-7) 0; }
  .case__media, .case__shot--hero .case__media { border-radius: var(--radius-card); }
}

/* ---------- the characters: alive, and aware of the cursor ----------
   main.js sets --hr/--hx/--hy (head) and --ex/--ey (eyes) from the pointer; idle motion is CSS. */
.fig .h, .fig .a { transform-box: view-box; }
.fig .h { transform-origin: var(--px) var(--py); transform: translate(var(--hx, 0px), var(--hy, 0px)) rotate(var(--hr, 0deg)); }
.fig .e { transform: translate(calc(var(--hx, 0px) + var(--ex, 0px)), calc(var(--hy, 0px) + var(--ey, 0px))) rotate(var(--hr, 0deg)); }
.fig .a { transform-origin: var(--ax) var(--ay); }
.fig .s { transform-box: fill-box; transform-origin: center; scale: var(--sp, 1); transition: scale .45s var(--pop); }
.fig__all { transform-box: view-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .fig__all { animation: fig-breathe 4.6s ease-in-out infinite; }
  .fig .s { animation: fig-twinkle 2.8s ease-in-out infinite; }
  .fig .s:nth-of-type(2n) { animation-delay: -1.4s; animation-duration: 3.4s; }
  .fig[data-mood="sketch"] .a { animation: fig-sketch 3.6s ease-in-out infinite; }
  .fig[data-mood="sketch"].is-near .a { animation: fig-flourish .9s ease-in-out infinite; }
  .fig[data-mood="point"] .a { animation: fig-tap 2.4s ease-in-out infinite; }
  .fig[data-mood="point"].is-near .a { animation-duration: .9s; }
  .fig[data-mood="nod"] .h { animation: fig-nod 1.1s ease-in-out infinite; }
  .fig[data-mood="nod"].is-near .h { animation-duration: .8s; }
  .fig.is-boing .fig__all { animation: fig-boing .6s var(--pop); }
}
@keyframes fig-breathe { 50% { translate: 0 -3px; scale: 1 1.006; } }
@keyframes fig-twinkle { 0%, 100% { rotate: 0deg; opacity: 1; } 45% { rotate: 45deg; opacity: .55; } 55% { rotate: 45deg; opacity: .55; } }
@keyframes fig-sketch { 0%, 60%, 100% { rotate: 0deg; } 66% { rotate: -5deg; } 72% { rotate: 2deg; } 78% { rotate: -4deg; } 84% { rotate: 1deg; } }
@keyframes fig-flourish { 0%, 100% { rotate: 0deg; } 25% { rotate: -9deg; } 60% { rotate: 5deg; } }
@keyframes fig-tap { 0%, 55%, 100% { rotate: 0deg; } 65% { rotate: -8deg; } 75% { rotate: 2deg; } 85% { rotate: -6deg; } }
@keyframes fig-nod { 0%, 100% { rotate: 0deg; } 50% { rotate: 1deg; } }
@keyframes fig-boing { 30% { scale: 1.03 .95; } 60% { scale: .98 1.03; translate: 0 -8px; } }
/* over a character the cursor stays a small full stop and says hello beside it, never over a face */
.cursor.is-hi { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--mint); opacity: 1; overflow: visible; }
.cursor.is-hi span { position: absolute; left: 18px; top: 14px; opacity: 1; white-space: nowrap; padding: 3px 8px; border-radius: var(--radius-ctl);
  background: var(--mint); color: var(--forest); }
/* the print room is the one exception: posters, flyers and brochures hang in full colour, like prints on a line */
#print [data-full] img { filter: none; }
/* room 07, after hours: the planets keep their colour too */
#personal [data-full] img { filter: none; }
/* viewer thumbnails: small, and the same size in every state; the current one is marked inside its edge, never enlarged */
.lb__strip { gap: 6px; }
.lb__thumb { width: 40px; height: 40px; outline-offset: -2px; }
.lb__thumb, .lb__thumb:hover, .lb__thumb[aria-current="true"] { transform: none; scale: none; }
@media (max-width: 760px) { .lb__thumb { width: 34px; height: 34px; } }
/* viewer controls: small, quiet squares; the picture is the point (targets stay above 24px) */
.lb__tools { gap: 6px; }
.lb__btn { min-width: 32px; height: 32px; padding: 0 8px; font-size: .6875rem; }
.lb__btn svg { width: 14px; height: 14px; }
.lb__nav { width: 36px; height: 36px; }
.lb__nav svg { width: 16px; height: 16px; }
.lb__nav:hover { transform: none; }
/* copper labels on the mist rooms: the deeper copper keeps them above 4.5:1 down to the darkest end of the gradient */
.tone-mist .eyebrow, .contact .eyebrow { color: var(--fern-deep); }
/* outlined room numbers: some digits (the 1) are built from overlapping shapes, and a plain text stroke draws every
   overlap. The number is filled with its room's own colour and the stroke is painted underneath, at double width,
   so only the outer half of the outline shows and the inner seams are covered. */
.room__num { --num-fill: var(--paper); color: var(--num-fill); -webkit-text-stroke-width: 3px; paint-order: stroke fill; }
.tone-mist .room__num { --num-fill: #F2EEE3; }
.tone-dark .room__num { --num-fill: var(--forest); }
@media (max-width: 760px) { .room__num { -webkit-text-stroke-width: 2.4px; } }
/* the fold, animated properly: its own transition survives the tilt (which swaps in a fast transform transition on
   hover), it opens with a soft settle and closes a little quicker, and the flap is shaded toward the crease */
[data-full] { transition: transform .7s var(--ease), --fold .38s cubic-bezier(.4, 0, .6, 1); }
[data-full]:hover, [data-full]:focus-visible, .is-color[data-full] { transition: transform .7s var(--ease), --fold .55s cubic-bezier(.2, .9, .25, 1.15); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-full].is-tilting { transition: transform .15s linear, --fold .55s cubic-bezier(.2, .9, .25, 1.15); }
}
[data-full]::after { background: linear-gradient(205deg, color-mix(in srgb, var(--forest) 66%, var(--paper)) 0%, color-mix(in srgb, var(--forest) 48%, var(--paper)) 70%); }
@media (prefers-reduced-motion: reduce) { [data-full], [data-full]:hover, [data-full].is-tilting { transition: none; } }
/* while a row is being dragged, pictures hold still: no tilt, no drift, no fold */
body.is-dragging [data-full] { transform: none !important; --fold: 0px !important; }
body.is-dragging [data-full] img { translate: none !important; scale: 1 !important; }
/* statement room: the quote fills the room's height beside the figure instead of sitting low under empty space */
.statement { padding-block: var(--s-7) 0; }
.statement__inner { align-items: center; }
.statement blockquote { align-self: center; margin: 0; padding-bottom: var(--s-7); font-size: clamp(2.25rem, 1.1rem + 3.4vw, 4.75rem); line-height: 1.04; letter-spacing: -.04em; }
.statement__fig { align-self: end; }
.statement__fig .fig { width: min(100%, 420px); }
@media (max-width: 760px) {
  .statement { padding-block: var(--s-7) 0; }
  .statement blockquote { padding-bottom: var(--s-4); }
  .statement__fig .fig { width: 250px; margin: 0 auto; }
}
.gnav__menu { padding: 0; width: 44px; min-height: 44px; justify-content: flex-end; }   /* the bars end on the same 20px margin the logo starts on */
/* burger: three square-ended bars, like the full stop; they fold into an x when the menu is open */
.burger { position: relative; display: block; width: 22px; height: 14px; }
.burger i { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .35s var(--ease), opacity .2s, top .35s var(--ease); }
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 6px; width: 70%; left: 30%; }
.burger i:nth-child(3) { top: 12px; }
.gnav__menu[aria-expanded="true"] .burger i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.gnav__menu[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
.gnav__menu[aria-expanded="true"] .burger i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .burger i { transition: none; } }

/* ---------- back to top: a small square sheet in the corner ---------- */
.totop { position: fixed; z-index: 95; right: clamp(12px, 1.6vw, 26px); bottom: clamp(12px, 2vw, 26px); display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 12px 0 10px; border: 0; border-radius: var(--radius-ctl); cursor: pointer; font-size: .8125rem; font-weight: 500; color: var(--ink);
  background: var(--grain), var(--sheet); box-shadow: var(--shadow-sheet), inset 0 0 0 1px var(--sheet-edge);
  opacity: 0; translate: 0 10px; pointer-events: none; transition: opacity .35s var(--ease), translate .35s var(--ease), background-color .3s; }
.totop.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.totop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; transition: translate .35s var(--pop); }
.totop:hover svg { translate: 0 -2px; }
.totop.on-dark { color: var(--on-forest); background: var(--grain-light), var(--sheet-dark); box-shadow: var(--shadow-sheet-dark), inset 0 0 0 1px var(--sheet-edge-dark); }
.totop.on-dark:focus-visible { outline-color: var(--mint); }
body:has(dialog[open]) .totop { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .totop span { display: none; } .totop { width: 44px; min-height: 44px; padding: 0; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .totop, .totop svg { transition: none; } }

/* the nav is the one element allowed past the 1200px content guide: a wider, taller strip with larger type */
@media (min-width: 761px) {
  .gnav { width: min(100% - 2 * var(--gutter), 1360px); }
  .gnav__inner { height: 64px; }
  .gnav__brand .ebmark { height: 20px; }
  .gnav__links { gap: clamp(1rem, 1.9vw, 2.25rem); }
  .gnav__links a { font-size: clamp(.875rem, .74rem + .28vw, 1rem); }
  .gnav__links .gnav__cta { padding: 9px 18px; }
  html { scroll-padding-top: 86px; }
}

/* print room: everything on the centre line. The row centres itself when it fits the screen (auto margins collapse
   to zero when it overflows, so a long row still starts at its first poster); tabs and arrows sit on the same axis. */
#print .segmented-wrap { display: flex; justify-content: center; }
.gallery { display: flex; }
.gallery__track { margin-inline: auto; }
.paddles { justify-content: center; }
.paddles:not(:has(.paddle:not(:disabled))) { visibility: hidden; }   /* nothing to scroll: no arrows */
.gallery__track { padding-inline: var(--gutter); }
.gallery { scroll-padding-inline: var(--gutter); }
@media (min-width: 1100px) {   /* four sheets always fit on the line on desktop, so the posters sit centred instead of scrolling */
  .gallery .card { width: clamp(240px, calc((min(100vw - 2 * var(--gutter), 1200px) - 3 * var(--s-5)) / 4), 360px); }
}

/* ---------- touch screens: keep scrolling at full frame rate ----------
   Phones have no cursor to react to, so the effects that cost a repaint on every scroll frame step aside. */
.fig { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .fig__all { animation: none; }
  .fig { animation: fig-breathe 4.6s ease-in-out infinite; transform-origin: 50% 100%; will-change: translate; }   /* the whole drawing breathes as one layer */
}
@media (hover: none), (pointer: coarse) {
  [data-full] { clip-path: none; transform: none; }
  [data-full]::after { display: none; }                              /* no corner fold: it masks the picture on every frame */
  .fig .h, .fig .a { animation: none !important; transform: none; }  /* no nod, no sketch loop */
  .tile, .card button, .planets button, .cform { box-shadow: 0 1px 2px rgba(19, 34, 30, .08), 0 8px 18px -12px rgba(19, 34, 30, .22); }
  .room, .statement, .contact, .footer { box-shadow: none; }
}