/* Dosa Tycoon — public.css (HALL; first written by SHELL)
 * The two shareable pages (profile.html at /u/<handle>, hall.html at /hall). Ordinary scrolling
 * documents, phone first: one column from 320 px, wider layouts from 620 px and 900 px (the Hall: 1000 px). */

:root {
  --c-turmeric: #F5B301;
  --c-marigold: #FF9A1F;
  --c-kumkum: #C8102E;
  --c-maroon: #8E1B2D;
  --c-leaf: #2E8B3D;
  --c-coffee: #4A2C1A;
  --c-jaggery: #A8651E;
  --c-gold: #E8A33D;
  --c-cream: #FFF4DC;
  --c-jasmine: #FFFDF5;
  --c-ink: #3A1F12;
  --font-display: 'Lilita One', 'Baloo 2', system-ui, sans-serif;
  --font-ui: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: #21090E; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  color: var(--c-ink);
  background: #3B0F18 radial-gradient(120% 60% at 50% 0%, #6A1A26 0%, #3B0F18 55%, #21090E 100%) no-repeat;
  overflow-wrap: anywhere;
}

a { color: inherit; }
h1, h2, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
svg { display: block; width: 100%; height: 100%; }

:focus-visible { outline: 3px solid var(--c-turmeric); outline-offset: 2px; border-radius: 6px; }

/* ---------- top bar ---------- */

.pub-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px var(--gutter) 6px;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.pub-brand {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--c-turmeric);
  text-shadow: 0 2px 0 #21090E;
  white-space: nowrap;
}
.pub-brand span:last-child { color: var(--c-cream); }

.pub-nav { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--c-cream); white-space: nowrap; }
.pub-nav a:not(.pub-btn) { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; padding: 0 2px; border-bottom: 2px solid transparent; }
.pub-nav a:not(.pub-btn):hover { border-bottom-color: var(--c-turmeric); }

/* ---------- buttons ---------- */

.pub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 22px;
  border: 3px solid var(--c-ink);
  border-radius: 999px;
  background: linear-gradient(#FFC93A, var(--c-turmeric));
  box-shadow: 0 4px 0 var(--c-ink);
  font: 400 20px/1 var(--font-display);
  letter-spacing: .02em;
  color: var(--c-ink);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s, box-shadow .08s;
}
.pub-btn:hover { background: linear-gradient(#FFD75E, #FFBE1A); }
.pub-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-ink); }
.pub-btn--small { min-height: 44px; padding: 6px 16px; font-size: 17px; box-shadow: 0 3px 0 var(--c-ink); }
.pub-btn--ghost { background: var(--c-jasmine); }
.pub-btn--ghost:hover { background: #fff; }
.pub-btn svg { width: 22px; height: 22px; flex: none; }

.pub-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }

/* ---------- banner ---------- */

.pub-banner {
  position: relative;
  height: 120px;
  margin-top: -6px;
  overflow: hidden;
  border-bottom: 4px solid var(--c-ink);
  background: #F7C873;
}
.pub-banner svg { position: absolute; left: 50%; bottom: -8%; width: max(100%, 560px); height: auto; transform: translateX(-50%); }
.pub-banner::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(rgba(59, 15, 24, .35), rgba(59, 15, 24, 0) 45%); pointer-events: none; }

/* ---------- main column ---------- */

.pub-main {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  width: 100%;
  max-width: 880px;
  margin: -34px auto 0;
  padding: 0 var(--gutter) 28px;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pub-card {
  background: var(--c-jasmine);
  border: 3px solid var(--c-ink);
  border-radius: 18px;
  box-shadow: 0 5px 0 rgba(33, 9, 14, .55);
  padding: 16px;
}

.pub-state {
  margin: 0 auto;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--c-jasmine);
  border: 3px solid var(--c-ink);
  text-align: center;
}
noscript .pub-state { display: block; width: max-content; max-width: calc(100% - 28px); margin: 14px auto; }

.pub-h2 { font: 400 22px/1.1 var(--font-display); letter-spacing: .02em; color: var(--c-maroon); margin-bottom: 12px; }
.pub-muted { color: var(--c-jaggery); }

/* ---------- hero ---------- */

.pub-hero { display: flex; align-items: center; gap: 14px; background: var(--c-cream); }
.pub-hero__badge { flex: none; width: 92px; height: 92px; filter: drop-shadow(0 3px 0 rgba(58, 31, 18, .25)); }
.pub-hero__words { min-width: 0; flex: 1; }
.pub-hero__name { font: 400 30px/1.05 var(--font-display); letter-spacing: .01em; color: var(--c-kumkum); }
.pub-hero__name.is-long { font-size: 23px; }
.pub-hero__handle { color: var(--c-jaggery); font-size: 16px; margin-top: 2px; }
.pub-hero__rank { margin-top: 6px; font-size: 18px; }
.pub-hero__rank b { font-weight: 800; }
.pub-hero__won {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 2px solid var(--c-ink);
  background: var(--c-turmeric);
  font-weight: 800;
  font-size: 15px;
}
.pub-hero__since { margin-top: 6px; font-size: 15px; color: var(--c-jaggery); }

/* ---------- facts ---------- */

.pub-facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pub-fact { grid-column: span 3; }
.pub-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* the chain's headline: company value on a line of its own, three small facts under it */
.pub-facts--lead .pub-fact { grid-column: span 2; padding-left: 10px; padding-right: 8px; }
.pub-facts--lead .pub-fact:first-child { grid-column: 1 / -1; }
.pub-facts--lead .pub-fact:first-child dd { font-size: 28px; color: var(--c-kumkum); }
.pub-fact {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--c-cream);
  border: 2px solid rgba(58, 31, 18, .18);
}
.pub-fact dt { order: 2; font-size: 14px; color: var(--c-jaggery); line-height: 1.2; }
.pub-fact dd { order: 1; font: 400 22px/1.15 var(--font-display); color: var(--c-ink); overflow-wrap: normal; }
.pub-fact small { order: 3; font-size: 13px; color: var(--c-jaggery); }

