/* playa1one.com — "Saiz A": ISO 216 paper system + print-and-copy counter.
   Ream-wrapper petrol, sheet white, toner ink, scan-light lime. Hubot Sans (display, width axis) + Google Sans Flex (text) + Ubuntu Sans Mono (spec labels). */
:root{
  --ground:#EFEEE7;--ground-2:#E6E4DB;--sheet:#FFFFFC;--edge:#E1DED3;--rule:#C8C4B6;
  --ink:#15181B;--ink-2:#353A40;--muted:#555B62;
  --petrol:#0E4A57;--petrol-d:#093640;--petrol-dd:#06232A;--petrol-l:#DCE8E6;--on-petrol:#E9F1EF;--on-petrol-2:#B7CFCC;
  --lime:#CFEA4B;--lime-d:#A3BF24;--lime-l:#EEF7C4;--red:#B8322A;--dim:#6C84A0;
  --focus:#0E4A57;--hh:74px;--max:1240px;--gut:clamp(16px,4vw,40px);
  --f-d:"Hubot Sans","Arial Narrow",system-ui,sans-serif;--f-b:"Google Sans Flex",system-ui,-apple-system,"Segoe UI",sans-serif;--f-m:"Ubuntu Sans Mono",ui-monospace,Menlo,Consolas,monospace;
  --heading:var(--ink);--text:var(--ink-2);--surface:var(--sheet);--primary:var(--petrol);--accent:var(--lime);--font-head:var(--f-d);--font-body:var(--f-b);
  color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--text);font:400 17px/1.68 var(--f-b);font-optical-sizing:auto;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--petrol);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink);text-decoration-color:var(--lime-d);text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
h1,h2,h3{color:var(--heading);font-family:var(--f-d);margin:0;text-wrap:balance}
p{margin:0 0 1em}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--lime);color:var(--ink);padding:12px 18px;font:700 16px/1 var(--f-b);text-decoration:none}
.skip:focus{top:12px}

/* ISO nesting diagram */
.iso{overflow:visible}
.iso rect{fill:none;stroke:currentColor;stroke-width:1.1;vector-effect:non-scaling-stroke}
.iso rect.fr{stroke-width:1.8}
.iso rect.on{fill:var(--hi,var(--lime))}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 22px;border:0;border-radius:2px;font:750 17px/1.1 var(--f-d);font-stretch:108%;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,background-color .15s}
.btn:hover{text-decoration:none}
.st{flex:none;width:11px;height:11px;border:2px solid currentColor;transform:rotate(45deg)}
.btn-lime{background:var(--lime);color:var(--ink);box-shadow:inset 0 -4px 0 var(--lime-d)}
.btn-lime:hover{background:#D9F162;color:var(--ink)}
.btn-lime .st{background:var(--ink);border-color:var(--ink)}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--sheet)}
.btn-ink{background:var(--ink);color:var(--sheet)}
.btn-ink .st{border-color:var(--lime);background:var(--lime)}
.btn-ink:hover{background:var(--petrol);color:var(--sheet)}
@media (prefers-reduced-motion:no-preference){.btn:active{transform:translateY(2px)}}

/* ============ header: ream wrapper ============ */
.wrap{position:sticky;top:0;z-index:50;background:var(--petrol);color:var(--on-petrol);--focus:var(--lime);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px)}
.wrap-in{max-width:var(--max);margin:0 auto;padding:10px var(--gut);display:flex;align-items:center;gap:10px;min-height:66px;position:relative}
.brand{display:flex;align-items:center;gap:10px;min-height:46px;padding:5px 12px 5px 8px;background:var(--sheet);color:var(--ink);text-decoration:none;flex:none;
  box-shadow:3px 3px 0 var(--petrol-dd)}
