/* Site theme: ink on paper, one acid accent. Sizing scale per spec/core/site/design.md.
   Landing composition lives in landing-calm.css; the Slack simulator in slack-original.css.
   !important crosses the legacy brand.css / inline-style boundary only. */
:root{
  --ink:#20221f;--paper:#fafaf7;--offwhite:#eeefe9;--theme:#20221f;--grad:#dfff00;
  --acid:#dfff00;--acid-hover:#cde900;--acid-ink:#e3ff00;--danger:#a22d27;
  --ff-ui:'Space Grotesk',sans-serif;--ff-mono:'IBM Plex Mono',monospace;
  --line:#d6d8cf;--line-strong:#b8bdb0;--muted:#5b6057;--shadow-card:none;--nav:64px;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s24:96px;--s32:128px;
  --radius:var(--s2);
  --marker:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23dfff00' d='M5 9C30 6 100 8 150 6S190 3 196 8c2 8 1 18-2 24-44 3-104 0-154 2S8 36 4 31C2 24 3 15 5 9Z'/%3E%3C/svg%3E");
  --marker2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23dfff00' d='M8 12C40 7 90 10 140 7S186 4 194 10c3 6 2 14-1 20-40 5-96 1-142 4S10 38 5 33C3 27 4 18 8 12Z'/%3E%3C/svg%3E");
  --pad-x:var(--s4);--sec-y:var(--s16);--hero-y:var(--s24);
  --frame:1200px;--measure:65ch;--target:44px;

  --vw-t:clamp(0px,calc((100vw - 320px) / 704),1px);
  --t-1:calc(13.33px + 1.07 * var(--vw-t));
  --t0:calc(16px + 2 * var(--vw-t));
  --t1:calc(19.2px + 3.3 * var(--vw-t));
  --t2:calc(23.04px + 5.09 * var(--vw-t));
  --t3:calc(27.65px + 7.51 * var(--vw-t));
  --t4:calc(33.18px + 10.77 * var(--vw-t));
  --t5:calc(39.81px + 15.12 * var(--vw-t));
}
@media(min-width:768px){:root{--pad-x:var(--s8);--sec-y:var(--s24);--hero-y:var(--s32)}}

