/* ==========================================================================
   Quiet Light — site styles for theloniousgoerz.github.io
   White ground, navy type, tracked uppercase labels, hairline rules.
   ========================================================================== */

:root{
  --bg:#FFFFFF;
  --panel:#F7F8FA;
  --ink:#1E2228;
  --mut:#5C6674;
  --navy:#142E4A;
  --navy-dark:#0E2338;
  --navy-soft:rgba(20,46,74,.08);
  --line:#E3E6EA;
  --max:960px;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --label:Futura,"Avenir Next","Century Gothic","URW Gothic","Trebuchet MS",sans-serif;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; }

a{ color:var(--navy); }

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

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}

/* Tracked uppercase label — the signature type treatment */
.lab{
  font-family:var(--label);
  letter-spacing:.22em;
  text-transform:uppercase;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 28px 90px;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.sitenav{
  max-width:var(--max);
  margin:0 auto;
  padding:32px 28px;
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}

.sitenav .logo{
  font-family:var(--label);
  font-size:14px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--navy);
  text-decoration:none;
}

.sitenav .logo b{ font-weight:600; }

.sitenav ul{
  display:flex;
  gap:26px;
  list-style:none;
  margin:0 0 0 auto;
  padding:0;
  flex-wrap:wrap;
}

.sitenav a.navlink{
  font-family:var(--label);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mut);
  text-decoration:none;
  padding-bottom:4px;
  border-bottom:1px solid transparent;
}

.sitenav a.navlink:hover{ color:var(--ink); }

.sitenav a.navlink.on{
  color:var(--navy);
  border-bottom-color:var(--navy);
}

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */
.hero{
  padding-top:56px;
  display:grid;
  grid-template-columns:1fr 240px;
  gap:56px;
  align-items:start;
}

.hero .kicker{
  grid-column:1 / -1;
  font-size:12px;
  color:var(--navy);
  margin:0 0 26px;
}

.hero h1{
  font-size:clamp(38px,5.5vw,54px);
  font-weight:650;
  letter-spacing:-.02em;
  line-height:1.06;
  margin:0 0 22px;
  color:var(--navy);
  text-wrap:balance;
}

.hero .lede{
  font-size:17.5px;
  line-height:1.68;
  color:var(--mut);
  margin:0 0 30px;
  max-width:56ch;
}

.hero .lede b,
.hero .lede strong{ color:var(--ink); font-weight:600; }
.hero .lede a{ color:var(--navy); }
.hero .lede p{ margin:0 0 16px; }
.hero .lede p:last-child{ margin-bottom:0; }

/* Portrait: navy / white / navy ring */
.portrait{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 22%;
  border:3px solid var(--navy);
  box-shadow:0 0 0 3px #FFFFFF, 0 0 0 6px var(--navy), 0 10px 28px rgba(20,46,74,.15);
}

.ctas{ display:flex; gap:14px; flex-wrap:wrap; }

.btn{
  display:inline-block;
  text-decoration:none;
  font-family:var(--label);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:13px 22px;
  border-radius:2px;
  transition:background .15s ease, color .15s ease;
}

.btn.primary{ background:var(--navy); color:#FFFFFF; border:1px solid var(--navy); }
.btn.primary:hover{ background:var(--navy-dark); border-color:var(--navy-dark); }
.btn.ghost{ color:var(--navy); border:1px solid var(--navy); }
.btn.ghost:hover{ background:var(--navy-soft); }

/* Hairline divider with a short navy tick */
.hr{
  height:1px;
  background:var(--line);
  margin:70px 0 0;
  position:relative;
}

.hr::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:64px;
  height:1px;
  background:var(--navy);
}

/* --------------------------------------------------------------------------
   Sections, chips, two-column blocks
   -------------------------------------------------------------------------- */
h2.sec{
  font-family:var(--label);
  font-size:12px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--navy);
  margin:56px 0 22px;
}

h2.sec em{ font-style:normal; color:var(--mut); }

.chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0;
}

.chips li{
  font-size:13px;
  color:var(--ink);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:2px;
  padding:7px 14px;
}

.twocol{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
}

.aff{
  color:var(--mut);
  font-size:15px;
  line-height:1.85;
  margin:0;
}

.contact{
  font-size:15px;
  line-height:2.1;
  margin:0;
}

.contact a{ color:var(--navy); text-decoration:none; }
.contact a:hover{ text-decoration:underline; }

/* --------------------------------------------------------------------------
   Page headers (Research, CV, Teaching, Resources)
   -------------------------------------------------------------------------- */
