/* ===========================================================================
   Academy of Professional Dialogue — members' area (Ghost)

   ⚠️ SOURCE OF TRUTH IS `aofpd-site/src/assets/site.css`, NOT THIS FILE.
   The tokens below are copied verbatim from it, with their original comments,
   because Ghost is on a different host and cannot load the static site's CSS.
   That means this file can DRIFT. When a token changes there, change it here.
   Everything below the token block is written for Ghost's own markup and has
   no counterpart in site.css.

   MIGRATION_PLAN.md accepts a visual seam at members.aofpd.org: this should
   read as unmistakably the Academy, not as a pixel-match of the main site.
   Do not chase the pixel-match — the two systems generate different markup and
   the effort has nowhere to end.
   =========================================================================== */

/* ---------------------------------------------------------------- tokens
   Copied from site.css. Comments kept: several of these values were solved
   rather than picked, and the reasoning is what stops them being "tidied". */
:root{
  --apd-red:#EC212C;
  --warm-white:#FDFBF7;
  --parchment:#F5F1EA;
  --navy:#1A1A2E;
  --teal:#4A6670;
  --gold:#E8B86D;
  /* ---------- text ramp (2026-08-04) ----------
     These were flat mid-greys. Grey body text on warm paper is one of the
     reliable signals of a template, so the ramp is navy-tinted and much
     stronger at the top. The names are kept because the main site has ~90
     rules referencing them; nothing here is grey any more. */
  --body-grey:#2E3348;    /* long-form and lead copy */
  --medium-grey:#454B63;  /* secondary paragraphs */
  /* Solved rather than picked: #6C7288 looked right but measured 4.24 on
     parchment, below AA, and this token carries real text (bylines, meta,
     counts). #60667C is the first value down the same navy hue that clears
     4.5 on all four papers. Worst case 4.59. Do not lighten it. */
  --meta-grey:#60667C;
  --serif:'Source Serif 4','Source Serif Pro',Georgia,serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  /* ---------- display face ----------
     ⚠️ TWO RULES, both load-bearing:
     1. h1 AND h2 ONLY. Everything else stays Source Serif 4. Instrument is
        narrow and high contrast, so below about 1.6rem it turns fragile.
     2. font-weight:400 EVERYWHERE it is used. The family ships regular and
        italic and nothing else, so 500/600 makes the browser synthesise a
        fake bold, which on a high-contrast face looks broken. */
  --display:'Instrument Serif','Source Serif 4',Georgia,serif;

  /* ---------- Broadsheet + Circle ----------
     The governing rule, and the thing that makes it read as a system rather
     than a set of preferences: CIRCLES AND PILLS ARE ROUND, STRUCTURE IS
     SQUARE. Small pills keep border-radius:100px. Cards, buttons, panels and
     frames do not. Do not "tidy" one side of that into the other.

     Depth comes from paper and rules, never from elevation. There are NO
     box-shadows here apart from focus rings. Adding a soft drop shadow
     anywhere puts the generic-template look straight back. */
  --parchment-2:#EDE6D9;
  --rule:rgba(26,26,46,.14);
  --rule-strong:rgba(26,26,46,.26);
  --rule-heavy:rgba(26,26,46,.40);   /* nothing needs a rule heavier than this */
  --rule-inv:rgba(253,251,247,.16);  /* the hairline on navy */
  /* ⚠️ THE BRAND RED CANNOT BE USED AS A LARGE BACKGROUND. Measured, not a
     preference: warm-white on #EC212C is 4.22:1 and gold on it is 2.39:1, so
     body copy fails WCAG AA and a gold label fails at every size. If a red
     field is ever wanted it has to be a darkened one (#9E1219). */
  --ease:cubic-bezier(.2,.6,.2,1);   /* one easing, no overshoot */
}

