/* Public site, LAAFI identity (direction "Long Vowel").
   Indigo and Cotton fields, Kaolin bands, one Laterite "held line" per page
   (a horizontal bar that runs off one edge, never under a word). Square
   corners, flat surfaces, no hairlines: space and tone separate things.
   The headline is the picture. Fonts self-hosted (SIL OFL; latin + latin-ext
   so ɓ ɗ ƴ ƙ ɛ ɔ render): no tracking, no external requests. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Noto Serif Display"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/noto-serif-display-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Noto Serif Display"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/noto-serif-display-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Noto Sans Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/noto-sans-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20AC; } /* taste-skill-ignore: the brand's figure face, shown on the brand page */


:root {
  --paper: #f3eee4;      /* Cotton */
  --paper-2: #e3daca;    /* Kaolin: bands */
  --surface: #fbf8f2;    /* Paper: cards */
  --ink: #13151c;
  --ink-2: #4f4b44;      /* Shade, darkened a step for 7:1 body contrast */
  --rule: #cfc5b3;
  --primary: #1a2242;    /* Indigo */
  --primary-2: #2c3868;
  --night: #0f1428;
  --on-night: #f3eee4;
  --on-night-2: #c3bcad;
  --held: #a3432b;       /* Laterite */
  --held-dark: #e07a5f;
  --success: #3f6b2a;
  --chat-bg: #ebe5d8;
  --bubble-in: #ffffff;
  --bubble-out: #dfe3ee;
  --radius: 2px;
  --serif: "Noto Serif Display", Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Noto Sans Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* taste-skill-ignore: brand page specimen only */
  --gutter: clamp(20px, 4vw, 56px);
  --bar: 76px;           /* the header's height: the page runs under it, which is what makes it a material */
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* A critically damped spring (damping 1.0, no overshoot; Apple's default for UI that isn't thrown),
     sampled as a CSS easing so a transition can be reversed mid-flight from its live value. */
  --spring: linear(0, 0.043 5%, 0.139 9%, 0.255 14%, 0.373 18%, 0.483 23%, 0.58 27%, 0.663 32%, 0.733 36%, 0.789 41%, 0.835 45%, 0.872 50%, 0.901 55%, 0.924 59%, 0.941 64%, 0.955 68%, 0.966 73%, 0.974 77%, 0.98 82%, 0.985 86%, 0.989 91%, 0.991 95%, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1.125rem/1.65 var(--sans); letter-spacing: 0; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--primary); text-underline-offset: 4px; }
