/* Atlas — before you go (static/js/explore/go.js): a place on one sheet,
   and the card on the place home that opens it.

   The sections are stops on a path: numbered circles in the place's colour
   joined by a dotted line, each with what it holds and how much of it you
   have seen. Eras take their own colours, customs their themes'. Printed,
   it is a plain sheet in two columns with boxes to tick by hand. Every
   colour comes from static/explore/tokens.css. */

.go-page {
  display: flex; flex-direction: column; gap: 26px; padding-bottom: 56px; min-width: 0; color: var(--text);
}
.go-page a:focus-visible, .go-page button:focus-visible { outline: 2.5px solid var(--x-red); outline-offset: 2px; }

.go-crumbs ol { list-style: none; margin: 0 0 -10px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13.5px; }
.go-crumbs li { display: inline-flex; align-items: center; color: var(--x-ink-2); }
.go-crumbs li + li::before { content: "›"; margin: 0 9px; color: var(--x-ink-2); }
.go-crumbs a { color: var(--x-navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--place-mark); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ── the hero: the place's colour, a luggage tag pinned to its picture ── */
.go-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 320px); gap: 30px; align-items: center;
  padding: 32px 34px 50px; border-radius: var(--x-radius) var(--x-radius) 0 0; overflow: hidden;
  background-color: var(--place-fill); background-image: var(--x-grain); color: var(--place-on);
  -webkit-mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
  mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
}
.go-hero-text { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.go-hero-art { order: 2; position: relative; align-self: stretch; min-height: 190px; }
.go-hero-art .x-collage {
  position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(1.4deg); box-shadow: var(--x-shadow-lift);
  -webkit-mask: var(--x-tear-t) left top / 240px 12px repeat-x, var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left center / 100% calc(100% - 22px) no-repeat;
  mask: var(--x-tear-t) left top / 240px 12px repeat-x, var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left center / 100% calc(100% - 22px) no-repeat;
}
.go-hero-tag { position: absolute; right: 14px; bottom: -6px; width: 74px; height: auto; transform: rotate(9deg); filter: drop-shadow(0 4px 6px rgba(40, 25, 5, 0.35)); }
.go-kicker { margin: 0; }
.go-h1 { margin: 0; outline: none; font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.04; letter-spacing: -0.012em; text-wrap: balance; }
.go-native { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.4vw, 24px); opacity: 0.95; }
.go-lede { margin: 4px 0 0; max-width: 50ch; font-size: 16.5px; line-height: 1.55; }
.go-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.go-print { background: var(--x-paper-2); color: var(--x-navy); }
.go-print:hover { background: var(--x-navy); color: var(--x-paper-2); }
.go-total:not(:empty) {
  position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; overflow: hidden; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; color: var(--place-on); box-shadow: inset 0 0 0 1.5px currentColor; font-variant-numeric: tabular-nums;
}
.go-total:not(:empty)::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--k, 0) * 100%); background: currentColor; opacity: 0.18;
}

/* ── the stops on the sheet ── */
.go-index ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.go-index a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 5px; border-radius: 999px;
  background: var(--x-paper-2); color: var(--x-navy); text-decoration: none; font-size: 14px; font-weight: 600;
  box-shadow: var(--x-shadow);
}
.go-index a:hover { box-shadow: var(--x-shadow-lift); }
.go-index-n {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--place-fill); color: var(--place-on); font-weight: 800; font-size: 13px;
}
.go-index a.is-done .go-index-n { background: var(--x-navy); color: var(--x-paper-2); }

.go-path { position: relative; display: flex; flex-direction: column; gap: 46px; }
.go-path::before {
  content: ""; position: absolute; left: 19px; top: 30px; bottom: 30px; width: 0;
  border-left: 3px dotted var(--place-mark); opacity: 0.7;
}
.go-stop { position: relative; padding-left: 62px; display: flex; flex-direction: column; gap: 16px; min-width: 0; scroll-margin-top: 16px; }
.go-stop-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; }
.go-stop-n {
  position: absolute; left: 0; top: -2px; display: flex; align-items: center; justify-content: center; width: 41px; height: 41px; border-radius: 50%;
  background: var(--place-fill) var(--x-grain); color: var(--place-on); box-shadow: 0 0 0 5px var(--x-paper);
  font-family: var(--serif); font-size: 20px; font-weight: 700;
}
.go-stop.is-done .go-stop-n { background: var(--x-navy); color: var(--x-paper-2); }
.go-stop-titles { flex: 1 1 280px; min-width: 0; display: grid; gap: 3px; }
.go-h2 { margin: 0; outline: none; font-family: var(--serif); font-size: clamp(24px, 2.6vw, 30px); font-weight: 600; line-height: 1.15; color: var(--x-navy); }
.go-stop-line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--x-ink-2); }
.go-count:not(:empty) {
  flex: none; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--place-wash); color: var(--place-ink); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.go-stop.is-done .go-count { background: var(--x-navy); color: var(--x-paper-2); }

