/* ================================================================
   PGF ACCOUNT 01B — ARCHIVE ACCESS
   Scoped entirely to the Archive Access page. Loaded only when
   is_page('archive-access') is true (see functions.php). Independent
   from create-archive.css — the two pages are deliberately different
   environments.

   VISUAL REFINEMENT PASS: the door is now built as a real
   architectural assembly (casing > trim > slab > inset panel >
   threshold > floor) rather than a rounded card, the identity reader
   is wall-mounted at hand height, and the lipstick kiss is a drawn
   lip impression rather than two ellipses.
   ================================================================ */

.pgf-access-page {
    --pgfx-pink: #E72A76;
    --pgfx-pink-deep: #B8195C;
    --pgfx-pink-dark: #9E1049;
    --pgfx-wine: #7A1030;
    --pgfx-blush: #F6D3E0;
    --pgfx-door: #F7DCE2;
    --pgfx-door-lo: #EFC3D0;
    --pgfx-cream: #FBEDE2;
    --pgfx-paper: #F6E7DA;
    --pgfx-champagne: #E0BC8E;
    --pgfx-brass: #C08B4E;
    --pgfx-brass-hi: #F0D3A8;
    --pgfx-ink: #241017;
    --pgfx-green: #3E7A57;
    --pgfx-red: #A83A3A;

    /* door geometry — arch radius is half the slab width, which is
       what makes the top read as a true arch instead of a big
       border-radius on a card */
    --door-w: 400px;
    --door-h: 650px;
    --arch: 200px;
    --casing: 20px;
    --trim: 9px;
    --pendant-space: 118px;
    --floor-space: 156px;

    position: relative;
    overflow-x: hidden;
    background: var(--pgfx-pink);
    padding: clamp(2.25rem, 5vw, 4rem) 1.25rem clamp(2.5rem, 5vw, 4rem);
    color: #fff;
}

/* wall surface: a very fine plaster tone, plus broad lighting.
   Deliberately subtle — clean and luxurious, never grungy. */
.pgf-access-page::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 70% 50% at 62% 6%, rgba(255,236,242,0.20), transparent 70%),
        radial-gradient(ellipse 90% 60% at 12% 96%, rgba(120,6,48,0.22), transparent 70%),
        radial-gradient(ellipse 60% 40% at 98% 60%, rgba(120,6,48,0.16), transparent 70%),
        repeating-linear-gradient(112deg, rgba(255,255,255,0.055) 0px, rgba(255,255,255,0.055) 1px, transparent 1px, transparent 4px),
        repeating-linear-gradient(22deg, rgba(0,0,0,0.035) 0px, rgba(0,0,0,0.035) 1px, transparent 1px, transparent 7px);
}

.pgf-access-page > * { position: relative; z-index: 1; }

.pgf-access-page *,
.pgf-access-page *::before,
.pgf-access-page *::after { box-sizing: border-box; }

.pgf-access-wrap { max-width: 1320px; margin: 0 auto; }

.pgf-access-columns {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
}

/* ================================================================
   LEFT COLUMN — storytelling
   ================================================================ */

.pgf-access-brand {
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.88);
    margin: 0 0 0.5rem;
}

.pgf-access-headline {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    letter-spacing: 0.01em;
    color: #fff;
    margin: 0 0 0.4rem;
    line-height: 1.03;
}

.pgf-access-subline {
    font-family: 'Space Mono', monospace;
    font-size: 0.64rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.66);
    margin: 0 0 0.75rem;
}

.pgf-access-rule {
    width: 100%;
    max-width: 300px;
    border-top: 1px dashed rgba(255,255,255,0.4);
    margin: 0 0 1.4rem;
}

.pgf-access-welcome {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.14;
    color: #fff;
    margin: 0 0 0.9rem;
}
.pgf-access-welcome em {
    display: inline-block;
    font-style: italic;
    font-weight: 600;
    color: rgba(255,255,255,0.62);
}

.pgf-access-tagline {
    font-family: 'Space Mono', monospace;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    line-height: 1.75;
    margin: 0 0 1.7rem;
}

/* ---- overlapping paper notes ------------------------------------- */

.pgf-access-notes {
    position: relative;
    min-height: 210px;
    margin: 0 0 1.4rem;
}

.pgf-note {
    position: absolute;
    background: var(--pgfx-paper);
    color: var(--pgfx-ink);
    padding: 1rem 1.1rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    line-height: 1.65;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 14px 22px -12px rgba(70,0,26,0.55),
        0 3px 6px -3px rgba(70,0,26,0.35);
}

/* small pinned note */
.pgf-note-pin {
    left: 0;
    top: 26px;
    width: 148px;
    padding-top: 1.5rem;
    transform: rotate(-4.5deg);
    z-index: 1;
}
.pgf-note-pinhead {
    position: absolute;
    top: 9px;
    left: 50%;
    width: 15px;
    height: 15px;
    margin-left: -7.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #FF9BC2, var(--pgfx-pink-deep) 62%, #7C0C38);
    box-shadow: 0 3px 5px -1px rgba(70,0,26,0.6);
}
.pgf-note-heart {
    display: block;
    margin-top: 0.5rem;
    color: var(--pgfx-pink-deep);
    font-size: 0.85rem;
}

