/* ============================================================
   Heath Johnson — brand.css
   Single source for the warm paper world. See ventures/consulting/DESIGN.md.
   Rules that matter:
     - Texture lives behind content. Never over type.
     - Ink is #23201B. #000 never appears.
     - Square corners everywhere, including images.
     - No box-shadow. Depth = paper value change, rules, or field flip.
     - Amber is rationed: one display phrase, plus small functional marks.
     - Young Serif is Regular-only with no italic. In long-form, the serif
       sets the display line and nothing else. Emphasis goes to Figtree.
   ============================================================ */

:root{
  --paper:#EEEAE2; --paper-lift:#F5F2EC; --paper-deep:#E5DFD3;
  --ink:#23201B; --ink-soft:#4A453C; --ink-faint:#7C7466;
  --amber:#C77A22; --amber-deep:#9A5A0E;
  --rule:#CFC7B8; --rule-faint:#DED7C9;
  --err:#9B2C1F;
  --max:1180px;
  --serif:'Young Serif',Georgia,serif;
  --sans:'Figtree',system-ui,-apple-system,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}

body{
  font-family:var(--sans);
  color:var(--ink);
  background-color:var(--paper);
  line-height:1.62;
  font-size:16px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.055' numOctaves='5' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='900' height='900' filter='url(%23m)' opacity='0.13'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23s)' opacity='0.12'/></svg>");
  background-blend-mode:multiply,multiply;
  background-attachment:fixed;
}

img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:99}
.skip:focus{left:0}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.014em;line-height:1.1}
h1{font-size:clamp(2.15rem,4vw,3.15rem);line-height:1.07;letter-spacing:-.016em}
h2{font-size:clamp(1.85rem,3.1vw,2.5rem);line-height:1.12}
h3{font-size:24px;line-height:1.18}
h4{font-size:19px}

/* THE ONE CUT RULE, enforced. Young Serif ships Regular 400 with no italic, so
   any <em>/<i>/<strong> inside a serif heading would be synthesized by the
   browser (smeared bold, slanted fake italic). Emphasis is carried in colour. */
h1 em,h2 em,h3 em,h4 em,h1 i,h2 i,h3 i,h4 i{font-style:normal;color:var(--amber-deep)}
h1 strong,h2 strong,h3 strong,h4 strong,h1 b,h2 b,h3 b,h4 b{font-weight:400;color:var(--amber-deep)}

.lbl{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-deep)}
.kicker{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.kicker i{width:34px;height:2px;background:var(--amber);display:block;flex:none}
.deck{margin-top:22px;font-size:20.5px;line-height:1.45;font-weight:500;max-width:46ch}
.lede{margin-top:16px;font-size:17px;line-height:1.62;color:var(--ink-soft);max-width:56ch}

/* ---------- shell ---------- */
.wrap,.nav-inner,.v-hero-inner,.v-pain-inner,.v-proof-grid,.v-how-inner,.v-cta-inner,
.footer-inner,.article-header,.article-body,.writing-header,.post-list,
.signup-inner,.signup-inline-inner{max-width:var(--max);margin:0 auto;padding-left:40px;padding-right:40px}

.divider{height:1px;background:var(--rule);max-width:var(--max);margin:0 auto}

/* ---------- nav ---------- */
nav,#nav{position:sticky;top:0;z-index:30;background-color:rgba(238,234,226,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.nav-inner{height:72px;display:flex;align-items:center;gap:34px}
.nav-logo{font-family:var(--serif);font-size:21px;letter-spacing:-.01em;margin-right:auto;text-decoration:none;color:var(--ink)}
.nav-links{display:flex;gap:26px;align-items:center;list-style:none}
.nav-links a{color:var(--ink-soft);text-decoration:none;font-size:14.5px;font-weight:500}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-cta{background:var(--ink);color:var(--paper)!important;padding:11px 20px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.nav-cta:hover{background:var(--amber-deep)}
.mobile-toggle{display:none;background:none;border:1px solid var(--rule);padding:9px 11px;cursor:pointer}
.mobile-toggle span{display:block;width:19px;height:2px;background:var(--ink);margin:3.5px 0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-weight:600;font-size:15.5px;text-decoration:none;border:1.5px solid transparent;font-family:var(--sans);cursor:pointer}
.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary:hover{background:var(--amber-deep);border-color:var(--amber-deep)}
.btn-secondary{border-color:var(--ink);color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:var(--paper)}

/* ============================================================
   VERTICAL PAGES  (/for/<slug>/)
   ============================================================ */
.v-hero{padding:88px 0 74px}
.v-hero-inner{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:center}
.v-hero-tag{display:block;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:18px}
.v-hero-text h1 em{font-style:normal;color:var(--amber-deep)}
.v-hero-sub{margin-top:24px;font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:54ch}
.v-hero-cta{margin-top:34px;display:flex;gap:13px;flex-wrap:wrap}
.v-hero-photo{position:relative}
.v-hero-photo img{filter:grayscale(1) contrast(1.05);width:100%}
.v-hero-photo::after{content:"";position:absolute;inset:0;background:var(--amber);mix-blend-mode:multiply;opacity:.15;pointer-events:none}

.v-pain{padding:74px 0;border-top:1px solid var(--rule);background:var(--paper-lift)}
.v-pain-label{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:16px}
.v-pain-inner h2{max-width:24ch}
.v-pain-list{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:13px;max-width:74ch}
.v-pain-list li{font-size:16.2px;line-height:1.58;color:var(--ink-soft);padding-left:22px;position:relative}
.v-pain-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--amber)}

