/* ============================================================================
   mfoo.org — shared design system
   Built Aug 9, 2026. Tokens lifted verbatim from oracle-history.html, the page
   Garry approved for look and readability.

   RULES THIS FILE ENFORCES
   - ONE accent colour (gold). No second accent.
   - Georgia serif for headings + brand; system sans for body copy, nav, captions.
     (The approved page reads well because BODY is sans at 19px/1.8 — keep it.)
   - Content column capped at 72ch.
   - One responsive design. No separate mobile site.
   - Reader text-size control (audience skews 55+).
   - Nothing here blocks pinch-zoom.
   ========================================================================== */

:root{
  /* palette — from the approved page */
  --ink:#241e12;
  --muted:#6f6654;
  --gold:#8f6410;
  --gold-dk:#6e4c09;
  --ember:#b93a1a;          /* reserved: errors / rare emphasis only, never decoration */
  --bg:#f6f1e5;
  --card:#fdfaf1;
  --line:#e0d6bd;
  --line2:#d3c8ab;
  --band:#ece2c8;           /* table heads, infobox caps */

  /* type */
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --body-size:19px;         /* reader control overrides this */
  --measure:72ch;

  /* rhythm */
  --gap:clamp(18px,3vw,28px);
  --section:clamp(46px,8vh,86px);
  --radius:10px;
}

/* reader text-size control */
html[data-textsize="large"]  { --body-size:21px; }
html[data-textsize="xlarge"] { --body-size:23px; }

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--gold);text-decoration:none;}
a:hover{color:var(--gold-dk);}
img{max-width:100%;height:auto;display:block;}

/* keyboard users first */
.skip{position:absolute;left:-9999px;top:0;background:var(--card);color:var(--ink);
      padding:12px 18px;z-index:200;font-family:var(--sans);border:1px solid var(--gold);}
.skip:focus{left:12px;top:12px;}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}

.shell{max-width:1180px;margin:0 auto;padding:0 22px;}

/* ============================ masthead ============================ */
/* Utility bar sits ABOVE content nav so transactional links never compete
   with content links. (Tenement / Historic New England / National Trust.) */
.utility{
  background:var(--band);border-bottom:1px solid var(--line2);
  font-family:var(--sans);font-size:13.5px;
}
.utility .shell{display:flex;justify-content:flex-end;align-items:center;gap:18px;
                min-height:38px;flex-wrap:wrap;}
.utility a{color:var(--gold-dk);font-weight:600;}
.textsize{display:flex;align-items:center;gap:6px;color:var(--muted);margin-right:auto;}
.textsize button{
  font-family:var(--serif);background:transparent;border:1px solid var(--line2);
  color:var(--gold-dk);border-radius:6px;cursor:pointer;padding:2px 9px;line-height:1.4;
}
.textsize button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#fff;}
.textsize .t1{font-size:12px;} .textsize .t2{font-size:15px;} .textsize .t3{font-size:18px;}


.masthead{background:var(--card);border-bottom:1px solid var(--line);position:relative;}
.masthead .shell{display:flex;align-items:center;justify-content:space-between;
                 gap:18px;padding-top:14px;padding-bottom:14px;}
.brand{font-family:var(--serif);line-height:1.15;}
.brand .b1{display:block;font-size:clamp(19px,3vw,23px);color:var(--ink);font-weight:600;}
.brand .b2{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;
           text-transform:uppercase;color:var(--muted);margin-top:3px;}
nav.main{font-family:var(--sans);}
nav.main ul{list-style:none;display:flex;gap:22px;flex-wrap:wrap;}
nav.main a{font-size:15px;color:var(--ink);font-weight:600;padding:6px 0;
           border-bottom:2px solid transparent;}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--gold-dk);border-bottom-color:var(--gold);}
.navtoggle{display:none;font-family:var(--sans);font-size:15px;font-weight:600;
           background:transparent;border:1px solid var(--line2);border-radius:8px;
           padding:8px 14px;cursor:pointer;color:var(--ink);}

