/* Fake Pilot store front · local design preview (v2).
   Layout, colours and proportions are transcribed from FAKE_Storefront-2-edit.af
   (artboard 3670x9456, 300 dpi, mm). Type: Contexta for headings, Helvetica Neue for text. */

@font-face{font-family:Contexta;src:url('../fonts/contexta-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
    --sf-ink:#420900;
    --sf-navy:#313445;      /* module background, from the document */
    --sf-navy-dark:#222430;   /* hover: the whole module, card or strip darkens */
    --sf-accent:#FF0B0B;    /* the studio orange-red, from the document */
    --sf-accent-dark:#d10a0a;
    --sf-darkred:#C70028;   /* Aspacer module background */
    --sf-darkred-dark:#a30021;
    --sf-pale:#eee0df;      /* Redux card background */
    --sf-pale-dark:#d9c9c8;
    --sf-anim-bg:#303445;   /* the FP Flash animation's own background */
    --sf-green:#3D6762;     /* free fonts, per the user's hex */
    --sf-green-dark:#2c4a47;  /* hover on a free fill */
    --sf-green-ink:#fff;    /* white ink: #3D6762 only reaches 2.7:1 against dark green */
    --sf-gap:16px;
    --sf-text:clamp(14px,1.12vw,21px);
    --sf-text-small:clamp(13px,.9vw,17px);
    --sf-heading:clamp(21px,1.35vw,26px);
    --sf-price:clamp(24px,1.8vw,34px);
    --sf-ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--sf-ink);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:var(--sf-text)}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
