/* ==========================================================================
   Extra Sauce — base: tokens, type, grid, buttons, labels, focus, motion
   Layout: an editorial screening room. Paper reading surfaces, ink screening
   sections, tomato reserved for the brand moment. 12 / 8 / 4 column grid.
   The site commits to one visual world (the brand palette) in every viewer theme.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Colour (brief §10.2) */
  --paper: #F4F0E7;
  --paper-2: #ECE6DA;      /* deeper paper: panels, form step rail */
  --paper-3: #E3DCCD;      /* pressed / selected on paper */
  --ink: #171716;
  --ink-2: #21201E;        /* raised surface on ink, letterbox behind media */
  --ink-3: #2D2C29;        /* hover on ink */
  --tomato: #F04B32;       /* brand fields, large accents, graphics */
  --tomato-deep: #C9341F;  /* tomato for small text on paper (4.6:1) */
  --muted: #6C6961;        /* secondary text on paper (4.8:1) */
  --muted-2: #5E5B54;      /* secondary text on paper-2 */
  --muted-on-ink: #A7A196; /* secondary text on ink (7:1) */
  --rule: #D6D1C7;         /* structural divider on paper */
  --rule-on-ink: #3A3935;
  --field: #8C877D;        /* form-field boundary on paper (3.1:1) */
  --error: #B42318;        /* error text/icon on paper (5.9:1), always paired with an icon + words */
  --ok: #1F6B45;
  --field-bg: #FBF9F4;     /* input + choice fill */
  --error-bg: #FBE9E5;
  --viewer-bg: #0F0F0E;    /* letterbox behind media in the viewer */

  /* Role tokens (re-scoped by .on-ink / .on-tomato) */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--muted);
  --line: var(--rule);
  --focus: var(--ink);
  --accent: var(--tomato);
  --accent-text: var(--tomato-deep);
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-hover-bg: var(--tomato);
  --btn-hover-fg: var(--ink);

  /* Type */
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --t-hero: clamp(2.75rem, 1.264rem + 6.095vw, 6.75rem);      /* 44 → 108 */
  --t-page: clamp(2.5rem, 1.479rem + 4.19vw, 5.25rem);        /* 40 → 84 */
  --t-section: clamp(2rem, 1.35rem + 2.667vw, 3.75rem);       /* 32 → 60 */
  --t-sub: clamp(1.375rem, 1.189rem + 0.762vw, 1.875rem);     /* 22 → 30 */
  --t-lead: clamp(1.125rem, 1.031rem + 0.381vw, 1.375rem);    /* 18 → 22 */
  --t-body: clamp(1rem, 0.93rem + 0.286vw, 1.1875rem);        /* 16 → 19 */
  --t-small: 0.9375rem;                                        /* 15 */
  --t-meta: 0.78125rem;                                        /* 12.5 */
  --wdth-display: 84;   /* Archivo width axis for display type */

  /* Space (brief §10.4) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;
  --section: clamp(64px, 3.3rem + 6.6vw, 144px);  /* 64–88 mobile → 112–160 desktop */

  /* Grid */
  --cols: 12; --gutter: 24px; --margin: 64px; --maxw: 1440px;

  /* Shape + motion */
  --r-media: 10px; --r-sm: 6px; --r-pill: 999px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --header-h: 80px;
}
@media (max-width: 1199px) { :root { --margin: 40px; } }
@media (max-width: 1023px) { :root { --cols: 8; --gutter: 20px; --margin: 32px; } }
@media (max-width: 767px)  { :root { --cols: 4; --gutter: 16px; --margin: 20px; --header-h: 64px; } }

.on-ink {
  --bg: var(--ink); --fg: var(--paper); --fg-2: var(--muted-on-ink); --line: var(--rule-on-ink);
  --focus: var(--paper); --accent-text: var(--tomato);
  --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-hover-bg: var(--tomato); --btn-hover-fg: var(--ink);
  background: var(--bg); color: var(--fg);
}
.on-tomato {
  --bg: var(--tomato); --fg: var(--ink); --fg-2: var(--ink); --line: rgba(23,23,22,.28);
  --focus: var(--ink); --accent-text: var(--ink);
  --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-hover-bg: var(--paper); --btn-hover-fg: var(--ink);
  background: var(--bg); color: var(--fg);
}
.on-paper-2 { --bg: var(--paper-2); --fg-2: var(--muted-2); background: var(--bg); color: var(--fg); }

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--t-body); line-height: 1.55; font-weight: 400;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
body.is-locked { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"], .plain-list { list-style: none; padding: 0; }
::selection { background: var(--tomato); color: var(--ink); }
[hidden] { display: none !important; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Focus ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.site-main:focus, [tabindex="-1"]:focus { outline: none; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: var(--r-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--tomato); outline-offset: 2px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }
.grid > * { min-width: 0; }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .66); }
.stack > * + * { margin-top: var(--stack, 1em); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- Typography ---------- */
.display, .h-hero, .h-page, .h-section {
  font-family: var(--font); font-weight: 720; letter-spacing: -0.022em;
  font-variation-settings: "wdth" var(--wdth-display); text-wrap: balance;
}
.h-hero { font-size: var(--t-hero); line-height: 0.98; letter-spacing: -0.028em; }
.h-page { font-size: var(--t-page); line-height: 1.0; letter-spacing: -0.026em; }
.h-section { font-size: var(--t-section); line-height: 1.06; }
.h-sub { font-size: var(--t-sub); line-height: 1.18; font-weight: 640; letter-spacing: -0.012em; font-variation-settings: "wdth" 92; text-wrap: balance; }
.h-card { font-size: 1.1875rem; line-height: 1.25; font-weight: 620; letter-spacing: -0.008em; font-variation-settings: "wdth" 94; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--fg); max-width: 34em; text-wrap: pretty; }
.body { font-size: var(--t-body); line-height: 1.6; max-width: 36em; text-wrap: pretty; }
.small { font-size: var(--t-small); line-height: 1.5; }
.muted { color: var(--fg-2); }
.measure { max-width: 36em; }

