/* ==========================================================================
   Polaris Society — membership application (/apply)
   Extends the main site's language (css/style.css tokens, DM Serif Display +
   Inter, cream/ink/accent palette). Editorial, intimate, understated.
   ========================================================================== */

:root {
  --bg: #fbf9f4;
  --bg-alt: #f1ede3;
  --ink: #16151b;
  --ink-dim: #5c5a56;
  --ink-faint: #8a8681;
  --accent: #4275d2;
  --accent-dim: #2e56a8;
  --accent-wash: rgba(66, 117, 210, 0.09);
  --line: rgba(22, 21, 27, 0.14);
  --line-soft: rgba(22, 21, 27, 0.09);
  --field-bg: #ffffff;
  --danger: #b23b3b;
  --display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --shell: 620px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--accent); color: #fffaf5; }

/* ---------- Scroll progress ---------- */
.apply-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 200;
  background: transparent;
  pointer-events: none;
}
.apply-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .apply-progress span { transition: transform 0.08s linear; }
}

/* ---------- Header ---------- */
.apply-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 32px) 5vw 0;
}
.apply-mark {
  display: inline-flex;
  padding: 6px;
  border-radius: 50%;
}
.apply-mark:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.apply-mark__svg {
  width: clamp(96px, 15vw, 140px);
  height: auto;
  display: block;
}

/* ---------- Shell ---------- */
.apply-main {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(24px, 4.5vw, 44px) 24px clamp(96px, 16vw, 160px);
}

/* ---------- Intro ---------- */
.apply-intro {
  margin-bottom: clamp(48px, 8vw, 76px);
  text-align: center;
}

.apply-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: clamp(8px, 2vw, 16px) 0 24px;
}

.apply-lede {
  max-width: 40ch;
  margin: 0 auto;
  font-size: clamp(1.02rem, 2vw, 1.16rem);
  line-height: 1.62;
  color: var(--ink-dim);
}
.apply-lede p + p { margin-top: 1.15em; }

/* ---------- Membership unlocks ---------- */
/* Same type as .apply-lede so the two blocks read as one voice; the
   "Member Unlocks" label is just a bold lead-in. */
.apply-unlocks {
  max-width: 40ch;
  margin: clamp(30px, 5vw, 42px) auto 0;
  text-align: left;
  font-size: clamp(1.02rem, 2vw, 1.16rem);
  line-height: 1.62;
  color: var(--ink-dim);
}
.apply-unlocks__title {
  text-align: center;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}
.apply-unlocks ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.apply-unlocks li {
  position: relative;
  padding-left: 20px;
}
.apply-unlocks li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.apply-curation {
  margin-top: clamp(38px, 6vw, 52px);
  font-style: italic;
  font-size: clamp(1.02rem, 2vw, 1.16rem);
  line-height: 1.62;
  color: var(--ink-faint);
}
.apply-curation::before {
  content: '';
  display: block;
  width: min(560px, 96%);
  height: 1px;
  background: var(--line);
  margin: 0 auto clamp(22px, 4vw, 30px);
}
.apply-curation span { display: block; }

/* ---------- Form structure ---------- */
.apply-form { display: block; }
.apply-form[hidden] { display: none; }

.apply-section {
  padding: clamp(38px, 6vw, 52px) 0;
  border-top: 1px solid var(--line-soft);
}
.apply-section:first-child { border-top: 0; padding-top: clamp(8px, 2vw, 16px); }

.apply-section__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 30px;
}

.apply-field { margin-bottom: 34px; }
.apply-field:last-child { margin-bottom: 0; }

.apply-field__label,
.apply-fieldset__legend {
  display: block;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 12px;
}

.apply-field__req {
  color: var(--ink-faint);
  font-weight: 300;
}
.apply-optional {
  color: var(--ink-faint);
  font-size: 0.85rem;
  font-weight: 300;
}

.apply-field__help {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-faint);
  margin: -2px 0 14px;
}

/* ---------- Text / email / number / textarea ---------- */
.apply-input,
.apply-textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.apply-input::placeholder,
.apply-textarea::placeholder { color: #b8b3aa; }

.apply-input:hover,
.apply-textarea:hover { border-color: rgba(22, 21, 27, 0.26); }

.apply-input:focus-visible,
.apply-textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.apply-textarea {
  min-height: 132px;
  resize: vertical;
}

.apply-input[aria-invalid='true'],
.apply-textarea[aria-invalid='true'] {
  border-color: var(--danger);
}
.apply-input[aria-invalid='true']:focus-visible,
.apply-textarea[aria-invalid='true']:focus-visible {
  box-shadow: 0 0 0 3px rgba(178, 59, 59, 0.14);
}

/* ---------- Choice groups (chips) ---------- */
.apply-fieldset { border: 0; }
.apply-fieldset__legend { padding: 0; }

.apply-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.apply-chip {
  position: relative;
  display: inline-flex;
}
.apply-chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.apply-chip__label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field-bg);
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--ink-dim);
  line-height: 1.2;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
