/* ==========================================================================
   Zazie Productions — Legal, rights and operating documents
   Shared stylesheet for /legal, /faq, /terms, /privacy, /licensing,
   /purchases and /accessibility.

   Self-contained: same tokens, type stack and texture recipes as the
   portfolio and the catalogue, but tuned for sustained reading. The torch,
   custom cursor, scanlines and VHS roll are deliberately absent here. A
   document people are asked to rely on should sit still.
   ========================================================================== */

/* --- Type: identical faces + metric-override fallbacks as index.html ------ */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond Fallback";src:local("Georgia"),local("Times New Roman");ascent-override:92.4%;descent-override:28.7%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");ascent-override:96.9%;descent-override:24.2%;line-gap-override:0%}

/* --- Tokens (mirrors the portfolio theme) -------------------------------- */
:root{
  --void:#030303; --ink:#080808; --smoke:#121212; --ash:#1e1e1e;
  --mist:#9a9590; --bone:#f0ebe3; --blood:#c41e1e; --ember:#ff2a2a;
  /* --blood sits at 3.49:1 on --void: fine for rules and marks, short of the
     4.5:1 needed for small text. Labels use this lightened red (5.71:1). */
  --blood-text:#e65650;
  --sans:"Inter","Inter Fallback",ui-sans-serif,system-ui,sans-serif;
  --display:"Cormorant Garamond","Cormorant Garamond Fallback",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
  --edge:rgba(255,255,255,.06);
  --edge-2:rgba(255,255,255,.1);
  --body:rgba(240,235,227,.82);
  --body-dim:rgba(154,149,144,.9);
  --shell:min(84rem,100%);
  --gutter:clamp(1rem,4vw,2.5rem);
  --measure:74ch;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100svh;overflow-x:hidden;
  background:var(--void);color:var(--bone);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-tap-highlight-color:rgba(196,30,30,.15);
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:rgba(196,30,30,.45);color:#fff}
:focus-visible{outline:1px solid var(--ember);outline-offset:3px}

/* --- Texture: grain, vignette, hairline frame only ------------------------ */
.grain{
  pointer-events:none;position:fixed;inset:0;z-index:90;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{pointer-events:none;position:fixed;inset:0;z-index:85;background:radial-gradient(rgba(0,0,0,0) 45%,rgba(0,0,0,.6))}
.frame{pointer-events:none;position:fixed;inset:clamp(.5rem,1.5vw,1.25rem);z-index:88;border:1px solid rgba(255,255,255,.04)}
.frame::before,.frame::after{content:"";position:absolute;width:1.25rem;height:1.25rem;border-color:rgba(196,30,30,.4);border-style:solid;border-width:0}
.frame::before{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.frame::after{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}
@media (max-width:640px){.frame{display:none}}

.skip{position:absolute;left:-9999px;top:0;z-index:120;background:var(--blood);color:#fff;padding:.75rem 1.25rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase}
.skip:focus{left:.5rem;top:.5rem}

/* --- Layout helpers ------------------------------------------------------ */
.shell{width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{
  margin:0 0 .75rem;color:var(--blood-text);
  font-size:.625rem;font-weight:500;letter-spacing:.35em;text-transform:uppercase;
}
.small{font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}

/* Scroll reveal (no-JS: everything visible) */
.has-js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(min(var(--i,0),4)*60ms)}
.has-js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.has-js .reveal{opacity:1;transform:none}}

/* --- Header -------------------------------------------------------------- */
.masthead{
  position:sticky;top:0;z-index:70;
  background:rgba(3,3,3,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--edge);
  transition:background .4s,border-color .4s,box-shadow .4s;
}
.masthead.is-stuck{background:rgba(3,3,3,.95);border-bottom-color:rgba(196,30,30,.28);box-shadow:0 12px 40px -20px rgba(0,0,0,.9)}
.masthead-inner{display:flex;align-items:center;gap:1rem;height:3.5rem}
@media (min-width:640px){.masthead-inner{height:4rem}}
.brand{display:flex;align-items:center;gap:.6rem;flex:none}
.brand .mark{
  display:grid;place-items:center;width:2.25rem;height:2.25rem;
  border:1px solid rgba(196,30,30,.4);background:rgba(196,30,30,.1);
  font-family:var(--display);font-size:1.125rem;color:var(--blood);
  transition:background .25s,border-color .25s,color .25s;
}
.brand:hover .mark{background:var(--blood);border-color:var(--blood);color:var(--bone)}
.brand-name{display:none;line-height:1}
@media (min-width:400px){.brand-name{display:block}}
.brand-name b{display:block;font-family:var(--display);font-size:1.0625rem;font-weight:400;letter-spacing:.12em}
.brand-name span{display:block;margin-top:.2rem;font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--mist)}
.tabs{display:flex;align-items:center;gap:.15rem;margin-left:auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;padding:.55rem .7rem;white-space:nowrap;font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mist);transition:color .2s}
@media (min-width:900px){.tabs a{padding:.6rem 1rem;letter-spacing:.28em}}
.tabs a:hover{color:var(--bone)}
.tabs a[aria-current="page"]{color:var(--bone)}
.tabs a[aria-current="page"]::after{content:"";display:block;height:1px;margin-top:.3rem;background:var(--blood)}
.masthead .btn{margin-left:.25rem;flex:none}
@media (max-width:719px){.masthead .btn{display:none}}

/* Reading progress: one blood hairline under the masthead */
.progress{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:linear-gradient(90deg,rgba(196,30,30,.2),var(--ember));z-index:2}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.85rem 1.6rem;border:1px solid transparent;cursor:pointer;
  font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  background:var(--blood);color:var(--bone);
  box-shadow:0 0 34px rgba(196,30,30,.3);
  transition:background .25s,box-shadow .25s,border-color .25s,color .25s,transform .25s;
}
.btn:hover{background:var(--ember);box-shadow:0 0 48px rgba(255,42,42,.42)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;border-color:var(--ash);box-shadow:none;color:var(--bone)}
.btn-ghost:hover{background:transparent;border-color:var(--blood);box-shadow:0 0 32px rgba(196,30,30,.22)}
.btn-sm{min-height:40px;padding:.55rem 1.1rem;font-size:.625rem}

