/* Ink & zine: the finishing layer, loaded last on every page.
   The characters are drawn in black ink with flat colour, so the interface is too. The site reads like a printed zine:
   full-width colour pages ruled off in ink, each with a numbered tab, a flat ink-ruled bar on top, tight corners (one scale:
   4, 8 and 12px), and a hard offset shadow instead of a soft glow on anything that sits on the page. Buttons lift when you
   point at them and press flat when you click. Same palette, same two typefaces, nothing new to download. */

:root {
  --r-s: 4px; --r-m: 8px; --r-l: 12px; --r-pill: 8px;
  --line: 1.5px;
  --gutter: clamp(16px, 4vw, 40px);
  --shadow: 0 0 0 var(--line) var(--edge), 5px 5px 0 0 var(--edge);
  --shadow-sm: 0 0 0 var(--line) var(--edge), 0 3px 0 0 var(--edge);
  --hair: 0 0 0 var(--line) rgba(var(--fg-rgb),.14);
}
/* on a phone the offset drops straight down, so a full-width card never loses its shadow off one side of the screen */
@media (max-width: 760px) { :root { --shadow: 0 0 0 var(--line) var(--edge), 0 5px 0 0 var(--edge); } }

/* ---------- ground and type ---------- */
body::before, .story::before { display: none; }       /* flat warm paper, no blurred washes */
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
::selection { background: var(--yellow); color: var(--on-accent); }
:focus-visible { outline: 2.5px solid var(--edge); outline-offset: 3px; }

/* ---------- the bar on top: flat, full width, ruled off in ink ---------- */
.topbar:not(.app-top) { top: 0; width: 100%; margin: 0; border-radius: 0; padding: 10px max(var(--gutter), calc((100% - 1180px) / 2)); background: var(--paper-2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 var(--line) 0 0 var(--edge); }
.app-top { border-radius: var(--r-l); background: var(--paper-2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--shadow-sm); }
.story-top::after { height: 3px; bottom: calc(-1 * var(--line)); }
.top-link { border-radius: var(--r-m); transition: background .2s, color .2s, translate .25s var(--spring), box-shadow .25s; }
.top-link:hover { transform: none; translate: 0 -1px; background: rgba(var(--fg-rgb),.06); }
.top-link.solid { box-shadow: 0 3px 0 0 var(--purple); }
.top-link.solid:hover { transform: none; translate: 0 -2px; box-shadow: 0 5px 0 0 var(--purple); }
.top-link.solid:active { translate: 0 2px; box-shadow: 0 0 0 0 var(--purple); }
.top-link[aria-current="page"] { background: var(--yellow); box-shadow: inset 0 0 0 var(--line) var(--edge); color: var(--on-accent); }
.menu-btn { border-radius: var(--r-m); }
@media (max-width: 759.98px) {
  .topbar.menu-ready .top-nav { top: calc(100% + var(--line)); left: 0; right: 0; border-radius: 0 0 var(--r-l) var(--r-l); background: var(--paper-2); box-shadow: 0 0 0 var(--line) var(--edge), 0 5px 0 0 var(--edge); }
  .top-nav .top-link { border-radius: var(--r-m); }
  .story-top.menu-ready::after { left: 0; right: 0; border-radius: 0; }
}

/* ---------- buttons: lift on hover, press flat on click ---------- */
.btn { --pop-c: var(--edge); border-radius: var(--r-m); box-shadow: 0 0 0 var(--line) var(--edge), 0 4px 0 0 var(--pop-c); transition: translate .25s var(--spring), box-shadow .25s var(--spring), background .2s, opacity .2s; }
.btn:hover:not(:disabled):not(.disabled) { transform: none; translate: 0 -2px; box-shadow: 0 0 0 var(--line) var(--edge), 0 6px 0 0 var(--pop-c); }
.btn:active:not(:disabled):not(.disabled) { transform: none; translate: 0 3px; box-shadow: 0 0 0 var(--line) var(--edge), 0 1px 0 0 var(--pop-c); transition-duration: .08s; }
.btn-black { --pop-c: var(--purple); }
.btn-soft { background: var(--paper-2); }
.story .btn-ig:hover:not(:disabled) { transform: none; translate: 0 -2px; box-shadow: 0 0 0 var(--line) var(--edge), 0 6px 0 0 var(--edge); }
.btn:disabled, .btn.disabled { box-shadow: 0 0 0 var(--line) rgba(var(--fg-rgb),.3); }

.chip { box-shadow: var(--shadow-sm); background: var(--paper-2); transition: translate .25s var(--spring), box-shadow .25s var(--spring), background .2s, color .2s; }
.chip:hover { transform: none; translate: 0 -2px; box-shadow: 0 0 0 var(--line) var(--edge), 0 5px 0 0 var(--edge); }
.chip:active { transform: none; translate: 0 2px; box-shadow: 0 0 0 var(--line) var(--edge), 0 1px 0 0 var(--edge); }

.icon-btn { border-radius: var(--r-m); box-shadow: 0 3px 0 0 var(--purple); transition: translate .25s var(--spring), box-shadow .25s var(--spring); }
.icon-btn:hover { transform: none; translate: 0 -2px; box-shadow: 0 5px 0 0 var(--purple); }
.icon-btn:active { transform: none; translate: 0 2px; box-shadow: 0 0 0 0 var(--purple); }

/* links in running text draw their underline in */
.fine a, .legal-card a, .story-foot a, .side-links a, .foot a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; transition: background-size .3s var(--glide); padding-bottom: 1px; }
.fine a:hover, .legal-card a:hover, .story-foot a:hover, .side-links a:hover, .foot a:hover { background-size: 0 1.5px; background-position: 100% 100%; }

