/* The document itself: white paper on the dark desk, and what prints.
   Letterhead is opt-in (body.lh-on). Print = the paper only, A4. */

.desk{display:grid;grid-template-columns:300px minmax(0,1fr) 300px;gap:18px;align-items:start}
@media(max-width:1180px){.desk{grid-template-columns:300px minmax(0,1fr)}.desk .side-r{grid-column:1/-1}}
@media(max-width:900px){.desk{grid-template-columns:1fr}}

/* ── the side panels ── */
.side{padding:18px 18px 20px}
.side h3{font-size:1rem;margin-bottom:4px}
.side .calm{font-size:.86rem;color:var(--t2);line-height:1.5;margin-bottom:8px}
.side .step{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700;margin:16px 0 2px}
.side label{display:block;font-size:.78rem;font-weight:600;color:var(--t2);margin:10px 0 5px}
.side input,.side textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--r);color:#fff;font-family:var(--sans);font-size:.92rem;padding:10px 12px;outline:none}
.side input:focus,.side textarea:focus{border-color:var(--accent)}
.side textarea{min-height:64px;resize:vertical}
.side .btn{width:100%;justify-content:center;margin-top:10px}
.side .ok{font-size:.8rem;color:var(--accent);margin-top:8px;min-height:18px}
.side .sw{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.86rem}
.side .sw span{color:var(--t2)}
.tog{position:relative;width:42px;height:24px;border-radius:12px;background:rgba(255,255,255,.15);border:0;cursor:pointer;flex-shrink:0}
.tog::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.tog[aria-checked="true"]{background:var(--accent)}
.tog[aria-checked="true"]::after{transform:translateX(18px)}
@media(min-width:901px){.side-l{position:sticky;top:60px}}
.check{list-style:none;margin:0;padding:0}
.check li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:.88rem;color:var(--t2);padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.check li:last-child{border-bottom:0}
.check li b{color:#fff;font-weight:600;display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:2px;color:var(--accent)}
.check i{width:16px;height:16px;border:1.5px solid var(--line-2);border-radius:4px;margin-top:3px}

/* ── the paper ── */
.paper-wrap{min-width:0}
.paper{background:#fff;color:#161616;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);padding:clamp(28px,4.5vw,64px) clamp(24px,5vw,72px);font-family:var(--sans);font-size:15.5px;line-height:1.6;max-width:820px;margin:0 auto;position:relative}
.paper p{color:#222;margin:0 0 .95em}
.paper h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#444;margin:1.3em 0 .45em;font-weight:700}
.paper ol,.paper ul{margin:0 0 1em 1.3em;color:#222}
.paper li{margin:.3em 0}
.paper .subj{font-weight:700;color:#111;margin:0 0 20px}
.paper .sig{margin-top:1.6em}
.paper .f{background:#fff3c4;border-bottom:1.5px solid #e0a800;color:#5a4300;padding:0 3px;border-radius:2px}
.paper .f.set{background:transparent;border-bottom:1px dotted #999;color:#111}

/* letterhead: hidden unless body.lh-on */
.lh{display:none;margin:0 0 26px}
body.lh-on .lh{display:block}
.lh .row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.lh .mark{display:flex;align-items:center;gap:12px}
.lh .mark svg{width:42px;height:42px;flex-shrink:0}
.lh .name{font-family:Georgia,'Times New Roman',serif;font-size:1.05rem;letter-spacing:.22em;text-transform:uppercase;color:#111;font-weight:700}
.lh .tag{font-size:.7rem;letter-spacing:.06em;color:#555;margin-top:2px}
.lh .ref{font-size:.74rem;color:#333;line-height:1.5;text-align:right;font-family:var(--mono)}
.lh .ref b{color:#111;font-weight:600}
.lh .rule{margin-top:14px;border-top:3px solid #111;position:relative}
.lh .rule::after{content:'';display:block;border-top:1px solid #111;margin-top:2px}
.lh .official{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#666;margin-top:6px}
body.lh-on .plainhead{display:none}
.plainhead{font-size:.78rem;color:#666;margin-bottom:22px;border-bottom:1px solid #ddd;padding-bottom:10px}
.paper .foot{margin-top:40px;padding-top:12px;border-top:1px solid #ccc;font-size:.66rem;color:#666;line-height:1.5}
.paper .foot b{color:#444;font-weight:600}
body:not(.lh-on) .paper .foot .brandline{display:none}

/* ── gallery ── */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 22px}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--t2);padding:7px 14px;border-radius:100px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .2s}
.chip:hover{border-color:var(--line-2);color:#fff}
.chip.on{background:var(--accent);border-color:var(--accent);color:#04120a}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.tcard{display:block;text-decoration:none;border-radius:var(--r-lg);overflow:hidden;transition:transform .25s,border-color .25s}
.tcard:hover{transform:translateY(-3px);border-color:var(--line-2)}
.tcard[hidden]{display:none}
.thumb{background:#fff;aspect-ratio:1/1.1;padding:12% 11% 0;overflow:hidden;position:relative;border-bottom:1px solid var(--line)}
.thumb::after{content:'';position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(transparent,#fff)}
.thumb .th-lh{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6%}
.thumb .th-name{font-family:Georgia,serif;font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:#111;font-weight:700}
.thumb .th-ref{width:22%;height:3px;background:#ddd}
.thumb .th-rule{border-top:2px solid #111;margin-bottom:8%}
.thumb .th-subj{font-size:.62rem;font-weight:700;color:#111;line-height:1.25;margin-bottom:8%}
.thumb .th-line{height:4px;background:#e4e4e4;border-radius:2px;margin-bottom:5%}
.thumb .th-line.s{width:60%}.thumb .th-line.m{width:85%}
.tcard .body{padding:14px 16px 16px}
.tcard .n{font-family:var(--mono);font-size:.68rem;color:var(--t3);letter-spacing:.08em}
.tcard h3{font-size:1rem;margin:6px 0 4px}
.tcard p{font-size:.84rem;color:var(--t2)}
.tcard .meta{margin-top:10px;font-size:.72rem;color:var(--t3)}
.tcard .meta b{color:var(--accent);font-weight:600}

/* ── the picker ── */
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.pick{padding:16px 18px;text-decoration:none;display:block;border-radius:var(--r-lg);transition:border-color .2s,transform .2s}
.pick:hover{border-color:var(--accent);transform:translateY(-2px)}
.pick b{display:block;color:#fff;font-size:.98rem;margin-bottom:4px}
.pick span{font-size:.8rem;color:var(--t2)}

/* ── disclaimers ── */
.disc{font-size:.82rem;color:var(--t2);line-height:1.55}
.disc h3{font-size:.9rem;color:#fff;margin:14px 0 6px}
.disc ul{margin:0 0 0 1.2em}
.disc li{margin:.35em 0}
.disc a{color:#fff}
.disc-mini{font-size:.76rem;color:var(--t3);line-height:1.5;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.disc-mini a{color:var(--t2)}

/* ── print ── */
@media print{
  @page{size:A4;margin:18mm 18mm 16mm}
  html,body{background:#fff!important;color:#000}
  body *{visibility:hidden}
  .paper,.paper *{visibility:visible}
  .paper{position:absolute;left:0;top:0;width:100%;max-width:none;margin:0;padding:0;box-shadow:none;border-radius:0;font-size:11pt}
  .paper .f{background:transparent;border-bottom:0;color:#000;padding:0}
  .paper .f:not(.set){border-bottom:1px solid #000}
  .bar,.side,.check,footer,.hero{display:none!important}
}

@media(max-width:480px){.lh .name{font-size:.82rem;letter-spacing:.14em}.lh .row{gap:12px}.lh .ref{text-align:left}}