/* ============================================================
   The Modi Almanac — "Marigold on Pine"
   A deliberately different system from the light serif reference
   page: deep pine ground, warm sand reading panels, one marigold
   accent, grotesque display (Bricolage) over a serif text face
   (Spectral). Every section uses a different structural device.
   ============================================================ */

:root{
  --pine:#0E2420;        /* ground */
  --pine-raise:#143029;  /* raised surface */
  --pine-edge:#1C4138;   /* seams, bar fills */
  --sand:#F2EBDD;        /* light reading panel */
  --ink:#1B241F;         /* text on sand / marigold */
  --paper:#EAE3D4;       /* text on pine */
  --marigold:#E79A2B;    /* the one bold colour */
  --marigold-deep:#C9741A;
  --mist:#9DAEA6;        /* muted text on pine */

  --max:1120px;
  --gutter:clamp(18px,5vw,56px);
  --radius:14px;

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --text:"Spectral",Georgia,serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--pine);
  color:var(--paper);
  font-family:var(--text);
  font-size:clamp(17px,1.05vw + 14px,19px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:0}
p{margin:0 0 1em}
a{color:inherit}
dl,dd{margin:0}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:10;
  background:var(--marigold);color:var(--ink);padding:12px 18px;
  font-family:var(--display);font-weight:700;border-radius:0 0 12px 0;
}
.skip:focus{left:0}

/* shared inner measure for standard sections */
.glance,.office,.work{padding:clamp(64px,8vw,116px) var(--gutter)}
.glance__title,.registry,
.office__head,.gantt,
.work__head,.ledger{max-width:var(--max);margin-inline:auto}

/* ---------- MASTHEAD ---------- */
.masthead{
  position:sticky;top:0;z-index:9;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px var(--gutter);
  background:rgba(14,36,32,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--pine-edge);
}
.mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:16px;color:var(--paper)}
.mark svg{flex:none}
.jump{display:flex;gap:clamp(12px,2vw,28px);flex-wrap:wrap}
.jump a{font-family:var(--display);font-weight:500;font-size:14px;color:var(--mist);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.jump a:hover{color:var(--paper);border-color:var(--marigold)}
@media(max-width:720px){.jump{display:none}}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(70px,11vw,150px) var(--gutter) clamp(56px,8vw,110px);
}
.hero__inner{max-width:var(--max);margin-inline:auto;position:relative;z-index:2}
.hero__role{font-family:var(--display);font-weight:600;font-size:clamp(14px,1.4vw,17px);color:var(--marigold);margin:0 0 .6em}
.hero__name{
  font-size:clamp(68px,17vw,190px);
  font-weight:800;letter-spacing:-.045em;line-height:.86;
  margin:0 0 .34em;color:var(--paper);
}
.hero__lede{max-width:46ch;font-size:clamp(19px,1.4vw,23px);line-height:1.5;color:var(--paper)}
.vitals{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,56px);margin-top:clamp(28px,4vw,44px);padding-top:26px;border-top:2px solid var(--pine-edge);max-width:640px}
.vitals dt{font-family:var(--display);font-weight:500;font-size:13px;color:var(--mist);margin-bottom:3px}
.vitals dd{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.6vw,20px);color:var(--paper)}

/* marigold sun bleeding off the right edge */
.sun{position:absolute;top:50%;right:-120px;transform:translateY(-50%);z-index:1;pointer-events:none;opacity:.9}
.sun svg{width:clamp(320px,42vw,560px);height:auto;display:block}
@media(max-width:860px){
  .sun{top:auto;bottom:-90px;right:-130px;transform:none;opacity:.5}
}

