/* =====================================================================
   doubleA foundation — shared site styles (every page links to this file)

   Contents:  variables & base · top bar + mobile menu · hero (+ "short" variant) ·
              objective blocks (ASCII-video numeral + title + text, one big link) ·
              text-page blocks (.sec / .txt) · ASCII rule · footer + social icons ·
              small screens.
   Page-specific styles stay in a small <style> block in each page.
   Pairs with assets/ascii.js (the ASCII engine, text effects, menu).
   ===================================================================== */

/* ---- Fonts, self-hosted (no requests to Google). Montserrat and Geist Mono are variable fonts under the SIL Open Font License; one file per
        script subset covers every weight used here. "latin" is loaded for normal text; "latin-ext" only if a page uses such characters. ---- */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/montserrat-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-mono-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }


:root {
  --red: #f20000;
  --ink: #111;
  --muted: #6a6a6a;
  --line: #e4e4e4;
  --pad: clamp(20px, 5vw, 72px);
  --sans: Montserrat, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--sans); font-weight: 300; font-size: 17px; line-height: 1.55; }
a { color: var(--red); text-decoration: none; }
h1, h2, h3, p { margin: 0; }

/* Tracked-caps label with a red square (from the brand guide), set in the same mono as the ASCII glyphs. */
.eyebrow { font: 500 14px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--red); flex: none; }

.link { display: inline-block; font-size: 16px; border-bottom: 1px solid rgba(242, 0, 0, .35); padding-bottom: 2px; transition: border-color .2s; }
.link:hover { border-color: var(--red); }

.dc.scr { font-family: var(--mono); color: var(--red); font-weight: 400; text-align: center; }
.dc { display: inline-block; text-align: left; }
h1 .dc.scr, h2 .dc.scr, h3 .dc.scr { line-height: 0; }   /* the mono scramble glyphs must not enlarge the line box (they have other font metrics than Montserrat), or the text block grows by up to 1.5 px while it scrambles and the eyebrow above it bobs */
.gz .dc.scr { font-size: .85em; }   /* garbled words inside body text: glyphs a touch smaller than in headings */   /* settled letters sit exactly where the real text puts them */

/* ------------------------------ top bar: mono wordmark + mono navigation ------------------------------ */
.bar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 76px; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.bar.scrolled { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.wm { display: flex; align-items: flex-end; gap: 12px; color: var(--ink); }
.wm-name { display: inline-flex; align-items: flex-end; font: 300 31px/1 var(--sans); letter-spacing: -.02em; }
.wm-a { display: inline-block; width: 1.22em; height: 1.31em; margin: 0 0 -.2em .05em; background: var(--red); -webkit-mask: url(a-mark.svg) center / contain no-repeat; mask: url(a-mark.svg) center / contain no-repeat; }
.nav { display: flex; gap: clamp(20px, 3vw, 44px); }
.nav a { position: relative; padding: 12px 0 12px 15px; font: 500 14px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: pre; }
.nav a::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--red); transform: scale(0); transition: transform .18s; }
.nav a:hover::before, .nav a:focus-visible::before { transform: scale(1); }
.menu-btn { display: none; font: 500 14px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; background: none; border: 0; color: var(--ink); padding: 14px 0; cursor: pointer; }
.menu-btn span { color: var(--red); margin-left: 6px; }
.sheet { position: fixed; inset: 0; z-index: 25; background: #fff; padding: 110px var(--pad) 40px; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.sheet[hidden] { display: none; }
.sheet a { display: flex; align-items: baseline; gap: 18px; font-weight: 300; font-size: clamp(2rem, 9vw, 3.2rem); line-height: 1.2; color: var(--ink); padding: 8px 0; }
.sheet a i { font: 500 14px/1 var(--mono); font-style: normal; letter-spacing: .14em; color: var(--red); }

.nav a[aria-current="page"]::before { transform: scale(1); }   /* the current page's square stays lit */

/* ------------------------------ hero: full-bleed ASCII picture, text low inside it ------------------------------ */
.hero { position: relative; min-height: max(100svh, 500px); padding: 112px var(--pad) clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #fff; }
#heroCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 56%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 2%, #000 20%, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 12%, #000 56%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 2%, #000 20%, #000 74%, transparent 100%);
          mask-composite: intersect;
}
#heroCanvas.ready { opacity: 1; }
.copy { position: relative; z-index: 2; width: fit-content; max-width: min(900px, 90vw); margin-bottom: clamp(72px, 13svh, 140px); }
/* a very light, wide white veil behind the text: it only takes the edge off the glyphs (no visible patch) */
.copy::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -72px -170px -64px -110px;
  background: radial-gradient(closest-side at 50% 50%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .47) 25%, rgba(255, 255, 255, .36) 45%, rgba(255, 255, 255, .2) 65%, rgba(255, 255, 255, .07) 83%, rgba(255, 255, 255, 0) 100%);
}
.copy .eyebrow { margin-bottom: 24px; }
/* the two messages share one grid cell, so the block keeps the height of the longer one and nothing jumps */
h1 { display: grid; font-weight: 300; font-size: clamp(1.75rem, 3vw, 2.9rem); line-height: 1.14; letter-spacing: -.012em; }
h1 .msg { grid-area: 1 / 1; }
h1 .msg.off { visibility: hidden; }
h1 em { font-style: normal; color: var(--red); white-space: nowrap; }   /* names never split across lines */

/* hero variant for inner pages (add class "short"): half height, picture only on the right 62 %, fading out on all four sides */
.hero.short { min-height: max(50svh, 440px); }
.hero.short #heroCanvas { left: auto; width: 62%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%, #000 66%, transparent 100%), linear-gradient(180deg, transparent 0, #000 28%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0, #000 32%, #000 66%, transparent 100%), linear-gradient(180deg, transparent 0, #000 28%, #000 72%, transparent 100%);
          mask-composite: intersect; }
