/* ==========================================================================
   PAS INSTITUTE — DESIGN SYSTEM
   Shared spine for pasinstitute.org. Add new pages by linking this file.

   Direction: minimalist grandeur. Solid fields of navy, large serif at
   scale, near zero ornament. The one signature element is the invitation
   card. Everything else stays quiet so the card carries the page.

   Rules enforced here:
   - Logo is never recolored, stretched, or placed directly on a dark fill.
     On navy sections it sits inside a white card. See .plate.
   - Red is a seasoning. It appears on action controls and nowhere else.
   - No hairline rules as section dividers. Color fields do that work.
   - ADA: Institute Red measures 2.4:1 against Institute Navy and 2.77:1
     against Navy Deep, both below the WCAG 3:1 floor for UI components.
     Rule: .action--go (solid red) is only used on white or off white
     ground. On navy or deep grounds use .action--onDark. Never place a
     solid red fill directly against either navy value.
   ========================================================================== */

/* --- Fonts, self hosted --------------------------------------------------- */
/* Served from this folder rather than a Google Fonts CDN link on purpose:
   this audience often browses from locked down government networks where
   third party font CDNs get blocked. A blocked CDN silently drops the page
   to Georgia and a system sans, which nobody would notice happened. Local
   files remove that failure mode entirely. Each family below covers its
   full weight range from a single variable font file, per Google's own
   delivery, so this is the same bytes, just not fetched from Google. */

@font-face{
  font-family:'Public Sans'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url('fonts/public-sans-400-600.woff2') format('woff2');
}
@font-face{
  font-family:'Spectral'; font-style:normal; font-weight:400;
  font-display:swap; src:url('fonts/spectral-normal-400.woff2') format('woff2');
}
@font-face{
  font-family:'Spectral'; font-style:normal; font-weight:600;
  font-display:swap; src:url('fonts/spectral-normal-600.woff2') format('woff2');
}
@font-face{
  font-family:'Spectral'; font-style:italic; font-weight:400;
  font-display:swap; src:url('fonts/spectral-italic-400.woff2') format('woff2');
}

/* Source Serif 4 (the original headline face), Newsreader, and Libre
   Baskerville were the other candidates reviewed alongside Spectral.
   Spectral was chosen 2026-07-16 for sitting closest to the logo's own
   weight. Their font files are left in site/assets/fonts/ so
   font-options.html still renders as a record of the comparison, but the
   @font-face declarations for all three were removed here since nothing
   on the live pages references them anymore. */

:root{
  /* Color. Sampled from the official logo. Do not add to this list. */
  --navy:        #002454;  /* primary field, headlines, nav */
  --navy-deep:   #00183C;  /* deepest field, footer, the card ground */
  --red:         #C00C18;  /* action only */
  --red-deep:    #B40C18;  /* action, pressed state */
  --white:       #FFFFFF;
  --off-white:   #F7F7F4;  /* section banding */
  --slate:       #5B6670;  /* secondary text, captions */
  --gray-light:  #E3E6EA;  /* card borders, form fields */

  /* Type */
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans:  'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-hero:  clamp(40px, 6.2vw, 82px);
  --t-head:  clamp(30px, 4.2vw, 54px);
  --t-sub:   clamp(24px, 2.8vw, 34px);
  --t-lead:  clamp(18px, 1.5vw, 21px);
  --t-body:  17px;
  --t-small: 14.5px;
  --t-micro: 12.5px;

  /* Space */
  --gutter: 32px;
  --max: 1200px;
  --measure: 66ch;
  --band: clamp(72px, 9vw, 128px);
}

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

