/* Mastheads Studio: the look every studio.mastheads.app page shares (founder 2026-10-28: the work page "has to be
   seamless. It should copy the theme"). Moved here from index.html as it was; a page adds only its own rules. */
/* tokens */
:root{
  color-scheme: light;
  --paper:#F7F4EE;
  --paper-2:#EFEBE3;
  --ink:#1F1D1A;
  --ink-2:#4F4B45;
  --pencil:#8E897F;
  --rule:rgba(31,29,26,.085);
  --red:#C0412F;
  --stamp:#2B3E6B;
  --hand:"Gaegu","Comic Neue",ui-rounded,"Segoe Print",cursive;
  --pen:"Nothing You Could Do","Segoe Script","Bradley Hand",cursive;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mark:"Grechen Fuemen","Snell Roundhand",cursive;
  --gl:max(16px,5vw,env(safe-area-inset-left,0px));
  --gr:max(16px,5vw,env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.19,1,.22,1);
}
/* paper, type and the small shared pieces */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper)}
body{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .11 0 0 0 0 .1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");color:var(--ink);font-family:var(--sans);font-weight:350;font-size:16px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
::selection{background:#F3E3A6;color:var(--ink)}
a{color:inherit}
:focus-visible{outline:2px solid var(--stamp);outline-offset:4px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{padding-left:var(--gl);padding-right:var(--gr)}
.label{margin:0;font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--pencil)}
.hand{font-family:var(--hand);font-weight:300;letter-spacing:.01em}
/* ---------- header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:calc(env(safe-area-inset-top,0px) + 18px);padding-bottom:14px;padding-left:var(--gl);padding-right:var(--gr);pointer-events:none}
.top>*{pointer-events:auto}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:31;background:var(--paper)}
.logo{display:flex;align-items:center;align-self:stretch;gap:12px;text-decoration:none;padding:0 16px 0 14px}
.logo img{width:auto;height:26px;display:block}
.logo span{position:relative;top:4px;font-size:11px;line-height:1;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
.nav{display:flex;gap:4px}
/* the logo and the nav links sit on the same paper pill */
.logo,.nav a{border-radius:999px;background:rgba(247,244,238,.94)}
.nav a{font-family:var(--hand);font-size:21px;font-weight:400;text-decoration:none;padding:8px 12px;color:var(--ink);transition:color .3s}
.nav a:hover{color:var(--stamp)}
.logo,.nav a{min-height:44px}
.nav a{display:flex;align-items:center}
@media (max-width:959px){
  .top{background:var(--paper);border-bottom:1px solid var(--rule);padding-top:calc(env(safe-area-inset-top,0px) + 8px);padding-bottom:8px;pointer-events:auto}
  .top .logo,.top .nav a{background:transparent}
  .nav a[aria-current="page"]{color:var(--stamp)}
}
/* the hand-lettered pill button every Studio page uses (one copy here; the pages used to carry their own) */
.send{justify-self:start;min-height:50px;padding:0 26px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font-family:var(--hand);font-size:24px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:background-color .3s,color .3s}
.send:hover,.send:focus-visible{background:var(--ink);color:var(--paper)}
.send.dark{background:var(--ink);color:var(--paper)}
.send.dark:hover,.send.dark:focus-visible{background:var(--stamp);border-color:var(--stamp)}
/* the big handwritten heading of a section */
.h2{margin:14px 0 0;font-family:var(--hand);font-weight:300;font-size:clamp(50px,7vw,116px);line-height:.98}
/* ---------- the notebook page: ruled lines and the red margin ---------- */
.hero{position:relative;min-height:100svh;padding-block:clamp(110px,16vh,170px) 10vh;background-image:linear-gradient(to right,transparent calc(var(--gl) - 22px),rgba(192,65,47,.26) calc(var(--gl) - 22px),rgba(192,65,47,.26) calc(var(--gl) - 21px),transparent calc(var(--gl) - 21px)),repeating-linear-gradient(to bottom,transparent 0 41px,var(--rule) 41px 42px);overflow:clip}
/* ---------- footer ---------- */
/* the footer: one centred column, ending like every Mastheads mail - the six icons, Help, Contact, Privacy, Terms,
   the copyright (founder 2026-10-20: "copyright must be in centre", "same as email footer"); it ends above the fixed
   sound button, which used to sit on the copyright on phones */
.foot{border-top:1px solid var(--rule);padding-block:9vh calc(88px + env(safe-area-inset-bottom,0px))}
.foot-grid{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.foot-mark{width:64px;height:auto;display:block}
.foot-line{margin:0;max-width:46ch;color:var(--ink-2);text-wrap:balance}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 18px;font-family:var(--hand);font-size:24px}
.foot-sep{width:8px;height:24px;flex:none}
@media (max-width:420px){.foot-links{font-size:20px;gap:6px 12px}} /* all three on one line, no separator left at a line's end */
.foot-sep path{fill:none;stroke:var(--pencil);stroke-width:1.4;stroke-linecap:round}
.foot-social{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px;padding-top:30px;border-top:1px solid var(--rule);width:min(100%,560px)}
.foot-social a{display:block;border-radius:50%}
.foot-social img{display:block;width:32px;height:32px}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;font-size:13px}
.foot-legal a{color:var(--pencil);text-decoration:none}
.foot-legal a:hover{color:var(--ink)}
.foot-legal span{color:#CFC9BE}
.foot-small{margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--pencil)}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--stamp)}
@media (max-width:560px){
  .logo span{display:none}
  .logo{padding:0 5px}
  .top{gap:6px}
  .nav{gap:1px}
  .nav a{font-size:15.5px;padding:6px 5px;white-space:nowrap} /* four pills in one row down to 360px wide (measured 11-07, with guides) */
  .nav a[href^="https://mastheads.app"]{display:none} /* a fifth pill does not fit a phone; articles stays in the footer */
}
/* the page cannot be copied: nothing to select outside the form, no dragging its pictures (site.js stops copy and cut) */
html{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
img,video,canvas{-webkit-user-drag:none}
/* hand-lettering drawn stroke by stroke (site.js): its svg and ink */
.hand{display:block;max-width:none;overflow:visible}
.hand path{fill:none;stroke:#24211D;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.hand-text{display:block;overflow:visible}
.hand .em path{stroke:var(--stamp)}
/* ---------- senses: sound switch, pen-nib cursor, boiling ink ---------- */
.snd{position:fixed;left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1.5px solid rgba(31,29,26,.22);border-radius:999px;background:rgba(251,250,246,.96);font-family:var(--hand);font-size:20px;line-height:1;color:var(--ink);cursor:pointer;transition:border-color .3s}
.snd:hover{border-color:var(--ink)}
.snd svg{width:20px;height:20px;flex:none;overflow:visible}
.snd path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.snd[aria-pressed="false"] .w1,.snd[aria-pressed="false"] .w2,.snd[aria-pressed="true"] .mx{opacity:0}
.snd[aria-pressed="true"] .w1{animation:wave 1.6s ease-in-out infinite}
.snd[aria-pressed="true"] .w2{animation:wave 1.6s ease-in-out .2s infinite}
@keyframes wave{50%{opacity:.25}}
html.pen,html.pen *{cursor:none!important}
html.pen input,html.pen textarea{cursor:text!important}
html.pen select{cursor:default!important}
/* an open dialog is above the nib (the top layer): inside it the system cursor comes back */
html.pen dialog[open],html.pen dialog[open] *{cursor:auto!important}
html.pen dialog[open] :is(a,button,label,summary,input[type=checkbox]){cursor:pointer!important}
html.pen dialog[open] :is(input:not([type=checkbox]),textarea){cursor:text!important}
.nib{position:fixed;left:0;top:0;z-index:300;width:30px;height:30px;pointer-events:none;transform:translate3d(-100px,-100px,0);display:none}
html.pen .nib{display:block}
.nib.hide{opacity:0}
.nib-body{position:absolute;inset:0;transform-origin:2px 28px;transition:transform .25s var(--ease)}
.nib.hot .nib-body{transform:scale(1.18)}
.nib.down .nib-body{transform:scale(.88)}
.nib-ring{position:absolute;left:-17px;top:11px;width:38px;height:38px;overflow:visible}
.nib-ring circle{fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-120deg);transform-origin:center;transition:stroke-dashoffset .45s var(--ease)}
.nib.hot .nib-ring circle{stroke-dashoffset:0}
.nib-ring image{opacity:0;transition:opacity .3s .15s}
.nib.hot .nib-ring image{opacity:1}
.ink{position:fixed;inset:0;z-index:299;width:100%;height:100%;pointer-events:none}
.jw{white-space:nowrap}
.jl{display:inline-block}
[data-f]{will-change:transform}
[data-f="0"] .jl{transform:var(--j0)}
[data-f="1"] .jl{transform:var(--j1)}
[data-f="2"] .jl{transform:var(--j2)}
@media (prefers-reduced-motion:reduce){.snd .w1,.snd .w2{animation:none}}
/* the big handwritten headline: its lines, the blue word and its red underline (written by the page through site.js) */
.h1 .ln{padding-top:.1em} /* the stroke font's letters are taller than the page font's: a little room between hero lines */
.h1{margin:0;font-family:var(--hand);font-weight:300;font-size:clamp(52px,7.2vw,128px);line-height:.98;letter-spacing:-.005em;color:var(--ink)}
.ln{display:block;width:max-content;max-width:100%}
.rot{position:relative;display:inline-block;color:var(--stamp);font-weight:400}
.rot-word{display:inline-block}
.squiggle{position:absolute;left:-2%;bottom:-.06em;width:104%;height:.28em;overflow:visible}
.squiggle path{fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round}