/* =========================================================
   mikemasters.eu — core stylesheet
   Neutral graphite · pewter accent · light + dark
   ========================================================= */

/* ---------- fonts ---------- */
@font-face{font-family:'EB Garamond';src:url('../fonts/eb-garamond-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/eb-garamond-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/eb-garamond-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/eb-garamond-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---------- tokens : dark (default) ---------- */
:root{
  --bg:        #0b0b0d;
  --bg-rgb:    11,11,13;
  --bg-2:      #121216;
  --text:      #eceef1;
  --text-rgb:  236,238,241;

  --dim:       rgba(236,238,241,.66);
  --faint:     rgba(236,238,241,.42);
  --ghost:     rgba(236,238,241,.20);
  --rule:      rgba(236,238,241,.13);

  --accent:      #a9b4c2;
  --accent-dim:  rgba(169,180,194,.55);
  --accent-veil: rgba(169,180,194,.07);

  --surface:      rgba(236,238,241,.045);
  --surface-hi:   rgba(236,238,241,.075);
  --shadow:       0 20px 44px -26px rgba(0,0,0,.9);

  --crest-filter: brightness(0) invert(1);
  --img-adjust:   saturate(.86) contrast(1.02) brightness(1.06);
  --grain-op:     .34;

  --serif: 'EB Garamond', Cambria, Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1220px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  /* one gutter for every card grid — lineage and influences share it */
  --card-gap: clamp(1.1rem, 2.2vw, 1.6rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- tokens : light ---------- */
:root[data-theme="light"]{
  --bg:        #f4f5f6;
  --bg-rgb:    244,245,246;
  --bg-2:      #eaebed;
  --text:      #15171b;
  --text-rgb:  21,23,27;

  --dim:       rgba(21,23,27,.74);
  --faint:     rgba(21,23,27,.50);
  --ghost:     rgba(21,23,27,.24);
  --rule:      rgba(21,23,27,.15);

  --accent:      #5c6879;
  --accent-dim:  rgba(92,104,121,.55);
  --accent-veil: rgba(92,104,121,.07);

  --surface:      #ffffff;
  --surface-hi:   #ffffff;
  --shadow:       0 20px 44px -26px rgba(21,23,27,.30);

  --crest-filter: brightness(0);
  --img-adjust:   saturate(.9) contrast(1.01) brightness(1.02);
  --grain-op:     .16;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg);
  /* No scrollbar anywhere. It is not decoration we want, and — more to the point — a
     scrollbar that appears on long pages and not on short ones shifts every centred
     layout sideways as you navigate. Removing its width removes the shift, and lets the
     hero photograph run to the actual edge of the screen. Scrolling itself is untouched:
     wheel, trackpad, touch, arrows, space and Page keys all behave normally. */
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* old Edge */
}
html::-webkit-scrollbar{width:0;height:0}   /* Chrome, Safari */
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color .4s var(--ease),color .4s var(--ease);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.08}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--accent);color:var(--bg)}

/* grain */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(5rem,11vw,9.5rem);position:relative}
.section--rule{border-top:1px solid var(--rule)}

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--sans);font-size:.68rem;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:.9rem;
}
.eyebrow::before{content:'';width:2.2rem;height:1px;background:var(--accent-dim)}
.eyebrow--plain::before{display:none}

.index-num{
  font-family:var(--sans);font-size:.66rem;font-weight:500;letter-spacing:.28em;
  color:var(--faint);
}

.display{font-size:clamp(2.6rem,6.2vw,4.75rem);line-height:1.02;letter-spacing:-.022em}
.h2{font-size:clamp(2rem,4.2vw,3.1rem)}
.h3{font-size:clamp(1.35rem,2.1vw,1.7rem);line-height:1.2}

.lede{
  font-family:var(--serif);font-size:clamp(1.2rem,1.7vw,1.5rem);
  line-height:1.62;color:var(--dim);font-weight:400;
}
.body-copy{color:var(--dim);max-width:62ch}
.body-copy + .body-copy{margin-top:1.15em}

