/* ============================================================
   site.css — chrome shared across all pages.
   Loaded first; per-page CSS files load after and may override.
   Edit here for nav, footer, type defaults, vars, paper-grain.
   ============================================================ */

/* RESET */
*{margin:0;padding:0;box-sizing:border-box}

/* BASE */
html{scroll-behavior:smooth;scroll-padding-top:60px}
:root{
  --mint:#92C0AB;
  --mint-deep:#5b8a76;
  --amber:#D26928;
  --amber-deep:#9c4a18;
  --red:#7F2534;
  --red-light:#c43d52;
  --tyr-red:#e63950;
  --teal:#104862;
  --teal-light:#2a7595;
  --bg:#161108;
  --bg-2:#1E1810;
  --bg-3:#241D13;
  --tan:rgba(210,185,140,1);
  --tan-soft:rgba(210,185,140,.3);
  --display:'Franklin Gothic Medium','Franklin Gothic','ITC Franklin Gothic','Libre Franklin','Helvetica Neue',Arial,sans-serif;
  --display-heavy:'Franklin Gothic Heavy','Franklin Gothic Bold','Franklin Gothic Medium','Libre Franklin','Helvetica Neue',Arial,sans-serif;
}
html,body{
  background:var(--bg);
  font-family:'IBM Plex Mono',monospace;
  cursor:crosshair;
  color:rgba(210,185,140,.8);
  overflow-x:hidden;
}

/* SCROLLBAR */
::-webkit-scrollbar{width:2px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(146,192,171,.35)}

/* PAPER GRAIN — default subtle (used by careers, press, contact).
   index.css and press-series-a.css override with the heavier grain. */
body::after{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:1000;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.18'/></svg>");
  mix-blend-mode:screen;
  opacity:0.05;
}

/* NAV — default; index.css overrides bg to rgba(14,12,9,.95) */
.h-nav{
  position:fixed;top:0;left:0;right:0;height:48px;
  background:rgba(22,17,8,.95);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(146,192,171,.07);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4vw 0 0;z-index:500;
}
.h-nav-logo{
  width:9vw;
  display:flex;align-items:center;justify-content:flex-start;
  padding-left:2vw;
  flex-shrink:0;
}
.h-nav-logo a{display:flex;align-items:center;line-height:0;transition:opacity .2s}
.h-nav-logo a:hover{opacity:.75}
.h-nav-mark{width:22px;height:auto;display:block}
.h-nav-links{display:flex;gap:3vw;align-items:center}
.h-nav-links a{
  font-size:clamp(.5rem,.7vw,.65rem);font-weight:300;
  letter-spacing:.3em;text-transform:uppercase;
  color:rgba(146,192,171,.38);text-decoration:none;
  transition:color .2s;cursor:crosshair;
  background:none;border:none;padding:0;
  font-family:'IBM Plex Mono',monospace;
}
.h-nav-links a:hover{color:var(--mint)}
.h-nav-links a.active{color:var(--mint)}

/* STAMPS / DATES — secondary-page hero metadata */
.h-stamp{
  font-size:clamp(.5rem,.7vw,.7rem);font-weight:700;
  color:rgba(146,192,171,.55);letter-spacing:.35em;text-transform:uppercase;
  border:.5px solid rgba(146,192,171,.3);
  display:inline-block;padding:5px 9px;white-space:nowrap;
}
.h-date{
  font-size:clamp(.42rem,.6vw,.65rem);font-weight:300;font-style:italic;
  color:rgba(146,192,171,.4);letter-spacing:.15em;
}

/* SECTION LABELS */
.h-section-label{
  font-size:clamp(.85rem,1.15vw,1.1rem);
  font-weight:400;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(146,192,171,.55);
}
.h-section-rule{
  width:24px;height:1px;background:var(--mint);
  opacity:.4;margin-top:10px;
}
.h-about-num{
  font-family:var(--display-heavy);
  font-size:clamp(5rem,12vw,10rem);
  font-weight:700;
  color:rgba(146,192,171,.07);
  line-height:1;
  letter-spacing:-.02em;
  user-select:none;
}

/* CTA — link with arrow */
.h-cta{
  display:inline-flex;align-items:center;gap:14px;
  font-size:clamp(.4rem,.55vw,.5rem);font-weight:700;
  letter-spacing:.38em;text-transform:uppercase;
  text-decoration:none;cursor:crosshair;
  color:rgba(146,192,171,.55);
  border-bottom:.5px solid rgba(146,192,171,.18);
  padding-bottom:3px;width:fit-content;
  transition:color .2s,border-color .2s;
}
.h-cta:hover{color:var(--mint);border-color:var(--mint)}
/* spacing modifier — replaces inline style="margin-top:2vw" */
.h-cta-mt{margin-top:2vw}
.h-cta-arrow{
  width:14px;height:1px;
  background:currentColor;
  position:relative;flex-shrink:0;
}
.h-cta-arrow::after{
  content:'';position:absolute;
  right:0;top:-3px;width:5px;height:5px;
  border-right:1px solid currentColor;border-top:1px solid currentColor;
  transform:rotate(45deg);
}

/* SPINE — default (secondary pages: 5.2vw width, 3.2vw img). index.css overrides. */
.h-spine{
  width:5.2vw;flex-shrink:0;height:100%;
  border-right:.5px solid rgba(146,192,171,.12);
  position:relative;overflow:hidden;
}
.h-spine-inner{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-90deg);
  transform-origin:center center;
  white-space:nowrap;
  display:flex;align-items:center;justify-content:center;
}
.h-spine-inner img{
  height:3.2vw;width:auto;
  opacity:.9;display:block;
}

/* MARGIN CREDITS — rotated decorative captions */
.h-margin-credit{
  position:absolute;
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(.34rem,.46vw,.46rem);
  font-weight:300;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(146,192,171,.32);
  white-space:nowrap;
  pointer-events:none;
  z-index:3;
}
.h-margin-credit.left{
  left:1.6vw;top:50%;
  transform:rotate(-90deg) translateX(50%);
  transform-origin:left top;
}
.h-margin-credit.right{
  right:1.6vw;top:50%;
  transform:rotate(90deg) translateX(-50%);
  transform-origin:right top;
}

/* FOOTER — basic variant (index, careers, press, contact).
   press-series-a.css overrides .h-footer + .h-footer-loc and adds masthead variant. */
.h-footer{
  background:var(--bg);
  border-top:.5px solid rgba(146,192,171,.08);
  padding:2.5vw 4vw;
  display:flex;justify-content:space-between;align-items:center;
  gap:2vw;flex-wrap:wrap;
}
.h-footer-left{display:flex;flex-direction:column;gap:5px}
.h-footer-copy{
  font-size:clamp(.32rem,.45vw,.4rem);font-weight:300;
  font-style:italic;color:rgba(146,192,171,.22);
  letter-spacing:.1em;
}
.h-footer-loc{
  font-size:clamp(.32rem,.45vw,.4rem);font-weight:300;
  color:rgba(146,192,171,.16);letter-spacing:.24em;text-transform:uppercase;
}
.h-footer-social{
  display:inline-flex;align-items:center;justify-content:center;
  color:rgba(146,192,171,.45);
  text-decoration:none;
  transition:color .2s,transform .2s;
  cursor:crosshair;
  padding:4px;
}
.h-footer-social:hover{color:var(--mint);transform:translateY(-1px)}
.h-footer-social svg{display:block}