/* Cydora — reset, typography, buttons and artwork slots.

   Element-level rules only: anything that needs to know where it sits on the
   page belongs in layout.css or sections.css. */

* { box-sizing: border-box; }

html {
    /* Always reserve the scrollbar's width, even while the intro has
       scrolling locked. Without it, releasing the lock makes a scrollbar
       appear, the viewport narrows, and everything centred jumps sideways by
       half its width — which showed up as the hero lockup landing 7.5px left
       of the nav logo it was flying to. */
    scrollbar-gutter: stable;
    /* NO scroll-behavior: smooth here. It applies to every scroll the browser
       performs, including the ones ScrollTrigger makes when a pin engages, so
       the pin fights the smoothing and the section snaps into place instead of
       arriving. Anchor links get their smoothing from js/main.js instead,
       where it only affects the click. */
    /* the nav is sticky, so anchored sections must clear it */
    scroll-padding-top: 5.5rem;
}

/* js/main.js gives a jumped-to section tabindex="-1" so the keyboard follows
   the page there. It is never reached by Tab — only by the code that put it
   there — so there is nothing for a focus ring to tell anyone, and Safari
   draws one on programmatic focus where Chrome and Firefox do not. Scoped to
   -1 so every real control keeps its own :focus-visible outline. */
[tabindex="-1"]:focus { outline: none; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 17px/1.6 var(--body);
    -webkit-font-smoothing: antialiased;
}

/* ---- type --------------------------------------------------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }

/* Two-point fluid type, not a floor and a slope picked by eye.

   The old pair read clamp(2.5rem, 6vw, 4.25rem) and clamp(3rem, 7.5vw, 5rem),
   and on a phone the *floor* was what won: 6vw of a 393px screen is 23.6px,
   well under 2.5rem, so every display heading rendered at its 40px/48px
   minimum. That is desktop type on a 393px column — the hero headline broke
   over six lines and every section title arrived as a wall.

   These are solved rather than guessed: each line is the straight line
   through the size wanted at 375px and the size wanted at 1280px, written as
   an intercept in rem plus a slope in vw. Above 1280px the max still holds,
   so nothing about the desktop page changes — both cap at exactly the value
   they capped at before. */
.display {
    /* 27px at 375 → 68px at 1280 */
    font-size: clamp(1.7rem, 0.625rem + 4.53vw, 4.25rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
}

/* 32px at 375 → 80px at 1280 */
.display--lg { font-size: clamp(2rem, 0.757rem + 5.3vw, 5rem); }
.display em { font-style: italic; }

.eyebrow {
    margin: 0 0 2rem;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.lede { font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 46ch; }
.note { color: var(--muted); max-width: 52ch; }
.strong { font-weight: 700; }

p { margin: 0 0 1.5rem; }
p:last-child { margin-bottom: 0; }

/* headings carry no bottom margin of their own, so the gap under
   one belongs to whatever follows it */
h1 + p, h2 + p, h1 + .lede, h2 + .lede, h2 + .note {
    margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

/* ---- buttons ------------------------------------------------ */
.btn {
    display: inline-block;
    /* 0.85rem of padding on a 15px/1 label is a 44px control, which is the
       size a thumb hits reliably. Anything trimmed here has to keep that. */
    padding: 0.85rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--wheat);
    color: var(--ink);
    font: 500 15px/1 var(--body);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease,
                border-color 0.18s ease;
}

.btn:hover { background: var(--ink); color: var(--paper); }

.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: var(--wheat); color: var(--ink); }

.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--wheat); }

.btn--ghost { background: transparent; border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* ================================================================
   SLOTS

   Every piece of hand-drawn artwork and every unshot photo is a
   .slot. Each carries data-scene (or data-asset), which is the
   handle the integration step will look for: the SVG scene goes
   *inside* the slot and the dashes go away.

   --ar keeps the space the artwork will occupy reserved now, so
   dropping a scene in does not reflow the page around it.
   ================================================================ */
/* The dashes and the label are a *waiting* state, and they are held back for
   a beat rather than painted on the first frame.

   The hero is why. Its slot is the one that is on screen at load, and its
   drawing is a fetch — so between first paint and that fetch landing the page
   showed "[ HERO ANIMATION ]" in a dashed box, then replaced it with the
   logo. Every other slot is far below the fold and filled long before anyone
   reaches it, so the flash was only ever visible there.

   A delay rather than a rule about the hero, because the hero is not special:
   any slot would do this if it were the one being looked at. Under 700ms the
   drawing simply arrives and .is-filled turns the placeholder off before it
   was ever shown; over it — a slow connection, or a scene that has not been
   brought over yet — the placeholder appears and does its job.

   `animation` and not `transition`, because there is no state change to
   transition from: the page loads already in this state. A zero-length
   animation with a delay is how CSS says "after a moment". */
.slot {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ar, 3 / 2);
    border: 1px dashed transparent;
    border-radius: 2px;
    color: transparent;
    font: 400 11px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    animation: slot-waiting 0s 700ms forwards;
}

@keyframes slot-waiting {
    to {
        border-color: var(--rule);
        color: var(--muted);
    }
}

.slot--filled { border-style: solid; border-color: transparent; }
.slot--blue  { background: var(--swatch-blue);  border: 0; }
.slot--brown { background: var(--swatch-brown); border: 0; color: var(--paper); }
.slot--sand  { background: var(--swatch-sand);  border: 0; }
.slot--grey  { background: var(--swatch-grey);  border: 0; }
.slot--wheat { background: var(--wheat); border: 0; }

.band--dark .slot { border-color: #4a4844; color: #8f8a82; }

/* ================================================================
   THE VEIL

   One sheet of paper over the whole page, used for exactly one thing: a nav
   click cuts to a section rather than scrolling to it, and this is what the
   cut happens behind. See "going to a section" in js/main.js for why the page
   does not travel.

   The timings here and the two constants in that file are the same numbers
   twice over — CSS owns the fade, JS owns when to start it — so if one moves
   the other has to. They are short enough that being a frame out of step is
   not visible, and long enough to cover a reflow.
   ================================================================ */
.veil {
    position: fixed;
    inset: 0;
    z-index: 200;            /* over the sticky header, which is 50 */
    background: var(--paper);
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease-out;    /* uncovering: the slow half */
}

.veil.is-on {
    opacity: 1;
    transition: opacity 140ms ease-in;     /* covering: the quick half */
}

@media (prefers-reduced-motion: reduce) {
    .veil { display: none; }
}

/* screen-reader-only, for headings the design shows only as art */
.sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}