.measure{max-width:66ch}
.measure-sm{max-width:52ch}

/* quiet link */
.qlink{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-size:.74rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text);
  padding-bottom:.42rem;border-bottom:1px solid var(--ghost);
  transition:border-color .45s var(--ease),color .45s var(--ease);
}
.qlink .arw{transition:transform .45s var(--ease);display:inline-block}
.qlink:hover{border-color:var(--accent);color:var(--accent)}
.qlink:hover .arw{transform:translateX(5px)}
.qlink--accent{color:var(--accent);border-color:var(--accent-dim)}

.inline-link{color:var(--accent);border-bottom:1px solid var(--accent-dim)}

.cluster{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,3vw,2.75rem);align-items:center}

/* =========================================================
   header
   ========================================================= */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(var(--bg-rgb),.82);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--rule);
}
/* crest, then the pages, then the switch — one group, kept clear of the portrait */
.header__inner{
  display:flex;align-items:center;gap:clamp(1.5rem,3.2vw,2.8rem);
  height:clamp(72px,7vw,92px);
}
/* below the nav breakpoint the burger takes the right edge on its own */
@media (max-width:760px){
  .header__inner > .header__right{margin-left:auto}
}
.brand{display:flex;align-items:center;gap:.85rem;flex:none}
.brand__mark{width:30px;height:30px;object-fit:contain;opacity:.9;filter:var(--crest-filter)}
/* standing alone in the header, the crest carries the whole mark — give it more presence */
.header .brand__mark{width:clamp(32px,3.4vw,40px);height:auto}
.brand__word{
  font-family:var(--serif);font-size:1.22rem;font-weight:500;
  letter-spacing:.05em;white-space:nowrap;
}

.header__right{display:flex;align-items:center;gap:clamp(1.2rem,2.2vw,2rem)}

.nav{display:flex;align-items:center;gap:clamp(1.4rem,2.6vw,2.6rem)}
.nav a{
  font-size:.73rem;font-weight:400;letter-spacing:.19em;text-transform:uppercase;
  color:var(--dim);position:relative;padding-block:.4rem;
  transition:color .4s var(--ease);
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--accent);transition:width .45s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}

/* theme toggle — a real switch: moon on the left, sun on the right, knob slides */
.theme{
  position:relative;flex:none;cursor:pointer;
  width:58px;height:30px;padding:0 7px;
  background:none;border:1px solid var(--rule);border-radius:999px;
  display:flex;align-items:center;justify-content:space-between;
  transition:border-color .4s var(--ease);
}
.theme:hover{border-color:var(--accent-dim)}
.theme:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.theme svg{
  position:relative;z-index:1;
  width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;
  color:var(--faint);transition:color .45s var(--ease);
}
/* the knob sits under whichever icon is live */
.theme__knob{
  position:absolute;top:50%;left:3px;
  width:22px;height:22px;border-radius:50%;
  background:var(--accent);opacity:.17;
  transform:translateY(-50%);
  transition:transform .45s var(--ease);
}
:root:not([data-theme="light"]) .theme .i-moon{color:var(--text)}
:root[data-theme="light"] .theme .i-sun{color:var(--text)}
:root[data-theme="light"] .theme__knob{transform:translate(28px,-50%)}

.burger{
  display:none;background:none;border:0;cursor:pointer;padding:.6rem;
  flex-direction:column;gap:5px;
}
.burger span{display:block;width:22px;height:1px;background:var(--text);transition:transform .4s var(--ease),opacity .3s}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:99;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  padding:0 var(--gut);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.drawer.is-open{opacity:1;visibility:visible}
.drawer a{
  font-family:var(--serif);font-size:clamp(1.9rem,7vw,2.7rem);
  padding-block:.42rem;border-bottom:1px solid var(--rule);color:var(--dim);
}
.drawer a:last-child{border-bottom:0}

