/* Veiled site stylesheet. Hand-written, no framework, no build step.
   The site and its web client share the Veiled tokens and local fonts. Nothing in
   this file or the pages that use it fetches from a third party. */

/* --- faces ---------------------------------------------------------------- */
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin.woff2") format("woff2-variations");
  font-weight:400 700;font-stretch:62% 125%;font-style:normal;font-display:swap;}
@font-face{font-family:"Spline Sans";src:url("../fonts/spline-sans-latin.woff2") format("woff2-variations");
  font-weight:400 700;font-style:normal;font-display:swap;}
@font-face{font-family:"Spline Sans Mono";src:url("../fonts/spline-sans-mono-latin.woff2") format("woff2-variations");
  font-weight:400 700;font-style:normal;font-display:swap;}

/* --- tokens --------------------------------------------------------------- */
:root{
  color-scheme:light;
  --desk:#E4E6E2;
  --sheet:#FCFCFA;
  --sheet-2:#F4F5F2;
  --sheet-3:#EDEFEA;
  --ink:#14181D;
  --ink-2:#566069;
  --ink-3:#6B747D;
  --rule:#C9CFD6;
  --rule-2:#DDE2E6;
  --rule-strong:#98A2AB;
  --spot:#8C5A1F;
  --spot-hi:#6E4614;
  --spot-tint:#F3EADB;
  --on-spot:#FCFCFA;
  --signal:#A8281E;
  --signal-tint:#F8E9E6;
  --focus:#6E4614;
  --sheet-edge:0 1px 0 rgba(20,24,29,.05), 0 20px 44px -32px rgba(20,24,29,.42);
  --sticky-edge:0 1px 0 rgba(20,24,29,.07);

  --f-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-prose:"Spline Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-fig:"Spline Sans Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --step--1:0.8125rem;
  --step-0:1rem;
  --step-1:1.1875rem;
  --step-2:1.5rem;
  --step-3:2rem;
  --step-4:clamp(2rem,4.6vw,3rem);
  --step-5:clamp(2.2rem,6vw,4rem);
  --gut:clamp(1rem,3.2vw,2.25rem);
  --measure:68ch;
  --rad:2px;
  --page:78rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){color-scheme:dark;
    --desk:#0E1116;
    --sheet:#14181D;
    --sheet-2:#1B2027;
    --sheet-3:#20262E;
    --ink:#EDEFEC;
    --ink-2:#A7B0B8;
    --ink-3:#9BA4AC;
    --rule:#333C45;
    --rule-2:#2A323A;
    --rule-strong:#54606B;
    --spot:#D9A45B;
    --spot-hi:#E7BA7C;
    --spot-tint:#241C12;
    --on-spot:#1A1206;
    --signal:#E8837A;
    --signal-tint:#2A1917;
    --focus:#E7BA7C;
    --sheet-edge:0 1px 0 rgba(0,0,0,.4), 0 24px 50px -34px rgba(0,0,0,.9);
    --sticky-edge:0 1px 0 rgba(255,255,255,.06);
  }
}
:root[data-theme="dark"]{color-scheme:dark;
  --desk:#0E1116;
  --sheet:#14181D;
  --sheet-2:#1B2027;
  --sheet-3:#20262E;
  --ink:#EDEFEC;
  --ink-2:#A7B0B8;
  --ink-3:#9BA4AC;
  --rule:#333C45;
  --rule-2:#2A323A;
  --rule-strong:#54606B;
  --spot:#D9A45B;
  --spot-hi:#E7BA7C;
  --spot-tint:#241C12;
  --on-spot:#1A1206;
  --signal:#E8837A;
  --signal-tint:#2A1917;
  --focus:#E7BA7C;
  --sheet-edge:0 1px 0 rgba(0,0,0,.4), 0 24px 50px -34px rgba(0,0,0,.9);
  --sticky-edge:0 1px 0 rgba(255,255,255,.06);
}