/* ---------- AT A GLANCE: registry ---------- */
.glance{background:var(--pine-raise)}
.glance__title{font-size:clamp(28px,4vw,48px);margin-bottom:clamp(24px,3vw,40px);color:var(--paper)}
.registry{border-radius:var(--radius);overflow:hidden;border:1px solid var(--pine-edge)}
.registry__row{
  display:grid;grid-template-columns:minmax(180px,.42fr) 1fr;gap:clamp(8px,3vw,40px);
  padding:clamp(16px,2.2vw,24px) clamp(18px,2.4vw,30px);
  align-items:baseline;
}
.registry__row:nth-child(odd){background:var(--pine)}
.registry__row:nth-child(even){background:var(--pine-edge)}
.registry__row dt{font-family:var(--display);font-weight:600;font-size:15px;color:var(--marigold)}
.registry__row dd{font-size:clamp(17px,1.5vw,20px);color:var(--paper);line-height:1.4}
@media(max-width:640px){
  .registry__row{grid-template-columns:1fr;gap:4px}
}

/* ---------- LIFE: sand reading panel, dropcap, margin note ---------- */
.life{background:var(--sand);color:var(--ink);padding:clamp(64px,8vw,120px) var(--gutter)}
.life__col{max-width:70ch;margin-inline:auto;position:relative}
.life h2{font-size:clamp(30px,4.4vw,56px);color:var(--ink);margin-bottom:.7em;max-width:16ch}
.life p{color:#33403a}
.life__open::first-letter{
  font-family:var(--display);font-weight:800;
  float:left;font-size:4.3em;line-height:.72;
  padding:.06em .12em 0 0;color:var(--marigold-deep);
}
.sidenote{
  margin-top:40px;padding:22px 26px;border-left:4px solid var(--marigold);
  background:#ece2cf;color:var(--ink);font-size:17px;line-height:1.5;border-radius:0 12px 12px 0;
}
.sidenote__cue{display:block;font-family:var(--display);font-weight:700;font-size:14px;color:var(--marigold-deep);margin-bottom:6px}
@media(min-width:1040px){
  .sidenote{
    position:absolute;right:-300px;top:120px;width:250px;margin-top:0;
  }
}

/* ---------- OFFICE: proportional governance bar ---------- */
.office__head{margin-bottom:clamp(28px,4vw,52px)}
.office h2{font-size:clamp(30px,4.4vw,56px);color:var(--paper);margin-bottom:.4em}
.office__head p{max-width:52ch;color:var(--mist)}
.gantt__scale{display:flex;justify-content:space-between;font-family:var(--display);font-weight:500;font-size:13px;color:var(--mist);margin-bottom:10px}
.gantt__track{display:flex;gap:6px;min-height:118px}
.bar{
  display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
  padding:16px 18px;border-radius:12px;min-width:92px;
  background:var(--pine-edge);color:var(--paper);
}
.bar--pm{background:var(--marigold);color:var(--ink)}
.bar--now{box-shadow:inset 0 0 0 3px var(--ink);position:relative}
.bar__label{font-family:var(--display);font-weight:700;font-size:clamp(14px,1.3vw,17px);line-height:1.1}
.bar__span{font-family:var(--display);font-weight:500;font-size:13px;opacity:.78}
@media(max-width:720px){
  .gantt__scale{display:none}
  .gantt__track{flex-direction:column;min-height:0}
  .bar{flex-grow:0 !important;min-height:84px}
}

/* ---------- WORK: disclosure ledger ---------- */
.work__head{margin-bottom:clamp(26px,3.5vw,44px)}
.work h2{font-size:clamp(28px,4vw,52px);color:var(--paper);margin-bottom:.4em;max-width:20ch}
.work__head p{color:var(--mist)}
.ledger{display:flex;flex-direction:column;gap:10px}
.entry{background:var(--pine-raise);border-radius:14px;border:1px solid var(--pine-edge);overflow:hidden}
.entry summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:clamp(18px,2.2vw,26px) clamp(20px,2.4vw,30px);
}
.entry summary::-webkit-details-marker{display:none}
.entry__dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--marigold);box-shadow:0 0 0 4px rgba(231,154,43,.18)}
.entry__name{font-family:var(--display);font-weight:700;font-size:clamp(19px,2vw,26px);color:var(--paper)}
.entry__gloss{font-family:var(--display);font-weight:500;font-size:14px;color:var(--mist);margin-left:auto;padding-left:14px}
.entry summary::after{
  content:"";flex:none;width:18px;height:18px;margin-left:16px;
  background:
    linear-gradient(var(--marigold),var(--marigold)) center/18px 2.5px no-repeat,
    linear-gradient(var(--marigold),var(--marigold)) center/2.5px 18px no-repeat;
  transition:transform .25s ease;
}
.entry[open] summary::after{transform:rotate(90deg);opacity:.9;background:
    linear-gradient(var(--marigold),var(--marigold)) center/18px 2.5px no-repeat}