.brand:hover{color:var(--ink);text-decoration:none}
.iso-b{width:40px;height:auto;color:var(--ink);--hi:var(--lime)}
.brand-t{display:grid;line-height:1}
.brand-n{font:800 22px/1 var(--f-d);font-stretch:125%;letter-spacing:-.01em}
.brand-s{font:500 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.menu-btn{order:3;margin-left:0;display:inline-flex;align-items:center;gap:9px;min-height:46px;min-width:46px;padding:0 14px;background:transparent;color:var(--on-petrol);
  border:1.5px solid rgba(233,241,239,.55);border-radius:2px;font:600 15px/1 var(--f-b);cursor:pointer}
.menu-btn:hover{border-color:var(--lime)}
.mi{display:grid;gap:6px;width:20px}
.mi i{display:block;height:2px;background:currentColor;transition:transform .2s}
.wrap.is-open .mi i:first-child{transform:translateY(4px) rotate(45deg)}
.wrap.is-open .mi i:last-child{transform:translateY(-4px) rotate(-45deg)}
.lsw{order:2;margin-left:auto;display:flex;border:1.5px solid rgba(233,241,239,.55);border-radius:2px}
.lsw a{display:grid;place-items:center;min-width:44px;min-height:43px;padding:0 8px;color:var(--on-petrol);font:600 13px/1 var(--f-m);letter-spacing:.06em;text-decoration:none}
.lsw a+a{border-left:1.5px solid rgba(233,241,239,.55)}
.lsw a[aria-current]{background:var(--sheet);color:var(--ink)}
.lsw a:not([aria-current]):hover{background:var(--petrol-d);color:var(--lime)}
.wrap-cta{display:none}
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--sheet);color:var(--ink);padding:6px var(--gut) 20px;
  box-shadow:0 1px 0 var(--rule),0 3px 0 var(--sheet),0 4px 0 var(--rule),0 6px 0 var(--sheet),0 7px 0 var(--rule),0 24px 40px -20px rgba(6,35,42,.45);max-height:calc(100vh - 80px);overflow:auto}
