/* JMD Web Design — shared editorial stylesheet (interior pages).
   Matches the homepage (v4.html): Fraunces display, Instrument Sans text,
   monochrome gallery palette (the client work is the only colour), light chrome,
   one dark footer. Token NAMES are kept so interior pages' own inline styles
   re-theme automatically; the old "Swiss / red accent / dark-head" look is gone. */
:root{
  --paper:#f2f1ec; --paper-2:#e8e6df; --ink:#1a1714; --ink-2:#585349; --faint:#67635a;
  --rule:rgba(26,23,20,.16); --rule-soft:rgba(26,23,20,.1); --line:rgba(26,23,20,.14); --line-2:rgba(26,23,20,.26);
  /* monochrome: former red accents now resolve to ink */
  --accent:#1a1714; --accent-text:#1a1714;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --disp:"Fraunces",Georgia,serif; --text:"Instrument Sans",system-ui,sans-serif;
  --mx:clamp(20px,5.5vw,96px); --maxw:1360px; --e:cubic-bezier(.2,0,0,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-padding-top:74px;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.55;font-size:clamp(16px,1.04vw,18px);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--mx);padding-right:var(--mx)}
.mono{font-family:var(--mono)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:500;font-optical-sizing:auto;letter-spacing:-.012em;text-wrap:balance}
.prog{display:none}

/* masthead (light, matches homepage) */
.mast{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.mast-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px;max-width:var(--maxw);margin:0 auto;padding-left:var(--mx);padding-right:var(--mx)}
.brand{font-family:var(--serif);font-weight:500;font-size:1.32rem;letter-spacing:-.02em;color:var(--ink)}
.brand i,.brand sup,.brand small{font-family:var(--serif);font-style:italic;font-size:1em;font-weight:500;color:var(--ink);vertical-align:baseline;margin-left:0;text-transform:none;letter-spacing:-.02em}
.nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px)}
.nav a{font-family:var(--sans);font-size:.96rem;letter-spacing:0;text-transform:none;color:var(--ink-2);transition:color .2s}
.nav a:hover{color:var(--ink)}
.nav a::after{display:none}
.nav .nav-book,.nav .nav-cta{color:var(--ink);font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:3px}
.nav .nav-book::before,.nav .nav-cta::before{display:none}
.burger{display:none}

/* neutralize old dark page-header wrapper → plain light */
.pagehead-dark{background:transparent;color:var(--ink)}

/* section scaffold (editorial) */
.sec{padding-top:clamp(56px,8vw,118px);padding-bottom:0}
.sec-head,.sec-line{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 24px;padding-bottom:clamp(24px,3vw,38px);border-bottom:1px solid var(--ink)}
.sec-no{font-family:var(--mono);font-size:.78rem;color:var(--faint);align-self:center;order:-1;margin-right:2px}
.sec-t,.sec-line h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.02;letter-spacing:-.015em}
.sec-meta,.sec-line .say{font-family:var(--sans);font-size:1.02rem;text-transform:none;letter-spacing:0;color:var(--ink-2);max-width:34ch;text-align:left}

/* page head (interior heroes) — light, Fraunces */
.pagehead{padding-top:clamp(40px,6vw,84px);padding-bottom:clamp(28px,4vw,52px)}
.pagehead .eyebrow{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--mono);font-size:.74rem;letter-spacing:.01em;text-transform:none;color:var(--faint);padding-bottom:22px;border-bottom:1px solid var(--line)}
.pagehead .eyebrow .no{color:var(--ink-2)}
.pagehead h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.5rem,6vw,5rem);line-height:1.0;letter-spacing:-.018em;margin:clamp(26px,4vw,48px) 0 0;max-width:20ch}
.pagehead h1 em{font-style:italic;color:var(--ink)}
.pagehead .lede{margin-top:clamp(22px,3vw,32px);max-width:56ch;font-size:clamp(1.1rem,1.4vw,1.34rem);line-height:1.5;color:var(--ink-2)}

