/* ============================================================
   Casino Days FI — structure.css
   Tokens: TYPO-10 · SPACE-08 · CONT-01(1160) · BP-03 · GEO-09 · MOTION-07
   Light theme. Single section width = calc(container-site + 2*pad-desktop).
   ============================================================ */

:root {
    /* colors (RANDOM_SPEC .final) */
    --color-primary: #181b30;
    --color-accent: #544ec8;
    --color-accent-pressed: #4035af;
    --color-bg: #ffffff;
    --color-bg-elevated: #f4f4fa;
    --color-gradient-light: #b3ade7;
    --color-gradient-mid: #7f73d7;
    --color-text: #1e2835;
    --color-text-muted: #000000;
    --color-border: rgba(30, 40, 53, 0.14);
    --color-rg-banner: #dc2626;

    /* fonts */
    --font-display: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* TYPO-10 desktop */
    --fs-h1: 60px;
    --fs-h2: 34px;
    --fs-h3: 24px;
    --fs-h4: 19px;
    --fs-h5: 16px;
    --fs-h6: 14px;
    --fs-body: 16px;
    --fs-small: 13px;
    --fs-micro: 10px;
    --lh-tight: 1.1;
    --lh-normal: 1.5;
    --lh-loose: 1.65;
    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-wide: 0.06em;
    --fw-regular: 400;
    --fw-medium: 600;
    --fw-bold: 800;

    /* SPACE-08 */
    --space-2xs: 5px;
    --space-xs: 10px;
    --space-sm: 15px;
    --space-md: 25px;
    --space-lg: 40px;
    --space-xl: 60px;
    --space-2xl: 90px;
    --space-3xl: 140px;

    /* CONT-01 (site width overridden by build = 1160) */
    --container-site: 1160px;
    --container-readable: 640px;
    --container-padding-mobile: 16px;
    --container-padding-tablet: 32px;
    --container-padding-desktop: 48px;

    /* BP-03 */
    --bp-sm: 600px;
    --bp-md: 900px;
    --bp-lg: 1240px;
    --bp-xl: 1600px;

    /* GEO-09 */
    --radius-xs: 2px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 9999px;
    --radius-circle: 50%;
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.18);

    /* MOTION-07 */
    --dur-fast: 150ms;
    --dur-base: 300ms;
    --dur-slow: 600ms;
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);

    --header-height-desktop: 120px;
    --header-height-mobile: 80px;

    /* vertical section rhythm (A-09: pb + next pt must stay <=110) */
    --sec-pt: 64px;
    --sec-pb: 40px;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--color-text);
    background: var(--color-bg);
    font-weight: var(--fw-regular);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-pressed); }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure { margin: 0; }
button { font-family: inherit; }