/* --- Document plate ------------------------------------------------------ */
.doc-head{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--edge);background:var(--ink)}
.doc-head::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 60% at 88% 12%,rgba(140,10,10,.3),transparent 62%),
    radial-gradient(ellipse 40% 45% at 4% 96%,rgba(196,30,30,.08),transparent 60%),
    linear-gradient(180deg,var(--ink),var(--void));
}
.doc-head::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--edge) 1px,transparent 1px),linear-gradient(90deg,var(--edge) 1px,transparent 1px);
  background-size:100% 25%,25% 100%;opacity:.3;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 70%);
}
.doc-head-inner{position:relative;padding:clamp(2.5rem,7vw,5rem) 0 clamp(2rem,4vw,3rem)}
.doc-head h1{
  margin:0;max-width:20ch;
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.25rem,6vw,4.25rem);line-height:1;letter-spacing:-.01em;
}
.doc-head h1 em{font-style:italic;color:var(--blood)}
.doc-lead{margin:1.25rem 0 0;max-width:60ch;font-size:1rem;line-height:1.8;color:var(--body)}
.doc-meta{
  display:flex;flex-wrap:wrap;gap:.4rem 1.75rem;margin:1.75rem 0 0;padding:1.15rem 0 0;
  list-style:none;border-top:1px solid var(--edge);
}
.doc-meta li{display:flex;flex-wrap:wrap;gap:.45rem;align-items:baseline;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.doc-meta b{font-weight:500;letter-spacing:.12em;color:var(--bone);text-transform:none;font-size:.75rem}
.doc-meta time{color:var(--bone);font-size:.75rem;letter-spacing:.12em;text-transform:none;font-variant-numeric:tabular-nums}

/* --- Body: sticky index + reading column --------------------------------- */
.doc{position:relative;background:var(--void);padding-block:clamp(2.25rem,5vw,4rem) clamp(3rem,7vw,5.5rem)}
.doc-layout{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (min-width:1000px){.doc-layout{grid-template-columns:minmax(0,13rem) minmax(0,1fr)}}
.doc-index{display:none}
@media (min-width:1000px){
  .doc-index{display:block;position:sticky;top:6.5rem;max-height:calc(100svh - 9rem);overflow-y:auto;padding-right:.5rem}
}
.doc-index p{margin:0 0 .85rem;font-size:.5625rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(154,149,144,.7)}
.doc-index ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--edge)}
.doc-index li{margin:0}
.doc-index a{
  display:block;padding:.42rem 0 .42rem .85rem;margin-left:-1px;border-left:1px solid transparent;
  font-size:.75rem;line-height:1.4;color:var(--mist);transition:color .2s,border-color .2s;
}
.doc-index a:hover{color:var(--bone)}
.doc-index a[aria-current="true"]{color:var(--bone);border-left-color:var(--blood)}
.doc-index .idx{display:block;font-family:var(--display);font-size:.6875rem;letter-spacing:.06em;color:rgba(154,149,144,.55)}
.doc-index a[aria-current="true"] .idx{color:var(--blood-text)}