.wrap.is-open .nav{display:block}
.nav ul{list-style:none;margin:0;padding:0}
.nav li a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--edge);color:var(--ink);font:650 18px/1.2 var(--f-d);font-stretch:105%;text-decoration:none}
.nav li a[aria-current]{box-shadow:inset 6px 0 0 var(--lime);padding-left:16px}
.nav li a:hover{color:var(--petrol)}
.nav-play{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;min-height:52px;background:var(--lime);color:var(--ink);font:750 17px/1 var(--f-d);text-decoration:none;box-shadow:inset 0 -4px 0 var(--lime-d)}
.nav-play:hover{color:var(--ink);text-decoration:none}
.edges{height:9px;background:repeating-linear-gradient(to bottom,var(--sheet) 0 1px,var(--edge) 1px 2px);box-shadow:0 1px 0 var(--rule)}
@media (max-width:359px){.brand-s{display:none}.brand{padding-right:10px}.brand-n{font-size:20px}.menu-btn .mt{display:none}.menu-btn{padding:0 12px}}
@media (min-width:980px){
  .menu-btn{display:none}
  .nav{display:block;position:static;background:none;padding:0;box-shadow:none;max-height:none;overflow:visible;margin-left:8px}
  .nav ul{display:flex;flex-wrap:wrap;gap:0 2px}
  .nav li a{min-height:46px;padding:0 10px;border:0;color:var(--on-petrol);font:600 15px/1.1 var(--f-b);position:relative}
  .nav li a[aria-current]{box-shadow:inset 0 -4px 0 var(--lime);padding-left:10px;color:#fff}
  .nav li a:hover{color:var(--lime)}
  .nav-play{display:none}
  .lsw{order:0}
}
@media (min-width:1200px){
  .wrap-cta{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 16px;background:var(--lime);color:var(--ink);font:750 15px/1 var(--f-d);font-stretch:108%;text-decoration:none;box-shadow:inset 0 -3px 0 var(--lime-d);border-radius:2px}
  .wrap-cta .st{width:9px;height:9px;background:var(--ink);border-color:var(--ink)}
  .wrap-cta:hover{background:#D9F162;color:var(--ink);text-decoration:none}
}

/* ============ home: the A0 sheet ============ */
.a0{padding:clamp(20px,4vw,48px) var(--gut) clamp(28px,5vw,56px);container:a0/inline-size}
.a0-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1.5px;padding:1.5px;background:var(--ink);position:relative;
  box-shadow:5px 5px 0 -1px var(--sheet),5px 5px 0 0 var(--rule),10px 10px 0 -1px var(--sheet),10px 10px 0 0 var(--rule)}
.pc{position:relative;background:var(--sheet);padding:22px 18px 20px;min-width:0}
.sz{position:absolute;top:10px;right:12px;font:500 12px/1 var(--f-m);letter-spacing:.1em;color:var(--muted)}
.pc1{grid-column:1/-1;padding:clamp(28px,5vw,64px) clamp(18px,4.5vw,56px) clamp(26px,4vw,48px)}
.kick{display:inline-block;margin:0 0 18px;padding:6px 10px;background:var(--ink);color:var(--sheet);font:500 13px/1.3 var(--f-m);letter-spacing:.04em}
.pc1 h1{font-size:clamp(2rem,1.25rem + 3.3vw,4.05rem);line-height:1.02;font-weight:820;font-stretch:112%;letter-spacing:-.018em;max-width:15ch}
.lead{max-width:60ch}
.pc1 .lead{margin-top:20px;font-size:clamp(17px,1rem + .3vw,19.5px);color:var(--ink-2)}
.pc1 .lead p:last-child{margin-bottom:0}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.pc2{grid-column:1/-1;background:var(--petrol);color:var(--on-petrol);padding:26px 18px 18px}
.pc2 .sz{color:var(--on-petrol-2)}
.pc2{position:relative;overflow:hidden}
.wm{display:none;position:absolute;left:22px;top:14px;font:900 clamp(80px,9cqi,150px)/1 var(--f-d);font-stretch:125%;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px rgba(233,241,239,.28);pointer-events:none;white-space:nowrap}
.spec{list-style:none;margin:0;padding:0;display:grid;gap:0}
.spec li{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:baseline;padding:12px 0;border-top:1px solid rgba(233,241,239,.25);font:600 17px/1.35 var(--f-b);color:#fff}
.spec li:first-child{border-top:0}
.spec b{font:500 13px/1 var(--f-m);color:var(--lime)}
.pc3{display:flex;flex-direction:column;gap:14px;justify-content:flex-end;padding-top:36px}
.iso-l{width:100%;max-width:190px;color:var(--ink);--hi:var(--lime)}
.pc3 p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.pc4{display:flex;flex-direction:column;justify-content:space-between;gap:18px;background:var(--lime);color:var(--ink);text-decoration:none;padding-top:36px;min-height:170px}
.pc4 .sz{color:var(--ink)}
.pc4:hover{color:var(--ink);text-decoration:none;background:#D9F162}
.pc4-t{font:800 clamp(20px,1rem + 1.2vw,28px)/1.05 var(--f-d);font-stretch:115%;letter-spacing:-.01em}
.arr{width:46px;height:46px;border:2px solid var(--ink);border-radius:50%;position:relative;align-self:flex-start}
.arr::before{content:"";position:absolute;left:50%;top:11px;width:2px;height:20px;background:var(--ink);transform:translateX(-50%)}
.arr::after{content:"";position:absolute;left:50%;top:19px;width:11px;height:11px;border:solid var(--ink);border-width:0 2px 2px 0;transform:translateX(-50%) rotate(45deg)}
.pc5{display:none;background:var(--ground-2)}
.pc6{display:none;background:var(--ink)}
.pc6 .sz{color:var(--on-petrol-2)}
@container a0 (max-width:419px){.pc3,.pc4{grid-column:1/-1}.pc4{min-height:0;flex-direction:row;align-items:center}.pc3{flex-direction:row;align-items:center}.pc3 .iso-l{width:110px;flex:none}}
@container a0 (min-width:600px){
  .pc2{padding:30px 24px 22px}
  .spec{grid-template-columns:repeat(3,1fr);gap:18px}
  .spec li{grid-template-columns:1fr;border-top:2px solid var(--lime);gap:10px}
  .spec li:first-child{border-top:2px solid var(--lime)}
}
@container a0 (min-width:900px){
  .a0-in{grid-template-columns:2fr 1fr .5fr .5fr;grid-template-rows:2fr 1fr 1fr}
  .pc1{grid-column:1;grid-row:1/4;display:flex;flex-direction:column;justify-content:center;min-height:600px}
  .pc1 h1{font-size:clamp(2.6rem,1.2rem + 2.3vw,3.55rem);max-width:none}
  .wm{display:block}
  .pc2{grid-column:2/5;grid-row:1;display:flex;align-items:flex-end}
  .pc2 .spec{width:100%}
  .pc3{grid-column:2;grid-row:2/4}
  .pc4{grid-column:3/5;grid-row:2;min-height:0}
  .pc5,.pc6{display:block}
  .pc5{grid-column:3;grid-row:3}
  .pc6{grid-column:4;grid-row:3}
}
@media (prefers-reduced-motion:no-preference){
  .a0-in::after{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--lime);box-shadow:0 0 18px 6px rgba(207,234,75,.55);pointer-events:none;opacity:0;animation:sweep 1.8s cubic-bezier(.5,0,.3,1) .25s 1}
  @keyframes sweep{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(100% - 3px);opacity:0}}
  .pc4 .arr{transition:transform .2s}
  .pc4:hover .arr{transform:translateY(4px)}
}

/* ============ home: the copier platen with the game ============ */
.platen{background:var(--petrol-dd);color:var(--on-petrol);--focus:var(--lime);padding:clamp(28px,5vw,64px) var(--gut);scroll-margin-top:var(--hh);
  background-image:linear-gradient(180deg,rgba(255,255,255,.04),transparent 40%),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 12px)}
