/* ===== Gransino UK — structure.css ===== */
/* TYPO-03 brutalist / SPACE-05 asymmetric / CONT-03 / BP-05 / GEO-09 glass / MOTION-08 / NAME-02 */

:root {
    --color-accent: #f77a3a;
    --color-accent-pressed: #e5662b;
    --color-bg: #131415;
    --color-bg-elevated: #1c1d1f;
    --color-gradient-light: #ffcaa7;
    --color-gradient-mid: #ff9e66;
    --color-primary: #212225;
    --color-rg-banner: #dc2626;
    --color-text: #ffffff;
    --color-text-muted: #b2b7bc;

    --font-body: "Jost", system-ui, -apple-system, sans-serif;
    --font-display: "Anton", "Inter", sans-serif;
    --font-fallback: "Inter", Arial, sans-serif;

    --fs-h1: 80px;
    --fs-h2: 48px;
    --fs-h3: 30px;
    --fs-h4: 22px;
    --fs-h5: 16px;
    --fs-h6: 13px;
    --fs-body: 15px;
    --fs-micro: 11px;
    --fs-small: 13px;

    --fw-bold: 900;
    --fw-medium: 700;
    --fw-regular: 400;

    --lh-loose: 1.65;
    --lh-normal: 1.45;
    --lh-tight: 0.95;

    --ls-normal: 0;
    --ls-tight: -0.04em;
    --ls-wide: 0.08em;

    --space-2xl: 88px;
    --space-2xs: 3px;
    --space-3xl: 128px;
    --space-lg: 44px;
    --space-md: 28px;
    --space-sm: 18px;
    --space-xl: 60px;
    --space-xs: 10px;

    --container-default: 1080px;
    --container-narrow: 640px;
    --container-padding-desktop: 24px;
    --container-padding-mobile: 16px;
    --container-padding-tablet: 32px;
    --container-readable: 550px;
    --container-site: 1000px;
    --container-wide: 1480px;

    --bp-lg: 1040px;
    --bp-md: 720px;
    --bp-sm: 460px;
    --bp-xl: 1380px;

    --border-medium: 2px;
    --border-thick: 3px;
    --border-thin: 1px;
    --radius-circle: 50%;
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-pill: 9999px;
    --radius-sm: 8px;
    --radius-xs: 2px;
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    --shadow-xs: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;

    --dur-base: 220ms;
    --dur-fast: 150ms;
    --dur-slow: 450ms;
    --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    min-height: 100vh;
    overflow-x: hidden;
}
a { color: var(--color-accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--color-accent-pressed); }
button { background: none; border: none; cursor: pointer; font-family: inherit; font-size: inherit; }
img { display: block; height: auto; max-width: 100%; }
ul, ol { list-style: none; }

/* ===== Typography (TYPO-03 brutalist) ===== */
h1 {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
    text-transform: uppercase;
}
h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
    text-transform: uppercase;
}
h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-medium); letter-spacing: var(--ls-normal); line-height: var(--lh-tight); }
h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-medium); letter-spacing: var(--ls-normal); line-height: var(--lh-tight); }
h5 { font-family: var(--font-body); font-size: var(--fs-h5); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; }
h6 { font-family: var(--font-body); font-size: var(--fs-h6); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; }
p { line-height: var(--lh-normal); }

/* ===== A11y ===== */
.skip-link { background: var(--color-accent); color: var(--color-bg); font-weight: var(--fw-bold); left: var(--space-sm); padding: var(--space-xs) var(--space-md); position: absolute; top: -100px; z-index: 200; }
.skip-link:focus { top: var(--space-sm); }
.sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ===== Cookie banner (COOK-03, .gable) — corner card ===== */
.gable { background: rgba(28, 29, 31, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: none; inset-block-end: var(--space-md); inset-inline-end: var(--space-md); max-width: 360px; padding: var(--space-lg); position: fixed; z-index: 90; }
.gable.is-visible { display: block; }
.gable-inner { display: flex; flex-direction: column; gap: var(--space-md); margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); }
.gable-title { color: var(--color-accent); font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.gable-msg { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-normal); }
.gable-actions { display: flex; gap: var(--space-sm); }
.gable-btn { border-radius: var(--radius-md); font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); height: 40px; letter-spacing: var(--ls-wide); text-transform: uppercase; width: 50%; }
.gable-btn--accept { background: var(--color-accent); color: var(--color-bg); }
.gable-btn--decline { background: transparent; border: 1px solid var(--color-text-muted); color: var(--color-text); }

