/* ==========================================================
   glevit-law.com
   The subject is a document under review, so the page is built
   like one: a reading column with a margin where the review
   happens. The system marks in blue, the lawyer's hand is warm.
   Both accents come from the workflow component.
   ========================================================== */

:root{
  --paper:#FCFCFA;
  --band:#F3F2EE;
  --rule:#E2DFD8;
  --rule-soft:#EDEAE4;

  --ink:#22344A;
  --ink-2:#4A5A6E;
  --muted:#656B77;

  --sys:#EEF3FF;   --sys-2:#DCE6FF;  --sys-line:#C3D2FA;  --sys-ink:#3F5FD8;
  --law:#F7F1E7;   --law-line:#D9C7A6;  --law-ink:#6B5532;
  --ok:#E3F4EA;    --ok-line:#B5DCC6;   --ok-ink:#257048;
  --oth:#FCEDE8;   --oth-line:#EBB4A6;  --oth-ink:#A84A38;

  /* Spectral and Libre Franklin have no Hebrew. The Hebrew faces carry
     a hebrew-only unicode-range (fonts.css), so Latin stays in the first
     face and Hebrew falls through to the second, on both pages. */
  --serif:"Spectral","Frank Ruhl Libre","Iowan Old Style",Georgia,serif;
  --sans:"Libre Franklin","Heebo","Helvetica Neue",Arial,sans-serif;

  --col:clamp(16px,4vw,40px);
  --wrap:1180px;
  --ease:cubic-bezier(.2,.65,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:17.5px;line-height:1.66;
  font-feature-settings:"onum" 1;
  -webkit-font-smoothing:antialiased;
}
/* Frank Ruhl Libre ships 400 and 500 only, and no italic. Without this
   the browser fakes a 600 and slants the Hebrew in italic lines; with
   it, Hebrew takes the nearest real weight and stays upright, while
   the Latin words beside it keep Spectral's true weights and italic. */
[dir="rtl"] body{font-synthesis:none}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--sys-ink);outline-offset:3px;border-radius:1px}

section[id]{scroll-margin-top:76px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--col)}
.band{background:var(--band)}
.sect{padding-block:clamp(64px,8vw,116px)}

h1,h2,h3{font-weight:500;letter-spacing:-.013em;line-height:1.14;text-wrap:balance}
h1{font-size:clamp(2.05rem,4.3vw,3.1rem);line-height:1.1;letter-spacing:-.022em}
/* each sentence of the headline is its own balanced block, so neither
   leaves a single word alone on its last line */
h1 > span{display:block;text-wrap:balance}
h1 > br{display:none}
h2{font-size:clamp(1.72rem,3.4vw,2.5rem)}
h3{font-size:1.1rem;line-height:1.34;letter-spacing:-.008em}
p{max-width:64ch}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.6;color:var(--ink-2)}
.sm{font-size:.9rem;line-height:1.6;color:var(--muted)}
.ui{font-family:var(--sans);font-feature-settings:"tnum" 1}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(252,252,250,.9);
  backdrop-filter:saturate(1.2) blur(9px);box-shadow:0 1px 0 transparent;
  transition:box-shadow .3s}
/* the hairline is a shadow, not a border, so it adds no height: on
   phones the bar is exactly 64px (12 + 40 + 12) */
.top.stuck{box-shadow:0 1px 0 var(--rule)}
/* skip link: off-screen above the bar until it receives keyboard focus.
   It moves on the vertical axis only, so it causes no sideways overflow
   in Hebrew */
.skip{position:absolute;z-index:60;inset-inline-start:12px;top:-64px;
  background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:2px;
  font-size:.9rem;text-decoration:none}