/* ---------------------------------------------------------------- fonts
   gscan warns "Missing support for custom fonts". That is DELIBERATE and the
   theme should stay that way.

   Ghost's custom-font feature lets an admin swap the heading and body faces
   from the Design panel. Here that panel would be a loaded gun: the display
   face ships regular and italic only, so any admin who picks a weight of 500
   or 600 gets a synthesised fake bold, and the face is fragile below ~1.6rem.
   Both rules are documented in the token block above and neither survives a
   dropdown.

   The volunteer-maintenance constraint says controls live in the CMS. It does
   not say every control should exist: typography here is brand, fixed in the
   same place as the main site's, and a volunteer who needs it changed should
   need a developer. Leave the warning standing. */

/* ---------------------------------------------------------------- base */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--sans);
  background:var(--warm-white);
  color:var(--navy);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--navy)}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--apd-red);outline-offset:3px;border-radius:4px}

.container{width:min(1180px,92vw);margin-inline:auto}
/* The members' area is almost entirely long-form reading, so its default
   measure is narrower than the main site's grid-driven 1180px. */
.container-reading{width:min(720px,92vw)}

h1,h2{font-family:var(--display);font-weight:400;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:1rem}
h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:2.4rem 0 .9rem}
/* Below ~1.6rem Instrument turns fragile, so h3 and down go back to the text
   face. This is rule 1 of the display face, restated where it bites. */
h3,h4,h5,h6{font-family:var(--serif);font-weight:600;line-height:1.3;margin:1.8rem 0 .6rem}
h3{font-size:1.22rem}

.eyebrow{
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--meta-grey);
  margin-bottom:.9rem;
}
.lead{font-family:var(--serif);font-size:1.16rem;line-height:1.7;color:var(--body-grey);margin-bottom:1.2rem}
.meta{font-size:.85rem;color:var(--meta-grey);margin-bottom:1.6rem}
.page-head{padding:3.5rem 0 0}

hr{border:0;height:1px;background:var(--rule);margin:2rem 0}
hr.rule-strong{background:var(--rule-strong)}

/* ---------------------------------------------------------------- nav */
.nav{border-bottom:1px solid var(--rule);background:var(--warm-white);position:sticky;top:0;z-index:50}
.nav-inner{
  width:min(1180px,92vw);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.9rem 0;flex-wrap:wrap;
}
.nav-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.nav-brand img{height:38px;width:auto}
.nav-brand-text strong{
  display:block;font-family:var(--serif);font-size:1.02rem;font-weight:600;
  letter-spacing:.01em;
}
.nav-brand-text span{display:block;font-size:.74rem;color:var(--meta-grey)}
.nav-links{list-style:none;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.nav-links a{text-decoration:none;font-size:.9rem;position:relative}
/* The nav indicator is a disc, the same mark as the tier pill. It fades in
   with no directional sweep: an underline scaling from one edge is one of the
   most recognisable generic-template tells. */
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:50%;margin-left:-2.5px;bottom:-6px;
  width:5px;height:5px;border-radius:50%;background:var(--apd-red);
  opacity:0;transition:opacity .25s var(--ease);
}
.nav-links a:not(.btn):hover::after{opacity:1}

/* ---------------------------------------------------------------- buttons
   Structure is square, with ONE borrowed corner: the top-right arc the main
   site's cards wear, scaled to 16px.
   ⚠️ A browser clamps border-radius to half the shorter side, so a card's 72px
   on a 48px-tall button would silently become 24px anyway. 16px is a choice;
   anything above 24px here is not. Hover changes fill and border only — no
   lift, no shadow, no overshoot. */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-weight:600;font-size:.88rem;letter-spacing:.02em;
  padding:.85rem 1.7rem;border-radius:0 16px 0 0;text-decoration:none;
  cursor:pointer;border:0;white-space:nowrap;margin-right:.6rem;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.btn-navy{background:var(--navy);color:var(--warm-white)}