.platen-in{max-width:var(--max);margin:0 auto;display:grid;gap:22px}
.platen-side h2{color:#fff;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);font-weight:800;font-stretch:115%;line-height:1.02;letter-spacing:-.01em}
.p-kick{margin:0 0 12px;font:500 13px/1.3 var(--f-m);letter-spacing:.08em;color:var(--lime)}
.p-note{margin:14px 0 0;color:var(--on-petrol-2);font-size:16px;line-height:1.5;max-width:34ch}
.p-keys{display:none}
.glass{position:relative;padding:clamp(8px,1.6vw,18px);border:1px solid rgba(233,241,239,.18);background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,0) 45%),#0A2E36;overflow:hidden;
  box-shadow:inset 0 0 0 4px #051A1F,inset 0 0 0 5px rgba(233,241,239,.12)}
.bed{position:relative;z-index:1;box-shadow:0 18px 36px -18px rgba(0,0,0,.7)}
.scan{position:absolute;left:0;right:0;top:0;height:3px;z-index:2;background:var(--lime);box-shadow:0 0 22px 8px rgba(207,234,75,.45);pointer-events:none;opacity:0}
@media (prefers-reduced-motion:no-preference){
  .glass.scanning .scan{animation:scan 1.2s ease-in-out infinite alternate}
  .glass.boot .scan{animation:scan 1.6s ease-in-out 1}
  @keyframes scan{0%{top:0;opacity:.95}100%{top:calc(100% - 3px);opacity:.95}}
}
@media (min-width:1100px){
  .platen-in{grid-template-columns:280px minmax(0,1fr);gap:40px;align-items:start}
  .platen-side{position:sticky;top:calc(var(--hh) + 24px);padding-top:8px}
  .p-keys{display:flex;gap:10px;list-style:none;margin:28px 0 0;padding:0}
  .p-keys li{width:44px;height:31px;border:1.5px solid rgba(233,241,239,.4);border-radius:2px}
  .p-keys li:first-child{background:var(--lime);border-color:var(--lime)}
}