.v-proof{padding:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.v-proof-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.v-proof-item{padding:36px 30px 34px;border-right:1px solid var(--rule-faint)}
.v-proof-item:first-child{padding-left:0}
.v-proof-item:last-child{border-right:none;padding-right:0}
.v-proof-number{font-family:var(--serif);font-size:27px;line-height:1.1;letter-spacing:-.015em;margin-bottom:9px}
.v-proof-label{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:7px}
.v-proof-detail{font-size:14px;line-height:1.5;color:var(--ink-faint)}

.v-how{padding:78px 0}
.v-how-label{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:16px}
.v-steps{margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.v-step{background:var(--paper-lift);padding:28px 26px}
.v-step-num{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--ink-faint);margin-bottom:12px}
.v-step h3{font-size:20px;margin-bottom:9px}
.v-step p{font-size:14.8px;line-height:1.55;color:var(--ink-soft)}

.v-cta{background:var(--ink);color:var(--paper);padding:82px 0}
.v-cta-inner h2{color:var(--paper);max-width:22ch}
.v-cta-sub{margin-top:20px;font-size:17px;line-height:1.62;color:#CFC7B8;max-width:52ch;margin-bottom:32px}
.v-cta .btn-primary{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.v-cta .btn-primary:hover{background:var(--paper);border-color:var(--paper)}
.v-cta .btn-secondary{border-color:#CFC7B8;color:var(--paper)}
.v-cta .btn-secondary:hover{background:var(--paper);color:var(--ink)}

/* ============================================================
   WRITING INDEX  (/writing/)
   ============================================================ */
.writing-header{padding-top:88px;padding-bottom:44px}
.writing-header p{margin-top:18px;font-size:17.5px;line-height:1.6;color:var(--ink-soft);max-width:56ch}
.post-list{padding-bottom:70px;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
/* build.py emits three siblings (date, title, desc) inside one <a>.
   Place them explicitly or the description wraps under the date. */
.post-item{display:grid;grid-template-columns:150px 1fr;column-gap:26px;row-gap:6px;padding:26px 0;border-bottom:1px solid var(--rule-faint);text-decoration:none;color:inherit;align-items:baseline}
.post-item:hover .post-item-title{color:var(--amber-deep)}
.post-item-date{grid-column:1;grid-row:1;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.post-item-title{grid-column:2;grid-row:1;font-family:var(--serif);font-size:23px;line-height:1.2;letter-spacing:-.012em}
.post-item-desc{grid-column:2;grid-row:2}
.post-item-desc{font-size:15.5px;line-height:1.55;color:var(--ink-soft);max-width:62ch}
.post-empty{padding:44px 0;color:var(--ink-faint);font-size:16px}

/* ============================================================
   ARTICLE  (/writing/<slug>/)
   ============================================================ */
/* The template inlines an unsized SVG arrow; without an explicit box it fills the column. */
.article-back{display:inline-flex;align-items:center;gap:9px;margin:44px 0 0;font-size:14px;font-weight:600;color:var(--ink-soft);text-decoration:none}
.article-back svg{width:18px;height:18px;flex:none}
.article-back:hover{color:var(--amber-deep)}
.article-header{padding-top:30px;padding-bottom:34px;border-bottom:1px solid var(--rule)}
.article-header h1{max-width:22ch}
.article-meta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.article-date{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--amber-deep)}
.article-tags{display:flex;gap:7px;flex-wrap:wrap}
.article-tag{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--ink-soft);border:1px solid var(--rule);padding:3px 10px}
.article-desc{margin-top:20px;font-size:19px;line-height:1.5;color:var(--ink-soft);max-width:52ch}

/* Align with .article-header. Measure is controlled by the 68ch on children,
   not by narrowing the container, so the left edge matches the rest of the page. */
.article-body{padding-top:44px;padding-bottom:70px}
.article-body p{font-size:17.5px;line-height:1.72;color:var(--ink-soft);margin-bottom:22px;max-width:68ch}
.article-body h2{margin:46px 0 16px;max-width:26ch}
.article-body h3{margin:36px 0 12px}
.article-body strong{color:var(--ink);font-weight:600}
.article-body a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--amber)}
.article-body a:hover{color:var(--amber-deep)}
.article-body ul,.article-body ol{margin:0 0 22px 0;padding-left:0;list-style:none;max-width:68ch}
.article-body ul li{font-size:17.5px;line-height:1.66;color:var(--ink-soft);margin-bottom:11px;padding-left:22px;position:relative}
.article-body ul li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;background:var(--amber)}
.article-body ol{counter-reset:n}
.article-body ol li{counter-increment:n;font-size:17.5px;line-height:1.66;color:var(--ink-soft);margin-bottom:11px;padding-left:32px;position:relative}
.article-body ol li::before{content:counter(n);position:absolute;left:0;top:0;font-family:var(--serif);font-size:16px;color:var(--amber-deep)}
.article-body blockquote{margin:30px 0;padding:4px 0 4px 26px;border-left:2px solid var(--amber)}
.article-body blockquote p{font-family:var(--serif);font-size:20px;line-height:1.45;color:var(--ink);margin-bottom:0}
.article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;background:var(--paper-deep);padding:2px 6px}
.article-body pre{background:var(--ink);color:var(--paper);padding:22px 24px;overflow-x:auto;margin-bottom:24px}
.article-body pre code{background:none;color:inherit;padding:0;font-size:14px;line-height:1.6}
.article-body img{margin:28px 0;border:1px solid var(--rule)}
.article-body hr{border:none;border-top:1px solid var(--rule);margin:40px 0}

