/* ==========================================================================
   JAGAT KILLAWALA — Executive Leadership Profile
   Design system: "Leadership with Perspective"
   Palette: Deep Graphite Ink | Warm Ivory | Muted Copper
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Ink family */
  --ink:#12171c;
  --ink-2:#1a2128;
  --ink-3:#242e37;
  --ink-line:rgba(244,241,234,.14);
  --ink-line-2:rgba(244,241,234,.08);

  /* Ivory / paper family */
  --paper:#fbfaf7;
  --ivory:#f2efe8;
  --ivory-2:#e7e2d7;
  --paper-line:rgba(18,23,28,.13);
  --paper-line-2:rgba(18,23,28,.07);

  /* Type colours */
  --graphite:#1e262d;
  --slate:#414e58;
  --stone:#5a666e;
  --stone-light:#95a1a9;
  --on-ink:#ece8df;
  --on-ink-soft:#a4aeb5;

  /* Accent — muted copper, used sparingly */
  --copper:#96552f;
  --copper-2:#c07a4c;
  --copper-soft:#d9a883;

  /* Type */
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif;

  /* Fluid scale */
  --t-mega:clamp(2.75rem,11vw,9rem);
  --t-xxl:clamp(2.15rem,6.2vw,5rem);
  --t-xl:clamp(1.75rem,4.2vw,3.35rem);
  --t-lg:clamp(1.35rem,2.6vw,2.1rem);
  --t-md:clamp(1.06rem,1.35vw,1.28rem);
  --t-base:clamp(1rem,1.02vw,1.09rem);
  --t-sm:.875rem;
  --t-xs:.72rem;

  /* Rhythm */
  --gut:clamp(1.15rem,4vw,2.5rem);
  --pad-x:clamp(1.15rem,5.2vw,5.5rem);
  --sec-y:clamp(4rem,10vw,9.5rem);
  --maxw:1520px;
  --measure:66ch;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:78px;
}

/* ---------- 2. Reset and base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--t-base);
  font-weight:400;
  line-height:1.68;
  color:var(--graphite);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:"kern" 1;
}

h1,h2,h3,h4,h5,h6{margin:0;font-weight:500;line-height:1.06;letter-spacing:-.022em}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
::selection{background:var(--copper);color:#fff}

/* Focus — always visible, never removed */
:focus-visible{
  outline:2px solid var(--copper-2);
  outline-offset:3px;
  border-radius:2px;
}
.ink-block :focus-visible{outline-color:var(--copper-soft)}

.skip-link{
  position:absolute;left:.75rem;top:-100px;z-index:200;
  background:var(--ink);color:var(--on-ink);
  padding:.8rem 1.25rem;font-size:var(--t-sm);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;transition:top .2s var(--ease);
}
.skip-link:focus{top:.75rem}

/* ---------- 3. Layout helpers ---------- */
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.section{padding-block:var(--sec-y);position:relative}
.section--tight{padding-block:clamp(3rem,6.5vw,6rem)}
.ink-block{background:var(--ink);color:var(--on-ink)}
.ivory-block{background:var(--ivory);color:var(--graphite)}
.paper-block{background:var(--paper)}
.ink-block h1,.ink-block h2,.ink-block h3,.ink-block h4{color:var(--on-ink)}

/* Section marker: numeral + label + rule — the site's signature device */
.marker{
  display:flex;align-items:baseline;gap:1rem;
  padding-bottom:1.1rem;margin-bottom:clamp(2rem,4vw,3.5rem);
  border-bottom:1px solid var(--paper-line);
}
.ink-block .marker{border-bottom-color:var(--ink-line)}
.marker__num{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.2em;
  color:var(--copper);flex:none;font-variant-numeric:tabular-nums;
}
.ink-block .marker__num{color:var(--copper-soft)}
.marker__label{
  font-size:var(--t-xs);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--stone);
}
.ink-block .marker__label{color:var(--on-ink-soft)}
.marker__rule{flex:1 1 auto;height:1px;background:var(--paper-line);align-self:center}
.ink-block .marker__rule{background:var(--ink-line)}

.eyebrow{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--copper);margin:0 0 1.1rem;
}
.ink-block .eyebrow{color:var(--copper-soft)}

.lede{
  font-size:var(--t-lg);line-height:1.42;font-weight:300;
  letter-spacing:-.014em;color:var(--graphite);max-width:24ch;
}
.ink-block .lede{color:var(--on-ink)}

.prose{max-width:var(--measure)}
.prose p+p{margin-top:1.15em}
.prose p{color:var(--slate);font-size:var(--t-md);line-height:1.78}
.ink-block .prose p{color:var(--on-ink-soft)}
.prose strong{font-weight:600;color:var(--graphite)}
.ink-block .prose strong{color:var(--on-ink)}

