/* ============================================================================
   SITE-WIDE STYLESHEET
   Every project page loads this file. Pages set nothing except their four
   accent colours (--accent, --accent-head, --accent-copy, --accent-rule) in a
   small :root block placed AFTER the link to this file.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   TOKENS
   --------------------------------------------------------------------------- */
:root{
  --field:#041f2c;
  --blue:#08415c;
  --plum:#511730;
  --brick:#8e443d;
  --salmon:#f7a399;
  --sand:#e0d68a;
  --plate:#f4f0e6;
  --plum-ink:#3a0f21;
  --moss:#2c5e4f;
  --rule:rgba(247,163,153,.24);

  --maxw:1140px;
  --measure:64ch;          /* body text */
  --measure-wide:780px;    /* figures */
  --measure-solo:670px;    /* single figures */
  --measure-table:720px;   /* tables */

  --font-display:"Archivo Black",sans-serif;
  --font-body:"Montserrat",system-ui,sans-serif;
  --font-code:"Source Code Pro",ui-monospace,monospace;

  /* Defaults only; each page overrides these four. */
  --accent:var(--plum);
  --accent-head:var(--sand);
  --accent-copy:var(--salmon);
  --accent-rule:rgba(224,214,138,.3);

  --anchor-offset:96px;    /* 70px nav + breathing room */
}
@media (max-width:1239px){
  :root{--anchor-offset:140px;}   /* nav + section-jump bar + room */
}

/* ---------------------------------------------------------------------------
   BASE
   --------------------------------------------------------------------------- */
*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--anchor-offset);
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}
body{
  margin:0;
  background:var(--field);
  color:var(--salmon);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(24px,4vw,48px);
}
a{color:inherit;}
:focus-visible{outline:3px solid var(--sand);outline-offset:3px;}

/* ---------------------------------------------------------------------------
   NAV
   --------------------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:10;
  background:var(--field);
  border-bottom:1px solid var(--rule);
}
.nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;height:70px;
}
.mark{
  font-family:var(--font-display);
  font-size:15px;color:var(--sand);
  text-decoration:none;white-space:nowrap;
}
.nav a.navlink{
  text-decoration:none;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--salmon);padding:6px 0;
  border-bottom:2px solid transparent;
  transition:border-color .18s ease,color .18s ease;
}
.nav a.navlink:hover{color:var(--sand);border-bottom-color:var(--sand);}

/* ---------------------------------------------------------------------------
   ACCENT BAND
   --------------------------------------------------------------------------- */
.band{background:var(--accent);padding:76px 0 68px;}
.band .eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent-copy);
  margin:0 0 18px;
}
.band h1{
  font-family:var(--font-display);
  overflow-wrap:break-word;
  font-size:clamp(34px,6.6vw,74px);
  line-height:.96;letter-spacing:-.02em;
  color:var(--accent-head);margin:0 0 26px;
  text-transform:uppercase;
}
.band .sub{
  font-size:clamp(17px,2.2vw,24px);
  font-weight:600;color:var(--accent-copy);
  max-width:44ch;text-wrap:balance;margin:0;
}

/* ---------------------------------------------------------------------------
   SECTIONS
   No border between sections: spacing alone separates them, so the page
   reads as one continuous piece rather than a feed of posts.
   --------------------------------------------------------------------------- */
.sec{padding:62px 0;}
.sec:first-of-type{padding-top:70px;}
.sec .eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brick);
  margin:0 0 14px;
}
.sec h2{
  font-family:var(--font-display);
  max-width:760px;overflow-wrap:break-word;
  font-size:clamp(24px,3.6vw,38px);
  line-height:1.05;letter-spacing:-.015em;
  color:var(--sand);margin:0 0 12px;
  text-transform:uppercase;
}
.sec h2 + .rule{
  width:64px;height:4px;border-radius:999px;
  background:var(--accent);margin:0 0 30px;
}
.sec p{max-width:var(--measure);margin:0;}
.sec p + p{margin-top:22px;}
.sec .lede{
  font-size:clamp(19px,2.3vw,24px);
  font-weight:600;color:var(--sand);line-height:1.45;
}
.sec h3{
  font-family:var(--font-body);
  font-size:13px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--brick);margin:36px 0 10px;
}