/* mobile section jump (native select would break the aesthetic; use chips) */
.doc-jump{margin:0 0 2rem;padding:1rem;border:1px solid var(--edge);background:var(--ink)}
.doc-jump p{margin:0 0 .7rem;font-size:.5625rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(154,149,144,.75)}
.doc-jump ul{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.doc-jump a{display:block;padding:.45rem .7rem;border:1px solid var(--ash);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);transition:border-color .2s,color .2s}
.doc-jump a:hover{border-color:rgba(196,30,30,.55);color:var(--bone)}
@media (min-width:1000px){.doc-jump{display:none}}

.doc-body{max-width:var(--measure)}
.doc-body > * + *{margin-top:1.25rem}
.doc-body p{margin:0;font-size:.9375rem;line-height:1.85;color:var(--body)}
.doc-body strong{color:var(--bone);font-weight:600}
.doc-body a:not(.btn){color:var(--bone);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(196,30,30,.6);transition:color .2s,text-decoration-color .2s}
.doc-body a:not(.btn):hover{color:var(--ember);text-decoration-color:var(--ember)}
.doc-body ul,.doc-body ol{margin:0;padding-left:1.15rem;font-size:.9375rem;line-height:1.85;color:var(--body)}
.doc-body li + li{margin-top:.5rem}
.doc-body ul{list-style:none;padding-left:1.25rem}
.doc-body ul > li{position:relative}
.doc-body ul > li::before{content:"";position:absolute;left:-.9rem;top:.75em;width:4px;height:4px;background:var(--blood);transform:rotate(45deg)}
.doc-body code{font-family:var(--mono);font-size:.8125rem;color:rgba(240,235,227,.9);background:rgba(255,255,255,.05);padding:.1rem .3rem}

/* --- Clauses ------------------------------------------------------------- */
.clause{scroll-margin-top:6rem;padding-top:1.5rem}
.clause + .clause{margin-top:2.75rem;border-top:1px solid var(--edge)}
.clause > h2{
  margin:0 0 1rem;font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.125rem);line-height:1.15;color:var(--bone);
}
.clause > h2 .no{
  display:block;margin-bottom:.5rem;font-family:var(--sans);
  font-size:.5625rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--blood-text);
}
.clause > h3{
  margin:1.75rem 0 .5rem;font-family:var(--sans);font-weight:600;
  font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone);
}
.clause > p + h3{margin-top:2rem}
.upper{
  text-transform:uppercase;font-size:.8125rem;line-height:1.9;letter-spacing:.02em;
  color:rgba(240,235,227,.72);
}

/* --- Callouts ------------------------------------------------------------ */
.note,.flag,.fact,.warn{
  position:relative;margin:1.5rem 0;padding:1.1rem 1.25rem 1.15rem;
  border:1px solid var(--edge-2);border-left:1px solid var(--ash);background:rgba(255,255,255,.015);
}
.note > p,.flag > p,.fact > p,.warn > p{font-size:.875rem;line-height:1.8;margin:0}
.note > p + p,.flag > p + p,.fact > p + p,.warn > p + p{margin-top:.6rem}
.note::before,.flag::before,.fact::before,.warn::before{
  display:block;margin-bottom:.55rem;
  font-size:.5625rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--mist);
}
.note::before{content:"Note"}
.flag{border-left-color:var(--blood);background:rgba(196,30,30,.06)}
.flag::before{content:"Studio default · negotiable";color:var(--blood-text)}
.fact{border-left-color:rgba(240,235,227,.35)}
.fact::before{content:"How this actually works"}
.warn{border-left-color:var(--ember);background:rgba(255,42,42,.05)}
.warn::before{content:"Read this before you send anything";color:var(--ember)}

