/* Postmarked — a stamp album of stays.
   Stock-book sheets (dark green, fine quadrille, glassine strips), each hotel a
   perforated stamp with a typed album caption. */

:root {
  --bg: #0f1411;
  --sheet: #1c3128;
  --rule: rgba(255, 255, 255, .035);
  --text: #ece5d0;
  --dim: #a8b6a8;
  --faint: rgba(236, 229, 208, .2);
  --gold: #e6c870;
  --paper: #fbf6e8;
  --kraft: #cbbd98;
  --kraft-hi: #ddd0ae;
  --kraft-ink: #2a281f;
  --focus: #ffd866;
  --cols: 6;
  --pad: 40px;
  --gap: 28px;
  --row-gap: 30px;
  --serif: "Playfair Display", "Bodoni 72", Didot, Georgia, serif;
  --type: "Courier Prime", "Courier New", ui-monospace, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg) radial-gradient(1400px 700px at 50% -200px, #1b241f, transparent 70%) no-repeat;
  color: var(--text);
  font: 400 15px/1.45 var(--type);
}
img { max-width: 100%; }
a { color: inherit; }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 60; padding: 8px 14px;
  background: var(--focus); color: #111; font-weight: 700; text-decoration: none; border-radius: 3px;
}
.skip:focus { top: 10px; }

/* ------------------------------------------------------------- masthead */
.mast {
  max-width: 1376px; margin: 0 auto; padding: 12px var(--pad) 8px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: var(--text); text-decoration: none;
  font: italic 800 27px/1 var(--serif); letter-spacing: .005em;
}
.brand-mark { width: 36px; height: 24px; color: var(--gold); flex: none; }
.brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
.mast-note { margin: 0; color: var(--dim); font-size: 13px; line-height: 1.35; }
.mast-note b { color: var(--text); }

/* ----------------------------------------------------- album index tabs */
.tabs { position: sticky; top: 0; z-index: 30; background: var(--bg); }
.tabs-row {
  position: relative; max-width: 1376px; margin: 0 auto; padding: 6px var(--pad) 0;
  display: flex; gap: 3px; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs-row::-webkit-scrollbar { display: none; }
.tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 9px 7px; border-radius: 6px 6px 0 0;
  background: var(--kraft); color: var(--kraft-ink); text-decoration: none;
  font: 700 12px/1 var(--type); letter-spacing: .06em;
  box-shadow: inset 0 -5px 6px -5px rgba(0, 0, 0, .5);
  transition: background-color .15s;
}
.tab img { display: block; width: 18px; height: 13.5px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.tab:hover { background: var(--kraft-hi); }
.tab[aria-current="page"] { background: var(--sheet); color: var(--text); box-shadow: none; }
.tab--all { padding-inline: 13px; }
.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }

/* ----------------------------------------------------------- the sheet */
.sheet {
  position: relative; max-width: 1376px; margin: 0 auto; padding: 20px var(--pad) 40px;
  background-color: var(--sheet);
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 12px 12px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 40px 60px -40px #000;
}
.sheet::before {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid rgba(230, 200, 112, .14); border-radius: 3px;
}

.sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin: 0 0 6px; }
.sheet-head h1 { margin: 0; font: 800 28px/1.15 var(--serif); }
.sheet-head p { margin: 0; color: var(--dim); font-size: 13px; }

.issue { margin-top: 26px; scroll-margin-top: 48px; }
.issue:first-of-type { margin-top: 12px; }
.issue-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px;
  margin: 0 0 18px; padding-bottom: 8px; border-bottom: 1px solid var(--faint);
}
.issue-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; font: 700 20px/1.2 var(--serif); }
.flag { display: block; width: 24px; height: 18px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); }
.issue-count { color: var(--dim); font-size: 13px; }
.issue-count::before { content: "· "; }
.issue-more {
  margin-left: auto; color: var(--gold); font-size: 13px; text-decoration: none;
  border-bottom: 1px dotted rgba(230, 200, 112, .6);
}
.issue-more:hover { border-bottom-style: solid; }
.issue-more:focus-visible, .empty-clear:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ------------------------------------------------------ country header */
.album-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 10px 24px; margin: 0 0 10px;
}
.album-title { min-width: 0; }
.album-head h1 { margin: 0; display: flex; align-items: center; gap: 12px; font: 800 30px/1.1 var(--serif); }
.album-head h1 .flag { width: 32px; height: 24px; }
.album-meta { margin: 5px 0 0; color: var(--dim); font-size: 13px; }