/* --- base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--desk);color:var(--ink);
  font-family:var(--f-prose);font-size:var(--step-0);line-height:1.62;
  font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4{
  font-family:var(--f-display);font-stretch:100%;font-variation-settings:"wdth" 100;
  font-weight:620;line-height:1.06;letter-spacing:-0.022em;margin:0;
  text-wrap:balance;color:var(--ink);
}
h1{font-size:var(--step-5);}
h2{font-size:var(--step-4);}
h3{font-size:var(--step-2);line-height:1.14;letter-spacing:-0.014em;}
h4{font-size:var(--step-1);line-height:1.2;letter-spacing:-0.008em;}
p{margin:0 0 .9em;max-width:var(--measure);text-wrap:pretty;}
p:last-child{margin-bottom:0;}
a{color:var(--spot);text-underline-offset:.22em;text-decoration-thickness:1px;}
a:hover{color:var(--spot-hi);}
strong{font-weight:620;}
hr{border:0;border-top:1px solid var(--rule);margin:2rem 0;}
::selection{background:var(--spot);color:var(--on-spot);}
:root{caret-color:var(--spot);}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--rad);
}
code,kbd,pre{font-family:var(--f-fig);font-size:.86rem;}
code{background:var(--sheet-2);border:1px solid var(--rule);border-radius:var(--rad);
  padding:.05rem .3rem;overflow-wrap:anywhere;}
pre{
  margin:0 0 1rem;padding:.85rem 1rem;overflow-x:auto;
  background:var(--sheet-2);border:1px solid var(--rule);border-radius:var(--rad);
  line-height:1.5;color:var(--ink);
}
pre code{background:none;border:0;padding:0;font-size:1em;}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--sheet);
  color:var(--ink);border:1px solid var(--ink);padding:.6rem 1rem;
  font-family:var(--f-fig);font-size:var(--step--1);}
.skip:focus{left:.5rem;top:.5rem;}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* --- the sheet ------------------------------------------------------------ */
.sheet{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--rad);
  box-shadow:var(--sheet-edge);}
.panel{padding:clamp(1rem,3vw,1.9rem);}
.wrap{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:var(--gut);}
.page{padding-block:clamp(1.2rem,3vw,2.2rem);}

/* --- letterhead ----------------------------------------------------------- */
.head{position:sticky;top:0;z-index:20;background:var(--sheet);
  border-bottom:1px solid var(--ink);box-shadow:var(--sticky-edge);}
.head-in{display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:.35rem clamp(.8rem,2.4vw,1.6rem);padding-block:.6rem;}
.wordmark{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-display);font-stretch:100%;font-variation-settings:"wdth" 100;
  font-weight:660;font-size:1.3rem;letter-spacing:.03em;line-height:1;
  color:var(--ink);text-decoration:none;}
.brand-mark{width:1.45rem;height:1.45rem;display:block;flex:none;
  background-color:var(--spot);
  -webkit-mask-image:url("/assets/img/favicon.svg?v=ec30f84e");mask-image:url("/assets/img/favicon.svg?v=ec30f84e");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;}
.wordmark .mark{color:var(--spot);}          /* the logo: the first word carries the bronze */
.wordmark:hover .mark{color:var(--spot-hi);}
.wordmark-sm .mark{color:var(--spot);}
.wordmark:hover{color:var(--ink);}
.brand{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.beta-badge{
  display:inline-block;padding:.18rem .4rem;
  font-family:var(--f-fig);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--spot);background:var(--spot-tint);border:1px solid var(--spot);
  border-radius:var(--rad);line-height:1.2;
}
.head-nav{justify-self:end;display:flex;flex-wrap:wrap;align-items:center;gap:.15rem;}
.head-nav a{display:inline-flex;align-items:center;min-height:40px;
  font-family:var(--f-fig);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;padding:.5rem .6rem;border-radius:var(--rad);
  white-space:nowrap;border-bottom:1px solid transparent;}
.head-nav a:hover{color:var(--ink);background:var(--sheet-2);}
.head-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--spot);}
.head-nav .head-app{display:inline-flex;align-items:center;min-height:32px;
  margin-left:.35rem;padding:.35rem .8rem;font-family:var(--f-fig);font-size:.72rem;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  background:var(--spot);color:var(--on-spot);border:1px solid var(--spot);
  border-radius:var(--rad);text-decoration:none;
  transition:background-color .16s ease-out,border-color .16s ease-out;}
.head-nav .head-app:hover{background:var(--spot-hi);border-color:var(--spot-hi);
  color:var(--on-spot);}
