:root{
  --paper:#FAF6EE; --desk:#EDE4D3; --card:#FFFDF8; --ink:#1F2A2E; --ink2:#3B474A; --mute:#66706F; --rule:#E2D8C6; --rule2:#CFC3AE;
  --teal:#0E6A6A;
  --display:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --body:"Segoe UI Variable Text","Segoe UI","Helvetica Neue",-apple-system,Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
  --r:10px; --sh:0 1px 2px rgba(31,42,46,.05),0 3px 10px rgba(31,42,46,.05);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--teal);outline-offset:3px;border-radius:4px}
.wrap{max-width:1040px;margin:0 auto;padding-left:28px;padding-right:28px}

/* header */
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-top:28px;padding-bottom:18px}
.brand{text-decoration:none}
.eyebrow{display:block;font:700 11.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.logo{display:block;font:600 30px/1.15 var(--display);margin-top:5px}
.logo b{color:var(--teal);font-style:italic}
.by{font-size:14px;color:var(--mute)}
.by a{color:var(--ink2);font-weight:600;text-underline-offset:3px}

/* hero: text on the left, a small pile of topic cards on the right */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:center;padding-top:56px;padding-bottom:72px}
.kicker{font:700 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:0}
h1{font:600 clamp(40px,6vw,64px)/1.05 var(--display);margin:12px 0 18px;letter-spacing:-.01em}
h1 em{color:var(--teal)}
.lede{font-size:19px;color:var(--ink2);margin:0 0 24px}
.pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pills li{font:700 13px var(--body);border:1.5px solid var(--ink);border-radius:999px;padding:5px 14px;background:var(--card)}

.stack{position:relative;height:300px}
.ix{position:absolute;left:0;right:0;margin:auto;width:min(100%,320px);background:var(--card);border:1px solid var(--rule);border-top:5px solid var(--c);border-radius:8px;
  padding:16px 18px;box-shadow:0 10px 28px rgba(31,42,46,.10);display:flex;flex-direction:column;gap:6px;animation:drop .6s cubic-bezier(.2,.7,.3,1) both}
.ix .code{font:700 13px var(--mono);color:var(--c)}
.ix .t{font:600 19px/1.25 var(--display)}
.ix3{top:0;transform:rotate(5deg) translateX(26px);animation-delay:.05s;opacity:.9}
.ix2{top:34px;transform:rotate(-4deg) translateX(-20px);animation-delay:.15s}
.ix1{top:78px;transform:rotate(1deg);animation-delay:.25s;padding-bottom:20px}
.ln{display:block;height:7px;border-radius:4px;background:var(--desk)}
.l1{width:92%;margin-top:6px}.l2{width:78%}.l3{width:85%}
.mine{margin-top:8px;align-self:flex-start;font:600 13px/1.3 var(--body);color:#5C430A;background:#FFE58A;padding:3px 7px;border-radius:3px;transform:rotate(-1deg)}
@keyframes drop{from{opacity:0;translate:0 -14px}to{translate:0 0}}

/* subjects sit on a slightly darker "desk" band */
.desks{background:var(--desk);padding:52px 0 44px}
.sh{font:600 26px var(--display);margin:0 0 18px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.subj{position:relative;display:flex;flex-direction:column;gap:8px;text-decoration:none;background:var(--card);border:1px solid var(--rule);border-left:6px solid var(--c);
  border-radius:var(--r);padding:26px 24px 20px;box-shadow:var(--sh);transition:transform .18s,box-shadow .18s}
.subj:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(31,42,46,.12)}
.tab{position:absolute;top:-1px;right:22px;font:700 12px var(--mono);letter-spacing:.08em;color:#fff;background:var(--c);padding:6px 10px 5px;border-radius:0 0 6px 6px}
.name{font:600 27px/1.15 var(--display);padding-right:56px}
.meta{font-size:14.5px;color:var(--mute);line-height:1.45}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 4px}
.chips i{font:600 12px/1 var(--body);font-style:normal;color:var(--ink2);background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--k);border-radius:5px;padding:5px 7px}
.go{margin-top:auto;padding-top:10px;font-weight:700;color:var(--c)}
.go b{display:inline-block;transition:transform .18s}
.subj:hover .go b{transform:translateX(4px)}
.url{font:12.5px var(--mono);color:var(--mute)}
.more{color:var(--ink2);font-size:14.5px;margin:16px 0 0}

/* features */
.feat{padding-top:64px;padding-bottom:8px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 36px;margin:0}
.grid div{border-top:2px solid var(--ink);padding-top:12px}
.grid dt{font:600 19px/1.25 var(--display);margin-bottom:5px}
.grid dd{margin:0;font-size:15px;color:var(--ink2);line-height:1.5}

/* browser-only note and moving steps, side by side */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding-top:56px;align-items:start}
.note{display:flex;gap:14px;align-items:flex-start;background:#FFF4D6;border:1px solid #E9C66A;border-left:6px solid #C8901A;border-radius:var(--r);padding:20px 22px;color:#4A3A10}
.note .ico{flex:none;width:34px;height:34px;border-radius:50%;background:#C8901A;color:#fff;display:grid;place-items:center;font:700 19px/1 var(--body)}
.note h2{font:700 17px/1.3 var(--body);color:#5C430A;margin:2px 0 6px}
.note p{margin:0;font-size:15px;line-height:1.6}
.move{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:20px 22px}
.move h2{font:700 17px/1.3 var(--body);margin:2px 0 6px}
.move p{margin:0 0 12px;font-size:15px;color:var(--ink2)}
.move code{font:600 .9em var(--mono);background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:1px 6px}
.move ol{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:8px}
.move li{counter-increment:s;position:relative;padding:3px 0 3px 38px;font-size:15px}
.move li::before{content:counter(s);position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font:700 13px var(--mono)}

/* questions */
.faq{padding-top:64px}
.qs{max-width:820px;border-top:2px solid var(--ink)}
.qs details{border-bottom:1px solid var(--rule2)}
.qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:15px 2px;font:600 19px/1.3 var(--display)}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"+";flex:none;font:400 24px/1 var(--body);color:var(--teal);transition:transform .2s}
.qs details[open] summary::after{transform:rotate(45deg)}
.qs summary:hover{color:var(--teal)}
.qs p{margin:0 0 18px;padding-right:44px;font-size:15.5px;color:var(--ink2);max-width:720px}
.qs a{font-weight:600;text-underline-offset:3px}

/* footer, with room for the badge some previews overlay at the bottom */
.foot{margin-top:64px;padding:26px 0 72px;background:var(--desk);font-size:14px;color:var(--ink2)}
.foot p{margin:0 0 6px}
.foot b{color:var(--ink)}
.foot a{font-weight:600;text-underline-offset:3px}
.foot .tm{font-size:12.5px;margin-top:12px;max-width:720px;color:var(--mute)}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-bottom:48px}
  .stack{display:none}
  .cards,.pair{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:540px){
  .wrap{padding-left:18px;padding-right:18px}
  .top{flex-direction:column;align-items:flex-start;gap:6px}
  .hero{padding-top:36px}
  .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{
  body{font-size:11pt}
  .stack{display:none}
  .hero{grid-template-columns:1fr}
  .subj{box-shadow:none;break-inside:avoid}
  .note,.move{break-inside:avoid}
  .go b{display:none}
  .qs details{break-inside:avoid}
  .qs summary::after{display:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:15mm}
}