body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.7;
  color:var(--navy);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-0.015em;
  margin:0;
  color:var(--navy);
}
p{ margin:0; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.narrow{ max-width:820px; }
.measure{ max-width:var(--measure); }

/* --- Fields -------------------------------------------------------------- */
/* Sections are identified by ground color, not by rules or kicker labels. */

.band{ padding:var(--band) 0; }
.band--paper{ background:var(--white); }
.band--stone{ background:var(--off-white); }
.band--navy{ background:var(--navy); }
.band--deep{ background:var(--navy-deep); }

.band--navy, .band--deep{ color:rgba(255,255,255,0.86); }
.band--navy h1, .band--navy h2, .band--navy h3,
.band--deep h1, .band--deep h2, .band--deep h3{ color:var(--white); }

/* --- Controls ------------------------------------------------------------ */

.action{
  display:inline-block;
  font-family:var(--sans);
  font-size:var(--t-small);
  font-weight:600;
  letter-spacing:0.02em;
  line-height:1;
  padding:16px 30px;
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background-color .14s ease, color .14s ease, border-color .14s ease;
}
.action--go{ background:var(--red); color:var(--white); border-color:var(--red); }
.action--go:hover{ background:var(--red-deep); border-color:var(--red-deep); }
.action--quiet{ background:transparent; color:var(--navy); border-color:var(--navy); }
.action--quiet:hover{ background:var(--navy); color:var(--white); }
.action--onDark{ background:transparent; color:var(--white); border-color:rgba(255,255,255,0.5); }
.action--onDark:hover{ background:var(--white); color:var(--navy-deep); border-color:var(--white); }

.actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* --- Masthead ------------------------------------------------------------ */
/* Flat and still. It does not follow the reader down the page. */

.masthead{
  background:var(--white);
  position:sticky; top:0; z-index:80;
  border-bottom:1px solid var(--gray-light);
}
.masthead__inner{
  max-width:var(--max); margin:0 auto; padding:22px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:16px 24px;
  flex-wrap:wrap;
}
.masthead__mark img{ height:64px; width:auto; }
.masthead__nav{ display:flex; align-items:center; gap:30px; }
.masthead__nav a{
  font-size:var(--t-small); font-weight:500; text-decoration:none; color:var(--navy);
}
.masthead__nav a:hover{ color:var(--red); }
.masthead__toggle{
  display:none; background:none; border:1px solid var(--gray-light);
  padding:10px 14px; font-family:var(--sans); font-size:var(--t-small);
  font-weight:600; color:var(--navy); cursor:pointer;
}

/* --- The plate ----------------------------------------------------------- */
/* The signature. A formal invitation rendered as a physical card resting on
   a navy ground. It is also how the logo legally appears on dark fields.   */

.plate{
  background:var(--white);
  max-width:640px;
  margin:0 auto;
  padding:12px;
  border:1px solid rgba(255,255,255,0.28);
}
.plate__inner{
  border:1px solid var(--navy);
  padding:clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
  text-align:center;
}
.plate__mark{ display:inline-block; margin-bottom:36px; }
.plate__mark img{ height:58px; width:auto; margin:0 auto; }
.plate__line{
  font-family:var(--serif);
  font-size:var(--t-body);
  font-style:italic;
  color:var(--slate);
  margin-bottom:14px;
}
.plate__title{
  font-family:var(--serif);
  font-size:var(--t-sub);
  font-weight:600;
  color:var(--navy);
  line-height:1.12;
  margin-bottom:14px;
}
.plate__series{
  font-family:var(--serif);
  font-style:italic;
  font-size:var(--t-body);
  color:var(--slate);
  margin-bottom:32px;
}
.plate__when{
  font-family:var(--serif);
  font-size:20px;
  font-weight:600;
  color:var(--navy);
  margin-bottom:6px;
}
.plate__where{
  font-size:var(--t-small);
  color:var(--slate);
  margin-bottom:36px;
}
.plate .action{ margin-top:4px; }

/* Compact variant for the homepage teaser. Retained for print handoff:
   the plate is the source for place cards, programs, and menus later. */
.plate--brief .plate__inner{ padding:clamp(32px,4vw,48px) clamp(24px,3vw,44px); }
.plate--brief .plate__mark{ margin-bottom:28px; }
.plate--brief .plate__mark img{ height:48px; }

/* --- Event card ------------------------------------------------------------ */
/* The web signature. A full bleed navy block, left aligned, bold serif at
   scale, with a faint constellation field per the brand guide's own
   "quiet background texture" motif. This is the dynamic counterpart to
   the plate: same voice, built to be scanned in a feed rather than held
   in the hand. CTA is white outline, never red, since red fails contrast
   against navy. See the ADA note at the top of this file.               */

.eventcard{
  position:relative;
  background:var(--navy-deep);
  overflow:hidden;
  padding:clamp(48px,6vw,80px) clamp(28px,5vw,72px);
}
/* Star field, illustrated and then photographic, tried and removed
   2026-07-16. Plain navy deep carries the card now. eventcard-bg.jpg
   stays on disk if a texture direction comes back later, nothing here
   references it. */
.eventcard__inner{ position:relative; z-index:1; max-width:720px; }
.eventcard__eyebrow{
  font-family:var(--sans); font-size:var(--t-micro); font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.78); margin-bottom:18px;
}
.eventcard__title{
  font-size:clamp(36px,5vw,58px);
  color:var(--white);
  margin-bottom:18px;
}
.eventcard__series{
  font-family:var(--serif); font-style:italic; font-size:var(--t-lead);
  color:rgba(255,255,255,0.72); margin-bottom:28px;
}
.eventcard__meta{
  display:flex; column-gap:clamp(24px,4vw,48px); row-gap:16px; flex-wrap:wrap;
  padding:18px 0; margin-bottom:28px; margin-left:0;
  border-top:1px solid rgba(255,255,255,0.18);
  border-bottom:1px solid rgba(255,255,255,0.18);
}
/* A real dl/dt/dd, not styled divs, so a screen reader announces each
   pair as label and value rather than running the words together. */