@media (max-width:820px){
  .navtoggle{display:block;}
  nav.main{display:none;width:100%;}
  nav.main.open{display:block;}
  .masthead .shell{flex-wrap:wrap;}
  nav.main ul{flex-direction:column;gap:0;width:100%;padding-bottom:8px;}
  nav.main li{border-top:1px solid var(--line);}
  nav.main a{display:block;padding:13px 2px;border-bottom:none;}
}

/* ============================ hero ============================ */
.hero{padding:var(--section) 0 clamp(30px,5vh,52px);}
/* Two columns, two rows:
   col 1 = the photo + headline + text (spans both rows)
   col 2 = the video (row 1) and the link rail (row 2) */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;
           grid-template-rows:auto 1fr;gap:clamp(26px,4vw,52px);align-items:start;}
.herotext {grid-column:1;grid-row:1 / span 2;}
.videowrap{grid-column:2;grid-row:1;}
.rail     {grid-column:2;grid-row:2;align-self:start;}

/* Small photograph sitting in the LOWER-LEFT of the headline block.
   It is floated left from inside the <h1>, after the first sentence — so the
   opening line of the title runs across the top of it and the rest of the title
   wraps down its right side. The body copy then clears and starts full width. */
.herophoto{float:left;width:200px;margin:10px 24px 6px 0;
           border:1px solid var(--line2);border-radius:var(--radius);
           overflow:hidden;background:var(--card);shape-margin:14px;}
.herophoto img{width:100%;}
.herophoto figcaption{font-family:var(--sans);font-size:12px;font-weight:400;color:var(--muted);
                      padding:8px 11px;border-top:1px solid var(--line);line-height:1.4;
                      letter-spacing:0;}
/* the body copy starts on a clean full-width line below the photo.
   NB: must be `h1 + .deck` — `.deck:first-of-type` never matches, because the
   first <p> in this block is the eyebrow, not a .deck. */
.herotext h1.big + .deck{clear:left;}
.herotext::after{content:"";display:block;clear:both;}

/* link rail — reserved space for buttons out to videos and other pages */
.rail{margin-top:-14px;}
.rail-lbl{font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
          color:var(--muted);font-weight:700;margin-bottom:11px;}
.rail-btn{display:flex;align-items:center;gap:13px;background:var(--card);
          border:1px solid var(--line2);border-radius:var(--radius);
          padding:13px 16px;margin-bottom:9px;color:var(--ink);font-family:var(--sans);}