/* ===== Header (HEAD-14, .pier) — centered hero-logo extra-large ===== */
.pier { background: var(--color-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-block: var(--space-md); position: relative; width: 100%; z-index: 50; }
.pier-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.pier-top { align-items: center; display: flex; justify-content: center; margin-bottom: var(--space-md); }
.pier-logo { display: inline-flex; }
.pier-logo img { height: 128px; width: auto; }
.pier-nav { display: flex; justify-content: center; }
.pier-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: center; }
.pier-nav a { color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-h6); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; transition: color var(--dur-fast) var(--ease-out); }
.pier-nav a:hover, .pier-nav a[aria-current='page'] { color: var(--color-accent); }
.pier-toggle { align-items: center; color: var(--color-text); display: none; flex-direction: column; gap: 4px; justify-content: center; margin-inline: auto; margin-top: var(--space-sm); padding: var(--space-xs); width: max-content; }
.pier-toggle span { background: var(--color-text); display: block; height: 2px; width: 22px; }
.pier-mobile { display: none; }
.pier-mobile.is-open { background: var(--color-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: block; inset-block-start: 100%; inset-inline: 0; padding-block: var(--space-md); padding-inline: var(--container-padding-mobile); position: absolute; z-index: 60; }
.pier-mobile ul { display: flex; flex-direction: column; gap: var(--space-md); }
.pier-mobile a { color: var(--color-text); display: block; font-family: var(--font-body); font-size: var(--fs-h6); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); padding-block: var(--space-sm); text-transform: uppercase; }
.pier-mobile a[aria-current='page'] { color: var(--color-accent); }

/* ===== Breadcrumbs (BREAD-04, .pavilion) — numbered steps ===== */
.pavilion { padding-block: var(--space-md); }
.pavilion-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.pavilion-list { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.pavilion-item { align-items: center; color: var(--color-text-muted); display: inline-flex; font-family: var(--font-body); font-size: var(--fs-small); gap: var(--space-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.pavilion-item-num { color: var(--color-accent); font-family: var(--font-display); font-size: var(--fs-h6); font-weight: var(--fw-bold); }
.pavilion-item a { color: var(--color-text-muted); }
.pavilion-item a:hover { color: var(--color-text); }
.pavilion-item[aria-current='page'] span { color: var(--color-text); }
.pavilion-separator { color: var(--color-text-muted); opacity: 0.4; }

/* ===== Hero (HERO-12, .arabesque) — editorial long-read opening ===== */
.arabesque { padding-block: var(--space-lg) var(--space-lg); }
.arabesque-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.arabesque-text { margin-inline: auto; max-width: 760px; text-align: center; }
.arabesque-kicker { color: var(--color-accent); font-family: var(--font-body); font-size: var(--fs-small); font-style: italic; letter-spacing: var(--ls-wide); margin-bottom: var(--space-md); }
.arabesque-title { color: var(--color-text); }
.arabesque-lead { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-h5); font-style: italic; line-height: var(--lh-normal); margin-block-start: var(--space-md); margin-inline: auto; max-width: 600px; text-transform: none; }
.arabesque-meta { color: var(--color-text-muted); display: flex; flex-wrap: wrap; font-family: var(--font-body); font-size: var(--fs-micro); gap: var(--space-md); justify-content: center; letter-spacing: var(--ls-wide); margin-block-start: var(--space-lg); text-transform: uppercase; }
.arabesque-meta span + span::before { content: "·"; margin-right: var(--space-md); opacity: 0.5; }
.arabesque-figure { margin-block-start: var(--space-2xl); }
.arabesque-figure img { aspect-ratio: 21 / 9; border-radius: var(--radius-md); object-fit: cover; width: 100%; }
.arabesque-figure figcaption { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-micro); font-style: italic; padding-top: var(--space-xs); text-align: center; }

/* ===== Page header (PHEAD-09, .column) — asymmetric offset ===== */
.column { padding-block: var(--space-lg); }
.column-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.column-eyebrow { color: var(--color-accent); font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); margin-bottom: var(--space-md); text-transform: uppercase; }
.column-title { color: var(--color-text); }
.column-description { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-h5); font-weight: var(--fw-regular); letter-spacing: var(--ls-normal); line-height: var(--lh-normal); margin-top: var(--space-lg); text-transform: none; }