.controls { display: flex; align-items: center; gap: 8px; }
.controls input, .controls select, .go {
  height: 38px; border: 1px solid rgba(236, 229, 208, .28); border-radius: 3px;
  background: rgba(0, 0, 0, .28); color: var(--text); font: 400 14px var(--type);
}
.controls input { width: 230px; padding: 0 10px; }
.controls input::placeholder { color: rgba(168, 182, 168, .75); }
.controls select {
  padding: 0 30px 0 10px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e6c870' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px;
}
.controls select option { background: #1c3128; color: var(--text); }
.go { padding: 0 14px; background: var(--kraft); color: var(--kraft-ink); font-weight: 700; cursor: pointer; }
.js .go { display: none; }
.controls input:focus-visible, .controls select:focus-visible, .go:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent;
}

.tally {
  margin: 0 0 20px; padding-bottom: 8px; border-bottom: 1px solid var(--faint);
  color: var(--dim); font-size: 12.5px;
}

/* ---------------------------------------------------- the stamp album */
.album {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap); row-gap: var(--row-gap);
}
.slot { position: relative; min-width: 0; container-type: inline-size; }
.slot:hover, .slot:focus-within { z-index: 4; }

.st, .space { position: relative; display: block; text-decoration: none; }
.st { color: inherit; border-radius: 3px; -webkit-tap-highlight-color: transparent; }

/* the glassine pocket strip: runs across the lower half of every stamp in a row */
.st::after, .space::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: calc(var(--gap) / -2); right: calc(var(--gap) / -2);
  top: 63cqi; height: calc(52cqi + 3px);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .32) 0 1px, rgba(255, 255, 255, .13) 1px,
    rgba(248, 252, 244, .055) 32%, rgba(248, 252, 244, .085));
  border-bottom: 1px solid rgba(0, 0, 0, .3);
  box-shadow: 0 -3px 5px -3px rgba(0, 0, 0, .4);
}

.st-lift {
  position: relative; z-index: 1; display: block; transform-origin: 50% 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)) drop-shadow(0 3px 3px rgba(0, 0, 0, .22));
  transition: transform .22s cubic-bezier(.2, .8, .3, 1.15), filter .22s;
}
/* tweezers, shown when a stamp is picked up */
.st-lift::before {
  content: ""; position: absolute; z-index: 3; left: 50%; bottom: calc(100% - 13px);
  width: 24px; height: 72px; margin-left: -12px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 72'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23727a81'/%3E%3Cstop offset='.45' stop-color='%23f2f5f7'/%3E%3Cstop offset='1' stop-color='%23697178'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M9 0h6v5l-3 3-3-3z' fill='%238e969c'/%3E%3Cpath d='M9.6 3 2.5 38 10.1 71.6h1.3L6.3 38 12.2 7z' fill='url(%23g)'/%3E%3Cpath d='M14.4 3 21.5 38 13.9 71.6h-1.3L17.7 38 11.8 7z' fill='url(%23g)'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: translateY(-16px);
  transition: opacity .2s, transform .22s;
}
.st:focus-visible .st-lift,
.st:active .st-lift {
  z-index: 3; transform: translateY(-7px) rotate(-1.5deg);
  filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .5)) drop-shadow(0 4px 4px rgba(0, 0, 0, .3));
}
.st:focus-visible .st-lift::before,
.st:active .st-lift::before { opacity: 1; transform: none; }
@media (hover: hover) {
  .st:hover .st-lift {
    z-index: 3; transform: translateY(-7px) rotate(-1.5deg);
    filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .5)) drop-shadow(0 4px 4px rgba(0, 0, 0, .3));
  }
  .st:hover .st-lift::before { opacity: 1; transform: none; }
  .st:hover .cap-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}
