/* ══════════════════════════════════════════════════════════════════════════
   legal.css — the chrome for the plain pages: terms, privacy, contact

   Every other page on this site carries its own <style> block, because every
   other page is a different shape. These three share one: nav, a title, a
   column of things to read, footer. Duplicating two hundred lines of nav CSS
   into each of them to prove a point about house style would just mean
   fixing the nav three times.

   The chrome here is lifted from divinations.html unchanged so the pages sit
   inside the same frame as the rest of the site. THE PROSE and THE FORM are
   the only new parts.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#0b0908; --ink-2:#100d0b; --panel:#171310; --panel-2:#1e1813;
  --line:rgba(201,152,46,.16); --line-2:rgba(201,152,46,.30);
  --gold:#c9982e; --gold-lt:#f0cf7a; --gold-dk:#7d5b18;
  --rust:#8c3a24; --rust-lt:#c05a34;
  --bone:#e8dcc6; --muted:#9a8d78; --iron:#6f6a60;
  --nav-h:80px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:rgba(232,220,198,.78);
  font-family:'Lora',Georgia,serif;font-size:17px;line-height:1.75;
  min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:rgba(201,152,46,.28);color:var(--bone)}

/* ── BACKGROUND ── */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-ember{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 4%,rgba(140,58,36,.15) 0%,transparent 60%),
    radial-gradient(ellipse 60% 45% at 12% 62%,rgba(201,152,46,.06) 0%,transparent 62%),
    var(--ink);
  transform:translateZ(0);backface-visibility:hidden}
.bg-hatch{position:absolute;inset:0;opacity:.5;
  background-image:
    repeating-linear-gradient(58deg,rgba(232,220,198,.020) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(-58deg,rgba(232,220,198,.014) 0 1px,transparent 1px 11px)}
.bg-vignette{position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 74% at 50% 40%,transparent 40%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.88) 100%)}

/* ── NAV (matches the index) ── */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:200;
  display:flex;align-items:center;gap:1.5rem;padding:0 clamp(1rem,4vw,2.6rem);
  background:linear-gradient(180deg,#090706,#0c0a08);border-bottom:1px solid var(--line)}
.nav-brand{position:relative;display:block;line-height:0;text-decoration:none;flex-shrink:0}
.nav-brand img{height:52px;width:auto;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.8)) drop-shadow(0 0 10px rgba(201,152,46,.18))}
.nav-glint{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  -webkit-mask:var(--mask-nav) left center/contain no-repeat;
          mask:var(--mask-nav) left center/contain no-repeat}
.nav-glint i{position:absolute;top:0;left:0;width:100%;height:100%;
  transform:translate3d(-120%,0,0);
  background:linear-gradient(112deg,transparent 40%,rgba(255,248,228,.26) 50%,transparent 60%);
  animation:sheenSweep 9s 1s linear infinite}
@keyframes sheenSweep{0%{transform:translate3d(-120%,0,0)}20%,100%{transform:translate3d(120%,0,0)}}
.nav-brand-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.nav-links{list-style:none;display:flex;align-items:center;gap:.1rem;margin-left:auto}
.nav-links>li{position:relative}
.nav-links>li>a,.nav-links>li>.parent{display:flex;align-items:center;gap:.42rem;cursor:pointer;
  font-family:'Oswald',sans-serif;font-weight:400;font-size:.74rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;padding:.55rem .95rem;
  transition:color .2s;-webkit-user-select:none;user-select:none}
.nav-links>li>a:hover,.nav-links>li>.parent:hover,
.nav-links>li:hover>.parent,.nav-links>li:focus-within>.parent{color:var(--gold-lt)}
.nav-links>li>a.active{color:var(--gold-lt)}
.nav-links>li>a::after{content:'';position:absolute;left:.95rem;right:.95rem;bottom:.3rem;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .22s}
.nav-links>li>a:hover::after,.nav-links>li>a.active::after{transform:scaleX(1)}
.caret{width:5px;height:5px;flex-shrink:0;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .24s}
.nav-links>li:hover .caret,.nav-links>li:focus-within .caret{transform:translateY(1px) rotate(225deg)}
.nav-links .sub{position:fixed;top:var(--nav-h);left:0;right:0;z-index:190;list-style:none;
  display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:.2rem 2.2rem;
  padding:.95rem calc(clamp(1rem,4vw,2.6rem) + .65rem) .95rem 2rem;
  background:linear-gradient(180deg,rgba(8,6,5,.985),rgba(8,6,5,.95));
  border-bottom:1px solid var(--line-2);box-shadow:0 18px 40px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translate3d(0,-10px,0);
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
.nav-links .has-sub.open .sub,.nav-links .has-sub:focus-within .sub{
  opacity:1;visibility:visible;transform:translate3d(0,0,0)}
@media (hover:hover) and (pointer:fine){
  .nav-links .has-sub:hover .sub{opacity:1;visibility:visible;transform:translate3d(0,0,0)}
}
.nav-links .has-sub.open>.parent{color:var(--gold-lt)}
.nav-links .has-sub.open .caret{transform:translateY(1px) rotate(225deg)}
.sub span,.sub a{display:inline-block;padding:.32rem .3rem;white-space:nowrap;
  font-family:'Oswald',sans-serif;font-weight:500;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone);text-decoration:none;transition:color .2s}
