/* joellieser.com: one stylesheet for every page except the archive's essays (tools/archive_style.css).
   The layout is built for large screens and folds to one column on a phone: a wide canvas (72rem) for grids,
   images and numbers, and a reading width (42rem) for running text. */
:root{
  --color-primary:#1D1616;
  --color-secondary:#8E1616;
  --color-text:#EEEEEE;
  --color-muted:rgba(238,238,238,0.64);
  --color-faint:rgba(238,238,238,0.45);
  --color-line:rgba(238,238,238,0.10);
  --color-panel:rgba(238,238,238,0.035);
  --wide:72rem;
  --prose:42rem;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --wide-break:60rem;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100svh;
  background: radial-gradient(1400px 700px at 50% 115%, rgba(142,22,22,0.25), transparent 60%) var(--color-primary);
  background-attachment: fixed;
  color:var(--color-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
[hidden]{display:none !important}

/* The way home, top left (the menu is top right, menu.js). */
.back{
  position:fixed; z-index:9; top:max(14px, env(safe-area-inset-top)); left:max(14px, env(safe-area-inset-left));
  display:inline-grid; place-items:center; height:44px; padding:0 12px; border-radius:10px;
  color:var(--color-faint); text-decoration:none; font-size:14px;
  background:rgba(29,22,22,0.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:color 150ms ease, background-color 150ms ease;
}
.back:hover,.back:focus-visible{color:var(--color-text); background:rgba(48,38,38,0.85); outline:none}

/* The page and its sections. */
.page{max-width:var(--wide); margin:0 auto; padding:clamp(5rem, 13vh, 8rem) var(--gutter) 5rem}
.section{margin-top:clamp(3.5rem, 7vw, 6rem)}
.prose{max-width:var(--prose)}
h1{margin:0; font-weight:800; font-size:clamp(2.75rem, 7vw, 5.75rem); letter-spacing:-0.035em; line-height:1}
h1::after{
  content:""; display:block; width:min(40%, 10ch); height:6px; margin:1.1rem 0 0;
  background:var(--color-secondary); border-radius:6px; box-shadow:0 0 20px rgba(142,22,22,0.5);
}
h2{margin:0; font-size:0.8rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color:var(--color-muted)}
h3{margin:0.6rem 0 0; font-size:clamp(1.35rem, 2.4vw, 1.9rem); font-weight:750; letter-spacing:-0.02em; line-height:1.2; color:var(--color-text)}
.tagline{margin:1.5rem 0 0; font-size:clamp(1.2rem, 2.2vw, 1.6rem); font-weight:600; letter-spacing:-0.015em; line-height:1.35; color:var(--color-text)}
p{font-size:clamp(1.02rem, 1.1vw, 1.1rem); line-height:1.7; color:var(--color-muted); margin:1rem 0 0}
p strong{color:var(--color-text); font-weight:600}
p a,.link{color:var(--color-text); text-decoration:underline; text-decoration-color:var(--color-secondary); text-decoration-thickness:2px; text-underline-offset:4px}
p a:hover,.link:hover{text-decoration-color:var(--color-text)}
p a:focus-visible,.link:focus-visible{outline:2px solid var(--color-text); outline-offset:3px; border-radius:4px}
.small{margin-top:1.5rem; font-size:0.9rem; color:var(--color-faint)}

/* Two columns on a large screen: words and what they're about (numbers, an image). One column on a phone,
   and one column whenever the second is hidden (numbers not published yet). */
.split{display:grid; gap:clamp(1.5rem, 4vw, 4rem); align-items:start}
.hero{align-items:end}
@media (min-width: 60rem){
  .split{grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr)}
  .split:has(> [hidden]){grid-template-columns:minmax(0, 1fr)}
  .split.media-first{grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr)}
  .split.center{align-items:center}
}

/* Numbers. */
.stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr)); gap:0.85rem; margin:1.5rem 0 0}
.split > .stats, .split > div > .stats{margin-top:0}
.stack > .stats + .stats{margin-top:0.85rem}
.stat{padding:1.1rem 1.2rem 1.2rem; border:1px solid var(--color-line); border-radius:14px; background:var(--color-panel)}
.stat b{display:block; font-size:clamp(1.8rem, 3vw, 2.4rem); font-weight:800; letter-spacing:-0.02em; color:var(--color-text); font-variant-numeric:tabular-nums}
.stat span{display:block; margin-top:0.35rem; font-size:0.93rem; line-height:1.45; color:var(--color-muted)}
.stat span span{display:inline; margin:0}
.live{padding:1.5rem; border-radius:16px; border:1px solid rgba(142,22,22,0.55); background:rgba(142,22,22,0.12)}
.live h3{margin-top:0}
.live .stats{margin-top:1.1rem}

