/* ============================================================================
   site-v2.css — Jeff Brokaw shared design system (single source of truth)
   ----------------------------------------------------------------------------
   Brand lock: ink #0A0A0A ground, orange #ff6a1f as the ONLY accent,
   --fg #f4f1ea text. Bricolage Grotesque (display) + Hanken Grotesk (body).
   No serif, no second hue, no glassmorphism, no gradient text. AA contrast.
   prefers-reduced-motion supported.

   Pages load fonts via:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700&family=Hanken+Grotesk:wght@400;500&display=swap" rel="stylesheet">

   No build step. One static HTML per page, deployed via SFTP.
   ============================================================================ */

/* ---------- 1. Design tokens -------------------------------------------- */
:root{
  --ink:#0A0A0A;   /* page ground */
  --ac:#ff6a1f;    /* the only accent */
  --fg:#f4f1ea;    /* primary text */
  --mut:#b4aea4;   /* secondary text (body, subs) */
  --dim:#9b958b;   /* tertiary text (labels, footer) */
  --hair:#1c1a17;  /* hairline borders */

  --shell:1040px;  /* content measure for section shells */
  --gutter:clamp(22px,5vw,70px);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Base / reset --------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

html,body{
  background:var(--ink);
  color:var(--fg);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body{min-height:100vh;min-height:100svh;overflow-x:hidden}

img,svg,video{display:block;max-width:100%}

a{color:inherit}

:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:2px}

::selection{background:var(--ac);color:var(--ink)}

/* ---------- 3. Logo glyph (mini AI / Marketing / Revenue triad) ---------- */
/* Inline this SVG inside .mark and .tb-mark:
   <svg class="logo" viewBox="0 0 26 26" aria-hidden="true">
     <line x1="13" y1="5" x2="5" y2="20"/><line x1="5" y1="20" x2="21" y2="20"/>
     <line x1="21" y1="20" x2="13" y2="5"/>
     <circle class="lpulse" cx="13" cy="5" r="2.7"/>
     <circle cx="5" cy="20" r="2.7"/><circle cx="21" cy="20" r="2.7"/>
   </svg> */
.logo{
  width:26px;height:26px;flex:none;overflow:visible;
  transition:transform .6s var(--ease);
  transform-origin:50% 50%;transform-box:view-box;
}
.logo line{stroke:rgba(255,106,31,.5);stroke-width:1.4;stroke-linecap:round}
.logo circle{fill:var(--ac)}
.logo .lpulse{fill:#ffc098}
.mark:hover .logo,.tb-mark:hover .logo{transform:rotate(120deg)}

/* ---------- 4. Header + nav --------------------------------------------- */
/* Skip-to-content link: off-screen until keyboard-focused, then an
   on-brand orange pill in the top-left. <a class="skip-link" href="#main">. */
.skip-link{
  position:absolute;left:-9999px;top:12px;z-index:200;
  display:inline-flex;align-items:center;min-height:40px;
  padding:0 18px;border-radius:999px;
  background:var(--ac);color:var(--ink);
  font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;
}
.skip-link:focus,.skip-link:focus-visible{left:12px}

/* Site header sits inside a .shell-wide block (full-bleed top of page). */
.site-header{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  max-width:var(--shell);margin:0 auto;
  padding:clamp(22px,4vw,46px) var(--gutter);
}
.mark{
  display:inline-flex;align-items:center;gap:11px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(24px,2.6vw,30px);letter-spacing:-.02em;
  color:var(--fg);text-decoration:none;
}
.nav{
  display:flex;align-items:center;gap:clamp(18px,2.6vw,32px);
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
}
.nav a{color:var(--mut);text-decoration:none;transition:color .18s}
.nav a:hover{color:var(--ac)}

/* Slim sticky topbar (optional; add .show via JS past the hero) */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px var(--gutter);
  background:var(--ink);border-bottom:1px solid var(--hair);
  transform:translateY(-101%);transition:transform .5s var(--ease);
}
.topbar.show{transform:none}
.tb-mark{
  display:inline-flex;align-items:center;gap:11px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:18px;letter-spacing:-.02em;color:var(--fg);text-decoration:none;
}
.tb-mark .logo{width:22px;height:22px}
.tb-r{display:flex;align-items:center;gap:clamp(16px,2.4vw,28px)}
.tb-r a:not(.pill){
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);text-decoration:none;transition:color .18s;
}
.tb-r a:not(.pill):hover{color:var(--ac)}
.topbar .pill{min-height:38px;padding:0 16px;font-size:12px}

