/* ============================================================
   THE PUZZLE TIMES — the front page's layout
   The paper, ink and type come from newsprint.css; this file sets out the
   page: a flag with an ear and the Profile button, the folio, the lead with a right-hand
   rail, and the Word Search's four styles below the fold.
   ============================================================ */

.sheet {
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 24px calc(40px + env(safe-area-inset-bottom, 0px));
}

a { color: inherit; }

/* The navigation jumps to a puzzle's section on this page: glide there, and
   stop clear of the pinned bar (taller on a phone, where it has two rows). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
main [id], section[id] { scroll-margin-top: 64px; }
@media (max-width: 900px) { main [id], section[id] { scroll-margin-top: 96px; } }

/* ============ THE FLAG ============ */
.flag {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;           /* the two ears match in height */
  gap: 24px;
  padding: 0 0 8px;
}
.nameplate { text-align: center; align-self: center; }
.nameplate h1 {
  font-family: var(--font-flag);
  font-weight: 400;
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: .95;
  letter-spacing: .5px;
  white-space: nowrap;
  text-shadow: 0 1px 0 #00000022;      /* faint letterpress ink */
}
.nameplate h1 a { text-decoration: none; }
.motto {
  margin-top: 3px;
  font-style: italic; font-size: 12.5px;
  color: var(--ink-dim);
}

/* the ear left of the nameplate: unboxed, set flush left */
.ear {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  justify-self: start;
  width: 100%; max-width: 200px;
  text-align: left;
}
.ear-big {
  font-family: var(--font-display); font-weight: 800;
  font-size: 15px; line-height: 1.1;
}
/* Right of the nameplate: the reader's profile, in the game (?profile=1).
   Drawn as the game's own Profile button (.head-btn in styles.css), so it
   reads as the same thing on both pages. */
.flag-btn {
  justify-self: end; align-self: center;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; text-decoration: none;
  color: var(--ink-dim);
  border: 1.5px solid var(--rule);
  padding: 9px 14px; line-height: 1;
  transition: color .15s, background .15s;
}
.flag-btn:hover { color: var(--paper); background: var(--ink); }
.ear-note { font-size: 12px; font-style: italic; line-height: 1.3; }
.ear-note .nowrap { white-space: nowrap; }

/* ============ THE FOLIO ============ */
.folio {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 4px 14px;
  padding: 6px 0 5px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-dim);
}
.folio > :nth-child(2) { color: var(--ink); }
.folio > :last-child { justify-self: end; }

/* ============ IN THIS EDITION: the paper's sections ============
   The last band of the masthead, closed by a double rule. The same list is
   in the pinned bar (.topbar). */
.sections {
  display: flex; align-items: baseline; justify-content: center; gap: 18px;
  padding: 8px 0 7px;
  border-bottom: 3px double var(--rule);
}
.sections-label { white-space: nowrap; }
.nav-list {
  display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center;
  list-style: none;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase;
}
.nav-list li { padding: 0 16px; white-space: nowrap; }
.nav-list li + li { border-left: 1px solid var(--rule-soft); }
.nav-list a { text-decoration: none; }
.nav-list a:hover { color: var(--accent); }
/* the puzzle being read (watchSections) */
.nav-list a[aria-current] {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.nav-list .soon { color: var(--ink-dim); font-weight: 600; cursor: default; }
.nav-list .soon i {
  font-family: var(--font-serif); font-weight: 400;
  letter-spacing: 0; text-transform: none;
  margin-left: 2px;
}

/* ============ THE PINNED BAR ============
   Slides down once the masthead's sections have scrolled away (watchMasthead). */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 3px double var(--rule);
  box-shadow: 0 3px 10px #2b1d120f;
  transform: translateY(-110%);
  transition: transform .22s ease;
}
.topbar.show { transform: none; }
.topbar-in {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 20px;
  max-width: 1180px; margin: 0 auto;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 24px 6px;
}
.topbar-flag {
  font-family: var(--font-flag);
  font-size: 28px; line-height: 1;
  text-decoration: none; white-space: nowrap;
}
.topbar .nav-list { font-size: 11px; letter-spacing: 1.5px; }
.topbar .nav-list li { padding: 0 12px; }
.topbar-date { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .topbar { transition: none; } }

