/* ==========================================================================
   Star Privacy
   Custodita a Vigilantibus Dragonibus

   The register is a private house that keeps its own hours and its own rules,
   not a security product. Black ground, the gold taken from the mark itself,
   and paper the color of a printed rulebook. Members are admitted rather than
   converted, so nothing here shouts and nothing counts down.

   Deliberately not the standard arrangement: no three floating price cards, no
   row of feature tiles, no centered hero on a colored band. Membership is a
   ruled register. Sections are numbered like clauses. Photography runs full
   bleed and the type sits on it.
   ========================================================================== */

:root{
  /* ground, taken from the plate the mark is printed on */
  --k-950:#050505; --k-900:#0A0A0A; --k-850:#111111; --k-800:#171717;
  --k-750:#1F1F1F; --k-700:#2A2A2A; --k-600:#3A3A38; --k-500:#4E4E4A;
  /* gold, sampled off the dragons */
  --g-900:#5A4808; --g-800:#6E5A0B; --g-700:#9C7E12; --g-600:#C39927;
  --g-500:#D8AC1F; --g-400:#E5BB1B; --g-300:#F2C91C; --g-200:#F6DE8A;
  --g-100:#FBF0CE;
  /* paper */
  --pa:#EDE8DD; --pa-2:#E2DBCB; --pa-3:#D2C9B4; --pa-4:#B8AC91;
  /* the carpet */
  --ox:#6E1A1A; --ox-2:#8E2626; --ox-3:#B04A3E;

  /* The -4 steps are the faintest text the site uses and are held at or
     above 4.5:1 on every ground they appear on. */
  --on-k:#EDE8DD; --on-k-2:#B5AE9F; --on-k-3:#8C8578; --on-k-4:#827C70;
  --on-pa:#141310; --on-pa-2:#3D3931; --on-pa-3:#605A4E; --on-pa-4:#655E51;

  --rule-k:#262523; --rule-k-2:#33322E; --rule-pa:#CFC6B1; --rule-pa-2:#B6AB92;

  --disp:"Italiana",Didot,"Bodoni MT",Georgia,serif;
  --deco:"Josefin Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --book:"Libre Caslon Text",Georgia,"Times New Roman",serif;

  --ease:cubic-bezier(.2,.6,.3,1);
  --shell:1240px;
  --gut:clamp(20px,4.6vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--k-900);color:var(--on-k);
  font-family:var(--book);font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  /* Clipped at the viewport, on body rather than the root element: root level
     clipping breaks position:sticky in this engine. */
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3{font-family:var(--disp);font-weight:400;margin:0;line-height:1.08;
  letter-spacing:.005em}
h1{font-size:clamp(2.9rem,7.4vw,6rem)}
h2{font-size:clamp(2rem,4.4vw,3.4rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.18}
h4{font-family:var(--deco);font-weight:600;font-size:.76rem;letter-spacing:.22em;
  text-transform:uppercase;margin:0;line-height:1.3}
p{margin:0}

.shell{width:100%;max-width:var(--shell);margin-left:auto;margin-right:auto;
  padding-left:var(--gut);padding-right:var(--gut)}
.narrow{max-width:74ch}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--g-500);
  color:var(--k-950);font-family:var(--deco);font-weight:600;
  padding-top:12px;padding-bottom:12px;padding-left:18px;padding-right:18px}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--g-400);outline-offset:3px}

/* ------------------------------------------------------------------ latin */
/* The motto is the house's own words and is set apart wherever it appears. */
.motto{font-family:var(--disp);font-style:italic;color:var(--g-400);
  font-size:clamp(.98rem,1.5vw,1.16rem);letter-spacing:.06em}
.motto-en{font-family:var(--deco);font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--on-k-3);display:block;margin-top:7px}

/* ------------------------------------------------------------------ label */
.lab{display:inline-block;font-family:var(--deco);font-weight:600;
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--g-500)}
.lab.on-pa,.lab-pa{color:var(--g-800)}
/* Small gold headings on paper, including inside a card, where the
   ground is darker and the ratio is tightest. */
h4.lab-pa{color:var(--g-800)}
/* A clause number: the register speaks in numbered articles, not sections. */
.art{font-family:var(--deco);font-weight:500;font-size:.72rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--on-k-4);
  border-bottom:1px solid var(--rule-k-2);padding-bottom:10px;
  margin-bottom:clamp(24px,3vw,40px);display:block}
.pa .art{color:var(--on-pa-4);border-bottom-color:var(--rule-pa)}