.sub span{cursor:default}
.sub a{cursor:pointer}
.sub span:hover,.sub a:hover{color:var(--gold-lt)}
/* A submenu item for the page you are already on. The top-level links get
   .active; this is the same signal one level down. */
.sub a[aria-current]{color:var(--gold-lt)}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  width:34px;height:26px;flex-direction:column;justify-content:space-between;padding:4px 0}
.nav-toggle span{display:block;height:1.5px;width:100%;background:var(--gold);
  transition:transform .25s,opacity .25s}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ── PAGE HEAD ── */
main{position:relative;z-index:1;flex:1 0 auto;padding-top:var(--nav-h)}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.page-head{text-align:center;padding:3.2rem 0 1.8rem}
.page-kick{font-family:'Oswald',sans-serif;font-weight:400;font-size:.66rem;letter-spacing:.46em;
  text-indent:.46em;text-transform:uppercase;color:var(--rust-lt)}
.page-title{font-family:'Cinzel','Noto Serif',serif;font-weight:700;
  font-size:clamp(2rem,5.2vw,3.1rem);letter-spacing:.06em;text-transform:uppercase;
  margin-top:.7rem;
  background:linear-gradient(100deg,var(--gold-dk),var(--gold) 32%,var(--gold-lt) 52%,var(--gold) 70%,var(--gold-dk));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.page-rule{width:min(300px,58%);height:1px;margin:1.3rem auto 1.2rem;
  background:linear-gradient(90deg,transparent,var(--gold-dk) 22%,var(--gold) 50%,var(--gold-dk) 78%,transparent)}
.page-lead{max-width:60ch;margin:0 auto;font-size:1.02rem;line-height:1.8;
  color:rgba(232,220,198,.62);font-style:italic}

/* ── THE PROSE ────────────────────────────────────────────────────────────
   A legal page is read in two ways. Somebody skims it for the one heading
   they came for, and somebody else reads the whole thing because they are
   deciding whether to trust the person who wrote it. The measure is set for
   the second reader and the headings are set for the first.
   ────────────────────────────────────────────────────────────────────── */
.legal{padding:0 0 4.5rem}
.legal-inner{max-width:74ch;margin:0 auto}
.legal-updated{font-family:'Oswald',sans-serif;font-weight:400;font-size:.66rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--rust-lt);
  padding-bottom:1.8rem;margin-bottom:2.2rem;border-bottom:1px solid var(--line)}
.legal h2{font-family:'Cinzel','Noto Serif',serif;font-weight:700;
  font-size:1.16rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);
  margin:2.9rem 0 .9rem;scroll-margin-top:calc(var(--nav-h) + 1rem)}
.legal h2:first-of-type{margin-top:1.6rem}
.legal p{margin-bottom:1.05rem}
.legal ul{padding-left:1.35rem;margin-bottom:1.3rem}
.legal li{margin-bottom:.65rem}
.legal li::marker{color:var(--gold-dk)}
.legal strong{color:var(--bone);font-weight:600}
.legal a{color:var(--gold-lt);text-decoration:none;
  border-bottom:1px solid rgba(201,152,46,.3);transition:color .2s,border-color .2s}
.legal a:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* A rule between the major movements of the page, matching the section
   ornament the character pages use. */
.legal .orn{width:min(260px,52%);height:1px;margin:3.2rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-dk) 30%,var(--gold) 50%,var(--gold-dk) 70%,transparent)}

/* The lines this whole page exists to carry. Used sparingly: ownership, the
   age bar, and the warning. A page where everything is emphasised is a page
   where nothing is. */
