/* ---------------------------------------------------------------------------
   The Headquarters Counseling Center Archive
   A hand-built editorial system. No CSS framework: the layout is a single
   measured reading column with a rule-and-smallcaps rhythm, so nothing here
   depends on a third-party grid that could shift under it.

   Palette is taken from the original 2008-2012 site's inline colour values
   (periwinkle #ccccff / #c5c5ed / #e9e9f8 panels, purple #660066 accent),
   softened toward indigo for contrast on text.

   VISIBILITY RULE: every element is visible with CSS alone. Nothing on this
   site is revealed by JavaScript. The one animation below ends in the visible
   state and uses animation-fill-mode: both, so a script that never runs -- or
   a browser that ignores it -- still shows a complete page.
--------------------------------------------------------------------------- */

:root{
  --ink:#221c33;
  --ink-soft:#544c6b;
  --ink-faint:#7b7391;
  --plum:#4a3a7a;
  --plum-deep:#2f2450;
  --plum-bright:#6b55a8;
  --peri:#d9d8f5;
  --peri-deep:#b7b3e4;
  --wash:#f2f0fb;
  --cream:#fbfaf6;
  --paper:#ffffff;
  --terra:#a8461f;
  --terra-wash:#fdf1ea;
  --amber:#8a6414;
  --amber-wash:#fbf4e2;
  --rule:#e0dcef;
  --measure:38rem;
  --wide:74rem;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

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

a{color:var(--plum);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;}
a:hover,a:focus{color:var(--terra);text-decoration-thickness:2px;}
:focus-visible{outline:3px solid var(--plum-bright);outline-offset:2px;}

.wrap{width:100%;max-width:var(--wide);margin:0 auto;padding-left:1.25rem;padding-right:1.25rem;}

/* --- the 988 ribbon -------------------------------------------------------
   A deliberate echo of the original site's most distinctive feature: a tinted
   "get help now" panel that appeared, unchanged, on every single page. Here it
   carries the only telephone number this archive publishes. */
.ribbon{background:var(--plum-deep);color:#f4f2fd;border-bottom:3px solid var(--terra);}
.ribbon-in{display:flex;gap:.75rem;align-items:flex-start;padding-top:.7rem;padding-bottom:.7rem;}
.ribbon-ico{flex:0 0 auto;width:1.35rem;height:1.35rem;fill:var(--peri);margin-top:.15rem;}
.ribbon p{margin:0;font-size:.95rem;line-height:1.5;}
.ribbon strong{color:#fff;font-weight:700;letter-spacing:.02em;}
.ribbon a{color:var(--peri);}
.ribbon a:hover{color:#fff;}
.ribbon-sub{display:block;color:#c4bde4;font-size:.85rem;}

/* --- header --------------------------------------------------------------- */
.site-head{background:var(--paper);border-bottom:1px solid var(--rule);}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:.9rem 1.5rem;padding-top:1rem;padding-bottom:1rem;flex-wrap:wrap;min-width:0;}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;min-width:0;}
.brand-mark{
  flex:0 0 auto;width:2.6rem;height:2.6rem;border-radius:.55rem;
  background:var(--plum);color:var(--wash);
  font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;
}
.brand-txt{display:flex;flex-direction:column;min-width:0;}
.brand-txt strong{font-family:var(--serif);font-weight:600;font-size:1.02rem;line-height:1.2;color:var(--plum-deep);}
.brand-txt em{font-style:normal;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);margin-top:.15rem;}

/* Navigation.
   No disclosure widget and no toggle. Every link is in the DOM and visible at
   every width; the list simply wraps onto more lines on a narrow screen.
   Deliberate, for two reasons:
     1. A <details> menu is CLOSED by default, and a closed <details> hides its
        children in the UA stylesheet regardless of what CSS says about them.
        Forcing it open at wide widths needs JavaScript, which would make the
        navigation JS-dependent — not allowed on these builds.
     2. The fleet's recurring nav failure is a flex row that cannot shrink, so
        links get pushed past the viewport and silently clipped. min-width:0 and
        flex-wrap on a list that is allowed to grow taller makes that
        impossible at any width, with no measured breakpoint to get wrong. */
.mainnav{min-width:0;flex:1 1 100%;}
.mainnav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.3rem;min-width:0;
}
.mainnav li{min-width:0;}
.mainnav li a{
  display:block;padding:.35rem .7rem;border-radius:1rem;text-decoration:none;
  color:var(--ink-soft);font-weight:500;font-size:.9rem;line-height:1.4;
  border:1px solid transparent;white-space:nowrap;
}
.mainnav li a:hover,.mainnav li a:focus{background:var(--wash);color:var(--plum-deep);}
.mainnav li a[aria-current="page"]{
  background:var(--peri);color:var(--plum-deep);font-weight:700;border-color:var(--peri-deep);
}

@media (min-width: 62rem){
  .mainnav{flex:0 1 auto;}
  .mainnav ul{justify-content:flex-end;}
}

/* --- article -------------------------------------------------------------- */
.article{padding-top:2.75rem;padding-bottom:4rem;}

.art-head{max-width:var(--measure);margin-bottom:2rem;}
.kicker{
  margin:0 0 .9rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--plum-bright);font-weight:700;
}
.kicker::after{content:"";display:block;width:2.75rem;height:3px;background:var(--terra);margin-top:.55rem;}

