/* ── press-hero.css ───────────────────────────────────────────────────
   THE TITLE PAGE hero (doc 23 component pair with press-hero.js).
   The homepage composed like the title page of a fine press book at
   billboard scale: classical frame with trim marks, fleurons, the
   letterpress stamp-in + red plate registering (the signature), an
   aldine rule, a colophon carrying the real floor line, and a giant
   blind-embossed ampersand pressed into the paper.
   Chosen from design-lab mockup J (docs/hero-mockups), Jamie 11 Jun.
   House rules: reduced-motion = settled state; pointer-driven drift
   stays live; no position:sticky; H1 is real text from byte one. */

/* the page itself: warm paper with a soft top light */
.hero{background:
        radial-gradient(120% 90% at 50% 30%,rgba(255,253,247,.65),transparent 70%),
        #efece3 !important}
.ph-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0;
        background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")}
.ph-vig{position:absolute;inset:0;pointer-events:none;z-index:0;
        background:radial-gradient(115% 95% at 50% 45%,transparent 62%,rgba(60,52,38,.13) 100%)}

/* the giant blind-embossed ampersand — pressed into the paper, not printed */
.ph-emboss{position:absolute;right:-4%;bottom:-14%;pointer-events:none;user-select:none;z-index:0;
        font-family:var(--fd);font-style:italic;font-weight:300;font-size:64vh;line-height:1;
        color:#efece3;
        text-shadow:-1px -1px 1px rgba(255,255,255,.85), 1.5px 1.5px 2px rgba(60,52,38,.18)}

/* the classical double-rule frame; red trim marks draw at its corners */
.ph-frame{position:absolute;inset:10vh 4vw 4.5vh;border:1px solid rgba(23,23,26,.22);
        pointer-events:none;z-index:0;
        opacity:0;animation:ph-fadein 1.2s .3s ease forwards}
.ph-frame::after{content:'';position:absolute;inset:6px;border:.5px solid rgba(23,23,26,.16)}
@keyframes ph-fadein{to{opacity:1}}
.ph-trims{position:absolute;inset:0;pointer-events:none;z-index:0;width:100%;height:100%}
.ph-trims line{stroke:var(--red-lt);stroke-width:1.2;stroke-dasharray:22;stroke-dashoffset:22;
        animation:ph-trimdraw .5s 1s ease forwards}
@keyframes ph-trimdraw{to{stroke-dashoffset:0}}

/* the sheet's quiet furniture: fore-edge colour bar + folio */
.ph-edgebar{position:absolute;right:calc(4vw - 26px);top:50%;transform:translateY(-50%);z-index:0;
        display:flex;flex-direction:column;gap:5px;
        opacity:0;animation:ph-fadein 1s 1.8s ease forwards}
.ph-edgebar i{width:9px;height:14px;display:block;opacity:.8}
.ph-folio{position:absolute;left:calc(4vw + 18px);bottom:calc(4.5vh + 14px);z-index:0;
        font-family:var(--fd);font-style:italic;font-size:15px;color:rgba(23,23,26,.4);
        opacity:0;animation:ph-fadein 1s 2s ease forwards}

/* THE TITLE PAGE stack — classical canon, modern scale */
.ph-page{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
        align-items:center;justify-content:center;text-align:center;padding:0 6vw}
.ph-mark{font-family:var(--fd);font-weight:600;font-size:15px;letter-spacing:.05em;color:var(--ink);
        width:44px;height:44px;border:1.5px solid var(--ink);display:grid;place-items:center;
        margin-bottom:3vh;opacity:0;animation:ph-fadein .9s .5s ease forwards}
.ph-eyebrow{display:flex;align-items:center;gap:18px;font-size:11.5px;font-weight:600;
        letter-spacing:.3em;text-transform:uppercase;color:rgba(23,23,26,.55);margin-bottom:3.4vh;
        opacity:0;animation:ph-fadein .9s .8s ease forwards}
.ph-eyebrow .orn{font-family:var(--fd);font-size:17px;color:var(--red);letter-spacing:0}
.ph-title{font-family:var(--fd);font-weight:300;font-size:clamp(58px,9.5vw,148px);line-height:.92;
        letter-spacing:-.015em;color:rgba(23,23,26,.94);position:relative;margin:0 0 2.2vh}
.ph-title .ch{display:inline-block;will-change:transform,opacity}
.ph-title-k{display:block;position:relative}   /* a real box, so the plate registers true */
.ph-plate{position:absolute;inset:0;color:var(--red);pointer-events:none;z-index:-1;will-change:transform}
.ph-plate .ch{color:var(--red)}
.ph-title-em{display:block;font-style:italic;font-weight:300;font-size:clamp(22px,2.4vw,38px);
        letter-spacing:.01em;color:var(--red);margin-top:1.8vh;
        opacity:0;animation:ph-fadein 1s 2.1s ease forwards}
.ph-rule{width:min(330px,30vw);height:1px;background:rgba(23,23,26,.25);margin:2.8vh auto 2.4vh;position:relative;
        transform:scaleX(0);animation:ph-ruledraw .8s 1.7s cubic-bezier(.3,.7,.3,1) forwards}
.ph-rule::after{content:'❦';position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
        font-family:var(--fd);font-size:15px;color:var(--red);background:#efece3;padding:0 12px}
@keyframes ph-ruledraw{to{transform:scaleX(1)}}
.ph-desc{font-size:15.5px;line-height:1.8;max-width:58ch;color:rgba(23,23,26,.6);
        opacity:0;animation:ph-fadein 1s 2.3s ease forwards}
.ph-desc a{color:rgba(23,23,26,.85);font-weight:600;text-decoration:none;
        border-bottom:1px solid rgba(167,1,42,.45)}
.ph-desc a:hover{color:var(--red)}
.ph-actions{display:flex;gap:14px;margin-top:3vh;justify-content:center;
        opacity:0;animation:ph-fadein 1s 2.6s ease forwards}
/* the trust line — quiet, centred, real numbers (Google spans live) */
.ph-trust{display:flex;align-items:baseline;gap:14px;margin-top:3.2vh;flex-wrap:wrap;justify-content:center;
        font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(23,23,26,.45);
        opacity:0;animation:ph-fadein 1s 2.9s ease forwards}
.ph-trust b{font-family:var(--fd);font-weight:500;font-size:17px;letter-spacing:0;
        color:rgba(23,23,26,.85);margin-right:5px}
.ph-trust i{font-style:normal;color:rgba(23,23,26,.25)}

/* the colophon at the foot — carries the REAL floor line when live */
.ph-colophon{position:absolute;left:0;right:0;bottom:calc(4.5vh + 16px);text-align:center;z-index:2;
        font-family:var(--fd);font-style:italic;font-size:16px;color:rgba(23,23,26,.5);
        padding:0 8vw;
        opacity:0;animation:ph-fadein 1.2s 3s ease forwards;transition:opacity .45s}
.ph-colophon .live{color:var(--red)}
.ph-colophon .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#3fae5a;
        box-shadow:0 0 7px #3fae5a;margin:0 8px 1px 0;vertical-align:1px;animation:ph-pulse 2.4s infinite}
@keyframes ph-pulse{50%{opacity:.35}}

@media (prefers-reduced-motion: reduce){
  /* the page arrives settled, fully composed */
  .ph-frame,.ph-eyebrow,.ph-mark,.ph-desc,.ph-actions,.ph-trust,
  .ph-colophon,.ph-edgebar,.ph-folio,.ph-title-em{animation:none;opacity:1}
  .ph-rule{animation:none;transform:scaleX(1)}
  .ph-trims line{animation:none;stroke-dashoffset:0}
  .ph-colophon .dot{animation:none}
}
@media (max-width:780px){
  .ph-title{font-size:clamp(46px,13vw,72px)}
  .ph-emboss{font-size:42vh;right:-18%}
  .ph-edgebar,.ph-folio{display:none}
  .ph-trust{gap:10px;font-size:10px}
  .ph-trust i{display:none}
  .ph-frame{inset:9vh 12px 12px}
}