@media (max-width:760px){
  .head-in{grid-template-columns:1fr;}
  .head-nav{justify-self:start;}
  .head-nav a{padding:.4rem .5rem;}
}

/* --- the colour-scheme toggle --------------------------------------------- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;min-height:40px;padding:0;background:transparent;
  border:1px solid transparent;border-radius:var(--rad);
  color:var(--ink-2);cursor:pointer;
}
.theme-toggle:hover{color:var(--ink);background:var(--sheet-2);}
.theme-toggle svg{display:block;}
.theme-toggle .i-moon{display:block;}
.theme-toggle .i-sun{display:none;}
/* the icon shows the scheme you would switch to */
:root[data-theme="dark"] .theme-toggle .i-moon{display:none;}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block;}

/* --- bands ---------------------------------------------------------------- */
.band{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--ink);padding:.55rem 0;margin-bottom:1.5rem;}
.band h2,.band h3{margin:0;}
.band h2{font-size:var(--step-2);}
.band--tight{padding-top:0;padding-bottom:.45rem;margin-bottom:1rem;}
.band .sheet-mark{font-family:var(--f-fig);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);text-align:right;max-width:34ch;line-height:1.5;}
.band--gap{margin-top:2.5rem;}
.band-rule{border-bottom:1px solid var(--rule-2);padding:.5rem 0;margin-bottom:1.25rem;}

.lbl{font-family:var(--f-fig);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);font-weight:500;}
.fig{font-family:var(--f-fig);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"zero" 0;letter-spacing:-0.01em;}
.stamp{display:inline-block;border:1px solid var(--ink-2);color:var(--ink-2);
  font-family:var(--f-fig);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.22rem .5rem;border-radius:var(--rad);}
.stamp--spot{border-color:var(--spot);color:var(--spot);}

/* --- hero ----------------------------------------------------------------- */
.hero{padding-block:clamp(1.2rem,3.4vw,2.6rem);}
.hero-sheet{overflow:hidden;}
.hero-band{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"id mark" "title title";gap:.5rem 2rem;align-items:baseline;
  padding:clamp(1rem,3vw,1.7rem) clamp(1rem,3vw,1.9rem);border-bottom:1px solid var(--ink);}
.band-id{grid-area:id;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .7rem;}
.wordmark-sm{font-family:var(--f-display);font-stretch:88%;font-variation-settings:"wdth" 88;
  font-weight:660;font-size:1.05rem;letter-spacing:.04em;line-height:1;}
.doc-title{font-family:var(--f-fig);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);border-left:1px solid var(--rule);padding-left:.7rem;}
.doc-title:first-of-type{border-left:0;padding-left:0;}
.hero-band .sheet-mark{grid-area:mark;}
.hero-band h1{grid-area:title;font-size:clamp(1.85rem,5vw,3.4rem);max-width:26ch;padding-top:.35rem;}
.hero-body{display:grid;grid-template-columns:minmax(0,4.8fr) minmax(0,7.2fr);}
.hero-body--solo{grid-template-columns:minmax(0,1fr);}
.hero-body--solo .hero-claim{border-right:0;max-width:56rem;}
.hero-claim{padding:clamp(1rem,3vw,1.9rem);border-right:1px solid var(--rule);
  display:flex;flex-direction:column;justify-content:center;}
.hero-record{padding:clamp(1rem,3vw,1.9rem);min-width:0;}
@media (max-width:900px){
  .hero-band{grid-template-columns:1fr;grid-template-areas:"id" "title" "mark";}
  .hero-band .sheet-mark{text-align:left;}
  .hero-body{grid-template-columns:1fr;}
  .hero-claim{border-right:0;border-bottom:1px solid var(--rule);}
}
.lede{font-size:var(--step-1);color:var(--ink-2);max-width:40ch;}
.lede b{color:var(--ink);font-weight:620;}

