/* Page sections shared across the site (headings, ticks, steps, FAQ lists, plans) and the free tools: the generator, lights key, interview tool and page not found. */

/* ---------- From the style guide: scribble and clock ---------- */
.scribble { position: relative; display: inline-block; white-space: nowrap; }
.scribble svg { position: absolute; left: -3%; bottom: -0.2em; width: 106%; height: 0.3em; fill: none; stroke: var(--clay); stroke-width: 5; stroke-linecap: round; overflow: visible; }
.t-timer { font-family: var(--serif); font-weight: 600; font-size: clamp(2.5rem, 2rem + 2cqi, 3.5rem); line-height: 1; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Generator ---------- */
.gen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.rchips { display: flex; flex-wrap: wrap; gap: 8px; }
.rchip { position: relative; display: inline-flex; }
.rchip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rchip > span { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--ash-400); background: var(--parchment-50); font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }
.rchip:hover > span { border-color: var(--forest); }
.rchip input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--parchment-50); }
.rchip input:checked + span .pips i { border-color: var(--parchment-50); }
.rchip input:checked + span .pips[data-n] i:nth-child(-n+4) { background: transparent; }
.rchip input:checked + span .pips[data-n="1"] i:nth-child(-n+1), .rchip input:checked + span .pips[data-n="2"] i:nth-child(-n+2), .rchip input:checked + span .pips[data-n="3"] i:nth-child(-n+3), .rchip input:checked + span .pips[data-n="4"] i:nth-child(-n+4) { background: var(--parchment-50); }
.rchip input:focus-visible + span { outline: 3px solid var(--clay-ink); outline-offset: 2px; }
.gdeck { padding-top: 10px; }
.gcard .icard-body { gap: 16px; }
.gprompt { min-height: 2.5em; }
.gempty { display: grid; gap: 8px; justify-items: start; padding-block: 6px 4px; }
.gempty-t { font-family: var(--serif); font-weight: 560; font-size: 22px; line-height: 1.25; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.gempty p:not(.gempty-t) { font-size: 15px; color: var(--ash-600); }
.gresult { display: grid; gap: 12px; justify-items: start; padding: 14px 16px; border-radius: 14px; background: var(--note-info); border: 1.5px solid var(--moss); }
.gresult p { font-family: var(--serif); font-weight: 520; font-size: 20px; line-height: 1.3; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.gtoast { margin: 0; }
/* The nudge to the app, under the card from the fourth draw (tools.js). */
/* Narrow: the sprout beside the words, the buttons under them. Wide (the
   tool pages): words in the middle, buttons and badges on the right. */
.gnudge { container: gnudge / inline-size; padding: 16px 18px 18px; border-radius: var(--r-panel); background: var(--parchment); border: 1.5px solid var(--parchment-100); }
.gnudge-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; align-items: start; }
.gnudge.is-new { animation: gnudge-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes gnudge-in { from { opacity: 0; transform: translateY(6px); } }
.gnudge-mark { grid-row: span 2; width: 34px; height: 35px; fill: var(--moss); margin-top: 3px; }
.gnudge-copy { display: grid; gap: 6px; }
.gnudge-side { grid-column: 2; display: grid; gap: 10px; justify-items: start; margin-top: 14px; }
.gnudge-t { font-family: var(--serif); font-weight: 560; font-size: 19px; line-height: 1.3; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; max-width: 34ch; }
.gnudge-d { font-size: 15px; line-height: 1.5; color: var(--ash-600); max-width: 52ch; }
.gnudge-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.gnudge-stores { display: flex; flex-wrap: wrap; gap: 10px; }
.gnudge-stores a { display: inline-flex; border-radius: 8px; }
.gnudge-stores img { display: block; height: 40px; width: auto; }
@container gnudge (min-width: 700px) {
  .gnudge-in { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 22px; align-items: center; }
  .gnudge-mark { grid-row: auto; align-self: start; }
  .gnudge-side { grid-column: 3; margin-top: 0; justify-items: end; }
  .gnudge-act { flex-wrap: nowrap; }
}
.is-presenting .gnudge { display: none; }
.gnext { display: grid; gap: 4px; padding-left: 12px; }
.gnote { font-size: 14px; color: var(--ash-600); }
.gmore { font-size: 14px; color: var(--ash-600); margin-top: 6px; }
.gmore a { color: var(--forest); font-weight: 600; text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gmore a:hover { text-decoration-style: wavy; }
.gen .gen-actions { gap: 10px; }
.gen .gen-actions .btn-icon { width: 48px; }
@container site (max-width: 420px) {
  .gen .gen-actions .btn:not(.btn-icon) { flex: 1 1 auto; }
  .gcard .icard-head, .gcard .icard-body { padding-inline: 14px; }
}

/* ---------- Home ---------- */
.h-in { align-items: center; }
.h-copy { display: grid; gap: 20px; align-content: center; }
.h-title { font-family: var(--serif); font-weight: 580; font-size: clamp(2.6rem, 1.4rem + 4.8cqi, 5rem); line-height: 1.0; letter-spacing: -0.02em; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; max-width: 12ch; }
.h-lede { font-size: clamp(1.0625rem, 1rem + 0.4cqi, 1.25rem); color: var(--ash-600); max-width: 44ch; line-height: 1.55; }
.h-btns { gap: 14px; }
.h-note { font-size: 14px; color: var(--ash-600); }
.h-tool .deck .icard { transform: rotate(-0.8deg); box-shadow: var(--shadow-lift); }
/* On computers the hero takes most of the first screen, with the copy and
   the card centred in it, the ruled paper and the margin line running on
   below, and the next heading just showing at the fold as a cue to scroll. */
@container site (min-width: 900px) {
  .h-hero { min-height: min(86svh, 820px); display: grid; align-content: center; padding-block: 112px 48px; }
  .h-hero + .h-sec { padding-top: 36px; }
  .h-hero::before { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%); }
  .h-hero::after { bottom: 0; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%); }
  .h-in { gap: 56px; }
  .h-lede { max-width: 50ch; }
}
.h-sec { max-width: 1180px; margin-inline: auto; padding: clamp(56px, 9cqi, 104px) var(--g) 0; }
.h-sec > h2, .h-sec h2 { font-family: var(--serif); font-weight: 560; font-size: clamp(1.875rem, 1.45rem + 1.7cqi, 2.75rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; max-width: 22ch; }
.h-sec .sub { font-size: clamp(1.0625rem, 1rem + 0.3cqi, 1.1875rem); color: var(--ash-600); max-width: 56ch; line-height: 1.55; margin-top: 10px; }
/* On the tool pages the intro spans the row of steps or links under it (Ash's review, 8 Oct 2026). */
.t-prep .sub, .t-themes .sub, .i-len .sub, .i-star .sub, .i-sets .sub { max-width: none; }
.moments { list-style: none; margin-top: 26px; border-top: 1.5px dashed var(--stone); }
.moments li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; padding-block: 16px; border-bottom: 1.5px dashed var(--stone); }
.m-q { font-family: var(--serif); font-weight: 520; font-size: clamp(1.3rem, 1.05rem + 1.1cqi, 1.875rem); line-height: 1.25; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.m-who { font-size: 14px; font-weight: 600; color: var(--clay-ink); white-space: nowrap; }
.steps { list-style: none; display: grid; gap: 22px; margin-top: 28px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; align-items: start; align-content: start; }
.step .step-n { grid-row: span 2; }
.step h3 { font-family: var(--serif); font-weight: 560; font-size: 21px; line-height: 1.25; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; padding-top: 8px; }
.step p { font-size: 15px; color: var(--ash-600); line-height: 1.55; }
@container site (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } .steps-4 { grid-template-columns: repeat(4, 1fr); } }
.fb-grid { display: grid; gap: 36px; align-items: center; }
@container site (min-width: 900px) { .fb-grid { grid-template-columns: 1.1fr 0.9fr; } }
.ticks { list-style: none; display: grid; gap: 10px; margin-top: 20px; }
.ticks li { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 16px; line-height: 1.5; }
.ticks svg { width: 18px; height: 18px; margin-top: 3px; color: var(--moss); }
.mphone { width: 300px; max-width: 100%; justify-self: center; padding: 10px; border-radius: 40px; background: #18211C; box-shadow: 0 24px 50px -24px rgba(31, 42, 36, 0.5); transform: rotate(1.5deg); }
.mphone .scr { border-radius: 30px; background: var(--parchment); padding: 22px 14px 16px; display: grid; gap: 12px; }
.tools-list { list-style: none; margin-top: 24px; display: grid; }
.tool-link { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding-block: 18px; border-top: 1.5px dashed var(--stone); text-decoration: none; color: var(--ink); }
.tool-link .ddi-ic { grid-row: span 3; width: 44px; height: 44px; }
.tool-link .ddi-ic svg { width: 20px; height: 20px; color: var(--forest); }
.tool-link b { font-family: var(--serif); font-weight: 560; font-size: 22px; line-height: 1.2; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.tl-d { font-size: 15px; color: var(--ash-600); }
.tl-go { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--clay-ink); margin-top: 4px; }
.tl-go svg { width: 16px; height: 16px; transition: transform var(--t-hover) var(--ease); }
.tool-link:hover b { text-decoration: underline wavy var(--clay); text-underline-offset: 5px; }
.tool-link:hover .tl-go svg { transform: translateX(3px); }
@container site (min-width: 900px) { .tools-list { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.story { display: grid; gap: 32px; align-items: center; }
@container site (min-width: 900px) { .story { grid-template-columns: 0.75fr 1.25fr; gap: 56px; } }
.story-copy { display: grid; gap: 16px; justify-items: start; }
.quote { font-family: var(--serif); font-weight: 480; font-size: clamp(1.25rem, 1.05rem + 0.9cqi, 1.625rem); line-height: 1.4; color: var(--ink); font-variation-settings: "SOFT" 100, "WONK" 1; max-width: 40ch; }
.sig { font-size: 15px; font-weight: 600; color: var(--clay-ink); }
.plans { display: grid; gap: 20px; margin-top: 28px; max-width: 920px; }
@container site (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { display: grid; gap: 12px; align-content: start; justify-items: start; padding: 24px; border-radius: var(--r-panel); background: var(--parchment-50); border: 1.5px solid var(--forest); box-shadow: var(--shadow-panel); }
.plan h3 { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 560; font-size: 26px; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.price { font-family: var(--serif); font-weight: 600; font-size: 40px; line-height: 1; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.price span { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ash-600); }
.plan .ticks { margin-top: 4px; }
.plans-foot { margin-top: 18px; font-size: 15px; }
.plans-foot a, .t-more a { color: var(--forest); font-weight: 600; text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.faq { margin-top: 24px; max-width: 780px; border-top: 1.5px dashed var(--stone); }
.faq details { border-bottom: 1.5px dashed var(--stone); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding-block: 14px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-family: var(--serif); font-weight: 520; font-size: clamp(1.125rem, 1rem + 0.5cqi, 1.3125rem); line-height: 1.3; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.faq summary .chev { width: 20px; height: 20px; color: var(--forest); transition: transform var(--t-hover) var(--ease); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details p { padding-bottom: 18px; font-size: 16px; line-height: 1.65; max-width: 65ch; }
.faq details p a { color: var(--forest); font-weight: 500; text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pg > .h-sec:last-child { padding-bottom: clamp(56px, 9cqi, 104px); }

/* ---------- Generator page ---------- */
/* Centre stage (approved 29 Sep 2026): the heading and the tool centred,
   Theme, Level and Talk for above the card, the lights key under it. */
.t-stage-in { max-width: calc(920px + 2 * var(--g)); margin-inline: auto; padding-inline: var(--g); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; text-align: center; }
.t-stage .crumbs { justify-content: center; }
.t-stage .pg-lede { max-width: 58ch; text-wrap: balance; }
.gtools-i { justify-content: center; }
.gtools-i .rchips { justify-content: safe center; }
.gen-actions .gpresent { margin-left: auto; }
.t-stage .t-tool { width: 100%; margin-top: 20px; text-align: left; }
.t-stage .gen { gap: 16px; }
/* Room around the deck: its tilted back cards need air from the pickers above and the key below. */
.t-stage .gdeck { margin-block: 14px 18px; }
@container site (min-width: 700px) {
  .t-stage .gcard .icard-head { padding: 16px 24px 13px; }
  .t-stage .gcard .icard-body { padding: 22px 28px 28px; gap: 22px; }
  .t-stage .gprompt { font-size: clamp(1.75rem, 1.2rem + 1.4cqi, 2.5rem); line-height: 1.22; }
  .t-stage .t-timer { font-size: clamp(3.25rem, 2.4rem + 2.2cqi, 5rem); }
  .t-stage .lights .l, .t-stage .lights .l svg { width: 34px; height: 34px; }
  .t-stage .gen-actions .btn { min-height: 52px; padding-inline: 24px; font-size: 16px; }
  .t-stage .gen-actions .btn-icon { width: 52px; padding: 0; }
}
.gtools { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.gpicks { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.gpick { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 16px; border-radius: var(--r-input); border: 1.5px solid var(--forest); background: var(--parchment-50); font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ash-600); cursor: pointer; transition: background-color var(--t-hover) var(--ease); }
.gpick b { font-weight: 600; color: var(--forest); }
.gpick .ico { width: 16px; height: 16px; color: var(--forest); transition: transform var(--t-hover) var(--ease); }
.gpick:hover, .gpick[aria-expanded="true"] { background: var(--parchment); }
.gpick[aria-expanded="true"] .ico { transform: rotate(180deg); }
.gpick:focus-visible, .gpresent:focus-visible { outline: 3px solid var(--clay-ink); outline-offset: 2px; }
.gpresent { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--forest); text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: pointer; }
.gpresent:hover { text-decoration-style: wavy; }
.gpresent .ico { width: 19px; height: 19px; }
.gpop { position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 8px); padding: 16px; border-radius: var(--r-panel); background: var(--parchment-50); border: 1.5px solid var(--forest); box-shadow: 5px 5px 0 var(--parchment-100), 0 18px 40px -24px rgba(31, 42, 36, 0.35); }
.gpop fieldset { border: 0; padding: 0; margin: 0; }
.gtools-i .iset { min-width: 0; }
.gkey ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 30px; }
.gkey li { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: var(--ash-600); transition: opacity var(--t-hover) var(--ease); }
.gkey b { font-family: var(--serif); font-weight: 560; font-size: 17px; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; font-variant-numeric: tabular-nums; }
.gkey-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
[data-k="green"] .gkey-dot { background: var(--light-green); }
[data-k="amber"] .gkey-dot { background: var(--light-amber); box-shadow: inset 0 0 0 1px var(--note-warn-edge); }
[data-k="red"] .gkey-dot { background: var(--light-red); }
.gkey[data-now="green"] li:not([data-k="green"]), .gkey[data-now="amber"] li:not([data-k="amber"]), .gkey[data-now="red"] li:not([data-k="red"]) { opacity: 0.4; }
.gfeed { text-align: center; font-size: 15px; color: var(--ash-600); }
.gfeed a { color: var(--forest); font-weight: 600; text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gfeed a:hover { text-decoration-style: wavy; }
@container site (max-width: 760px) {
  .gtools { justify-content: center; }
  .gpicks { justify-content: center; }
  .gpresent { display: none; }
}
@container site (max-width: 560px) {
  .gpick-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gpick { padding: 0 10px 0 12px; font-size: 14px; }
  .gkey ul { flex-direction: column; align-items: flex-start; gap: 8px; padding-left: 12px; }
}

/* Present on a big screen: the tool fills the screen on forest, for a club's
   projector. Uses the browser's full screen where it can. */
.gpres-top { display: none; }
html.presenting { overflow: hidden; }
.gen.is-presenting { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; gap: 0; padding: clamp(16px, 2.6vw, 36px) clamp(20px, 7vw, 140px) clamp(20px, 3vw, 44px); background: var(--forest-night); color: var(--parchment-50); overflow: auto; }
.gen.is-presenting .gpres-top { display: flex; align-items: center; gap: 12px; margin-inline: calc(clamp(20px, 7vw, 140px) * -0.6); }
.gpres-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 20px; color: var(--cover-text); font-variation-settings: "SOFT" 100; }
.gpres-brand svg { width: 22px; height: 23px; fill: var(--sage); }
.gpres-url { font-family: var(--sans); font-size: 15px; color: var(--sage); }
.gpres-url::before { content: "\00B7"; margin-right: 10px; }
.gpres-exit { margin-left: auto; background: transparent; color: var(--parchment-50); border-color: var(--moss); }
.gpres-exit:hover { background: var(--stamp); }
.is-presenting .gtools, .is-presenting .gkey, .is-presenting .gfeed, .is-presenting .gtoast, .is-presenting [data-gshare], .is-presenting .chip.diff, .is-presenting .ishape, .is-presenting .ilen { display: none; }
.is-presenting .gdeck { flex: 1; display: flex; padding: 0; }
.is-presenting .gdeck::before, .is-presenting .gdeck::after { display: none; }
.is-presenting .gcard { flex: 1; transform: none; background: transparent; border: 0; box-shadow: none; }
.is-presenting .gcard .icard-head { border: 0; padding: clamp(16px, 4vh, 48px) 0 0; }
.is-presenting .gcard .chip { background: var(--stamp); color: var(--cover-text); font-size: 16px; }
.is-presenting .gcard .icard-body { flex: 1; background: none; padding: 0; display: flex; flex-direction: column; gap: clamp(16px, 3vh, 28px); }
.is-presenting .gprompt { flex: 1; display: flex; align-items: center; margin: 0; font-size: clamp(2.25rem, 1rem + 4.2vw, 5.5rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--parchment-50); max-width: 20ch; }
.is-presenting .clock { border-top: 1px solid var(--stamp); padding-top: clamp(16px, 3vh, 28px); gap: 16px clamp(20px, 3vw, 40px); --le: var(--sage); }
.is-presenting .lights { gap: clamp(10px, 1.2vw, 18px); }
.is-presenting .lights .l, .is-presenting .lights .l svg { width: clamp(40px, 4.4vw, 64px); height: clamp(40px, 4.4vw, 64px); }
.is-presenting .t-timer { font-size: clamp(4rem, 2rem + 5vw, 7.5rem); color: var(--parchment-50); }
.is-presenting .state-text { font-family: var(--serif); font-size: clamp(1.25rem, 0.9rem + 1.1vw, 2rem); color: var(--cover-text); font-variation-settings: "SOFT" 100, "WONK" 1; }
.is-presenting [data-light="amber"] .state-text { color: var(--butter); }
.is-presenting .gen-actions .btn { min-height: 56px; padding-inline: 28px; font-size: 17px; }
.is-presenting .btn-primary { background: var(--parchment-50); color: var(--forest); border-color: #0B120E; box-shadow: 4px 4px 0 #0B120E; }
.is-presenting .btn-secondary { background: transparent; color: var(--parchment-50); border-color: var(--moss); box-shadow: none; }
.is-presenting .gresult { background: var(--stamp); border-color: var(--moss); }
.is-presenting .gresult p { color: var(--parchment-50); }
.is-presenting .gempty-t { color: var(--parchment-50); }
.is-presenting .gempty p:not(.gempty-t) { color: var(--cover-text); }

/* Drawing another card: the one you had goes to the back of the deck. */
.gcard-leaving { pointer-events: none; }
.t-more { margin-top: 22px; font-size: 15px; }
.theme-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.theme-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: var(--r-button); border: 1.5px solid var(--forest); background: var(--parchment-50); box-shadow: var(--shadow-press-soft); font-size: 15px; font-weight: 600; color: var(--forest); text-decoration: none; transition: transform var(--t-press) var(--ease), box-shadow var(--t-press) var(--ease); }
.theme-link svg { width: 16px; height: 16px; }
.theme-link:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--stone); }

/* ---------- Timer digits ----------
   Fraunces has no fixed-width numbers, so each digit sits in its own slot
   (the widest digit, 0, is 0.66em) and the clock doesn't shift as it counts. */
.t-timer .dg { display: inline-block; width: 0.66em; text-align: center; }
.t-timer .dc { display: inline-block; width: 0.3em; text-align: center; }

/* ---------- Founder photo ---------- */
.story-photo { width: 100%; max-width: 340px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; justify-self: center; border-radius: 16px; transform: rotate(-1.5deg); box-shadow: 5px 5px 0 var(--parchment-100); }
.photo-ph { aspect-ratio: 4 / 5; width: 100%; max-width: 340px; justify-self: center; border-radius: 16px; border: 2px dashed var(--stone); background: var(--parchment); display: grid; place-items: center; text-align: center; font-size: 14px; font-weight: 600; color: var(--ash-600); transform: rotate(-1.5deg); box-shadow: 5px 5px 0 var(--parchment-100); }

/* ---------- Interview practice ---------- */
.iset legend { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.igen .rchip > span { min-height: 40px; padding: 7px 13px; }
.igen .rchip { padding-block: 2px; margin-block: -2px; }
@container site (max-width: 560px) {
  .igen [data-isets] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--g) * -1); padding: 2px var(--g) 8px; scroll-padding-inline: var(--g); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--g), #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--g), #000 calc(100% - 28px), transparent 100%); }
  .igen [data-isets]::-webkit-scrollbar { display: none; }
  .igen [data-isets] .rchip { flex: none; }
}
.ishape { border-top: 1.5px dashed var(--stone); padding-top: 10px; }
.ishape summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 2px; margin-block: -2px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--clay-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ishape summary::-webkit-details-marker { display: none; }
.ishape summary svg { width: 18px; height: 18px; }
.ishape[open] summary { text-decoration-style: wavy; }
.ishape p { margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: var(--note-warn); font-size: 15px; line-height: 1.5; color: var(--ink); animation: pr-in var(--t-hover) var(--ease); }
@keyframes pr-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ilen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; font-weight: 500; color: var(--ash-600); border-top: 1.5px dashed var(--stone); padding-top: 12px; }
.seg-sm span { min-width: 60px; min-height: 44px; font-size: 14px; }
.ilens { list-style: none; margin-top: 24px; max-width: 900px; border-top: 1.5px dashed var(--stone); }
.ilens li { display: grid; grid-template-columns: 1fr; gap: 2px 24px; padding-block: 16px; border-bottom: 1.5px dashed var(--stone); }
@container site (min-width: 760px) { .ilens li { grid-template-columns: 0.9fr 0.7fr 1.4fr; align-items: baseline; } }
.ilens b { font-family: var(--serif); font-weight: 560; font-size: 20px; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.il-t { font-size: 15px; font-weight: 600; color: var(--clay-ink); }
.il-d { font-size: 15px; color: var(--ash-600); line-height: 1.5; }
.star-n { font-size: 21px; }
.isets-list { list-style: none; margin-top: 24px; display: grid; gap: 0 40px; max-width: 980px; border-top: 1.5px dashed var(--stone); }
@container site (min-width: 760px) { .isets-list { grid-template-columns: 1fr 1fr; } }
.iset-row { display: grid; gap: 8px; justify-items: start; padding-block: 18px; border-bottom: 1.5px dashed var(--stone); }
.iset-row .chip { font-size: 14px; padding: 8px 12px; }
.iset-row p { font-size: 15px; color: var(--ash-600); line-height: 1.55; max-width: 48ch; }
.iset-row .lnk { font-size: 15px; }
.i-aff { margin-top: 18px; font-size: 14px; color: var(--ash-600); max-width: 70ch; }
.lnk { color: var(--forest); font-weight: 600; text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lnk:hover { text-decoration-style: wavy; }

/* ---------- Page not found (and the newsletter pages, W6) ---------- */
@container site (min-width: 900px) { .pg-in.nf-in { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } }
.nf-hero { padding-bottom: clamp(56px, 9cqi, 104px); }
.nf-code { font-size: 14px; font-weight: 600; color: var(--clay-ink); }
.nf-links { list-style: none; margin-top: 10px; border-top: 1.5px dashed var(--stone); max-width: 420px; }
.nf-links li { border-bottom: 1.5px dashed var(--stone); }
.nf-links a { display: flex; align-items: center; justify-content: space-between; min-height: 50px; font-family: var(--serif); font-weight: 520; font-size: 19px; color: var(--forest); text-decoration: none; font-variation-settings: "SOFT" 100, "WONK" 1; }
.nf-links a svg { width: 18px; height: 18px; color: var(--clay-ink); transition: transform var(--t-hover) var(--ease); }
.nf-links a:hover span { text-decoration: underline wavy var(--clay); text-underline-offset: 5px; }
.nf-links a:hover svg { transform: translateX(3px); }
.nf-tool .gmore { display: none; }

/* Newsletter card (end of posts, question lists) */
.nl-card { display: grid; gap: 16px; padding: clamp(18px, 3cqi, 26px); border-radius: var(--r-panel); background: var(--parchment); border: 1.5px solid var(--parchment-100); }
.nl-k { font-family: var(--serif); font-weight: 560; font-size: 22px; color: var(--forest); font-variation-settings: "SOFT" 100, "WONK" 1; }
.nl-card p:not(.nl-k) { font-size: 15px; color: var(--ash-600); margin-top: 4px; }