/* THE SENIOR DOOR. Type here is deliberately larger than anywhere else on the
     site: 20px body, 22px on the lines that matter. If a future edit makes this
     page look "consistent" with the rest of the site, that edit is wrong — the
     rest of the site is what is inconsistent. Nothing on this page is below
     18px, no link target is under 48px tall, and everything respects the
     reader's own OS text-size setting because nothing is sized in px alone. */
  :root{
    --ink:#14263A;--ink-deep:#101f2d;
    --ground:#f2f5f7;--white:#ffffff;
    --petrol:#135A5F;--petrol-pale:#E5F0F1;
    --amber:#c7880a;--amber-pale:#fbf1dd;--amber-text:#624304;
    --mid:#35485C;
    /* Hairlines are separators, not decoration. Below roughly 3:1 against the page they
       vanish for an older reader — and this is the page written for the oldest reader on
       the site. Matches the reasoning index.html already carries for .act-line. */
    --hairline:#D6DEE5;
  }
  *{box-sizing:border-box;}
  html{font-size:112.5%;} /* 18px base — the floor, before any of this page's own scaling */
  body{margin:0;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--ground);
       line-height:1.65;font-size:1.125rem;-webkit-font-smoothing:antialiased;}
  .grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  .wrap{max-width:44rem;margin:0 auto;padding:2rem 1.5rem 3rem;}
  a{color:var(--petrol);}
  a:focus-visible,button:focus-visible{outline:3px solid var(--petrol);outline-offset:3px;border-radius:6px;}
  .logo{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
  .logo span{color:var(--petrol);}
  .back{display:inline-flex;align-items:center;min-height:48px;font-size:1.125rem;}
  h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(2.2rem,6vw,3rem);color:var(--ink);
     margin:1.2rem 0 .6rem;line-height:1.12;letter-spacing:-.025em;}
  h1 em{font-style:italic;font-weight:400;color:var(--petrol);}
  .lead{font-size:1.28rem;color:var(--mid);line-height:1.55;margin:0 0 2rem;}
  h2{font-family:'Fraunces',serif;font-weight:600;font-size:1.6rem;color:var(--ink);
     margin:2.6rem 0 .6rem;line-height:1.25;letter-spacing:-.015em;}
  h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.22rem;color:var(--ink);margin:1.6rem 0 .3rem;}
  p,li{font-size:1.125rem;}
  ul{padding-left:1.3rem;}
  li{margin:.6rem 0;}
  .said{margin:0 0 1.2rem;padding:.9rem 1.2rem;border-left:3px solid var(--petrol);background:var(--petrol-pale);
        border-radius:0 10px 10px 0;font-size:1.15rem;line-height:1.5;}
  .said cite{display:block;font-style:normal;font-size:1.125rem;color:var(--mid);margin-top:.4rem;}
  .card{background:var(--ground);border:1px solid var(--hairline);border-radius:14px;padding:1.4rem 1.5rem;margin:1.6rem 0;}
  .warn{background:var(--amber-pale);border:1px solid rgba(191,130,7,.35);border-left:4px solid var(--amber);
        border-radius:0 12px 12px 0;padding:1.4rem 1.5rem;margin:1.8rem 0;}
  .warn h2{margin-top:0;color:var(--amber-text);}
  .cta{display:inline-flex;align-items:center;justify-content:center;min-height:56px;
       padding:.9rem 1.8rem;border-radius:50px;background:var(--petrol);color:#fff;text-decoration:none;
       font-weight:600;font-size:1.15rem;margin:.4rem .6rem .4rem 0;}
  .cta.line{background:transparent;color:var(--petrol);border:2px solid var(--petrol);}
  .cta:hover{background:var(--petrol);}
  .cta.line:hover{background:var(--petrol-pale);}
  footer{max-width:44rem;margin:0 auto;padding:1.6rem 1.5rem 3rem;color:var(--mid);font-size:1.125rem;
         border-top:1px solid var(--hairline);}
  .skip{position:absolute;left:-999px;top:0;z-index:9999;background:#14263A;color:#fff;
        padding:.85rem 1.25rem;border-radius:0 0 10px 0;text-decoration:none;font-weight:600;}
  .skip:focus{left:0;}

  /* Breakpoints match index.html (640 / 480 / 400). These recover horizontal room on a
     narrow phone WITHOUT ever shrinking the type — on this page the large text is the
     point, so nothing below reduces a font-size. Buttons go full-width so two 56px
     targets stack instead of crowding each other on one line. */
  @media(max-width:640px){
    .wrap{padding:1.5rem 1.25rem 2.5rem;}
    footer{padding:1.4rem 1.25rem 2.5rem;}
    h2{margin:2.1rem 0 .5rem;}
    h3{margin:1.35rem 0 .3rem;}
    .cta{display:flex;width:100%;margin:.5rem 0;}
  }
  @media(max-width:480px){
    .wrap{padding:1.25rem 1.05rem 2.25rem;}
    footer{padding:1.3rem 1.05rem 2.25rem;}
    .said{padding:.85rem 1rem;}
    .warn,.card{padding:1.15rem 1.1rem;}
    ul{padding-left:1.1rem;}
  }
  @media(max-width:400px){
    .wrap{padding:1.15rem .9rem 2rem;}
    footer{padding:1.2rem .9rem 2rem;}
    h1{letter-spacing:-.015em;}
  }