/* ---------- 5. Ghost-orange pill / CTA ---------------------------------- */
.pill{
  border:1.5px solid var(--ac);color:var(--ac);background:transparent;
  min-height:44px;display:inline-flex;align-items:center;
  padding:0 20px;border-radius:999px;
  font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background .22s,color .22s,transform .12s;
}
.pill:hover{background:var(--ac);color:var(--ink)}
.pill:active{transform:scale(.97)}

/* ---------- 6. Section shell -------------------------------------------- */
.sec{
  max-width:var(--shell);margin:0 auto;
  padding:clamp(76px,13vh,158px) var(--gutter);
}
/* Eyebrow label: <p class="sec-label"><i></i><span>Text</span></p> */
.sec-label{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.sec-label i{width:9px;height:9px;background:var(--ac);display:block;flex:none}
.sec-label span{
  font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ac);
}
/* Display heading */
.sec-h{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(33px,5.3vw,66px);line-height:1.1;letter-spacing:-.03em;
  color:var(--fg);text-wrap:balance;max-width:19ch;
}
/* Sub-deck */
.sec-sub{
  font-size:18px;color:var(--mut);max-width:60ch;line-height:1.65;
  margin-top:20px;text-wrap:pretty;
}
/* Oversized lead statement; <em> turns a phrase accent-orange */
.lead{
  margin-top:clamp(36px,5vw,60px);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;
  font-size:clamp(21px,2.7vw,32px);letter-spacing:-.02em;
  color:var(--fg);max-width:26ch;line-height:1.22;text-wrap:balance;
}
.lead em{font-style:normal;color:var(--ac)}

/* ---------- 7. List-row pattern ----------------------------------------- */
.rows{margin-top:clamp(30px,4vw,50px)}
.row{
  position:relative;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;
  padding:clamp(19px,2.5vw,29px) 4px;
  border-bottom:1px solid var(--hair);
  text-decoration:none;color:inherit;
}
/* Hover nudge rides on the inner columns via transform (no layout thrash). */
.row>*{transition:transform .35s var(--ease)}
.row:hover>*{transform:translateX(12px)}
/* Orange underline wipes in from the left on hover/focus */
.row::after{
  content:"";position:absolute;left:4px;right:4px;bottom:-1px;height:1.5px;
  background:var(--ac);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease);will-change:transform;
}
.row:hover::after,.row:focus-visible::after{transform:scaleX(1)}

/* Left column: title alone, or stacked title + outcome line via .rcol */
.rcol{display:flex;flex-direction:column;gap:7px;min-width:0}
.rname{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(20px,2.7vw,31px);letter-spacing:-.025em;
  color:var(--fg);transition:color .25s;text-wrap:balance;
}
.row:hover .rname{color:var(--ac)}
.rout{
  font-size:14px;line-height:1.5;color:var(--dim);max-width:62ch;
  text-wrap:pretty;transition:color .25s;
}
.row:hover .rout{color:var(--mut)}

/* Right column: tag chip + arrow */
.rmeta{display:flex;align-items:center;gap:15px;justify-content:flex-end}
.rtag{
  font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--ac);
  border:1px solid rgba(255,106,31,.42);border-radius:999px;
  padding:3px 12px;white-space:nowrap;
}
.rarr{
  color:var(--ac);font-size:18px;opacity:.32;transform:translateX(-5px);
  transition:opacity .25s,transform .25s;
}
.row:hover .rarr{opacity:1;transform:none}

