/* held-name.css (Oct 16 2026, r2096 / r2087 "The Held Name").
   Tokens, the seal, the plate, the ledger and the lead for ummah.city/move and the product grid on /one and /join.
   Every selector starts with .hn so nothing leaks into the host page. The still layout works with no JavaScript and
   under prefers-reduced-motion; a motion layer (if one lands) attaches to the data-hn hooks and never changes layout.
   Night is the base. .day-mode swaps the tokens (ummah.city theme policy: system preference first).
   Face: Literata for names and headings (r1717), Outfit for everything you read and press. Metric-matched fallbacks
   below keep the swap from moving the page (DESIGN-STANDARD defect 10). */
@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.bunny.net/literata/files/literata-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.bunny.net/literata/files/literata-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.bunny.net/literata/files/literata-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.bunny.net/literata/files/literata-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Literata Fallback';font-style:normal;font-weight:400;src:local('Times New Roman'),local('TimesNewRomanPSMT'),local('Liberation Serif');size-adjust:119.4%;ascent-override:98.6%;descent-override:25.8%;line-gap-override:0%}
@font-face{font-family:'Literata Fallback';font-style:normal;font-weight:600;src:local('Times New Roman Bold'),local('TimesNewRomanPS-BoldMT'),local('Liberation Serif Bold');size-adjust:116.8%;ascent-override:100.7%;descent-override:26.4%;line-gap-override:0%}

.hn {
  --hn-ground: #060B18;
  --hn-plate: #0B1325;
  --hn-ink: #F3F1EA;
  --hn-muted: #B9C0B8;
  --hn-rule: #6F7A74;
  --hn-hair: #2A3650;
  --hn-action: #DFA032;
  --hn-action-ink: #0F1F17;
  --hn-action-hover: #E8B84B;
  --hn-link: #E8B84B;
  --hn-seal: #DFA032;
  --hn-seal-edge: #F3F1EA;
  --hn-band: #0E1626;
  --hn-band-ink: #F3F1EA;
  --hn-band-muted: #B9C0B8;
  --hn-focus: #F3F1EA;
  --hn-display: 'Literata', 'Literata Fallback', Georgia, 'Times New Roman', serif;
  --hn-ui: 'Outfit', 'Outfit Fallback', 'Helvetica Neue', Arial, sans-serif;
  color: var(--hn-ink);
  font-family: var(--hn-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
.day-mode .hn, .hn.hn--day {
  --hn-ground: #EEF1E9;
  --hn-plate: #FBFCF8;
  --hn-ink: #0F1F17;
  --hn-muted: #3F5247;
  --hn-rule: #6B7A70;
  --hn-hair: #C3CBBE;
  --hn-action: #166534;
  --hn-action-ink: #FFFFFF;
  --hn-action-hover: #0F4A26;
  --hn-link: #0F4A26;
  --hn-seal: #C8912E;
  --hn-seal-edge: #0F1F17;
  --hn-band: #0F2A1C;
  --hn-band-ink: #EEF1E9;
  --hn-band-muted: #B9C6BC;
  --hn-focus: #0F4A26;
}
:where(.hn) *, :where(.hn) *::before, :where(.hn) *::after { box-sizing: border-box; }
:where(.hn) :is(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
:where(.hn) :is(ul, ol) { list-style: none; }
:where(.hn) :is(h1, h2, h3) { font-family: var(--hn-display); font-weight: 600; color: var(--hn-ink); text-wrap: balance; letter-spacing: -0.012em; }
:where(.hn) p { text-wrap: pretty; }
.hn a:focus-visible, .hn button:focus-visible, .hn summary:focus-visible { outline: 3px solid var(--hn-focus); outline-offset: 3px; border-radius: 2px; }
.hn ::selection { background: #EAD6A6; color: #0F1F17; }
.hn-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The page shell for /move (the grid on /one and /join sits inside .hn-island instead). */
.hn-page { background: var(--hn-ground); }
.hn-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .hn-wrap { padding: 0 48px; } }
@media (min-width: 1280px) { .hn-wrap { padding: 0 0; } }

/* Buttons. One action colour; the action is forest by day and gold-bright by night (Night Primary Mandate). */
.hn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; min-width: 240px; padding: 0 32px;
  font: 600 16px/1 var(--hn-ui); letter-spacing: 0; color: var(--hn-action-ink); background: var(--hn-action); border: 2px solid transparent;
  border-radius: 8px; text-decoration: none; cursor: pointer; }
.hn-btn:hover { background: var(--hn-action-hover); }
.hn-btn:active { transform: none; filter: brightness(0.94); }
.day-mode .hn-btn { border-color: transparent; }
@media (max-width: 479px) { .hn-btn { width: 100%; } }
.hn-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--hn-link); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hn-link:hover { text-decoration-thickness: 2px; }

/* The seal (Khatim Sulayman): the state of a thing. Solid = ready, half = beta, ringed = early access, outline = building. */
.hn-seal { width: 22px; height: 22px; flex: none; display: block; color: var(--hn-seal); overflow: visible; }
.hn-seal--lg { width: 56px; height: 56px; }

/* ===== The lead ===== */
.hn-lead { padding: 40px 0 8px; display: grid; gap: 40px; align-items: start; }
.hn-lead__h { font-size: 36px; line-height: 1.1; max-width: 17ch; }
.hn-lead__sub { margin-top: 20px; max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--hn-muted); }
.hn-lead__cta { margin-top: 32px; }
.hn-lead__note { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--hn-muted); }
.hn-lead__sub, .hn-lead__note, .hn-band__p { text-wrap: pretty; }
@media (min-width: 768px) { .hn-lead { padding: 64px 0 16px; } .hn-lead__h { font-size: 40px; max-width: 20ch; } }
@media (min-width: 1100px) {
  .hn-lead { grid-template-columns: minmax(0, 1fr) max-content; column-gap: 72px; padding-top: 88px; }
  .hn-lead__h { font-size: 60px; line-height: 1.04; letter-spacing: -0.018em; max-width: none; }
}

