/* =========================================================
   SUVA Type Foundry — Font Detail Page CSS
   Extends style.css — loaded after
   ========================================================= */

/* ── Standalone font-class bindings ─────────────────────── */
/* style.css scopes these to .type-sample — here we free them */
.font-apollo    { font-family: 'Apollo', sans-serif; }
.font-tirnotmono { font-family: 'TirNotMono', monospace; }
.font-tiltortion { font-family: 'Tiltortion', serif; }
.font-akijo     { font-family: 'Akijo', sans-serif; }
.font-lambiseim { font-family: 'Lambiseim', sans-serif; }


/* ── Hero Section ───────────────────────────────────────── */
.detail-hero {
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    padding: 2vw 2vw 3vw 2vw;
    position: relative;
}

.detail-hero-inner {
    width: 100%;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.detail-label {
    font-family: 'NectoMono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--type-section-color);
    margin-bottom: 0;
    opacity: 0;
    animation: slideUpFade 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
}

.detail-specimen {
    font-size: clamp(6rem, 20vw, 35vh);
    line-height: 0.85;
    color: var(--type-section-color);
    font-weight: normal;
    margin: 40px 0 0 0;
    padding: 0;
    letter-spacing: -0.02em;
    opacity: 0;
    animation: slideUpFade 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
}

/* ── Type Tester ────────────────────────────────────────── */
.detail-tester {
    padding: 0 2vw 6vw 2vw;
    position: relative;
    z-index: 10000;
}

.detail-tester-header {
    margin-bottom: 1.5rem;
}

.tester-hint {
    font-family: 'NectoMono', monospace;
    font-size: 0.75rem;
    color: var(--type-section-color);
    opacity: 0.5;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.detail-tester-sample {
    width: 100%;
    outline: none;
    min-height: 2em;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1;
    color: var(--type-section-color);
    cursor: text;
    transition: opacity 0.2s ease;
}

.detail-tester-sample:focus {
    opacity: 0.85;
}

/* ── Description + Meta ─────────────────────────────────── */
.detail-meta {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4vw;
    padding: 4vw 2vw 6vw 2vw;
    border-top: 1px solid var(--type-section-color);
}

.detail-meta-right {
    text-align: left;
}

.detail-info-row {
    display: flex;
    gap: 2rem;
    margin-bottom: 0.6rem;
    font-family: 'NectoMono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--type-section-color);
}

.detail-info-label {
    width: 110px;
    flex-shrink: 0;
    opacity: 0.5;
    text-transform: uppercase;
}

.detail-info-value {
    text-transform: uppercase;
}

.detail-description {
    font-family: 'NectoMono', monospace;
    font-size: 0.83rem;
    line-height: 1.6;
    letter-spacing: -0.01em;
    color: var(--type-section-color);
    margin-bottom: 0;
    text-align: left;
    white-space: pre-line;
}

/* ── Character Set ──────────────────────────────────────── */
.detail-charset {
    padding: 0 2vw 6vw 2vw;
    position: relative;
    z-index: 10000;
}

.detail-charset-header {
    margin-bottom: 2rem;
}

.char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0;
    color: var(--type-section-color);
}

.char-grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5vw;
    aspect-ratio: 1;
    border: 1px solid var(--type-section-color);
    margin: -0.5px;
    opacity: 0.9;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
    cursor: default;
}

.char-grid span:hover {
    background: var(--type-section-color);
    color: #ffffff;
    opacity: 1;
}

/* ── Download CTA ───────────────────────────────────────── */
.detail-download {
    padding: 8vw 2vw 12vw 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--type-section-color);
}

.detail-download-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

.detail-download-label {
    font-family: 'NectoMono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--type-section-color);
    opacity: 0.6;
}

/* ── Download SVG Button ─────────────────────────────────── */
.download-svg-link {
    display: block;
    width: 100%;
    max-width: 100%;
    text-decoration: none;
    cursor: var(--cursor-dot);
    position: relative;
}

.download-btn-svg {
    position: relative;
    width: 100%;
    padding: 4vw 0;
    background: transparent;
    border: none;
    overflow: visible;
}

.download-letter {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: var(--type-section-color);
    transition: fill 0.35s ease;
    transform-origin: center center;
}

.download-svg-link:hover .download-letter {
    fill: var(--green);
}

.detail-download-sub {
    font-family: 'NectoMono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: var(--type-section-color);
    opacity: 0.4;
    text-transform: uppercase;
    line-height: 1.6;
}