/* =========================================================
   hero
   ========================================================= */
.hero{
  position:relative;display:flex;
  min-height:100vh;min-height:100svh;
  padding-top:clamp(7rem,11vw,9rem);padding-bottom:clamp(3.5rem,7vw,6rem);
  overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:-20%;right:-10%;width:60vw;height:60vw;max-width:820px;max-height:820px;
  background:radial-gradient(circle,var(--accent-veil) 0%,transparent 62%);
  pointer-events:none;
}
.hero__grid{
  display:flex;align-items:center;flex:1;
  min-height:clamp(460px,58vh,640px);
}
.hero__copy{position:relative;z-index:2;width:100%;max-width:min(100%,660px)}
.hero__name{
  font-size:clamp(3.4rem,11.5vw,8.4rem);line-height:.9;letter-spacing:-.035em;font-weight:500;
  margin-top:1.6rem;
}
.hero__name span{display:block}
.hero__name .ln2{padding-left:.09em;color:var(--text)}
.hero__rule{width:100%;height:1px;background:linear-gradient(90deg,var(--accent-dim),transparent);margin-block:clamp(1.8rem,3.5vw,2.6rem)}
.hero__stance{max-width:46ch}
.hero__actions{margin-top:clamp(2rem,4vw,2.9rem)}

/* portrait — full-bleed, dissolves into the ground. no frame, no plaque. */
.portrait{
  position:absolute;top:0;bottom:0;right:0;
  width:min(52vw,800px);
  margin:0;z-index:1;pointer-events:none;
}
.portrait picture{display:block;width:100%;height:100%}
/* the top veil is gone: nothing sits over the photo any more, so the fade that kept
   header elements legible was only dimming the top of the picture for no reason. */
.portrait__img{
  width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  filter:var(--img-adjust);
  /* long dissolve on the left for type legibility. photo stays lit. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 7%,rgba(0,0,0,.55) 18%,rgba(0,0,0,.86) 31%,#000 44%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 7%,rgba(0,0,0,.55) 18%,rgba(0,0,0,.86) 31%,#000 44%);
}
.portrait__wash{position:absolute;inset:0;pointer-events:none}

/* =========================================================
   statement band
   ========================================================= */
.statement{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.statement__q{
  font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.55rem);
  line-height:1.34;letter-spacing:-.012em;max-width:24ch;font-weight:400;
}
.statement__q em{font-style:italic;color:var(--accent)}
.statement__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}

/* =========================================================
   trio
   ========================================================= */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.5vw,1.35rem)}
.trio__cell{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:18px;
  padding:clamp(1.7rem,3vw,2.4rem);
  display:flex;flex-direction:column;gap:.9rem;
  transition:transform .55s var(--ease),border-color .55s var(--ease),
             box-shadow .55s var(--ease),background .55s var(--ease);
}
.trio__cell:hover{
  transform:translateY(-4px);
  border-color:var(--accent-dim);
  background:var(--surface-hi);
  box-shadow:var(--shadow);
}
.trio__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.trio__title{font-family:var(--serif);font-size:clamp(1.45rem,2.2vw,1.8rem);font-weight:500;letter-spacing:-.01em}
.trio__body{color:var(--dim);font-size:.95rem;flex:1}
.trio__foot{margin-top:auto;padding-top:1rem}
.trio .index-num{
  font-size:.6rem;color:var(--faint);
  border:1px solid var(--rule);border-radius:999px;
  padding:.26rem .6rem;flex:none;
}

/* =========================================================
   quote band
   ========================================================= */
