/* Mettlekind painted day: the site.
   Colour tokens are tuned so small text reaches 4.5:1 against the real pixels behind it,
   paper grain included. Each painted scene sets its own colours (see "scene colours"). */

/* Stand-ins for the web fonts while they load, scaled to take the same room, so nothing reflows when
   the real fonts arrive. Fraunces is drawn with automatic optical sizing, which makes it narrower as
   it gets bigger: measured on the site's own headlines it is 99% as wide as Palatino at body sizes,
   97% at 42px, 93% at 60px and 80% at 92px. So the headlines get stand-ins scaled for the size they
   are drawn at on each width of screen (--fb-display, --fb-scene, set further down). */

/* The web fonts themselves, served from our own folder (fonts/, licences beside them) so nothing loads
   from Google. The same files and the same Latin character range Google Fonts serves; DM Sans and
   upright Fraunces are one variable file each, covering both weights the site uses. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 400; font-display: swap; src: url(../fonts/fraunces-v38.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300; font-display: swap; src: url(../fonts/fraunces-italic-v38.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(../fonts/dm-sans-v17.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-mono-400-v20.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-500-v20.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: "Fraunces fallback"; src: local("Palatino Linotype"), local("Palatino"), local("Book Antiqua"), local("Georgia"); size-adjust: 99%; ascent-override: 98.99%; descent-override: 26.26%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces fb 98"; src: local("Palatino Linotype"), local("Palatino"), local("Book Antiqua"), local("Georgia"); size-adjust: 98%; ascent-override: 100.00%; descent-override: 26.53%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces fb 97"; src: local("Palatino Linotype"), local("Palatino"), local("Book Antiqua"), local("Georgia"); size-adjust: 97%; ascent-override: 101.03%; descent-override: 26.80%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces fb 96"; src: local("Palatino Linotype"), local("Palatino"), local("Book Antiqua"), local("Georgia"); size-adjust: 96%; ascent-override: 102.08%; descent-override: 27.08%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces fb 94"; src: local("Palatino Linotype"), local("Palatino"), local("Book Antiqua"), local("Georgia"); size-adjust: 94%; ascent-override: 104.26%; descent-override: 27.66%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces fb 92"; src: local("Palatino Linotype"), local("Palatino"), local("Book Antiqua"), local("Georgia"); size-adjust: 92%; ascent-override: 106.52%; descent-override: 28.26%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces fb 90"; src: local("Palatino Linotype"), local("Palatino"), local("Book Antiqua"), local("Georgia"); size-adjust: 90%; ascent-override: 108.89%; descent-override: 28.89%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces fb 88"; src: local("Palatino Linotype"), local("Palatino"), local("Book Antiqua"), local("Georgia"); size-adjust: 88%; ascent-override: 111.36%; descent-override: 29.55%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces fb 86"; src: local("Palatino Linotype"), local("Palatino"), local("Book Antiqua"), local("Georgia"); size-adjust: 86%; ascent-override: 113.95%; descent-override: 30.23%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces fb 83"; src: local("Palatino Linotype"), local("Palatino"), local("Book Antiqua"), local("Georgia"); size-adjust: 83%; ascent-override: 118.07%; descent-override: 31.33%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces fb 80"; src: local("Palatino Linotype"), local("Palatino"), local("Book Antiqua"), local("Georgia"); size-adjust: 80%; ascent-override: 122.50%; descent-override: 32.50%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans fallback"; src: local("Segoe UI"); size-adjust: 92.87%; ascent-override: 106.61%; descent-override: 33.38%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans fallback 2"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 92.42%; ascent-override: 107.12%; descent-override: 33.54%; line-gap-override: 0%; }

:root {
  --bg: #F4F1E9; --cream: #F7F3E8; --ink: #201D17; --ink2: #57503F; --mute: #66604E; --faint: #B0A996;
  --gold: #F5B921; --dgold: #7D5A0B; --line: rgba(87, 80, 63, .18); --btn: #201D17; --btnfg: #F7F3E8; --sh: 32, 29, 23;
  --tag-bg: rgba(247, 243, 232, .94);
  --serif: "Fraunces", "Fraunces fallback", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --fb-display: "Fraunces fb 97"; --fb-scene: "Fraunces fb 98";
  --sans: "DM Sans", "DM Sans fallback", "DM Sans fallback 2", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --gut: clamp(20px, 4vw, 56px);
  --hh: 84px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* scene colours, outside any scene */
  --h: var(--ink); --t: var(--ink); --t2: var(--ink2); --a: var(--ink);
  --hl-bg: rgba(245, 185, 33, .55); --hl-fg: inherit;
  --scrim: rgba(247, 243, 232, 0); --tint: var(--cream); --tint-line: var(--line);
  --glass: rgba(247, 243, 232, .62); --glass-line: rgba(87, 80, 63, .14);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html[data-mode="auto"] {
    --bg: #201D17; --cream: #2A261F; --ink: #F7F3E8; --ink2: #B0A996; --mute: #A39C86; --faint: #57503F;
    --dgold: #F5B921; --line: rgba(176, 169, 150, .2); --btn: #F5B921; --btnfg: #201D17; --sh: 0, 0, 0;
    --tag-bg: rgba(42, 38, 31, .94);
    --hl-bg: rgba(245, 185, 33, .12); --hl-fg: #FFC83D;
    --glass: rgba(42, 38, 31, .62); --glass-line: rgba(176, 169, 150, .2);
    color-scheme: dark;
  }
}
html[data-mode="dark"] {
  --bg: #201D17; --cream: #2A261F; --ink: #F7F3E8; --ink2: #B0A996; --mute: #A39C86; --faint: #57503F;
  --dgold: #F5B921; --line: rgba(176, 169, 150, .2); --btn: #F5B921; --btnfg: #201D17; --sh: 0, 0, 0;
  --tag-bg: rgba(42, 38, 31, .94);
  --hl-bg: rgba(245, 185, 33, .12); --hl-fg: #FFC83D;
  --glass: rgba(42, 38, 31, .62); --glass-line: rgba(176, 169, 150, .2);
  color-scheme: dark;
}
@media (max-width: 759px) { :root { --hh: 72px; } }
@media (min-width: 760px) { :root { --fb-display: "Fraunces fb 94"; --fb-scene: "Fraunces fb 97"; } }
@media (min-width: 980px) { :root { --fb-scene: "Fraunces fb 96"; } }
@media (min-width: 1050px) { :root { --fb-display: "Fraunces fb 90"; } }
@media (min-width: 1150px) { :root { --fb-display: "Fraunces fb 88"; } }
@media (min-width: 1200px) { :root { --fb-display: "Fraunces fb 83"; --fb-scene: "Fraunces fb 94"; } }
@media (min-width: 1350px) { :root { --fb-display: "Fraunces fb 80"; } }
@media (min-width: 1400px) { :root { --fb-scene: "Fraunces fb 92"; } }
@media (min-width: 1600px) { :root { --fb-scene: "Fraunces fb 90"; } }