/* larger lined note, clipped, with a kiss */
.pgf-note-clip {
    left: 116px;
    top: 0;
    width: 196px;
    padding: 1.25rem 1.2rem 1.3rem;
    transform: rotate(2.5deg);
    z-index: 2;
    background-color: var(--pgfx-paper);
    background-image: repeating-linear-gradient(
        180deg,
        transparent 0 21px,
        rgba(122,16,48,0.13) 21px 22px
    );
    background-position: 0 14px;
}
.pgf-note-paperclip {
    position: absolute;
    top: -19px;
    left: 20px;
    width: 26px;
    height: 46px;
    transform: rotate(-11deg);
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 70'%3E%3Cpath d='M12 63V17a8 8 0 0 1 16 0v38a5.4 5.4 0 0 1-10.8 0V23' fill='none' stroke='%23E88CB0' stroke-width='4.4' stroke-linecap='round'/%3E%3Cpath d='M12 63V17a8 8 0 0 1 16 0v38a5.4 5.4 0 0 1-10.8 0V23' fill='none' stroke='%23FFFFFF' stroke-width='1.2' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
}
.pgf-note-hand {
    display: block;
    font-family: 'Caveat', cursive;
    font-size: 1.32rem;
    line-height: 1.55;
    color: var(--pgfx-pink-deep);
}

/* ---- the PGF lipstick kiss — a drawn lip impression -------------- */

.pgf-note-kiss,
.pgf-big-kiss {
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.pgf-note-kiss {
    position: absolute;
    right: 12px;
    bottom: 10px;
    width: 46px;
    height: 33px;
    transform: rotate(-9deg);
    opacity: 0.92;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 72'%3E%3Cg fill='%23C42462'%3E%3Cpath d='M4 32C10 20 18 10 28 11c10 1 18 7 22 12 4-5 12-11 22-12 10-1 18 9 24 21-16-5-32-7-46-4.5C36 25 20 27 4 32Z'/%3E%3Cpath d='M4 35c16-3 32-4 46-2 14-2 30-1 46 2-6 17-24 31-46 31S10 52 4 35Z'/%3E%3Ccircle cx='7' cy='30' r='2.1' opacity='.55'/%3E%3Ccircle cx='94' cy='37' r='1.7' opacity='.5'/%3E%3Ccircle cx='50' cy='69.5' r='1.9' opacity='.45'/%3E%3Ccircle cx='24' cy='8.5' r='1.5' opacity='.5'/%3E%3Ccircle cx='77' cy='8' r='1.3' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
}

.pgf-big-kiss {
    width: 74px;
    height: 53px;
    flex: 0 0 auto;
    transform: rotate(-10deg);
    opacity: 0.55;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 72'%3E%3Cg fill='%23FBD3E2'%3E%3Cpath d='M4 32C10 20 18 10 28 11c10 1 18 7 22 12 4-5 12-11 22-12 10-1 18 9 24 21-16-5-32-7-46-4.5C36 25 20 27 4 32Z'/%3E%3Cpath d='M4 35c16-3 32-4 46-2 14-2 30-1 46 2-6 17-24 31-46 31S10 52 4 35Z'/%3E%3Ccircle cx='7' cy='30' r='2.1' opacity='.55'/%3E%3Ccircle cx='94' cy='37' r='1.7' opacity='.5'/%3E%3Ccircle cx='50' cy='69.5' r='1.9' opacity='.45'/%3E%3Ccircle cx='24' cy='8.5' r='1.5' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- badges: ghost stamp + circular seal -------------------------- */

.pgf-access-badges {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin: 0 0 1.6rem;
    flex-wrap: wrap;
}

.pgf-ghost-badge {
    font-family: 'Space Mono', monospace;
    font-size: 0.76rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.62);
    border: 1px solid rgba(255,255,255,0.42);
    border-radius: 2px;
    padding: 0.6rem 0.95rem;
    transform: rotate(-1.5deg);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}

/* circular ink stamp: two slightly offset rings give the imperfect
   double-line impression of a real rubber stamp */
.pgf-access-seal {
    position: relative;
    width: 104px;
    height: 104px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: rotate(-7deg);
    opacity: 0.9;
}
.pgf-access-seal::before,
.pgf-access-seal::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.pgf-access-seal::before {
    inset: 0;
    border: 2px solid rgba(255,255,255,0.72);
    opacity: 0.85;
}
.pgf-access-seal::after {
    inset: 6px 5px 4px 6px;
    border: 1px solid rgba(255,255,255,0.55);
    opacity: 0.7;
}
.pgf-seal-line1, .pgf-seal-line2 {
    font-family: 'Space Mono', monospace;
    font-size: 0.43rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    line-height: 1.25;
}
.pgf-seal-main {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    color: #fff;
    margin: 0.12rem 0;
}

/* ---- torn-paper create-account invitation ------------------------- */

.pgf-torn-invite {
    position: relative;
    max-width: 306px;
    padding: 1.5rem 1.5rem 1.55rem 1.75rem;
    margin: 0 0 1.7rem;
    transform: rotate(-1deg);
}
/* the paper itself is painted by a pseudo-element so the torn clip
   never cuts off the clip or the text sitting on top of it */
.pgf-torn-invite::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--pgfx-cream);
    filter: drop-shadow(0 16px 22px rgba(70,0,26,0.5));
    clip-path: polygon(
        0.8% 3%, 6% 0.6%, 14% 2.4%, 23% 0.4%, 33% 2.8%, 44% 0.5%,
        55% 2.6%, 66% 0.7%, 77% 2.9%, 88% 0.8%, 96% 2.5%, 99.4% 6%,
        98% 14%, 99.5% 24%, 97.6% 34%, 99.4% 45%, 97.5% 56%,
        99.3% 67%, 97.6% 78%, 99.4% 88%, 97% 95%, 92% 99.3%,
        83% 97.4%, 72% 99.5%, 61% 97.3%, 50% 99.4%, 39% 97.2%,
        28% 99.5%, 18% 97.4%, 9% 99.3%, 3% 96%, 0.6% 89%,
        2.4% 79%, 0.5% 68%, 2.6% 57%, 0.4% 46%, 2.5% 35%,
        0.6% 24%, 2.6% 13%
    );
}
.pgf-torn-invite > * { position: relative; z-index: 1; }