/* --- Tables -------------------------------------------------------------- */
.table-wrap{margin:1.5rem 0;overflow-x:auto;border:1px solid var(--edge)}
table{width:100%;border-collapse:collapse;font-size:.8125rem;line-height:1.7;min-width:34rem}
caption{
  caption-side:top;text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--edge);
  font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mist);background:var(--ink);
}
th,td{padding:.7rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--edge);color:var(--body)}
thead th{
  background:var(--ink);color:var(--bone);font-size:.5625rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody th{color:var(--bone);font-weight:500;white-space:nowrap}
tbody tr:hover{background:rgba(255,255,255,.015)}
td code,th code{white-space:nowrap}

/* --- FAQ ----------------------------------------------------------------- */
.faq-tools{display:none;flex-wrap:wrap;gap:.6rem;align-items:center;margin:0 0 1.5rem}
.has-js .faq-tools{display:flex}
.faq-tools .count{margin-left:auto;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.faq-tools .count b{color:var(--bone);font-weight:500}
.faq-group{margin:0 0 2.5rem}
.faq-group > h2{
  margin:0 0 .25rem;padding-bottom:.85rem;border-bottom:1px solid var(--edge);
  font-family:var(--display);font-weight:400;font-size:clamp(1.375rem,3vw,1.875rem);color:var(--bone);
}
.faq-group > .faq-kicker{margin:0 0 1.25rem;font-size:.8125rem;line-height:1.75;color:var(--body-dim)}
.faq-item{border-bottom:1px solid var(--edge)}
.faq-item summary{
  display:flex;gap:1rem;align-items:flex-start;cursor:pointer;list-style:none;
  padding:1.05rem .25rem;font-size:.9375rem;line-height:1.6;color:var(--bone);
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--ember)}
.faq-item summary .qno{
  flex:none;width:1.9rem;font-family:var(--display);font-size:.875rem;
  color:rgba(154,149,144,.6);font-variant-numeric:tabular-nums;
}
.faq-item summary .qtext{flex:1}
.faq-item summary .qmark{
  flex:none;width:.75rem;height:.75rem;margin-top:.4rem;position:relative;
}
.faq-item summary .qmark::before,.faq-item summary .qmark::after{
  content:"";position:absolute;background:var(--blood);transition:transform .3s,opacity .3s;
}
.faq-item summary .qmark::before{left:0;top:50%;width:100%;height:1px;transform:translateY(-50%)}
.faq-item summary .qmark::after{top:0;left:50%;height:100%;width:1px;transform:translateX(-50%)}
.faq-item[open] summary .qmark::after{transform:translateX(-50%) scaleY(0);opacity:0}
.faq-item .answer{padding:0 2.75rem 1.5rem 2.9rem;font-size:.9375rem;line-height:1.85;color:var(--body);max-width:var(--measure)}
.faq-item .answer > p + p{margin-top:.85rem}
.faq-item .answer ul{margin:.85rem 0 0;padding-left:1.15rem;list-style:none}
.faq-item .answer ul > li{position:relative;margin-top:.4rem}
.faq-item .answer ul > li::before{content:"";position:absolute;left:-.85rem;top:.75em;width:4px;height:4px;background:var(--blood);transform:rotate(45deg)}
.faq-item .answer a{color:var(--bone);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(196,30,30,.6)}
.faq-item .answer a:hover{color:var(--ember)}
.faq-item .answer .spec-line{
  display:block;margin-top:.85rem;font-family:var(--mono);font-size:.75rem;color:rgba(240,235,227,.7);
}
.faq-item:target{background:rgba(196,30,30,.06)}
.faq-item:target summary{color:var(--ember)}

/* --- Device inspector (privacy page) ------------------------------------- */
.device{margin:1.5rem 0;border:1px solid var(--edge-2);background:var(--ink)}
.device-head{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;padding:.9rem 1rem;border-bottom:1px solid var(--edge)}
.device-head p{margin:0;font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mist)}
.device-head .spacer{flex:1}
.device-out{margin:0;padding:0;list-style:none}
.device-out li{
  display:flex;flex-wrap:wrap;gap:.35rem 1rem;justify-content:space-between;
  padding:.7rem 1rem;border-bottom:1px solid var(--edge);font-size:.8125rem;color:var(--body);
}
.device-out li:last-child{border-bottom:0}
.device-out .k{font-family:var(--mono);font-size:.75rem;color:rgba(240,235,227,.85)}
.device-out .v{font-size:.75rem;color:var(--mist);text-align:right}
.device-out .v.ok{color:#7fbf7f}
.device-out .v.hit{color:var(--ember)}
.device-empty{margin:0;padding:1.25rem 1rem;font-size:.8125rem;color:var(--body-dim)}
.device-note{margin:0;padding:.85rem 1rem;border-top:1px solid var(--edge);font-size:.75rem;line-height:1.7;color:var(--body-dim)}

/* --- Copy plate (licensing credit line) ---------------------------------- */
.copy-plate{margin:1.5rem 0;border:1px solid var(--edge-2);background:var(--ink)}
.copy-plate pre{
  margin:0;padding:1.1rem 1.25rem;overflow-x:auto;
  font-family:var(--mono);font-size:.8125rem;line-height:1.8;color:rgba(240,235,227,.9);white-space:pre-wrap;
}
.copy-plate .copy-bar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;padding:.7rem 1rem;border-top:1px solid var(--edge)}
.copy-plate .copy-bar p{margin:0;font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mist)}
.copy-plate .copy-bar .spacer{flex:1}
.copy-btn{
  cursor:pointer;background:transparent;border:1px solid var(--ash);padding:.45rem .85rem;
  font-size:.5625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);
  transition:border-color .2s,color .2s;
}
.copy-btn:hover{border-color:rgba(196,30,30,.6);color:var(--bone)}
.copy-btn[data-done="1"]{border-color:var(--blood);color:var(--bone)}