/* a tick: seen */
.go-tick {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; background: var(--x-paper-2); color: var(--x-line);
  box-shadow: inset 0 0 0 1.5px var(--x-line);
}
.go-tick .icon { opacity: 0.55; color: var(--x-ink-2); }
.go-tick:hover { box-shadow: inset 0 0 0 2px var(--x-navy); }
.go-tick.is-on { background: var(--x-navy); box-shadow: none; cursor: default; }
.go-tick.is-on .icon { opacity: 1; color: var(--x-paper-2); }

/* its story: each era a band of its colour and a sentence */
.go-eras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.go-era {
  display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr) auto; align-items: center; gap: 0 18px;
  padding-right: 10px; border-radius: var(--x-radius); background: var(--x-paper-2) var(--x-grain); box-shadow: var(--x-shadow); overflow: hidden;
}
.go-era-band {
  align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 14px 18px 14px 16px;
  background: var(--era-fill) var(--x-grain); color: var(--era-on); text-decoration: none;
  -webkit-mask: var(--x-tear-r) right top / 8px 160px repeat-y, linear-gradient(#000 0 0) left / calc(100% - 7px) 100% no-repeat;
  mask: var(--x-tear-r) right top / 8px 160px repeat-y, linear-gradient(#000 0 0) left / calc(100% - 7px) 100% no-repeat;
}
.go-era-band:hover .go-era-title { text-decoration: underline; text-underline-offset: 3px; }
.go-era-title { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.2; }
.go-era-dates { font-size: 12.5px; font-weight: 700; opacity: 0.92; font-variant-numeric: tabular-nums; }
.go-era-line { margin: 0; padding: 12px 0; font-size: 15px; line-height: 1.55; color: var(--text); }

/* customs: cards in their themes' colours, the featured ones on a wash */
.go-customs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 14px; }
.go-custom {
  position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 16px 12px 16px 16px; border-radius: var(--x-radius);
  background: var(--x-paper-2) var(--x-grain); box-shadow: var(--x-shadow), inset 0 5px 0 var(--theme-mark);
}
.go-custom.is-featured { background-color: var(--theme-wash); }
.go-custom-a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; color: var(--x-navy); text-decoration: none; }
.go-custom-a:hover .go-custom-name { text-decoration: underline; text-decoration-color: var(--theme-mark); text-underline-offset: 3px; }
.go-custom-name { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.2; }
.go-custom-native { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--theme-ink); }
.go-custom-blurb { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.go-custom .go-tick { width: 36px; height: 36px; }

/* the month you're going */
.go-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.go-month-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 58px; padding: 6px 2px;
  border: 0; border-radius: 4px; cursor: pointer; background: var(--x-paper); color: var(--x-ink-2); font: inherit;
  box-shadow: inset 0 0 0 1px var(--x-line);
}
.go-month-btn.has { background: var(--place-wash); color: var(--x-navy); box-shadow: inset 0 0 0 1.5px var(--place-mark); }
.go-month-btn[aria-pressed="true"] { background: var(--place-fill); color: var(--place-on); box-shadow: none; transform: translateY(-2px); }
.go-month-btn.is-now::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 4px; height: 3px; border-radius: 2px; background: var(--x-red); }
.go-month-btn[aria-pressed="true"].is-now::after { background: var(--place-on); }
.go-month-name { font-size: 13.5px; font-weight: 700; text-transform: capitalize; }
.go-month-dots { display: flex; gap: 3px; min-height: 6px; }
.go-month-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--place-mark); }
.go-month-btn[aria-pressed="true"] .go-month-dot { background: var(--place-on); }
.go-month-list { display: grid; gap: 10px; padding: 18px 18px 20px; border-radius: var(--x-radius); background: var(--x-paper-2) var(--x-grain); box-shadow: var(--x-shadow); }
.go-month-h { margin: 0; font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--x-navy); }
.go-month-h::first-letter { text-transform: uppercase; }
.go-month-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.go-row { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--x-line); }
.go-row:first-child { border-top: 0; }
.go-row-when { font-size: 13.5px; font-weight: 700; color: var(--theme-ink); }
.go-row-a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; color: var(--x-navy); text-decoration: none; }
.go-row-a strong { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.go-row-a:hover strong { text-decoration: underline; text-decoration-color: var(--theme-mark); text-underline-offset: 3px; }
.go-row-native { font-family: var(--serif); font-style: italic; color: var(--theme-ink); }
.go-row-topic { font-size: 13.5px; color: var(--x-ink-2); }
.go-month-empty { margin: 0; font-size: 15px; line-height: 1.6; color: var(--x-ink-2); }
.go-month-jump { border: 0; padding: 4px 2px; background: none; font: inherit; font-weight: 700; color: var(--place-ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--place-mark); text-underline-offset: 3px; }

/* phrases to hear */
.go-phrases .at-lines ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.go-phrases .at-line { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 0; border-radius: 4px; background: var(--x-paper-2) var(--x-grain); box-shadow: var(--x-shadow); }
.go-phrases .at-play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.go-phrases .at-play-none { width: 40px; flex: none; }
.go-phrases .at-line-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.go-phrases .at-line-text { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.45; color: var(--x-navy); }
.go-phrases .at-line-tr { margin: 0; font-size: 14px; line-height: 1.45; color: var(--x-ink-2); }
.go-phrases .at-line-from { font-size: 13px; font-weight: 600; color: var(--place-ink); text-decoration-color: var(--place-mark); text-underline-offset: 3px; }

/* words to take */
.go-words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.go-word {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 8px 15px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--x-paper-2); color: var(--x-navy); box-shadow: inset 0 0 0 1.5px var(--place-mark), var(--x-shadow); font: inherit;
}
.go-word:hover { background: var(--place-fill); color: var(--place-on); }
.go-word:hover .go-word-gloss { color: inherit; }
.go-word-term { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.go-word-gloss { font-size: 13.5px; color: var(--x-ink-2); }

/* still there today */
.go-today { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.go-then { display: flex; flex-direction: column; gap: 10px; padding: 0 0 14px; overflow: hidden; border-radius: var(--x-radius); background: var(--x-paper-2) var(--x-grain); box-shadow: var(--x-shadow); }
.go-then-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 14px 16px; background: var(--era-fill) var(--x-grain); color: var(--era-on);
  -webkit-mask: var(--x-tear-b) left bottom / 240px 8px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 7px) no-repeat;
  mask: var(--x-tear-b) left bottom / 240px 8px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 7px) no-repeat; }