/* Underline that draws left→right when the pill is selected, in the
   same accent blue as the active border. Width (not scaleX) is animated so
   the 2px line stays crisp and a constant thickness the whole sweep. */
.apply-chip__label::after {
  content: '';
  position: absolute;
  left: 17px;
  bottom: 5px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.apply-chip input:hover + .apply-chip__label {
  border-color: rgba(22, 21, 27, 0.3);
  color: var(--ink);
}
.apply-chip input:checked + .apply-chip__label {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-dim);
  font-weight: 400;
}
.apply-chip input:checked + .apply-chip__label::after {
  width: calc(100% - 34px);
}
@media (prefers-reduced-motion: reduce) {
  .apply-chip__label::after { transition: none; }
}
.apply-chip input:focus-visible + .apply-chip__label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.apply-chip input:disabled + .apply-chip__label {
  opacity: 0.42;
  cursor: not-allowed;
}
.apply-chip input:disabled { cursor: not-allowed; }

.apply-choices[data-limit-reached='true'] .apply-chip input:not(:checked):not(:disabled) + .apply-chip__label {
  opacity: 0.5;
}

.apply-choicecount {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.apply-choicecount[data-at-limit='true'] { color: var(--accent-dim); }

/* ---------- Conditional "Other" reveal ---------- */
.apply-conditional {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows 0.28s ease, opacity 0.24s ease, margin-top 0.28s ease;
}
.apply-conditional > div { overflow: hidden; min-height: 0; }
.apply-conditional.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .apply-conditional { transition: none; }
}

/* ---------- Inline error ---------- */
.apply-field__error {
  display: block;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--danger);
  margin-top: 8px;
}
.apply-field__error:empty { display: none; }

/* ---------- Footer / submit ---------- */
.apply-formfoot {
  padding-top: clamp(30px, 5vw, 44px);
  border-top: 1px solid var(--line-soft);
  text-align: center;
}

.apply-error-summary {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(178, 59, 59, 0.3);
  border-radius: 12px;
  background: rgba(178, 59, 59, 0.06);
  color: var(--danger);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
}
.apply-error-summary[hidden] { display: none; }

.apply-submit {
  --spin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 260px;
  padding: 16px 34px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #fffaf5;
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.22s ease, background 0.22s ease, opacity 0.22s ease;
}
.apply-submit:hover:not(:disabled) { background: #5c86dc; transform: translateY(-2px); }
.apply-submit:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 3px; }
.apply-submit:disabled { cursor: not-allowed; opacity: 0.62; }
.apply-submit.is-submitting { opacity: 0.9; }

.apply-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 250, 245, 0.4);
  border-top-color: #fffaf5;
  border-radius: 50%;
  animation: apply-spin 0.7s linear infinite;
  display: none;
}
.apply-submit.is-submitting .apply-spinner { display: block; }
@keyframes apply-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .apply-spinner { animation-duration: 1.4s; }
  .apply-submit:hover:not(:disabled) { transform: none; }
}

/* ---------- Honeypot (visually + AT hidden, still focusable off-tab) ---------- */
.apply-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Success state ---------- */
.apply-success {
  padding: clamp(24px, 6vw, 48px) 0;
  scroll-margin-top: clamp(24px, 10vh, 96px);
  animation: apply-fade-in 0.5s ease both;
}
.apply-success[hidden] { display: none; }
@keyframes apply-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .apply-success { animation: none; }
}
.apply-success__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.apply-success__body {
  max-width: 46ch;
  font-size: 1.08rem;
  line-height: 1.62;
  color: var(--ink-dim);
  margin-bottom: 34px;
}
.apply-success__id {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 34px;
}
.apply-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dim);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: color 0.18s ease;
}
.apply-back:hover { color: var(--accent); }
.apply-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .apply-main { padding-left: 20px; padding-right: 20px; }
  .apply-choices { gap: 8px; }
  .apply-chip__label { padding: 9px 15px; font-size: 0.9rem; }
  .apply-chip__label::after { left: 15px; }
  .apply-chip input:checked + .apply-chip__label::after { width: calc(100% - 30px); }
  .apply-submit { width: 100%; min-width: 0; }
}