.pgf-torn-clip {
    position: absolute;
    top: -20px;
    left: 16px;
    width: 42px;
    height: 42px;
    z-index: 2;
    transform: rotate(-13deg);
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 51C8 34 4 21 13 13c8-7 15 0 17 5 2-5 9-12 17-5 9 8 5 21-17 38Z' fill='none' stroke='%23F09CBE' stroke-width='3.6' stroke-linejoin='round'/%3E%3Cpath d='M30 44C14 31 11 22 17 17' fill='none' stroke='%23FFFFFF' stroke-width='1.1' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
}

.pgf-torn-lead {
    font-family: 'Caveat', cursive;
    font-size: 1.3rem;
    color: var(--pgfx-pink-deep);
    margin: 0 0 0.3rem;
}
.pgf-torn-copy {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.06rem;
    line-height: 1.35;
    color: var(--pgfx-ink);
    margin: 0 0 0.85rem;
}
.pgf-torn-link {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pgfx-pink-deep);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.12rem;
}
.pgf-torn-link:hover, .pgf-torn-link:focus-visible { color: var(--pgfx-wine); }

/* ---- bottom marks -------------------------------------------------- */

.pgf-access-footer-marks {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin: 0 0 1.2rem;
}
.pgf-hand-signoff {
    font-family: 'Caveat', cursive;
    font-size: 1.3rem;
    line-height: 1.3;
    color: rgba(255,255,255,0.8);
    margin: 0;
}

.pgf-access-property {
    font-family: 'Space Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
    line-height: 1.7;
    margin: 0;
}

/* ================================================================
   RIGHT COLUMN — the door environment
   ================================================================ */

.pgf-access-side { position: relative; }

/* ---- curated wall props ------------------------------------------- */

.pgf-wall-props { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.pgf-prop-note {
    position: absolute;
    top: 4px;
    right: 0;
    width: 108px;
    padding: 0.85rem 0.7rem 0.9rem;
    background: var(--pgfx-paper);
    text-align: center;
    transform: rotate(3deg);
    box-shadow: 0 12px 18px -11px rgba(70,0,26,0.6);
}
.pgf-prop-note-tape {
    position: absolute;
    top: -9px;
    left: 50%;
    width: 46px;
    height: 17px;
    margin-left: -23px;
    background: rgba(255,255,255,0.42);
    border-left: 1px solid rgba(255,255,255,0.28);
    border-right: 1px solid rgba(255,255,255,0.28);
    transform: rotate(-2deg);
}
.pgf-prop-note-hand {
    display: block;
    font-family: 'Caveat', cursive;
    font-size: 0.94rem;
    line-height: 1.4;
    color: var(--pgfx-pink-deep);
}
.pgf-prop-note-heart {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    color: var(--pgfx-pink-deep);
    opacity: 0.75;
}

.pgf-prop-confidential {
    position: absolute;
    right: -4px;
    bottom: 212px;
    width: 118px;
    padding: 0.5rem 0.4rem;
    text-align: center;
    font-family: 'Space Mono', monospace;
    font-size: 0.56rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.5;
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.34);
    border-radius: 2px;
    transform: rotate(-4deg);
    opacity: 0.85;
}
.pgf-prop-confidential span { color: rgba(255,255,255,0.6); }

.pgf-prop-supply {
    position: absolute;
    right: 4px;
    bottom: 34px;
    width: 86px;
    height: 74px;
    border-radius: 3px 3px 4px 4px;
    background: linear-gradient(180deg, #F4B9CE, #E393B3);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        0 12px 18px -10px rgba(70,0,26,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pgf-prop-supply-lid {
    position: absolute;
    top: -7px; left: -4px; right: -4px;
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(180deg, #F8CBDC, #EDA4C0);
    box-shadow: 0 2px 3px rgba(70,0,26,0.28);
}
.pgf-prop-supply-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.56rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.45;
    text-align: center;
    color: #8C1341;
}

/* ---- the lock system: pendant + door + reader + mat + floor -------- */

.pgf-access-lock-system {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    padding-top: var(--pendant-space);
    padding-bottom: var(--floor-space);
}

/* floor plane — this is what stops the door from floating */
.pgf-access-floor {
    position: absolute;
    left: -14%;
    right: -14%;
    bottom: 0;
    height: var(--floor-space);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.10), transparent 40%),
        linear-gradient(180deg, #D98BAA 0%, #C97B9C 55%, #BE7091 100%);
    box-shadow: inset 0 3px 10px -4px rgba(70,0,26,0.5);
}
/* soft contact shadow where the door meets the floor */
.pgf-access-floor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(var(--door-w) + var(--casing) * 3);
    height: 46px;
    margin-left: calc((var(--door-w) + var(--casing) * 3) / -2);
    background: radial-gradient(ellipse at top, rgba(70,0,26,0.42), transparent 72%);
}

