/* ============================================================
   Sebastian Olascoaga — shared site chrome
   Design tokens, base reset, header/nav, Research dropdown,
   theme toggle, footer, reveal animation.
   Page-specific styles live in assets/css/pages/<slug>.css
   ============================================================ */

/* ---- Design tokens ---- */
:root{
  --paper:#FBFBFB;
  --paper-tint:#F4F4F4;
  --paper-deep:#E8E8E8;
  --ink:#1A1916;
  --text:#38342F;
  --muted:#6D6862;
  --hint:#8F8B85;
  --hair:rgba(20,20,20,0.10);
  --rule:rgba(20,20,20,0.18);
  --counter:#B3AEA8;
  --accent:#6B1F2D;
  --accent-soft:rgba(107,31,45,0.10);
  --treat:#1F4F5A;
  --treat-soft:rgba(31,79,90,0.12);
  --serif:"Source Serif 4",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#15110D;
    --paper-tint:#1F1A14;
    --paper-deep:#2A241D;
    --ink:#F7F3EE;
    --text:#DDD3C5;
    --muted:#999186;
    --hint:#6E6760;
    --hair:rgba(245,239,228,0.10);
    --rule:rgba(245,239,228,0.20);
    --counter:#7A726B;
    --accent:#C9685A;
    --accent-soft:rgba(201,104,90,0.14);
    --treat:#7AB8C2;
    --treat-soft:rgba(122,184,194,0.16);
  }
}
:root[data-theme="dark"]{--paper:#15110D;--paper-tint:#1F1A14;--paper-deep:#2A241D;--ink:#F7F3EE;--text:#DDD3C5;--muted:#999186;--hint:#6E6760;--hair:rgba(245,239,228,0.10);--rule:rgba(245,239,228,0.20);--counter:#7A726B;--accent:#C9685A;--accent-soft:rgba(201,104,90,0.14);--treat:#7AB8C2;--treat-soft:rgba(122,184,194,0.16);}
:root[data-theme="light"]{--paper:#FBFBFB;--paper-tint:#F4F4F4;--paper-deep:#E8E8E8;--ink:#1A1916;--text:#38342F;--muted:#6D6862;--hint:#8F8B85;--hair:rgba(20,20,20,0.10);--rule:rgba(20,20,20,0.18);--counter:#B3AEA8;--accent:#6B1F2D;--accent-soft:rgba(107,31,45,0.10);--treat:#1F4F5A;--treat-soft:rgba(31,79,90,0.12);}

/* Section accent: Briefs use teal as the accent */
body.accent-teal{--accent:var(--treat); --accent-soft:var(--treat-soft);}

/* ---- Base ---- */
*{box-sizing:border-box;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
:focus:not(:focus-visible){outline:none;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.num{font-variant-numeric:tabular-nums;}
.wrap{max-width:1440px; margin:0 auto; padding:0 40px;}

/* ---- Header / nav ---- */
header{position:relative; z-index:200; padding:56px 0 32px; border-bottom:1px solid var(--hair);}
body.t-detail header{padding:40px 0 32px;}
body.t-gallery header{padding:40px 0 0; border-bottom:none;}
.head-grid{display:grid; grid-template-columns:auto 1fr; gap:16px 48px; align-items:start;}
.name-block{min-width:0;}
.name{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(28px,3.6vw,34px); line-height:1.06;
  font-variation-settings:"opsz" 96;
  letter-spacing:-0.005em; margin:0 0 8px;
}
.name a{text-decoration:none;}
.role{font-family:var(--sans); font-size:13px; color:var(--muted); letter-spacing:0.04em; margin:0;}
.role .dot{color:var(--hint); margin:0 6px;}
.role strong{color:var(--ink); font-weight:500;}
.nav{
  margin-top:20px;
  display:flex; flex-wrap:wrap; gap:8px 26px;
  font-family:var(--sans); font-size:13.5px; color:var(--muted);
  grid-column:1 / -1;
}
.nav a{
  text-decoration:none; padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav a:hover, .nav a.here{color:var(--ink); border-bottom-color:var(--accent);}

/* ---- Research dropdown ---- */
.nav-item{position:relative;}
.nav-item::after{content:""; position:absolute; top:100%; left:0; right:0; height:14px;}
.nav-item .caret{display:inline-block; font-size:0.7em; margin-left:3px; position:relative; top:-1px; opacity:0.7; transition:transform .18s ease;}
.nav-item:hover .caret, .nav-item:focus-within .caret, .nav-item.open .caret{transform:rotate(180deg);}
.nav-trigger{margin:0; background:none; border:0; border-bottom:1px solid transparent; font:inherit; color:var(--muted); cursor:pointer; padding:0 0 3px 0; display:inline-flex; align-items:center; transition:color .15s ease, border-color .15s ease;}
.nav-trigger.here{color:var(--ink); border-bottom-color:var(--accent);}
.nav-item:hover .nav-trigger, .nav-item:focus-within .nav-trigger, .nav-item.open .nav-trigger{color:var(--ink); border-bottom-color:var(--accent);}
.nav-dropdown{
  position:absolute; top:100%; left:-14px;
  min-width:248px; padding:8px 0;
  background:var(--paper); border:1px solid var(--hair);
  box-shadow:0 12px 32px rgba(0,0,0,0.18);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s; transition-delay:.25s;
  z-index:100;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.open .nav-dropdown{
  opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;
}
.nav-dropdown .dd-item{
  display:block; padding:11px 18px;
  text-decoration:none; color:var(--text);
  font-family:var(--sans); border:none;
  transition:background .12s ease, color .12s ease;
}
.nav-dropdown a.dd-item:hover, .nav-dropdown a.dd-item:focus{background:var(--paper-tint); color:var(--accent); border:none;}
.nav-dropdown a.dd-item[aria-current="page"]{background:var(--paper-tint);}
.nav-dropdown a.dd-item[aria-current="page"] .dd-title{color:var(--accent); font-weight:600;}
.dd-title{display:block; font-size:14px; font-weight:500;}
.dd-note{display:block; font-size:11.5px; color:var(--muted); margin-top:2px; font-style:italic;}

/* ---- Theme toggle ---- */
.theme-toggle{margin-left:auto; background:none; border:0; border-bottom:1px solid transparent; cursor:pointer; font:inherit; color:var(--muted); padding:0 0 3px 0; display:inline-flex; align-items:baseline; gap:6px; transition:color .15s ease, border-color .15s ease;}
.theme-toggle:hover{color:var(--ink); border-bottom-color:var(--accent);}
.theme-toggle .tt-icon{font-size:1.05em; line-height:1; display:inline-block; transition:transform .25s ease; position:relative; top:1px;}
.theme-toggle:hover .tt-icon{transform:rotate(30deg);}
.tt-when-dark{display:none;}
.tt-when-light{display:inline;}
:root[data-theme="dark"] .tt-when-light{display:none;}
:root[data-theme="dark"] .tt-when-dark{display:inline;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tt-when-light{display:none;}
  :root:not([data-theme="light"]) .tt-when-dark{display:inline;}
}
.pub-as{margin-left:14px; font-size:11.5px; color:var(--hint); letter-spacing:0.04em;}
.pub-as em{font-style:italic; color:var(--muted);}

/* ---- Footer ---- */
footer{margin-top:80px; padding:48px 0 64px; border-top:1px solid var(--hair);}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; align-items:flex-end;}
.foot-note{font-family:var(--serif); font-size:14px; color:var(--muted); max-width:48ch; line-height:1.55; font-style:italic; font-variation-settings:"opsz" 16;}
.footlinks{display:flex; flex-wrap:wrap; gap:6px 22px; font-family:var(--sans); font-size:13px; color:var(--muted);}
.footlinks a{text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s ease,color .15s ease;}
.footlinks a:hover{color:var(--ink); border-bottom-color:var(--accent);}
.copy{font-family:var(--sans); font-size:11.5px; color:var(--hint); letter-spacing:0.06em; margin:0;}

/* ---- Reveal animation ---- */
.reveal{opacity:0; transform:translateY(8px); animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes rise{to{opacity:1; transform:none;}}
.d1{animation-delay:.04s}.d2{animation-delay:.14s}.d3{animation-delay:.24s}.d4{animation-delay:.34s}.d5{animation-delay:.44s}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none; animation:none;}}

/* ---- Responsive chrome ---- */
@media (max-width:640px){
  .wrap{padding:0 22px;}
  header{padding-top:40px;}
  .head-grid{grid-template-columns:1fr; gap:18px;}
  .foot-grid{grid-template-columns:1fr; gap:22px;}
  .nav-item .nav-trigger, .nav-item .caret, .nav-item::after{display:none;}
  .nav-item{position:static;}
  .nav-dropdown{position:static; display:inline-flex; flex-wrap:wrap; gap:8px 26px; min-width:0; opacity:1; visibility:visible; transform:none; transition:none; background:none; border:none; box-shadow:none; padding:0;}
  .nav-dropdown .dd-item{padding:0 0 3px 0; border-bottom:1px solid transparent; background:none; color:var(--muted);}
  .nav-dropdown a.dd-item:hover, .nav-dropdown a.dd-item:focus{background:none; color:var(--ink); border-bottom-color:var(--accent);}
  .nav-dropdown a.dd-item[aria-current="page"]{background:none;}
  .nav-dropdown a.dd-item[aria-current="page"] .dd-title{color:var(--accent);}
  .nav-dropdown .dd-note{display:none;}
  .nav-dropdown .dd-title{font-size:13.5px; font-weight:400;}
}