/* ============ inner: wrapper band with the ream label ============ */
.ream{background:var(--petrol);padding:clamp(18px,3.5vw,44px) var(--gut) 0;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px)}
.ream-in{max-width:var(--max);margin:0 auto;display:grid;gap:0}
.label{background:var(--sheet);padding:clamp(20px,4vw,48px) clamp(18px,4vw,52px) clamp(24px,4vw,44px);border-top:8px solid var(--ink);position:relative}
.label h1{font-size:clamp(1.85rem,1.25rem + 2.6vw,3.35rem);line-height:1.04;font-weight:820;font-stretch:110%;letter-spacing:-.015em;max-width:22ch;margin-top:18px}
.label .lead{margin-top:18px;font-size:clamp(17px,1rem + .25vw,19px);color:var(--ink-2)}
.label .lead p:last-child{margin:0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font:500 14px/1.3 var(--f-m)}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"";width:18px;height:1.5px;background:var(--rule);margin:0 10px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--petrol)}
.crumbs [aria-current]{color:var(--muted)}
.flap{display:flex;align-items:center;gap:16px;padding:16px clamp(18px,4vw,52px);background:var(--petrol-d);color:var(--on-petrol)}
.flap .iso-l{width:64px;color:var(--on-petrol);--hi:var(--lime)}
.flap p{margin:0;display:flex;align-items:baseline;gap:10px;font-size:15px;line-height:1.3;color:var(--on-petrol-2)}
.flap b{font:900 30px/1 var(--f-b);font-stretch:125%;color:var(--lime)}
@media (min-width:900px){
  .ream-in{grid-template-columns:minmax(0,1fr) 260px}
  .flap{position:relative;flex-direction:column;justify-content:center;gap:18px;padding:30px 26px;overflow:hidden;background:#0B3F4B}
  .flap::before,.flap::after{content:"";position:absolute;left:0;right:0;height:50%}
  .flap::before{top:0;background:#0C4553;clip-path:polygon(0 0,100% 0,50% 72%)}
  .flap::after{bottom:0;background:#08333D;clip-path:polygon(0 100%,100% 100%,50% 28%)}
  .flap>*{position:relative;z-index:1}
  .flap .iso-l{width:150px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
  .flap p{flex-direction:column;align-items:center;text-align:center;gap:6px;background:var(--petrol-dd);padding:12px 14px}
  .flap b{font-size:40px}
}

/* ============ desk: tray TOC + stack of sheets ============ */
.desk{padding:clamp(24px,4vw,56px) var(--gut) clamp(20px,3vw,40px)}
.desk-in{max-width:var(--max);margin:0 auto;display:grid;gap:26px}
.stack{display:grid;gap:30px;min-width:0;max-width:860px}
.sheet{background:var(--sheet);border:1px solid var(--edge);padding:clamp(20px,4vw,46px) clamp(18px,4vw,50px);scroll-margin-top:calc(var(--hh) + 16px);min-width:0;
  box-shadow:4px 4px 0 -1px var(--sheet),4px 4px 0 0 var(--rule),8px 8px 0 -1px var(--sheet),8px 8px 0 0 var(--rule)}
.sh-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding-bottom:16px;margin-bottom:22px;border-bottom:2px solid var(--ink)}
.sh-head h2{font-size:clamp(1.4rem,1.1rem + 1.15vw,2.05rem);line-height:1.1;font-weight:760;font-stretch:108%;letter-spacing:-.01em;scroll-margin-top:calc(var(--hh) + 16px);padding-top:2px}
.code{display:grid;justify-items:center;gap:5px;width:54px;padding-top:4px}
.iso-s{width:46px;color:var(--ink);--hi:var(--lime)}
.code b{font:600 13px/1 var(--f-m);letter-spacing:.06em;color:var(--ink)}
.prose{min-width:0}
.prose>*:last-child{margin-bottom:0}
.prose h3{font-size:1.2rem;font-weight:720;font-stretch:105%;margin:1.5em 0 .5em;line-height:1.25}
.prose strong{color:var(--ink);font-weight:650}
.prose ul,.prose ol{margin:0 0 1.1em;padding:0;list-style:none;display:grid;gap:.55em}
.prose li{position:relative;padding-left:30px}
.prose ul>li::before{content:"";position:absolute;left:2px;top:.52em;width:14px;height:10px;border:1.5px solid var(--ink);background:linear-gradient(90deg,var(--lime) 0 50%,transparent 50%)}
.prose ol{counter-reset:li}
.prose ol>li{counter-increment:li;padding-left:38px}
.prose ol>li::before{content:counter(li,decimal-leading-zero);position:absolute;left:0;top:.2em;font:600 13px/1.6 var(--f-m);color:var(--sheet);background:var(--ink);padding:0 5px}
.table-wrap{overflow-x:auto;margin:0 0 1.2em;border:1.5px solid var(--ink)}
.table-wrap:focus-visible{outline-offset:3px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px;line-height:1.45}
th,td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--edge)}
th{background:var(--petrol);color:#fff;font-weight:650}
tr:nth-child(even) td{background:#F7F6F0}
/* faq: dog-eared sheets */
.qa{display:grid}
.qa details{border-top:1px solid var(--rule)}
.qa details:last-child{border-bottom:1px solid var(--rule)}
.qa summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;min-height:60px;padding:14px 0;cursor:pointer;list-style:none;font:650 18px/1.35 var(--f-b);color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover .qq{text-decoration:underline;text-decoration-color:var(--lime-d);text-decoration-thickness:3px;text-underline-offset:4px}
.ear{position:relative;width:34px;height:34px;background:var(--ink);clip-path:polygon(0 0,62% 0,100% 38%,100% 100%,0 100%)}
.ear::before{content:"";position:absolute;inset:2px;background:var(--sheet);clip-path:polygon(0 0,61% 0,100% 39%,100% 100%,0 100%);
  background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));background-size:14px 2px,2px 14px;background-position:center 58%,center 58%;background-repeat:no-repeat}
.ear::after{content:"";position:absolute;right:0;top:0;width:38%;height:38%;background:var(--rule);clip-path:polygon(0 0,100% 100%,0 100%)}
.qa details[open] .ear::before{background-color:var(--lime);background-size:14px 2px,0 0}
.qa-a{padding:0 0 20px;max-width:68ch}
/* tray selector */
.tray{min-width:0}
.tray-sel{background:var(--sheet);border:1.5px solid var(--ink)}
.tray-sel summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 16px;cursor:pointer;list-style:none;font:600 13px/1.2 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--ground-2)}
.tray-sel summary::-webkit-details-marker{display:none}
.chev{width:10px;height:10px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.tray-sel[open] .chev{transform:rotate(-135deg) translateY(-3px)}
.tray-sel ol{list-style:none;margin:0;padding:6px 0}
.tray-sel a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;min-height:48px;padding:6px 16px;color:var(--ink-2);text-decoration:none;font-size:15px;line-height:1.3}
.tc{display:grid;place-items:center;width:40px;height:28px;border:1.5px solid var(--ink);font:600 12px/1 var(--f-m);color:var(--ink)}
.tray-sel a:hover{background:var(--ground)}
.tray-sel a[aria-current]{color:var(--ink);font-weight:650}
.tray-sel a[aria-current] .tc{background:var(--lime)}
.slip{display:none;margin-top:18px;background:var(--ink);color:#DCE0E3;padding:22px 20px 20px;position:relative}
.slip::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;background:linear-gradient(135deg,transparent 4px,var(--ink) 4px) 0 0/8px 6px repeat-x,linear-gradient(225deg,transparent 4px,var(--ink) 4px) 0 0/8px 6px repeat-x}
.slip-t{font:800 21px/1.1 var(--f-d);font-stretch:112%;color:#fff;margin:0 0 8px}
.slip p{font-size:15.5px;line-height:1.5}
.slip .btn{width:100%;margin-top:6px}
@media (min-width:1100px){
  .desk-in{grid-template-columns:270px minmax(0,1fr);gap:48px;align-items:start}
  .tray{position:sticky;top:calc(var(--hh) + 20px);max-height:calc(100vh - var(--hh) - 40px);overflow:auto;scrollbar-width:thin}
  .slip{display:block}
  .tray-sel summary{cursor:default}
  .tray-sel summary .chev{display:none}
}

/* ============ print slip (cta) ============ */
.print{padding:clamp(12px,2vw,24px) var(--gut) clamp(32px,5vw,64px)}
.print-in{max-width:var(--max);margin:0 auto;display:grid;gap:20px;align-items:center;background:var(--sheet);border:1.5px solid var(--ink);padding:clamp(22px,4vw,40px) clamp(18px,4vw,44px);position:relative}
.hl{position:absolute;left:-1.5px;top:-1.5px;bottom:-1.5px;width:12px;background:var(--lime);border-right:1.5px solid var(--ink)}
.print-in p{margin:0 0 0 8px;font:700 clamp(19px,1rem + .8vw,26px)/1.3 var(--f-d);font-stretch:104%;color:var(--ink);max-width:48ch}
.print-in .btn{justify-self:start;margin-left:8px}
@media (min-width:860px){.print-in{grid-template-columns:minmax(0,1fr) auto;gap:40px}.print-in .btn{justify-self:end}}

/* ============ related: A-series sheets ============ */
.rel{padding:clamp(34px,5vw,64px) var(--gut);background:var(--ground-2);border-top:1px solid var(--rule)}
.rel-in{max-width:var(--max);margin:0 auto}
.rel h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.3rem);font-weight:800;font-stretch:115%;letter-spacing:-.01em;margin-bottom:26px}
.rs-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
.rs{display:flex;flex-direction:column;gap:12px;height:100%;min-height:200px;padding:22px 20px 22px;background:var(--sheet);color:var(--ink-2);text-decoration:none;position:relative;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);box-shadow:inset 0 0 0 1px var(--rule)}
.rs::after{content:"";position:absolute;right:0;top:0;width:26px;height:26px;background:var(--rule);clip-path:polygon(0 0,100% 100%,0 100%)}
.rs:hover{color:var(--ink-2);text-decoration:none;box-shadow:inset 0 0 0 2px var(--ink)}
.rs:hover::after{background:var(--lime)}
.rs-c{display:flex;align-items:center;gap:10px;font:600 13px/1 var(--f-m);color:var(--ink)}
.rs-c .iso-s{width:38px}
.rs-t{font:760 20px/1.15 var(--f-d);font-stretch:108%;color:var(--ink)}
.rs-d{font-size:15px;line-height:1.5;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.rs{transition:transform .18s,box-shadow .18s}.rs:hover{transform:translateY(-3px)}}