.quoteband{position:relative;overflow:hidden}
.quoteband::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:70vw;height:70vw;max-width:900px;max-height:900px;
  background:radial-gradient(circle,var(--accent-veil) 0%,transparent 62%);pointer-events:none;
}
.quoteband__inner{position:relative;max-width:900px;margin-inline:auto;text-align:center}
.quoteband__mark{
  font-family:var(--serif);font-size:clamp(3rem,6vw,4.5rem);line-height:1;
  color:var(--accent-dim);display:block;margin-bottom:.4rem;
}
.quoteband__q{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,3.8vw,2.9rem);line-height:1.32;letter-spacing:-.015em;
}
.quoteband__q em{font-style:italic;color:var(--accent)}
.quoteband__cite{
  display:block;margin-top:clamp(1.6rem,3vw,2.2rem);
  font-family:var(--sans);font-size:.68rem;font-style:normal;
  letter-spacing:.26em;text-transform:uppercase;color:var(--faint);
}
.quoteband__cite span{color:var(--dim)}
/* closing line — same voice, quieter: no mark, no veil, smaller */
.quoteband--close::before{display:none}
.quoteband--close .quoteband__q{font-size:clamp(1.35rem,2.5vw,2rem);max-width:26ch}

/* =========================================================
   lineage — mentors
   ========================================================= */
/* Flex, not grid — the stack wrapper guarantees each row card is exactly half
   the lead card's height, whatever the content does. */