/* ============ FRONT PAGE ============
   The lead on the left, the rail (Your Word Search Record, Head to Head) down the right. */
.front {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0 32px;
  padding-top: 26px;
}
.rail {
  border-left: 1px solid var(--rule);
  padding-left: 32px;
  display: flex; flex-direction: column; gap: 26px;
}

/* The lead: the Word Search's banner. The headline, facts, deck, the style
   picker and Play on the left, the sample grid on the right. The last row
   takes any height the grid has over, so the left stays packed at the top. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "text  teaser"
    "pick  teaser"
    "cta   teaser";
  gap: 22px 36px;
  align-items: start;
}
.hero-text  { grid-area: text; container-type: inline-size; }
.teaser     { grid-area: teaser; }
.hero-cta   { grid-area: cta; }
.style-choose { grid-area: pick; }

.kicker {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-dim);
}
.kicker-tag { color: var(--accent); }

.headline {
  margin-top: 10px;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(44px, 6.4vw, 84px);
  line-height: .95;
  letter-spacing: -1px;
  text-wrap: balance;
}
/* one line, however narrow: the type shrinks with the column, sized so the
   longest theme ("Science Lab") still fits */
.facts {
  margin-top: 16px;
  font-size: clamp(11px, 3.9cqi, 18px); line-height: 1.35;
  white-space: nowrap;
}
.deck {
  margin-top: 8px;
  font-size: 17px; font-style: italic; line-height: 1.45;
  color: #3b352c;
  text-wrap: pretty;
}
/* Play, and under it the way to the styles, centred on the button */
.hero-cta {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 560px;
}
.hero-play {
  display: block; width: 100%;
  padding: 18px 20px;
  font-size: 17px; letter-spacing: 2.5px;
}
.cta-note { font-size: 14px; font-style: italic; color: var(--ink-dim); text-align: center; }
.cta-note .more { margin: 0 0 0 4px; font-style: normal; color: var(--ink); }
/* Today's daily solved: Play turns from the house's solid ink into an
   outlined, double-ruled marker with a red tick, and stops being a link */
.hero-play.done,
.hero-play.done:hover {
  color: var(--ink); background: transparent;
  outline: 1px solid var(--rule); outline-offset: 3px;
  cursor: default; transform: none;
}
.hero-play .tick { color: var(--accent); margin-right: 4px; }
.byline {
  align-self: flex-start;
  margin-top: 18px;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
}

/* the sample grid, with its caption and a red arrow into the game */
.teaser { margin: 4px 0 0; }
.teaser-link { display: block; }
.teaser svg {
  display: block; width: 100%; height: auto;
  background: var(--paper);
}
.teaser svg .rules line, .way svg .rules line { stroke-width: .3; }
.teaser svg .letters text {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 5.6px;
  fill: var(--ink);
  text-anchor: middle; dominant-baseline: central;
}
.teaser svg .frame, .way svg .frame { fill: none; stroke: var(--rule); stroke-width: .8; }
.teaser-link:hover svg { background: var(--paper-2); }
/* the picked style's loops draw on, one word after another (pickStyle) */
.teaser svg .draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: loop-draw .5s ease-out forwards; }
@keyframes loop-draw { to { stroke-dashoffset: 0; } }

/* one sentence on the picked style, tucked right under the grid; it
   cross-fades when the style changes */
.teaser figcaption {
  margin-top: 8px;
  font-size: 15px; font-style: italic; line-height: 1.4;
  color: var(--ink-dim);
  min-height: 2.8em;      /* two lines held, so the grid's row holds still between styles */
  transition: opacity .18s ease;
}
.teaser figcaption.swapping { opacity: 0; }

/* The four styles, drawn as the game's difficulty toggles (.diff-btn in
   styles.css; keep the two in step). A toggle, not an action: cream and a
   soft rule; picked, a doubled rule, a panel wash and a red tick in the
   corner, like a marked ballot box. */