/* ===== The plate: a held name on an address line ===== */
.hn-plate { background: var(--hn-plate); border: 1px solid var(--hn-hair); padding: 24px 20px 8px; }
.hn-plate__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 20px; }
.hn-plate__label { font-size: 14px; line-height: 1.5; color: var(--hn-muted); max-width: 18em; }
.hn-plate__row { padding: 18px 0; border-top: 1px solid var(--hn-hair); }
.hn-plate__addr { display: block; font-family: var(--hn-display); font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--hn-ink); overflow-wrap: anywhere; }
.hn-plate__tag { display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--hn-link); }
@media (min-width: 1100px) { .hn-plate { padding: 28px 28px 12px; } }

/* ===== Section heads ===== */
.hn-sec { padding: 72px 0 0; }
.hn-sec__head { display: grid; gap: 14px; margin-bottom: 24px; }
.hn-sec__h { font-size: 30px; line-height: 1.18; max-width: 20ch; }
.hn-sec__sub { color: var(--hn-muted); max-width: 36em; }
@media (min-width: 1100px) {
  .hn-sec { padding-top: 112px; }
  .hn-sec__head { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 96px; align-items: start; margin-bottom: 24px; }
  .hn-sec__head--stack { grid-template-columns: 1fr; }
}

/* ===== Five moves ===== */
.hn-moves { margin-top: 24px; border-bottom: 1px solid var(--hn-hair); }
.hn-move { display: grid; gap: 16px; padding: 32px 0; border-top: 1px solid var(--hn-hair); }
.hn-move__name { font-size: 30px; line-height: 1.15; }
.hn-state { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--hn-ink); }
.hn-move__say { font-family: var(--hn-display); font-weight: 600; font-size: 22px; line-height: 1.32; color: var(--hn-ink); max-width: 36ch; text-wrap: balance; }
.hn-move__addr { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 0; border-top: 1px solid var(--hn-hair); border-bottom: 1px solid var(--hn-hair); font-family: var(--hn-display); font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--hn-ink); overflow-wrap: anywhere; max-width: 22em; }
.hn-move__how { margin-top: 12px; color: var(--hn-muted); max-width: 34em; }
.hn-move__links { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 24px; }
@media (min-width: 1100px) {
  .hn-move { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 96px; padding: 40px 0; }
  .hn-move__say { font-size: 22px; }
}

/* ===== The ledger: every site and where it stands ===== */
.hn-legend { margin-top: 28px; display: grid; gap: 10px; font-size: 16px; color: var(--hn-muted); }
.hn-legend li { display: flex; align-items: flex-start; gap: 12px; }
.hn-legend .hn-seal { margin-top: 3px; }
.hn-legend b { color: var(--hn-ink); font-weight: 600; }
.hn-ledger { margin-top: 32px; border-bottom: 1px solid var(--hn-hair); }
.hn-row { display: grid; gap: 8px; padding: 22px 0; border-top: 1px solid var(--hn-hair); }
.hn-row__name { font-size: 22px; line-height: 1.3; }
.hn-row__what { color: var(--hn-muted); max-width: 34em; }
.hn-row__what b, .hn-row__what strong { color: var(--hn-ink); font-weight: 600; }
.hn-row__links { margin-top: 2px; display: flex; flex-wrap: wrap; gap: 0 24px; }
.hn-row__checked { font-size: 14px; color: var(--hn-muted); }
@media (min-width: 768px) {
  .hn-row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; padding: 26px 0; }
}
@media (min-width: 1100px) { .hn-row { column-gap: 96px; } }

