/* ===========================================================================
   Renvoi — "Deal Document" house style
   Palette, type roles and the hanging clause-numbering motif are the same
   system as the VBU Legal website; everything below is the app layer on top.
   =========================================================================== */

@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/Newsreader-400_500-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/Newsreader-400-italic.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexSans-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexSans-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-500-normal.woff2) format("woff2")}

:root{
  color-scheme: light;
  --ground:#F4F2EC;
  --ground-raised:#EBE7D9;
  --ground-sunk:#EFEDE5;
  --ink:#262420;
  --ink-soft:#6E6852;
  --accent:#2F6B63;
  --accent-strong:#235049;
  --accent-wash:#E4EDEA;
  --on-accent:#F4F2EC;
  --rule:#C9C2AC;
  --rule-soft:#DCD6C4;
  --selection:#CFE1DC;
  --mark:#F3DFA6;
  --shadow:0 18px 50px -24px rgba(38,36,32,.45);

  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --page:1180px;
  --measure:none;
  --gutter:clamp(18px,4vw,48px);
  --header-h:60px;
  --tabbar-h:58px;
  --sidebar-w:310px;
  --ease:cubic-bezier(.2,.7,.2,1);

  --read-size:17px;
  --read-lead:1.62;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#17160F;
    --ground-raised:#201E15;
    --ground-sunk:#131209;
    --ink:#E9E4D3;
    --ink-soft:#C2BA9E;
    --accent:#8FC7B8;
    --accent-strong:#B5DCD1;
    --accent-wash:#22332E;
    --on-accent:#14150F;
    --rule:#6E6852;
    --rule-soft:#6A6450;
    --selection:#2B4640;
    --mark:#5E5121;
    --shadow:0 18px 50px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#17160F;
  --ground-raised:#201E15;
  --ground-sunk:#131209;
  --ink:#E9E4D3;
  --ink-soft:#C2BA9E;
  --accent:#8FC7B8;
  --accent-strong:#B5DCD1;
  --accent-wash:#22332E;
  --on-accent:#14150F;
  --rule:#6E6852;
  --rule-soft:#6A6450;
  --selection:#2B4640;
  --mark:#5E5121;
  --shadow:0 18px 50px -20px rgba(0,0,0,.7);
}

/* Reader text size, driven from Settings */
:root[data-size="s"]{--read-size:15.5px;--read-lead:1.58}
:root[data-size="l"]{--read-size:18.5px;--read-lead:1.66}
:root[data-size="xl"]{--read-size:20.5px;--read-lead:1.7}

*,*::before,*::after{box-sizing:border-box}
/* several components set display on a class; keep [hidden] authoritative */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--selection);color:var(--ink)}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
button{font:inherit;color:inherit}
a{color:var(--accent-strong);text-underline-offset:.18em}

.skip-link{position:fixed;left:-999px;top:0;z-index:100;background:var(--accent);color:var(--on-accent);padding:10px 16px}
.skip-link:focus{left:8px;top:8px}

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;
}

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---------------------------------------------------------------- app bar */
.appbar{
  position:sticky;top:0;z-index:40;
  background:var(--ground); /* opaque unless the browser can actually frost it */
  border-bottom:1px solid var(--rule-soft);
  padding-top:env(safe-area-inset-top);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .appbar{
    background:color-mix(in srgb,var(--ground) 94%,transparent);
    backdrop-filter:saturate(1.3) blur(14px);
    -webkit-backdrop-filter:saturate(1.3) blur(14px);
  }
}
.appbar__row{
  height:var(--header-h);display:flex;align-items:center;gap:10px;
  padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right));
  max-width:calc(var(--page) + var(--sidebar-w));margin-inline:auto;
}
.appbar__spacer{flex:1}

/* The wordmark is the name; nothing is set beside it. Sized by height, because the
   lockup is one line of Newsreader with the § raised above a rule (1074 × 416). */
.brand{display:flex;align-items:center;text-decoration:none;color:inherit;flex:none}
.brand__mark{
  display:block;width:83px;height:32px;
  background:url(brand/wordmark-light.png) no-repeat left center/contain;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand__mark{background-image:url(brand/wordmark-dark.png)}
}
:root[data-theme="dark"] .brand__mark{background-image:url(brand/wordmark-dark.png)}

/* The home control is a real link, so it can be opened in a tab like any other. */
a.iconbtn{text-decoration:none}
a.iconbtn:hover{text-decoration:none}
.iconbtn{
  flex:none;display:grid;place-items:center;width:40px;height:40px;
  background:none;border:1px solid transparent;border-radius:8px;cursor:pointer;
  color:var(--ink-soft);transition:background .16s var(--ease),color .16s var(--ease);
}
.iconbtn:hover{background:var(--ground-raised);color:var(--ink)}
.iconbtn[aria-pressed="true"]{color:var(--accent-strong)}

.langtoggle{display:flex;border:1px solid var(--rule);border-radius:8px;overflow:hidden;flex:none}
.langtoggle__btn{
  background:none;border:0;cursor:pointer;padding:7px 11px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink-soft);
  transition:background .16s var(--ease),color .16s var(--ease);
}
.langtoggle__btn+.langtoggle__btn{border-left:1px solid var(--rule)}
.langtoggle__btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
/* the second column's language: on, but not the one that leads */
.langtoggle__btn[data-second="true"]{background:var(--accent-wash);color:var(--accent-strong)}
#btn-bilingual[aria-pressed="true"]{background:var(--accent-wash);color:var(--accent-strong)}