/* --------------------------------------------------------------- masthead */
.mast{position:sticky;top:0;z-index:40;background:rgba(10,10,10,.93);
  backdrop-filter:saturate(130%) blur(10px);
  border-bottom:1px solid var(--rule-k)}
.mast-in{display:flex;align-items:center;gap:28px;
  padding-top:14px;padding-bottom:14px}
.wm{display:block;flex:none;text-decoration:none;line-height:0}
.wm img{height:38px;width:auto}
@media (max-width:520px){.wm img{height:30px}}
.mnav{margin-left:auto;display:flex;align-items:center;gap:28px}
.mnav a{font-family:var(--deco);font-weight:400;font-size:.78rem;
  letter-spacing:.17em;text-transform:uppercase;text-decoration:none;
  color:var(--on-k-2);transition:color .16s var(--ease)}
.mnav a:hover,.mnav a[aria-current]{color:var(--g-400)}
/* .mnav a is (0,1,1) and beats .btn-gold at (0,1,0), so a button sitting in
   the nav would inherit the link color and print gold on gold. The button
   classes have to win back inside the masthead. */
.mnav a.btn-gold,.mnav a.btn-gold:hover{color:var(--k-950)}
.mnav a.btn-edge{color:var(--on-k)}
.panel a.btn-gold{color:var(--k-950)}
.burger{display:none;margin-left:auto;background:none;
  border:1px solid var(--k-700);color:var(--on-k);font-family:var(--deco);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:15px}
.panel{display:none;border-top:1px solid var(--rule-k);background:var(--k-950)}
.panel.open{display:block}
.panel .shell{padding-top:12px;padding-bottom:22px;display:grid}
.panel a{font-family:var(--deco);font-size:.86rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--on-k-2);
  padding-top:13px;padding-bottom:13px;border-bottom:1px solid var(--k-800)}
.panel a:last-child{border-bottom:0}
@media (max-width:980px){.mnav{display:none}.burger{display:inline-block}}

/* ----------------------------------------------------------------- button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--deco);font-weight:600;font-size:.78rem;letter-spacing:.19em;
  text-transform:uppercase;line-height:1;text-decoration:none;cursor:pointer;
  border:1px solid transparent;border-radius:0;
  padding-top:17px;padding-bottom:17px;padding-left:30px;padding-right:30px;
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease)}
/* An author display rule outranks the user agent's [hidden] rule, so this has
   to be restated or a hidden button still draws. */
