/* The vision-friendly page (clear.js; her name for it, 8 Nov: "vision friendly"). Her words, 8 Nov 2026: "one of the modes is highly accessible, so like everything is
   designed on the page for someone who's very blind", "it also built in a way that walks you through what you need", and on how it should
   look: "what keeps happening is you choose like tons of different fonts and layouts within the same space, and it gets very confusing
   what is what". So one font (Atkinson Hyperlegible, made for low vision), one button (white, the words in navy), one layout for every
   step: Back, the heading, one line, the big buttons. The page's night blue stays. */
:root {
  --cg-font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cg-bg: #06102a; --cg-ink: #ffffff; --cg-soft: #e3eaf6; --cg-btn: #ffffff; --cg-btn-ink: #0a1838; --cg-btn-sub: #2a3a64; --cg-focus: #ffd84d;
}
.guide { display: none; }
html.clear, html.clear body { background: var(--cg-bg); }
html.clear body { margin: 0; padding: 0 !important; overflow-x: hidden; }   /* no room kept for the usual page's side rail */
html.clear body > *:not(.guide):not(.view-ask):not(.defs) { display: none !important; }   /* .defs: the page's shared patterns, 0 by 0 */
html.clear .guide { display: block; min-height: 100vh; color: var(--cg-ink); font: 400 24px/1.5 var(--cg-font); }
.guide :focus-visible { outline: 5px solid var(--cg-focus); outline-offset: 4px; }

/* the bar along the top: where you are, Pause while the song plays, and the way back to the usual page */
.guide-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); background: #030a1f; border-bottom: 3px solid #ffffff; }
.guide-name { flex: 1 1 auto; margin: 0; font: 700 22px/1.2 var(--cg-font); }
.guide-bar button { min-height: 56px; padding: 0 20px; border-radius: 14px; border: 3px solid #ffffff; background: transparent; color: #ffffff;
  font: 700 21px/1.1 var(--cg-font); cursor: pointer; }
.guide-bar .guide-usual { background: var(--cg-btn); color: var(--cg-btn-ink); }
.guide-bar [hidden] { display: none; }

