/* Blogovo split stage. Paper left (or top on a phone), ink right (or below). */
:root {
  --sc-canvas: #15171C;
  --sc-surface: #2C3038;
  --sc-ink: #F5F5F1;
  --sc-ink-soft: #B9BDC6;
  --sc-accent: #FF7A5C;
  --sc-accent-ink: #15171C;
  --sc-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sc-font-text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --paper: #F5F5F1;
  --ink: #15171C;
  --rust: #B42F17;
  --cta: #D63A1F;
  --seam: 50%;
  --hero: clamp(2.5rem, min(5vw, 9.6vh), 5.2rem);
  --h2: clamp(2.1rem, min(3.7vw, 7.2vh), 3.8rem);
  --pad: clamp(1.75rem, 4.4vw, 4rem);
}

html { background: var(--ink); }
body { background: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ------------------------------------------------------------ the grounds */
.world { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--ink); }
.ground { position: absolute; inset: 0; overflow: hidden; }
.ground i { position: absolute; inset: -3%; background-size: cover; background-position: center; will-change: transform; }
.ground--ink i { background-image: url(assets/ink.webp); background-color: var(--ink); }
.ground--paper i { background-image: url(assets/paper.webp); background-color: var(--paper); }
.live .ground--paper { clip-path: inset(0 calc(100% - var(--seam)) 0 0); }
html:not(.live) .world { display: none; }