/* ══ SHARED HEADER (added 2026-08-14) ═══════════════════════════════════════
   Same shape as the homepage — wordmark chip left, pill nav right — in the light
   variant these pages need. Deliberately STATIC, not fixed: the homepage pill is
   fixed because it floats over a photograph, but these are reading pages on a
   light ground, and a fixed two-row header at 375px would eat the column it sits
   above. No JS, so there is no hamburger to break on 17 pages at once.
   Colours are var() with literal fallbacks because not every page declares the
   full token set; the fallbacks ARE the canonical values. */
.site-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem 1rem;max-width:1180px;margin:0 auto;
  padding:1.1rem clamp(18px,4vw,40px) .4rem;}
.site-head .mark{font-family:'Fraunces',serif;font-size:1.32rem;font-weight:600;
  letter-spacing:-.012em;text-decoration:none;color:var(--ink,#14263A);
  background:var(--sunk,#e7edf1);border:1px solid var(--hairline,#D6DEE5);
  padding:.5rem .85rem;border-radius:12px;line-height:1.4;white-space:nowrap;}
.site-head .mark span{color:var(--petrol,#135A5F);}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;
  background:var(--white,#ffffff);border:1px solid var(--hairline,#D6DEE5);
  border-radius:999px;padding:.3rem;}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .95rem;
  font-size:1rem;color:var(--mid,#35485C);text-decoration:none;border-radius:999px;
  transition:background .18s ease,color .18s ease;}
.site-nav a:hover{color:var(--ink,#14263A);background:var(--sunk,#e7edf1);}
.site-nav a[aria-current="page"]{color:var(--ink,#14263A);font-weight:600;}
.site-nav .cta{background:var(--petrol,#135A5F);color:#fff;font-weight:600;padding:0 1.15rem;transition:background .18s ease,color .18s ease;}
.site-nav .cta:hover{background:var(--ink,#14263A);color:#fff;}
/* Below 560px the four items cannot sit on one row, and a wrapped pill with a
   999px radius reads as a broken shape rather than a nav. So the pill becomes a
   rounded GROUP: full width, softer radius, links sharing the row and the action
   on its own full-width row underneath. No hamburger, no JS, nothing to break. */
@media(max-width:560px){
  .site-head{gap:.6rem;padding-inline:1.25rem;}
  .site-nav{width:100%;border-radius:16px;padding:.35rem;gap:.2rem;}
  .site-nav a{flex:1 1 auto;justify-content:center;padding:0 .55rem;font-size:.95rem;}
  .site-nav .cta{flex:1 1 100%;}
}

/* PHONE MENU (2026-09-24). Under 560px the four nav items used to wrap into a
   104-172px block above every page's first line. Now: wordmark and one Menu
   button; the links and the action open in a panel under them. Without JS
   (.js never set) the links stay visible, so nothing is ever unreachable. */
.nav-toggle{display:none;}
@media(max-width:560px){
  .js .site-nav{width:auto;background:none;border:0;padding:0;}
  .js .nav-toggle{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;min-width:44px;padding:0 1rem;
    font:600 1rem 'DM Sans',sans-serif;color:var(--ink,#14263A);background:var(--white,#ffffff);
    border:1px solid var(--hairline,#D6DEE5);border-radius:999px;cursor:pointer;}
  .js .nav-toggle svg{width:20px;height:20px;}
  .js .nav-panel{display:none;}
  .js .site-head{position:relative;z-index:50;}
  .js .site-nav.open .nav-panel{display:flex;flex-direction:column;align-items:stretch;gap:.2rem;
    position:absolute;top:100%;left:1.25rem;right:1.25rem;box-shadow:0 14px 34px rgba(20,38,58,.16);
    padding:.35rem;background:var(--white,#ffffff);border:1px solid var(--hairline,#D6DEE5);border-radius:16px;}
  .js .site-nav.open .nav-panel a{justify-content:flex-start;padding:0 1rem;font-size:1.0625rem;}
  .nav-panel{display:contents;}
  footer a{display:inline-block;line-height:44px;min-width:44px;text-align:center;}
}