.rail-btn .ico{color:var(--gold);font-size:14px;line-height:1;flex:0 0 auto;}
.rail-btn strong{display:block;font-size:15.5px;font-weight:600;line-height:1.35;}
.rail-btn em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4;}
.rail-btn:hover{border-color:var(--gold);color:var(--gold-dk);}
.rail-btn:hover em{color:var(--gold-dk);}
/* the one route everything else feeds into */
.rail-btn.give{background:var(--gold);border-color:var(--gold);color:#fff;}
.rail-btn.give .ico{color:#fff;}
.rail-btn.give em{color:rgba(255,255,255,.86);}
.rail-btn.give:hover{background:var(--gold-dk);border-color:var(--gold-dk);color:#fff;}
.rail-btn.give:hover em{color:rgba(255,255,255,.86);}
/* sized up twice at Garry's request (Aug 9) */
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;
         font-size:clamp(15px,3.1vw,20px);color:var(--gold);font-weight:700;}
h1.big{font-family:var(--serif);font-size:clamp(33px,5.4vw,58px);font-weight:600;
       line-height:1.08;margin-top:16px;letter-spacing:-.01em;}
/* second line: still smaller than line 1, but sized up (Garry, Aug 9) */
h1.big .quiet{display:block;color:var(--muted);font-size:.80em;line-height:1.13;margin-top:.24em;}
.deck{font-family:var(--sans);font-size:clamp(16.5px,2vw,19px);line-height:1.72;
      color:var(--ink);max-width:56ch;margin-top:22px;}
.deck + .deck{margin-top:14px;}
.turn{font-family:var(--serif);font-size:clamp(20px,2.6vw,26px);line-height:1.35;
      color:var(--gold-dk);margin-top:22px;max-width:46ch;}

/* video */
.videowrap{background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);
           overflow:hidden;}
.videobox{position:relative;background:#241e12;}
.videobox video{width:100%;height:auto;display:block;}
.soundbtn{
  position:absolute;left:14px;bottom:14px;right:14px;
  font-family:var(--sans);font-size:15.5px;font-weight:600;
  background:rgba(36,30,18,.86);color:#fdfaf1;border:1px solid rgba(253,250,241,.5);
  border-radius:9px;padding:12px 16px;cursor:pointer;text-align:center;
  backdrop-filter:blur(3px);
}
.soundbtn:hover{background:var(--gold-dk);border-color:var(--gold);}
.transcript{font-family:var(--sans);padding:16px 18px 18px;}
.transcript .lbl{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
                 color:var(--muted);font-weight:700;}
.transcript p{font-size:15.5px;line-height:1.65;color:#4a4335;margin-top:9px;}
.transcript .note{font-size:13px;color:var(--muted);margin-top:9px;font-style:italic;}

@media (max-width:900px){
  .hero{padding-top:clamp(22px,4vh,34px);}   /* no dead space above the video */
  /* single column; order is video → photo/headline/text → link rail */
  .hero-grid{grid-template-columns:1fr;grid-template-rows:none;gap:24px;}
  .videowrap{grid-column:1;grid-row:auto;order:1;}
  .herotext {grid-column:1;grid-row:auto;order:2;}
  .rail     {grid-column:1;grid-row:auto;order:3;margin-top:0;}
  h1.big{font-size:clamp(30px,7.6vw,40px);}
  .herophoto{width:40vw;max-width:165px;margin:8px 18px 4px 0;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* ============================ sections ============================ */
section.band{padding:var(--section) 0;border-top:1px solid var(--line);}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
         flex-wrap:wrap;margin-bottom:calc(var(--gap) + 4px);}
h2.sec{font-family:var(--serif);font-size:clamp(24px,3.6vw,34px);font-weight:600;color:var(--gold-dk);}
.sechead .more{font-family:var(--sans);font-size:15px;font-weight:600;}
.lede{font-family:var(--sans);font-size:var(--body-size);line-height:1.8;
      max-width:var(--measure);color:var(--ink);}
.lede + .lede{margin-top:18px;}

/* three doors — permanent, never change as the library grows */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.door{background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);
      overflow:hidden;display:flex;flex-direction:column;}
.door img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.door .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1;}
.door h3{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);}
.door p{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--muted);flex:1;}
.door .go{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--gold-dk);}
.door:hover{border-color:var(--gold);}
@media (max-width:880px){ .doors{grid-template-columns:1fr;} }

/* collections — grows by adding cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--gap);}
.card{background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);
      padding:20px 22px;display:flex;flex-direction:column;gap:8px;}
.card h3{font-family:var(--serif);font-size:20px;font-weight:600;}
.card p{font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--muted);flex:1;}
.card .count{font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;
             text-transform:uppercase;color:var(--gold);font-weight:700;}
.card:hover{border-color:var(--gold);}
.card.soon{border-style:dashed;opacity:.72;}
.card.soon .count{color:var(--muted);}

/* recently added — auto-populating feed, type-badged */
.feed{list-style:none;border-top:1px solid var(--line);}
.feed li{border-bottom:1px solid var(--line);}
.feed a{display:flex;gap:16px;align-items:baseline;padding:15px 4px;flex-wrap:wrap;color:var(--ink);}
.feed a:hover{background:var(--card);color:var(--gold-dk);}
.badge{font-family:var(--sans);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
       font-weight:700;color:var(--gold-dk);background:var(--band);border-radius:5px;
       padding:4px 9px;white-space:nowrap;}
.feed .title{font-family:var(--sans);font-size:16.5px;line-height:1.5;flex:1;min-width:200px;}
.feed .date{font-family:var(--sans);font-size:13.5px;color:var(--muted);white-space:nowrap;}