.card--law{display:block;width:100%;text-align:left;cursor:pointer}
.card--law:hover{border-color:var(--accent)}

.searchbox{position:relative;display:flex;align-items:center}
.searchbox__icon{position:absolute;left:11px;width:17px;height:17px;color:var(--ink-soft);pointer-events:none}
.searchbox input{
  width:100%;font:inherit;font-size:14px;color:var(--ink);
  background:var(--ground-raised);border:1px solid transparent;border-radius:9px;
  padding:9px 12px 9px 35px;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.searchbox input::placeholder{color:var(--ink-soft);opacity:.85}
.searchbox input:focus{outline:none;border-color:var(--accent);background:var(--ground)}
.searchbox--bar{flex:0 1 380px;margin-right:4px}
.appbar__search,.appbar__menu{display:none}

.contextbar{
  display:flex;align-items:baseline;gap:10px;
  padding:7px max(var(--gutter),env(safe-area-inset-left));
  border-top:1px solid var(--rule-soft);
  max-width:calc(var(--page) + var(--sidebar-w));margin-inline:auto;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;
}
.contextbar__crumb{overflow:hidden;text-overflow:ellipsis}
.contextbar__art{
  margin-left:auto;color:var(--accent-strong);font-weight:500;
  /* a button: tap the number you are at to jump to another */
  font:inherit;font-weight:500;letter-spacing:inherit;background:none;border:0;cursor:pointer;
  padding:2px 6px;margin-right:-6px;border-radius:5px;
}
.contextbar__art:hover{background:var(--accent-wash)}
.contextbar__art:empty{display:none}

/* ----------------------------------------------------------------- shell */
.shell{
  display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  max-width:calc(var(--page) + var(--sidebar-w));margin-inline:auto;
  align-items:start;
}
.shell--nonav{grid-template-columns:minmax(0,1fr)}
.shell--nonav>.sidebar{display:none}
.main{
  min-width:0;min-height:60vh;
  padding:clamp(22px,3.4vw,44px) max(var(--gutter),env(safe-area-inset-right)) 96px max(var(--gutter),env(safe-area-inset-left));
}
.main:focus{outline:none}

.sidebar{
  position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top));
  height:calc(100vh - var(--header-h) - env(safe-area-inset-top));
  height:calc(100dvh - var(--header-h) - env(safe-area-inset-top));
  display:flex;flex-direction:column;
  border-right:1px solid var(--rule-soft);
  padding-left:max(var(--gutter),env(safe-area-inset-left));
}
.sidebar__head{display:flex;align-items:center;justify-content:space-between;padding:18px 14px 10px 0}
.sidebar__close{display:none}
.toc{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 10px 40px 0;flex:1}

/* ------------------------------------------------------------ table of contents */
.toc__node{margin:0;min-width:0}
.toc__row{
  display:flex;align-items:flex-start;gap:4px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:6px 7px;border-radius:7px;color:var(--ink);
  transition:background .14s var(--ease);
}
.toc__row:hover{background:var(--ground-raised)}
.toc__row[aria-current="true"]{background:var(--accent-wash)}
.toc__twisty{
  flex:none;width:16px;height:16px;margin-top:2px;color:var(--ink-soft);
  transition:transform .18s var(--ease);
}
.toc__twisty svg{width:16px;height:16px;stroke-width:2}
.toc__row[aria-expanded="true"] .toc__twisty{transform:rotate(90deg)}
.toc__text{flex:1;min-width:0}
.toc__meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.toc__label{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;
}
/* The article range is how people navigate a code they know by number. */
/* No opacity here: small mono text reads weaker than its raw contrast ratio, and
   dimming --ink-soft any further drops it below the house-style floor. */
.toc__range{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;
  color:var(--ink-soft);flex:none;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.toc__row[aria-current="true"] .toc__range{color:var(--accent-strong);opacity:1}
.toc__caption{
  display:block;font-size:13px;line-height:1.36;margin-top:1px;
  overflow-wrap:break-word;
}
.toc__kids{margin-left:9px;padding-left:8px;border-left:1px solid var(--rule-soft);min-width:0}
.toc__node[data-level="1"]>.toc__row .toc__caption{font-family:var(--serif);font-size:15.5px;line-height:1.25}
.toc__node[data-level="1"]>.toc__row .toc__label{color:var(--accent-strong)}
.toc__node[data-level="2"]>.toc__row .toc__caption{font-weight:500}
.toc__node[data-level]:not([data-level="1"]):not([data-level="2"])>.toc__row .toc__caption{font-size:12.5px;color:var(--ink-soft)}
.toc__row[aria-current="true"] .toc__caption{color:var(--ink)}

/* ------------------------------------------------------------------ pieces */
.stack>*+*{margin-top:var(--stack,20px)}
.rule{height:1px;background:var(--rule-soft);border:0;margin:28px 0}

.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  border-radius:9px;padding:10px 16px;cursor:pointer;
  font-size:14px;font-weight:500;border:1px solid transparent;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.btn--solid{background:var(--accent);color:var(--on-accent)}
.btn--solid:hover{background:var(--accent-strong)}
.btn--ghost{background:none;border-color:var(--rule);color:var(--ink-soft)}
.btn--ghost:hover{border-color:var(--ink-soft);color:var(--ink)}
.btn--wide{width:100%}
.btn[disabled]{opacity:.42;cursor:default;pointer-events:none}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:999px;padding:5px 11px;
  background:none;color:var(--ink-soft);cursor:pointer;white-space:nowrap;
}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.card{
  border:1px solid var(--rule-soft);border-radius:14px;background:var(--ground-raised);
  padding:clamp(18px,2.4vw,26px);
}