/* ---- pendant light ------------------------------------------------- */

.pgf-access-pendant {
    position: absolute;
    top: 0;
    left: calc((var(--door-w) + var(--casing) * 2) / 2);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 4;
    pointer-events: none;
}
.pgf-pendant-cord {
    width: 2px;
    height: 46px;
    background: linear-gradient(180deg, rgba(70,0,26,0.35), rgba(70,0,26,0.55));
}
.pgf-pendant-shade {
    position: relative;
    width: 52px;
    height: 30px;
    border-radius: 7px 7px 30px 30px;
    background:
        linear-gradient(100deg, rgba(255,255,255,0.42) 0 18%, transparent 42%),
        linear-gradient(180deg, #E8558B 0%, #C22764 62%, #A5164E 100%);
    box-shadow:
        inset 0 -3px 5px -2px rgba(255,220,235,0.5),
        0 4px 7px -3px rgba(70,0,26,0.55);
}
.pgf-pendant-bulb {
    width: 15px;
    height: 12px;
    margin-top: -3px;
    border-radius: 0 0 50% 50%;
    background: radial-gradient(circle at 50% 20%, #FFF8E4, #FFD79A 60%, #F2B05F);
    box-shadow: 0 0 14px 6px rgba(255,206,138,0.75);
}
.pgf-pendant-glow {
    width: 300px;
    height: 210px;
    margin-top: -34px;
    background:
        radial-gradient(ellipse 44% 60% at 50% 0%, rgba(255,214,166,0.42), rgba(255,200,150,0.14) 46%, transparent 74%);
}

/* ---- door assembly: casing > trim > slab > threshold --------------- */

.pgf-door-assembly {
    position: relative;
    z-index: 2;
    width: calc(var(--door-w) + var(--casing) * 2);
    margin: 0 auto 0 0;
    padding: var(--casing) var(--casing) 0;
}

/* outer casing, recessed into the wall */
.pgf-door-casing {
    position: absolute;
    inset: 0;
    border-radius: calc(var(--arch) + var(--casing)) calc(var(--arch) + var(--casing)) 5px 5px;
    background:
        linear-gradient(100deg, #F3C9D7 0%, #E7AEC2 38%, #D998AF 100%);
    box-shadow:
        /* casts onto the wall */
        0 34px 60px -26px rgba(70,0,26,0.7),
        14px 20px 42px -22px rgba(70,0,26,0.55),
        /* crisp edge */
        0 1px 0 rgba(255,255,255,0.5) inset,
        -1px 0 0 rgba(255,255,255,0.35) inset;
}
/* warm light from the pendant falling across the top of the casing */
.pgf-door-casing::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 62% 34% at 50% 0%, rgba(255,224,186,0.55), transparent 68%);
}

/* inner trim, the reveal between casing and slab */
.pgf-door-trim {
    position: absolute;
    top: calc(var(--casing) - var(--trim));
    left: calc(var(--casing) - var(--trim));
    right: calc(var(--casing) - var(--trim));
    bottom: 0;
    border-radius: calc(var(--arch) + var(--trim)) calc(var(--arch) + var(--trim)) 4px 4px;
    background: linear-gradient(100deg, #C98BA4, #B87792);
    box-shadow:
        inset 0 2px 5px rgba(70,0,26,0.45),
        inset 0 -1px 0 rgba(255,255,255,0.2);
}

/* the door slab itself */
.pgf-door-frame {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: var(--door-h);
    border-radius: var(--arch) var(--arch) 4px 4px;
    padding: 84px 36px 26px;
    background:
        radial-gradient(ellipse 80% 26% at 50% 0%, rgba(255,236,214,0.75), transparent 62%),
        linear-gradient(100deg, #FDF1F2 0%, var(--pgfx-door) 42%, var(--pgfx-door-lo) 100%);
    box-shadow:
        /* recessed into the trim */
        0 0 0 1px rgba(122,16,48,0.10),
        inset 0 2px 0 rgba(255,255,255,0.8),
        inset -6px 0 14px -8px rgba(122,16,48,0.32),
        inset 6px 0 12px -8px rgba(255,255,255,0.55),
        0 10px 22px -12px rgba(70,0,26,0.45);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
    overflow: hidden;
}

/* the inset panel line that reads as joinery, not a border */
.pgf-door-panel {
    position: absolute;
    top: 24px;
    left: 22px;
    right: 22px;
    bottom: 22px;
    border-radius: calc(var(--arch) - 22px) calc(var(--arch) - 22px) 3px 3px;
    box-shadow:
        inset 0 1px 1px rgba(122,16,48,0.16),
        0 1px 0 rgba(255,255,255,0.65);
    border: 1px solid rgba(122,16,48,0.09);
    pointer-events: none;
}

.pgf-access-lock-system.is-active .pgf-door-frame { transform: translateY(-2px); }

.pgf-access-lock-system.is-granted .pgf-door-frame,
.pgf-access-lock-system.is-authenticated .pgf-door-frame {
    box-shadow:
        0 0 0 1px rgba(62,122,87,0.35),
        inset 0 2px 0 rgba(255,255,255,0.8),
        inset -6px 0 14px -8px rgba(122,16,48,0.28),
        inset 6px 0 12px -8px rgba(255,255,255,0.55),
        0 10px 26px -10px rgba(62,122,87,0.5);
}
.pgf-access-lock-system.is-denied .pgf-door-frame {
    box-shadow:
        0 0 0 1px rgba(168,58,58,0.35),
        inset 0 2px 0 rgba(255,255,255,0.8),
        inset -6px 0 14px -8px rgba(122,16,48,0.3),
        inset 6px 0 12px -8px rgba(255,255,255,0.55),
        0 10px 26px -10px rgba(168,58,58,0.45);
}

/* ---- hinges: three, with knuckle segmentation --------------------- */

.pgf-door-hinge {
    position: absolute;
    left: 5px;
    width: 15px;
    height: 46px;
    border-radius: 3px;
    background:
        repeating-linear-gradient(180deg,
            rgba(0,0,0,0.16) 0 1px,
            transparent 1px 11.5px),
        linear-gradient(95deg, var(--pgfx-brass-hi) 0%, var(--pgfx-champagne) 34%, var(--pgfx-brass) 78%, #A0703A 100%);
    box-shadow:
        0 1px 3px rgba(70,0,26,0.45),
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset -1px 0 2px rgba(0,0,0,0.22);
    z-index: 3;
}
.pgf-door-hinge-top { top: 176px; }
.pgf-door-hinge-mid { top: 50%; margin-top: -23px; }
.pgf-door-hinge-bottom { bottom: 78px; }

/* ---- handle: bar on two standoffs ---------------------------------- */

.pgf-door-handle {
    position: absolute;
    right: 20px;
    top: 52%;
    width: 10px;
    height: 104px;
    margin-top: -52px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--pgfx-brass-hi) 0%, var(--pgfx-champagne) 30%, var(--pgfx-brass) 72%, #9C6C36 100%);
    box-shadow:
        1px 2px 4px rgba(70,0,26,0.45),
        inset 0 1px 0 rgba(255,255,255,0.7);
    z-index: 3;
}
.pgf-door-handle::before,
.pgf-door-handle::after {
    content: '';
    position: absolute;
    left: 1px;
    width: 8px;
    height: 9px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--pgfx-champagne), var(--pgfx-brass));
    box-shadow: 0 1px 2px rgba(70,0,26,0.4);
}
.pgf-door-handle::before { top: 11px; }
.pgf-door-handle::after { bottom: 11px; }

/* ---- brass plaque, bevelled, four screws --------------------------- */

.pgf-door-plaque {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 292px;
    margin: 0 auto 0.85rem;
    padding: 0.8rem 1.2rem 0.85rem;
    border-radius: 4px;
    background-image:
        /* four screws */
        radial-gradient(circle at 9px 9px, rgba(255,255,255,0.75) 0 1px, rgba(120,84,40,0.9) 1.2px 2.6px, transparent 2.9px),
        radial-gradient(circle at calc(100% - 9px) 9px, rgba(255,255,255,0.75) 0 1px, rgba(120,84,40,0.9) 1.2px 2.6px, transparent 2.9px),
        radial-gradient(circle at 9px calc(100% - 9px), rgba(255,255,255,0.75) 0 1px, rgba(120,84,40,0.9) 1.2px 2.6px, transparent 2.9px),
        radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), rgba(255,255,255,0.75) 0 1px, rgba(120,84,40,0.9) 1.2px 2.6px, transparent 2.9px),
        /* specular sweep */
        linear-gradient(104deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.55) 46%, rgba(255,255,255,0) 60%),
        /* brass body */
        linear-gradient(178deg, var(--pgfx-brass-hi) 0%, var(--pgfx-champagne) 26%, var(--pgfx-brass) 74%, #A9773F 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.75),
        inset 0 -2px 3px rgba(90,58,20,0.45),
        inset 2px 0 3px rgba(255,255,255,0.35),
        0 4px 8px -2px rgba(70,0,26,0.5),
        0 1px 0 rgba(255,255,255,0.4);
}
.pgf-door-plaque-brand {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #4A2E10;
}
.pgf-door-plaque-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 0.02em;
    color: #331D05;
    margin-top: 0.16rem;
    text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}

