/*
Theme Name: Tommy & James
Theme URI: https://tommyandjames.net
Author: Tommy & James
Description: Standalone editorial theme for Tommy & James. Archetype A (Editorial), palette P4 (Butter), humanist sans display over a reading serif.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: tommyjames
*/

/* ---------- TOKENS ---------- */
:root{
  /* P4 Butter: butter ground, ink text, black primary, deep-red accent */
  --bg:#FCF6D2;
  --bg-paper:#FFFDF1;
  --bg-sink:#F6EEC2;
  --ink:#17170F;
  --ink-soft:#4E4C3A;
  --ink-faint:#7A7660;
  --rule:#17170F;
  --rule-soft:#D8CE9A;
  --primary:#17170F;
  --accent:#A32C22;
  --accent-deep:#7C1E17;
  --link:#A32C22;
  --focus:#A32C22;

  --measure:40rem;      /* 640px reading column - archetype A */
  --wide:74rem;
  --gut:1.5rem;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;

  --display:"Mulish","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Literata",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#14140C;
    --bg-paper:#1D1D13;
    --bg-sink:#202014;
    --ink:#F4EFD8;
    --ink-soft:#C3BE9F;
    --ink-faint:#8F8B70;
    --rule:#F4EFD8;
    --rule-soft:#413E28;
    --primary:#F4EFD8;
    --accent:#F0C24A;
    --accent-deep:#FFD971;
    --link:#F0C24A;
    --focus:#F0C24A;
  }
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
img{display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.13;
  letter-spacing:-.021em;margin:0 0 var(--s4);color:var(--ink)}
h1{font-size:clamp(2.15rem,1.35rem + 3.4vw,3.5rem);font-weight:900;letter-spacing:-.03em}
h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin-top:var(--s7)}
h3{font-size:clamp(1.18rem,1.08rem + .45vw,1.35rem);margin-top:var(--s6)}
h4{font-size:1.0625rem;margin-top:var(--s5)}
p{margin:0 0 var(--s5)}
a{color:var(--link);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:.07em}
a:hover{text-decoration-thickness:.14em}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
ul,ol{margin:0 0 var(--s5);padding-left:1.35rem}
li{margin-bottom:var(--s2)}
blockquote{margin:var(--s6) 0;padding:0 0 0 var(--s5);
  border-left:3px solid var(--accent);font-style:italic;color:var(--ink-soft)}
hr{border:0;border-top:1px solid var(--rule-soft);margin:var(--s7) 0}
small{font-size:.8125rem}
code{font-family:var(--mono);font-size:.9em;background:var(--bg-sink);padding:.1em .35em;border-radius:3px}

/* ---------- LAYOUT ---------- */
.wrap{width:min(100% - 2.5rem,var(--wide));margin-inline:auto}
.col{width:min(100% - 2.5rem,var(--measure));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);z-index:99;background:var(--ink);
  color:var(--bg);padding:var(--s3) var(--s4);text-decoration:none}
main{display:block}
.sink{background:var(--bg-sink);padding:var(--s8) 0;margin:var(--s8) 0;
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}