/* ==========================================================================
   Live "Membership Dossier" passport  (js/apply-passport.js)
   Decorative mirror of the form. Aged-paper dossier inside a worn dark
   cover: real typewriter faces (Courier Prime / Special Elite), fibrous
   paper texture, edge vignette, a distressed PENDING stamp.
   ========================================================================== */
.passport {
  --pp-cover-a: #241f18;
  --pp-cover-b: #131110;
  --pp-paper: #e9dcbf;
  --pp-ink: #322b1f;
  --pp-ink-soft: #7a6b4c;
  --pp-ink-faint: #ab9a74;
  --pp-rule: rgba(58, 46, 26, 0.34);
  --pp-gold: #b0894f;
  --pp-stamp: #a63a2c;
  --pp-mono: 'Courier Prime', 'Courier New', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --pp-display: 'Special Elite', 'Courier Prime', 'Courier New', monospace;
  /* grayscale paper-fibre noise, tiled */
  --pp-fibre:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  /* light speckle to fray the rubber stamp without eating the word */
  --pp-speckle:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.075' numOctaves='2' seed='4'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.15 0.92'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  /* hand-printed field rule: a hairline given an uneven, slightly wavering
     ink weight by feDisplacement — not a crisp 1px CSS border */
  --pp-line-img:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='6' preserveAspectRatio='none'%3E%3Cfilter id='l' x='-2%25' y='-80%25' width='104%25' height='260%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35 0.9' numOctaves='2' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.3' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cline x1='0' y1='3.4' x2='340' y2='3.4' stroke='%233a2e1a' stroke-opacity='0.72' stroke-width='1.2' stroke-linecap='round' filter='url(%23l)'/%3E%3C/svg%3E");

  width: 100%;
  margin-top: clamp(44px, 9vw, 80px);
}

/* Widen past the form column on roomy screens, without ever causing the
   page body to scroll sideways. */
@media (min-width: 1000px) {
  .passport {
    width: min(900px, 92vw);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

/* ---- cover ---- */
.pp-book {
  display: flex;
  align-items: stretch;
  background:
    radial-gradient(130% 90% at 28% 15%, rgba(255, 248, 235, 0.06), transparent 55%),
    linear-gradient(158deg, var(--pp-cover-a), var(--pp-cover-b));
  background-blend-mode: screen, normal;
  border-radius: 13px 16px 14px 17px;
  padding: clamp(9px, 1.5vw, 16px);
  box-shadow:
    0 36px 64px -28px rgba(10, 8, 6, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    inset 0 1px 2px rgba(255, 255, 255, 0.06),
    inset 0 -3px 8px rgba(0, 0, 0, 0.4);
}

/* ---- pages ---- */
.pp-page {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  isolation: isolate;
  padding: clamp(22px, 3.2vw, 36px) clamp(18px, 3vw, 32px);
  color: var(--pp-ink);
  background-color: var(--pp-paper);
}
/* fibre + mottle + edge vignette (behind the text) */
.pp-page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(62% 52% at 16% 10%, rgba(120, 92, 44, 0.12), transparent 72%),
    radial-gradient(52% 42% at 88% 26%, rgba(120, 92, 44, 0.10), transparent 72%),
    radial-gradient(58% 46% at 74% 92%, rgba(86, 62, 26, 0.13), transparent 72%),
    radial-gradient(44% 38% at 30% 72%, rgba(255, 250, 232, 0.4), transparent 70%);
  box-shadow:
    inset 0 0 72px rgba(74, 54, 22, 0.22),
    inset 0 0 22px rgba(74, 54, 22, 0.16);
}
.pp-page::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--pp-fibre);
  background-size: 190px 190px;
  mix-blend-mode: multiply;
  opacity: 0.32;
}
.pp-page > * { position: relative; z-index: 2; }
.pp-page--id {
  padding-left: clamp(32px, 4.4vw, 46px);
  border-radius: 8px 3px 3px 8px;
}
.pp-page--brand {
  display: flex;
  flex-direction: column;
  border-radius: 3px 8px 8px 3px;
}

.pp-gutter {
  flex: 0 0 0;
  overflow: visible;
  position: relative;
  z-index: 2;
}
.pp-gutter::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -15px;
  width: 30px;
  background: linear-gradient(
    to right,
    rgba(20, 16, 10, 0) 0%,
    rgba(20, 16, 10, 0.13) 46%,
    rgba(20, 16, 10, 0.18) 50%,
    rgba(20, 16, 10, 0.13) 54%,
    rgba(20, 16, 10, 0) 100%
  );
}

