/* Pugh Systems — shared system for inner pages (matches the Nov 2026 homepage).
   Brand: Anton + IBM Plex Sans, ink / paper / rust, PUGH lockup.
   House rules: no mono labels, no eyebrows, no 01/02 index numerals, no hairlines,
   no grain, no glass, no gradients, no shadows at rest. Separate with space and tone steps. */
:root{
  --ink:#ECE5D6; --paper:#12171F; --paper-2:#1B222D; --paper-3:#232C39;
  --rust:#D9693C; --rust-deep:#B24A22; --on-rust:#14100C; --muted:#B4B7BC;
  --letter:#F7F4EE; --letter-ink:#141A24;
  --display:'Anton',Impact,'Arial Narrow',sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --m:clamp(20px,5vw,72px);
  --gap:clamp(88px,11vw,160px);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--rust);text-underline-offset:4px}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
p,li{max-width:66ch}
[hidden]{display:none!important}

/* type */
h1,h2,.d{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.005em}
h1{font-size:clamp(44px,10vw,150px);line-height:.88;text-wrap:balance}
h1 .r,h2 .r{color:var(--rust)}
h2{font-size:clamp(40px,5.4vw,76px);line-height:.92;text-wrap:balance}
h3{font-size:21px;font-weight:600;line-height:1.3}
.lead{font-size:clamp(19px,1.7vw,23px);line-height:1.5}
.muted{color:var(--muted)}
.fine{font-size:15px;color:var(--muted)}
.kicker{font-size:17px;color:var(--muted);margin-top:14px} /* a plain sentence-case line, never a label */

/* layout */
.frame{padding-inline:var(--m)}
.sec{margin-top:var(--gap);padding-inline:var(--m)}
.sec > h2 + *{margin-top:24px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.split.end{align-items:end}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:900px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.split,.grid3{grid-template-columns:1fr}}
@media (max-width:640px){.grid2,.grid4{grid-template-columns:1fr}}

/* surfaces (tone steps instead of lines) */
.card{background:var(--paper-2);padding:clamp(22px,2.8vw,40px)}
.card.deep{background:var(--paper-3)}
.card h3 + p,.card h3 + span{margin-top:6px}
.card p{color:var(--muted)}
.card .d{font-size:clamp(30px,3vw,44px);line-height:1}
.band{margin-top:var(--gap);padding:clamp(64px,8vw,112px) var(--m);background:var(--paper-2)}
.band.rust{background:var(--rust);color:var(--on-rust)}
.band.rust a:not(.btn){color:var(--on-rust)}
.band.rust .muted,.band.rust .fine{color:var(--on-rust);opacity:.85}
.letter{background:var(--letter);color:var(--letter-ink);padding:clamp(24px,3vw,40px)}
.letter a{color:var(--rust-deep)}

/* lists */
.rows{list-style:none;display:grid;gap:8px}
.rows > li{background:var(--paper-2);padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) 104px;gap:8px 28px;align-items:baseline;max-width:none}
.rows > li h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.4vw,32px);line-height:1}
.rows > li p{color:var(--muted)}
.rows > li .tag{justify-self:end}
@media (max-width:820px){.rows > li .tag{justify-self:start;margin-top:6px}}
@media (max-width:820px){.rows > li{grid-template-columns:1fr}}
ol.steps{list-style:none;display:grid;gap:8px;counter-reset:s}
ol.steps > li{counter-increment:s;background:var(--paper-2);padding:clamp(22px,2.6vw,34px);display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;max-width:none}
ol.steps > li::before{content:counter(s);font-family:var(--display);font-size:44px;line-height:.9;color:var(--rust)}
ol.steps h3{margin-bottom:8px}
ol.steps p{margin-bottom:10px}
@media (max-width:640px){ol.steps > li{grid-template-columns:1fr;gap:4px}}
ul.ticks{list-style:none;display:grid;gap:10px}
ul.ticks li{padding-left:28px;position:relative}
ul.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:12px;background:var(--rust)}

/* tags (filled, not outlined) */
.tag{display:inline-block;font:600 14px/1 var(--body);padding:8px 12px;background:var(--paper-3);color:var(--muted);white-space:nowrap;text-decoration:none}
.tag.live{background:var(--rust);color:var(--on-rust)}
a.tag.live:hover{background:var(--ink);color:var(--paper)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 17px/1 var(--body);text-decoration:none;padding:17px 26px;background:var(--ink);color:var(--paper);border:0;cursor:pointer;transition:transform .18s var(--ease),background .18s,color .18s}
.btn:hover{background:var(--rust);color:var(--on-rust)}
.btn:active{transform:scale(.97)}
.btn.rust{background:var(--rust);color:var(--on-rust)}
.btn.rust:hover{background:var(--ink);color:var(--paper)}
.btn.quiet{background:var(--paper-3);color:var(--ink)}
.btn.quiet:hover{background:var(--ink);color:var(--paper)}
.band.rust .btn{background:var(--on-rust);color:var(--rust)}
.band.rust .btn:hover{background:var(--paper);color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:32px}

/* forms */
label{font-weight:600;font-size:16px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--paper-3);border:0;padding:15px 17px;width:100%}
input::placeholder,textarea::placeholder{color:#8B9099}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--rust);outline-offset:0}
form.inline{display:flex;flex-wrap:wrap;gap:8px;max-width:560px;margin-top:28px}
form.inline label{flex-basis:100%}
form.inline input{flex:1 1 240px;width:auto;min-width:0}

/* code / prompts keep monospace (real code) */
pre,code{font-family:ui-monospace,Menlo,Consolas,monospace}
pre{background:var(--paper-3);color:var(--ink);padding:22px;font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word;overflow:auto}

/* bar */
.bar{position:sticky;top:0;z-index:30;background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px var(--m)}
.lock{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.lock svg{height:30px;width:auto}
.lock b{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.04em}
.bar nav ul{list-style:none;display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.bar nav a{color:var(--ink);text-decoration:none;font:500 16px var(--body)}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--rust)}
@media (max-width:700px){.bar nav .hide-s{display:none}}

/* page header */
.head{padding:clamp(32px,6vw,88px) var(--m) 0}
.head .lead{margin-top:28px;max-width:40ch}
.head.split{align-items:end}

footer.foot{margin-top:var(--gap);padding:36px var(--m) 48px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--muted);font-size:15px;background:var(--paper)}
footer.foot a{color:inherit}

/* motion: transform + opacity only, content visible without script */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .rise{opacity:1!important;transform:none!important;transition:none!important}}