.pgf-door-authorized {
    text-align: center;
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--pgfx-pink-deep);
    margin: 0 0 0.9rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(122,16,48,0.14);
}

/* ---- error / welcome blocks inside the door ------------------------ */

.pgf-door-error {
    font-family: 'Space Mono', monospace;
    font-size: 0.73rem;
    line-height: 1.55;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(184,25,92,0.35);
    border-left: 3px solid var(--pgfx-pink-deep);
    border-radius: 3px;
    color: var(--pgfx-wine);
    padding: 0.7rem 0.8rem;
    margin: 0 0 0.95rem;
}

.pgf-door-welcome { margin-bottom: 1rem; }
.pgf-door-welcome-line {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--pgfx-ink);
    margin: 0 0 0.35rem;
}
.pgf-door-welcome-sub {
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    color: var(--pgfx-green);
    margin: 0 0 0.55rem;
}
.pgf-door-welcome-note {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(36,16,23,0.66);
    margin: 0 0 0.8rem;
}
.pgf-door-id-row {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    padding: 0.36rem 0;
    border-top: 1px dashed rgba(122,16,48,0.2);
}
.pgf-door-id-row .label { color: rgba(36,16,23,0.55); }
.pgf-door-id-row .value { color: var(--pgfx-wine); }

/* ---- the login form, built into the door -------------------------- */

