/* Deepening Date Night — restyle by Claude, 2026-10-13
   Reference: the "Sprout" agency boards Oliver chose. White canvas, wide heavy display type,
   framed color panels, big scallops, one mint ribbon, tilted outlined pills, fanned cards.
   To compare with Anton headlines, set data-display="anton" on <html>. */

:root {
  --white: #FFFFFF;
  --blue: #3665FF;
  --blue-faint: #5A82FF;
  --pink: #EF4FF3;
  --mint: #91F9CF;
  --yellow: #E8FD52;
  --ink: #101010;

  --display: "Archivo", "Arial Black", sans-serif;
  --display-stretch: 125%;
  --display-weight: 900;
  --display-track: -0.02em;
  --display-scale: 1;
  --body: "Poppins", system-ui, sans-serif;

  --margin: clamp(1rem, 2.4vw, 2.25rem);
  --radius-panel: clamp(1.5rem, 3vw, 2.75rem);
  --radius-card: 1.25rem;
  --line: 2px solid var(--ink);
  --t-fast: 180ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}
html[data-display="anton"] {
  --display: "Anton", Impact, sans-serif;
  --display-stretch: 100%;
  --display-weight: 400;
  --display-track: 0;
  --display-scale: 1.35;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.wrap { padding-inline: var(--margin); max-width: 1680px; margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--yellow); padding: .5rem 1rem; border: var(--line); border-radius: 99px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.display {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-track);
  text-transform: uppercase;
  line-height: .92;
}

/* ---------- draft bar + header ---------- */
.draft { background: var(--ink); color: var(--yellow); text-align: center; font: 600 .75rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: .55rem 1rem; }
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; }
.logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: uppercase; font-size: 1.05rem; letter-spacing: -0.01em; }
.logo-dot { width: .9rem; height: .9rem; border-radius: 50%; background: var(--pink); border: var(--line); }
.site-head nav { display: flex; align-items: center; gap: .4rem; }
.site-head nav a { text-decoration: none; font: 500 .9rem/1 var(--body); padding: .6rem 1rem; border: var(--line); border-radius: 99px; transition: background-color var(--t-fast) ease; }
.site-head nav a.btn-sm { background: var(--mint); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .site-head nav a:hover { background: var(--yellow); } }
@media (max-width: 720px) {
  .site-head nav a:not(.btn-sm) { display: none; }
  .site-head nav a.btn-sm { padding: .5rem .85rem; font-size: .8rem; }
  .logo { font-size: .78rem; gap: .4rem; }
  .logo-dot { width: .7rem; height: .7rem; }
}

/* ---------- pills / stickers ---------- */
.pill { display: inline-block; font: 600 .8rem/1 var(--body); text-transform: uppercase; letter-spacing: .02em; padding: .6rem 1.05rem; border: var(--line); border-radius: 99px; white-space: nowrap; }
.p-pink { background: var(--pink); }
.p-yellow { background: var(--yellow); }
.p-mint { background: var(--mint); }
.p-white { background: var(--white); }
.p-blue { background: var(--blue); color: var(--white); }
.tilt-l { transform: rotate(-7deg); }
.tilt-r { transform: rotate(6deg); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .6rem; font: 600 1rem/1 var(--body); text-decoration: none; padding: 1.05rem 1.6rem; border: var(--line); border-radius: 99px; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) ease; }
.btn .ico { width: 1.1rem; height: 1.1rem; }
.btn-mint { background: var(--mint); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--yellow); transform: rotate(-2deg); } }