/* no 300 ms tap delay: a press answers at once */
a, button, summary, input, [role=button] { touch-action: manipulation; }
a:hover { color: var(--primary-2); }
[data-ink="dark"] a:not(.btn):hover { color: #fff; } /* indigo on indigo was invisible */
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
[data-ink="dark"] :focus-visible, .dark :focus-visible { outline-color: var(--on-night); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--primary); color: var(--on-night); padding: 12px 18px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; color: var(--on-night); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(1360px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- type ---------- */
h1, h2, .display { font-family: var(--serif); font-weight: 600; letter-spacing: -0.012em; line-height: 1.08; margin: 0; }
h1, h2 { font-size: clamp(32px, 4.2vw, 60px); }
h3 { font: 600 20px/1.4 var(--sans); letter-spacing: -0.006em; margin: 0; }
.lede { font-size: 1.25rem; line-height: 1.5; letter-spacing: -0.004em; color: var(--ink-2); margin: 22px 0 30px; max-width: 32em; }
.fine { font-size: 14px; letter-spacing: 0.01em; color: var(--ink-2); margin-top: 16px; }
.fig, .figure { font-variant-numeric: tabular-nums; font-weight: 600; }
mark { background: var(--paper-2); color: inherit; padding: 0 .12em; }
.band mark { background: var(--paper); }

/* ---------- header: takes the ink of the chapter under it ---------- */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 80%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); color: var(--primary); transition: background .3s var(--ease), color .3s var(--ease); }
.top[data-ink="dark"] { background: color-mix(in srgb, var(--primary) 80%, transparent); color: var(--on-night); }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .top { background: var(--paper); } .top[data-ink="dark"] { background: var(--primary); } }
.top { margin-bottom: calc(-1 * var(--bar)); }
main { padding-top: var(--bar); }
main:has(> .hero:first-child) { padding-top: 0; }
.top .wrap { display: flex; align-items: center; gap: 28px; height: var(--bar); }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 600; font-size: 18px; min-height: 44px; }
.brand:hover { color: inherit; }
.brand .wm { height: 24px; width: auto; display: block; }
.brand img { width: 30px; height: 30px; }
.nav { display: flex; gap: 8px; margin-left: auto; align-items: center; font-size: 16px; }
.nav a { white-space: nowrap; color: inherit; text-decoration: none; padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; opacity: .82; transition: opacity .2s; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nav .lang { text-transform: uppercase; font-size: 14px; letter-spacing: .04em; background: rgba(127, 127, 127, .16); opacity: 1; margin-left: 4px; }

/* ---------- menu: phone and tablet, a native <details> so it works without the script ---------- */
.menu { display: none; margin-left: 4px; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; font-weight: 600; font-size: 16px; }
.menu summary::-webkit-details-marker { display: none; }
.menu .bars { position: relative; display: block; width: 18px; height: 10px; }
.menu .bars::before, .menu .bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .25s var(--ease), top .25s var(--ease); }
.menu .bars::before { top: 0; } .menu .bars::after { top: 8px; }
.menu[data-open] .bars::before, html:not(.js) .menu[open] .bars::before { top: 4px; transform: rotate(45deg); }
.menu[data-open] .bars::after, html:not(.js) .menu[open] .bars::after { top: 4px; transform: rotate(-45deg); }
.menu .sheet { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; padding: 8px 16px 24px; max-height: calc(100svh - 76px); overflow-y: auto; background: var(--paper); color: var(--primary); transform-origin: calc(100% - 48px) 0; } /* always Cotton: it stands out on the Indigo hero and on light pages; it grows out of the button */
.menu .sheet a { color: inherit; text-decoration: none; font: 600 22px/1.2 var(--serif); letter-spacing: -0.012em; padding: 16px 4px; min-height: 56px; display: flex; align-items: center; }
.menu .sheet a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
/* Without the script the native <details> opens and closes. With it, the sheet is always rendered and
   moves between two states by transition, so a second tap mid-motion reverses it from where it is. */