/* archive feature — a captioned photograph IS content */
.feature{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(22px,4vw,46px);align-items:center;}
.feature figure{border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden;background:var(--card);}
.feature figcaption{font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--muted);
                    padding:13px 16px;border-top:1px solid var(--line);}
.feature figcaption .cite{display:block;margin-top:5px;font-size:12.5px;color:#8d8474;}
@media (max-width:880px){ .feature{grid-template-columns:1fr;} }

/* support — dignified, no rescue framing */
.support{background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);
         padding:clamp(24px,4vw,40px);}
.designations{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
              gap:var(--gap);margin-top:26px;}
.designation h3{font-family:var(--serif);font-size:19px;color:var(--gold-dk);font-weight:600;}
.designation p{font-family:var(--sans);font-size:15.5px;line-height:1.65;color:var(--muted);margin-top:7px;}

.btn{font-family:var(--sans);font-size:15.5px;font-weight:600;padding:13px 22px;
     border-radius:9px;border:1px solid var(--muted);color:var(--ink);display:inline-block;
     cursor:pointer;background:transparent;}
.btn:hover{border-color:var(--gold);color:var(--gold-dk);}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#fff;}
.btn.primary:hover{background:var(--gold-dk);border-color:var(--gold-dk);color:#fff;}

/* newsletter — the open loop that survives past the last pixel */
.signup{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.signup input{font-family:var(--sans);font-size:16px;padding:13px 15px;flex:1;min-width:220px;
              border:1px solid var(--line2);border-radius:9px;background:var(--card);color:var(--ink);}
.signup input:focus{border-color:var(--gold);}

/* footer — browse axes live here from day one so taxonomy is never retrofitted */
footer.site{background:var(--card);border-top:1px solid var(--line2);margin-top:var(--section);
            font-family:var(--sans);}
footer.site .shell{padding-top:44px;padding-bottom:52px;}
.footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--gap);}
footer.site h4{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
               color:var(--muted);margin-bottom:11px;}
footer.site ul{list-style:none;}
footer.site li{margin-bottom:8px;}
footer.site a{font-size:15px;color:var(--ink);}
footer.site a:hover{color:var(--gold-dk);}
.legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
       font-size:13px;line-height:1.7;color:#8d8474;max-width:70ch;}

/* ============================================================================
   BUILDING-FIRST HERO — Sep 24, 2026 (index-building-260924.html)
   Additive only: nothing above is changed, so the Aug 9 page still renders.
   One image, the headline, one line, three doors.
   ========================================================================== */
.hero-building{padding-bottom:var(--section);}
.hb-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);
         align-items:center;margin-bottom:clamp(30px,5vw,52px);}
.hb-line{font-family:var(--sans);font-size:clamp(18px,2.2vw,21px);line-height:1.6;
         color:var(--ink);max-width:40ch;margin-top:22px;}

/* then/now: one panel today; the licensed 1930s photo becomes a second panel
   and the grid sets them side by side with no CSS change. */
.thennow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;}
.tn{background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden;}
.tn img{width:100%;height:auto;display:block;}
.tn figcaption{font-family:var(--sans);font-size:14px;color:var(--muted);padding:10px 14px 12px;}
.tn-lbl{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;
        color:var(--gold);margin-right:8px;}

/* the link rail laid out as a row under the hero */
.band-slim{padding:clamp(26px,4vh,40px) 0;}
.rail.row{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;}
.rail.row .rail-lbl{grid-column:1 / -1;margin:0;}

/* Their Story opens with the paragraphs that used to sit in the hero */
.storyopen .deck{max-width:var(--measure);margin-top:0;}
.storyopen .deck + .deck{margin-top:16px;}
.storyopen .turn{margin:26px 0 18px;}

/* the video, now on the support band */
.support-video{max-width:760px;margin-bottom:calc(var(--gap) + 8px);}

@media (max-width:900px){
  .hb-grid{grid-template-columns:1fr;}
  .hb-line{max-width:none;}
}
/* on a phone the three doors become short, thumb-sized cards */
@media (max-width:880px){
  .hero-building .door img{aspect-ratio:16/9;}
}
.rail.row .rail-btn{margin:0;}
.tn img{max-height:min(540px,62vh);object-fit:cover;object-position:center 30%;}
@media (max-width:880px){ .hero-building .door img{object-position:center 18%;} }
.storyopen .deck{font-size:var(--body-size);line-height:1.8;}