/* ===== Items grid (GRID-08, .reel) — cards with top-border accent ===== */
.reel { padding-block: var(--space-lg); }
.reel-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.reel-heading { color: var(--color-text); margin-bottom: var(--space-xl); }
.reel-list { display: grid; gap: var(--space-md); grid-template-columns: repeat(3, 1fr); }
.reel-card { background: rgba(28, 29, 31, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 0 0 var(--radius-md) var(--radius-md); border-top: 4px solid var(--color-accent); box-shadow: var(--shadow-sm); padding: var(--space-lg); }
.reel-card h3 { color: var(--color-text); margin-bottom: var(--space-sm); }
.reel-card p { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); }

/* ===== FAQ (FAQ-05, .threshold) — native details / summary ===== */
.threshold { padding-block: var(--space-lg); }
.threshold-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.threshold-heading { color: var(--color-text); margin-bottom: var(--space-lg); }
.threshold-list { display: flex; flex-direction: column; }
.threshold-item { border-bottom: 1px solid rgba(255, 255, 255, 0.10); padding-block: var(--space-md); }
.threshold-item[open] .threshold-q::after { transform: rotate(180deg); }
.threshold-q { align-items: center; color: var(--color-text); cursor: pointer; display: flex; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-medium); justify-content: space-between; letter-spacing: var(--ls-normal); list-style: none; padding-block: var(--space-2xs); transition: color var(--dur-fast) var(--ease-out); }
.threshold-q::-webkit-details-marker { display: none; }
.threshold-q::after { border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; content: ""; display: inline-block; flex-shrink: 0; height: 10px; margin-left: var(--space-md); transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-out); width: 10px; }
.threshold-q:hover { color: var(--color-accent); }
.threshold-a { color: var(--color-text-muted); font-family: var(--font-body); line-height: var(--lh-loose); padding-block: var(--space-md); }

/* ===== Reviews (REV-04, .mast) — featured + list ===== */
.mast { padding-block: var(--space-lg); }
.mast-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.mast-heading { color: var(--color-text); margin-bottom: var(--space-xl); }
.mast-featured { background: rgba(247, 122, 58, 0.08); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: var(--space-2xl); padding: var(--space-2xl); }
.mast-featured-rating { color: var(--color-accent); font-size: 28px; margin-bottom: var(--space-md); }
.mast-featured-text { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h4); font-style: italic; line-height: var(--lh-normal); }
.mast-featured-cite { color: var(--color-accent); display: block; font-family: var(--font-body); font-size: var(--fs-small); letter-spacing: var(--ls-wide); margin-top: var(--space-md); text-transform: uppercase; }
.mast-list { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, 1fr); }
.mast-item { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: var(--space-md) 0; }
.mast-item-row { align-items: baseline; color: var(--color-text-muted); display: flex; gap: var(--space-md); justify-content: space-between; margin-bottom: var(--space-xs); }
.mast-author { color: var(--color-text); font-weight: var(--fw-medium); }
.mast-rating { color: var(--color-accent); }
.mast-text { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-normal); }