/* every step: Back, the heading, one line, the buttons */
.guide-main { max-width: 760px; margin: 0 auto; padding: 24px 20px 96px; outline: none; }
.cg-back { display: inline-flex; align-items: center; gap: 10px; min-height: 60px; margin: 0 0 8px; padding: 0 24px 0 14px; border: 3px solid #ffffff;
  border-radius: 14px; background: transparent; color: #ffffff; font: 700 24px/1 var(--cg-font); cursor: pointer; }
.cg-h { margin: 14px 0 10px; font: 700 clamp(38px, 7vw, 52px)/1.15 var(--cg-font); }
.cg-h:focus { outline: none; }
.cg-lead { margin: 0 0 24px; font: 400 clamp(24px, 4.4vw, 28px)/1.5 var(--cg-font); color: var(--cg-soft); }
.cg-note { margin: 22px 0 0; font: 400 22px/1.5 var(--cg-font); color: var(--cg-soft); }
.cg-list { display: grid; gap: 16px; margin: 0; }
.cg-list form { margin: 0; }

/* the one button */
.cg-choice { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; column-gap: 18px; row-gap: 2px; box-sizing: border-box;
  width: 100%; min-height: 96px; margin: 0; padding: 18px 22px; border: 3px solid #ffffff; border-radius: 18px; background: var(--cg-btn); color: var(--cg-btn-ink);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.cg-choice svg { grid-row: 1 / span 2; width: 44px; height: 44px; }
.cg-choice .cg-label { font: 700 clamp(25px, 4.6vw, 30px)/1.2 var(--cg-font); }
.cg-choice .cg-sub { font: 400 clamp(19px, 3.6vw, 22px)/1.35 var(--cg-font); color: var(--cg-btn-sub); }
.cg-choice:hover { background: #dde9ff; }
.cg-back svg, .cg-choice svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cg-back svg { width: 30px; height: 30px; stroke-width: 3; }

/* the song: the snow globe, then the same button, bigger, to play and pause; the time; ten seconds back or on */
.cg-art { position: relative; width: 100%; height: min(50svh, 90vw, 500px); margin: 4px 0 18px; }
.cg-play { min-height: 112px; grid-template-columns: 56px minmax(0, 1fr); }
.cg-play svg { width: 54px; height: 54px; fill: currentColor; stroke: none; grid-row: auto; }
.cg-play .cg-label { font-size: clamp(30px, 6vw, 38px); }
.cg-play .pause, .cg-play.is-playing .go { display: none; }
.cg-play.is-playing .pause { display: block; }
.cg-time { margin: 18px 0 14px; font: 700 clamp(28px, 5.4vw, 34px)/1.2 var(--cg-font); font-variant-numeric: tabular-nums; }
.cg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cg-two .cg-choice { grid-template-columns: minmax(0, 1fr); min-height: 80px; text-align: center; }
.cg-portrait { display: block; width: min(300px, 70vw); height: auto; margin: 4px 0 22px; border-radius: 18px; border: 3px solid #ffffff; }

/* the page's own parts, set out the same way: the Christmas card and mailing list forms, and the story */
.guide form label, .guide .sr-only { display: block; position: static; width: auto; height: auto; margin: 22px 0 8px; overflow: visible; clip: auto;
  white-space: normal; font: 700 24px/1.3 var(--cg-font); color: #ffffff; }
.guide .gb-hp { display: none !important; }
.guide input:not([type="hidden"]):not([type="radio"]), .guide textarea { display: block; box-sizing: border-box; width: 100%; min-height: 64px; margin: 0; padding: 12px 16px;
  border: 3px solid #ffffff; border-radius: 14px; background: #ffffff; color: var(--cg-btn-ink); font: 400 24px/1.4 var(--cg-font); }
.guide textarea { min-height: 200px; }
.guide .gb-form button[type="submit"], .guide .mail-form button[type="submit"] { display: block; box-sizing: border-box; width: 100%; min-height: 88px; margin: 26px 0 0;
  border: 3px solid #ffffff; border-radius: 18px; background: var(--cg-btn); color: var(--cg-btn-ink); font: 700 30px/1.1 var(--cg-font); letter-spacing: 0;
  text-transform: none; box-shadow: none; cursor: pointer; }
.guide .gb-status, .guide .mail-note { margin: 16px 0 0; font: 700 24px/1.4 var(--cg-font); color: #ffffff; }
.guide .made { margin: 0; padding: 0; border: 0; }
.guide .made .eyebrow { display: none; }
.guide .made p, .guide .made blockquote, .guide .made blockquote p { font: 400 clamp(23px, 4.4vw, 26px)/1.6 var(--cg-font); color: #ffffff; letter-spacing: 0; }
.guide .made a { color: var(--cg-focus); text-decoration: underline; text-underline-offset: 4px; }
.guide .made blockquote { margin: 24px 0; padding: 0 0 0 20px; border-left: 5px solid #ffffff; }
.guide .made figure { float: none; width: auto; max-width: 100%; margin: 24px 0; padding: 0; transform: none; background: none; box-shadow: none; }
.guide .made img { display: block; width: 100%; max-width: 520px; height: auto; border-radius: 14px; }
.guide .made figcaption { margin: 10px 0 0; font: 400 21px/1.4 var(--cg-font); color: var(--cg-soft); text-align: left; }

/* the question on the first visit, in the same font and buttons */
.view-ask { box-sizing: border-box; width: min(640px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 28px 26px 22px; border: 0; border-radius: 22px;
  background: #ffffff; color: var(--cg-btn-ink); font: 400 22px/1.45 var(--cg-font); box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
.view-ask::backdrop { background: rgba(2, 6, 20, .74); }
.view-ask h2 { margin: 0 0 20px; font: 700 clamp(28px, 5.6vw, 36px)/1.2 var(--cg-font); color: var(--cg-btn-ink); }
.view-ask button { display: grid; gap: 4px; box-sizing: border-box; width: 100%; margin: 0 0 14px; padding: 18px 22px; border: 3px solid #10295a; border-radius: 18px;
  font: 700 clamp(24px, 4.8vw, 28px)/1.2 var(--cg-font); text-align: left; cursor: pointer; }
.view-ask .view-yes { background: #10295a; color: #ffffff; }
.view-ask .view-yes span { font: 400 clamp(19px, 3.8vw, 21px)/1.4 var(--cg-font); color: #e3eaf6; }
.view-ask .view-no { background: #ffffff; color: #10295a; }
.view-ask button:focus-visible { outline: 5px solid #10295a; outline-offset: 4px; }
.view-note { margin: 4px 0 0; font: 400 19px/1.45 var(--cg-font); color: #33415f; }

/* the way into it on the usual page: a pill the height of the round menu button and level with it, as far in from the left as that
   button is from the right, with an eye beside the words (her words, 9 Nov: "now sure i like the layout of this either") */
.view-switch { position: absolute; top: 16px; left: max(30px, env(safe-area-inset-left)); z-index: 40; display: inline-flex; align-items: center; gap: 10px;
  box-sizing: border-box; height: 44px; padding: 0 20px 0 15px; border-radius: 999px; border: 1px solid rgba(238, 243, 248, .85); background: rgba(6, 20, 50, .62);
  color: #ffffff; cursor: pointer; font: 700 13px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.view-switch::before { content: ""; flex: none; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }
.view-switch > span + span { margin-left: -.2em; }
.view-switch:hover { background: rgba(191, 227, 255, .2); }
.view-switch:focus-visible { outline: 3px solid var(--ice); outline-offset: 3px; }

@media (max-width: 600px) {   /* on a phone the two words sit one over the other beside the eye, clear of the logo in the middle */
  .view-switch { display: inline-grid; grid-template-columns: 20px auto; column-gap: 8px; row-gap: 0; align-content: center; left: max(18px, env(safe-area-inset-left));
    padding: 0 14px 0 12px; font-size: 11px; line-height: 1.2; text-align: left; }
  .view-switch::before { grid-row: 1 / span 2; width: 20px; height: 20px; }
  .view-switch > span { grid-column: 2; }
  .view-switch > span + span { margin-left: 0; }
}
@media (max-width: 360px) {   /* the narrowest phones, and larger text: smaller still, so it never touches the logo */
  .view-switch { left: max(12px, env(safe-area-inset-left)); padding: 0 10px 0 9px; column-gap: 6px; font-size: 10px; }
}
@media (max-width: 520px) {
  .guide-name { flex-basis: 100%; }
  .cg-two { grid-template-columns: minmax(0, 1fr); }
}