/* the picker's label, set as the kicker is */
.style-label {
  margin-bottom: 8px;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-dim);
}
.style-pick {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  max-width: 560px;       /* as wide as Play under it */
}
.diff-btn {
  position: relative;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 0;
  padding: 11px 6px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease,
              border-color .12s ease, box-shadow .12s ease;
}
.diff-btn:hover:not(.on) {
  border-color: var(--rule);
  background: var(--paper-2);
}
.diff-btn:active { transform: translateY(1px); }
.diff-btn.on {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--rule);
  box-shadow: inset 0 0 0 1px var(--rule);   /* doubled rule = pressed in */
}
.diff-btn.on::before {
  content: '';
  position: absolute; left: 6px; top: 6px;
  width: 6px; height: 6px;
  background: var(--accent);
}
/* picked is still hoverable, so clicking it again doesn't feel dead */
.diff-btn.on:hover { background: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .teaser svg .draw { animation: none; stroke-dashoffset: 0; }
  .teaser figcaption { transition: none; }
  .teaser figcaption.swapping { opacity: 1; }
}

/* ============ THE RAIL ============ */
.rail-head, .box-head {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--rule);
  margin-bottom: 12px;
}

/* Head to Head's label in the accent red, as the lead's kicker tag */
.challenge .rail-head { color: var(--accent); }

/* Your Word Search Record: a boxed panel, like the game's daily card */
.box {
  border: 1.5px solid var(--rule);
  outline: 1px solid var(--rule); outline-offset: 3px;
  padding: 14px 16px 12px;
  background: var(--paper);
}
.box-head { text-align: center; }
.streak { display: flex; flex-direction: column; align-items: center; }
.streak-n {
  font-family: var(--font-display); font-weight: 900;
  font-size: 64px; line-height: .95;
}
.record-today {
  margin: 8px 0 12px;
  text-align: center;
  font-size: 14px; font-style: italic; line-height: 1.35;
}
.record-today.done { color: var(--ink); font-style: normal; font-weight: 600; }
.record-today.done::before { content: "✓ "; color: var(--accent); }
.box-score { width: 100%; border-collapse: collapse; font-size: 14px; }
.box-score th, .box-score td { padding: 5px 0; border-top: 1px solid var(--rule-soft); }
.box-score th { text-align: left; font-weight: 400; }
.box-score td {
  text-align: right;
  font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums;
}
/* the achievement in progress (or up next), as the game's menu draws one */
/* its rule follows Best streak's as the table's next row would, 5px each side */
.rec-ach { padding-top: 5px; border-top: 1px solid var(--rule-soft); }
.rec-ach-head { display: flex; justify-content: space-between; align-items: baseline; }
.rec-ach-count {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink-dim);
}
.rec-ach-title {
  margin-top: 4px;
  font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.15;
}
.rec-ach-desc { font-size: 13px; line-height: 1.4; color: var(--ink-dim); }
.rec-ach-bar { display: block; height: 5px; margin-top: 7px; border: 1px solid var(--rule); }
.rec-ach-bar[hidden] { display: none; }
.rec-ach-bar i { display: block; height: 100%; background: var(--ink); }
.box-foot {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule);
  text-align: center; font-size: 12px; font-style: italic; color: var(--ink-dim);
}

.challenge p { font-size: 15px; line-height: 1.5; }
.challenge .challenge-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: 26px; line-height: 1.05;
  margin-bottom: 6px;
}

.more {
  display: inline-block; margin-top: 10px;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
}
.more:hover { color: var(--accent); }