h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2rem,5.2vw,3.15rem);line-height:1.1;letter-spacing:-.015em;
  margin:0 0 1rem;color:var(--plum-deep);
}
.standfirst{
  margin:0;font-size:1.16rem;line-height:1.6;color:var(--ink-soft);
  border-left:3px solid var(--peri-deep);padding-left:1rem;
}

.hero-fig{margin:0 0 2.5rem;}
.hero-fig img{border-radius:.5rem;width:100%;}
.hero-fig figcaption,.tablewrap figcaption{
  margin-top:.6rem;font-size:.86rem;color:var(--ink-faint);line-height:1.5;
  max-width:var(--measure);
}

/* table of contents */
.toc{
  max-width:var(--measure);margin:0 0 2.75rem;padding:1.1rem 1.25rem;
  background:var(--wash);border:1px solid var(--rule);border-radius:.5rem;
}
.toc h2{
  margin:0 0 .6rem;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:700;
}
.toc ul{margin:0;padding:0;list-style:none;columns:2;column-gap:1.75rem;}
.toc li{margin:0 0 .35rem;break-inside:avoid;font-size:.94rem;}
@media (max-width: 40rem){.toc ul{columns:1;}}

.toc a[data-reading]{color:var(--plum-deep);font-weight:700;}
.toc a[data-reading]::before{content:"";display:inline-block;width:.4rem;height:.4rem;border-radius:50%;background:var(--terra);margin-right:.4rem;vertical-align:.12em;}

.sec{max-width:var(--measure);margin:0 0 2.75rem;}
.sec h2{
  font-family:var(--serif);font-weight:600;font-size:clamp(1.35rem,3vw,1.75rem);
  line-height:1.25;color:var(--plum-deep);margin:0 0 1rem;
  padding-top:1.4rem;border-top:1px solid var(--rule);
}
.sec h3{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--plum-deep);margin:2rem 0 .6rem;}
.sec p{margin:0 0 1.1rem;}
.sec p:last-child{margin-bottom:0;}

.list{margin:0 0 1.3rem;padding-left:1.25rem;}
.list li{margin:0 0 .6rem;}
.list li::marker{color:var(--plum-bright);}
.list-num li::marker{font-weight:700;}

/* definition blocks */
.defs{margin:0 0 1.5rem;}
.def{padding:1.05rem 0;border-top:1px solid var(--rule);}
.def:last-child{border-bottom:1px solid var(--rule);}
.defs dt{font-weight:700;color:var(--plum-deep);margin:0 0 .4rem;line-height:1.4;}
.defs dd{margin:0;color:var(--ink);}