.entry p{margin:0;padding:0 clamp(20px,2.4vw,30px) clamp(20px,2.4vw,28px) clamp(48px,5vw,66px);color:var(--paper);max-width:62ch}
@media(max-width:560px){
  .entry__gloss{display:none}
}

/* ---------- WORLD: full-bleed marigold statement + moments ---------- */
.world{display:grid}
.world__panel{background:var(--marigold);color:var(--ink);padding:clamp(56px,8vw,110px) var(--gutter)}
.world__say{
  max-width:min(26ch,100%);margin:0 auto;
  font-family:var(--text);font-weight:500;font-style:italic;
  font-size:clamp(24px,3.4vw,46px);line-height:1.24;letter-spacing:-.01em;
  text-wrap:balance;
}
.world__moments{padding:clamp(60px,8vw,110px) var(--gutter)}
.world__moments h2{max-width:var(--max);margin:0 auto clamp(26px,3.5vw,46px);font-size:clamp(28px,4vw,52px);color:var(--paper)}
.moments{max-width:var(--max);margin-inline:auto;list-style:none;padding:0;display:grid;gap:clamp(22px,3vw,38px)}
.moments li{
  display:grid;grid-template-columns:minmax(96px,160px) 1fr;gap:clamp(14px,3vw,44px);align-items:start;
}
.moments__year{
  font-family:var(--display);font-weight:800;font-size:clamp(20px,2.4vw,30px);color:var(--marigold);
  width:fit-content;padding-bottom:8px;border-bottom:3px solid var(--marigold);
}
.moments p{margin:0;color:var(--paper);max-width:58ch}
@media(max-width:620px){
  .moments li{grid-template-columns:1fr;gap:6px}
}

/* ---------- COLOPHON ---------- */
.colophon{background:var(--pine-raise);border-top:1px solid var(--pine-edge);padding:clamp(48px,6vw,80px) var(--gutter)}
.colophon>*{max-width:var(--max);margin-inline:auto}
.colophon__note{color:var(--paper);max-width:70ch;font-size:16px}
.colophon__nav{display:flex;flex-wrap:wrap;gap:20px;margin:22px auto}
.colophon__nav a{font-family:var(--display);font-weight:500;font-size:14px;color:var(--marigold);text-decoration:none}
.colophon__nav a:hover{text-decoration:underline}
.colophon__fine{color:var(--mist);font-size:14px;margin:0}

/* ---------- the one orchestrated motion: hero settles on load ---------- */
@media(prefers-reduced-motion:no-preference){
  .hero__name{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero__role{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero__lede{animation:rise .9s .12s cubic-bezier(.2,.7,.2,1) both}
  .vitals{animation:rise .9s .2s cubic-bezier(.2,.7,.2,1) both}
  .sun{animation:dawn 1.4s .1s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes dawn{from{opacity:0;transform:translateY(-50%) rotate(-28deg) scale(.6)}to{opacity:.9;transform:translateY(-50%) rotate(0) scale(1)}}
}
@media(prefers-reduced-motion:no-preference) and (max-width:860px){
  @keyframes dawn{from{opacity:0;transform:rotate(-28deg) scale(.6)}to{opacity:.5;transform:none}}
}