/* breadcrumb */
.crumbs{font-family:var(--mono);font-size:.74rem;text-transform:none;letter-spacing:.01em;color:var(--faint);padding-top:22px}
.crumbs a{color:var(--ink-2);border-bottom:1px solid var(--line-2);transition:border-color .2s}
.crumbs a:hover{border-color:var(--ink-2)}
.crumbs span{margin:0 8px;color:var(--line-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:500;font-size:1rem;padding:15px 28px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:2px;transition:transform .3s var(--e);cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .3s var(--e)}
.btn:hover .ar{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* prose (guides / policy / case study) */
.prose{max-width:68ch;padding-top:clamp(30px,4vw,52px)}
.prose>*+*{margin-top:1.2em}
.prose h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,2.8vw,2.3rem);letter-spacing:-.015em;line-height:1.1;margin-top:1.7em;padding-top:.6em;border-top:1px solid var(--line)}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prose h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,1.8vw,1.5rem);letter-spacing:-.01em;margin-top:1.5em}
.prose p{font-size:1.08rem;line-height:1.62;color:var(--ink-2)}
.prose p b,.prose p strong,.prose li b,.prose li strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:1px;transition:opacity .2s}
.prose a:hover{opacity:.6}
.prose ul,.prose ol{padding-left:0;list-style:none;display:grid;gap:12px}
.prose li{position:relative;padding-left:26px;font-size:1.05rem;line-height:1.55;color:var(--ink-2)}
.prose ul li::before{content:"";position:absolute;left:2px;top:.68em;width:10px;height:1px;background:var(--ink-2)}
.prose ol{counter-reset:li}
.prose ol li{counter-increment:li}
.prose ol li::before{content:counter(li);position:absolute;left:0;top:0;font-family:var(--mono);font-size:.82rem;color:var(--faint)}
.prose blockquote{border-left:2px solid var(--ink);padding:2px 0 2px 24px;font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.prose figure{margin:1.6em 0}
.prose figure img{width:100%;border:1px solid var(--line)}
.prose figcaption{font-family:var(--mono);font-size:.74rem;text-transform:none;color:var(--faint);margin-top:12px}
.prose hr{border:0;border-top:1px solid var(--ink);margin:2.2em 0}
.lbl{font-family:var(--mono);font-size:.74rem;text-transform:none;letter-spacing:.01em;color:var(--faint)}

/* closing CTA band */
.cta-band{padding:clamp(56px,7vw,104px) 0 clamp(52px,6vw,88px);border-top:1px solid var(--ink);margin-top:clamp(50px,7vw,104px)}
.cta-band .bk{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,4.6vw,4rem);line-height:1.0;letter-spacing:-.018em;max-width:17ch}
.cta-band .bk em{font-style:italic;color:var(--ink)}
.cta-band p{margin-top:22px;max-width:48ch;font-size:clamp(1.06rem,1.35vw,1.24rem);color:var(--ink-2)}
.cta-band .bcta{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.cta-band .altlink{font-size:.98rem;color:var(--ink-2)}
.cta-band .altlink a{border-bottom:1px solid var(--ink);padding-bottom:2px;font-weight:500}

/* footer (dark, matches homepage) */
footer{background:var(--ink);color:var(--paper);border-top:1px solid var(--ink)}
footer .wrap{padding-top:clamp(46px,5vw,72px);padding-bottom:36px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(26px,4vw,56px);align-items:start}
.foot-brand{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1;color:var(--paper)}
.foot-brand span{display:block;font-family:var(--mono);font-size:.74rem;text-transform:none;letter-spacing:.01em;color:rgba(242,241,236,.55);margin-top:14px}
.foot-col h4,.foot-col .fh{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:rgba(242,241,236,.5);margin-bottom:13px;font-weight:400}
.foot-col .fh{opacity:1;margin-top:0;color:rgba(242,241,236,.62)}
.foot-col a,.foot-col p{display:block;color:var(--paper);font-size:.98rem;line-height:1.7;opacity:.9}
.foot-col a{width:fit-content;border-bottom:1px solid transparent;transition:border-color .25s}
.foot-col a:hover{border-color:var(--paper)}
.foot-col p{opacity:.55;margin-top:6px}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:clamp(40px,5vw,70px);padding-top:22px;border-top:1px solid rgba(242,241,236,.16);font-family:var(--mono);font-size:.72rem;letter-spacing:.01em;text-transform:none;color:rgba(242,241,236,.55)}

/* responsive */
@media(max-width:860px){
  .sec-head,.sec-line{gap:10px 16px}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:760px){
  /* Closed menu is translated off-screen AND made inert (visibility:hidden drops its
     links from the keyboard tab order); visibility flips back after the slide-out. */
  .nav{position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:6px var(--mx) 20px;transform:translateY(-130%);visibility:hidden;transition:transform .4s var(--e),visibility 0s linear .4s;z-index:99}
  .nav.open{transform:translateY(0);visibility:visible;transition:transform .4s var(--e),visibility 0s}
  body.nav-open{overflow:hidden}
  .nav a{width:100%;padding:15px 0;border-bottom:1px solid var(--line);font-size:1.02rem;color:var(--ink-2)}
  .nav .nav-book,.nav .nav-cta{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:15px}
  .burger{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;width:44px;height:44px;margin-right:-8px;background:none;border:0;cursor:pointer}
  .burger span{display:block;height:2px;width:23px;background:var(--ink);transition:transform .3s,opacity .3s}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(max-width:760px),(pointer:coarse){
  .foot-col a{display:flex;align-items:center;min-height:44px}
  .crumbs a{display:inline-block;padding-block:13px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}