/* ===== ref.css — additive styles for the reference pages (v2, Sept 2026) ===== */

/* nav: mobile toggle */
.nav-toggle{display:none;background:none;border:1px solid rgba(184,145,84,0.4);color:var(--ivory);font-size:20px;padding:4px 12px;border-radius:4px;cursor:pointer}
@media(max-width:880px){
  .nav-toggle{display:block}
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-top:6px}
}
.foot-blurb{margin-top:18px;color:rgba(244,238,224,0.55);font-size:14px;line-height:1.7;max-width:300px}

/* article layout */
.article{padding:70px 32px}
.article .container-narrow{max-width:780px}
.article h2{font-size:clamp(28px,3.6vw,40px);margin:54px 0 16px;scroll-margin-top:90px}
.article h2:first-child{margin-top:0}
.article h3{font-size:24px;margin:34px 0 10px;color:var(--navy);scroll-margin-top:90px}
.article p{font-size:17.5px;line-height:1.85;color:var(--ink);margin-bottom:18px}
.article ul,.article ol{padding-left:24px;margin:0 0 20px}
.article li{font-size:17px;line-height:1.8;margin-bottom:8px;color:var(--ink)}
.article .lead{font-size:20px;line-height:1.7;color:var(--ink-soft)}
.article hr{border:0;border-top:1px solid var(--rule);margin:48px 0}
.article .de{font-style:italic;color:var(--brass-deep);font-family:'Cormorant Garamond',serif;font-size:1.05em}

/* sourced quotations */
.q{margin:28px 0;padding:6px 0 6px 26px;border-left:3px solid var(--brass)}
.q blockquote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;line-height:1.55;color:var(--navy);margin:0}
.q blockquote strong{font-style:normal;color:var(--ember);font-weight:600}
.q .src{display:block;margin-top:12px;font-size:13px;color:var(--ink-faint);letter-spacing:0.04em;font-family:'Inter',sans-serif;font-style:normal}
.q .src a{color:var(--ink-faint);text-decoration:underline dotted}
.q.dark{border-left-color:var(--brass)}
.q.dark blockquote{color:var(--ivory)}
.q.dark .src{color:rgba(244,238,224,0.55)}

/* claim labels */
.tag{display:inline-block;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:4px 9px;border-radius:3px;vertical-align:middle;margin-left:8px}
.tag-solid{background:#1f5a3a;color:#eaf6ee}
.tag-thin{background:#8a6a3c;color:#fbf3e3}
.tag-no{background:var(--ember-deep);color:#fdeee8}
.tag-frankl{background:var(--navy);color:var(--ivory)}
.tag-ours{background:var(--rule);color:var(--navy)}

/* callouts */
.note{background:var(--ivory);border:1px solid var(--rule);border-left:4px solid var(--brass);border-radius:6px;padding:22px 26px;margin:28px 0}
.note p{margin-bottom:10px;font-size:16.5px}
.note p:last-child{margin-bottom:0}
.note h4{margin-bottom:10px}
.note.warn{border-left-color:var(--ember)}
.note.dark{background:var(--navy);border-color:rgba(184,145,84,0.3);color:var(--ivory)}
.note.dark p,.note.dark li{color:var(--ivory)}
.note.dark h4{color:var(--brass)}

/* tables */
.tbl{width:100%;border-collapse:collapse;margin:24px 0 32px;font-size:15.5px;line-height:1.55}
.tbl th{text-align:left;font-family:'Inter',sans-serif;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--brass-deep);padding:10px 12px;border-bottom:2px solid var(--brass);vertical-align:bottom}
.tbl td{padding:12px;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink)}
.tbl td:first-child{font-weight:600;color:var(--navy)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:700px){.tbl{font-size:14px}.tbl th,.tbl td{padding:8px}}

/* table of contents */
.toc{background:var(--ivory-warm);border-radius:6px;padding:26px 30px;margin:0 0 40px}
.toc h4{margin-bottom:12px}
.toc ol{margin:0;padding-left:22px}
.toc li{margin-bottom:6px;font-size:16px}
.toc a{color:var(--navy)}
.toc a:hover{color:var(--ember)}

/* home: the three columns of the front door */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
@media(max-width:880px){.doors{grid-template-columns:1fr}}
.door{background:var(--ivory);border-top:3px solid var(--brass);border-radius:6px;padding:34px 30px;display:flex;flex-direction:column}
.door h3{font-size:24px;margin-bottom:12px}
.door p{font-size:15.5px;color:var(--ink-soft);line-height:1.7;flex:1}
.door a.more{font-weight:600;font-size:14px;letter-spacing:0.04em;text-transform:uppercase}

/* home: the "one page" statement */
.statement{background:var(--navy);color:var(--ivory);padding:80px 32px}
.statement .container-narrow{max-width:820px}
.statement h2{color:var(--ivory)}
.statement p{color:rgba(244,238,224,0.82);font-size:18px;line-height:1.8}
.statement .kicker{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--brass);font-size:18px;margin-bottom:12px}

