/* =========================================================
 *  Fat Rabbit Network — GRIT: Welcome to Paradise
 *  Styling for all front-end sections.
 *  Aesthetic: blood-red street grunge + brushed steel + splatter
 * ========================================================= */

.frn-grit-site {
    --frn-red:     var(--frn-accent, #d90d1e);
    --frn-red-dk:  #8b0610;
    --frn-red-lt:  #ff3344;
    --frn-black:   #0a0a0a;
    --frn-ink:     #141416;
    --frn-steel:   #b8bcc0;
    --frn-steel-d: #4a4d51;
    --frn-bone:    #f4f1ea;
    --frn-cream:   #ebe6d9;

    --frn-display: 'Bebas Neue', 'Barlow Condensed', sans-serif;
    --frn-stencil: 'Barlow Condensed', sans-serif;
    --frn-body:    'Barlow', system-ui, sans-serif;
    --frn-mono:    'Special Elite', 'Courier New', monospace;

    font-family: var(--frn-body);
    color: var(--frn-bone);
    background: var(--frn-black);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.frn-grit-site * { box-sizing: border-box; }
.frn-grit-site img { max-width: 100%; display: block; }

/* ---------- Shared buttons ---------- */
.frn-grit-site .frn-btn,
.frn-btn {
    display: inline-block;
    padding: clamp(12px, 3vw, 16px) clamp(22px, 5vw, 36px);
    font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
    font-size: clamp(15px, 3vw, 20px);
    letter-spacing: clamp(1.5px, 0.7vw, 3px);
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease;
    position: relative;
    min-height: 44px;
    line-height: 1.2;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.frn-grit-site .frn-btn--primary,
.frn-btn--primary {
    background: var(--frn-red, #d90d1e);
    color: var(--frn-bone, #f4f1ea) !important;
    box-shadow: 4px 4px 0 #0a0a0a, 4px 4px 0 2px #8b0610;
}
.frn-grit-site .frn-btn--primary:hover,
.frn-btn--primary:hover {
    background: var(--frn-red-lt, #ff3344);
    transform: translate(-2px, -2px);
}
.frn-grit-site .frn-btn--ghost,
.frn-btn--ghost {
    background: transparent;
    color: var(--frn-bone, #f4f1ea) !important;
    border-color: var(--frn-bone, #f4f1ea);
}
.frn-grit-site .frn-btn--ghost:hover,
.frn-btn--ghost:hover {
    background: var(--frn-bone, #f4f1ea);
    color: var(--frn-black, #0a0a0a) !important;
}

/* ---------- Section headers ---------- */
.frn-grit-site .frn-section-head {
    text-align: center;
    padding: clamp(40px, 8vw, 80px) clamp(16px, 4vw, 20px) clamp(20px, 4vw, 40px);
}
.frn-grit-site .frn-kicker {
    display: inline-block;
    font-family: var(--frn-mono);
    font-size: clamp(10px, 2.5vw, 13px);
    letter-spacing: clamp(1.5px, 0.5vw, 4px);
    color: var(--frn-red-lt);
    margin-bottom: clamp(8px, 2vw, 12px);
}
.frn-grit-site .frn-section-title {
    font-family: var(--frn-display);
    font-size: clamp(32px, 8vw, 96px);
    letter-spacing: clamp(1.5px, 0.7vw, 4px);
    margin: 0;
    color: var(--frn-bone);
    text-transform: uppercase;
    line-height: .9;
}
.frn-grit-site .frn-section-title span {
    color: var(--frn-red);
    font-style: italic;
    display: inline-block;
    transform: skewX(-8deg);
}

/* =========================================================
 *  HERO
 * ========================================================= */
.frn-grit-site .frn-hero {
    position: relative;
    min-height: 100vh;
    padding: 80px 5vw 140px;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(217,13,30,.2), transparent 55%),
        radial-gradient(ellipse at 75% 70%, rgba(139,6,16,.3), transparent 60%),
        linear-gradient(180deg, #1a0606 0%, #0a0a0a 60%, #000 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Extend visually up into the fixed-header area so there's no black stripe */
    margin-top: -62px;
    padding-top: 142px;
}
.frn-grit-site .frn-hero__content {
    text-align: center;
    margin: 0 auto;
}
.frn-grit-site .frn-hero__eyebrow,
.frn-grit-site .frn-hero__cta-row {
    justify-content: center;
}
.frn-grit-site .frn-hero__logo,
.frn-grit-site .frn-hero__logo-text,
.frn-grit-site .frn-hero__tagline {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
@media (min-width: 901px) {
    .frn-grit-site .frn-hero {
        margin-top: -72px;
        padding-top: 152px;
    }
}
/* Splatter layer — CSS-only blood dots */
.frn-grit-site .frn-hero__splatter {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 12% 22%, var(--frn-red-dk) 2px, transparent 3px),
        radial-gradient(circle at 28% 70%, var(--frn-red-dk) 1px, transparent 2px),
        radial-gradient(circle at 45% 15%, var(--frn-red-dk) 3px, transparent 4px),
        radial-gradient(circle at 60% 85%, var(--frn-red-dk) 2px, transparent 3px),
        radial-gradient(circle at 78% 40%, var(--frn-red-dk) 1px, transparent 2px),
        radial-gradient(circle at 88% 72%, var(--frn-red-dk) 3px, transparent 4px),
        radial-gradient(circle at 5% 55%, var(--frn-red-dk) 2px, transparent 3px),
        radial-gradient(circle at 95% 10%, var(--frn-red-dk) 2px, transparent 3px);
    background-size: 200px 200px, 150px 150px, 300px 300px, 250px 250px, 180px 180px, 220px 220px, 270px 270px, 160px 160px;
    opacity: .4;
    pointer-events: none;
}
.frn-grit-site .frn-hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.frn-grit-site .frn-hero__model {
    position: absolute;
    left: -3%;
    bottom: 0;
    height: 100%;
    width: auto;
    max-width: 65%;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(40px 20px 80px rgba(0,0,0,.9));
    mask-image: linear-gradient(90deg, black 0%, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, black 0%, black 75%, transparent 100%);
    pointer-events: none;
    animation: frnHeroInOpacity 1.4s ease both;
    z-index: 2;
}
@keyframes frnHeroInOpacity {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.frn-grit-site .frn-hero__content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.frn-grit-site .frn-hero__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--frn-mono);
    font-size: 13px;
    letter-spacing: 4px;
    color: var(--frn-steel);
    margin-bottom: 20px;
    animation: frnFadeUp .8s ease .2s both;
}
.frn-grit-site .frn-hero__eyebrow .dot {
    width: 8px; height: 8px; background: var(--frn-red); border-radius: 50%;
    box-shadow: 0 0 12px var(--frn-red);
}
.frn-grit-site .frn-hero__logo {
    max-width: 580px;
    width: 100%;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,.8));
    animation: frnFadeUp 1s ease .4s both;
    margin-left: auto;
}
.frn-grit-site .frn-hero__tagline {
    font-family: var(--frn-body);
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 300;
    max-width: 520px;
    margin: 20px 0 36px auto;
    color: var(--frn-cream);
    animation: frnFadeUp .9s ease .6s both;
}
.frn-grit-site .frn-hero__cta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-end;
    animation: frnFadeUp .9s ease .8s both;
}
@keyframes frnFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Ticker */
.frn-grit-site .frn-hero__ticker {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: var(--frn-red);
    padding: 14px 0;
    overflow: hidden;
    border-top: 3px solid var(--frn-black);
    border-bottom: 3px solid var(--frn-black);
    transform: skewY(-1deg);
    margin-bottom: -10px;
}
.frn-grit-site .frn-hero__ticker-track {
    display: inline-flex;
    gap: 40px;
    font-family: var(--frn-display);
    font-size: 22px;
    letter-spacing: 4px;
    color: var(--frn-black);
    white-space: nowrap;
    animation: frnTicker 30s linear infinite;
    transform: skewY(1deg);
}
@keyframes frnTicker {
    from { transform: translateX(0) skewY(1deg); }
    to   { transform: translateX(-50%) skewY(1deg); }
}

/* =========================================================
 *  SHOWCASE SLIDER
 * ========================================================= */
.frn-grit-site .frn-showcase {
    background: var(--frn-ink);
    padding-bottom: 80px;
    position: relative;
    border-top: 1px solid rgba(255,255,255,.06);
}
.frn-grit-site .frn-showcase::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--frn-red), transparent);
}
.frn-grit-site .frn-showcase__track {
    display: flex;
    overflow: hidden;
    padding: 0 5vw;
    gap: 40px;
    scroll-behavior: smooth;
    justify-content: center;
    align-items: center;
}
.frn-grit-site .frn-slide {
    flex: 0 0 100%;
    min-height: 420px;
    padding: 50px 60px;
    background:
        linear-gradient(135deg, rgba(217,13,30,.08), transparent 60%),
        var(--frn-black);
    border: 1px solid rgba(255,255,255,.08);
    border-left: 4px solid var(--frn-red);
    position: relative;
    transition: transform .5s ease, opacity .5s ease;
}
.frn-grit-site .frn-slide__num {
    position: absolute;
    top: 20px; right: 40px;
    font-family: var(--frn-display);
    font-size: 160px;
    color: rgba(217,13,30,.15);
    line-height: 1;
    pointer-events: none;
}
.frn-grit-site .frn-slide__label {
    font-family: var(--frn-mono);
    font-size: 13px;
    letter-spacing: 4px;
    color: var(--frn-red-lt);
    margin-bottom: 20px;
}
.frn-grit-site .frn-slide__title {
    font-family: var(--frn-display);
    font-size: clamp(36px, 5vw, 64px);
    letter-spacing: 2px;
    color: var(--frn-bone);
    margin: 0 0 24px;
    line-height: .95;
    max-width: 700px;
}
.frn-grit-site .frn-slide__body {
    font-size: 18px;
    color: var(--frn-cream);
    max-width: 640px;
    line-height: 1.6;
}
.frn-grit-site .frn-showcase__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
}
.frn-grit-site .frn-showcase__btn {
    background: transparent;
    border: 2px solid var(--frn-bone);
    color: var(--frn-bone);
    width: 48px; height: 48px;
    cursor: pointer;
    font-size: 16px;
    transition: all .2s ease;
}
.frn-grit-site .frn-showcase__btn:hover {
    background: var(--frn-red);
    border-color: var(--frn-red);
}
.frn-grit-site .frn-showcase__dots {
    display: flex; gap: 10px;
}
.frn-grit-site .frn-dot {
    width: 36px; height: 4px;
    background: rgba(255,255,255,.2);
    border: none;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.frn-grit-site .frn-dot.is-active {
    background: var(--frn-red);
    transform: scaleY(2);
}

/* =========================================================
 *  PROLOGUE / READER
 * ========================================================= */
.frn-grit-site .frn-prologue {
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, #0f0f0f, #050505);
    padding-bottom: 100px;
}
.frn-grit-site .frn-reader {
    max-width: 820px;
    margin: 0 auto;
    padding: 60px 50px;
    background: var(--frn-cream);
    color: var(--frn-ink);
    font-family: var(--frn-mono);
    position: relative;
    box-shadow:
        0 40px 100px rgba(0,0,0,.8),
        inset 0 0 80px rgba(139,6,16,.08);
    border: 2px solid #3a3026;
}
.frn-grit-site .frn-reader::before,
.frn-grit-site .frn-reader::after {
    content: '';
    position: absolute;
    left: 10px; right: 10px;
    height: 1px;
    background: rgba(0,0,0,.2);
}
.frn-grit-site .frn-reader::before { top: 10px; }
.frn-grit-site .frn-reader::after  { bottom: 10px; }

.frn-grit-site .frn-reader__stamp {
    position: absolute;
    top: 20px; right: 20px;
    padding: 8px 18px;
    border: 3px double var(--frn-red-dk);
    color: var(--frn-red-dk);
    font-family: var(--frn-display);
    letter-spacing: 4px;
    font-size: 18px;
    transform: rotate(6deg);
    opacity: .85;
}
.frn-grit-site .frn-reader__stamp--red {
    color: var(--frn-red);
    border-color: var(--frn-red);
}
.frn-grit-site .frn-reader__meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 11px;
    letter-spacing: 2px;
    color: #6a5d4d;
    border-bottom: 1px dashed #6a5d4d;
    padding-bottom: 16px;
    margin-bottom: 30px;
}
.frn-grit-site .frn-reader__meta strong {
    color: var(--frn-ink);
    margin-right: 14px;
    font-weight: 700;
}
.frn-grit-site .frn-reader__title {
    font-family: var(--frn-display);
    font-size: 48px;
    letter-spacing: 3px;
    margin: 0 0 30px;
    color: var(--frn-ink);
    text-transform: uppercase;
}
.frn-grit-site .frn-reader__body {
    font-size: 17px;
    line-height: 1.9;
    color: #1a1410;
}
.frn-grit-site .frn-reader__body p {
    margin-bottom: 20px;
    text-indent: 24px;
}
.frn-grit-site .frn-reader__footer {
    text-align: center;
    margin-top: 40px;
    letter-spacing: 4px;
    font-size: 13px;
    color: #6a5d4d;
}
/* Locked state */
.frn-grit-site .frn-reader--locked {
    text-align: center;
    font-family: var(--frn-body);
    padding: 80px 40px;
}
.frn-grit-site .frn-reader--locked h3 {
    font-family: var(--frn-display);
    font-size: 38px;
    letter-spacing: 2px;
    color: var(--frn-ink);
    margin: 20px 0 12px;
}
.frn-grit-site .frn-reader--locked p {
    max-width: 480px;
    margin: 0 auto 30px;
    color: #4a3f30;
    font-size: 16px;
}
.frn-grit-site .frn-reader__lock {
    color: var(--frn-red);
    display: inline-block;
}

/* =========================================================
 *  AUTH
 * ========================================================= */
.frn-grit-site .frn-auth {
    background: var(--frn-ink);
    padding-bottom: 120px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.frn-grit-site .frn-auth__tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 30px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.frn-grit-site .frn-auth__tab {
    flex: 1;
    padding: 16px;
    background: transparent;
    border: 2px solid rgba(255,255,255,.2);
    color: var(--frn-steel);
    font-family: var(--frn-display);
    letter-spacing: 3px;
    font-size: 18px;
    cursor: pointer;
    transition: all .2s ease;
}
.frn-grit-site .frn-auth__tab.is-active {
    background: var(--frn-red);
    border-color: var(--frn-red);
    color: var(--frn-bone);
}
.frn-grit-site .frn-auth__form {
    display: none;
    max-width: 520px;
    margin: 0 auto;
    padding: 40px;
    background: var(--frn-black);
    border: 1px solid rgba(255,255,255,.08);
    border-left: 4px solid var(--frn-red);
}
.frn-grit-site .frn-auth__form.is-active { display: block; }
.frn-grit-site .frn-auth__form label {
    display: block;
    margin-bottom: 20px;
}
.frn-grit-site .frn-auth__form span {
    display: block;
    font-family: var(--frn-mono);
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--frn-red-lt);
    margin-bottom: 8px;
}
.frn-grit-site .frn-auth__form input {
    width: 100%;
    padding: 14px 16px;
    background: var(--frn-ink);
    border: 1px solid rgba(255,255,255,.15);
    color: var(--frn-bone);
    font-family: var(--frn-body);
    font-size: 16px;
    transition: border-color .2s ease;
}
.frn-grit-site .frn-auth__form input:focus {
    outline: none;
    border-color: var(--frn-red);
}
.frn-grit-site .frn-auth__form button {
    width: 100%;
    margin-top: 10px;
}
.frn-grit-site .frn-auth__msg {
    margin-top: 16px;
    padding: 12px;
    font-family: var(--frn-mono);
    font-size: 13px;
    text-align: center;
    min-height: 20px;
}
.frn-grit-site .frn-auth__msg.is-error   { color: var(--frn-red-lt); }
.frn-grit-site .frn-auth__msg.is-success { color: #4cd97b; }
.frn-grit-site .frn-auth__loggedin {
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
    padding: 40px;
    background: var(--frn-black);
    border: 1px solid rgba(255,255,255,.08);
    border-left: 4px solid var(--frn-red);
}

/* =========================================================
 *  MERCH
 * ========================================================= */
.frn-grit-site .frn-merch {
    background: linear-gradient(180deg, #0a0a0a, #1a0606 100%);
    padding-bottom: 100px;
}
.frn-grit-site .frn-merch__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5vw;
}
.frn-grit-site .frn-merch__card {
    background: var(--frn-bone);
    border: 2px solid var(--frn-black);
    padding: 20px;
    transition: transform .3s ease;
    animation: frnFadeUp .8s ease var(--d) both;
    position: relative;
}
.frn-grit-site .frn-merch__card::before {
    content: '';
    position: absolute;
    inset: -8px;
    border: 1px solid var(--frn-red);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease, inset .2s ease;
}
.frn-grit-site .frn-merch__card:hover {
    transform: translate(-4px, -4px);
}
.frn-grit-site .frn-merch__card:hover::before {
    opacity: 1;
    inset: -4px;
}
.frn-grit-site .frn-merch__img {
    background: var(--frn-red);
    padding: 20px;
    margin-bottom: 16px;
    aspect-ratio: 3/4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.frn-grit-site .frn-merch__img img {
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.frn-grit-site .frn-merch__meta h4 {
    font-family: var(--frn-display);
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--frn-black);
    margin: 0 0 6px;
}
.frn-grit-site .frn-merch__meta p {
    font-family: var(--frn-mono);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--frn-red-dk);
    margin: 0;
}

/* =========================================================
 *  ABOUT
 * ========================================================= */
.frn-grit-site .frn-about {
    background: var(--frn-black);
    padding-bottom: 120px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.frn-grit-site .frn-about__grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 5vw;
    align-items: center;
}
.frn-grit-site .frn-about__mark {
    filter: drop-shadow(0 20px 40px rgba(0,0,0,.6));
}
.frn-grit-site .frn-about__copy p {
    font-size: 19px;
    line-height: 1.7;
    color: var(--frn-cream);
    margin-bottom: 30px;
}
.frn-grit-site .frn-about__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.frn-grit-site .frn-about__badges span {
    padding: 8px 16px;
    border: 1px solid var(--frn-red);
    color: var(--frn-red-lt);
    font-family: var(--frn-mono);
    font-size: 11px;
    letter-spacing: 3px;
}

/* =========================================================
 *  FOOTER
 * ========================================================= */
.frn-grit-site .frn-footer {
    text-align: center;
    padding: 60px 20px;
    background: #000;
    border-top: 2px solid var(--frn-red);
}
.frn-grit-site .frn-footer img {
    width: 120px;
    margin: 0 auto 20px;
}
.frn-grit-site .frn-footer p {
    font-family: var(--frn-mono);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--frn-steel-d);
    margin: 0;
}

/* =========================================================
 *  EFFECTS — embers, parallax, glitch, reveal, typewriter, tilt, static
 * ========================================================= */

/* --- Static flicker overlay --- */
.frn-grit-site .frn-static-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    mix-blend-mode: overlay;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.4) 100%);
    transition: opacity .05s linear;
}
.frn-grit-site .frn-static-overlay.is-flickering {
    opacity: .45;
    animation: frnStatic .08s steps(3) infinite;
}
@keyframes frnStatic {
    0%   { transform: translate(0,0);   }
    33%  { transform: translate(-2px,1px); }
    66%  { transform: translate(1px,-2px); }
    100% { transform: translate(0,0);   }
}