/* --------------------------------------------------------------- law masthead */
.masthead{padding-bottom:6px}
.masthead__eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.masthead__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,4.6vw,46px);line-height:1.1;letter-spacing:-.012em;margin:0;
}
.masthead__sub{color:var(--ink-soft);font-size:15px;margin:10px 0 0}
.masthead__note{
  margin:16px 0 0;padding:11px 14px;border-left:2px solid var(--accent);
  background:var(--ground-raised);border-radius:0 8px 8px 0;
  font-size:13.5px;line-height:1.5;color:var(--ink-soft);
}

.meta{
  display:grid;gap:0;margin-top:26px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.meta__row{
  display:flex;gap:16px;align-items:baseline;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid var(--rule-soft);
}
.meta__row:last-child{border-bottom:0}
.meta__row--link{
  width:100%;background:none;border:0;border-bottom:1px solid var(--rule-soft);
  cursor:pointer;text-align:left;border-radius:6px;
  transition:background .14s var(--ease);
}
.meta__row--link:hover{background:var(--ground-raised)}
.meta__k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);flex:none;display:flex;gap:10px;align-items:baseline}
.meta__range{
  text-transform:none;letter-spacing:.02em;color:var(--accent-strong);
  font-variant-numeric:tabular-nums;font-size:10.5px;
}
.langbadge{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-soft);
  border:1px solid var(--rule);border-radius:999px;padding:3px 9px;
}
.meta__v{text-align:right;font-size:14.5px}
.meta__v strong{font-weight:500}
.meta__v a{color:var(--accent-strong)}

.updated{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--accent-strong);background:var(--accent-wash);
  border-radius:999px;padding:6px 12px;
}
.updated::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ----------------------------------------------------------------- reading */
.reader{max-width:var(--measure)}
.crumbs{
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--ink-soft);
  line-height:1.7;margin:0 0 18px;
}
.crumbs button{
  background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;
  text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:.22em;
}
.crumbs button:hover{color:var(--ink)}
.crumbs span{opacity:.55;margin:0 6px}

.sectionhead{margin:0 0 26px}
.sectionhead__label{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-strong)}
.sectionhead__range{
  text-transform:none;letter-spacing:.02em;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;margin-left:10px;
}
.sectionhead__alt{
  font-family:var(--serif);font-size:clamp(17px,2.2vw,22px);line-height:1.2;
  color:var(--ink-soft);margin:6px 0 0;
}
.sectionhead__caption{
  font-family:var(--serif);font-weight:400;font-size:clamp(22px,3.2vw,32px);
  line-height:1.16;letter-spacing:-.01em;margin:8px 0 0;
}
.sectionhead__sub{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-soft);
  margin-top:10px;
}

/* The hanging clause number is the house-style signature. */
.article{
  position:relative;
  padding:24px 0 22px;
  border-top:1px solid var(--rule-soft);
  scroll-margin-top:calc(var(--header-h) + 54px);
}
.article:first-of-type{border-top:0;padding-top:6px}
.article__head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.article__num{
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;
  color:var(--accent-strong);
}
/* per-book dates on the front page of a text assembled from several documents */
.meta__dates{display:block;margin-top:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-soft)}

/* an amendment added by VBU Legal ahead of the publisher's consolidation */
.article__supplement{
  margin:.9em 0 0;padding:8px 12px;border-left:2px solid var(--accent);
  background:var(--accent-wash);border-radius:0 6px 6px 0;
  font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--ink-soft);
  text-align:left;hyphens:manual;
}
/* the last wording of an article the new Civil Code repealed */
.article__supplement--historic{border-left-color:var(--ink-soft);background:var(--ground-raised)}
.article__variant{
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--rule);border-radius:999px;padding:2px 8px;
}
.article__tools{margin-left:auto;display:flex;gap:2px;opacity:0;transition:opacity .16s var(--ease)}
.article:hover .article__tools,.article:focus-within .article__tools{opacity:1}
.article__tools .iconbtn{width:32px;height:32px}
.article__tools .iconbtn svg{width:17px;height:17px}
.article__tools .iconbtn[aria-pressed="true"]{color:var(--accent-strong)}
.article__tools .iconbtn[aria-pressed="true"] svg{fill:currentColor}
.article.is-target{animation:flash 1.6s var(--ease)}
@keyframes flash{0%{background:var(--accent-wash)}70%{background:var(--accent-wash)}100%{background:transparent}}

.article__body{
  font-size:var(--read-size);line-height:var(--read-lead);
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;
}
.article__body p{margin:0 0 .72em}
.article__body p:last-child{margin-bottom:0}

/* Hanging §/ordinal markers, set in mono like the rest of the numbering motif.
   The marker box is exactly as wide as the paragraph's negative indent, so the
   first line and every wrapped line start on the same vertical. */
