/* "og-approach": the Fluid base v2 child theme for theogapproach.com.
   Brings back the look of Cheryl's original Carrd page (2022–2025): a deep
   indigo-to-night gradient, a plum band for the session details, one lime-green
   accent on rules, ticks and the lead line, Sora headings over Inter text, and
   white pill buttons. Dark only, like the original.
   Light source (Neil, 2026-11-05): every section is lit from its bottom-left
   corner, fading to night at the top right. The light marks where a section
   ends and pulls the eye down the page; the next section starts dark again.
   Fonts are self-hosted (fonts/, OFL), nothing loads from Google.
   Link after the base: fluid.min.css, then this file. Private tokens: --og-. */
@layer reset, tokens, base, layouts, components, themes, utilities;

@font-face { font-family: "Sora"; src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-wght-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Didact Gothic"; src: url("../fonts/DidactGothic-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

@layer themes {

  :root {
    color-scheme: dark;
    /* The original palette (Carrd export, 2025-07): indigo #393969, night #0E0E14,
       plum #3B1021 / #523757, lime #AAC767, sand #EFD6AE. */
    --og-indigo: #393969;
    --og-night: #111018;
    --og-ink: #1b1a2b;
    --og-plum: #3b1730;
    --og-plum-2: #4e2c4c;
    --og-lime: #aac767;
    --og-lime-2: #c3dc8a;
    --og-sand: #efd6ae;
    --og-text: #f4f2f7;
    --og-text-2: #c9c6d6;
    --og-text-3: #bdb9cc;
    --og-line: rgb(255 255 255 / 0.12);
    --og-panel: rgb(255 255 255 / 0.045);
    /* Each section's light, rising from its bottom-left corner toward the top right. */
    --og-light: linear-gradient(to top right, #3d3d70 0%, #27264a 30%, var(--og-ink) 58%, var(--og-night) 100%);
    --og-light-plum: linear-gradient(to top right, #5e3a62 0%, var(--og-plum-2) 32%, var(--og-plum) 70%, #2a1022 100%);

    /* Fluid knobs and colour roles */
    --font-heading: "Sora", system-ui, sans-serif;
    --font-display: "Sora", system-ui, sans-serif;
    --font-body: "Figtree", "Inter", system-ui, sans-serif;
    --weight-display: 650;
    --weight-heading: 600;
    --accent: var(--og-lime);
    --accent-ink: var(--og-lime);
    --on-accent: #16161f;
    --accent-hover: var(--og-lime-2);
    --accent-fill: var(--og-lime);
    --accent-fill-hover: var(--og-lime-2);
    --accent-subtle: color-mix(in oklch, var(--og-lime) 14%, var(--og-ink));
    --color-background: var(--og-night);
    --color-surface: var(--og-ink);
    --color-surface-raised: var(--og-ink);
    --color-text: var(--og-text);
    --color-text-muted: var(--og-text-2);
    --color-text-subtle: var(--og-text-3);
    --color-border: rgb(255 255 255 / 0.28);
    --color-border-subtle: var(--og-line);
    --color-focus: var(--og-lime);
    --color-selection: color-mix(in oklch, var(--og-lime) 35%, var(--og-ink));
    --radius-card: 18px;
    --radius-control: 999px;
    --radius-pill: 999px;
    --shadow-style: 0;
    --container-content: 64rem;
  }

  html { background-color: var(--og-night); }
  body { background: var(--og-night); color: var(--og-text); line-height: 1.75; }

  /* Navigation: the page's own colours (the original had none; this one is quiet). */
  /* Navigation: solid (Neil, 2026-11-05: nothing shows through while scrolling), Sora links, the brand lockup */
  .nav { background: #0f0e16; color: var(--og-text); border-block-end: 1px solid rgb(255 255 255 / 0.08);
    box-shadow: 0 8px 24px -16px rgb(0 0 0 / 0.8); backdrop-filter: none; }
  .nav__link { font-family: var(--font-heading); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.005em; padding-inline: 0.55rem; color: var(--og-text-2);
    text-underline-offset: 0.45em; text-decoration-thickness: 2px; }
  .nav__link:hover, .nav__link[aria-current="page"] { color: var(--og-text); text-decoration-color: var(--og-lime); }
  .og-brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--og-text); }
  .og-brand__mark { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; flex: none;
    background: radial-gradient(circle at 30% 25%, #c3dc8a, var(--og-lime) 60%, #93b356); color: #16161f;
    font: 700 1.02rem/1 var(--font-heading); letter-spacing: -0.04em; padding-block-start: 0.06em;
    box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.12), 0 0 0 3px rgb(170 199 103 / 0.16); }
  .og-brand__text { display: grid; line-height: 1.05; }
  .og-brand__name { font: 650 1.3rem/1.05 var(--font-heading); letter-spacing: -0.025em; }
  .og-brand__tag { font: 600 0.7rem/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--og-lime); margin-block-start: 0.2rem; }
  .og-brand:hover, .og-brand:focus-visible { color: var(--og-text); }
  .og-brand:hover .og-brand__mark, .og-brand:focus-visible .og-brand__mark { box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.12), 0 0 0 4px rgb(170 199 103 / 0.3); }
  /* One top line (Neil, 2026-11-05): brand, four words, Join, contact and account icons. Under ~54rem the words fold
     into the menu button (public/js/nav.js opens it); Join moves into that menu on phones. The About menu opens only
     from aria-expanded (nav.js: click, hover, Escape), not Fluid's focus-within, so it can always be closed. */
  .nav__dropdown-trigger { font: 500 0.9rem var(--font-heading); color: var(--og-text-2); background: none; border: 0;
    display: inline-flex; align-items: center; gap: 0.25rem; padding-inline: 0.55rem; min-block-size: 2.75rem; cursor: pointer;
    text-underline-offset: 0.45em; text-decoration-thickness: 2px; }
  .nav__dropdown-trigger:hover, .nav__dropdown-trigger[data-active] { color: var(--og-text); text-decoration-color: var(--og-lime); }
  .nav__dropdown-trigger svg { inline-size: 1em; block-size: 1em; transition: transform 150ms; }
  .nav__dropdown-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
  .nav__dropdown .nav__dropdown-menu { opacity: 0; visibility: hidden; }
  .nav__dropdown:has(> [aria-expanded="true"]) .nav__dropdown-menu { opacity: 1; visibility: visible; }
  .nav__dropdown-menu { background: #16151f; border-color: rgb(255 255 255 / 0.1); padding: 0.4rem; box-shadow: 0 16px 32px -12px rgb(0 0 0 / 0.7); }
  .nav__dropdown-link { display: block; padding: 0.55rem 0.8rem; border-radius: 8px; font: 500 0.9rem var(--font-heading); color: var(--og-text-2); text-decoration: none; }
  .nav__dropdown-link:hover, .nav__dropdown-link[aria-current] { color: var(--og-text); background: rgb(255 255 255 / 0.06); text-decoration: none; }
  .nav__dropdown-link[aria-current] { box-shadow: inset 3px 0 0 var(--og-lime); }
  .nav__actions { gap: 0.25rem; }
  .og-join { background: var(--og-lime); color: #16161f; font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem;
    border-radius: 999px; padding-inline: 1.15rem; min-block-size: 2.5rem; margin-inline-end: 0.5rem; text-decoration: none; }
  .og-join:hover { background: var(--og-lime-2); color: #16161f; }
  .nav__link[data-icon] { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border-radius: 50%;
    color: var(--og-text-2); text-decoration: none; }
  .nav__link[data-icon]:hover { color: var(--og-text); background: rgb(255 255 255 / 0.07); }
  .nav__link[data-icon][aria-current] { color: var(--og-lime); background: rgb(170 199 103 / 0.12); }
  .og-menu-only { display: none !important; }
  .nav__toggle .og-icon-close, .nav__toggle[aria-expanded="true"] .og-icon-menu { display: none; }
  .nav__toggle[aria-expanded="true"] .og-icon-close { display: block; }
  .nav__toggle { color: var(--og-text); }
  .nav__toggle svg { inline-size: 1.5rem; block-size: 1.5rem; }
  .og-brand__name { white-space: nowrap; }
  /* Fold the words into the menu button when they no longer fit on one line (Fluid folds at 40rem; ours needs ~54rem). */
  .nav:has(.nav__toggle[aria-expanded="false"]) { row-gap: 0; }
  @container nav (width <= 54rem) {
    .nav__brand { flex: 1 1 0; min-inline-size: 0; }
    .nav > .nav__actions { order: 1; margin-inline-start: auto; }
    .nav__toggle { order: 2; display: flex; margin-inline-start: 0; }
    .nav .nav__menu { visibility: hidden; opacity: 0; max-block-size: 0; overflow: hidden; flex-direction: column; flex-basis: 100%;
      order: 3; align-items: stretch; display: flex; margin-inline-start: 0;
      transition: opacity 200ms, visibility 200ms, max-block-size 200ms; }
    .nav:has(.nav__toggle[aria-expanded="true"]) .nav__menu { visibility: visible; opacity: 1;
      max-block-size: calc(100dvh - 5rem); overflow-y: auto; padding-block: 0.5rem 0.75rem; }
    .nav .nav__menu > li { display: block; border-block-start: 1px solid rgb(255 255 255 / 0.08); }
    .nav__menu .nav__link, .nav__dropdown-trigger { min-block-size: 3rem; display: flex; align-items: center; font-size: 1rem; padding-inline: 0.25rem; }
    .nav__dropdown-trigger { pointer-events: none; color: var(--og-text-3); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; min-block-size: 2.5rem; }
    .nav__dropdown-trigger svg { display: none; }
    .nav .nav__dropdown .nav__dropdown-menu { position: static; opacity: 1; visibility: inherit; box-shadow: none; background: none; border: 0; padding: 0 0 0.5rem 0.75rem; }
    .nav__dropdown-link { font-size: 0.95rem; }
  }
  @media (max-width: 40rem) {
    .og-brand__tag, .og-join { display: none; }
    .nav { column-gap: 0.25rem; }
    .og-menu-only { display: block !important; }
    .og-brand__name { font-size: 1.05rem; } .og-brand { gap: 0.5rem; }
    .nav__link[data-icon], .nav__toggle { inline-size: 2.5rem; block-size: 2.5rem; min-inline-size: 2.5rem; }
    .og-brand__mark { inline-size: 2.2rem; block-size: 2.2rem; font-size: 0.9rem; }
    .og-menu-only--xs { display: none !important; }
  }
  /* Small phones (under 360px): the mail icon moves into the menu so the name never runs under the icons. */
  @media (max-width: 22.5rem) {
    .nav__link[data-icon][href="/contact/"] { display: none; }
    .og-menu-only--xs { display: block !important; }
    .og-brand__name { font-size: 1rem; }
  }

  /* Headings: white Sora, section heads may go lime (.og-lime). */
  h1, h2, h3, .hero__headline { font-family: var(--font-heading); color: var(--og-text); text-wrap: balance; }
  h3 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
  h1, .hero__headline { letter-spacing: -0.03em; line-height: 1.08; font-weight: 600;
    font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4rem); max-inline-size: 18ch; }
  h2 { letter-spacing: -0.02em; line-height: 1.15; font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem); margin-block-end: 1.5rem; }
  .og-lime { color: var(--og-lime); }
  a { color: var(--og-lime); text-underline-offset: 0.2em; }
  a:hover { color: var(--og-lime-2); }

  /* The short lime bar from the original: under the page title only, so it marks the top of the page. */
  .og-rule { display: block; inline-size: 4rem; block-size: 4px; background: var(--og-lime); border: 0; margin-block: 2rem; }
  .section:not(:first-of-type) .og-rule { display: none; }

  /* Sections: each one lit from its bottom-left corner (see the header). No hairlines between them: the light
     ending and the next section starting dark is the divider. .og-plum holds its content in a plum panel. */
  .section, .hero { background: var(--og-light); }
  .section > .container { border-block-start: 0 !important; padding-block-start: 0 !important; }
  .hero { padding-block: clamp(4.5rem, 3rem + 6vw, 9rem) clamp(3.5rem, 2.5rem + 4vw, 6.5rem) !important; }
  .section { padding-block: clamp(4rem, 2.5rem + 5.5vw, 8.5rem) !important; }
  .og-panel, .og-plum > .container { background: var(--og-light-plum); border-radius: 28px;
    padding: clamp(1.75rem, 1rem + 3vw, 3.75rem) !important; }
  .og-plum .card__body { padding: 1.5rem; }

  /* One left edge: text width comes from a reading measure, never from a centred, narrower container. */
  .container > p, .container > ul, .container > ol, .container > figure, .container > form { max-inline-size: 40rem; }

  .hero__subheadline { color: var(--og-text); }
  .lede { font-family: var(--font-body); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); color: var(--og-text-2); line-height: 1.7; font-weight: 400; }
  .og-lead { font-family: var(--font-heading); font-weight: 400; color: var(--og-lime); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.5; letter-spacing: -0.01em; }
  .muted { color: var(--og-text-2); }

  /* Tick lists, as on the original. */
  .og-ticks { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
  .og-ticks li { position: relative; padding-inline-start: 2rem; line-height: 1.65; color: var(--og-text-2); }
  .og-ticks li::before { content: ""; position: absolute; inset-inline-start: 0.1rem; inset-block-start: 0.45em; inline-size: 0.95rem; block-size: 0.5rem;
    border-inline-start: 2px solid var(--og-lime); border-block-end: 2px solid var(--og-lime); transform: rotate(-45deg); }
  .og-ticks li b, .og-hl { color: var(--og-lime); font-weight: 600; }

  /* Buttons: white pills; the outline pill for the second action. */
  .button { background: #fff; color: var(--og-ink); border: 1px solid #fff; border-radius: 999px; font-weight: 600; box-shadow: none; }
  .button:hover { background: var(--og-lime-2); border-color: var(--og-lime-2); color: var(--og-ink); }
  .button[data-variant="outline"] { background: transparent; color: var(--og-text); border-color: rgb(255 255 255 / 0.4); }
  .button[data-variant="outline"]:hover { border-color: var(--og-lime); color: var(--og-lime); background: transparent; }

  /* Cards: quiet glass panels. */
  .card { background: rgb(255 255 255 / 0.035); border: 1px solid rgb(255 255 255 / 0.09); border-radius: 22px; color: var(--og-text); box-shadow: none; }
  .card__body { padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
  .card h3 { margin-block-end: 0.5rem; }
  a.card { text-decoration: none; display: block; transition: border-color 200ms; }
  a.card:hover { border-color: var(--og-lime); }
  .card .og-more { color: var(--og-lime); font-weight: 600; }

  /* Quotes */
  blockquote { margin: 0; font-size: 1.05rem; color: var(--og-text); }
  blockquote p::before { content: "\201C"; } blockquote p::after { content: "\201D"; }
  .og-quote cite { display: block; margin-block-start: 0.75rem; font-style: normal; color: var(--og-lime); font-weight: 600; }
  .og-quote { margin-block-start: 0; }
  .og-quote cite small { display: block; color: var(--og-text-3); font-weight: 400; }
  /* A pull quote: one testimonial set large, on its own. */
  .og-pull blockquote { font-family: var(--font-heading); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.45; font-weight: 400;
    border: 0; padding: 0; }

  /* Forms */
  label { font-weight: 600; }
  input, textarea, select { background: rgb(0 0 0 / 0.25); color: var(--og-text); border: 1px solid var(--color-border); border-radius: 12px; }
  input:focus, textarea:focus { border-color: var(--og-lime); outline: 2px solid color-mix(in oklch, var(--og-lime) 40%, transparent); }
  .hp { position: absolute; inset-inline-start: -10000px; }

  /* Downloads */
  .og-badge { display: inline-block; padding: 0.15rem 0.7rem; border-radius: 999px; background: var(--accent-subtle); color: var(--og-lime); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; }
  .og-swatch { display: inline-block; inline-size: 1.1em; block-size: 1.1em; border-radius: 4px; vertical-align: -0.15em; margin-inline-end: 0.35em; border: 1px solid rgb(255 255 255 / 0.35); }
  .og-preview { border-radius: 12px; border: 1px solid var(--og-line); background: #fff; inline-size: 100%; block-size: auto; }
  .og-table { inline-size: 100%; border-collapse: collapse; font-size: 0.95rem; }
  .og-table th, .og-table td { padding: 1rem 0.6rem; border-block-end: 1px solid var(--og-line); text-align: start; vertical-align: middle; }
  .og-table th { color: var(--og-text-2); font-weight: 600; font-size: 0.85rem; }
  .og-table td:first-child { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 600; color: var(--og-text); }
  .og-table a, .og-table td { white-space: nowrap; }
  .og-scroll { overflow-x: auto; }
  .og-file { font-size: 0.8rem; color: var(--og-text-3); }

  /* Download chooser: one card per version, previews on top at one fixed size, the button pinned to the bottom,
     so the three line up across on a wide screen and read the same on a phone. */
  .og-choose { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
  .og-choose .card { display: flex; flex-direction: column; }
  .og-choose .card__body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
  .og-choose h3 { margin: 0.75rem 0 0; }
  .og-choose .og-get { margin-block-start: auto; padding-block-start: 1rem; }
  .og-pair { max-inline-size: 26rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 0; }
  .og-pair figure { margin: 0; text-align: center; }
  .og-pair img { display: block; inline-size: 100%; aspect-ratio: 1; block-size: auto; border-radius: 10px;
    box-shadow: 0 10px 28px -12px rgb(0 0 0 / 0.65); }
  .og-pair figcaption { margin-block-start: 0.5rem; font-size: 0.8rem; color: var(--og-text-3); }
  /* A download series on the Free Downloads page: previews beside the text on a wide screen. */
  .og-series .card__body { display: grid; gap: 1.25rem 2.5rem; align-items: center; }
  @media (min-width: 52rem) { .og-series .card__body { grid-template-columns: minmax(0, 24rem) 1fr; } }
  .og-series .card__body > div:not(.og-pair) > :first-child { margin-block-start: 0; }
  /* Page ranges under each download button: one line each, so the three cards stay level. */
  .og-pages { list-style: none; padding: 0; margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--og-text-3); line-height: 1.6; }
  .og-pages span { display: inline-block; min-inline-size: 5.5rem; color: var(--og-text-2); }

  /* A tic-tac-toe board in HTML (the printed board and cards, drawn): a white sheet, sage crosshatch only,
     cards at 90% of a square (2.25 in on a 2.5 in square), Didact Gothic like the print. Sizes follow the
     board's width (container units), so the same markup scales from a thumbnail to a full-screen game. */
  .og-ttt-demo { margin: 0; max-inline-size: 22rem; }
  .og-ttt-demo figcaption { margin-block-start: 0.75rem; font-size: 0.85rem; color: var(--og-text-3); }
  .og-ttt-paper { container-type: inline-size; background: #fff; padding: 7%; border-radius: 10px;
    box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.7); }
  .og-ttt { inline-size: 100%; aspect-ratio: 1; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    gap: 2%; background: #5a6b68; }
  .og-ttt__cell { background: #fff; display: grid; place-items: center; }
  .og-ttt__card { inline-size: 86%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 4%;
    font-family: "Didact Gothic", sans-serif; font-size: 7.5cqi; line-height: 1; padding-block-end: 0.8cqi; }
  .og-ttt__card--sage { background: #5a6b68; color: #fff; }
  .og-ttt__card--gold { background: #c6a063; color: #fff; }
  .og-ttt__card--gray { background: #4d4d4d; color: #fff; }
  .og-ttt__card--white { background: #fff; color: #000; box-shadow: inset 0 0 0 1px #8c8c8c; }
  .og-ttt__card--sage-tint { background: #eef0f0; color: #000; box-shadow: inset 0 0 0 2.2cqi #5a6b68; }
  .og-ttt__card--gold-tint { background: #f9f6ef; color: #000; box-shadow: inset 0 0 0 2.2cqi #c6a063; }
  .og-ttt__card.is-win { box-shadow: 0 0 0 1.1cqi var(--og-lime); }

  /* Bold one-line reason to pick a version (Neil, 2026-11-05: helps a parent choose). */
  .og-why { margin: 0; font-weight: 700; color: var(--og-text); }

  /* ---- The online game (/play/tic-tac-toe/) ---- */
  .og-setup { display: grid; gap: 1.75rem; max-inline-size: 46rem; }
  .og-setup h2 { margin: 0; }
  .og-field { border: 0; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
  .og-field legend { font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; margin-block-end: 0.75rem; padding: 0; }
  .og-field select { min-block-size: 3rem; padding-inline: 1rem; font-size: 1.05rem; border-radius: 12px; max-inline-size: 22rem; }
  .og-choices { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .og-choice { display: flex; gap: 0.85rem; align-items: center; padding: 1rem 1.15rem; border-radius: 16px; cursor: pointer;
    background: rgb(255 255 255 / 0.035); border: 1px solid rgb(255 255 255 / 0.12); font-weight: 400; }
  .og-choice:has(input:checked) { border-color: var(--og-lime); background: color-mix(in oklch, var(--og-lime) 9%, transparent); }
  .og-choice:has(input:focus-visible) { outline: 2px solid var(--og-lime); outline-offset: 2px; }
  .og-choice input { accent-color: var(--og-lime); inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
  .og-choice small, .og-turn small { display: block; color: var(--og-text-3); font-size: 0.85rem; font-weight: 400; }
  .og-choice--cards { flex-wrap: wrap; }
  .og-words { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
  .og-words label { display: grid; gap: 0.4rem; font-weight: 600; }
  .og-words label[hidden] { display: none; }
  .og-mini { container-type: inline-size; inline-size: 5.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 6%; flex: none; }
  .og-mini .og-ttt__card { inline-size: 100%; font-size: 19cqi; }
  .og-turn .og-mini { inline-size: 3.25rem; grid-template-columns: 1fr; }
  .og-turn .og-mini .og-ttt__card { font-size: 30cqi; }

  .og-play { display: grid; gap: 1.25rem; justify-items: center; scroll-margin-top: 6rem; }
  .og-play__bar { inline-size: min(100%, 40rem); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
  .og-turn { display: flex; gap: 0.9rem; align-items: center; min-block-size: 3.25rem; font-size: 1.1rem; }
  .og-play__tools { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .og-play__tools .button { min-block-size: 2.5rem; padding-block: 0.4rem; font-size: 0.9rem; }
  .og-play__board { inline-size: min(100%, 40rem, 100dvh - 20rem); min-inline-size: min(100%, 18rem); }
  .og-play__foot { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
  .og-score { margin: 0; color: var(--og-text-2); font-size: 0.95rem; }
  .og-ttt--play .og-ttt__cell { all: unset; box-sizing: border-box; display: grid; place-items: center; inline-size: 100%; block-size: 100%;
    background: #fff; border-radius: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .og-ttt--play .og-ttt__cell[aria-disabled="true"] { cursor: default; }
  .og-ttt--play .og-ttt__cell:not([aria-disabled="true"]):hover { background: #f4f6f4; }
  .og-ttt--play .og-ttt__cell:focus-visible { outline: 3px solid var(--og-lime); outline-offset: -3px; }
  .og-ttt--play .og-ttt__card { font-size: 9.5cqi; }
  .og-ttt__card.is-placed { animation: og-place 220ms ease-out; }
  @keyframes og-place { from { transform: scale(0.82); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .og-ttt__card.is-placed { animation: none; } }

  /* Full screen / focus mode: the game alone, sized to the screen (works on iPhone, which has no element full screen). */
  body.og-focus { overflow: hidden; }
  body.og-focus .nav, body.og-focus .skip-link, body.og-focus .site-footer { display: none; }
  body.og-focus .og-play { position: fixed; inset: 0; z-index: 100; background: var(--og-light); padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    align-content: center; overflow: auto; }
  body.og-focus .og-play__board { inline-size: min(100%, 80vh - 9rem, 46rem); }
  .og-play:fullscreen { background: var(--og-light); }

  .og-also { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; margin-block-start: 2rem; }
  .og-also p { margin: 0; }

  .site-footer { padding-inline: 0; background: var(--og-night); color: var(--og-text-2); border-block-start: 1px solid rgb(255 255 255 / 0.06); }
  .site-footer a { color: var(--og-text-2); }
  .site-footer a:hover { color: var(--og-lime); }
  .skip-link { background: var(--og-lime); color: var(--og-ink); }

  /* ---- Match-Up (/play/match-up/, members) ---- */
  .og-mu { container-type: inline-size; display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 2.5cqi;
    inline-size: min(100%, 44rem); box-sizing: border-box; background: #fff; padding: 3cqi; border-radius: 14px; }
  .og-mu__cell { display: block; inline-size: 100%; aspect-ratio: 1; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 8px; }
  .og-mu__cell > span { display: grid; place-items: center; inline-size: 100%; block-size: 100%; }
  .og-mu__cell:focus-visible { outline: 3px solid var(--og-lime); outline-offset: 2px; }
  .og-mu .og-ttt__card { inline-size: 100%; aspect-ratio: auto; font-size: calc(30cqi / var(--cols, 4)); }
  .og-mu__back { border-radius: 8%; background:
    radial-gradient(circle at 50% 50%, #aac767 0 12%, transparent 13%), linear-gradient(135deg, #393969, #4e2c4c); }
  .og-mu__cell:disabled { opacity: 1; cursor: default; filter: none; }
  .og-mu__cell.is-found .og-ttt__card { box-shadow: 0 0 0 0.8cqi var(--og-lime); }
  .og-mu-end { margin-block-start: 1.5rem; inline-size: min(100%, 44rem); }
  .og-mu-end__big { font-family: var(--font-heading); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); color: var(--og-lime); margin: 0; }
  /* Match-Up's chooser puts .og-mini on the card itself; scoped so it no longer breaks Tic-Tac-Toe's .og-mini containers */
  .og-ttt__card.og-mini { inline-size: 3rem; font-size: 1rem; }

  /* ---- Membership pages (library, plans, account, admin) ---- */
  .og-badge--member { background: color-mix(in oklch, #c6a063 25%, transparent); color: #f0d9a8; }
  .og-badge--soon { background: rgb(255 255 255 / 0.08); color: var(--og-text-2); }
  .og-item--soon { opacity: 0.72; }
  .og-item__meta { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-block-end: 0.5rem; }
  .og-item__actions { display: flex; gap: 1rem; align-items: center; margin-block-start: 1rem; }
  .og-plan--popular { border-color: var(--og-lime); }
  .og-price b { font-family: var(--font-heading); font-size: 2rem; }
  .og-plan__buttons { display: grid; gap: 0.6rem; margin-block-start: 1rem; }
  .og-plan__buttons .button { inline-size: 100%; }
  .og-library + h2 { margin-block-start: clamp(3rem, 2rem + 3vw, 4.5rem); }
  .og-kicker { font: 600 0.8rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--og-lime); margin-block-end: 1rem; }
  .og-inline-form { display: grid; gap: 0.5rem; max-inline-size: 26rem; margin-block-start: 1rem; }
  .og-inline-form .button { justify-self: start; margin-block-start: 0.5rem; }
  .og-messages { max-inline-size: 44rem; }
  .og-messages textarea { min-block-size: 4.5rem; }
  .og-row-form { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
  .og-ticks-row { display: flex; gap: 1rem; flex-wrap: wrap; border: 0; padding: 0; margin: 0; }
  .og-tick { display: inline-flex; gap: 0.4rem; align-items: center; font-weight: 400; white-space: nowrap; }
  .og-tick input { inline-size: 1.2rem; block-size: 1.2rem; accent-color: var(--og-lime); }
  .og-link { background: none; border: 0; padding: 0; color: var(--og-lime); text-decoration: underline; cursor: pointer; font: inherit; margin-inline-start: 0.75rem; }
  /* Children on the account page: each a large, solid card (clearly saved); the add fields always visible */
  .og-kids { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 0.75rem; max-inline-size: 36rem; }
  .og-kid { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-radius: 14px;
    background: rgb(255 255 255 / 0.14); border: 1px solid rgb(255 255 255 / 0.18); }
  .og-kid__name { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 600; color: var(--og-text); }
  .og-kid__grade { color: var(--og-text-2); }
  .og-kid__remove { margin-inline-start: auto; font-size: 0.95rem; }
  .og-add-kid { margin-block-start: 2.5rem; max-inline-size: 44rem; }
  .og-add-kid h3 { margin-block-end: 0.75rem; }
  .og-add-kid__row { display: flex; gap: 0.75rem 1rem; align-items: end; flex-wrap: wrap; }
  .og-add-kid__row label { display: grid; gap: 0.35rem; font-weight: 600; }
  .og-add-kid__name { flex: 1 1 16rem; }
  .og-add-kid__name input { font-size: 1.15rem; min-block-size: 3rem; }
  .og-add-kid__grade select { min-block-size: 3rem; }
  .og-add-kid__row small { font-weight: 400; color: var(--og-text-2); }
  .og-code { margin-block-start: 2rem; max-inline-size: 30rem; display: grid; gap: 0.5rem; }
  .og-code label { font-weight: 600; }
  .og-code__row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
  .og-code__row input { flex: 1 1 12rem; min-block-size: 3rem; text-transform: uppercase; letter-spacing: 0.04em; }
  .og-kid-limit { margin-block-start: 1.5rem; max-inline-size: 36rem; padding: 1.25rem 1.5rem; border-radius: 14px;
    border: 1px dashed rgb(255 255 255 / 0.3); }
  .og-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; block-size: 6rem; align-items: end; margin-block: 1rem; }
  .og-bar { display: grid; grid-template-rows: 1fr auto; block-size: 100%; text-align: center; font-size: 0.75rem; color: var(--og-text-2); }
  .og-bar i { align-self: end; display: block; background: var(--og-lime); border-radius: 4px 4px 0 0; min-block-size: 2px; }

  /* ---- Word Bubbles (/play/word-bubbles/) and shared comfort settings ---- */
  .og-choices--2 { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .og-sensory__row { display: grid; gap: 0.5rem; margin-block-end: 0.75rem; }
  .og-sensory__label { font-weight: 600; }
  .og-field legend small { font-weight: 400; font-size: 0.85rem; color: var(--og-text-2); font-family: var(--font-body); }
  .og-setup__go { display: flex; gap: 0.75rem; flex-wrap: wrap; }
  .og-wb-find { font-family: var(--font-heading); font-size: 1.15rem; margin: 0; color: var(--og-text-2); }
  .og-wb-find b { display: inline-block; margin-inline-start: 0.5rem; padding: 0.15em 0.7em; border-radius: 999px; background: #fff;
    color: #111; font-family: "Didact Gothic", sans-serif; font-size: 2rem; font-weight: 400; vertical-align: middle; }
  .og-wb { --found: #5a6b68; --ink: #111; --edge: #8c8c8c; --paper: #fff;
    container-type: inline-size; inline-size: min(100%, 46rem); box-sizing: border-box; display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 2.2cqi; padding: 4cqi; background: var(--paper); border-radius: 14px; }
  .og-wb__bubble { display: block; inline-size: 100%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--edge);
    background: #fff; color: var(--ink); padding: 0; cursor: pointer; font-family: "Didact Gothic", sans-serif;
    font-size: max(0.7rem, calc(28cqi / var(--cols, 4) / 1.6 * var(--fit, 1))); line-height: 1; }
  .og-wb__bubble > span { display: grid; place-items: center; inline-size: 100%; block-size: 100%; padding-block-end: 0.08em; }
  .og-wb__bubble:focus-visible { outline: 3px solid var(--og-lime); outline-offset: 3px; }
  .og-wb__bubble.is-found { background: var(--found); border-color: var(--found); color: #fff; }
  .og-wb--scattered { row-gap: 3cqi; }
  .og-wb--scattered .og-wb__bubble { inline-size: 80%; justify-self: center; align-self: center; }
  .og-sheet__grid--scattered .og-sheet__bubble { inline-size: 80%; justify-self: center; }
  /* Softer contrast (comfort setting): off-white paper, gray ink, a lighter found color */
  [data-og-contrast="soft"] .og-wb, [data-og-contrast="soft"] .og-mu { --paper: #f6f3ec; background: #f6f3ec; }
  [data-og-contrast="soft"] .og-wb__bubble { background: #fbf9f4; color: #3d3d3d; border-color: #b9b5ab; }
  [data-og-contrast="soft"] .og-wb__bubble.is-found { background: #93a29f; border-color: #93a29f; }
  /* Pop (a right answer) and confetti (the end), only when the comfort setting has animations on */
  .og-mu-end, .og-wb-end { position: relative; }
  .og-confetti { position: absolute; inset-block-start: 30%; inset-inline-start: 50%; pointer-events: none; }
  .og-confetti i { position: absolute; inline-size: 9px; block-size: 14px; border-radius: 2px; }
  [data-og-motion="off"] .og-confetti { display: none; }

  /* Match-Up: cleared pairs (option) */
  .og-mu__clear { display: grid; place-items: center; inline-size: 100%; aspect-ratio: 1; border-radius: 8%; border: 2px dashed #c9c6d6;
    color: #5a6b68; font-size: calc(36cqi / var(--cols, 4)); background: #fff; }

  /* Printing a sheet (Word Bubbles): only the sheet prints, black outlines for crayons */
  .og-print-sheet { display: none; }
  @media print {
    @page { size: letter; margin: 0.5in; }
    html.og-printing body > *:not(main), html.og-printing main > *:not(#game), html.og-printing #game .container > *:not(.og-print-sheet) { display: none !important; }
    html.og-printing { color-scheme: light; --og-night: #fff; --og-ink: #fff; --og-indigo: #fff; --og-gradient: none; --og-gradient-flip: none; }
    html.og-printing, html.og-printing body, html.og-printing main, html.og-printing #game, html.og-printing .section { background: #fff !important; background-image: none !important; color: #000 !important; padding: 0 !important; margin: 0 !important; }
    html.og-printing .og-print-sheet { display: block !important; }
    .og-sheet { font-family: "Didact Gothic", sans-serif; color: #000; }
    .og-sheet__name { text-align: end; font-size: 12pt; margin: 0 0 0.2in; }
    .og-sheet__title { font-family: "Didact Gothic", sans-serif; font-size: 20pt; font-weight: 400; text-align: center; margin: 0; color: #000; }
    .og-sheet__target { text-align: center; font-size: 44pt; margin: 0.05in auto 0.25in; padding: 0.04in 0.4in; border: 2px solid #000; border-radius: 999px; inline-size: max-content; }
    .og-sheet__grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 0.14in; }
    .og-sheet__bubble { display: grid; place-items: center; aspect-ratio: 1; border: 2px solid #000; border-radius: 50%;
      font-size: 20pt; break-inside: avoid; }
    .og-sheet__foot { text-align: center; font-size: 8pt; color: #555; margin-block-start: 0.25in; }
  }
}