.pgf-door-form { margin: 0; }

.pgf-door-field { margin: 0 0 0.95rem; }
.pgf-door-field label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(36,16,23,0.68);
    margin: 0 0 0.4rem;
}
.pgf-door-field label .req { color: var(--pgfx-pink-deep); margin-left: 0.2em; }

.pgf-door-field input[type="text"],
.pgf-door-field input[type="email"],
.pgf-door-field input[type="password"] {
    width: 100%;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 0.94rem;
    padding: 0.68rem 0.8rem;
    border: 1px solid rgba(122,16,48,0.22);
    border-radius: 3px;
    background-color: rgba(255,255,255,0.72);
    color: var(--pgfx-ink);
    box-shadow: inset 0 1px 3px rgba(122,16,48,0.1);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pgf-door-field input:focus-visible {
    outline: 2px solid var(--pgfx-pink-deep);
    outline-offset: 1px;
    border-color: var(--pgfx-pink-deep);
}

/* subtle field icons, drawn in CSS against the existing input ids —
   no markup change and no id change */
#pgf-access-identifier,
#pgf-access-password {
    padding-left: 48px;
    background-repeat: no-repeat, no-repeat;
    background-position: 13px center, 0 0;
    background-size: 19px 19px, 100% 100%;
}
#pgf-access-identifier {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C77E9E' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.7'/%3E%3Cpath d='M4.8 20c0-4 3.2-6.6 7.2-6.6s7.2 2.6 7.2 6.6'/%3E%3C/svg%3E"),
        linear-gradient(90deg, transparent 0 39px, rgba(122,16,48,0.16) 39px 40px, transparent 40px);
}
#pgf-access-password {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C77E9E' stroke-width='1.7'%3E%3Crect x='4.8' y='10.4' width='14.4' height='9.6' rx='2.2'/%3E%3Cpath d='M8.4 10.4V7.9a3.6 3.6 0 0 1 7.2 0v2.5'/%3E%3C/svg%3E"),
        linear-gradient(90deg, transparent 0 39px, rgba(122,16,48,0.16) 39px 40px, transparent 40px);
}

.pgf-door-pw-row { position: relative; }
.pgf-door-pw-toggle {
    position: absolute;
    right: 0.7rem;
    bottom: 0.62rem;
    background: none;
    border: none;
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pgfx-pink-deep);
    cursor: pointer;
    padding: 0.15rem 0.1rem;
}
.pgf-door-pw-toggle:focus-visible { outline: 2px solid var(--pgfx-pink-deep); outline-offset: 2px; }

.pgf-door-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pgf-door-row-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0 0 1.05rem;
}
.pgf-door-remember {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    color: rgba(36,16,23,0.68);
    cursor: pointer;
}
.pgf-door-remember input {
    width: 14px;
    height: 14px;
    accent-color: var(--pgfx-pink-deep);
}
.pgf-door-forgot {
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    color: var(--pgfx-pink-deep);
    text-decoration: none;
    border-bottom: 1px solid rgba(184,25,92,0.5);
}
.pgf-door-forgot:hover, .pgf-door-forgot:focus-visible { color: var(--pgfx-wine); border-bottom-color: currentColor; }

.pgf-door-submit {
    width: 100%;
    padding: 0.95rem 1.4rem;
    background: linear-gradient(180deg, #EE3E84, var(--pgfx-pink) 42%, var(--pgfx-pink-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 3px;
    font-family: 'Space Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 6px 14px -6px rgba(122,16,48,0.7);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.pgf-door-submit:hover { filter: brightness(1.06); }
.pgf-door-submit:active { transform: translateY(1px); }
.pgf-door-submit:focus-visible { outline: 2px solid var(--pgfx-ink); outline-offset: 2px; }

/* ---- system status + barcode, pinned to the base of the door ------- */

.pgf-door-status-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(122,16,48,0.16);
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
    margin: 1.15rem 0 0;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.7);
}
.pgf-door-status-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.56rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--pgfx-pink-deep);
}
.pgf-door-status-value {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pgfx-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.pgf-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--pgfx-green);
    box-shadow: 0 0 5px 1px rgba(62,122,87,0.55);
    display: inline-block;
}