/* ---------- a11y ---------- */
.skip-link {
    position: absolute;
    left: 12px;
    top: -200px;
    z-index: 200;
    background: var(--color-accent);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: var(--fw-bold);
}
.skip-link:focus { top: 12px; }
.skip-link:not(:focus) { top: -200px !important; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* shared inner wrapper width (single section width) */
.m34-inner, .t40-inner, .t74-inner, .q15-inner, .c92-inner, .q97-inner,
.t16-inner, .u14-inner, .e14-inner, .c39-inner, .s18-inner, .e47-inner,
.z15-content, .s05-inner, .n04-inner, .w59-inner, .c46-inner {
    width: 100%;
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin-inline: auto;
    padding-inline: var(--container-padding-desktop);
}
/* prose text stays on the readable measure (centered inside full-width inner) */
.c46-p, .c46-h2, .c46-ol, .c46-ul { max-width: var(--container-readable); margin-inline: auto; }

/* ============================================================
   HEADER — HEAD-10 Tall Editorial + NAV-03 + AUTH-BOTH
   ============================================================ */
.m34 {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.m34-inner { padding-block: 0; }
.m34-row { display: flex; align-items: center; }
.m34-row--top {
    min-height: 74px;
    gap: var(--space-md);
}
.m34-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 30px;
    letter-spacing: var(--ls-tight);
    flex-shrink: 0;
    line-height: 1;
}
.m34-logo-mark { color: var(--color-primary); }
.m34-logo-word { color: var(--color-accent); }
.m34-auth { display: inline-flex; gap: var(--space-sm); margin-left: auto; align-items: center; }
.m34-auth-btn {
    display: inline-flex; align-items: center;
    white-space: nowrap; flex-shrink: 0;
    padding-inline: var(--space-lg);
    height: 42px;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    text-decoration: none;
    border-radius: var(--radius-md);
}
.m34-auth-btn--login {
    background: transparent;
    border: 1px solid var(--color-text);
    color: var(--color-text);
}
.m34-auth-btn--login:hover { background: var(--color-text); color: var(--color-bg); }
.m34-auth-btn--register {
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    color: #ffffff;
}
.m34-auth-btn--register:hover { background: var(--color-accent-pressed); border-color: var(--color-accent-pressed); color: #ffffff; }
.m34-toggle {
    display: none;
    margin-left: auto;
    width: 46px; height: 42px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.m34-toggle-bar { display: block; width: 22px; height: 2px; background: var(--color-text); }
.m34-row--bottom { min-height: 46px; padding-bottom: var(--space-sm); }
.m34-nav { display: flex; flex-direction: column; gap: var(--space-2xs); width: 100%; }
.m34-nav-list {
    display: flex; flex-wrap: nowrap; gap: var(--space-lg);
    list-style: none; margin: 0; padding: 0;
}
.m34-nav-list--top { padding: 0; }
.m34-nav-list--bottom { padding-top: var(--space-2xs); border-top: 1px solid var(--color-border); }
.m34-nav-item { display: inline-flex; }
.m34-link {
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h6);
    white-space: nowrap;
    text-decoration: none;
    color: var(--color-text);
    padding-block: var(--space-2xs);
}
.m34-link:hover { color: var(--color-accent); }
.m34-link[aria-current="page"] { color: var(--color-accent); font-weight: var(--fw-bold); }

/* mobile drawer */
.m34-drawer {
    display: none;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: var(--space-md) var(--container-padding-mobile);
}
.m34-drawer.is-open { display: block; }
.m34-drawer-nav { display: flex; flex-direction: column; gap: var(--space-sm); }
.m34-drawer-btn {
    display: block; text-align: center;
    padding: 12px; border-radius: var(--radius-md);
    font-family: var(--font-display); font-weight: var(--fw-bold);
    font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide);
    text-decoration: none;
}
.m34-drawer-btn--login { border: 1px solid var(--color-text); color: var(--color-text); }
.m34-drawer-btn--register { background: var(--color-accent); color: #fff; }
.m34-drawer-list { list-style: none; margin: var(--space-xs) 0 0; padding: 0; }
.m34-drawer-link {
    display: block; padding: 12px 6px;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none; color: var(--color-text);
    font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h5);
}
.m34-drawer-link[aria-current="page"] { color: var(--color-accent); }

/* ============================================================
   HERO — HERO-02 Split Photo Right
   ============================================================ */
.t74 { padding-block: var(--sec-pt) var(--sec-pb); }
.t74-inner {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: var(--space-2xl);
    align-items: center;
    min-height: 480px;
}
.t74-text { min-width: 0; }
.t74-eyebrow {
    display: block;
    font-family: var(--font-body); font-weight: var(--fw-medium);
    font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide);
    color: var(--color-accent); margin-bottom: var(--space-sm);
}
.t74-title {
    font-family: var(--font-display); font-weight: var(--fw-bold);
    font-size: var(--fs-h1); letter-spacing: var(--ls-tight); line-height: var(--lh-tight);
    color: var(--color-text); text-transform: uppercase;
}
.t74-subtitle {
    font-family: var(--font-body); font-size: var(--fs-h5); line-height: var(--lh-normal);
    color: var(--color-text-muted); max-width: 480px; margin-top: var(--space-md);
}
.t74-actions { margin-top: var(--space-lg); display: flex; gap: var(--space-md); flex-wrap: wrap; }
.t74-cta-primary, .t74-cta-secondary {
    display: inline-flex; align-items: center; height: 52px; padding-inline: var(--space-lg);
    font-family: var(--font-display); font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-small);
    text-decoration: none; border-radius: var(--radius-md);
    transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.t74-cta-primary { background: var(--color-accent); color: #ffffff; border: 1px solid var(--color-accent); }
.t74-cta-primary:hover { background: var(--color-accent-pressed); color: #ffffff; transform: scale(1.02); }
.t74-cta-secondary { background: transparent; border: 1px solid var(--color-text-muted); color: var(--color-text); }
.t74-cta-secondary:hover { border-color: var(--color-text); color: var(--color-text); background: rgba(24, 27, 48, 0.05); }
.t74-figure {
    margin: 0; overflow: hidden; border-radius: var(--radius-lg);
    aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg);
}
.t74-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.t74-figure:hover img { transform: scale(1.04); }

/* ============================================================
   PAGE-HEADER — PHEAD-05
   ============================================================ */
.q15 { padding-block: var(--space-xl); }
.q15-crumbs {
    font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide);
    color: var(--color-text-muted); margin-bottom: var(--space-md);
}
.q15-crumbs a { color: var(--color-text-muted); text-decoration: none; }
.q15-crumbs a:hover { color: var(--color-accent); }
.q15-title {
    font-family: var(--font-display); font-weight: var(--fw-bold);
    font-size: var(--fs-h1); letter-spacing: var(--ls-tight); line-height: var(--lh-tight);
    text-transform: uppercase; color: var(--color-text);
}
.q15-description { margin-top: var(--space-md); font-size: var(--fs-h5); color: var(--color-text-muted); line-height: var(--lh-normal); max-width: 760px; }