p.has-marker{padding-left:var(--mw,2.6em);text-indent:calc(-1 * var(--mw,2.6em))}
p.has-marker>.marker{display:inline-block;width:var(--mw,2.6em);text-indent:0}
.marker{
  font-family:var(--mono);font-size:.82em;font-weight:500;letter-spacing:.01em;
  color:var(--ink-soft);
}

/* ------------------------------------------------- two languages side by side
   The article number, the badges and the tools are shared — only the bodies split,
   because the numbering is identical across language versions. Columns are aligned
   at the article, never at the paragraph: sentence counts legitimately differ. */
.pair{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,40px);align-items:start;
}
.pair__col{min-width:0}
.pair__lang{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 8px;
}
.pair__missing{color:var(--ink-soft);font-style:italic;font-size:14px;margin:0}

/* On a wide screen one header names the two languages, so the per-article
   labels are redundant; on a narrow screen the columns stack and they are not. */
.pair--head{
  position:sticky;top:calc(var(--header-h) + 34px);z-index:5;
  margin:0 0 4px;padding:8px 0 6px;
  background:var(--ground);border-bottom:1px solid var(--rule);
}
.pair--head .pair__lang{margin:0;color:var(--accent-strong)}
.reader--pair .article .pair__lang{display:none}

@media (max-width:820px){
  .pair{grid-template-columns:1fr;gap:18px}
  .pair--head{display:none}
  .reader--pair .article .pair__lang{display:block}
  .reader--pair .pair__col+.pair__col{
    border-top:1px dashed var(--rule);padding-top:16px;
  }
}

a.xref{
  color:var(--accent-strong);cursor:pointer;
  text-decoration:underline;text-decoration-style:dotted;
  text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent);
  text-underline-offset:.2em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
a.xref:hover{background:var(--accent-wash);text-decoration-style:solid;border-radius:3px}
/* a citation into another act: dashed, so it reads as a step sideways */
a.xref--other{text-decoration-style:dashed}

/* an article's own subject line, as European acts carry ("Subject matter") */
.article__heading{
  font-family:var(--serif);font-size:1.12em;line-height:1.25;
  margin:0 0 .7em;color:var(--ink);
}
.article__num--label{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  max-width:min(100%,52ch);line-height:1.4;
}

/* tables occur in annexes (correlation tables, accounting schedules) */
.article__body table,.sheet__body table{
  width:100%;border-collapse:collapse;margin:.6em 0;
  font-size:.92em;text-align:left;
}
.article__body td,.article__body th,.sheet__body td,.sheet__body th{
  border:1px solid var(--rule-soft);padding:6px 9px;vertical-align:top;
}
.article__body table p,.sheet__body table p{margin:0}
a.ext{color:var(--accent-strong);word-break:break-word}

.pager{display:flex;gap:12px;margin-top:40px;padding-top:22px;border-top:1px solid var(--rule)}
.pager__btn{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;
  background:none;border:1px solid var(--rule-soft);border-radius:11px;
  padding:12px 14px;cursor:pointer;text-align:left;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.pager__btn:hover{border-color:var(--accent);background:var(--ground-raised)}
.pager__btn[disabled]{opacity:.35;cursor:default}
.pager__btn--next{text-align:right;align-items:flex-end}
.pager__dir{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.pager__label{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* ------------------------------------------------------------------ search */
.searchpage{--stack:18px}
.searchpage .searchbox input{font-size:16px;padding:13px 14px 13px 40px}
.searchpage .searchbox__icon{left:14px;width:19px;height:19px}
.filters{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.results{list-style:none;margin:0;padding:0}
.result{border-top:1px solid var(--rule-soft)}
.result:first-child{border-top:0}
.result__btn{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:15px 8px 15px 0;border-radius:8px;
}
.result__btn:hover{background:var(--ground-raised)}
.result__top{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.result__num{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--accent-strong);flex:none}
/* an annex title can be long; a status badge must stay on the line */
.result__num{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result__top .article__variant{flex:none}
.result__crumb{
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.result__snippet{font-size:14.5px;line-height:1.5;color:var(--ink)}
.result__snippet mark{background:var(--mark);color:var(--ink);border-radius:2px;padding:0 1px}

/* A text offered by name rather than an article offered by content. */
.results--laws{margin-bottom:26px;border-bottom:1px solid var(--rule-soft)}
.lawhit__meta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-soft);white-space:nowrap}
.lawhit__title{display:block;font-family:var(--serif);font-size:17px;line-height:1.3;color:var(--ink);margin-bottom:3px}
.results--laws .result__snippet{font-size:13px;color:var(--ink-soft)}
.jumpcard{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent-wash);border-radius:12px;padding:14px 16px;
}
.jumpcard__num{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--accent-strong)}
.jumpcard__hint{font-size:13px;color:var(--ink-soft);margin-left:auto}

.empty{padding:44px 0;text-align:center;color:var(--ink-soft)}
.empty__title{font-family:var(--serif);font-size:21px;color:var(--ink);margin:0 0 6px}
.empty p{margin:0;font-size:14px}
.empty__action{margin-top:18px}

/* ------------------------------------------------------------------- sheet */
.sheet{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center}
.sheet[hidden]{display:none}
.sheet__scrim{position:absolute;inset:0;background:rgba(20,19,14,.42);animation:fade .2s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet__panel{
  position:relative;display:flex;flex-direction:column;
  width:min(660px,calc(100vw - 32px));max-height:min(78vh,760px);
  background:var(--ground);border:1px solid var(--rule);border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden;
  animation:pop .22s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.sheet__grip{display:none}
.sheet__head{
  display:flex;align-items:flex-start;gap:10px;
  padding:16px 14px 12px 20px;border-bottom:1px solid var(--rule-soft);
}
.sheet__titles{min-width:0;flex:1}
.sheet__crumb{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink-soft);
  margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sheet__titlerow{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.sheet__title{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--accent-strong);margin:0;letter-spacing:.04em}
.sheet__langtag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--rule);border-radius:999px;padding:2px 8px;
}
/* the preview is showing a different act, not just a different language */
.sheet__langtag--law{
  color:var(--accent-strong);border-color:var(--accent);background:var(--accent-wash);
}
.sheet__body{
  overflow-y:auto;overscroll-behavior:contain;
  padding:18px 20px 22px;
  font-size:calc(var(--read-size) - .5px);line-height:var(--read-lead);
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;
}
.sheet__body p{margin:0 0 .7em}
.sheet__body p:last-child{margin-bottom:0}
/* Pinning sits on the left of the footer: it keeps the preview, the two on the
   right dismiss it. */
.sheet__pin{margin-right:auto}
.sheet__pin svg{width:16px;height:16px}
.sheet__pin[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-strong)}
.sheet__pin[aria-pressed="true"] svg{fill:currentColor}
.sheet__foot{
  display:flex;gap:10px;justify-content:flex-end;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--rule-soft);background:var(--ground-raised);
}