/* ===== CTA (CTA-03, .bay) — split visual + text (Mode A: Solid Accent) ===== */
.bay { padding-block: var(--space-lg); }
.bay-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.bay-grid { border-radius: var(--radius-lg); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.bay-content { background: var(--color-bg); padding: var(--space-2xl); }
.bay-title { color: var(--color-text); margin-bottom: var(--space-md); }
.bay-text { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); margin-bottom: var(--space-lg); }
.bay-button { align-items: center; background: var(--color-accent); border-radius: var(--radius-md); color: var(--color-bg); display: inline-flex; font-family: var(--font-display); font-size: var(--fs-h6); font-weight: var(--fw-bold); height: 52px; letter-spacing: var(--ls-wide); padding-inline: var(--space-xl); text-transform: uppercase; transition: background var(--dur-fast) var(--ease-out); }
.bay-button:hover { background: var(--color-accent-pressed); color: var(--color-bg); }
.bay-visual { align-items: center; background: var(--color-accent); color: var(--color-bg); display: flex; font-family: var(--font-display); font-size: clamp(48px, 8vw, 120px); font-weight: var(--fw-bold); justify-content: center; letter-spacing: var(--ls-tight); line-height: 1; min-height: 400px; padding: var(--space-2xl); text-align: center; text-transform: uppercase; }

/* ===== Prose (PROSE-01, .balcony) — classic long-read ===== */
.balcony { padding-block: var(--space-lg); }
.balcony-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.balcony-inner h2 { color: var(--color-text); margin-bottom: var(--space-md); margin-top: var(--space-2xl); }
.balcony-inner h2:first-child { margin-top: 0; }
.balcony-inner h3 { color: var(--color-text); margin-top: var(--space-lg); }
.balcony-inner p { color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); margin-bottom: var(--space-md); }
.balcony-inner a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.balcony-inner strong { color: var(--color-text); font-weight: var(--fw-medium); }
.balcony-inner em { color: var(--color-text); font-style: italic; }
.balcony-inner ul, .balcony-inner ol { color: var(--color-text); line-height: var(--lh-loose); margin-bottom: var(--space-md); padding-left: var(--space-lg); }
.balcony-inner ul li { list-style: disc; margin-bottom: var(--space-xs); }
.balcony-inner ol li { list-style: decimal; margin-bottom: var(--space-xs); }

/* ===== Data table (TABLE-06, .rotunda) — magazine with caption ===== */
.rotunda { padding-block: var(--space-lg); }
.rotunda-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.rotunda-heading { color: var(--color-text); margin-bottom: var(--space-lg); }
.rotunda-wrap { border-radius: var(--radius-md); overflow: hidden; overflow-x: auto; }
.rotunda-table { background: var(--color-bg-elevated); border-collapse: collapse; min-width: 600px; width: 100%; }
.rotunda-table caption { color: var(--color-text-muted); font-family: var(--font-display); font-size: var(--fs-h4); font-style: italic; padding-block-end: var(--space-md); text-align: center; }
.rotunda-table caption::before { background: var(--color-accent); content: ""; display: block; height: 2px; margin: 0 auto var(--space-sm); width: 40px; }
.rotunda-table th { color: var(--color-accent); font-family: var(--font-body); font-size: var(--fs-h6); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); padding: var(--space-md); text-align: left; text-transform: uppercase; }
.rotunda-table td { color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); padding: var(--space-md); text-align: left; }
.rotunda-table tbody tr { border-block-end: 1px solid rgba(255, 255, 255, 0.06); }

/* ===== Legal (LEGAL-04, .buttress) — bordered article box ===== */
.buttress { padding-block: var(--space-lg); }
.buttress-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.buttress-box { background: var(--color-bg-elevated); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); padding: var(--space-2xl); position: relative; }
.buttress-updated { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); position: absolute; right: var(--space-md); text-transform: uppercase; top: var(--space-md); }
.buttress-intro { color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-h5); line-height: var(--lh-normal); margin-bottom: var(--space-lg); }
.buttress-section { margin-block-start: var(--space-lg); }
.buttress-section h3 { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-medium); margin-block-end: var(--space-md); }
.buttress-section p { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); margin-block-end: var(--space-md); }
.buttress-contacts { background: rgba(0, 0, 0, 0.2); border-radius: var(--radius-md); margin-block-start: var(--space-xl); padding: var(--space-md); }
.buttress-contacts h3 { color: var(--color-text); font-size: var(--fs-h4); margin-bottom: var(--space-sm); }
.buttress-contacts ul { display: flex; flex-direction: column; gap: var(--space-xs); }
.buttress-contacts li { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-normal); }
.buttress-disclaim { background: rgba(220, 38, 38, 0.08); border-inline-start: 3px solid var(--color-rg-banner); color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-normal); margin-block-start: var(--space-xl); padding: var(--space-md); }