/* ---------- signup ---------- */
.signup-box{border-top:1px solid var(--rule);background:var(--paper-deep);padding:56px 0}
.signup-inner{max-width:760px}
.signup-inner h3{margin-bottom:10px}
.signup-inner p{font-size:15.5px;color:var(--ink-soft);margin-bottom:20px;line-height:1.55;max-width:56ch}
.signup-form,.signup-inline-form{display:flex;gap:0;max-width:480px}
.signup-form input,.signup-inline-form input{flex:1;border:1px solid var(--rule);border-right:none;background:var(--paper);padding:13px 15px;font-family:inherit;font-size:15px;color:var(--ink);min-width:0}
.signup-form input:focus,.signup-inline-form input:focus{outline:none;border-color:var(--ink)}
.signup-form button,.signup-inline-form button{background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:13px 22px;font-family:inherit;font-weight:600;font-size:15px;cursor:pointer}
.signup-form button:hover,.signup-inline-form button:hover{background:var(--amber-deep);border-color:var(--amber-deep)}
.signup-msg,.signup-inline-msg{margin-top:12px;font-size:14px;min-height:20px}
/* JS in the templates sets .success/.error; homepage uses .ok/.err. Support both. */
.signup-msg.ok,.signup-inline-msg.ok,
.signup-msg.success,.signup-inline-msg.success{color:var(--amber-deep)}
.signup-msg.err,.signup-inline-msg.err,
.signup-msg.error,.signup-inline-msg.error{color:var(--err)}
.signup-inline{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-lift);padding:44px 0;margin:0}
.signup-inline-inner{display:grid;grid-template-columns:1fr 480px;gap:44px;align-items:center}
.signup-inline-text h3{margin-bottom:8px}
.signup-inline-text p{font-size:15px;color:var(--ink-soft);line-height:1.55}

/* ---------- footer ---------- */
footer{padding:38px 0;border-top:1px solid var(--rule)}
.footer-inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--ink-faint)}
.footer-links{display:flex;gap:20px;list-style:none;flex-wrap:wrap}
.footer-links a{color:var(--ink-faint);text-decoration:none}
.footer-links a:hover{color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .wrap,.nav-inner,.v-hero-inner,.v-pain-inner,.v-proof-grid,.v-how-inner,.v-cta-inner,
  .footer-inner,.article-header,.article-body,.writing-header,.post-list,
  .signup-inner,.signup-inline-inner{padding-left:22px;padding-right:22px}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;background:var(--paper);flex-direction:column;gap:0;padding:8px 22px 18px;border-bottom:1px solid var(--rule)}
  .nav-links.open li{padding:11px 0;border-bottom:1px solid var(--rule-faint)}
  .mobile-toggle{display:block;order:3}
  .nav-inner{gap:14px}
  .v-hero-inner{grid-template-columns:1fr;gap:38px}
  .v-hero-photo{max-width:280px}
  .v-proof-grid{grid-template-columns:1fr}
  .v-proof-item{padding:24px 22px;border-right:none;border-bottom:1px solid var(--rule-faint)}
  .v-proof-item:last-child{border-bottom:none}
  .v-steps{grid-template-columns:1fr}
  .post-item{grid-template-columns:1fr;gap:8px}
  .signup-inline-inner{grid-template-columns:1fr;gap:24px}
  body{background-attachment:scroll}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- print (assessment reports, leave-behinds) ---------- */
@media print{
  body{background:#fff;background-image:none;color:#000}
  nav,#nav,.signup-box,.signup-inline,.mobile-toggle,.v-hero-cta,.btn{display:none}
  .article-body a{border-bottom:none}
  /* Young Serif has no bold or italic cut. Emphasis stays in the sans. */
  strong,em,b,i{font-family:var(--sans)}
}