/* --- the three claims: facts, not adjectives ------------------------------ */
.claims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;margin:0;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--rad);overflow:hidden;list-style:none;padding:0;}
.claims>li{background:var(--sheet);padding:clamp(.8rem,1.8vw,1.1rem);}
.claims h3{font-size:1.05rem;margin-bottom:.4rem;}
.claims .lbl{display:block;margin-bottom:.45rem;}
.claims p{font-size:.9rem;line-height:1.5;color:var(--ink-2);margin-bottom:.6rem;}
.claims p:last-child{margin-bottom:0;}
.claims .fig{font-size:.8rem;color:var(--ink);}
@media (max-width:820px){.claims{grid-template-columns:1fr;}}

/* --- controls ------------------------------------------------------------- */
.act{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1.4rem 0 .9rem;}
.act--tight{margin-top:.9rem;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:.6rem 1.1rem;font-family:var(--f-fig);font-size:.8rem;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;background:var(--spot);
  color:var(--on-spot);border:1px solid var(--spot);border-radius:var(--rad);
  text-decoration:none;cursor:pointer;
  transition:background-color .16s ease-out,border-color .16s ease-out,color .16s ease-out;}
.btn:hover{background:var(--spot-hi);border-color:var(--spot-hi);color:var(--on-spot);}
.btn:active{transform:translateY(1px);}
.btn--quiet{background:transparent;color:var(--ink);border-color:var(--rule-strong);}
.btn--quiet:hover{background:var(--sheet-2);color:var(--ink);border-color:var(--ink);}
.btn--sm{min-height:34px;padding:.32rem .6rem;font-size:.7rem;}
.hint{font-size:.85rem;color:var(--ink-2);max-width:46ch;text-wrap:pretty;}
.hint--bad{color:var(--signal);}
.in,.sel{min-height:44px;padding:.5rem .6rem;background:var(--sheet);color:var(--ink);
  border:1px solid var(--rule-strong);border-radius:var(--rad);font-family:var(--f-fig);
  font-variant-numeric:tabular-nums;font-size:.9rem;}
.in::placeholder{color:var(--ink-3);}
.in:hover,.sel:hover{border-color:var(--ink-2);}
.open-in{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.4rem 0 .6rem;}
.open-in .in{flex:1 1 15rem;min-width:0;}

/* --- notices -------------------------------------------------------------- */
.notice{
  margin:0 0 1rem;padding:.75rem .9rem;max-width:var(--measure);
  background:var(--spot-tint);border:1px solid var(--spot);border-radius:var(--rad);
  font-size:.9rem;line-height:1.55;
}
.notice .stamp{margin-right:.5rem;}
.notice p{margin:0 0 .5rem;}
.notice p:last-child{margin-bottom:0;}
.beta-line{display:block;width:100%;}

/* --- tables --------------------------------------------------------------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--rad);background:var(--sheet);}
table.tbl{width:100%;border-collapse:collapse;font-size:.9rem;}
.tbl caption{text-align:left;padding:.6rem .8rem;font-family:var(--f-fig);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--rule);}
.tbl th,.tbl td{padding:.6rem .8rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule-2);}
.tbl thead th{font-family:var(--f-fig);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);font-weight:500;border-bottom:1px solid var(--rule);}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl td:first-child{color:var(--ink);font-weight:500;}
.tbl .yes{color:var(--spot);}
.tbl .no{color:var(--ink-2);}
/* The head to head table reads by column: every Veiled Contact cell in bronze, every Discord cell in
   the body's own ink, whatever the cell says. Links stay bronze in both. */
.tbl-compare tbody tr > td:nth-child(2){color:var(--spot);}
.tbl-compare tbody tr > td:nth-child(3){color:var(--ink);}

/* --- stacked lists (dl) --------------------------------------------------- */
.defs{margin:0;border-top:1px solid var(--rule-2);}
.defs>div{display:grid;grid-template-columns:minmax(0,3.4fr) minmax(0,8.6fr);
  gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--rule-2);}
.defs dt{font-weight:560;}
.defs dd{margin:0;color:var(--ink-2);}
@media (max-width:720px){.defs>div{grid-template-columns:1fr;gap:.25rem;}}

/* --- questions ------------------------------------------------------------ */
.faq-q{cursor:pointer;font-family:var(--f-display);font-stretch:96%;
  font-size:1.05rem;font-weight:560;list-style:none;}
.faq-q::-webkit-details-marker{display:none;}
.faq-plus{color:var(--spot);margin-right:.5rem;display:inline-block;
  transition:transform .18s ease-out;}