/* The library is showing what the device kept because the source was unreachable. */
.stale{
  margin:0;padding:11px 14px;border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:8px;background:var(--ground-raised);
  font-size:13px;line-height:1.45;color:var(--ink-soft);
}

/* --------------------------------------------------------- pinned articles */
/* A held provision floats over the text being read; it must never take the whole
   screen, so every pin can be folded to its title and the board itself scrolls. */
.pins{
  position:fixed;z-index:65;
  right:max(14px,env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom));
  width:min(390px,calc(100vw - 28px));
  max-height:min(74vh,740px);
  display:flex;flex-direction:column;gap:9px;
  overflow-y:auto;overscroll-behavior:contain;
  padding:3px;                         /* room for the cards' own shadow */
}
.pin{
  flex:none;background:var(--ground);border:1px solid var(--rule);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;animation:pop .18s var(--ease);
}
.pin__head{
  display:flex;align-items:center;gap:2px;
  padding:4px 5px 4px 7px;
  background:var(--ground-raised);border-bottom:1px solid var(--rule-soft);
}
.pin--collapsed .pin__head{border-bottom:0}
.pin__toggle{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  background:none;border:0;cursor:pointer;padding:6px 2px;text-align:left;
}
.pin__twisty{
  width:15px;height:15px;flex:none;color:var(--ink-soft);
  transform:rotate(90deg);transition:transform .16s var(--ease);
}
.pin--collapsed .pin__twisty{transform:none}
.pin__title{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--accent-strong);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pin__tag{
  margin-left:auto;flex:none;max-width:48%;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--rule);border-radius:999px;padding:2px 7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pin__btn{width:30px;height:30px}
.pin__btn svg{width:16px;height:16px}
.pin__body{
  max-height:min(36vh,360px);overflow-y:auto;overscroll-behavior:contain;
  padding:12px 15px 14px;
  font-size:calc(var(--read-size) - 1.5px);line-height:var(--read-lead);
  hyphens:auto;-webkit-hyphens:auto;
}
.pin__body p{margin:0 0 .6em}
.pin__body p:last-child{margin-bottom:0}
.pin__body .article__heading{margin-top:0}