/* ---------------------------------------------------------------------------
   INLINE CODE
   --------------------------------------------------------------------------- */
code{
  font-family:var(--font-code);
  font-size:.88em;color:var(--sand);
  background:rgba(224,214,138,.1);
  border:1px solid rgba(224,214,138,.2);
  padding:.08em .38em;border-radius:3px;
  white-space:nowrap;
}

/* ---------------------------------------------------------------------------
   LISTS
   --------------------------------------------------------------------------- */
.sec ul,
.sec ol{
  max-width:var(--measure);
  margin:22px 0 0;padding-left:1.25em;
}
.sec li{margin:.4em 0;}
.sec li::marker{color:var(--brick);}

/* ---------------------------------------------------------------------------
   PULL QUOTE
   --------------------------------------------------------------------------- */
blockquote{
  max-width:var(--measure);
  margin:38px 0 0;padding:4px 0 4px 26px;
  border-left:4px solid var(--sand);
  font-size:clamp(18px,2.1vw,21px);
  font-weight:600;line-height:1.5;color:var(--sand);
}
blockquote p{max-width:none;}

/* ---------------------------------------------------------------------------
   CAVEAT BOX
   --------------------------------------------------------------------------- */
.note{
  max-width:var(--measure);
  margin:32px 0 0;padding:20px 22px;
  background:rgba(8,65,92,.38);
  border:1px solid var(--accent-rule);
  border-radius:6px;font-size:15.5px;
}
.note p{max-width:none;}
.note .note-label{
  display:block;font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--sand);margin-bottom:8px;
}

/* ---------------------------------------------------------------------------
   KEY-FIGURE CALLOUT ROW
   --------------------------------------------------------------------------- */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px;margin:34px 0 0;padding:0;
  list-style:none;max-width:var(--measure-wide);
}
.stats li{margin:0;}
.stats li::marker{content:none;}
.stats .val{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(26px,3.4vw,36px);
  line-height:1;color:var(--sand);
}
.stats .lab{
  display:block;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--salmon);opacity:.8;margin-top:8px;
}

/* ---------------------------------------------------------------------------
   FIGURES
   --------------------------------------------------------------------------- */
figure{margin:40px 0 0;max-width:var(--measure-wide);}
figure img{
  display:block;width:100%;height:auto;
  background:var(--plate);
  border:1px solid var(--accent-rule);
  border-radius:6px;cursor:zoom-in;
  transition:border-color .18s ease;
}
figure img:hover,
figure img:focus-visible{border-color:var(--sand);}
figure.solo{max-width:var(--measure-solo);}
figure.pair{
  display:grid;grid-template-columns:1fr 1fr;
  gap:14px;align-items:start;
  max-width:var(--measure-wide);
}

/* ---------------------------------------------------------------------------
   CAPTIONS
   Held to the text measure regardless of figure width. The enlarge hint is
   generated here rather than typed into every caption.
   --------------------------------------------------------------------------- */
figcaption{
  font-family:var(--font-body);
  font-size:13.5px;line-height:1.55;
  color:var(--salmon);opacity:.88;
  max-width:var(--measure);
  margin:14px 0 0;padding-left:20px;
  border-left:3px solid var(--sand);
}
figure.pair figcaption{grid-column:1 / -1;max-width:var(--measure);}
figcaption b{color:var(--sand);font-weight:600;}
figcaption::before{
  content:"Click to enlarge";
  display:block;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--sand);opacity:.75;margin-bottom:7px;
}
@media (hover:none){
  figcaption::before{content:"Tap to enlarge";}
  figure img{cursor:default;}
}

/* ---------------------------------------------------------------------------
   TABLES
   Inset in a panel; first-column padding is kept so the inset reads as one.
   --------------------------------------------------------------------------- */