details[open] .faq-plus{transform:rotate(45deg);}
.faq-a{margin-top:.6rem;color:var(--ink-2);}
details.band-rule>summary{display:list-item;}

/* --- steps ---------------------------------------------------------------- */
.steps{counter-reset:step;list-style:none;margin:0;padding:0;}
.steps>li{position:relative;padding-left:2.4rem;padding-bottom:1.1rem;}
.steps>li::before{counter-increment:step;content:counter(step);
  position:absolute;left:0;top:.15rem;width:1.55rem;height:1.55rem;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-fig);font-size:.75rem;background:var(--spot-tint);
  color:var(--spot);border:1px solid var(--spot);border-radius:var(--rad);}
.steps h3{font-size:1.05rem;margin-bottom:.3rem;}

/* --- footer --------------------------------------------------------------- */
.foot{border-top:1px solid var(--ink);background:var(--sheet);margin-top:clamp(1.5rem,4vw,3rem);}
.foot-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1.5rem;padding-block:2rem;}
.foot h4{font-family:var(--f-fig);font-size:.68rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:.6rem;}
.foot ul{list-style:none;margin:0;padding:0;}
.foot li{margin-bottom:.3rem;}
.foot a{font-size:.88rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);}
.foot a:hover{border-bottom-color:var(--spot);color:var(--spot);}
.foot-legal{border-top:1px solid var(--rule);padding-block:1rem;display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--f-fig);
  font-size:.68rem;letter-spacing:.07em;color:var(--ink-2);}

/* --- platform cards: one box per way in, a button in each ----------------- */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;
  list-style:none;margin:0;padding:0;}
.plat+.plat{margin-top:2.25rem;}
.plat+.disc{margin-top:2.25rem;}
.cards--duo{grid-template-columns:repeat(2,minmax(0,1fr));max-width:52rem;}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.cards{grid-template-columns:1fr;}}
.card{display:flex;flex-direction:column;gap:.55rem;background:var(--sheet);
  border:1px solid var(--rule);border-radius:var(--rad);
  padding:clamp(.9rem,2vw,1.2rem);}
.card h3{margin:0;font-size:1.02rem;}
.card-line{margin:0;font-size:.88rem;line-height:1.45;color:var(--ink-2);
  flex:1 1 auto;max-width:none;}
.card .btn{align-self:flex-start;}

/* --- features: a tab strip, sticky while the panels below scroll ---------- */
.feat{margin-top:2.25rem;}
.feat-tabs{position:sticky;top:3.8rem;z-index:10;display:flex;gap:.2rem;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  background:var(--desk);border-bottom:1px solid var(--ink);padding:.9rem 0 .1rem;}
.feat-tabs::-webkit-scrollbar{display:none;}
.feat-tab{flex:0 0 auto;min-height:38px;padding:.4rem .7rem;border:0;background:none;cursor:pointer;
  font-family:var(--f-fig);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);border-bottom:2px solid transparent;border-radius:0;}
.feat-tab:hover{color:var(--ink);background:var(--sheet-2);}
.feat-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--spot);}
.feat-tab:focus-visible{outline:2px solid var(--spot-hi);outline-offset:-2px;}
.feat-panel{padding:1.7rem 0 .2rem;}
:root[data-surface="room"] .feat-panel{border-left:4px solid var(--spot);padding-left:1rem;}
.feat-panel h3{margin:.1rem 0 .5rem;font-size:1.15rem;}
.feat-panel .lede{margin-bottom:.7rem;}
.feat-list{margin:0;padding-left:1.1rem;display:grid;gap:.35rem;}
.feat-list li{font-size:.92rem;line-height:1.5;color:var(--ink-2);}
.feat-list li::marker{color:var(--spot);}
@media (max-width:760px){
  /* The header wraps to two rows here, so a sticky strip would either hide under it or take a
     third of the screen. It scrolls with the page instead, and the list itself scrolls sideways. */
  .feat-tabs{position:static;}
}

/* --- disclosures: the detail sits one click away -------------------------- */
.disc{border:1px solid var(--rule);border-radius:var(--rad);background:var(--sheet);
  padding:0 .9rem;}