/* Mono metadata — short labels only */
.label, .meta {
  font-family: var(--mono); font-size: var(--t-meta); line-height: 1.4; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-2);
}
.meta { text-transform: none; letter-spacing: 0.01em; font-weight: 400; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg);
}
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }

.text-link {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color 160ms var(--ease);
}
.text-link:hover { text-decoration-color: currentColor; }

/* Arrow link: onward actions ("Explore all work ↗") */
.arrow-link {
  display: inline-flex; align-items: center; gap: 10px; position: relative;
  font-weight: 600; font-size: 1.0625rem; text-decoration: none; color: inherit;
  border-bottom: 1.5px solid currentColor; padding-bottom: 2px; min-height: 0; line-height: 1.3;
}
.arrow-link::after { content: ""; position: absolute; inset: -10px -6px; } /* 44px hit area; the underline stays tight */
.arrow-link .icon { width: 18px; height: 18px; transition: transform 160ms var(--ease); }
.arrow-link:hover .icon { transform: translate(2px, -2px); }
.arrow-link--back:hover .icon { transform: translateX(-3px); }
.arrow-link-wrap { display: inline-flex; min-height: 44px; align-items: center; }

/* ---------- Icons ---------- */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }

/* ---------- Buttons (brief §10.6) ---------- */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 24px; border-radius: var(--r-pill);
  font-family: var(--font); font-size: 1.0625rem; font-weight: 600; line-height: 1; letter-spacing: -0.005em;
  font-variation-settings: "wdth" 100; text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent; position: relative; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease), transform 120ms var(--ease);
}
.btn .icon { width: 18px; height: 18px; transition: transform 160ms var(--ease); }
.btn:hover .icon { transform: translate(2px, -2px); }
.btn:hover .icon--down { transform: translateY(2px); }
.btn:hover .icon--right { transform: translateX(3px); }
.btn:hover .icon--left { transform: translateX(-3px); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--primary:hover { background: var(--btn-hover-bg); color: var(--btn-hover-fg); }
.btn--secondary { background: transparent; color: var(--fg); border-color: currentColor; }
.btn--secondary:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--ghost { background: transparent; color: var(--fg); padding-inline: 4px; }
.btn--ghost:hover { text-decoration: underline; text-underline-offset: .2em; }
.btn--sm { --h: 44px; padding: 0 18px; font-size: 1rem; }
.btn--xs { --h: 44px; padding: 0 16px; font-size: 1rem; }
.btn--lg { --h: 60px; padding: 0 30px; font-size: 1.125rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn[disabled]:hover { background: var(--btn-bg); color: var(--btn-fg); }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--btn-fg); border-right-color: transparent; animation: spin 700ms linear infinite;
}
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Status + format labels (brief §7.5) ---------- */
.status {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--mono); font-size: var(--t-meta); font-weight: 500; letter-spacing: 0.03em; line-height: 1;
  padding: 6px 9px 6px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--fg);
}
.status__glyph { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.status--client .status__glyph { background: currentColor; }
.status--demo .status__glyph { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.status--concept .status__glyph { border-style: dashed; }
.tag {
  display: inline-flex; align-items: center; font-family: var(--mono); font-size: var(--t-meta); line-height: 1;
  letter-spacing: 0.02em; padding: 6px 8px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg);
}
.provisional {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  font-family: var(--mono); font-size: var(--t-meta); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1;
  padding: 4px 6px; border-radius: 3px; border: 1px dashed currentColor; color: var(--fg-2); white-space: nowrap;
}

/* ---------- Wordmark: "extra" takes the extra width ---------- */
.wordmark { display: inline-flex; align-items: baseline; font-family: var(--font); font-weight: 820; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.wordmark__x { font-variation-settings: "wdth" 125; letter-spacing: -0.01em; }
.wordmark__s { font-variation-settings: "wdth" 62; letter-spacing: -0.01em; margin-left: 0.035em; }

/* ---------- Signature gesture: the swipe ---------- */
.swipe-word { position: relative; display: inline-block; white-space: nowrap; z-index: 0; }
.swipe { position: absolute; left: -2%; right: -3%; bottom: -0.06em; height: 0.32em; width: 105%; z-index: -1; color: var(--tomato); overflow: visible; }
.swipe path { fill: currentColor; }
.swipe--draw { clip-path: inset(0 100% 0 0); animation: swipe-draw 700ms 420ms var(--ease-out) forwards; }
@keyframes swipe-draw { to { clip-path: inset(0 0 0 0); } }

/* ---------- Motion: entrances from a visible resting state ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rise-sm { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.intro > * { animation: rise 560ms var(--ease-out) both; }
.intro > *:nth-child(2) { animation-delay: 50ms; }
.intro > *:nth-child(3) { animation-delay: 100ms; }
.intro > *:nth-child(4) { animation-delay: 150ms; }
.intro > *:nth-child(5) { animation-delay: 200ms; }
.reveal.is-in { animation: rise 420ms var(--ease-out) both; }
.reveal.is-in.reveal--d1 { animation-delay: 60ms; }
.reveal.is-in.reveal--d2 { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .swipe--draw { clip-path: none; }
}