/* ---------- forms ---------- */
.field input, .input, .field select, .field textarea { box-shadow: 0 0 0 var(--line) rgba(var(--fg-rgb),.22) inset; }
.field input:focus, .input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 2px var(--edge) inset, 0 3px 0 0 var(--edge); }
.note { box-shadow: var(--hair); }
.note.error { box-shadow: 0 0 0 var(--line) rgba(214,41,118,.45) inset; }
.toast { box-shadow: 0 0 0 var(--line) var(--edge), 0 4px 0 0 var(--yellow); }

/* ---------- people ---------- */
.avatar, .avatar.mini { box-shadow: 0 0 0 var(--line) var(--edge); }

/* ================================================================ the landing page: a zine of full-width colour pages */
.story { counter-reset: chapter; padding-bottom: 0; }
.chapter, .block { margin: 0; border-radius: 0; box-shadow: none; border-top: var(--line) solid var(--edge); }
.chapter::before { display: none; }
.chapter::after { opacity: .35; background-image: radial-gradient(rgba(var(--fg-rgb),.5) 1px, transparent 1.3px); background-size: 28px 28px; }
.s-night.chapter::after { background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.3px); }
.chapter-inner { width: min(calc(1180px + 2 * var(--gutter)), 100%); padding-left: var(--gutter); padding-right: var(--gutter); }
.block-inner { padding-left: var(--gutter); padding-right: var(--gutter); }

/* the numbered tab that hangs from the top rule of each page, on the same left line as the bar's logo */
.story .chapter:not(.finale) { counter-increment: chapter; }
.story .chapter:not(.finale) .words::before { content: "Nº 0" counter(chapter); position: absolute; z-index: 3; top: 0; left: max(var(--gutter), calc((100% - 1180px) / 2)); padding: .55rem .8rem .5rem; border-radius: 0 0 var(--r-s) var(--r-s); background: var(--yellow); color: var(--on-accent); font: 700 .78rem/1 var(--body); letter-spacing: .16em; }

.kicker { background: var(--paper-2); }
.whisper { background: var(--paper-2); }
.whisper::before { color: var(--orange); opacity: .9; }
.whisper-peek img { filter: none; }
.scroll-cue { border-radius: var(--r-m); background: var(--paper-2); transition: translate .25s var(--spring), box-shadow .25s var(--spring); }
.scroll-cue:hover { translate: 0 -2px; box-shadow: 0 0 0 var(--line) var(--edge), 0 7px 0 0 var(--edge); }
.store-btn { box-shadow: 0 3px 0 0 var(--purple); }
.store-btn:hover { box-shadow: 0 5px 0 0 var(--purple); }
.store-btn:active { translate: 0 2px; box-shadow: 0 0 0 0 var(--purple); }
.free-pill:hover { box-shadow: 0 0 0 var(--line) var(--edge), 0 5px 0 0 var(--edge); }