/* ============================================================================
   INNER PAGES — Sep 24, 2026 (collections, archive, film, books, about)
   ========================================================================== */
.pagehead{padding:clamp(34px,6vh,64px) 0 clamp(26px,4vh,40px);}
.crumb{font-family:var(--sans);font-size:14px;color:var(--muted);margin-bottom:14px;}
.crumb a{color:var(--muted);}
h1.pagetitle{font-family:var(--serif);font-size:clamp(32px,5vw,52px);font-weight:600;line-height:1.1;margin-top:10px;}
.prose{max-width:calc(var(--measure) + 44px);}
.prose p,.prose li{font-family:var(--sans);font-size:var(--body-size);line-height:1.8;color:var(--ink);}
.prose p + p{margin-top:16px;}
.prose h2.sec{margin:38px 0 14px;}
.prose h2.sec:first-child{margin-top:0;}
.prose ul.plain{list-style:disc;padding-left:1.2em;margin-top:8px;}
.prose ul.plain li + li{margin-top:8px;}
.prose .sources{font-size:15px;color:var(--muted);margin-top:30px;border-top:1px solid var(--line);padding-top:14px;}
.prose .soonnote{font-size:16px;color:var(--muted);font-style:italic;margin-top:26px;
  border:1px dashed var(--line2);border-radius:var(--radius);padding:14px 18px;}
.prosefig{margin:6px 0 26px;max-width:560px;}
.timeline{list-style:none;padding:0;border-left:2px solid var(--line2);}
.timeline li{padding:6px 0 6px 18px;position:relative;}
.timeline li::before{content:"";position:absolute;left:-6px;top:17px;width:10px;height:10px;border-radius:50%;background:var(--gold);}
.timeline .yr{font-family:var(--serif);font-weight:600;color:var(--gold-dk);display:inline-block;min-width:4.2em;}
.prose ul.az{columns:2;column-gap:40px;}
@media (max-width:640px){ .prose ul.az{columns:1;} }
a.card.soon:hover{border-color:var(--gold);}

/* Curly & Annie portrait: keep their heads in frame (Garry, Sep 24) */
.door img[src*="curly-annie"]{object-position:center top;}
@media (max-width:880px){ .hero-building .door img[src*="curly-annie"]{object-position:center top;} }