/* ---------- outlets ---------- */

.pub-outlets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.pub-outlet {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  border: 2px solid var(--c-ink);
  background: #fff;
}
.pub-outlet__badge { flex: none; width: 60px; height: 60px; }
.pub-outlet__words { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pub-outlet__words b { font-weight: 800; font-size: 18px; }
.pub-outlet__town, .pub-outlet__size { font-size: 14px; color: var(--c-jaggery); }
.pub-outlet__line { display: flex; align-items: center; gap: 6px; }
.pub-outlet__line em { font-style: normal; font-weight: 800; font-size: 15px; }

.pub-stars { position: relative; display: inline-block; font-size: 16px; line-height: 1; letter-spacing: 1px; white-space: nowrap; }
.pub-stars b { font-weight: 400; color: rgba(58, 31, 18, .2); }
.pub-stars i { position: absolute; left: 0; top: 0; overflow: hidden; font-style: normal; color: var(--c-marigold); }

/* ---------- awards, chips ---------- */

.pub-awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pub-award { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pub-award__medal { flex: none; width: 40px; height: 40px; }
.pub-award__words { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.pub-award__words b { font-weight: 800; font-size: 15px; }
.pub-award__words span { font-size: 13px; color: var(--c-jaggery); }

.pub-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-chips li { padding: 4px 12px; border-radius: 999px; border: 2px solid var(--c-ink); background: var(--c-cream); font-size: 15px; }

/* ---------- share ---------- */

.pub-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pub-share .pub-h2 { flex: 1 1 100%; margin-bottom: 2px; }
.pub-share .pub-btn { min-height: 44px; padding: 6px 16px; font-size: 17px; box-shadow: 0 3px 0 var(--c-ink); }
.pub-share__done { flex: 1 1 100%; font-size: 15px; color: var(--c-leaf); }
.pub-share__done:empty { display: none; }
.pub-offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* ---------- call to action, notices, footer ---------- */

.pub-cta { text-align: center; color: var(--c-cream); padding: 10px 0 4px; }
.pub-cta p { margin-bottom: 12px; font-size: 18px; }

.pub-notice { text-align: center; padding: 26px 16px; }
.pub-notice__title { font: 400 28px/1.1 var(--font-display); color: var(--c-kumkum); margin-bottom: 8px; }
.pub-notice__text { max-width: 30em; margin: 0 auto; }
.pub-notice .pub-h2 { margin-bottom: 8px; }

.pub-foot {
  flex: none;
  padding: 16px var(--gutter) max(16px, env(safe-area-inset-bottom));
  text-align: center;
  font-size: 14px;
  color: rgba(255, 244, 220, .7);
}
.pub-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-turmeric); text-decoration: none; }
.pub-foot a.pub-foot__quiet { display: flex; justify-content: center; width: max-content; min-width: 64px; margin: 0 auto; color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 244, 220, .35); text-underline-offset: 3px; }
.pub-foot a.pub-foot__quiet:hover { color: var(--c-cream); }

/* ---------- wider screens ---------- */

@media (min-width: 620px) {
  :root { --gutter: 22px; }
  body { font-size: 18px; }
  .pub-brand { font-size: 30px; }
  .pub-banner { height: 170px; }
  .pub-main { margin-top: -48px; gap: 18px; }
  .pub-card { padding: 22px; }
  .pub-hero { gap: 22px; }
  .pub-hero__badge { width: 128px; height: 128px; }
  .pub-hero__name { font-size: 42px; }
  .pub-hero__name.is-long { font-size: 34px; }
  .pub-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pub-facts--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pub-facts .pub-fact, .pub-facts--lead .pub-fact:first-child, .pub-fact:last-child:nth-child(odd) { grid-column: auto; padding: 10px 12px; }
  .pub-facts--lead .pub-fact:first-child dd { font-size: 26px; }
  .pub-fact dd { font-size: 26px; }
  .pub-outlets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-awards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pub-share .pub-h2 { flex: 0 0 auto; margin: 0 8px 0 0; }
}