/* ---------- HEADER: minimal bar, logo left, text nav right, NO accent strip ---------- */
.site-head{padding:var(--s5) 0;border-bottom:1px solid var(--rule-soft)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
.brand{font-family:var(--display);font-weight:900;font-size:1.25rem;letter-spacing:-.03em;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.brand:hover{color:var(--accent)}
.brand img{height:36px;width:auto}
.nav ul{display:flex;gap:var(--s5);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav li{margin:0}
.nav a{font-family:var(--display);font-size:.9375rem;font-weight:600;color:var(--ink);
  text-decoration:none;padding:.4rem 0;display:inline-block;min-height:24px}
.nav a:hover,.nav a:focus-visible{color:var(--accent);text-decoration:underline}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:.875rem;padding:.55rem .8rem;cursor:pointer;min-height:44px}
@media (max-width:820px){
  .nav-toggle{display:block}
  .nav{display:none;width:100%;order:3}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0;padding-top:var(--s4)}
  .nav a{padding:.75rem 0;min-height:48px;display:block;border-bottom:1px solid var(--rule-soft)}
  .site-head .wrap{flex-wrap:wrap}
}

/* ---------- BREADCRUMBS + DATELINE (archetype A signature) ---------- */
.crumbs{font-family:var(--display);font-size:.8125rem;color:var(--ink-faint);
  margin:var(--s6) 0 var(--s4)}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
.crumbs span[aria-current]{color:var(--ink-faint)}
.dateline{font-family:var(--display);font-size:.8125rem;letter-spacing:.02em;
  color:var(--ink-faint);margin:0 0 var(--s6);padding-bottom:var(--s4);
  border-bottom:1px solid var(--rule-soft);display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center}
.dateline a{color:var(--ink);font-weight:700;text-decoration:none}
.dateline a:hover{color:var(--accent);text-decoration:underline}
.dateline .sep{color:var(--rule-soft)}

/* ---------- DROP CAP (archetype A signature) ---------- */
.dropcap > p:first-of-type::first-letter{
  font-family:var(--display);font-weight:900;float:left;font-size:3.6em;line-height:.82;
  padding:.06em .1em 0 0;color:var(--accent)}

/* ---------- HERO: no background colour, left aligned, narrow ---------- */
.hero{padding:var(--s8) 0 var(--s6)}
.hero h1{max-width:15ch}
.hero .lede{font-size:1.1875rem;line-height:1.6;color:var(--ink-soft);max-width:34rem}
.hero .lede a{font-weight:600}

/* Inline text-link CTA - archetype A has no hero button */
.textcta{font-family:var(--display);font-weight:700;color:var(--accent);
  text-decoration:underline;text-decoration-thickness:.1em;text-underline-offset:.2em}
.textcta::after{content:" \2192"}

/* ---------- ANSWER CAPSULE ---------- */
.capsule{background:var(--bg-paper);border:1px solid var(--rule);
  border-left:5px solid var(--accent);padding:var(--s5);margin:0 0 var(--s6)}
.capsule p:last-child{margin-bottom:0}
.capsule .capsule-k{font-family:var(--display);font-size:.6875rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  display:block;margin-bottom:var(--s2)}

/* ---------- PULL QUOTE in the margin (archetype A body rhythm) ---------- */
.pullquote{font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1.3;
  color:var(--ink);border-top:3px solid var(--ink);border-bottom:1px solid var(--rule-soft);
  padding:var(--s4) 0;margin:var(--s7) 0}
@media (min-width:1180px){
  .single-body .pullquote{float:right;width:16rem;margin:.4rem -19rem var(--s5) var(--s6);font-size:1.125rem}
}

/* ---------- TABLES ---------- */
.tablewrap{overflow-x:auto;margin:var(--s6) 0;border:1px solid var(--rule)}
table{border-collapse:collapse;width:100%;background:var(--bg-paper);
  font-family:var(--display);font-size:.9375rem}
caption{font-family:var(--display);font-size:.8125rem;color:var(--ink-faint);
  text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule-soft)}
th,td{padding:.7rem .85rem;text-align:left;border-bottom:1px solid var(--rule-soft);
  vertical-align:top}
thead th{background:var(--ink);color:var(--bg);font-weight:800;font-size:.8125rem;
  letter-spacing:.03em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:0}
td:first-child,th:first-child{font-weight:700}

/* ---------- FIGURES ---------- */
figure{margin:var(--s6) 0}
figure img{border:1px solid var(--rule)}
figcaption{font-family:var(--display);font-size:.8125rem;color:var(--ink-faint);
  margin-top:var(--s3);line-height:1.45}

/* ---------- INFO / NOTE BOXES ---------- */
.note{background:var(--bg-paper);border:1px solid var(--rule-soft);
  border-top:3px solid var(--ink);padding:var(--s5);margin:var(--s6) 0}
.note p:last-child{margin-bottom:0}
.note-t{font-family:var(--display);font-weight:800;font-size:.9375rem;
  margin:0 0 var(--s3);display:block}

/* ---------- TOC ---------- */
.toc{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule-soft);
  padding:var(--s4) 0;margin:0 0 var(--s6)}
.toc-t{font-family:var(--display);font-size:.6875rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 var(--s3)}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:toc}
.toc li{counter-increment:toc;margin-bottom:var(--s2);font-family:var(--display);font-size:.9375rem}
.toc li::before{content:counter(toc,decimal-leading-zero);color:var(--ink-faint);
  font-weight:800;margin-right:.6rem;font-size:.8125rem}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--accent);text-decoration:underline}

