/* ═══════════════════ THE PRAEFATIO - shared stylesheet ═══════════════════ */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* AUBERGINE & GOLD (single flat bg) */
  --bg:#2A1F26;
  --bg-2:#2A1F26;
  --paper:#2A1F26;
  --ink:#F4E8D2;
  --ink-soft:#C9B894;
  --ink-mute:#8A7B5C;
  --rule:rgba(244,232,210,0.14);
  --rule-soft:rgba(244,232,210,0.07);
  --rule-strong:rgba(244,232,210,0.24);
  --accent:#D4A156;
  --accent-soft:rgba(212,161,86,0.14);
  --sage:#A8895A;
  --shadow:0 1px 2px rgba(0,0,0,0.20), 0 18px 48px rgba(0,0,0,0.32);
}
html,body{background:var(--bg);color:var(--ink);font-family:'Inter',-apple-system,sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6;overflow-x:hidden;position:relative}
.serif{font-family:'Fraunces',Georgia,serif}
.mono{font-family:'JetBrains Mono',monospace}

/* Grain texture removed — flat bg only */
body::before{display:none}
body > *{position:relative;z-index:1}

/* ═══════════════════ FERRARI INTRO ANIMATION ═══════════════════ */
.intro-overlay{position:fixed;inset:0;background:#2A1F26;z-index:9999;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:1;transition:opacity 0.45s ease-out 0.85s,visibility 0s linear 1.3s;visibility:visible}
.intro-overlay.gone{opacity:0;visibility:hidden}
.intro-overlay.skip{transition:none;opacity:0;visibility:hidden}
.intro-seal{width:140px;height:140px;color:var(--accent);opacity:0;transform:scale(0.85);animation:sealReveal 0.9s cubic-bezier(0.16,1,0.3,1) forwards}
@media(max-width:700px){.intro-seal{width:96px;height:96px}}
@keyframes sealReveal{0%{opacity:0;transform:scale(0.85)}40%{opacity:1;transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.intro-overlay{opacity:0;visibility:hidden}}

/* ═════════════ FLOATING LOGO-ONLY HEADER ═════════════
   No top bar. Just the R+J seal floating in the corner.
   Hover reveals "The Praefatio" wordmark + clicks home. */
.nav-bar{position:fixed;top:18px;left:24px;z-index:50;pointer-events:none}
.nav-bar .brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--accent);font-family:'Fraunces',serif;font-style:italic;font-size:14px;pointer-events:auto;opacity:0.9;transition:opacity 0.2s;background:rgba(43,31,37,0.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:6px 14px 6px 6px;border-radius:100px}
.nav-bar .brand:hover{opacity:1;background:rgba(43,31,37,0.7)}
.nav-bar .brand-seal{width:42px;height:42px;flex-shrink:0;color:var(--accent)}
.nav-bar .brand-name{display:inline;color:var(--ink);font-family:'Fraunces',serif;font-style:italic;font-size:15px;font-weight:500;letter-spacing:-0.2px;white-space:nowrap;opacity:0;max-width:0;overflow:hidden;transition:opacity 0.2s, max-width 0.3s ease-out}
.nav-bar .brand:hover .brand-name{opacity:1;max-width:200px}
@media(max-width:700px){.nav-bar .brand-name{display:none}}
/* The horizontal tab strip is replaced by the Feadship-style drawer. Hide the old DOM bits. */
.nav-tabs,.nav-status,.nav-burger,.status-dot{display:none !important}

/* ═════════ MENU TRIGGER (top-right) - icon only, no text ═════════ */
.menu-trigger{position:fixed;top:18px;right:24px;z-index:60;width:54px;height:54px;padding:0;border-radius:100px;border:1px solid var(--rule);background:rgba(43,31,37,0.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.25s,border-color 0.25s,color 0.25s,transform 0.2s;font-family:inherit}
.menu-trigger:hover{background:rgba(43,31,37,0.85);border-color:var(--accent-soft);transform:scale(1.05)}
.menu-trigger .label{display:none}
.menu-trigger .x{display:none}
.menu-trigger .dots{display:none}
/* Envelope icon — single SVG, only the triangle flap rotates up on .open */
.menu-trigger .envelope{position:relative;width:26px;height:20px;display:block}
.menu-trigger .envelope svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.menu-trigger .envelope .flap{transform-origin:13px 3px;transition:transform 0.45s cubic-bezier(0.16,1,0.3,1)}
.menu-trigger.open{background:var(--accent);color:#1A1208;border-color:var(--accent)}
.menu-trigger.open .envelope .flap{transform:rotateX(180deg)}
@media(max-width:700px){.menu-trigger{width:44px;height:44px}}

/* ═════════ AMBIENT SOUND TOGGLE (top-right, next to menu) ═════════ */
.sound-toggle{position:fixed;top:18px;right:94px;z-index:60;width:48px;height:54px;border-radius:100px;border:1px solid var(--rule);background:rgba(43,31,37,0.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.25s,border-color 0.25s,color 0.25s;padding:0}
.sound-toggle:hover{background:rgba(43,31,37,0.85);border-color:var(--accent-soft)}
.sound-toggle svg{width:18px;height:18px;display:block;transition:transform 0.3s}
.sound-toggle .wave{opacity:0;transition:opacity 0.3s}
.sound-toggle.on .wave{opacity:1}
.sound-toggle.on{color:var(--accent);background:rgba(212,161,86,0.18);border-color:var(--accent-soft)}
@media(max-width:700px){.sound-toggle{right:60px;width:44px;height:44px}}

/* ═════════ DRAWER ═════════ */
.menu-drawer{position:fixed;inset:0;z-index:55;pointer-events:none;visibility:hidden}
.menu-drawer.open{pointer-events:auto;visibility:visible}
.menu-drawer .backdrop{position:absolute;inset:0;background:rgba(15,10,12,0.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity 0.5s ease-out}
.menu-drawer.open .backdrop{opacity:1}
.menu-drawer .panel{position:relative;height:100%;display:grid;grid-template-columns:1.2fr 1fr;gap:0;max-width:1500px;margin:0 auto;padding:80px;align-content:center;opacity:0;transform:translateY(-20px);transition:opacity 0.5s ease-out 0.1s,transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.1s}
.menu-drawer.open .panel{opacity:1;transform:translateY(0)}
@media(max-width:900px){.menu-drawer .panel{grid-template-columns:1fr;padding:80px 28px;gap:32px}}

.menu-list{display:flex;flex-direction:column;gap:18px;position:relative}
.menu-list .item{display:inline-block;font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:clamp(36px,5.4vw,72px);line-height:1;letter-spacing:-2px;color:var(--ink-soft);text-decoration:none;text-transform:uppercase;transition:color 0.25s,padding-left 0.3s,opacity 0.25s;padding-left:0;position:relative;opacity:0.4;padding-top:6px;padding-bottom:6px}
.menu-list:hover .item{opacity:0.22}
.menu-list .item:hover,.menu-list .item.active{opacity:1;color:var(--ink);padding-left:24px}
.menu-list .item::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);width:2px;height:60%;background:var(--accent);transition:transform 0.3s cubic-bezier(0.16,1,0.3,1)}
.menu-list .item:hover::before,.menu-list .item.active::before{transform:translateY(-50%) scaleY(1)}

/* Right column - sub-info / image */
.menu-meta{display:flex;flex-direction:column;justify-content:center;gap:32px;padding-left:48px;border-left:1px solid var(--rule)}
@media(max-width:900px){.menu-meta{padding-left:0;border-left:none;padding-top:24px;border-top:1px solid var(--rule)}}
.menu-meta .meta-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:18px;font-weight:600}
.menu-meta .meta-title{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(22px,2.6vw,32px);line-height:1.2;letter-spacing:-0.5px;color:var(--ink);margin-bottom:14px}
.menu-meta .meta-desc{font-family:'Inter',sans-serif;font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:380px;font-weight:400}
.menu-meta .meta-label,.menu-meta .meta-title,.menu-meta .meta-desc{transition:opacity 0.16s ease-out}
.menu-meta .meta-fading{opacity:0}
.menu-meta .meta-foot{display:flex;flex-direction:column;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-mute);margin-top:32px}
.menu-meta .meta-foot a{color:inherit;text-decoration:none;transition:color 0.15s}
.menu-meta .meta-foot a:hover{color:var(--accent)}
@media(prefers-reduced-motion:reduce){.menu-drawer .panel{transition:none}.menu-drawer .backdrop{transition:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}

/* ═══════════════════ BUTTONS ═══════════════════ */
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#1a1208;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.4px;padding:14px 22px;border-radius:8px;text-decoration:none;border:none;cursor:pointer;transition:all 0.15s}
.btn-primary:hover{background:#E4B266;transform:translateY(-1px)}
.btn-primary span{transition:transform 0.15s}
.btn-primary:hover span{transform:translateX(3px)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--ink);font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.4px;padding:14px 22px;border-radius:8px;text-decoration:none;border:1px solid var(--rule-strong);cursor:pointer;transition:all 0.15s}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-ghost span{transition:transform 0.15s}
.btn-ghost:hover span{transform:translateX(3px)}

/* ═══════════════════ HERO - the hook page ═══════════════════ */
.hero-home{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:80px 40px;overflow:hidden}
@media(max-width:700px){.hero-home{min-height:100vh;padding:60px 22px}}
.hero-home-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-home-bg img{display:none}
.hero-home-bg{background:var(--bg)}
.hero-home-bg::after{display:none}
/* Atmospheric ambient particles - soft drifting gold dust */
.hero-particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-particles span{position:absolute;display:block;width:3px;height:3px;border-radius:50%;background:var(--accent);opacity:0;animation:drift linear infinite}
@keyframes drift{
  0%{opacity:0;transform:translate(0,0) scale(0.4)}
  10%{opacity:0.6;transform:translate(8px,-20px) scale(1)}
  90%{opacity:0.4;transform:translate(-12px,-200px) scale(0.7)}
  100%{opacity:0;transform:translate(0,-260px) scale(0.3)}
}
@media(prefers-reduced-motion:reduce){.hero-particles{display:none}}

/* Subtle warm spotlight behind the headline */
.hero-home::before{display:none}

.hero-home-inner{position:relative;z-index:1;max-width:980px;text-align:center}
.hero-eyebrow{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:28px;padding:6px 14px;border:1px solid var(--accent-soft);border-radius:100px}
/* Staged reveal - headline words appear one by one as the page loads */
.hero-h1{font-family:'Fraunces',serif;font-size:clamp(48px,8.5vw,108px);line-height:0.94;letter-spacing:-3px;font-weight:600;margin-bottom:24px;color:var(--ink)}
.hero-h1 .word{display:inline-block;opacity:0;transform:translateY(20px);animation:wordReveal 0.9s cubic-bezier(0.16,1,0.3,1) forwards}
@keyframes wordReveal{to{opacity:1;transform:translateY(0)}}
.hero-h1 .word:nth-child(1){animation-delay:0.40s}
.hero-h1 .word:nth-child(2){animation-delay:0.55s}
.hero-h1 .word:nth-child(3){animation-delay:0.70s}
.hero-h1 .word:nth-child(4){animation-delay:0.85s}
.hero-h1 .word:nth-child(5){animation-delay:1.00s}
.hero-h1 .word:nth-child(6){animation-delay:1.15s}
.hero-h1 .word:nth-child(7){animation-delay:1.30s}
.hero-h1 .word:nth-child(8){animation-delay:1.45s}
.hero-strap-wrap{opacity:0;animation:wordReveal 0.9s cubic-bezier(0.16,1,0.3,1) 1.7s forwards}
@media(prefers-reduced-motion:reduce){.hero-h1 .word,.hero-strap-wrap{opacity:1;transform:none;animation:none}}
.hero-h1 em{font-style:italic;color:inherit}
.hero-strap{font-family:'Inter',sans-serif;font-style:normal;font-size:clamp(15px,1.4vw,18px);color:var(--ink-soft);max-width:620px;margin:0 auto 40px;line-height:1.6;font-weight:400}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ═══════════════════ TEASER (below the fold on home) ═══════════════════ */
.teaser{padding:80px 40px}
@media(max-width:700px){.teaser{padding:48px 22px}}
.teaser-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media(max-width:800px){.teaser-inner{grid-template-columns:1fr;gap:40px}}
.label{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-mute);margin-bottom:22px;font-weight:600}
.teaser-list{list-style:none;border-top:1px solid var(--rule-soft)}
.teaser-list li{padding:18px 0;border-bottom:1px solid var(--rule-soft);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.teaser-list .t-name{font-family:'Fraunces',serif;font-size:22px;color:var(--ink);font-weight:500}
.teaser-list .t-co{color:var(--ink-mute);font-style:italic;font-size:16px}
.teaser-list .t-status{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-mute);background:var(--rule-soft);padding:6px 12px;border-radius:100px}
.teaser-more{display:inline-block;margin-top:22px;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);text-decoration:none;font-weight:600}
.teaser-more:hover{text-decoration:underline}
.teaser-right p{font-family:'Inter',sans-serif;font-size:16px;line-height:1.65;color:var(--ink-soft);margin-bottom:18px;font-weight:400}