/* ---------- HERO ---------- */
.hero-panel { position: relative; margin: 0 var(--margin); background: var(--blue); color: var(--white); border-radius: var(--radius-panel); overflow: hidden; isolation: isolate; }
.loops { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; fill: none; stroke-linecap: round; }
.loop-faint { stroke: var(--blue-faint); stroke-width: 44; }
.loop-mint { stroke: var(--mint); stroke-width: 44; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: clamp(1.25rem, 2.5vw, 2rem); padding: clamp(3.5rem, 8vw, 7.5rem) var(--margin) clamp(2.5rem, 5vw, 4rem); }
.hero-title { position: relative; }
.hero-title h1 { color: var(--mint); font-size: calc(clamp(2.5rem, 6.8vw, 7.75rem) * var(--display-scale)); }
.hero-title h1 span { display: block; }
.hero-title .pill { position: absolute; font-size: clamp(.68rem, .95vw, .9rem); }
.s-1 { left: -2%; top: -14%; }
.s-2 { right: -3%; top: 38%; }
.s-3 { left: 6%; bottom: -16%; }
.lede { max-width: 34rem; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.55; }
.hero-shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 2vw, 1.75rem); padding: 0 clamp(1rem, 4vw, 4rem); align-items: end; margin-bottom: -3%; }
.shape { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; color: var(--ink); overflow: hidden; }
.shape img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.leaf { border-radius: 0 60% 0 60% / 0 45% 0 45%; }
.arch { border-radius: 999px 999px 0 0; aspect-ratio: 4 / 5.4; }
.cloud { border-radius: 46% 54% 0 0 / 38% 40% 0 0; }
.c-mint { background: var(--mint); }
.c-pink { background: var(--pink); }
.c-yellow { background: var(--yellow); }
.fact { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.fact b { font-family: var(--display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-size: calc(clamp(3rem, 10vw, 9rem) * var(--display-scale)); line-height: .85; text-transform: uppercase; }
.fact span { font: 600 clamp(.75rem, 1.1vw, 1rem)/1.2 var(--body); text-transform: uppercase; letter-spacing: .04em; }
.badge { position: absolute; top: 6%; right: 6%; width: clamp(4.5rem, 9vw, 7.5rem); }
@media (prefers-reduced-motion: no-preference) {
  .badge .spin { transform-origin: 60px 60px; animation: spin 18s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
  .hero-title h1 { font-size: calc(10.2vw * var(--display-scale)); }
  .hero-title .pill { font-size: .6rem; padding: .42rem .65rem; }
  .s-1 { top: -24%; left: 0; }
  .s-2 { display: none; }
  .s-3 { left: auto; right: 0; bottom: -22%; }
  .hero-inner { padding-top: 4rem; gap: 2.25rem; }
  .lede { font-size: .98rem; }
  .hero-shapes { gap: .5rem; padding: 0 .75rem; }
  .badge { display: none; }
  .fact b { font-size: calc(10.5vw * var(--display-scale)); }
  .fact span { font-size: .58rem; }
}

/* ---------- CYCLE ---------- */
.cycle { position: relative; margin-top: clamp(4rem, 8vw, 7rem); }
.cycle-band { position: relative; background: var(--mint); padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(9rem, 22vw, 20rem); }
.cycle-band .wrap { position: relative; text-align: center; }
.cycle-band h2 { font-size: calc(clamp(2.3rem, 6.4vw, 7rem) * var(--display-scale)); }
.s-4 { position: absolute; right: 12%; bottom: -1.6rem; font-size: clamp(.68rem, .95vw, .9rem); }
.scallop-bottom { position: absolute; left: 0; top: calc(100% - 1px); width: 100%; height: clamp(2rem, 5vw, 4.5rem); fill: var(--mint); }
.pinwheel { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(78vw, 46rem); margin: calc(clamp(7rem, 19vw, 17rem) * -1) auto 0; }
.petal { aspect-ratio: 1; display: flex; flex-direction: column; gap: .35rem; padding: clamp(1rem, 3.4vw, 2.6rem); color: var(--ink); }
.petal .wk { font: 600 clamp(.65rem, 1vw, .85rem)/1 var(--body); text-transform: uppercase; letter-spacing: .06em; }
.petal h3 { font-family: var(--display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: uppercase; font-size: calc(clamp(.8rem, 1.65vw, 1.5rem) * var(--display-scale)); line-height: .95; max-width: 10ch; }
.pw-1 { background: var(--yellow); border-bottom-left-radius: 100%; align-items: flex-end; text-align: right; }
.pw-2 { background: var(--pink); border-top-left-radius: 100%; justify-content: flex-end; align-items: flex-end; text-align: right; }
.pw-3 { background: var(--mint); border-top-right-radius: 100%; justify-content: flex-end; }
.pw-4 { background: var(--blue); color: var(--white); border-bottom-right-radius: 100%; }
.pw-2 { order: 2; } .pw-1 { order: 1; } .pw-4 { order: 3; } .pw-3 { order: 4; }
.hub { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: clamp(5rem, 13vw, 9.5rem); aspect-ratio: 1; border-radius: 50%; background: var(--white); border: var(--line); display: grid; place-items: center; text-align: center; font: 700 clamp(.7rem, 1.2vw, 1rem)/1.1 var(--body); text-transform: uppercase; }
.cycle-note { max-width: 40rem; text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }
.statement { max-width: 72rem; text-align: center; margin-top: clamp(4rem, 9vw, 8rem); font-family: var(--display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: uppercase; font-size: calc(clamp(1.6rem, 3.6vw, 3.6rem) * var(--display-scale)); line-height: 1; letter-spacing: var(--display-track); text-wrap: balance; }
.statement .blue { color: var(--blue); }
@media (max-width: 720px) { .pinwheel { width: calc(100vw - 2rem); } .s-4 { right: 6%; } .petal { padding: .9rem; } .petal h3 { font-stretch: 100%; font-size: calc(.95rem * var(--display-scale)); } .petal .wk { font-size: .6rem; } }

/* ---------- THIS WEEK'S SET ---------- */
.tryset { position: relative; margin-top: clamp(5rem, 10vw, 9rem); }
.scallop-top { display: block; width: 100%; height: clamp(2rem, 5vw, 4.5rem); fill: var(--ink); margin-bottom: -1px; }
.tryset-in { position: relative; background: var(--ink); color: var(--white); padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem); overflow: hidden; isolation: isolate; }
.ribbon { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; fill: none; stroke: var(--mint); stroke-width: 40; stroke-linecap: round; }
.try-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; }
.try-head h2 { font-size: calc(clamp(2.3rem, 6.4vw, 7rem) * var(--display-scale)); }
.try-head p { max-width: 22rem; }
.deck { list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0 calc(var(--margin) * 2); display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; min-height: clamp(20rem, 30vw, 27rem); padding: clamp(1.25rem, 2vw, 1.75rem); border-radius: var(--radius-card); color: var(--ink); margin-inline: -1.2%; transition: transform var(--t-fast) var(--ease-out); }
.card p { font: 500 clamp(1rem, .9rem + .35vw, 1.2rem)/1.4 var(--body); }
.card .num { font-family: var(--display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-size: calc(clamp(3.5rem, 7vw, 6.5rem) * var(--display-scale)); line-height: .85; }
.card .pill { align-self: flex-start; font-size: .68rem; }
.card.light { justify-content: flex-start; }
.card.light p { margin-top: auto; }
.k-white { background: var(--white); rotate: -6deg; translate: 0 1.5rem; }
.k-white .num { color: var(--pink); }
.k-mint { background: var(--mint); rotate: 3deg; z-index: 2; }
.k-mint .num { color: var(--blue); }
.k-blue { background: var(--blue); color: var(--white); rotate: -2deg; translate: 0 2rem; z-index: 3; }
.k-blue .num { color: var(--mint); }
.k-pink { background: var(--pink); rotate: 4deg; translate: 0 -.5rem; z-index: 2; }
.k-yellow { background: var(--yellow); rotate: -4deg; translate: 0 1.25rem; }
@media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-.75rem); z-index: 5; } }
.try-foot { margin-top: clamp(4rem, 7vw, 6rem); text-align: center; font-weight: 500; }
@media (max-width: 960px) {
  .deck { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; }
  .card { min-height: 16rem; margin-inline: 0; }
  .card.light { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .deck { grid-template-columns: 1fr; row-gap: .25rem; padding-inline: 1.5rem; }
  .card { min-height: 0; gap: 1.5rem; }
  .k-white, .k-mint, .k-blue, .k-pink, .k-yellow { translate: none; }
  .k-white { rotate: -3deg; } .k-mint { rotate: 2deg; } .k-blue { rotate: -2deg; } .k-pink { rotate: 2.5deg; } .k-yellow { rotate: -2deg; }
}

/* ---------- FAQ ---------- */
.faq { padding-block: clamp(5rem, 10vw, 9rem); max-width: 64rem; }
.faq h2 { font-size: calc(clamp(2rem, 5vw, 5rem) * var(--display-scale)); margin-bottom: clamp(2rem, 4vw, 3rem); }
.faq details { border: var(--line); border-radius: 1.75rem; margin-top: .75rem; background: var(--white); transition: background-color var(--t-fast) ease; }
.faq details[open] { background: var(--mint); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.5rem; font: 600 clamp(1rem, .95rem + .3vw, 1.2rem)/1.3 var(--body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: var(--line); background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23101010' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 1rem no-repeat; transition: rotate var(--t-fast) var(--ease-out); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 1.5rem 1.4rem; max-width: 46rem; }

/* ---------- SIGNUP ---------- */
.bleed-wrap { position: relative; }
.signup { position: relative; background: var(--pink); color: var(--ink); padding: clamp(4rem, 8vw, 7rem) 0 clamp(5rem, 9vw, 8rem); margin-top: clamp(4rem, 7vw, 6rem); }
.signup::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(2rem, 5vw, 4.5rem); background: var(--pink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80 V40 A100 40 0 0 1 200 40 A100 40 0 0 1 400 40 A100 40 0 0 1 600 40 A100 40 0 0 1 800 40 A100 40 0 0 1 1000 40 A100 40 0 0 1 1200 40 V80 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80 V40 A100 40 0 0 1 200 40 A100 40 0 0 1 400 40 A100 40 0 0 1 600 40 A100 40 0 0 1 800 40 A100 40 0 0 1 1000 40 A100 40 0 0 1 1200 40 V80 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.scallop { display: none; }
.signup form:not(:has(.field)) { display: grid; justify-content: stretch; width: min(100%, 30rem); text-align: left; }
.signup form:not(:has(.field)) input { margin-bottom: .5rem; }
.signup-in { display: grid; justify-items: center; text-align: center; gap: 1.25rem; }
.signup-title { position: relative; margin-bottom: 1rem; }
.signup h2 { font-family: var(--display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); letter-spacing: var(--display-track); text-transform: uppercase; line-height: .92; font-size: calc(clamp(2rem, 4.4vw, 4.75rem) * var(--display-scale)); max-width: 20ch; text-wrap: balance; }
.signup-title .pill { position: absolute; font-size: clamp(.68rem, .95vw, .9rem); }
.s-5 { left: -4%; bottom: 8%; }
.s-6 { right: -3%; top: 4%; }
.signup form { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: .75rem; width: min(100%, 52rem); margin-top: .5rem; }
.signup .field { display: grid; gap: .35rem; text-align: left; flex: 1 1 14rem; }
.signup label { font: 600 .85rem/1 var(--body); padding-left: 1.1rem; }
.signup input { font: 500 1rem/1 var(--body); padding: 1.05rem 1.25rem; border: var(--line); border-radius: 99px; background: var(--white); color: var(--ink); width: 100%; }
.signup button { font: 600 1rem/1 var(--body); padding: 1.1rem 1.6rem; border: var(--line); border-radius: 99px; background: var(--mint); color: var(--ink); cursor: pointer; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) ease; }
@media (hover: hover) and (pointer: fine) { .signup button:hover { background: var(--yellow); transform: rotate(-2deg); } }
.hp { position: absolute; left: -9999px; }
.small { font-size: .85rem; }
@media (max-width: 720px) { .s-5 { left: 0; bottom: -18%; } .s-6 { right: 0; top: -20%; } .signup button { width: 100%; } }

/* ---------- FOOTER ---------- */
footer { padding: clamp(3rem, 6vw, 5rem) 0 2.5rem; font-size: .92rem; }
footer .wrap > p + p { margin-top: .75rem; max-width: 52rem; }
.foot-mark { font-family: var(--display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); letter-spacing: var(--display-track); text-transform: uppercase; color: var(--blue); font-size: calc(clamp(2.6rem, 9.6vw, 10.5rem) * var(--display-scale)); line-height: .88; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ---------- INNER PAGES (articles, about, privacy, disclaimer, questions, thanks) ---------- */
.inner .prose { max-width: 50rem; padding-block: clamp(3rem, 7vw, 6rem); }
.inner .prose h1 { font-family: var(--display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); letter-spacing: var(--display-track); text-transform: uppercase; line-height: .92; font-size: calc(clamp(2.6rem, 7vw, 6.5rem) * var(--display-scale)); margin-bottom: 2rem; }
.inner .prose h2 { font-family: var(--display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: uppercase; font-size: calc(clamp(1.3rem, 2.4vw, 2rem) * var(--display-scale)); line-height: 1; margin: 2.5rem 0 .75rem; }
.inner .prose p + p, .inner .prose ul, .inner .prose ol { margin-top: 1rem; }
.inner .prose li { margin-top: .5rem; }
.arts { list-style: none; padding: 0; }
.arts li { border: var(--line); border-radius: 1.5rem; padding: 1.25rem 1.5rem; margin-top: .9rem !important; font-weight: 600; font-size: 1.1rem; line-height: 1.35; }
.arts li:nth-child(3n+1) { background: var(--mint); }
.arts li:nth-child(3n+2) { background: var(--yellow); }
.arts li:nth-child(3n) { background: var(--white); }
.arts .small { font-weight: 400; }
.tag { display: inline-block; font: 600 .7rem/1 var(--body); text-transform: uppercase; letter-spacing: .04em; padding: .4rem .7rem; border: var(--line); border-radius: 99px; background: var(--pink); margin-right: .5rem; vertical-align: .15em; }
.inner .qs, .inner ol.qs { padding-left: 1.25rem; }

/* ===== Inner-page layouts (added by Grok Bot on top of Claude's style.css) ===== */
.page-hero{background:var(--blue);color:#fff;border-radius:32px;margin:12px clamp(10px,2vw,24px) 0;padding:clamp(40px,7vw,96px) 0 clamp(36px,6vw,72px);position:relative;overflow:hidden}
.page-hero .kicker{display:inline-block;margin-bottom:18px}
.page-hero h1{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);letter-spacing:var(--display-track);font-size:clamp(2.2rem,7vw,5.2rem);line-height:.95;color:var(--mint);text-transform:uppercase;max-width:14ch}
.page-hero p{max-width:60ch;margin-top:18px;font-size:1.1rem;color:#fff}
.page-hero .meta{font-size:.95rem;opacity:1}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:48px auto}
.how div{border:2px solid var(--ink);border-radius:24px;padding:24px;background:#fff}
.how div:nth-child(2){background:var(--mint)}
.how div:nth-child(3){background:var(--yellow)}
.how h3{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:900;font-size:1.15rem;text-transform:uppercase;margin-bottom:8px}
.week-deck{list-style:none;padding:0;margin:0 auto 32px;display:grid;gap:18px;max-width:820px}
.week-deck li{border:2px solid var(--ink);border-radius:28px;padding:26px 28px 26px 92px;position:relative;font-size:1.15rem;font-weight:500;color:var(--ink);transition:transform .2s}
.week-deck li:nth-child(odd){transform:rotate(-.8deg)}.week-deck li:nth-child(even){transform:rotate(.8deg)}
.week-deck li:hover{transform:rotate(0) translateY(-3px)}
.week-deck li b{position:absolute;left:24px;top:50%;translate:0 -50%;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:2.4rem;line-height:1}
.week-deck li:nth-child(1){background:#fff}.week-deck li:nth-child(2){background:var(--mint)}.week-deck li:nth-child(3){background:var(--pink)}.week-deck li:nth-child(4){background:var(--yellow)}.week-deck li:nth-child(5){background:var(--mint)}
.week-deck .pill{margin-bottom:8px;display:inline-block}
.next-up{max-width:820px;margin:0 auto 56px}
.art-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin:48px auto}
.art-card{grid-column:span 3;border:2px solid var(--ink);border-radius:28px;padding:28px;color:var(--ink);text-decoration:none;display:flex;flex-direction:column;gap:10px;min-height:220px;transition:transform .2s}
.art-card:hover{transform:rotate(-1deg) translateY(-4px)}
.art-card:nth-child(1){grid-column:span 4;background:var(--mint)}.art-card:nth-child(2){grid-column:span 2;background:var(--yellow)}.art-card:nth-child(3){grid-column:span 6;background:var(--pink)}
.art-card h2{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.05;text-transform:uppercase}
.art-card .go{margin-top:auto;font-weight:600}
@media (max-width:760px){.art-card,.art-card:nth-child(n){grid-column:span 6}}
.article{max-width:720px;margin:48px auto}
.article p,.article li{font-size:1.1rem;line-height:1.7}
.article p+p{margin-top:1em}
.article h2{font-family:var(--display);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(1.4rem,3.4vw,2.1rem);line-height:1.05;margin:40px 0 14px}
.article blockquote{background:var(--yellow);border:2px solid var(--ink);border-radius:24px;padding:22px 26px;margin:28px 0;font-weight:600;font-size:1.2rem;transform:rotate(-.6deg)}
.article .callout{background:var(--mint);border-radius:24px;padding:22px 26px;margin:28px 0}
.byline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.products{max-width:820px;margin:24px auto 56px;border-top:2px solid var(--ink);padding-top:22px}
.products .label{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.products ul{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.products li{border:2px solid var(--ink);border-radius:18px;padding:14px 16px;font-size:.95rem;background:#fff}
.products li b{display:block;font-weight:600}
.products .small{margin-top:10px}
@media (prefers-reduced-motion:reduce){.week-deck li,.art-card{transition:none;transform:none!important}}
.page-hero .pill{color:var(--ink)}
/* Home hero stickers: sit in a tilted row under the longer H1 instead of floating over it */
.hero-title{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem 1rem}
.hero-title h1{flex:0 0 100%}
.hero-title .pill,.hero-title .pill.s-1,.hero-title .pill.s-2,.hero-title .pill.s-3{position:static;display:inline-block;inset:auto;margin-top:.4rem}
.hero-title .s-2{transform:rotate(3deg)}
@media (max-width:720px){.hero-title .s-2{display:inline-block}.hero-title .pill{font-size:.68rem}}
.hero-title .pill{color:var(--ink)}

/* level + week badges (2026-10-14) */
.pill.lvl{display:inline-flex;align-items:center;gap:.4rem}
.lvl-badge{height:1.5em;width:auto;display:inline-block}
.wk-badge{height:2.5rem;width:auto;display:block;margin:0 auto .25rem}

/* ===== Guide pages (templates/guides.py) ===== */
.guide h3{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.15rem;text-transform:uppercase;margin:28px 0 8px}
.guide ol.q-list{list-style:none;counter-reset:q;padding:0;margin:20px 0;display:grid;gap:12px}
.guide ol.q-list li{counter-increment:q;border:2px solid var(--ink);border-radius:22px;padding:16px 20px 16px 64px;position:relative;background:#fff}
.guide ol.q-list li:nth-child(4n+2){background:var(--mint)}.guide ol.q-list li:nth-child(4n+3){background:var(--yellow)}.guide ol.q-list li:nth-child(4n){background:var(--pink)}
.guide ol.q-list li::before{content:counter(q);position:absolute;left:20px;top:14px;font-family:var(--display);font-weight:900;font-size:1.5rem}
.guide ul{padding-left:1.2em}.guide .signoff{font-weight:600}
.guide-byline{font-size:.95rem}.hero-license{font-size:.72rem!important;margin-top:4px!important;opacity:.9;letter-spacing:.02em}
.magnet{background:var(--blue);color:#fff;border-radius:28px;padding:28px;margin:40px 0;border:2px solid var(--ink)}
.magnet .magnet-title{font-family:var(--display);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(1.3rem,3vw,1.9rem);line-height:1.05;color:var(--mint);margin-top:12px!important}
.magnet p{color:#fff}.magnet .btn{margin:16px 0 6px;display:inline-flex}
.magnet-by{margin-top:14px;line-height:1.3}.magnet-by .license{display:block;font-size:.7rem;font-weight:400;opacity:.9}
.magnet .pill{color:var(--ink)}
.related{max-width:720px;margin:0 auto 56px;border-top:2px solid var(--ink);padding:22px 20px 0}
.related-title{font-family:var(--display);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:1.3rem;margin-bottom:10px}
.related ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.related a{display:inline-block;border:2px solid var(--ink);border-radius:999px;padding:8px 14px;color:var(--ink);text-decoration:none;background:#fff}
.related a:hover{background:var(--mint)}
.guides-index{border-top:0;margin-top:40px}
.guide-art{position:absolute;right:clamp(12px,4vw,56px);bottom:clamp(12px,3vw,32px);width:clamp(96px,16vw,220px);height:auto;pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
@media(max-width:700px){.guide-art{opacity:.35}.page-hero:has(.guide-art){padding-bottom:116px}}
@media(min-width:701px){.page-hero:has(.guide-art) .wrap{padding-right:clamp(120px,20vw,260px)}}
.magnet{position:relative}.magnet-art{position:absolute;right:20px;top:-28px;width:96px;height:auto;transform:rotate(8deg)}

/* ===== Header dropdown + mobile menu (pages-src/patch_nav.py) ===== */
.site-head{position:relative}
.nav-links{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.nav-burger{display:none}
.nav-item{position:relative;display:inline-flex;align-items:center}
.site-head nav .nav-parent{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}
.nav-toggle{font:500 .9rem/1 var(--body);padding:.6rem .8rem;border:var(--line);border-radius:0 99px 99px 0;background:transparent;cursor:pointer;min-height:44px;min-width:44px}
.nav-toggle:hover,.nav-toggle:focus-visible{background:var(--yellow)}
.site-head nav a[aria-current="page"]{background:var(--mint)}
.nav-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:20;list-style:none;margin:0;padding:.4rem;background:#fff;border:var(--line);border-radius:22px;min-width:260px;display:grid;gap:.3rem}
.nav-menu[hidden]{display:none}
.nav-menu a{display:block!important;border-radius:16px!important;white-space:normal}
.site-head nav a{min-height:44px;display:inline-flex;align-items:center}
@media (max-width:720px){
  .site-head nav{gap:.4rem}
  .site-head nav a:not(.btn-sm){display:inline-flex}
  .js .nav-burger{display:inline-flex;align-items:center;font:500 .8rem/1 var(--body);padding:.5rem .85rem;border:var(--line);border-radius:99px;background:#fff;cursor:pointer}
  .js .nav-links{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;flex-direction:column;align-items:stretch;background:#fff;border:var(--line);border-radius:22px;padding:.6rem;gap:.4rem}
  .js .nav-links.open{display:flex}
  .js .nav-links a{justify-content:flex-start;font-size:1rem}
  .nav-item{display:block}
  .nav-toggle{display:none}
  .nav-menu,.nav-menu[hidden]{display:grid;position:static;border:0;padding:.2rem 0 0 1rem;min-width:0}
  .site-head nav .nav-parent{border-radius:99px;border-right:var(--line);display:flex}
  .site-head nav a.btn-sm{display:inline-flex}
}

/* ===== Site menu v2 (Claude, 2026-10-15; markup from partials/menu.json) ===== */
.site-head nav .nav-toggle { font: 500 .9rem/1 var(--body); padding: .6rem 1rem; border: var(--line); border-radius: 99px; background: transparent; color: var(--ink); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.site-head nav .nav-toggle[aria-expanded="true"], .site-head nav .nav-toggle.is-current { background: var(--mint); }
.nav-menu a[aria-current="page"] { background: var(--mint); }
.nav-sub-mobile { display: none !important; }
@media (max-width: 900px) {
  .nav-sub-mobile { display: inline-flex !important; }
  .js .nav-links .btn-sm { display: none !important; }
  .site-head nav .nav-toggle { display: block; border: 0; padding: .7rem .2rem .2rem; background: none !important; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; pointer-events: none; min-height: 0; }
  .site-head nav .nav-toggle span { display: none; }
  .nav-menu, .nav-menu[hidden] { display: grid; position: static; border: 0; padding: 0; min-width: 0; }
}

/* Homepage cards, four launch pages (2026-10-15): two question pages on top, two guides side by side below */
@media (min-width: 901px) {
  .art-grid .art-card:nth-child(3), .art-grid .art-card:nth-child(4) { grid-column: span 3; }
  .art-grid .art-card:nth-child(4) { background: var(--white); }
}
.art-card .pill { align-self: flex-start; }

/* About page intro with photo (2026-10-15) */
.about-intro { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.about-intro h2 { margin-top: 0; }
.about-photo { width: 100%; height: auto; border: var(--line); border-radius: var(--radius-panel); }
.prose.about { max-width: 64rem; }
.prose.about p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.prose.about p.about-more, .prose.about p.signoff { text-align: left; }
@media (max-width: 760px) { .about-intro { grid-template-columns: 1fr; } }