/* ------------------------------------------------------- go to article */
.goto{position:fixed;inset:0;z-index:75;display:flex;justify-content:center;align-items:flex-start}
.goto[hidden]{display:none}
.goto__scrim{position:absolute;inset:0;background:rgba(20,19,14,.42);animation:fade .18s var(--ease)}
.goto__panel{
  position:relative;margin-top:max(12vh,calc(var(--header-h) + 24px));
  width:min(520px,calc(100vw - 32px));max-height:min(70vh,560px);
  display:flex;flex-direction:column;
  background:var(--ground);border:1px solid var(--rule);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;animation:pop .2s var(--ease);
}
.goto__form{padding:16px 16px 12px;border-bottom:1px solid var(--rule-soft)}
.goto__label{
  display:block;margin:0 0 9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.goto__field{
  display:flex;align-items:center;gap:8px;
  background:var(--ground-raised);border:1px solid var(--rule);border-radius:10px;padding:4px 4px 4px 12px;
}
.goto__field:focus-within{border-color:var(--accent);background:var(--ground)}
.goto__prefix{font-family:var(--mono);font-size:15px;color:var(--ink-soft);flex:none}
.goto__field input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  /* 16px or more, so iOS does not zoom the page when the field takes focus */
  font-family:var(--mono);font-size:17px;font-weight:500;color:var(--accent-strong);
  padding:8px 0;letter-spacing:.02em;
}
.goto__field input::placeholder{color:var(--ink-soft);font-weight:400;opacity:.8}
.goto__go{flex:none;padding:9px 16px}
.goto__list{list-style:none;margin:0;padding:6px;overflow-y:auto;overscroll-behavior:contain}
.goto__list:empty{display:none}
.goto__item{
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px;row-gap:2px;
  padding:10px 12px;border-radius:9px;cursor:pointer;
}
.goto__item[aria-selected="true"]{background:var(--accent-wash)}
.goto__item:hover{background:var(--ground-raised)}
.goto__item[aria-selected="true"]:hover{background:var(--accent-wash)}
.goto__num{font-family:var(--mono);font-size:13.5px;font-weight:500;color:var(--accent-strong);white-space:nowrap}
.goto__item .article__variant{justify-self:start}
.goto__snippet{
  grid-column:1 / -1;font-size:13.5px;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.goto__msg{margin:0;padding:10px 18px 14px;font-size:13px;color:var(--ink-soft)}
.goto__msg:empty{display:none}
.goto__msg--none{color:var(--ink)}

/* --------------------------------------------------------------- tab bar */
.tabbar{display:none}

/* ---------------------------------------------------------------- toast */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(22px + env(safe-area-inset-bottom));z-index:90;
  background:var(--ink);color:var(--ground);
  border-radius:10px;padding:11px 16px;font-size:13.5px;
  box-shadow:var(--shadow);max-width:calc(100vw - 32px);
  display:flex;align-items:center;gap:14px;
}
.toast[hidden]{display:none}
.toast button{
  background:none;border:0;cursor:pointer;padding:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);
}

/* ------------------------------------------------------------- settings */
.setting{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--rule-soft);
}
.setting:last-child{border-bottom:0}
.setting__label{font-size:14.5px}
.setting__hint{font-size:12.5px;color:var(--ink-soft);margin-top:3px;max-width:44ch}
/* the device cannot do what this setting offers, and says why */
.setting__hint--no{color:var(--ink);max-width:52ch}
.segmented{display:flex;border:1px solid var(--rule);border-radius:9px;overflow:hidden;flex:none}
.segmented button{
  background:none;border:0;cursor:pointer;padding:8px 12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
}
.segmented button+button{border-left:1px solid var(--rule)}
.segmented button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}

.disclaimer{
  margin-top:40px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:12px;line-height:1.65;color:var(--ink-soft);
}
.disclaimer p{margin:0 0 8px}
.disclaimer p:last-child{margin-bottom:0}

/* skeleton while the code is loading */
.loading{padding:60px 0;text-align:center;color:var(--ink-soft)}
.loading__bar{
  width:min(280px,70vw);height:3px;margin:18px auto 0;border-radius:2px;
  background:var(--rule-soft);overflow:hidden;
}
.loading__fill{height:100%;background:var(--accent);width:0;transition:width .3s var(--ease)}

/* A page that arrived with its text already in it says so with a hairline, not a panel. */
.pageload{position:fixed;inset:0 0 auto 0;height:2px;z-index:120;pointer-events:none}
.pageload__fill{height:100%;width:0;background:var(--accent);transition:width .25s var(--ease)}
@media (prefers-reduced-motion:reduce){.pageload__fill{transition:none}}

/*
 * An advertising slot. Below the section, never between articles; always labelled;
 * always the height it will be, so nothing under it moves when it fills. Quiet enough
 * that it reads as part of the page furniture rather than as an interruption.
 */
