/* Hallmark · editorial publication · charcoal / purple, yellow, pink
 * macrostructure: compact centered masthead → illustrated story index → reading note
 * studied: yes · DNA-source: supplied Pudding screenshot, original Yaho artwork
 * pre-emit critique: P5 H5 E4 S5 R5 V5 */
:root {
  --color-paper: oklch(20% .003 265);
  --color-paper-2: oklch(25% .004 265);
  --color-ink: oklch(96% .008 88);
  --color-muted: oklch(75% .005 265);
  --color-rule: oklch(39% .006 265);
  --color-focus: oklch(89% .15 187);
  --color-error: oklch(82% .12 25);
  --color-error-bg: oklch(27% .035 25);
  --color-scrim: oklch(10% .008 265 / .82);
  --color-shadow: oklch(0% 0 0 / .3);
  --color-cover-ink: oklch(17% .018 285);
  --color-cover-light: oklch(96% .035 90);
  --color-market: oklch(67% .195 307);
  --color-hooks: oklch(89% .157 90);
  --color-creator: oklch(82% .155 336);
  --color-dialog-art: oklch(35% .055 305);
  --color-input: oklch(19% .006 265);
  --color-input-border: oklch(57% .006 265);
  --font-display: var(--font-brand);
}
html { color-scheme:dark; }
body { font-size:17px; overflow-wrap:anywhere; }
button, input, a { touch-action:manipulation; }
.page-width { width:min(1240px,calc(100% - 112px)); margin-inline:auto; }
.masthead { display:grid; grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr); align-items:center; gap:24px; padding-block:24px 32px; min-height:170px; }
.masthead-intro { font-size:15px; line-height:1.5; }
.masthead-intro strong { font-weight:700; }
.intro-signature { display:flex; align-items:center; gap:8px; margin-top:13px; color:var(--color-muted); font-size:12px; }
.intro-signature img { border-radius:50%; }
.masthead-brand { display:block; width:280px; margin-inline:auto; position:relative; }
.brand-caption { display:block; text-align:center; font-family:var(--font-brand); font-size:13px; font-weight:600; letter-spacing:.13em; }
.wordmark { width:280px; height:auto; margin-top:-8px; overflow:visible; }
.wordmark-letters { font-family:var(--font-brand); font-size:103px; font-weight:1000; fill:var(--color-paper); stroke:var(--color-ink); stroke-width:4px; stroke-linejoin:round; paint-order:stroke fill; }
.wordmark-letters text:last-child { fill:var(--color-accent); stroke:var(--color-accent); }
.masthead-links { justify-self:end; }
.sticker-nav { display:flex; align-items:center; gap:13px; }
.sticker { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:4px; border:2px solid var(--color-ink); font-family:var(--font-brand); font-weight:800; font-size:18px; line-height:1; padding:7px 12px; white-space:nowrap; box-shadow:inset 0 0 0 3px var(--color-paper),inset 0 0 0 4px var(--color-ink); transition:transform var(--dur-fast) var(--ease-out); }
.sticker--oval { border-radius:50%; transform:rotate(-7deg); }
.sticker--wave { border-radius:45% 30% 44% 26% / 30% 45% 35% 40%; transform:rotate(3deg); }
.sticker--ticket { border-radius:2px 10px 3px 10px; transform:rotate(-4deg); }
.sticker:hover { transform:translateY(-3px); color:var(--color-accent); border-color:var(--color-accent); }
.sticker:active { transform:translateY(0); }
.comparison-nav { display:flex; justify-content:flex-end; gap:17px; margin-top:8px; color:var(--color-muted); font-size:12px; }
.comparison-nav a { display:inline-flex; align-items:center; gap:5px; min-height:44px; white-space:nowrap; }
.comparison-nav a:hover { text-decoration:underline; text-underline-offset:4px; color:var(--color-ink); }
.library { padding-top:12px; }
.library-tools { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px 30px; }
.search-form { display:flex; align-items:center; gap:12px; min-width:0; }
.search-label { width:35px; flex-shrink:0; }
.search-label svg { width:35px; fill:none; stroke:var(--color-ink); stroke-width:3; stroke-linecap:round; }
.search-field { position:relative; width:254px; }
.search-field input { width:100%; min-height:44px; padding:8px 42px 8px 12px; font-size:16px; line-height:1.4; border:1px solid var(--color-input-border); border-radius:4px; color:var(--color-ink); background:var(--color-paper-2); outline-offset:4px; }
.search-field input::placeholder { color:var(--color-muted); opacity:1; }
.search-field input:hover { border-color:var(--color-muted); }
.search-field input::-webkit-search-cancel-button { display:none; }
.search-clear { position:absolute; right:0; top:0; display:grid; place-items:center; width:44px; height:44px; font-size:25px; line-height:1; border:0; border-radius:4px; background:transparent; color:var(--color-muted); }
.search-clear:hover { color:var(--color-ink); background:var(--color-rule); }
.category-nav { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.category-nav button { display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:2px 4px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--color-muted); white-space:nowrap; font-size:15px; font-weight:500; }
.category-symbol { font-family:var(--font-brand); font-size:36px; font-weight:600; line-height:1; }
.category-symbol--play { font-size:39px; }
.category-nav button[aria-pressed="true"] { color:var(--color-ink); border-bottom-color:var(--color-accent); }
.category-nav button:hover { color:var(--color-accent); }
.category-nav button:active { opacity:.7; }
.library-caption { display:flex; justify-content:space-between; gap:16px; margin-block:24px 23px; color:var(--color-muted); font-size:12px; line-height:1.5; }
.results-count { text-align:right; }
.story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; align-items:start; }
.story { min-width:0; }
.story-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:32px; margin-bottom:9px; font-size:11px; font-weight:500; color:var(--color-muted); }
.kind-label { border:1px solid var(--color-ink); border-radius:99px; padding:3px 10px; color:var(--color-ink); white-space:nowrap; font-size:12px; }
.story-cover { position:relative; display:block; width:100%; padding:0; border:0; border-radius:0; aspect-ratio:1; overflow:hidden; color:var(--color-cover-ink); }
.cover--market { background:var(--color-market); }
.cover--hooks { background:var(--color-hooks); }
.cover--creator { background:var(--color-creator); }
.editorial-art { width:100%; height:100%; fill:var(--color-cover-ink); font-family:var(--font-brand); transition:transform 280ms var(--ease-out); }
.story-cover:hover .editorial-art { transform:scale(1.025); }
.story-cover:active .editorial-art { transform:scale(1.005); }
.cover-action { position:absolute; bottom:12px; right:12px; display:flex; align-items:center; gap:14px; padding:5px 10px; border:1px solid var(--color-cover-ink); border-radius:99px; background:var(--color-cover-light); color:var(--color-cover-ink); font-size:12px; font-weight:600; transform:translateY(55px); transition:transform var(--dur-normal) var(--ease-out); }
.story-cover:hover .cover-action, .story-cover:focus-visible .cover-action { transform:translateY(0); }
.art-ink { fill:var(--color-cover-ink); }
.art-light { fill:var(--color-cover-light); }
.art-purple { fill:var(--color-market); }
.art-yellow { fill:var(--color-hooks); }
.art-pink { fill:var(--color-creator); }
.art-stroke { stroke:var(--color-cover-ink); stroke-width:3; stroke-linejoin:round; }
.art-heavy-stroke { stroke:var(--color-cover-ink); stroke-width:4; stroke-linejoin:round; }
.art-line { fill:none; stroke:var(--color-cover-ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.art-label { font-size:22px; font-weight:750; }
.art-small { font-size:19px; font-weight:700; }
.art-micro { font-size:15px; font-weight:700; }
.art-question { font-size:184px; font-weight:900; stroke:var(--color-cover-ink); stroke-width:3; paint-order:stroke fill; }
.art-three { font-size:255px; font-weight:1000; letter-spacing:-.025em; }
.art-first { font-size:45px; font-weight:800; }
.art-second { font-size:56px; font-weight:800; }
.art-connection-title { font-size:67px; font-weight:850; letter-spacing:-.02em; }
.art-connection-ending { font-size:44px; }
.story-title { margin-top:14px; font-family:var(--font-brand); font-size:clamp(24px,2.08vw,30px); font-weight:800; line-height:1.28; letter-spacing:-.018em; }
.story-title button { display:block; text-align:left; padding:0; min-height:44px; border:0; border-radius:0; background:transparent; font:inherit; line-height:inherit; letter-spacing:inherit; word-break:keep-all; overflow-wrap:anywhere; }
.story-title button:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }
.story-title button:active { opacity:.75; }
.story-description { margin-top:10px; font-size:16px; line-height:1.65; color:var(--color-muted); }
.library-disclosure { margin-top:32px; color:var(--color-muted); font-size:12px; line-height:1.7; }
.empty-state { display:flex; min-height:400px; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 20px; }
.empty-mark { font-family:var(--font-brand); font-size:88px; font-weight:800; line-height:1; color:var(--color-market); transform:rotate(-12deg); margin-bottom:20px; }
.empty-state h2 { font-family:var(--font-brand); font-size:30px; font-weight:800; }
.empty-state p { margin-top:10px; color:var(--color-muted); font-size:16px; }
.reset-search { min-height:48px; padding:10px 18px; margin-top:24px; border:1px solid var(--color-ink); border-radius:99px; background:transparent; font-size:15px; font-weight:500; }
.reset-search:hover { background:var(--color-ink); color:var(--color-paper); }
.reading-note { display:grid; grid-template-columns:100px minmax(0,1fr) minmax(0,1fr); align-items:center; gap:30px; margin-top:72px; padding-block:45px; border-block:1px solid var(--color-rule); }
.note-doodle { font-family:var(--font-brand); font-size:110px; line-height:1; color:var(--color-hooks); transform:rotate(-12deg); }
.section-eyebrow { font-size:13px; font-weight:500; margin-bottom:14px; color:var(--color-muted); }
.reading-note h2 { font-family:var(--font-brand); font-size:40px; line-height:1.2; font-weight:750; letter-spacing:-.015em; }
.reading-copy { font-size:16px; line-height:1.9; }
.reading-copy span { display:inline-block; margin-top:10px; color:var(--color-muted); }
.about-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; padding-block:80px; }
.about-signature { position:relative; display:flex; align-items:center; justify-content:center; gap:22px; align-self:center; }
.about-signature img { width:96px; height:96px; border-radius:50%; }
.about-signature>span:not(.signature-star) { font-family:var(--font-brand); font-size:42px; font-weight:800; line-height:1.15; transform:rotate(-5deg); }
.signature-star { align-self:flex-start; font-family:var(--font-brand); font-size:52px; color:var(--color-creator); transform:rotate(13deg); }
.about-copy h2 { font-family:var(--font-brand); font-size:31px; line-height:1.35; font-weight:750; }
.about-copy>p:not(.section-eyebrow) { margin-top:20px; font-size:16px; color:var(--color-muted); }
.underlined-link { display:inline-flex; align-items:center; gap:24px; min-height:44px; margin-top:16px; font-size:16px; text-decoration:underline; text-underline-offset:6px; }
.underlined-link:hover { color:var(--color-accent); }
.tempo-section { display:flex; justify-content:space-between; align-items:center; gap:40px; padding-block:36px 44px; border-block:1px solid var(--color-rule); }
.tempo-section h2 { font-family:var(--font-brand); font-size:28px; line-height:1.4; font-weight:750; }
.tempo-section p:not(.section-eyebrow) { margin-top:10px; font-size:16px; color:var(--color-muted); }
.tempo-link { display:inline-flex; flex-shrink:0; min-height:56px; align-items:center; gap:30px; padding:10px 23px; border:2px solid var(--color-ink); border-radius:50%; font-family:var(--font-brand); font-size:20px; font-weight:750; transform:rotate(-5deg); white-space:nowrap; }
.tempo-link:hover { background:var(--color-ink); color:var(--color-paper); }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-block:30px; }
.footer-name { display:flex; align-items:center; gap:18px; min-height:44px; font-family:var(--font-brand); font-size:28px; font-weight:850; white-space:nowrap; }
.footer-name span { font-family:var(--font-body); font-size:12px; font-weight:400; color:var(--color-muted); }
.prototype-note { text-align:right; }
/* The shared native dialog remains a dark reading surface in every stage. */
.resource-dialog { border-color:var(--color-rule); border-radius:8px; background:var(--color-paper); color:var(--color-ink); }
.dialog-art { background:var(--color-dialog-art); color:var(--color-ink); border-color:var(--color-rule); }
.dialog-art__brand { font-family:var(--font-brand); letter-spacing:0; }
.dialog-art__title { font-family:var(--font-brand); font-weight:800; line-height:1.35; letter-spacing:-.015em; }
.dialog-art__meta { color:var(--color-muted); }
.dialog-close { background:var(--color-paper); color:var(--color-ink); border-color:var(--color-muted); min-width:44px; min-height:44px; }
.dialog-close:hover { background:var(--color-ink); color:var(--color-paper); }
.dialog-heading { font-family:var(--font-brand); font-weight:750; letter-spacing:-.015em; }
.dialog-description { font-size:16px; }
.dialog-outline li { font-size:15px; }
.dialog-back { color:var(--color-ink); min-height:44px; font-size:14px; }
.dialog-back:hover { color:var(--color-accent); }
.resource-dialog .button { border-color:var(--color-ink); background:var(--color-ink); color:var(--color-paper); font-family:var(--font-body); font-weight:500; border-radius:4px; }
.resource-dialog .button:hover { background:var(--color-accent); border-color:var(--color-accent); color:var(--color-cover-ink); }
.resource-dialog .button:disabled { background:var(--color-paper-2); border-color:var(--color-rule); color:var(--color-muted); opacity:.65; }
.lead-label { font-weight:500; color:var(--color-ink); }
.lead-input { background:var(--color-input); color:var(--color-ink); border-color:var(--color-input-border); font-weight:400; caret-color:var(--color-accent); }
.lead-input::placeholder { color:var(--color-muted); opacity:1; }
.lead-input:hover { border-color:var(--color-muted); }
.lead-input:focus, .lead-input:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; border-color:var(--color-focus); }
.lead-input[aria-invalid="true"] { background:var(--color-error-bg); color:var(--color-ink); border-color:var(--color-error); }
.field-error { color:var(--color-error); }
.lead-privacy { background:var(--color-paper-2); color:var(--color-muted); }
.success-mark { border-color:var(--color-accent); color:var(--color-accent); background:var(--color-paper-2); }
.success-panel .dialog-heading { color:var(--color-ink); }
@media (max-width:1180px) {
  .page-width { width:calc(100% - 72px); }
  .masthead { grid-template-columns:minmax(0,1fr) 250px minmax(0,1fr); gap:14px; }
  .masthead-brand, .wordmark { width:240px; }
  .sticker-nav { gap:8px; }
  .sticker { font-size:15px; padding-inline:9px; }
  .category-nav { gap:10px; }
  .category-nav button { font-size:14px; gap:5px; }
  .category-symbol { font-size:30px; }
  .search-field { width:240px; }
  .story-grid { gap:24px; }
  .story-title { font-size:25px; }
}
@media (max-width:1000px) {
  .masthead { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding-top:22px; padding-bottom:22px; }
  .masthead-brand { grid-column:1 / -1; grid-row:1; }
  .masthead-intro { grid-column:1; grid-row:2; }
  .masthead-links { grid-column:2; grid-row:2; }
  .intro-signature { margin-top:8px; }
  .library-tools { gap:22px; }
  .category-nav { gap:16px; }
  .story-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 28px; }
  .story-title { font-size:27px; }
  .library-caption { margin-top:22px; }
  .reading-note { grid-template-columns:60px minmax(0,1fr) minmax(0,1fr); gap:24px; }
  .note-doodle { font-size:80px; }
  .reading-note h2 { font-size:34px; }
  .about-section { gap:32px; }
  .about-signature { gap:14px; }
  .about-signature img { width:70px; height:70px; }
  .about-signature>span:not(.signature-star) { font-size:33px; }
  .signature-star { font-size:32px; }
  .about-copy h2 { font-size:28px; }
}
@media (max-width:620px) {
  .page-width { width:calc(100% - 36px); }
  .masthead { display:flex; flex-direction:column; gap:17px; padding-top:20px; padding-bottom:20px; }
  .masthead-brand { order:0; width:220px; }
  .wordmark { width:220px; }
  .brand-caption { font-size:12px; }
  .masthead-intro { order:1; text-align:center; font-size:14px; }
  .masthead-intro br { display:none; }
  .masthead-intro strong { display:block; }
  .intro-signature { display:none; }
  .masthead-links { order:2; }
  .sticker-nav { justify-content:center; gap:14px; }
  .sticker { font-size:17px; padding-inline:12px; }
  .comparison-nav { justify-content:center; gap:20px; margin-top:1px; }
  .library { padding-top:4px; }
  .library-tools { display:block; }
  .search-form { gap:10px; }
  .search-label { width:30px; }
  .search-label svg { width:30px; }
  .search-field { width:auto; flex:1; }
  .category-nav { gap:5px 12px; justify-content:space-between; margin-top:17px; }
  .category-nav button { font-size:13px; gap:4px; padding-inline:0; }
  .category-symbol { font-size:25px; }
  .category-symbol--play { font-size:28px; }
  .library-caption { margin-block:17px 18px; font-size:11px; align-items:flex-start; }
  .library-caption>p:first-child { max-width:180px; }
  .results-count { max-width:105px; }
  .story-grid { grid-template-columns:minmax(0,1fr); gap:38px; }
  .story-meta { margin-bottom:8px; }
  .story-title { font-size:27px; margin-top:13px; }
  .story-description { font-size:16px; margin-top:7px; }
  .cover-action { transform:none; font-size:11px; padding:3px 8px; bottom:9px; right:9px; }
  .library-disclosure { margin-top:27px; }
  .reading-note { grid-template-columns:40px minmax(0,1fr); align-items:start; gap:10px 16px; padding-block:32px; margin-top:40px; }
  .note-doodle { font-size:60px; margin-top:21px; }
  .reading-note h2 { font-size:33px; }
  .reading-copy { grid-column:2; margin-top:12px; font-size:15px; }
  .reading-copy br { display:none; }
  .reading-copy span { margin-top:12px; }
  .about-section { grid-template-columns:minmax(0,1fr); gap:34px; padding-block:48px; }
  .about-signature { justify-content:flex-start; gap:20px; padding-left:7px; }
  .about-signature img { width:76px; height:76px; }
  .about-signature>span:not(.signature-star) { font-size:36px; }
  .about-copy h2 { font-size:28px; }
  .about-copy>p:not(.section-eyebrow) { font-size:16px; }
  .about-copy>p:not(.section-eyebrow) br { display:none; }
  .tempo-section { flex-direction:column; align-items:flex-start; gap:25px; padding-block:30px 36px; }
  .tempo-section h2 { font-size:26px; }
  .tempo-link { font-size:18px; min-height:52px; }
  .site-footer { flex-direction:column; align-items:flex-start; gap:18px; padding-block:24px; }
  .footer-name { flex-wrap:wrap; gap:10px; white-space:normal; }
  .footer-name span { font-size:11px; }
  .prototype-note { text-align:left; font-size:11px; }
  .dialog-heading { font-size:24px; }
  .dialog-content { padding:24px; }
  .dialog-art { padding:24px; }
  .dialog-close { top:10px; right:10px; }
}
@media (max-width:360px) {
  .page-width { width:calc(100% - 28px); }
  .category-nav { gap:5px 9px; }
  .category-nav button { font-size:12px; gap:3px; }
  .category-symbol { font-size:23px; }
  .sticker-nav { gap:10px; }
  .sticker { font-size:16px; padding-inline:10px; }
  .story-title { font-size:26px; }
  .library-caption>p:first-child { max-width:157px; }
  .dialog-content { padding:22px 18px; }
  .dialog-art { padding:22px 18px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none!important; transition:none!important; }
}