.lineage{
  display:flex;align-items:stretch;
  gap:var(--card-gap);
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
/* lead mentor — vertical card, square image on top, sets the height */
.lineage__lead{flex:0 0 34%;min-width:0}
.lineage__lead .mentor{height:100%}
/* the two secondary mentors, stacked, each 50% of the lead */
.lineage__stack{flex:1;display:flex;flex-direction:column;gap:var(--card-gap);min-width:0}
.lineage__stack .mentor{flex:1 1 0;min-height:0}

/* secondary mentors — horizontal: image left (full height), copy right.
   Doubled class = higher specificity than the base .mentor rule below,
   which would otherwise force flex-direction:column. */
.mentor.mentor--row{flex-direction:row;align-items:stretch}
.mentor.mentor--row .mentor__img,
.mentor.mentor--row .mentor__mark{
  flex:0 0 33%;width:33%;height:auto;
  aspect-ratio:auto;min-height:0;align-self:stretch;
}
.mentor.mentor--row .mentor__mark{
  border-bottom:0;border-right:1px solid var(--rule);
}
.mentor.mentor--row .mentor__mark span{font-size:clamp(1.9rem,3.2vw,2.5rem)}
.mentor.mentor--row .mentor__body{
  padding:clamp(1.1rem,2vw,1.5rem);gap:.35rem;
  justify-content:center;min-height:0;min-width:0;
}
.mentor.mentor--row .mentor__text{font-size:.87rem;margin-top:0}
.mentor.mentor--row .mentor__link{padding-top:.7rem}
.mentor{
  background:var(--surface);border:1px solid var(--rule);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .55s var(--ease),border-color .55s var(--ease),
             box-shadow .55s var(--ease),background .55s var(--ease);
}
.mentor:hover{
  transform:translateY(-4px);border-color:var(--accent-dim);
  background:var(--surface-hi);box-shadow:var(--shadow);
}
.mentor__img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  filter:var(--img-adjust);
}
/* monogram panel — stands in for a portrait, in the site's own type */
.mentor__mark{
  width:100%;aspect-ratio:1/1;display:grid;place-items:center;position:relative;
  background:
    radial-gradient(120% 120% at 30% 20%, var(--accent-veil) 0%, transparent 58%),
    var(--bg-2);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
}
.mentor__mark::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, transparent 38%, rgba(var(--bg-rgb),.5) 100%);
}
.mentor__mark span{
  position:relative;z-index:1;
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.4rem,5.5vw,3.6rem);letter-spacing:.06em;
  color:var(--accent);opacity:.55;
}
.mentor__body{padding:clamp(1.3rem,2.4vw,1.75rem);display:flex;flex-direction:column;gap:.55rem;flex:1}
.mentor__name{font-family:var(--serif);font-size:clamp(1.25rem,1.9vw,1.5rem);font-weight:500;line-height:1.2}
.mentor__role{font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.mentor__text{color:var(--dim);font-size:.92rem;margin-top:.2rem}
.mentor__link{
  margin-top:auto;padding-top:1rem;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  transition:color .4s var(--ease);
}
.mentor__link:hover{color:var(--accent)}

@media (max-width:860px){
  .lineage{flex-direction:column}
  .lineage__lead{flex:1 1 auto}
  /* stacked, there is no lead-card height left to divide in half — the halving rule
     (flex-basis 0 + min-height 0) would collapse both cards to nothing and .mentor's
     overflow:hidden would clip them out of sight entirely. Size to content instead. */
  .lineage__stack{flex:1 1 auto}
  .lineage__stack .mentor{flex:1 1 auto;min-height:0}
  /* image on top, copy beneath — same shape as the lead card */
  .mentor.mentor--row{flex-direction:column}
  /* square, like the lead card — the source files are already square, so 1/1 crops
     nothing and all three portraits end up the same height */
  .mentor.mentor--row .mentor__img,
  .mentor.mentor--row .mentor__mark{
    flex:none;width:100%;aspect-ratio:1/1;height:auto;
  }
  .mentor.mentor--row .mentor__mark{border-right:0;border-bottom:1px solid var(--rule)}
  .mentor.mentor--row .mentor__body{justify-content:flex-start}
}

/* =========================================================
   influences — secondary to lineage, lighter treatment
   ========================================================= */
.influences{
  display:grid;grid-template-columns:repeat(4,1fr);
  /* same gap as .lineage, vertically and horizontally, so the two tiers read as one block */
  gap:var(--card-gap);
  margin-top:var(--card-gap);
}
/* vertical cards — square portrait on top, copy beneath */
.inf{
  background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .55s var(--ease),border-color .55s var(--ease),
             box-shadow .55s var(--ease),background .55s var(--ease);
}
.inf:hover{
  transform:translateY(-3px);border-color:var(--accent-dim);
  background:var(--surface-hi);box-shadow:var(--shadow);
}
.inf__img,.inf__mark{
  flex:none;width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;
}
.inf__img{filter:var(--img-adjust)}
.inf__mark{
  display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 20%, var(--accent-veil) 0%, transparent 58%), var(--bg-2);
  border-bottom:1px solid var(--rule);
}
.inf__mark span{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:.06em;
  color:var(--accent);opacity:.5;
}
.inf__body{
  padding:clamp(.95rem,1.6vw,1.25rem);
  display:flex;flex-direction:column;gap:.28rem;
  justify-content:flex-start;flex:1;min-width:0;
}
.inf__role{font-size:.55rem;letter-spacing:.19em;text-transform:uppercase;color:var(--accent)}
.inf__name{font-family:var(--serif);font-size:clamp(1.02rem,1.4vw,1.18rem);font-weight:500;line-height:1.18}
.inf__text{color:var(--dim);font-size:.79rem;line-height:1.5;margin-top:.1rem}
.inf__link{
  margin-top:auto;padding-top:.6rem;
  font-size:.56rem;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);
  transition:color .4s var(--ease);
}
.inf__link:hover{color:var(--accent)}

@media (max-width:1000px){ .influences{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){  .influences{grid-template-columns:1fr} }

/* =========================================================
   about — opening spread
   ========================================================= */

/* =========================================================
   EU band
   ========================================================= */
.eu{position:relative;background:var(--bg-2);overflow:hidden}
.eu::before{
  content:'';position:absolute;bottom:-30%;left:-8%;width:52vw;height:52vw;max-width:700px;max-height:700px;
  background:radial-gradient(circle,var(--accent-veil) 0%,transparent 64%);pointer-events:none;
}
.eu__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center;position:relative}
.eu__crest{width:clamp(120px,15vw,180px);opacity:.88;filter:var(--crest-filter)}
.crest-mark{filter:var(--crest-filter);opacity:.9}
.eu__list{margin-top:2rem;display:grid;gap:.1rem}
.eu__list li{
  display:flex;gap:1.2rem;align-items:baseline;
  padding-block:.85rem;border-bottom:1px solid var(--rule);
  font-size:.93rem;color:var(--dim);
}
.eu__list li span:first-child{color:var(--accent);font-size:.68rem;letter-spacing:.2em;min-width:2.2rem}
.eu__list strong{font-weight:500;color:var(--text)}