/* ===== Contact form (FORM-04 fallback: stacked dashed) — .ridge ===== */
.ridge { padding-block: var(--space-lg); }
.ridge-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.ridge-intro { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); margin-bottom: var(--space-lg); }
.ridge-form { background: rgba(28, 29, 31, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-xl); }
.ridge-field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.ridge-label { color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.ridge-input, .ridge-textarea { background: var(--color-bg); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-md); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); padding: var(--space-sm) var(--space-md); transition: border-color var(--dur-fast) var(--ease-out); width: 100%; }
.ridge-input { height: 48px; }
.ridge-textarea { min-height: 120px; resize: vertical; }
.ridge-input:focus, .ridge-textarea:focus { border-color: var(--color-accent); outline: none; }
.ridge-submit { align-self: flex-start; background: var(--color-accent); border-radius: var(--radius-md); color: var(--color-bg); font-family: var(--font-display); font-size: var(--fs-h6); font-weight: var(--fw-bold); height: 48px; letter-spacing: var(--ls-wide); padding-inline: var(--space-xl); text-transform: uppercase; }
.ridge-submit:hover { background: var(--color-accent-pressed); }
.ridge-ok { background: rgba(247, 122, 58, 0.10); border-inline-start: 4px solid var(--color-accent); border-radius: var(--radius-sm); color: var(--color-text); display: none; margin-top: var(--space-lg); padding: var(--space-md); }
.ridge-ok.is-visible { display: block; }

/* ===== Author card (AUTH-02, .lectern) — vertical centered editorial ===== */
.lectern { padding-block: var(--space-lg); }
.lectern-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.lectern-card { align-items: center; display: flex; flex-direction: column; margin-inline: auto; max-width: 600px; text-align: center; }
.lectern-portrait { border-radius: var(--radius-circle); height: 140px; margin-bottom: var(--space-lg); object-fit: cover; object-position: center top; width: 140px; }
.lectern-role { color: var(--color-accent); font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); margin-bottom: var(--space-xs); text-transform: uppercase; }
.lectern-name { color: var(--color-text); margin-bottom: var(--space-md); }
.lectern-bio { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); margin-bottom: var(--space-md); }
.lectern-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; margin-top: var(--space-md); }
.lectern-tag { border: 1px solid var(--color-accent); border-radius: var(--radius-pill); color: var(--color-accent); font-family: var(--font-body); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); padding: var(--space-2xs) var(--space-sm); text-transform: uppercase; }

/* ===== Author byline (BYLINE-01, .keystone) — compact inline ===== */
.keystone { padding-block: var(--space-md); }
.keystone-inner { align-items: center; display: flex; gap: var(--space-sm); margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.keystone-portrait { border-radius: var(--radius-circle); display: inline-block; flex-shrink: 0; height: 48px; overflow: hidden; width: 48px; }
.keystone-portrait img { height: 100%; object-fit: cover; object-position: center top; width: 100%; }
.keystone-text { display: flex; flex-direction: column; gap: 2px; }
.keystone-attribution { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-body); }
.keystone-name { color: var(--color-accent); text-decoration: underline; }
.keystone-role { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-small); font-style: italic; }

