/* origin.css — page-specific styles for origin.html */

/* Mobile responsiveness guards (<=640px).
   Scoped to origin page via .page-origin / body.page-template-editable
   pattern is template-wide; we keep these rules narrow so we do not
   collide with other pages that share the editable template. */
@media (max-width: 640px) {
    /* Defensive: prevent any origin-page content block from forcing
       horizontal overflow on narrow viewports. */
    .page-origin img,
    .page-origin figure,
    .page-origin .wp-block-image,
    .page-origin .editable-content img {
        max-width: 100%;
        height: auto;
        box-sizing: border-box;
    }

    /* If origin page uses small descriptor text in cards/lists,
       lift to legibility floor. These class names appear in the
       mobile audit (P.d, SPAN.desc, SPAN.ar) and are commonly
       reused in editable-page content blocks. Scope to .page-origin
       so we do not affect other pages sharing the template. */
    .page-origin p.d,
    .page-origin .desc,
    .page-origin span.ar,
    .page-origin span.count {
        font-size: 14px;
        line-height: 1.45;
    }

    /* Ensure any in-content tap targets on origin meet 44px guideline. */
    .page-origin .editable-content a.button,
    .page-origin .editable-content .btn,
    .page-origin a.btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
}


/* === PA hero mobile restructure (auto, 2026-05-31) === prefix:wr */
@media (max-width:980px){
  .wr-hero{
    display:flex; flex-direction:column;
    min-height:0 !important; height:auto !important;
    padding:0 !important; background:var(--paper);
    position:relative; overflow:hidden;
    align-items:stretch !important;
  }
  .wr-hero-bg{
    position:relative !important; inset:auto !important; z-index:auto !important;
    width:100%; aspect-ratio:4/3; height:auto !important;
    order:1; flex:0 0 auto;
  }
  .wr-hero-bg img{
    position:absolute !important; inset:0 !important;
    width:100%; height:100% !important;
    object-fit:cover; object-position:center 30%;
  }
  .wr-hero > .container,
  .wr-hero > .wr-hero-content,
  .wr-hero .wr-hero-content{
    position:static !important; inset:auto !important;
    padding:0 !important; max-width:100%; width:100%; margin:0;
    background:var(--paper); color:var(--ink);
    order:2; flex:1 1 auto;
    min-height:0 !important;
    display:block !important;
  }
  .wr-hero-eyebrow,
  .wr-hero .eyebrow{ display:none !important; }
  .wr-hero h1{
    position:absolute !important; top:37.5vw;
    left:0; right:0; transform:translateY(-50%);
    margin:0 !important; padding:0 24px; max-width:none;
    text-align:center; color:var(--paper-w);
    font-size:clamp(26px,7vw,38px); line-height:1.1;
    text-shadow:0 2px 14px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.5);
    z-index:3;
  }
  .wr-hero h1 .accent,
  .wr-hero h1 span{ color:var(--gold-l); }
  .wr-hero .lede,
  .wr-hero p.sub{
    margin:0 !important; padding:22px 22px 8px; max-width:none;
    background:var(--paper); color:#4a4a3d;
    font-size:14.5px; line-height:1.5; text-align:center;
  }
  .wr-hero .lede strong{ color:var(--ink); }
  .wr-hero .hero-actions,
  .wr-hero .actions,
  .wr-hero .wr-hero-actions{
    margin:0 !important; padding:0 22px 24px;
    background:var(--paper);
    display:flex; flex-direction:row; flex-wrap:wrap;
    gap:10px; align-items:center; justify-content:center; width:100%;
  }
  .wr-hero .btn-light{
    background:transparent;
    border:1.5px solid var(--green-d); color:var(--green-d);
  }
  .wr-hero .btn-light:hover{ background:var(--green-d); color:var(--paper-w); }
  .wr-hero .hero-meta,
  .wr-hero .meta,
  .wr-hero .wr-hero-meta{
    position:absolute; top:calc(75vw - 34px);
    left:50%; right:auto; bottom:auto; transform:translateX(-50%);
    margin:0 !important; padding:5px 14px;
    background:rgba(0,0,0,.34);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border-radius:999px;
    font-family:'Lora',Georgia,serif; font-style:italic; font-size:11px;
    color:rgba(251,246,231,.92); z-index:3;
    display:inline-flex; gap:5px; white-space:nowrap; text-align:center;
  }
  .wr-hero .who{ color:var(--gold-l); font-weight:600; }
}