/* definition rows */
.defs{display:grid;grid-template-columns:200px 1fr;gap:10px 28px;margin:24px 0 30px}
@media(max-width:700px){.defs{grid-template-columns:1fr;gap:4px 0}}
.defs dt{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;color:var(--navy)}
.defs dt small{display:block;font-style:italic;font-weight:500;color:var(--brass-deep);font-size:15px}
.defs dd{font-size:16.5px;line-height:1.75;color:var(--ink);margin:0 0 14px}

/* the number */
.big-number{font-family:'Cormorant Garamond',serif;font-size:64px;font-weight:600;color:var(--ember);line-height:1;margin:6px 0 4px}
.big-number small{font-size:18px;color:var(--ink-faint);font-weight:500;margin-left:8px;font-family:'Inter',sans-serif}

/* begin hub */
.hub{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px}
@media(max-width:880px){.hub{grid-template-columns:1fr}}
.hub .card{background:var(--ivory);border:1px solid var(--rule);border-radius:6px;padding:32px}
.hub .card h3{margin-bottom:8px}
.hub .card p{color:var(--ink-soft);font-size:15.5px}
.hub .card .meta{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:12px;display:block}

/* small print under heroes */
.sub-hero .fine{margin-top:22px;font-size:14px;color:rgba(244,238,224,0.55);font-style:italic;font-family:'Cormorant Garamond',serif}

/* 2026-11-04: byline under the H1 of every reference page */
.byline{font-family:'Inter',sans-serif;font-size:13.5px;letter-spacing:0.03em;color:var(--ink-faint);margin:0 0 18px}
.byline a{text-decoration:underline dotted}
.sub-hero .byline{color:rgba(244,238,224,0.62);margin:-4px auto 20px}
.sub-hero .byline a{color:var(--brass)}
.assessment .byline{margin:-6px 0 18px}

/* footnote-ish source list */
.sources{font-size:14.5px;line-height:1.7;color:var(--ink-soft);border-top:1px solid var(--rule);padding-top:22px;margin-top:40px}
.sources li{font-size:14.5px;margin-bottom:8px;color:var(--ink-soft)}
.sources h4{margin-bottom:12px}

