/* ---------------------------------------------------------------
   joegladstone.com — shared styles
   Dual palette. The page declares real dark-mode support, which
   stops browsers applying their own force-dark filter.
   --------------------------------------------------------------- */

:root{
  color-scheme:light dark;

  /* light */
  --ink:#14181d;
  --ink-soft:#4a525c;
  --paper:#f7f8f9;
  --card:#ffffff;
  --rule:#c9cfd6;
  --rule-faint:#e5e9ec;
  --accent:#a8261f;
  --accent-quiet:#fbf5f4;
  --on-accent:#ffffff;
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#e9edf1;          /* body text, light on dark */
    --ink-soft:#a2acb7;
    --paper:#14181d;
    --card:#1a1f26;
    --rule:#38424d;
    --rule-faint:#252c34;
    --accent:#ff8d7e;       /* lifted so it reads on dark */
    --accent-quiet:#22282f;
    --on-accent:#14181d;
  }
}

*{box-sizing:border-box;}
html{background:var(--paper);-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Newsreader",Georgia,serif;
  font-size:19px;
  line-height:1.55;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 26px;}
a{color:var(--ink);text-decoration:none;}
h1,h2,h3{font-family:"Archivo",system-ui,sans-serif;color:var(--ink);}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px;
}

/* masthead */
header.top{border-bottom:1px solid var(--rule);background:var(--card);position:sticky;top:0;z-index:20;}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:60px;}
.wordmark{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112,"wght" 700;font-size:17px;letter-spacing:-.01em;color:var(--ink);}
nav.main{display:flex;gap:24px;}
nav.main a{font-family:"Archivo",sans-serif;font-size:14px;font-weight:500;color:var(--ink-soft);padding-bottom:2px;border-bottom:1.5px solid transparent;}
nav.main a:hover,nav.main a:focus-visible{color:var(--ink);border-color:var(--accent);}
nav.main a.here{color:var(--ink);border-color:var(--accent);}
@media(max-width:800px){nav.main{gap:15px;overflow-x:auto;}nav.main a{white-space:nowrap;font-size:13px;}}

/* hero */
.hero{padding:74px 0 8px;}
.hero h1{
  margin:0 0 22px;font-variation-settings:"wdth" 118,"wght" 720;
  font-size:clamp(36px,7vw,70px);line-height:1.03;letter-spacing:-.025em;max-width:16ch;
}
.hero h1 em{font-style:normal;color:var(--accent);}
.standfirst{max-width:54ch;font-size:clamp(19px,2.2vw,22px);color:var(--ink-soft);margin:0 0 32px;}

.btn{
  font-family:"Archivo",sans-serif;font-size:14px;font-weight:600;
  padding:12px 20px;border:1.5px solid var(--ink);display:inline-block;color:var(--ink);
  transition:background .16s,color .16s,border-color .16s;
}
.btn:hover,.btn:focus-visible{border-color:var(--accent);color:var(--accent);}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn.primary:hover,.btn.primary:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}

/* signature: the statement */
.statement{margin:60px 0 0;border-top:2px solid var(--ink);background:var(--card);}
.statement-head{display:flex;justify-content:space-between;align-items:baseline;padding:11px 22px;border-bottom:1px solid var(--rule);flex-wrap:wrap;gap:6px;}
.statement-head .eyebrow{margin:0;}
.row{display:grid;grid-template-columns:104px 1fr 230px;gap:22px;align-items:baseline;padding:19px 22px;border-bottom:1px solid var(--rule-faint);transition:background .14s;}
.row:hover{background:var(--accent-quiet);}
.row .venue{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-soft);letter-spacing:.06em;}
.row .q{font-size:20px;line-height:1.35;max-width:46ch;}
.row .q a{border-bottom:1px solid var(--rule);}
.row .q a:hover{border-color:var(--accent);color:var(--accent);}
.row .val{font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:1.45;color:var(--accent);text-align:right;font-weight:500;}
@media(max-width:820px){
  .row{grid-template-columns:1fr;gap:7px;padding:17px 18px;}
  .row .val{text-align:left;}
  .statement-head{padding:11px 18px;}
}
.reveal{opacity:0;transform:translateY(6px);animation:post .5s ease forwards;}
@keyframes post{to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none;}}

/* sections */
section{padding:70px 0;border-top:1px solid var(--rule);margin-top:70px;}
section h2{font-variation-settings:"wdth" 112,"wght" 700;font-size:clamp(25px,3.4vw,34px);letter-spacing:-.02em;margin:6px 0 24px;}
.lede{max-width:60ch;color:var(--ink-soft);margin:0 0 32px;}

.topics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);}
.topic{padding:24px 22px 28px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule-faint);background:var(--card);}
.topic:last-child{border-right:none;}
.topic h3{font-size:19px;font-variation-settings:"wdth" 100,"wght" 650;margin:8px 0 10px;}
.topic p{font-size:17px;color:var(--ink-soft);margin:0 0 14px;}
.topic a.more{font-family:"Archivo",sans-serif;font-size:13px;font-weight:600;color:var(--accent);}
@media(max-width:820px){.topics{grid-template-columns:1fr;}.topic{border-right:none;}}

/* list rows: publications, talks */
.list{border-top:1px solid var(--rule);}
.item{display:grid;grid-template-columns:58px 1fr 200px;gap:18px;padding:17px 0;border-bottom:1px solid var(--rule-faint);align-items:baseline;}
.item.no-date{grid-template-columns:1fr 200px;}
.item .yr{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.item .t{font-size:18px;line-height:1.4;}
.item .t .sub{display:block;font-size:15.5px;color:var(--ink-soft);margin-top:3px;}
.item .tag{font-family:"IBM Plex Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);text-align:right;}
@media(max-width:820px){
  .item,.item.no-date{grid-template-columns:1fr;gap:4px;}
  .item .tag{text-align:left;}
}

/* page furniture */
.page-head{padding:66px 0 28px;}
.page-head h1{font-variation-settings:"wdth" 114,"wght" 700;font-size:clamp(32px,5.5vw,50px);letter-spacing:-.025em;margin:0 0 18px;}
h2.group{font-variation-settings:"wdth" 108,"wght" 650;font-size:20px;margin:52px 0 0;padding-bottom:10px;border-bottom:2px solid var(--ink);}
.note{margin:48px 0 0;padding-top:22px;border-top:1px solid var(--rule);color:var(--ink-soft);max-width:58ch;font-size:18px;}
.note a{border-bottom:1px solid var(--rule);}
.note a:hover{color:var(--accent);border-color:var(--accent);}
.placeholder{color:var(--accent);font-family:"IBM Plex Mono",monospace;font-size:12px;}

footer{border-top:2px solid var(--ink);padding:38px 0 58px;margin-top:70px;}
.foot-grid{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;}
footer a{border-bottom:1px solid var(--rule);}
footer a:hover{color:var(--accent);border-color:var(--accent);}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;}


/* portrait */
.hero-grid{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:end;}
.portrait{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.04);border:1px solid var(--rule);}
.portrait-cap{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);margin:9px 0 0;}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:30px;}
  .portrait-wrap{max-width:230px;}
}

/* long-form prose on theme pages */
.prose{max-width:64ch;}
.prose p{margin:0 0 18px;}
.prose a{border-bottom:1px solid var(--rule);}
.prose a:hover{color:var(--accent);border-color:var(--accent);}
.list .t a{border-bottom:1px solid var(--rule);}
.list .t a:hover{color:var(--accent);border-color:var(--accent);}