/* Numen v3 shared screen layout (WP-SHELL): page grid, page head, section rhythm, answer block.
   Columns: phone 4 (gap 16), tablet 8 (gap 20), desktop 12 (gap 24); max width 1240; views full bleed. */

.page { padding-top: var(--s5); padding-bottom: var(--s6); display: grid; gap: var(--section-gap); }
.page--flush { padding-top: 0; }
.page__head { display: grid; gap: var(--s2); }
.page__kicker { font-weight: 600; font-size: var(--fs-label); line-height: 1.3; font-family: var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.page__h1, .page h1 { font-weight: 500; font-size: var(--fs-h1); line-height: 1.15; font-family: var(--font-display); color: var(--ink); max-width: 30ch; }
@media (min-width: 900px) { .page__h1, .page h1 { line-height: 1.1; } }
.page__lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 62ch; }
.page__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

.section { display: grid; gap: var(--s4); min-width: 0; }
.section__h { font-weight: 600; font-size: var(--fs-card-head); line-height: 1.2; font-family: var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.section__title { font-weight: 500; font-size: var(--fs-card-title); line-height: 1.2; font-family: var(--font-display); }
.stack { display: grid; gap: var(--s3); min-width: 0; }
.stack--l { gap: var(--s5); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.list-lines > li { padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.list-lines > li:first-child { border-top: 0; }
.dated { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: var(--s3); padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.dated > time, .dated > .dated__when { color: var(--ink); font-weight: 600; font-size: var(--fs-small); }

/* the answer block above a view (home, dates, year) */
.answer-block { display: grid; gap: var(--s3); }
.answer-block__nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s5); }
.overline { font-weight: 500; font-size: var(--fs-overline); line-height: 1.2; font-family: var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); }

/* grid: one column on phone, spans from 900 px */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .span-4 { grid-column: span 4; }
  .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; }
  .span-7 { grid-column: span 7; }
  .span-8 { grid-column: span 8; }
  .span-12 { grid-column: 1 / -1; }
}
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
@media (min-width: 900px) { .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* a view runs full bleed: put it outside .wrap */
.bleed { width: 100%; }

/* a frame for wide tables: they scroll inside it, never the page */
.scroll-x { overflow-x: auto; max-width: 100%; }

/* ---------- round 1 (screens fixer) ---------- */
/* the you chip reads as a menu button: a word and a down chevron after the badge (S01) */
.me__chev { flex: none; color: var(--ink-3); transform: rotate(90deg); }
.me[aria-expanded="true"] .me__chev { transform: rotate(-90deg); }
/* Skip to content: first tab stop, out of sight until focused (S28) */
.skip-link { position: absolute; left: 8px; top: 8px; z-index: calc(var(--z-sheet, 50) + 1); padding: 10px 16px; border-radius: var(--r-s, 6px); background: var(--night-3); color: var(--ink); font-weight: 600; transform: translateY(-200%); }
.skip-link:focus, .skip-link:focus-visible { transform: none; }
/* the lesser (caution) month pill: softer than enemy, no ember (S17) */
.sg__rel--lesser { color: var(--ink-3); border-color: var(--mist); }

/* the you disc with no first name: a night dot at the centre, as the ring draws it (round-2 S13) */
.disc--bare::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--night); }