/* ============================================================
   PROSE — PROSE-04 Drop-Cap Magazine
   ============================================================ */
.c46 { padding-block: var(--sec-pt) var(--sec-pb); }
.c46-h2 {
    font-family: var(--font-display); font-weight: var(--fw-medium);
    font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--color-text);
    margin-top: var(--space-xl); margin-bottom: var(--space-md);
}
.c46-inner > .c46-h2:first-child { margin-top: 0; }
.c46-p { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text); margin-bottom: var(--space-md); }
.c46-p a { color: var(--color-accent); text-decoration: underline; }
.c46-p--lead::first-letter {
    font-size: 4em; float: left; line-height: 0.8;
    margin-right: 0.1em; margin-top: 0.1em;
    color: var(--color-accent); font-family: var(--font-display); font-weight: var(--fw-bold);
}
.c46-ol, .c46-ul { margin-block: 0 var(--space-md); padding-left: var(--space-lg); line-height: var(--lh-loose); }
.c46-ol li, .c46-ul li { margin-bottom: var(--space-2xs); }
.c46-figure { margin: 0 0 var(--space-lg); overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.c46-figure img { width: 100%; height: auto; }
.c46-figure--context {
    width: 100%; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin-inline: auto; margin-bottom: var(--space-xl);
    padding-inline: var(--container-padding-desktop);
    background: transparent; box-shadow: none; border-radius: 0;
}
.c46-figure--context img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.c46-figrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }

/* ============================================================
   ITEMS GRID — GRID-01 Three-Column Bordered Cards
   ============================================================ */
.c92 { padding-block: var(--sec-pt) var(--sec-pb); }
.c92-heading {
    font-family: var(--font-display); font-weight: var(--fw-medium);
    font-size: var(--fs-h2); color: var(--color-text); margin-bottom: var(--space-lg);
}
.c92-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.c92-item {
    padding: var(--space-lg);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.c92-item:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.c92-item-title {
    font-family: var(--font-display); font-weight: var(--fw-bold);
    font-size: var(--fs-h4); line-height: var(--lh-tight); color: var(--color-text); margin-bottom: var(--space-sm);
}
.c92-item-text { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text-muted); }

/* ============================================================
   DATA TABLE — TABLE-08 Floating Cards Grid
   ============================================================ */
.e14 { padding-block: var(--sec-pt) var(--sec-pb); }
.e14-heading { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h2); margin-bottom: var(--space-lg); }
.e14-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); }
.e14-card { padding: var(--space-lg); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-md); }
.e14-field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.e14-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text-muted); }
.e14-value { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--color-text); }

/* ============================================================
   FAQ — FAQ-06 Anchored Linked List
   ============================================================ */
.q97 { padding-block: var(--sec-pt) var(--sec-pb); }
.q97-heading { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h2); margin-bottom: var(--space-lg); }
.q97-toc {
    padding: var(--space-lg);
    background: rgba(84, 78, 200, 0.06);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2xl);
}
.q97-toc ol { margin: 0; padding-left: var(--space-lg); }
.q97-toc li { margin-bottom: var(--space-xs); }
.q97-toc a { color: var(--color-text-muted); text-decoration: none; font-size: var(--fs-body); }
.q97-toc a:hover { color: var(--color-accent); text-decoration: underline; }
.q97-list { margin: 0; }
.q97-q { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--color-text); margin-top: var(--space-lg); scroll-margin-top: var(--space-lg); }
.q97-a { margin: var(--space-xs) 0 0; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); }
.q97-a p { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-muted); }