/* --- Document hub cards (/legal) ----------------------------------------- */
.hub-grid{display:grid;gap:1rem;margin:0;padding:0;list-style:none}
@media (min-width:760px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hub-card{
  display:flex;flex-direction:column;gap:.5rem;height:100%;
  padding:1.5rem;border:1px solid var(--ash);background:var(--ink);
  transition:border-color .3s,background .3s,transform .3s;
}
.hub-card:hover{border-color:rgba(196,30,30,.55);background:var(--smoke);transform:translateY(-2px)}
.hub-card .no{font-family:var(--display);font-size:.8125rem;letter-spacing:.08em;color:rgba(154,149,144,.6)}
.hub-card h2, .hub-card h3{margin:0;font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1.15;color:var(--bone)}
.hub-card p{margin:0;font-size:.8125rem;line-height:1.75;color:var(--body-dim)}
.hub-card .stamp{margin-top:auto;padding-top:.85rem;font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(154,149,144,.75)}
.hub-card .stamp time{color:var(--mist)}
.hub-card a.stretch::after{content:"";position:absolute;inset:0}
.hub-card{position:relative}
.hub-card a.stretch{color:inherit}
.hub-card a.stretch:focus-visible{outline:1px solid var(--ember);outline-offset:3px}


/* --- Breadcrumbs -------------------------------------------------------- */
.breadcrumbs{margin:0 0 .85rem;font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.breadcrumbs li{display:inline-flex;align-items:center;color:var(--mist)}
.breadcrumbs a{color:var(--bone);text-decoration:none;transition:color .2s}
.breadcrumbs a:hover{color:var(--blood)}
.breadcrumbs .crumb-sep{color:var(--blood-text);opacity:.75;user-select:none;margin:0 .15rem}
.breadcrumbs [aria-current="page"]{color:var(--blood-text);font-weight:600}

/* --- Media & figures --------------------------------------------------- */
.poster-figure{margin:0 0 1rem;position:relative;border:1px solid var(--ash);background:var(--ink);overflow:hidden}
.poster-figure picture, .poster-figure img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.media-still{margin:0 0 1rem;position:relative;border:1px solid var(--ash);background:var(--ink);overflow:hidden}
.media-still picture, .media-still img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.composer-portrait{margin:0 0 1.5rem;max-width:320px;border:1px solid var(--ash);background:var(--ink);padding:.5rem}
.composer-portrait picture, .composer-portrait img{display:block;width:100%;height:auto;object-fit:cover}
.composer-portrait figcaption{margin-top:.5rem;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.audio-player{width:100%;margin-top:.65rem;height:36px;accent-color:var(--blood);filter:invert(0.9) hue-rotate(180deg)}

/* --- Footer entity reinforcement ---------------------------------------- */
.foot-entity{
  margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--edge);
  font-size:.8125rem;line-height:1.75;color:var(--body-dim);max-width:76ch;
}
.foot-entity a{color:var(--bone);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.foot-entity a:hover{color:var(--blood)}

/* --- Closing band -------------------------------------------------------- */
.closing{position:relative;overflow:hidden;border-top:1px solid var(--edge);background:var(--ink)}
.closing::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 85% 20%,rgba(140,10,10,.28),transparent 55%)}
.closing-inner{position:relative;display:grid;gap:1.5rem;padding:clamp(2.5rem,6vw,4rem) 0;align-items:center}
@media (min-width:860px){.closing-inner{grid-template-columns:minmax(0,1fr) auto}}
.closing h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.75rem,4vw,2.75rem);line-height:1.1;color:var(--bone)}
.closing h2 em{font-style:italic;color:var(--blood)}
.closing p{margin:.85rem 0 0;max-width:52ch;font-size:.875rem;line-height:1.8;color:var(--body)}
.closing-actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* --- Footer -------------------------------------------------------------- */
.site-foot{position:relative;border-top:1px solid var(--edge);background:var(--ink);padding:clamp(2.25rem,5vw,3.5rem) 0 2.5rem}
.site-foot::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(196,30,30,.4),transparent)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.75rem;align-items:flex-end}
.foot-brand p{margin:0}
.foot-brand .name{font-family:var(--display);font-size:clamp(1.75rem,4.4vw,2.75rem);line-height:1}
.foot-brand .tagline{margin-top:.65rem;font-size:.625rem;letter-spacing:.32em;text-transform:uppercase;color:var(--mist)}
.foot-links{display:flex;flex-wrap:wrap;gap:.65rem 1.25rem;max-width:34rem}
.foot-links a{font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mist);transition:color .2s}
.foot-links a:hover{color:var(--blood)}
.foot-law{
  margin:1.75rem 0 0;padding-top:1.25rem;border-top:1px solid var(--edge);
  display:flex;flex-wrap:wrap;gap:.6rem 1.15rem;
}
.foot-law span.lbl{font-size:.5625rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(154,149,144,.6)}
.foot-law a{font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);transition:color .2s}
.foot-law a:hover{color:var(--blood)}
.foot-legal{
  margin:1.25rem 0 0;padding-top:1.25rem;border-top:1px solid var(--edge);
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between;
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(154,149,144,.6);
}

/* --- Motion / print ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .has-js .reveal{opacity:1;transform:none}
  .hub-card:hover{transform:none}
}
@media print{
  .grain,.vignette,.frame,.masthead,.doc-index,.doc-jump,.closing,.site-foot,.faq-tools,.device,.copy-bar,.progress{display:none!important}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.6}
  .doc-head{background:#fff;border-bottom:1px solid #000}
  .doc-head::before,.doc-head::after{display:none}
  .doc-head h1,.clause > h2,.hub-card h2,.hub-card h3{color:#000}
  .doc-head h1 em,.clause > h2 .no{color:#7a0f0f}
  .doc-body p,.doc-body li,.faq-item .answer,th,td{color:#111}
  .doc-body{max-width:none}
  .faq-item{border-bottom:1px solid #999}
  .faq-item summary{color:#000}
  .faq-item .answer{padding-left:0;padding-right:0}
  .note,.flag,.fact,.warn{border:1px solid #999;background:#fff}
  .table-wrap{border-color:#999}
  thead th{background:#eee;color:#000}
  a{color:#000;text-decoration:underline}
  .clause{break-inside:avoid-page}
  .has-js .reveal{opacity:1;transform:none}
}