html:not(.js) .menu[open] .sheet { animation: fade-up .3s var(--ease) both; }
.js .menu .sheet { opacity: 0; visibility: hidden; transform: scale(.96) translateY(-10px); filter: blur(8px); pointer-events: none; transition: opacity .25s, filter .25s, transform .55s var(--spring), visibility 0s .25s; }
.js .menu[data-open] .sheet { opacity: 1; visibility: visible; transform: none; filter: none; pointer-events: auto; transition: opacity .2s, filter .3s, transform .55s var(--spring), visibility 0s; }
.scrim { position: fixed; inset: 0; z-index: 19; background: rgba(26, 34, 66, .55); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
body:has(.menu[data-open]) .scrim, html:not(.js) body:has(.menu[open]) .scrim { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: var(--radius); background: var(--primary); color: var(--on-night) !important; text-decoration: none; font: 600 16px/1.3 var(--sans); border: 0; cursor: pointer; transition: background .2s, transform .5s var(--spring); }
.btn:hover { background: var(--ink); }
.btn:active { transform: scale(.97); transition-duration: .2s, .08s; } /* answers on press, not on release; springs back on release */
.nav a:active, .menu summary:active, .menu .sheet a:active, .cmd .row:active, .demo .chan .tab:active { opacity: .6; }
.btn.light { background: var(--on-night); color: var(--primary) !important; }
.btn.light:hover { background: #fff; }
.btn.quiet { background: rgba(243, 238, 228, .14); color: var(--on-night) !important; }
.btn.quiet:hover { background: rgba(243, 238, 228, .24); }
.btn.sm { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.nav .btn { padding: 10px 18px; min-height: 44px; opacity: 1; margin-left: 4px; }
.top[data-ink="dark"] .nav .btn { background: var(--on-night); color: var(--primary) !important; }
.link { font-weight: 600; color: inherit; text-underline-offset: 6px; text-decoration-thickness: 2px; display: inline-flex; align-items: center; min-height: 48px; }

/* ---------- hero: one statement, one held line ---------- */
.hero { position: relative; background: var(--primary); color: var(--on-night); padding: calc(var(--bar) + clamp(40px, 8vh, 96px)) 0 0; overflow: hidden; display: flex; flex-direction: column; }
.hero .wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(28px, 5vh, 48px); padding-bottom: clamp(72px, 12vh, 120px); }
.statement { font-family: var(--serif); font-weight: 600; font-size: clamp(54px, 12.4vw, 188px); line-height: .98; letter-spacing: -0.025em; margin: 0; }
.statement span { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.statement .in { display: block; }
.statement .l1 { color: var(--on-night-2); }
.hero-foot { align-self: flex-start; width: min(560px, 100%); }
.hero-foot .lede { color: var(--on-night); margin: 0 0 26px; font-size: 20px; opacity: .92; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.hero .fine { color: var(--on-night-2); }
.held { display: block; height: 8px; background: var(--held-dark); transform-origin: left; }
.hero .held { position: absolute; left: 30%; right: 0; bottom: 0; }
.page-head { padding: clamp(12px, 3vh, 32px) 0 clamp(32px, 5vh, 48px); }
.page-head .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; }
.page-head h1 { font-size: clamp(44px, 7vw, 100px); }
.page-head .lede { margin: 0 0 24px; }
section.tight { padding-top: 0; }

/* ---------- entrances (only when the script runs and motion is welcome) ---------- */
.js [data-rise] { opacity: 0; transform: translateY(28px); }
.js [data-rise].in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .9s var(--spring); transition-delay: calc(var(--i, 0) * 90ms); }
.js .ph [data-rise] { transform: scale(1.06); }
.js .ph [data-rise].in { transition-duration: 1.1s; }
@keyframes line-in { from { transform: translateY(105%); } to { transform: none; } }
@keyframes bar-in { from { transform: scaleX(0); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.statement .in { animation: line-in .9s var(--ease) both; }
.statement .l2 .in { animation-delay: .14s; }
.hero .held { animation: bar-in 1s .5s var(--ease) both; }
.hero-foot > * { animation: fade-up .7s .45s var(--ease) both; }
.hero-foot > :nth-child(2) { animation-delay: .55s; } .hero-foot > :nth-child(3) { animation-delay: .65s; }

/* ---------- sections ---------- */
section { padding: clamp(72px, 11vw, 144px) 0; }
.band { background: var(--paper-2); }
.dark { background: var(--primary); color: var(--on-night); }
.dark .lede, .dark .fine { color: var(--on-night-2); }
.head { max-width: min(960px, 100%); margin-bottom: clamp(32px, 5vw, 64px); }
h2.head { max-width: 15em; }
.head p { color: var(--ink-2); margin: 18px 0 0; font-size: 20px; max-width: 32em; }

/* ---------- the assistant, live ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.duo .lede { margin-bottom: 0; }

.chat { background: var(--chat-bg); border-radius: 4px; overflow: hidden; }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 8px 4px 18px; min-height: 56px; background: var(--primary); color: var(--on-night); font-size: 16px; }
.chat-head strong { font-weight: 600; }
.chat-head > span { color: var(--on-night-2); font-size: 14px; padding-right: 10px; }
.chat-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.msg { align-self: flex-start; max-width: min(84%, 420px); padding: 10px 14px; border-radius: 8px; font-size: 16px; line-height: 1.45; background: var(--bubble-in); color: var(--ink); }
.msg.out { align-self: flex-end; background: var(--bubble-out); }
.msg .pic { display: block; position: relative; margin-bottom: 8px; line-height: 0; }
.msg img { width: 240px; height: 153px; max-width: 100%; object-fit: cover; border-radius: 4px; }

.demo .chat-body { min-height: 252px; }
.demo .chan { display: flex; gap: 2px; }
.demo .chan .tab { font: inherit; font-size: 14px; color: var(--on-night-2); background: none; border: 0; padding: 0 14px; min-height: 44px; border-radius: var(--radius); cursor: pointer; transition: background .2s, color .2s; }
.demo .chan .tab:hover { color: var(--on-night); }
.demo .chan .tab[aria-pressed="true"] { background: rgba(243, 238, 228, .16); color: var(--on-night); }
.demo[data-channel="telegram"] .msg.out { background: #d9e8f5; }
.demo .receipt { display: block; width: 240px; max-width: 100%; margin-bottom: 8px; padding: 10px 12px; border-radius: 4px; background: var(--surface); font-size: 14px; line-height: 1.4; }
.demo .receipt b { display: block; color: var(--ink-2); font-weight: 600; }
.demo .receipt .amt { display: block; font-weight: 600; font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.demo .receipt .ok { color: var(--success); font-weight: 600; }
.demo .trace { background: var(--surface); padding: 14px 18px 12px; transition: opacity .4s; }
.demo .trace small { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.demo .trace ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; min-height: 64px; align-content: flex-start; }
.demo .trace li { font-size: 14px; padding: 6px 12px 6px 28px; border-radius: var(--radius); background: var(--paper-2); position: relative; color: var(--ink); }
.demo .trace li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 5px; height: 9px; margin-top: -6px; border: solid var(--success); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.demo .trace:not(.on) { opacity: 0; }
.demo .trace.on { opacity: 1; }
.demo .dots { display: flex; justify-content: center; background: var(--surface); padding: 0 0 6px; }
.demo .dots:empty { display: none; }
.demo .dot { position: relative; width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.demo .dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; background: #b9b09b; transition: width .25s var(--ease), margin .25s var(--ease), background .2s; }
.demo .dot[aria-current="true"]::before { width: 22px; margin-left: -11px; background: var(--primary); }
.msg.pop { animation: pop .28s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.msg.typing { display: flex; gap: 4px; padding: 14px 16px; }
.msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: #7d8a99; animation: bob 1s infinite; }
.msg.typing i:nth-child(2) { animation-delay: .15s; }
.msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- two words, compared ---------- */
.versus { font-family: var(--serif); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 80px); margin: 0 0 clamp(36px, 5vw, 64px); }
.versus span { font-family: var(--serif); font-weight: 600; font-size: clamp(40px, 9.6vw, 150px); line-height: 1.05; letter-spacing: -0.02em; display: block; padding-bottom: .08em; }
.versus .no { color: #7b766b; text-decoration: line-through; text-decoration-thickness: .06em; text-decoration-color: currentColor; }
.versus .yes { color: var(--primary); }
.showcase .head { margin-bottom: 24px; }
.showcase .text { font-size: 20px; max-width: 30em; color: var(--ink-2); margin: 0; }

/* ---------- command list: what the assistant does ---------- */
.search { display: block; width: 100%; max-width: 560px; margin: 0 0 clamp(24px, 3vw, 40px); padding: 14px 18px; font: 400 18px/1.4 var(--sans); color: var(--ink); background: var(--surface); border: 0; border-radius: var(--radius); transition: background .2s; }
.search:focus { outline: 3px solid var(--primary); outline-offset: 0; background: #fff; }
.search::placeholder { color: #6d685f; }
.js .search-wrap { display: block; }
.search-wrap { display: none; }
.cmd { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cmd li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px clamp(24px, 5vw, 80px); align-items: start; padding: clamp(14px, 2vw, 24px) clamp(16px, 2.4vw, 32px); background: transparent; color: var(--ink); transition: background .3s var(--ease), color .3s var(--ease); }
.cmd .row { font: 600 clamp(26px, 4.2vw, 56px)/1.1 var(--serif); letter-spacing: -0.012em; text-align: left; background: none; border: 0; padding: 0; margin: 0; color: inherit; cursor: default; min-height: 44px; }
.cmd .desc { margin: 0; font-size: 18px; color: var(--ink-2); max-width: 28em; padding-top: .5em; }
.js .cmd .row { cursor: pointer; }
.js .cmd li:not(.sel) .desc { display: none; }
.js .cmd li:not(.sel) { grid-template-columns: 1fr; }
.js .cmd li:not(.sel):hover { background: var(--paper-2); }
.js .cmd li.sel { background: var(--primary); color: var(--on-night); }
.js .cmd li.sel .desc { color: var(--on-night); opacity: .92; animation: fade-up .45s var(--ease) both; }
.js .cmd li[hidden] { display: none; }
.empty { color: var(--ink-2); font-size: 18px; padding: 16px clamp(16px, 2.4vw, 32px); margin: 0; }

/* ---------- places and trades ---------- */
.places .head { margin-bottom: clamp(28px, 4vw, 48px); }
.places .head p { max-width: 36em; }
.photos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin: 0 0 clamp(36px, 5vw, 72px); }
.photos figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.photos .a, .photos .d { grid-column: span 3; } .photos .b, .photos .c { grid-column: span 2; }
.ph { overflow: hidden; position: relative; background: var(--paper-2); height: clamp(220px, 29vw, 420px); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.photos figcaption { font-size: 14px; color: var(--ink-2); }
.trades { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: clamp(24px, 4vw, 64px); font: 600 clamp(22px, 2.3vw, 28px)/1.25 var(--serif); }
.trades li { padding: 10px 0; break-inside: avoid; }
.trades-note { margin: 0; font-size: 18px; color: var(--ink-2); max-width: 36em; }

/* ---------- you stay in control: a payment you can answer ---------- */
.control .cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.control h2 { margin-bottom: clamp(24px, 3vw, 40px); }
.points { margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; max-width: 34em; }
.points li { color: var(--on-night-2); font-size: 18px; }
.points b { color: var(--on-night); font-weight: 600; display: block; font-size: 20px; margin-bottom: 2px; }
.card { background: var(--surface); color: var(--ink); border-radius: 4px; padding: clamp(22px, 3vw, 34px); position: relative; }
.card .tag { margin: 20px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.figure { font: 600 clamp(36px, 4.2vw, 60px)/1.1 var(--serif); margin: 18px 0 6px; font-variant-numeric: lining-nums tabular-nums; }
.card-meta { color: var(--ink-2); font-size: 16px; margin: 0 0 24px; }
.card-act { display: flex; gap: 10px; flex-wrap: wrap; }
.card .btn.quiet { background: var(--paper-2); color: var(--primary) !important; }
.card .btn.quiet:hover { background: #d7ccb8; }
.card-result { margin: 0; font-size: 18px; }
.card-result b { display: block; font-size: 20px; margin-bottom: 4px; }
.card-hint { margin: 18px 0 0; font-size: 14px; color: var(--ink-2); }
.card [data-when] { display: none; }
.card[data-state="idle"] [data-when~="idle"], .card[data-state="confirmed"] [data-when~="confirmed"], .card[data-state="rejected"] [data-when~="rejected"] { display: block; animation: fade-up .4s var(--ease) both; }
.card[data-state="idle"] .card-act[data-when~="idle"] { display: flex; }
html:not(.js) .card-act, html:not(.js) .card-hint { display: none !important; }

/* ---------- our name ---------- */
.story .head { max-width: 12em; }
.story .cols { columns: 2; column-gap: clamp(32px, 6vw, 96px); }
.story .cols p { margin: 0 0 22px; break-inside: avoid; font-size: 18px; max-width: 30em; }
.story .cols p:first-child { font-size: 20px; line-height: 1.55; }
.more { font-weight: 600; color: var(--primary); text-underline-offset: 6px; text-decoration-thickness: 2px; display: inline-flex; align-items: center; min-height: 48px; }
.more::after { content: " \2192"; white-space: pre; transition: transform .2s var(--ease); }
.more:hover::after { transform: translateX(4px); }

/* ---------- price ---------- */
.price-table { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.price-table .name { font: 600 clamp(26px, 3vw, 36px)/1.15 var(--serif); margin: 0 0 6px; }
.price-table .who { margin: 0; color: var(--ink-2); font-size: 18px; }
.price-table .amount { font: 600 clamp(40px, 9.6vw, 138px)/1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; margin: 0; }
.price-table .cost { text-align: right; }
.price-table .per { margin: 0; font-size: 20px; color: var(--ink-2); }
.price-foot { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center; justify-content: space-between; }
.price-foot p { margin: 0; max-width: 36em; color: var(--ink-2); font-size: 18px; }

/* ---------- questions, as reading text ---------- */
.faq .qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(32px, 6vw, 96px); }
.faq h3 { font: 600 clamp(22px, 2vw, 28px)/1.25 var(--serif); margin-bottom: 10px; }
.faq p { margin: 0; color: var(--ink-2); font-size: 18px; max-width: 28em; }

/* ---------- our name page ---------- */
.manifesto { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.manifesto li { font-family: var(--serif); font-size: clamp(20px, 1.9vw, 28px); line-height: 1.3; padding: 18px 0; }
.manifesto li.last { color: var(--primary); font-size: clamp(28px, 3.4vw, 44px); padding-top: 28px; }
.family { display: flex; align-items: baseline; gap: 14px; padding: 28px 0; color: var(--primary); }
.fam-wm .wm { height: 30px; width: auto; display: block; }
.fam-name { font-family: var(--serif); font-size: 34px; line-height: 1; }
.split { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 96px); }
.split .head { margin-bottom: 0; }
.prose p { margin: 0 0 22px; max-width: 34em; }
.prose p:first-child { font-size: 20px; line-height: 1.6; }

/* ---------- brand resources ---------- */
.logo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.logo-tile { margin: 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.logo-tile .ground { display: grid; place-items: center; height: 220px; padding: 40px; }
.logo-tile .ground img { max-height: 72px; width: auto; }
.logo-tile .ground.light { background: var(--surface); }
.logo-tile .ground.dark { background: var(--primary); }
.logo-tile .ground.kaolin { background: var(--paper); }
.logo-tile .ground.kaolin img, .logo-tile:nth-child(3) .ground img { max-height: 110px; }
.logo-tile figcaption { display: grid; gap: 2px; padding: 18px 20px 20px; font-size: 16px; background: var(--paper-2); }
.logo-tile figcaption span { color: var(--ink-2); }
.logo-tile .dl { display: flex; gap: 8px; margin-top: 4px; }
.logo-tile .dl a { font-weight: 600; color: var(--primary); min-height: 44px; display: inline-flex; align-items: center; padding-right: 12px; }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.swatches li { background: var(--surface); display: grid; grid-template-columns: 56px 120px 110px 1fr; gap: 16px; align-items: center; padding: 0 16px 0 0; font-size: 16px; }
.swatches .chip { width: 56px; height: 56px; }
.swatches span:last-child { color: var(--ink-2); }
.fonts { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.fonts li { display: grid; gap: 4px; }
.fonts b { font-size: 30px; font-weight: 600; line-height: 1.2; }
.fonts .f-0 { font-family: var(--serif); } .fonts .f-1 { font-family: var(--sans); } .fonts .f-2 { font-family: var(--mono); font-weight: 500; font-size: 24px; } /* taste-skill-ignore: the brand's figure face, shown on the brand page */
.fonts span { color: var(--ink-2); font-size: 16px; }

.rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.rules li { padding-left: 26px; position: relative; color: var(--ink-2); font-size: 18px; max-width: 34em; }
.rules li::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 10px; background: var(--primary); }
.card button[data-when] { display: none; }
.card[data-state="confirmed"] button[data-when~="confirmed"], .card[data-state="rejected"] button[data-when~="rejected"] { display: inline-flex; margin-top: 18px; }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan { padding: 32px 28px; background: var(--surface); border-radius: var(--radius); }
.plan h2 { font-family: var(--serif); font-size: 28px; margin: 0; }
.plan:first-child { background: var(--primary); color: var(--on-night); }
.plan:first-child .per, .plan:first-child ul { color: var(--on-night-2); }
.plan .amount { font: 600 36px/1.2 var(--serif); font-variant-numeric: lining-nums tabular-nums; margin: 14px 0 0; }
.plan .amount.ask { font-size: 28px; }
.plan .per { margin: 0; font-size: 16px; color: var(--ink-2); }
.plan ul { list-style: none; padding: 0; margin: 20px 0 0; color: var(--ink-2); font-size: 16px; display: grid; gap: 8px; }

/* ---------- legal pages ---------- */
.doc { padding: clamp(56px, 9vw, 96px) 0 48px; }
.doc .meta { color: var(--ink-2); font-size: 14px; margin: 14px 0 36px; }
.doc h2 { font-size: 28px; margin: 48px 0 12px; }
.doc p, .doc li { color: #2a2c33; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc .callout { background: var(--surface); border-left: 4px solid var(--primary); padding: 18px 22px; margin: 28px 0; }
.doc .callout p { margin: 0; color: var(--ink); }

/* ---------- sign-off band and footer ---------- */
.signoff { position: relative; overflow: hidden; background: var(--primary); color: var(--on-night); padding: clamp(72px, 11vw, 140px) 0; }
.signoff .line { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -0.02em; margin: 0; max-width: 13em; }
.signoff .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
.signoff .side .desc { margin: 0; }
.signoff .desc { margin: 22px 0 0; max-width: 34em; color: var(--on-night-2); font-size: 20px; }
.signoff .act { margin: 32px 0 0; }
.signoff .held { position: absolute; left: 30%; right: 0; bottom: 0; } /* the same held line as the hero: flush with the foot of the band, running off the right edge */
.foot { position: relative; overflow: hidden; padding: 56px 0 0; font-size: 16px; color: var(--ink-2); }
.foot .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.foot h2 { margin: 0 0 8px; color: var(--ink); font: 600 16px/1.4 var(--sans); letter-spacing: 0; }
.foot a { display: flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot p { margin: 0 0 8px; }
.foot .contact { margin-top: 8px; }
.foot .contact a { display: inline; }
.foot address.info { font-style: normal; display: grid; gap: 6px; padding-top: 4px; }
.foot address.info a.inline { display: inline; min-height: 0; text-decoration: underline; text-underline-offset: 3px; }
.foot .legal-bar { background: var(--primary); color: var(--on-night-2); margin-top: 56px; font-size: 14px; }
.foot .legal-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 28px; padding: 6px 0; }
.foot .legal-bar nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot .legal-bar a { color: var(--on-night); min-height: 44px; }
.foot .legal-bar a:hover { color: #fff; text-decoration: underline; }
.foot .legal-bar :focus-visible { outline-color: var(--on-night); }
.foot-brand { max-width: 22em; }

/* Cookie choice: a bar at the foot of the page and a settings dialog. Equal weight for refusing and accepting. */
.consent { position: fixed; left: var(--gutter); right: var(--gutter); bottom: 16px; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; max-width: 920px; margin-inline: auto; padding: 14px 18px; background: var(--primary); color: var(--on-night); border-radius: var(--radius); transition: transform .5s var(--spring), opacity .3s; }
.consent[hidden] { display: none; }
.consent.out { transform: translateY(24px); opacity: 0; }
.consent p { margin: 0; font-size: 15px; line-height: 1.5; flex: 1 1 300px; }
.consent a { color: var(--on-night); text-decoration: underline; text-underline-offset: 3px; }
.consent .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.consent .btn { background: var(--on-night); color: var(--primary) !important; }
.consent .btn:hover { background: #fff; }
.linkbtn { min-height: 44px; padding: 0 4px; background: none; border: 0; font: 600 15px/1.3 var(--sans); color: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.consent .linkbtn { color: var(--on-night); }
.consent :focus-visible { outline-color: var(--on-night); }
.cdlg { width: min(520px, 100% - 2 * var(--gutter)); max-height: calc(100dvh - 32px); overflow: auto; padding: 28px; border: 0; border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.cdlg::backdrop { background: rgba(15, 20, 40, .62); }
.cdlg .chead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cdlg h2 { margin: 0; font: 600 20px/1.3 var(--sans); letter-spacing: 0; }
.cdlg .x { width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--ink-2); cursor: pointer; }
.cdlg .intro { margin: 8px 0 20px; color: var(--ink-2); }
.cdlg .crow { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 0 0 14px; padding: 16px; background: var(--paper); }
.cdlg .crow label { display: block; font-weight: 600; margin: 0 0 4px; }
.cdlg .crow p { margin: 0; font-size: 14px; color: var(--ink-2); }
.cdlg input[role="switch"] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 52px; height: 30px; margin: 0; background: #6f695d; border-radius: var(--radius); cursor: pointer; transition: background .2s; }
.cdlg input[role="switch"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: #fff; border-radius: var(--radius); transition: transform .4s var(--spring); }
.cdlg input[role="switch"]:checked { background: var(--primary); }
.cdlg input[role="switch"]:checked::after { transform: translateX(22px); }
.cdlg input[role="switch"]:disabled { opacity: .55; cursor: not-allowed; }
.cdlg .cacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cdlg .cacts .btn { flex: 1 1 auto; padding-inline: 14px; }
.btn.out { background: transparent; color: var(--primary) !important; box-shadow: inset 0 0 0 2px var(--primary); }
.btn.out:hover { background: var(--paper-2); }
.choice { margin: 20px 0 0; }
.choice p { margin: 0 0 14px; font-weight: 600; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .consent, .cdlg input[role="switch"]::after { transition: opacity .2s; } .consent.out { transform: none; } }

/* Contact form */
.doc .lede { font-size: 19px; color: var(--ink-2); margin: 16px 0 28px; }
.form { margin: 8px 0 12px; }
.form .field { margin: 0 0 20px; }
.form label { display: block; font-weight: 600; margin: 0 0 6px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea { display: block; width: 100%; min-height: 48px; padding: 12px 14px; font: 400 16px/1.5 var(--sans); color: var(--ink); background: var(--surface); border: 2px solid #6f695d; border-radius: var(--radius); }
.form textarea { min-height: 160px; resize: vertical; }
.form input[type="file"] { display: block; width: 100%; padding: 10px 0; font: 400 16px/1.5 var(--sans); color: var(--ink); }
.form [aria-invalid="true"] { border-color: var(--held); }
.form .hint { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.form .check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin: 0 0 24px; }
.form .check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--primary); }
.form .check label { font-weight: 400; margin: 0; }
.form .check label a { text-decoration: underline; text-underline-offset: 3px; }
.form .act { margin: 0; }
.form .btn[disabled] { opacity: .6; cursor: progress; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* trap for bots; people never see it */
.form-status { background: var(--surface); border-left: 4px solid var(--primary); padding: 14px 18px; margin: 0 0 24px; color: var(--ink); }
.form-status[data-kind="err"] { border-left-color: var(--held); }
.form-status[data-kind="ok"] { border-left-color: var(--success); }

@media (max-width: 1000px) {
  .nav .hide-sm { display: none; }
  .menu { display: block; }
}
@media (max-width: 900px) {
  .duo, .split, .control .cols, .signoff .wrap { grid-template-columns: 1fr; }
  .cmd li { grid-template-columns: 1fr; }
  .story .cols { columns: 1; }
  .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photos .a, .photos .d { grid-column: span 2; } .photos .b, .photos .c { grid-column: span 1; }
  .trades { columns: 2; }
  .plans { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: 1fr; }
  .foot .cols { grid-template-columns: 1fr 1fr; }
  .foot .cols > :first-child { grid-column: 1 / -1; }
  .faq .qs { grid-template-columns: 1fr; }
  .hero .held, .signoff .held { left: 18%; }
  .page-head .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  :root { --bar: 68px; }
  .top .wrap { gap: 4px; }
  .brand .wm { height: 20px; }
  .nav { gap: 2px; }
  .nav a { padding: 10px 8px; }
  .nav .hide-sm { display: none; }
  .menu .sheet { max-height: calc(100svh - 68px); }
    .nav .btn { padding: 10px 12px; font-size: 14px; }
  .lede { font-size: 18px; }
  .trades { columns: 1; }
  .cta .btn { flex: 1 1 100%; }
  .versus { grid-template-columns: 1fr; }
  .photos { grid-template-columns: 1fr; }
  .photos .a, .photos .b, .photos .c, .photos .d { grid-column: auto; }
  .price-table { grid-template-columns: 1fr; }
  .price-table .cost { text-align: left; }
  .swatches li { grid-template-columns: 48px 1fr auto; }
  .swatches .chip { width: 48px; height: 48px; }
  .swatches span:last-child { grid-column: 2 / -1; }
  .foot .cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .statement .in, .hero .held, .hero-foot > *, .msg.pop, .msg.typing i, .js .cmd li.sel .desc, .card [data-when], .menu[open] .sheet { animation: none !important; }
  .js [data-rise] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Reduced transparency: the header and the dim layer go solid. Increased contrast: a plain edge appears. */
@media (prefers-reduced-transparency: reduce) {
  .top, .top[data-ink="dark"] { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .top { background: var(--paper); } .top[data-ink="dark"] { background: var(--primary); }
  .scrim { background: var(--primary); }
}
@media (prefers-contrast: more) {
  .top, .top[data-ink="dark"] { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .top { background: var(--paper); } .top[data-ink="dark"] { background: var(--primary); }
  .btn.quiet, .menu .sheet { outline: 2px solid currentColor; outline-offset: -2px; }
}
/* Reduced motion keeps the feedback but swaps movement for a short cross-fade. */
@media (prefers-reduced-motion: reduce) {
  .js .menu .sheet, .js .menu[data-open] .sheet { transform: none !important; filter: none !important; transition: opacity .2s, visibility 0s !important; }
  .btn, .btn:active { transform: none !important; }
}

/* ---------- photo credits, printed on the photo (licence: author, licence, link, changes) ---------- */
.cr { position: absolute; left: 0; bottom: 0; max-width: 100%; z-index: 1; display: flex; flex-wrap: wrap; gap: 0 .35em; align-items: center; min-height: 24px; padding: 2px 8px; background: rgba(19, 21, 28, .82); color: #fff; font: 400 12px/1.4 var(--sans); letter-spacing: .01em; }
.cr a { color: #fff; text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; min-height: 24px; }
.cr a:hover { color: #fff; text-decoration-thickness: 2px; }
.msg .cr { font-size: 11px; line-height: 1.3; padding: 1px 6px; min-height: 22px; border-radius: 0 4px 0 4px; }