/* =========================================================
   contact
   ========================================================= */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.contact__rows{display:grid;gap:.1rem;margin-top:.5rem}
.contact__row{
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding-block:1.15rem;border-bottom:1px solid var(--rule);
  transition:padding-left .45s var(--ease),border-color .45s var(--ease);
}
.contact__row:hover{padding-left:.7rem;border-bottom-color:var(--accent-dim)}
.contact__label{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.contact__val{font-family:var(--serif);font-size:1.18rem;color:var(--text)}

/* =========================================================
   footer
   ========================================================= */
.footer{border-top:1px solid var(--rule);padding-block:clamp(3rem,6vw,4.5rem)}
.footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2.5rem;align-items:flex-start}
.footer__nav{display:flex;flex-wrap:wrap;gap:1.6rem}
.footer__nav a{font-size:.73rem;letter-spacing:.19em;text-transform:uppercase;color:var(--dim);transition:color .4s var(--ease)}
.footer__nav a:hover{color:var(--accent)}
.footer__bottom{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.8rem;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  font-size:.72rem;letter-spacing:.09em;color:var(--faint);
}

/* =========================================================
   page header (inner pages)
   ========================================================= */
.pagehead{padding-top:clamp(9rem,16vw,12.5rem);padding-bottom:clamp(3rem,6vw,5rem);position:relative}
.pagehead::before{
  content:'';position:absolute;top:0;right:-6%;width:44vw;height:44vw;max-width:600px;max-height:600px;
  background:radial-gradient(circle,var(--accent-veil) 0%,transparent 62%);pointer-events:none;
}
.pagehead__title{margin-top:1.5rem}
/* wide opening statement carried under the title */
.pagehead__lede{
  position:relative;z-index:1;
  margin-top:clamp(1.8rem,3.2vw,2.8rem);max-width:none;
  font-family:var(--serif);font-size:clamp(1.3rem,1.9vw,1.72rem);
  line-height:1.52;font-weight:400;color:var(--text);letter-spacing:-.01em;
  text-wrap:pretty;
}
/* pagehead with the crest set to the right of the copy */
.pagehead__grid{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  column-gap:clamp(2rem,5vw,4.5rem);
}
.pagehead__crest{
  position:relative;z-index:1;justify-self:end;align-self:center;
  width:clamp(190px,26vw,360px);height:auto;
  margin-block:1.5rem;margin-inline-end:clamp(0rem,2.5vw,2.5rem);
}
/* keep the crest at .9 after the reveal finishes */
.crest-mark[data-reveal].in{opacity:.9}

/* stream (writing lists) */
.stream{display:grid;gap:0;border-top:1px solid var(--rule)}
.stream__item{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.2rem,3vw,2.6rem);
  align-items:baseline;padding-block:clamp(1.6rem,3vw,2.2rem);
  border-bottom:1px solid var(--rule);
  transition:padding-left .5s var(--ease);
}
.stream__item:hover{padding-left:.8rem}
.stream__date{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);min-width:7.5rem}
/* both are <span>s in the markup — must be block or they run together inline */
.stream__title{
  display:block;
  font-family:var(--serif);font-size:clamp(1.25rem,2.1vw,1.6rem);
  font-weight:500;line-height:1.25;transition:color .45s var(--ease);
}
.stream__item:hover .stream__title{color:var(--accent)}
.stream__excerpt{display:block;color:var(--dim);font-size:.93rem;margin-top:.5rem;max-width:64ch}
.stream__tag{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-dim);white-space:nowrap}