/* print */
@media print{nav.site,footer.site,.cta-banner,.nav-toggle{display:none}body{background:#fff}.article p,.article li{font-size:12pt}}

/* footer: five columns */
footer.site .container{grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr}
@media(max-width:1000px){footer.site .container{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){footer.site .container{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  footer.site{padding:44px 20px 24px}
  footer.site .container{grid-template-columns:1fr;gap:26px}
  footer.site .foot-blurb{max-width:none}
  section{padding-left:20px;padding-right:20px}
  .article{padding:50px 20px}
  .hero{padding:70px 20px 80px}
  .sub-hero{padding:70px 20px 56px}
}
/* italics in reference prose are italics, not accent-coloured */
.article em,.tbl em,.sources em,.note em,.defs em,.toc em,.door em,.hub em,.statement em{color:inherit}
.article .q blockquote strong{color:var(--ember)}

/* 2026-10-02 realignment: the tools strip and the dated "Now" box on the home page */
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.tool{display:flex;flex-direction:column;background:var(--ivory);border:1px solid var(--rule);border-top:3px solid var(--brass);border-radius:6px;padding:26px 24px 22px;color:var(--ink);transition:transform .18s,box-shadow .18s}
.tool:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(12,29,46,0.12);color:var(--ink)}
.tool .tool-n{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:30px;line-height:1;color:var(--brass);margin-bottom:10px}
.tool h3{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--navy);margin-bottom:8px}
.tool p{font-size:15px;line-height:1.6;color:var(--ink-soft);flex:1;margin-bottom:14px}
.tool .tool-t{font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--brass-deep);font-weight:600}
.now{background:var(--navy);color:var(--ivory);border-radius:6px;padding:34px 36px;border-left:4px solid var(--brass)}
.now h4{color:var(--brass);margin-bottom:14px}
.now h4 span{color:rgba(244,238,224,0.55);font-weight:500;letter-spacing:0.06em;text-transform:none}
.now p{color:rgba(244,238,224,0.86);font-size:16px;line-height:1.75;margin-bottom:12px}
.now p:last-child{margin-bottom:0}
.now strong{color:var(--ivory)}
.now a{color:var(--brass);text-decoration:underline dotted}
.now em{color:inherit}
.nav-group{display:contents}
@media (max-width:980px){.tools{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tools{grid-template-columns:1fr}.now{padding:26px 22px}}
/* grouped nav: Tools / Reference */
.nav-group{position:relative;display:flex;align-items:center}
.nav-group .nav-group-label{cursor:pointer}
.nav-group.is-active .nav-group-label{color:var(--ivory);font-weight:600}
.nav-menu{display:none;position:absolute;top:100%;left:-14px;min-width:280px;background:rgba(12,29,46,0.98);border:1px solid rgba(184,145,84,0.28);border-radius:6px;padding:10px 0;box-shadow:0 14px 34px rgba(0,0,0,0.35);z-index:60}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{display:block}
.nav-menu a{display:block;padding:8px 18px;text-transform:none;letter-spacing:0;font-size:14px;color:rgba(244,238,224,0.82)}
.nav-menu a:hover{color:var(--ivory);background:rgba(184,145,84,0.12)}
.nav-menu a.active::after{display:none}
.nav-menu a.active{color:var(--brass)}
@media(max-width:880px){
  .nav-links.open .nav-group{flex-direction:column;align-items:flex-start;width:100%}
  .nav-links.open .nav-menu{display:block;position:static;min-width:0;width:100%;background:transparent;border:0;box-shadow:none;padding:4px 0 4px 14px;border-left:1px solid rgba(184,145,84,0.3);margin:4px 0 6px}
  .nav-links:not(.open) .nav-group{display:none}
}

/* ===== 2026-11-04: the monthly letter (sign-up block, end of reference pages and home) ===== */
.letter{background:var(--ivory-warm);padding:54px 32px;border-top:1px solid var(--rule)}
.letter-in{max-width:680px;margin:0 auto}
.letter .letter-k{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;color:var(--brass-deep);margin:0 0 6px}
.letter .letter-d{font-size:17px;line-height:1.7;color:var(--ink);margin:0 0 20px}
.letter label{display:block;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--brass-deep);margin:0 0 6px}
.letter-row{display:flex;flex-wrap:wrap;gap:10px}
.letter input[type=email]{flex:1 1 240px;min-width:0;padding:13px 14px;border:1px solid var(--rule);border-radius:4px;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;font-size:16px}
.letter input[type=email]:focus{outline:0;border-color:var(--brass);box-shadow:0 0 0 3px rgba(184,145,84,0.18)}
.letter button.btn{border:0;cursor:pointer;font-family:'Inter',sans-serif;text-align:center}
.letter button.btn:disabled{opacity:0.6;cursor:default}
.letter-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.letter-status{min-height:22px;margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--ink-soft)}
.letter-status.ok{color:#1f5a3a}
.letter-status.err{color:var(--ember-deep)}
@media(max-width:560px){.letter{padding:40px 20px}.letter button.btn{width:100%}}

/* ===== 2026-11-04: record.html, the dated record ===== */
.record{list-style:none;padding:0!important;margin:10px 0 30px!important;border-top:1px solid var(--rule)}
.record li{display:grid;grid-template-columns:130px 1fr;gap:6px 22px;padding:14px 0;border-bottom:1px solid var(--rule);margin:0!important;font-size:16.5px!important;line-height:1.65!important}
.record time{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--brass-deep);padding-top:3px}
.record .rsrc{display:block;margin-top:4px;font-size:13.5px;color:var(--ink-faint)}
@media(max-width:560px){.record li{grid-template-columns:1fr;gap:2px}}