.go-then-a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; color: inherit; text-decoration: none; }
.go-then-a:hover .go-then-title { text-decoration: underline; text-underline-offset: 3px; }
.go-then-date { font-size: 12.5px; font-weight: 700; opacity: 0.92; }
.go-then-title { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.2; }
.go-then-head .go-tick { background: transparent; color: var(--era-on); box-shadow: inset 0 0 0 1.5px currentColor; }
.go-then-head .go-tick .icon { color: inherit; opacity: 0.8; }
.go-then-head .go-tick.is-on { background: var(--x-paper-2); }
.go-then-head .go-tick.is-on .icon { color: var(--x-navy); }
.go-then-list { margin: 0; padding: 0 16px; display: grid; gap: 2px; font-size: 14.5px; line-height: 1.5; }
.go-then-k { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--era-ink); }
.go-then-k:first-child { margin-top: 0; }
.go-then-list dd { margin: 0; }

/* read, then walk */
.go-readwalk { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.go-read { display: flex; }
.go-read .rd-cover { min-height: 220px; }
.go-walks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.go-empty { padding: 18px 20px; display: grid; gap: 12px; }
.go-empty p { margin: 0; }
.go-foot { display: flex; flex-wrap: wrap; gap: 10px; }
.go-printed { display: none; }

/* ── the card on the place home ── */
.go-card {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); overflow: hidden; color: var(--x-navy); text-decoration: none;
  border-radius: var(--x-radius); background: var(--x-paper-2) var(--x-grain); box-shadow: var(--x-shadow);
  transform: rotate(-0.4deg); transition: transform 0.15s, box-shadow 0.15s;
}
.go-card:hover { transform: rotate(0deg) translateY(-2px); box-shadow: var(--x-shadow-lift); }
.go-card-art {
  position: relative; display: flex; align-items: center; justify-content: center; padding: 18px 10px;
  background: var(--place-fill) var(--x-grain); border-right: 3px dotted var(--x-paper-2);
}
.go-card-tag { width: 76px; height: auto; transform: rotate(-8deg); filter: drop-shadow(0 4px 6px rgba(40, 25, 5, 0.35)); }
.go-card-text { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 20px; min-width: 0; }
.go-card-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--x-red); }
.go-card-title { font-family: var(--serif); font-size: clamp(23px, 2.6vw, 30px); font-weight: 600; line-height: 1.12; }
.go-card-line { font-size: 15px; line-height: 1.5; color: var(--x-ink-2); max-width: 56ch; }
.go-card-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 700; color: var(--place-ink); }
.go-card:hover .go-card-cta span { text-decoration: underline; text-underline-offset: 3px; }