.disc>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;
  gap:.5rem;padding:.75rem 0;font-family:var(--f-fig);font-size:.74rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);}
.disc>summary::-webkit-details-marker{display:none;}
.disc>summary::before{content:"+";color:var(--spot);font-size:.95rem;
  line-height:1;transition:transform .18s ease-out;}
.disc[open]>summary::before{transform:rotate(45deg);}
.disc>summary:hover{color:var(--ink);}
.disc-body{padding-bottom:1rem;}
.disc-body>*:first-child{margin-top:0;}
.disc--inline{border:0;background:none;padding:0;margin-top:1rem;}
.disc--inline>summary{padding:.4rem 0;}
.disc + .disc{margin-top:1.25rem;}

/* ═══ the room: the product surface ══════════════════════════════════════════
   Product pages carry the navy room. Specification pages keep the sheet. Bronze
   marks the active path, and the angular grid gives the room its surface. */
:root[data-surface="room"]{
  color-scheme:dark;
  --desk:#0B1118;
  --sheet:#111B26;
  --sheet-2:#182330;
  --sheet-3:#1F2D3A;
  --ink:#F0F2ED;
  --ink-2:#B0BDC6;
  --ink-3:#91A0AA;
  --rule:#33414E;
  --rule-2:#25323E;
  --rule-strong:#71818D;
  --spot:#D9A45B;
  --spot-hi:#E7BA7C;
  --spot-tint:#241C12;
  --on-spot:#1A1206;
  --signal:#E8837A;
  --signal-tint:#2A1917;
  --focus:#E7BA7C;
  --sheet-edge:0 1px 0 rgba(255,255,255,.035),0 24px 52px -36px rgba(0,0,0,.95);
  --sticky-edge:0 1px 0 rgba(255,255,255,.06);
}
:root[data-surface="room"] body{
  background-color:var(--desk);
  background-image:radial-gradient(circle at 84% 14%,rgba(217,164,91,.09),transparent 24%),
    linear-gradient(135deg,transparent 0 48%,rgba(176,189,198,.035) 48% 49%,transparent 49% 100%);
  background-size:auto,44px 44px;
  background-attachment:fixed;
}
:root[data-surface="room"][data-theme="light"]{
  color-scheme:light;
  --desk:#E4E6E2;--sheet:#FCFCFA;--sheet-2:#F4F5F2;--sheet-3:#EDEFEA;
  --ink:#14181D;--ink-2:#566069;--ink-3:#6B747D;
  --rule:#C9CFD6;--rule-2:#DDE2E6;--rule-strong:#98A2AB;
  --spot:#8C5A1F;--spot-hi:#6E4614;--spot-tint:#F3EADB;--on-spot:#FCFCFA;
  --signal:#A8281E;--signal-tint:#F8E9E6;--focus:#6E4614;
  --sheet-edge:0 1px 0 rgba(20,24,29,.05),0 20px 44px -32px rgba(20,24,29,.42);
  --sticky-edge:0 1px 0 rgba(20,24,29,.07);
}
/* focus and underline come from the palette on this surface too */
:root[data-surface="room"] :focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
:root[data-surface="room"] a{text-underline-offset:.22em;text-decoration-thickness:1px;}

/* --- the instrument: what the page is about, moving -------------------------- */
.hero-room{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.6rem,3.6vw,3.2rem);align-items:center;max-width:none;width:100%;}
.hero-room h1{font-size:clamp(2.6rem,5.3vw,4.5rem);line-height:.98;
  letter-spacing:-.055em;font-stretch:100%;font-variation-settings:"wdth" 100;max-width:10ch;}
.hero-room .lede{margin-top:1rem;font-size:1.05rem;line-height:1.55;
  color:var(--ink-2);max-width:42ch;}
@media (max-width:900px){.hero-room{grid-template-columns:minmax(0,1fr);gap:2rem;}}

.inst{margin:0;background:var(--sheet);border:1px solid var(--rule);border-left:4px solid var(--spot);
  background-image:linear-gradient(135deg,rgba(231,186,124,.055),transparent 42%),
    repeating-linear-gradient(135deg,transparent 0 28px,rgba(176,189,198,.035) 28px 29px,transparent 29px 42px);
  border-radius:var(--rad);box-shadow:var(--sheet-edge);}