/* ------------------------------------------------------------ type + copy */
.pane--paper { --sc-ink: #15171C; --sc-ink-soft: #4B505B; --sc-accent: #B42F17; --sc-accent-ink: #FFFFFF; color: #15171C; }
.pane--ink { --sc-ink: #F5F5F1; --sc-ink-soft: #B9BDC6; --sc-accent: #FF7A5C; --sc-accent-ink: #15171C; color: #F5F5F1; }
.hero-h, .h2, .close-h, .doubt, .rewrite p, .flip, .job { font-family: var(--sc-font-display); font-weight: 400; }
.hero-h { margin: 0; font-size: var(--hero); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.hero-h em { display: block; margin-top: .14em; color: var(--rust); font-style: italic; }
.h2 { margin: 0; font-size: var(--h2); line-height: 1.03; letter-spacing: -0.015em; text-wrap: balance; }
.close-h { margin: 0; font-size: clamp(2.6rem, min(6vw, 11vh), 6.2rem); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.lede { margin: 1.1em 0 0; max-width: 34em; font-size: clamp(1.02rem, .9rem + .42vw, 1.28rem); line-height: 1.45; color: var(--sc-ink); text-wrap: pretty; }
.body { margin: .85em 0 0; max-width: 34em; font-size: clamp(.98rem, .92rem + .26vw, 1.14rem); line-height: 1.5; color: var(--sc-ink); text-wrap: pretty; }
.small { margin: .8em 0 0; font-size: .88rem; line-height: 1.42; color: var(--sc-ink-soft); text-wrap: pretty; }
.label { margin: 0; font-family: var(--sc-font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft); }

.cta-row { margin: 1.5em 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .7em 1.1em; }
.cta {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 1.7em; border-radius: 999px;
  background: var(--cta); color: #fff; font-weight: 600; font-size: 1.06rem; text-decoration: none;
  box-shadow: 0 2px 3px rgb(90 25 10 / .3), 0 12px 22px -8px rgb(150 40 15 / .55);
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.cta:hover { background: #c23219; }
.cta:active { transform: translateY(1px) scale(.98); }
.cta--big { min-height: 60px; font-size: 1.18rem; padding: 0 2em; }
.micro { font-size: .92rem; color: var(--sc-ink-soft); }

/* Hero, ink side */
.ink-h { margin: 0; font-family: var(--sc-font-text); font-weight: 500; font-size: clamp(1.25rem, 1rem + .85vw, 1.75rem); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.jobs { margin: 1em 0 0; padding: 0; list-style: none; font-size: clamp(.92rem, .86rem + .24vw, 1.06rem); line-height: 1.3; color: var(--sc-ink-soft); }
.jobs li { padding: .5em 0; border-top: 1px solid rgb(245 245 241 / .17); }

/* A chore, set big on the ink side, struck through as the seam pushes in */
.job { margin: 0; font-size: clamp(1.75rem, 1.1rem + 2vw, 3rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--sc-ink); text-wrap: balance; }
.job--sm { font-size: clamp(1.45rem, 1rem + 1.1vw, 2.15rem); }
.job-note { margin: .8em 0 0; font-size: .92rem; line-height: 1.4; color: var(--sc-ink-soft); }
.label--ink { margin-bottom: .8em; }
.strk {
  background: linear-gradient(var(--sc-accent), var(--sc-accent)) no-repeat 0 58% / calc(var(--k, 0) * 100%) .075em;
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
}

/* ---------------------------------------------------------------- reads */
.reads-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
#reads .h2 { font-size: clamp(2.4rem, min(5.2vw, 10vh), 5.2rem); }
.notes { margin: 0; padding: 1.2em 1.35em; background: #FFFEFA; border-radius: 6px; rotate: 1.2deg;
  box-shadow: 0 1px 2px rgb(60 50 40 / .14), 0 18px 34px -14px rgb(60 50 40 / .32); }
.notes-head { padding-bottom: .7em; }
.note { padding: .58em 0; border-top: 1px solid rgb(21 23 28 / .13); }
.note dt { font-family: var(--sc-font-mono); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--rust); }
.note dd { margin: .15em 0 0; font-family: var(--sc-font-display); font-size: clamp(1.08rem, .9rem + .5vw, 1.34rem); line-height: 1.2; }

/* ----------------------------------------------------------------- days */
.week { margin-top: 1.3em; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.day {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; min-width: 0; height: clamp(5rem, 15vh, 8.4rem); padding: .6em .65em; border-radius: 6px; cursor: pointer; text-align: left;
  background: rgb(255 255 255 / .55); color: var(--ink); border: 1px solid rgb(21 23 28 / .32);
  transition: background-color 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.day b { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.15rem, 1.8vw, 1.7rem); line-height: 1; }
.day-slot { font-size: .72rem; line-height: 1.15; opacity: 0; transition: opacity 140ms var(--sc-ease-out); }
.day[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.day[aria-pressed="true"] .day-slot { opacity: 1; }
.say { margin: .7em 0 0; font-size: 1rem; line-height: 1.35; min-height: 1.35em; color: var(--sc-ink-soft); }
.say strong { color: var(--ink); font-weight: 600; }
.writers { margin-top: 1.1em; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.writer {
  min-width: 0; min-height: 44px; padding: 0 .2em; border-radius: 6px; cursor: pointer; font-family: var(--sc-font-display); font-size: 1.22rem;
  background: rgb(255 255 255 / .55); color: var(--ink); border: 1px solid rgb(21 23 28 / .32);
  transition: background-color 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.writer[aria-pressed="true"] { background: var(--rust); color: #fff; border-color: var(--rust); }
.day:active, .writer:active, .look:active, .chat-btn:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .day[aria-pressed="false"]:hover, .writer[aria-pressed="false"]:hover, .look[aria-pressed="false"]:hover { background: #fff; }
}

/* ---------------------------------------------------------------- proof */
.doubt { margin: 0; font-size: clamp(1.7rem, min(2.7vw, 5.2vh), 2.6rem); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.draft-text { margin: 0; font-size: clamp(1.02rem, min(1.72vw, 3vh), 1.6rem); line-height: 1.5; color: var(--sc-ink); }
.flag { margin: 0 0 1em; min-height: 1.4em; font-family: var(--sc-font-mono); font-size: .78rem; letter-spacing: .01em; color: var(--sc-ink-soft); display: flex; flex-wrap: wrap; gap: .1em 1em; }
.flag-k { text-transform: uppercase; letter-spacing: .06em; }
.flag-v { color: var(--sc-accent); }
.tell { transition: opacity 160ms var(--sc-ease-out); }
.tell.hit { opacity: .5; }
.draft { position: relative; }
.strikes { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.strikes path { fill: none; stroke: var(--sc-accent); stroke-width: 2.5; stroke-linecap: round; }
.rewrite p { margin: 0; font-size: clamp(1.4rem, min(2.5vw, 4.5vh), 2.45rem); line-height: 1.16; letter-spacing: -0.008em; text-wrap: pretty; }
.meter-n { margin: 0; font-family: var(--sc-font-display); font-size: clamp(3.6rem, min(7.4vw, 14vh), 7.4rem); line-height: .9; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.meter.clear .meter-n { color: var(--sc-ink); }
.meter-l { margin: .35em 0 0; font-family: var(--sc-font-mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sc-ink-soft); }
.meter-bar { position: relative; margin-top: .8em; height: 6px; background: rgb(245 245 241 / .18); border-radius: 3px; }
.meter-fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--sc-accent); border-radius: 3px; transform-origin: 0 50%; transform: scaleX(.69); }
.meter-line { position: absolute; left: 35%; top: -5px; bottom: -5px; width: 2px; background: var(--sc-ink); }
.meter-t { margin: .8em 0 0; font-size: .86rem; line-height: 1.38; color: var(--sc-ink); }
.meter-c { margin: .7em 0 0; font-size: .78rem; line-height: 1.38; color: var(--sc-ink-soft); }

/* ----------------------------------------------------------------- look */
.look-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.looks { margin-top: 1.2em; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.look {
  min-height: 56px; padding: .45em .8em; text-align: left; cursor: pointer; border-radius: 6px; font-size: .84rem; line-height: 1.25; color: var(--ink);
  background: rgb(255 255 255 / .55); border: 1px solid rgb(21 23 28 / .32);
  transition: background-color 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.look b { display: block; font-weight: 600; font-size: .95rem; }
.look[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.site {
  --s-bg: #FBF3EA; --s-ink: #2A1E16; --s-soft: #6F5F52; --s-accent: #B5401F; --s-head: #FBF3EA; --s-headink: #2A1E16; --s-rad: 3px;
  --s-display: "Fraunces", Georgia, serif; --s-text: "Work Sans", system-ui, sans-serif; --s-weight: 600;
  background: var(--s-bg); color: var(--s-ink); font-family: var(--s-text); border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 4px rgb(40 30 20 / .16), 0 26px 50px -18px rgb(40 30 20 / .42);
}
.site[data-look="north"] { --s-bg: #FFFFFF; --s-ink: #181A1F; --s-soft: #565B66; --s-accent: #C2470A; --s-head: #181A1F; --s-headink: #FFFFFF; --s-display: "Archivo", system-ui, sans-serif; --s-text: "Archivo", system-ui, sans-serif; --s-weight: 800; }
.site[data-look="ledgerly"] { --s-bg: #F7FAFD; --s-ink: #17293D; --s-soft: #4D6074; --s-accent: #2A6FB0; --s-head: #F7FAFD; --s-headink: #17293D; --s-display: "Libre Baskerville", Georgia, serif; --s-text: "Work Sans", system-ui, sans-serif; --s-weight: 700; }
.site[data-look="kin"] { --s-bg: #FAF6F4; --s-ink: #33262B; --s-soft: #6C5A61; --s-accent: #8A4A63; --s-head: #FAF6F4; --s-headink: #33262B; --s-display: "DM Serif Display", Georgia, serif; --s-text: "Work Sans", system-ui, sans-serif; --s-weight: 400; --s-rad: 22px; }
.site-bar { display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: #ECECE6; color: #2C3038; font-family: var(--sc-font-mono); font-size: .72rem; }
.site-bar i { width: 8px; height: 8px; border-radius: 50%; background: #C9CAC3; flex: none; }
.site-bar span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.site-head { display: flex; align-items: center; gap: .55em; padding: .75em 1.25em; background: var(--s-head); color: var(--s-headink); border-bottom: 1px solid rgb(0 0 0 / .1); font-size: .82rem; }
.site[data-look="kin"] .site-head { justify-content: center; flex-wrap: wrap; }
.site[data-look="kin"] .site-menu { margin-left: 0; width: 100%; text-align: center; }
.site-logo { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--s-accent); color: #fff; font-weight: 600; font-size: .86em; flex: none; }
.site-name { font-family: var(--s-display); font-weight: var(--s-weight); font-size: 1.14em; white-space: nowrap; }
.site-menu { margin-left: auto; font-size: .88em; opacity: .86; word-spacing: .6em; white-space: nowrap; }
.site-body { padding: 1.15em 1.25em 1.3em; }
.site[data-look="kin"] .site-body { text-align: center; }
.site-title { margin: 0; font-family: var(--s-display); font-weight: var(--s-weight); font-size: clamp(1.25rem, 1rem + .9vw, 1.72rem); line-height: 1.16; letter-spacing: -0.01em; color: var(--s-ink); text-wrap: balance; }
.site-by { margin: .55em 0 0; font-size: .8rem; color: var(--s-soft); }
.site-text { margin: .6em 0 0; font-size: .9rem; line-height: 1.45; color: var(--s-ink); }
.site-btn { display: inline-block; margin-top: .85em; padding: .5em 1em; border-radius: var(--s-rad); background: var(--s-accent); color: #fff; font-size: .82rem; font-weight: 600; }

.site-wrap [data-sc-reveal] { padding: 2.2rem; margin: -2.2rem; pointer-events: none; }
.site-tilt { pointer-events: auto; }

/* --------------------------------------------------------------- extras */
.extras-grid { display: block; }
.flip { position: relative; margin: .18em 0 0; height: 1.14em; font-size: clamp(2.6rem, min(7vw, 12.4vh), 6.6rem); line-height: 1.14; letter-spacing: -0.015em; color: var(--rust); font-style: italic; }
.flip span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transition: opacity 180ms var(--sc-ease-out); }
.flip span.on { opacity: 1; }
.flip span:lang(ja), .flip span:lang(hy) { font-style: normal; font-family: var(--sc-font-text); font-size: .86em; }
.ledger { margin: clamp(1rem, 3vh, 2rem) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1rem, 2.4vw, 2.2rem); }
.ledger > div { padding: .62em 0; border-top: 1px solid rgb(21 23 28 / .24); }
.ledger dt { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.ledger dd { margin: .1em 0 0; font-size: .9rem; line-height: 1.34; color: var(--sc-ink-soft); }

/* -------------------------------------------------------------- approve */
.approve-grid { display: grid; grid-template-columns: minmax(20rem, 25rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.plain { margin: 1em 0 0; padding: 0; list-style: none; max-width: 32em; }
.plain li { padding: .55em 0; border-top: 1px solid rgb(21 23 28 / .2); font-size: 1rem; line-height: 1.38; }
.chat { order: -1; rotate: -1.2deg; padding: 1em; background: #E9EBE4; border-radius: 22px; box-shadow: 0 2px 4px rgb(40 30 20 / .16), 0 26px 50px -18px rgb(40 30 20 / .42); color: var(--ink); }
.chat-who { display: flex; align-items: center; gap: .5em; margin: 0 0 .7em; font-size: .86rem; color: #3D424C; }
.chat-who b { color: var(--ink); font-weight: 600; }
.chat-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 600; font-size: .78rem; }
.bubble { margin: 0; padding: .8em .9em; background: #FFFFFF; border-radius: 12px; font-size: .9rem; line-height: 1.34; }
.bubble[hidden] { display: none; }
.bubble-k { margin: 0; font-family: var(--sc-font-mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--rust); }
.bubble-t { margin: .3em 0 0; font-family: var(--sc-font-display); font-size: 1.24rem; line-height: 1.12; }
.bubble-m { margin: .35em 0 0; font-size: .8rem; color: #4B505B; }
.bubble-a { display: flex; gap: 6px; margin-top: .7em; }
.chat-btn { flex: 1; min-height: 44px; padding: 0 .6em; border-radius: 8px; border: 1px solid rgb(21 23 28 / .4); background: #fff; color: var(--ink); font-weight: 600; font-size: .86rem; cursor: pointer; transition: transform 120ms var(--sc-ease-out), background-color 120ms var(--sc-ease-out); }
.chat-btn--yes { background: var(--cta); border-color: var(--cta); color: #fff; }
.chat-btn[disabled] { opacity: .5; cursor: default; }
.bubble--me { margin: .5em 0 0 18%; background: #DCE8D8; }
.bubble--bot, .bubble--live { margin-top: .5em; }
.bubble--live b { font-weight: 600; color: #1D7A4C; }
.bubble--live span { word-break: break-all; }

/* ---------------------------------------------------------------- close */
.close-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.field { margin-top: 1.2em; max-width: 30rem; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35em; }
.field-row { position: relative; display: flex; align-items: center; min-height: 52px; padding: 0 .9em; background: #fff; border: 1.5px solid var(--ink); border-radius: 8px; font-family: var(--sc-font-mono); font-size: .98rem; }
.field-row:focus-within { outline: 2px solid var(--rust); outline-offset: 2px; }
.field-pre { color: #4B505B; }
.field-ghost { position: absolute; left: 3.6em; color: #6B707A; pointer-events: none; }
.field-row.has .field-ghost { display: none; }
.field input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; outline: 0; font: inherit; color: var(--ink); }
.close-post { position: relative; }
.site--close { rotate: -1.4deg; }
.site--close .site-text { max-width: 74%; }
.loaf--close { position: absolute; right: -6%; bottom: -36%; width: clamp(7rem, 13vw, 12rem); height: auto; pointer-events: none; filter: drop-shadow(8px 14px 12px rgb(60 50 40 / .4)); }
.plans-wrap { margin-top: clamp(1.25rem, 3.4vh, 2.5rem); }
.live #close .plans-wrap { margin-top: auto; }
.plans-h { margin: 0 0 .6em; font-size: .98rem; font-weight: 500; }
.plans { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.plans li { position: relative; padding: .6em 1em .5em 0; font-size: .86rem; line-height: 1.3; }
.plans li + li { padding-left: 1em; border-left: 1px solid rgb(21 23 28 / .2); }
.plans b { font-weight: 600; font-size: .98rem; }
.plans .price { color: var(--sc-ink-soft); margin-left: .3em; }
.plan-l { display: block; margin-top: .2em; color: var(--sc-ink); }
.plans li.fit::before { content: ""; position: absolute; left: 0; right: 0; top: -1.5px; height: 4px; background: var(--rust); }
.plans li.fit b { color: var(--rust); }
.foot { margin-top: .9em; display: flex; flex-wrap: wrap; gap: .1em 1.4em; font-size: .78rem; color: var(--sc-ink-soft); }

/* ================================================== the stage, in both modes */
.mark { position: absolute; left: var(--pad); top: 18px; z-index: 44; font-family: var(--sc-font-display); font-size: 1.6rem; line-height: 1; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.tab--cta, .tab--left, .pencil { display: none; }
.pane { min-width: 0; }
.scene { pointer-events: none; }
.sheet, .loaf { max-width: none; }

/* Shared layout of a stage without scroll control: reduced motion and no script. */
html:not(.live) body { background: var(--ink); }
html:not(.live) .beat { height: auto !important; }
html:not(.live) .stage { position: relative !important; height: auto !important; display: grid; grid-template-columns: calc(var(--b) * 1%) minmax(0, 1fr); overflow: clip; }
html:not(.live) .pane--paper { background: var(--paper) url(assets/paper.webp) center / cover; }
html:not(.live) .pane--ink { background: var(--ink) url(assets/ink.webp) center / cover; }
html:not(.live) .pane { padding: clamp(3.6rem, 9vh, 6rem) var(--pad) clamp(5.5rem, 12vh, 7rem); display: flex; flex-direction: column; justify-content: center; }
html:not(.live) [data-sc-cue] { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
html:not(.live) [data-sc-reveal] { clip-path: none !important; }
html:not(.live) .strk { --k: 1 !important; }
html:not(.live) #hook .stage { min-height: 100svh; }
html:not(.live) .seam { position: absolute; left: 0; right: 0; top: 0; height: 100svh; pointer-events: none; z-index: 6; }
html:not(.live) .pencil { display: block; position: absolute; left: 54%; top: 14px; width: auto; max-width: none; height: calc(100svh - 104px); translate: -50% 0; filter: drop-shadow(5px 8px 7px rgb(10 10 14 / .42)); }
html:not(.live) .scene { position: absolute; inset: 0; }
html:not(.live) .col--last { display: none; }
html:not(.live) #close .pane--ink { display: none; }
html:not(.live) #proof { --b: 50 !important; }
html:not(.live) #proof .rewrite { margin-top: 1.4em; }
html:not(.live) #proof .tell { text-decoration: line-through; text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; opacity: .72; }
html:not(.live) #proof .meter { margin-top: 1.6em; }
html:not(.live) .flip { height: auto; font-size: clamp(1.25rem, 2.2vw, 1.9rem); }
html:not(.live) .flip span { position: static; display: inline; opacity: 1; white-space: normal; }
html:not(.live) .flip span::after { content: " "; }
html:not(.live) .strikes, html:not(.live) .flag { display: none; }
html:not(.live) .sheet { position: absolute; left: calc(var(--b) * 1% - 21vw); bottom: -9vh; width: clamp(20rem, 36vw, 36rem); height: auto; rotate: -3deg; box-shadow: 0 30px 60px -18px rgb(10 10 12 / .55); border-radius: 8px; }
html:not(.live) .loaf:not(.loaf--close) { position: absolute; left: calc(var(--b) * 1% + 11vw); bottom: 3vh; width: clamp(9rem, 19vw, 19rem); height: auto; }
html:not(.live) #hook .pane--paper .col { padding-bottom: 8vh; }
html:not(.live) #hook .pane { justify-content: flex-start; padding-top: 11vh; padding-bottom: 42vh; }

/* ================================================================= live mode */
.live .mark { position: fixed; }
.live .seam { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.live .pencil {
  display: block; position: absolute; left: 0; top: 0; max-width: none; width: auto; height: var(--pencil-h, 80vh);
  transform-origin: var(--tip-x, 50%) 100%; will-change: transform;
  filter: drop-shadow(5px 8px 7px rgb(10 10 14 / .42));
}
.live .tab { position: absolute; top: 18px; white-space: nowrap; }
.live .tab--left {
  display: block; left: 0; color: var(--paper); font-family: var(--sc-font-mono); font-size: .76rem; line-height: 1.75rem; letter-spacing: .02em;
  transform: translateX(calc(var(--seam-px, 720px) + 26px));
}
.live .tab--left b { font-weight: 500; color: #FF7A5C; }
.live .tab--cta {
  display: block; right: 100%; left: auto; pointer-events: auto; padding: 0 1em; line-height: 1.9rem; height: 1.9rem; border-radius: 999px; background: var(--cta); color: #fff; font-size: .84rem; font-weight: 600; text-decoration: none;
  transform: translateX(calc(var(--seam-px, 720px) - 26px));
  left: 0; right: auto; translate: -100% 0;
  opacity: 0; visibility: hidden; transition: opacity 180ms var(--sc-ease-out);
}
.live.show-cta .tab--cta { opacity: 1; visibility: visible; }
.live.hide-tally .tab--left { opacity: 0; }

.live .beat { margin-top: -100vh; position: relative; pointer-events: none; }
.live .beat:first-child { margin-top: 0; }
.live .stage { pointer-events: none; }
.live .beat:not(.on) .stage { opacity: 0; }
.live .pane { position: absolute; inset: 0; pointer-events: none; }
.live .pane--paper { clip-path: inset(0 calc(100% - var(--seam)) 0 0); }
.live .pane--ink { clip-path: inset(0 0 0 var(--seam)); }
.live .col { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.live .pane--paper .col { left: 0; width: calc(var(--a) * 1vw); padding: 62px var(--pad) 118px; }
.live .pane--ink .col { right: 0; width: calc((100 - var(--b)) * 1vw); padding: 62px var(--pad) 118px clamp(1.5rem, 3vw, 3rem); }
.live .scene { position: absolute; inset: 0; z-index: 5; overflow: clip; opacity: 0; }

/* Hero */
.live #hook .col { justify-content: flex-start; padding-top: clamp(4.2rem, 10.5vh, 6.5rem); }
.live #hook .sheet {
  position: absolute; left: 41vw; top: 66vh; width: clamp(22rem, 34vw, 33rem); height: auto; rotate: -3.5deg; border-radius: 8px;
  box-shadow: 0 2px 4px rgb(10 10 14 / .24), 0 34px 60px -18px rgb(10 10 14 / .6); will-change: transform;
}
.live #hook .loaf {
  position: absolute; left: 72vw; top: 56vh; width: clamp(12rem, 22vw, 21rem); height: auto; will-change: transform;
  filter: drop-shadow(10px 18px 16px rgb(4 4 6 / .6));
}

/* Peak */
.live #proof .col--doubt { width: 25vw; padding: 62px 1.4vw 118px var(--pad); justify-content: flex-start; padding-top: 22vh; }
.live #proof .doubt { position: absolute; left: var(--pad); right: 1.2vw; top: 22vh; }
.live #proof .draft, .live #proof .rewrite { position: absolute; left: 29.5vw; width: 39vw; top: 21vh; }
.live #proof .rewrite { top: calc(21vh + 2.2rem); }
.live #proof .meter { position: absolute; left: 75vw; right: 2.5vw; top: 21vh; }

/* Close */
.live #close .pane--paper .col { width: 100vw; padding-top: clamp(3.4rem, 8vh, 5rem); padding-bottom: 150px; justify-content: flex-start; }
.live #close .pane--ink .col { width: 16vw; }
.live #close .pane--ink .col--last { opacity: var(--last, 0); }
.live #close .foot { position: absolute; left: var(--pad); bottom: 22px; width: max(15rem, calc(50vw - 400px)); margin: 0; }

.live [data-sc-cue] { pointer-events: none; }

/* ======================================================= phone: a level seam */
@media (max-width: 860px) {
  :root { --hero: clamp(2.05rem, min(9.8vw, 5.3vh), 2.7rem); --h2: clamp(1.8rem, min(9.6vw, 5.1vh), 2.6rem); --pad: 1.25rem; }
  .mark { left: 20px; top: 14px; font-size: 1.42rem; }
  .lede { margin-top: .6em; font-size: .98rem; line-height: 1.38; }
  .body { margin-top: .5em; font-size: .94rem; line-height: 1.38; }
  .small { margin-top: .5em; font-size: .82rem; }
  .cta-row { margin-top: .9em; gap: .4em .9em; }
  .cta { min-height: 50px; }
  .micro { font-size: .84rem; }
  .ink-h { font-size: 1.14rem; }
  .jobs { margin-top: .5em; font-size: .88rem; }
  .jobs li { padding: .3em 0; }
  .job { font-size: clamp(1.5rem, 4vh, 2.15rem); }
  .job--sm { font-size: clamp(1.3rem, 3.2vh, 1.75rem); }
  .job-note { margin-top: .3em; font-size: .82rem; }
  .label--ink { margin-bottom: .2em; }

  .reads-grid, .look-grid, .extras-grid, .approve-grid, .close-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .notes { padding: .45em .85em .5em; rotate: .5deg; }
  .notes-head { padding-bottom: .3em; }
  .note { padding: .28em 0; display: grid; grid-template-columns: 5.7em 1fr; gap: .5em; align-items: baseline; }
  .note dd { margin: 0; font-size: clamp(.98rem, 2.15vh, 1.18rem); line-height: 1.14; }
  #reads .h2 { font-size: var(--h2); }

  .week { margin-top: .75em; gap: 4px; }
  .day { height: clamp(3.1rem, 7.4vh, 4.4rem); padding: .35em .3em; align-items: center; }
  .day b { font-size: 1.02rem; }
  .day-slot { font-size: 0; }
  .day-slot::after { content: "9:00"; font-size: .64rem; }
  .say { margin-top: .4em; font-size: .9rem; min-height: 2.7em; }
  .writers { margin-top: .4em; gap: 4px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .writer { min-height: 44px; font-size: 1.14rem; }

  .draft-text { font-size: clamp(.92rem, 2.05vh, 1.04rem); line-height: 1.42; }
  .flag { margin-bottom: .45em; padding-right: 6.2em; font-size: .7rem; min-height: 2.6em; align-content: flex-start; }
  .flag-k { display: none; }
  .doubt { font-size: clamp(1.36rem, 3.1vh, 1.66rem); }
  .rewrite p { font-size: clamp(1.16rem, 2.8vh, 1.5rem); line-height: 1.15; }
  .meter-n { font-size: clamp(2.5rem, 7vh, 3.6rem); }
  .meter-t { font-size: .78rem; margin-top: .5em; }
  .meter-c { font-size: .72rem; margin-top: .3em; }

  .looks { margin-top: .6em; gap: 4px; }
  .look { min-height: 46px; padding: .2em .55em; font-size: .74rem; }
  .look b { font-size: .84rem; }
  .site-bar { padding: 5px 9px; font-size: .64rem; }
  .site-head { padding: .4em .8em; font-size: .72rem; }
  .site-body { padding: .55em .8em .7em; }
  .site-title { font-size: 1.04rem; }
  .site-by { margin-top: .25em; font-size: .7rem; }
  .site-text { margin-top: .25em; font-size: .74rem; line-height: 1.32; }
  .site-btn { margin-top: .4em; padding: .3em .8em; font-size: .7rem; }

  .flip { font-size: clamp(1.7rem, 4.6vh, 2.5rem); margin-top: .15em; }
  .ledger { margin-top: .5em; grid-template-columns: minmax(0, 1fr); }
  .ledger > div { padding: .24em 0; display: grid; grid-template-columns: 7.2em 1fr; gap: .6em; }
  .ledger dt { font-size: clamp(.72rem, 1.66vh, .84rem); line-height: 1.22; }
  .ledger dd { margin: 0; font-size: clamp(.72rem, 1.66vh, .84rem); line-height: 1.22; }

  .plain { margin-top: .35em; }
  .plain li { padding: .26em 0; font-size: .84rem; line-height: 1.24; }
  .chat { order: 0; rotate: 0deg; padding: .5em .6em; border-radius: 16px; }
  .chat-who { margin-bottom: .3em; font-size: .76rem; }
  .chat-av { width: 22px; height: 22px; font-size: .66rem; }
  .bubble { padding: .45em .6em; font-size: .78rem; }
  .bubble-t { font-size: 1.02rem; margin-top: .1em; }
  .bubble-m { margin-top: .12em; font-size: .72rem; }
  .bubble-a { margin-top: .4em; }
  .chat-btn { min-height: 44px; font-size: .78rem; }

  .close-h { font-size: clamp(2rem, 5.2vh, 2.5rem); }
  .field { margin-top: .6em; }
  .field label { font-size: .82rem; margin-bottom: .15em; }
  .field-row { min-height: 44px; font-size: .88rem; }
  .field input { height: 42px; }
  .field .small { font-size: .74rem; margin-top: .3em; }
  .site--close .site-body { padding: .45em .8em .55em; }
  .site--close .site-title { font-size: .94rem; }
  .loaf--close { right: -5%; bottom: -10%; width: 5rem; }
  .plans-wrap { margin-top: .75rem; }
  .plans-h { font-size: .8rem; margin-bottom: .3em; }
  .plans { grid-template-columns: 1fr 1fr; }
  .plans li { padding: .3em .55em .3em 0; font-size: .7rem; line-height: 1.2; }
  .plans li + li { padding-left: 0; border-left: 0; }
  .plans li:nth-child(even) { padding-left: .55em; border-left: 1px solid rgb(21 23 28 / .2); }
  .plans b { font-size: .8rem; }
  .plan-l { margin-top: .05em; }
  .foot { font-size: .68rem; margin-top: .35em; }

  /* Stacked static page */
  html:not(.live) .seam { display: none; }
  html:not(.live) .stage { grid-template-columns: minmax(0, 1fr); }
  html:not(.live) .pane { padding: 3.2rem var(--pad) 2.4rem; }
  html:not(.live) #hook .pane { padding-top: 3.2rem; padding-bottom: 2rem; }
  html:not(.live) #hook .stage { min-height: 0; }
  html:not(.live) #hook .pane--ink { padding-bottom: 15rem; }
  html:not(.live) .sheet { left: auto; right: -8vw; bottom: -3rem; width: 74vw; }
  html:not(.live) .loaf:not(.loaf--close) { left: 4vw; bottom: 1.2rem; width: 34vw; }
  html:not(.live) .site-btn { margin-top: .6em; }
  html:not(.live) .close-post { margin-top: 1rem; }

  /* Live: the seam lies flat. */
  .live .ground--paper { clip-path: inset(0 0 calc(100% - var(--seam)) 0); }
  .live .pane--paper { clip-path: inset(0 0 calc(100% - var(--seam)) 0); }
  .live .pane--ink { clip-path: inset(var(--seam) 0 0 0); }
  .live .pane--paper .col { left: 0; right: 0; width: auto; top: 0; bottom: auto; height: calc(var(--am) * 1svh); padding: 3.1rem var(--pad) .9rem; justify-content: flex-start; }
  .live .pane--ink .col { left: 0; right: 0; width: auto; top: calc(var(--bm) * 1svh); bottom: 0; padding: 2.1rem var(--pad) 5.5rem; justify-content: flex-start; }
  .live .tab--left { top: auto; bottom: auto; left: auto; right: 14px; line-height: 1.2rem; font-size: .68rem; transform: translateY(calc(var(--seam-px, 480px) + 11px)); top: 0; }
  .live .tab--cta { top: 10px; left: auto; right: 14px; translate: none; transform: none; height: 2rem; line-height: 2rem; }
  #reads .pane--paper .col, #days .pane--paper .col, #look .pane--paper .col, #extras .pane--paper .col, #approve .pane--paper .col { justify-content: center; }
  .live #hook .col { padding-top: 3.1rem; }
  .live #hook .pane--ink .col { padding-top: 1.75rem; }
  .live #hook .sheet { left: 36vw; top: auto; bottom: -9.5vh; width: 72vw; rotate: -4deg; }
  .live #hook .loaf { left: -6vw; top: auto; bottom: -1.5vh; width: 33vw; filter: drop-shadow(5px 9px 8px rgb(4 4 6 / .6)); }

  .live #proof .col--doubt { width: auto; height: 24svh; padding: 0; }
  .live #proof .doubt { left: var(--pad); right: 4.8rem; top: 3.1rem; }
  .live #proof .draft, .live #proof .rewrite { left: var(--pad); width: calc(100vw - 2 * var(--pad)); top: calc(24svh + 1.1rem); }
  .live #proof .rewrite { top: calc(24svh + 1.1rem + 2.7em); }
  .live #proof .meter { left: var(--pad); right: var(--pad); top: 60svh; display: grid; grid-template-columns: auto 1fr; gap: 0 .9em; align-items: start; }
  .live #proof .meter-n { grid-row: 1 / span 3; }
  .live #proof .meter-l { margin-top: .2em; }
  .live #proof .meter-bar { margin-top: .5em; }
  .live #proof .meter-c { grid-column: 1 / -1; }

  .live #close .pane--paper .col { width: auto; height: 100svh; padding-top: 3.1rem; padding-bottom: 5.4rem; }
  .site--close .site-text { display: none; }
  .loaf--close { bottom: -4%; width: 4.4rem; }
  .live #close .foot { position: static; width: auto; margin-top: .35em; }
  .live #close .pane--ink .col--last { display: none; }
}

/* Small phones lose air, never words. */
@media (max-width: 860px) and (max-height: 700px) {
  .lede { font-size: .9rem; line-height: 1.3; }
  .micro { font-size: .76rem; }
  .cta { min-height: 44px; }
  .jobs li { padding: .16em 0; font-size: .78rem; }
  .ink-h { font-size: 1rem; }
  .body { font-size: .86rem; line-height: 1.28; }
  .small { font-size: .74rem; }
  .note dd { font-size: .92rem; }
  .ledger dd, .ledger dt { font-size: .7rem; }
  .plain li { font-size: .76rem; padding: .16em 0; }
  .chat-btn, .day, .writer { min-height: 40px; height: 40px; }
  .meter-t { display: none; }
  .meter-c { font-size: .66rem; }
  .plans-h { display: none; }
  .field .small { display: none; }
  .site--close .site-text { display: none; }
  .loaf--close { width: 3.6rem; bottom: 0; right: -3%; }
  .live #hook .sheet { bottom: -19vh; width: 62vw; left: 42vw; }
  .live #hook .loaf { bottom: -9vh; width: 26vw; left: 8vw; }
}

@media (prefers-reduced-motion: reduce) {
  .day, .writer, .look, .chat-btn, .cta, .tell { transition: none; }
}