/* Store floor (spec §6): dark editorial pages; the receipt lives in the type.
   Paper appears only for real receipts: the latest card and the stubs. */
body.house{background:var(--raps-black);color:var(--raps-white)}
.house-main{max-width:1100px;margin:0 auto;padding:8px var(--gutter) 48px}

/* Person header: the photo sits beside the name, and holds its box while it loads
   (width/height are printed on the tag) so the title never jumps. The headshots are
   transparent cutouts, so they sit on receipt paper rather than the page's black,
   which keeps dark hair and dark uniforms from merging into the background
   (Ron, Sep 19). Penpot page "05 · Headshots · source" holds the same treatment. */
.h-person{display:flex;align-items:flex-end;gap:clamp(12px,2.5vw,28px);flex-wrap:wrap}
.h-person__photo{width:clamp(104px,14vw,168px);height:auto;background:var(--paper);
  border-bottom:3px solid var(--raps-red);flex:none}
.h-label{margin:0;font:700 var(--t-micro)/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--raps-silver)}
.h-title{margin:.08em 0 .15em;font:400 clamp(3.5rem,10vw,8rem)/.88 var(--font-display);letter-spacing:.01em}
.h-big{font:400 clamp(2.75rem,6vw,4.5rem)/1 var(--font-display)}
.h-lede{max-width:52ch;margin:12px 0 0;font:500 var(--t-lede)/1.35 var(--font-body);color:var(--raps-white)}
.h-sec{padding:28px 0;border-top:1.5px dashed var(--house-rule)}
.h-row{display:flex;align-items:baseline;font:400 var(--t-meta)/1.9 var(--font-mono);font-variant-numeric:tabular-nums}
.h-row__lead{flex:1;min-width:16px;margin:0 8px;border-bottom:1px dotted var(--house-leader);transform:translateY(-5px)}
/* A dotted-leader row is a list, not a sentence, so its link is a real target. */
.h-row a{display:inline-flex;align-items:center;min-height:24px}
.h-more{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font:700 var(--t-micro)/1.4 var(--font-mono);letter-spacing:.14em;text-decoration:none}
.h-more:hover{text-decoration:underline;text-underline-offset:4px}

/* latest-result card: the one skinned surface in the house */
.latest{position:relative;overflow:hidden;margin-top:8px;padding:28px 20px 34px;background:var(--field)}
.latest__ghost{position:absolute;right:-.04em;top:-.1em;font:400 min(62vw,440px)/.8 var(--font-display);color:transparent;-webkit-text-stroke:2px var(--ghost);pointer-events:none}
.latest .receipt{max-width:420px;transform:rotate(-1deg)}
.latest__go{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font:700 var(--t-micro)/1.4 var(--font-mono);letter-spacing:.14em;color:var(--ink-accent);text-decoration:none}
a.latest__go:hover{text-decoration:underline;text-underline-offset:4px}

/* season ribbon */
.ribbon{position:relative;display:flex;align-items:stretch;gap:2px;height:84px;margin-top:18px}
.ribbon--lg{height:140px}
.ribbon::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--house-line)}
.ribbon__bar{position:relative;flex:1;min-width:2px;display:block}
.ribbon__bar i{position:absolute;left:0;right:0;height:calc(var(--h) * .5%)}
.ribbon__bar.is-w i{bottom:50%;background:var(--raps-red)}
.ribbon__bar.is-l i{top:50%;background:var(--house-loss)}
/* 82 bars + 81 gaps at 2px each is a 326px floor, wider than a 320px phone
   can give it. The gap closes up there rather than the page scrolling. */
@media (max-width:360px){.ribbon{gap:1px}}

/* stubs: small real receipts */
.stubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:16px 14px;margin-top:14px}
.stub{display:flex;flex-direction:column;gap:2px;padding:10px 11px 16px;background:var(--paper);color:var(--paper-ink);font:400 var(--t-micro)/1.45 var(--font-mono);letter-spacing:.04em;text-decoration:none;transform:rotate(calc(var(--tilt) * 1deg));-webkit-mask:var(--torn-sm);mask:var(--torn-sm);transition:transform .2s ease}
a.stub:hover,a.stub:focus-visible{transform:rotate(0) translateY(-3px)}
.stub__res{font:400 var(--t-stub)/1 var(--font-display);color:var(--paper-ink)}
.stub__res.is-w{color:var(--raps-red)}
.stub__score{font-weight:700;font-variant-numeric:tabular-nums}
.stub__top{opacity:.75}
.stub__go{margin-top:4px;font-weight:700;color:var(--raps-red)}