.table-scroll{
  max-width:var(--measure-table);
  overflow-x:auto;margin:34px 0 0;
  padding:6px 20px 10px;
  background:rgba(8,65,92,.22);
  border:1px solid var(--accent-rule);
  border-radius:8px;
  -webkit-overflow-scrolling:touch;
}
table{
  border-collapse:collapse;width:100%;
  min-width:min(100%,460px);
  font-size:15px;font-variant-numeric:tabular-nums;
}
caption{
  caption-side:top;text-align:left;
  font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--brick);padding:12px 0;
}
th,td{
  text-align:left;padding:11px 14px;
  border-bottom:1px solid var(--rule);
}
th:first-child,td:first-child{padding-left:4px;}
thead th{
  color:var(--sand);font-weight:600;font-size:13px;
  letter-spacing:.06em;
  border-bottom:2px solid var(--accent-rule);
  white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none;}
td.num,th.num{text-align:right;}
tbody tr.key td{color:var(--sand);font-weight:600;}
table.compact{font-size:13.5px;}
table.compact td{padding:7px 12px;}
table.compact code{font-size:.9em;}

/* ---------------------------------------------------------------------------
   SPACING AFTER BLOCK ELEMENTS
   Prefixed with .sec so these outrank `.sec p { margin: 0 }`. Without the
   prefix, body copy runs straight into the caption above it.
   --------------------------------------------------------------------------- */
.sec figure + p,        .sec figure + h3,
.sec .table-scroll + p, .sec .table-scroll + h3,
.sec blockquote + p,    .sec blockquote + h3,
.sec .note + p,         .sec .note + h3,
.sec .stats + p,        .sec .stats + h3,
.sec .actions + p{
  margin-top:40px;
}
.sec ul + p,
.sec ol + p{margin-top:22px;}

/* ---------------------------------------------------------------------------
   REFERENCES + INLINE CITATIONS
   --------------------------------------------------------------------------- */
.refs{
  max-width:78ch;margin:26px 0 0;padding:0;
  list-style:none;font-size:14.5px;line-height:1.55;
}
.refs li{margin:0 0 16px;padding-left:1.4em;text-indent:-1.4em;}
.refs li:target{
  background:rgba(224,214,138,.12);
  outline:2px solid var(--sand);
  outline-offset:5px;border-radius:3px;
}
.refs cite{font-style:italic;color:var(--sand);}
.refs a{color:var(--sand);}

.sec p a[href^="#ref-"],
figcaption a[href^="#ref-"],
td a[href^="#ref-"]{
  color:var(--sand);text-decoration:none;
  border-bottom:1px solid rgba(224,214,138,.4);
}
.sec p a[href^="#ref-"]:hover,
figcaption a[href^="#ref-"]:hover,
td a[href^="#ref-"]:hover{border-bottom-color:var(--sand);}

/* ---------------------------------------------------------------------------
   REPOSITORY / DOWNLOAD BUTTONS
   --------------------------------------------------------------------------- */
.actions{
  display:flex;flex-wrap:wrap;gap:14px;
  margin:34px 0 0;padding:0;list-style:none;
}
.actions li{margin:0;}
.btn{
  display:inline-block;
  font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--sand);
  border:2px solid var(--sand);
  padding:11px 20px;border-radius:999px;
  transition:background .18s ease,color .18s ease;
}
.btn:hover{background:var(--sand);color:var(--field);}