/* the luggage tag */
.go-tag-string { fill: none; stroke: var(--x-navy); stroke-width: 2.5; stroke-linecap: round; }
.go-tag-paper { fill: var(--x-paper-2); }
.go-tag-hole { fill: var(--place-fill); stroke: var(--x-paper-3); stroke-width: 3; }
.go-tag-band { fill: var(--place2-fill); }
.go-tag-line { fill: var(--x-navy); opacity: 0.32; }

/* ── a phone ── */
@media (max-width: 720px) {
  .go-page { gap: 22px; }
  .go-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0 20px 40px; }
  .go-hero-art { order: 0; min-height: 0; height: 100px; margin: 0 -20px; }
  .go-hero-art .x-collage { transform: none; box-shadow: none;
    -webkit-mask: var(--x-tear-b) left bottom / 240px 10px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 9px) no-repeat;
    mask: var(--x-tear-b) left bottom / 240px 10px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 9px) no-repeat; }
  .go-hero-tag { right: 22px; bottom: -20px; width: 56px; }
  .go-h1 { font-size: clamp(29px, 8vw, 36px); }
  .go-index ol { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 10px; scrollbar-width: none; }
  .go-index ol::-webkit-scrollbar { display: none; }
  .go-index li { flex: none; }
  .go-path::before { left: 15px; }
  .go-stop { padding-left: 46px; }
  .go-stop-n { width: 33px; height: 33px; font-size: 17px; }
  .go-era { grid-template-columns: minmax(0, 1fr) auto; padding-right: 0; }
  .go-era-band { grid-column: 1 / -1; grid-row: 1; padding-right: 60px;
    -webkit-mask: var(--x-tear-b) left bottom / 240px 8px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 7px) no-repeat;
    mask: var(--x-tear-b) left bottom / 240px 8px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 7px) no-repeat; }
  /* over the band (a masked band paints above what follows it) */
  .go-era > .go-tick { position: relative; z-index: 1; grid-column: 2; grid-row: 1; align-self: center; margin-right: 10px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--era-on); }
  .go-era > .go-tick .icon { color: var(--era-on); }
  .go-era > .go-tick.is-on { background: var(--x-paper-2); }
  .go-era > .go-tick.is-on .icon { color: var(--x-navy); }
  .go-era-line { grid-column: 1 / -1; padding: 10px 14px 12px; }
  .go-months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .go-row { grid-template-columns: minmax(0, 1fr) auto; }
  .go-row-when { grid-column: 1 / -1; }
  .go-row-a { grid-column: 1; }
  .go-phrases .at-lines ul { grid-template-columns: minmax(0, 1fr); }
  /* customs and what is still there: a row that slides, a card a screen */
  .go-customs, .go-today { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px 0 0; padding: 4px 16px 14px 0; scrollbar-width: none; }
  .go-customs::-webkit-scrollbar, .go-today::-webkit-scrollbar { display: none; }
  .go-custom, .go-then { flex: 0 0 82%; scroll-snap-align: start; }
  .go-readwalk { grid-template-columns: minmax(0, 1fr); }
  .go-card { grid-template-columns: 92px minmax(0, 1fr); }
  .go-card-tag { width: 54px; }
  .go-card-text { padding: 16px 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .go-card, .go-hero-art .x-collage, .go-hero-tag, .go-card-tag, .go-month-btn { transform: none !important; transition: none; }
}