.btn-navy:hover{background:var(--apd-red)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:#D9A455}

/* ---------------------------------------------------------------- rows
   The newsletter/archive list. Ruled rows, not cards: the main site moved its
   four audience collections from cards to ruled rows on 4 Aug for the same
   reason, which is that a list of text is a list, and boxing each item adds
   fifteen borders that say nothing. */
.row{padding:1.6rem 0;border-bottom:1px solid var(--rule)}
.row-title{font-family:var(--serif);font-size:1.2rem;font-weight:600;margin:0 0 .3rem;line-height:1.35}
.row-title a{text-decoration:none}
.row-title a:hover{color:var(--apd-red)}
.row-meta{font-size:.8rem;color:var(--meta-grey);margin-bottom:.5rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.row-hook{color:var(--medium-grey);font-size:.95rem}

/* Pills are round. This is the other half of the governing rule. */
.pill{
  display:inline-block;border-radius:100px;padding:.16rem .6rem;
  font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.pill-member{background:var(--parchment-2);color:var(--body-grey)}

/* ---------------------------------------------------------------- prose */
.prose-page{padding:3rem 0 5rem}
.prose{font-family:var(--serif);font-size:1.05rem;line-height:1.75;color:var(--body-grey)}
.prose p{margin-bottom:1.15rem}
.prose a{color:var(--navy);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{color:var(--apd-red)}
.prose ul,.prose ol{margin:0 0 1.15rem 1.3rem}
.prose li{margin-bottom:.4rem}
.prose blockquote{border-left:2px solid var(--rule-heavy);padding-left:1.1rem;margin:1.4rem 0;font-style:italic}
.prose figure{margin:1.6rem 0}
.prose figcaption{font-family:var(--sans);font-size:.78rem;color:var(--meta-grey);margin-top:.5rem}

/* The machine-written members' index. Kept deliberately plain: the script that
   writes it emits a heading-and-list structure, and any styling that assumes
   more than that will break the first time the generator changes. */
.members-index ul{list-style:none;margin-left:0}
.members-index li{padding:.55rem 0;border-bottom:1px solid var(--rule)}

/* ---------------------------------------------------------------- Koenig
   Ghost's editor emits these two classes when an author makes an image or
   embed wide or full-bleed. gscan ERRORS if a theme leaves them unstyled,
   because the editor offers the control and the theme then ignores it.

   The reading measure here is 720px, so "wide" steps out to 1000px and "full"
   goes edge to edge. Both stay square: structure is square, and a full-bleed
   image with rounded corners is the generic-template look. */
.prose :is(.kg-width-wide,.kg-width-full){position:relative;left:50%;transform:translateX(-50%)}
.prose .kg-width-wide{width:min(1000px,92vw)}
.prose .kg-width-full{width:100vw}
.prose .kg-width-full img{width:100%;max-width:none}

/* ---------------------------------------------------------------- gate
   Shown to a visitor Ghost has already truncated the body for. Paper and a
   rule, not a shadowed callout box. */
.gate{
  background:var(--parchment);border-top:1px solid var(--rule-heavy);
  padding:2rem 1.8rem;margin:2.5rem 0;
}
.gate h2{font-size:1.4rem;margin:0 0 .6rem}
.gate p{color:var(--body-grey);margin-bottom:1.2rem;font-family:var(--serif)}

.back{margin-top:2.5rem;font-size:.9rem}
.back a{text-decoration:none;color:var(--meta-grey)}
.back a:hover{color:var(--apd-red)}

/* ---------------------------------------------------------------- footer */
footer{background:var(--navy);color:rgba(253,251,247,.68);padding:3rem 0 2.2rem;font-size:.95rem;margin-top:4rem}
.foot-base{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.78rem;color:rgba(253,251,247,.4);
}
.foot-base a{text-decoration:none}
.foot-base a:hover{color:var(--warm-white)}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

@media (max-width:640px){
  .nav-inner{padding:.7rem 0}
  .nav-brand-text span{display:none}
  .btn{margin-bottom:.5rem}
}