/* Oversized ghost numeral */
.ghost-num{
  font-size:clamp(5rem,16vw,15rem);line-height:.78;font-weight:200;
  color:transparent;-webkit-text-stroke:1px var(--paper-line);
  letter-spacing:-.05em;user-select:none;pointer-events:none;
}
.ink-block .ghost-num{-webkit-text-stroke-color:var(--ink-line)}

/* Editorial serif statement */
.statement{
  font-family:var(--serif);font-weight:400;
  font-size:var(--t-xxl);line-height:1.14;letter-spacing:-.012em;
}

/* Link with copper underline reveal */
.link-u{
  position:relative;display:inline-block;font-weight:600;
  color:var(--graphite);padding-bottom:2px;
}
.ink-block .link-u{color:var(--on-ink)}
.link-u::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--copper);transform-origin:right;transform:scaleX(1);
  transition:transform .45s var(--ease-out);
}
.link-u:hover::after,.link-u:focus-visible::after{transform-origin:left;transform:scaleX(0)}

/* Arrow CTA */
.cta{
  display:inline-flex;align-items:center;gap:.85rem;
  font-size:var(--t-sm);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--graphite);
  padding:.35rem 0;border-bottom:1px solid var(--paper-line);
  transition:color .3s var(--ease),border-color .3s var(--ease),gap .3s var(--ease);
}
.ink-block .cta{color:var(--on-ink);border-bottom-color:var(--ink-line)}
.cta svg{width:20px;height:9px;flex:none;transition:transform .4s var(--ease-out)}
.cta:hover,.cta:focus-visible{color:var(--copper);border-bottom-color:var(--copper);gap:1.35rem}
.ink-block .cta:hover,.ink-block .cta:focus-visible{color:var(--copper-soft);border-bottom-color:var(--copper-soft)}

/* ---------- 4. Perspective line field (signature background motif) ---------- */
.persp{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.persp svg{position:absolute;width:100%;height:100%}
.persp line,.persp path,.persp circle{vector-effect:non-scaling-stroke}

/* ---------- 5. Header ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:90;
  height:var(--nav-h);display:flex;align-items:center;
  transition:background .45s var(--ease),border-color .45s var(--ease),height .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head--solid{
  background:rgba(18,23,28,.94);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--ink-line-2);
  height:66px;
}
.site-head__in{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand__mark{
  width:30px;height:30px;flex:none;border:1px solid var(--copper-soft);
  display:grid;place-items:center;
  font-size:.68rem;font-weight:800;letter-spacing:.04em;color:var(--copper-soft);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.brand:hover .brand__mark{background:var(--copper);color:#fff;border-color:var(--copper)}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__name{
  font-size:.855rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-ink);
}
.brand__role{
  font-size:.6rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--on-ink-soft);margin-top:2px;
}

.nav{display:flex;align-items:center;gap:clamp(.5rem,1.35vw,1.5rem)}
.nav__link{
  position:relative;font-size:.755rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-ink-soft);padding:.55rem .1rem;
  transition:color .3s var(--ease);white-space:nowrap;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;
  background:var(--copper-soft);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav__link:hover,.nav__link:focus-visible{color:var(--on-ink)}
.nav__link:hover::after,.nav__link:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav__link[aria-current="page"]{color:var(--on-ink)}
.nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--copper)}

.nav-toggle{
  display:none;width:44px;height:44px;margin-right:-10px;
  align-items:center;justify-content:center;flex:none;
}
.nav-toggle__bars{display:block;width:24px;height:11px;position:relative}
.nav-toggle__bars i{
  position:absolute;left:0;height:1.5px;width:100%;background:var(--on-ink);
  transition:transform .4s var(--ease-out),opacity .25s var(--ease),width .4s var(--ease-out);
}
.nav-toggle__bars i:first-child{top:0}
.nav-toggle__bars i:last-child{bottom:0;width:16px}
body.menu-open .nav-toggle__bars i:first-child{transform:translateY(5px) rotate(45deg)}
body.menu-open .nav-toggle__bars i:last-child{width:100%;transform:translateY(-4.5px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:88;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 1.5rem) var(--pad-x) 2.5rem;
  opacity:0;visibility:hidden;transform:translateY(-1.5%);
  transition:opacity .5s var(--ease),transform .5s var(--ease-out),visibility .5s;
  overflow-y:auto;
}
body.menu-open .drawer{opacity:1;visibility:visible;transform:none}
.drawer__list{display:flex;flex-direction:column;width:100%;max-width:640px}
.drawer__item{border-top:1px solid var(--ink-line-2)}
.drawer__item:last-child{border-bottom:1px solid var(--ink-line-2)}
.drawer__link{
  display:flex;align-items:baseline;gap:1.1rem;padding:.92rem 0;
  font-size:clamp(1.25rem,5vw,1.95rem);font-weight:300;letter-spacing:-.02em;
  color:var(--on-ink);transition:color .3s var(--ease),padding-left .35s var(--ease-out);
}
.drawer__link span{
  font-size:.62rem;font-weight:700;letter-spacing:.18em;color:var(--copper-soft);
  font-family:var(--sans);flex:none;font-variant-numeric:tabular-nums;
}
.drawer__link:hover,.drawer__link:focus-visible{color:var(--copper-soft);padding-left:.6rem}
.drawer__link[aria-current="page"]{color:var(--copper-soft)}
.drawer__foot{
  margin-top:2rem;font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-ink-soft);
}
.drawer__foot a{color:var(--on-ink);border-bottom:1px solid var(--ink-line);padding-bottom:1px}
.drawer__foot a:hover{color:var(--copper-soft)}

/* ---------- 6. Page hero (internal pages) ---------- */
.phero{
  position:relative;background:var(--ink);color:var(--on-ink);
  padding-top:calc(var(--nav-h) + clamp(3.5rem,9vw,7.5rem));
  padding-bottom:clamp(3rem,7vw,6rem);
  overflow:hidden;
}
.phero__in{position:relative;z-index:2}
.phero__crumb{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-ink-soft);margin-bottom:clamp(1.5rem,4vw,2.75rem);
}
.phero__crumb a:hover{color:var(--copper-soft)}
.phero__crumb i{width:22px;height:1px;background:var(--copper);flex:none;font-style:normal}
.phero__title{
  font-size:var(--t-mega);font-weight:200;letter-spacing:-.045em;line-height:.9;
  color:var(--on-ink);
}
.phero__title em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--copper-soft)}
.phero__sub{
  margin-top:clamp(1.5rem,3.5vw,2.5rem);max-width:52ch;
  font-size:var(--t-md);line-height:1.72;color:var(--on-ink-soft);font-weight:300;
}
.phero__meta{
  margin-top:clamp(2rem,4.5vw,3.25rem);padding-top:1.15rem;
  border-top:1px solid var(--ink-line);
  display:flex;flex-wrap:wrap;gap:.6rem clamp(1.25rem,3vw,3rem);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-ink-soft);
}
.phero__meta b{color:var(--copper-soft);font-weight:700}

