/* =====================================================================
   mobile.css — Mobile (≤768px) overrides + refinements for the YIT site.
   Loaded AFTER styles.css. Wireframe-inspired (Sacred Spark): warm palette
   preserved, Noto Serif headlines, Syne-Mono technical labels, double
   rules, faint watermarks, card surfaces. Desktop is untouched.
   ===================================================================== */

/* ------------------- Universal additive primitives -------------------
   These bits are wireframe details we want everywhere (not only mobile),
   so they live outside the @media block. They are additive class hooks
   pages opt into — they never change desktop layout for existing markup.
*/

/* Faint giant watermark behind the footer, on every page.
   Pure CSS — uses a pseudo-element so we don't need to edit each footer's
   HTML. Subtle on desktop, more pronounced on mobile (see media query). */
.site-footer{position:relative;overflow:hidden}
.site-footer::before{
  content:"YIT";
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  font-family:'Noto Serif','Playfair Display', Georgia, serif;
  font-weight:700;letter-spacing:.02em;
  font-size:clamp(5rem, 18vw, 11rem);
  text-align:center;color:var(--accent-fire);
  opacity:.06;pointer-events:none;line-height:.9;z-index:0;
  white-space:nowrap;
}
.site-footer .container{position:relative;z-index:1}

/* Sanskrit footer motto — added via pseudo-element under the copyright line.
   Lives on the .footer-inner so it sits naturally with existing layout. */
.footer-inner::after{
  content:"सत्यात् नास्ति परो धर्मः · There is no religion higher than truth";
  display:block;width:100%;text-align:center;
  font-family:'Noto Sans Devanagari', 'Inter', system-ui, sans-serif;
  color:var(--accent-cool);opacity:.62;
  font-size:.78rem;letter-spacing:.4px;margin-top:.6rem;line-height:1.4;
}

/* "Technical label" — Syne Mono small caps, used for eyebrows / metadata
   in the wireframes. Available everywhere; we apply it on mobile only via
   the @media block below. */
.tech-label{
  font-family:'Syne Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-cool);opacity:.78;
}

/* =====================================================================
   MOBILE BREAKPOINT — everything below applies only at ≤ 768px.
   ===================================================================== */