button,a,input,select{touch-action:manipulation}
/* Focus: never the accent. Links and buttons take their own ink, and a field thickens its
   own border, so no coloured ring is drawn around anything. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.sf-field input:focus-visible,.sf-field .sf-select:focus-visible{outline:none}
.sf-field:focus-within{box-shadow:inset 0 0 0 1px var(--sf-navy)}
h1,h2,h3{font-family:Contexta,'Helvetica Neue',Arial,sans-serif;font-weight:700}
.sf-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── construction banner: full-bleed, against the very top edge ─────────── */
.sf-construction{margin:0;padding:9px 16px;background:var(--sf-accent);color:#fff;text-align:center;font-size:var(--sf-text-small);letter-spacing:.02em;text-wrap:balance}

/* ── header ─────────────────────────────────────────────────────────────── */
.sf-width{width:calc(100% - 40px);max-width:none;margin-inline:auto}
.sf-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:clamp(92px,7.5vw,145px);width:100%;max-width:none;margin:0;padding:0 2.75%;background:#fff;transition:transform .25s ease}
.sf-header.is-hidden{transform:translateY(-100%)}
.sf-brand{display:flex;align-items:center;gap:26px}
.sf-brand-mark{width:clamp(32px,2.5vw,48px);height:auto;object-fit:contain}
.sf-header nav{display:flex;align-items:center;gap:30px}
.sf-header nav a,.sf-header nav button{min-height:32px;display:inline-flex;align-items:center;padding:0 7px;transition:background-color .3s var(--sf-ease),color .3s var(--sf-ease)}
.sf-header nav a:hover,.sf-header nav button:hover{background:var(--sf-accent);color:#fff}
.sf-header nav [aria-current]{font-weight:700;background:var(--sf-accent);color:#fff}
.sf-header nav button{background:none;border:0;padding:0 7px;color:inherit}
.sf-header nav a:last-child{font-size:30px}

/* ── mobile menu: one nav in the markup, inline on desktop and a panel under
   the bar on phones, driven by the burger (aria-expanded on the button) ─── */
.sf-burger{display:none;flex:0 0 auto;margin-left:auto;width:44px;height:44px;padding:0;border:0;background:none;color:var(--sf-navy);flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:background-color .3s var(--sf-ease),color .3s var(--sf-ease)}
.sf-burger span{display:block;width:20px;height:2px;background:currentColor}
.sf-burger:hover,.sf-burger[aria-expanded="true"]{background:var(--sf-accent);color:#fff}
.sf-nav-label{display:none}

/* ── full-width collection modules (2:1, as in the document) ────────────── */
.sf-band{position:relative;display:block;aspect-ratio:2/1;margin-top:var(--sf-gap);overflow:hidden;color:#fff;background:var(--sf-navy);transition:background-color .3s var(--sf-ease)}
.sf-band--redux{background:var(--sf-accent)}
.sf-band--aspacer{background:var(--sf-darkred)}
/* The first module carries the FP Flash animation, so the module itself takes the
   animation's own background colour and the two blend with no seam. The layer sits under
   the covering link, so it is not clickable and cannot swallow the module's click.
   The canvas is 2:1 but its wordmark only fills the middle (ink spans y 36.5-63.5% of the
   canvas), so the layer is offset until that wordmark lands exactly where the static
   wordmark sat: 37-51% of the module on desktop, 30-41% on phones. */
.sf-band--classics{background:var(--sf-anim-bg)}
.sf-band-anim{position:absolute;left:50%;top:18.5%;width:51%;aspect-ratio:2/1;transform:translateX(-50%);z-index:0;pointer-events:none}
.sf-band-anim svg{display:block;width:100%;height:100%}
/* hover: the module darkens like every other block on the page */
.sf-band--classics:hover,.sf-band--classics:focus-within{background:var(--sf-navy-dark)}
.sf-band--redux:hover,.sf-band--redux:focus-within{background:var(--sf-accent-dark)}
.sf-band--aspacer:hover,.sf-band--aspacer:focus-within{background:var(--sf-darkred-dark)}
/* The first module sits flush under the header: the gap above it was measured at 16px and removed. */
main > .sf-band:first-child{margin-top:0}
.sf-badge{position:absolute;left:1.6%;top:3.2%;width:7.6%;height:auto;pointer-events:none}
.sf-band-mark{position:absolute;left:50%;top:37%;width:51%;height:auto;transform:translateX(-50%);pointer-events:none}
.sf-band--redux .sf-band-mark{top:38.7%;width:45.3%}
.sf-band-mark.is-right{left:26.6%;top:39.4%;width:47.9%;transform:none}
.sf-band-spec{position:absolute;left:50%;top:56%;transform:translateX(-50%);display:flex;align-items:baseline;gap:26px;font-size:var(--sf-text-small);white-space:nowrap}
.sf-band-spec b{font-weight:700}
.sf-band-spec i{font-style:normal;opacity:.8}
.sf-band-spec.is-right{left:31.2%;transform:none;top:57%}
.sf-band-price{position:absolute;right:1.7%;bottom:4.6%;font-size:var(--sf-price);font-weight:700;color:#fff}
.sf-band-photo{position:absolute;left:0;top:0;height:100%;width:auto;mix-blend-mode:multiply;pointer-events:none}
.sf-band-lockup{position:absolute;left:2.1%;bottom:6.4%;width:22%;height:auto;pointer-events:none}

/* The first module carries a covering link (so the scroll cue cannot nest inside an anchor),
   plus the public site's own animated scroll cue, shown only while the window hides what follows.
   Markup, geometry, timing and keyframes are copied from Fake-Casper's .home-hero-scroll. */
.sf-band-cover{position:absolute;inset:0;z-index:1}
.sf-band-scroll{position:absolute;left:50%;bottom:max(2.8vmin,22px);z-index:2;display:none;align-items:center;justify-content:center;width:56px;height:56px;color:rgba(255,255,255,.92);text-decoration:none;opacity:0}
.sf-band--classics.has-scroll-cue .sf-band-scroll{display:flex;animation:home-hero-scroll-in .8s ease-out .7s both,home-hero-scroll-bob 2.2s ease-in-out 1.5s infinite}
.sf-band-scroll:hover{opacity:1;color:#fff}
@keyframes home-hero-scroll-in{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:.85;transform:translateX(-50%) translateY(0)}}
@keyframes home-hero-scroll-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* ── three collection cards (1102x643 with a 50 unit gutter) ────────────── */
.sf-cards-viewport{position:relative;overflow:hidden;margin-top:var(--sf-gap)}
.sf-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sf-gap);margin-top:0;transition:transform .62s var(--sf-ease)}
.sf-cards--next{position:absolute;left:0;top:0;width:100%;margin-top:0;background:#fff}
.sf-card{position:relative;display:block;aspect-ratio:1102/643;overflow:hidden;color:#fff;background:var(--sf-navy);transition:background-color .3s var(--sf-ease)}
.sf-card--free{background:var(--sf-green);color:var(--sf-green-ink)}
.sf-card--redux{background:var(--sf-pale);color:#220b13}
/* hover: the cards darken too, same language as the modules and the strips */
.sf-card--free:hover,.sf-card--free:focus-visible{background:var(--sf-green-dark)}
.sf-card--classics:hover,.sf-card--classics:focus-visible{background:var(--sf-navy-dark)}
.sf-card--redux:hover,.sf-card--redux:focus-visible{background:var(--sf-pale-dark)}
.sf-card-kicker{position:absolute;left:3.4%;top:6.4%;font-size:var(--sf-text-small);letter-spacing:.05em}
.sf-card-mark,.sf-card-sample{position:absolute;left:50%;top:50%;max-width:78%;max-height:46%}
.sf-card-mark{transform:translate(-50%,-50%)}
.sf-card-sample{transform:translate(-50%,calc(-50% + var(--optical-y,0em)))}
.sf-card-mark{width:auto;height:auto}
.sf-card--redux .sf-card-mark{width:69.5%;max-height:none}
.sf-card-sample{white-space:nowrap;font-size:clamp(18px,3vw,44px);line-height:1}
.sf-card-price{position:absolute;right:3.4%;bottom:5.6%;font-size:var(--sf-price);font-weight:700;color:#fff}
.sf-card--free .sf-card-price{color:var(--sf-green-ink)}
.sf-card--redux .sf-card-price{color:#000}

/* ── catalogue: one row of five fields, transcribed from the design (3200px render
   of a 1600px viewport: box 574, gap 51, height 122, gap above/below 58, caret 33x19,
   inset 20, border navy 1px) ──────────────────────────────────────────────────── */
#font-catalog{margin-top:26px;scroll-margin-top:96px}
.sf-controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:23px;margin-bottom:26px}
.sf-field{position:relative;display:flex;align-items:center;gap:14px;min-width:0;min-height:56px;padding:0 19px;border:1px solid var(--sf-navy);background:transparent}
.sf-field input,.sf-field select{width:100%;min-width:0;border:0;background:transparent;color:var(--sf-navy);font-family:inherit;font-size:var(--sf-text);line-height:1.2;padding:0;outline-offset:3px}
.sf-field input{-webkit-appearance:none;appearance:none}
.sf-select{-webkit-appearance:none;appearance:none;border:0;background:transparent;color:var(--sf-navy);font-family:inherit;font-size:var(--sf-text);line-height:1.2;text-align:left;cursor:pointer;padding:0 24px 0 0;width:100%;min-width:0}
.sf-select-value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The OS draws a native <select> popup, so macOS ignores our design there. This listbox is
   the same field, panel and hover language as the rest of the page. */
.sf-listbox{position:absolute;left:-1px;right:-1px;top:calc(100% + 3px);z-index:30;margin:0;padding:0;list-style:none;background:#fff;border:1px solid var(--sf-navy);max-height:320px;overflow-y:auto}
.sf-listbox[hidden]{display:none}
.sf-listbox li{display:flex;align-items:center;min-height:44px;padding:0 18px;color:var(--sf-navy);font-size:var(--sf-text);line-height:1.2;cursor:pointer;user-select:none;transition:background-color .3s var(--sf-ease),color .3s var(--sf-ease)}
.sf-listbox li[aria-selected="true"]{font-weight:700}
.sf-listbox li.is-active{background:var(--sf-navy);color:#fff}
.sf-field--select [aria-expanded="true"] .sf-caret{border-top-color:transparent;border-bottom:9px solid var(--sf-navy);margin-top:-5px}
.sf-field input::placeholder{color:#A48F8D;opacity:1}
/* while you are in an empty field the hint greys out further, so it reads as something you write over */
.sf-field:focus-within input::placeholder{color:#c3bdbb}
.sf-field input[type="search"]::-webkit-search-decoration,.sf-field input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
.sf-search-icon{flex:0 0 auto;width:22px;height:22px;fill:none;stroke:var(--sf-ink);stroke-width:1.8;stroke-linecap:round}
.sf-caret{position:absolute;right:19px;top:50%;margin-top:-4px;width:0;height:0;border-left:7.5px solid transparent;border-right:7.5px solid transparent;border-top:9px solid var(--sf-navy);pointer-events:none}

/* ── font list: the document's last module, one strip per font (3424x388) ─ */
.sf-font-list{display:flex;flex-direction:column;gap:var(--sf-gap);margin-bottom:70px}
.sf-font-row{position:relative;display:flex;align-items:center;gap:24px;aspect-ratio:3424/388;min-height:0;padding:0 30px;background:var(--sf-navy);color:#fff;overflow:hidden;cursor:pointer;transition:background-color .3s var(--sf-ease)}
.sf-font-row,.sf-font-row *{user-select:none;-webkit-user-select:none}
.sf-font-cover{position:absolute;inset:0;z-index:1}
.sf-font-sample{position:static;display:flex;align-items:center;align-self:stretch;flex:1 1 auto;min-width:0;min-height:0;padding:0 112px 0 0;background:transparent;overflow:hidden}
.sf-font-row[data-sale="package"] .sf-font-sample{padding-right:144px}
.sf-specimen{display:block;white-space:nowrap;line-height:1;font-size:60px;max-width:100%;min-width:0;transform:translateY(var(--optical-y,0em))}
/* The price is a label pinned to the strip's bottom-right corner, outside the flow, so the
   specimen can own the strip's full height and stay centred on the strip itself. The sample
   carries a right reserve so a long specimen never runs under the price. Clicks pass through
   the price to the strip's covering link: the whole strip opens the font's own page. */
.sf-font-info{position:absolute;right:30px;bottom:14%;z-index:3;display:flex;background:transparent;pointer-events:none}
.sf-font-bottom{display:flex;align-items:center;justify-content:flex-end;position:relative;z-index:3;pointer-events:none}
.sf-font-price{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:6px 13px;font-size:var(--sf-price);font-weight:700;white-space:nowrap;text-align:center;color:#fff;background:transparent}

/* hover: the whole strip darkens; nothing inside it changes */
.sf-font-row:hover,.sf-font-row:focus-within{background:var(--sf-navy-dark)}

/* free fonts keep the studio green, with white ink */
.sf-font-row.is-free{background:var(--sf-green);color:var(--sf-green-ink)}
.sf-font-row.is-free:hover,.sf-font-row.is-free:focus-within{background:var(--sf-green-dark)}

#font-empty{padding:35px 0 70px;color:#695a57}
[hidden]{display:none!important}

@media(prefers-reduced-motion:reduce){
    .sf-header,.sf-band,.sf-card,.sf-cards,.sf-cards--next,.sf-font-row,.sf-font-price,.sf-header nav a,.sf-header nav button,.sf-burger{transition:none}
    .sf-band--classics.has-scroll-cue .sf-band-scroll{animation:none;opacity:1}
}

/* ── narrow screens: modules stack, strips become short two-line rows ──── */
/* narrower desktops: the strip becomes a two-line row so the specimen keeps its size */
@media(max-width:1050px){
    .sf-font-row{aspect-ratio:auto;gap:6px;padding:16px 18px}
    .sf-font-sample{min-height:58px}
}
@media(max-width:900px){
    .sf-band-mark{width:72%}
    .sf-band--redux .sf-band-mark{width:64%}
    .sf-band-mark.is-right{left:26%;width:66%}
    .sf-band-lockup{width:30%}
}
@media(max-width:700px){
    .sf-width{width:calc(100% - 32px)}
    .sf-header{min-height:92px;gap:12px;padding:0 16px}
    .sf-brand{gap:10px}
    .sf-brand-mark{width:32px;height:auto}
    .sf-brand span{display:none}
    .sf-burger{display:flex}
    .sf-header nav{display:none}
    .sf-header.is-open nav{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;align-items:stretch;gap:0;font-size:var(--sf-text);background:#fff;border-top:1px solid var(--sf-navy);border-bottom:1px solid var(--sf-navy)}
    .sf-header.is-open nav>*{width:100%;max-width:none;min-height:54px;padding:0 16px;justify-content:flex-start;text-align:left;line-height:1.3;border-bottom:1px solid rgba(49,52,69,.22)}
    .sf-header.is-open nav>*:last-child{font-size:var(--sf-text);border-bottom:0}
    .sf-header.is-open nav>*:hover,.sf-header.is-open nav>*:focus-visible{background:var(--sf-accent);color:#fff}
    .sf-header.is-open nav [aria-current]{background:var(--sf-accent);color:#fff}
    .sf-icon{display:none}
    .sf-nav-label{display:inline}

    .sf-band{aspect-ratio:1/1}
    .sf-badge{width:13%;top:4%}
    .sf-band-mark{width:78%;top:30%}
    .sf-band-anim{width:78%;top:16%}
    .sf-band--redux .sf-band-mark{width:70%;top:32%}
    .sf-band-mark.is-right{left:50%;top:58%;width:76%;transform:translateX(-50%)}
    .sf-band-spec{flex-direction:column;gap:4px;align-items:center;left:50%;top:46%;transform:translateX(-50%);font-size:var(--sf-text-small)}
    .sf-band-spec.is-right{left:50%;top:75%;transform:translateX(-50%);align-items:center}
    .sf-band-price{right:4%;bottom:4%;font-size:var(--sf-price)}
    .sf-band-photo{left:-20%;height:80%;top:0;width:auto}
    .sf-band-lockup{width:34%;bottom:5%}

    .sf-cards{grid-template-columns:1fr}
    .sf-card-sample{font-size:clamp(22px,8vw,44px)}
    .sf-card--redux .sf-card-mark{width:66%}

    .sf-controls{grid-template-columns:1fr;gap:12px;margin-bottom:16px}
    .sf-field{min-height:52px;padding:0 16px}
    .sf-caret{right:16px}

    .sf-font-row{aspect-ratio:auto;gap:12px;min-height:80px;padding:14px 16px}
    .sf-font-sample{min-width:0;min-height:0;padding:0 72px 0 0}
    .sf-font-row.is-free .sf-font-sample{padding-right:100px}
    .sf-font-row[data-sale="package"] .sf-font-sample{padding-right:108px}
    .sf-font-info{right:8px}
    .sf-font-price{padding:6px 8px}
    .sf-specimen{font-size:40px}
}