/* ---------- 7. Home hero ---------- */
.hero{
  position:relative;background:var(--ink);color:var(--on-ink);
  min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + clamp(2rem,5vw,3.5rem));
  padding-bottom:clamp(4.5rem,8vw,6rem);
  overflow:hidden;
}
.hero__grid{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.88fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.hero__id{min-width:0}
.hero__kicker{
  display:flex;align-items:center;gap:.9rem;margin-bottom:clamp(1.35rem,3vw,2.1rem);
  font-size:var(--t-xs);font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--copper-soft);
}
.hero__kicker i{width:clamp(28px,5vw,64px);height:1px;background:var(--copper);flex:none;font-style:normal}
.hero__name{
  font-size:clamp(2.75rem,9.2vw,8.2rem);font-weight:200;line-height:.86;
  letter-spacing:-.05em;color:var(--on-ink);
}
.hero__name span{display:block}
.hero__name .n2{
  font-family:var(--serif);font-weight:400;font-style:italic;
  letter-spacing:-.028em;color:var(--copper-soft);
  padding-left:clamp(.15rem,1.6vw,1.35rem);
}
.hero__role{
  margin-top:clamp(1.6rem,3.6vw,2.6rem);padding-top:1.15rem;
  border-top:1px solid var(--ink-line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1.1rem clamp(1.25rem,3vw,2.5rem);max-width:760px;
}
.hero__roleitem dt{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone-light);margin-bottom:.4rem;
}
.hero__roleitem dd{
  margin:0;font-size:clamp(.95rem,1.15vw,1.06rem);font-weight:500;
  line-height:1.42;color:var(--on-ink);
}
.hero__stmt{
  margin-top:clamp(1.75rem,3.5vw,2.5rem);max-width:46ch;
  font-size:var(--t-md);line-height:1.74;color:var(--on-ink-soft);font-weight:300;
}

/* Portrait plate — face always fully visible (contain, never cover) */
.plate{position:relative;justify-self:center;width:100%;max-width:400px}
.plate__frame{
  position:absolute;inset:-14px -14px 22px 22px;border:1px solid var(--copper);
  opacity:.5;pointer-events:none;
}
.plate__inner{
  position:relative;background:linear-gradient(168deg,#20282f 0%,#161c22 100%);
  border:1px solid var(--ink-line);padding:clamp(.85rem,2vw,1.2rem);
}
.plate__img{
  width:100%;aspect-ratio:1/1;object-fit:contain;object-position:center;
  background:#1b2229;display:block;
}
.plate__cap{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--ink-line-2);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-ink-soft);
}
.plate__cap b{color:var(--copper-soft);font-weight:700}