/* "All work / writing" trailing link */
.more{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:clamp(26px,3vw,40px);
  font-size:18px;font-weight:500;letter-spacing:.01em;color:var(--fg);
  text-decoration:none;border-bottom:1px solid var(--ac);padding-bottom:3px;
  transition:gap .25s;
}
.more:hover{gap:15px}

/* ---------- 8. Dual-card pattern ---------------------------------------- */
.duo{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.6vw,34px);margin-top:clamp(40px,6vw,72px);
}
.duo article{
  border:1px solid var(--hair);border-radius:14px;
  padding:clamp(24px,3vw,38px);background:rgba(244,241,234,.014);
  transition:border-color .3s,transform .35s var(--ease);
}
.duo article:hover{border-color:rgba(255,106,31,.42);transform:translateY(-4px)}
.duo h3{
  display:flex;align-items:center;gap:11px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(21px,2.5vw,28px);letter-spacing:-.02em;
  color:var(--fg);margin-bottom:13px;
}
.duo h3 i{width:8px;height:8px;background:var(--ac);display:block;flex:none}
.duo p{font-size:18px;color:var(--mut);line-height:1.6}

/* ---------- 9. Long-form prose / article (blog posts) ------------------- */
/* Wrap post body in <article class="prose"> inside a .sec (or .post). */
.post{max-width:var(--shell);margin:0 auto;padding:clamp(56px,9vh,120px) var(--gutter)}

/* Post header */
.post-head{max-width:75ch}
.post-eyebrow{
  display:inline-flex;align-items:center;gap:11px;margin-bottom:20px;
  font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ac);
}
.post-eyebrow i{width:9px;height:9px;background:var(--ac);display:block;flex:none}
.post-title{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(34px,5.4vw,64px);line-height:1.06;letter-spacing:-.03em;
  color:var(--fg);text-wrap:balance;max-width:20ch;
}
.post-meta{
  margin-top:clamp(18px,2.4vw,28px);
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);
}
.post-meta a{color:var(--mut);text-decoration:none;transition:color .18s}
.post-meta a:hover{color:var(--ac)}

/* The reading column: 65 to 75ch measure, generous rhythm */
.prose{
  margin-top:clamp(34px,5vw,56px);
  max-width:72ch;
  font-size:19px;line-height:1.72;color:var(--mut);
}
.prose>*+*{margin-top:1.25em}

.prose h2{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(26px,3.2vw,38px);line-height:1.16;letter-spacing:-.025em;
  color:var(--fg);text-wrap:balance;max-width:26ch;
  margin-top:2em;
}
.prose h3{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;
  font-size:clamp(21px,2.4vw,27px);line-height:1.22;letter-spacing:-.02em;
  color:var(--fg);text-wrap:balance;
  margin-top:1.7em;
}
.prose h2+*,.prose h3+*{margin-top:.7em}

.prose p{color:var(--mut)}
.prose strong{color:var(--fg);font-weight:500}
.prose em{font-style:italic}

/* Links: solid orange underline, never a second hue */
.prose a{
  color:var(--fg);text-decoration:none;
  border-bottom:1px solid var(--ac);padding-bottom:1px;
  transition:color .2s,background .2s;
}
.prose a:hover{color:var(--ac)}

/* Blockquote: orange rule, no glass, no italic-serif cliché */
.prose blockquote{
  margin-top:1.5em;padding:4px 0 4px clamp(20px,3vw,32px);
  border-left:2px solid var(--ac);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;
  font-size:clamp(21px,2.5vw,27px);line-height:1.32;letter-spacing:-.02em;
  color:var(--fg);text-wrap:pretty;
}
.prose blockquote p{color:var(--fg)}
.prose blockquote cite{
  display:block;margin-top:.7em;
  font-family:"Hanken Grotesk",sans-serif;font-style:normal;font-weight:500;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}