.hero.short .copy { margin-bottom: clamp(48px, 9svh, 96px); }

.objs { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
/* objective block: one big link = small ASCII-video numeral + title + text in a left-aligned column (also used for "What we make") */
.obj { display: grid; grid-template-columns: 136px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 20px; align-items: start; color: var(--ink); }
.obj > * { grid-column: 2; }
.num { grid-column: 1; grid-row: 1 / span 2; display: block; width: 136px; aspect-ratio: 2 / 1; margin: 4px 0 0; }
.obj h3 { font-weight: 300; font-size: clamp(1.4rem, 1.8vw, 1.75rem); line-height: 1.15; letter-spacing: -.01em; margin-bottom: .35em; transition: color .2s; }
/* the hover arrow takes no layout space (zero-width box, overflow visible), so it can never push a title onto a second line */
.obj h3::after { content: " \2192"; white-space: pre; width: 0; overflow: visible; color: var(--red); opacity: 0; display: inline-block; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.obj p { font-size: clamp(16px, 1.15vw, 17px); line-height: 1.5; }
.obj:hover, .obj:focus-visible { outline: none; }
.obj:hover h3, .obj:focus-visible h3 { color: var(--red); }
.obj:hover h3::after, .obj:focus-visible h3::after { opacity: 1; transform: none; }
/* ------------------------------ text pages: sections and one text style ------------------------------ */
.sec { padding: clamp(56px, 7vw, 104px) var(--pad) 0; }
.sec:last-of-type { padding-bottom: clamp(64px, 8vw, 120px); }
.sec .eyebrow { margin-bottom: 28px; }
.txt { max-width: 40em; font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.55; }
.txt p + p, .txt p + ul, .txt ul + p { margin-top: 1.1em; }
.txt a { border-bottom: 1px solid rgba(242, 0, 0, .35); transition: border-color .2s; }
.txt a:hover { border-color: var(--red); }
.txt ul { list-style: none; margin: 0; padding: 0; }
.muted { color: var(--muted); }

/* ------------------------------ backdrop: a very faint still ASCII picture behind the page text ------------------------------ */
/* <div class="backdrop" aria-hidden="true"><canvas data-ascii data-image="assets/x.jpg" data-preset="whisper"></canvas></div> right after <body>.
   It sits at the top right of the page (scrolls with it), is strongest at the right edge and fades out linearly to the left and downwards.
   Tune the strength with --backdrop-opacity (default .55) and the preset's `ink`; sections above it must not have a solid background. */
.backdrop { position: absolute; z-index: -1; top: 0; right: 0; width: min(64vw, 1000px); height: 130svh; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 100%), linear-gradient(180deg, #000 0, transparent 100%);   /* plain linear fades: right edge → left, top → bottom */
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0, #000 100%), linear-gradient(180deg, #000 0, transparent 100%);
          mask-composite: intersect; }
.backdrop canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 2.4s ease; }
.backdrop canvas.ready { opacity: var(--backdrop-opacity, .55); }

/* ------------------------------ ASCII rule ------------------------------ */
.rule { margin: 0; padding: 0 var(--pad); font: 400 14px/1 var(--mono); color: var(--red); white-space: pre; overflow: hidden; user-select: none; }

/* ------------------------------ footer ------------------------------ */
footer { padding: 30px var(--pad) 44px; display: flex; justify-content: flex-end; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 15px; color: var(--muted); }
footer nav { display: flex; gap: 12px 28px; flex-wrap: wrap; }
footer nav a { color: var(--ink); }
footer nav a:hover { color: var(--red); }
/* social icons: outline style, ink colour, red on hover; 44 px tap target, drawn 24 px */
.social { display: flex; gap: 4px; margin-left: -13.5px; margin-right: auto; }   /* optical: cancels the tap-target padding and the icon glyph's own inset, so the drawn edge sits on the page's left edge */
.social a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); transition: color .2s; }
.social a:hover, .social a:focus-visible { color: var(--red); }
.social svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------ small screens ------------------------------ */
@media (max-width: 899px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .hero { min-height: 0; padding-top: 96px; }
  /* phones: the picture fills about the top half of the screen (the sides are cropped by the cover fit) */
  #heroCanvas { inset: 0 0 auto 0; height: 64svh;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 62%, transparent 92%); -webkit-mask-composite: source-over;
            mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 62%, transparent 92%);         mask-composite: add; }
  .copy { margin-top: 30svh; margin-bottom: 40px; }
  h1 br.d { display: none; }   /* fixed line breaks are desktop-only; phones wrap naturally */
  .eyebrow { letter-spacing: .08em; }
  .objs { grid-template-columns: 1fr; gap: 38px; margin-top: 44px; }
  .obj { grid-template-columns: 112px minmax(0, 1fr); column-gap: 18px; }
  .num { width: 112px; aspect-ratio: 4 / 3; margin: 0; }
}

/* backdrop on small screens: full width, shorter */
@media (max-width: 899px) {
  .backdrop { width: 100%; height: 70svh; }
}

/* the "short" hero on small screens: the picture becomes a band at the top that fades downward */
@media (max-width: 899px) {
  .hero.short { min-height: 0; }
  .hero.short #heroCanvas { left: 0; width: 100%; height: 66svh;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 40%, transparent 64%); -webkit-mask-composite: source-over;
            mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 40%, transparent 64%);         mask-composite: add; }
  .hero.short .copy { margin-bottom: 40px; }
}