/* Cards and grids of them. */
.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap:1rem; margin:1.5rem 0 0; padding:0; list-style:none}
.cards.three{grid-template-columns:repeat(auto-fill, minmax(min(100%, 19rem), 1fr))}
.card{padding:1.35rem 1.4rem 1.45rem; border:1px solid var(--color-line); border-radius:16px; background:var(--color-panel)}
.card b{display:block; font-size:1.12rem; font-weight:700; letter-spacing:-0.01em; color:var(--color-text)}
.card span,.card p{display:block; margin:0.45rem 0 0; font-size:0.98rem; line-height:1.6; color:var(--color-muted)}
.card i{font-style:normal; font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-faint); margin-left:0.45rem; vertical-align:2px}
.card .kind{display:block; margin:0 0 0.5rem; font-size:0.72rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-secondary); filter:brightness(1.6)}
.card p a{color:var(--color-text)}

/* Numbered steps, as cards. */
.steps{counter-reset:step}
.steps .card{counter-increment:step}
.steps .card::before{content:counter(step); display:block; margin-bottom:0.6rem; font-weight:800; font-size:1.6rem; line-height:1; color:var(--color-secondary); filter:brightness(1.4)}

/* Screenshots: a large image beside its words on a large screen, alternating sides; stacked on a phone. */
.tour{display:grid; gap:clamp(2.5rem, 6vw, 5rem); margin:2rem 0 0}
.tour figure{margin:0; display:grid; gap:1.25rem; align-items:center}
@media (min-width: 60rem){
  .tour figure{grid-template-columns:minmax(0, 1.75fr) minmax(0, 1fr); gap:3rem}
  .tour figure:nth-child(even){grid-template-columns:minmax(0, 1fr) minmax(0, 1.75fr)}
  .tour figure:nth-child(even) .shot{order:2}
}
.shot{display:block; border-radius:12px}
.shot:focus-visible{outline:2px solid var(--color-text); outline-offset:3px}
.shot img{display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--color-line); box-shadow:0 22px 56px rgba(0,0,0,0.5); background:#151111}
figcaption b{display:block; font-size:clamp(1.2rem, 2vw, 1.5rem); font-weight:750; letter-spacing:-0.015em; line-height:1.25; color:var(--color-text)}
figcaption span{display:block; margin-top:0.5rem; font-size:1.02rem; line-height:1.65; color:var(--color-muted)}
.photo{margin:0}
.photo img{display:block; width:100%; height:auto; border-radius:16px; border:1px solid var(--color-line); box-shadow:0 22px 56px rgba(0,0,0,0.5)}
.photo figcaption{margin-top:0.75rem; font-size:0.92rem; color:var(--color-faint)}