/* ---------------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------------- */
footer{
  padding:44px 0 60px;
  border-top:1px solid var(--rule);
  font-size:13px;color:var(--salmon);
}
footer .wrap{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.backlink{
  text-decoration:none;font-weight:600;
  letter-spacing:.06em;color:var(--sand);
}
.backlink .arw{display:inline-block;transition:transform .22s ease;}
.backlink:hover .arw{transform:translateX(-5px);}

/* ---------------------------------------------------------------------------
   LIGHTBOX
   --------------------------------------------------------------------------- */
.lightbox-overlay{
  position:fixed;inset:0;z-index:100;
  display:none;align-items:center;justify-content:center;
  padding:28px 20px 20px;
  background:rgba(4,31,44,.94);
  backdrop-filter:blur(3px);
}
.lightbox-overlay.open{display:flex;}
.lightbox-overlay.fade-ready{transition:opacity .18s ease;}
.lightbox-close{
  position:absolute;top:18px;right:20px;
  font-family:var(--font-body);
  font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--sand);background:transparent;
  border:2px solid var(--sand);border-radius:999px;
  padding:9px 18px;cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.lightbox-close:hover{background:var(--sand);color:var(--field);}
.lightbox-figure{
  display:flex;flex-direction:column;align-items:center;
  gap:14px;max-width:min(1000px,96vw);max-height:100%;
}
.lightbox-figure img{
  display:block;max-width:100%;
  max-height:calc(100vh - 190px);
  width:auto;height:auto;object-fit:contain;
  background:var(--plate);
  border:1px solid var(--accent-rule);
  border-radius:6px;
}
.lightbox-caption{
  font-family:var(--font-body);
  font-size:13.5px;line-height:1.5;
  color:var(--salmon);max-width:70ch;text-align:left;
}
.lightbox-caption b{color:var(--sand);font-weight:600;}

/* ---------------------------------------------------------------------------
   SECTION JUMP (on-page contents)
   Wide screens: sticky list in the empty right margin.
   Narrower screens: collapsible bar pinned under the top nav.
   --------------------------------------------------------------------------- */
main{position:relative;}
.toc-rail{position:absolute;inset:0;pointer-events:none;z-index:5;}
.toc-rail > .wrap{height:100%;padding-top:70px;}
.toc{
  position:sticky;top:96px;
  width:230px;margin-left:auto;
  pointer-events:auto;font-size:13px;
}
.toc summary{
  list-style:none;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--sand);margin-bottom:12px;cursor:default;
}
.toc summary::-webkit-details-marker{display:none;}
.toc ol{
  list-style:none;margin:0;padding:0 0 0 14px;
  border-left:2px solid var(--accent-rule);
}
.toc li{margin:0;}
.toc a{
  display:block;padding:5px 0;
  color:var(--salmon);opacity:.85;
  text-decoration:none;line-height:1.35;
  transition:color .18s ease,opacity .18s ease;
}
.toc a:hover{color:var(--sand);opacity:1;}

@media (min-width:1240px){
  .sec .lede{max-width:780px;}
}
@media (max-width:1239px){
  .toc-rail{
    position:sticky;inset:auto;top:70px;
    z-index:9;pointer-events:auto;
    background:var(--field);
    border-bottom:1px solid var(--rule);
  }
  .toc-rail > .wrap{height:auto;padding-top:0;}
  .toc{position:static;width:auto;margin:0;}
  .toc summary{
    display:flex;justify-content:space-between;align-items:center;
    padding:13px 0;margin:0;cursor:pointer;
  }
  .toc summary::after{content:"\25BE";font-size:14px;letter-spacing:0;}
  .toc[open] summary::after{content:"\25B4";}
  .toc ol{max-height:60vh;overflow-y:auto;margin:0 0 14px;}
}

/* ---------------------------------------------------------------------------
   NARROW SCREENS
   --------------------------------------------------------------------------- */
@media (max-width:820px){
  body{font-size:16px;}
  .band{padding:52px 0 46px;}
  .sec{padding:50px 0;}
  .mark{font-size:13px;}
  .nav a.navlink{font-size:11px;letter-spacing:.1em;}
  footer{padding:30px 0 40px;}
  figure,figure.solo,figure.pair{max-width:100%;}
  figure.pair{grid-template-columns:1fr;}
  .lightbox-overlay{padding:64px 12px 12px;}
  .lightbox-figure img{max-height:calc(100vh - 210px);}
  .lightbox-close{top:12px;right:12px;}
}