/* ---------- FAQ ---------- */
.faq{margin:var(--s7) 0}
.faq details{border-bottom:1px solid var(--rule-soft);padding:var(--s4) 0}
.faq details:first-of-type{border-top:2px solid var(--ink)}
.faq summary{font-family:var(--display);font-weight:800;font-size:1.0625rem;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:var(--s4);
  align-items:flex-start;min-height:32px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:800;color:var(--accent);flex-shrink:0;font-size:1.25rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{margin-bottom:var(--s3)}
.faq-a p:last-child{margin-bottom:0}
.faq-a{color:var(--ink-soft)}

/* ---------- SOURCES ---------- */
.sources{border-top:2px solid var(--ink);padding-top:var(--s4);margin:var(--s7) 0 0}
.sources h2{font-size:1.0625rem;margin:0 0 var(--s3)}
.sources ol{font-family:var(--display);font-size:.875rem;color:var(--ink-soft);
  padding-left:1.2rem}
.sources li{margin-bottom:var(--s2)}
.sources .checked{font-family:var(--display);font-size:.8125rem;color:var(--ink-faint);margin-top:var(--s3)}

/* ---------- CTA CARD (one per page, not in hero) ---------- */
.cta{border:2px solid var(--ink);background:var(--bg-paper);padding:var(--s6);margin:var(--s7) 0}
.cta h2{margin:0 0 var(--s3);font-size:1.25rem}
.cta p{margin:0 0 var(--s4);color:var(--ink-soft)}
.cta a.go{font-family:var(--display);font-weight:800;font-size:.9375rem;color:var(--accent);
  text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.1em}
.cta a.go::after{content:" \2192"}

/* ---------- DISCLOSURE / DISCLAIMER ---------- */
.disclosure{background:var(--bg-sink);border:1px dashed var(--rule-soft);
  padding:var(--s4);margin:var(--s6) 0;font-size:.875rem;color:var(--ink-soft);
  font-family:var(--display)}
.disclosure p:last-child{margin-bottom:0}
.medical{border-left:4px solid var(--accent);background:var(--bg-paper);
  padding:var(--s4) var(--s5);margin:var(--s6) 0;font-family:var(--display);
  font-size:.875rem;color:var(--ink-soft)}
.medical p:last-child{margin-bottom:0}

/* ---------- HEADLINE LIST (archetype A: latest posts are a list, not cards) ---------- */
.hlist{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.hlist li{border-bottom:1px solid var(--rule-soft);padding:var(--s5) 0;margin:0}
.hlist .h-k{font-family:var(--display);font-size:.6875rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:var(--s2)}
.hlist h3{font-family:var(--display);font-size:1.25rem;font-weight:800;margin:0 0 var(--s2);line-height:1.22}
.hlist h3 a{color:var(--ink);text-decoration:none}
.hlist h3 a:hover{color:var(--accent);text-decoration:underline}
.hlist p{margin:0 0 var(--s2);color:var(--ink-soft);font-size:.9375rem}
.hlist .h-m{font-family:var(--display);font-size:.8125rem;color:var(--ink-faint)}

/* ---------- TWO-COLUMN (archetype A alternating rhythm) ---------- */
.two{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:var(--s8);align-items:start}
@media (max-width:900px){.two{grid-template-columns:1fr;gap:var(--s7)}}
.railbox{border-top:2px solid var(--ink);padding-top:var(--s4)}
.railbox h2,.railbox h3{font-family:var(--display);font-size:.6875rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 var(--s4)}
.raillist{list-style:none;padding:0;margin:0}
.raillist li{margin-bottom:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--rule-soft)}
.raillist li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.raillist a{font-family:var(--display);font-weight:800;font-size:1rem;color:var(--ink);
  text-decoration:none;display:block;margin-bottom:.25rem;line-height:1.28}
.raillist a:hover{color:var(--accent);text-decoration:underline}
.raillist span{font-size:.875rem;color:var(--ink-soft);font-family:var(--display);line-height:1.45;display:block}

/* ---------- SECTION HEADS ---------- */
.sechead{font-family:var(--display);font-size:.6875rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 var(--s4);
  padding-bottom:var(--s3);border-bottom:1px solid var(--rule-soft)}

/* ---------- AUTHOR ---------- */
.authorbox{display:grid;grid-template-columns:76px minmax(0,1fr);gap:var(--s5);
  border-top:2px solid var(--ink);padding-top:var(--s5);margin:var(--s7) 0 0}
.authorbox img{width:76px;height:76px;border-radius:50%;border:1px solid var(--rule);object-fit:cover}
.authorbox h2{font-family:var(--display);font-size:1.0625rem;margin:0 0 var(--s2)}
.authorbox p{font-size:.9375rem;color:var(--ink-soft);margin:0 0 var(--s2);font-family:var(--display)}
.author-hero{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--s6);
  align-items:start;margin:var(--s6) 0 var(--s7)}