.eventcard__meta dt{ font-size:var(--t-small); color:rgba(255,255,255,0.78); margin:0; }
.eventcard__meta dd{
  display:block; margin:0; font-family:var(--serif); font-weight:600; font-size:19px;
  color:var(--white); margin-top:6px;
}

.eventcard__ctas{ display:flex; gap:clamp(32px,5vw,56px); flex-wrap:wrap; margin-bottom:8px; }
.eventcard__cta{ flex:1 1 260px; }
.eventcard__cta-title{
  font-family:var(--serif); font-weight:600; font-size:22px;
  color:var(--white); margin-bottom:8px;
}
.eventcard__cta-copy{
  font-family:var(--sans); font-size:var(--t-small);
  color:rgba(255,255,255,0.78); margin-bottom:18px;
}

/* Compact variant for the homepage teaser. */
.plate--brief .plate__inner{ padding:clamp(32px,4vw,48px) clamp(24px,3vw,44px); }
.plate--brief .plate__mark{ margin-bottom:28px; }
.plate--brief .plate__mark img{ height:48px; }

/* --- Interest form --------------------------------------------------------- */
/* Replaces the old full RSVP flow inside .eventcard. Collects name and
   email only, real invitation and details go out by direct send. */

.interest-form__hp{ position:absolute; left:-9999px; }
.interest-form__row{ display:flex; gap:14px; flex-wrap:wrap; align-items:stretch; }
.interest-form__field{
  flex:1 1 220px;
  font-family:var(--sans);
  font-size:var(--t-body);
  color:var(--navy);
  background:var(--white);
  border:1.5px solid transparent;
  padding:14px 18px;
}
.interest-form__field::placeholder{ color:var(--slate); }
.interest-form__field:focus-visible{ outline:2.5px solid var(--white); outline-offset:2px; }
.interest-form .action{ flex:0 0 auto; background:var(--white); color:var(--navy-deep); border-color:var(--white); }
.interest-form .action:hover{ background:transparent; color:var(--white); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --- Panels -------------------------------------------------------------- */
/* Three lines of national power. Butted solid panels, no gaps, no borders.
   The two navies alternate so the division is structural, not decorative. */

.panels{ display:grid; grid-template-columns:repeat(3,1fr); }
.panel{ padding:clamp(48px,5vw,72px) clamp(28px,3vw,44px); }
.panel:nth-child(odd){ background:var(--navy); }
.panel:nth-child(even){ background:var(--navy-deep); }
.panel h3{ font-size:var(--t-sub); margin-bottom:16px; color:var(--white); }
.panel p{ color:rgba(255,255,255,0.8); font-size:var(--t-small); }

/* --- Statement ----------------------------------------------------------- */
/* A single sentence alone on a field. Used once. */

.statement{
  font-family:var(--serif);
  font-size:var(--t-head);
  font-weight:600;
  line-height:1.22;
  letter-spacing:-0.015em;
  color:var(--white);
  max-width:960px;
  margin:0 auto;
  text-align:center;
}

/* --- Entries ------------------------------------------------------------- */
/* Programming model and ways to engage. No boxes, no borders, no counters. */

.entries{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(40px,5vw,72px); }
.entry h3{ font-size:var(--t-sub); margin-bottom:12px; }
.entry p{ color:var(--slate); font-size:var(--t-small); max-width:44ch; }
.band--navy .entry p, .band--deep .entry p{ color:rgba(255,255,255,0.72); }

/* --- Docket -------------------------------------------------------------- */
/* Event logistics. Aides and action officers scrape this to build briefing
   binders, so it stays plain, selectable text with no layout tricks.       */

.docket{ display:grid; grid-template-columns:repeat(2,1fr); gap:36px 56px; }
.docket dt{
  font-size:var(--t-micro); font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--slate); margin-bottom:8px;
}
.docket dd{
  margin:0; font-family:var(--serif); font-size:20px; font-weight:600; color:var(--navy);
  line-height:1.3;
}