/* ============ footer: bottom of the ream ============ */
.foot{background:var(--petrol-d);color:var(--on-petrol-2);--focus:var(--lime)}
.foot .edges{box-shadow:0 1px 0 var(--petrol-dd)}
.foot-in{max-width:var(--max);margin:0 auto;padding:clamp(30px,5vw,56px) var(--gut) 28px;display:grid;gap:28px}
.ft-a .brand{display:inline-flex;box-shadow:3px 3px 0 var(--petrol-dd)}
.ft-disc{margin:18px 0 0;font-size:15px;line-height:1.6;max-width:52ch}
.ft-col h2{font:600 13px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:8px}
.ft-col ul{list-style:none;margin:0;padding:0}
.ft-col a{display:flex;align-items:center;min-height:44px;color:var(--on-petrol);text-decoration:none;font-size:16px;border-bottom:1px solid rgba(233,241,239,.12)}
.ft-col a:hover{color:var(--lime)}
.ft-b{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:20px;border-top:1px solid rgba(233,241,239,.2);font:500 14px/1.3 var(--f-m)}
.age{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--lime);color:var(--ink);font:850 15px/1 var(--f-b);font-stretch:115%}
@media (min-width:720px){.foot-in{grid-template-columns:1fr 1fr}.ft-a{grid-column:1/-1}.ft-b{grid-column:1/-1}}
@media (min-width:1040px){.foot-in{grid-template-columns:1.5fr 1fr 1fr;gap:48px}.ft-a{grid-column:auto}}

/* ============ 404 ============ */
.nf{padding:clamp(40px,8vw,100px) var(--gut)}
.nf-sheet{max-width:640px;margin:0 auto;background:var(--sheet);border:1.5px solid var(--ink);padding:48px clamp(20px,5vw,48px);position:relative;
  box-shadow:5px 5px 0 -1px var(--sheet),5px 5px 0 0 var(--rule),10px 10px 0 -1px var(--sheet),10px 10px 0 0 var(--rule)}
.nf-sheet h1{font-size:clamp(2rem,1.4rem + 2.4vw,3rem);font-weight:820;font-stretch:112%;margin-bottom:14px}
.nf-sheet .sz{font-size:14px}