/* ─────────────────────────────────────────────────────────────
   Mirako — the ledger. One stylesheet for every page.
   Page-specific pieces stay in that page's own <style> block.
   ───────────────────────────────────────────────────────────── */

:root{
  /* Dark ledger. The ground drifts across the sheet so it reads as a printed
     surface rather than a filled rectangle — see body background-image. */
  --stock:#12151B;
  --field:#171B23;
  --ink:#E3E7EC;
  --ink-2:#9BA5B4;
  --ink-3:#7C8593;
  --rule:#2B3140;
  --rule-2:#212734;
  /* THE accent. Sampled off the Mirako mark — the flat fill of the X, the modal
     pixel value in the shape. Measured, not picked, and it does not get nudged
     again. Zen Brutalism's #8F90C2 is this same colour, rounded. */
  --mach:#9391C3;
  --mach-flat:#3B3A63;    /* the one coloured field on the page, derived from iris */
  --on-flat:#EFEDF7;
  --snap:.13s cubic-bezier(0.2,0,0,1);  /* the only easing. mechanical, never soft */
  --gut:clamp(1.25rem,5vw,4rem);
  --ruler:8.5rem;         /* the vertical ruler every row registers against */
  --sans:'Onest',system-ui,sans-serif;
  --disp:'Familjen Grotesk','Onest',sans-serif;
  --mono:'Martian Mono',ui-monospace,monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--rule) var(--stock)}
body{
  background:var(--stock);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:
    radial-gradient(120% 60% at 8% 0%,rgba(66,56,102,.32),transparent 62%),
    radial-gradient(90% 55% at 100% 78%,rgba(38,50,66,.4),transparent 64%);
  background-attachment:fixed;
}
::selection{background:var(--mach);color:var(--stock)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--mach);outline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
svg{display:block}
.ico{width:1em;height:1em;stroke:currentColor;stroke-width:1.5;fill:none;
     stroke-linecap:round;stroke-linejoin:round;flex:none}

.sheet{max-width:1160px;margin:0 auto;padding:0 var(--gut)}
.lbl{font-family:var(--mono);font-weight:400;font-size:.6rem;letter-spacing:.16em;
     text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ─────────────────────────────────────────────────────────────
   Product chrome runs neutral.

   Brand colour is a marketing instrument. A surface somebody stares at for
   eight hours needs its colour budget for meaning — destructive, error,
   degraded — not for identity. So app surfaces set --mach to a neutral and
   the whole system desaturates in one line.

   Nothing breaks when it does, because every state marker in this system
   encodes SHAPE as well as hue: diamond is a machine, square is a person,
   a struck bar is closed, a ring is internal. Hue was always the second
   cue, never the only one.

   Marketing pages keep the periwinkle. Apps get this.
   ───────────────────────────────────────────────────────────── */
.chrome-neutral{
  --mach:#A8B2BF;         /* was periwinkle: now the machine hand in neutral */
  --mach-flat:#232A36;
  --on-flat:#E3E7EC;
  --lift:rgba(227,231,236,.07);   /* selection */
  --lift-soft:rgba(227,231,236,.04); /* hover */
}

/* ── masthead: the one flat colour field on any page ────────── */
.head{background:var(--mach-flat);color:var(--on-flat);position:relative}
.head::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:rgba(239,237,247,.24)}
.head .lbl{color:rgba(239,237,247,.74)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;
        padding:1.1rem 0;border-bottom:1px solid rgba(239,237,247,.2)}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--disp);font-weight:700;
       font-size:.95rem;letter-spacing:.01em}
.mark{width:15px;height:auto;color:var(--ink)}
.mark path{fill:currentColor;stroke:currentColor;stroke-width:32.564;
           stroke-linecap:round;stroke-linejoin:round}
.navlinks{display:flex;gap:1.4rem;align-items:center}
.navlinks a{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
            color:rgba(239,237,247,.76);display:flex;align-items:center;gap:.35rem;
            padding-bottom:2px;border-bottom:1px solid transparent;
            transition:color var(--snap),border-color .18s}
.navlinks a:hover{color:#FFFFFF;border-color:#FFFFFF}
@media(max-width:760px){.navlinks a:not(.gh){display:none}}

.masthead{padding:clamp(1.9rem,4.5vw,3.1rem) 0 clamp(2rem,4vw,2.8rem);
          display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);
          gap:clamp(1.5rem,4vw,3.5rem);align-items:end}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(3.2rem,10vw,5.2rem);
   line-height:.94;letter-spacing:-.035em}
.strap{font-family:var(--disp);font-weight:500;font-size:clamp(1.15rem,2.4vw,1.6rem);
       line-height:1.22;letter-spacing:-.02em;margin-top:.9rem;max-width:24ch}
.strap b{font-weight:700}
.blurb{font-size:.95rem;line-height:1.58;color:rgba(239,237,247,.8);max-width:47ch;margin-top:1rem}