/* ============================================================
   REVIEWS — REV-05 Vertical Timeline
   ============================================================ */
.t16 { padding-block: var(--sec-pt) var(--sec-pb); }
.t16-heading { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h2); margin-bottom: var(--space-lg); }
.t16-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--color-accent); }
.t16-item { position: relative; padding-left: var(--space-2xl); margin-bottom: var(--space-xl); }
.t16-item:last-child { margin-bottom: 0; }
.t16-marker { position: absolute; left: -8px; top: 6px; width: 16px; height: 16px; background: var(--color-accent); border-radius: var(--radius-circle); }
.t16-head { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: var(--space-2xs); }
.t16-author { font-weight: var(--fw-bold); color: var(--color-text); }
.t16-stars { display: inline-flex; gap: 2px; margin-bottom: var(--space-xs); }
.t16-date { color: var(--color-text-muted); }
.t16-star { color: #6f6f6f; font-size: var(--fs-h5); line-height: 1; }
.t16-star.is-full { color: #f5a623; }
.t16-star.is-half { position: relative; color: #6f6f6f; }
.t16-star.is-half::before { content: "★"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: #f5a623; }
.t16-text { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text); }

/* ============================================================
   CTA — CTA-06 Sticky Bottom Banner (home)
   ============================================================ */
.u14 {
    position: sticky; bottom: 0; z-index: 90;
    width: 100%;
    background: var(--color-accent);
    box-shadow: var(--shadow-lg);
}
.u14.is-hidden { display: none; }
.u14-inner { display: flex; align-items: center; gap: var(--space-md); min-height: 80px; padding-block: var(--space-sm); }
.u14-title { font-size: var(--fs-body); font-weight: var(--fw-bold); color: #ffffff; flex: 1; }
.u14-btn {
    display: inline-flex; align-items: center; height: 44px; padding-inline: var(--space-lg);
    background: #ffffff; color: var(--color-accent-pressed);
    font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-small);
    text-decoration: none; border-radius: var(--radius-pill);
}
.u14-btn:hover { background: var(--color-primary); color: #ffffff; }
.u14-close { background: transparent; border: 0; color: #ffffff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 var(--space-2xs); }

/* ============================================================
   INLINE CTA — INLINE-CTA-01 Compact Banner Strip
   ============================================================ */
.n04 { background: var(--color-accent); padding-block: var(--space-md); }
.n04-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.n04-text { font-size: var(--fs-h5); font-weight: var(--fw-bold); color: #ffffff; }
.n04-btn {
    display: inline-flex; align-items: center; padding: var(--space-sm) var(--space-lg);
    background: #ffffff; color: var(--color-accent-pressed);
    border-radius: var(--radius-md); text-decoration: none; white-space: nowrap;
    font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-small);
}
.n04-btn:hover { background: var(--color-primary); color: #ffffff; }

/* ============================================================
   AUTHOR BYLINE — BYLINE-01 Compact Inline
   ============================================================ */
.e47 { padding-block: var(--space-md); border-top: 1px solid var(--color-border); }
.e47-inner { display: flex; align-items: center; gap: var(--space-sm); }
.e47-portrait { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-circle); overflow: hidden; display: block; }
.e47-portrait img { width: 48px; height: 48px; object-fit: cover; object-position: center top; }
.e47-text { min-width: 0; }
.e47-attribution { font-family: var(--font-body); font-size: var(--fs-body); color: var(--color-text-muted); }
.e47-name { color: var(--color-accent); text-decoration: underline; }
.e47-sep { margin-inline: 4px; }
.e47-role { font-size: var(--fs-small); font-style: italic; color: var(--color-text-muted); margin-top: var(--space-2xs); }

/* ============================================================
   AUTHOR CARD — AUTH-02 Vertical Centered Editorial
   ============================================================ */
.s18 { padding-block: var(--sec-pt) var(--sec-pb); }
.s18-inner { text-align: center; }
.s18-job, .s18-name, .s18-bio, .s18-tags { max-width: 620px; margin-inline: auto; }
.s18-portrait { width: 140px; height: 140px; border-radius: var(--radius-circle); object-fit: cover; object-position: center top; margin: 0 auto var(--space-lg); }
.s18-job { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-accent); }
.s18-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); margin: var(--space-2xs) 0 var(--space-md); }
.s18-bio { line-height: var(--lh-loose); color: var(--color-text-muted); margin-bottom: var(--space-md); }
.s18-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; }
.s18-tag { font-size: var(--fs-small); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 6px 14px; color: var(--color-text); }

/* ============================================================
   CONTACT FORM — FORM-05 Bordered Editorial
   ============================================================ */
.c39 { padding-block: var(--sec-pt) var(--sec-pb); }
.c39-intro { font-size: var(--fs-h5); color: var(--color-text-muted); margin-bottom: var(--space-lg); max-width: 760px; }
.c39-form { border: 2px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-xl); max-width: 720px; }
.c39-field { margin-bottom: var(--space-lg); display: flex; flex-direction: column; }
.c39-label { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text-muted); margin-bottom: var(--space-2xs); }
.c39-input {
    font-family: var(--font-body); font-size: var(--fs-h5); color: var(--color-text);
    background: transparent; border: 0; border-bottom: 1px solid var(--color-border);
    padding: var(--space-xs) 0; width: 100%;
}
.c39-input:focus { outline: none; border-bottom-color: var(--color-accent); }
.c39-textarea { resize: vertical; min-height: 120px; }
.c39-submit {
    background: var(--color-accent); color: #ffffff; border: 0; border-radius: var(--radius-md);
    padding: 14px var(--space-xl); font-family: var(--font-display); font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-small); cursor: pointer;
}
.c39-submit:hover { background: var(--color-accent-pressed); color: #ffffff; }
.c39-success { margin-top: var(--space-md); color: var(--color-accent-pressed); font-weight: var(--fw-bold); }

/* ============================================================
   BREADCRUMBS — BREAD-06 Background Bar
   ============================================================ */
.s05 { background: var(--color-bg-elevated); padding-block: var(--space-sm); }
.s05-inner { display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; }
.s05-link { font-size: var(--fs-small); color: var(--color-text-muted); text-decoration: none; }
.s05-link:hover { color: var(--color-accent); }
.s05-sep { color: var(--color-text-muted); }
.s05-current { font-size: var(--fs-small); color: var(--color-text); }

/* ============================================================
   LEGAL — LEGAL-06 Compact Multi-Page
   ============================================================ */
.w59 { padding-block: var(--sec-pb) var(--sec-pb); }
.w59-section { margin-bottom: var(--space-md); }
.w59-h3 { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--color-text); margin-bottom: var(--space-xs); }
.w59-num { color: var(--color-accent); margin-right: 4px; }
.w59-p { font-size: var(--fs-small); line-height: var(--lh-loose); color: var(--color-text); margin-bottom: var(--space-xs); }
.w59-list { font-size: var(--fs-small); line-height: var(--lh-loose); color: var(--color-text); padding-left: var(--space-lg); margin-bottom: var(--space-xs); }
.w59-updated { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text-muted); margin-top: var(--space-lg); }
.w59-disclaimer { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--space-sm); font-style: italic; }

