/* Who, What, When and Where · styles only the hub page uses, loaded after /shared/deep-dive.css. A
   plain page like Questions: the hero, a line of counts, then a door to each of the four pages with
   a glimpse of what's behind it (names, words, the timeline in dots, the map). The counts and the doors are
   written by docs/build_hub.py between the hub:start and hub:end markers; the map's colors and the
   card that opens from the two examples are in the shared stylesheet. */

/* header: no Contents button, so the Kitchen Table link shows on every width it fits */
.hub-page .home-link{display:none}
@media (min-width:600px){.hub-page .home-link{display:flex}}

/* the four doors: one under another on a phone, two by two from 700px, side by side from 1100px */
.doors{list-style:none;margin:0;padding:0 0 40px;display:grid;gap:20px}
.doors>li{display:flex;min-width:0}
@media (min-width:700px){.doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-bottom:56px}}
@media (min-width:1100px){.doors{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.door{flex:1;display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--card);color:var(--ink);text-decoration:none}
.door:hover{border-color:var(--accent);color:var(--ink)}
.door:hover .door-t{color:var(--accent)}
.door-pic{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--band);border-bottom:1px solid var(--line)}
.door-pic svg{display:block;width:100%;height:100%}
.door-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:16px 18px 20px}
.door-k{font:400 calc(13px*var(--ts,1))/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.door-t{font:400 calc(clamp(28px,3vw,34px)*(1 + (var(--ts,1) - 1)*0.6))/1.08 var(--display)}
.door-d{font:400 calc(16px*var(--ts,1))/1.55 var(--sans);color:var(--ink-2)}
.door-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px;font:600 calc(15px*var(--ts,1)) var(--sans);color:var(--accent)}
.door-go svg{flex:none}

/* the glimpses: the names the pages turn to most, fading out; the eras with a dot for every moment;
   the map with a dot for every town */
.glimpse-who{display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px 14px;height:100%;padding:18px 20px;font:400 calc(21px*var(--ts,1))/1.3 var(--serif);color:var(--ink);
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 96%);mask-image:linear-gradient(to bottom,#000 55%,transparent 96%)}
.glimpse-who span:nth-child(3n+2){color:var(--ink-2)}
.glimpse-who span:nth-child(3n){color:var(--accent)}
/* What's what: the words, in the serif, fading out the same way */
.glimpse-what{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px 16px;height:100%;padding:18px 20px;font:400 calc(21px*var(--ts,1))/1.3 var(--serif);font-style:italic;color:var(--ink);
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 96%);mask-image:linear-gradient(to bottom,#000 55%,transparent 96%)}
.glimpse-what span:nth-child(3n+1){color:var(--ink-2)}
.glimpse-what span:nth-child(4n){color:var(--accent)}
.gw-era{fill:var(--card)}
.gw-era.alt{fill:var(--paper)}
.gw-dot{fill:var(--accent)}
.gw-y{font:400 calc(22px*(1 + (var(--ts,1) - 1)*0.9)) var(--mono);fill:var(--ink-2)}
.glimpse-where .m-dot{stroke-width:1.2}

/* while you read: the two examples open their cards right here */
.hub-tip{display:flex;flex-direction:column;gap:12px;max-width:62ch;padding:28px 0 48px;border-top:1px solid var(--line-2)}
.hub-tip p{font-size:calc(18px*var(--ts,1))}
@media (min-width:900px){.hub-tip{padding-block:36px 64px}}

/* printing (the shared print styles do the rest): the doors as a plain list, without the glimpses */
@media print{
  .door-pic{display:none!important}
  .doors{display:block;padding:0}
  .door{border:0;border-top:1px solid #BBB;border-radius:0;background:none;padding-top:6pt;margin-bottom:8pt}
  .door-body{padding:0}
  .door-go{display:none}
  .hub-tip{padding:10pt 0 0;border-top:0}
}