/* umano site. Tokens and primitives come from the umano visual system frozen on 2026-10-20 (canon-v1):
   palette, Sofia Sans Extra Condensed 600 lowercase, 10 % margin, layered backgrounds, no italics.
   Every size is a share of the section width (cqw), like a plate; the page is a book of plates. */

@font-face { font-family: "Sofia Sans Extra Condensed"; src: url("fonts/sofia-sans-extra-condensed.woff2") format("woff2"); font-weight: 1 1000; font-display: swap; }
@font-face { font-family: "Sofia Sans"; src: url("fonts/sofia-sans.woff2") format("woff2"); font-weight: 1 1000; font-display: swap; }

:root {
  --ink: #33332e;
  --paper: #f7f5f0;
  --blue: #3333ff;
  --lime: #e3fd52;
  --font-impact: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --font-text: "Sofia Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; font-synthesis: none; }
em, i, cite, var, address, dfn { font-style: normal; }  /* italics are banned across the brand */
html { -webkit-text-size-adjust: 100%; background: var(--ink); }
body { margin: 0; font-family: var(--font-text); color: var(--ink); overflow-x: hidden; }
/* the page is the container: 1cqw is 1 % of the screen width, the width of every plate */
main { container-type: inline-size; }
img { display: block; max-width: none; }
a { color: inherit; }

/* modes keep the 75 / 15 / 10 split: surface, signal, second accent */
.mode-light  { --surface: var(--paper); --text: var(--ink);   --signal: var(--blue); }
.mode-dark   { --surface: var(--ink);   --text: var(--paper); --signal: var(--lime); }
.mode-accent { --surface: var(--blue);  --text: var(--paper); --signal: var(--lime); }

/* a section is a plate: a container, so every size below is a share of its width */
.plate {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface);
  color: var(--text);
}
.page { --margin: 10cqw; --gap: 5cqw; padding: var(--margin); }