.hero__scroll{
  position:absolute;left:var(--pad-x);bottom:clamp(1.35rem,3.5vw,2.5rem);z-index:3;
  display:flex;align-items:center;gap:.8rem;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--on-ink-soft);
}
.hero__scroll i{
  width:1px;height:38px;background:linear-gradient(var(--copper),transparent);
  display:block;flex:none;font-style:normal;animation:drop 2.4s var(--ease) infinite;
}
@keyframes drop{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ---------- 8. Ledger (At a glance) ---------- */
.ledger{border-top:1px solid var(--paper-line)}
.ink-block .ledger{border-top-color:var(--ink-line)}
.ledger__row{
  display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);
  gap:.5rem clamp(1.25rem,4vw,3.5rem);align-items:baseline;
  padding:clamp(1.15rem,2.6vw,1.85rem) 0;
  border-bottom:1px solid var(--paper-line);
  transition:background .4s var(--ease),padding-left .4s var(--ease-out);
}
.ink-block .ledger__row{border-bottom-color:var(--ink-line)}
.ledger__row:hover{background:rgba(168,98,58,.045);padding-left:.7rem}
.ink-block .ledger__row:hover{background:rgba(217,168,131,.05)}
.ledger__k{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone);
}
.ink-block .ledger__k{color:var(--on-ink-soft)}
.ledger__v{
  font-size:clamp(1.15rem,2.2vw,1.78rem);font-weight:300;
  letter-spacing:-.02em;line-height:1.3;color:var(--graphite);
}
.ink-block .ledger__v{color:var(--on-ink)}
.ledger__v small{
  display:block;margin-top:.4rem;font-size:var(--t-sm);font-weight:400;
  letter-spacing:0;color:var(--stone);line-height:1.6;
}
.ink-block .ledger__v small{color:var(--on-ink-soft)}

/* ---------- 9. Split editorial ---------- */
.split{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.split__aside{position:sticky;top:calc(var(--nav-h) + 2rem)}
@media (max-width:900px){.split__aside{position:static}}

/* ---------- 10. Timeline ---------- */
.tl{position:relative}
.tl__item{
  position:relative;display:grid;
  grid-template-columns:minmax(0,.26fr) minmax(0,1fr);
  gap:clamp(1.25rem,4vw,3.5rem);
  padding:clamp(1.75rem,4vw,3rem) 0;
  border-top:1px solid var(--paper-line);
}
.ink-block .tl__item{border-top-color:var(--ink-line)}
.tl__item:last-child{border-bottom:1px solid var(--paper-line)}
.ink-block .tl__item:last-child{border-bottom-color:var(--ink-line)}
.tl__year{
  font-size:clamp(1.6rem,4.2vw,3.1rem);font-weight:200;letter-spacing:-.04em;
  line-height:1;color:var(--copper);font-variant-numeric:tabular-nums;
}
.ink-block .tl__year{color:var(--copper-soft)}
.tl__body h3{
  font-size:clamp(1.1rem,1.9vw,1.5rem);font-weight:500;letter-spacing:-.018em;
  line-height:1.28;margin-bottom:.65rem;
}
.tl__body p{font-size:var(--t-base);line-height:1.72;color:var(--slate);max-width:62ch}
.ink-block .tl__body p{color:var(--on-ink-soft)}
.tl__org{
  display:inline-block;margin-top:.85rem;font-size:var(--t-xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--stone);
  border-left:1px solid var(--copper);padding-left:.7rem;
}
.ink-block .tl__org{color:var(--on-ink-soft);border-left-color:var(--copper-soft)}

/* ---------- 11. Focus bands (architectural, not icon cards) ---------- */
.bands{border-top:1px solid var(--paper-line)}
.ink-block .bands{border-top-color:var(--ink-line)}
.band{
  display:grid;grid-template-columns:auto minmax(0,.34fr) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.75rem);align-items:start;
  padding:clamp(1.5rem,3.2vw,2.5rem) 0;
  border-bottom:1px solid var(--paper-line);
  transition:padding-left .5s var(--ease-out),background .5s var(--ease);
}
.ink-block .band{border-bottom-color:var(--ink-line)}
.band:hover{padding-left:clamp(.5rem,1.6vw,1.5rem);background:rgba(168,98,58,.04)}
.ink-block .band:hover{background:rgba(217,168,131,.045)}
.band__n{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.18em;color:var(--copper);
  padding-top:.55rem;font-variant-numeric:tabular-nums;
}
.ink-block .band__n{color:var(--copper-soft)}
.band__t{
  font-size:clamp(1.15rem,2.15vw,1.72rem);font-weight:400;
  letter-spacing:-.022em;line-height:1.22;
}
.band__d{font-size:var(--t-base);line-height:1.74;color:var(--slate);max-width:60ch}
.ink-block .band__d{color:var(--on-ink-soft)}