/* ═══════════════════ PAGE CONTAINER (sub-pages) ═══════════════════ */
.page{max-width:880px;margin:0 auto;padding:80px 40px}
@media(max-width:700px){.page{padding:48px 22px}}
.page .kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:18px;font-weight:500}
.page h1{font-family:'Fraunces',serif;font-size:clamp(36px,6vw,68px);line-height:1.02;letter-spacing:-2px;font-weight:600;margin-bottom:24px;color:var(--ink)}
.page h1 em{font-style:italic;color:inherit}
.page .strap{font-family:'Inter',sans-serif;font-style:normal;font-size:clamp(16px,1.5vw,19px);color:var(--ink-soft);line-height:1.6;margin-bottom:48px;max-width:640px;font-weight:400}
.page h2{font-family:'Fraunces',serif;font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-0.5px;font-weight:600;color:var(--ink);margin:48px 0 18px}
.page h2 em{font-style:italic;color:inherit}
.page h3{font-family:'Fraunces',serif;font-size:20px;font-weight:600;color:var(--ink);margin:32px 0 10px;letter-spacing:-0.2px}
.page p{font-family:'Inter',sans-serif;font-size:16px;line-height:1.7;color:var(--ink-soft);margin-bottom:16px;font-weight:400}
/* Body copy: flatten <strong>/<em> to match surrounding text */
.page p strong,.page p em{color:inherit;font-weight:inherit;font-style:inherit;font-family:inherit}
.page .quote em{color:inherit;font-style:inherit;font-weight:inherit;font-family:inherit}
.page .quote{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(22px,3vw,30px);line-height:1.3;letter-spacing:-0.5px;color:var(--ink);padding:32px 0;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);margin:32px 0;max-width:680px}
.page .quote strong,.page .quote em{color:inherit;font-style:inherit;font-weight:inherit;font-family:inherit}
.page .cite{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-mute);font-weight:500;margin-top:12px;display:block}

