/* ==========================================================================
   bursusofts.com
   --------------------------------------------------------------------------
   Two grounds, alternating: INK is the drafting board the studio works on,
   PAPER is the spec sheet it produces. Every section is one or the other, and
   nothing floats in between — which is what lets the type stay quiet and the
   studio's thesis be the loudest thing on the page. Corners are sharp (4px),
   as on bursucm.com: the two sites are one family without being one site.
   ========================================================================== */

/* ── Fonts ─────────────────────────────────────────────────────────────────
   Self-hosted, subset by unicode-range, no request to anyone else's server.
   Latin and Latin-Extended only: the site is English, and a reader downloads
   three files to see the first screen. Generated from Google's own metadata —
   regenerate rather than hand-edit if a family is added. */

@font-face {
    font-family: 'Geologica';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/assets/fonts/geologica-latin-300700.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: 'Geologica';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/assets/fonts/geologica-latin-ext-300700.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-400700.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: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext-400700.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/plexmono-latin-400.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: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/plexmono-latin-600.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: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/plexmono-latin-ext-400.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/plexmono-latin-ext-600.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */

:root {
    /* Ink: the drafting board the studio works on. Blue-shifted rather than neutral, so the
       signal colours read as belonging to it instead of sitting on top of it. */
    --ink: #0b1020;
    --ink-2: #10182b;
    --ink-3: #172038;
    --ink-line: #232e4a;
    --ink-text: #e9eef8;
    --ink-muted: #93a7c4;

    /* Paper: the sheet it produces. */
    --paper: #eef1f6;
    --sheet: #ffffff;
    --paper-line: #d5dbe7;
    --paper-text: #121a2c;
    --paper-muted: #4f5c78;

    /* Signal: the three stops of the BURSUsofts mark, used as roles, never across text. */
    --signal: #45c7f4;
    --deep: #4f63ec;
    --deep-hover: #6073f0;
    --violet: #8062ee;
    --ember: #f0a73b;
    --ok: #3ccf8e;
    --ok-paper: #0f7a4c;

    --font-display: 'Geologica', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

    /* Sharp, as on bursucm.com: one 4px radius for objects, 2px for small labels. */
    --r: 4px;
    --shell: 1200px;
    --gutter: 24px;
    color-scheme: dark;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
/* Selectors are single-class throughout. Nothing is scoped by element under a section class,
   because a `.band p` rule and a `.prose p` rule cancelling each other out is the failure mode
   this file is shaped to avoid. */

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* The masthead is sticky, so an in-page anchor would otherwise land under it. */
    scroll-padding-top: 84px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--ink-text);
    font: 16.5px/1.62 var(--font-body);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
/* `hidden` must win over a component's own display (a .btn is inline-flex). */
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

.shell { width: min(100% - var(--gutter) * 2, var(--shell)); margin-inline: auto; }

.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
    position: absolute; left: 12px; top: -60px; z-index: 60;
    padding: 10px 16px; border-radius: var(--r);
    background: var(--deep); color: #fff; font-weight: 600; text-decoration: none;
    transition: top .15s ease;
}
.skip:focus { top: 12px; }

.inline-link { color: var(--signal); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(69, 199, 244, .4); }
.inline-link:hover { border-bottom-color: var(--signal); }
.on-paper .inline-link { color: var(--deep); border-bottom-color: rgba(79, 99, 236, .35); }
.on-paper .inline-link:hover { border-bottom-color: var(--deep); }

.pill {
    display: inline-block; margin-inline-start: 6px; padding: 1px 6px 2px; border-radius: 2px;
    font: 600 10.5px/1.4 var(--font-mono); letter-spacing: .05em; vertical-align: 1px;
}
.pill-beta { background: rgba(240, 167, 59, .14); border: 1px solid rgba(240, 167, 59, .42); color: var(--ember); }

/* ── Masthead ────────────────────────────────────────────────────────────── */

.masthead {
    position: sticky; top: 0; z-index: 30;
    background: rgba(11, 16, 32, .88);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ink-line);
}
.masthead-inner { display: flex; align-items: center; gap: 28px; min-height: 64px; }

.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 18px/1 var(--font-display); letter-spacing: -0.01em; color: var(--ink-text); }
.wordmark b { font-weight: 300; }
.mark {
    width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r); color: #fff;
    background: linear-gradient(135deg, var(--signal), var(--deep) 55%, var(--violet));
}

.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nav-burger { display: none; }

