/* ===========================================================================
   Passeport Quack — République des Canards  ·  karldaly.ie v3
   Ported from the "Double Frappe" design mockup to static CSS.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=IM+Fell+English:ital@0;1&family=Mrs+Saint+Delafield&display=swap');

:root {
  --leather: #3a1c0c;
  --leather-2: #5a2a14;
  --gold: #c9a96a;
  --ink-dark: #1a0f06;
  --parchment: #f0e6c8;
  --parchment-edge: #e0d3a8;
  --label: #5a3f1c;
  --serif: "IM Fell English", "Cormorant Garamond", Georgia, serif;
  --body: "Cormorant Garamond", Georgia, serif;
  --mono: "Courier New", monospace;
  --hand: "Mrs Saint Delafield", "Cormorant Garamond", cursive;
}

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

body {
  background: var(--leather);
  min-height: 100vh;
  font-family: var(--serif);
  color: var(--ink-dark);
}

/* --- leather backdrop --------------------------------------------------- */
.passport {
  position: relative;
  padding: 32px 24px 48px;
  min-height: 100vh;
}
.passport__leather {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(180,120,60,0.15) 0, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(180,120,60,0.10) 0, transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.15  0 0 0 0 0.05  0 0 0 0 0.25 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* --- open spread (two pages + spine) ------------------------------------ */
.spread {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1240px;
  margin: 0 auto 28px;
  background: var(--parchment);
  border: 4px solid var(--ink-dark);
  box-shadow: 0 30px 60px rgba(0,0,0,0.55), 0 10px 30px rgba(0,0,0,0.4);
  z-index: 1;
}
.spread__spine {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 14px);
  width: 28px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 20%, rgba(0,0,0,0.45) 50%,
    rgba(0,0,0,0.25) 80%, rgba(0,0,0,0) 100%);
}

/* each page slot in a spread — clean parchment; inner page fills it via flex.
   min-height matches the reference passport page (~812px tall at the ~620px
   width the spread caps at), and grows with content instead of clipping. */
.page-wrap {
  background: var(--parchment);
  display: flex;
  flex-direction: column;
  min-height: 812px;
  position: relative;
  overflow: hidden;
  background-image: repeating-linear-gradient(90deg, transparent 0 38px, rgba(120,80,30,0.035) 38px 39px);
}

/* =====================  COVER  ========================================== */
.cover {
  background: linear-gradient(135deg, var(--leather) 0%, var(--leather-2) 50%, var(--leather) 100%);
  color: var(--gold);
  flex: 1 0 auto;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover__inner {
  border: 1px solid var(--gold);
  padding: 32px 24px;
  text-align: center;
  width: 100%;
}
.cover__crest { margin-bottom: 16px; }
.cover__top { letter-spacing: 5px; font-size: 11px; margin-bottom: 22px; }
.cover__big {
  font-family: var(--serif);
  font-size: 46px; letter-spacing: 7px; font-weight: 700;
  text-shadow: 0 0 12px rgba(201,169,106,0.3);
}
.cover__sub { letter-spacing: 5px; font-size: 11px; margin-top: 4px; opacity: 0.8; }
.cover__iter { margin-top: 28px; font-size: 11px; letter-spacing: 4px; color: var(--gold); opacity: 0.8; }
.cover__chip { margin: 24px auto 12px; }
.cover__footer { display: flex; justify-content: center; gap: 12px; font-size: 9px; letter-spacing: 3px; opacity: 0.7; }

/* =====================  BIO / DATA PAGE  =============================== */
.bio { background: var(--parchment); flex: 1 0 auto; padding: 28px; position: relative; }
.bio__watermark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 90px; color: #8a4e10; opacity: 0.05; letter-spacing: 8px;
  pointer-events: none;
}
.bio__grid {
  display: grid; grid-template-columns: 140px 1fr; gap: 18px;
  position: relative; padding-bottom: 14px; border-bottom: 1px dashed var(--label);
}
.bio__photo { border: 1.5px solid var(--ink-dark); padding: 4px; background: #fff; height: max-content; }
.bio__photo img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
}
.bio__photo-label { font-size: 8px; letter-spacing: 1px; text-align: center; margin-top: 4px; color: var(--ink-dark); }
.bio__fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; align-content: start; }
.bio__field { border-bottom: 0.5px solid var(--label); padding-bottom: 3px; }
.bio__field-label { font-size: 8px; letter-spacing: 2px; color: var(--label); }
.bio__field-value { font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--ink-dark); letter-spacing: 1px; }
.bio__note { font-size: 13px; font-style: italic; line-height: 1.55; color: var(--ink-dark); margin-top: 14px; max-width: 360px; }
.bio__sig { margin-top: 44px; }
.bio__sig-rule { display: block; border-bottom: 1px solid var(--ink-dark); padding-bottom: 2px; }
.bio__sig-scrawl {
  display: inline-block; font-family: var(--hand); font-style: italic; font-weight: 400;
  font-size: 40px; line-height: 1.1; color: #0d2a52; margin: 0;
  transform: rotate(-1deg); transform-origin: left bottom;
}
.bio__sig-label { font-size: 9px; letter-spacing: 2px; color: var(--label); margin-top: 10px; }
.mrz {
  position: absolute; bottom: 14px; left: 24px; right: 24px;
  font-family: "OCR A Std", var(--mono); font-size: 11px; letter-spacing: 1px;
  color: var(--ink-dark); background: var(--parchment-edge); padding: 6px;
  line-height: 1.3; word-break: break-all;
}