.adslot{display:block;margin:34px 0 0;padding:10px 0 0;border-top:1px solid var(--rule)}
.adslot[data-ad="top"]{margin:4px 0 30px;padding:0;border-top:0}
.adslot__label{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
/*
 * A slot nothing went into keeps its space and shows nothing at all — no label, no
 * frame, no rule. A reader who refused advertising, or who blocks it, sees what looks
 * like slightly generous spacing rather than the hole where an ad was going to be; and
 * because the space does not disappear, nothing on the page moves when the answer comes
 * back empty. That matters most for the slot above the first article, where collapsing
 * would drag the whole text up under the reader's eyes.
 */
.adslot[data-empty]{border-top-color:transparent}
.adslot[data-empty] .adslot__label{visibility:hidden}
.adslot[data-empty] .adslot__frame{background:none}
/* One reserved height at every width: both ad units are shorter, so nothing moves. */
.adslot__frame{min-height:100px;display:flex;align-items:center;justify-content:center;
  background:var(--ground-sunk);border-radius:6px;overflow:hidden}

/* ======================================================= mobile / tablet */
@media (max-width:1000px){
  :root{--header-h:54px}
  .shell{grid-template-columns:minmax(0,1fr)}
  .appbar__menu,.appbar__search{display:grid}
  .searchbox--bar{display:none}

  .sidebar{
    position:fixed;inset:0 auto 0 0;z-index:60;width:min(330px,86vw);height:100%;
    background:var(--ground);border-right:1px solid var(--rule);
    transform:translateX(-102%);transition:transform .26s var(--ease);
    padding-left:env(safe-area-inset-left);padding-top:env(safe-area-inset-top);
    box-shadow:none;
  }
  .sidebar.is-open{transform:none;box-shadow:var(--shadow)}
  .sidebar__head{padding:14px 10px 10px 16px}
  .sidebar__close{display:grid}
  .toc{padding-left:8px}
  .scrim{position:fixed;inset:0;z-index:55;background:rgba(20,19,14,.42);animation:fade .2s var(--ease)}
  .scrim[hidden]{display:none}

  .main{padding-bottom:calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom))}

  .tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:grid;grid-template-columns:repeat(4,1fr);
    background:var(--ground);
    border-top:1px solid var(--rule-soft);
    padding-bottom:env(safe-area-inset-bottom);
  }
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .tabbar{
      background:color-mix(in srgb,var(--ground) 95%,transparent);
      backdrop-filter:saturate(1.3) blur(14px);
      -webkit-backdrop-filter:saturate(1.3) blur(14px);
    }
  }
  .tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    height:var(--tabbar-h);background:none;border:0;cursor:pointer;
    color:var(--ink-soft);font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  }
  .tab svg{width:21px;height:21px}
  .tab[aria-current="true"]{color:var(--accent-strong)}
  .tab[aria-current="true"] svg{stroke-width:2}

  /* the cross-reference preview becomes a bottom sheet */
  .sheet{align-items:flex-end}
  .sheet__panel{
    width:100%;max-height:86dvh;border-radius:18px 18px 0 0;border-bottom:0;
    animation:rise .26s var(--ease);
  }
  @keyframes rise{from{transform:translateY(100%)}to{transform:none}}
  .sheet__grip{
    display:block;width:38px;height:4px;border-radius:2px;background:var(--rule);
    margin:9px auto 0;flex:none;
  }
  .sheet__head{padding:10px 8px 11px 18px}
  .sheet__foot{padding-bottom:calc(12px + env(safe-area-inset-bottom))}

  /* On a phone the pins sit across the foot of the screen, clear of the tab bar. */
  .pins{
    left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));
    bottom:calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom));
    width:auto;max-height:min(56dvh,560px);gap:8px;
  }
  /* the text being read keeps the upper half of a phone screen */
  .pin__body{max-height:28dvh}
  .sheet__foot{flex-wrap:wrap}
  .sheet__pin{order:3;margin-right:0;width:100%}

  .goto__panel{margin-top:calc(env(safe-area-inset-top) + 12px);max-height:calc(100dvh - 24px - env(safe-area-inset-top))}
  .article__tools{opacity:1}
  .meta__row{flex-direction:column;align-items:flex-start;gap:3px}
  .meta__v{text-align:left}
}

@media (max-width:560px){
  .article__body,.sheet__body{text-align:left;hyphens:auto}
  .pager{flex-direction:column}
}

/*
 * The app bar holds the brand, home, the table of contents, go-to-article, up to four
 * language chips and the settings, and a European text really does put three chips in
 * it. The full bar needs 541 pixels, which no phone has, so it gives way in three
 * measured steps rather than scrolling sideways or clipping its last control.
 *
 * What gives way first is only ever a control that can be reached another way:
 *
 *   search       — the tab bar at the bottom of every phone screen has it;
 *   side by side — on a phone the two versions stack one under the other rather than
 *                  sitting beside each other, and the switch is in the settings.
 *
 * Everything reachable only from this bar — home, contents, go-to-article, the
 * languages, the settings — stays in it at every width.
 */
@media (max-width:559px){
  .appbar__search{display:none}
  #btn-bilingual{display:none}
}

@media (max-width:479px){
  .appbar__row{gap:4px}
  .iconbtn{width:36px;height:36px}
  .iconbtn svg{width:20px;height:20px}
  .brand__mark{width:67px;height:26px}
  .langtoggle__btn{padding:7px 8px;font-size:11px;letter-spacing:.06em}
}

/* The narrowest phones still in use (320px), with three languages open. */
@media (max-width:360px){
  .brand__mark{width:52px;height:20px}
  .langtoggle__btn{padding:6px 6px;font-size:10px;letter-spacing:.04em}
}


@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media print{
  .appbar,.sidebar,.tabbar,.sheet,.pins,.pager,.toast,.article__tools,.scrim{display:none!important}
  .shell{display:block}
  .main{padding:0}
  body{background:#fff;color:#000}
}

/* ------------------------------------------------- generated pages (prerender)
   What a search engine and a link preview see before the app takes over. It uses the
   reader's own article styles; only the frame around them is defined here. */
.prerender{max-width:var(--page);margin-inline:auto;padding:26px var(--gutter) 60px}
.prerender h1{font-family:var(--serif);font-weight:500;font-size:clamp(23px,3.2vw,31px);margin:10px 0 6px}
.prerender h2{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:400;margin:34px 0 10px}
.prerender__trail,.prerender__range{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-soft);margin:0 0 4px;
}
.prerender__toc{list-style:none;margin:0;padding:0}
.prerender__toc li{padding:7px 0;border-bottom:1px solid var(--rule-soft);font-size:14.5px}
.prerender__toc a{text-decoration:none}
.prerender__toc a:hover{text-decoration:underline}
.prerender__nav{
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  margin-top:40px;padding-top:16px;border-top:1px solid var(--rule-soft);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
}

/* ------------------------------------------------------------------ library
   Twenty texts read as a list of fields, not a list of acts. The chips narrow the
   page to one field; the sections carry the same eyebrow as every other heading. */
.libfilter{
  display:flex;flex-wrap:wrap;gap:7px;
  padding-bottom:4px;margin-bottom:2px;
}
.libfilter .chip{cursor:pointer}
.chip__n{
  font-family:var(--mono);font-size:10px;opacity:.65;margin-left:5px;
}
.chip[aria-pressed="true"] .chip__n{opacity:.9}