/* season toggle */
.toggle{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px}
.toggle a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--house-line);font:700 var(--t-micro)/1 var(--font-mono);letter-spacing:.12em;text-decoration:none}
.toggle a[aria-current="page"]{border-color:var(--raps-white)}

/* Jump rail: the archive's month anchors. Same chip as the season toggle, so
   the two rails read as one family; wraps rather than scrolling. */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border:1.5px solid var(--house-rule);font:700 var(--t-micro)/1 var(--font-mono);
  letter-spacing:.12em;text-decoration:none;color:var(--raps-silver)}
.jump a:hover,.jump a:focus-visible{border-color:var(--raps-white);color:var(--raps-white)}

/* The month heading holds the top of the screen while its stubs scroll past,
   so "which month am I in" never needs scrolling back to answer. */
.h-label--sticky{position:sticky;top:0;z-index:2;padding:10px 0;
  background:var(--raps-black)}
.h-sec[id]{scroll-margin-top:8px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* stat tables */
.h-scroll{overflow-x:auto}
.h-table{width:100%;border-collapse:collapse;font:400 var(--t-meta)/1.6 var(--font-mono);font-variant-numeric:tabular-nums}
.h-table caption{text-align:left;padding-bottom:8px}
.h-table thead th{padding:6px 8px;border-bottom:1px solid var(--house-rule);text-align:right;font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;color:var(--raps-silver)}
.h-table tbody th{padding:7px 8px;border-bottom:1px dotted var(--house-rule);text-align:right;font-size:var(--t-meta);font-weight:400;letter-spacing:normal;color:var(--raps-white)}
.h-table td{padding:7px 8px;border-bottom:1px dotted var(--house-rule);text-align:right;white-space:nowrap}
.h-table th:first-child,.h-table td:first-child{text-align:left}
.h-table a{display:block;padding:6px 0;margin:-6px 0;text-decoration:none}
.h-table a:hover,.h-table a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.h-table .is-w{font-weight:700}

.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:820px){
  .cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .house-main{padding-top:16px}
}

.about p{max-width:60ch;margin:0 0 16px;font:500 var(--t-lede)/1.4 var(--font-body)}
.about a{text-underline-offset:4px}

@media (max-width:480px){
  /* Rows wrap, so a label and its own value/blurb must group: without this the
     next row's label sits one plain line-height away and the list reads as prose. */
  .h-row{flex-wrap:wrap}
  .h-row + .h-row{margin-top:10px}
}

@media (prefers-reduced-motion:reduce){.stub{transition:none}}

/* Person page: chips, timeline */
.h-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 8px 0 0; padding: 0; }
.h-chips li { display: flex; align-items: center; min-height: 24px; font: 700 var(--t-micro)/1 var(--font-mono); letter-spacing: .08em; padding: 0 9px; border: 1px solid var(--house-rule); color: var(--raps-white); }
.h-chips a { display: flex; align-items: center; align-self: stretch; min-height: 24px; text-decoration: none; }
.h-chips a:hover { text-decoration: underline; text-underline-offset: 3px; }
.h-tl { list-style: none; margin: 0; padding: 0; }
.h-tl__row { display: grid; grid-template-columns: 106px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--house-rule); align-items: baseline; }
.h-tl__when { font: 700 var(--t-micro)/1.3 var(--font-mono); letter-spacing: .06em; color: var(--accent-on-dark); }
.h-tl__kind { display: block; font: 700 var(--t-micro)/1.4 var(--font-mono); letter-spacing: .1em; color: var(--raps-silver); }
.h-tl__title { display: block; font-size: var(--t-sm); }
.h-tl__detail { display: block; font-size: var(--t-meta); color: var(--raps-silver); margin-top: 2px; }
.h-tl__src { font: 700 var(--t-micro)/1 var(--font-mono); letter-spacing: .08em; color: var(--raps-silver); }
.h-note { font-size: var(--t-micro); color: var(--raps-silver); margin: 8px 0 0; }
.h-scroll--tall { max-height: 70vh; overflow-y: auto; }

