/* =========================================================================
   about-pass.css — About option 3: an ID "pass card" on the sky with
   annotated call-outs (after the Heron Preston pass card).
   Frame positions are in % of the frame and sizes in cqw so it scales as one piece.
   Markup: js/components/about/pass.js.
   ========================================================================= */

.pass{position:relative;width:min(1180px,100%,calc((100vh - 130px) / .66));aspect-ratio:1/.66;container-type:inline-size;color:#fff}
.pass>*{position:absolute;margin:0;box-sizing:border-box}

/* ---------- around the card: lines, notes, corners ---------- */
.ps-lines{inset:0;width:100%;height:100%;pointer-events:none}
.ps-corner{font-size:max(9px,.75cqw);line-height:1.6;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.ps-tl{left:0;top:0}
.ps-tr{right:0;top:0;text-align:right}
.ps-note{display:flex;align-items:flex-start;gap:.5cqw;font-size:max(9px,.78cqw);letter-spacing:.06em}
.ps-note i{font-style:normal;opacity:.85}
.ps-note b{font-weight:600;border:1px solid #fff;padding:.25cqw .55cqw;line-height:1.35}
.ps-note small{align-self:flex-end;font-size:max(8px,.7cqw);writing-mode:vertical-rl;transform:rotate(180deg);opacity:.9}
.ps-thumb{display:block;width:6cqw;aspect-ratio:3/4;border:1px solid #fff;padding:.3cqw}
.ps-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2);display:block}
.ps-codes{display:flex;align-items:center;gap:.6cqw}
.ps-codes span{display:block;width:6cqw;height:1.6cqw;background:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 3px,#fff 3px 5px,transparent 5px 6px)}
/* note positions (the matching lines are in pass.js) */
.ps-a{left:13.5%;top:3%}.ps-b{left:37%;top:11.5%}.ps-c{left:82%;top:13%}.ps-d{left:89.5%;top:49%}
.ps-e{left:3%;top:54%}.ps-f{left:5%;top:84%}.ps-g{left:45%;top:87.5%}
.ps-logo{left:0;bottom:0;font-family:var(--display);font-style:italic;font-weight:500;font-size:3.4cqw;line-height:.9}
.ps-logo small{display:block;font-family:var(--ui);font-style:normal;font-weight:700;font-size:.8cqw;letter-spacing:.3em;text-transform:uppercase}
.ps-count{right:0;bottom:0;display:flex;gap:.5cqw;align-items:center;font-size:max(9px,.85cqw);letter-spacing:.1em}
.ps-count span{display:grid;place-items:center;width:1.6cqw;height:1.6cqw;border:1px solid #fff;font-weight:700}

/* ---------- the card ---------- */
.ps-card{left:19%;top:26%;width:63%;height:50%;display:grid;grid-template-columns:31% 1fr;padding:1.6cqw;background:#efeee9;color:#111;border-radius:1.6cqw;box-shadow:0 2px 0 rgba(0,0,0,.05),0 40px 80px -36px rgba(20,40,90,.6);transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1);overflow:hidden;will-change:transform}
/* left: portrait, name band, barcode + QR */
.ps-left{display:grid;grid-template-rows:1fr auto auto;gap:.8cqw;padding-right:1.6cqw;border-right:1.5px dashed #9a9c9f}
.ps-photo{position:relative;overflow:hidden;background:#d9dbdf}
.ps-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.ps-vlabel{position:absolute;left:.5cqw;top:.6cqw;writing-mode:vertical-rl;transform:rotate(180deg);font-size:max(8px,.7cqw);letter-spacing:.12em;color:#fff;background:#111;padding:.4cqw .2cqw}
.ps-band{background:#1c2f6b;color:#fff;text-align:center;white-space:nowrap;font-family:var(--display);font-style:italic;font-weight:500;font-size:1.75cqw;line-height:1;padding:.6cqw .4cqw}
.ps-codes2{display:flex;gap:.6cqw;height:3.4cqw}
.ps-bar{flex:1;background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 5px,transparent 5px 8px,#111 8px 11px,transparent 11px 12px)}
.ps-qr{width:3.4cqw;background:conic-gradient(#111 25%,transparent 0 50%,#111 0 75%,transparent 0) 0 0/33.4% 33.4%;outline:2px solid #111;outline-offset:-2px}
/* right: title, fields, call to action, stamp */
.ps-right{position:relative;display:grid;grid-template-rows:auto 1fr auto;padding-left:2cqw;min-width:0}
.ps-head h1{font-size:4.2cqw;line-height:.9;text-transform:uppercase;letter-spacing:.01em}
.ps-head small{display:block;margin-top:.4cqw;font-size:max(8px,.68cqw);letter-spacing:.14em;text-transform:uppercase;color:#55585e}
.ps-fields{margin:1.4cqw 0 0;display:grid;align-content:center;gap:1cqw}
.ps-fields div{display:grid;grid-template-columns:8cqw 1fr;align-items:baseline}
.ps-fields dt{font-family:var(--display);font-style:italic;font-weight:500;font-size:2.1cqw}
.ps-fields dd{margin:0;font-size:max(12px,1.2cqw);letter-spacing:.02em}
.ps-cta{justify-self:start;font-family:var(--display);font-style:italic;font-weight:500;font-size:2.1cqw;border-bottom:1px solid #111;color:#111}
.ps-cta span{display:inline-block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.ps-cta:hover span{transform:translateX(5px)}
.ps-stamp{position:absolute;right:5%;top:41%;width:13cqw;transform:rotate(-10deg);opacity:.9}
/* a glint that slides across as the card tilts (driven by pass.js) */
.ps-sheen{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,rgba(190,215,255,.25) 50%,transparent 62%);background-size:250% 250%;background-position:var(--sx,100%) 0;mix-blend-mode:soft-light;opacity:.9}

@media (max-width:760px){
  .pass{aspect-ratio:auto;display:grid;gap:16px}
  .pass>*{position:static}
  .ps-lines,.ps-note,.ps-corner,.ps-count{display:none}
  .ps-card{grid-template-columns:1fr;width:auto;height:auto;padding:14px;border-radius:16px}
  .ps-left{padding:0 0 14px;border-right:0;border-bottom:1.5px dashed #9a9c9f;grid-template-rows:auto}
  .ps-photo{aspect-ratio:4/5}.ps-band{font-size:18px;padding:8px}.ps-codes2{height:34px}.ps-qr{width:34px}
  .ps-right{padding:14px 0 0}.ps-head h1{font-size:34px}.ps-head small{font-size:9px}
  .ps-fields div{grid-template-columns:90px 1fr}.ps-fields dt{font-size:20px}.ps-fields dd{font-size:14px}
  .ps-cta{font-size:18px}.ps-stamp{width:110px}
  .ps-logo{font-size:30px}.ps-logo small{font-size:9px}
}