.masthead-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.masthead-nav a {
    text-decoration: none; font-size: 14.5px; color: var(--ink-muted);
    padding: 8px 12px; border-radius: var(--r);
    transition: color .15s, background-color .15s;
}
.masthead-nav a:hover { color: var(--ink-text); background: var(--ink-3); }
.masthead-nav a[aria-current="page"] { color: var(--ink-text); box-shadow: inset 0 -2px 0 var(--signal); border-radius: 0; }
.masthead-nav a.nav-cta { margin-left: 10px; color: #fff; background: var(--deep); box-shadow: none; border-radius: var(--r); }
.masthead-nav a.nav-cta:hover { background: var(--deep-hover); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 20px; border-radius: var(--r);
    font: 600 15px/1 var(--font-body); text-decoration: none; cursor: pointer;
    border: 1px solid transparent; background: transparent;
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--deep); color: #fff; }
.btn-primary:hover { background: var(--deep-hover); }
.btn-quiet { border-color: var(--ink-line); color: var(--ink-text); }
.btn-quiet:hover { border-color: var(--ink-muted); }
.on-paper .btn-quiet { border-color: var(--paper-line); color: var(--paper-text); }
.on-paper .btn-quiet:hover { border-color: var(--paper-muted); }
.btn-quiet.is-done { border-color: var(--ok); color: var(--ok); }

/* ── Hero: the studio's thesis, and the mark drawn as a construction ─────── */

.hero { position: relative; padding-block: 88px 96px; overflow: hidden; border-bottom: 1px solid var(--ink-line); }
.hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(var(--ink-line) 1px, transparent 1px), linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
    background-size: 32px 32px; opacity: .3;
    -webkit-mask-image: radial-gradient(ellipse 60% 80% at 80% 40%, #000 15%, transparent 70%);
    mask-image: radial-gradient(ellipse 60% 80% at 80% 40%, #000 15%, transparent 70%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; align-items: center; }
.hero-copy { min-width: 0; }
.hero-kicker { font: 400 13px/1.4 var(--font-mono); color: var(--signal); margin: 0 0 24px; }
.hero-title {
    font: 600 clamp(38px, 5.2vw, 72px)/1.02 var(--font-display); letter-spacing: -0.035em;
    margin: 0 0 28px; max-width: 13em; text-wrap: balance;
}
.hero-lead { color: var(--ink-muted); font-size: 18px; max-width: 36em; margin: 0 0 34px; }
.hero-lead strong { color: var(--ink-text); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.blueprint { width: 100%; max-width: 420px; margin-left: auto; color: var(--ink-line); }
.bp-bolt { fill: url(#boltFill); stroke: var(--signal); stroke-width: .22; stroke-linejoin: round; }
.bp-vertices circle { fill: var(--ink); stroke: var(--signal); stroke-width: 1; }
.blueprint text { font: 400 9.5px var(--font-mono); fill: var(--ink-muted); }

/* The one orchestrated moment: the thesis rises and the mark is drawn, once, on load. Both start
   from their finished state when motion is reduced, so the first frame is always complete. */
@media (prefers-reduced-motion: no-preference) {
    .hero-title { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
    .hero-lead { animation: rise .7s .1s cubic-bezier(.2, .7, .2, 1) both; }
    .bp-bolt { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s .25s cubic-bezier(.6, 0, .2, 1) forwards; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── Bands ───────────────────────────────────────────────────────────────── */

.band { padding-block: 96px; }
.on-paper { background: var(--paper); color: var(--paper-text); }
.band-alt { background: var(--ink-2); border-block: 1px solid var(--ink-line); }

.band-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: end; margin-bottom: 48px; }
.band-head h2 { font: 600 clamp(30px, 3.6vw, 48px)/1.08 var(--font-display); letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.band-head p { margin: 0; font-size: 17.5px; color: var(--ink-muted); max-width: 38em; }
.on-paper .band-head p { color: var(--paper-muted); }
.band-more { margin: 28px 0 0; }
.band-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* What the studio does */
.lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink-line); }
.line { padding: 30px 32px 8px 0; border-right: 1px solid var(--ink-line); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.line + .line { padding-left: 32px; }
.line:last-child { border-right: 0; padding-right: 0; }
.line h3 { font: 600 22px/1.25 var(--font-display); letter-spacing: -0.015em; margin: 0; }
.line p { margin: 0; color: var(--ink-muted); font-size: 15.5px; }
.line a { margin-top: auto; padding-top: 10px; color: var(--signal); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.line a:hover { text-decoration: underline; }
.line-icon { width: 40px; height: 40px; border: 1px solid var(--ink-line); border-radius: var(--r); display: grid; place-items: center; color: var(--signal); }

/* Portfolio */
.tag { display: inline-flex; align-items: center; gap: 8px; font: 400 12.5px/1.2 var(--font-mono); color: var(--paper-muted); }
.tag-flag { color: var(--deep); border: 1px solid rgba(79, 99, 236, .35); padding: 5px 8px; border-radius: 2px; width: fit-content; }

.flagship { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--sheet); border: 1px solid var(--paper-line); border-radius: var(--r); overflow: hidden; }
.flagship-copy { padding: 40px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.flagship-copy h3 { font: 600 34px/1.1 var(--font-display); letter-spacing: -0.025em; margin: 0; }
.flagship-copy p { margin: 0; color: var(--paper-muted); }
.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--paper-line); margin: 6px 0; }
.kv div { padding: 14px 12px 14px 0; }
.kv div + div { padding-left: 14px; border-left: 1px solid var(--paper-line); }
.kv b { display: block; font: 600 24px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--paper-text); font-variant-numeric: tabular-nums; }
.kv span { font-size: 13px; color: var(--paper-muted); }
.flagship-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.flagship-shot { position: relative; min-height: 360px; background: var(--paper); border-left: 1px solid var(--paper-line); overflow: hidden; }
.flagship-shot img {
    position: absolute; left: 40px; top: 40px; width: 960px; max-width: none;
    border: 1px solid var(--paper-line); border-radius: var(--r); box-shadow: 0 24px 60px -30px rgba(18, 26, 44, .45);
}

.parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.part { background: var(--sheet); border: 1px solid var(--paper-line); border-radius: var(--r); padding: 26px 28px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: start; }
.part .tag, .part h4, .part p { grid-column: 2; }
.part h4 { font: 600 20px/1.2 var(--font-display); margin: 0; }
.part p { margin: 0; color: var(--paper-muted); font-size: 15px; }
.part-icon { grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--paper-line); display: grid; place-items: center; color: var(--deep); }

/* For organisations */
.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.offer { border: 1px solid var(--ink-line); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 10px; background: var(--ink); min-width: 0; }
.offer h3 { font: 600 19px/1.3 var(--font-display); margin: 0; }
.offer p { margin: 0; color: var(--ink-muted); font-size: 15px; }

/* "Available now" is a filled dot, "On request" an empty one: the state is in the shape as well as
   in the colour and the words. */
.status { display: inline-flex; align-items: center; gap: 7px; font: 400 12px/1 var(--font-mono); color: var(--ink-muted); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.status.is-now { color: var(--ok); }
.status.is-now::before { background: currentColor; }
.on-paper .status { color: var(--paper-muted); }
.on-paper .status.is-now { color: var(--ok-paper); }

/* Record and principles */
.record { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--ink-line); margin-bottom: 56px; }
.record div { padding: 26px 20px 26px 0; min-width: 0; }
.record div + div { padding-left: 24px; border-left: 1px solid var(--ink-line); }
.record b { display: block; font: 600 clamp(28px, 3vw, 40px)/1.05 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.record span { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-muted); }

.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.rule { padding: 26px 0 30px; border-top: 1px solid var(--ink-line); min-width: 0; }
.rule-key { font: 400 12.5px/1.3 var(--font-mono); color: var(--signal); margin: 0 0 10px; }
.rule h2, .rule h3 { font: 600 20px/1.3 var(--font-display); letter-spacing: -0.01em; margin: 0 0 8px; text-wrap: balance; }
.rule p { margin: 0; color: var(--ink-muted); font-size: 15.5px; }
.rules-paper .rule { border-top-color: var(--paper-line); }
.rules-paper .rule-key { color: var(--deep); }
.rules-paper .rule p { color: var(--paper-muted); }
.rules-paper .rule h2 { font-size: 22px; }

/* Shipping now */
.shipping { border-bottom: 1px solid var(--ink-line); background: var(--ink-2); }
.shipping-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-block: 18px; font-size: 13.5px; color: var(--ink-muted); }
.shipping-inner strong { color: var(--ink-text); font-weight: 600; }
.ship-version { font: 600 13px/1 var(--font-mono); color: var(--signal); font-variant-numeric: tabular-nums; }
.shipping-inner > a { margin-left: auto; color: var(--signal); text-decoration: none; font: 400 12.5px/1.4 var(--font-mono); }
.shipping-inner > a:hover { text-decoration: underline; }

/* Contact band and channels */
.contact-band { padding-block: 88px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
.contact-grid h2 { font: 600 clamp(30px, 3.2vw, 42px)/1.1 var(--font-display); letter-spacing: -0.03em; margin: 0 0 16px; }
.contact-lead { color: var(--ink-muted); margin: 0 0 24px; max-width: 30em; }
.channels { display: grid; border-top: 1px solid var(--ink-line); }
.channel { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--ink-line); }
.channel-key { font: 400 12.5px/1.7 var(--font-mono); color: var(--signal); }
.channel h2, .channel h3 { font: 600 17px/1.35 var(--font-display); margin: 0 0 4px; }
.channel p { margin: 0; color: var(--ink-muted); font-size: 15px; }
.channels-paper { border-top-color: var(--paper-line); }
.channels-paper .channel { border-bottom-color: var(--paper-line); padding-block: 28px; }
.channels-paper .channel-key { color: var(--deep); }
.channels-paper .channel h2 { font-size: 21px; }
.channels-paper .channel p { color: var(--paper-muted); font-size: 16px; max-width: 46em; }

/* Closing call */
.close { padding-block: 72px; border-top: 1px solid var(--ink-line); }
.close-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.close-grid h2 { font: 600 clamp(26px, 2.6vw, 34px)/1.15 var(--font-display); letter-spacing: -0.02em; margin: 0 0 10px; }
.close-grid p { margin: 0; color: var(--ink-muted); max-width: 42em; }
.close-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Inner pages ─────────────────────────────────────────────────────────── */

.page-head { padding-block: 80px 64px; border-bottom: 1px solid var(--ink-line); }
.page-kicker { font: 400 13px/1.4 var(--font-mono); color: var(--signal); margin: 0 0 18px; }
.page-title { font: 600 clamp(34px, 4.4vw, 56px)/1.06 var(--font-display); letter-spacing: -0.035em; margin: 0; max-width: 18em; text-wrap: balance; }
.page-lead { color: var(--ink-muted); font-size: 18px; max-width: 42em; margin: 18px 0 0; }

/* Products */
.prod { padding-block: 88px; }
.prod-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.prod-copy { min-width: 0; }
.prod-copy h2 { font: 600 clamp(30px, 3.2vw, 42px)/1.08 var(--font-display); letter-spacing: -0.03em; margin: 14px 0 16px; }
.prod-lead { font-size: 18.5px; line-height: 1.5; margin: 0 0 16px; }
.prod-text { margin: 0 0 16px; color: var(--paper-muted); }
.spec { margin: 20px 0 26px; border-top: 1px solid var(--paper-line); }
.spec div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--paper-line); font-size: 14.5px; }
.spec dt { font: 400 12.5px/1.7 var(--font-mono); color: var(--paper-muted); }
.spec dd { margin: 0; }
.spec dd.mono { font: 600 14px/1.6 var(--font-mono); color: var(--deep); font-variant-numeric: tabular-nums; }
.shot { margin: 0; min-width: 0; border: 1px solid var(--paper-line); border-radius: var(--r); background: var(--sheet); overflow: hidden; box-shadow: 0 24px 60px -32px rgba(18, 26, 44, .35); }
.shot-bar { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--paper-line); font: 400 12px/1.4 var(--font-mono); color: var(--paper-muted); }
.shot-bar b { color: var(--deep); font-weight: 600; }
.comp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.comp article { background: var(--sheet); border: 1px solid var(--paper-line); border-radius: var(--r); padding: 26px 28px; min-width: 0; }
.comp h3 { font: 600 20px/1.3 var(--font-display); margin: 8px 0 8px; }
.comp p { margin: 0; color: var(--paper-muted); font-size: 15px; }

/* Solutions */
.sol-list { display: grid; border-top: 1px solid var(--paper-line); }
.sol { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr); gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--paper-line); align-items: start; }
.sol h2 { font: 600 22px/1.25 var(--font-display); letter-spacing: -0.015em; margin: 8px 0 0; }
.sol p { margin: 0 0 10px; color: var(--paper-muted); }
.sol ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; }
.sol li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; }
.sol li::before { content: ""; width: 6px; height: 6px; margin-top: .6em; background: var(--deep); border-radius: 1px; }
.sol .sol-side { font-size: 14px; margin: 0; }