.legal .hard{margin:1.6rem 0;padding:1.25rem 1.4rem;
  background:linear-gradient(158deg,var(--panel),var(--ink-2));
  border:1px solid var(--line-2);border-left:2px solid var(--rust)}
.legal .hard p{margin-bottom:.75rem;color:var(--bone)}
.legal .hard p:last-child{margin-bottom:0}
.legal .hard strong{color:var(--gold-lt)}

/* The closing card, which is the age gate's own words said once more on the
   way out. */
.legal .warn{margin-top:3rem;padding:1.9rem 1.6rem;text-align:center;
  background:linear-gradient(158deg,var(--panel),var(--ink-2));
  border:1px solid var(--line-2)}
.legal .warn .badge{display:inline-block;font-family:'Oswald',sans-serif;font-weight:700;
  font-size:.7rem;letter-spacing:.2em;color:var(--ink);background:var(--gold);
  padding:.2rem .6rem;margin-bottom:.9rem}
.legal .warn h2{margin:0 0 .8rem}
.legal .warn p{max-width:56ch;margin:0 auto .7rem}
.legal .warn p:last-child{margin-bottom:0;color:var(--muted);font-style:italic}

/* ── THE FORM ──────────────────────────────────────────────────────────────
   Contact is two columns on a desk and one on a phone. The left column is
   the part that answers most people without them having to send anything,
   which is the whole job of a contact page that works.
   ────────────────────────────────────────────────────────────────────── */
.contact{padding:0 0 4.5rem}
.contact-inner{display:grid;grid-template-columns:1fr 1.15fr;gap:3.4rem;align-items:start;
  max-width:1000px;margin:0 auto}
@media(max-width:900px){.contact-inner{grid-template-columns:1fr;gap:2.6rem}}

/* ── FITTING IT IN ONE SCREEN ──────────────────────────────────────────────
   Contact is meant to be read without scrolling, which the reading pages are
   not, so the tightening is scoped to this page and terms and privacy keep
   their measure.

   It is driven off the viewport rather than a fixed set of smaller numbers:
   the header, the gaps and the message box all shrink as the screen gets
   shorter, so a 1440x900 laptop and a tall desktop monitor each get the
   biggest version that still fits. Below 900px wide the columns stack and
   this stops applying, because two columns of content will not fit one
   phone screen and pretending otherwise just makes it cramped AND scrolling.
   ────────────────────────────────────────────────────────────────────── */
@media(min-width:901px){
  .page-contact{--fit:clamp(.55rem, 1.1vh, 1.15rem)}
  .page-contact .page-head{padding:calc(var(--fit) * 2) 0 var(--fit)}
  .page-contact .page-title{font-size:clamp(1.7rem,3.6vw,2.5rem)}
  .page-contact .page-rule{margin:var(--fit) auto}
  .page-contact .page-lead{font-size:.95rem}
  .page-contact .contact{padding-bottom:calc(var(--fit) * 2)}
  .page-contact .contact-inner{gap:clamp(2rem,3.2vw,3.4rem)}
  .page-contact .ci-title{font-size:clamp(1.25rem,1.7vw,1.55rem);margin-bottom:var(--fit)}
  .page-contact .ci-body{margin-bottom:calc(var(--fit) * 1.4)}
  /* Cards stay full width. Two up was tried and lost: at this column width
     each card halves in width and more than doubles in lines, so the column
     got shorter by less than the cards got taller. Three short cards beat
     four squeezed ones. */
  .page-contact .cc{padding:clamp(.5rem,1vh,.95rem) 1.1rem;
    margin-bottom:clamp(.4rem,.75vh,.8rem)}
  .page-contact .cc-val{font-size:.88rem;line-height:1.5}
  .page-contact .elsewhere{margin-top:calc(var(--fit) * 1.2)}
  .page-contact .form-wrap{padding:clamp(1.2rem,2.4vh,1.9rem) 1.8rem}
  .page-contact .form-title{margin-bottom:calc(var(--fit) * 1.4)}
  .page-contact .form-group{margin-bottom:clamp(.6rem,1.2vh,1.05rem)}
  /* The message box takes whatever is left. It is the one element that can
     give, and a short one still holds a paragraph. */
  .page-contact .form-group textarea{min-height:clamp(84px,12.5vh,150px)}
  .page-contact .form-consent{font-size:.78rem;margin-bottom:calc(var(--fit) * 1.2)}

  /* On a short screen the page head is the first thing to give. The title
     still names the page; the lead was saying what the left column says
     three lines later. */
  @media(max-height:950px){
    .page-contact .page-lead{display:none}
    .page-contact .page-title{font-size:clamp(1.5rem,3vw,2rem)}
    .page-contact .page-rule{margin:calc(var(--fit) * .7) auto}
    .page-contact .page-head{padding:calc(var(--fit) * 1.2) 0 calc(var(--fit) * .7)}
    .page-contact footer{padding-top:.75rem;padding-bottom:.8rem}
    .page-contact .footer-copy{line-height:1.75}
    .page-contact .footer-nav{margin-bottom:.5rem}
  }

  /* Below about 870 the vh clamps have bottomed out on their own floors and
     stop giving, so the floors themselves come down. The form is the taller
     column by this point, which is where nearly all of this is taken from. */
  @media(max-height:870px){
    .page-contact .page-head{padding:.7rem 0 .45rem}
    .page-contact .form-wrap{padding:.9rem 1.4rem}
    .page-contact .form-title{margin-bottom:.55rem}
    .page-contact .form-group{margin-bottom:.5rem}
    .page-contact .form-group label{margin-bottom:.25rem}
    .page-contact .form-group input,
    .page-contact .form-group select,
    .page-contact .form-group textarea{padding:.5rem .75rem}
    .page-contact .form-group textarea{min-height:clamp(60px,8vh,150px)}
    .page-contact .form-consent{margin-bottom:.6rem}
    .page-contact .form-submit{padding:.65rem 1rem}
    .page-contact .cc{padding:.45rem 1rem;margin-bottom:.35rem}
    .page-contact .ci-body{margin-bottom:.7rem}
    .page-contact .elsewhere{margin-top:.7rem}
    .page-contact .elsewhere a{padding:.38rem .8rem}
  }
}

