/* Cotton, the landing page. Design: "Cotton Landing v2" (Claude Design, 27 Sep 2026), lilac paper: warm cream, near-black
   ink, one violet accent, a lilac highlighter. Roughly 85% paper and ink, 10% rules and cards, 5% violet.
   The markup keeps the design's own inline styles; this file holds the tokens, the motion, and what inline styles cannot say.
   Note: the accent token is called --red because the design's first palette used a red pencil. In lilac it is violet. */
:root {
  --paper:#FCF9EF; --paper-2:#F3EEE0; --card:#FFFDF7;
  --ink:#1B1917; --ink-2:#403B36; --muted:#625A52;
  --rule:#E6DFCF; --rule-2:#EFE9DC;
  --red:#6A4BC4; --hl:#E3D8FB; --hl-ink:#1B1917;
  --band:#1C1A22; --band-2:#26232E; --band-ink:#FCF9EF; --band-muted:#C3BCCF; --band-rule:#393543;
  --live:#D6331F; --btn:#1B1917; --btn-ink:#FCF9EF; --shadow:rgba(40,30,60,.2);
  color-scheme: light;
}
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }
::selection { background: var(--hl); color: var(--hl-ink); }
[hidden] { display: none !important; }
.root { container-type: inline-size; position: relative; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: 'Instrument Sans', system-ui, sans-serif; } /* clip, not hidden: things waiting to slide in sit past the edge, and the nav must stay sticky */
.grain { position: absolute; inset: 0; z-index: 50; pointer-events: none; opacity: .2; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

/* the dot: the only thing on the page that is always alive */
.dot { display: inline-block; border-radius: 50%; background: var(--red); flex: none; animation: cBreathe 3.6s ease-in-out infinite; }
.dot.notice { animation: cNotice .9s ease-out, cBreathe 3.6s ease-in-out .9s infinite; }

/* what the design switched on and off by width or by state */
.if { display: contents; }
.if[data-if="narrow"], .if[data-if="showMenu"], .if[data-if="filmPlaying"] { display: none; }
.root.film-on .if[data-if="filmPoster"] { display: none; }
.root.film-on .if[data-if="filmPlaying"] { display: contents; }
@media (max-width: 859px) {
  .if[data-if="wide"] { display: none; }
  .if[data-if="narrow"] { display: contents; }
  .root.menu-open .if[data-if="showMenu"] { display: contents; }
}

/* what it does: the list of asks and the reply's lines */
.dd-tab .dd-ask { color: var(--muted); }
.dd-tab.on .dd-ask { color: var(--ink); }
.dd-art { padding: 9px 0; border-top: 1px solid var(--rule-2); font-size: 14px; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums; animation: cRise .5s cubic-bezier(.2,.7,.2,1) both; }
.dd-art.last { color: var(--red); }

input::placeholder { color: var(--muted); opacity: .75; }
button:disabled { cursor: default; opacity: .8; }

@keyframes cBreathe { 0%,100% { transform: scale(.7); opacity: .6 } 50% { transform: scale(1); opacity: 1 } }
@keyframes cNotice { 0% { transform: scale(1) } 30% { transform: scale(1.9) } 100% { transform: scale(1) } }
@keyframes cRise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes cFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes cDraw { from { stroke-dashoffset: 100 } to { stroke-dashoffset: 0 } }
@keyframes cRed { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
@keyframes cRing { 0% { transform: scale(1); opacity: .5 } 100% { transform: scale(1.6); opacity: 0 } }
@keyframes cMarquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes cCycle { 0% { opacity: 0; transform: translateY(8px) } 4%,22% { opacity: 1; transform: none } 26%,100% { opacity: 0; transform: translateY(-8px) } }
@keyframes cSway { 0%,100% { transform: rotate(-2deg) } 50% { transform: rotate(1.5deg) } }
@keyframes cMark { from { background-size: 0% 100% } to { background-size: 100% 100% } }
@keyframes cCaret { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
@keyframes cFill { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes cWave { 0%,100% { transform: scaleY(.35) } 50% { transform: scaleY(1) } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .lang0 { opacity: 1 !important; }
}

/* hover and focus, from the design's own notes on each element (important: the base styles are inline) */
.f1:focus{left:16px !important}
.h2:hover{text-decoration:underline !important}
.h3:hover{transform:translateY(-1px) !important;color:var(--btn-ink) !important}
.f4:focus-visible{outline:3px solid var(--red) !important;outline-offset:3px !important}
.f5:focus-visible{border-color:var(--ink) !important;box-shadow:0 0 0 4px var(--hl) !important}
.h6:hover{opacity:.86 !important}
.h7:hover{border-color:var(--ink) !important}
.f8:focus-visible{outline:3px solid var(--red) !important;outline-offset:2px !important}
.h9:hover{transform:scale(1.012) !important}
.f10:focus-visible{outline:3px solid var(--hl) !important;outline-offset:4px !important}
.h11:hover{padding-left:6px !important}
.f12:focus-visible{outline:2px solid var(--red) !important;outline-offset:2px !important}
.h13:hover{animation-play-state:paused !important}