.author-hero img{width:132px;height:132px;border-radius:50%;border:2px solid var(--ink);object-fit:cover}
@media (max-width:600px){
  .author-hero{grid-template-columns:1fr}
  .author-hero img{width:104px;height:104px}
  .authorbox{grid-template-columns:1fr}
}
.creds{list-style:none;padding:0;margin:var(--s4) 0 0;font-family:var(--display);font-size:.9375rem}
.creds li{padding-left:1.1rem;position:relative;margin-bottom:var(--s2);color:var(--ink-soft)}
.creds li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:2px;background:var(--accent)}

/* ---------- RELATED ---------- */
.related{margin:var(--s8) 0 0;border-top:2px solid var(--ink);padding-top:var(--s5)}
.related ul{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s5)}
.related li{margin:0}
.related a{font-family:var(--display);font-weight:800;color:var(--ink);text-decoration:none;line-height:1.28;display:block}
.related a:hover{color:var(--accent);text-decoration:underline}

/* ---------- TRUST ROW ---------- */
.trust{font-family:var(--display);font-size:.9375rem;color:var(--ink-soft);
  border-top:2px solid var(--ink);padding-top:var(--s5);margin-top:var(--s8)}
.trust strong{color:var(--ink)}

/* ---------- FOOTER ---------- */
.site-foot{border-top:1px solid var(--rule-soft);margin-top:var(--s9);
  padding:var(--s8) 0 var(--s7);font-family:var(--display);font-size:.9375rem}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--s6)}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h2{font-size:.6875rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 var(--s4)}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:var(--s3)}
.foot-grid a{color:var(--ink-soft);text-decoration:none}
.foot-grid a:hover{color:var(--accent);text-decoration:underline}
.foot-brand{font-family:var(--display);font-weight:900;font-size:1.125rem;color:var(--ink);
  margin:0 0 var(--s3);display:block}
.foot-legal{border-top:1px solid var(--rule-soft);margin-top:var(--s7);padding-top:var(--s5);
  font-size:.8125rem;color:var(--ink-faint)}
.foot-legal p{margin:0 0 var(--s3);max-width:60rem}

/* ---------- PAGINATION / MISC ---------- */
.pager{display:flex;gap:var(--s4);flex-wrap:wrap;margin:var(--s7) 0;font-family:var(--display)}
.pager a,.pager span{border:1px solid var(--rule);padding:.55rem .9rem;text-decoration:none;
  color:var(--ink);font-weight:700;font-size:.875rem;min-height:44px;display:inline-flex;align-items:center}
.pager .current{background:var(--ink);color:var(--bg)}
.searchform{display:flex;gap:var(--s3);margin:var(--s5) 0;flex-wrap:wrap}
.searchform input[type=search]{flex:1 1 14rem;padding:.7rem .8rem;border:1px solid var(--rule);
  background:var(--bg-paper);color:var(--ink);font-family:var(--display);font-size:1rem;min-height:48px}
.searchform button{padding:.7rem 1.2rem;border:1px solid var(--ink);background:var(--ink);color:var(--bg);
  font-family:var(--display);font-weight:800;cursor:pointer;font-size:.9375rem;min-height:48px}
.searchform button:hover{background:var(--accent);border-color:var(--accent)}
.feat{margin:0 0 var(--s6);border:1px solid var(--rule)}
.archive-intro{color:var(--ink-soft);max-width:38rem;margin-bottom:var(--s7)}
.readmore{font-family:var(--display);font-weight:700;font-size:.875rem}
.single-body > *:first-child{margin-top:0}
.updated{font-family:var(--display);font-size:.8125rem;color:var(--ink-faint);
  margin:var(--s6) 0 0;padding-top:var(--s3);border-top:1px solid var(--rule-soft)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- TAP TARGETS ----------
 * Standalone controls get a real 48px box. Inline links inside prose cannot be
 * 48px tall without wrecking the reading line, so they get vertical padding
 * instead: the hit area grows, the line box does not move. */
.single-body a,.archive-intro a,.trust a,.lede a,.foot-legal a{padding-block:.22em}
.toc a{display:block;padding:.5rem 0;min-height:44px;display:flex;align-items:center}
.faq summary{min-height:48px;padding-block:.35rem;align-items:center}
.raillist a{padding-block:.3rem;min-height:32px}
.foot-grid a{display:inline-block;padding-block:.35rem;min-height:32px}
.hlist h3 a{display:inline-block;padding-block:.15rem}
.crumbs a{padding-block:.4rem;display:inline-block}