/* ============================================================
   Healthy Skepticism — one stylesheet for the whole site.

   Every page links this file and nothing else. Change a colour,
   a font or a rule here and all three pages follow.

   Sections below, in order:
     tokens · base · site nav · masthead · sections · cards
     five faults · venues · notices · paper entries · file lists
     footer · password gate · small screens
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --navy:#1F3A5F;
  --teal:#2E7D7B;
  --teal-pale:#7FB3B5;
  --terra:#C05B3C;
  --amber:#E08A3C;
  --darkred:#8B2323;
  --moss:#5A7247;
  --ink:#22252A;
  --paper:#FBF9F5;
  --rule:#DBD5CA;
  --muted:#6B6F76;
  --serif:"Bookman Old Style","Bookman","Georgia",serif;
  --sans:"Calibri","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:19px;line-height:1.55;
}
.wrap{max-width:50rem;margin:0 auto;padding:2rem 1.5rem 5rem}
a{color:var(--navy)}
a:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px}
[hidden]{display:none !important}

.masthead{position:relative}
.mark-corner{position:absolute;top:0;right:0}
@media (max-width:600px){.mark-corner{width:44px;height:44px}}

/* ---------- site nav ---------- */
.sitenav{
  display:flex;flex-wrap:wrap;gap:1.4rem;
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding-bottom:1.5rem
}
.sitenav a{color:var(--muted);text-decoration:none;padding-bottom:.15rem}
.sitenav a:hover{color:var(--navy)}
.sitenav a[aria-current="page"]{color:var(--navy);border-bottom:2px solid var(--teal)}

/* ---------- masthead ---------- */
.masthead{border-bottom:2px solid var(--navy);padding-bottom:1.75rem;margin-bottom:2.5rem}
.eyebrow,.course{
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);font-weight:700;margin:0 0 .6rem
}
h1{font-family:var(--serif);font-size:2.6rem;line-height:1.12;margin:0 0 1rem;color:var(--navy);font-weight:400}
.masthead h1:last-child{margin-bottom:0}
.byline{margin:.2rem 0 0;font-size:1rem;color:var(--muted);letter-spacing:.02em}
.standfirst{margin:0;max-width:36rem;font-size:1.1rem}

/* ---------- sections ---------- */
section{padding:2.5rem 0;border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:0}
h2{font-family:var(--serif);font-size:1.6rem;line-height:1.2;margin:0 0 1rem;font-weight:400;color:var(--navy)}
h3{font-family:var(--serif);font-size:1.25rem;line-height:1.25;margin:0;font-weight:400;color:var(--ink)}
p{max-width:38rem}
p:last-child{margin-bottom:0}
.note{color:var(--muted);font-size:.95rem}

/* ---------- destination cards ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:1.5rem}
.card{
  display:block;text-decoration:none;color:inherit;
  border:1.5px solid var(--rule);border-left:4px solid var(--teal);
  border-radius:3px;padding:1.25rem 1.35rem;background:#fff
}
.card:hover{border-color:var(--teal-pale);border-left-color:var(--navy)}
.card:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.card h3{margin-bottom:.35rem;color:var(--navy)}
.card p{margin:0;font-size:.97rem;color:var(--muted);max-width:none}
.card.locked{border-left-color:var(--terra)}

/* ---------- buttons ---------- */
.cta{
  display:inline-block;font-weight:600;text-decoration:none;color:#fff;
  background:var(--navy);padding:.7rem 1.3rem;border-radius:3px;margin-top:.25rem
}
.cta:hover{background:var(--teal)}
.cta:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* ---------- the five faults ---------- */
ol.faults{list-style:none;margin:0;padding:0;counter-reset:fault}
ol.faults li{padding:1rem 0;border-top:1px solid var(--rule);counter-increment:fault}
ol.faults li:first-child{border-top:0}
ol.faults .name{font-family:var(--serif);font-size:1.2rem;color:var(--ink);display:block}
ol.faults .name::before{
  content:counter(fault);
  font-family:var(--sans);font-size:.8rem;font-weight:700;color:var(--teal);
  display:inline-block;min-width:1.6rem;vertical-align:.15em
}
ol.faults .q{
  font-family:var(--serif);font-style:italic;color:var(--muted);
  margin:.3rem 0 0 1.6rem;display:block
}
ol.faults .expl{margin:.5rem 0 0 1.6rem}
ol.faults .read{margin:.45rem 0 0 1.6rem;font-size:.95rem}
ol.faults .read a{text-decoration:none;font-weight:600;border-bottom:1.5px solid var(--teal-pale)}
ol.faults .read a:hover{border-bottom-color:var(--teal)}

