/* jellohurled.com — the desktop layer. Loads after base.css; nothing here acts below 72rem,
   so a phone renders exactly what it did before (checked by pixel diff, 2026-09-30).
   The notebook column stays a notebook column (62ch paragraphs, see DESIGN.md). What a wide
   screen gets is everything AROUND it: a section rail, finding cards side by side, and a
   masthead and footer that use the width instead of floating in it. */

/* the rail exists only where there is room for it; a phone reads straight down */
.toc{display:none}

@media (min-width:72rem){
  .top .wrap, footer .wrap{max-width:78rem}
  main .wrap.wide{max-width:78rem}

  /* long pages: rail on the left, the column on the right */
  main .wrap.has-toc{max-width:78rem;display:grid;grid-template-columns:13rem minmax(0,1fr);
    column-gap:4rem;align-items:start}
  main .wrap.has-toc > *{grid-column:2}
  main .wrap.has-toc > .toc{grid-column:1;grid-row:1 / span 999;position:sticky;top:2rem;
    margin-top:.4rem;display:block;max-height:calc(100vh - 4rem);overflow-y:auto}
  .toc p{font:400 .62rem/1 "JetBrains Mono",monospace;letter-spacing:.2em;
    text-transform:uppercase;color:var(--muted);margin:0 0 1rem}
  .toc ol{list-style:none;margin:0;padding:0 0 0 1rem;border-left:1px solid var(--line);max-width:none}
  .toc li{margin:0 0 .75rem}
  .toc a{font:400 .95rem/1.3 "Newsreader",Georgia,serif;color:var(--muted);text-decoration:none;
    text-transform:none;letter-spacing:normal}
  .toc a:hover{color:var(--orange-lit)}
  h2[id]{scroll-margin-top:1.5rem}

  .has-toc h1{max-width:18ch}
  .has-toc .lede{max-width:52ch}

  /* finding cards, side by side; the trace line sits at the foot of every card */
  .entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin:0 0 1.1rem}
  .entries .entry{margin:0;display:flex;flex-direction:column}
  .entries .entry .trace{margin-top:auto;padding-top:.7rem}
  .entries .entry p{max-width:none}
}

@media (min-width:100rem){
  body{font-size:19px}
  .top .wrap, footer .wrap, main .wrap.wide, main .wrap.has-toc{max-width:86rem}
  .entries{grid-template-columns:repeat(3,minmax(0,1fr))}
}