/* === PA hero mobile contrast/meta fix (auto, 2026-05-31b) === prefix:wr */
@media (max-width:980px){
  /* Lede/quote dark on the cream band (global .X-hero p.lede sets a light
     colour with element-level specificity; override with !important). */
  .wr-hero .lede, .wr-hero p.lede,
  .wr-hero p.sub, .wr-hero .sub,
  .wr-hero blockquote, .wr-hero .quote{ color:#4a4a3d !important; }
  .wr-hero .lede strong, .wr-hero p.lede strong{ color:var(--ink) !important; }
  /* Attribution / credit lines readable on cream */
  .wr-hero .attrib, .wr-hero .attribution,
  .wr-hero .credit, .wr-hero .source{ color:var(--gold-d) !important; }
  /* Hide the decorative caption pill on mobile (overflows on longer metas). */
  .wr-hero .hero-meta, .wr-hero .meta, .wr-hero .wr-hero-meta{ display:none !important; }
}

/* === Origin page (Matt, 3 Jun 2026) ===========================================
   - "Who was Penny?" namesake section: cream, not the lime green.
   - "Penny's Ark is the same work" four points: restyle to the standard
     Penny's Ark numbered-card component (cream cards + dark-green number
     circles), drop the photo. */
/* "Who was Penny?" — soft-spotlight special treatment (Matt, 3 Jun 2026):
   cream with a warm glow, larger centred heading, gold rule + mark, no eyebrow. */
.page-origin-wrap .wr-christa{
  background:radial-gradient(120% 78% at 50% 0%, rgba(244,211,94,0.18) 0%, rgba(244,211,94,0) 56%), var(--paper) !important;
}
.page-origin-wrap .wr-christa .heading .eyebrow{ display:none !important; }
.page-origin-wrap .wr-christa .heading{ text-align:center; }
.page-origin-wrap .wr-christa .heading::before{ display:none !important; } /* gold diamond mark removed — Matt, 3 Jun 2026 pm */
.page-origin-wrap .wr-christa .heading h2{ font-size:clamp(36px,4.8vw,60px); }
.page-origin-wrap .wr-christa .heading h2::after{ content:""; display:block; width:64px; height:2px; background:var(--gold); border-radius:2px; margin:22px auto 0; }
.page-origin-wrap .wr-christa .body{ text-align:center; max-width:62ch; margin:0 auto; }
.page-origin-wrap .wr-christa .pullquote{ margin:32px auto 0; max-width:48ch; text-align:center; border-left:0 !important; } /* gold left bar on the quote box removed — Matt, 3 Jun 2026 pm */
.page-origin-wrap .wr-christa::before{ display:none !important; } /* corner paw removed — Matt, 3 Jun 2026 pm */

.page-origin-wrap .wr-work{ background:var(--paper); }
.page-origin-wrap .wr-work .wr-work-photo{ display:none !important; }
.page-origin-wrap .wr-work .wr-work-grid{ display:block !important; }
.page-origin-wrap .wr-work .wr-work-steps{ display:grid; gap:14px; max-width:920px; margin:6px auto 0; }
.page-origin-wrap .wr-work .wr-step{ background:var(--paper-2); border:1px solid rgba(176,122,20,0.18); border-radius:var(--r-lg); padding:22px 26px; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; }
.page-origin-wrap .wr-work .wr-step .num{ width:54px; height:54px; border-radius:50%; background:var(--green-d); color:var(--gold-l); display:inline-flex; align-items:center; justify-content:center; font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:600; font-size:20px; line-height:1; flex-shrink:0; }
.page-origin-wrap .wr-work .wr-step h3{ font-family:var(--slab); font-weight:800; font-size:clamp(18px,2vw,22px); letter-spacing:-0.01em; color:var(--green-d); margin:0 0 6px; }
.page-origin-wrap .wr-work .wr-step p{ font-size:15px; color:var(--ink-2); line-height:1.55; margin:0; }
.page-origin-wrap .wr-work .heading h2 span{ color:var(--green-l); font-style:italic; font-weight:600; font-family:'Fraunces',Georgia,serif; }

/* === Origin page, the "2019" break section (.wr-twosouls) — Matt, 3 Jun 2026.
   Strip the section's decoration so only the quote remains:
   - the indigo blockquote bar that leaks in from the parent monolith
     base.css (blockquote{border-left:4px solid var(--color-accent)}, #6366f1),
   - both paws: the .ornament circle at the top centre AND the large faint
     ::after paw in the top-right corner of the section,
   - the whole "2019" eyebrow kicker above the quote. */
.page-origin-wrap .wr-twosouls blockquote{ border-left:0; padding-left:0; }
.page-origin-wrap .wr-twosouls .ornament{ display:none !important; }
.page-origin-wrap .wr-twosouls::after{ display:none !important; }
.page-origin-wrap .wr-twosouls .eyebrow{ display:none !important; }