/* Lists */
.prose ul,.prose ol{padding-left:1.4em;color:var(--mut)}
.prose li+li{margin-top:.55em}
.prose li{padding-left:.3em}
.prose ul li::marker{color:var(--ac)}
.prose ol li::marker{color:var(--dim);font-variant-numeric:tabular-nums}

/* Inline code + pre (mono kept neutral, no second hue) */
.prose code{
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:.86em;color:var(--fg);
  background:rgba(244,241,234,.05);border:1px solid var(--hair);
  border-radius:5px;padding:.12em .4em;
}
.prose pre{
  margin-top:1.5em;overflow-x:auto;
  background:rgba(244,241,234,.02);border:1px solid var(--hair);
  border-radius:12px;padding:clamp(16px,2.4vw,24px);
  font-size:14.5px;line-height:1.65;
}
.prose pre code{background:none;border:0;padding:0;color:var(--mut);font-size:1em}

/* Horizontal rule + figures */
.prose hr{border:0;border-top:1px solid var(--hair);margin:2.4em 0}
.prose figure{margin-top:1.6em}
.prose figure img{border:1px solid var(--hair);border-radius:12px}
.prose figcaption{
  margin-top:.7em;font-size:13px;letter-spacing:.04em;color:var(--dim);
  text-align:center;
}

/* ---------- 10. Contact / talk block ------------------------------------ */
.talk{max-width:var(--shell);margin:0 auto;
  padding:clamp(86px,15vh,186px) var(--gutter) clamp(64px,9vh,110px)}
.talk h1,.talk h2{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(52px,11vw,148px);line-height:.9;letter-spacing:-.045em;
  color:var(--fg);
}
.talk h1 em,.talk h2 em{font-style:normal;color:var(--ac)}
.tsub{
  font-size:clamp(18px,2vw,21px);color:var(--mut);max-width:46ch;
  line-height:1.58;margin-top:clamp(22px,3vw,34px);
}
.tcta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;
  margin-top:clamp(34px,4vw,52px)}
.temail{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(22px,3vw,38px);letter-spacing:-.02em;color:var(--ac);
  text-decoration:none;border-bottom:2px solid transparent;
  transition:border-color .3s;
}
.temail:hover{border-color:var(--ac)}

/* ---------- 11. Site footer --------------------------------------------- */
.sfoot{
  border-top:1px solid var(--hair);max-width:var(--shell);margin:0 auto;
  padding:clamp(28px,4vw,44px) var(--gutter);
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:14px 24px;align-items:center;
}
.sfoot .sid{font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--dim)}
.sfoot .sid a{color:var(--mut);text-decoration:none;border-bottom:1px solid rgba(180,174,164,.35);transition:color .18s,border-color .18s}
.sfoot .sid a:hover{color:var(--ac);border-color:var(--ac)}
.sfoot nav{display:flex;gap:22px;flex-wrap:wrap}
.sfoot nav a{
  font-size:12px;font-weight:500;letter-spacing:.04em;
  color:var(--dim);text-decoration:none;transition:color .2s;
}
.sfoot nav a:hover{color:var(--ac)}

/* ---------- 12. Responsive ---------------------------------------------- */
@media (max-width:820px){
  .triad-wrap{grid-template-columns:1fr;gap:30px}
}
@media (max-width:760px){
  .duo{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:11px}
  .rmeta{display:none}
  .rout{font-size:13px;max-width:none}
  .tb-r a:not(.pill){display:none}
}
@media (max-width:720px){
  .nav a:not(.pill){display:none}
}

/* ---------- 13. Motion safety ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .logo{transition:none}
  .topbar{transition:none}
  .duo article{transition:none}
  .row,.row::after,.rout{transition:none}
}