/* Buttons. */
.actions{display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:2.25rem}
.button{
  display:inline-flex; align-items:center; justify-content:center; min-height:3.25rem; padding:0 1.5rem;
  border-radius:12px; font-weight:700; text-decoration:none;
  transition:transform 120ms ease, filter 120ms ease, background-color 150ms ease;
}
.button:active{transform:scale(0.97); filter:brightness(0.92)}
.primary{background:var(--color-secondary); color:#fff; box-shadow:0 8px 24px rgba(142,22,22,0.35)}
.secondary{color:var(--color-text); border:1px solid var(--color-line)}
.secondary:hover{background:rgba(238,238,238,0.06)}
.button:focus-visible{outline:2px solid var(--color-text); outline-offset:3px}

/* The Data Warehouse page (warehouse.js): the schema's map, the chosen table, and the data dictionary. Built from
   text and SVG nodes; coloured from the site's tokens, with two cool tints for keys so they read on the dark canvas. */
.wh{margin-top:1.75rem}
.wh-bar{display:flex; flex-wrap:wrap; gap:0.75rem 1rem; align-items:center; margin-bottom:1rem}
.wh-input{flex:1 1 18rem; max-width:30rem; min-height:2.75rem; padding:0 0.9rem; font:inherit; font-size:0.98rem; color:var(--color-text); background:rgba(0,0,0,0.25); border:1px solid var(--color-line); border-radius:10px}
.wh-input:focus{outline:none; border-color:rgba(238,238,238,0.35)}
.wh-button{min-height:2.25rem; padding:0 0.85rem; font:inherit; font-size:0.9rem; font-weight:600; color:var(--color-text); background:transparent; border:1px solid var(--color-line); border-radius:9px; cursor:pointer}
.wh-button:hover{background:rgba(238,238,238,0.06)}
.wh-button:focus-visible,.wh-toc button:focus-visible,.wh-hits button:focus-visible{outline:2px solid var(--color-text); outline-offset:2px}
.wh-bar .wh-button{margin-left:auto}
.wh-meta{font-size:0.86rem; color:var(--color-faint)}
.wh-chip{display:inline-block; margin-left:0.5rem; padding:0.05rem 0.45rem; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-muted); border:1px solid var(--color-line); border-radius:6px; vertical-align:2px}
.wh code,.markdown code{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; font-size:0.86em; color:var(--color-text)}