.btn[hidden]{display:none}
.btn-gold{background:var(--g-500);color:var(--k-950);border-color:var(--g-500)}
.btn-gold:hover{background:var(--g-300);border-color:var(--g-300)}
.btn-edge{background:transparent;color:var(--on-k);border-color:var(--k-600)}
.btn-edge:hover{border-color:var(--g-500);color:var(--g-400)}
.pa .btn-edge{color:var(--on-pa);border-color:var(--rule-pa-2)}
.pa .btn-edge:hover{border-color:var(--g-800);color:var(--g-900)}
.btn-ink{background:var(--k-900);color:var(--on-k);border-color:var(--k-900)}
.btn-ink:hover{background:var(--k-750);border-color:var(--k-750)}
.btn-s{font-size:.72rem;padding-top:12px;padding-bottom:12px;
  padding-left:20px;padding-right:20px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ----------------------------------------------------------------- strips */
.pa{background:var(--pa);color:var(--on-pa)}
.pa h1,.pa h2,.pa h3{color:var(--on-pa)}
.sec{padding-top:clamp(66px,8.6vw,128px);padding-bottom:clamp(66px,8.6vw,128px)}
.sec-s{padding-top:clamp(46px,5.6vw,78px);padding-bottom:clamp(46px,5.6vw,78px)}
.lede{font-size:clamp(1.06rem,1.7vw,1.24rem);line-height:1.66;
  color:var(--on-k-2);max-width:62ch}
.pa .lede{color:var(--on-pa-2)}

/* ------------------------------------------------------------------ splits */
/* Two and three column splits, defined here rather than inline on each page.
   An inline grid-template-columns outranks any class rule, so a layout written
   inline cannot be collapsed by a media query and simply squeezes on a phone
   until words break out of their column. These carry their own breakpoints. */
.two{display:grid;gap:clamp(28px,5vw,72px);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.two-wide{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.two-lead{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr)}
.two>*{min-width:0}
@media (max-width:860px){
  .two,.two-wide,.two-lead{grid-template-columns:minmax(0,1fr)}
}
.three{display:grid;gap:clamp(22px,3vw,44px);align-items:start;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.three>*{min-width:0}
@media (max-width:900px){.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.three{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------- full bleed */
/* Photography carries the page rather than sitting in a card. The scrim is a
   gradient rather than a flat wash so the picture stays legible underneath. */
.plate{position:relative;isolation:isolate;overflow:hidden;background:var(--k-950)}
.plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0}
.plate::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(5,5,5,.94) 0%,rgba(5,5,5,.86) 34%,
    rgba(5,5,5,.5) 62%,rgba(5,5,5,.34) 100%)}
.plate>.shell{position:relative;z-index:2}
.plate-r::after{background:linear-gradient(260deg,rgba(5,5,5,.94) 0%,
  rgba(5,5,5,.86) 34%,rgba(5,5,5,.5) 62%,rgba(5,5,5,.34) 100%)}
.plate-c::after{background:linear-gradient(180deg,rgba(5,5,5,.62) 0%,
  rgba(5,5,5,.82) 58%,rgba(5,5,5,.95) 100%)}
@media (max-width:760px){
  .plate::after,.plate-r::after{background:linear-gradient(180deg,
    rgba(5,5,5,.72) 0%,rgba(5,5,5,.88) 46%,rgba(5,5,5,.96) 100%)}
}

/* ------------------------------------------------------------------- door */
.door{padding-top:clamp(96px,15vw,220px);padding-bottom:clamp(72px,11vw,170px)}
.door h1{margin-top:26px;margin-bottom:0}
.door .motto{display:block;margin-bottom:8px}
.door .lede{margin-top:30px}
.door .acts{display:flex;flex-wrap:wrap;gap:15px;margin-top:38px}

/* ------------------------------------------------------------------ rules */
/* The house rules: few, numbered, and set in the book face at reading size. */
.rules{border-top:1px solid var(--rule-k)}
.pa .rules{border-top-color:var(--rule-pa)}
.rule-row{display:grid;grid-template-columns:clamp(62px,8vw,104px) minmax(0,1fr);
  gap:clamp(16px,3vw,40px);border-bottom:1px solid var(--rule-k);
  padding-top:clamp(26px,3vw,38px);padding-bottom:clamp(26px,3vw,38px);
  align-items:start}
.pa .rule-row{border-bottom-color:var(--rule-pa)}
.rule-n{font-family:var(--disp);font-size:clamp(1.9rem,3.4vw,2.9rem);
  color:var(--g-600);line-height:.9}
.pa .rule-n{color:var(--g-700)}
.rule-b h3{margin-bottom:11px}
.rule-b p{color:var(--on-k-2);max-width:64ch}
.pa .rule-b p{color:var(--on-pa-2)}

/* ---------------------------------------------------------------- the coin */
/* The coin is struck with the house mark: the same two dragons that are on the
   door, lifted off the logo plate and set on the gold. It carries no figure,
   because the count is already spelled out in words beside it, so the disc is
   decorative and its image is hidden from assistive technology. */
.coin{width:clamp(84px,9.5vw,124px);height:clamp(84px,9.5vw,124px);flex:none;
  border-radius:50%;border:1px solid var(--g-700);display:grid;
  place-items:center;overflow:hidden;
  background:radial-gradient(circle at 34% 30%,#2A2205 0%,#0D0B03 74%)}
.coin img{width:70%;height:auto;display:block}

/* ------------------------------------------------------------- the register */
/* Memberships are rows in a ruled register, not cards floating on a grid. */
.reg{border-top:2px solid var(--g-700)}
.entry{border-bottom:1px solid var(--rule-pa);
  padding-top:clamp(30px,3.6vw,46px);padding-bottom:clamp(30px,3.6vw,46px)}
.entry-h{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(18px,3vw,42px);align-items:start}
.entry-t h3{font-size:clamp(1.75rem,3.4vw,2.5rem);font-family:var(--disp);
  line-height:1.02}
.entry-t .who{color:var(--on-pa-3);margin-top:9px;max-width:46ch;
  font-size:.98rem}
.entry-p{text-align:right}
.entry-p b{font-family:var(--disp);font-size:clamp(2rem,3.6vw,2.9rem);
  line-height:1;display:block;color:var(--on-pa)}
.entry-p span{font-family:var(--deco);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-pa-4);display:block;margin-top:7px}
.entry-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(22px,3.6vw,56px);margin-top:clamp(20px,2.4vw,30px);align-items:start}
@media (max-width:820px){
  .entry-h{grid-template-columns:minmax(0,1fr)}
  .entry-p{text-align:left}
  .entry-body{grid-template-columns:minmax(0,1fr)}
}
.grants{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.grants li{display:grid;grid-template-columns:15px minmax(0,1fr);gap:13px;
  align-items:start;font-size:.97rem;color:var(--on-pa-2)}
.grants li::before{content:"";width:7px;height:7px;margin-top:9px;
  background:var(--g-600);transform:rotate(45deg)}
.entry-side{border-left:1px solid var(--rule-pa);padding-left:clamp(18px,2.4vw,30px)}
@media (max-width:820px){
  .entry-side{border-left:0;border-top:1px solid var(--rule-pa);
    padding-left:0;padding-top:22px}
}
.marks{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.marks .coin{border-color:var(--g-700);
  background:radial-gradient(circle at 34% 30%,var(--g-200) 0%,var(--g-600) 76%)}
.marks-t{font-size:.92rem;color:var(--on-pa-3);min-width:0}
.entry .btn{margin-top:22px;width:100%}
/* The flag sits in the flow above the entry rather than pinned to a corner:
   absolutely positioned it landed on top of the price, which is the one number
   on the page that must never be obscured. */
.entry.taken::before{content:"Most Purchased";display:block;
  font-family:var(--deco);font-weight:600;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--g-800);margin-bottom:14px}

/* --------------------------------------------------------------- addenda */
.addend{display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  border-bottom:1px solid var(--rule-pa);
  padding-top:20px;padding-bottom:20px}
.addend-b{flex:1 1 280px;min-width:0}
.addend-b b{display:block;font-family:var(--disp);font-size:1.24rem}
.addend-b span{color:var(--on-pa-3);font-size:.93rem}
.addend-p{font-family:var(--disp);font-size:1.4rem;white-space:nowrap}
.qty{display:inline-flex;align-items:center;border:1px solid var(--rule-pa-2)}
.qty button{background:transparent;border:0;cursor:pointer;font-size:1.1rem;
  color:var(--on-pa-2);line-height:1;font-family:var(--book);
  padding-top:11px;padding-bottom:11px;padding-left:15px;padding-right:15px}
.qty button:hover{background:var(--pa-2)}
.qty input{width:54px;border:0;text-align:center;font-family:var(--deco);
  font-size:.95rem;background:transparent;color:var(--on-pa);
  padding-top:11px;padding-bottom:11px}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.qty input[type=number]{-moz-appearance:textfield}

/* ------------------------------------------------------------ the shelf */
/* Members only lines. Held shut until a standing is entered, because the till
   refuses them without one and a button that cannot work is worse than no
   button. */
.shelf{display:grid;gap:clamp(18px,2.2vw,26px);
  grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
@media (max-width:860px){.shelf{grid-template-columns:minmax(0,1fr)}}
.shelf>*{min-width:0}
.item{border:1px solid var(--rule-pa);background:#FBF9F4;
  padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column}
.item h3{font-size:clamp(1.2rem,1.9vw,1.45rem);margin-bottom:9px}
.item p{color:var(--on-pa-2);font-size:.95rem;margin-bottom:18px}
.item .fine{color:var(--on-pa-3);font-size:.85rem;margin-top:-10px;
  margin-bottom:16px}
.item-f{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:auto;padding-top:4px}
.item-p{font-family:var(--disp);font-size:1.55rem;white-space:nowrap}
.item .btn{flex:1 1 auto}
/* Shut: the whole shelf dims and its buttons stop responding. */
.shelf.shut{opacity:.55}
.shelf.shut .btn{pointer-events:none}
.shelf-note{border:1px solid var(--g-700);background:var(--g-100);
  padding-top:16px;padding-bottom:16px;padding-left:18px;padding-right:18px;
  margin-bottom:clamp(22px,2.6vw,32px);font-size:.95rem;color:var(--on-pa-2)}
.shelf-note b{font-family:var(--deco);font-weight:600;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--g-900);
  display:block;margin-bottom:7px}
/* Scope priced work: no button, because the total is not knowable here. */
.scoped{border-top:1px solid var(--rule-pa)}
.scoped-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;
  gap:clamp(14px,2.4vw,32px);align-items:baseline;
  border-bottom:1px solid var(--rule-pa);
  padding-top:20px;padding-bottom:20px}
@media (max-width:760px){
  .scoped-row{grid-template-columns:minmax(0,1fr);gap:6px}
}
.scoped-row b{font-family:var(--disp);font-weight:400;font-size:1.3rem}
.scoped-row .d{color:var(--on-pa-2);font-size:.94rem}
.scoped-row .p{font-family:var(--deco);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-pa-3);white-space:nowrap}

/* -------------------------------------------------------------- the desk */
.bar{position:sticky;bottom:0;z-index:30;background:var(--k-950);
  color:var(--on-k);border-top:1px solid var(--g-800);
  transform:translateY(102%);transition:transform .26s var(--ease)}
.bar.up{transform:translateY(0)}
.bar .shell{display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  padding-top:16px;padding-bottom:16px}
.bar .sum{flex:1 1 240px;min-width:0}
.bar .sum b{font-family:var(--disp);font-size:1.5rem;line-height:1}
.bar .sum i{font-style:normal;color:var(--on-k-3);font-size:1.1rem}
.bar .sum span{display:block;font-family:var(--deco);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-k-3);
  margin-top:6px}