.issued{display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(239,237,247,.26)}
.issued > div{padding:.75rem 0;border-bottom:1px solid rgba(239,237,247,.26)}
.issued .lbl{display:block;margin-bottom:.4rem}
.val{display:block;font-size:.9rem;color:rgba(239,237,247,.82)}
.val b{color:#FFFFFF;font-weight:600}
.val code{font-family:var(--mono);font-size:.85em;letter-spacing:-.02em}
.stamp{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.6rem;
       letter-spacing:.14em;text-transform:uppercase;padding:.34rem .6rem;
       border:1.5px solid currentColor;color:rgba(239,237,247,.82);transform:rotate(-1.2deg)}
.stamp .pip{width:5px;height:5px;background:currentColor;flex:none}

/* ── bands ──────────────────────────────────────────────────── */
.band{border-bottom:1px solid var(--rule)}
.bandhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
          padding:clamp(2.4rem,5vw,3.4rem) 0 1.1rem}
h2{font-family:var(--disp);font-weight:600;font-size:clamp(1.35rem,2.6vw,1.75rem);
   letter-spacing:-.025em;line-height:1.15}
.bandhead p{font-size:.92rem;color:var(--ink-2);max-width:64ch}
.bandhead .tighten{margin-top:.7rem}

/* ── thesis: display line, body note, mark in the empty half ── */
.thesis{padding:clamp(2.6rem,6vw,4rem) 0}
.thesis-grid{display:grid;grid-template-columns:var(--ruler) minmax(0,1fr) auto;gap:0}
.thesis-rule{border-right:1px solid var(--rule)}
.thesis-body{padding-left:1.1rem}
.thesis p{font-family:var(--disp);font-weight:500;font-size:clamp(1.3rem,3vw,2rem);
          line-height:1.28;letter-spacing:-.028em;max-width:26ch}
.thesis p + p{font-family:var(--sans);font-weight:400;font-size:.97rem;line-height:1.62;
              letter-spacing:0;max-width:58ch;color:var(--ink-2);margin-top:1.15rem}
.thesis em{font-style:normal;color:var(--mach)}
.watermark{width:clamp(8rem,15vw,13.5rem);height:auto;color:var(--rule);flex:none;
           align-self:center;justify-self:end;margin-left:clamp(1.5rem,4vw,3rem)}
.watermark path{fill:currentColor;stroke:currentColor;stroke-width:32.564;
                stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){.watermark{display:none}}

/* ── segmented filter ───────────────────────────────────────── */
.filters{display:flex;gap:0;border:1px solid var(--rule);align-self:center}
.filters button{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
                color:var(--ink-3);padding:.5rem .8rem;border-right:1px solid var(--rule);
                display:flex;align-items:center;gap:.45rem;transition:background var(--snap),color .18s}
.filters button:last-child{border-right:0}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--stock)}
.filters .swatch{width:7px;height:7px;flex:none}
.filters .sw-h{background:currentColor}
.filters .sw-m{background:currentColor;transform:rotate(45deg)}

/* ── the log / any ruled register ───────────────────────────── */
.log{border-top:1px solid var(--ink);margin-bottom:clamp(2.2rem,5vw,3.2rem)}
.logbar{display:flex;justify-content:space-between;align-items:center;gap:.9rem 1.4rem;
        flex-wrap:wrap;margin:1.8rem 0 .75rem}
.logcap{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
        color:var(--ink-3)}
.row{display:grid;grid-template-columns:var(--ruler) minmax(0,1fr);
     border-bottom:1px solid var(--rule-2);align-items:start;
     transition:opacity var(--snap),filter var(--snap)}
.row.mute{opacity:.15;filter:saturate(0)}
.tick{display:flex;align-items:center;gap:.55rem;padding:1.15rem .9rem 1.15rem 0;
      font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
      color:var(--ink-3);border-right:1px solid var(--rule);white-space:nowrap;
      font-variant-numeric:tabular-nums}
/* the nib carries state by shape as well as colour, so it survives desaturation */
.nib{width:9px;height:9px;flex:none}
.nib.live,.nib-m{background:var(--mach);transform:rotate(45deg)}
.nib.paused{border:1.5px solid var(--ink-3)}
.nib.stopped{height:2px;background:var(--ink-3)}
.nib.internal{border:1.5px solid var(--ink-3);transform:rotate(45deg)}  /* hollow diamond: zero radius anywhere in the system */
.nib-h{background:var(--ink)}
.row.live .tick{color:var(--mach)}