/* Email / contact button */
.email-card{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);padding:14px 20px;border-radius:8px;text-decoration:none;letter-spacing:0.4px;transition:all 0.15s;margin-top:14px;word-break:break-all}
.email-card:hover{border-color:var(--accent);color:var(--accent)}

/* ═══════════════════ FOOTER ═══════════════════ */
.page-footer{padding:40px;border-top:1px solid var(--rule-soft);margin-top:80px}
.footer-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:end;font-size:12px;color:var(--ink-mute)}
@media(max-width:700px){.footer-inner{grid-template-columns:1fr;gap:14px}}
.footer-brand{font-family:'Fraunces',serif;font-style:italic;font-size:20px;color:var(--ink);font-weight:500}
.footer-brand .dot{color:var(--accent);font-style:normal}
.footer-meta{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;text-align:center}
@media(max-width:700px){.footer-meta{text-align:left}}
.footer-links{display:flex;gap:18px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;flex-wrap:wrap}
.footer-links a{color:var(--ink-mute);text-decoration:none;transition:color 0.15s}
.footer-links a:hover{color:var(--accent)}

/* ═══════════════════ REVEAL ═══════════════════ */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity 0.7s ease-out,transform 0.7s ease-out}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Per-word reveal on body copy as it scrolls into view */
.word-reveal{display:inline-block;opacity:0;transform:translateY(8px) skewY(2deg);transition:opacity 0.5s ease-out,transform 0.5s ease-out}
.word-reveal.shown{opacity:1;transform:translateY(0) skewY(0)}