/* ============ BELOW THE FOLD ============ */
.fourways { margin-top: 40px; }
.section-head {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 28px; text-align: center;
  padding: 10px 0;
  border-top: 2px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.section-head::before, .section-head::after {
  content: ""; flex: 1; height: 5px;
  background:
    linear-gradient(var(--rule-soft),var(--rule-soft)) top/100% 1px no-repeat,
    linear-gradient(var(--rule-soft),var(--rule-soft)) bottom/100% 1px no-repeat;
}

.section-deck {
  margin-top: 10px; text-align: center;
  font-size: 18px; font-style: italic; color: var(--ink-dim);
}
.ways-cta { margin-top: 28px; text-align: center; }

.ways {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 20px;
}
.way {
  padding: 0 22px;
  border-left: 1px solid var(--rule-soft);
}
.way:first-child { padding-left: 0; border-left: 0; }
.way:last-child { padding-right: 0; }
.way h3 {
  margin: 4px 0 12px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 24px; line-height: 1.05;
}
.way svg {
  display: block; width: 100%; max-width: 150px; height: auto;
  margin-bottom: 12px;
  background: var(--paper);
}
.way svg .dots circle { fill: var(--ink-dim); }
.way p:not(.kicker) { font-size: 15px; line-height: 1.5; }

/* ============ FOOTER ============ */
.colophon { margin-top: 48px; text-align: center; }
.colophon p { margin-top: 10px; }
.footer-flag { font-family: var(--font-flag); font-size: 30px; }

/* ============ NARROWER SCREENS ============ */
@media (max-width: 999px) {
  /* the rail moves under the lead, its two parts side by side */
  .front { grid-template-columns: minmax(0, 1fr); }
  .rail {
    border-left: 0; padding-left: 0;
    border-top: 2px solid var(--rule);
    margin-top: 32px; padding-top: 24px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px;
  }
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .way:nth-child(3) { padding-left: 0; border-left: 0; }
  .way:nth-child(2) { padding-right: 0; }
}

/* No room for the ear: the nameplate alone, with Profile over its right end */
@media (max-width: 860px) {
  .flag { grid-template-columns: 1fr; gap: 6px; padding-bottom: 8px; }
  .ear { display: none; }
  .flag-btn { order: -1; padding: 7px 12px; }
}

@media (max-width: 760px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "text" "pick" "cta" "teaser";
    gap: 20px;
  }
  .hero-cta, .style-pick { max-width: none; }
  .teaser { max-width: 420px; width: 100%; margin: 0 auto; }
}

@media (max-width: 560px) {
  .sheet { padding-left: 16px; padding-right: 16px; }
  .nameplate h1 { font-size: clamp(34px, 11.4vw, 56px); }
  .motto { font-size: 12.5px; }
  .folio { grid-template-columns: 1fr auto; font-size: 9.5px; letter-spacing: 1.2px; }
  .folio > :last-child { display: none; }
  .folio > :nth-child(2) { justify-self: end; }
  .deck { font-size: 15px; }
  .style-pick { grid-template-columns: repeat(2, 1fr); }
  .hero-play { font-size: 14px; letter-spacing: 1.6px; padding: 16px 12px; }
  .ways { grid-template-columns: minmax(0, 1fr); }
  .way, .way:nth-child(n) { padding: 0; border-left: 0; }
  .way + .way { padding-top: 24px; border-top: 1px solid var(--rule-soft); }
  .section-head { font-size: 22px; }
  .section-head::before, .section-head::after { display: none; }
  .section-head span { flex: 1; }
}

/* Too many sections for one line: the list scrolls sideways, inside itself */
@media (max-width: 900px) {
  .sections-label { display: none; }
  .sections, .topbar-nav { overflow-x: auto; scrollbar-width: none; }
  .sections::-webkit-scrollbar, .topbar-nav::-webkit-scrollbar { display: none; }
  .sections { justify-content: flex-start; }
  /* fade the right edge, so a cut-off section reads as "scroll for more";
     the list's end padding lets the last one clear the fade */
  .sections, .topbar-nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .nav-list { flex-wrap: nowrap; justify-content: flex-start; margin: 0 auto; padding-right: 28px; }
  .nav-list li:first-child { padding-left: 0; }
  .topbar-in {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "flag date" "nav nav";
    row-gap: 4px;
    padding-left: 16px; padding-right: 16px;
  }
  .topbar-flag { grid-area: flag; font-size: 24px; }
  .topbar-date { grid-area: date; }
  .topbar-nav { grid-area: nav; }
}