/* =====================  STAMP PAGES  ================================== */
.stamp-page { flex: 1 0 auto; position: relative; padding: 4px; }

/* "Visas" printed up the outer edge — echoes the French passport visa pages */
.visa-edge {
  position: absolute; top: 46px; bottom: 0; width: 42px;
  display: flex; align-items: flex-start; justify-content: center;
  pointer-events: none; z-index: 1;
}
.stamp-page--left .visa-edge { left: 2px; }
.stamp-page--right .visa-edge { right: 2px; }
.visa-edge__run {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font-family: var(--serif); font-style: italic; font-size: 28px;
  letter-spacing: 5px; color: #0d2a52; opacity: 0.8;
}

/* hexagonal page-number stamp, bottom outer corner */
.page-badge {
  position: absolute; bottom: 12px; width: 40px; height: 46px;
  color: #0d2a52; z-index: 2;
}
.stamp-page--left .page-badge { left: 12px; }
.stamp-page--right .page-badge { right: 12px; }
.page-badge svg { display: block; }
.page-badge__num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 14px;
  letter-spacing: 1px; color: #0d2a52;
}

.stamps-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px;
  justify-items: center; align-items: center; padding-top: 6px;
}

/* one stamped photo */
.stamp-cell { width: 210px; height: 250px; display: flex; align-items: center; justify-content: center; }
.stamp-frame { width: 138px; height: 178px; position: relative; font-family: var(--serif); }
.stamp-frame--nophoto::before {
  content: "PHOTO\00A0 MANQUANTE";
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; height: 158px; font-size: 9px; letter-spacing: 2px; color: var(--label);
  background: repeating-linear-gradient(45deg, #e7dab4 0 8px, #e0d3a8 8px 16px);
  border: 1px dashed var(--label);
}
.stamp-frame > a { display: block; }
.stamp-photo--nophoto { position: absolute; inset: 0; z-index: 1; }
.stamp-photo {
  width: 100%; height: 158px; object-fit: cover; display: block;
  filter: sepia(0.45) contrast(1.05) saturate(0.7) grayscale(0.3);
}
.stamp-caption {
  display: flex; justify-content: space-between; font-size: 8px; letter-spacing: 1px;
  color: var(--label); margin-top: 6px; font-family: var(--mono); opacity: 0.85;
}
.stamp-overlay {
  position: absolute; right: -30px; bottom: -16px;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.stamp-overlay--state { right: auto; left: 50%; bottom: 4px; }

/* SVG stamp text: ink from the overlay's currentColor, fonts via CSS (not repeated
   inline on every <text>). Default serif; .m = the monospace machine-text. */
.stamp-overlay svg text { font-family: var(--serif); fill: currentColor; }
.stamp-overlay svg text.m { font-family: var(--mono); }

/* box overlay */
.ov-box {
  border: 3px solid; box-shadow: inset 0 0 0 1.5px currentColor; padding: 8px 13px;
  text-align: center; min-width: 98px; background: rgba(255,253,240,0.04); opacity: 0.9;
}
.ov-box__top { font-size: 8.5px; letter-spacing: 2.5px; font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.ov-box__city { font-size: 8px; letter-spacing: 1.5px; margin-top: 4px; opacity: 0.85; }
.ov-box__code { font-size: 23px; font-weight: 700; letter-spacing: 2px; margin: 1px 0; font-family: var(--serif); }
.ov-box__date { font-size: 9px; font-family: var(--mono); }
.ov-box__foot { font-size: 6.5px; letter-spacing: 2px; margin-top: 4px; border-top: 1px solid currentColor; padding-top: 3px; opacity: 0.8; }

/* oval overlay */
.ov-oval {
  border: 3px solid; box-shadow: inset 0 0 0 1.5px currentColor; border-radius: 50%;
  width: 126px; height: 98px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; text-align: center;
  font-family: var(--serif); background: rgba(255,253,240,0.04); opacity: 0.88;
}
.ov-oval__top { font-size: 8.5px; letter-spacing: 2.5px; }
.ov-oval__city { font-size: 8px; letter-spacing: 1.5px; opacity: 0.85; }
.ov-oval__code { font-size: 21px; font-weight: 700; letter-spacing: 2px; line-height: 1; }
.ov-oval__date { font-size: 8.5px; font-family: var(--mono); }

/* diamond overlay */
.ov-diamond { width: 116px; height: 116px; position: relative; opacity: 0.9; }
.ov-diamond__box { position: absolute; inset: 8px; border: 3px solid currentColor; box-shadow: inset 0 0 0 1.5px currentColor; transform: rotate(45deg); }
.ov-diamond__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: var(--serif); }
.ov-diamond__label .t { font-size: 7.5px; letter-spacing: 2.5px; }
.ov-diamond__label .c { font-size: 17px; font-weight: 700; letter-spacing: 2px; line-height: 1; }
.ov-diamond__label .v { font-size: 7px; letter-spacing: 2.5px; margin-top: 1px; }

/* chevron / priority overlay */
.ov-chevron {
  color: #fffbe8; padding: 7px 20px;
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
  text-align: center; min-width: 132px; font-family: var(--serif); opacity: 0.9;
}
.ov-chevron__code { font-size: 11px; letter-spacing: 3px; font-weight: 700; }
.ov-chevron__city { font-size: 7.5px; letter-spacing: 2px; opacity: 0.9; }
.ov-chevron__date { font-size: 8px; letter-spacing: 1px; font-family: var(--mono); }

/* =====================  BACK / END  ================================== */
.back { background: var(--parchment); flex: 1 0 auto; padding: 28px; position: relative; display: flex; flex-direction: column; }
.back__head { font-size: 10px; letter-spacing: 3px; color: var(--label); margin-bottom: 18px; border-bottom: 1px solid var(--label); padding-bottom: 6px; }
.back__text { font-family: var(--body); font-size: 15px; line-height: 1.55; color: var(--ink-dark); }
.back__text p { margin-bottom: 12px; }
/* bureau nav, pinned to the bottom of the page; kept clear of .back__decor (bottom-right) */
.back__links { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 9px; max-width: 60%; }
.back__links-head { font-family: var(--mono); font-size: 9px; letter-spacing: 3px; color: var(--label); border-top: 1px solid var(--label); padding-top: 12px; }
.back__links a { font-family: var(--serif); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #0d2a52; text-decoration: none; width: max-content; border-bottom: 1px solid transparent; }
.back__links a:hover { border-bottom-color: #0d2a52; }
.back__decor { position: absolute; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 14px; }
.small-stamp {
  border: 2px solid #8a1a1a; color: #8a1a1a; padding: 4px 10px;
  font-family: var(--serif); font-weight: 700; letter-spacing: 3px; font-size: 12px;
  transform: rotate(6deg);
}
.small-stamp--green { border-color: #0f4a2a; color: #0f4a2a; transform: rotate(-8deg); }

.end-cover {
  background: linear-gradient(135deg, var(--leather) 0%, var(--leather-2) 50%, var(--leather) 100%);
  color: var(--gold); flex: 1 0 auto; padding: 32px;
  display: flex; align-items: center; justify-content: center;
}
.end-cover__inner { text-align: center; border: 1px solid var(--gold); padding: 30px; width: 100%; }
.end-cover__text { font-family: var(--serif); font-size: 18px; font-style: italic; line-height: 1.5; letter-spacing: 1px; }

/* =====================  RESPONSIVE  ==================================
   Tracks the v2 breakpoint ladder (≤1030 / ≤800 / ≤481 / ≤350), worked one
   passport page at a time starting at the narrowest. The passport only needs
   adjustments in the ≤481 and ≤350 brackets (the ≤800 collapse below handles
   the spread reflow); ≤1030/≤800 content tweaks weren't required. Narrower
   blocks come last so they win where ranges overlap. */

/* Two-page spread collapses to a single stacked column on tablets/phones.
   Each page becomes its own separated card (border + shadow + gap) rather than
   two pages sharing one bordered spread, so every page reads as distinct.
   minmax(0,1fr) + min-width:0 let the column shrink to the viewport instead of
   growing to the widest page's min-content (which would drag every page wide).
   container-type + a width-relative min-height keep the passport-page
   proportion (~0.76 w/h) on short pages while tall stamp pages still grow. */
@media (max-width: 820px) {
  .spread {
    grid-template-columns: minmax(0, 1fr);
    container-type: inline-size;
    border: 0;
    background: transparent;
    box-shadow: none;
    row-gap: 26px;
    margin: 0 auto 26px;
  }
  .spread__spine { display: none; }
  .page-wrap {
    min-width: 0;
    min-height: 131cqw;
    border: 4px solid var(--ink-dark);
    box-shadow: 0 14px 30px rgba(0,0,0,0.5), 0 5px 14px rgba(0,0,0,0.38);
  }
}

@media (max-width: 481px) {
  /* Cover — the default 46px/7px title (~304px wide) starts clipping the
     narrowed page around 474px; scale it down so it always fits. */
  .cover { padding: 24px 18px; }
  .cover__inner { padding: 26px 16px; }
  .cover__big { font-size: 34px; letter-spacing: 5px; }

  /* Bio — the 140px photo + 2-col fields no longer fit side by side; stack the
     photo above the fields, and let the MRZ flow in instead of pinning it
     absolutely (which overlapped the signature on the now-taller page). */
  .bio { padding: 24px; }
  .bio__grid { grid-template-columns: 1fr; gap: 16px; }
  .bio__photo { width: 140px; }
  .bio__sig { margin-top: 28px; }
  .bio__sig-scrawl { font-size: 34px; }
  .mrz { position: static; left: auto; right: auto; bottom: auto; margin-top: 18px; }

  /* Stamp pages — two 210px cells (~420px) can't sit side by side; drop to a
     single centred column. Hide the decorative vertical "Visas" edge text,
     which otherwise overlaps the now-centred stamps. */
  .stamps-grid { grid-template-columns: 1fr; gap: 6px 0; padding-top: 10px; }
  .visa-edge { display: none; }

  /* Back — the absolute bottom-right "VALID/INSPECTED" stamps collide with the
     nav links once the page is narrow. Give the links the full width and let
     the stamps flow into the column below them instead. */
  .back__links { max-width: 100%; }
  .back__decor { position: static; flex-direction: row; gap: 16px; margin-top: 24px; align-self: flex-start; }
}

@media (max-width: 350px) {
  /* Cover — tighten padding + title/tracking for the narrowest phones. */
  .cover { padding: 18px 12px; }
  .cover__inner { padding: 22px 12px; }
  .cover__top { font-size: 9px; letter-spacing: 2px; }
  .cover__big { font-size: 28px; letter-spacing: 3px; }
  .cover__sub { font-size: 10px; letter-spacing: 2.5px; }

  /* Bio — drop fields to a single column and trim the decorative type. */
  .bio { padding: 20px; }
  .bio__fields { grid-template-columns: 1fr; }
  .bio__watermark { font-size: 60px; }
  .bio__sig-scrawl { font-size: 28px; }
}