/* ---------- 12. Record / insights entries ---------- */
.rec-feature{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:end;
  padding-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--paper-line);
}
.ink-block .rec-feature{border-bottom-color:var(--ink-line)}
.rec-tag{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--copper);
}
.ink-block .rec-tag{color:var(--copper-soft)}
.rec-tag i{width:16px;height:1px;background:currentColor;flex:none;font-style:normal}
.rec-date{
  font-size:var(--t-xs);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--stone);font-variant-numeric:tabular-nums;
}
.ink-block .rec-date{color:var(--on-ink-soft)}

.rec-list{border-top:1px solid var(--paper-line);margin-top:clamp(2rem,4vw,3rem)}
.ink-block .rec-list{border-top-color:var(--ink-line)}
.rec{
  display:grid;grid-template-columns:minmax(0,.2fr) minmax(0,1fr) auto;
  gap:.75rem clamp(1.25rem,3.5vw,3rem);align-items:baseline;
  padding:clamp(1.35rem,3vw,2.1rem) 0;
  border-bottom:1px solid var(--paper-line);
  transition:padding-left .45s var(--ease-out),background .45s var(--ease);
}
.ink-block .rec{border-bottom-color:var(--ink-line)}
.rec:hover{padding-left:clamp(.4rem,1.4vw,1.1rem);background:rgba(168,98,58,.04)}
.ink-block .rec:hover{background:rgba(217,168,131,.045)}
.rec__t{
  font-size:clamp(1.02rem,1.65vw,1.32rem);font-weight:500;
  letter-spacing:-.016em;line-height:1.36;margin-bottom:.55rem;
}
.rec__d{font-size:var(--t-base);line-height:1.7;color:var(--slate);max-width:64ch}
.ink-block .rec__d{color:var(--on-ink-soft)}
.rec__src{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.9rem;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone);
  border-bottom:1px solid var(--paper-line);padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.ink-block .rec__src{color:var(--on-ink-soft);border-bottom-color:var(--ink-line)}
.rec__src:hover,.rec__src:focus-visible{color:var(--copper);border-bottom-color:var(--copper)}
.ink-block .rec__src:hover,.ink-block .rec__src:focus-visible{color:var(--copper-soft);border-bottom-color:var(--copper-soft)}
.rec__src svg{width:10px;height:10px;flex:none}
.rec__side{text-align:right}
@media (max-width:820px){
  .rec{grid-template-columns:1fr}
  .rec__side{text-align:left}
}

/* ---------- 13. Note / callout ---------- */
.note{
  border-left:1px solid var(--copper);padding:.35rem 0 .35rem 1.35rem;
  font-size:var(--t-sm);line-height:1.72;color:var(--stone);max-width:64ch;
}
.ink-block .note{color:var(--on-ink-soft);border-left-color:var(--copper-soft)}
.note a{border-bottom:1px solid var(--paper-line);padding-bottom:1px}
.note a:hover{color:var(--copper);border-bottom-color:var(--copper)}
.ink-block .note a{border-bottom-color:var(--ink-line)}
.ink-block .note a:hover{color:var(--copper-soft);border-bottom-color:var(--copper-soft)}

/* ---------- 14. Gallery plates ---------- */
.gal{display:grid;gap:clamp(2.5rem,6vw,5.5rem)}
.gplate{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
}
.gplate--flip .gplate__fig{order:2}
.gplate__fig{position:relative;margin:0}
.gplate__box{
  position:relative;background:var(--ivory);border:1px solid var(--paper-line);
  padding:clamp(1.15rem,3vw,2.25rem);
}
.gplate__box::before{
  content:"";position:absolute;inset:auto auto -12px -12px;
  width:56%;height:56%;border-left:1px solid var(--copper);border-bottom:1px solid var(--copper);
  opacity:.45;pointer-events:none;
}
.gplate__img{
  width:100%;max-height:min(62vh,520px);object-fit:contain;object-position:center;
  background:var(--paper);
}
.gplate__cap{
  margin-top:1.1rem;padding-top:.85rem;border-top:1px solid var(--paper-line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone);
}
.gplate__cap b{color:var(--copper);font-weight:700}
.gplate__txt h3{
  font-size:clamp(1.35rem,2.8vw,2.1rem);font-weight:300;letter-spacing:-.028em;
  line-height:1.16;margin-bottom:1.1rem;
}
@media (max-width:860px){
  .gplate{grid-template-columns:1fr}
  .gplate--flip .gplate__fig{order:0}
}

/* ---------- 15. Contact ---------- */
.ct{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
.ct__rows{border-top:1px solid var(--ink-line)}
.ct__row{
  display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
  gap:.6rem clamp(1.25rem,3vw,2.5rem);align-items:baseline;
  padding:clamp(1.4rem,3.2vw,2.25rem) 0;border-bottom:1px solid var(--ink-line);
}
.ct__k{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-ink-soft);
}
.ct__v{font-size:clamp(1.15rem,2.5vw,2.05rem);font-weight:300;letter-spacing:-.028em;line-height:1.3}
.ct__v a{
  color:var(--on-ink);border-bottom:1px solid var(--ink-line);padding-bottom:3px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
  word-break:break-word;overflow-wrap:anywhere;
}
.ct__v a:hover,.ct__v a:focus-visible{color:var(--copper-soft);border-bottom-color:var(--copper-soft)}
@media (max-width:860px){.ct,.ct__row{grid-template-columns:1fr}}