/* Directory */
.h-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.h-filters__q { flex: 1 1 200px; }
.h-filters input, .h-filters select { min-height: 44px; background: var(--raps-black); color: var(--raps-white); border: 1px solid var(--house-line); padding: 8px 10px; font: 400 var(--t-meta)/1 var(--font-body); }
/* The label is the target, so it carries the height; the box grows with it.
   Measured 13x13 before this. */
/* The sort names itself; the filters name themselves through their options. */
.h-filters__sort { display: flex; align-items: center; min-height: 44px; gap: 8px;
  font: 700 var(--t-micro)/1 var(--font-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--raps-silver); }
.h-filters__check { display: flex; align-items: center; min-height: 44px; gap: 8px; font: 700 var(--t-micro)/1 var(--font-mono); letter-spacing: .08em; color: var(--raps-silver); }
.h-filters__check input { width: 24px; height: 24px; min-height: 0; accent-color: var(--raps-red); }
/* Four columns is 484px of a 358px content box, so on a phone role and years
   fold into one line under the name -- the same facts, half the room, and no
   horizontal scroll. Above 640px the columns come back. */
.h-dir__meta { display: none; }
.h-table--dir td:last-child { color: var(--raps-silver); }
@media (max-width: 640px) {
  .h-dir__wide { display: none; }
  .h-dir__meta { display: block; margin-top: 3px; font-size: var(--t-micro);
    letter-spacing: .06em; color: var(--raps-silver); white-space: normal; }
  .h-table--dir tbody th { white-space: normal; }
}
/* At the 12px floor "OCT 20 2021" measures 89px, so the column that fit
   10px text no longer does. Sized with headroom for a font fallback. */
@media (max-width: 640px) { .h-tl__row { grid-template-columns: 98px 1fr; } }

/* Rewind ------------------------------------------------------------ */
.rw-nav{display:flex;flex-wrap:wrap;gap:0 18px;align-items:center;margin:4px 0 0;
  font:700 var(--t-micro)/1.4 var(--font-mono);letter-spacing:.14em}
.rw-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.rw-nav a:hover{text-decoration:underline;text-underline-offset:4px}
/* The board. Below 900px the months are blocks that flow; at 900px they snap
   back into one 31-column year grid, label left, every month aligned. The cell
   is the unit in both: never under 24px, so it is a real target on a phone. */
.rw-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:20px 24px;margin-top:16px}
.rw-mo{display:grid;gap:6px}
.rw-month{margin:0;font:700 var(--t-micro)/1 var(--font-mono);letter-spacing:.16em;
  color:var(--raps-silver)}
.rw-days{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.rw-cell{display:grid;place-items:center;aspect-ratio:1;min-height:24px;
  border-radius:2px;font:700 var(--t-micro)/1 var(--font-mono);text-decoration:none;
  color:var(--raps-white);background:var(--house-rule)}
.rw-cell--0{background:transparent;box-shadow:inset 0 0 0 1px var(--house-rule);color:var(--raps-silver)}
.rw-cell--1{background:var(--house-rule)}
.rw-cell--2{background:var(--house-line)}
.rw-cell--3{background:var(--rw-band-3)}
.rw-cell--4{background:var(--rw-band-4)}
.rw-cell--5{background:var(--raps-red)}
.rw-cell--dead{background:none;box-shadow:none}
.rw-cell:hover{outline:1px solid var(--raps-white)}
/* Today, marked by rewind-today.js -- the page is static, so the build cannot. */
.rw-cell--today{outline:2px solid var(--raps-white);outline-offset:1px}
@media (min-width:900px){
  .rw-board{grid-template-columns:1fr;gap:3px}
  .rw-mo{grid-template-columns:34px 1fr;align-items:center;gap:0 10px}
  .rw-month{text-align:right}
  .rw-days{grid-template-columns:repeat(31,minmax(0,1fr))}
}
.rw-fold summary{cursor:pointer}
/* The person timeline's date becomes a Rewind link; tokens.css sets only
   a{color:inherit}, so without this the 336 person pages get underlines. */
.h-tl__when a{display:inline-flex;align-items:center;min-height:24px;text-decoration:none}
.h-tl__when a:hover{text-decoration:underline;text-underline-offset:3px}