/* ===== The island: the grid inside a host page that has its own look ===== */
.hn-island { background: var(--hn-ground); padding: 48px 20px 56px; margin: 0 -20px; border-top: 1px solid var(--hn-hair); border-bottom: 1px solid var(--hn-hair); }
.hn-island .hn-sec { padding-top: 0; }
@media (min-width: 768px) { .hn-island { padding: 64px 48px 72px; margin: 0; } }

/* ===== The band: the one reversal, the honest paragraph ===== */
.hn-band { margin-top: 96px; background: var(--hn-band); color: var(--hn-band-ink); padding: 64px 0 72px; }
.hn-band .hn-sec__h, .hn-band .hn-band__h { color: var(--hn-band-ink); }
.hn-band__h { font-size: 30px; line-height: 1.15; max-width: 22ch; }
.hn-band__p { margin-top: 18px; max-width: 36em; color: var(--hn-band-muted); }
.hn-band__p + .hn-band__p { margin-top: 12px; }
.hn-band .hn-btn { margin-top: 32px; }
.hn-band .hn-btn { background: #DFA032; color: #0F1F17; }
.hn-band .hn-btn:hover { background: #E8B84B; }
.hn-band .hn-link { color: #E8B84B; }
.hn-band a:focus-visible { outline-color: #F3F1EA; }
@media (min-width: 768px) { .hn-band { padding: 88px 0 96px; } .hn-band__h { font-size: 40px; line-height: 1.1; } }

/* ===== Close ===== */
.hn-close { padding: 56px 0 72px; display: grid; gap: 24px; }
.hn-close__h { font-size: 30px; line-height: 1.18; max-width: 22ch; }
@media (min-width: 768px) { .hn-close { grid-template-columns: 1fr auto; align-items: center; gap: 48px; } }

/* Reduced motion: nothing here animates. A motion layer must honour the same query. */
@media (prefers-reduced-motion: reduce) { .hn *, .hn *::before, .hn *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .hn-btn { border: 2px solid ButtonText; } }

/* The island as a card inside a host page that already has its own gutters (/join). */
.hn-island--card { margin: 0; border: 1px solid var(--hn-hair); padding: 32px 20px 40px; }
@media (min-width: 768px) { .hn-island--card { padding: 48px 48px 56px; } }

/* Host pages (/join, /one) carry their own heading rules. Name the face and weight on the classes so the island looks the same everywhere. */
.hn-lead__h, .hn-sec__h, .hn-move__name, .hn-row__name, .hn-band__h, .hn-close__h { font-family: var(--hn-display); font-weight: 600; letter-spacing: -0.012em; text-transform: none; }
.hn-lead__h, .hn-sec__h, .hn-move__name, .hn-row__name, .hn-close__h { color: var(--hn-ink); }
.hn-lead__h { letter-spacing: -0.018em; }
.hn-sec__h, .hn-move__name, .hn-row__name { text-wrap: balance; }
:where(.hn) :is(p, li) { font-family: var(--hn-ui); }

.hn-row__also { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; color: var(--hn-muted); max-width: 40em; }
.hn-row__also .hn-seal { margin-top: 4px; }
.hn-row__also b { color: var(--hn-ink); font-weight: 600; }

/* The mission line: one sentence, then what is being built for it. */
.hn-mission { margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--hn-hair); }
.hn-mission__line { font-family: var(--hn-display); font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--hn-ink); max-width: 28ch; text-wrap: balance; }
.hn-mission__intro { margin-top: 8px; color: var(--hn-muted); max-width: 34em; }
.hn-mission__list { margin-top: 14px; display: grid; gap: 10px; color: var(--hn-muted); max-width: 34em; }
.hn-mission__list li { display: flex; align-items: flex-start; gap: 12px; }
.hn-mission__list .hn-seal { margin-top: 4px; }
.hn-mission__list b { color: var(--hn-ink); font-weight: 600; }
.hn-mission__tag { font-style: normal; font-weight: 600; color: var(--hn-ink); }

.hn-nb { white-space: nowrap; }
.hn-sec__sub, .hn-sec__sub p, .hn-mission__intro, .hn-legend { color: var(--hn-muted); }
.hn-mission--full { margin-top: 0; padding-top: 0; border-top: 0; }
/* The day band keeps the page's one reversal; its button is paper on forest (gold stays on the seal), night keeps the action gold. */
.day-mode .hn-band .hn-btn { background: #EEF1E9; color: #0F1F17; }
.day-mode .hn-band .hn-btn:hover { background: #FFFFFF; }

/* /join sets "section h2 { Outfit 800 !important }" for the whole page (r298). The grid is its own object in the Held Name face, so it names its own. */
.hn-island .hn-sec__h, .hn-island .hn-row__name { font-family: var(--hn-display) !important; font-weight: 600 !important; }

/* Host pages set their own heading ink (/one: #1A0F08). The island uses the Held Name ink everywhere. */
.hn-island .hn-sec__h, .hn-island .hn-row__name, .hn-island .hn-mission__line, .hn-island .hn-legend b, .hn-island .hn-state { color: var(--hn-ink) !important; }


/* The motion layer (move-motion.v1.css, Lane M) picks day or night from the OS or a data-umg-theme attribute. This site picks it with
   the .day-mode class, so the layer's tokens are set here from the page's own mode. !important is the only way a custom property
   beats the layer's own :root:not([data-umg-theme=light]) rule. Night is the base, .day-mode swaps. */
.hn .mm-strip, .hn .mm-tile, .hn .mm-status, .hn [data-mm-shelf] {
  --mm-paper: #060B18 !important; --mm-plate: #0E1626 !important; --mm-ink: #F3F1EA !important; --mm-moss: #B9C0B8 !important;
  --mm-rule: #6F7A74 !important; --mm-hair: #6F7A74 !important; --mm-ghost: #6F7A74 !important; --mm-tile: #F3F1EA !important;
  --mm-tile-hover: #DCE3DA !important; --mm-tile-ink: #0F1F17 !important; --mm-lift-shadow: rgba(0, 0, 0, 0.45) !important;
  --mm-gold: #DFA032 !important; --mm-seal-edge: #F3F1EA !important; --mm-ready: #F3F1EA !important; --mm-later: #B9C0B8 !important; --mm-focus: #DFA032 !important;
}
.day-mode .hn .mm-strip, .day-mode .hn .mm-tile, .day-mode .hn .mm-status, .day-mode .hn [data-mm-shelf] {
  --mm-paper: #EEF1E9 !important; --mm-plate: #FBFCF8 !important; --mm-ink: #0F1F17 !important; --mm-moss: #3F5247 !important;
  --mm-rule: #6B7A70 !important; --mm-hair: #C3CBBE !important; --mm-ghost: #9AA79E !important; --mm-tile: #166534 !important;
  --mm-tile-hover: #0F4A26 !important; --mm-tile-ink: #FFFFFF !important; --mm-lift-shadow: rgba(15, 31, 23, 0.14) !important;
  --mm-gold: #C8912E !important; --mm-seal-edge: #0F1F17 !important; --mm-ready: #0F4A26 !important; --mm-later: #3F5247 !important; --mm-focus: #0F4A26 !important;
}

/* Shelves and their headings (the motion layer draws each shelf's top rule). */
.hn-shelf { padding-top: 28px; margin-top: 8px; }
.hn-shelf__h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-family: var(--hn-ui); font-weight: 400; font-size: 16px; line-height: 1.4; color: var(--hn-muted); }
.hn-shelf__means { color: var(--hn-muted); }
.hn-shelf .hn-ledger { margin-top: 12px; border-bottom: 0; }
.hn-shelf .hn-row:first-child { border-top: 0; }
.hn-row__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hn-move__head .mm-status { margin-top: 10px; }
.hn-mission__list li { display: block; }
.hn-mission__list .mm-status { margin: 0 6px; }
.hn-row__head .mm-status { font-size: 14px; }

.hn-legend li { display: grid; grid-template-columns: 9.5em 1fr; gap: 4px 14px; align-items: baseline; }
@media (max-width: 479px) { .hn-legend li { grid-template-columns: 1fr; } }

/* r2096: on a phone the move strip must sit in the first screen (Lane M measured the plate at 677 to 844 px on a 390 x 724 phone). */
@media (max-width: 1099px) {
  .hn-page { padding-top: calc(env(safe-area-inset-top, 0px) + 76px); }
  .hn-lead { padding-top: 20px; gap: 24px; }
  .hn-lead__sub { margin-top: 14px; font-size: 16px; }
  .hn-lead__cta { margin-top: 20px; }
}
/* r2109 (Oct 16 2026): the lead grew by one line (the r2109 lead plus the r2112 free-name sentence), which pushed the plate 24 px
   below the fold on a 390 x 724 phone. This hands the space back so the plate bottom is measured inside the first screen again. */
@media (max-width: 479px) {
  .hn-lead { padding-top: 12px; gap: 12px; }
  .hn-lead__sub { margin-top: 12px; line-height: 1.45; }
  .hn-lead__cta { margin-top: 16px; }
}

/* Round 3 (seats): no tight letter-spacing on the shelf lines; mission lines align in three columns; the mission intro carries its Building mark. */
.hn-shelf__h, .hn-shelf__means { letter-spacing: 0; }
.hn-mission__intro .mm-status { margin-right: 8px; }
.hn-mission__list li { display: grid; gap: 2px 14px; align-items: baseline; }
.hn-mission__list .hn-mission__name { color: var(--hn-ink); font-weight: 600; }
.hn-mission__list .mm-status { margin: 0; }
@media (min-width: 768px) { .hn-mission__list li { grid-template-columns: 9.5em 7.5em 1fr; } }

/* Lead blocks on /one and /join: the Held Name lead inside the older page frame. */
.hn-island--lead { margin: 0 0 28px; padding: 32px 22px 36px; border: 1px solid var(--hn-hair); text-align: left; }
.hn-island--lead .hn-lead__h { font-size: 34px; max-width: 20ch; }
.hn-island--lead .hn-lead__sub--small { margin-top: 10px; font-size: 16px; }
.hn-lead__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
@media (min-width: 768px) { .hn-island--lead { padding: 48px 48px 32px; } .hn-island--lead .hn-lead__h { font-size: 44px; } }
.hn-leadblock { text-align: center; }
.hn-leadblock .hn-lead__h { font-size: 34px; max-width: 20ch; margin-inline: auto; }
.hn-leadblock .hn-lead__sub { margin-inline: auto; max-width: 30em; }
.hn-leadblock .hn-lead__cta { justify-content: center; }
@media (min-width: 768px) { .hn-leadblock .hn-lead__h { font-size: 44px; } }

/* Round 4 (seats). The seal repeats as the mark of each lead and of the closing band. */
.hn-island--lead { position: relative; }
.hn-lead__seal { position: absolute; top: 24px; right: 22px; width: 44px; height: 44px; }
.hn-island--lead .hn-lead__h { padding-right: 56px; color: var(--hn-ink) !important; }
@media (min-width: 768px) { .hn-lead__seal { top: 40px; right: 48px; width: 64px; height: 64px; } .hn-island--lead .hn-lead__h { padding-right: 96px; } }
.hn-band__seal { display: block; width: 56px; height: 56px; margin-bottom: 20px; --hn-seal: #DFA032; --hn-seal-edge: #F3F1EA; }
.hn-legend span, .hn-shelf__h, .hn-mission__intro { text-wrap: balance; }
.hn-row--note .hn-row__what { font-size: 14px; }
.hn-row--note { padding: 14px 0; }
.hn-row--note .hn-row__head { display: none; }
@media (min-width: 768px) { .hn-row--note { display: block; } .hn-row--note .hn-row__body { margin-left: calc((100% - 48px) / 3 + 48px); } }
/* The "Before" row only makes sense in motion: where the move cannot play (reduced motion, scripts off) it is hidden. */
@media (prefers-reduced-motion: reduce) { .hn .mm-shelf-label, .hn .mm-shelf { display: none; } }
@media (scripting: none) { .hn .mm-shelf-label, .hn .mm-shelf { display: none; } }

/* Round 5 (seats). The "Before" wells carry a faint generic word so the row reads without motion. */
.hn .mm-ghost { display: flex; align-items: center; justify-content: center; text-align: center; }
.hn .hn-ghost-word { font: 500 11px/1.2 var(--hn-ui); color: var(--hn-muted); padding: 0 3px; overflow-wrap: anywhere; }
/* A wide row is one line: name and label, the sentence, the link (shorter rows, less sameness). */
@media (min-width: 1100px) {
  .hn-shelf .hn-row { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); column-gap: 48px; align-items: baseline; padding: 20px 0; }
  .hn-shelf .hn-row__body { display: contents; }
  .hn-shelf .hn-row__links { justify-self: end; margin: 0; }
  .hn-shelf .hn-row--note { display: block; }
  .hn-shelf .hn-row--note .hn-row__body { display: block; margin-left: calc((100% - 96px) / 4 + 48px); }
}

/* Round 6 (seats): mission list uses the width, the intro's mark stays on its own line, the pressed-state words are plain. */
.hn-mission--full .hn-mission__list { max-width: 56em; }
.hn-mission__intro--mark { display: flex; align-items: baseline; gap: 10px; }
.hn-mission__intro--mark .mm-status { margin: 0; flex: none; }