.pgf-door-barcode-wrap { text-align: center; margin-top: auto; padding-top: 1.1rem; }
.pgf-door-barcode {
    height: 34px;
    margin: 0 auto 0.35rem;
    max-width: 250px;
    /* three overlaid repeating gradients read as irregular bar widths */
    background-image:
        repeating-linear-gradient(90deg, rgba(36,16,23,0.92) 0 2px, transparent 2px 5px),
        repeating-linear-gradient(90deg, rgba(36,16,23,0.92) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(36,16,23,0.92) 0 3px, transparent 3px 11px);
}
.pgf-door-barcode span { display: none; }
.pgf-door-barcode-code {
    font-family: 'Space Mono', monospace;
    font-size: 0.63rem;
    letter-spacing: 0.16em;
    color: rgba(36,16,23,0.62);
}

/* ---- threshold / plinth -------------------------------------------- */

.pgf-door-threshold {
    position: relative;
    z-index: 1;
    width: calc(100% + 16px);
    height: 17px;
    margin-left: -8px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(180deg, #E3B6C6 0%, #CE97AC 55%, #B87F95 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        0 6px 12px -6px rgba(70,0,26,0.7);
}

/* ---- scanner sweep during verification ----------------------------- */

.pgf-door-frame::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--pgfx-pink) 50%, transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}
.pgf-access-lock-system.is-scanning .pgf-door-frame::after {
    animation: pgfxDoorScan 0.95s ease-out;
}
@keyframes pgfxDoorScan {
    0%   { top: 0;    opacity: 0.9; }
    100% { top: 100%; opacity: 0; }
}

/* ---- identity reader: mounted on the wall at hand height ----------- */