/* --- Unconfirmed --------------------------------------------------------- */
/* Anything not yet confirmed in writing is marked, never guessed. */

.tbc{
  font-family:var(--sans);
  font-size:var(--t-small);
  font-weight:600;
  font-style:normal;
  color:var(--red);
  background:rgba(192,12,24,0.07);
  padding:2px 8px;
  letter-spacing:0.01em;
}

/* --- Type helpers -------------------------------------------------------- */

.hero__title{ font-size:var(--t-hero); margin-bottom:28px; }
.lead{ font-size:var(--t-lead); color:var(--slate); max-width:var(--measure); }
.band--navy .lead, .band--deep .lead{ color:rgba(255,255,255,0.78); }
.prose p + p{ margin-top:22px; }
.prose{ font-size:var(--t-lead); max-width:var(--measure); }
.epigraph{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:var(--t-sub); line-height:1.3; color:var(--white);
  max-width:24ch;
}
.epigraph cite{
  display:block; font-style:normal; font-family:var(--sans);
  font-size:var(--t-micro); letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(255,255,255,0.72); margin-top:20px;
}

/* --- Challenge grid -------------------------------------------------------- */
/* The one section that stacked a pull quote directly above two full
   paragraphs, taller than every sibling section which spreads content
   sideways instead of down. Quote sits beside the prose instead of on
   top of it above this breakpoint, so the section fits a single screen
   the way the rest of the page does. Stacks below it, same as .panels
   and .entries collapse at the same width. */
.challenge-grid{ display:grid; gap:40px; align-items:start; }
@media (min-width:820px){
  .challenge-grid{ grid-template-columns:1.5fr 1fr; gap:64px; }
  .challenge-grid .epigraph{ padding-top:4px; }
}

/* A watermark to fill the open navy below the shorter quote column was
   tried and scrapped 2026-07-16, three passes (abstract outline, then
   brightness/invert flattened to a blob, then plain opacity), none of
   it landed. Left as open navy on purpose for now. See project memory
   before trying this again. */
#challenge .wrap{ position:relative; z-index:1; }
.ris{
  font-family:var(--serif); font-weight:600; font-size:var(--t-small);
  letter-spacing:0.18em; text-transform:uppercase; color:var(--red);
}
.descriptor{ font-size:var(--t-small); color:var(--slate); letter-spacing:0.01em; }

