@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/InstrumentSerif-normal-400.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/InstrumentSerif-italic-400.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/HankenGrotesk.woff2) format("woff2")}

:root{
  --paper:#f6f1e8; --paper-2:#eee7da; --ink:#1c1a16; --ink-2:#2a2620;
  --text:#2b2722; --muted:#655d51; --brass:#7a5a1f; --brass-soft:#b08d45;
  --rule:#d9cfbd; --on-ink:#efe8da; --on-ink-muted:#b9ae9a;
  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Hanken Grotesk",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:400 1.0625rem/1.65 var(--sans);font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased}
::selection{background:var(--brass);color:var(--paper)}
a{color:inherit;text-decoration-color:var(--brass-soft);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--brass)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
.on-ink :focus-visible{outline-color:var(--brass-soft)}
html{scrollbar-color:var(--brass-soft) var(--paper-2)}
img,svg{display:block;max-width:100%}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:10}
.skip:focus{left:8px}

/* header */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:26px var(--gutter);max-width:1240px;margin:0 auto}
.wordmark{font:400 1.5rem/1 var(--serif);letter-spacing:.01em;text-decoration:none;color:var(--ink)}
.wordmark i{color:var(--brass);font-style:italic}
.top nav{display:flex;gap:clamp(14px,3vw,34px);font-size:.9rem;letter-spacing:.02em}
.top nav a{text-decoration:none;color:var(--muted);padding:6px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.top nav a:hover{color:var(--ink);border-color:var(--brass-soft)}
@media (max-width:560px){.top nav a.opt{display:none}}

/* hero */
.hero{max-width:1240px;margin:0 auto;padding:clamp(36px,7vw,96px) var(--gutter) clamp(56px,8vw,112px);display:grid;gap:48px;grid-template-columns:1fr}
.hero h1{font:400 clamp(2.9rem,8.4vw,6rem)/1.02 var(--serif);letter-spacing:-.02em;color:var(--ink);margin:0;text-wrap:balance}
.hero h1 em{color:var(--brass);font-style:italic}
.hero .sub{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--muted);max-width:34rem;margin:28px 0 0;line-height:1.6;text-wrap:pretty}
.actions{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:38px}
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;padding:15px 28px;font-size:.95rem;letter-spacing:.03em;border-radius:2px;transition:background .3s,transform .4s var(--ease)}
.btn:hover{background:var(--brass);transform:translateY(-1px)}
.link{font-size:.95rem;letter-spacing:.03em;color:var(--ink);text-decoration-color:var(--brass);padding:4px 0}
.portrait{margin:0;max-width:440px}
.portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:2px;background:var(--paper-2);box-shadow:0 1px 2px rgba(28,26,22,.08),0 24px 48px -24px rgba(28,26,22,.35)}
.portrait figcaption{font:italic 1.05rem/1.3 var(--serif);color:var(--muted);margin-top:14px;letter-spacing:.01em}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(40px,6vw,96px);align-items:end}
  .portrait{justify-self:end;width:100%}
}

/* sections */
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.band{padding:clamp(56px,9vw,120px) 0;border-top:1px solid var(--rule)}
.grid2{display:grid;gap:28px clamp(40px,7vw,110px);grid-template-columns:1fr}
@media (min-width:900px){.grid2{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
h2{font:400 clamp(2rem,4.6vw,3.25rem)/1.08 var(--serif);letter-spacing:-.015em;color:var(--ink);margin:0;text-wrap:balance}
.prose p{margin:0 0 1.2em;max-width:38rem;text-wrap:pretty}
.prose .first{font:400 clamp(1.45rem,2.6vw,1.9rem)/1.3 var(--serif);color:var(--ink);letter-spacing:-.005em;max-width:34rem}
.creds{margin:40px 0 0;display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--rule)}
.creds div{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:.97rem}
.creds dt{color:var(--muted)}
.creds dd{margin:0;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}

.approach{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.approach li{display:grid;gap:8px 40px;grid-template-columns:1fr;padding:30px 0;border-bottom:1px solid var(--rule)}
@media (min-width:760px){.approach li{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:baseline}}
.approach h3{font:400 clamp(1.5rem,2.6vw,2rem)/1.15 var(--serif);color:var(--ink);margin:0}
.approach p{margin:0;color:var(--muted);max-width:36rem}

/* ink band */
.on-ink{background:var(--ink);color:var(--on-ink);border-top:0}
.on-ink h2{color:var(--on-ink)}
.on-ink h2 em{color:var(--brass-soft)}
.on-ink p{color:var(--on-ink-muted);max-width:36rem;margin:0 0 1.1em}
.on-ink a{color:var(--on-ink);text-decoration-color:var(--brass-soft)}
.on-ink ::selection{background:var(--brass-soft);color:var(--ink)}

/* contact */
.phone{display:inline-block;font:400 clamp(2.4rem,7vw,4.6rem)/1 var(--serif);letter-spacing:-.01em;color:var(--ink);text-decoration:none;font-variant-numeric:lining-nums;border-bottom:1px solid var(--brass-soft);padding-bottom:6px;transition:color .3s}
.phone:hover{color:var(--brass)}
.contact-list{margin:36px 0 0;display:grid;gap:22px 48px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));font-style:normal}
.contact-list b{display:block;font-weight:500;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}

/* footer */
.foot{background:var(--paper-2);margin-top:0;padding:48px 0 56px;font-size:.88rem;color:var(--muted);line-height:1.7}
.foot .wrap{display:grid;gap:18px}
.foot p{margin:0;max-width:52rem}
.foot nav{display:flex;gap:26px}
.foot a{color:var(--ink)}

/* document pages */
.doc{max-width:760px;margin:0 auto;padding:clamp(32px,6vw,72px) var(--gutter) 40px}
.doc h1{font:400 clamp(2.6rem,7vw,4.2rem)/1.04 var(--serif);letter-spacing:-.02em;color:var(--ink);margin:0 0 12px;text-wrap:balance}
.doc .date{color:var(--muted);margin:0 0 28px;font-size:.95rem}
.doc h2{font:400 1.7rem/1.2 var(--serif);letter-spacing:-.005em;margin:2.6em 0 .5em;padding-top:1.4em;border-top:1px solid var(--rule)}
.doc p,.doc li{max-width:68ch;text-wrap:pretty}
.doc ul{padding-left:1.15rem}
.doc li{margin:.4em 0}
.doc li::marker{color:var(--brass)}
.draft{border:1px solid var(--brass-soft);background:#efe3c6;color:#4a3711;padding:12px 16px;border-radius:2px;font-size:.92rem;margin:0 0 32px;max-width:68ch}
.back{display:inline-block;margin-bottom:8px;font-size:.92rem;color:var(--muted)}

/* the one motion moment: headline rises in, line by line */
@media (prefers-reduced-motion:no-preference){
  .rise{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
  .rise>span{display:block;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
  .rise:nth-child(2)>span{animation-delay:.12s}
  .rise:nth-child(3)>span{animation-delay:.24s}
  @keyframes rise{to{transform:none}}
  .fade{opacity:0;animation:fade 1.2s var(--ease) .5s forwards}
  @keyframes fade{to{opacity:1}}
}
@media print{body{background:#fff}.top nav,.portrait{margin:0;max-width:440px}
.portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:2px;background:var(--paper-2);box-shadow:0 1px 2px rgba(28,26,22,.08),0 24px 48px -24px rgba(28,26,22,.35)}
.portrait figcaption{font:italic 1.05rem/1.3 var(--serif);color:var(--muted);margin-top:14px;letter-spacing:.01em}}