.st:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }

/* perforated paper: half-holes along every edge, solid inside */
.st-paper {
  --r: 3.4px; --t: 10px;
  display: block; padding: 9px; background: var(--paper);
  -webkit-mask:
    radial-gradient(circle at 50% 0, #0000 var(--r), #000 calc(var(--r) + .6px)) top / var(--t) calc(var(--r) + 1px) round no-repeat,
    radial-gradient(circle at 50% 100%, #0000 var(--r), #000 calc(var(--r) + .6px)) bottom / var(--t) calc(var(--r) + 1px) round no-repeat,
    radial-gradient(circle at 0 50%, #0000 var(--r), #000 calc(var(--r) + .6px)) left / calc(var(--r) + 1px) var(--t) no-repeat round,
    radial-gradient(circle at 100% 50%, #0000 var(--r), #000 calc(var(--r) + .6px)) right / calc(var(--r) + 1px) var(--t) no-repeat round,
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat;
  mask:
    radial-gradient(circle at 50% 0, #0000 var(--r), #000 calc(var(--r) + .6px)) top / var(--t) calc(var(--r) + 1px) round no-repeat,
    radial-gradient(circle at 50% 100%, #0000 var(--r), #000 calc(var(--r) + .6px)) bottom / var(--t) calc(var(--r) + 1px) round no-repeat,
    radial-gradient(circle at 0 50%, #0000 var(--r), #000 calc(var(--r) + .6px)) left / calc(var(--r) + 1px) var(--t) no-repeat round,
    radial-gradient(circle at 100% 50%, #0000 var(--r), #000 calc(var(--r) + .6px)) right / calc(var(--r) + 1px) var(--t) no-repeat round,
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat;
}
.st-face { position: relative; display: flex; flex-direction: column; padding: 3px; background: var(--ink, #3b3a36); }
.st-face img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  background: #2c302d; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
}
/* the denomination, printed in the corner and shrunk to fit long ₩ / ₫ values */
.st-val {
  position: absolute; top: 3px; left: 3px; max-width: calc(100% - 6px);
  padding: .2em .4em .16em .32em; border-bottom-right-radius: 2px;
  background: var(--paper); color: var(--ink, #3b3a36);
  font: 800 min(18px, calc(60cqi * 10 / var(--n, 30))) / 1 var(--serif);
  font-variant-numeric: lining-nums; white-space: nowrap;
}
.st-cur { font-size: .74em; margin-right: .05em; }
/* the country, across the foot of the stamp */
.st-land {
  display: flex; align-items: center; justify-content: center; height: 15cqi; padding: 0 4px;
  color: var(--paper); white-space: nowrap; overflow: hidden;
  font: 700 min(13px, calc(84cqi * 10 / var(--l, 120))) / 1 var(--serif);
  letter-spacing: .14em; text-indent: .14em;
}
/* cancellation postmark on the best-loved few */
.pm {
  position: absolute; top: 1.5%; right: -7%; width: 92%; height: auto; overflow: visible;
  color: rgba(22, 19, 38, .8); transform: rotate(-10deg); pointer-events: none;
  filter: drop-shadow(0 0 1.2px rgba(255, 250, 235, .7));
}
.pm text { font-family: var(--type); font-weight: 700; }

/* the typed album caption */
.cap { display: block; margin-top: 14px; padding: 0 1px; color: var(--dim); font-size: 12.5px; line-height: 1.38; }
.cap-no, .cap-local, .cap-town, .cap-score { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-no { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(168, 182, 168, .78); }
.cap-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin: 2px 0 1px; color: var(--text); font-size: 13.5px; font-weight: 700; line-height: 1.3;
  overflow-wrap: anywhere;
}
.cap-local { font-family: system-ui, "Malgun Gothic", "Microsoft JhengHei", sans-serif; font-size: 12px; }
.cap-score b { color: var(--gold); }

/* printed empty spaces that complete a row on the home sheets */
.slot--space { display: none; }
.space { color: var(--dim); }
.space-frame {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 1 / 1.15; padding: 16px; text-align: center; font-size: 12px; line-height: 1.4;
  border: 1px solid var(--faint); outline: 1px solid rgba(236, 229, 208, .09); outline-offset: -7px;
}
.space-arrow { color: var(--gold); font-size: 20px; line-height: 1; }
a.space:hover .space-frame { color: var(--text); border-color: rgba(230, 200, 112, .6); }
a.space:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
@media (min-width: 1180px), (min-width: 480px) and (max-width: 899px) {
  .slot--space { display: block; }
}

/* ------------------------------------------------- empty / turn the page */
.empty { padding: 34px 0 10px; text-align: center; color: var(--dim); }
.empty p { margin: 0 0 12px; }
.empty-clear { color: var(--gold); }
.turn-wrap { display: flex; justify-content: center; margin-top: 36px; }
.turn {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 30px 12px; border-radius: 3px;
  background: var(--kraft); color: var(--kraft-ink); text-decoration: none;
  font: 800 18px/1 var(--serif); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7);
  transition: background-color .15s, transform .15s;
}
.turn::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
  background: linear-gradient(315deg, var(--sheet) 0 50%, #a3946b 50%);
  border-top-left-radius: 2px;
}
.turn:hover { background: var(--kraft-hi); transform: translateY(-1px); }
.turn:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.turn-sub { font: 400 12px/1 var(--type); }
.turn[hidden], .empty[hidden], .fin[hidden] { display: none; }
.fin { margin: 0; color: var(--dim); font-size: 13px; letter-spacing: .04em; }

/* --------------------------------------------------------------- footer */
.foot { max-width: 1376px; margin: 0 auto; padding: 18px var(--pad) 40px; color: var(--dim); font-size: 12px; line-height: 1.5; }
.foot p { margin: 0; max-width: 90ch; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1179px) {
  :root { --cols: 5; --pad: 28px; --gap: 24px; }
  .tabs-row { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 28px), #0000); mask: linear-gradient(90deg, #000 calc(100% - 28px), #0000); }
}
@media (max-width: 899px) {
  :root { --cols: 4; --pad: 22px; --gap: 22px; }
  .album-head { flex-flow: column nowrap; align-items: stretch; }
  .controls input { flex: 1; width: auto; min-width: 0; }
}
@media (max-width: 639px) {
  :root { --cols: 3; --pad: 16px; --gap: 18px; --row-gap: 24px; }
  .mast { padding-top: 10px; padding-bottom: 6px; }
  .mast-more, .hide-s { display: none; }
  .brand { font-size: 24px; }
  .brand-mark { width: 30px; height: 20px; }
  .mast-note { font-size: 12px; }
  .sheet { padding-top: 16px; padding-bottom: 32px; }
  .sheet::before { inset: 5px; }
  .sheet-head h1, .album-head h1 { font-size: 24px; }
  .album-head h1 .flag { width: 28px; height: 21px; }
  .issue-head h2 { font-size: 18px; }
  .issue-head { margin-bottom: 16px; }
  .controls input, .controls select, .go { font-size: 16px; height: 40px; }
  .controls select { max-width: 48%; padding-left: 8px; padding-right: 26px; background-position: right 8px center; }
}
@media (max-width: 479px) {
  :root { --cols: 2; --pad: 14px; --gap: 16px; --row-gap: 22px; }
  .cap { margin-top: 12px; font-size: 12px; }
  .cap-name { font-size: 13px; }
  .st-paper { --r: 3px; --t: 9px; padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .st:hover .st-lift, .st:focus-visible .st-lift, .st:active .st-lift { transform: none; }
  .st-lift::before { transform: none; }
}