/* ── Automated Standalone Bindings ── */
.font-apollo { font-family: 'Apollo', sans-serif !important; }
.font-lambiseim { font-family: 'Lambiseim', sans-serif !important; }
.font-gary { font-family: 'gary', sans-serif !important; }
.font-leoneregularlmartens { font-family: 'LEONERegularLMartens', sans-serif !important; }
.font-igorrounded { font-family: 'igorrounded', sans-serif !important; }
.font-apolloregular { font-family: 'ApolloRegular', sans-serif !important; }
.font-dap { font-family: 'dap', sans-serif !important; }
.font-lambiseimregular { font-family: 'LambiseimRegular', sans-serif !important; }
.font-susle { font-family: 'susle', sans-serif !important; }
.font-broadnibber { font-family: 'broadnibber', sans-serif !important; }
.font-ketchupaddictregularbsiim { font-family: 'KetchupAddictRegularBSiim', sans-serif !important; }
.font-kollektiivcollective { font-family: 'KollektiivCollective', sans-serif !important; }
.font-varenykyregular { font-family: 'VarenykyRegular', sans-serif !important; }
.font-fiato { font-family: 'Fiato', sans-serif !important; }
.font-nocturnal { font-family: 'Nocturnal', sans-serif !important; }
.font-doublebubblegxaveiderpass { font-family: 'DoubleBubbleGXAVeiderpass', sans-serif !important; }
.font-kykeon { font-family: 'kykeon', sans-serif !important; }
.font-helipleumon { font-family: 'helipleumon', sans-serif !important; }
.font-maurizio { font-family: 'maurizio', sans-serif !important; }
.font-2008 { font-family: '2008', sans-serif !important; }
.font-vaksal { font-family: 'vaksal', sans-serif !important; }
.font-yogaregular { font-family: 'YogaRegular', sans-serif !important; }
.font-reingrotesklight { font-family: 'ReinGroteskLight', sans-serif !important; }
.font-sirkelregular { font-family: 'sirkelregular', sans-serif !important; }
.font-newpoetic { font-family: 'newpoetic', sans-serif !important; }
.font-rammus { font-family: 'rammus', sans-serif !important; }
.font-fairytype { font-family: 'fairytype', sans-serif !important; }
.font-jsansv16regular { font-family: 'JSansv16Regular', sans-serif !important; }
.font-sigella { font-family: 'sigella', sans-serif !important; }
.font-owlcave { font-family: 'owlcave', sans-serif !important; }
.font-zakregular { font-family: 'ZakRegular', sans-serif !important; }
.font-floraandfauna { font-family: 'floraandfauna', sans-serif !important; }
.font-ofortuna { font-family: 'ofortuna', sans-serif !important; }
.font-fallengum { font-family: 'fallengum', sans-serif !important; }
.font-kiwi { font-family: 'kiwi', sans-serif !important; }
.font-villowplex { font-family: 'villowplex', sans-serif !important; }
.font-brno2016velloluttermathiasv22rsi { font-family: 'BRNO2016VelloLutterMathiasV22rsi', sans-serif !important; }
.font-toiletpapertype { font-family: 'toiletpapertype', sans-serif !important; }
.font-heavy { font-family: 'heavy', sans-serif !important; }
.font-sens { font-family: 'sens', sans-serif !important; }
.font-skeleton { font-family: 'skeleton', sans-serif !important; }
.font-shattered { font-family: 'shattered', sans-serif !important; }
.font-lazyglamour { font-family: 'lazyglamour', sans-serif !important; }
.font-dewysvgmartinkipper { font-family: 'DEWYSVGMartinKipper', sans-serif !important; }
.font-leimzyregular { font-family: 'LeimzyRegular', sans-serif !important; }
.font-ornamental { font-family: 'ornamental', sans-serif !important; }
.font-hypha { font-family: 'hypha', sans-serif !important; }
.font-akijoregularaasztalos { font-family: 'AkijoRegularAAsztalos', sans-serif !important; }
.font-franzregularaveevo { font-family: 'franzRegularAVeevo', sans-serif !important; }
.font-lopsakasregular { font-family: 'lopsakasregular', sans-serif !important; }
.font-dahliabold { font-family: 'Dahliabold', sans-serif !important; }
.font-thetimesapex { font-family: 'thetimesapex', sans-serif !important; }
.font-tiltortion { font-family: 'Tiltortion', sans-serif !important; }
.font-safaritravellerregularmvarik { font-family: 'SafariTravellerRegularMVarik', sans-serif !important; }
.font-napuloregular { font-family: 'NapuloRegular', sans-serif !important; }
.font-naps { font-family: 'naps', sans-serif !important; }
.font-molot { font-family: 'molot', sans-serif !important; }
.font-zakimposter { font-family: 'ZakImposter', sans-serif !important; }
.font-idreamofletters { font-family: 'idreamofletters', sans-serif !important; }
.font-faktory { font-family: 'faktory', sans-serif !important; }
.font-substanta { font-family: 'substanta', sans-serif !important; }
.font-gogregular { font-family: 'gogregular', sans-serif !important; }
.font-hellplague { font-family: 'hellplague', sans-serif !important; }
.font-dematerialized { font-family: 'dematerialized', sans-serif !important; }
.font-dahliathin { font-family: 'Dahliathin', sans-serif !important; }
.font-radio { font-family: 'radio', sans-serif !important; }
.font-stereosans { font-family: 'StereoSans', sans-serif !important; }
.font-fontensteinregular { font-family: 'fontensteinregular', sans-serif !important; }
.font-crystalregularimoltsanov { font-family: 'CrystalregularIMoltsanov', sans-serif !important; }
.font-barbarasoniaruus { font-family: 'barbaraSoniaRuus', sans-serif !important; }
.font-flowstate { font-family: 'flowstate', sans-serif !important; }
.font-sato24psalmin { font-family: 'Sato24PSalmin', sans-serif !important; }
.font-zakhatless { font-family: 'ZakHatless', sans-serif !important; }
.font-imogen { font-family: 'imogen', sans-serif !important; }
.font-bomberfrakturmathiasv22rsi { font-family: 'BomberFrakturMathiasV22rsi', sans-serif !important; }
.font-madisigor { font-family: 'MadisIgor', sans-serif !important; }
.font-frisbee { font-family: 'frisbee', sans-serif !important; }
.font-volask { font-family: 'Volask', sans-serif !important; }
.font-lumberjack { font-family: 'lumberjack', sans-serif !important; }
.font-escapistdiaries { font-family: 'EscapistDiaries', sans-serif !important; }
.font-kevad { font-family: 'kevad', sans-serif !important; }
.font-mscurvy { font-family: 'mscurvy', sans-serif !important; }
.font-reingroteskregular { font-family: 'ReinGroteskRegular', sans-serif !important; }
.font-sensiblesenseless { font-family: 'sensiblesenseless', sans-serif !important; }
.font-torturastroke { font-family: 'torturastroke', sans-serif !important; }