/* A real sequence, so it is numbered — by the list, not by hand. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step { border-top: 2px solid var(--signal); padding-top: 18px; counter-increment: step; }
.step::before { content: counter(step); font: 600 13px/1 var(--font-mono); color: var(--signal); }
.step h3 { font: 600 19px/1.3 var(--font-display); margin: 10px 0 6px; }
.step p { margin: 0; color: var(--ink-muted); font-size: 15px; }

/* Engineering: the delivery table */
.table-wrap { overflow-x: auto; border: 1px solid var(--ink-line); border-radius: var(--r); }
.channels-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.channels-table th, .channels-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--ink-line); vertical-align: top; }
.channels-table thead th { font: 400 12.5px/1.4 var(--font-mono); color: var(--ink-muted); background: var(--ink); }
.channels-table tbody tr:last-child th, .channels-table tbody tr:last-child td { border-bottom: 0; }
.channels-table tbody th { font: 600 15px/1.4 var(--font-display); white-space: nowrap; }
.channels-table td { color: var(--ink-muted); }
.cell-mono { font-family: var(--font-mono); font-size: 13.5px; }

/* About: record + feeds */
.feeds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feed { border: 1px solid var(--ink-line); border-radius: var(--r); padding: 24px; background: var(--ink); }
.feed h2 { font: 600 19px/1.3 var(--font-display); margin: 0 0 10px; }
.feed p { margin: 0; color: var(--ink-muted); font-size: 15px; }
.feed .feed-count { font: 600 22px/1.2 var(--font-mono); color: var(--signal); }
.feed .feed-since { font: 400 12.5px/1.6 var(--font-mono); margin-bottom: 10px; }