/* --- Hero embers canvas --- */
.frn-grit-site .frn-hero__embers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.frn-grit-site .frn-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
}
.frn-grit-site .frn-hero__back-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
    opacity: .9;
}
.frn-grit-site .frn-hero__front-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: screen;
    opacity: .5;
}
.frn-grit-site .frn-hero__model { transition: transform .2s ease-out; will-change: transform; }

/* --- Scroll reveal --- */
.frn-grit-site [data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.frn-grit-site [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --- Glitch text --- */
.frn-grit-site .frn-glitch {
    position: relative;
    display: inline-block;
}
.frn-grit-site .frn-glitch__layer {
    display: inline-block;
}
.frn-grit-site .frn-glitch__layer--base {
    position: relative;
    z-index: 2;
}
.frn-grit-site .frn-glitch__layer--r,
.frn-grit-site .frn-glitch__layer--b {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    pointer-events: none;
    opacity: 0;
}
.frn-grit-site .frn-glitch:hover .frn-glitch__layer--r {
    color: #ff3344;
    opacity: .85;
    animation: frnGlitchR .4s steps(4) infinite;
    mix-blend-mode: screen;
}
.frn-grit-site .frn-glitch:hover .frn-glitch__layer--b {
    color: #00f0ff;
    opacity: .7;
    animation: frnGlitchB .4s steps(4) infinite;
    mix-blend-mode: screen;
}
@keyframes frnGlitchR {
    0%   { transform: translate(0,0);   clip-path: inset(0 0 80% 0); }
    25%  { transform: translate(-3px,1px); clip-path: inset(30% 0 50% 0); }
    50%  { transform: translate(2px,-1px); clip-path: inset(60% 0 20% 0); }
    75%  { transform: translate(-1px,2px); clip-path: inset(10% 0 70% 0); }
    100% { transform: translate(0,0); clip-path: inset(0 0 80% 0); }
}
@keyframes frnGlitchB {
    0%   { transform: translate(0,0);   clip-path: inset(70% 0 10% 0); }
    25%  { transform: translate(3px,-1px); clip-path: inset(20% 0 60% 0); }
    50%  { transform: translate(-2px,1px); clip-path: inset(50% 0 30% 0); }
    75%  { transform: translate(1px,-2px); clip-path: inset(0 0 75% 0); }
    100% { transform: translate(0,0); clip-path: inset(70% 0 10% 0); }
}

/* --- Typewriter caret --- */
.frn-grit-site .frn-caret {
    display: inline-block;
    color: var(--frn-red);
    animation: frnCaret .8s steps(1) infinite;
}
@keyframes frnCaret {
    50% { opacity: 0; }
}

/* --- 3D tilt transitions --- */
.frn-grit-site [data-tilt] {
    transition: transform .15s ease-out;
    will-change: transform;
}

/* =========================================================
 *  RESPONSIVE
 * ========================================================= */
@media (max-width: 900px) {
    .frn-grit-site .frn-hero {
        padding: 60px 5vw 140px;
        text-align: left;
        justify-content: flex-start;
    }
    .frn-grit-site .frn-hero__model {
        opacity: .2;
        max-width: 100%;
        left: -10%;
    }
    .frn-grit-site .frn-hero__content {
        text-align: left;
        margin-right: 0;
    }
    .frn-grit-site .frn-hero__eyebrow,
    .frn-grit-site .frn-hero__cta-row {
        justify-content: flex-start;
    }
    .frn-grit-site .frn-hero__logo,
    .frn-grit-site .frn-hero__tagline {
        margin-left: 0;
    }
    .frn-grit-site .frn-about__grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    .frn-grit-site .frn-about__mark {
        max-width: 200px;
        margin: 0 auto;
    }
    .frn-grit-site .frn-slide {
        padding: 40px 24px;
    }
    .frn-grit-site .frn-slide__num {
        font-size: 100px;
        right: 20px;
    }
    .frn-grit-site .frn-reader {
        padding: 40px 24px;
    }
    .frn-grit-site .frn-reader__title {
        font-size: 32px;
    }
}

/* ============================================================
 *  Helper classes for render_image() and fallback states
 * ============================================================ */
.frn-grit-site .frn-img {
    display: block;
    max-width: 100%;
}
.frn-grit-site .frn-hero__logo-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(72px, 11vw, 180px);
    line-height: 0.85;
    letter-spacing: 6px;
    color: var(--frn-bone, #f4f1ea);
    margin: 0 0 20px;
    text-align: right;
    text-shadow: 0 0 40px rgba(217, 13, 30, 0.5);
    text-transform: uppercase;
    animation: frnFadeUp 1s ease .4s both;
}
.frn-grit-site .frn-hero__logo-text span {
    display: block;
    font-size: 0.25em;
    color: var(--frn-red-lt, #ff3344);
    letter-spacing: 8px;
    margin-top: 4px;
}
.frn-grit-site .frn-hero__content--centered {
    margin: 0 auto !important;
    text-align: center !important;
    max-width: 800px;
    margin-right: 0 !important;
}
.frn-grit-site .frn-hero__content--centered .frn-hero__eyebrow,
.frn-grit-site .frn-hero__content--centered .frn-hero__cta-row {
    justify-content: center;
}
.frn-grit-site .frn-hero__content--centered .frn-hero__logo-text {
    text-align: center;
}
.frn-grit-site .frn-hero__content--centered .frn-hero__tagline {
    margin-left: auto;
    margin-right: auto;
}
.frn-grit-site .frn-hero__model-wrap {
    position: absolute;
    left: -3%;
    bottom: 0;
    height: 100%;
    width: auto;
    max-width: 65%;
    pointer-events: none;
    z-index: 2;
    animation: frnHeroInOpacity 1.4s ease both;
}
.frn-grit-site .frn-hero__model-wrap .frn-img {
    height: 100%;
    width: 100%;
    object-position: left bottom !important;
    filter: drop-shadow(40px 20px 80px rgba(0,0,0,.9));
    mask-image: linear-gradient(90deg, black 0%, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, black 0%, black 75%, transparent 100%);
}

/* ============================================================
 *  Global mobile safety — prevent horizontal overflow everywhere
 * ============================================================ */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}
.frn-grit-site {
    overflow-x: hidden;
    max-width: 100vw;
}
.frn-grit-site section {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ============================================================
 *  TABLET — 900px
 * ============================================================ */
@media (max-width: 900px) {
    .frn-grit-site .frn-section-title {
        font-size: clamp(32px, 8vw, 52px);
        letter-spacing: 2px;
    }
    .frn-grit-site .frn-section-head {
        padding: 0 5vw;
        margin-bottom: 30px;
    }
    .frn-grit-site .frn-kicker {
        font-size: 10px;
        letter-spacing: 2px;
    }
    .frn-grit-site .frn-hero {
        padding: 50px 5vw 100px;
    }
    .frn-grit-site .frn-hero__model {
        max-width: 55%;
    }
    .frn-grit-site .frn-hero__logo {
        max-width: 400px;
    }
}

/* ============================================================
 *  MOBILE — 640px and below: the big overhaul
 * ============================================================ */
@media (max-width: 640px) {

    /* -- Global section spacing -- */
    .frn-grit-site section {
        padding-left: 5vw !important;
        padding-right: 5vw !important;
    }
    .frn-grit-site .frn-section-title {
        font-size: clamp(26px, 7.5vw, 36px);
        letter-spacing: 1.5px;
        line-height: 1;
    }
    .frn-grit-site .frn-section-title span {
        /* Accent spans inside titles */
    }
    .frn-grit-site .frn-kicker {
        font-size: 9px;
        letter-spacing: 2px;
        margin-bottom: 8px;
    }
    .frn-grit-site .frn-section-head {
        padding: 0;
        margin-bottom: 24px;
    }

    /* -- Hero -- */
    .frn-grit-site .frn-hero {
        padding: 20px 5vw 50px !important;
        min-height: auto !important;
        justify-content: flex-start !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-top: -56px;
        padding-top: 76px !important;
    }
    .frn-grit-site .frn-hero__content {
        margin: 0 auto !important;
        padding: 0 !important;
    }
    .frn-grit-site .frn-hero__model,
    .frn-grit-site .frn-hero__model-wrap {
        position: relative;
        opacity: .55;
        max-width: 90%;
        max-height: 220px;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 0 auto 10px;
        height: auto;
        order: 1;
        filter: drop-shadow(0 20px 40px rgba(0,0,0,.7));
        -webkit-mask-image: none;
        mask-image: none;
    }
    .frn-grit-site .frn-hero__model-wrap .frn-img {
        height: auto;
        max-height: 220px;
        object-fit: contain;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .frn-grit-site .frn-hero__content {
        max-width: 100%;
        margin-right: 0;
        text-align: center;
        order: 2;
    }
    .frn-grit-site .frn-hero__eyebrow {
        font-size: 9px;
        letter-spacing: 2px;
        gap: 8px;
        justify-content: center;
        margin-bottom: 14px;
    }
    .frn-grit-site .frn-hero__eyebrow .dot {
        width: 6px; height: 6px;
    }
    .frn-grit-site .frn-hero__logo,
    .frn-hero__logo {
        max-width: 200px !important;
        width: auto !important;
        height: auto !important;
        max-height: 160px !important;
        margin: 0 auto !important;
        display: block !important;
    }
    .frn-grit-site .frn-hero__logo-text {
        font-size: clamp(44px, 13vw, 64px);
        text-align: center;
        letter-spacing: 3px;
    }
    .frn-grit-site .frn-hero__logo-text span {
        font-size: .28em;
        letter-spacing: 4px;
    }
    .frn-grit-site .frn-hero__tagline {
        font-size: 15px;
        margin: 14px auto 24px;
        max-width: 100%;
        line-height: 1.55;
    }
    .frn-grit-site .frn-hero__cta-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        justify-content: center;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
    .frn-grit-site .frn-hero__cta-row .frn-btn {
        width: 100%;
        padding: 14px 20px;
        font-size: 15px;
        letter-spacing: 2.5px;
    }
    .frn-grit-site .frn-hero__ticker {
        padding: 10px 0;
    }
    .frn-grit-site .frn-hero__ticker-track {
        font-size: 13px;
        letter-spacing: 2px;
        gap: 20px;
    }

    /* -- Prologue reader -- */
    .frn-grit-site .frn-reader {
        padding: 56px 18px 24px 18px;
        margin: 0 16px;
    }
    .frn-grit-site .frn-reader__stamp {
        top: 14px;
        right: 14px;
        padding: 5px 12px;
        font-size: 11px;
        letter-spacing: 2px;
        border-width: 2px;
    }
    .frn-grit-site .frn-reader__meta {
        font-size: 9px;
        letter-spacing: 2px;
        flex-wrap: wrap;
        gap: 6px;
        padding-right: 90px; /* leave room for stamp */
    }
    .frn-grit-site .frn-reader__title {
        font-size: clamp(22px, 6.5vw, 30px);
        letter-spacing: 1.5px;
        margin-bottom: 20px;
        line-height: 1;
    }
    .frn-grit-site .frn-reader__body {
        font-size: 15px;
        line-height: 1.65;
    }
    .frn-grit-site .frn-reader__body p {
        text-indent: 1em;
        margin-bottom: 1em;
    }

    /* -- Red email gate -- */
    .frn-grit-site .frn-reader__gate--hard {
        padding: 28px 20px;
        margin: 24px 0 16px;
    }
    .frn-grit-site .frn-reader__gate-stamp {
        font-size: 9px;
        letter-spacing: 3px;
    }
    .frn-grit-site .frn-reader__gate-title {
        font-size: 24px;
        letter-spacing: 2px;
    }
    .frn-grit-site .frn-reader__gate-msg {
        font-size: 13px;
    }
    .frn-grit-site .frn-reader__gate-form input {
        padding: 12px 14px;
        font-size: 15px;
    }
    .frn-grit-site .frn-reader__gate-form .frn-btn {
        font-size: 15px;
        padding: 14px;
    }

    /* -- ERBERUS vitals -- */
    .frn-grit-site .frn-erberus {
        padding: 40px 5vw;
    }
    .frn-grit-site .frn-erberus__head {
        font-size: 9px;
        letter-spacing: 2px;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;
    }
    .frn-grit-site .frn-erberus__grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    .frn-grit-site .frn-erberus__stat {
        padding: 16px 14px;
    }
    .frn-grit-site .frn-erberus__label {
        font-size: 9px;
        letter-spacing: 2px;
        margin-bottom: 4px;
    }
    .frn-grit-site .frn-erberus__value {
        font-size: 32px;
        letter-spacing: 1px;
    }
    .frn-grit-site .frn-erberus__sub {
        font-size: 9px;
    }
    .frn-grit-site .frn-erberus__foot {
        font-size: 9px;
        margin-top: 16px;
    }

    /* -- Merch grid -- */
    .frn-grit-site .frn-merch {
        padding: 40px 5vw 60px;
    }
    .frn-grit-site .frn-merch__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .frn-grit-site .frn-merch__meta h4 {
        font-size: 18px;
        letter-spacing: 2px;
    }
    .frn-grit-site .frn-merch__price {
        font-size: 18px !important;
    }

    /* -- Characters -- */
    .frn-grit-site .frn-characters {
        padding: 40px 5vw 60px;
    }
    .frn-grit-site .frn-characters__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .frn-grit-site .frn-char-card {
        border-radius: 4px;
    }
    .frn-grit-site .frn-char-card__portrait {
        aspect-ratio: 16/10;
    }
    .frn-grit-site .frn-char-card.is-wide .frn-char-card__portrait {
        aspect-ratio: 16/9;
    }
    .frn-grit-site .frn-char-card__callsign {
        font-size: clamp(18px, 5vw, 22px);
        letter-spacing: 1.5px;
    }
    .frn-grit-site .frn-char-card__role {
        font-size: 9px;
        letter-spacing: 1.5px;
        margin: 4px 0 12px;
    }
    .frn-grit-site .frn-char-card__bio {
        font-size: 13px;
        line-height: 1.55;
    }
    .frn-grit-site .frn-char-card__placeholder span {
        font-size: clamp(70px, 18vw, 110px);
    }
    .frn-grit-site .frn-char-card__meta {
        padding: 16px 18px;
    }
    .frn-grit-site .frn-char-card__status {
        font-size: 8px;
        letter-spacing: 1.5px;
        padding: 3px 8px;
        top: 10px;
        right: 10px;
    }

    /* -- Apex spotlight -- */
    .frn-grit-site .frn-apex-spotlight {
        padding: 40px 5vw;
        min-height: auto;
        gap: 20px;
    }
    .frn-grit-site .frn-apex-spotlight__classification {
        font-size: 9px;
        letter-spacing: 2px;
        padding: 4px 10px;
    }
    .frn-grit-site .frn-apex-spotlight__title {
        font-size: clamp(40px, 11vw, 60px);
    }
    .frn-grit-site .frn-apex-spotlight__specs {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .frn-grit-site .frn-apex-spotlight__spec {
        padding: 10px 12px;
    }
    .frn-grit-site .frn-apex-spotlight__spec span {
        font-size: 8px;
        letter-spacing: 2px;
    }
    .frn-grit-site .frn-apex-spotlight__spec strong {
        font-size: 16px;
        letter-spacing: 1px;
    }
    .frn-grit-site .frn-apex-spotlight__desc {
        font-size: 14px;
        line-height: 1.6;
    }
    .frn-grit-site .frn-apex-spotlight__image-wrap {
        height: auto;
        min-height: 280px;
        padding: 20px;
    }

    /* -- Author section -- */
    .frn-grit-site .frn-author {
        padding: 40px 5vw 60px;
    }
    .frn-grit-site .frn-author__card {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .frn-grit-site .frn-author__portrait {
        max-width: 200px;
        margin: 0 auto;
    }
    .frn-grit-site .frn-author__initials {
        font-size: 80px;
    }
    .frn-grit-site .frn-author__credit-label {
        font-size: 9px;
        letter-spacing: 2px;
        min-width: 80px;
    }
    .frn-grit-site .frn-author__credit-value {
        font-size: 18px;
        letter-spacing: 1px;
    }
    .frn-grit-site .frn-author__credit-title {
        font-size: 9px;
    }
    .frn-grit-site .frn-author__bio {
        font-size: 14px;
        line-height: 1.65;
    }

    /* -- About section -- */
    .frn-grit-site .frn-about__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .frn-grit-site .frn-about__mark {
        max-width: 80px;
        margin: 0 auto;
    }
    .frn-grit-site .frn-about__copy p {
        font-size: 14px;
    }
    .frn-grit-site .frn-about__badges {
        font-size: 10px;
        letter-spacing: 2px;
        gap: 12px;
        flex-wrap: wrap;
    }

    /* -- Contact -- */
    .frn-grit-site .frn-contact {
        padding: 40px 5vw 60px;
    }
    .frn-grit-site .frn-contact__wrap {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .frn-grit-site .frn-contact__intel h3 {
        font-size: 22px;
        letter-spacing: 2px;
    }
    .frn-grit-site .frn-contact__intel p {
        font-size: 13px;
    }
    .frn-grit-site .frn-contact__form {
        padding: 24px 18px;
    }

    /* -- Gallery -- */
    .frn-grit-site .frn-gallery {
        padding: 40px 5vw 60px;
    }
    .frn-grit-site .frn-gallery__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .frn-grit-site .frn-gallery__tag {
        font-size: 8px;
        padding: 3px 6px;
    }
    .frn-grit-site .frn-gallery__item figcaption {
        font-size: 11px;
        letter-spacing: 1px;
        padding: 10px 12px;
    }

    /* -- Footer -- */
    .frn-grit-site .frn-footer {
        padding: 40px 5vw 20px;
    }
    .frn-grit-site .frn-footer__cols {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .frn-grit-site .frn-footer__legal {
        font-size: 9px;
        flex-direction: column;
        gap: 4px;
    }

    /* -- Book entry button -- */
    .frn-grit-site .frn-btn--book {
        padding: 16px 24px;
    }
    .frn-grit-site .frn-btn__label {
        font-size: 18px;
    }
    .frn-grit-site .frn-btn__sub {
        font-size: 10px;
    }

    /* -- General button sizing -- */
    .frn-grit-site .frn-btn--primary {
        font-size: 16px;
        letter-spacing: 3px;
        padding: 14px 24px;
    }
    .frn-grit-site .frn-btn--ghost {
        font-size: 14px;
        letter-spacing: 2px;
        padding: 12px 20px;
    }
}

/* ============================================================
 *  EXTRA SMALL PHONES — 380px and below
 * ============================================================ */
@media (max-width: 380px) {
    .frn-grit-site .frn-section-title {
        font-size: clamp(22px, 7vw, 30px);
    }
    .frn-grit-site .frn-hero__logo {
        max-width: 220px;
    }
    .frn-grit-site .frn-hero__logo-text {
        font-size: clamp(40px, 13vw, 56px);
    }
    .frn-grit-site .frn-hero__tagline {
        font-size: 14px;
    }
    .frn-grit-site .frn-erberus__grid {
        grid-template-columns: 1fr;
    }
    .frn-grit-site .frn-erberus__value {
        font-size: 28px;
    }
    .frn-grit-site .frn-gallery__grid {
        grid-template-columns: 1fr;
    }
    .frn-grit-site .frn-apex-spotlight__title {
        font-size: clamp(32px, 10vw, 44px);
    }
    .frn-grit-site .frn-reader__title {
        font-size: 22px;
    }
}

/* ============================================================
 *  PROLOGUE STAGED READER + GATES
 * ============================================================ */
.frn-grit-site .frn-reader__stage {
    transition: opacity .5s ease, max-height .6s ease;
}
.frn-grit-site .frn-reader__stage[hidden] {
    display: none !important;
}
.frn-grit-site .frn-reader__stage.is-revealed {
    animation: frnStageReveal .7s ease both;
}
@keyframes frnStageReveal {
    from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
    to   { opacity: 1; transform: translateY(0);  filter: blur(0);   }
}

/* GATE 1 — soft reveal button */
.frn-grit-site .frn-reader__gate--soft {
    position: relative;
    text-align: center;
    padding: 40px 20px 20px;
    margin-top: -80px;
}
.frn-grit-site .frn-reader__gate--soft[hidden] {
    display: none;
}
.frn-grit-site .frn-reader__fade {
    position: absolute;
    left: 0;
    right: 0;
    top: -40px;
    height: 120px;
    background: linear-gradient(180deg, transparent 0%, var(--frn-ink, #1a0a0a) 70%);
    pointer-events: none;
}
.frn-grit-site .frn-reader__gate--soft .frn-btn {
    position: relative;
    z-index: 2;
}
.frn-grit-site .frn-reader__gate-sub {
    display: block;
    margin-top: 12px;
    font-family: 'Special Elite', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--frn-steel-d, #888);
    position: relative;
    z-index: 2;
}

/* GATE 2 — hard red email capture */
.frn-grit-site .frn-reader__gate--hard {
    position: relative;
    margin: 40px 0 20px;
    padding: 40px 32px;
    background: linear-gradient(135deg, rgba(60, 0, 0, 0.95), rgba(30, 0, 0, 0.95));
    border: 2px solid var(--frn-red, #d90d1e);
    overflow: hidden;
    animation: frnHardGateIn .6s cubic-bezier(.2, .7, .2, 1);
    box-shadow:
        0 0 40px rgba(217, 13, 30, 0.4),
        inset 0 0 60px rgba(0, 0, 0, 0.6);
}
.frn-grit-site .frn-reader__gate--hard[hidden] {
    display: none;
}
@keyframes frnHardGateIn {
    from { opacity: 0; transform: translateY(20px) scale(.96); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0) scale(1);      filter: blur(0);   }
}
.frn-grit-site .frn-reader__gate-bg {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(217,13,30,.08) 0 1px, transparent 1px 12px),
        radial-gradient(circle at 20% 30%, rgba(217,13,30,.3), transparent 60%);
    pointer-events: none;
}
.frn-grit-site .frn-reader__gate-content {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}
.frn-grit-site .frn-reader__gate-stamp {
    display: inline-block;
    font-family: 'Special Elite', monospace;
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--frn-red-lt, #ff3344);
    padding: 6px 14px;
    border: 1px solid var(--frn-red-lt, #ff3344);
    margin-bottom: 20px;
    animation: frnGateStampBlink 2s steps(2) infinite;
}
@keyframes frnGateStampBlink {
    0%, 94%, 100% { opacity: 1; }
    95%, 99%      { opacity: 0.3; }
}
.frn-grit-site .frn-reader__gate-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: 3px;
    color: var(--frn-bone, #f4f1ea);
    margin: 0 0 12px;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(217, 13, 30, 0.6);
}
.frn-grit-site .frn-reader__gate-msg {
    font-size: 15px;
    line-height: 1.6;
    color: var(--frn-cream, #d4c9b8);
    margin: 0 0 24px;
}
.frn-grit-site .frn-reader__gate-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}
.frn-grit-site .frn-reader__gate-form label {
    display: block;
}
.frn-grit-site .frn-reader__gate-form span {
    display: block;
    font-family: 'Special Elite', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--frn-red-lt, #ff3344);
    margin-bottom: 6px;
}
.frn-grit-site .frn-reader__gate-form input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--frn-bone, #f4f1ea);
    font-family: 'Barlow', sans-serif;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color .2s;
}
.frn-grit-site .frn-reader__gate-form input:focus {
    outline: none;
    border-color: var(--frn-red-lt, #ff3344);
    box-shadow: 0 0 12px rgba(255, 51, 68, 0.3);
}
.frn-grit-site .frn-reader__gate-form .frn-btn {
    width: 100%;
    margin-top: 6px;
}
.frn-grit-site .frn-reader__gate-msg-out {
    min-height: 20px;
    font-family: 'Special Elite', monospace;
    font-size: 12px;
    text-align: center;
    color: var(--frn-steel-d, #888);
}
.frn-grit-site .frn-reader__gate-msg-out.is-success {
    color: #4cd97b;
}
.frn-grit-site .frn-reader__gate-msg-out.is-error {
    color: var(--frn-red-lt, #ff3344);
}
.frn-grit-site .frn-reader__gate-legal {
    margin-top: 20px;
    font-family: 'Special Elite', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--frn-steel-d, #666);
}

/* Clearance level on reader meta when it upgrades */
.frn-grit-site .frn-reader__meta [data-clearance-level] {
    transition: color .3s, text-shadow .3s;
}

/* Simple mailing list form (register shortcode) */
.frn-grit-site .frn-auth__simple {
    max-width: 480px;
    margin: 0 auto;
    padding: 30px 5vw 0;
    text-align: center;
}
.frn-grit-site .frn-auth__intro {
    font-size: 16px;
    line-height: 1.6;
    color: var(--frn-cream, #d4c9b8);
    margin-bottom: 24px;
}

/* ============================================================
 *  v2.0.1 MOBILE POLISH PASS
 *  Final refinements after full-site mobile audit
 * ============================================================ */

/* --- ERBERUS vitals: single column on narrow phones so numbers breathe --- */
@media (max-width: 500px) {
    .frn-grit-site .frn-erberus {
        padding: 32px 4vw;
    }
    .frn-grit-site .frn-erberus__grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    .frn-grit-site .frn-erberus__stat {
        padding: 14px 16px;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 12px;
    }
    .frn-grit-site .frn-erberus__label {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
    }
    .frn-grit-site .frn-erberus__value {
        grid-column: 2;
        grid-row: 1 / span 2;
        font-size: 28px;
        margin: 0;
        text-align: right;
    }
    .frn-grit-site .frn-erberus__sub {
        grid-column: 1;
        grid-row: 2;
        font-size: 8px;
    }
    .frn-grit-site .frn-erberus__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* --- Merch: better proportions on mobile --- */
@media (max-width: 640px) {
    .frn-grit-site .frn-merch__card {
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 14px;
        align-items: stretch;
    }
    .frn-grit-site .frn-merch__img {
        margin: 0;
        aspect-ratio: 1;
    }
    .frn-grit-site .frn-merch__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .frn-grit-site .frn-merch__meta {
        padding: 14px 16px 14px 0;
        text-align: left;
    }
    .frn-grit-site .frn-merch__meta h4 {
        font-size: 14px;
        margin: 0 0 4px;
        letter-spacing: 1px;
    }
    .frn-grit-site .frn-merch__price {
        font-size: 16px !important;
        margin: 2px 0 !important;
    }
    .frn-grit-site .frn-merch__desc {
        display: none;  /* hide long descriptions on mobile */
    }
    .frn-grit-site .frn-merch__cart {
        padding: 8px 12px;
        font-size: 12px;
        letter-spacing: 1.5px;
        margin-top: 6px;
    }
}

/* --- Gallery: 1 column on narrow phones, better aspect --- */
@media (max-width: 500px) {
    .frn-grit-site .frn-gallery__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .frn-grit-site .frn-gallery__img-wrap {
        aspect-ratio: 16/10;
    }
    .frn-grit-site .frn-gallery__img-wrap img {
        padding: 16px;
    }
}

/* --- Contact form: tighter, better tap targets --- */
@media (max-width: 640px) {
    .frn-grit-site .frn-contact__form {
        padding: 20px 16px;
    }
    .frn-grit-site .frn-contact__form label {
        margin-bottom: 16px;
    }
    .frn-grit-site .frn-contact__form span {
        font-size: 9px;
        letter-spacing: 2px;
        margin-bottom: 6px;
    }
    .frn-grit-site .frn-contact__form input,
    .frn-grit-site .frn-contact__form textarea {
        padding: 12px 14px;
        font-size: 16px; /* 16px prevents iOS zoom-on-focus */
    }
    .frn-grit-site .frn-contact__intel {
        padding: 24px 20px;
    }
    .frn-grit-site .frn-contact__channels li {
        padding: 10px 0;
    }
    .frn-grit-site .frn-contact__channel-label {
        font-size: 9px;
    }
    .frn-grit-site .frn-contact__channels li > span:last-child {
        font-size: 14px;
        letter-spacing: .5px;
        word-break: break-word;
    }
}

/* --- Author portrait: make it proportional --- */
@media (max-width: 640px) {
    .frn-grit-site .frn-author {
        padding: 32px 5vw 50px;
    }
    .frn-grit-site .frn-author__portrait {
        max-width: 180px;
        aspect-ratio: 3/4;
    }
    .frn-grit-site .frn-author__credits {
        padding-left: 16px;
        margin-bottom: 20px;
    }
    .frn-grit-site .frn-author__credit-row {
        padding: 8px 0;
    }
}

/* --- Reader gate: tighter on mobile --- */
@media (max-width: 640px) {
    .frn-grit-site .frn-reader__gate--hard {
        padding: 24px 18px;
    }
    .frn-grit-site .frn-reader__gate-form input {
        font-size: 16px; /* prevent iOS zoom */
    }
}

/* --- Footer stacking --- */
@media (max-width: 640px) {
    .frn-grit-site .frn-footer {
        padding: 32px 5vw 20px;
    }
    .frn-grit-site .frn-footer__col h5 {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .frn-grit-site .frn-footer__col a,
    .frn-grit-site .frn-footer__col p {
        font-size: 13px;
        margin-bottom: 6px;
    }
}

/* --- iOS input zoom prevention across all forms --- */
@media (max-width: 640px) {
    .frn-grit-site input[type="text"],
    .frn-grit-site input[type="email"],
    .frn-grit-site input[type="password"],
    .frn-grit-site input[type="search"],
    .frn-grit-site textarea {
        font-size: 16px !important;
    }
}

/* --- Tiny phones (< 360px) --- */
@media (max-width: 360px) {
    .frn-grit-site .frn-section-title {
        font-size: clamp(20px, 6.5vw, 26px);
    }
    .frn-grit-site .frn-hero {
        padding: 20px 4vw 60px;
    }
    .frn-grit-site .frn-hero__logo {
        max-width: 200px;
    }
    .frn-grit-site .frn-hero__model,
    .frn-grit-site .frn-hero__model-wrap {
        max-height: 180px;
    }
    .frn-grit-site .frn-reader {
        margin: 0 8px;
        padding: 48px 14px 20px;
    }
    .frn-grit-site .frn-reader__title {
        font-size: 20px;
    }
    .frn-grit-site .frn-author__portrait {
        max-width: 150px;
    }
}

/* ============================================================
 *  HERO CONTENT ALIGNMENT (admin-controlled)
 * ============================================================ */
.frn-hero__content--align-left {
    text-align: left;
    align-items: flex-start;
    margin-left: 5vw;
    margin-right: auto;
}
.frn-hero__content--align-center {
    text-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}
.frn-hero__content--align-right {
    text-align: right;
    align-items: flex-end;
    margin-left: auto;
    margin-right: 5vw;
}
/* Ensure hero content always has flex layout so alignment works */
.frn-hero__content {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 4;
}
.frn-hero__content .frn-hero__cta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.frn-hero__content--align-center .frn-hero__cta-row { justify-content: center; }
.frn-hero__content--align-left   .frn-hero__cta-row { justify-content: flex-start; }
.frn-hero__content--align-right  .frn-hero__cta-row { justify-content: flex-end; }

/* ============================================================
 *  MOBILE SPECIFIC — eyebrow never gets cut off by fixed header
 * ============================================================ */
@media (max-width: 640px) {
    .frn-grit-site .frn-hero {
        padding-top: 120px !important;
        padding-bottom: 80px;
    }
    .frn-grit-site .frn-hero__eyebrow {
        margin-top: 20px;
        font-size: 10px;
        letter-spacing: 2px;
    }
    .frn-hero__content--align-left,
    .frn-hero__content--align-right {
        /* On mobile, always center — left/right looks broken on narrow screens */
        text-align: center;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
    }
    .frn-hero__content--align-left  .frn-hero__cta-row,
    .frn-hero__content--align-right .frn-hero__cta-row { justify-content: center; }
}

/* Reading-first home: a quieter welcome that lets the artwork lead. */
.frn-grit-site .frn-welcome {position:relative;isolation:isolate;display:flex;align-items:center;min-height:min(760px,85svh);padding:clamp(90px,12vw,170px) max(6vw,24px) clamp(75px,10vw,130px);overflow:hidden;background:#151511;color:#fff8ed}
.frn-grit-site .frn-welcome__image {position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 48%;animation:frn-welcome-in 1.5s ease-out both}
.frn-grit-site .frn-welcome::before {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,10,9,.93) 0%,rgba(10,12,9,.76) 39%,rgba(10,12,9,.12) 100%),linear-gradient(0deg,rgba(8,10,9,.48),transparent 40%)}
.frn-grit-site .frn-welcome__content {max-width:660px;animation:frn-welcome-text .85s .12s ease-out both}
.frn-grit-site .frn-welcome__eyebrow {display:block;font:700 12px/1.4 var(--frn-body);letter-spacing:.22em;text-transform:uppercase;color:#ffd491}
.frn-grit-site .frn-welcome h1 {font:400 clamp(58px,9.2vw,132px)/.91 Georgia,'Times New Roman',serif;letter-spacing:-.055em;margin:24px 0;color:#fff8ed}
.frn-grit-site .frn-welcome h1 em {display:block;color:#ffcd83;font-weight:400}
.frn-grit-site .frn-welcome__lede {font-size:clamp(18px,2vw,23px);line-height:1.55;max-width:570px;color:#f4ede3;margin:0 0 32px}
.frn-grit-site .frn-welcome__actions {display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.frn-grit-site .frn-welcome__actions .frn-btn {clip-path:none;border-radius:4px;font:700 17px/1.2 var(--frn-body);letter-spacing:.01em;text-transform:none;padding:18px 27px;background:#e64737;color:#fff!important;box-shadow:none}
.frn-grit-site .frn-welcome__actions .frn-btn:hover {background:#b83229;transform:translateY(-2px)}
.frn-grit-site .frn-welcome__link {color:#fff2d9;text-decoration:underline;text-underline-offset:5px;font-weight:700}
.frn-grit-site .frn-welcome__note {display:block;margin-top:20px;color:#e9ddcc;font-size:13px}
.frn-grit-site .frn-updates {padding:clamp(70px,8vw,120px) max(6vw,24px);background:#f5eee3;color:#26211d}
.frn-grit-site .frn-updates__inner {max-width:1220px;margin:auto}
.frn-grit-site .frn-updates__head {display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}
.frn-grit-site .frn-updates .frn-welcome__eyebrow {color:#9f382a}
.frn-grit-site .frn-updates h2 {font:400 clamp(44px,6vw,78px)/1 Georgia,'Times New Roman',serif;letter-spacing:-.04em;margin:13px 0;color:#241c19}
.frn-grit-site .frn-updates__head p {font-size:18px;line-height:1.6;margin:0}
.frn-grit-site .frn-updates .frn-welcome__link {color:#9f382a;white-space:nowrap}
.frn-grit-site .frn-updates__grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.frn-grit-site .frn-updates__card,.frn-grit-site .frn-updates__empty {background:#fffaf2;border:1px solid #ddcabb;border-radius:12px;padding:clamp(24px,3vw,36px)}
.frn-grit-site .frn-updates__card time {font:700 12px var(--frn-body);letter-spacing:.08em;text-transform:uppercase;color:#9f382a}
.frn-grit-site .frn-updates__card h3 {font:400 30px/1.15 Georgia,'Times New Roman',serif;margin:15px 0}
.frn-grit-site .frn-updates__card h3 a {color:inherit;text-decoration:none}
.frn-grit-site .frn-updates__card p,.frn-grit-site .frn-updates__empty p {line-height:1.65}
.frn-grit-site .frn-updates__read,.frn-grit-site .frn-updates__empty a {font-weight:700;color:#9f382a}
.frn-grit-site .frn-updates__empty {max-width:720px}
@keyframes frn-welcome-in {from {opacity:.55;transform:scale(1.07)}to {opacity:1;transform:scale(1)}}
@keyframes frn-welcome-text {from {opacity:0;transform:translateY(24px)}to {opacity:1;transform:translateY(0)}}
@media (max-width:760px) {.frn-grit-site .frn-welcome {min-height:660px;align-items:end}.frn-grit-site .frn-welcome__image {background-position:60% center}.frn-grit-site .frn-welcome::before {background:linear-gradient(0deg,rgba(8,10,9,.96),rgba(8,10,9,.65) 58%,rgba(8,10,9,.18))}.frn-grit-site .frn-updates__grid {grid-template-columns:1fr}.frn-grit-site .frn-updates__head {display:block}.frn-grit-site .frn-updates__head>.frn-welcome__link {display:inline-block;margin-top:20px}}
@media (prefers-reduced-motion:reduce) {.frn-grit-site .frn-welcome__image,.frn-grit-site .frn-welcome__content {animation:none}}

.frn-grit-site .frn-prologue {scroll-margin-top:90px}
.frn-grit-site .frn-welcome a:focus-visible,.frn-grit-site .frn-updates a:focus-visible {outline:3px solid #ffdb72;outline-offset:4px}

.frn-grit-site .frn-welcome__network {display:flex;flex-wrap:wrap;gap:20px;margin-top:18px;font-size:14px}
.frn-grit-site .frn-welcome__network a {color:#ffdeab;text-underline-offset:4px}