.libgroup{margin:0}
.libgroup[hidden]{display:none}
.libgroup__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:26px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--rule-soft);
  font-weight:400;
}
.libgroup:first-of-type .libgroup__head{margin-top:14px}
.libgroup__n{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);flex:none;
}
.libgroup__cards{display:grid;gap:12px}
/* Two abreast once there is room; the single-text fields then sit beside each other. */
@media (min-width:900px){
  .libgroup__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.langbadge{white-space:nowrap}

/* On a phone the chips would take five rows before the first text; one scrolling row
   keeps the library itself above the fold. The sections below are the real structure. */
@media (max-width:700px){
  .libfilter{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;padding-bottom:6px;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  }
  .libfilter::-webkit-scrollbar{display:none}
  .libfilter .chip{flex:none}
  .libgroup__cards{gap:10px}
}

/* ---------------------------------------------------------------- colophon */
.colophon__block{margin-top:26px;max-width:72ch}
.colophon__block .eyebrow{display:block;margin-bottom:7px}
.colophon__block p{margin:0 0 .6em;font-size:14.5px;line-height:1.6}

/* The request form. Same measure as the colophon, so the page reads as one column. */
.contact{max-width:72ch;margin-top:26px}
.field{margin:0 0 18px}
.field__label{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px}
.field__optional{text-transform:none;letter-spacing:0;font-size:12.5px;opacity:.8}
.field__optional::before{content:" — "}
.field__input{
  width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--ink);
  background:var(--ground-sunk);border:1px solid var(--rule);border-radius:9px;
  padding:10px 12px;
}
.field__input:focus{outline:none;border-color:var(--accent);background:var(--ground)}
.field__input--area{resize:vertical;min-height:9em;line-height:1.55}
.field__hint{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--ink-soft)}
/* The field a person never sees and a robot fills in. */
.contact__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact__privacy{margin:0 0 18px;font-size:13px;line-height:1.55;color:var(--ink-soft);
  border-left:2px solid var(--rule-soft);padding-left:12px}
.contact__actions{display:flex;gap:10px;align-items:center}
.contact__status{margin:12px 0 0;font-size:14px;min-height:1.4em}
.contact__status[data-kind="good"]{color:var(--accent-strong)}
.contact__status[data-kind="bad"]{color:var(--ink)}
.contact__direct{margin:18px 0 0;font-size:13.5px;color:var(--ink-soft)}
.contact__note{margin:26px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-soft);max-width:72ch}

/* What is kept on the device, set as a plain table rather than prose. */
.storage{width:100%;border-collapse:collapse;margin:8px 0 0;font-size:13.5px}
.storage th{
  text-align:left;font-family:var(--sans);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:500;
  padding:0 14px 7px 0;border-bottom:1px solid var(--rule);
}
.storage td{padding:10px 14px 10px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top;line-height:1.5}
.storage tr td:last-child,.storage tr th:last-child{padding-right:0}
.storage__basis{margin:18px 0 0;font-size:13px;line-height:1.6;color:var(--ink-soft);max-width:72ch}
@media (max-width:640px){
  .storage,.storage tbody,.storage tr,.storage td{display:block;width:100%}
  .storage thead{display:none}
  .storage tr{padding:12px 0;border-bottom:1px solid var(--rule-soft)}
  .storage td{border:0;padding:2px 0}
  .storage td:first-child{font-weight:500;color:var(--ink)}
  .storage td:not(:first-child){color:var(--ink-soft);font-size:13px}
}

/*
 * The consent bar. It sits over the page rather than across it: the reader can go on
 * reading while they decide, which is the honest arrangement when the thing being asked
 * about is advertising and not the text. Refuse and accept are one pair, same size,
 * same place — a refusal that costs more than an acceptance is not freely given.
 */
.consent{
  position:fixed;inset:auto 0 0 0;z-index:130;padding:0 16px 16px;
  display:flex;justify-content:center;pointer-events:none;
}
.consent__panel{
  pointer-events:auto;width:min(560px,100%);box-sizing:border-box;
  background:var(--ground-raised);border:1px solid var(--rule);border-radius:14px;
  padding:20px 22px;box-shadow:var(--shadow);
}
.consent__title{font-family:var(--serif);font-size:19px;margin:0 0 8px;color:var(--ink)}
.consent__body{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.consent__purposes{list-style:none;margin:12px 0;padding:0;display:grid;gap:10px}
.consent__purposes label{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5}
.consent__purposes strong{display:block;color:var(--ink);font-weight:500}
.consent__more{margin:10px 0 16px;font-size:13px}
.consent__actions{display:flex;gap:10px}
.consent__actions .btn{flex:1}
@media (max-width:520px){
  .consent{padding:0 10px 10px}
  .consent__panel{padding:18px}
}

/* Where the text on a page comes from, and on what terms it may be shown. */
.srcnote{
  margin-top:34px;padding-top:14px;border-top:1px solid var(--rule-soft);
  font-size:12px;line-height:1.55;color:var(--ink-soft);max-width:80ch;
}
.srcnote p{margin:0 0 .35em}
.srcnote a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule)}
.srcnote a:hover{color:var(--ink)}