@media (max-width:768px){

  /* --------------------- Container & rhythm --------------------- */
  .container{padding-left:20px;padding-right:20px}
  .container{
    padding-left:calc(20px + env(safe-area-inset-left,0px));
    padding-right:calc(20px + env(safe-area-inset-right,0px));
  }

  /* Kill the paper-grain noise overlay entirely on mobile. On iOS
     Safari the body::before's mix-blend-mode:multiply interacts with
     the hero carousel images in a way that visibly desaturates them,
     making the slides look faded. The texture is barely visible on a
     small screen anyway. */
  body::before{display:none}

  /* --------------------- Page-head primitive ---------------------
     Double rule (2px + 1px gold) above the H1, generous lede.
     Pages opt in by wrapping their hero in <header class="page-head">.
     Several pages already have this wrapper. */
  .page-head{position:relative;padding-top:1.4rem;margin-bottom:2rem}
  .page-head::before{
    content:"";display:block;height:2px;background:var(--accent-gold);
    margin-bottom:6px;opacity:.95;
  }
  .page-head::after{
    content:"";display:block;height:1px;background:var(--accent-gold);
    margin-bottom:1.4rem;opacity:.55;
  }
  .page-head .eyebrow-tag{
    font-family:'Syne Mono', 'JetBrains Mono', ui-monospace, monospace;
    font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--accent-fire);margin:0 0 .6rem;font-weight:400;
  }
  .page-head h1{
    font-family:'Noto Serif', 'Playfair Display', serif;font-weight:700;
    font-size:clamp(1.9rem, 8vw, 2.3rem);line-height:1.12;
    color:var(--accent-cool);margin:0 0 .8rem;letter-spacing:-.01em;
  }
  .page-head .page-lede{
    font-size:1rem;color:var(--text);line-height:1.65;margin:0 0 .6rem;
    max-width:620px;
  }

  /* For pages whose H1 isn't inside .page-head (about, contact, events,
     gallery, magazine), give them the same treatment via a top rule. */
  main.content > h1:first-child,
  main.magazine-landing > h1:first-child{
    position:relative;padding-top:1.4rem;letter-spacing:-.01em;
  }
  main.content > h1:first-child::before,
  main.magazine-landing > h1:first-child::before{
    content:"";display:block;height:2px;background:var(--accent-gold);
    margin-bottom:6px;opacity:.9;width:100%;
  }
  main.content > h1:first-child::after,
  main.magazine-landing > h1:first-child::after{
    content:"";display:block;height:1px;background:var(--accent-gold);
    opacity:.55;width:100%;margin-top:8px;margin-bottom:.5rem;
  }

  /* --------------------- Footer mobile refinement --------------------- */
  .site-footer{padding:2.2rem 0 1.4rem;border-top:1px solid rgba(201,168,118,.5)}
  .site-footer::before{font-size:5.2rem;opacity:.05;letter-spacing:.06em}
  .footer-inner{flex-direction:column;align-items:center;text-align:center;gap:.6rem}
  .footer-inner > p{margin:0}
  .footer-inner .links{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
  .footer-inner .links a{color:var(--accent-cool);text-decoration:none;font-weight:600;font-size:.92rem}
  .footer-inner::after{margin-top:.8rem;font-size:.74rem}
  .footer-quote-wrap{padding:0 1rem;text-align:center;margin-bottom:.8rem}
  .footer-quote{font-size:.92rem !important}

  /* --------------------- Section divider ornament ---------------------
     Centered horizontal rules with a ◯ ornament between — use anywhere
     by adding <div class="rule-ornament" aria-hidden="true"></div>. */
  .rule-ornament{
    display:flex;align-items:center;justify-content:center;gap:1rem;
    margin:2.2rem auto;max-width:340px;
  }
  .rule-ornament::before,
  .rule-ornament::after{
    content:"";flex:1;height:1px;background:var(--accent-gold);opacity:.55;
  }
  .rule-ornament::before{margin-right:0}
  .rule-ornament::after{margin-left:0}

  /* --------------------- Motto banner mobile ---------------------
     Allow the motto + translation to wrap cleanly on narrow screens. */
  .motto-banner{padding:.8rem 0}
  .motto-banner .motto-inner{
    font-size:.95rem;line-height:1.5;display:flex;flex-direction:column;
    align-items:center;gap:.15rem;
  }
  .motto-banner .motto-sep{display:none}
  .motto-banner .motto-sanskrit{font-size:1.05rem;margin:0}

  /* --------------------- Header / nav mobile tweaks --------------------- */
  .site-header{position:sticky;top:0;z-index:100;background:#fff}
  .header-inner{padding-top:.55rem;padding-bottom:.55rem}
  .logo{width:36px;height:36px}
  .brand-name .brand-short{font-size:1.15rem;letter-spacing:1.5px;color:var(--accent-fire)}

  /* Reveal helper carries over from desktop CSS */

  /* =====================================================================
     PAGE: HOME — hero carousel + pillars + voices + timeline + CTA strip
     ===================================================================== */
  .page-home .hero-carousel{height:auto;min-height:810px;max-height:none}
  .page-home .slide{flex-direction:column;justify-content:space-between}
  /* Stack motif above text on mobile */
  .page-home .slide-motif{
    position:relative !important;inset:auto !important;
    width:100%;height:auto;padding:1rem !important;padding-bottom: 0 !important;
    justify-content:center !important;
  }
  /* Motif photo / magazine cover — give every image a consistent visual
     weight + warm dark shadow so it reads as an object against the slide
     background. Both motif types use the same width band so the carousel
     doesn't feel inconsistent slide-to-slide; max-height adjusts for the
     two natural aspect ratios (landscape photos / portrait covers). A
     slight saturate filter pushes back against the muted look that
     iOS Safari can give the noise overlay's mix-blend-mode interaction. */
  .page-home .motif-photo{
    max-width:78% !important;max-height:360px !important;
    margin:0 auto;opacity:1 !important;
    border:5px solid #ffffff;border-radius:4px;background:#fff;
    box-shadow:
      0 0 0 1px rgba(60,40,20,.2),
      0 20px 44px rgba(20,12,6,.42);
    filter:saturate(1.08);
  }
  .page-home .motif-cover{
    max-width:76% !important;max-height:400px !important;
    margin:0 auto;opacity:1 !important;
    border-radius:4px;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.18),
      0 24px 52px rgba(0,0,0,.6);
    filter:saturate(1.06);
  }
  .page-home .motif-seal{width:240px}
  /* Slide content bottom padding is generous so the CTA button stays
     clearly above the carousel dot indicators (which sit at bottom:16px
     of the carousel). Without this gap the Register Now / Read Turiya
     buttons visually collide with the dot row on small phones. */
  .page-home .slide-content{
    position:relative;z-index:3;padding:.5rem 1.2rem 3.5rem;
    text-align:center;max-width:100%;width:100%;
  }
  .page-home .slide[data-bg="fire"] .slide-content{ padding-bottom:5.5rem; }
  .page-home .slide-content h2{font-size:1.85rem;line-height:1.15;margin-bottom:.6rem}
  .page-home .slide-content .eyebrow{
    font-size:.66rem;padding:.32rem .8rem;letter-spacing:1.8px;margin-bottom:.8rem;
  }
  .page-home .slide-content .subhead{font-size:.98rem;margin-bottom:.55rem}
  .page-home .slide-content .body{font-size:.88rem;margin-bottom:1.1rem}
  .page-home .slide-content .cta{padding:.65rem 1.2rem;font-size:.9rem}
  /* Re-position dots above the safe area */
  .page-home .dots{bottom:20px;gap:9px}
  .page-home .dot{width:9px;height:9px}
  .page-home .dot.active{width:28px}
  /* Slide 2 (calm/Turiya) text needs to be readable on dark teal */
  .page-home .slide[data-bg="calm"] .slide-content,
  .page-home .slide[data-bg="ember"] .slide-content,
  .page-home .slide[data-bg="fire"] .slide-content,
  .page-home .slide[data-bg="sacred"] .slide-content{color:#fff}

  /* Atmosphere boosters for the lighter slides — subtle radial overlay
     pulls focus into the motif and gives depth to otherwise flat bg.
     The "rooted" slide had a flat cream background; here we add a
     glow + soft vignette so it doesn't read as washed out. */
  .page-home .slide[data-bg="rooted"] .slide-bg{
    background:
      radial-gradient(ellipse at 50% 20%, rgba(201,168,118,.22) 0%, transparent 55%),
      radial-gradient(ellipse at 50% 100%, rgba(216,64,32,.05) 0%, transparent 60%),
      #FAFAF8;
  }
  /* The "warm" slide gradient is already present; deepen it a bit so
     the cream/rust transition reads on a small screen. */
  .page-home .slide[data-bg="warm"] .slide-bg{
    background:linear-gradient(135deg, #C9A876 0%, #f0d9b8 50%, #FAFAF8 100%);
  }
  /* The "calm" slide (Turiya 2025 cover) — keep dark teal but enrich
     with a subtle radial highlight behind the cover. */
  .page-home .slide[data-bg="calm"] .slide-bg{
    background:
      radial-gradient(ellipse at 50% 30%, rgba(201,168,118,.18) 0%, transparent 50%),
      linear-gradient(135deg, #2A4A5E 0%, #1A3140 100%);
  }
  /* The "ember" slide (Burn Bright). The desktop gradient peaks at 50%
     100% in bright peach/red; on a wider/shorter desktop slide the bright
     zone is small, on tall stacked mobile it dominates and reads too red.
     Push the radial centre below the slide and tighten the ellipse so
     only the darker rings are visible — the slide reads as a warm dark
     ember glow rather than a field of bright red. */
  .page-home .slide[data-bg="ember"] .slide-bg{
    background:radial-gradient(
      ellipse 90% 60% at 50% 118%,
      #c4502a 0%,
      #6e2814 30%,
      #2A1810 65%,
      #1A0A06 100%
    );
  }
  /* Strips between sections */
  .page-home .strip{height:3px}

  /* Philosophy intro */
  .page-home #philosophy{padding-top:1.6rem;padding-bottom:1.2rem}
  .page-home #philosophy h3{font-size:1.4rem;color:var(--accent-cool)}

  /* Featured Voice rotator */
  .page-home .featured-voice{padding:2rem 0}
  .page-home .voice-eyebrow{
    font-family:'Syne Mono', 'JetBrains Mono', monospace;
    font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  }
  .page-home .voice-quote{font-size:1.1rem;line-height:1.5;padding:0 .5rem}
  .page-home .voice-attr{font-size:.8rem}

  /* Three Pillars — wireframe-style cards (ws-card style), stacked */
  .page-home .pillars-grid{
    display:flex;flex-direction:column;gap:1rem;margin-top:1.4rem;
  }
  .page-home .pillar{
    background:#fff;border:1px solid rgba(201,168,118,.45);
    padding:1.4rem 1.2rem;border-top:3px solid var(--accent-fire);
    border-radius:4px;
  }
  .page-home .pillar h4{
    font-family:'Noto Serif','Playfair Display',serif;font-size:1.4rem;
    color:var(--accent-cool);margin:.5rem 0 .15rem;
  }
  .page-home .pillar-sanskrit{font-size:.78rem;letter-spacing:.5px}
  .page-home .pillar p{font-size:.95rem;line-height:1.55;margin-top:.4rem}
  .page-home .pillar-icon{width:38px;height:38px}
  .page-home .section-heading{
    font-family:'Noto Serif','Playfair Display',serif;color:var(--accent-cool);
    font-size:1.6rem;margin:0 0 .25rem;
  }
  .page-home .pillars-intro{font-size:.95rem;color:var(--muted);margin:0 0 1rem}

  /* Timeline — stack as cards */
  .page-home .timeline-section{padding:2rem 0 1rem}
  .page-home .timeline-section h3{font-size:1.6rem;color:var(--accent-cool)}
  .page-home .section-eyebrow{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--accent-fire);
  }
  .page-home .timeline{overflow:visible;padding:.4rem 0}
  .page-home .timeline-track{
    display:flex;flex-direction:column;gap:.9rem;
    min-width:0;padding:0;
  }
  .page-home .timeline-track::before{display:none}
  .page-home .timeline-item{
    width:auto;flex-shrink:1;text-align:left;padding:.9rem 1rem;
    background:#fff;border:1px solid rgba(201,168,118,.4);
    border-left:3px solid var(--accent-gold);
    display:grid;grid-template-columns:auto 1fr;
    gap:.4rem 1rem;align-items:baseline;
  }
  .page-home .timeline-item.major{border-left-color:var(--accent-fire)}
  .page-home .timeline-year{
    font-family:'Noto Serif','Playfair Display',serif;font-weight:700;font-size:1.4rem;
    color:var(--accent-fire);margin:0;grid-row:span 2;
  }
  .page-home .timeline-dot{display:none}
  .page-home .timeline-title{font-weight:700;color:var(--accent-cool);margin:0}
  .page-home .timeline-desc{font-size:.88rem;line-height:1.5;color:var(--text);margin:0;grid-column:2}

  /* Bottom CTA strip */
  .page-home .cta-strip{padding:2.4rem 1.2rem;text-align:center}
  .page-home .cta-strip h3{font-size:1.6rem;line-height:1.2;margin:0 0 .6rem}
  .page-home .cta-strip p{font-size:.95rem}
  .page-home .cta-strip .cta{display:block;margin:.5rem auto;max-width:260px}

  /* =====================================================================
     PAGE: ABOUT — Spirit of YIT, Three Objects, Invocation, Kashi
     ===================================================================== */
  .page-about main h1{font-size:1.9rem !important}
  .page-about h3{
    font-family:'Noto Serif','Playfair Display',serif;color:var(--accent-cool);
    font-size:1.4rem;margin-top:2.2rem;
    border-bottom:1px solid rgba(201,168,118,.4);padding-bottom:.4rem;
  }
  /* Three Objects — card list with terracotta numerals */
  .page-about .objects{
    list-style:none;padding:0;margin:1.2rem 0;
    display:flex;flex-direction:column;gap:.9rem;
    counter-reset:obj;
  }
  .page-about .objects li{
    background:#fff;border:1px solid rgba(201,168,118,.45);
    border-left:4px solid var(--accent-fire);
    padding:1rem 1rem 1rem 3.4rem;position:relative;font-size:.94rem;
    line-height:1.55;border-radius:4px;
    counter-increment:obj;
  }
  .page-about .objects li::before{
    content:counter(obj, upper-roman);
    position:absolute;left:.85rem;top:.95rem;
    font-family:'Syne Mono','JetBrains Mono',monospace;
    color:var(--accent-fire);font-weight:700;font-size:.95rem;
    letter-spacing:.06em;
  }
  /* Invocation — pull-quote treatment with double rules */
  .page-about .invocation{
    background:#fff;border:1px solid rgba(201,168,118,.5);
    padding:2rem 1.4rem;margin:2rem 0;text-align:center;position:relative;
  }
  .page-about .invocation::before,
  .page-about .invocation::after{
    content:"";display:block;width:60px;height:1px;
    background:var(--accent-gold);margin:0 auto;
  }
  .page-about .invocation::before{margin-bottom:1.2rem}
  .page-about .invocation::after{margin-top:1.2rem}
  .page-about .invocation p{
    font-family:'Noto Serif','Playfair Display',serif;font-style:italic;
    font-size:1.05rem;line-height:1.6;color:var(--accent-cool);
    margin:0;
  }
  .page-about .invocation .source{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent-fire);display:block;margin-top:1rem;font-style:normal;
  }
  /* Kashi imagery — 1-col grid, framed */
  .page-about .about-imagery{
    display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem;
  }
  .page-about .about-imagery figure{margin:0;background:#fff;border:1px solid rgba(201,168,118,.45)}
  .page-about .about-imagery img{
    width:100%;height:220px;object-fit:cover;display:block;
  }
  .page-about .about-imagery figcaption{
    padding:.6rem .9rem;font-size:.82rem;color:var(--accent-cool);
    border-top:1px solid rgba(201,168,118,.35);
    font-family:'Syne Mono','JetBrains Mono',monospace;letter-spacing:.06em;
  }
  /* =====================================================================
     PAGE: THEOSOPHY — long-form essay with refined typography
     ===================================================================== */
  .page-theosophy .prose-essay{margin-top:1.2rem}
  .page-theosophy .essay-meta{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent-fire);margin:0 0 .5rem;
  }
  .page-theosophy .essay-title{
    font-family:'Noto Serif','Playfair Display',serif;font-size:1.7rem;line-height:1.2;
    color:var(--accent-cool);margin:0 0 1.1rem;font-weight:700;
  }
  .page-theosophy .prose-essay p{font-size:1rem;line-height:1.72;margin:0 0 1.1rem}
  .page-theosophy .prose-essay h3{
    font-family:'Noto Serif','Playfair Display',serif;font-size:1.25rem;
    color:var(--accent-fire);margin:1.6rem 0 .7rem;
    border-bottom:1px solid rgba(201,168,118,.4);padding-bottom:.3rem;
  }
  .page-theosophy .theos-list{padding-left:1.2rem;margin:1rem 0 1.4rem}
  .page-theosophy .theos-list li{margin-bottom:.9rem;font-size:.95rem;line-height:1.65}
  .page-theosophy .essay-signoff{
    font-family:'Syne Mono','JetBrains Mono',monospace;font-size:.78rem;
    letter-spacing:.16em;text-transform:uppercase;color:var(--accent-cool);
    margin-top:1.6rem;text-align:right;
  }
  .page-theosophy .margin-coda{
    background:#fff;border:1px solid rgba(201,168,118,.4);
    padding:1rem 1.2rem;font-size:.92rem;color:var(--muted);
    border-left:3px solid var(--accent-gold);margin-top:1.6rem;
  }

  /* =====================================================================
     PAGE: CONTACT — blueprint card form
     ===================================================================== */
  .page-contact main h1{font-size:1.9rem !important;text-align:center}
  .page-contact main > p:first-of-type{text-align:center;font-style:italic}
  .page-contact h3{
    font-family:'Noto Serif','Playfair Display',serif;color:var(--accent-fire);
    font-size:1.25rem;margin-top:1.6rem;
  }
  .page-contact .contact-form{
    background:#fff;border:1px solid rgba(201,168,118,.45);
    padding:1.4rem 1.2rem;border-top:3px solid var(--accent-fire);
    border-radius:4px;margin-top:1rem;
  }
  .page-contact .contact-form label{
    display:flex;flex-direction:column;
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent-cool);margin-bottom:1rem;gap:.4rem;
  }
  .page-contact .contact-form input,
  .page-contact .contact-form textarea{
    border:0;border-bottom:1px solid var(--accent-cool);
    background:transparent;padding:.5rem .2rem;font-family:'Inter',system-ui,sans-serif;
    font-size:1rem;color:var(--text);text-transform:none;letter-spacing:0;
    border-radius:0;outline:none;
  }
  .page-contact .contact-form input:focus,
  .page-contact .contact-form textarea:focus{
    border-bottom-color:var(--accent-fire);
  }
  .page-contact .contact-form textarea{min-height:140px;resize:vertical}
  .page-contact .contact-form .button{
    background:var(--accent-fire);color:#fff;border:0;padding:.8rem 1.6rem;
    font-family:'Syne Mono','JetBrains Mono',monospace;font-size:.78rem;
    letter-spacing:.18em;text-transform:uppercase;cursor:pointer;border-radius:2px;
  }
  .page-contact .contact-form .button:hover{background:#b22f15}
  /* "Direct inquiry" surfaced via the email link block above the form */
  .page-contact main > p:nth-of-type(2){
    background:#fff;border:1px solid rgba(201,168,118,.45);
    padding:.9rem 1.1rem;border-radius:4px;margin:0 0 1rem;
  }

  /* =====================================================================
     PAGE: EVENTS — gathering card mobile reflow
     ===================================================================== */
  .page-events main h1{font-size:1.9rem !important}
  .page-events .gathering{
    display:flex;flex-direction:column;background:#fff;
    border:1px solid rgba(201,168,118,.45);
    border-top:3px solid var(--accent-fire);
    margin:1.4rem 0;border-radius:4px;overflow:hidden;
  }
  .page-events .gathering.past{border-top-color:var(--accent-cool)}
  .page-events .gathering-visual{
    width:100%;aspect-ratio:4/5;max-height:380px;background:#fff;
  }
  .page-events .gathering-visual img,
  .page-events .gathering-visual svg{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .page-events .gathering-body{padding:1.2rem 1.1rem 1.4rem}
  .page-events .gathering-tag{
    display:inline-block;
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--accent-fire);background:rgba(216,64,32,.08);
    padding:.3rem .6rem;border-radius:2px;margin-bottom:.6rem;
  }
  .page-events .gathering.past .gathering-tag{
    color:var(--accent-cool);background:rgba(42,74,94,.08);
  }
  .page-events .gathering h2{
    font-family:'Noto Serif','Playfair Display',serif;font-size:1.5rem;color:var(--accent-cool);
    margin:0 0 .25rem;line-height:1.18;
  }
  .page-events .gathering .when{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.78rem;letter-spacing:.1em;color:var(--accent-fire);
    margin:0 0 .8rem;
  }
  .page-events .gathering p{font-size:.95rem;line-height:1.6}
  .page-events .gathering-meta{
    display:grid;grid-template-columns:1fr;gap:.4rem;
    border-top:1px dashed rgba(201,168,118,.5);
    border-bottom:1px dashed rgba(201,168,118,.5);
    padding:.8rem 0;margin:1rem 0;
  }
  .page-events .gathering-meta div{font-size:.85rem;display:flex;gap:.6rem;align-items:baseline}
  .page-events .gathering-meta strong{
    font-family:'Syne Mono','JetBrains Mono',monospace;font-size:.7rem;
    letter-spacing:.16em;text-transform:uppercase;color:var(--accent-cool);
    min-width:78px;font-weight:400;
  }
  .page-events .gathering-cta{margin:1rem 0 0;text-align:center}
  .page-events .gathering-cta .cta{display:block;margin:.4rem 0;background:var(--accent-fire);color:#fff}
  .page-events h3{font-family:'Noto Serif','Playfair Display',serif;color:var(--accent-cool);font-size:1.4rem !important;margin-top:2.4rem !important}

  /* =====================================================================
     PAGE: MAGAZINE HUB — two cover cards stacked
     ===================================================================== */
  .page-magazine .magazine-cards{
    display:flex;flex-direction:column;gap:1.4rem;margin-top:1.6rem;
  }
  .page-magazine .magazine-card{
    background:#fff;border:1px solid rgba(201,168,118,.45);
    border-radius:4px;overflow:hidden;text-decoration:none;display:block;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .page-magazine .magazine-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(60,40,20,.18)}
  .page-magazine .cover-wrap{
    aspect-ratio:3/4;position:relative;background:#fff;
    display:flex;align-items:center;justify-content:center;padding:1.6rem;
  }
  .page-magazine .cover-wrap img{
    max-width:80%;max-height:100%;width:auto;height:auto;
    box-shadow:0 12px 40px rgba(60,40,20,.18);
  }
  /* 2026 'Burn Bright' cover keeps its cinematic dark treatment */
  .page-magazine .cover-wrap-2026{background:linear-gradient(135deg,#1A1A1A 0%,#3D2418 100%)}
  .page-magazine .magazine-card .meta{
    padding:1rem 1.1rem 1.2rem;text-align:center;
  }
  .page-magazine .magazine-card .year{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--accent-cool);margin-bottom:.35rem;
  }
  .page-magazine .magazine-card .theme{
    font-family:'Noto Serif','Playfair Display',serif;font-size:1.4rem;color:var(--accent-fire);
    font-weight:700;
  }

  /* =====================================================================
     PAGE: MAGAZINE 2025 — flipbook reader on mobile
     ===================================================================== */
  /* Container loses its inner padding so the flipbook can use the full
     viewport. Rail compresses to a slim header above the reader. */
  .page-mag-2025 .magazine-page{
    display:flex;flex-direction:column;gap:1rem;
    padding:1rem 12px 1.6rem;
  }
  .page-mag-2025 .magazine-rail{
    width:100%;background:#fff;border:1px solid rgba(201,168,118,.5);
    border-top:3px solid var(--accent-fire);padding:1rem;
    border-radius:6px;text-align:center;
  }
  .page-mag-2025 .rail-cover{
    max-width:130px;margin:0 auto .6rem;
  }
  .page-mag-2025 .rail-cover img{
    width:100%;height:auto;box-shadow:0 8px 22px rgba(0,0,0,.22);border-radius:3px;
  }
  .page-mag-2025 .rail-year{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--accent-cool);margin:0;
  }
  .page-mag-2025 .magazine-rail h1{
    font-family:'Noto Serif','Playfair Display',serif;font-size:1.4rem;
    color:var(--accent-fire);margin:.2rem 0 .5rem;line-height:1.15;
  }
  .page-mag-2025 .rail-blurb{
    font-size:.85rem;line-height:1.5;text-align:center;
    margin:.4rem 0;color:var(--text);
  }

  /* DPR-boost trick: StPageFlip uses offsetWidth (not transformed rect)
     to size its internal canvases. So if we make .flipbook-zoom-target
     2x wider than its visual footprint and CSS-scale it back down by 0.5,
     the canvas renders at 2x the displayed pixel density — closing most
     of the gap between CSS pixels and device pixels on a 2x/3x DPR phone.
     Net visual size matches the column; text is sharp.
     The .flipbook-stage gets a padding-bottom equal to the (post-scale)
     aspect ratio so it reserves the right amount of space and the page
     after it doesn't collapse on top. */
  .page-mag-2025 .flipbook-wrap{padding:0;gap:.6rem}
  .page-mag-2025 .flipbook-stage{
    width:100%;padding:0;max-height:none;background:transparent;
    overflow:hidden;position:relative;
    /* Reserve height for the scaled flipbook (single-page portrait,
       1158:1638 ≈ 141.45% of width) */
    height:0;padding-bottom:141.45%;
  }
  .page-mag-2025 .flipbook-zoom-target{
    position:absolute;top:0;left:0;
    width:200%;max-width:none;
    transform:scale(0.5);transform-origin:top left;
  }
  .page-mag-2025 .flipbook{
    width:100%;height:auto;
    aspect-ratio:1158/1638;
    border-radius:4px;box-shadow:0 8px 22px rgba(0,0,0,.22);
    background:#f4ecdf;
  }
  .page-mag-2025 .flipbook img,
  .page-mag-2025 .flipbook canvas{
    image-rendering:-webkit-optimize-contrast;
  }
  /* Compact controls — keep prev/next, hide the zoom group on mobile.
     With the DPR boost the page is already sharp; users can pinch-zoom
     the viewport for further inspection. */
  .page-mag-2025 .flipbook-controls{
    flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.6rem;
  }
  .page-mag-2025 .flipbook-controls button{
    padding:.55rem 1rem;font-size:.9rem;border-radius:6px;flex:1 1 40%;
    max-width:160px;
  }
  .page-mag-2025 .flipbook-controls .group{display:none}
  .page-mag-2025 .flipbook-status{
    text-align:center;font-size:.78rem;color:var(--muted);
    font-family:'Syne Mono','JetBrains Mono',monospace;letter-spacing:.06em;
    margin-top:.2rem;
  }

  /* =====================================================================
     PAGE: BURN BRIGHT (magazine 2026) — minor mobile polish only
     The page already has its own dark/cinematic mobile styles in styles.css
     so we just tighten margins and quiet a few elements.
     ===================================================================== */
  .page-burn-bright .bb-hero{padding:3rem 1.2rem 4rem}
  .page-burn-bright .bb-hero-title{gap:.4rem}
  .page-burn-bright .bb-burn,
  .page-burn-bright .bb-bright{font-size:clamp(3.4rem, 18vw, 5.2rem) !important}
  .page-burn-bright .bb-manifesto-2{padding:2.4rem 1.2rem}
  .page-burn-bright .bb-manifesto-hook{font-size:clamp(2rem, 10vw, 3rem)}
  .page-burn-bright .bb-flames-grid{grid-template-columns:1fr !important}
  .page-burn-bright .bb-teaser-grid{grid-template-columns:1fr !important;gap:1rem}
  .page-burn-bright .bb-fcta-title{gap:.2rem}

  /* =====================================================================
     PAGE: WORKSHOP — bench tile cards
     ===================================================================== */
  /* Workshop hero — softens the original warm radial (too saturated on a
     small screen) and adds a centered dark vignette so the text always has
     contrast no matter where the radial gradient peaks. Text is cream/gold
     so it reads against the deep brown background. */
  .page-workshop .workshop-hero{
    padding:3rem 1.2rem 2.6rem;text-align:center;min-height:auto;
    position:relative;
    background:
      radial-gradient(ellipse at 50% 65%, rgba(201,168,118,.55) 0%, transparent 55%),
      linear-gradient(180deg, #2a1f12 0%, #1a1208 100%);
  }
  .page-workshop .workshop-hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(0,0,0,.45) 100%);
    z-index:1;
  }
  .page-workshop .workshop-hero-content{position:relative;z-index:2}
  .page-workshop .workshop-eyebrow{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;
    color:#e6c78a;opacity:.92;margin:0 0 .9rem;
  }
  .page-workshop .workshop-wordmark{
    font-family:'Noto Serif','Playfair Display',serif;
    font-size:clamp(2.4rem, 12vw, 3rem) !important;
    font-weight:700;color:#FAFAF8;margin:.2rem 0;line-height:1;
    text-shadow:0 0 22px rgba(201,168,118,.55), 0 2px 6px rgba(0,0,0,.45);
  }
  .page-workshop .workshop-sub{
    font-family:'Noto Serif','Playfair Display',serif;
    font-size:1rem;line-height:1.45;font-style:italic;
    color:#f0d9a5;margin:.9rem auto 0;max-width:320px;
  }
  .page-workshop .workshop-intro{font-size:.95rem;line-height:1.7;padding:1.2rem 0}
  .page-workshop .workshop-grid{
    display:grid;grid-template-columns:1fr;gap:1rem;margin:1rem 0;
  }
  .page-workshop .ws-card{
    background:#fff;border:1px solid rgba(201,168,118,.45);
    border-left:4px solid var(--accent-fire);
    padding:0;text-decoration:none;color:inherit;display:block;
    border-radius:6px;overflow:hidden;position:relative;
    box-shadow:0 1px 2px rgba(60,40,20,.04), 0 4px 10px rgba(60,40,20,.06);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .page-workshop .ws-card:active{transform:scale(.985)}
  .page-workshop .ws-card-2{border-left-color:var(--accent-cool)}
  .page-workshop .ws-card-3{border-left-color:var(--accent-gold)}
  .page-workshop .ws-card-4{border-left-color:#a05a44}
  .page-workshop .ws-card-inner{padding:1.2rem 1.2rem 1.4rem;display:flex;gap:1rem}
  .page-workshop .ws-num{
    font-family:'Noto Serif','Playfair Display',serif;font-size:2.4rem;font-weight:700;
    color:var(--accent-fire);line-height:1;flex-shrink:0;opacity:.85;
  }
  .page-workshop .ws-card-2 .ws-num{color:var(--accent-cool)}
  .page-workshop .ws-card-3 .ws-num{color:var(--accent-gold)}
  .page-workshop .ws-card-4 .ws-num{color:#a05a44}
  .page-workshop .ws-tag{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent-cool);margin:0 0 .35rem;
  }
  .page-workshop .ws-card h2{
    font-family:'Noto Serif','Playfair Display',serif;font-size:1.35rem;
    color:var(--accent-cool);margin:0 0 .5rem;line-height:1.2;
  }
  .page-workshop .ws-card p{font-size:.92rem;line-height:1.55;margin:0 0 .7rem}
  .page-workshop .ws-cue{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent-fire);
  }
  .page-workshop .workshop-coda{
    text-align:center;font-size:.95rem;font-style:italic;color:var(--muted);
    padding:1.4rem 0;
  }

  /* =====================================================================
     PAGE: ATLAS — book cards in 1-col grid; numbered group heads
     ===================================================================== */
  .page-atlas .atlas-group{margin:2rem 0}
  .page-atlas .atlas-group-head{margin-bottom:1rem;position:relative;padding-top:.4rem}
  .page-atlas .atlas-group-head::before{
    content:"";display:block;height:1px;background:var(--accent-gold);
    opacity:.5;margin-bottom:.8rem;
  }
  .page-atlas .group-num{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.78rem;letter-spacing:.18em;color:var(--accent-fire);
    display:inline-block;margin-right:.7rem;
  }
  .page-atlas .atlas-group-head h2{
    font-family:'Noto Serif','Playfair Display',serif;font-size:1.5rem;color:var(--accent-cool);
    margin:.2rem 0 .4rem;display:inline-block;
  }
  .page-atlas .atlas-group-head p{font-size:.9rem;color:var(--muted);line-height:1.55;margin:.3rem 0 0}
  .page-atlas .atlas-grid{
    display:grid;grid-template-columns:1fr;gap:.9rem;
  }
  .page-atlas .atlas-book{
    background:#fff;border:1px solid rgba(201,168,118,.45);
    padding:1rem 1.1rem 1.1rem;border-radius:4px;
    border-top:2px solid rgba(201,168,118,.6);
  }
  .page-atlas .atlas-book.recommended{
    background:linear-gradient(180deg,#fff 0%,#fff5ec 100%);
    border-top-color:var(--accent-fire);border-top-width:3px;
  }
  .page-atlas .book-title{
    font-family:'Noto Serif','Playfair Display',serif;font-size:1.15rem;color:var(--accent-cool);
    margin:0 0 .15rem;line-height:1.25;
  }
  .page-atlas .book-author{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.72rem;letter-spacing:.1em;color:var(--accent-fire);
    margin:0 0 .55rem;text-transform:uppercase;
  }
  .page-atlas .atlas-book p{font-size:.9rem;line-height:1.55;margin:0 0 .6rem}
  .page-atlas .book-meta{
    font-size:.78rem;font-style:italic;color:var(--muted);
    border-top:1px dashed rgba(201,168,118,.5);padding-top:.5rem;margin:.6rem 0 0;
  }
  .page-atlas .atlas-coda{
    text-align:center;font-size:.95rem;color:var(--muted);font-style:italic;
    margin-top:1.6rem;padding:1rem;
    background:#fff;border:1px solid rgba(201,168,118,.4);
    border-left:3px solid var(--accent-gold);
  }
  .page-atlas .breadcrumb{margin:.5rem 0 .8rem}
  .page-atlas .breadcrumb a{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent-cool);text-decoration:none;
  }

  /* =====================================================================
     PAGE: VOICES — essay + forthcoming list
     ===================================================================== */
  .page-voices .breadcrumb{margin:.5rem 0 .8rem}
  .page-voices .breadcrumb a{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent-cool);text-decoration:none;
  }
  .page-voices .prose-essay{
    background:#fff;border:1px solid rgba(201,168,118,.45);
    padding:1.4rem 1.2rem;border-radius:4px;
    border-top:3px solid var(--accent-fire);margin-top:1rem;
  }
  .page-voices .essay-meta{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent-fire);margin:0 0 .5rem;
  }
  .page-voices .essay-title{
    font-family:'Noto Serif','Playfair Display',serif;font-size:1.5rem;color:var(--accent-cool);
    margin:0 0 1rem;line-height:1.18;
  }
  .page-voices .prose-essay p{font-size:.95rem;line-height:1.7;margin:0 0 1rem}
  .page-voices .prose-essay h3{
    font-family:'Noto Serif','Playfair Display',serif;color:var(--accent-fire);
    font-size:1.15rem;margin:1.4rem 0 .6rem;
    border-bottom:1px solid rgba(201,168,118,.4);padding-bottom:.3rem;
  }
  .page-voices .essay-signoff{
    font-family:'Syne Mono','JetBrains Mono',monospace;font-size:.72rem;
    letter-spacing:.16em;text-transform:uppercase;color:var(--accent-cool);
    text-align:right;margin-top:1.4rem;
  }
  .page-voices .upcoming-essays{margin-top:2rem}
  .page-voices .section-eyebrow-h{
    font-family:'Syne Mono','JetBrains Mono',monospace;font-size:.72rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--accent-fire);
    margin:0 0 1rem;
    padding-bottom:.5rem;border-bottom:1px solid rgba(201,168,118,.5);
  }
  .page-voices .forthcoming-list{
    list-style:none;padding:0;margin:0;
    display:grid;grid-template-columns:1fr;gap:.7rem;
  }
  .page-voices .forthcoming-list li{
    background:#fff;border:1px solid rgba(201,168,118,.45);
    padding:.8rem 1rem;font-size:.9rem;line-height:1.45;border-radius:4px;
    display:flex;flex-direction:column;gap:.3rem;
  }
  .page-voices .forthcoming-list .when{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--accent-fire);
  }
  .page-voices .margin-coda{
    background:#fff;border:1px solid rgba(201,168,118,.4);
    padding:1rem 1.2rem;font-size:.9rem;color:var(--muted);
    border-left:3px solid var(--accent-gold);margin-top:1.4rem;font-style:italic;
  }

  /* =====================================================================
     PAGE: ATTENTION — curriculum cards with chip tags
     ===================================================================== */
  .page-attention .breadcrumb{margin:.5rem 0 .8rem}
  .page-attention .breadcrumb a{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent-cool);text-decoration:none;
  }
  .page-attention .attention-list{
    display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:1rem;
  }
  .page-attention .attention-item{
    background:#fff;border:1px solid rgba(201,168,118,.45);
    padding:1rem 1.1rem;border-radius:4px;
    border-top:2px solid rgba(201,168,118,.6);
  }
  .page-attention .att-tag{
    display:inline-block;
    background:rgba(201,168,118,.16);
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent-cool);
    padding:.25rem .55rem;border-radius:2px;margin:0 0 .55rem;
  }
  .page-attention .attention-item h2{
    font-family:'Noto Serif','Playfair Display',serif;font-size:1.15rem;color:var(--accent-cool);
    margin:0 0 .45rem;line-height:1.25;
  }
  .page-attention .attention-item p{font-size:.92rem;line-height:1.6;margin:0}
  .page-attention .margin-coda{
    background:#fff;border:1px solid rgba(201,168,118,.4);
    padding:1rem 1.2rem;font-size:.9rem;color:var(--muted);
    border-left:3px solid var(--accent-gold);margin-top:1.4rem;font-style:italic;
  }

  /* =====================================================================
     PAGE: OLD LAMPS — numbered timeline cards
     ===================================================================== */
  .page-old-lamps .breadcrumb{margin:.5rem 0 .8rem}
  .page-old-lamps .breadcrumb a{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent-cool);text-decoration:none;
  }
  .page-old-lamps .lamps-list{
    display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:1rem;
  }
  .page-old-lamps .lamp-item{
    background:#fff;border:1px solid rgba(201,168,118,.45);
    padding:1rem 1.1rem;border-radius:4px;position:relative;
    border-top:2px solid rgba(201,168,118,.6);
  }
  .page-old-lamps .lamp-item:nth-child(odd){
    border-top-color:var(--accent-fire);
  }
  .page-old-lamps .lamp-item:nth-child(even){
    background:#fff5ec;
  }
  .page-old-lamps .lamp-num{
    font-family:'Syne Mono','JetBrains Mono',monospace;
    font-size:.72rem;letter-spacing:.16em;color:var(--accent-fire);
    margin:0 0 .35rem;
  }
  .page-old-lamps .lamp-item h2{
    font-family:'Noto Serif','Playfair Display',serif;font-size:1.15rem;color:var(--accent-cool);
    margin:0 0 .5rem;line-height:1.25;
  }
  .page-old-lamps .lamp-item p{font-size:.92rem;line-height:1.6;margin:0}
  .page-old-lamps .margin-coda{
    background:#fff;border:1px solid rgba(201,168,118,.4);
    padding:1rem 1.2rem;font-size:.9rem;color:var(--muted);
    border-left:3px solid var(--accent-gold);margin-top:1.4rem;font-style:italic;
  }

  /* =====================================================================
     PAGE: GALLERY — cover + detail pages (mobile)
     ===================================================================== */

  /* COVER page on mobile — stacked bento (featured stays bigger) */
  .page-gallery-cover .gallery-cover-page{padding:.5rem 0 2rem}
  .page-gallery-cover .gallery-cover-head{margin-bottom:2rem;padding:0 .25rem}
  .page-gallery-cover .gallery-cover-head h1{font-size:2rem !important;line-height:1.1}
  .page-gallery-cover .gallery-cover-head .page-lede{font-size:1rem;line-height:1.6}
  .page-gallery-cover .gallery-cover-head .eyebrow-tag.with-rules{font-size:.66rem;gap:.5rem}
  .page-gallery-cover .gallery-cover-head .eyebrow-tag .rule-tip{width:24px}

  /* All cards equal size in a flex column on mobile (no featured anymore) */
  .page-gallery-cover .cover-grid{
    display:flex;flex-direction:column;gap:.8rem;margin:1.5rem 0 2.4rem;
    grid-template-columns:none;grid-auto-rows:auto;
  }
  .page-gallery-cover .cover-card{
    height:260px;grid-column:auto;grid-row:auto;
  }
  .page-gallery-cover .cover-card .cc-title{font-size:1.55rem}
  .page-gallery-cover .cover-card .cc-subtitle{font-size:.92rem;opacity:1 !important;transform:none !important}
  .page-gallery-cover .cover-card .cc-cta{opacity:1 !important;transform:none !important;padding:.4rem .8rem;font-size:.68rem}
  .page-gallery-cover .cover-card .cc-content{padding:1.1rem 1.1rem 1rem}
  /* Always-on subtle overlay; no need for hover state on touch devices */
  .page-gallery-cover .cover-card .cc-overlay{background:linear-gradient(180deg,rgba(26,20,16,.1) 20%,rgba(26,20,16,.6) 60%,rgba(26,20,16,.92) 100%)}

  .page-gallery-cover .cover-coda{margin:2.5rem auto 1rem}
  .page-gallery-cover .cover-coda-card{padding:1.5rem 1.3rem}
  .page-gallery-cover .cover-coda-card h3{font-size:1.2rem}
  .page-gallery-cover .cover-coda-card p{font-size:.94rem}

  /* DETAIL page on mobile — same masonry pattern, breadcrumb at top */
  .page-gallery-detail .gallery-detail-page{padding:.5rem 0 2rem}
  .page-gallery-detail .gallery-breadcrumb{margin:0 0 1rem}
  .page-gallery-detail .gallery-breadcrumb a{font-size:.66rem;padding:.35rem .6rem .35rem .5rem}

  .page-gallery-detail .gallery-detail-head{margin-bottom:1.6rem;padding:0 .5rem}
  .page-gallery-detail .gallery-detail-head h1{font-size:1.8rem !important;line-height:1.1}
  .page-gallery-detail .gallery-detail-head .page-head-subtitle{font-size:1rem}
  .page-gallery-detail .gallery-detail-head .gallery-detail-intro{font-size:.96rem;line-height:1.65}
  .page-gallery-detail .gallery-detail-head .eyebrow-tag{font-size:.66rem;letter-spacing:.18em}

  .page-gallery-detail .gallery-hero{margin:0 0 12px}
  .page-gallery-detail .gallery-hero .gallery-tile{aspect-ratio:4/3;border-radius:2px}
  .page-gallery-detail .gallery-hero figcaption{font-size:.65rem;letter-spacing:.12em;margin-top:.6rem}

  .page-gallery-detail .gallery-grid{column-count:3;column-gap:6px}
  .page-gallery-detail .gallery-grid .gallery-tile{margin-bottom:6px}

  .page-gallery-detail .gallery-show-more{margin-top:1rem;padding:.6rem 1.1rem;font-size:.92rem}

  .page-gallery-detail .gallery-detail-footer{margin:2.5rem auto 1rem}
  .page-gallery-detail .gallery-detail-footer .gallery-detail-count{font-size:.92rem}

  /* --------------------- Unified card elevation + tap feedback ---------
     Subtle warm-tint shadow on every card surface so they read as objects
     against the off-white background. Press state gives a tactile dip. */
  .page-about .objects li,
  .page-about .invocation,
  .page-about .about-imagery figure,
  .page-events .gathering,
  .page-magazine .magazine-card,
  .page-atlas .atlas-book,
  .page-voices .prose-essay,
  .page-voices .forthcoming-list li,
  .page-attention .attention-item,
  .page-old-lamps .lamp-item,
  .page-contact .contact-form,
  .page-mag-2025 .magazine-rail,
  .page-home .pillar,
  .page-home .timeline-item{
    box-shadow:0 1px 2px rgba(60,40,20,.04), 0 6px 14px rgba(60,40,20,.06);
  }
  a.magazine-card,
  a.ws-card{
    -webkit-tap-highlight-color:transparent;
  }
  a.magazine-card:active{transform:scale(.985)}
  /* Slightly punchier active state for primary CTAs on touch devices */
  .cta:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,0,0,.16)}

  /* --------------------- Smoother heading rhythm --------------------- */
  main.content > h1:first-child,
  main.magazine-landing > h1:first-child{
    line-height:1.15;letter-spacing:-.005em;color:var(--accent-cool);
  }
  /* Section heading common treatment — gentle tracking so the gold rule
     visually leads into the title, not crashes into it. */
  .page-about main h3,
  .page-events main h3,
  .page-contact main h3{
    letter-spacing:.005em;
  }

  /* --------------------- Link tap targets --------------------- */
  /* Body links inside long copy stay readable but give a clear underline
     so they look tappable on mobile. */
  main.content p a,
  .gathering-body p a,
  .prose-essay p a{
    text-decoration:underline;text-decoration-thickness:1px;
    text-underline-offset:2px;text-decoration-color:rgba(216,64,32,.45);
  }

  /* --------------------- Slightly warmer page background --------------
     The grain is already there; ease the gradient so it's softer on
     small screens (less busy when surrounded by cards). */
  body{
    background:
      radial-gradient(circle at 50% 0%, rgba(242,155,110,.08) 0%, transparent 45%),
      radial-gradient(circle at 50% 100%, rgba(201,168,118,.08) 0%, transparent 45%),
      linear-gradient(180deg, #FAFAF8 0%, #f6efde 100%);
  }

}/* end @media (max-width:768px) */

/* =====================================================================
   Smaller phone tightening (≤ 420px)
   ===================================================================== */
@media (max-width:420px){
  .container{padding-left:16px;padding-right:16px}
  .page-head h1,
  main.content > h1:first-child,
  main.magazine-landing > h1:first-child{font-size:1.7rem}
  .page-gallery .gallery-grid{column-count:2;column-gap:5px}
  .page-gallery .gallery-grid .gallery-tile{margin-bottom:5px}
  .page-events .gathering-meta strong{min-width:64px}
}

/* =====================================================================
   Tablet pass (769px – 1024px) — light tweaks only
   ===================================================================== */
@media (min-width:769px) and (max-width:1024px){
  /* Footer watermark a touch larger on tablet */
  .site-footer::before{font-size:9rem;opacity:.05}
}