:root{--bg:#F6F1E7;--text:#1D1B18;--accent:#0F766E;--primary:#B8431B;--surface:#FFFCF5;--ink:#1D1B18;--muted:#524C41;--rule:#CDBFA6;--font-h:'Newsreader','Iowan Old Style',Georgia,serif;--font-b:'Hanken Grotesk',system-ui,sans-serif}
*{box-sizing:border-box}
.how-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;align-items:center}
.how-fig{margin:0}
.road-h{margin-top:2rem}
.timeline{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.timeline li{position:relative;padding:1rem 1rem 0 0;border-right:1px solid var(--rule);margin-right:1rem}
.timeline li:last-child{border-right:0;margin-right:0}
.timeline li::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--primary)}
.timeline .when{display:block;font-family:var(--font-h);font-weight:700;font-size:1.15rem;color:var(--accent);margin-bottom:.25rem}
@media (max-width:700px){.timeline{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--ink)}.timeline li{border-right:0;margin:0 0 1rem;padding:0 0 0 1rem}.timeline li::before{top:.3rem;left:-6px}}
.how-fig img{width:100%;max-height:340px;object-fit:cover;border:1px solid var(--rule)}
@media(min-width:861px){.how-grid{grid-template-columns:340px minmax(0,1fr);gap:2.5rem}}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.65 var(--font-b);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-underline-offset:3px}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--font-h);font-weight:400;line-height:1.08;margin:0 0 .5em;letter-spacing:0}
h1{font-size:clamp(2.6rem,5.8vw,4.7rem)}
h2{font-size:clamp(2.1rem,3.8vw,3rem)}
h3{font-size:1.7rem}
p{margin:0 0 1em}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:var(--text);color:#fff;padding:10px 14px;z-index:99}
.skip:focus{left:8px;top:8px}
.muted{color:var(--muted)}
.kicker{font:700 .74rem/1 var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;display:inline-block}
.kicker::before{content:"";display:inline-block;width:28px;border-top:2px solid currentColor;vertical-align:middle;margin-right:10px}