/* myth/fact cards get a distinct treatment: the myth reads as struck-through
   authority, the correction as the substance. */
.defs-myth .def{
  border:1px solid var(--rule);border-radius:.5rem;background:var(--paper);
  padding:1.1rem 1.25rem;margin-bottom:.85rem;
}
.defs-myth .def:last-child{border-bottom:1px solid var(--rule);}
.defs-myth dt{
  font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--ink-soft);
  padding-left:1rem;border-left:3px solid var(--peri-deep);
}
.defs-myth dd{margin-top:.7rem;}
.defs-myth dd strong:first-child{color:var(--plum);}

/* notices */
.note{
  margin:0 0 1.5rem;padding:1.05rem 1.25rem;border-radius:.5rem;
  border:1px solid var(--rule);background:var(--wash);
}
.note p{margin:0;}
.note .note-label{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--ink-faint);margin-bottom:.5rem;
}
.note-critical{background:var(--terra-wash);border-color:#eccdbc;border-left:4px solid var(--terra);}
.note-critical .note-label{color:var(--terra);}
.note-critical a{color:#8a3a19;}
.note-historical{background:var(--amber-wash);border-color:#e8dcbb;border-left:4px solid var(--amber);}
.note-historical .note-label{color:var(--amber);}
.note-historical a{color:#725110;}

/* tables */
.tablewrap{margin:0 0 1.75rem;}
.tablewrap figcaption{margin:0 0 .7rem;}
.scroller{overflow-x:auto;border:1px solid var(--rule);border-radius:.5rem;background:var(--paper);}
table{border-collapse:collapse;width:100%;font-size:.94rem;min-width:26rem;}
th,td{padding:.55rem .8rem;text-align:left;border-bottom:1px solid var(--rule);}
thead th{background:var(--wash);color:var(--plum-deep);font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;}
tbody th{font-weight:500;color:var(--ink);}
td{text-align:right;font-variant-numeric:tabular-nums;}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;}

/* --- footer --------------------------------------------------------------- */
.site-foot{background:var(--plum-deep);color:#ddd8f0;padding:3rem 0 2rem;margin-top:2rem;}
.foot-grid{display:grid;gap:2.5rem;}
@media (min-width: 52rem){.foot-grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:3.5rem;}}
.site-foot h2{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:#a89ed4;margin:0 0 .9rem;font-weight:700;
}
.site-foot a{color:#cfc7ec;}
.site-foot a:hover{color:#fff;}
.disclaimer{margin:0 0 1rem;font-size:.94rem;line-height:1.6;}
.disclaimer strong{color:#fff;}
.foot-988{
  margin:0;padding:.8rem 1rem;border-radius:.45rem;
  background:rgba(255,255,255,.07);border-left:3px solid var(--terra);
  font-size:.95rem;
}
.foot-988 strong{color:#fff;}
.foot-nav ul{list-style:none;margin:0;padding:0;columns:2;column-gap:1.5rem;}
.foot-nav li{margin:0 0 .45rem;font-size:.94rem;break-inside:avoid;}
.copy{
  margin:2.5rem 0 0;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.14);
  font-size:.84rem;color:#a89ed4;
}

/* --- entrance animation ---------------------------------------------------
   Ends in the visible state, fill-mode both. If it never runs, content shows. */
@keyframes rise{from{opacity:.001;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: no-preference){
  .art-head,.hero-fig{animation:rise .5s ease-out both;}
  .hero-fig{animation-delay:.08s;}
}
/* Safeguard: nothing on this site may be left hidden waiting on JavaScript. */
[data-aos]{opacity:1 !important;transform:none !important;}

@media print{
  .ribbon,.mainnav,.site-foot .foot-nav{display:none;}
  body{background:#fff;}
}