/* ---------- scene colours ----------
   Headlines take a deep colour from their scene's sky, words sit on the sky over a soft scrim
   (a blurred wash of light), buttons and panels are tinted to match. Light first, then night. */
.sc-dawn    { --h: #6B2338; --t: #3B1F26; --t2: #553540; --a: #6B2338; --scrim: rgba(253, 236, 224, .5); --btn: #6B2338; --btnfg: #FFF6EC; --tint: rgba(255, 244, 236, .92); --tint-line: rgba(107, 35, 56, .16); }
.sc-weight  { --h: #1D3550; --t: #1C2733; --t2: #2C3946; --a: #1D3550; --scrim: rgba(236, 240, 243, .5); --btn: #1D3550; --btnfg: #F4F7FA; --tint: rgba(240, 243, 246, .94); --tint-line: rgba(29, 53, 80, .16); }
.sc-release { --h: #173A5E; --t: #172535; --t2: #2A3A4C; --a: #173A5E; --scrim: rgba(238, 246, 251, .46); --btn: #173A5E; --btnfg: #F4F8FC; --tint: rgba(244, 249, 252, .94); --tint-line: rgba(23, 58, 94, .16); }
.sc-midday  { --h: #0E3B62; --t: #12263A; --t2: #2A3D50; --a: #0E3B62; --scrim: rgba(240, 248, 252, .46); --btn: #0E3B62; --btnfg: #F2F8FC; --tint: rgba(246, 251, 253, .93); --tint-line: rgba(14, 59, 98, .16); }
.sc-works, .sc-walk { --h: #0F3036; --t: #12221F; --t2: #243538; --a: #0F3036; --scrim: rgba(244, 246, 238, .5); --btn: #173F45; --btnfg: #F2F7F5; --tint: rgba(250, 247, 238, .93); --tint-line: rgba(23, 63, 69, .18); }
.sc-evening, .sc-tree { --h: #5A1630; --t: #2A0F18; --t2: #4A2530; --a: #5A1630; --scrim: rgba(255, 232, 206, .56); --btn: #5A1630; --btnfg: #FFF4E6; --tint: rgba(255, 243, 228, .93); --tint-line: rgba(90, 22, 48, .18); }
.sc-hedge   { --h: #234A2B; --t: #1B2A1E; --t2: #2E4032; --a: #234A2B; --scrim: rgba(246, 245, 234, .5); --btn: #2B5533; --btnfg: #F4F8EE; --tint: rgba(250, 249, 240, .93); --tint-line: rgba(35, 74, 43, .18); }
.sc-field   { --h: #3B2A52; --t: #22192E; --t2: #3A2F48; --a: #3B2A52; --scrim: rgba(250, 238, 226, .52); --btn: #3B2A52; --btnfg: #F8F2FA; --tint: rgba(252, 245, 238, .93); --tint-line: rgba(59, 42, 82, .18); }
/* Dusk is dark in both modes, so its words are light. */
.sc-dusk    { --h: #FFE2A8; --t: #FBF4E8; --t2: #E6DCEC; --a: #FFE2A8; --scrim: rgba(34, 26, 58, .68); --btn: #FFD36B; --btnfg: #241C33; --tint: rgba(30, 24, 52, .84); --tint-line: rgba(255, 238, 214, .16); --hl-bg: rgba(245, 185, 33, .12); --hl-fg: #FFD36B; }

/* Phones: the evening tree can stand behind the words, so the wash there is a little stronger. */
@media (max-width: 759px) { .sc-evening, .sc-tree { --scrim: rgba(255, 232, 206, .72); } }
/* On a phone the clearing's headline scrolls in over the pale weight scene before its own picture arrives. */
@media (max-width: 759px) { :root:not(.is-dark) .sc-release { --h: #0E2C4B; } }

/* Night: every scene's words are light; headlines keep a pale tint of their scene. */
.is-dark :is(.chapter, .band-head) { --t: #F7F3E8; --t2: #DDD6C4; --scrim: rgba(14, 13, 28, .6); --btnfg: #1B1626; --tint: rgba(26, 24, 42, .88); --tint-line: rgba(247, 243, 232, .14); --hl-bg: rgba(245, 185, 33, .12); --hl-fg: #FFC83D; }
.is-dark .sc-dawn    { --h: #F6C9C0; --a: #F6C9C0; --btn: #F6C9C0; }
.is-dark .sc-weight  { --h: #C9D8EA; --a: #C9D8EA; --btn: #C9D8EA; }
.is-dark .sc-release { --h: #BFDDF5; --a: #BFDDF5; --btn: #BFDDF5; }
.is-dark .sc-midday  { --h: #BFE0F7; --a: #BFE0F7; --btn: #BFE0F7; }
.is-dark :is(.sc-works, .sc-walk) { --h: #CDE6DA; --a: #CDE6DA; --btn: #CDE6DA; }
.is-dark :is(.sc-evening, .sc-tree) { --h: #FFD9A8; --a: #FFD9A8; --btn: #FFD9A8; --scrim: rgba(14, 13, 28, .7); }   /* the moon sits low in these scenes, so the words need a deeper wash */
.is-dark .sc-hedge   { --h: #CFE6C6; --a: #CFE6C6; --btn: #CFE6C6; }
.is-dark .sc-field   { --h: #E2D2F0; --a: #E2D2F0; --btn: #E2D2F0; }
.is-dark .sc-dusk    { --h: #FFE2A8; --a: #FFE2A8; --btn: #FFD36B; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hh) + 12px); scroll-padding-bottom: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; font-family: var(--sans); font-size: 17px; line-height: 1.5; }
#mk { min-height: 100vh; overflow-x: clip; position: relative; }
[hidden] { display: none !important; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--dgold); }
:focus-visible { outline: 2px solid var(--dgold); outline-offset: 4px; }
button { font: inherit; color: inherit; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
h1, h2, h3, p { margin: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 90; background: var(--btn); color: var(--btnfg); padding: 12px 18px; border-radius: 999px; font-weight: 500; text-decoration: none; }
.skip:focus { top: 12px; color: var(--btnfg); }
main:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 1s var(--ease) both; }
.rise.d1 { animation-delay: .15s; }
.rise.d2 { animation-delay: .3s; }

/* ---------- header ----------
   The header is the top of the painting: it is exactly the colour of the sky beneath it (the scroll engine passes it
   --sky-top, and adds .on-dark when that sky is too dark for ink, so the words turn cream). The page links sit in one frosted capsule in the middle; Get started and the
   light/dark switch sit together on the right. */
.site-header {
  position: sticky; top: 0; z-index: 40; height: var(--hh);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 0 var(--gut);
  background: var(--sky-top, var(--bg));
  transition: background-color .35s linear;
}
.site-header .lockup, .nav-wide a, .mode-btn { transition: color .4s ease, background-color .25s ease; }
.site-header.on-dark .lockup { color: #F7F3E8; }
.site-header.on-dark .nav-wide, .site-header.on-dark .mode-btn { background: rgba(32, 29, 23, .35); border-color: rgba(247, 243, 232, .18); }
.site-header.on-dark .nav-wide a, .site-header.on-dark .mode-btn { color: #F7F3E8; }
.site-header.on-dark .nav-wide a:hover { background: rgba(245, 185, 33, .22); }
.site-header.on-dark .nav-wide a[aria-current="page"] { background: rgba(247, 243, 232, .16); color: #fff; box-shadow: none; }
/* The logo. The capital M is 93 of the 175 units, so at
   197px wide its cap height is 30px; 150px on phones gives 23px. Lettering takes the text colour. */
.brand { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; color: var(--ink); text-decoration: none; border-radius: 3px; flex: none; }
.lockup { display: block; width: 197px; height: auto; overflow: visible; }
/* On pale skies (pinks above all) the bright gold is almost as light as the sky, so in the header the K takes a
   deeper gold and a soft cream glow (Cecilia's choice of three) that lifts it off the sky. On dark skies the original bright gold is kept. */
.site-header #g-lockup stop:nth-child(1) { stop-color: #E2A20C; }
.site-header #g-lockup stop:nth-child(2) { stop-color: #B5820F; }
.site-header #g-lockup stop:nth-child(3) { stop-color: #6A4B07; }
.site-header .lockup > path[fill="#F5B921"] { fill: #D99A0A; }
.site-header .lockup g, .site-header .lockup > path[fill="#F5B921"] { filter: drop-shadow(0 0 2px rgb(255, 249, 236)) drop-shadow(0 0 2px rgba(255, 249, 236, .9)); }
.site-header.on-dark #g-lockup stop:nth-child(1) { stop-color: #F5B921; }
.site-header.on-dark #g-lockup stop:nth-child(2) { stop-color: #E7AC29; }
.site-header.on-dark #g-lockup stop:nth-child(3) { stop-color: #8A6410; }
.site-header.on-dark .lockup > path[fill="#F5B921"] { fill: #F5B921; }
.site-header.on-dark .lockup g, .site-header.on-dark .lockup > path[fill="#F5B921"] { filter: none; }
/* The K is a small bird: its first stroke is the wing, the rest of the K is its body and the branch
   it sits on. Only the wing moves, from where it meets the body. */
.bird-wing-upper { transform-box: view-box; transform-origin: 358px 104px; }
.brand:focus-visible .bird-wing-upper, .brand:hover .bird-wing-upper { animation: mk-wing .9s ease-in-out 3; }
@keyframes mk-wing { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(12deg); } 70% { transform: rotate(-9deg) scale(.96); } }
@media (max-width: 759px) { .lockup { width: 150px; } }
.nav-wide {
  display: flex; align-items: center; gap: 2px; padding: 4px; font-size: 15px;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line);
  box-shadow: 0 10px 24px -18px rgba(var(--sh), .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.nav-wide a { position: relative; white-space: nowrap; text-decoration: none; color: var(--ink2); display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 44px; padding: 0 16px; border-radius: 999px; transition: background-color .25s ease, color .25s ease; }
.nav-wide a:hover { color: var(--ink); background: rgba(245, 185, 33, .2); }
.nav-wide a[aria-current="page"] { color: var(--ink); background: var(--cream); box-shadow: 0 1px 0 rgba(var(--sh), .06), inset 0 0 0 1px var(--glass-line); }
.nav-wide a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--gold); }
.pill { display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px 0 22px !important; border-radius: 999px; background: var(--gold); color: #201D17 !important; font-weight: 500; white-space: nowrap; text-decoration: none; font-size: 15px; box-shadow: inset 0 0 0 1.5px rgba(32, 29, 23, .85), 0 10px 22px -14px rgba(245, 185, 33, .9); transition: background-color .2s ease; }
.pill:hover { background: #F7C94A; }
.pill-arrow { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.pill:hover .pill-arrow { transform: translateX(3px); }
.header-tools { display: flex; align-items: center; justify-self: end; gap: 10px; }
@media (max-width: 1080px) { .nav-wide a { padding: 0 11px; font-size: 14px; } .pill { padding: 0 16px 0 18px !important; } .site-header { gap: 14px; } }
.mode-btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; cursor: pointer; color: var(--ink); padding: 0; }
.mode-btn:hover { border-color: var(--ink); }
.mode-btn svg { width: 20px; height: 20px; }
.mode-btn g { display: none; }
html[data-mode="auto"] .mode-btn .i-auto, html[data-mode="light"] .mode-btn .i-light, html[data-mode="dark"] .mode-btn .i-dark { display: inline; }
.menu-btn { display: none; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; font-weight: 500; font-size: 15px; cursor: pointer; position: relative; z-index: 41; }
.menu {
  position: fixed; inset: var(--hh) 0 0 0; z-index: 39; background: var(--bg);
  display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gut) 10vh;
  font-family: var(--serif); font-size: 40px; font-weight: 300; overflow-y: auto;
}
.menu a { text-decoration: none; padding: 14px 0; border-top: 1px solid var(--line); }
.menu a:last-child { border-bottom: 1px solid var(--line); }
.menu .menu-gold { color: var(--dgold); }
/* Below about 1000px the five links and Get started don't fit beside the logo, so the Menu button takes over (as on phones). */
@media (max-width: 999px) {
  .site-header { display: flex; justify-content: space-between; }
  .nav-wide, .header-tools .pill { display: none !important; }
  .menu-btn { display: inline-flex; align-items: center; }
}

/* ---------- type ---------- */
.display, .hero-h { font-family: "Fraunces", var(--fb-display), var(--serif); font-weight: 300; font-size: clamp(44px, 6.4vw, 112px); line-height: .95; letter-spacing: -.032em; max-width: 7.4em; text-wrap: balance; color: var(--h); }
.hero-h { max-width: 6.9em; }   /* widths in em, not ch: the browser can miss updating ch when the web font arrives late */
.scene-h { font-family: "Fraunces", var(--fb-scene), var(--serif); font-weight: 300; font-size: clamp(36px, 4.4vw, 76px); line-height: .98; letter-spacing: -.03em; max-width: 9.1em; text-wrap: balance; color: var(--h); }
.scene-h-xl { font-size: clamp(42px, 5.4vw, 96px); line-height: .95; }
.lines { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.45; color: var(--t); max-width: 34em; text-wrap: pretty; }
div.lines { display: flex; flex-direction: column; gap: 12px; }
.cta-note, .note, .small-note { font-size: 15px; color: var(--t2); max-width: 460px; }

/* The highlight: a gold marker stroke behind the key words of a headline. At night, the words turn gold. */
mark.hl {
  color: var(--hl-fg); padding: 0 .07em; margin: 0 -.03em;
  background: linear-gradient(180deg, transparent 0 50%, var(--hl-bg) 50% 86%, transparent 86%) no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Words straight on the painted sky, over a soft wash so they stay readable on any part of it.
   The wash is one colour faded out on all four sides by a mask, so it has no edge anywhere; it is
   full strength over the words themselves. Every wash sits under every word: .pin and .band-head
   hold the washes (isolation), and a block of words never makes its own layer. */
.copy { --f: clamp(70px, 9vw, 130px); position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 2.2vh, 24px); max-width: 700px; color: var(--t); }
.copy::before {
  content: ""; position: absolute; inset: calc(-1 * var(--f)) calc(-1.3 * var(--f)); z-index: -1; pointer-events: none; background: var(--scrim);
  /* a smooth (smoothstep) fade over the outer band of the wash on every side, full strength over the words */
  --ramp-x: transparent, rgba(0, 0, 0, .03) calc(var(--f) * .13), rgba(0, 0, 0, .1) calc(var(--f) * .26), rgba(0, 0, 0, .22) calc(var(--f) * .39), rgba(0, 0, 0, .37) calc(var(--f) * .52), rgba(0, 0, 0, .5) calc(var(--f) * .65), rgba(0, 0, 0, .63) calc(var(--f) * .78), rgba(0, 0, 0, .78) calc(var(--f) * .91), rgba(0, 0, 0, .9) calc(var(--f) * 1.04), rgba(0, 0, 0, .97) calc(var(--f) * 1.17), #000 calc(var(--f) * 1.3),
    #000 calc(100% - var(--f) * 1.3), rgba(0, 0, 0, .97) calc(100% - var(--f) * 1.17), rgba(0, 0, 0, .9) calc(100% - var(--f) * 1.04), rgba(0, 0, 0, .78) calc(100% - var(--f) * .91), rgba(0, 0, 0, .63) calc(100% - var(--f) * .78), rgba(0, 0, 0, .5) calc(100% - var(--f) * .65), rgba(0, 0, 0, .37) calc(100% - var(--f) * .52), rgba(0, 0, 0, .22) calc(100% - var(--f) * .39), rgba(0, 0, 0, .1) calc(100% - var(--f) * .26), rgba(0, 0, 0, .03) calc(100% - var(--f) * .13), transparent;
  --ramp-y: transparent, rgba(0, 0, 0, .03) calc(var(--f) * .1), rgba(0, 0, 0, .1) calc(var(--f) * .2), rgba(0, 0, 0, .22) calc(var(--f) * .3), rgba(0, 0, 0, .37) calc(var(--f) * .4), rgba(0, 0, 0, .5) calc(var(--f) * .5), rgba(0, 0, 0, .63) calc(var(--f) * .6), rgba(0, 0, 0, .78) calc(var(--f) * .7), rgba(0, 0, 0, .9) calc(var(--f) * .8), rgba(0, 0, 0, .97) calc(var(--f) * .9), #000 var(--f),
    #000 calc(100% - var(--f)), rgba(0, 0, 0, .97) calc(100% - var(--f) * .9), rgba(0, 0, 0, .9) calc(100% - var(--f) * .8), rgba(0, 0, 0, .78) calc(100% - var(--f) * .7), rgba(0, 0, 0, .63) calc(100% - var(--f) * .6), rgba(0, 0, 0, .5) calc(100% - var(--f) * .5), rgba(0, 0, 0, .37) calc(100% - var(--f) * .4), rgba(0, 0, 0, .22) calc(100% - var(--f) * .3), rgba(0, 0, 0, .1) calc(100% - var(--f) * .2), rgba(0, 0, 0, .03) calc(100% - var(--f) * .1), transparent;
  -webkit-mask-image: linear-gradient(to right, var(--ramp-x)), linear-gradient(to bottom, var(--ramp-y));
  mask-image: linear-gradient(to right, var(--ramp-x)), linear-gradient(to bottom, var(--ramp-y));
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.copy a:not(.btn), .tint a:not(.btn) { color: var(--a); }
.copy a:not(.btn):hover, .tint a:not(.btn):hover { color: var(--t); }
.copy .link-quiet, .copy span.link-quiet a { color: var(--t2); }

/* Panels tinted from their scene. */
.tint { position: relative; background: var(--tint); border: 1px solid var(--tint-line); border-radius: 22px; padding: clamp(18px, 2.4vw, 32px); color: var(--t); box-shadow: 0 30px 60px -42px rgba(var(--sh), .6); }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--btn); color: var(--btnfg); font-family: var(--sans); font-weight: 500; text-decoration: none; font-size: 17px; white-space: nowrap;
  box-shadow: 0 14px 30px -16px var(--btn); transition: box-shadow .25s ease, transform .25s var(--ease);
}
.btn:hover { color: var(--btnfg); transform: translateY(-1px); box-shadow: 0 0 0 5px color-mix(in srgb, var(--btn) 22%, transparent), 0 16px 34px -14px var(--btn); }
.btn-gold, html[data-mode] .btn-gold { --btn: #F5B921; --btnfg: #201D17; box-shadow: 0 0 0 6px rgba(245, 185, 33, .2), 0 14px 34px -10px rgba(245, 185, 33, .75); }
.btn-gold, html[data-mode] .btn-gold { box-shadow: inset 0 0 0 2.5px var(--t), 0 0 0 6px rgba(245, 185, 33, .2), 0 14px 34px -10px rgba(245, 185, 33, .75); }
.btn-gold:hover, html[data-mode] .btn-gold:hover { background: #F7C94A; box-shadow: inset 0 0 0 2.5px var(--t), 0 0 0 7px rgba(245, 185, 33, .3), 0 16px 34px -10px rgba(245, 185, 33, .8); }
.btn-small { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn-line { background: transparent; color: var(--t); border: 1.5px solid var(--t); min-height: 48px; padding: 0 22px; font-size: 16px; box-shadow: none; }
.btn-line:hover { background: var(--t); color: var(--tint); box-shadow: none; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
/* Links inside sentences get a 44px-tall target without changing the line spacing. */
:where(p, li, span) > a:not(.btn):not(.btn-small) { padding-block: 13px; }
.cta-row > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
.link-quiet { color: var(--t2); font-size: 15px; display: inline-flex; align-items: center; min-height: 44px; }
span.link-quiet { display: inline; min-height: 0; }
span.link-quiet a, .site-footer p a { display: inline-block; padding: 12px 0; }
.link-btn { min-height: 44px; padding: 0 10px; border: 0; background: transparent; cursor: pointer; color: var(--a); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- chips (the twelve situations) ---------- */
.slips { list-style: none; margin: 0; padding: 0; }
.slip {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 9px 20px 10px; border-radius: 999px;
  border: 1px solid var(--tint-line); background: var(--cream); color: var(--ink); cursor: pointer; text-align: left;
  box-shadow: 0 10px 26px -14px rgba(var(--sh), .45), 0 1px 0 rgba(var(--sh), .04);
  font-family: var(--serif); font-weight: 300; font-size: clamp(16px, 1.35vw, 21px); line-height: 1.12; letter-spacing: -.015em;
  transition: color .3s ease, background-color .3s ease, transform .4s var(--ease), box-shadow .3s ease;
}
.slip:hover { transform: translateY(-4px) rotate(0deg) !important; }
.slip:is([aria-pressed="true"], [aria-expanded="true"]) { background: #FFE39A; color: #201D17; border-color: rgba(125, 90, 11, .5); box-shadow: 0 0 0 4px rgba(245, 185, 33, .28), 0 12px 26px -14px rgba(122, 64, 10, .6); }
.is-dark .slip:is([aria-pressed="true"], [aria-expanded="true"]) { background: #4A3A14; color: #FFE7A8; border-color: rgba(245, 185, 33, .6); }
/* Focus on the sky: an ink ring with a cream halo, so it shows against any picture. */
.slip:focus-visible, .tint a:focus-visible, .copy a:focus-visible, .copy button:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--cream), 0 0 0 7px var(--cream), 0 10px 26px -14px rgba(var(--sh), .45);
}

/* ---------- inner pages ---------- */
.page-hero { gap: clamp(16px, 2.6vh, 28px); }
.sect { gap: clamp(12px, 2vh, 20px); }

/* Questions: each opened question lights its star in the dusk sky. */
.qa-item h2 { margin: 0; }
.qa-btn {
  width: 100%; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: clamp(10px, 2vw, 28px);
  min-height: 72px; padding: clamp(14px, 2vh, 22px) 0; border: 0; background: transparent; cursor: pointer;
  font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 2vw, 32px); line-height: 1.08; letter-spacing: -.02em; color: var(--t);
}
.qa-btn[aria-expanded="true"] { color: var(--h); }
.qa-q { text-wrap: pretty; }
.qa-pm { width: 44px; height: 44px; position: relative; border: 1px solid var(--tint-line); border-radius: 999px; }
.qa-pm::before, .qa-pm::after { content: ""; position: absolute; background: var(--t); }
.qa-pm::before { left: 13px; right: 13px; top: 21px; height: 1.5px; }
.qa-pm::after { top: 13px; bottom: 13px; left: 21px; width: 1.5px; transition: transform .3s ease; }
.qa-btn[aria-expanded="true"] .qa-pm { border-color: var(--h); }
.qa-btn[aria-expanded="true"] .qa-pm::after { transform: rotate(90deg); }
.qa-btn:focus-visible { outline: 2px solid var(--h); outline-offset: 2px; }
.qa-a { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: clamp(10px, 2vw, 28px); }
.qa-a p { grid-column: 1; padding: 0 0 clamp(20px, 3vh, 32px); color: var(--t); font-size: clamp(16px, 1.2vw, 19px); max-width: 680px; text-wrap: pretty; }

/* Get started: the picked situations on a warm ticket, and what we'll ask. */
.ticket {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 14px 18px 14px 34px; max-width: 560px;
  background: #FFF1CC; color: #2A1E08; border: 1px solid rgba(125, 90, 11, .4); border-radius: 12px; transform: rotate(-.6deg);
  box-shadow: 0 0 0 6px rgba(245, 185, 33, .16), 0 22px 40px -24px rgba(122, 64, 10, .7);
}
.ticket { animation: ticket-in 1.1s var(--ease) .45s both; }
@keyframes ticket-in { from { opacity: 0; transform: translateY(22px) rotate(-4deg) scale(.95); } 55% { opacity: 1; } to { opacity: 1; transform: rotate(-.6deg); } }
.ticket::before { content: ""; position: absolute; left: 13px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 999px; background: var(--gold); box-shadow: 0 0 0 4px rgba(245, 185, 33, .3); }
.ticket-text { font-family: var(--serif); font-weight: 300; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.2; }
.ticket-text strong { font-weight: 400; color: #5A1630; }
.ticket .link-btn { color: #5A3A06; }
.is-dark .ticket { background: #3A2F18; color: #FFF1D6; border-color: rgba(245, 185, 33, .45); }
.is-dark .ticket-text strong { color: #FFD36B; }
.is-dark .ticket .link-btn { color: #FFD36B; }
.small-note { margin-top: 4px; }

/* Privacy and the missing page: a band of painted sky, then plain reading. */
.privacy-row { border-top: 1px solid var(--line); padding: clamp(20px, 3vh, 36px) var(--gut); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px clamp(24px, 4vw, 64px); }
.privacy-row h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.05; letter-spacing: -.02em; }
.privacy-row p { color: var(--ink2); font-size: clamp(16px, 1.2vw, 19px); max-width: 640px; text-wrap: pretty; }
.updated { padding: clamp(20px, 3vh, 36px) var(--gut); border-top: 1px solid var(--line); color: var(--ink2); font-size: 14px; }

/* Each inner page's close: a warm evening strip with the dove. */
.closing {
  position: relative; z-index: 2; padding: clamp(40px, 7vh, 88px) var(--gut);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px clamp(24px, 4vw, 64px);
  background: linear-gradient(180deg, #F9E6C8, #F3CFA0); color: #2A0F18;
}
.is-dark .closing { background: linear-gradient(180deg, #221B30, #33253A); color: #F7F3E8; }
.closing-text { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 3.6vw, 60px); line-height: 1; letter-spacing: -.03em; color: #5A1630; }
.is-dark .closing-text { color: #FFD9A8; }
.closing-act { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-left: auto; }
.closing .link-quiet { color: #3E1B24; }
.closing .link-quiet a { color: #5A1630; }
.is-dark .closing .link-quiet { color: #D9CFBF; }
.is-dark .closing .link-quiet a { color: #FFD9A8; }
.closing-bird { width: clamp(96px, 10vw, 150px); height: auto; }
@media (max-width: 759px) { .closing-act { margin-left: 0; } }

.js [data-arrive].pre { opacity: 0; transform: translateY(28px); }
.js [data-arrive].go { transition: opacity .7s ease, transform .9s var(--ease); }
/* Switching to an inner page: a quick fade and rise. */
.page.enter { animation: page-in .38s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* On phones, a small "Get started" that rides along at the foot of the screen. */
.stick-cta {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: none; align-items: center;
  min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--gold); color: #201D17; font-weight: 500; text-decoration: none;
  box-shadow: 0 12px 30px -10px rgba(var(--sh), .65); opacity: 0; visibility: hidden; transform: translate(-50%, 16px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.stick-cta.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s ease, transform .3s var(--ease); }
.stick-cta:hover { color: #201D17; }
@media (max-width: 759px) { .stick-cta { display: inline-flex; } }

/* ---------- footer ---------- */
.site-footer { position: relative; z-index: 2; background: var(--bg); border-top: 1px solid var(--line); padding: 28px var(--gut); display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink2); }
.site-footer p { color: var(--ink); }   /* its small separator dots stay clear of 4.5:1 */
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.site-footer nav a { text-decoration: none; color: var(--ink2); display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.site-footer nav a:hover { color: var(--dgold); }
.site-footer .copyright { width: 100%; font-size: 13px; color: var(--ink2); }
.site-footer a[href^="mailto"] { color: var(--ink2); }

/* ---------- paper grain: one static overlay ---------- */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .24;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 1.4 -.62'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Night grain: light specks, drawn as their own image so the overlay needs no filter. */
.is-dark .grain { opacity: .16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .84 0 0 0 0 .9 0 0 0 1.4 -.62'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- phones ---------- */
@media (max-width: 759px) {
  .display, .hero-h { font-size: clamp(38px, 11vw, 50px); }
  .scene-h { font-size: clamp(31px, 8.8vw, 40px); }
  .scene-h-xl { font-size: clamp(36px, 10vw, 48px); }
  .lines { font-size: 16.5px; }
  .copy { --f: 44px; }
  .btn { min-height: 52px; padding: 0 24px; }
  .qa-btn, .qa-a { grid-template-columns: minmax(0, 1fr) 44px; gap: 10px; }
}