/* =========================================================
   chronology / timeline
   ========================================================= */
.tl{position:relative;max-width:1180px;margin:clamp(2.5rem,5vw,3.8rem) auto 0}
/* centre rail */
.tl::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;
  background:linear-gradient(180deg,transparent 0,var(--rule) 4%,var(--rule) 90%,transparent 100%);
}
.tl__item{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(2.6rem,5.5vw,4.6rem);
  padding-bottom:clamp(2.4rem,4.5vw,3.4rem);
}
.tl__item > .tl__card{grid-column:1}
.tl__item:nth-child(even) > .tl__card{grid-column:2}
/* node on the rail */
.tl__item::before{
  content:'';position:absolute;left:50%;top:.52rem;z-index:2;
  width:11px;height:11px;margin-left:-5.5px;border-radius:50%;
  background:var(--bg);border:1px solid var(--accent);
  box-shadow:0 0 0 4px var(--bg);
  transition:background .45s var(--ease);
}
.tl__item:hover::before{background:var(--accent)}

/* no box — entries sit open on the page, aligned toward the rail */
.tl__card{position:relative;max-width:56ch;padding-block:.15rem}
.tl__item > .tl__card{margin-left:auto;text-align:right}
.tl__item:nth-child(even) > .tl__card{margin-left:0;margin-right:auto;text-align:left}
.tl__year{
  display:inline-block;
  font-family:var(--sans);font-size:.66rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  padding:.32rem .72rem;border:1px solid var(--accent-dim);border-radius:999px;
  margin-bottom:1rem;
}
.tl__title{
  font-family:var(--serif);font-size:clamp(1.18rem,1.8vw,1.45rem);
  font-weight:500;line-height:1.25;
  text-wrap:balance;
  transition:color .45s var(--ease);
}
.tl__item:hover .tl__title{color:var(--accent)}
.tl__text{color:var(--dim);font-size:.94rem;margin-top:.65rem}
.tl__note{
  display:inline-block;margin-top:.9rem;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-dim);
}

/* =========================================================
   signup — notice when a new bearing is issued
   ========================================================= */
.signup{
  background:var(--surface);border:1px solid var(--rule);border-radius:18px;
  padding:clamp(1.5rem,3vw,2.4rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.2rem,3vw,2.6rem);align-items:center;
}
.signup__title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.15rem,1.8vw,1.42rem);line-height:1.25;
}
.signup__sub{color:var(--dim);font-size:.88rem;margin-top:.55rem;max-width:34ch}
.signup__form{display:flex;gap:.55rem;flex-wrap:wrap}
.signup__input{
  flex:1 1 220px;min-width:0;
  background:var(--bg);border:1px solid var(--rule);border-radius:999px;
  padding:.82rem 1.15rem;color:var(--text);
  font-family:var(--sans);font-size:.88rem;
  transition:border-color .4s var(--ease);
}
.signup__input::placeholder{color:var(--faint)}
.signup__input:focus{outline:none;border-color:var(--accent-dim)}
.signup__btn{
  flex:none;cursor:pointer;
  background:none;border:1px solid var(--accent-dim);border-radius:999px;
  padding:.82rem 1.5rem;color:var(--text);
  font-family:var(--sans);font-size:.68rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  transition:background .45s var(--ease),border-color .45s var(--ease);
}
.signup__btn:hover{background:var(--surface-hi);border-color:var(--accent)}
.signup__note{
  margin-top:.85rem;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}