/* ===== Error block (ERR-08, .sigil) — search-suggestion style ===== */
.sigil { padding-block: var(--space-lg); }
.sigil-inner { align-items: center; display: flex; flex-direction: column; gap: var(--space-lg); margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); text-align: center; }
.sigil-code { color: var(--color-accent); font-family: var(--font-display); font-size: clamp(80px, 14vw, 160px); font-weight: var(--fw-bold); line-height: 1; }
.sigil-title { color: var(--color-text); }
.sigil-text { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-h5); font-weight: var(--fw-regular); letter-spacing: var(--ls-normal); line-height: var(--lh-normal); max-width: 600px; text-transform: none; }
.sigil-btn { align-items: center; background: var(--color-accent); border-radius: var(--radius-md); color: var(--color-bg); display: inline-flex; font-family: var(--font-display); font-size: var(--fs-h6); font-weight: var(--fw-bold); height: 52px; letter-spacing: var(--ls-wide); padding-inline: var(--space-xl); text-transform: uppercase; }
.sigil-btn:hover { background: var(--color-accent-pressed); color: var(--color-bg); }
.sigil-suggestions { background: rgba(28, 29, 31, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: var(--radius-md); margin-top: var(--space-xl); padding: var(--space-xl); width: 100%; }
.sigil-suggestions-heading { color: var(--color-text); margin-bottom: var(--space-md); }
.sigil-suggestions ul { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; list-style: none; }
.sigil-suggestions a { color: var(--color-accent); font-family: var(--font-body); font-size: var(--fs-body); }
.sigil-suggestions a:hover { text-decoration: underline; }

/* ===== Footer (FOOT-05, .quayside) — four-column information-dense ===== */
.quayside { background: var(--color-primary); padding-block: var(--space-lg); }
.quayside-inner { margin-inline: auto; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); padding-inline: var(--container-padding-desktop); }
.quayside-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.quayside-column { display: flex; flex-direction: column; }
.quayside-brand { display: inline-flex; margin-bottom: var(--space-md); }
.quayside-brand-img { height: 96px; width: auto; }
.quayside-tagline { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-loose); max-width: 280px; }
.quayside-heading { color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); margin-bottom: var(--space-md); text-transform: uppercase; }
.quayside-list { display: flex; flex-direction: column; gap: var(--space-2xs); }
.quayside-link { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--fs-small); }
.quayside-link:hover { color: var(--color-accent); }
.quayside-bottom { align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-text-muted); display: flex; flex-wrap: wrap; font-family: var(--font-body); font-size: var(--fs-small); gap: var(--space-md); justify-content: space-between; margin-top: var(--space-xl); padding-top: var(--space-md); }
.quayside-rg { background: var(--color-rg-banner); border-radius: var(--radius-pill); color: var(--color-text); font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); padding: var(--space-2xs) var(--space-sm); text-transform: uppercase; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== Tablet (≤1040px) ===== */
@media (max-width: 1040px) {
    .pier-inner, .pavilion-inner, .arabesque-inner, .column-inner, .reel-inner, .threshold-inner, .mast-inner, .bay-inner, .balcony-inner, .rotunda-inner, .buttress-inner, .ridge-inner, .lectern-inner, .keystone-inner, .sigil-inner, .quayside-inner, .gable-inner { padding-inline: var(--container-padding-tablet); }
    .reel-list { grid-template-columns: repeat(2, 1fr); }
    .mast-list { grid-template-columns: 1fr; }
    .bay-grid { grid-template-columns: 1fr; }
    .quayside-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Mobile (≤720px) ===== */
@media (max-width: 720px) {
    :root { --fs-h1: 44px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 18px; --fs-h5: 14px; --fs-h6: 12px; --fs-body: 14px; --fs-small: 12px; --fs-micro: 10px; }
    .pier-inner, .pavilion-inner, .arabesque-inner, .column-inner, .reel-inner, .threshold-inner, .mast-inner, .bay-inner, .balcony-inner, .rotunda-inner, .buttress-inner, .ridge-inner, .lectern-inner, .keystone-inner, .sigil-inner, .quayside-inner, .gable-inner { padding-inline: var(--container-padding-mobile); }
    .pier-logo img { height: 80px; }
    .pier-nav { display: none; }
    .pier-toggle { display: flex; }
    .reel-list { grid-template-columns: 1fr; }
    .quayside-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    .bay-visual { min-height: 200px; }
    .gable { inset-inline: var(--space-md); max-width: none; }
}