/* Prose with an aside */
.prose-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; align-items: start; }
.prose { min-width: 0; max-width: 42em; }
.prose h2 { font: 600 24px/1.25 var(--font-display); letter-spacing: -0.015em; margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 16px; color: var(--paper-muted); }
.prose a { color: var(--deep); }
.prose-ink p { color: var(--ink-muted); }
.prose-aside { border-top: 2px solid var(--deep); padding-top: 20px; position: sticky; top: 96px; }
.prose-aside-ink { border-top-color: var(--signal); }
.aside-key { font: 400 12.5px/1.4 var(--font-mono); color: var(--paper-muted); margin: 0 0 14px; }
.prose-aside-ink .aside-key { color: var(--ink-muted); }
.aside-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.aside-list a { text-decoration: none; }
.aside-list a:hover { text-decoration: underline; }
.aside-list-mono { grid-template-columns: repeat(2, minmax(0, 1fr)); font-family: var(--font-mono); font-size: 14px; }

/* Contact page */
.mailrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 32px; }
.mailrow-address {
    font: 600 clamp(17px, 2.2vw, 22px)/1.2 var(--font-mono); color: var(--ink-text); text-decoration: none;
    border: 1px solid var(--ink-line); border-radius: var(--r); padding: 12px 16px;
}
.mailrow-address:hover { border-color: var(--signal); }