/* ---- shared bits ---- */
.pp-brandline {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 0.64rem/1 var(--pp-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pp-ink-soft);
}
.pp-brandline--split { justify-content: space-between; width: 100%; }
.pp-pageno { letter-spacing: 0.12em; color: var(--pp-ink-soft); }

.pp-title {
  font-family: var(--pp-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.5vw, 2.05rem);
  line-height: 1.05;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--pp-ink);
  margin: 7px 0 18px;
  text-shadow: 0 0 0.6px rgba(50, 43, 31, 0.4);
}

.pp-row__label {
  font: 400 0.6rem/1.25 var(--pp-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pp-ink-soft);
}

.pp-id { margin-bottom: 18px; }
.pp-id__value {
  margin-top: 6px;
  font: 700 1.02rem/1 var(--pp-mono);
  letter-spacing: 0.08em;
  color: var(--pp-stamp);
  text-shadow: 0 0 0.5px rgba(166, 58, 44, 0.35);
}

.pp-rows { display: block; }
.pp-row {
  position: relative;
  padding: 11px 0 9px;
}
/* Field rule drawn as a slightly wavering, ink-broken printed line
   (feDisplacement on a hairline) rather than a crisp 1px CSS border. */
.pp-row::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--pp-line-img) left bottom / 340px 100% repeat-x;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* shift the tile per row so the wave never lines up between rows */
.pp-row:nth-child(2n)::after { background-position-x: -53px; }
.pp-row:nth-child(3n)::after { background-position-x: 97px; }
.pp-row:nth-child(4n)::after { background-position-x: -151px; }
.pp-row__value {
  margin-top: 7px;
  font: 700 1.02rem/1.32 var(--pp-mono);
  letter-spacing: 0.005em;
  color: var(--pp-ink);
  min-height: 1.32em;
  overflow-wrap: anywhere;
  text-shadow: 0 0 0.45px rgba(50, 43, 31, 0.32);
}
.pp-row__value[data-empty='true'] {
  color: var(--pp-ink-faint);
  font-weight: 400;
  text-shadow: none;
}

.pp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 8px;
  min-height: 1.7em;
}
.pp-chip {
  padding: 5px 11px 4px;
  border: 1px solid var(--pp-rule);
  border-radius: 999px;
  background: rgba(255, 250, 235, 0.35);
  font: 400 0.78rem/1 var(--pp-mono);
  letter-spacing: 0.02em;
  color: var(--pp-ink);
}
.pp-chips__placeholder {
  font: 400 1rem/1.32 var(--pp-mono);
  color: var(--pp-ink-faint);
}
.pp-chips[data-empty='false'] .pp-chips__placeholder { display: none; }
.pp-chips[data-empty='true'] .pp-chip { display: none; }

.pp-meta {
  display: flex;
  gap: clamp(18px, 4vw, 34px);
  align-items: flex-end;
  margin-top: 24px;
}
.pp-meta__block { display: flex; flex-direction: column; gap: 8px; }
.pp-meta__date {
  font: 700 0.94rem/1 var(--pp-mono);
  letter-spacing: 0.05em;
  color: var(--pp-ink);
  text-shadow: 0 0 0.45px rgba(50, 43, 31, 0.3);
}
.pp-meta__date[data-empty='true'] {
  color: var(--pp-ink-faint);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-shadow: none;
}

/* worn rubber stamp: distressed via a high-contrast speckle mask + multiply */
.pp-stamp {
  align-self: flex-start;
  padding: 6px 13px 5px;
  border: 3px solid var(--pp-stamp);
  border-radius: 4px;
  font: 400 0.86rem/1 var(--pp-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pp-stamp);
  transform: rotate(-7deg);
  opacity: 1;
  mix-blend-mode: multiply;
  -webkit-mask-image: var(--pp-speckle);
  mask-image: var(--pp-speckle);
  -webkit-mask-size: 180px 180px;
  mask-size: 180px 180px;
}

.pp-fineprint {
  margin-top: 22px;
  max-width: 34ch;
  font: 400 0.58rem/1.6 var(--pp-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pp-ink-soft);
}

.pp-serial {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font: 400 0.62rem/1 var(--pp-mono);
  letter-spacing: 0.36em;
  color: rgba(58, 46, 26, 0.42);
  pointer-events: none;
}