/* ============================================================
   FOOTER — FOOT-03 Massive Centered
   ============================================================ */
.t40 { background: var(--color-bg); padding-block: var(--space-2xl); border-top: 1px solid var(--color-border); }
.t40-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-lg); }
.t40-logo { display: inline-flex; align-items: baseline; gap: 2px; text-decoration: none; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 40px; letter-spacing: var(--ls-tight); }
.t40-logo-mark { color: var(--color-primary); }
.t40-logo-word { color: var(--color-accent); }
.t40-nav { width: 100%; }
.t40-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg); }
.t40-nav-link { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-body); color: var(--color-text); text-decoration: none; }
.t40-nav-link:hover { color: var(--color-accent); }
.t40-tagline { font-size: var(--fs-small); color: var(--color-text-muted); max-width: 480px; line-height: var(--lh-loose); }
.t40-legal-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-sm); }
.t40-legal-link { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text-muted); text-decoration: none; }
.t40-legal-link:hover { color: var(--color-accent); }
.t40-legal-sep { color: var(--color-text-muted); }
.t40-age { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text-muted); }
.t40-copyright { font-size: var(--fs-micro); color: var(--color-text-muted); }

/* ============================================================
   COOKIE — COOK-03 Corner Card
   ============================================================ */
.q64 {
    position: fixed; inset-block-end: var(--space-md); inset-inline-end: var(--space-md);
    width: 360px; max-width: calc(100vw - 2 * var(--space-md)); z-index: 95;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-lg);
}
.q64[hidden] { display: none; }
.q64-inner { display: flex; flex-direction: column; gap: var(--space-md); }
.q64-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h5); text-transform: uppercase; color: var(--color-accent); }
.q64-message { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-text-muted); }
.q64-actions { display: flex; gap: var(--space-sm); }
.q64-button { width: 50%; height: 40px; border-radius: var(--radius-md); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-small); cursor: pointer; }
.q64-button--accept { background: var(--color-accent); color: #fff; border: 1px solid var(--color-accent); }
.q64-button--accept:hover { background: var(--color-accent-pressed); }
.q64-button--decline { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.q64-button--decline:hover { border-color: var(--color-text); }

/* ============================================================
   ERROR — ERR-04 Full-Bleed Atmospheric
   ============================================================ */
.z15 {
    position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background-color: var(--color-primary);
    background-image: url("/store/marquee.webp"); background-size: cover; background-position: center;
    text-align: center;
}
.z15-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 27, 48, 0.55), rgba(24, 27, 48, 0.85)); }
.z15-content { position: relative; z-index: 1; padding: var(--space-lg); max-width: 640px; }
.z15-code { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 96px; color: var(--color-gradient-light); line-height: 1; }
.z15-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); text-transform: uppercase; color: #ffffff; margin: var(--space-sm) 0; }
.z15-text { font-size: var(--fs-h5); color: rgba(255, 255, 255, 0.9); margin-bottom: var(--space-lg); }
.z15-btn {
    display: inline-flex; align-items: center; height: 52px; padding-inline: var(--space-xl);
    background: var(--color-accent); color: #ffffff; text-decoration: none; border-radius: var(--radius-md);
    font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-small);
}
.z15-btn:hover { background: var(--color-accent-pressed); color: #ffffff; }

/* ============================================================
   SCROLL REVEAL (MOTION-07)
   ============================================================ */
.reveal { opacity: 0; transform: translateX(40px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal--left { transform: translateX(-40px); }
.reveal.is-visible { opacity: 1; transform: translateX(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1240px) {
    .c92-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1099px) {
    .m34-inner { padding-block: var(--space-sm); }
    .m34-row--top { min-height: 60px; }
    .m34-auth { display: none; }
    .m34-toggle { display: inline-flex; }
    .m34-row--bottom { display: none; }
    .t74-inner { grid-template-columns: 1fr; gap: var(--space-lg); min-height: 0; }
    .t74-figure { aspect-ratio: 16 / 9; max-height: 320px; }
}
@media (max-width: 900px) {
    .c92-list { grid-template-columns: 1fr; }
    .c46-figrow { grid-template-columns: 1fr; }
    .n04-inner { flex-direction: column; align-items: stretch; text-align: center; }
    .n04-btn { justify-content: center; }
    .u14-inner { min-height: 64px; }
    .u14-title { font-size: var(--fs-small); }
}
@media (max-width: 767px) {
    :root {
        --fs-h1: 36px; --fs-h2: 26px; --fs-h3: 20px; --fs-h4: 17px;
        --fs-h5: 14px; --fs-h6: 12px; --fs-body: 15px; --fs-small: 12px; --fs-micro: 9px;
        --container-padding-desktop: 16px;
    }
    .t74 { padding-block: var(--space-xl); }
    .c46, .q15, .w59 { padding-block: var(--space-lg); }
    .c92, .q97, .t16, .e14, .c39, .s18 { padding-block: var(--space-xl); }
    .t40 { padding-block: var(--space-xl); }
}
@media (max-width: 720px) {
    .q64, .q64-inner { padding: 14px !important; gap: 8px !important; }
    .q64-message { font-size: 13px !important; line-height: 1.35 !important; }
    .q64-button { min-height: 36px !important; font-size: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}

[class*='-fig'] img, [class*='-media'] img, main figure img, article figure img { width: 100% !important; max-height: 58vh !important; object-fit: cover; object-position: center; }