/* ---------- 16. Footer ---------- */
.site-foot{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden}
.site-foot__top{
  position:relative;z-index:2;
  padding-block:clamp(3rem,7vw,6rem);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
  border-bottom:1px solid var(--ink-line-2);
}
.foot-sig{
  font-size:clamp(1.9rem,6vw,4.6rem);font-weight:200;letter-spacing:-.045em;
  line-height:.92;color:var(--on-ink);
}
.foot-sig em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--copper-soft)}
.foot-tag{
  margin-top:1.4rem;max-width:40ch;font-size:var(--t-base);
  line-height:1.72;color:var(--on-ink-soft);font-weight:300;
}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.foot-col h4{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--stone-light);margin-bottom:1.1rem;
}
.foot-col li+li{margin-top:.62rem}
.foot-col a{
  font-size:.9rem;color:var(--on-ink-soft);
  transition:color .3s var(--ease),padding-left .3s var(--ease-out);display:inline-block;
}
.foot-col a:hover,.foot-col a:focus-visible{color:var(--copper-soft);padding-left:.3rem}
.foot-social{display:flex;gap:.65rem;margin-top:1.2rem;flex-wrap:wrap}
.foot-social a{
  width:40px;height:40px;border:1px solid var(--ink-line);display:grid;place-items:center;
  color:var(--on-ink-soft);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease-out);
}
.foot-social a:hover,.foot-social a:focus-visible{
  background:var(--copper);border-color:var(--copper);color:#fff;transform:translateY(-2px);
}
.foot-social svg{width:16px;height:16px}
.site-foot__bot{
  position:relative;z-index:2;padding-block:1.6rem;
  display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;
  align-items:center;justify-content:space-between;
  font-size:var(--t-xs);letter-spacing:.1em;color:var(--on-ink-soft);
}
.site-foot__bot a{color:var(--on-ink);border-bottom:1px solid var(--ink-line);padding-bottom:1px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.site-foot__bot a:hover,.site-foot__bot a:focus-visible{color:var(--copper-soft);border-bottom-color:var(--copper-soft)}
@media (max-width:900px){.site-foot__top{grid-template-columns:1fr}}

/* ---------- 17. Scroll reveals ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* ---------- 18. Passcode gate (index.html) ---------- */
.gate-body{
  min-height:100svh;display:grid;place-items:center;
  background:var(--ink);color:var(--on-ink);padding:1.5rem;
}
.gate{width:100%;max-width:392px;position:relative;z-index:2}
.gate__mark{
  width:34px;height:34px;border:1px solid var(--copper-soft);margin:0 auto 2.15rem;
  display:grid;place-items:center;
}
.gate__mark i{display:block;width:8px;height:8px;background:var(--copper);font-style:normal}
.gate__label{
  display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--on-ink-soft);text-align:center;margin-bottom:1.5rem;
}
.gate__field{display:flex;align-items:stretch}
.gate__input{
  flex:1 1 auto;min-width:0;background:transparent;color:var(--on-ink);
  border:1px solid var(--ink-line);border-right:0;
  font-family:var(--sans);font-size:1rem;font-weight:400;letter-spacing:.32em;
  padding:1rem 1.1rem;transition:border-color .3s var(--ease);border-radius:0;
}
.gate__input::placeholder{color:#5c686f;letter-spacing:.28em}
.gate__input:focus{outline:none;border-color:var(--copper-soft)}
.gate__field:focus-within .gate__btn{border-color:var(--copper-soft)}
.gate__btn{
  flex:none;padding:0 1.35rem;border:1px solid var(--ink-line);
  background:transparent;color:var(--on-ink-soft);
  display:grid;place-items:center;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.gate__btn:hover,.gate__btn:focus-visible{background:var(--copper);border-color:var(--copper);color:#fff}
.gate__btn svg{width:22px;height:10px}
.gate__msg{
  min-height:1.5rem;margin-top:1rem;text-align:center;
  font-size:var(--t-sm);letter-spacing:.02em;color:var(--copper-soft);
  opacity:0;transition:opacity .3s var(--ease);
}
.gate__msg.show{opacity:1}
.gate.shake{animation:shake .42s var(--ease)}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(5px)}
  50%{transform:translateX(-5px)}
}

/* ---------- 19. Auth gate anti-flash ---------- */
html.gated body{visibility:hidden}
html.gated-ok body{visibility:visible}

/* ---------- 20. Responsive ---------- */
@media (max-width:1180px){
  .nav{gap:.85rem}
  .nav__link{font-size:.705rem;letter-spacing:.1em}
  .brand__role{display:none}
}
@media (max-width:1024px){
  .nav{display:none}
  .nav-toggle{display:flex}
  .brand__role{display:block}
  .hero__grid{grid-template-columns:1fr;gap:clamp(2.25rem,6vw,3.5rem)}
  .hero{min-height:auto;padding-bottom:clamp(5rem,10vw,7rem)}
  .plate{justify-self:start;max-width:340px}
  .split,.split--even{grid-template-columns:1fr}
  .rec-feature{grid-template-columns:1fr;align-items:start}
}
@media (max-width:820px){
  :root{--nav-h:64px}
  .band{grid-template-columns:auto minmax(0,1fr);row-gap:.75rem}
  .band__d{grid-column:1/-1}
  .ledger__row,.tl__item{grid-template-columns:1fr;row-gap:.55rem}
  .tl__year{font-size:clamp(1.5rem,7vw,2.2rem)}
  .hero__scroll{display:none}
}
@media (max-width:560px){
  .plate{max-width:100%}
  .plate__frame{inset:-9px -9px 15px 15px}
  .plate__cap{flex-direction:column;gap:.35rem;align-items:flex-start}
  .hero__role{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .site-foot__bot{flex-direction:column;align-items:flex-start}
  .gplate__cap{flex-direction:column;gap:.35rem}
}
@media (max-width:380px){
  :root{--pad-x:1rem}
  .foot-cols{grid-template-columns:1fr}
  .gate__field{flex-direction:column}
  .gate__input{border-right:1px solid var(--ink-line);border-bottom:0}
  .gate__btn{padding:.95rem;border-top:0}
}

/* ---------- 21. Motion preference ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{opacity:1;transform:none}
}

/* ---------- 22. Print ---------- */
@media print{
  .site-head,.drawer,.nav-toggle,.hero__scroll,.persp{display:none !important}
  body{background:#fff;color:#000}
  .ink-block,.site-foot,.phero,.hero{background:#fff !important;color:#000 !important}
}

/* ==========================================================================
   23. Page-specific compositions
   ========================================================================== */

/* --- About: sticky section index --- */
.idx{border-top:1px solid var(--paper-line)}
.idx li{border-bottom:1px solid var(--paper-line)}
.idx a{
  display:flex;align-items:baseline;gap:.85rem;padding:.72rem 0;
  font-size:var(--t-sm);font-weight:500;color:var(--slate);
  transition:color .3s var(--ease),padding-left .35s var(--ease-out);
}
.idx a span{
  font-size:.62rem;font-weight:700;letter-spacing:.16em;color:var(--copper);
  flex:none;font-variant-numeric:tabular-nums;
}
.idx a:hover,.idx a:focus-visible{color:var(--graphite);padding-left:.4rem}

/* --- About: offset portrait plate on light ground --- */
.aplate{position:relative;max-width:330px}
.aplate__frame{
  position:absolute;inset:18px -16px -16px 18px;
  border:1px solid var(--copper);opacity:.45;pointer-events:none;
}
.aplate__inner{position:relative;background:var(--paper);border:1px solid var(--paper-line);padding:clamp(.85rem,2vw,1.15rem)}
.aplate__img{
  width:100%;aspect-ratio:4/5;object-fit:contain;object-position:center;
  background:var(--ivory);
}
.aplate__cap{
  margin-top:.85rem;padding-top:.65rem;border-top:1px solid var(--paper-line);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone);
}

/* --- Essay blocks with margin notes (Leadership) --- */
.essay{counter-reset:essay}
.essay__part{
  display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
  gap:clamp(1.25rem,4vw,3.5rem);
  padding:clamp(2rem,4.5vw,3.5rem) 0;
  border-top:1px solid var(--ink-line);
}
.essay__part:last-child{border-bottom:1px solid var(--ink-line)}
.essay__side{position:relative}
.essay__n{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.2em;color:var(--copper-soft);
  display:block;margin-bottom:.9rem;font-variant-numeric:tabular-nums;
}
.essay__h{
  font-size:clamp(1.25rem,2.4vw,1.95rem);font-weight:300;letter-spacing:-.03em;
  line-height:1.14;color:var(--on-ink);
}
.essay__note{
  margin-top:1.35rem;padding-left:1rem;border-left:1px solid var(--ink-line);
  font-size:var(--t-sm);line-height:1.68;color:var(--stone-light);
}
@media (max-width:900px){.essay__part{grid-template-columns:1fr}}

/* --- Journey: large milestone bands --- */
.jm{border-top:1px solid var(--paper-line)}
.jband{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(1.25rem,4vw,3.5rem);align-items:center;
  padding:clamp(2.25rem,5vw,4rem) 0;
  border-bottom:1px solid var(--paper-line);
}
.jband--alt{background:linear-gradient(90deg,rgba(168,98,58,.05),transparent 62%)}
.jband__yr{
  font-size:clamp(3.25rem,11vw,9rem);font-weight:200;line-height:.82;
  letter-spacing:-.06em;color:var(--graphite);font-variant-numeric:tabular-nums;
}
.jband__yr em{font-style:normal;color:var(--copper)}
.jband__tag{
  display:block;margin-top:1rem;font-size:var(--t-xs);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--stone);
}
.jband__h{
  font-size:clamp(1.25rem,2.5vw,2rem);font-weight:400;letter-spacing:-.028em;
  line-height:1.16;margin-bottom:1rem;
}
.jband__p{font-size:var(--t-md);line-height:1.76;color:var(--slate);max-width:60ch}
.jband__fig{margin:0;max-width:300px;margin-top:1.75rem}
.jband__img{
  width:100%;aspect-ratio:4/5;object-fit:contain;object-position:center;
  background:var(--ivory);border:1px solid var(--paper-line);padding:.75rem;
}
.jband__figcap{
  margin-top:.7rem;font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone);
}
@media (max-width:820px){.jband{grid-template-columns:1fr;row-gap:1.25rem}}

/* --- Vision: publication layout --- */
.pub{max-width:74ch;margin-inline:auto}
.pub p{font-size:clamp(1.06rem,1.42vw,1.24rem);line-height:1.82;color:var(--slate)}
.pub p+p{margin-top:1.3em}
.pub__drop::first-letter{
  float:left;font-family:var(--serif);font-size:4.6em;line-height:.78;
  padding:.06em .12em 0 0;color:var(--copper);font-weight:400;
}
.pub__pull{
  margin:clamp(2.5rem,5vw,4rem) 0;padding:clamp(1.5rem,3vw,2.25rem) 0;
  border-block:1px solid var(--paper-line);
}
.pub__pull p{
  font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2.6rem);
  line-height:1.2;letter-spacing:-.014em;color:var(--graphite);
}
.pub__h{
  font-size:clamp(1.35rem,2.8vw,2.1rem);font-weight:300;letter-spacing:-.03em;
  line-height:1.14;margin:clamp(2.5rem,5vw,4rem) 0 1.35rem;
}
.pub__h span{
  display:block;font-family:var(--sans);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--copper);margin-bottom:.9rem;
}

