/* Martelli Consulting — shared tokens & typography
   Green: true British Racing Green. Deliberately darker than the previous #102F0F,
   and hue-shifted from 118deg (yellow-leaning) to ~159deg so it sits with the fern
   photography, which averages 144deg. */
:root{
  --brg:#012C1D;          /* primary field  L 29.4 (old green was L 34.1) */
  --brg-deep:#011A12;     /* footers, overlays, the darkest note */
  --brg-lift:#03351F;     /* subtle raised panel */
  --cream:#F6E1C6;        /* unchanged: his brand cream */
  --paper:#F7EAD8;        /* content sheet, a shade lighter than the brand cream */
  --ink:#012C1D;

  --cream-dim:rgba(246,225,198,.66);
  --hair-light:rgba(246,225,198,.22);
  --hair-dark:rgba(1,44,29,.18);

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --gut:clamp(1.35rem,6vw,6rem);
  --max:1220px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--brg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;
}
img{max-width:100%;height:auto;display:block}
figure,blockquote{margin:0}   /* browsers default figure to 40px side margins */
.wrap{max-width:var(--max);margin:0 auto}

/* two label registers: things you click, and things you read */
h2.label,.label{font-size:.67rem;letter-spacing:.22em;text-transform:uppercase;font-weight:400}
h2.label{margin:0;display:inline-block;line-height:inherit}
.label-nav{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400}

/* Cormorant is a display face: it needs weight when small and loses it when large */
.tagline{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.46rem,5.4vw,2.45rem);
  line-height:1.26;
  letter-spacing:.008em;
  margin:0;
  text-wrap:balance;
}
@media(min-width:760px){.tagline{font-weight:300;letter-spacing:-.012em;line-height:1.2}}

/* ---------- shared content sheet (used by every design) ---------- */
.sheet{background:var(--paper);padding:clamp(3.25rem,8vw,6.5rem) var(--gut)}
.sheet-head{
  display:flex;align-items:baseline;gap:1.25rem;
  padding-bottom:1.1rem;border-bottom:1px solid var(--hair-dark);
  margin-bottom:clamp(2.25rem,5vw,3.5rem);
}
.sheet-head .label{color:rgba(1,44,29,.55);white-space:nowrap}
.sheet-head .fill{flex:1}
.name{font-family:var(--serif);font-weight:400;font-size:clamp(2.35rem,6vw,4.25rem);line-height:1.02;letter-spacing:-.005em;margin:0}
.role{color:rgba(1,44,29,.62);margin:.9rem 0 0}
.cols{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4.5rem);margin-top:clamp(2.25rem,5vw,3.5rem)}
@media(min-width:880px){.cols{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(3rem,6vw,6rem)}}
/* Words are never broken across lines. Justification therefore needs a wide
   enough measure to avoid rivers: at a 330px column the worst word gap measured
   ~6x a normal space, at 440px ~3.2x, at 600px ~2.0x. So justify only when the
   COLUMN is wide enough. A viewport media query gets this wrong, because the
   grid goes two-up at 880px and the bio column is narrower at 900px than at
   700px. A container query tracks the real measure. */
.bio{container-type:inline-size}
.bio p{
  margin:0 0 1.2rem;font-size:clamp(.98rem,1.25vw,1.07rem);line-height:1.78;color:rgba(1,44,29,.88);
  text-align:left;                     /* safe default, also the no-container-query fallback */
  hyphens:none;-webkit-hyphens:none;   /* never break a word across lines */
  overflow-wrap:normal;
  text-wrap:pretty;
}
@container (min-width:560px){
  .bio p{text-align:justify}
}
.bio p:last-child{margin-bottom:0}
/* the closing paragraph is an invitation, not biography: set it apart so it
   does not read as a fifth block of third-person copy */
.bio .invite{
  margin-top:clamp(1.9rem,4vw,2.5rem);
  padding-top:clamp(1.5rem,3vw,1.9rem);
  border-top:1px solid var(--hair-dark);
  font-size:clamp(1.02rem,1.4vw,1.15rem);
  color:rgba(1,44,29,.95);
}
.bio .invite a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:1px;
  font-weight:500;                      /* no resting rule, so weight carries the affordance */
  transition:border-color .3s ease;
}
.bio .invite a:hover,.bio .invite a:focus-visible{border-bottom-color:var(--ink)}
.exp .label{display:block;color:rgba(1,44,29,.55);padding-bottom:.9rem;border-bottom:1px solid var(--hair-dark);margin-bottom:.2rem}
.exp ul{list-style:none;margin:0;padding:0}
.exp li{padding:.86rem 0;border-bottom:1px solid rgba(1,44,29,.09);font-size:.97rem;line-height:1.5}   /* sized so the list finishes level with the bio */
.exp li:last-child{border-bottom:0}
.feature{margin:clamp(3.25rem,7vw,5.5rem) 0 0;padding:clamp(2.5rem,5vw,3.75rem) 0 0;border-top:1px solid var(--hair-dark);text-align:center}
.feature blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,3.4vw,2.5rem);line-height:1.32;margin:0 auto;max-width:38ch}

/* ---------- shared footer ---------- */
.foot{background:var(--brg-deep);color:var(--cream);padding:clamp(3rem,6vw,4.5rem) var(--gut)}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(1.75rem,4vw,3rem)}
.foot-row img{width:clamp(60px,6vw,80px)}
.foot-links{display:flex;flex-wrap:wrap;gap:.55rem clamp(1.5rem,3.5vw,2.75rem);font-size:.95rem}
.foot-links span{color:var(--cream-dim)}
.foot-links a{
  color:var(--cream);text-decoration:none;
  border-bottom:1px solid var(--hair-light);padding-bottom:2px;
  transition:border-color .25s ease,opacity .25s ease;
}
/* unmistakable feedback on hover and on keyboard focus */
.foot-links a:hover{border-bottom-color:var(--cream);border-bottom-width:2px;padding-bottom:1px}
.foot-links a:focus-visible{outline:2px solid var(--cream);outline-offset:3px;border-bottom-color:transparent}
.foot-base{margin:clamp(2.25rem,4vw,3rem) 0 0;padding-top:1.4rem;border-top:1px solid var(--hair-light);color:var(--cream-dim)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}