/* the stage behind Maya and Mo: one flat colour inside an ink line, kept inside the page at every width */
.duo::before { inset: 0; background-image: none; box-shadow: var(--shadow); }
.duo .actor figcaption { box-shadow: 0 0 0 var(--line) var(--edge); }
.think, .says { box-shadow: 0 0 0 var(--line) var(--edge); }

/* the finale is the one dark page: its lines and lips go light */
.finale .btn-ig { box-shadow: 0 0 0 var(--line) #fff, 0 4px 0 0 #fff; }
.finale .btn-ig:hover:not(:disabled) { box-shadow: 0 0 0 var(--line) #fff, 0 6px 0 0 #fff; }
.story .finale { border-bottom: var(--line) solid var(--edge); }

/* the footer: the name set large, in outline, with the small print under it */
.story-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 24px; width: auto; margin: 0; padding: clamp(20px, 3vw, 36px) max(var(--gutter), calc((100% - 1180px) / 2)) 18px; text-align: left; }
.story-foot .foot-mark { grid-column: 1 / -1; margin: 0 0 clamp(6px, 1.4vw, 16px); font: 800 min(calc((100vw - 2 * var(--gutter)) / 2.62), calc(1180px / 2.62))/.8 var(--display); letter-spacing: -0.065em; color: transparent; -webkit-text-stroke: var(--line) var(--edge); white-space: nowrap; overflow: hidden; user-select: none; transition: color .5s var(--glide); }
.story-foot .foot-mark:hover { color: var(--lilac); }
.story-foot p { margin: 0; }
.story-foot p:not(.foot-mark):not(.tiny) { font-weight: 700; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.story-foot .tiny { justify-self: end; text-align: right; max-width: 30rem; }
@media (max-width: 720px) {
  .story-foot { grid-template-columns: minmax(0, 1fr); }
  .story-foot .tiny { justify-self: start; text-align: left; }
  .story-foot p:not(.foot-mark):not(.tiny) { gap: 0 16px; }
  .story-foot p:not(.foot-mark):not(.tiny) a { display: inline-block; padding: 12px 0; background-position: 0 calc(100% - 10px); }
}

/* ================================================================ the app */
.panel { box-shadow: var(--shadow); }
.inbox { background: var(--night); }
.thread { border-radius: var(--r-m); }
.thread[aria-current="true"] { background: rgba(201,139,255,.24); box-shadow: inset 4px 0 0 var(--yellow), 0 0 0 1px rgba(255,255,255,.12) inset; }
.coach { background: var(--lilac); }
.chat-head { border-bottom: var(--line) solid var(--edge); background: var(--paper-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.msg.them { box-shadow: 0 0 0 var(--line) rgba(var(--fg-rgb),.12); }
.msg.me { box-shadow: 0 0 0 var(--line) var(--edge); }
.account-card { background: var(--lilac); }
.plan-option.best { background: var(--rose); }
.push-ask { box-shadow: 0 0 0 var(--line) var(--edge), 0 4px 0 0 var(--yellow); }
/* below the three-panel width the bar holds the logo and Settings, so the one-time question waits at the bottom instead */
@media (max-width: 1100px) {
  .push-ask { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); width: min(30rem, calc(100vw - 24px)); }
}
@media (max-width: 760px) {
  .panel { border-radius: var(--r-l); }
}

/* ================================================================ sign-in, connect, pricing, legal, 404 */
.connect-art::before, .legal-hero::before, .nf-card::before, .art-card::before, .block::before { display: none; }
.connect-art { background: var(--lilac); }
.art-card { background: var(--surface); }
.plan.best { border: 0; background: var(--surface); box-shadow: 0 0 0 3px var(--edge), 6px 6px 0 0 var(--purple-deep); }
@media (max-width: 760px) { .plan.best { box-shadow: 0 0 0 3px var(--edge), 0 6px 0 0 var(--purple-deep); } }

/* ================================================================ one set of page edges: every page's content starts on the bar's logo line */
.connect, .nf { width: min(1180px, calc(100% - 2 * var(--gutter))); }
.pr-hero { width: min(calc(1180px + 2 * var(--gutter)), 100%); padding-left: var(--gutter); padding-right: var(--gutter); }