.ci-label{font-family:'Oswald',sans-serif;font-weight:400;font-size:.64rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--rust-lt);margin-bottom:.8rem}
.ci-title{font-family:'Cinzel','Noto Serif',serif;font-weight:700;font-size:1.55rem;
  letter-spacing:.03em;line-height:1.35;color:var(--bone);margin-bottom:1rem}
.ci-title span{color:var(--gold)}
.ci-body{margin-bottom:1.9rem}
.ci-body a{color:var(--gold-lt);text-decoration:none;border-bottom:1px solid rgba(201,152,46,.3)}
.ci-body a:hover{color:var(--gold);border-bottom-color:var(--gold)}

.cc{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.1rem;margin-bottom:.85rem;
  background:linear-gradient(158deg,var(--panel),var(--ink-2));border:1px solid var(--line)}
.cc-ic{width:20px;height:20px;flex-shrink:0;margin-top:.25rem;color:var(--gold)}
.cc-label{font-family:'Oswald',sans-serif;font-weight:500;font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.cc-val{font-size:.95rem;line-height:1.6;color:var(--bone)}
.cc-val a{color:var(--gold-lt);text-decoration:none;border-bottom:1px solid rgba(201,152,46,.3)}
.cc-val a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.cc-val em{color:var(--gold-lt);font-style:italic}

.elsewhere{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem}
.elsewhere a{font-family:'Oswald',sans-serif;font-weight:500;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  padding:.5rem .95rem;border:1px solid var(--line-2);transition:color .2s,border-color .2s,background .2s}
.elsewhere a:hover{color:var(--gold-lt);border-color:var(--gold-dk);background:rgba(201,152,46,.05)}

/* The left column is taller than the form and always will be, so on a desk
   the form follows you down it rather than scrolling away and leaving a
   column of reasons to write with nothing to write in. */
.form-wrap{padding:1.9rem 1.8rem;background:linear-gradient(158deg,var(--panel),var(--ink-2));
  border:1px solid var(--line-2);
  position:sticky;top:calc(var(--nav-h) + 1.5rem)}
@media(max-width:900px){.form-wrap{position:static}}
@media(max-width:700px){.form-wrap{padding:1.4rem 1.15rem}}
.form-title{font-family:'Cinzel','Noto Serif',serif;font-weight:700;font-size:1.2rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.form-group{margin-bottom:1.05rem}
.form-group label{display:block;font-family:'Oswald',sans-serif;font-weight:500;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:.7rem .85rem;background:rgba(0,0,0,.35);border:1px solid var(--line);
  color:var(--bone);font-family:'Lora',Georgia,serif;font-size:.96rem;line-height:1.5;
  transition:border-color .2s,background .2s}
.form-group textarea{min-height:150px;resize:vertical}
.form-group select{cursor:pointer}
/* The dark ground is on the <select> itself, so the popup list inherits it
   rather than rendering as white-on-white where the browser draws its own. */
.form-group select option{background:var(--ink-2);color:var(--bone)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--gold-dk);background:rgba(0,0,0,.5)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--iron)}
.form-group input:user-invalid,.form-group textarea:user-invalid{border-color:var(--rust)}