/* masthead: cream paper, thin rules, ink only in the type */
.masthead{background:var(--surface);color:var(--text);border-bottom:1px solid var(--text)}
.mast-main{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:10px 0 0;flex-wrap:nowrap}
.sticker{display:none}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);padding-bottom:8px;flex:none}
.brand img{width:52px;height:52px;border-radius:6px;border:1px solid var(--text);background:var(--bg)}
.brand-name{font:400 2rem/1 var(--font-h);white-space:nowrap}
.brand:hover{color:var(--primary)}
.nav-toggle{display:none;background:transparent;border:1px solid var(--text);padding:9px 14px;font:600 1rem var(--font-b);color:var(--text);cursor:pointer;min-height:44px;border-radius:4px}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap;align-items:flex-end}
nav a{display:inline-block;padding:10px 11px 8px;white-space:nowrap;color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem;border:1px solid var(--rule);border-bottom:0;border-radius:8px 8px 0 0;background:var(--bg)}
nav a:hover{color:var(--primary);background:#fff;border-color:var(--text)}
nav a[aria-current=page]{color:#fff;background:var(--primary);border-color:var(--primary)}
.mast-main nav{margin-left:auto}
@media(max-width:900px){
 .mast-main{padding-bottom:10px;flex-wrap:wrap;align-items:center}
 .brand{padding-bottom:0}
 .nav-toggle{margin-left:auto}
 .nav-toggle{display:block}
 nav,.mast-main nav{width:100%}
 nav ul{display:none;flex-direction:column;align-items:stretch;border-top:1px solid var(--rule);padding-top:8px}
 nav ul.open{display:flex}
 nav a{width:100%;padding:12px 10px;border-bottom:1px solid var(--rule);border-radius:4px}
}

/* generic */
main{display:block}
section{padding:48px 0}
.sec-head{display:flex;align-items:baseline;gap:8px 20px;flex-wrap:wrap;border-bottom:1px solid var(--text);padding-bottom:10px;margin-bottom:26px}
.sec-head h2{margin:0}
.sec-head p{margin:0}
/* painted plates */
.plate{margin:0}
.plate img{width:100%;height:auto;border:1px solid var(--rule);background:#fff;padding:6px;box-shadow:4px 5px 0 var(--rule)}
.plate.tall img{max-height:520px;object-fit:cover}
.split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:center;margin-bottom:22px}
.split.wide-first{grid-template-columns:minmax(0,1fr) 280px;align-items:start}
.banner{margin:0 0 18px}
.banner img{width:100%;height:auto;max-height:300px;object-fit:cover;border:1px solid var(--rule);background:#fff;padding:6px}
.head-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:32px;align-items:center;text-align:left}
.head-split .deck{margin-left:0}
.story{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
@media(max-width:980px){.split,.split.wide-first,.head-split,.story{grid-template-columns:1fr}.plate{max-width:420px}}
.hero-sub{margin:14px 0 0;font-size:.95rem}
.steps{padding-left:1.4em;max-width:860px}
.steps li{margin-bottom:.6em}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:16px}
.plan{background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--rule);padding:20px}
.plan.now{border-top-color:var(--accent)}
.plan h3{margin:6px 0 4px}
.plan .price{font:600 1.15rem var(--font-b);color:var(--primary);margin:0 0 10px}
.plan ul{padding-left:18px;margin:0}
@media(max-width:860px){.plans{grid-template-columns:1fr}}
.early .panel{max-width:620px;margin:0 auto}
.early .wrap{display:block}
.btn{display:inline-block;background:var(--primary);color:#fff;border:2px solid var(--primary);padding:11px 22px;font:700 1rem var(--font-b);text-decoration:none;cursor:pointer;min-height:44px;border-radius:3px}
.btn:hover{background:#8F3112;border-color:#8F3112;color:#fff}
.btn.alt{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn.alt:hover{background:var(--primary);color:#fff}
.btn.sm{padding:6px 12px;font-size:.9rem;min-height:36px}
.btn[disabled]{opacity:.6;cursor:wait}
input,select,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid #6F6552;border-radius:3px;padding:10px 12px;width:100%;min-height:44px}
textarea{resize:vertical;min-height:96px}
label{display:block;font-weight:600;margin:0 0 6px;font-size:.95rem}
.field{margin-bottom:16px}
.row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:24px;box-shadow:4px 4px 0 var(--rule)}
.status{min-height:1.5em;font-weight:600;color:var(--accent)}
.status.err{color:#a3220a}

/* home cover: wide watercolor plate, headline plate laid over its lower edge */
.cover{padding:40px 0 28px;position:relative}
.cover-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:36px;align-items:center}
.cover-photo{position:relative;margin:0;background:#fff;padding:12px 12px 8px;border:1px solid var(--rule);box-shadow:6px 8px 0 var(--rule);transform:rotate(-1.2deg)}
.cover-photo figcaption{font:italic 400 1.05rem var(--font-h);color:var(--muted);padding:6px 2px 0;text-align:center}
.cover-img{width:100%;height:clamp(260px,28vw,360px);object-fit:cover;object-position:center 40%}
.cover-card{background:var(--surface);border:1px solid var(--text);padding:clamp(20px,3.4vw,40px);position:relative;box-shadow:8px 8px 0 var(--rule);transform:rotate(.8deg) translateX(-8px);text-align:center}
.cover-card .deck{margin-left:auto;margin-right:auto}
.cover-card .kicker::after{content:"";display:inline-block;width:28px;border-top:2px solid currentColor;vertical-align:middle;margin-left:10px}
@media(max-width:860px){.cover-grid{grid-template-columns:1fr;gap:30px}.cover-card{transform:none}.cover-photo{transform:rotate(-1.4deg);margin:0 6px}}
.cover-card h1{margin-bottom:.3em;font-size:clamp(2.2rem,4.2vw,3.8rem)}
.cover{padding:24px 0 20px}
.cover-card h1 em{color:var(--primary);font-style:italic}
.cover-card .deck{font-size:1.15rem;color:var(--muted);max-width:42em}

/* tool index: a pinned board, slightly tilted slips on a ruled strip */
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:28px 18px;background:repeating-linear-gradient(0deg,transparent 0 31px,#E4D9C3 31px 32px)}
.rail a{display:flex;flex-direction:column;padding:20px;text-decoration:none;color:var(--text);background:var(--surface);box-shadow:3px 4px 0 var(--rule);border:1px solid var(--rule);transform:rotate(-1.2deg)}
.rail a:nth-child(2){transform:rotate(.9deg);margin-top:10px}
.rail a:nth-child(3){transform:rotate(-.6deg)}
.rail a:nth-child(4){transform:rotate(1.3deg);margin-top:8px}
.rail a:hover{transform:rotate(0) translateY(-3px);box-shadow:5px 7px 0 var(--rule)}
.rail .no{font:500 2rem/1 var(--font-h);font-style:italic;color:var(--primary);margin-bottom:10px}
.rail h3{margin:0 0 6px}
.rail p{margin:0 0 14px;color:var(--muted);font-size:.96rem;flex:1}
.rail .go{font-weight:700;color:var(--accent);font-size:.92rem}
.flow{margin:18px 0 0}
@media(max-width:960px){.rail{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rail{grid-template-columns:1fr;padding:20px 10px}.cover-img{height:280px}}

/* table of contents: 2x2, large folios, thin rules */
.rail.toc{grid-template-columns:repeat(2,1fr);gap:0;padding:0;background:none;border-top:2px solid var(--text);border-bottom:1px solid var(--text)}
.rail.toc a,.rail.toc a:nth-child(n){flex-direction:row;gap:20px;align-items:flex-start;padding:24px 22px;background:transparent;border:0;border-bottom:1px solid var(--rule);box-shadow:none;transform:none;margin:0}
.rail.toc a:nth-child(odd){border-right:1px solid var(--rule)}
.rail.toc a:nth-child(n+3){border-bottom:0}
.rail.toc a:hover{background:var(--surface);transform:none;box-shadow:none}
.rail.toc .no{font:400 4.6rem/.85 var(--font-h);font-style:italic;color:var(--primary);margin:0;min-width:1.6em}
.toc-body{display:flex;flex-direction:column;flex:1}
.toc-folio{font:700 .7rem/1 var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
@media(max-width:700px){.rail.toc{grid-template-columns:1fr}.rail.toc a:nth-child(odd){border-right:0}.rail.toc a:nth-child(n+3){border-bottom:1px solid var(--rule)}.rail.toc a:last-child{border-bottom:0}.rail.toc .no{font-size:3.2rem}}

/* folio bar and page numbers (home) */
.folio-bar{border-bottom:1px solid var(--rule);font:700 .68rem/1 var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.folio-bar .wrap{display:flex;justify-content:space-between;gap:12px;padding-top:7px;padding-bottom:7px}
@media(max-width:700px){.folio-bar .wrap span:nth-child(2){display:none}}
body.home{counter-reset:folio 1}
body.home .sec-head::after{counter-increment:folio;content:"p. " counter(folio,decimal-leading-zero);margin-left:auto;font:700 .72rem var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.lede{font-size:1.25rem}
.pull{font:italic 400 clamp(1.6rem,3.2vw,2.5rem)/1.22 var(--font-h);border-top:1px solid var(--text);border-bottom:1px solid var(--text);padding:26px 0;margin:0 auto;max-width:900px;text-align:center;color:var(--ink)}
.pull::before{content:"\201C";display:block;font-size:4rem;line-height:.6;color:var(--primary)}
.cols{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
@media(max-width:760px){.cols{grid-template-columns:1fr}}

/* the case: a vertical timeline on a single rule */
.pitch-grid{display:flex;flex-direction:column;max-width:860px;margin-left:12px;border-left:2px solid var(--text)}
.pitch{position:relative;padding:0 0 28px 34px}
.pitch::before{content:"";position:absolute;left:-9px;top:.45em;width:16px;height:16px;background:var(--bg);border:3px solid var(--primary);border-radius:50%}
.pitch h3{margin:0 0 6px;color:var(--primary)}
.pitch p{margin:0}
.cta-block{margin-top:6px;padding:20px 24px 20px 34px;background:var(--surface);border:1px dashed var(--text);margin-left:34px;padding-left:24px}
.cta-block::before{display:none}
.cta-block h3{color:var(--text)}
.cta-block p{margin-bottom:16px}

/* field notes: narrow newspaper columns, no card boxes */
.notes{column-count:3;column-gap:44px;column-rule:1px solid var(--rule)}
.card{break-inside:avoid;margin:0 0 34px;padding:0}
.card h3{font-size:1.65rem}
.card>p:first-of-type::first-letter{font:500 3.2rem/.85 var(--font-h);float:left;padding:6px 8px 0 0;color:var(--primary)}
@media(max-width:960px){.notes{column-count:1}}
.ba{display:grid;gap:10px;margin:16px 0}
.ba>div{padding:10px 12px;font-size:.95rem;border-left:3px solid var(--rule);background:#EFE7D6}
.ba .ex-label{justify-self:start;font:700 .72rem/1 var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--accent);padding:5px 9px;border-radius:2px}
.ba .after{border-left-color:var(--accent)}
.ba b{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* tool pages: wide bench, marginal notes as a ruled column */
.page-head{padding:40px 0 24px;border-bottom:1px solid var(--text)}
.page-head p.deck{font-size:1.15rem;color:var(--muted);max-width:40em;margin:0}
.page-head{text-align:center}
.page-head p.deck{margin-left:auto;margin-right:auto}
.tool{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:48px;padding:36px 0 64px 34px;position:relative;border-left:3px double var(--primary);background:radial-gradient(circle at 12px 50%,var(--rule) 0 5px,transparent 6px) 0 0/28px 64px repeat-y}
@media(max-width:980px){.tool{grid-template-columns:1fr;gap:28px}}
.margin{border-left:1px solid var(--text);padding:0 0 0 22px;font-size:.95rem;align-self:start}
.margin h2{font-size:1.4rem;font-style:italic}
.margin ul{padding-left:18px;margin:0 0 18px}
@media(max-width:980px){.margin{border-left:0;border-top:1px solid var(--text);padding:20px 0 0}}
.tool section{padding:0 0 36px}
.tool h2{border-top:1px solid var(--text);padding-top:16px}
pre.out{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:18px;white-space:pre-wrap;word-wrap:break-word;font:.93rem/1.55 ui-monospace,Menlo,Consolas,monospace;margin:0 0 14px}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.recipes{list-style:none;padding:0;margin:0;display:grid;gap:0}
.recipes li{border-bottom:1px solid var(--rule);padding:16px 0}
.recipes h3{margin:0 0 4px;font-size:1.35rem}
.tag{display:inline-block;background:var(--surface);border:1px solid var(--rule);padding:0 8px;margin:0 6px 6px 0;font:600 .8rem var(--font-b);border-radius:20px}

/* pipeline */
.board{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:12px;overflow-x:auto;padding-bottom:10px}
.col{background:#EDE4D1;border:1px solid var(--rule);min-height:220px;padding:10px}
.col.over{background:#DDEBE6;outline:2px dashed var(--accent)}
.col h3{font:700 .95rem var(--font-b);display:flex;justify-content:space-between;margin:0 0 10px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--text);padding-bottom:6px}
.col .count{color:var(--muted);font-size:.9rem}
.pcard{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--primary);padding:10px;margin-bottom:10px;cursor:grab;font-size:.92rem}
.pcard.dragging{opacity:.4}
.pcard h4{font:700 1rem var(--font-b);margin:0 0 4px}
.pcard p{margin:0 0 8px;color:var(--muted)}
.pcard select{min-height:36px;padding:4px 6px;font-size:.9rem;margin-bottom:6px}
.chk{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin:2px 0;font-size:.88rem}
.chk input{width:18px;min-height:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--accent)}
.prog{font-size:.8rem;font-weight:700;color:var(--accent);margin:6px 0}

/* chart / results */
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin:12px 0 24px;border-top:1px solid var(--text);border-bottom:1px solid var(--text)}
.stat{padding:16px;border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
.stat b{display:block;font:500 2.4rem/1.1 var(--font-h);color:var(--primary)}
.stat span{font-size:.9rem;color:var(--muted)}
.chart{background:var(--surface);border:1px solid var(--rule);padding:12px}
.chart svg{width:100%;height:auto}
.figcap{font-size:.85rem;color:var(--muted);margin-top:8px}
.chart text{font-family:var(--font-b);fill:var(--text)}

/* AI */
.aiform{border-top:1px solid var(--text);padding:22px 0 0;margin-bottom:28px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.chip{background:var(--surface);border:1px solid #6F6552;border-radius:20px;padding:6px 12px;font:500 .88rem var(--font-b);color:var(--text);cursor:pointer;min-height:36px;text-align:left}
.chip:hover{border-color:var(--primary);background:#fff}
.ai-out{margin-top:16px}
.ai-out ol,.ai-out ul{padding-left:22px}
.ai-out li{margin-bottom:6px}
.ai-out table{border-collapse:collapse;width:100%;font-size:.95rem}
.ai-out th,.ai-out td{border:1px solid var(--rule);padding:8px 10px;text-align:left;vertical-align:top}
.ai-out th{background:#EDE4D1}
.ai-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.tablewrap{overflow-x:auto}
.trial{background:var(--surface);border-top:1px solid var(--text);border-bottom:1px solid var(--text);padding:28px 0}
.trial .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px 40px;align-items:start}
.trial .kicker{grid-column:1/-1;justify-self:start;margin:0}
.trial .aiform{border:0;padding:0;margin:0;background:none}
.sample{background:var(--bg);border:1px dashed #6F6552;padding:20px}
.sample h3{font-size:1.4rem}
.sample ol{padding-left:22px;margin:0;font-size:.95rem}
.sample li{margin-bottom:5px}
@media(max-width:900px){.trial .wrap{grid-template-columns:1fr}}

/* prose */
.prose{max-width:60em;padding:40px 0 64px}
.prose>p,.prose>ul,.prose>ol,.prose>h2{max-width:46em}
.prose h2{margin-top:1.6em}
.prose li{margin-bottom:.4em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

footer{background:var(--text);color:#EFE7D6;margin-top:40px;padding:30px 0 40px;font-size:.95rem;border-top:3px double var(--primary)}
footer a{color:#fff}
footer a:hover{color:#F2B79F}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}
footer p{margin:0}
.foot-brand{display:flex;gap:10px;align-items:center}
.foot-brand img{width:40px;height:40px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
