/* ===== lords-exch.live — IMPERIAL VELVET shared shell (site.css) ===== */
/* Page-unique styling lives in each page's inline <style>. Class names here are RESERVED (rule 71). */

/* fonts self-hosted: latin + latin-ext (₹ U+20B9 lives in latin-ext — rule 124). ✓✗✦ NOT in these fonts: use SVG/CSS marks. */
@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-latin.woff2') format('woff2');font-weight:400 900;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-latinext.woff2') format('woff2');font-weight:400 900;font-display:optional;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Schibsted';src:url('/fonts/schibsted-latin.woff2') format('woff2');font-weight:400 700;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted';src:url('/fonts/schibsted-latinext.woff2') format('woff2');font-weight:400 700;font-display:optional;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --wine:#22060E; --wine-2:#1A040A; --card:#300E19; --card-2:#3B1220;
  --gold:#E8B04B; --gold-2:#F3CC7E; --brass:#B98A3E; --ink:#2A0A12;
  --cream:#F6EAD6; --muted:#C7A9Ae; --line:rgba(232,176,75,.22); --wa:#25D366;
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box}
:where(body *){min-width:0}                       /* rule: grid/flex overflow guard */
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;max-width:100%;background:var(--wine);color:var(--cream);
  font-family:'Schibsted',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.7;
  overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