/* --- Footer -------------------------------------------------------------- */

.foot{ background:var(--navy-deep); color:rgba(255,255,255,0.6); padding:64px 0 44px; }
.foot__top{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:32px; padding-bottom:36px;
}
.foot__mark{ background:var(--white); padding:14px 18px; display:inline-block; }
.foot__mark img{ height:36px; width:auto; }
.foot__nav{ display:flex; gap:26px; flex-wrap:wrap; }
.foot__nav a{ font-size:var(--t-small); text-decoration:none; color:rgba(255,255,255,0.62); }
.foot__nav a:hover{ color:var(--white); }
.foot__legal{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:var(--t-micro); color:rgba(255,255,255,0.42);
  border-top:1px solid rgba(255,255,255,0.12); padding-top:28px;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width:900px){
  .panels{ grid-template-columns:1fr; }
  .panel:nth-child(even){ background:var(--navy-deep); }
  .entries{ grid-template-columns:1fr; }
  .docket{ grid-template-columns:1fr; gap:28px; }
  .masthead__nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--white); border-top:1px solid var(--gray-light);
    flex-direction:column; align-items:stretch; gap:0; padding:8px var(--gutter) 20px;
    z-index:70;
  }
  /* .masthead stays position:sticky here — the dropdown nav below anchors
     off it fine since sticky still establishes a positioning context. */
  .masthead__nav.is-open{ display:flex; }
  .masthead__nav a{ padding:14px 0; border-bottom:1px solid var(--gray-light); }
  .masthead__nav .action{ margin-top:16px; text-align:center; border-bottom:none; }
  .masthead__toggle{ display:block; }
  .foot__top{ align-items:flex-start; }
  .eventcard__meta{ flex-direction:column; gap:20px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto; }
}

:focus-visible{ outline:2.5px solid var(--red); outline-offset:3px; }
.band--navy :focus-visible, .band--deep :focus-visible, .foot :focus-visible,
.eventcard :focus-visible{
  outline-color:var(--white);
}

/* --- Skip link ----------------------------------------------------------- */
/* Keyboard and screen reader users reach content without tabbing the nav. */

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--navy); color:var(--white);
  font-family:var(--sans); font-size:var(--t-small); font-weight:600;
  padding:14px 24px; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* --- Colophon ------------------------------------------------------------ */
/* Phase 0 runs without a full site footer. Until the nav grows past two
   pages, the close of the page is a single quiet band carrying only what
   must legally and practically appear: who this is, its status, how to
   reach it. The .foot component above stays in the file for Phase 1. */

.colophon{ background:var(--off-white); padding:44px var(--gutter) 48px; text-align:center; }
.colophon p{
  font-size:var(--t-micro); color:var(--slate);
  margin:0; line-height:2.1; letter-spacing:0.01em;
}
.colophon a{ color:var(--slate); text-decoration:underline; text-underline-offset:3px; }
.colophon a:hover{ color:var(--red); }

/* --- Supplementary devices --------------------------------------------- */
/* Added for pages this system does not cover yet: the Board and Our Work
   hubs, the press page, anywhere that needs visual weight with no
   photography and no eventcard. Kept separate from the rules above rather
   than merged into them, since these three assets predate this stylesheet
   and are documented on their own terms in creative-assets.html and
   brand-kit.html. */

.shield-watermark{ position:relative; overflow:hidden; }
.shield-watermark svg{
  position:absolute; right:-30px; top:50%; transform:translateY(-50%);
  width:280px; height:auto; color:rgba(255,255,255,0.08); pointer-events:none;
}
.band--paper .shield-watermark svg, .band--stone .shield-watermark svg{ color:rgba(0,36,84,0.06); }

.orbital-accent{ width:180px; height:auto; color:var(--gray-light); }
.band--navy .orbital-accent, .band--deep .orbital-accent{ color:rgba(255,255,255,0.3); }

.blueprint{ background-image:url('blueprint-grid.svg'); background-repeat:repeat; background-size:80px 80px; }