/* The honeypot. Off-screen rather than display:none, because a bot that
   reads the stylesheet skips hidden fields and fills this one. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.form-consent{font-size:.82rem;line-height:1.6;color:var(--muted);margin-bottom:1.1rem}
.form-consent a{color:var(--gold-lt);text-decoration:none;border-bottom:1px solid rgba(201,152,46,.3)}
.form-consent a:hover{color:var(--gold)}
.form-submit{width:100%;padding:.85rem 1rem;cursor:pointer;
  font-family:'Oswald',sans-serif;font-weight:500;font-size:.76rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--gold-dk);
  background:linear-gradient(100deg,var(--gold-dk),var(--gold) 38%,var(--gold-lt) 52%,var(--gold) 66%,var(--gold-dk));
  background-size:200% auto;transition:background-position .45s,filter .2s,opacity .2s}
.form-submit:hover:not(:disabled){background-position:100% center;filter:brightness(1.06)}
.form-submit:disabled{opacity:.55;cursor:default}
.form-note{margin-top:.9rem;font-size:.88rem;line-height:1.6;color:var(--gold-lt);min-height:1.2em}
.form-note a{color:var(--gold-lt)}

.form-sent{display:none;text-align:center;padding:2.2rem 1rem}
.form-sent.show{display:block}
.fs-title{font-family:'Cinzel','Noto Serif',serif;font-weight:700;font-size:1.2rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem}
.fs-sub{max-width:40ch;margin:0 auto;color:rgba(232,220,198,.72)}

/* ── FOOTER ── */
footer{position:relative;z-index:1;flex:0 0 auto;text-align:center;
  padding:1.1rem clamp(1.25rem,5vw,2.5rem) 1.2rem;border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.45))}
.footer-nav{list-style:none;display:flex;flex-wrap:wrap;gap:1.45rem;justify-content:center;margin-bottom:.7rem}
.footer-nav a{font-family:'Oswald',sans-serif;font-weight:400;font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s}
.footer-nav a:hover{color:var(--gold)}
.footer-copy{font-family:'Oswald',sans-serif;font-weight:300;font-size:.6rem;letter-spacing:.16em;
  color:var(--iron);line-height:1.95}
.footer-copy a{color:var(--muted);text-decoration:none;transition:color .2s}
.footer-copy a:hover{color:var(--gold)}

@media(max-width:1280px){
  .nav-toggle{display:flex}
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;
    max-height:calc(100svh - var(--nav-h));overflow-y:auto;
    flex-direction:column;align-items:stretch;gap:0;margin:0;padding:.4rem 0 1rem;
    background:rgba(8,6,5,.985);border-bottom:1px solid var(--line-2);
    box-shadow:0 18px 40px rgba(0,0,0,.6);display:none}
  .nav.open .nav-links{display:flex}
  .nav-links>li>a,.nav-links>li>.parent{justify-content:center;padding:.6rem 1.5rem;font-size:.76rem}
  .nav-links>li>a::after{display:none}
  .nav-links .sub{position:static;opacity:1;visibility:visible;transform:none;display:none;
    flex-direction:column;justify-content:flex-start;gap:0;padding:.2rem 0 .6rem;
    background:rgba(0,0,0,.30);border:0;box-shadow:none}
  .nav-links li.open .sub{display:flex}
  .nav-links li.open .caret{transform:translateY(1px) rotate(225deg)}
  .sub span,.sub a{display:block;text-align:center;padding:.42rem 1rem;font-size:.72rem;color:var(--muted)}
}
@media(max-width:700px){
  :root{--nav-h:64px}
  body{font-size:16px}
  .nav-brand img{height:42px}
  .legal .hard{padding:1.05rem 1.1rem}
  .legal .warn{padding:1.5rem 1.1rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .nav-glint i{animation:none}
}