/* ---------- venues ---------- */
dl.venues{margin:0}
dl.venues dt{
  font-family:var(--serif);font-size:1.15rem;color:var(--ink);
  padding-top:1rem;margin-top:1rem;border-top:1px solid var(--rule)
}
dl.venues dt:first-child{padding-top:0;margin-top:0;border-top:0}
dl.venues dd{margin:.3rem 0 0;max-width:38rem;color:var(--muted)}

/* ---------- notices (what is new) ---------- */
ul.notices{list-style:none;margin:0;padding:0}
ul.notices li{padding:.85rem 0;border-top:1px solid var(--rule);max-width:38rem}
ul.notices li:first-child{border-top:0}
ul.notices .when{
  display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:.15rem
}
ul.notices a{font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--teal-pale)}
ul.notices a:hover{border-bottom-color:var(--navy)}
ul.notices .gloss{display:block;color:var(--muted);font-size:.95rem}
.more{margin-top:1.5rem;font-weight:600}

/* ---------- paper entries ---------- */
/* Section headings carry no subtitle, so the heading owns the space below it. */
.group{padding:2.5rem 0;border-bottom:1px solid var(--rule)}
.group:last-of-type{border-bottom:0}
.group > h2{margin-bottom:1.5rem}
article.paper{
  padding:1.25rem 0 1.25rem 1.1rem;border-top:1px solid var(--rule);
  border-left:3px solid var(--accent,var(--teal));margin-top:1.25rem
}
article.paper:first-of-type{margin-top:0}
article.paper .tag{
  margin:0 0 .3rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--accent,var(--teal))
}
article.paper h3 a{text-decoration:none;border-bottom:1.5px solid var(--teal-pale)}
article.paper h3 a:hover{border-bottom-color:var(--navy)}
article.paper .sub{margin:.35rem 0 0;font-size:1rem}
article.paper .meta{
  margin:.6rem 0 0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:700
}
.f1{--accent:var(--teal)}
.f2{--accent:var(--navy)}
.f3{--accent:var(--terra)}
.f4{--accent:var(--darkred)}
.f5{--accent:var(--amber)}
.f6{--accent:var(--moss)}

/* ---------- session blocks and file lists ---------- */
.session{padding:2.5rem 0;border-bottom:1px solid var(--rule)}
.session:last-of-type{border-bottom:0}
.marker{
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin-bottom:.5rem
}
.session h2{font-size:1.75rem;margin:0;color:var(--navy)}
.question{
  font-family:var(--serif);font-style:italic;font-size:1.15rem;
  margin:.5rem 0 0;padding-left:.9rem;border-left:3px solid var(--accent,var(--teal));
  color:var(--accent,var(--teal))
}
.s1{--accent:var(--teal)}
.s2{--accent:var(--navy)}
.s3{--accent:var(--terra)}
.s4{--accent:var(--darkred)}
.s5{--accent:var(--teal)}
ul.files{list-style:none;margin:1.5rem 0 0;padding:0}
ul.files li{padding:.55rem 0;border-top:1px solid var(--rule)}
ul.files li:first-child{border-top:0}
ul.files a{text-decoration:none;font-weight:600;border-bottom:1.5px solid var(--teal-pale)}
ul.files a:hover{border-bottom-color:var(--accent,var(--teal))}
.kind{
  display:inline-block;min-width:5.5rem;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700
}

/* ---------- footer ---------- */
footer{margin-top:3rem;padding-top:1.5rem;border-top:2px solid var(--navy);font-size:.95rem;color:var(--muted)}
footer p{max-width:38rem}
footer a{color:var(--navy)}

/* ---------- password gate ---------- */
#gate{min-height:60vh;display:flex;flex-direction:column;justify-content:center;max-width:24rem}
#gate h1{margin-bottom:1.25rem}
#gate label{
  display:block;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin-bottom:.5rem
}
#gate .row{display:flex;gap:.5rem}
#gate input{
  flex:1;min-width:0;font-family:var(--sans);font-size:1.05rem;padding:.6rem .7rem;
  border:1.5px solid var(--rule);border-radius:3px;background:#fff;color:var(--ink)
}
#gate input:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-color:var(--teal)}
#gate button{
  font-family:var(--sans);font-size:1.05rem;font-weight:600;padding:.6rem 1.1rem;
  border:0;border-radius:3px;background:var(--navy);color:#fff;cursor:pointer
}
#gate button:hover{background:var(--teal)}
#gate button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
#gate .hint{margin:.9rem 0 0;font-size:.95rem;color:var(--muted)}
#gate .error{margin:.9rem 0 0;font-size:.95rem;color:var(--darkred);font-weight:600}

/* ---------- small screens ---------- */
@media (max-width:34rem){
  body{font-size:18px}
  .wrap{padding:1.5rem 1.15rem 3.5rem}
  h1{font-size:2rem}
  h2{font-size:1.4rem}
  .session h2{font-size:1.45rem}
  .cards{grid-template-columns:1fr}
  .kind{display:block;min-width:0;margin-bottom:.15rem}
}