/* ── SUB-PAGE MOTION ── */

/* H1 letter-rise on page load - each character settles into place like ink */
.page h1 .char{display:inline-block;opacity:0;transform:translateY(40px);animation:charRise 0.7s cubic-bezier(0.16,1,0.3,1) forwards}
.page h1 .char.space{width:0.28em}
@keyframes charRise{to{opacity:1;transform:translateY(0)}}

/* Strap fades in after the headline finishes */
.page .strap{opacity:0;animation:fadeUp 0.8s ease-out forwards}
@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}

/* H2 underline draw removed - Julian wants no hairlines */

/* Method items - staggered reveal as scrolled into view */
.method-item{opacity:0;transform:translateY(30px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1)}
.method-item.in-view{opacity:1;transform:translateY(0)}
.method-item.in-view:nth-child(1){transition-delay:0s}
.method-item.in-view:nth-child(2){transition-delay:0.12s}
.method-item.in-view:nth-child(3){transition-delay:0.24s}
.method-item.in-view:nth-child(4){transition-delay:0.36s}
.method-item .roman{display:inline-block;transition:transform 0.5s cubic-bezier(0.16,1,0.3,1),color 0.3s}
.method-item:hover .roman{transform:translateX(-4px) scale(1.15);color:#E8C570}

/* Editor cards develop in like a Polaroid */
.editor{opacity:0;filter:blur(8px);transition:opacity 0.9s ease-out,filter 0.9s ease-out}
.editor.in-view{opacity:1;filter:blur(0)}
.editor:nth-child(2).in-view{transition-delay:0.2s}
.editor .portrait{transition:transform 0.4s cubic-bezier(0.16,1,0.3,1)}
.editor:hover .portrait{transform:rotate(0)!important;box-shadow:0 12px 32px rgba(0,0,0,0.4)}

/* Quote on /about - typewriter effect handled via JS adding visible chars */
.page .quote{position:relative}
.page .quote .typing-cursor{display:inline-block;width:2px;height:0.9em;background:var(--accent);margin-left:2px;vertical-align:text-bottom;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.page .quote.done .typing-cursor{display:none}
.page .quote .cite{opacity:0;transition:opacity 0.7s ease-out 0.3s}
.page .quote.done .cite{opacity:1}

/* Email card on /contact - wax-press effect on hover */
.email-card{position:relative;overflow:hidden}
.email-card::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 var(--accent-soft);transition:box-shadow 0.5s ease-out}
.email-card:active{transform:scale(0.96);transition:transform 0.1s}
.email-card:hover::after{box-shadow:0 0 0 8px transparent}
.email-card:active::after{box-shadow:0 0 0 16px transparent;transition:box-shadow 0.4s ease-out}

@media(prefers-reduced-motion:reduce){
  .page h1 .char,.page .strap,.method-item,.editor{opacity:1;transform:none;filter:none;animation:none;transition:none}
  .page h2::after{width:80px;transition:none}
}

/* Magnetic hover targets - pulled toward cursor */
.magnetic{transition:transform 0.18s cubic-bezier(0.16,1,0.3,1)}

/* Custom cursor disabled - Julian didn't like it */
.cursor-dot,.cursor-ring{display:none !important}
@media(prefers-reduced-motion:reduce){.magnetic{transition:none}.word-reveal{opacity:1;transform:none;transition:none}}

/* Parallax depth on cinematic block images */
.cine-block .bg img{will-change:transform}
.cine-block.in-view .bg img{transform:scale(1.05)}
.cine-block .bg img{transition:transform 1.6s cubic-bezier(0.16,1,0.3,1)}

/* Cinematic headline wipe-in removed - was leaving a visible bar mid-animation */

/* ═══════════════════ WIDE-SCREEN SCALING (1600px+) ═══════════════════
   On big desktops everything looked tiny because clamp ceilings were
   tuned for ~1440px. These overrides scale type and containers up
   proportionally without disturbing the mobile/tablet layouts. */
@media(min-width:1600px){
  .hero-home{padding:120px 80px}
  .hero-h1{font-size:clamp(96px,9vw,168px) !important;letter-spacing:-4px}
  .hero-strap{font-size:clamp(18px,1.3vw,22px) !important;max-width:740px}
  .hero-eyebrow{font-size:13px;letter-spacing:3.5px}
  .card-rail,.card-rail-label{max-width:1700px}
  .card-rail{gap:32px}
  .card-rail-wrap{padding:96px 80px 0}
  .rail-card .body{padding:32px 34px}
  .rail-card .body h3{font-size:32px}
  .rail-card .body p{font-size:15px}
  .cine-block .inner{max-width:1700px;padding:120px 80px}
  .cine-block h2{font-size:clamp(64px,6.5vw,112px) !important}
  .cine-block .lede{font-size:clamp(17px,1.3vw,21px) !important;max-width:580px}
  .page{max-width:1080px;padding:120px 80px}
  .page h1{font-size:clamp(64px,5.5vw,96px) !important}
  .page .strap{font-size:clamp(19px,1.4vw,23px) !important;max-width:760px}
}

@media(min-width:2200px){
  .hero-h1{font-size:clamp(128px,9vw,200px) !important}
  .card-rail,.card-rail-label,.cine-block .inner{max-width:2000px}
  .card-rail-wrap{padding:120px 100px 0}
  .cine-block .inner{padding:160px 100px}
  .hero-home{padding:160px 100px}
}

/* Menu drawer panel — widen on big screens so it fills the viewport */
@media(min-width:1600px){
  .menu-drawer .panel{max-width:1800px;padding:96px 120px;gap:80px}
  .menu-list .item{font-size:clamp(48px,5.4vw,96px) !important}
  .menu-meta{padding-left:72px}
  .menu-meta .meta-title{font-size:clamp(28px,2.6vw,42px) !important}
  .menu-meta .meta-desc{font-size:17px;max-width:480px}
}
@media(min-width:2200px){
  .menu-drawer .panel{max-width:2200px;padding:120px 160px;gap:120px}
  .menu-list .item{font-size:clamp(64px,5.4vw,120px) !important}
  .menu-meta{padding-left:96px}
  .menu-meta .meta-title{font-size:clamp(34px,2.6vw,52px) !important}
  .menu-meta .meta-desc{font-size:19px;max-width:560px}
}

/* Page footer + teaser containers shouldn't be tiny in the middle either */
@media(min-width:1600px){
  .teaser{padding:120px 80px}
  .teaser-inner{max-width:1500px;gap:96px}
  .page-footer{padding:64px 80px}
}
@media(min-width:2200px){
  .teaser-inner{max-width:1800px;gap:120px}
  .teaser{padding:160px 100px}
}