.pagetitle{
  font-size:clamp(34px,4.8vw,46px);
  font-weight:650;
  letter-spacing:-.02em;
  color:var(--navy);
  margin:40px 0 14px;
}

.pagedeck{
  color:var(--mut);
  font-size:16.5px;
  line-height:1.65;
  max-width:60ch;
  margin:0;
}

/* --------------------------------------------------------------------------
   Research list — native <details> abstract dropdowns
   -------------------------------------------------------------------------- */
.papers{ margin-top:8px; }

.paper{ border-bottom:1px solid var(--line); }
.papers .paper:first-child{ border-top:1px solid var(--line); }

.paper summary{
  padding:26px 4px;
  cursor:pointer;
  list-style:none;
  transition:background .15s ease;
}

.paper summary::-webkit-details-marker{ display:none; }
.paper summary:hover{ background:var(--panel); }

.p-status{
  display:inline-block;
  font-family:var(--label);
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:12px;
  color:var(--mut);
}

.paper.ur .p-status{ color:var(--navy); }

.p-title{
  font-size:20px;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.32;
  margin:0 0 7px;
  color:var(--navy);
  text-wrap:balance;
}

.p-authors{
  font-size:14px;
  color:var(--mut);
  margin:0;
}

.p-toggle{
  display:inline-block;
  font-family:var(--label);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--navy);
  margin-top:14px;
}

.p-toggle::before{ content:"+ "; }
.paper[open] .p-toggle::before{ content:"\2212  "; }

.p-body{ padding:2px 4px 28px; }

.p-body p{
  font-size:15.5px;
  line-height:1.75;
  color:#000000;
  margin:0 0 18px;
  max-width:68ch;
}

.p-body p.forthcoming{
  color:var(--mut);
  font-style:italic;
}

.p-tags{ margin:0 0 18px; }

.p-tags li{
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--mut);
  background:transparent;
  border:1px solid var(--line);
  padding:3px 9px;
}

.p-links{ display:flex; gap:18px; flex-wrap:wrap; }

.p-links a{
  font-family:var(--label);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--navy);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
}

.p-links a:hover{ border-bottom-color:var(--navy); }

/* --------------------------------------------------------------------------
   Presentations / teaching lists
   -------------------------------------------------------------------------- */
.pres{
  list-style:none;
  margin:6px 0 0;
  padding:0;
}

.pres li{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:20px;
  padding:16px 4px;
  border-bottom:1px solid var(--line);
  font-size:14.5px;
  line-height:1.6;
}

.pr-year{
  color:var(--navy);
  font-variant-numeric:tabular-nums;
}

.pr-title{ font-weight:600; color:var(--navy); }
.pr-venue{ color:var(--mut); }

.award{
  display:inline-block;
  font-family:var(--label);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--navy);
  border:1px solid var(--navy);
  border-radius:2px;
  padding:3px 9px;
  margin-left:8px;
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   Prose (CV, Resources, blog-ish content)
   -------------------------------------------------------------------------- */
.prose{
  max-width:68ch;
  margin-top:30px;
  font-size:16.5px;
  line-height:1.75;
}

.prose h2{
  font-size:22px;
  font-weight:650;
  letter-spacing:-.01em;
  color:var(--navy);
  margin:44px 0 12px;
}

.prose h3{
  font-size:18px;
  font-weight:600;
  color:var(--navy);
  margin:32px 0 10px;
}

.prose p{ margin:0 0 18px; }

.prose a{ color:var(--navy); }

.prose ul,.prose ol{ padding-left:22px; margin:0 0 18px; }
.prose li{ margin-bottom:8px; }

.prose blockquote{
  margin:0 0 18px;
  padding-left:18px;
  border-left:2px solid var(--line);
  color:var(--mut);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.sitefoot{
  max-width:var(--max);
  margin:0 auto;
  padding:32px 28px 60px;
  border-top:1px solid var(--line);
  color:var(--mut);
  font-size:13px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.sitefoot a{ color:var(--navy); text-decoration:none; }
.sitefoot a:hover{ text-decoration:underline; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; gap:36px; }
  .portrait{ max-width:260px; }
  .twocol{ grid-template-columns:1fr; gap:32px; }
}

@media (max-width: 640px){
  .sitenav{ padding:24px 20px; gap:18px; }
  .sitenav ul{ gap:18px; margin-left:0; }
  .wrap{ padding:0 20px 70px; }
  .sitefoot{ padding:28px 20px 50px; }
  .hero{ padding-top:36px; }
  .pres li{ grid-template-columns:54px 1fr; gap:14px; }
}