.inst-top,.inst-foot{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;justify-content:space-between;
  align-items:baseline;padding:.8rem 1rem;font-family:var(--f-fig);font-size:.72rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);}
.inst-top{border-bottom:1px solid var(--rule-2);}
.inst-foot{border-top:1px solid var(--rule-2);color:var(--ink-3);}
.inst-top .voice-measure,.inst-foot .voice-measure{max-width:100%;letter-spacing:0;text-transform:none;}
.inst-top .voice-measure{color:var(--spot);}
.inst-foot .voice-measure{color:var(--ink);}
.measure-conditions{color:var(--ink-2);}
.inst-body{padding:1.1rem 1rem .9rem;}
.inst svg{display:block;width:100%;height:auto;}
.inst .stage{font-family:var(--f-fig);font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;fill:var(--ink);}
.inst .dim{font-family:var(--f-fig);font-size:13.5px;letter-spacing:.03em;fill:var(--ink-3);}
.inst .line{stroke:var(--rule);stroke-width:1;}
.inst .guide{stroke:var(--rule-2);stroke-width:1;}
.inst .tick{stroke:var(--rule-strong);stroke-width:1;}
.inst .blk{fill:#5F7180;clip-path:polygon(0 0,75% 0,100% 50%,75% 100%,0 100%,25% 50%);}
.inst .travel{fill:var(--spot-hi);clip-path:polygon(0 0,75% 0,100% 50%,75% 100%,0 100%,25% 50%);}
.inst .travelgroup{filter:drop-shadow(0 0 2px rgba(231,186,124,.55));}
.inst .lockbody,.inst .lockshackle{fill:none;stroke:#2A1B08;stroke-width:1.7;stroke-linecap:round;}
.inst .arrive{fill:none;stroke:var(--spot-hi);stroke-width:1.5;opacity:0;
  transform-box:fill-box;transform-origin:center;filter:url(#ringglow);}
/* one authored moment: a locked block crosses the whole path and the lock opens where it lands.
   Nothing here is a fault. The point is that it stays locked the whole way and the listener opens it. */
@media (prefers-reduced-motion:no-preference){
  .inst .travelgroup{animation:cross 6s cubic-bezier(.42,0,.34,1) infinite,
    bloom 6s cubic-bezier(.42,0,.34,1) infinite;}
  .inst .lockopen{animation:unlock 6s linear infinite;}
  .inst .arrive{animation:pulse 6s ease-out infinite;}
}
@keyframes cross{
  0%{transform:translateX(0);opacity:0;}
  3%{opacity:1;}
  97%{transform:translateX(806px);opacity:1;}
  100%{transform:translateX(806px);opacity:0;}
}
/* the bloom is the unlock, not a decoration: it flares where the block lands and is spent by the time
   the next one leaves. On the way across it is a rim, so the block keeps a hard edge. */
@keyframes bloom{
  0%,74%{filter:drop-shadow(0 0 2px rgba(231,186,124,.55));}
  86%{filter:drop-shadow(0 0 8px rgba(231,186,124,.95));}
  94%,100%{filter:drop-shadow(0 0 2px rgba(231,186,124,.45));}
}
@keyframes unlock{0%,86%{opacity:1;}94%,100%{opacity:0;}}
@keyframes pulse{0%,86%{opacity:0;transform:scale(.7);}91%{opacity:.85;}100%{opacity:0;transform:scale(1.9);}}

/* --- the panel on a narrow screen ------------------------------------------- */
.inst-steps{display:none;}
@media (max-width:640px){
  /* the drawing scales with its viewBox, so text set inside it lands near five pixels here.
     The words move to real text at full size and the drawing keeps the picture. */
  .inst .stage,.inst .dim{display:none;}
  .inst-steps{display:grid;gap:.5rem;margin:1rem 0 0;padding:0;list-style:none;
    font-size:.92rem;line-height:1.4;color:var(--ink-2);}
  .inst-steps li{padding-left:0;}
  .inst-steps b{display:block;font-family:var(--f-fig);font-size:.7rem;font-weight:500;
    letter-spacing:.13em;text-transform:uppercase;color:var(--ink);}
}