@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

:root { --ink:#302347; --paper:#f4f1ff; --muted:#746781; --line:#ded6eb; --lime:#deeeb7; --orange:#ffc8ad; --lav:#d8caff; --blue:#bedfe7; --violet:#7253df; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; }
button, textarea { font:inherit; }
button { cursor:pointer; }
.shell { min-height:100vh; width:100%; max-width:1800px; margin:0 auto; background:var(--paper); padding:clamp(16px, 3vw, 56px); }
.topbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding-bottom:20px; }
.brand { min-height:44px; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:9px; font:700 24px 'Bodoni Moda',Georgia,serif; letter-spacing:-1.3px; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:10px 10px 10px 3px; background:var(--orange); font-size:22px; }
.topbar-actions { display:flex; gap:10px; align-items:center; }
.icon-button,.avatar { border:1px solid var(--line); background:transparent; width:38px; height:38px; border-radius:50%; color:var(--ink); }
.icon-button { font-size:28px; line-height:0; padding-bottom:4px; }
.avatar { font:500 11px 'DM Sans'; background:var(--ink); color:var(--paper); border-color:var(--ink); }
.intro { padding:20px 0 28px; }
.eyebrow { display:flex; align-items:center; gap:8px; line-height:1.6; text-transform:uppercase; letter-spacing:.12em; font:500 11px 'DM Sans',monospace; color:var(--muted); }
.pulse { flex:none; width:7px; height:7px; background:var(--orange); border-radius:50%; box-shadow:0 0 0 5px #ff745526; }
h1,h2 { font-family:'Bodoni Moda',Georgia,serif; letter-spacing:-.065em; margin:16px 0; }
h1 { font-size:clamp(36px, 11vw, 64px); line-height:1; max-width:16ch; }
h1 em { color:#9288e6; font-style:normal; }
.intro p { color:#5f5a55; font-size:16px; line-height:1.55; max-width:45ch; margin:16px 0 20px; }
.primary-button { display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; max-width:100%; min-height:44px; border:0; border-radius:999px; background:var(--ink); color:var(--paper); padding:14px 19px; font-weight:600; transition:transform .2s, background .2s; }
.primary-button:hover { transform:translateY(-2px); background:#383530; }
.primary-button span { font-size:20px; line-height:.7; }
kbd { margin-left:10px; padding:3px 6px; border:1px solid #ffffff40; border-radius:5px; font:10px 'DM Sans'; color:#aaa; }
.feed-tabs { display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; align-items:center; gap:8px 22px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px 0; }
.feed-tabs .tab { flex:none; }
.tab { white-space:nowrap; border:0; background:transparent; color:var(--muted); padding:0; font-size:14px; }
.tab span { margin-left:5px; font:10px 'DM Sans'; color:#a8a096; }
.tab.active { color:var(--ink); font-weight:700; }
.tab.active:after { content:''; display:block; width:5px; height:5px; background:var(--orange); border-radius:50%; margin:8px auto -20px; }
.feed { display:grid; grid-template-columns:minmax(0, 1fr); gap:24px; padding:24px 5px 38px 0; }
.empty-feed { grid-column:1 / -1; }
.story-card { position:relative; min-width:0; min-height:305px; padding:clamp(18px, 2vw, 26px); border:1px solid var(--ink); border-radius:24px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:5px 5px 0 var(--ink); transition:transform .25s; }
.story-card:hover { transform:translate(-2px,-2px); }
.story-card[data-color="yellow"] { background:var(--lime); }
.story-card[data-color="orange"] { background:var(--orange); }
.story-card[data-color="blue"] { background:var(--blue); }
.story-card[data-color="lav"] { background:var(--lav); }
.story-meta { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; font:500 11px 'DM Sans'; text-transform:uppercase; letter-spacing:.08em; }
.topic { background:#ffffff78; border:1px solid #161616; border-radius:99px; padding:7px 10px; }
.story-number { opacity:.6; }
.story-labels { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.collection-note { max-width:75ch; font-size:13px; line-height:1.6; color:#5f5a55; margin:0 0 24px; }
.corner-label { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:20px 0 0; color:#5f5a55; font-size:13px; }
.corner-label select { width:min(100%,240px); font-size:14px; }
.feed-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin:0 0 32px; }
.feed-pagination p { font:12px 'DM Sans',monospace; color:#5f5a55; }
.feed-pagination button[hidden] { display:none; }
@media (max-width:699px) {
  .feed-tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
  .feed-tabs .tab { flex:none; }
}
.story-title { max-width:22ch; font:600 clamp(28px, 2.6vw, 40px)/1.05 'Bodoni Moda',Georgia,serif; letter-spacing:-.055em; margin:24px 0 18px; }
.story-body { max-width:54ch; font-size:17px; line-height:1.5; margin:0 0 24px; }
.story-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; }
.reactions { display:flex; gap:8px; flex-wrap:wrap; }
.reaction { border:1px solid var(--ink); background:#ffffff35; border-radius:99px; padding:8px 11px; font:500 12px 'DM Sans'; }
.reaction:hover,.reaction.selected { background:var(--ink); color:var(--paper); }
.share-story { border:0; background:transparent; color:var(--ink); font:500 12px 'DM Sans'; text-decoration:underline; }
.footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; color:var(--muted); border-top:1px solid var(--line); padding-top:16px; font:10px 'DM Sans'; text-transform:uppercase; letter-spacing:.04em; }
.story-dialog { width:min(560px, calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid var(--ink); border-radius:24px; padding:0; background:var(--paper); box-shadow:10px 10px 0 var(--ink); }
.story-dialog::backdrop { background:#161616b8; backdrop-filter:blur(5px); }
.story-dialog form { padding:clamp(20px, 5vw, 32px); position:relative; }
.close-button { position:absolute; top:10px; right:10px; width:44px; height:44px; border:0; background:transparent; font-size:28px; }
h2 { font-size:clamp(32px, 7vw, 49px); line-height:1.05; margin-top:22px; }
.story-dialog h2 { padding-right:28px; }
.story-dialog .eyebrow { padding-right:40px; }
.dialog-copy { color:var(--muted); line-height:1.5; max-width:410px; }
textarea { display:block; width:100%; min-height:155px; resize:vertical; margin:25px 0 13px; padding:15px; border:1px solid var(--ink); border-radius:15px; background:#fffaf2; color:var(--ink); outline:none; }
textarea:focus { box-shadow:4px 4px 0 var(--lav); }
.form-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; color:var(--muted); font:11px 'DM Sans'; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 100px); opacity:0; transition:.3s; background:var(--ink); color:var(--paper); border-radius:99px; padding:13px 18px; font-size:13px; box-shadow:4px 4px 0 var(--orange); pointer-events:none; }
.toast.show { transform:translate(-50%,0); opacity:1; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.parent-brand { display:inline-flex; align-items:center; min-height:44px; font:11px 'DM Sans',monospace; color:var(--muted); text-decoration:none; }
.feed-status { font-size:12px!important; margin-bottom:0!important; }
.search-label { display:block; font:11px 'DM Sans',monospace; margin-bottom:8px; }
input,select { display:block; width:100%; font:inherit; border:1px solid var(--line); padding:12px; background:#fffaf2; border-radius:12px; color:var(--ink); }
#search { margin-bottom:20px; }
.tab { min-height:44px; padding:8px 2px; }
.tab.active:after { margin:4px auto 0; }
.story-dialog label { display:block; font-size:12px; margin:16px 0 7px; }
.story-dialog textarea { margin-top:0; }
.story-dialog #formStatus { font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.privacy-content { padding:clamp(20px, 5vw, 30px); position:relative; }
.privacy-content p { line-height:1.6; font-size:14px; }
.footer > span { min-width:0; }
.footer > span:last-child { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.footer a { display:inline-flex; align-items:center; min-height:44px; color:inherit; }
.primary-button:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.reaction,.share-story { min-height:44px; }
.share-story { padding:8px; }
:focus-visible { outline:3px solid #5f53b0; outline-offset:4px; }
.toast { width:max-content; max-width:calc(100% - 40px); text-align:center; }
@media (prefers-reduced-motion:reduce) {html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
/* Add columns only when cards retain at least 300px of usable width. */
@media (min-width:700px) { .feed { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:1180px) { .feed { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
/* Keep the opening compact once the headline and supporting copy fit side by side. */
@media (min-width:700px), (min-width:600px) and (max-height:600px) {
  .intro { display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); column-gap:clamp(24px, 4vw, 64px); align-items:start; padding:16px 0 32px; }
  .intro .eyebrow { grid-column:1; grid-row:1; }
  .intro h1 { grid-column:1; grid-row:2 / 5; font-size:clamp(42px, 4.7vw, 64px); margin:12px 0 0; }
  .intro > p:not(.feed-status) { grid-column:2; grid-row:2; margin:12px 0 16px; }
  .intro .primary-button { grid-column:2; grid-row:3; justify-self:start; }
  .intro .feed-status { grid-column:2; grid-row:4; margin-top:12px; }
}
/* Keep the feed in view on short tablet/desktop and zoom-equivalent layouts. */
@media (min-width:600px) and (max-height:600px) {
  .shell { padding-top:16px; padding-bottom:16px; }
  .topbar { padding-bottom:4px; }
  .intro { padding-top:8px; padding-bottom:8px; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:20px; }
  .intro h1 { font-size:clamp(36px, 5vw, 48px); }
  .intro p { margin-top:12px; margin-bottom:16px; }
  #search { margin-bottom:12px; }
  .feed { padding-top:16px; }
}
/* Children must fit their own boxes; do not conceal layout errors with shell clipping. */
.shell > *, .intro > *, .story-card > *, .story-bottom > *, .form-row > * { min-width:0; }
h1, h2, p, button, label, .footer, .eyebrow, .topic { overflow-wrap:anywhere; }
input, select, textarea { min-width:0; max-width:100%; }
#search { max-width:640px; }
@media (max-width:359px) {
  .feed-tabs { column-gap:14px; }
  .form-row .primary-button { width:100%; }
}
.analytics-choice { margin: 24px 0; padding: 18px; border: 1px solid #161616; border-radius: 12px; background: #f0efd6; font-size: 14px; line-height: 1.5; }
.analytics-choice[hidden] { display: none; }
.analytics-choice div { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.analytics-choice button { min-height: 44px; padding: 8px 16px; border: 1px solid #161616; border-radius: 8px; background: white; color: #161616; cursor: pointer; font: inherit; }
.footer button { font: inherit; border: 0; background: none; text-decoration: underline; color: inherit; padding: 6px 0; cursor: pointer; min-height: 44px; }
.linked-story { margin:24px 5px 32px 0; max-width:720px; }
.linked-story[hidden],.receipt-list[hidden] { display:none; }
.linked-heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-bottom:16px; font-size:14px; }
.linked-heading p { flex:1 1 240px; }
.linked-heading button,.empty-feed button,.receipt-list button { min-height:44px; border:1px solid var(--ink); border-radius:12px; background:transparent; color:var(--ink); padding:8px 12px; font:inherit; }
.empty-feed { line-height:1.5; }
.empty-feed button { margin:8px; }
.report-story { min-height:44px; display:inline-flex; align-items:center; flex-basis:100%; color:var(--ink); font:11px 'DM Sans',monospace; }
.receipt-list { margin:0 clamp(20px, 5vw, 32px) 24px; border-top:1px solid var(--line); padding-top:16px; font-size:13px; line-height:1.5; }
.receipt-list h3 { font-family:'Bodoni Moda',Georgia,serif; margin:0 0 8px; }
.receipt-list ul { list-style:none; padding:0; }
.receipt-list li { padding:12px 0; border-top:1px solid var(--line); }
.receipt-list code { display:block; overflow-wrap:anywhere; font:12px 'DM Sans',monospace; margin:8px 0; }
.receipt-actions { display:flex; flex-wrap:wrap; gap:8px; }
.receipt-actions a { display:inline-flex; align-items:center; min-height:44px; color:var(--ink); }
.story-dialog input:disabled,.story-dialog textarea:disabled,.story-dialog select:disabled { opacity:.7; cursor:wait; }
.dialog-copy a,.privacy-content a { color:var(--ink); text-underline-offset:3px; }
.room-welcome { grid-column:1 / -1; min-width:0; }
.welcome-heading { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px 32px; margin-bottom:24px; }
.welcome-heading > div { flex:1 1 340px; min-width:0; }
.welcome-heading h2 { font-size:clamp(28px,3.2vw,42px); margin:10px 0 0; letter-spacing:-.055em; }
.welcome-heading > p { flex:1 1 280px; max-width:50ch; margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.starter-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; }
.starter-card { min-width:0; display:flex; flex-direction:column; align-items:start; padding:24px; border:1px solid var(--ink); border-radius:22px; box-shadow:4px 4px 0 var(--ink); }
.starter-card[data-color="yellow"] { background:var(--lime); }
.starter-card[data-color="orange"] { background:var(--orange); }
.starter-card[data-color="blue"] { background:var(--blue); }
.starter-card h3 { font:600 clamp(25px,2.3vw,34px)/1.12 'Bodoni Moda',Georgia,serif; letter-spacing:-.045em; margin:24px 0 12px; overflow-wrap:anywhere; }
.starter-card p { line-height:1.5; margin:0 0 24px; font-size:15px; }
.starter-card button { margin-top:auto; min-height:44px; max-width:100%; border:1px solid var(--ink); border-radius:99px; padding:10px 16px; font:600 14px 'DM Sans',sans-serif; background:var(--ink); color:var(--paper); text-align:left; }
.starter-card button:hover { background:#383530; }
.starter-card button:disabled { background:transparent; color:var(--ink); cursor:not-allowed; }
.room-guide { display:grid; gap:24px; padding-top:28px; }
.room-guide ol { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.room-guide li { display:flex; align-items:baseline; gap:12px; font-size:14px; line-height:1.5; color:var(--muted); }
.room-guide li span { flex:none; font:500 11px 'DM Sans',monospace; color:var(--ink); }
.format-example { min-width:0; border-top:1px solid var(--line); padding-top:10px; font-size:14px; line-height:1.5; }
.format-example summary { min-height:44px; padding:10px 0; cursor:pointer; font-weight:600; }
.format-example h3 { font:600 22px/1.2 'Bodoni Moda',Georgia,serif; }
.format-example .example-label { font:11px 'DM Sans',monospace; color:var(--muted); }
@media (min-width:700px) { .starter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .starter-card { padding:20px; } .room-guide { grid-template-columns:1fr 1fr; gap:32px; } }

/* After Hours meets Hot Off the Press: ink, acid yellow and editorial paper. */
:root { --ink:#171717; --paper:#f3eddc; --muted:#645f53; --line:#cbc3af; --lime:#e8ff36; --orange:#ff9949; --lav:#f3eddc; --blue:#64d7e7; --violet:#b52320; }
body { background:#171717 url('/spill/assets/after-hours-ink.webp') center 110px / 1536px auto no-repeat; }
.shell { max-width:1600px; background:transparent; padding:0 48px 36px; }
.topbar { position:relative; margin:0 -48px; padding:14px 48px 18px; min-height:116px; background:var(--paper); gap:18px; border-bottom:4px solid #171717; flex-wrap:nowrap; }
.brand { font:900 112px/.9 'Bodoni Moda',Georgia,serif; letter-spacing:-.075em; color:#171717; }
.brand > span { color:var(--violet); }
.masthead-tagline { margin:0 auto 0 12px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; max-width:24ch; line-height:1.7; }
.masthead-nav { display:flex; gap:18px; }
.masthead-nav button { min-height:44px; border:0; padding:6px 0; background:transparent; color:var(--ink); font-size:15px; font-weight:700; }
.masthead-nav button:hover { color:var(--violet); }
.masthead-share { border:1px solid #171717; background:transparent; padding:10px 16px; min-height:44px; font-size:12px; font-weight:700; }
.intro { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:36px; min-height:846px; padding:48px 0 64px; }
.intro-copy { color:var(--paper); }
.intro .eyebrow { color:#d4cebe; font:600 10px 'DM Sans',sans-serif; letter-spacing:.2em; }
.intro h1 { font:900 clamp(76px,12.5vw,192px)/.9 'Bodoni Moda',Georgia,serif; letter-spacing:-.065em; max-width:none; margin:26px 0 24px; color:var(--paper); overflow-wrap:normal; }
.intro h1 > span { color:var(--lime); }
.intro p.intro-description { color:var(--paper); font-size:20px; line-height:1.5; max-width:30ch; margin:0 0 32px; }
.intro-actions { display:flex; flex-direction:column; align-items:start; gap:12px; }
.intro-actions > button { width:420px; max-width:85%; min-height:68px; font-size:20px; }
.primary-button { background:var(--lime); color:#171717; box-shadow:none; padding:16px 24px; font-weight:700; }
.primary-button:hover { background:#d7ec25; transform:translateY(-2px); }
.secondary-button { display:inline-flex; justify-content:center; align-items:center; min-height:50px; border:1px solid #f3eddc88; padding:14px 20px; border-radius:99px; color:var(--paper); background:transparent; gap:10px; font-weight:600; }
.secondary-button:hover { background:#f3eddc12; }
.intro .feed-status { color:#c4bfaf; max-width:45ch; font-size:11px!important; line-height:1.6; margin:18px 0 0; }
.intro-signoff { display:block; max-width:85%; width:280px; height:auto; margin:28px 0 0; }
.hero-feature { position:relative; min-width:0; padding:112px 52px 56px; align-self:start; min-height:760px; }
.confession-paper { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
#heroStory { position:relative; }
.featured-disclosure { font:700 11px 'DM Sans',sans-serif!important; letter-spacing:.12em; text-transform:uppercase; color:#655e51!important; margin:0 0 16px!important; }
#heroStory .story-card { padding:0; min-height:460px; border:0; border-radius:0; box-shadow:none; background:transparent; color:#171717; transform:none; }
#heroStory .story-card::before,#heroStory .story-card::after { display:none; }
#heroStory .story-number { display:none; }
#heroStory .topic { background:var(--category-bg); font-size:14px; }
#heroStory .story-title { font-size:clamp(30px,3.7vw,56px); line-height:1.08; letter-spacing:-.045em; margin:26px 0 20px; max-width:19ch; }
#heroStory .story-body { color:#2d2a24; font-size:20px; line-height:1.55; margin:0 0 30px; }
#heroStory .story-bottom { margin-top:auto; }
#heroStory .story-bottom button { flex:1 1 130px; padding:12px 16px; min-height:54px; text-align:center; font-size:16px; text-decoration:none; border:1px solid #171717; border-radius:5px; }
#heroStory .reaction { background:var(--lime); }
#heroStory .reaction.selected { background:#171717; color:var(--paper); }
#heroStory .share-story[data-share] { background:#171717; color:var(--paper); }
#heroStory .story-bottom a { font-size:10px; flex-basis:100%; }
.hero-cue { position:relative; margin:20px 0 0!important; font-size:10px!important; color:#655e51!important; text-align:center; }
.hero-cue button { border:0; background:transparent; color:#171717; font:700 11px 'DM Sans',sans-serif; padding:8px; min-height:44px; text-decoration:underline; text-underline-offset:3px; }
.reading-room { scroll-margin-top:24px; color:var(--paper); }
.room-heading { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:20px; padding-top:30px; border-top:1px solid #f3eddc55; margin-bottom:20px; }
.room-heading .eyebrow { color:#c4bfaf; }
.room-heading h2 { font:900 clamp(36px,4vw,60px)/1 'Bodoni Moda',Georgia,serif; margin:8px 0 0; letter-spacing:-.05em; }
.room-heading h2 span { color:var(--lime); }
.view-switch { display:flex; padding:4px; gap:4px; background:#2c2c29; border-radius:99px; }
.view-switch button { border:0; border-radius:99px; background:transparent; color:#e1dbcb; padding:10px 16px; min-height:44px; font-size:13px; white-space:nowrap; }
.view-switch button[aria-pressed="true"] { background:var(--lime); color:#171717; font-weight:700; }
.collection-note,.corner-label,.feed-pagination p { color:#c4bfaf; }
.search-label { color:#e1dbcb; }
#search,.corner-label select { background:#262623; border:1px solid #6a685f; color:var(--paper); border-radius:4px; }
#search::placeholder { color:#b4b0a4; }
.feed-tabs { gap:8px; border-color:#f3eddc40; padding:12px 0; }
.tab { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid #f3eddc44; border-radius:99px; color:#e1dbcb; font-size:12px; }
.tab span { color:inherit; font-size:9px; }
.tab.active { background:var(--category-bg); color:#171717; border-color:var(--category-bg); }
.tab.active:after { display:none; }
.category-icon { width:18px; height:18px; flex:none; }
.feed { gap:22px; padding:28px 0 38px; }
.story-card { color:#171717; border:0; border-radius:8px; background:var(--category-bg,var(--paper)); box-shadow:none; min-height:370px; }
.story-card:hover { transform:translateY(-4px); }
.story-meta { color:#171717; font-size:10px; letter-spacing:0; text-transform:none; }
.topic { display:inline-flex; align-items:center; gap:7px; border:1px solid #17171733; background:#ffffff60; padding:7px 10px; font:700 11px 'DM Sans',sans-serif; border-radius:99px; }
.story-number { opacity:.7; font-size:10px; }
.story-title { font:800 clamp(28px,2.5vw,38px)/1.1 'Bodoni Moda',Georgia,serif; letter-spacing:-.045em; margin:26px 0 18px; }
.story-body { font-size:15px; line-height:1.65; color:#24211b; }
.story-bottom { border-top:1px solid #17171733; padding-top:16px; gap:6px 12px; }
.reaction { display:inline-flex; align-items:center; gap:6px; border:1px solid #17171755; color:#171717; background:#ffffff45; font:600 12px 'DM Sans',sans-serif; }
.reaction:hover,.reaction.selected { background:#171717; color:var(--paper); }
.share-story { color:#171717; font:600 12px 'DM Sans',sans-serif; text-underline-offset:3px; }
.report-story { color:#3b362c; font-size:10px; }
.footer { border-color:#f3eddc44; color:#c4bfaf; font-size:9px; }
.story-dialog { background:var(--paper); border-radius:8px; color:#171717; border-color:#171717; box-shadow:0 24px 80px #0008; }
.story-dialog::backdrop { background:#000b; }
.story-dialog .primary-button { background:#171717; color:var(--paper); }
.story-dialog .eyebrow { color:#645f53; }
.toast { z-index:10; background:var(--lime); color:#171717; box-shadow:0 8px 24px #0005; }
.analytics-choice { background:var(--paper); }
.welcome-room .welcome-heading > p,.welcome-room .room-guide li,.welcome-room .format-example .example-label { color:#c4bfaf; }
.welcome-room .room-guide li span { color:var(--lime); }
.welcome-room .starter-card { color:#171717; }
:focus-visible { outline:3px solid #df302b; outline-offset:4px; }
.reading-room :focus-visible,.intro :focus-visible { outline-color:var(--lime); }
.reading-room .story-card :focus-visible,#heroStory :focus-visible { outline-color:#b52320; }
.reading-room .linked-heading button,.reading-room .empty-feed button { border-color:currentColor; color:inherit; }
.swipe-reader[hidden],.feed[hidden],[hidden] { display:none!important; }
.swipe-reader { max-width:780px; margin:24px auto 36px; scroll-margin-top:24px; }
.swipe-content { position:relative; --story-duration:180ms; --story-easing:cubic-bezier(.22,1,.36,1); --story-distance:36px; }
.reader-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:2; display:grid; place-items:center; width:48px; height:48px; min-height:48px; padding:0; border:1px solid #f3eddc88; border-radius:50%; background:#171717ee; color:#f3eddc; font-size:24px; box-shadow:0 3px 12px #0003; }
#previousStory { left:0; }
#nextStory { right:0; }
.reader-arrow:hover:not(:disabled) { background:var(--lime); color:#171717; border-color:var(--lime); }
.reader-arrow:disabled { opacity:.25; cursor:default; }
.reader-fiction { font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.reader-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.reader-header button { min-height:48px; padding:10px 16px; border-radius:99px; border:1px solid currentColor; background:transparent; color:inherit; }
.reader-header span { font:11px 'DM Sans',monospace; }
.story-bottom .category-icon { width:20px; height:20px; }
.swipe-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.swipe-toolbar label { display:flex; align-items:center; gap:10px; font-size:11px; color:#c4bfaf; }
.swipe-toolbar select { width:auto; padding:10px 12px; min-height:44px; font-size:12px; }
.swipe-toolbar p { font-size:11px; color:#c4bfaf; margin:0; }
.swipe-stage { border-radius:32px; touch-action:pan-y pinch-zoom; }
.swipe-reader[data-axis="vertical"] .swipe-stage { touch-action:pinch-zoom; }
.swipe-stage:empty { display:none; }
.swipe-stage .story-card { min-height:440px; padding:clamp(24px,5vw,48px) 60px; border-radius:32px; }
.swipe-stage .story-card:hover { transform:none; box-shadow:none; }
.swipe-stage .story-title { font-size:clamp(30px,4vw,48px); max-width:24ch; }
.swipe-stage .story-body { font-size:clamp(16px,2vw,19px); max-width:52ch; line-height:1.65; }
.swipe-stage.story-enter .story-card { animation:spill-arrive var(--story-duration) var(--story-easing); }
.swipe-navigation { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px; }
.swipe-navigation p { font:11px 'DM Sans',monospace; color:#c4bfaf; text-align:center; }
.swipe-track { background:#e5dcee; height:3px; border-radius:99px; margin-top:16px; overflow:hidden; }
.swipe-track span { display:block; background:var(--violet); height:100%; transition:width .25s; }
.swipe-end { text-align:center; font-size:12px; color:#c4bfaf; line-height:1.5; margin:18px 0 0; }
@media(max-width:640px) {
  html.spill-reader-open,html.spill-reader-open body { overflow:hidden; overscroll-behavior:none; }
  .spill-reader-open .swipe-reader { position:fixed; inset:0; z-index:80; margin:0; max-width:none; height:100vh; height:100dvh; display:flex; flex-direction:column; gap:0; padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); background:#161616; color:#fff; overflow:hidden; }
  .spill-reader-open .reader-header { flex:none; margin:0 0 10px; }
  .spill-reader-open .reader-header button { min-height:44px; padding:8px 12px; border-color:#ffffff55; font-size:12px; }
  .spill-reader-open .reader-header span { display:none; }
  .spill-reader-open .swipe-toolbar { flex:none; margin:0 0 10px; gap:4px; }
  .spill-reader-open .swipe-toolbar label { position:absolute; top:max(12px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right)); font-size:0; gap:0; }
  .spill-reader-open .swipe-toolbar select { width:140px; min-height:44px; border:1px solid #ffffff55; background:#242424; color:#fff; padding:8px; font-size:12px; }
  .spill-reader-open .swipe-toolbar p { width:100%; color:#c3c3c3; font-size:10px; }
  .spill-reader-open #swipeNotice { flex:none; max-height:20vh; overflow:auto; font-size:12px; }
  .spill-reader-open #swipeNotice .empty-feed { margin:0; color:#eee; background:#242424; padding:12px; }
  .spill-reader-open .swipe-content { flex:1; min-height:0; }
  .spill-reader-open .swipe-stage { height:100%; min-height:0; border-radius:0; }
  .spill-reader-open .swipe-stage .story-card { height:100%; min-height:0; padding:20px 0 0; border:0; border-radius:0; background:transparent; color:#fff; display:flex; flex-direction:column; gap:18px; }
  .spill-reader-open .story-card::before,.spill-reader-open .story-card::after { display:none; }
  .spill-reader-open .story-meta { flex:none; margin:0; touch-action:pinch-zoom; }
  .spill-reader-open .topic { background:var(--category-bg); color:var(--category-accent); }
  .spill-reader-open .story-number { color:#bcbcbc; }
  .spill-reader-open .reader-fiction { color:#c4bfaf; font-size:9px; }
  .spill-reader-open .story-copy { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#f3eddc66 transparent; padding:4px 52px 8px; }
  .spill-reader-open .story-title { font-size:clamp(27px,8vw,40px); line-height:1.12; margin:0 0 20px; color:#fff; }
  .spill-reader-open .story-body { font-size:17px; line-height:1.55; color:#eee; margin:0; }
  .spill-reader-open .swipe-stage.has-long-story { touch-action:pan-y pinch-zoom; }
  .spill-reader-open .story-bottom { flex:none; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 0 0; margin:0; border-top:1px solid #ffffff33; }
  .spill-reader-open .story-bottom button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:12px 8px; border:1px solid #ffffff88; border-radius:12px; color:#fff; background:#242424; font-size:14px; text-decoration:none; }
  .spill-reader-open .story-bottom .reaction.selected { background:#fff; color:#161616; border-color:#fff; }
  .spill-reader-open .story-bottom a { min-height:32px; padding:4px 0; font-size:11px; color:#ddd; }
  .spill-reader-open .swipe-navigation { flex:none; margin-top:10px; }
  .spill-reader-open .swipe-navigation p { color:#ddd; }
  .spill-reader-open .swipe-track { flex:none; margin-top:6px; background:#444; }
  .spill-reader-open .swipe-track span { background:#fff; }
  .spill-reader-open .swipe-end { flex:none; margin:8px 0 0; font-size:10px; color:#ccc; }
  .spill-reader-open .toast { z-index:90; bottom:max(20px,env(safe-area-inset-bottom)); }
}
.welcome-room { margin-top:18px; padding:0 16px; border:1px solid var(--line); border-radius:20px; background:#262623; }
.welcome-room > summary { cursor:pointer; min-height:44px; padding:14px 0; color:#f3eddc; font-size:12px; }
.welcome-room .room-welcome { padding:14px 0 20px; }
.welcome-room .starter-card { box-shadow:none; border-color:#30234720; }
@keyframes spill-arrive { from { opacity:.65; transform:translate3d(calc(var(--enter-x,0) * var(--story-distance)),calc(var(--enter-y,0) * var(--story-distance)),0); } to { opacity:1; transform:translate3d(0,0,0); } }
@media(max-width:1100px) {
  .shell { padding-inline:32px; }
  .topbar { margin-inline:-32px; padding-inline:32px; }
  .masthead-nav { gap:12px; }
  .masthead-tagline { font-size:9px; }
  .intro { gap:24px; min-height:740px; }
  .hero-feature { padding:100px 36px 44px; min-height:630px; }
  #heroStory .story-body { font-size:14px; }
}
@media(max-width:800px) {
  .topbar { flex-wrap:wrap; gap:8px 18px; }
  .brand { font-size:62px; }
  .masthead-nav { margin-left:auto; }
  .masthead-tagline { display:none; }
  .masthead-share { font-size:11px; }
  .intro { gap:20px; }
  .intro h1 { font-size:clamp(70px,10.5vw,90px); }
  .intro p.intro-description { font-size:17px; }
  .intro-actions { gap:8px; }
  .intro-actions > button { width:auto; max-width:100%; min-height:50px; font-size:12px; }
  .primary-button,.secondary-button { padding:13px 16px; font-size:12px; }
  .hero-feature { padding:90px 30px 36px; }
  #heroStory .story-title { font-size:30px; }
}
@media(max-width:640px) {
  body { background-size:auto 1200px; background-position:50% 80px; }
  .shell { padding:0 20px 24px; }
  .topbar { margin-inline:-20px; padding:14px 20px; min-height:90px; flex-wrap:nowrap; }
  .brand { font-size:54px; }
  .masthead-nav { display:none; }
  .masthead-share { margin-left:auto; padding:8px 12px; font-size:10px; max-width:150px; }
  .intro { grid-template-columns:1fr; padding:40px 0; gap:22px; min-height:0; }
  .intro h1 { font-size:clamp(80px,21vw,130px); margin:20px 0; }
  .intro p.intro-description { font-size:18px; }
  .desktop-break { display:none; }
  .intro .feed-status { font-size:10px!important; }
  .intro-signoff { width:260px; margin-top:26px; }
  .hero-feature { width:100%; max-width:500px; justify-self:center; padding:92px 30px 32px; min-height:570px; }
  #heroStory .story-card { min-height:380px; }
  #heroStory .story-title { font-size:34px; }
  #heroStory .story-body { font-size:15px; }
  .room-heading { align-items:center; gap:16px; }
  .room-heading .view-switch { width:100%; }
  .view-switch button { flex:1; }
  .collection-note { font-size:11px; }
  .story-card { min-height:320px; padding:24px; }
  .swipe-toolbar { gap:10px; }
  .swipe-stage .story-card { min-height:390px; padding:26px 60px; }
  .swipe-stage .story-title { font-size:32px; }
  .spill-reader-open .swipe-reader { background:#171717 url('/spill/assets/after-hours-ink.webp') center top / auto 1100px no-repeat; color:var(--paper); }
  .spill-reader-open .story-title { font-family:'Bodoni Moda',Georgia,serif; color:var(--paper); font-weight:800; font-size:clamp(30px,9vw,44px); line-height:1.14; }
  .spill-reader-open .story-body { color:var(--paper); }
  .spill-reader-open .story-bottom .reaction { background:var(--lime); color:#171717; border-color:var(--lime); }
  .spill-reader-open .story-bottom .reaction.selected { background:var(--paper); color:#171717; border-color:var(--paper); }
  .spill-reader-open .swipe-track span { background:var(--lime); }
  .spill-reader-open .topic { color:#171717; }
  .spill-reader-open .reader-header button { color:var(--paper); }
}
@media(max-width:359px) {
  .shell { padding-inline:16px; }
  .topbar { margin-inline:-16px; padding-inline:16px; }
  .brand { font-size:46px; }
  .hero-feature { padding-inline:26px; }
  #heroStory .story-title { font-size:29px; }
}
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }
:where(.collection-links){display:flex;flex-wrap:wrap;gap:12px 24px;margin:16px 0 24px;font-size:.875rem;font-weight:700}