/* --- Organization: product ranges --- */
.ranges{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  border-top:1px solid var(--paper-line);border-left:1px solid var(--paper-line);
}
.range{
  padding:clamp(1.5rem,3vw,2.25rem);
  border-right:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line);
  transition:background .4s var(--ease);
}
.range:hover{background:rgba(168,98,58,.045)}
.range__n{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.2em;color:var(--copper);
  display:block;margin-bottom:1.1rem;font-variant-numeric:tabular-nums;
}
.range__t{font-size:clamp(1.1rem,1.9vw,1.45rem);font-weight:400;letter-spacing:-.02em;margin-bottom:.7rem}
.range__d{font-size:var(--t-sm);line-height:1.7;color:var(--slate)}

/* --- Registry data panel --- */
.reg{border-top:1px solid var(--ink-line)}
.reg__row{
  display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:.5rem clamp(1.25rem,3vw,2.5rem);align-items:baseline;
  padding:clamp(1.1rem,2.4vw,1.6rem) 0;border-bottom:1px solid var(--ink-line);
}
.reg__k{font-size:var(--t-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--on-ink-soft)}
.reg__v{font-size:clamp(1rem,1.5vw,1.2rem);font-weight:400;color:var(--on-ink);line-height:1.5;overflow-wrap:anywhere}
@media (max-width:700px){.reg__row{grid-template-columns:1fr}}

/* ---------- 24. Semantic figure resets & overflow safety ---------- */
.plate__inner,.aplate__inner,.gplate__box,.jband__fig{margin:0}
.phero__title,.hero__name,.foot-sig,.statement,.jband__h,.band__t,.rec__t,.essay__h,.pub__h,.range__t{
  overflow-wrap:break-word;
}
.phero__title{hyphens:none}
.brand__name,.ledger__v,.reg__v,.ct__v,.rec__d,.band__d,.prose p{overflow-wrap:break-word}

/* Statements inside a narrow split column read at a smaller display size */
.split .statement{font-size:clamp(1.85rem,4.2vw,3.3rem)}

/* Archive plates: the frame hugs the photograph rather than floating it in dead space.
   Images render at native size (never upscaled), so no plate is softened to fill a box. */
.gplate__box{width:-moz-fit-content;width:fit-content;max-width:100%;margin-inline:auto}
.gplate__img{
  width:auto;height:auto;max-width:100%;
  max-height:min(58vh,480px);object-fit:contain;
}
.gplate__cap{min-width:180px}