/* Help Save the Building — louder, still inside the one-gold palette (Garry, Sep 24) */
.rail-btn.give{background:linear-gradient(135deg,#c08a1e 0%,#8f6410 100%);border-color:#8f6410;
  box-shadow:0 4px 14px rgba(143,100,16,.35);}
.rail-btn.give strong{font-size:17px;letter-spacing:.01em;}
.rail-btn.give .ico{font-size:20px;}
.rail-btn.give:hover{background:linear-gradient(135deg,#a8770f 0%,#6e4c09 100%);box-shadow:0 6px 18px rgba(110,76,9,.45);}
.donate{margin-top:28px;max-width:520px;}

/* ============================================================================
   FILM VIEWER — Sep 24, 2026. Videos play in a window ON the site; closing it
   returns the visitor exactly where they were (Garry: "we don't want to lose the person").
   ========================================================================== */
.filmveil{position:fixed;inset:0;background:rgba(20,16,8,.94);display:none;
  align-items:center;justify-content:center;z-index:1000;padding:4vw;}
.filmveil.show{display:flex;}
.filmbox{position:relative;width:min(1100px,100%);}
.filmframe{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden;}
.filmframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.filmclose{position:absolute;top:-52px;right:0;font-family:var(--sans);font-size:16px;font-weight:600;
  background:var(--card);color:var(--ink);border:1px solid var(--line2);border-radius:999px;padding:9px 18px;cursor:pointer;}
.filmclose:hover{border-color:var(--gold);color:var(--gold-dk);}
.filmnote{font-family:var(--sans);color:#e9e2cf;font-size:14px;margin-top:10px;text-align:center;}
/* the film button carries a long YouTube title — give it two columns on wide screens */
@media (min-width:1100px){
  .rail.row{grid-template-columns:repeat(6,1fr);}
  .rail.row .rail-btn[data-yt]{grid-column:span 2;}
}

/* ============================================================================
   WATCH & EXPLORE v3 — Sep 24, 2026 (phone-first: videos + give on top)
   Row 1: the film + Help Save the Building. Row 2: five slots.
   Every video button shows the YouTube logo (Garry: "always show the YouTube logo").
   ========================================================================== */
.rail.row2{margin:0;}
.rail-top{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.rail-more{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.rail.row2 .rail-btn{margin:0;}
.rail-top .rail-btn{padding:18px 20px;}
.rail-top .rail-btn strong{font-size:17px;}
.ytlogo{width:34px;height:auto;flex:0 0 auto;display:block;}
.rail-top .ytlogo{width:44px;}
.rail-btn.soon{border-style:dashed;}
@media (max-width:1000px){ .rail-more{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){
  .rail-top,.rail-more{grid-template-columns:1fr;}
}
.prose .donate{margin:0 0 6px;max-width:520px;}

/* ============================================================================
   LANDING — YouTube-first (Sep 24, 2026)
   Phone: photo → film → give → other videos → "Explore the full site".
   Desktop: photo left, the same stack right.
   ========================================================================== */
.landing{padding:clamp(18px,3vh,40px) 0 clamp(30px,5vh,56px);}
.land-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.5vw,48px);align-items:center;}
.land-actions .eyebrow{margin-bottom:14px;}
.rail-top.land{grid-template-columns:1fr;gap:12px;margin-bottom:12px;}
.rail-top.land .rail-btn{margin:0;}
.rail-more.land{grid-template-columns:1fr 1fr;gap:12px;}
.rail-more.land .rail-btn{margin:0;}
.explore-btn{display:block;text-align:center;margin-top:16px;padding:14px 18px;font-family:var(--sans);
  font-size:16px;font-weight:600;color:var(--gold-dk);border:1px solid var(--line2);border-radius:var(--radius);background:var(--card);}
.explore-btn:hover{border-color:var(--gold);}
.hb-grid.solo{grid-template-columns:1fr;}
.hero-building{border-top:1px solid var(--line);}
.rail.explore-links{margin:18px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.rail.explore-links .rail-btn{margin:0;}
@media (max-width:900px){
  .land-grid{grid-template-columns:1fr;gap:16px;}
  .landing .tn img{max-height:46vh;}
}
@media (max-width:640px){
  .rail-more.land{grid-template-columns:1fr;}
  .rail.explore-links{grid-template-columns:1fr;}
  .landing .tn figcaption{padding:8px 12px;}
}
@media (max-width:640px){ .landing .tn img{max-height:34vh;} .landing{padding-top:12px;} }

/* photo placeholder while AHS permission is pending (Sep 24, 2026) */
.photo-pending{aspect-ratio:4/3;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:repeating-linear-gradient(45deg,#efe6cf 0 12px,#f4ecd8 12px 24px);border-bottom:1px solid var(--line2);
  text-align:center;padding:16px;font-family:var(--sans);}
.pp-t{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--gold-dk);}
.pp-s{font-size:14px;color:var(--muted);}
.feature .photo-pending{border:1px solid var(--line2);border-radius:var(--radius);}

/* Our Efforts page (Sep 26, 2026) */
details.fullnom{margin-top:30px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--card);padding:14px 20px;}
details.fullnom summary{cursor:pointer;font-family:var(--sans);font-weight:600;color:var(--gold-dk);font-size:17px;}
details.fullnom h3.q{font-family:var(--serif);font-size:21px;color:var(--gold-dk);margin:24px 0 8px;}
.prose ol.plain{padding-left:1.4em;margin-top:6px;}
.prose ol.plain li+li{margin-top:6px;}
.signup-box{border:1px solid var(--line2);border-radius:var(--radius);background:var(--card);padding:16px 20px;margin-bottom:8px;}