/* Kinni Boys ... coming-soon styles. Static, no build. One screen: the photograph as the ground,
   the stack over it, one line of story, one field. Near-black wall, chalk type, one hot accent.
   Blaze goes on the second line of the stack, the button and the square. Nothing else.
   Saira Condensed 900 is the loud voice, Archivo carries everything that has to be read.
   The full nine-page site this replaced is in git at e63705f. */

@font-face {
    font-family: "Saira Condensed";
    src: url("/fonts/saira-condensed-latin-900-normal.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("/fonts/archivo-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --sunk: #0f0d0c;
    --wall: #161515;
    --chalk: #f2efe8;
    --muted: #a8a29a;
    --blaze: #ff3b0a;
    --blaze-lit: #ff6a35;
    --hair: rgb(242 239 232 / .4);
    --font-display: "Saira Condensed", "Arial Narrow", Impact, sans-serif;
    --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --pad: clamp(1.25rem, 4vw, 4rem);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--sunk);
    color: var(--chalk);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--blaze); color: var(--sunk); }
:focus-visible { outline: 3px solid var(--blaze-lit); outline-offset: 3px; }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The screen. min-block-size, not a locked height: with the keyboard up on a phone the page has to
   be able to scroll the field into view. svh so Safari's toolbar is not counted. .................. */
.hero {
    position: relative;
    isolation: isolate;
    min-block-size: 100svh;
    display: grid;
    align-content: center;
    overflow: hidden;
    background: var(--sunk);
}
.hero .plate {
    position: absolute;
    inset: 0;
    z-index: -2;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    filter: brightness(.6) contrast(1.1) saturate(.6);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgb(15 13 12 / .4) 0%, rgb(15 13 12 / .45) 30%, rgb(15 13 12 / .9) 70%, var(--sunk) 100%);
}
.topo {
    position: absolute;
    inset: auto 0 0 0;
    block-size: 72%;
    inline-size: 100%;
    z-index: -1;
    opacity: .5;
    mask-image: linear-gradient(transparent 0%, #000 50%);
    -webkit-mask-image: linear-gradient(transparent 0%, #000 50%);
}
.wrap {
    min-inline-size: 0;
    inline-size: 100%;
    max-inline-size: 80rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem) var(--pad);
    display: grid;
    gap: 1.1rem;
}

/* Type ....................................................................................... */
.brand {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: .4em;
    letter-spacing: .01em;
    margin-block-end: clamp(.5rem, 2vw, 1.5rem);
}
.brand i { display: inline-block; inline-size: .55em; block-size: .55em; background: var(--blaze); translate: 0 -.05em; }
.h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3rem, min(13.8vw, 15vh), 9rem); /* 13.8vw: the widest rotating line ("Early mornings.") clears a 375px phone; 15vh: a 720px laptop fits */
    line-height: .9;
    letter-spacing: -.02em;
    text-transform: uppercase;
    display: grid;
}
.h1 > span { display: block; }
.hot { color: var(--blaze); }
.rot { display: block; white-space: nowrap; block-size: 1lh; overflow: hidden; }
.reel { display: block; will-change: transform; }
.reel span { display: block; block-size: 1lh; }
.out { color: transparent; -webkit-text-stroke: .035em var(--chalk); }
.story {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    max-inline-size: 40ch;
    margin-block-start: .4rem;
}

/* The field. Opaque fill so the photo behind it never changes its contrast; 2px line at 3.4:1;
   focus is the outline, never a border swap. ................................................ */
form {
    display: grid;
    gap: .6rem;
    max-inline-size: 36rem;
    margin-block-start: .6rem;
}
@media (min-width: 40rem) { form { grid-template-columns: minmax(0, 1fr) auto; } }
input[type="email"] {
    inline-size: 100%;
    min-block-size: 3.25rem;
    padding: .8rem 1rem;
    font: inherit;
    font-size: 1.05rem;
    color: var(--chalk);
    background: var(--sunk);
    border: 2px solid var(--hair);
    border-radius: 0;
    transition: border-color 180ms var(--ease);
}
input[type="email"]::placeholder { color: #b9b4ac; opacity: 1; }
input[type="email"]:focus-visible { border-color: var(--chalk); outline-offset: 2px; }
.btn {
    min-block-size: 3.25rem;
    padding: .9rem 1.6rem;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    background: var(--blaze);
    color: var(--sunk);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 200ms var(--ease);
}
.btn:hover { background: var(--blaze-lit); }
.fine { font-size: .85rem; color: var(--muted); }
.fine.err { color: var(--chalk); }
.sig { font-size: .85rem; color: var(--muted); }
.sig a {
    color: var(--chalk);
    display: inline-block;
    padding-block: .8rem; /* 44px hit area on a .85rem line */
    text-underline-offset: .2em;
    text-decoration-thickness: 1px;
}
.sig a:hover { text-decoration-color: var(--blaze-lit); }

/* Motion. The load is the whole narrative: statement, statement, beat, "not yet", then the ask lands
   last. Gated on .ready (site.js adds it when the fonts are in) so the reveal never animates the
   fallback face; without the script nothing is hidden. Off under reduced motion. ............... */
@media (prefers-reduced-motion: no-preference) {
    .ready .brand, .ready .h1 span, .ready .story, .ready form, .ready .fine, .ready .sig {
        animation: settle 620ms var(--ease) both;
    }
    .ready .brand { animation-delay: 60ms; }
    .ready .h1 span:nth-child(1) { animation-delay: 200ms; }
    .ready .h1 span:nth-child(2) { animation-delay: 330ms; }
    .ready .h1 span:nth-child(3) { animation-delay: 600ms; }
    .ready .story { animation-delay: 820ms; }
    .ready form { animation-duration: 420ms; animation-delay: 860ms; }
    .ready .fine, .ready .sig { animation-duration: 420ms; animation-delay: 940ms; }
    @keyframes settle { from { opacity: 0; translate: 0 .28em; } to { opacity: 1; translate: 0 0; } }

    .hero .plate { animation: plate 1800ms var(--ease) both; }
    @keyframes plate { from { opacity: 0; scale: 1.05; } 40% { opacity: 1; } to { opacity: 1; scale: 1; } }

    .topo {
        animation: topo-in 1600ms var(--ease) 900ms both, drift 28s var(--ease) 900ms infinite alternate;
    }
    @keyframes topo-in { from { opacity: 0; } to { opacity: .5; } }
    @keyframes drift { from { translate: 0 0; } to { translate: 0 -1.5%; } }
}