@media (min-width: 900px) {
  .pub-banner { height: 220px; }
  .pub-main { margin-top: -64px; }
  .pub-outlets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pub-awards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 359px) {
  .pub-nav a:not(.pub-btn) { font-size: 15px; }
  .pub-brand { font-size: 21px; }
  .pub-hero__badge { width: 72px; height: 72px; }
  .pub-hero__name { font-size: 26px; }
  .pub-hero__name.is-long { font-size: 21px; }
  .pub-fact dd { font-size: 19px; }
  .pub-facts--lead .pub-fact:first-child dd { font-size: 25px; }
  .pub-awards { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pub-btn { transition: none; }
}

/* ---------- v4: modes, levels, medals, leaderboards by mode ---------- */

.pub-hero__mode { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 12px 2px 4px; border-radius: 999px; border: 2px solid var(--c-ink); background: #fff; font-weight: 800; font-size: 15px; }
.pub-hero__modebadge { flex: none; width: 28px; height: 28px; }
.pub-count { margin-left: 10px; font: 800 14px/1 var(--font-ui); letter-spacing: 0; color: var(--c-jaggery); }
.pub-medal { flex: none; display: block; width: 40px; height: 40px; }
/* on a phone the headline numbers sit two to a row; money gets a row to itself, and a last odd tile fills its row */
@media (max-width: 619px) {
  .pub-facts--lead { display: flex; flex-wrap: wrap; }
  .pub-facts--lead .pub-fact { flex: 1 1 calc(50% - 5px); }
  .pub-facts--lead .pub-fact--wide { flex-basis: 100%; }
}
.pub-awards + .pub-facts { margin-top: 12px; }

@media (min-width: 620px) {
}

/* ---------- shared by both pages: hidden things, text for screen readers, numbers that must not break ---------- */

[hidden] { display: none !important; }
.pub-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
:root { --c-sub: #8A5216; }
.pub-fact { position: relative; }
.pub-fact__value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pub-hero__name bdi { overflow-wrap: anywhere; }

/* ---------- profile: a place on a Hall of Fame board ("#7"), and the way into the Hall ---------- */

.pub-place {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  vertical-align: middle;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.pub-place__pill {
  display: inline-block;
  padding: 4px 8px 3px;
  border: 2px solid var(--c-ink);
  border-radius: 999px;
  background: var(--c-jasmine);
  box-shadow: 0 2px 0 var(--c-ink);
  font: 400 14px/1.1 var(--font-display);
  letter-spacing: .03em;
  color: var(--c-ink);
  white-space: nowrap;
  transition: transform .08s;
}
.pub-place.is-p1 .pub-place__pill { background: linear-gradient(#FFE27A, var(--c-turmeric)); }
.pub-place.is-p2 .pub-place__pill { background: linear-gradient(#FFFFFF, #C3CFDA); }
.pub-place.is-p3 .pub-place__pill { background: linear-gradient(#FFDDBF, #E09A5F); }
@media (hover: hover) { .pub-place:hover .pub-place__pill { transform: translateY(-2px); } }
.pub-place__label { font-weight: 800; font-size: 15px; color: var(--c-maroon); text-decoration: underline; text-decoration-color: var(--c-turmeric); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.pub-hero__rank .pub-place { margin: -12px 0 -12px 4px; }
.pub-h2 .pub-place { margin: -14px 0 -12px 6px; }
.pub-placeline { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 8px; }
.pub-placeline .pub-place { justify-content: flex-start; }

/* on a stat tile the whole tile is the link, and the place is pinned to its corner like a rosette */
.pub-facts .pub-fact dd.pub-fact__place { order: 9; font-size: 0; line-height: 0; }
.pub-fact .pub-place { position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; display: block; border-radius: 12px; }
.pub-fact .pub-place__pill { position: absolute; top: -9px; right: -5px; }
.pub-fact.has-place { border-color: rgba(58, 31, 18, .34); }
.pub-facts.has-places .pub-fact { padding-top: 17px; }
.pub-facts.has-places { row-gap: 14px; margin-top: 4px; }
@media (hover: hover) { .pub-fact .pub-place:hover { box-shadow: inset 0 0 0 2px var(--c-turmeric); } }

.pub-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 800;
  color: var(--c-maroon);
  text-decoration: underline;
  text-decoration-color: var(--c-turmeric);
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}
.pub-more::after { content: '\203A'; margin-left: 6px; font-size: 1.3em; line-height: .8; }
.pub-moreline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 14px; margin-top: 6px; font-size: 15px; color: var(--c-sub); }
.pub-main > .pub-moreline { justify-content: center; margin-top: 0; }
.pub-main > .pub-moreline .pub-more { color: var(--c-turmeric); }
.pub-cta .pub-actions { margin-top: 0; }

/* ---------- hall of fame ---------- */

.pub-hero--hall { justify-content: center; gap: 12px; padding: 8px 14px; text-align: center; }
.pub-hero--hall .pub-hero__words { flex: 0 1 auto; }
.pub-hero--hall .pub-hero__name { font-size: 28px; }
.pub-hero--hall .pub-hero__rank { display: none; margin-top: 2px; font-size: 15px; color: var(--c-sub); }
.pub-hero__deco { flex: none; width: 36px; height: 36px; }
.pub-hero__deco:last-child { transform: scaleX(-1); }

.hof, .hof-main, .hof-board { display: flex; flex-direction: column; min-width: 0; }
.hof { gap: 12px; }
.hof-main { gap: 14px; }
.hof-board { gap: 12px; }
.hof-sharehost:empty { display: none; }

/* -- the picker: on a phone one strip that scrolls sideways, chips grouped under small labels -- */

.hof-pick { position: relative; margin: 0 calc(-1 * var(--gutter)); }
.hof-pick__scroll {
  display: flex;
  gap: 16px;
  padding: 2px var(--gutter) 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding: 0 58px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hof-pick__scroll::-webkit-scrollbar { display: none; }
.hof-group { flex: none; display: flex; flex-direction: column; gap: 6px; }
.hof-group__label { position: sticky; left: calc(var(--gutter) + 6px); align-self: flex-start; margin-left: 6px; font: 800 12px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--c-turmeric); }
.hof-group__list { display: flex; gap: 8px; }
.hof-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 15px;
  border: 3px solid var(--c-ink);
  border-radius: 999px;
  background: var(--c-jasmine);
  box-shadow: 0 3px 0 var(--c-ink);
  font: 400 16px/1 var(--font-display);
  letter-spacing: .02em;
  color: var(--c-ink);
  white-space: nowrap;
  text-decoration: none;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s, box-shadow .08s;
}
@media (hover: hover) { .hof-chip:hover { background: #fff; } }
.hof-chip[aria-current] { background: linear-gradient(#FFC93A, var(--c-turmeric)); transform: translateY(2px); box-shadow: 0 1px 0 var(--c-ink); }

/* more boards this way: the strip fades out at an end that has more, and a round arrow sits on the fade */
.hof-pick.can-next .hof-pick__mask { -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(90deg, #000 calc(100% - 54px), transparent calc(100% - 10px)); mask-image: linear-gradient(#000, #000), linear-gradient(90deg, #000 calc(100% - 54px), transparent calc(100% - 10px)); }
.hof-pick.can-prev .hof-pick__mask { -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(90deg, transparent 10px, #000 54px); mask-image: linear-gradient(#000, #000), linear-gradient(90deg, transparent 10px, #000 54px); }
.hof-pick.can-prev.can-next .hof-pick__mask { -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(90deg, transparent 10px, #000 54px, #000 calc(100% - 54px), transparent calc(100% - 10px)); mask-image: linear-gradient(#000, #000), linear-gradient(90deg, transparent 10px, #000 54px, #000 calc(100% - 54px), transparent calc(100% - 10px)); }
/* (the first mask layer keeps the row of group labels at full strength; only the chips fade. The mask is on a box
 * around the scrolling strip, not on the strip itself: a mask on a scrolling box has misdrawn on iOS) */
.hof-pick__mask { -webkit-mask-size: 100% 21px, 100% 100%; mask-size: 100% 21px, 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.hof-pick__arrow {
  position: absolute;
  z-index: 2;
  bottom: 9px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 3px solid var(--c-ink);
  border-radius: 50%;
  background: linear-gradient(#FFC93A, var(--c-turmeric));
  box-shadow: 0 3px 0 var(--c-ink);
  color: var(--c-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hof-pick__arrow svg { width: 22px; height: 22px; }
.hof-pick__arrow--prev { left: max(6px, env(safe-area-inset-left)); }
.hof-pick__arrow--prev svg { transform: scaleX(-1); }
.hof-pick__arrow--next { right: max(6px, env(safe-area-inset-right)); }
.hof-pick.can-prev .hof-pick__arrow--prev, .hof-pick.can-next .hof-pick__arrow--next { display: flex; }
.hof-pick__arrow:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--c-ink); }

/* -- the board's own header: what is ranked, the mode filter, where you stand, share -- */

.hof-note { padding: 9px 14px; border: 2px dashed rgba(255, 244, 220, .5); border-radius: 12px; font-size: 15px; text-align: center; color: var(--c-cream); }
.hof-head { padding: 14px; background: var(--c-cream); }
.hof-head__top { display: flex; align-items: center; gap: 12px; }
.hof-head__icon { flex: none; width: 48px; height: 48px; }
.hof-head__words { flex: 1; min-width: 0; }
.hof-head__title { font: 400 25px/1.05 var(--font-display); letter-spacing: .01em; color: var(--c-kumkum); }
.hof-head__hint { margin-top: 3px; font-size: 15px; line-height: 1.25; color: var(--c-sub); }
.hof-modes { display: flex; margin-top: 12px; border: 3px solid var(--c-ink); border-radius: 14px; background: var(--c-jasmine); overflow: hidden; }
.hof-mode {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 3px;
  border-left: 2px solid rgba(58, 31, 18, .2);
  font: 800 14px/1 var(--font-ui);
  color: var(--c-ink);
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.hof-mode:first-child { border-left: 0; }
@media (hover: hover) { .hof-mode:hover { background: #fff; } }
.hof-mode[aria-current] { background: linear-gradient(#FFC93A, var(--c-turmeric)); }
.hof-mode:focus-visible { outline-offset: -4px; border-radius: 10px; }
.hof-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin-top: 12px; }
.hof-meta__left { display: flex; align-items: center; min-width: 0; }
.hof-status { font-weight: 800; font-size: 15px; color: var(--c-sub); }
.hof-you {
  min-height: 44px;
  padding: 6px 16px;
  border: 3px solid var(--c-ink);
  border-radius: 999px;
  background: #FFE9A8;
  box-shadow: 0 3px 0 var(--c-ink);
  font: 400 17px/1 var(--font-display);
  letter-spacing: .02em;
  color: var(--c-kumkum);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hof-share { flex: none; min-height: 44px; padding: 6px 16px; font-size: 17px; box-shadow: 0 3px 0 var(--c-ink); white-space: nowrap; }
.hof-alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 14px; border: 3px solid var(--c-ink); border-radius: 14px; background: #FFE1D6; font-size: 15px; }
.hof-alert p { flex: 1 1 180px; }
.hof-alert .pub-btn { min-height: 44px; }
.hof-notice .pub-h2 { font-size: 24px; color: var(--c-kumkum); }

/* -- the list: three plaques, then the rest as one ledger -- */

.hof-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
.hof-pod, .hof-row { position: relative; min-width: 0; }

.hof-who { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 44px; border-radius: 8px; line-height: 1.2; color: var(--c-ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.hof-name { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; font-weight: 800; font-size: 17px; }
.hof-name bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .hof-who:hover .hof-name bdi { text-decoration: underline; text-decoration-color: var(--c-turmeric); text-decoration-thickness: 3px; } }
.hof-crown { flex: none; width: 22px; height: 15px; }
.hof-youtag { flex: none; padding: 3px 8px 2px; border: 2px solid var(--c-ink); border-radius: 999px; background: var(--c-kumkum); font: 800 12px/1.1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--c-jasmine); }
.hof-sub { display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; font-weight: 600; font-size: 13px; color: var(--c-sub); }
.hof-sub > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-sub > span:last-child:empty { display: none; }
.hof-sub__mode { flex: none; width: 18px; height: 18px; }
.hof-emblem { flex: none; display: block; }
.hof-value { font: 400 18px/1.15 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--c-ink); text-align: right; white-space: nowrap; }
.hof-star { color: var(--c-marigold); }
.hof-value--medals { display: inline-flex; align-items: center; justify-content: flex-end; gap: 9px; }
.hof-medalct { display: inline-flex; align-items: center; gap: 4px; }
.hof-medalct i { width: 17px; height: 17px; border: 2px solid var(--c-ink); border-radius: 50%; }
.hof-medalct.is-gold i { background: radial-gradient(circle at 35% 30%, #FFF4C4, #F5B301 70%); }
.hof-medalct.is-silver i { background: radial-gradient(circle at 35% 30%, #FFFFFF, #AEBBC8 70%); }
.hof-medalct.is-bronze i { background: radial-gradient(circle at 35% 30%, #FFE7CF, #C97A3C 70%); }

.hof-pod {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 14px 0 10px;
  padding: 18px 10px 12px;
  border: 3px solid var(--c-ink);
  border-radius: 18px;
  background: var(--c-cream);
  box-shadow: 0 5px 0 rgba(33, 9, 14, .55), inset 0 0 0 3px rgba(255, 255, 255, .55);
  text-align: center;
}
.hof-pod.is-gold { background: linear-gradient(165deg, #FFF6C9 0%, #FFD95C 48%, #F5B301 100%); }
.hof-pod.is-silver { background: linear-gradient(165deg, #FFFFFF 0%, #E4EBF2 48%, #B4C1CE 100%); }
.hof-pod.is-bronze { background: linear-gradient(165deg, #FFEAD6 0%, #F2B98A 48%, #D98A4B 100%); }
.hof-pod .hof-place {
  position: absolute;
  top: -14px;
  left: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 3px solid var(--c-ink);
  border-radius: 50%;
  background: var(--c-kumkum);
  box-shadow: 0 2px 0 var(--c-ink);
  font: 400 20px/1 var(--font-display);
  color: var(--c-jasmine);
}
.hof-pod.is-silver .hof-place { background: #55616E; }
.hof-pod.is-bronze .hof-place { background: #8A4B1F; }
.hof-pod__crown { position: absolute; top: -25px; left: 50%; width: 46px; height: 32px; margin-left: -23px; transform: rotate(-5deg); }
.hof-pod .hof-emblem { width: 64px; height: 64px; filter: drop-shadow(0 3px 0 rgba(58, 31, 18, .22)); }
.hof-pod .hof-who { align-items: center; width: 100%; }
.hof-pod .hof-sub { color: #5E3712; }
.hof-pod .hof-value { max-width: 100%; margin-top: 2px; overflow: hidden; font-size: 21px; color: var(--c-maroon); text-align: center; }
.hof-pod .hof-value--medals { justify-content: center; }
.hof-pod.is-me { box-shadow: 0 5px 0 rgba(33, 9, 14, .55), inset 0 0 0 3px rgba(255, 255, 255, .55), 0 0 0 3px var(--c-kumkum); }

/* first place takes the full width on a phone: emblem on the left, name and number beside it */
.hof-list .is-i1 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'emblem who' 'emblem value';
  align-items: center;
  column-gap: 14px;
  row-gap: 0;
  margin-top: 26px;
  padding: 16px 14px 14px 18px;
  text-align: left;
}
.hof-list .is-i1 .hof-emblem { grid-area: emblem; width: 84px; height: 84px; }
.hof-list .is-i1 .hof-who { grid-area: who; align-items: flex-start; align-self: end; }
.hof-list .is-i1 .hof-name { font-size: 20px; }
.hof-list .is-i1 .hof-value { grid-area: value; align-self: start; justify-self: start; margin-top: 0; font-size: 28px; text-align: left; }
.hof-list .is-i1 .hof-pod__crown { left: 60px; }
.hof-list.has-2 .is-i2 { grid-column: 1 / -1; }

.hof-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 30px 36px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  min-height: 62px;
  padding: 6px 12px 6px 8px;
  border: solid var(--c-ink);
  border-width: 0 3px;
  background: var(--c-jasmine);
}
.hof-row::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; border-bottom: 2px dashed rgba(58, 31, 18, .16); pointer-events: none; }
.hof-row.is-head { border-top-width: 3px; border-radius: 18px 18px 0 0; }
.hof-row.is-tail { margin-bottom: 5px; border-bottom-width: 3px; border-radius: 0 0 18px 18px; box-shadow: 0 5px 0 rgba(33, 9, 14, .55); }
.hof-row.is-head.is-tail { border-radius: 18px; }
.hof-row.is-tail::after { content: none; }
.hof-row .hof-place { white-space: nowrap; font: 400 18px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--c-sub); text-align: center; }
.hof-row.is-gold .hof-place, .hof-row.is-silver .hof-place, .hof-row.is-bronze .hof-place { font-size: 22px; color: var(--c-kumkum); }
.hof-row .hof-emblem { width: 36px; height: 36px; }
.hof-row.is-me { background: #FFE9A8; }
.hof-ctx { display: none; }

/* -- a board on its way: the same boxes, shimmering -- */

.hof-skel {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(58, 31, 18, .1) 25%, rgba(58, 31, 18, .2) 37%, rgba(58, 31, 18, .1) 63%);
  background-size: 400% 100%;
  animation: hof-shimmer 1.3s ease-in-out infinite;
}
@keyframes hof-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.hof-skel--place { justify-self: center; width: 20px; height: 20px; border-radius: 50%; }
.hof-skel--emblem { width: 36px; height: 36px; border-radius: 50%; }
.hof-skel--name { width: 62%; height: 15px; }
.hof-skel--sub { width: 38%; height: 11px; margin-top: 7px; }
.hof-skel--value { width: 76px; height: 18px; }
.hof-pod .hof-skel--place { position: absolute; top: -14px; left: -6px; width: 38px; height: 38px; background: var(--c-cream); border: 3px solid var(--c-ink); animation: none; }
.hof-pod .hof-skel--emblem { width: 64px; height: 64px; }
.hof-pod .hof-skel--name { width: 70%; }
.hof-pod .hof-skel--sub { width: 48%; }
.hof-pod .hof-skel--value { width: 58%; height: 22px; margin-top: 4px; }
.hof-list .is-i1 .hof-skel--emblem { grid-area: emblem; width: 84px; height: 84px; }
.hof-list .is-i1 .hof-skel--value { grid-area: value; width: 130px; height: 30px; }

@media (max-width: 359px) {
  .pub-hero__deco { width: 30px; height: 30px; }
  .pub-hero--hall .pub-hero__name { font-size: 25px; }
  .hof-head { padding: 12px; }
  .hof-head__top { gap: 10px; }
  .hof-head__icon { width: 38px; height: 38px; }
  .hof-head__title { font-size: 23px; }
  .hof-head__hint { font-size: 14px; }
  .hof-modes, .hof-meta { margin-top: 10px; }
  .hof-status { font-size: 14px; line-height: 1.15; }
  .hof-chip { padding: 6px 13px; font-size: 15px; }
  .hof-mode { font-size: 13px; padding: 0 2px; }
  .hof-share, .hof-you { padding-left: 13px; padding-right: 13px; }
  .hof-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .hof-row .hof-emblem { display: none; }
  .hof-list .is-i1 .hof-emblem { width: 68px; height: 68px; }
  .hof-list .is-i1 .hof-pod__crown { left: 52px; }
  .hof-list .is-i1 { column-gap: 12px; }
}
@media (max-width: 479px) {
  .hof-row .hof-value.is-long { font-size: 15px; }
  .hof-row .hof-value.is-xlong { font-size: 13px; }
}

@media (min-width: 620px) {
  .pub-hero--hall { padding: 16px 22px; gap: 18px; }
  .pub-hero--hall .pub-hero__name { font-size: 40px; }
  .pub-hero--hall .pub-hero__rank { display: block; font-size: 17px; }
  .pub-hero__deco { width: 56px; height: 56px; }
  .hof { gap: 16px; }
  .hof-main { gap: 18px; }
  .hof-board { gap: 14px; }
  .hof-head { padding: 18px 22px; }
  .hof-head__icon { width: 60px; height: 60px; }
  .hof-head__title { font-size: 32px; }
  .hof-head__hint { font-size: 16px; }
  .hof-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: center; }
  .hof-head__top { grid-column: 1 / -1; }
  .hof-modes { grid-column: 1; justify-self: start; min-width: 380px; }
  .hof-mode { padding: 0 12px; font-size: 15px; }
  .hof-meta { grid-column: 1 / -1; }
  .hof-modes:not([hidden]) + .hof-meta { grid-column: 2; }

  .hof-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; align-items: end; }
  .hof-list.has-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hof-list.has-1 { grid-template-columns: minmax(0, 1fr); }
  .hof-pod { padding: 20px 14px 14px; margin-bottom: 14px; }
  .hof-pod .hof-emblem { width: 76px; height: 76px; }
  .hof-pod .hof-name { font-size: 19px; }
  .hof-pod .hof-sub { font-size: 14px; }
  .hof-pod .hof-value { font-size: 24px; }
  .hof-list .is-i1 { grid-column: 2; grid-row: 1; display: flex; padding: 26px 14px 24px; text-align: center; }
  .hof-list .is-i1 .hof-emblem { width: 104px; height: 104px; }
  .hof-list .is-i1 .hof-who { align-items: center; align-self: auto; }
  .hof-list .is-i1 .hof-name { font-size: 22px; }
  .hof-list .is-i1 .hof-value { align-self: auto; margin-top: 2px; font-size: 32px; text-align: center; }
  .hof-list .is-i1 .hof-pod__crown { left: 50%; }
  .hof-list.has-3 .is-i2 { grid-column: 1; grid-row: 1; }
  .hof-list.has-3 .is-i3 { grid-column: 3; grid-row: 1; }
  .hof-list.has-2 .is-i1, .hof-list.has-1 .is-i1 { grid-column: 1; }
  .hof-list.has-2 .is-i2 { grid-column: 2; grid-row: 1; }
  .hof-row { grid-template-columns: 44px 44px minmax(0, 1fr) auto minmax(110px, auto); column-gap: 14px; min-height: 66px; padding: 6px 22px 6px 12px; }
  .hof-row::after { left: 22px; right: 22px; }
  .hof-row .hof-emblem { width: 44px; height: 44px; }
  .hof-row .hof-place { font-size: 20px; }
  .hof-name { font-size: 19px; }
  .hof-sub { font-size: 14px; }
  .hof-value { font-size: 21px; }
  .hof-ctx { display: block; font-size: 14px; font-weight: 600; color: var(--c-sub); text-align: right; white-space: nowrap; }
  .hof-skel--emblem { width: 44px; height: 44px; }
  .hof-pod .hof-skel--emblem { width: 76px; height: 76px; }
  .hof-list .is-i1 .hof-skel--emblem { width: 104px; height: 104px; }
  .hof-list .is-i1 .hof-skel--value { width: 58%; height: 34px; }
}

/* a tablet held upright has room to lay every board out at once: one row of chips per group */
@media (min-width: 620px) and (max-width: 999px) and (min-height: 600px) {
  .hof-pick { margin: 0; padding: 14px 16px; border: 2px solid rgba(255, 244, 220, .2); border-radius: 18px; background: rgba(33, 9, 14, .4); }
  .hof-pick .hof-pick__scroll { flex-direction: column; gap: 10px; padding: 0; overflow: visible; }
  .hof-pick .hof-pick__mask { -webkit-mask-image: none; mask-image: none; }
  .hof-group { flex-direction: row; align-items: flex-start; gap: 10px; }
  .hof-group__label { position: static; flex: none; width: 76px; margin: 0; padding: 17px 0 0; }
  .hof-group__list { flex-wrap: wrap; row-gap: 10px; }
  .hof-chip[aria-current] { transform: none; box-shadow: 0 3px 0 var(--c-ink); }
  .hof-pick .hof-pick__arrow { display: none; }
}

/* a desktop gets the boards as a list down the side, and the board beside it */
@media (min-width: 1000px) {
  body[data-page='hall'] .pub-main { max-width: 1180px; }
  .hof { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 22px; align-items: start; }
  .hof-pick {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: 0;
    padding: 16px 12px;
    overflow-y: auto;
    border: 3px solid var(--c-ink);
    border-radius: 18px;
    background: var(--c-cream);
    box-shadow: 0 5px 0 rgba(33, 9, 14, .55);
    scrollbar-width: thin;
  }
  .hof-pick .hof-pick__scroll { flex-direction: column; gap: 14px; padding: 0; overflow: visible; }
  .hof-pick .hof-pick__mask { -webkit-mask-image: none; mask-image: none; }
  .hof-group { gap: 4px; }
  .hof-group__label { position: static; margin-left: 12px; color: var(--c-maroon); }
  .hof-group__list { flex-direction: column; gap: 2px; }
  .hof-chip { display: flex; width: 100%; padding: 6px 12px; border-width: 2px; border-color: transparent; border-radius: 12px; background: transparent; box-shadow: none; font-size: 17px; }
  @media (hover: hover) { .hof-chip:hover { border-color: rgba(58, 31, 18, .22); background: #fff; } }
  .hof-chip[aria-current] { border-color: var(--c-ink); background: linear-gradient(#FFC93A, var(--c-turmeric)); box-shadow: 0 2px 0 var(--c-ink); transform: none; }
  .hof-pick .hof-pick__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hof-skel { animation: none; }
  .hof-chip, .pub-place__pill { transition: none; }
  .hof-pick__scroll { scroll-behavior: auto; }
}

/* a phone on its side: less sky above the Hall, so the board is in sight */
@media (max-height: 520px) and (min-width: 560px) {
  body[data-page='hall'] .pub-banner { height: 76px; }
  body[data-page='hall'] .pub-main { margin-top: -28px; }
  .pub-hero--hall { padding: 6px 18px; }
  .pub-hero--hall .pub-hero__name { font-size: 28px; }
  .pub-hero--hall .pub-hero__rank { display: none; }
  .pub-hero__deco { width: 36px; height: 36px; }
}

/* the Hall's share card: its heading has a line to itself, so the four buttons stay together */
@media (min-width: 620px) {
  .hof-sharehost .pub-share .pub-h2 { flex: 1 1 100%; margin: 0 0 2px; }
}

/* ---------- 4.1: several careers ---------- */

/* a control answers a tap at once: no double-tap zoom on it */
.pub-btn, .pub-place, .pub-more, .pub-nav a, .hof-chip, .hof-mode, .hof-you, .hof-who, .hof-pick__arrow { touch-action: manipulation; }

/* on a board: which of the player's careers this is, quietly, under their name */
.hof-career { display: flex; min-width: 0; max-width: 100%; font-weight: 700; font-size: 13px; line-height: 1.1; color: var(--c-maroon); }
.hof-career::before { content: '\201C'; flex: none; }
.hof-career::after { content: '\201D'; flex: none; }
.hof-career bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-pod .hof-career { justify-content: center; }
.hof-list .is-i1 .hof-career { justify-content: flex-start; }

/* on a profile: the career it shows, and a place another career earned */
.pub-hero__career { display: flex; align-items: baseline; gap: 7px; min-width: 0; margin-top: 3px; font-size: 16px; }
.pub-hero__career span { flex: none; font: 800 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--c-sub); }
.pub-hero__career bdi { min-width: 0; font-weight: 800; color: var(--c-maroon); overflow-wrap: anywhere; }
.pub-place__with { margin-left: 2px; font: 700 13px/1.2 var(--font-ui); letter-spacing: 0; color: var(--c-sub); }
.pub-fact small.pub-fact__with { order: 4; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-sub); }

/* the player's other careers: small plaques, not links */
.pub-careers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pub-career { min-width: 0; padding: 12px; border: 2px solid var(--c-ink); border-radius: 14px; background: #fff; }
.pub-career.is-over { background: #F7F0E3; }
.pub-career__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pub-career__badge { flex: none; width: 52px; height: 52px; }
.pub-career__words { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pub-career__name { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 800; font-size: 18px; }
.pub-career__name bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-career__sub { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 14px; color: var(--c-sub); }
.pub-career__sub > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-career__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.pub-career__facts > div { display: flex; flex-direction: column; min-width: 0; padding: 6px 10px; border-radius: 10px; background: var(--c-cream); }
.pub-career__facts dt { order: 2; font-size: 13px; line-height: 1.2; color: var(--c-sub); }
.pub-career__facts dd { order: 1; font: 400 18px/1.15 var(--font-display); color: var(--c-ink); }
.pub-career__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; font-size: 13px; color: var(--c-sub); }
.pub-career__tag { padding: 3px 10px 2px; border: 2px solid var(--c-ink); border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--c-ink); white-space: nowrap; }
.pub-career__tag.is-tier { background: var(--c-turmeric); }
.pub-career__tag.is-over { background: #E9DFCB; }

/* ---------- tablets and anything larger: bigger targets (48 px) and easier text ---------- */

@media (min-width: 620px) {
  .pub-brand, .pub-nav a:not(.pub-btn), .pub-foot a, .pub-btn--small, .pub-share .pub-btn, .pub-more { min-height: 48px; }
  .pub-place { min-width: 48px; min-height: 48px; }
  .pub-hero__rank .pub-place { margin: -14px 0 -14px 4px; }
  .pub-h2 .pub-place { margin: -16px 0 -14px 6px; }
  .hof-chip, .hof-mode, .hof-you, .hof-share, .hof-who, .hof-alert .pub-btn, .hof-meta { min-height: 48px; }
  .hof-pick__arrow { width: 48px; height: 48px; }
  .hof-chip { font-size: 17px; }
  .hof-mode { font-size: 16px; }
  .hof-group__label { font-size: 13px; }
  .hof-head__hint { font-size: 17px; }
  .hof-status { font-size: 16px; }
  .hof-sub, .hof-ctx { font-size: 15px; }
  .hof-pod .hof-sub { font-size: 15px; }
  .hof-career { font-size: 14px; }
  .hof-youtag { font-size: 13px; }
  .hof-sub__mode { width: 20px; height: 20px; }
  .hof-note, .hof-alert { font-size: 16px; }
  .pub-foot { font-size: 15px; }
  .pub-fact dt { font-size: 15px; }
  .pub-fact small, .pub-place__with { font-size: 14px; }
  .pub-place__pill { font-size: 15px; }
  .pub-place__label { font-size: 16px; }
  .pub-count { font-size: 15px; }
  .pub-hero__handle { font-size: 17px; }
  .pub-hero__since, .pub-moreline, .pub-share__done { font-size: 16px; }
  .pub-hero__mode, .pub-hero__won { font-size: 16px; }
  .pub-hero__career { font-size: 18px; }
  .pub-hero__career span { font-size: 13px; }
  .pub-outlet__town, .pub-outlet__size { font-size: 15px; }
  .pub-outlet__line em { font-size: 16px; }
  .pub-award__words b { font-size: 16px; }
  .pub-award__words span { font-size: 14px; }
  .pub-chips li { font-size: 16px; }
  .pub-careers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pub-career { padding: 14px; }
  .pub-career__name { font-size: 19px; }
  .pub-career__sub { font-size: 15px; }
  .pub-career__facts dt, .pub-career__tags, .pub-career__tag { font-size: 14px; }
  .pub-career__facts dd { font-size: 20px; }
}

/* the side list holds more boards than a short screen shows: a scrollbar that stays in sight, and a fade where it goes on */
@media (min-width: 1000px) {
  .hof-pick { scrollbar-color: rgba(58, 31, 18, .4) transparent; }
  .hof-pick::-webkit-scrollbar { width: 10px; }
  .hof-pick::-webkit-scrollbar-thumb { border: 2px solid var(--c-cream); border-radius: 8px; background: rgba(58, 31, 18, .4); }
  .hof-pick.can-down::after { content: ''; position: sticky; bottom: -16px; display: block; height: 48px; margin: -48px -12px -16px; border-radius: 0 0 14px 14px; background: linear-gradient(rgba(255, 244, 220, 0), var(--c-cream) 78%); pointer-events: none; }
}
/* duel< ---- 4.8: the Duels tile on a public profile (dev/DUELS.md 1.11): a count in the heading and the last results as
 * plain rows. A won duel has a band down its edge as well as its colour, and never colour alone: the
 * row begins with the word "Won". Drawn only for a player who has finished a duel, from a server with duels on. */
.pub-duels__list { display: flex; flex-direction: column; gap: 8px; }
.pub-duels__row { padding: 9px 14px 10px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--c-coffee); background: var(--c-cream); border: 2px solid var(--c-ink); border-radius: 14px; overflow-wrap: anywhere; }
.pub-duels__row.is-won { background: #FFF1B8; box-shadow: inset 5px 0 0 var(--c-kumkum); }
@media (max-width: 479px) { .pub-duels__row { font-size: 15px; padding: 8px 12px 9px; } }
/* >duel */

/* ---- leagues (dev/LEAGUES.md; js/public.js; nothing of this is drawn while leagues are off): today's Hall of Fame and
 * the Founders' League as two tabs, the line that points to the other, a kept Founders' row, the "Founding member" mark */
.hof-leagues { display: flex; margin: 0 0 8px; border: 3px solid var(--c-ink); border-radius: 16px; background: var(--c-jasmine); overflow: hidden; box-shadow: 0 4px 0 var(--c-ink); }
.hof-leagues[hidden] { display: none; }
.hof-league {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 8px;
  border-left: 2px solid rgba(58, 31, 18, .2);
  font: 400 19px/1.05 var(--font-display);
  letter-spacing: .3px;
  color: var(--c-ink);
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.hof-league:first-child { border-left: 0; }
@media (hover: hover) { .hof-league:hover { background: #fff; } }
.hof-league[aria-current] { background: linear-gradient(#FFC93A, var(--c-turmeric)); }
.hof-league:focus-visible { outline-offset: -4px; border-radius: 12px; }
.hof-leagues__note { margin: 0 0 10px; padding: 0 6px; font-size: 15px; font-weight: 700; line-height: 1.3; text-align: center; color: var(--c-cream); }
.hof-leagues__note[hidden] { display: none; }
.hof-moved { display: block; margin-top: 1px; font-weight: 800; font-size: 12px; line-height: 1.15; color: var(--c-leaf-dark, #3E6B1F); }
.pub-hero__founding { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 12px 2px 4px; border-radius: 999px; border: 2px solid var(--c-ink); background: linear-gradient(#FFE58A, var(--c-turmeric)); font-weight: 800; font-size: 15px; }
.pub-hero__foundingbadge { display: inline-block; width: 24px; height: 24px; }
.pub-hero__foundingbadge > svg { display: block; width: 100%; height: 100%; }
.pub-hero__league { margin-top: 6px; font-weight: 800; font-size: 15px; color: var(--c-jaggery); }
.pub-career__tag.is-founders { background: #DCE8F8; }
.pub-places--league { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.pub-places__item { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 359px) { .hof-league { font-size: 17px; } }
@media (min-width: 620px) { .hof-moved { font-size: 13px; } }