/* faded O-mark, pressed into the top-right corner like a stamp */
.pp-watermark {
  position: absolute;
  top: clamp(10px, 1.8vw, 16px);
  right: clamp(12px, 2.4vw, 22px);
  width: clamp(46px, 7.5vw, 66px);
  height: auto;
  opacity: 0.09;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---- right page ---- */
.pp-page--brand {
  /* faint dashed document frame inset from the page edge */
  outline: 1px dashed var(--pp-rule);
  outline-offset: clamp(-18px, -2.6vw, -12px);
}
/* same treatment as .pp-title (Special Elite, regular weight), just smaller */
.pp-motto {
  font-family: var(--pp-display);
  font-weight: 400;
  font-size: clamp(1rem, 2.3vw, 1.2rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pp-ink);
  margin: 10px 0 clamp(16px, 3vw, 22px);
  max-width: 22ch;
  text-shadow: 0 0 0.6px rgba(50, 43, 31, 0.4);
}

/* ---- stamp grid: placed stamps + empty perforated frames ---- */
.pp-stamp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    'nyc polaris'
    '.   .';
  gap: clamp(14px, 3vw, 22px);
  align-items: start;
  padding: clamp(12px, 2.6vw, 20px);
  border: 1px dashed var(--pp-rule);
  border-radius: 3px;
  margin: clamp(4px, 1.5vw, 10px) 0 auto;
}
.pp-slot {
  --pr: 3px;   /* perforation radius */
  --ps: 11px;  /* perforation pitch  */
  position: relative;
  border-radius: 2px;
}
/* reserve each cell's box up front (aspect ratio) so nothing collapses
   before the image decodes */
.pp-slot--nyc { grid-area: nyc; aspect-ratio: 1214 / 1295; }
.pp-slot--polaris { grid-area: polaris; aspect-ratio: 1; }
.pp-slot--creators,
.pp-slot--society { aspect-ratio: 1; align-self: center; justify-self: center; width: 82%; }

/* a placed stamp already carries its own perforated edge — just seat it */
.pp-slot:has(img) {
  background: none;
}
.pp-slot > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 9px rgba(20, 16, 10, 0.26));
}
.pp-slot--nyc > img { transform: rotate(-4deg); }
.pp-slot--polaris > img { transform: rotate(2.2deg); }
/* round rubber stamps: ink pressed into the paper, not an object on top */
.pp-slot--creators > img,
.pp-slot--society > img {
  filter: none;
  mix-blend-mode: multiply;
  opacity: 0.92;
}
.pp-slot--creators > img {
  transform: rotate(-5deg);
  /* older / more worn impression than the blue one */
  opacity: 0.6;
  filter: saturate(0.68);
}
.pp-slot--society > img { transform: rotate(4deg); }

/* an empty cell: a perforated paper frame awaiting art */
.pp-slot:not(:has(img)) {
  aspect-ratio: 1 / 1;
  background: rgba(120, 92, 44, 0.045);
  box-shadow: inset 0 0 0 1px var(--pp-ink-soft);
}
/* paper-coloured bites straddling the frame line -> postage perforations */
.pp-slot:not(:has(img))::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--pr));
  pointer-events: none;
  background:
    radial-gradient(var(--pr) at 50% var(--pr), var(--pp-paper) 96%, #0000) 50% 0 / var(--ps) 100% repeat-x,
    radial-gradient(var(--pr) at 50% calc(100% - var(--pr)), var(--pp-paper) 96%, #0000) 50% 100% / var(--ps) 100% repeat-x,
    radial-gradient(var(--pr) at var(--pr) 50%, var(--pp-paper) 96%, #0000) 0 50% / 100% var(--ps) repeat-y,
    radial-gradient(var(--pr) at calc(100% - var(--pr)) 50%, var(--pp-paper) 96%, #0000) 100% 50% / 100% var(--ps) repeat-y;
}

/* ---- footer ---- */
.pp-brandfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: clamp(14px, 3vw, 20px);
  font: 400 0.58rem/1.6 var(--pp-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--pp-ink-soft);
}
.pp-brandfoot__star { width: 20px; height: 20px; flex: none; }
.pp-emblem__g path { fill: var(--pp-gold); }
.pp-brandfoot__est { white-space: nowrap; }

/* ---- subtle "ink lands" cue on change ---- */
@keyframes pp-pulse { from { opacity: 0.4; } to { opacity: 1; } }
.pp-pulse { animation: pp-pulse 260ms ease-out; }

/* ---- stacked on narrow screens ---- */
@media (max-width: 760px) {
  .passport { width: 100%; }
  .pp-book { flex-direction: column; }
  .pp-gutter { display: none; }
  .pp-page { flex: none; width: 100%; }
  .pp-page--id { border-radius: 8px 8px 3px 3px; }
  .pp-page--brand { border-radius: 3px 3px 8px 8px; border-top: 1px solid rgba(42, 42, 48, 0.14); }
  .pp-stamp-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-pulse { animation: none; }
}