/* Ways to reach the studio: three cards on the contact page, three rows on the home page */
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }

.reach-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.reach {
    display: flex; flex-direction: column; gap: 12px; min-width: 0;
    padding: 26px; border: 1px solid var(--ink-line); border-radius: var(--r); background: var(--ink-2);
    transition: border-color .15s;
}
.reach:hover { border-color: rgba(69, 199, 244, .45); }
.reach-head { display: flex; align-items: center; gap: 12px; }
.reach-icon {
    flex: none; width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid var(--ink-line); border-radius: var(--r); color: var(--signal); background: var(--ink);
}
.reach-label { font: 400 12.5px/1.3 var(--font-mono); color: var(--ink-muted); margin: 0; }
.reach-value {
    font: 600 clamp(18px, 1.7vw, 21px)/1.25 var(--font-mono); color: var(--ink-text); text-decoration: none;
    overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.reach-value:hover { color: var(--signal); }
.reach-note { margin: 0; color: var(--ink-muted); font-size: 15px; }
.reach-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }

.reach-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-line); }
.reach-row {
    display: grid; grid-template-columns: 40px 88px minmax(0, 1fr); gap: 4px 16px; align-items: center;
    padding: 18px 0; border-bottom: 1px solid var(--ink-line);
}
.reach-row .reach-icon { grid-row: span 2; }
.reach-row-label { font: 400 12.5px/1.3 var(--font-mono); color: var(--ink-muted); }
.reach-row-value { font: 600 18px/1.3 var(--font-mono); color: var(--ink-text); text-decoration: none; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.reach-row-value:hover { color: var(--signal); }
.reach-row-note { grid-column: 2 / -1; color: var(--ink-muted); font-size: 14.5px; }

.channel-to { display: inline-block; margin-top: 10px; font: 600 14px/1.4 var(--font-mono); color: var(--deep); text-decoration: none; border-bottom: 1px solid rgba(79, 99, 236, .35); }
.channel-to:hover { border-bottom-color: var(--deep); }

/* 404 */
.error-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.error-nav a { text-decoration: none; padding: 9px 14px; border: 1px solid var(--ink-line); border-radius: var(--r); font-size: 15px; }
.error-nav a:hover { border-color: var(--signal); }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer { border-top: 1px solid var(--ink-line); padding-block: 56px 28px; color: var(--ink-muted); font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-line { margin: 14px 0 0; max-width: 24em; }
.footer-col { display: grid; gap: 8px; align-content: start; }
.footer-col h2 { font: 400 12.5px/1 var(--font-mono); color: var(--ink-text); margin: 4px 0 6px; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { color: var(--ink-text); }
.footer-key { display: inline-block; min-width: 62px; font: 400 12px/1 var(--font-mono); color: var(--ink-muted); opacity: .8; }
.footer-rule { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--ink-line); font-size: 13px; }
.footer-rule p { margin: 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
    .hero-grid, .band-head, .flagship, .prod-grid, .contact-grid, .prose-grid { grid-template-columns: minmax(0, 1fr); }
    .band-head { gap: 16px; }
    .blueprint { max-width: 280px; margin: 0; }
    .flagship-shot { border-left: 0; border-top: 1px solid var(--paper-line); min-height: 320px; }
    .offers, .feeds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reach-grid { grid-template-columns: minmax(0, 1fr); }
    .sol { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .sol .sol-side { grid-column: 2; }
    .prose-aside { position: static; }
}

@media (max-width: 860px) {
    .nav-burger {
        display: grid; gap: 5px; width: 40px; height: 40px; margin-left: auto;
        align-content: center; justify-items: center;
        border: 1px solid var(--ink-line); border-radius: var(--r); cursor: pointer;
    }
    .nav-burger span { display: block; width: 17px; height: 1.5px; background: var(--ink-text); }
    .nav-toggle:focus-visible + .nav-burger { outline: 2px solid var(--signal); outline-offset: 3px; }

    .masthead { position: relative; }
    .masthead-nav {
        position: absolute; inset-inline: 0; top: 100%; z-index: 35;
        display: none; flex-direction: column; align-items: stretch; gap: 0;
        padding: 10px var(--gutter) 20px; margin: 0;
        background: var(--ink); border-bottom: 1px solid var(--ink-line);
    }
    .nav-toggle:checked ~ .masthead-nav { display: flex; }
    .masthead-nav a { padding: 13px 2px; border-bottom: 1px solid var(--ink-line); font-size: 16px; border-radius: 0; }
    .masthead-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--signal); padding-left: 12px; }
    .masthead-nav a.nav-cta { margin: 16px 0 0; text-align: center; padding: 13px 15px; border-bottom: 0; }

    .lines { grid-template-columns: minmax(0, 1fr); }
    .line, .line + .line { padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--ink-line); }
    .record { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .record div:nth-child(3) { padding-left: 0; border-left: 0; }
    .record div:nth-child(-n + 2) { border-bottom: 1px solid var(--ink-line); }
    .rules, .comp { grid-template-columns: minmax(0, 1fr); }
    .steps { grid-template-columns: minmax(0, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .close-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    :root { --gutter: 16px; }
    .band, .prod { padding-block: 64px; }
    .hero { padding-block: 56px 64px; }
    .page-head { padding-block: 56px 48px; }
    .blueprint { display: none; }
    .offers, .parts, .feeds { grid-template-columns: minmax(0, 1fr); }
    .flagship-copy { padding: 26px 22px; }
    .flagship-shot { min-height: 260px; }
    .flagship-shot img { left: 22px; top: 22px; width: 720px; }
    .kv { grid-template-columns: minmax(0, 1fr); }
    .kv div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--paper-line); }
    .sol { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .sol .sol-side { grid-column: auto; }
    .channel { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .reach-row { grid-template-columns: 40px minmax(0, 1fr); }
    .reach-row .reach-icon { grid-row: span 3; }
    .reach-row-note { grid-column: 2; }
    .shipping-inner > a { margin-left: 0; }
    .spec div { grid-template-columns: 116px minmax(0, 1fr); }
    .footer-grid { grid-template-columns: minmax(0, 1fr); }
    .channels-table tbody th { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}