.skip:focus{top:12px}
.top-in{max-width:var(--wrap);margin-inline:auto;padding:14px var(--col);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 1 auto;min-width:0;color:var(--ink)}
.mark-t{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.mark-logo{width:30px;height:30px;flex:none;display:block}
.mark-logo.sm{width:21px;height:21px}
.mark b{font-family:var(--serif);font-size:1.18rem;font-weight:600;letter-spacing:-.02em}
[dir="rtl"] .mark b{letter-spacing:0}
.mark .mark-t > span{font-family:var(--sans);font-size:.72rem;font-weight:500;
  color:var(--muted);letter-spacing:.04em}
.foot-mark{display:flex;align-items:center;gap:9px;color:var(--ink-2)}
.topnav{display:none;gap:clamp(14px,2vw,26px);font-family:var(--sans);font-size:.88rem}
.topnav a{text-decoration:none;color:var(--ink-2);padding-block:4px;
  border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
@media (hover:hover) and (pointer:fine){.topnav a:hover{color:var(--ink);border-bottom-color:var(--ink)}}
@media(min-width:900px){.topnav{display:flex}}
.lang{font-family:var(--sans);font-size:.82rem;color:var(--ink-2);text-decoration:none;
  border:1px solid var(--rule);border-radius:2px;padding:5px 11px;transition:border-color .25s}
@media (hover:hover) and (pointer:fine){.lang:hover{border-color:var(--ink)}}

.btn{display:inline-block;font-family:var(--sans);font-size:.92rem;font-weight:500;
  text-decoration:none;padding:11px 20px;border-radius:2px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);transition:background .25s,border-color .25s}
@media (hover:hover) and (pointer:fine){.btn:hover{background:#16242F;border-color:#16242F}}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
@media (hover:hover) and (pointer:fine){.btn.ghost:hover{background:transparent;border-color:var(--ink)}}
.btn.sm{padding:8px 15px;font-size:.86rem;white-space:nowrap}
/* Narrow phones. The sticky bar must stay one line, 64px or less, with
   the brand, the language switch and the whole button in it. Spacing
   first; below 360px the "Adv." label goes (the link keeps it in its
   aria-label); below 340px the name steps down from 1.18rem to 1rem.
   Nothing changes above 400px. */
@media(max-width:400px){
  .top-in{gap:12px;padding-block:12px}
  .mark{gap:8px}
  .mark-t{gap:7px}
  .lang{padding-inline:8px}
  .btn.sm{padding-inline:10px}
}
@media(max-width:360px){
  .mark .mark-t > span{display:none}
}
@media(max-width:339px){
  .mark b{font-size:1rem}
}

/* ---------- hero: the statement, and a document being marked ---------- */
.hero{padding-block:clamp(52px,8vw,104px) clamp(48px,6vw,86px);
  border-bottom:1px solid var(--rule-soft)}
.hero-in{display:grid;gap:clamp(34px,5vw,60px)}
@media(min-width:1000px){.hero-in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:start;gap:clamp(40px,5vw,72px)}
  .hero .spec{margin-top:clamp(10px,4.4vw,74px)}}
.hero .lead{margin-top:22px;max-width:52ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* phones: a short index of the page under the buttons */
.jump{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:22px;font-size:.92rem}
.jump a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--rule);
  text-underline-offset:4px;padding-block:10px}
@media (hover:hover) and (pointer:fine){.jump a:hover{color:var(--ink);text-decoration-color:var(--ink)}}
@media(min-width:900px){.jump{display:none}}

/* headline: the first sentence set hard in the sans, the second in the serif */
.hero h1 .h-a{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.04}
.hero h1 .h-b{font-family:var(--serif);font-weight:400;color:var(--ink-2);
  font-size:clamp(1.65rem,3.3vw,2.5rem);line-height:1.12;margin-top:.3em;letter-spacing:-.012em}
.hero .lead b{font-weight:500;color:var(--ink)}

/* the eight layers, animated (landing.js). Drawn in a 520 x 500 box that
   landing.js scales to the column; Hebrew mirrors the plates, not the text. */
.lx{position:relative;margin:0;width:100%;max-width:520px;height:500px;overflow:visible}
@media(min-width:1000px){.lx{margin-top:clamp(0px,1.5vw,18px);justify-self:end}}
.lx-box{position:absolute;inset-block-start:0;inset-inline-start:0;width:520px;height:500px;
  transform-origin:top left}
html[dir=rtl] .lx-box{transform-origin:top right}
.lx-plates{position:absolute;inset:0}
html[dir=rtl] .lx-plates{transform:scaleX(-1)}
.lx-pl{position:absolute;left:62px;width:290px;height:115px;
  transform:rotateX(60deg) rotateZ(-45deg);
  border:1.5px solid rgba(58,90,158,.9);background:rgba(21,80,255,.08);
  transition:border-color .35s,background .35s,box-shadow .35s,opacity .35s}
.lx-pl.is-on{border-color:#8FAEFF;background:rgba(21,80,255,.22)}
.lx-pl.is-me{border-color:rgba(227,207,168,.55);background:rgba(227,207,168,.07)}
.lx-pl.is-me.is-on{border-color:#E3CFA8;background:rgba(227,207,168,.30);
  box-shadow:0 0 0 2px rgba(227,207,168,.35),0 0 54px rgba(227,207,168,.45)}
.lx-pl.is-out.is-on{border-color:#1550FF;background:rgba(21,80,255,.55)}
.lx-doc{position:absolute;left:184px;top:-60px;width:46px;height:58px;background:#FCFCFA;
  border-radius:2px;box-shadow:0 12px 30px rgba(0,0,0,.45);z-index:2;
  transition:top .5s cubic-bezier(.4,0,.2,1),opacity .4s}
.lx-doc i{position:absolute;left:8px;right:8px;height:3px;background:#E2DFD8;transition:background .3s}
.lx-doc i:nth-child(1){top:11px;background:#C3D2FA}.lx-doc i:nth-child(2){top:20px}
.lx-doc i:nth-child(3){top:29px}.lx-doc i:nth-child(4){top:38px;right:18px}
.lx-doc.is-rev i:nth-child(2),.lx-doc.is-rev i:nth-child(4){background:#D9A441}
.lx-pen{position:absolute;left:12px;top:6px;width:3px;height:22px;background:#E3CFA8;
  border-radius:2px;transform:rotate(30deg);opacity:0;transition:opacity .2s}
.lx-doc.is-rev .lx-pen{opacity:1;animation:lx-pen .5s ease-in-out infinite alternate}
@keyframes lx-pen{from{left:12px;top:6px}to{left:30px;top:22px}}
.lx-ok{position:absolute;right:-13px;bottom:-10px;width:26px;height:26px;border-radius:50%;
  background:#E3CFA8;display:grid;place-items:center;opacity:0;transform:scale(.4);
  transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.lx-ok svg{width:14px;height:14px;stroke:#061423;stroke-width:2.6;fill:none}
.lx-doc.is-ok .lx-ok{opacity:1;transform:none}
.lx-labels{position:absolute;inset-block-start:0;inset-inline-start:370px;width:150px;height:100%}
.lx-lb{position:absolute;inset-inline-start:0;font-family:var(--sans);font-size:.86rem;
  color:var(--muted);white-space:nowrap;transition:color .3s,opacity .35s}
.lx-lb b{font-weight:600;color:var(--ink-2)}
.lx-lb.is-on{color:var(--ink)}
.lx-lb.is-me.is-on{color:#E3CFA8;font-size:1.05rem}
.lx-lb.is-me.is-on b{color:#E3CFA8}
.lx-badge{display:none;margin-top:6px;width:max-content;font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#061423;background:#E3CFA8;
  padding:5px 9px;border-radius:2px}
html[dir=rtl] .lx-badge{letter-spacing:.02em}
.lx.is-review .lx-rev,.lx.is-approved .lx-app{display:block}
.lx.is-focus .lx-pl:not(.is-me),.lx.is-focus .lx-lb:not(.is-me){opacity:.32}
.lx-pause{position:absolute;inset-block-end:4px;inset-inline-end:4px;width:30px;height:30px;
  border-radius:50%;border:1px solid var(--rule);background:transparent;color:var(--muted);
  display:grid;place-items:center;cursor:pointer;padding:0;opacity:.7}
.lx-pause:hover{opacity:1;color:var(--ink)}
.lx-pause svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.4;fill:none}
.lx-pause .i-g{fill:currentColor;stroke:none}
.lx-pause .i-g,.lx-pause.is-paused .i-p{display:none}
.lx-pause.is-paused .i-g{display:block}
.lx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the four terms of the engagement, as short definitions */
.terms{margin-top:36px;padding-top:24px;border-top:1px solid var(--rule);
  display:grid;gap:20px}
@media(min-width:620px){.terms{grid-template-columns:1fr 1fr;gap:22px clamp(26px,3.4vw,46px)}}
.term b{display:block;font-family:var(--sans);font-weight:600;font-size:.94rem;
  color:var(--ink);letter-spacing:-.005em}
.term span{display:block;margin-top:3px;color:var(--muted);font-size:.88rem;
  line-height:1.5;max-width:30ch}

/* the marked-up clause that sits beside the headline */
.spec{background:#fff;border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 1px 0 rgba(34,52,74,.04);overflow:hidden}
.spec-h{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 18px;border-bottom:1px solid var(--rule-soft);background:#FDFDFC;
  font-family:var(--sans);font-size:.76rem;color:var(--muted)}
.spec-h b{font-weight:600;color:var(--ink-2)}
.spec-b{padding:20px 18px 22px;font-size:.97rem;line-height:1.7}
.clause{color:var(--ink-2)}
.del{color:var(--oth-ink);text-decoration:line-through;text-decoration-thickness:1px}
.ins{color:var(--sys-ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px}
.note{margin-top:16px;padding:12px 14px;border-inline-start:2px solid var(--law-line);
  background:var(--law);border-start-end-radius:3px;border-end-end-radius:3px}
.note p{font-size:.88rem;line-height:1.55;color:var(--law-ink);max-width:none}
.note .who{font-family:var(--sans);font-size:.72rem;font-weight:600;
  color:var(--law-ink);display:block;margin-bottom:3px}
.spec-f{display:flex;align-items:center;gap:9px;padding:10px 18px;
  border-top:1px solid var(--rule-soft);font-family:var(--sans);font-size:.74rem;
  color:var(--muted)}
.chip{border:1px solid var(--rule);border-radius:2px;padding:2px 7px;background:#fff}
.chip.hot{border-color:var(--oth-line);background:var(--oth);color:var(--oth-ink)}

/* ---------- the eight layers ---------- */
.layers-head{max-width:60ch;margin-bottom:clamp(36px,4.5vw,58px)}
.layers-head p{margin-top:16px}

.spine{border-top:1px solid var(--rule)}
.spine-group{margin-top:clamp(26px,3vw,40px);padding-bottom:4px;
  font-size:.8rem;font-weight:600;
  letter-spacing:.02em;color:var(--sys-ink)}
.spine-group:first-child{margin-top:16px}
.spine-group.is-law{color:var(--law-ink)}
/* phones: the six system layers keep their names and one line of
   text; the miniature artifacts are shown on wider screens only, where
   they sit beside the text instead of doubling the length of the page */
@media (max-width:620px){
  .spine > article.lay:not(.lay-7) .lay-a{display:none}
}
#contact{border-top:1px solid var(--rule-soft)}
.lay{display:grid;gap:4px 0;padding-block:clamp(22px,2.8vw,32px);
  border-bottom:1px solid var(--rule-soft);position:relative}
@media(min-width:860px){
  .lay{grid-template-columns:76px minmax(0,1fr) minmax(0,.86fr);
    gap:0 clamp(24px,3vw,46px);align-items:start}
}
.lay-n{font-family:var(--sans);font-size:1.5rem;font-weight:600;color:var(--muted);
  font-feature-settings:"tnum" 1;letter-spacing:-.03em;line-height:1}
.lay.is-law .lay-n{color:var(--law-ink)}
.lay-t h3{margin-bottom:7px}
.lay-t p{font-size:.98rem;line-height:1.62;color:var(--ink-2);max-width:48ch}
.lay-a{margin-top:16px}
@media(min-width:860px){.lay-a{margin-top:0}}

/* the artifacts in the margin: each one is the real thing, small */
.art{background:#fff;border:1px solid var(--rule);border-radius:3px;padding:13px 15px;
  font-family:var(--sans);font-size:.8rem;line-height:1.5;color:var(--ink-2)}
.art.tint-sys{background:#FBFCFF;border-color:var(--sys-line)}
.art.tint-law{background:#FDFBF7;border-color:var(--law-line)}
.art-r{display:flex;align-items:center;gap:9px;padding-block:5px}
.art-r+.art-r{border-top:1px solid var(--rule-soft)}
.tick{flex:none;width:13px;height:13px;border:1px solid var(--sys-line);border-radius:2px;
  background:var(--sys);position:relative}
.tick::after{content:"";position:absolute;left:3.5px;top:1px;width:4px;height:7px;
  border:solid var(--sys-ink);border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
.kv{display:flex;justify-content:space-between;gap:12px;padding-block:5px}
.kv+.kv{border-top:1px solid var(--rule-soft)}
.kv dt{color:var(--muted)}
.kv dd{font-weight:500;color:var(--ink);font-feature-settings:"tnum" 1}
.art q{quotes:none;font-family:var(--serif);font-size:.92rem;line-height:1.55;
  color:var(--ink);display:block}
.art-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.grade{border-radius:2px;padding:2px 7px;font-size:.72rem;font-weight:600;
  border:1px solid var(--oth-line);background:var(--oth);color:var(--oth-ink)}
.calc{font-feature-settings:"tnum" 1;color:var(--ink)}
.calc em{font-style:normal;color:var(--muted)}
.stack{display:grid;gap:7px}
.pill{border:1px solid var(--rule);border-radius:2px;padding:4px 9px;background:#fff;
  font-size:.76rem;color:var(--ink-2)}
.seal{display:flex;align-items:center;gap:10px}
.seal b{font-family:var(--sans);font-weight:600;letter-spacing:.06em;font-size:.78rem;
  color:var(--ok-ink);border:1px solid var(--ok-line);background:var(--ok);
  border-radius:2px;padding:4px 10px}
.who-dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
.who-law{background:var(--law-ink)}

/* layer seven carries the sentence that matters most */
.lay-7{background:linear-gradient(90deg,var(--law) 0%,rgba(247,241,231,0) 72%)}
[dir="rtl"] .lay-7{background:linear-gradient(270deg,var(--law) 0%,rgba(247,241,231,0) 72%)}
/* .lay-t p is more specific than a lone class, so the selector names it */
.draftline,.lay-t p.draftline{font-family:var(--serif);font-style:italic;font-size:clamp(1.18rem,2.3vw,1.6rem);
  line-height:1.32;color:var(--law-ink);max-width:22ch;margin-top:14px}
.spine-note{margin-top:20px;font-size:.84rem;line-height:1.6;color:var(--muted);max-width:70ch}

/* ---------- the process, running ---------- */
.rounds-head{max-width:58ch;margin-bottom:clamp(30px,4vw,48px)}
.rounds-head p{margin-top:15px}
.rr-btn{font-family:var(--sans);font-size:.8rem;color:var(--ink-2);background:#fff;
  border:1px solid var(--rule);border-radius:2px;padding:6px 12px;cursor:pointer;
  transition:border-color .2s,color .2s}
@media (hover:hover) and (pointer:fine){.rr-btn:hover{border-color:var(--ink);color:var(--ink)}}
.rr-btn[disabled]{opacity:.5;cursor:default}


/* ---------- fees and research ---------- */
.money{display:grid;gap:clamp(34px,5vw,64px)}
@media(min-width:980px){.money{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;gap:clamp(40px,5vw,78px)}}
.money h2{max-width:17ch}
[dir="rtl"] .money h2{max-width:21ch}
.fee-n{white-space:nowrap;font-feature-settings:"tnum" 1,"lnum" 1}
.money .lead{margin-top:20px}
.caveat{margin-top:18px;font-size:.84rem;line-height:1.6;color:var(--muted);max-width:52ch}

.pull{font-family:var(--serif);font-size:clamp(1.14rem,2.1vw,1.42rem);line-height:1.46;
  font-style:italic;color:var(--ink);border-top:2px solid var(--ink);padding-top:18px;
  max-width:40ch}
.pull cite{display:block;font-style:normal;font-family:var(--sans);font-size:.8rem;
  line-height:1.55;color:var(--muted);margin-top:14px}
.pull cite a{color:var(--sys-ink)}

/* ---------- confidentiality ---------- */
.guard{display:grid;gap:clamp(30px,4vw,56px)}
@media(min-width:900px){.guard{grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
  gap:clamp(36px,5vw,70px)}}
.guard-list{display:grid;gap:0;border-top:1px solid var(--rule)}
.guard-row{padding-block:18px;border-bottom:1px solid var(--rule-soft)}
.guard-row h3{margin-bottom:6px}
.guard-row p{font-size:.95rem;color:var(--ink-2);max-width:52ch}

/* ---------- about ---------- */
.bio{display:grid;gap:clamp(28px,4vw,48px)}
@media(min-width:800px){.bio{grid-template-columns:minmax(210px,.34fr) minmax(0,1fr);
  gap:clamp(34px,4.5vw,64px);align-items:start}}
/* until the photograph arrives the slot is hidden (the hidden attribute
   on .portrait) and the text takes the full width */
.bio:has(> .portrait[hidden]){grid-template-columns:minmax(0,1fr)}
.bio-t p{max-width:60ch}
.bio-t p+p{margin-top:16px}
.bio-name{font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--ink);
  margin-top:18px;letter-spacing:-.005em}
.bio-name+p{margin-top:12px}
.bio-more{margin-top:22px}
.bio-more a{color:var(--sys-ink)}

/* the portrait slot: the real photograph drops straight in at this
   ratio, so nothing below it moves when it arrives */
.portrait{margin:0;max-width:300px}
.portrait-frame{aspect-ratio:4/5;background:#fff;border:1px solid var(--rule);
  border-radius:3px;display:grid;place-items:center;overflow:hidden}
.portrait-frame svg{width:52%;height:auto;fill:none;stroke:var(--rule);
  stroke-width:4;stroke-linecap:round}
.portrait-frame img{width:100%;height:100%;object-fit:cover;display:block}
.portrait figcaption{margin-top:10px;font-size:.76rem;color:var(--muted)}

/* ---------- contact ---------- */
.contact{display:grid;gap:clamp(32px,4.5vw,60px)}
@media(min-width:900px){.contact{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(40px,5vw,78px);align-items:start}}
.lines{margin-top:30px;border-top:1px solid var(--rule)}
.line{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding-block:14px;border-bottom:1px solid var(--rule-soft);text-decoration:none}
.line span{font-family:var(--sans);font-size:.8rem;color:var(--muted)}
.line b{font-weight:500;font-size:1rem}
@media (hover:hover) and (pointer:fine){.line:hover b{text-decoration:underline;text-underline-offset:3px}}
.cal-note{margin-top:12px;font-family:var(--sans);font-size:.8rem;color:var(--muted)}
.form{display:grid;gap:14px}
.two{display:grid;gap:14px}
@media(min-width:560px){.two{grid-template-columns:1fr 1fr}}
.f label{display:block;font-family:var(--sans);font-size:.8rem;color:var(--muted);
  margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;font:inherit;font-size:1rem;
  background:#fff;border:1px solid var(--rule);border-radius:2px;padding:11px 13px;
  color:var(--ink);transition:border-color .2s}
.f textarea{min-height:112px;resize:vertical;line-height:1.55}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--sys-ink);
  outline:2px solid var(--sys-ink);outline-offset:1px}
.ack{display:flex;gap:11px;align-items:flex-start;padding:14px;background:var(--band);
  border:1px solid var(--rule);border-radius:3px}
.ack input{flex:none;margin-top:2px;width:22px;height:22px;accent-color:var(--sys-ink)}
.ack span{font-size:.85rem;line-height:1.55;color:var(--ink-2)}
.form-msg{margin:0;padding:14px 16px;border:1px solid var(--rule);background:var(--band);
  font-size:.95rem;line-height:1.55;color:var(--ink);outline:none}
.form-msg.ok{border-inline-start:3px solid var(--sys-ink)}
.form-msg.bad{border-inline-start:3px solid #8A2D1F}
.form-msg:focus-visible{outline:2px solid var(--sys-ink);outline-offset:2px}
.form.sent > :not(.form-msg){display:none}

/* ---------- foot ---------- */
.foot{border-top:1px solid var(--rule);padding-block:30px 40px;background:var(--band)}
.foot-in{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:baseline;
  justify-content:space-between;font-family:var(--sans);font-size:.82rem;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:16px}
.foot a{text-decoration:none;display:inline-block;padding-block:8px}
@media (hover:hover) and (pointer:fine){.foot a:hover{text-decoration:underline;text-underline-offset:3px}}

/* phones: running text no smaller than 16px. Captions, chips and the
   miniature artifacts keep their small sizes on purpose. */
@media (max-width:600px){
  .lay-t p,.life-row p,.guard-row p,.mkt p,.note p,.spine-note,.caveat,
  .bio-name,.term span{font-size:1rem}
}

@media (prefers-reduced-motion: reduce){
  .btn,.topnav a,.lang,.line b{transition-duration:.01ms !important}
}

/* ---------- the film ---------- */
/* a play mark points right in both languages */
.film-open::before{content:"";display:inline-block;width:0;height:0;margin-inline-end:9px;
  border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor;
  border-right:0;vertical-align:1px}
.film{width:min(1100px,calc(100vw - 32px),calc((100vh - 120px) * 16 / 9));max-width:none;max-height:calc(100vh - 32px);
  margin:auto;inset:0;padding:0;border:0;border-radius:6px;
  background:#141D28;color:#EDEAE2;overflow:hidden}
.film::backdrop{background:rgba(14,20,28,.82)}
.film-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;font-size:.82rem}
.film-x{background:none;border:1px solid rgba(237,234,226,.4);color:inherit;border-radius:4px;
  padding:6px 12px;min-height:36px;cursor:pointer;font:inherit}
@media (hover:hover) and (pointer:fine){.film-x:hover{border-color:#EDEAE2}}
.film-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.film-v{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}


/* ---------- browser surfaces and touch (2 November 2026) ----------
   The parts the browser draws by default, set from the palette, and
   the touch details that keep a tap from feeling like a website. */
html{-webkit-tap-highlight-color:transparent}
::selection{background:#FFD3BA;color:var(--ink)}
.dk ::selection{background:#FF4F00;color:#fff}
input,textarea,select{caret-color:var(--sys-ink)}
a,button,[role="button"],summary,label{touch-action:manipulation}
.btn,.rr-btn,.lang,.film-open{-webkit-user-select:none;user-select:none}
.btn:active,.rr-btn:active{transform:translateY(1px)}
/* small inline links get a larger hit area without moving the text */
.mkt-notes a,.pull cite a,.guard a,.caveat a{padding-block:10px;display:inline}
.foot a{padding-block:12px}