/* ---------- type roles: phone scale first, wide screens below ---------- */
.t-display { font: 600 19cqw/0.8 var(--font-impact); letter-spacing: -0.012em; margin: 0 0 0 -0.03em; text-wrap: balance; font-kerning: normal; }
.t-voice   { font: 400 6.4cqw/1.05 var(--font-text); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.t-support { font: 500 max(4.6cqw, 15px)/1.3 var(--font-text); letter-spacing: -0.005em; margin: 0; }
.t-small   { font: 400 max(3.6cqw, 13px)/1.35 var(--font-text); margin: 0; }
.lockup { position: relative; z-index: 30; display: flex; flex-direction: column; gap: 3cqw; }
.ink-signal { color: var(--signal); }
.nowrap { white-space: nowrap; }
.hl-ink { background: linear-gradient(transparent 16%, var(--lime) 16%, var(--lime) 97%, transparent 97%); color: var(--ink);
          padding: 0 0.07em; margin-left: -0.07em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- the one call to action ---------- */
.book {
  display: inline-flex; align-items: center; gap: 0.6em; align-self: flex-start;
  background: var(--lime); color: var(--ink); text-decoration: none;
  font: 600 max(4.3cqw, 16px)/1 var(--font-text); letter-spacing: -0.01em; white-space: nowrap;
  padding: 0.95em 1em; min-height: 48px;
  box-shadow: 0.9cqw 0.9cqw 0 var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.book:hover { transform: translate(-0.3cqw, -0.3cqw); box-shadow: 1.2cqw 1.2cqw 0 var(--ink); }
.book:active { transform: translate(0.5cqw, 0.5cqw); box-shadow: 0.3cqw 0.3cqw 0 var(--ink); }
.book:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }

/* ---------- logo: inline svg, colored by the section ---------- */
.logo { position: relative; z-index: 30; display: block; width: 34cqw; height: auto; }
.logo .word { fill: var(--logo-word, var(--paper)); }
.logo .sq { fill: var(--logo-square, var(--paper)); }
.logo .u { fill: var(--logo-u, var(--blue)); }

/* ---------- depth: the background is a stack, never a flat fill ---------- */
/* the mixes are precomputed, not mixed in CSS: Chrome before 111 drops the whole background otherwise */
.depth-strong {
  background:
    radial-gradient(ellipse 62% 48% at var(--lx, 60%) var(--ly, 60%), var(--glow), transparent 72%),
    radial-gradient(ellipse 120% 95% at 50% 45%, transparent 55%, var(--edge) 100%),
    var(--surface);
}
.mode-accent.depth-strong { --glow: #8f8fff; --edge: #20209e; }  /* blue 55 % + white; blue 62 % + black */
.mode-light.depth-strong  { --glow: #ffffff; --edge: #cccac5; }  /* paper 78 % + ink */
.mode-dark.depth-strong   { --glow: #6e6d68; --edge: #1c1c19; }  /* ink 70 % + paper; ink 55 % + black */

.surface-paper::after, .surface-film::after, .surface-photocopy::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.surface-paper::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.2  0 0 0 0 0.18  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 400px; mix-blend-mode: multiply; opacity: 0.26;
}
.surface-film::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 300px; mix-blend-mode: screen; opacity: 0.08;
}
.surface-photocopy::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.2' numOctaves='1'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -9 4.6'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 300px; mix-blend-mode: multiply; opacity: 0.07;
}

/* ---------- figures ---------- */
.cut { position: absolute; z-index: 20; width: auto; height: auto; filter: brightness(0.9) contrast(1.06); pointer-events: none; }
.mode-dark .cut { filter: none; }
.cut.lift { filter: brightness(0.9) contrast(1.06) drop-shadow(-1.2cqw 2cqw 2.2cqw rgb(20 20 18 / 0.42)); }
.mode-dark .cut.lift { filter: drop-shadow(-1.2cqw 2cqw 2.4cqw rgb(0 0 0 / 0.6)); }
.ghost { position: absolute; z-index: 1; margin: 0; white-space: nowrap; pointer-events: none; user-select: none;
         font: 600 60cqw/0.8 var(--font-impact); letter-spacing: -0.02em;
         color: var(--ghost-ink, #4a4afd); }  /* blue 88 % + paper: the only ghost sits on blue */
.tonal { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; fill: none; pointer-events: none;
         stroke: var(--tonal-ink, #5858ff); stroke-linecap: round; }  /* blue 82 % + white */
.tonal path { stroke-width: 1.4cqw; vector-effect: non-scaling-stroke; }
.mark { position: absolute; z-index: 35; overflow: visible; fill: none; stroke: var(--signal); stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.mark path { stroke-width: 0.9cqw; vector-effect: non-scaling-stroke; }

/* =========================================================
   1 · cover: the hook. The statue reads a street map: the strategy comes from the street.
   ========================================================= */
.cover { --lx: 62%; --ly: 78%; min-height: 100svh; display: flex; flex-direction: column; gap: var(--gap); padding-bottom: 0; }
.cover .lockup { gap: 4cqw; }
.cover h1 { font-size: 25cqw; margin-bottom: 0.14em; }
.cover .ghost { left: -6cqw; bottom: 30cqw; }
.cover .figure { position: relative; z-index: 20; margin: auto calc(-1 * var(--margin)) 0 auto; width: 92cqw; height: 104cqw; }
.cover .figure img { width: 100%; right: -6cqw; bottom: -14cqw; }

/* =========================================================
   2 · the noise: the man whose head is a rubber stamp. Same plan for everyone, stamped.
   ========================================================= */
.noise { --lx: 26%; --ly: 70%; min-height: 150cqw; }
.noise .lockup { text-align: right; align-items: flex-end; }
.noise .sealed { position: relative; display: inline-block; color: var(--blue); }
.noise .sealed .mark { left: -9%; top: -14%; width: 118%; height: 128%; }
.noise .aside { position: relative; z-index: 30; margin: 8cqw 0 0 auto; width: 54%; }
.noise .cut { height: 104cqw; left: -4cqw; bottom: -2cqw; }

/* =========================================================
   3 · the filter of real life: a hand holds up the one piece that fits.
   ========================================================= */
.filter { --lx: 74%; --ly: 82%; min-height: 175cqw; }
.filter .steps { position: relative; z-index: 30; margin: 9cqw 0 0; padding: 0; list-style: none; width: 58%; display: flex; flex-direction: column; gap: 6cqw; }
.filter .steps b { display: block; font: 600 9cqw/0.85 var(--font-impact); color: var(--lime); margin-bottom: 1.6cqw; }
.filter .cut { height: 112cqw; right: -2cqw; bottom: -6cqw; }

/* =========================================================
   4 · what we do: the work on the table, seen from above.
   ========================================================= */
.work { --lx: 70%; --ly: 85%; }
.work .aside { position: relative; z-index: 30; margin-top: 8cqw; display: flex; flex-direction: column; gap: 4cqw; max-width: 100%; }
.work .desk { position: relative; z-index: 5; height: auto; width: 110cqw; margin: -4cqw -24cqw -26cqw auto; mix-blend-mode: multiply; filter: contrast(1.04);
              -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%), linear-gradient(90deg, transparent 0, #000 22%);
              -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 24%), linear-gradient(90deg, transparent 0, #000 22%); mask-composite: intersect; }

/* =========================================================
   5 · back cover: the call. A rotary phone, its coiled cord drawn tone on tone.
   ========================================================= */
.call { --lx: 64%; --ly: 26%; min-height: 165cqw; display: flex; flex-direction: column; }
.call .cut { width: 82cqw; right: -14cqw; top: 6cqw; }
.call .lockup { margin-top: auto; padding-top: 86cqw; }
.call .note { opacity: 1; color: var(--paper); }
.call footer { position: relative; z-index: 30; margin-top: 14cqw; display: flex; align-items: center; justify-content: space-between; gap: 4cqw; }
.call footer .logo { width: 30cqw; }

/* =========================================================
   wide screens: same book, the plates turn landscape
   ========================================================= */
@media (min-width: 760px) {
  .page { --margin: min(10cqw, 160px); --gap: 2.4cqw; }
  .t-display { font-size: min(8.6cqw, 150px); }
  .t-voice { font-size: min(2.5cqw, 40px); }
  .t-support { font-size: clamp(17px, 1.45cqw, 24px); }
  .t-small { font-size: clamp(14px, 1.05cqw, 17px); }
  .lockup { gap: 1.4cqw; }
  .book { font-size: clamp(17px, 1.5cqw, 24px); box-shadow: 0.35cqw 0.35cqw 0 var(--ink); }
  .book:hover { transform: translate(-0.15cqw, -0.15cqw); box-shadow: 0.5cqw 0.5cqw 0 var(--ink); }
  .logo { width: min(14cqw, 220px); }
  .mark path { stroke-width: 0.4cqw; }

  .cover { --lx: 80%; --ly: 62%; min-height: max(100svh, 52cqw); padding-bottom: var(--margin); }
  .cover .lockup { width: 56%; gap: 1.8cqw; margin-top: auto; }
  .cover h1 { font-size: min(12cqw, 200px); }
  .cover .ghost { font-size: 34cqw; left: auto; right: -4cqw; bottom: 2cqw; }
  .cover .figure { position: absolute; margin: 0; right: 0; bottom: 0; width: 44cqw; height: 100%; }
  .cover .figure img { width: 46cqw; right: 0; bottom: -8cqw; }

  .noise { min-height: 56cqw; }
  .noise .lockup { width: 62%; margin-left: auto; }
  .noise .aside { width: 38%; margin-top: 3cqw; }
  .noise .cut { height: 54cqw; left: 6cqw; bottom: -1cqw; }

  .filter { min-height: 58cqw; }
  .filter .lockup { width: 70%; }
  .filter .steps { flex-direction: row; width: 74%; gap: 3.4cqw; margin-top: 5cqw; }
  .filter .steps li { flex: 1; }
  .filter .steps b { font-size: 3.6cqw; margin-bottom: 0.8cqw; }
  .filter .cut { height: 50cqw; right: 6cqw; bottom: -4cqw; }

  .work { min-height: 54cqw; }
  .work .lockup, .work .aside { width: 50%; }
  .work .aside { margin-top: 3cqw; gap: 1.6cqw; }
  .work .desk { position: absolute; margin: 0; width: 54cqw; right: -4cqw; bottom: -14cqw; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); -webkit-mask-composite: source-over; mask-composite: add; }

  .call { --lx: 78%; --ly: 36%; min-height: 56cqw; }
  .call .cut { width: 40cqw; right: 4cqw; top: 4cqw; }
  .call .lockup { padding-top: 6cqw; width: 54%; }
  .call footer { margin-top: 6cqw; }
  .call .tonal { opacity: 0.5; }  /* on wide screens the cord runs behind the text: quieter, so the text keeps 4.5:1 */
  .call footer .logo { width: min(12cqw, 200px); }
}

@media (prefers-reduced-motion: reduce) { .book { transition: none; } }