/* Hack Yourself: reader pass in the Clean-Room style of the rest of the site.
   Loaded last. Centres the column, sets fluid type and spacing from phone to wide
   screens, turns dividers into chapter openers and drops the old hard shadows. */

/* ---------- Column and measure ---------- */
.article:has(.hyf-hud){
  /* ~38rem on a phone column, ~42rem at 1440px, 46rem on very wide screens */
  --hy-measure:min(100%, clamp(36rem, calc(36rem + 6.25vw), 46rem));
}
/* The site pins the post column to the left from 1440px; this post is centred. */
/* The prose box is the text column, so wide blocks and margin notes measure from its edges. */
.article .layout:has(.hyf-hud){display:grid;grid-template-columns:minmax(0,var(--hy-measure));justify-content:center;max-width:none}
.article .layout:has(.hyf-hud) .prose{--hy-read:100%}
/* One track only: the contents list sits above the text (or floats, from 1440px). */
.article .layout:has(.hyf-hud) > :is(.prose, .toc){grid-column:1;grid-row:auto}

/* Header, share row and the end of the post sit on the same column as the text. */
.article:has(.hyf-hud) > .ahead,
.article:has(.hyf-hud) > .share-row,
.article:has(.hyf-hud) > .article-topics,
.article:has(.hyf-hud) > .defeated,
.article:has(.hyf-hud) > .comments,
.article:has(.hyf-hud) > .adjacent,
.article:has(.hyf-hud) > .author-box{max-width:var(--hy-measure);margin-inline:auto}
.article:has(.hyf-hud) > .ahead h1{font-size:clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem);line-height:1.04;letter-spacing:-.035em}
.article:has(.hyf-hud) > .ahead .dek{margin:1rem 0 1.4rem;font-size:clamp(1.05rem, .98rem + .3vw, 1.25rem);line-height:1.6;max-width:none}
.article:has(.hyf-hud) > .cover{margin-block:clamp(1.5rem, 4vw, 2.75rem) clamp(2.5rem, 6vw, 4.5rem)}

/* ---------- Body text ---------- */
.layout:has(.hyf-hud) .prose{font-size:clamp(1.0625rem, 1rem + .2vw, 1.25rem);line-height:1.8}
.layout:has(.hyf-hud) .prose > p{color:color-mix(in oklab, var(--fg) 90%, var(--muted));text-wrap:pretty;hyphens:manual}
.layout:has(.hyf-hud) .prose > p + p{margin-top:1.45em}
.layout:has(.hyf-hud) .prose > :where(ul, ol, pre, blockquote, .hy-patch) + p{margin-top:1.6em}
.layout:has(.hyf-hud) .prose > p + :where(ul, ol, pre){margin-top:1.4em}
.layout:has(.hyf-hud) .prose > :where(ul, ol):not(.hy-questions):not(.sources) li + li{margin-top:.7em}
.layout:has(.hyf-hud) .prose strong{color:var(--fg)}

/* The first paragraph after the one-minute card opens the essay: a larger lead. */
.layout:has(.hyf-hud) .prose > #hy-start + p{
  margin-top:clamp(3rem, 7vw, 5rem);
  font-size:clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  line-height:1.6;
  letter-spacing:-.01em;
  color:var(--fg);
}