@media (prefers-reduced-motion:reduce){
  .bar{transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ------------------------------------------------------------------ aside */
.aside{border-left:2px solid var(--g-700);padding-left:clamp(18px,2.4vw,28px)}
.aside p{color:var(--on-k-2)}
.pa .aside p{color:var(--on-pa-2)}
.card{border:1px solid var(--rule-k);padding:clamp(22px,2.6vw,32px);
  background:var(--k-850)}
.pa .card{border-color:var(--rule-pa);background:var(--pa-2)}
.card h3{margin-bottom:12px}
.card p{color:var(--on-k-2);font-size:.97rem}
.pa .card p{color:var(--on-pa-2)}

/* ------------------------------------------------------------------ forms */
.field{display:grid;gap:8px;margin-bottom:20px}
.field label{font-family:var(--deco);font-weight:600;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--on-k-3)}
.pa .field label{color:var(--on-pa-3)}
.field input{width:100%;background:var(--k-850);border:1px solid var(--k-700);
  font-family:var(--book);font-size:1rem;color:var(--on-k);border-radius:0;
  padding-top:14px;padding-bottom:14px;padding-left:15px;padding-right:15px}
.pa .field input{background:#FFF;border-color:var(--rule-pa-2);color:var(--on-pa)}
.field input:focus{outline:none;border-color:var(--g-500)}
.msg{display:none;font-size:.95rem;border:1px solid;
  padding-top:14px;padding-bottom:14px;padding-left:16px;padding-right:16px}
.msg.on{display:block}
.msg.bad{background:rgba(110,26,26,.16);border-color:var(--ox-2);color:#F0C6C0}
.pa .msg.bad{background:#F7E9E7;border-color:#D8A79F;color:#7A2019}
.msg.ok{background:rgba(216,172,31,.12);border-color:var(--g-700);
  color:var(--g-200)}
/* The pale gold above is for the dark ground. On paper it lands at 1.02:1,
   which is a message nobody can read. */
.pa .msg.ok{color:var(--g-900)}

/* ------------------------------------------------------------------ table */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
th,td{text-align:left;border-bottom:1px solid var(--rule-k);
  padding-top:14px;padding-bottom:14px;padding-right:20px;vertical-align:top}
.pa th,.pa td{border-bottom-color:var(--rule-pa)}
th{font-family:var(--deco);font-weight:600;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-k-3)}
.pa th{color:var(--on-pa-3)}

/* ------------------------------------------------------------------ prose */
.prose h2{margin-top:48px;margin-bottom:16px;
  font-size:clamp(1.5rem,2.6vw,2.05rem)}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:16px;max-width:70ch}
.prose ul{margin-top:0;margin-bottom:20px;padding-left:20px}
.prose li{margin-bottom:9px;max-width:68ch}
.toc{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.toc a{font-family:var(--deco);font-size:.76rem;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;color:var(--on-pa-3)}
.toc a:hover{color:var(--g-800)}

/* ----------------------------------------------------------------- footer */
.foot{background:var(--k-950);border-top:1px solid var(--rule-k)}
.foot .shell{padding-top:clamp(50px,6vw,80px);padding-bottom:36px}
.foot-top{display:grid;gap:clamp(28px,3.4vw,48px);
  grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr))}
@media (max-width:900px){.foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.foot-top{grid-template-columns:minmax(0,1fr)}}
.foot img.fl{height:52px;width:auto}
.foot h4{color:var(--g-500);margin-bottom:17px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{color:var(--on-k-2);text-decoration:none;font-size:.94rem}
.foot a:hover{color:var(--g-400)}
.foot-blurb{font-size:.94rem;color:var(--on-k-3);max-width:38ch;margin-top:18px}
.foot-btm{border-top:1px solid var(--rule-k);margin-top:42px;padding-top:24px;
  display:grid;gap:13px}
.foot-btm p{font-size:.84rem;color:var(--on-k-4);max-width:92ch}
.badges{display:flex;gap:15px;align-items:center;margin-top:22px}
.badges img{height:40px;width:auto;opacity:.72}

/* ----------------------------------------------------------------- reveal */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
.no-js .rv{opacity:1;transform:none}