html,body.calm{background:var(--paper)!important;color:var(--ink)!important;font-family:var(--ff-ui)!important}
body.calm .display,body.calm .title,body.calm h1,body.calm h2,body.calm h3,body.calm .mk-title,body.calm .d-stats b{font-family:var(--ff-ui)!important;font-weight:500!important}
body.calm .stamp,body.calm .d-kicker{font-family:var(--ff-mono)!important;font-weight:500!important;color:var(--muted)!important}
body.calm .grad-text,body.calm .stamp.grad{background:none!important;color:var(--theme)!important;-webkit-text-fill-color:var(--theme)!important}
body.calm .wdim,body.calm .wdim4,body.calm .pdim,body.calm .dim,body.calm .dim50{color:var(--muted)!important}
body.calm .reveal{opacity:1!important;transform:none!important}
body.calm .aurora .blob,body.calm .btn-sheen:before,body.calm .btn-sheen:after{display:none!important}
body.calm .hairline-d{border-top:1px solid var(--line)!important}
body.calm .sec{background:var(--paper)!important}
body.calm .btn,body.calm .btn-sheen{border-radius:var(--radius)!important;background:var(--ink)!important;color:var(--paper)!important;box-shadow:none!important;border:1px solid var(--ink)!important}
body.calm .btn:hover,body.calm .btn-sheen:hover{background:var(--paper)!important;color:var(--ink)!important}
body.calm .navbar .btn-sheen,body.calm .mm-cta{background:var(--acid)!important;color:var(--ink)!important;border:1px solid transparent!important}
body.calm .navbar .btn-sheen:hover,body.calm .mm-cta:hover{background:var(--acid-hover)!important;color:var(--ink)!important}
body.calm .btn-ghost{color:var(--theme)!important;border-color:#c5c9bb!important;border-radius:var(--radius)!important;background:transparent!important}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--theme);outline-offset:var(--s1)}
body.calm .chip{border-radius:var(--s1)!important;border:1px solid var(--line)!important;background:#fff!important;color:var(--muted)!important;white-space:normal}
body.calm .chip img{filter:brightness(0)!important}

/* navigation: one treatment on every page */
.site-rebrand .navbar{position:fixed;top:0;left:0;right:0;z-index:50;min-height:var(--nav);background:var(--paper)!important;color:var(--ink)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important;backdrop-filter:none!important}
.site-rebrand .navbar.scrolled{background:var(--paper)!important;border-bottom:1px solid var(--line)!important;backdrop-filter:none!important}
body.site-rebrand{padding-top:var(--nav)}
body.site-rebrand.menu-open .navbar{background:var(--paper)!important;color:var(--ink)!important;backdrop-filter:none!important}
.site-rebrand .nav-inner{max-width:var(--frame);min-height:var(--nav);padding-left:var(--pad-x);padding-right:var(--pad-x)}
.site-rebrand .navbar a{color:var(--ink)!important}
.site-rebrand .navbar .nav-panel{background:#fff!important;border:1px solid var(--line)!important;box-shadow:none!important}
.site-rebrand .mobile-menu{background:#fff!important;border:1px solid var(--line)!important}
.site-rebrand .mk-title{letter-spacing:-.07em!important}
.site-rebrand .mk-title:before{content:none}

body.calm header.aurora{background:var(--paper)!important}
.ink-frames{position:absolute;inset:0 0 auto;height:420px;overflow:hidden;pointer-events:none;z-index:0}
.hero>.wrap{position:relative;z-index:1}
.ink-frames svg{position:absolute;width:300px;height:400px;top:0}
.ink-frames .frame-left{left:0}.ink-frames .frame-right{right:0}
@media(max-width:1200px){.ink-frames .frame-left{left:-100px}.ink-frames .frame-right{right:-100px}}
@media(max-width:700px){
 .ink-frames{inset:24px 0 auto;height:490px;opacity:.6;mask-image:linear-gradient(90deg,#000,#000 5%,#0002 28%,transparent 40% 60%,#0002 72%,#000 95%);-webkit-mask-image:linear-gradient(90deg,#000,#000 5%,#0002 28%,transparent 40% 60%,#0002 72%,#000 95%)}
 .ink-frames .frame-left{left:-155px;top:95px}
 .ink-frames .frame-right{right:-150px;top:-25px}
}
body.calm header h1.display,body.calm section .title,body.calm #cta .display{color:var(--ink)!important}
body.calm .btn-ghost:hover{background:var(--offwhite)!important}

/* footer */
.site-footer{background:var(--offwhite);border-top:1px solid var(--line);padding:var(--s16) 0;color:var(--ink);font-family:var(--ff-ui);font-size:var(--t0);line-height:1.5}
.site-footer .cols{max-width:var(--frame);margin:0 auto;padding:0 var(--pad-x);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6)}
.site-footer .h{font-family:var(--ff-mono);font-size:var(--t-1);text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
.site-footer a{display:flex;align-items:center;min-height:var(--target);color:var(--ink);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
@media(max-width:767px){.site-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 #ugc *,#reddit *{animation:none!important;transition:none!important}
}

/* marker stroke: highlight standing-out phrases in copy. Never on buttons or other controls. */
.mark{position:relative;display:inline;padding:0 .12em .02em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mark::before{content:'';position:absolute;z-index:-1;inset:.08em -.12em -.04em;background:var(--marker) center/100% 100% no-repeat;transform:rotate(-1.2deg);transition:filter .15s ease;pointer-events:none}
:is(.btn,.mk-btn,.btn-sheen,.mm-cta,.btn-ghost).mark,
:is(.btn,.mk-btn,.btn-sheen,.mm-cta,.btn-ghost) .mark{padding:0;background:none}
:is(.btn,.mk-btn,.btn-sheen,.mm-cta,.btn-ghost).mark::before,
:is(.btn,.mk-btn,.btn-sheen,.mm-cta,.btn-ghost) .mark::before{content:none!important;background:none!important}