/* ---------- Chapter openers: divider + h2 ---------- */
.layout:has(.hyf-hud) .prose > .hyf-div{
  width:auto;
  max-width:var(--hy-read);
  margin:clamp(5rem, 11vw, 8.5rem) auto 0;
  padding-top:clamp(1.6rem, 3vw, 2.2rem);
  border-top:1px solid var(--hair);
  overflow:visible;
}
.layout:has(.hyf-hud) .prose > .hyf-div .hyf-div-rule,
.layout:has(.hyf-hud) .prose > .hyf-div .hyf-div-sweep{display:none}
.layout:has(.hyf-hud) .prose > .hyf-div .hyf-div-label{max-width:100%;gap:.6rem;font:600 .78rem/1.2 var(--mono);letter-spacing:.1em}
.layout:has(.hyf-hud) .prose > .hyf-div .hyf-div-code{padding:.28rem .6rem;border-radius:999px;border-color:color-mix(in oklab, var(--accent) 35%, transparent);background:color-mix(in oklab, var(--accent) 10%, transparent)}
.layout:has(.hyf-hud) .prose > .hyf-div .hyf-div-sep{color:var(--muted);opacity:.6}
.layout:has(.hyf-hud) .prose h2{
  margin-top:clamp(4.5rem, 10vw, 7.5rem);
  margin-bottom:.75em;
  padding:0;
  border:0;
  font-size:clamp(1.9rem, 1.3rem + 2.3vw, 3rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.03em;
}
.layout:has(.hyf-hud) .prose > .hyf-div + h2{margin-top:1rem}
.layout:has(.hyf-hud) .prose > h3{
  margin-top:clamp(3rem, 6vw, 4.5rem);
  margin-bottom:.7em;
  font-size:clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
  line-height:1.2;
  letter-spacing:-.02em;
}
.layout:has(.hyf-hud) .prose h3.hy-sec code{font-size:.7em;padding:.2em .55em;border-radius:999px;background:color-mix(in oklab, var(--accent2) 12%, transparent);vertical-align:.15em}

/* ---------- Breathing room around big blocks ---------- */
.layout:has(.hyf-hud) .prose > :is(.toy, .hyc, .hyt, .hyr, .hyb-dept, .hy-photo, figure, .hyf-glitch, details.hy-primer){
  margin-top:clamp(3rem, 7vw, 5.5rem);
  margin-bottom:clamp(3rem, 7vw, 5.5rem);
}
.layout:has(.hyf-hud) .prose > pre{margin-block:2em;border-radius:var(--r-md, 18px)}

/* Widgets: same rounded panels as the rest of the site. */
.layout:has(.hyf-hud) .prose .toy,
.layout:has(.hyf-hud) .prose .hyr{border-radius:var(--r-lg, 24px);border-color:var(--hair);box-shadow:inset 0 1px 0 var(--spec, transparent)}
.layout:has(.hyf-hud) .prose .hy-photo img{border-radius:var(--r-md, 18px)}

/* ---------- One-minute card ---------- */
.prose > .hy-tldr{
  border:1px solid var(--hair);
  border-radius:var(--r-lg, 24px);
  background:linear-gradient(160deg, color-mix(in oklab, var(--accent) 9%, var(--surface)), var(--surface) 60%);
  box-shadow:inset 0 1px 0 var(--spec, transparent);
}
.hy-tldr-bar{background:transparent;border-bottom-color:var(--hair);padding:.75rem 1.25rem}
.hy-tldr-skip{animation:none}
.hy-tldr-body{padding:clamp(1.4rem, 4vw, 2.75rem) clamp(1.15rem, 4vw, 3rem) clamp(1.6rem, 4vw, 3rem)}
.hy-tldr-title{font-size:clamp(1.8rem, 1.3rem + 2vw, 2.75rem)!important;letter-spacing:-.03em}
.hy-tldr-list li{padding:1rem 1.15rem;border-color:var(--hair);border-radius:var(--r-md, 18px);background:color-mix(in oklab, var(--bg) 55%, transparent);line-height:1.6}
.prose a.hy-tldr-btn,
.prose button.hy-tldr-btn{min-height:44px;padding:.55rem 1.15rem;border-width:1px;border-radius:999px;box-shadow:none;font-family:var(--body);font-weight:600}
.prose a.hy-tldr-btn:hover{translate:none}
.hy-tldr-bye{border-top-style:solid;border-top-color:var(--hair)}

/* ---------- Margin notes, primer, folds, patches, toast ---------- */
.prose > .hy-note{
  border:1px solid var(--hair);
  border-left:2px solid var(--note-c);
  border-radius:var(--r-sm, 12px);
  box-shadow:none;
  padding:.9rem 1.05rem;
  font-size:.84rem;
  line-height:1.6;
}
.prose > .hy-note.hy-note--term{--note-c:var(--accent)}
.prose > .hy-note:not(.hy-note--quiz):not(.hy-note--achievement):not(.hy-note--term){--note-c:var(--accent2)}
@media (min-width:1300px){
  .layout:has(.hyf-hud) .prose > :is(.hy-note--left, .hy-note--right){rotate:none}
}
/* With a centred column, the margins only clear the contents panel from ~1780px.
   Below that, notes and stickers stay in the text column as cards. */
@media (min-width:1300px) and (max-width:1779px){
  .layout:has(.hyf-hud) .prose > :is(.hy-note, .hy-sticker){float:none;width:auto;max-width:min(100%, 34rem);margin:2.4rem auto}
  .layout:has(.hyf-hud) .prose > .hy-sticker{max-width:20rem}
}
.prose .hy-note-opt{border-radius:999px;border-color:var(--hair);padding-inline:.8rem}
.prose .hy-primer{border:1px solid var(--hair);border-radius:var(--r-md, 18px);background:var(--surface);padding:1.4rem clamp(1.1rem, 3vw, 1.8rem)}
.prose .hy-primer .hy-primer-sub{border-top-style:solid;border-top-color:var(--hair)}
.prose details.hy-fold{border:1px solid var(--hair);border-radius:var(--r-md, 18px);background:var(--surface);padding:1rem 1.3rem}
.layout:has(.hyf-hud) .prose > .hy-patch{margin-top:1.8em;padding:.9rem 1.15rem;border-left-width:2px;border-radius:0 var(--r-sm, 12px) var(--r-sm, 12px) 0;font-size:.92em}
.hy-toast{border-color:var(--hair);border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:.6rem 1rem}

/* The four questions: a short numbered list that should read like a pause. */
.layout:has(.hyf-hud) .prose ol.hy-questions{margin-block:2.4em}
.layout:has(.hyf-hud) .prose ol.hy-questions li{font-size:1.12em;font-weight:500;color:var(--fg)}
.layout:has(.hyf-hud) .prose ol.hy-questions li + li{margin-top:1em}

/* Closing note and sources: quieter, but with room. */
.layout:has(.hyf-hud) .prose > p.hy-ndlr{margin-top:clamp(3.5rem, 8vw, 5rem);padding-top:1.6rem;border-top-color:var(--hair)}
.layout:has(.hyf-hud) .prose > ul.sources{font-size:.85rem;line-height:1.65}
.layout:has(.hyf-hud) .prose > ul.sources li + li{margin-top:.55em}

/* ---------- Phones ---------- */
@media (max-width:760px){
  .article:has(.hyf-hud){padding-inline:1.25rem}
  .layout:has(.hyf-hud) .prose > p + p{margin-top:1.35em}
  .layout:has(.hyf-hud) .prose > :is(.hy-note, .hy-sticker){margin-block:2.4rem}
  .layout:has(.hyf-hud) .prose > .hy-photo:not(.tall) img{max-height:62svh}
  .layout:has(.hyf-hud) .prose > :is(.toy, .hyc, .hyt, .hyr, .hy-photo, figure, .hyf-glitch){margin-top:3rem;margin-bottom:3rem}
  .prose > .hy-tldr{border-radius:var(--r-md, 18px)}
  .hy-tldr-bar{padding:.65rem 1rem}
}

/* ---------- Light theme: the paper sticky notes and tape keep their own colours. ---------- */
[data-theme=paper] .layout:has(.hyf-hud) .prose > p{color:var(--fg)}