main{max-width:100%;overflow-x:clip;display:block}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-2)}
h1,h2,h3,h4{font-family:'Fraunces','Fraunces',Georgia,serif;line-height:1.12;color:#fff;margin:0 0 .5em;font-weight:900;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5.2vw,3.4rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.3rem)}
h3{font-size:clamp(1.15rem,2.2vw,1.45rem)}
p{margin:0 0 1.1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
section{padding:clamp(2.4rem,6vw,4.2rem) 0}

/* stacking — name-scoped, NEVER blanket body>* (rules/141,145). Header stays sticky above main. */
#velvet-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
body>main,body>footer.ftr{position:relative;z-index:1}
body>header.hdr{position:sticky;top:0;z-index:60}

/* skip link — EXACT form, offscreen+reveal only in CSS (rule 118) */
.skip,.skip-link{position:absolute;left:0;top:0;background:var(--gold);color:var(--ink);
  padding:10px 16px;font-weight:700;border-radius:0 0 8px 0;z-index:200;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip:focus,.skip-link:focus{clip:auto;clip-path:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ---- header + mobile nav (absolute full-width dropdown) ---- */
.hdr{background:rgba(26,4,10,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr .bar{display:flex;align-items:center;gap:16px;max-width:var(--maxw);margin:0 auto;padding:12px 20px}
.hdr .logo{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.hdr .logo img{width:132px;height:auto}
.nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav a{color:var(--cream);text-decoration:none;font-weight:600;font-size:.95rem;white-space:nowrap}
.nav a:hover,.nav a[aria-current=page]{color:var(--gold-2)}
.topcta{flex:0 0 auto}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:9px;
  width:46px;height:44px;color:var(--gold);font-size:1.4rem;cursor:pointer}
.mnav{display:none}
@media(max-width:940px){
  .nav{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .mnav{display:block;position:absolute;left:0;right:0;top:100%;width:100%;max-width:100vw;
    background:var(--wine-2);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease}
  .mnav.open{max-height:88vh;overflow:auto}
  .mnav a{display:block;padding:14px 22px;color:var(--cream);text-decoration:none;border-top:1px solid rgba(255,255,255,.05)}
  .mnav a[aria-current=page]{color:var(--gold-2)}
  .topcta{display:none!important}
}

/* ---- seal CTA (brass double-border pill + wax-seal dot) ---- */
.seal-cta,a.seal-cta{display:inline-flex;align-items:center;gap:.6em;position:relative;
  background:var(--gold)!important;color:var(--ink)!important;font-weight:800;text-decoration:none;
  padding:.85em 1.5em .85em 2.2em;border-radius:40px;border:2px solid var(--gold-2);
  box-shadow:inset 0 0 0 3px rgba(42,10,18,.14),0 8px 22px rgba(0,0,0,.35);
  font-family:'Schibsted',sans-serif;letter-spacing:.01em;transition:transform .15s,box-shadow .15s}
.seal-cta::before{content:"";position:absolute;left:.85em;top:50%;transform:translateY(-50%);
  width:.7em;height:.7em;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px rgba(232,176,75,.6);pointer-events:none}
.seal-cta:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 3px rgba(42,10,18,.14),0 12px 28px rgba(0,0,0,.45)}
.seal-cta.wa{background:var(--wa)!important;color:#04310f!important;border-color:#8bf0b0}
.seal-cta.ghost{background:transparent!important;color:var(--gold-2)!important;border-color:var(--brass)}
.seal-cta.ghost::before{background:var(--gold)}

/* container link default (rule: a:not([class]) inside cards) */
.card a:not([class]),.velv a:not([class]),.manu a:not([class]){color:var(--gold-2);font-weight:600}

/* ---- gate-reveal image (velvet curtains slide apart) — image visible every frame (rules 72/160):
   curtains are pseudo-elements that exist only on .on, start translucent, end opacity:0, removed on .done ---- */
.gate{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--line)}
.gate img{width:100%;display:block}
.gate.on::before,.gate.on::after{content:"";position:absolute;top:0;bottom:0;width:52%;
  background:linear-gradient(180deg,#3a1220,#1a040a);z-index:2;pointer-events:none;
  animation:.6s cubic-bezier(.7,0,.2,1) forwards}
.gate.on::before{left:0;border-right:2px solid var(--gold);animation-name:gate-open-l}
.gate.on::after{right:0;border-left:2px solid var(--gold);animation-name:gate-open-r}
.gate.done::before,.gate.done::after{content:none}
@keyframes gate-open-l{0%{transform:translateX(0);opacity:.55}100%{transform:translateX(-101%);opacity:0}}
@keyframes gate-open-r{0%{transform:translateX(0);opacity:.55}100%{transform:translateX(101%);opacity:0}}

/* ---- scroll reveal (default visible; JS opt-in via .rvl) ---- */
.rvl{opacity:1;transform:none}
.js .rvl{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.js .rvl.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .rvl{opacity:1;transform:none;transition:none}
  .gate::before,.gate::after{content:none!important}
  *{scroll-behavior:auto!important}
}

/* ---- paragraph shapes ---- */
.manu p:first-of-type::first-letter{font-family:'Fraunces',serif;font-weight:900;float:left;
  font-size:3.1em;line-height:.8;padding:.06em .12em 0 0;color:var(--gold)}
.brass{border-left:3px solid var(--gold);background:rgba(232,176,75,.06);padding:1em 1.2em;border-radius:0 10px 10px 0}
.velv{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.4em 1.5em;box-shadow:0 10px 30px rgba(0,0,0,.3)}

/* ---- cards / grid ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.5rem}
.grid{display:grid;gap:18px}
@media(min-width:720px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}

/* ---- seo-box base (variant layout in page inline <style>; marker always literal 'seo-box' — rule 140) ---- */
.seo-box{margin:2rem 0}
.seo-box h2{font-size:1.5rem}
.also-search{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:1.2rem 0}
.also-search li{background:var(--card-2);border:1px solid var(--line);border-radius:30px;padding:.5em 1em;font-size:.9rem;color:var(--cream)}

/* ---- horizontal scroll strips: affordance (rule 57) ---- */
.tbl-wrap,.strip{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;position:relative}
.tbl-wrap::after,.strip::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;
  background:linear-gradient(90deg,transparent,var(--wine));pointer-events:none}
.tbl-wrap>table{min-width:430px;border-collapse:collapse;width:100%}
th,td{padding:.7em .9em;border-bottom:1px solid var(--line);text-align:left}
th{background:var(--card-2);color:var(--gold-2)}

/* ---- FAQ (wax-seal accordion) ---- */
.court details{border:1px solid var(--line);border-radius:12px;margin:0 0 12px;background:var(--card);overflow:hidden}
.court summary{cursor:pointer;padding:1em 1.1em 1em 2.6em;position:relative;font-weight:700;color:#fff;list-style:none;font-family:'Fraunces',serif}
.court summary::-webkit-details-marker{display:none}
.court summary::before{content:"";position:absolute;left:1em;top:50%;transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(232,176,75,.25);pointer-events:none}
.court details[open] summary::before{background:var(--gold-2)}
.court .ans{padding:0 1.1em 1.1em 2.6em;color:var(--muted)}

/* ---- related gallery ---- */
.gallery-rel{display:grid;gap:14px;margin:2rem 0}
@media(min-width:640px){.gallery-rel{grid-template-columns:repeat(3,1fr)}}
.gallery-rel a{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:1em 1.1em;text-decoration:none;color:var(--cream);transition:transform .15s,border-color .15s}
.gallery-rel a:hover{transform:translateY(-3px);border-color:var(--gold)}
.gallery-rel b{color:var(--gold-2);font-family:'Fraunces',serif}

/* ---- breadcrumb ---- */
.crumb{font-size:.85rem;color:var(--muted);padding:14px 0 0}
.crumb a{color:var(--gold-2);text-decoration:none}

/* ---- login/signup POPUP modal (#royalveil) ---- */
.royalveil{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  background:rgba(10,2,6,.72);backdrop-filter:blur(4px);padding:20px}
.royalveil.open{display:flex}
.royalveil .panel{background:var(--card);border:1px solid var(--gold);border-radius:18px;max-width:420px;width:100%;
  padding:1.7rem;box-shadow:0 30px 70px rgba(0,0,0,.6);transform:scale(.94);opacity:0;transition:transform .25s,opacity .25s}
.royalveil.open .panel{transform:scale(1);opacity:1}
.royalveil .tabs{display:flex;gap:8px;margin-bottom:1.2rem}
.royalveil .tabs button{flex:1;padding:.7em;border-radius:10px;border:1px solid var(--line);background:transparent;
  color:var(--cream);font-weight:700;cursor:pointer;font-family:'Schibsted',sans-serif}
.royalveil .tabs button[aria-selected=true]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.royalveil label{display:block;font-size:.82rem;color:var(--muted);margin:.7rem 0 .3rem}
.royalveil input{width:100%;padding:.75em .9em;border-radius:9px;border:1px solid var(--line);
  background:var(--wine-2);color:var(--cream);font-size:1rem}
.royalveil .x{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer}
.royalveil .panel{position:relative}
.royalveil .seal-cta{width:100%;justify-content:center;margin-top:1.1rem}

/* inline first-screen login/signup card (money pages — rules/114,134); each page overrides accent via own prefix */
.entrycard{background:var(--card);border:1px solid var(--gold);border-radius:18px;padding:1.6rem;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.entrycard .fld{display:block;width:100%;padding:.7em .9em;border-radius:9px;border:1px solid var(--line);background:var(--wine-2);color:var(--cream);margin:.3rem 0 .8rem}
.entrycard .fld.mock{color:var(--muted)}

/* ---- footer ---- */
.ftr{background:var(--wine-2);border-top:1px solid var(--line);padding:3rem 0 2rem;color:var(--muted);font-size:.92rem}
.ftr .cols{display:grid;gap:26px;grid-template-columns:1.4fr repeat(3,1fr)}
@media(max-width:820px){.ftr .cols{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.ftr .cols{grid-template-columns:1fr}}
.ftr .cat{color:var(--gold-2);font-weight:700;font-family:'Fraunces',serif;margin:0 0 .6rem;font-size:1rem}
.ftr a{color:var(--muted);text-decoration:none;display:block;padding:.2em 0}
.ftr a:hover{color:var(--gold-2)}
.socks{display:flex;flex-wrap:wrap;gap:12px;margin:1rem 0}
.socks a{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;color:var(--gold-2)}
.socks svg{width:18px;height:18px;fill:currentColor}
.qtech{display:flex;align-items:center;gap:12px;margin:1.2rem 0;flex-wrap:wrap}
.qtech .plate{background:#fff;border-radius:10px;padding:8px 12px;display:inline-flex}
.qtech .plate img{width:96px;height:auto}

/* ---- WhatsApp float ---- */
.wafloat{position:fixed;right:18px;bottom:18px;z-index:90;width:60px;height:60px;border-radius:50%;
  background:var(--wa);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.wafloat svg{width:32px;height:32px;fill:#fff}
.wafloat::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,211,102,.5);
  animation:wapulse 2.2s infinite;pointer-events:none}
@keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

:focus-visible{outline:3px solid var(--gold-2);outline-offset:2px}
@media(max-width:480px){body{font-size:16px}}

/* Bottom mobile quick-nav — direct body child, name-scoped z-index (rules/141,145); desktop hidden */
.tabbar{display:none}
@media(max-width:760px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;max-width:100vw;
    background:linear-gradient(180deg,#2A0A12,#1A040A);border-top:1px solid var(--line);
    box-shadow:0 -6px 22px rgba(0,0,0,.5);
    padding:4px env(safe-area-inset-right) calc(4px + env(safe-area-inset-bottom)) env(safe-area-inset-left)}
  .tabbar a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-height:52px;padding:6px 2px;text-decoration:none;color:var(--muted);
    font:600 11px/1.05 "Schibsted",system-ui,sans-serif;letter-spacing:.01em}
  .tabbar a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round}
  .tabbar a .tl{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tabbar a[aria-current="page"]{color:var(--gold-2)}
  .tabbar a.tabcta{color:#2A0A12;background:#E8B04B;background-image:linear-gradient(180deg,#F3CC7E,#E8B04B);
    margin:4px 6px;border-radius:12px;min-height:44px;font-weight:800}
  .tabbar a.tabcta svg{stroke:#2A0A12}
  .tabbar a:focus-visible{outline:2px solid var(--gold-2);outline-offset:-3px;border-radius:8px}
  body{padding-bottom:64px}
  .wafloat{bottom:78px}
}