/* ── printed: one plain sheet in two columns, boxes to tick by hand ── */
@media print {
  @page { margin: 12mm; }
  /* only the sheet: every branch that does not lead to it goes */
  *:has(.go-page) > *:not(.go-page):not(:has(.go-page)) { display: none !important; }
  *:has(.go-page) {
    display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
    width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; overflow: visible !important;
    background: none !important; box-shadow: none !important; transform: none !important;
  }
  .go-page { display: block; color: #000; font-size: 9.5pt; line-height: 1.35; padding: 0; }
  .go-page * { box-shadow: none !important; text-shadow: none !important; }
  .go-crumbs, .go-hero-art, .go-actions, .go-index, .go-foot, .go-stop-line, .go-count, .go-months, .go-month-jump,
  .go-phrases .at-play, .go-phrases .at-play-none, .go-phrases .at-line-from, .go-readwalk, .go-stop.is-read, .go-stop.is-words .go-word-gloss:empty { display: none !important; }
  .go-hero { display: block; padding: 0 0 6pt; margin-bottom: 8pt; background: none; color: #000; border-bottom: 1.5pt solid #000; -webkit-mask: none; mask: none; }
  .go-kicker .x-strip { padding: 0; transform: none; -webkit-mask: none; mask: none; background: none; font-size: 8pt; }
  .go-h1 { font-size: 20pt; }
  .go-native { font-size: 12pt; }
  .go-lede { display: none; }
  .go-path { display: block; column-count: 2; column-gap: 14pt; }
  .go-path::before { display: none; }
  .go-stop { display: block; padding: 0; margin: 0 0 10pt; }
  .go-stop-head { display: block; margin-bottom: 4pt; break-after: avoid; }
  .go-stop-n { position: static; display: inline; width: auto; height: auto; background: none; color: #000; font-size: 12pt; margin-right: 4pt; }
  .go-stop-n::after { content: "."; }
  .go-stop-titles { display: inline; }
  .go-h2 { display: inline; font-size: 12pt; }
  /* a box to tick by hand, before what it ticks */
  .go-page .go-tick { order: -1; flex: none; width: 9pt; height: 9pt; margin: 0 2pt 0 0; border-radius: 1.5pt; background: none !important; border: 0.8pt solid #000; transform: translateY(1pt); }
  .go-page .go-tick .icon { display: none; }
  .go-tick.is-on .icon { display: block; width: 8pt; height: 8pt; color: #000 !important; opacity: 1; }
  .go-eras, .go-customs, .go-month-rows, .go-today { display: block; }
  .go-page :is(.go-era, .go-custom, .go-row, .go-then) { display: flex; gap: 5pt; align-items: baseline; padding: 2pt 0; margin: 0; background: none !important; border: 0; border-radius: 0; break-inside: avoid; overflow: visible; -webkit-mask: none; mask: none; }
  .go-era-band, .go-then-head { background: none; color: #000; padding: 0; -webkit-mask: none; mask: none; border-left: 3pt solid var(--era-mark); padding-left: 4pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .go-era { flex-wrap: wrap; }
  .go-era-title, .go-then-title, .go-custom-name, .go-row-a strong { font-size: 10pt; }
  .go-era-line { padding: 0; font-size: 9pt; flex-basis: 100%; }
  .go-custom-a, .go-then-a { flex-direction: row; flex-wrap: wrap; gap: 0 5pt; align-items: baseline; }
  .go-custom-blurb { font-size: 9pt; margin: 0; flex-basis: 100%; }
  .go-month-list { padding: 0; background: none; }
  .go-month-h { font-size: 10.5pt; }
  .go-page .go-row { flex-wrap: wrap; border-top: 0; }
  .go-row-when { font-size: 9pt; }
  .go-then { flex-direction: column; gap: 2pt; }
  .go-then-head .go-tick { border-color: #000; }
  .go-then-list { padding: 0 0 0 7pt; font-size: 9pt; gap: 1pt 6pt; }
  .go-then-k { color: #000; }
  .go-phrases .at-lines ul { display: block; }
  .go-phrases .at-line { display: block; padding: 2pt 0; background: none; break-inside: avoid; }
  .go-phrases .at-line-text { font-size: 10pt; color: #000; }
  .go-phrases .at-line-tr { font-size: 8.5pt; color: #333; }
  .go-words { display: block; }
  .go-words li { display: inline; }
  .go-word { display: inline; min-height: 0; padding: 0; background: none; color: #000; }
  .go-word-term { font-size: 10pt; }
  .go-word-gloss { margin-left: 3pt; font-size: 8.5pt; color: #333; }
  .go-word-gloss::after { content: " · "; white-space: pre; }
  .go-page a { color: #000 !important; text-decoration: none !important; }
  .go-printed { display: block; margin-top: 6pt; font-size: 8pt; color: #555; }
}