.pgf-access-reader {
    position: absolute;
    right: 0;
    top: calc(var(--pendant-space) + var(--door-h) * 0.46);
    z-index: 3;
    width: 92px;
    padding: 9px 8px 11px;
    border-radius: 13px;
    background: linear-gradient(168deg, #43242E 0%, #2A1219 55%, #1B0C11 100%);
    border: 1px solid rgba(216,176,124,0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.34rem;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 3px 0 rgba(70,0,26,0.35),
        14px 16px 26px -14px rgba(70,0,26,0.85);
    transition: box-shadow 0.3s ease;
}
.pgf-access-lock-system.is-active .pgf-access-reader {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 3px 0 rgba(70,0,26,0.35),
        14px 16px 26px -14px rgba(70,0,26,0.85),
        0 0 18px 2px rgba(255,196,120,0.35);
}

.pgf-reader-screen {
    width: 100%;
    height: 46px;
    border-radius: 7px;
    background: linear-gradient(180deg, #120709, #241016);
    border: 1px solid rgba(0,0,0,0.5);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.pgf-reader-light {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--pgfx-pink);
    box-shadow: 0 0 7px 2px rgba(231,42,118,0.8);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.pgf-access-lock-system.is-active .pgf-reader-light {
    background: #F2C94C;
    box-shadow: 0 0 9px 3px rgba(242,201,76,0.85);
}
.pgf-access-lock-system.is-granted .pgf-reader-light,
.pgf-access-lock-system.is-authenticated .pgf-reader-light {
    background: #59C98A;
    box-shadow: 0 0 9px 3px rgba(89,201,138,0.85);
}
.pgf-access-lock-system.is-denied .pgf-reader-light {
    background: #E86464;
    box-shadow: 0 0 9px 3px rgba(232,100,100,0.85);
}

.pgf-reader-heart { color: var(--pgfx-blush); font-size: 0.9rem; line-height: 1; }

.pgf-reader-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.45rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    text-align: center;
}
.pgf-reader-status {
    font-family: 'Space Mono', monospace;
    font-size: 0.53rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    line-height: 1.35;
    min-height: 2.1em;
}
.pgf-reader-stamp {
    font-family: 'Space Mono', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1.5px solid #59C98A;
    color: #59C98A;
    padding: 0.15rem 0.3rem;
    border-radius: 2px;
    opacity: 0;
    transform: scale(1.3);
    pointer-events: none;
    text-align: center;
}
.pgf-access-lock-system.is-granted .pgf-reader-stamp { animation: pgfxStampIn 0.45s ease-out forwards; }
.pgf-access-lock-system.is-authenticated .pgf-reader-stamp { opacity: 0.92; transform: scale(1) rotate(-5deg); }
.pgf-access-lock-system.is-denied .pgf-reader-stamp {
    border-color: #E86464;
    color: #E86464;
    animation: pgfxStampIn 0.45s ease-out forwards;
}
@keyframes pgfxStampIn {
    from { opacity: 0; transform: scale(1.5) rotate(-14deg); }
    to   { opacity: 0.92; transform: scale(1) rotate(-5deg); }
}

/* ---- entrance mat, lying on the floor ------------------------------ */

.pgf-access-mat {
    position: absolute;
    bottom: 30px;
    left: calc((var(--door-w) + var(--casing) * 2) / 2);
    width: 320px;
    margin: 0;
    padding: 1.15rem 1rem;
    text-align: center;
    border-radius: 6px;
    background:
        repeating-linear-gradient(94deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 5px),
        linear-gradient(180deg, #F3D3D9 0%, #E8BCC7 100%);
    box-shadow:
        inset 0 0 0 5px rgba(255,255,255,0.28),
        inset 0 2px 5px rgba(255,255,255,0.55),
        0 -6px 16px -6px rgba(70,0,26,0.5);
    transform: translateX(-50%) perspective(300px) rotateX(56deg);
    transform-origin: center top;
    z-index: 1;
}
.pgf-access-mat span {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.85;
    color: #A8265C;
}

/* ================================================================
   TABLET
   ================================================================ */

@media (max-width: 1200px) {
    /* the wall props need real breathing room — below this width the
       wall is genuinely too narrow to hold them without crowding */
    .pgf-wall-props { display: none; }
}

@media (max-width: 1080px) {
    .pgf-access-page { --door-w: 360px; --arch: 180px; --door-h: 610px; }
    .pgf-access-columns { grid-template-columns: 0.9fr 1.1fr; gap: 2rem; }
    .pgf-access-lock-system { max-width: 490px; }
}

/* ================================================================
   MOBILE — an intentional adaptation, not a squeezed desktop.
   Order: story -> door + login -> reader/security -> invitation.
   Achieved with display:contents so the invitation is never
   duplicated in the DOM.
   ================================================================ */

@media (max-width: 900px) {
    .pgf-access-page {
        --door-w: min(340px, 78vw);
        --arch: min(170px, 39vw);
        --door-h: 590px;
        --pendant-space: 96px;
        --floor-space: 132px;
    }

    .pgf-access-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.6rem;
        justify-items: center;
        text-align: center;
    }

    .pgf-access-intro { display: contents; }

    .pgf-access-brand      { order: 1; }
    .pgf-access-headline   { order: 2; }
    .pgf-access-subline    { order: 3; }
    .pgf-access-rule       { order: 4; margin-inline: auto; }
    .pgf-access-welcome    { order: 5; }
    .pgf-access-tagline    { order: 6; margin-bottom: 0.5rem; }
    .pgf-access-notes      { order: 7; }
    .pgf-access-side       { order: 8; width: 100%; }
    .pgf-torn-invite       { order: 9; }
    .pgf-access-badges     { order: 10; }
    .pgf-access-footer-marks { order: 11; }
    .pgf-access-property   { order: 12; }

    /* notes stop overlapping and stack, keeping the clip + kiss */
    .pgf-access-notes {
        position: static;
        min-height: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem 1.1rem;
        margin-bottom: 0.5rem;
    }
    .pgf-note { position: static; }
    .pgf-note-pin { width: 138px; }
    .pgf-note-clip { width: 190px; }

    .pgf-access-badges { justify-content: center; margin-bottom: 1.2rem; }
    .pgf-torn-invite { margin-inline: auto; }
    .pgf-access-footer-marks { justify-content: center; }
    .pgf-access-lock-system { max-width: 100%; }
    .pgf-door-assembly { margin: 0 auto; }

    /* the reader moves below the door so it can't crowd it, and stays
       in the required reading order: door -> reader -> invitation */
    .pgf-access-reader {
        position: static;
        width: 100%;
        max-width: 300px;
        margin: 1.1rem auto 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.5rem 0.7rem;
        padding: 0.7rem 0.9rem;
    }
    .pgf-reader-screen { width: 54px; height: 36px; }
    .pgf-reader-status { min-height: 0; }

    .pgf-access-mat { width: min(300px, 76vw); }
}

@media (max-width: 620px) {
    .pgf-access-page {
        --door-w: min(320px, 74vw);
        --arch: min(160px, 37vw);
        --door-h: 560px;
        --casing: 14px;
        --trim: 7px;
        --floor-space: 118px;
    }
    .pgf-door-frame { padding: 74px 22px 22px; }
    .pgf-door-hinge { width: 12px; height: 38px; }
    .pgf-door-hinge-top { top: 150px; }
    .pgf-door-handle { right: 12px; height: 84px; margin-top: -42px; }
    .pgf-door-plaque { max-width: 100%; padding: 0.7rem 0.8rem 0.75rem; }
    .pgf-door-plaque-title { font-size: 0.9rem; }
    .pgf-access-mat { bottom: 22px; padding: 0.95rem 0.8rem; }
    .pgf-access-mat span { font-size: 0.62rem; letter-spacing: 0.09em; }
    .pgf-note-clip { width: min(240px, 86vw); }
    .pgf-access-seal { width: 90px; height: 90px; }
    .pgf-door-row-controls { flex-direction: column; align-items: flex-start; }
    .pgf-torn-invite { max-width: min(306px, 90vw); }
}

/* ================================================================
   REDUCED MOTION — end states shown instantly, nothing sweeps.
   The static perspective/rotation transforms are not motion and
   are deliberately kept.
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .pgf-door-frame,
    .pgf-door-submit,
    .pgf-access-reader,
    .pgf-door-field input { transition: none !important; }

    .pgf-access-lock-system.is-active .pgf-door-frame { transform: none !important; }
    .pgf-door-frame::after { display: none !important; }
    .pgf-door-submit:active { transform: none !important; }

    .pgf-reader-stamp { animation: none !important; }
    .pgf-access-lock-system.is-granted .pgf-reader-stamp,
    .pgf-access-lock-system.is-denied .pgf-reader-stamp {
        opacity: 0.92 !important;
        transform: scale(1) rotate(-5deg) !important;
    }
}