.entry{padding:1.15rem 0 1.15rem 1.1rem;min-width:0}
.entry .nm{font-family:var(--disp);font-weight:600;font-size:1.15rem;letter-spacing:-.02em;
           display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.row.live .entry .nm{color:var(--mach)}
a.row:hover .entry .nm{text-decoration:underline;text-underline-offset:4px;
                       text-decoration-thickness:1px;text-decoration-color:var(--mach)}
.entry .who{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
            color:var(--ink-3);margin-bottom:.28rem}
.row.m .entry .who{color:var(--mach)}
.entry .say{font-size:.95rem;line-height:1.5;color:var(--ink-2);max-width:64ch;margin-top:.3rem}
.entry .say em{font-style:normal;font-weight:600;color:var(--ink)}
.entry .say code{font-family:var(--mono);font-size:.85em;letter-spacing:-.02em;color:var(--mach)}
.entry .src{display:flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.6rem;
            letter-spacing:.08em;color:var(--ink-3);margin-top:.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin-top:.55rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.6rem;
      letter-spacing:.06em;color:var(--ink-2);border:1px solid var(--rule);padding:.22rem .45rem}
.row.m .chip{border-color:rgba(147,145,195,.4);color:var(--mach)}

/* ── specimen: the artifact that makes the argument ─────────── */
.spec{border:1px solid var(--rule);background:var(--field);margin-bottom:clamp(2rem,4vw,3rem)}
.spec .cap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
           padding:.65rem .95rem;border-bottom:1px solid var(--rule)}
.spec pre{font-family:var(--mono);font-size:.76rem;line-height:1.9;letter-spacing:-.02em;
          padding:1.05rem 1.2rem;overflow-x:auto;color:var(--ink-2);tab-size:2}
.spec .k{color:var(--mach)}
.spec .s{color:var(--ink)}
.spec .c{color:var(--ink-3)}
.spec .note{padding:.85rem .95rem;border-top:1px solid var(--rule);font-size:.87rem;color:var(--ink-2)}
.spec .note b{color:var(--ink);font-weight:600}

/* ── three-up (or two-up) of short statements ───────────────── */
.rules{--rgap:clamp(1.5rem,3.4vw,3rem);
       display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--rgap);
       border-top:1px solid var(--ink);margin-bottom:clamp(2.4rem,5vw,3.4rem)}
.rules.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.rule{position:relative;padding:1.2rem 0 1.5rem;border-bottom:1px solid var(--rule-2)}
.rule::after{content:"";position:absolute;top:0;bottom:-1px;right:calc(var(--rgap) / -2);
             width:1px;background:var(--rule-2)}
.rule:nth-child(3n)::after{content:none}
.rules.two .rule:nth-child(3n)::after{content:""}
.rules.two .rule:nth-child(2n)::after{content:none}
.rule h3{font-family:var(--disp);font-weight:600;font-size:1.05rem;letter-spacing:-.018em;
         margin:.45rem 0 .35rem}
.rule p{font-size:.9rem;color:var(--ink-2);max-width:42ch}
.rule .lbl{display:block}
.rule code{font-family:var(--mono);font-size:.85em;letter-spacing:-.02em;color:var(--mach)}
@media(max-width:820px){
  .rules,.rules.two{grid-template-columns:1fr}
  .rule::after,.rule:nth-child(3n)::after,
  .rules.two .rule:nth-child(3n)::after,.rules.two .rule:nth-child(2n)::after{content:none}
}

/* ── close ──────────────────────────────────────────────────── */
.close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:clamp(1.5rem,4vw,3.5rem);
       padding:clamp(2.4rem,5vw,3.4rem) 0 clamp(2.6rem,5vw,3.6rem)}
.close p{font-size:.97rem;color:var(--ink-2);max-width:58ch;margin-top:.9rem}
.close p b{color:var(--ink);font-weight:600}
.close code{font-family:var(--mono);font-size:.85em;letter-spacing:-.02em;color:var(--mach)}
.mailbox{border:1px solid var(--ink);padding:1.3rem 1.4rem;background:var(--field);align-self:start}
.mailbox h3{font-family:var(--disp);font-weight:600;font-size:1.05rem;letter-spacing:-.018em;
            margin-bottom:.35rem}
.mailbox p{font-size:.87rem;color:var(--ink-2);margin-bottom:1rem}
.mailto{display:inline-flex;align-items:center;gap:.5rem;background:var(--ink);color:var(--stock);
        font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;padding:.65rem .9rem;
        transition:background var(--snap)}
.mailto:hover{background:var(--mach);color:var(--stock)}

footer{border-top:1px solid var(--ink);padding:1.5rem 0 2.6rem}
.frev{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1.4rem}
.fbrand{display:inline-flex;align-items:center;gap:.6rem}
.fbrand .mark{color:var(--mach)}
footer a{border-bottom:1px solid var(--rule);transition:border-color var(--snap)}
footer a:hover{border-bottom-color:var(--ink)}

@media(max-width:860px){
  :root{--ruler:5.6rem}
  .masthead{grid-template-columns:1fr;align-items:start;gap:1.8rem}
  .close{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}