.wh-hits ul{display:grid; gap:2px; margin:0.5rem 0 1rem; padding:0.4rem; list-style:none; max-height:20rem; overflow:auto; border:1px solid var(--color-line); border-radius:12px; background:var(--color-panel)}
.wh-hits button{display:block; width:100%; padding:0.45rem 0.6rem; text-align:left; font:inherit; color:var(--color-muted); background:transparent; border:0; border-radius:8px; cursor:pointer}
.wh-hits button:hover{background:rgba(238,238,238,0.06)}
.wh-hits button span{display:block; margin-top:0.15rem; font-size:0.86rem; color:var(--color-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.wh-map{border:1px solid var(--color-line); border-radius:16px; overflow:hidden; background:#151111}
.wh-toolbar,.wh-legend{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:0.5rem 1rem; padding:0.7rem 1rem}
.wh-toolbar{border-bottom:1px solid var(--color-line)}
.wh-legend{justify-content:flex-start; border-top:1px solid var(--color-line); font-size:0.84rem; color:var(--color-faint)}
.wh-filters,.wh-zoom{display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 1rem}
.wh-check{display:inline-flex; align-items:center; gap:0.4rem; font-size:0.92rem; color:var(--color-muted); cursor:pointer}
.wh-check input{accent-color:var(--color-secondary)}
.wh-frame{position:relative; height:70vh; min-height:28rem; background:#120e0e}
svg.wmap{display:block; width:100%; height:100%; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none}
svg.wmap:active{cursor:grabbing}
svg.wmap:focus-visible{outline:2px solid var(--color-muted); outline-offset:-2px}
.w-region{fill:#1a1414; stroke:var(--color-line); stroke-width:2}
.w-region.all{fill:#211616}
.w-region-label{fill:var(--color-faint); font-weight:700; letter-spacing:0.02em}
.w-region-label.short{display:none}
svg.wmap.lod-far .w-region-label.short{display:inline}
svg.wmap.lod-far .w-region-label.long{display:none}
.w-edge{fill:none; stroke:rgba(238,238,238,0.22); stroke-width:1.4}
.w-edge.on{stroke:rgba(238,238,238,0.75); stroke-width:2.4}
.w-lineage-line{fill:none; stroke:#c0504d; stroke-width:1.6; stroke-dasharray:8 6; opacity:0.8; display:none}
svg.wmap.lineage-on .w-lineage-line,.w-lineage-line.on{display:inline}
.w-box{fill:#241b1b; stroke:rgba(238,238,238,0.28); stroke-width:1.4}
.w-node{cursor:pointer}
.w-node.fact .w-box{stroke:rgba(238,238,238,0.7); stroke-width:2}
.w-head{fill:#30262a}
.w-node.fact .w-head{fill:#EEEEEE}
.w-node.view .w-head{fill:#8E1616}
.w-name{fill:#EEEEEE; font:700 13px ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.w-node.fact .w-name{fill:#1D1616}
.w-kind{fill:var(--color-faint); font-size:10.5px}
.w-node.fact .w-kind{fill:rgba(29,22,22,0.6)}
.w-node.view .w-kind{fill:rgba(238,238,238,0.75)}
.w-row-bg{fill:transparent}
.w-row:hover .w-row-bg{fill:rgba(238,238,238,0.06)}
.w-row.hit .w-row-bg{fill:rgba(214,162,74,0.2)}
.w-col{fill:rgba(238,238,238,0.72); font:11px ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.w-row.key .w-col{fill:#8fbcf0}
.w-row.fk .w-col{fill:#c2b4f2}
.w-row.measure .w-col{fill:#EEEEEE}
.w-type{fill:var(--color-faint); font:10px ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.w-node.chosen .w-box{stroke:#d6a24a; stroke-width:3}
svg.wmap.focusing .w-node:not(.on){opacity:0.22}
svg.wmap.focusing .w-edge:not(.on){opacity:0.12}
svg.wmap.focusing .w-far-label{opacity:0.35}
.w-far-label{fill:var(--color-muted); font-weight:700; pointer-events:none; display:none}
.w-far-label.fact{fill:#EEEEEE}
svg.wmap.lod-far .w-rows,svg.wmap.lod-far .w-name,svg.wmap.lod-far .w-kind{display:none}
svg.wmap.lod-far .w-far-label{display:inline}
svg.wmap.lod-farthest .w-far-label.dimension{display:none}
svg.wmap.lod-names .w-rows,svg.wmap.lod-names .w-kind{display:none}
svg.wmap.lod-names .w-name{font-size:24px}
svg.wmap.hide-nfl [data-db="nfl"],svg.wmap.hide-cfb [data-db="cfb"],svg.wmap.hide-all [data-db="all"]{display:none}
svg.wmap-mini{position:absolute; right:12px; bottom:12px; width:150px; height:auto; background:rgba(29,22,22,0.92); border:1px solid var(--color-line); border-radius:10px; cursor:pointer; touch-action:none}
.mini-region{fill:#2a2020}
.mini-node{fill:rgba(238,238,238,0.3)}
.mini-node.fact{fill:rgba(238,238,238,0.75)}
.mini-node.view{fill:#8E1616}
.mini-view{fill:rgba(238,238,238,0.08); stroke:#EEEEEE; stroke-width:24}
.wh-legend .lg::before{content:""; display:inline-block; width:10px; height:10px; margin-right:6px; border-radius:3px; vertical-align:-1px; background:#30262a; border:1px solid rgba(238,238,238,0.28)}
.wh-legend .lg.fact::before{background:#EEEEEE}
.wh-legend .lg.view::before{background:#8E1616}
.wh-legend .lg.key::before{background:#8fbcf0; border-color:transparent}
.wh-legend .lg.fk::before{background:#c2b4f2; border-color:transparent}

.wh-card{margin-top:1.25rem; padding:1.4rem 1.5rem; border:1px solid var(--color-line); border-radius:16px; background:var(--color-panel)}
.wh-card header{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:0.75rem}
.wh-name{font-size:1.05rem; font-weight:700}
.wh-card > p{margin-top:0.75rem; max-width:var(--prose)}
.wh-card dl{display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:0.35rem 1rem; margin:1rem 0 0; font-size:0.95rem}
.wh-card dt{color:var(--color-faint)}
.wh-card dd{margin:0; color:var(--color-muted)}
.wh-examples h4{margin:1.5rem 0 0.5rem; font-size:0.8rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-muted)}
.wh-examples details{border-top:1px solid var(--color-line); padding:0.6rem 0}
.wh-examples summary{cursor:pointer; color:var(--color-text)}
.wh-examples pre{overflow-x:auto; margin:0.6rem 0 0; padding:0.9rem 1rem; font:0.82rem/1.5 ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:var(--color-muted); background:rgba(0,0,0,0.3); border-radius:10px}

.wh-dict{display:grid; gap:1.5rem}
.wh-toc{display:flex; flex-direction:column; gap:1px; max-height:16rem; overflow-y:auto; padding:0.6rem; border:1px solid var(--color-line); border-radius:14px; background:var(--color-panel)}
.wh-toc button{flex-shrink:0; display:block; width:100%; padding:0.25rem 0.55rem; text-align:left; font:inherit; font-size:0.9rem; color:var(--color-muted); background:transparent; border:0; border-radius:7px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wh-toc button:hover{background:rgba(238,238,238,0.06); color:var(--color-text)}
.wh-toc .toc-2{margin-top:0.6rem; font-weight:700; color:var(--color-text)}
.wh-toc .toc-2:first-child{margin-top:0}
.wh-toc .toc-3{padding-left:1.1rem; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:0.8rem}
@media (min-width: 60rem){
  .wh-dict{grid-template-columns:15rem minmax(0, 1fr); align-items:start}
  .wh-toc{position:sticky; top:1.5rem; max-height:calc(100vh - 3rem)}
}
.markdown{min-width:0}
.markdown h2{margin:2.25rem 0 0; padding-top:1.25rem; border-top:1px solid var(--color-line); font-size:1.35rem; letter-spacing:-0.01em; text-transform:none; color:var(--color-text); scroll-margin-top:1.5rem}
.markdown section:first-child h2{margin-top:0}
.markdown h3{margin:2rem 0 0; font:700 1.05rem ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:var(--color-text); scroll-margin-top:1.5rem}
.markdown p{margin:0.6rem 0 0; font-size:1rem}
.markdown ul{margin:0.6rem 0 0; padding-left:1.25rem; color:var(--color-muted); line-height:1.7}
.markdown strong{color:var(--color-text)}
.markdown a{color:var(--color-text); text-decoration-color:var(--color-secondary); text-underline-offset:3px}
.md-table{overflow-x:auto; margin:0.9rem 0 0; border:1px solid var(--color-line); border-radius:12px}
.md-table table{width:100%; border-collapse:collapse; font-size:0.9rem; line-height:1.5}
.md-table th{text-align:left; font-weight:600; color:var(--color-faint); background:rgba(238,238,238,0.03)}
.md-table th,.md-table td{padding:0.5rem 0.75rem; border-bottom:1px solid var(--color-line); vertical-align:top; color:var(--color-muted)}
.md-table tr:last-child td{border-bottom:0}
.md-table td:first-child code{white-space:nowrap}
@media (max-width: 40rem){
  .wh-frame{height:62vh; min-height:22rem}
  svg.wmap-mini{width:96px}
  .wh-bar .wh-button{margin-left:0}
}

/* The home page: one line, centred, the menu its only way on. */
.home{display:grid; place-items:center; min-height:100svh; margin:0; padding:var(--gutter)}
.home h1{font-size:clamp(2.5rem, 8vw, 7rem); text-transform:lowercase; text-align:center; line-height:1.05; letter-spacing:-0.03em}
.home h1::after{width:min(60%, 22ch); margin:1rem auto 0}

@media (prefers-reduced-motion: no-preference){
  .page{animation:fadeIn 600ms ease-out both}
  .home h1{animation:fadeIn 600ms ease-out both}
  .home h1::after{animation:reveal 900ms 120ms ease-out both}
  @keyframes fadeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
  @keyframes reveal{from{transform:scaleX(0)} to{transform:scaleX(1)}}
}