/* honeypot: off-screen for people, irresistible to bots */
.signup__trap{
  position:absolute;left:-9999px;width:1px;height:1px;
  opacity:0;pointer-events:none;
}
.signup__msg{
  margin-top:.9rem;font-size:.82rem;color:var(--dim);
  min-height:1.2em;opacity:0;transform:translateY(4px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.signup__msg.is-on{opacity:1;transform:none}
.signup__msg.is-bad{color:var(--accent)}
.signup.is-busy .signup__btn{opacity:.55;pointer-events:none}
.signup.is-done .signup__form{display:none}
@media (max-width:760px){
  .signup{grid-template-columns:1fr;gap:1.4rem}
}

/* =========================================================
   piece — a single written article (bearing / dispatch / waypoint)
   ========================================================= */
.piece{max-width:68ch}
.piece__standfirst{
  font-family:var(--serif);font-size:clamp(1.12rem,1.5vw,1.3rem);
  line-height:1.6;color:var(--text);
  padding-bottom:clamp(1.6rem,2.6vw,2.2rem);
  border-bottom:1px solid var(--rule);
}
.piece h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.32rem,2vw,1.7rem);line-height:1.24;
  margin-top:clamp(2.6rem,4.5vw,3.6rem);
}
.piece p{color:var(--dim);margin-top:1.15em}
.piece h2 + p{margin-top:1.1rem}
.piece strong{color:var(--text);font-weight:500}
.piece ul{margin-top:1.3em;padding-left:1.05rem;color:var(--dim)}
.piece li{margin-top:.62em;padding-left:.35rem}
.piece li::marker{color:var(--accent-dim)}

/* placeholder marker */
.placeholder{
  border:1px dashed var(--ghost);padding:.9rem 1.15rem;border-radius:2px;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  display:inline-block;
}

/* =========================================================
   reveal
   ========================================================= */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}

/* =========================================================
   responsive
   ========================================================= */
@media (max-width:1000px){
  .hero{display:block;min-height:0}
  .hero__grid{min-height:0;display:block}
  .hero__copy{max-width:none}
  .portrait{
    position:relative;right:auto;top:auto;bottom:auto;
    width:calc(100% + (var(--gut) * 2));
    margin-left:calc(var(--gut) * -1);
    aspect-ratio:5/4;margin-bottom:clamp(2rem,5vw,3rem);
  }
  /* fade starts low, over the chest — never near the face */
  .portrait{-webkit-mask-image:none;mask-image:none}
  .portrait__img{
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.66) 0%,#000 20%,#000 78%,rgba(0,0,0,.5) 93%,transparent 100%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,.66) 0%,#000 20%,#000 78%,rgba(0,0,0,.5) 93%,transparent 100%);
  }
  .portrait__wash{background:none}
  .statement__grid,.eu__grid,.contact__grid{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav{display:none}
  .burger{display:flex}
  .hero__name{font-size:clamp(3rem,15vw,5rem)}
  .stream__item{grid-template-columns:1fr;gap:.5rem}
  .stream__date{min-width:0}
}
/* crest returns above the copy */
@media (max-width:860px){
  .pagehead__grid{grid-template-columns:1fr}
  .pagehead__crest{
    order:-1;justify-self:start;
    width:clamp(84px,16vw,120px);margin-bottom:2rem;
  }
}
/* wide screens: timeline breaks past the wrap so long titles hold one line */
@media (min-width:1280px){
  .tl{
    width:min(1460px,95vw);max-width:none;
    left:50%;transform:translateX(-50%);
  }
  .tl__item{column-gap:clamp(3rem,4vw,4.6rem)}
  .tl__card{max-width:min(660px,100%)}
  /* paragraphs keep their original measure inside the wider card */
  .tl__text{max-width:52ch;margin-left:auto}
  .tl__item:nth-child(even) > .tl__card .tl__text{margin-left:0;margin-right:auto}
}
/* timeline collapses to a single left rail */
@media (max-width:860px){
  .tl::before{left:5px;margin-left:0}
  .tl__item{grid-template-columns:1fr;padding-left:2.1rem;padding-bottom:clamp(2rem,4vw,2.8rem)}
  .tl__item > .tl__card,
  .tl__item:nth-child(even) > .tl__card{grid-column:1;margin:0;text-align:left;max-width:none}
  .tl__item::before{left:5px;margin-left:-5.5px;top:.55rem}
}