/* Saturated printing inks; the surrounding paper stays neutral. */
[style*="--bg:#DAD9C2"] { --ink: #155334 !important; --bg: #B7D84B !important; }
[style*="--bg:#E8D9B5"] { --ink: #973A23 !important; --bg: #F4B83F !important; }
[style*="--bg:#D8D4E4"] { --ink: #163F65 !important; --bg: #39BDD0 !important; }
[style*="--bg:#DDD6C7"] { --ink: #282535 !important; --bg: #EE8259 !important; }
[style*="--bg:#EDD3C4"] { --ink: #8C244A !important; --bg: #EF83AD !important; }
#art-cotton .boll > g { fill: #FFF5D8; stroke: #155334; }
#art-cotton .sway-a { fill: #17663B; }
#art-cotton .sway-b { fill: #2A8544; }
#art-loom [fill="#8E6420"] { fill: #973A23; }
#art-loom [stroke="#8E6420"] { stroke: #973A23; }
#art-loom .diamonds { fill: #F9E9A1; }
#art-loom .beater { fill: #C83B32; }
#art-trade .ship path:first-of-type { fill: #FFF0CB; }
#art-trade .ship path:nth-of-type(2) { fill: #F4B63F; }
#art-trade .ship path:last-of-type { fill: #163F65; }
#art-trade circle { fill: #F5CE48; stroke: #163F65; }
#art-trade .waves { stroke: #086D95; }
#art-decline .windows { fill: #FFCE50; }
#art-decline .puff { fill: #743D6559; }
#art-revival .sun { fill: #F9B83C; }
#art-revival .rays { stroke: #AC2859; }
#art-revival .sprout path { fill: #226840; stroke: #226840; }
#art-revival .sprout path:first-child { fill: none; }
#art-revival rect { fill: #226840; }
:root {
  --ground: #E5E4D8;
  --paper: #F5F0DC;
  --text: #242522;
  --body: #343B36;
  --hero: #AF4935;
  --night: #24282A;
  --print-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h220v220H0z'/%3E%3C/svg%3E");
  --gutter: clamp(16px, 4.45vw, 64px);
  --display: "Anek Bangla", system-ui, sans-serif;
  --script: "Galada", cursive;
  --label: "Mina", system-ui, sans-serif;
  --serif: "Tiro Bangla", Georgia, serif;
  --latin: "Barlow", system-ui, sans-serif;
  --cond: "Barlow Condensed", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h, 96px); }
body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid #D23B26; outline-offset: 4px; }
.wrap { width: min(1312px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Wood-type headline: Anek Bangla at full width */
.country, .hero-title, .sheet-title, .big-name, .story-title, .letter-title {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
}

/* ---------- Selvage nav ---------- */
.selvage {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px var(--gutter);
  background: var(--paper);
  border-bottom: 10px dotted var(--ground);
  transition: box-shadow .35s;
}
/* shadow only: changing the nav's height here shifts the page and makes it flicker at the threshold */
.selvage.is-stuck { box-shadow: 0 8px 24px #3C28141F; }
.selvage { background: #EAE6D7; }
.inks i:nth-child(1) { --c: #71AA37; }
.inks i:nth-child(2) { --c: #D76524; }
.inks i:nth-child(3) { --c: #19A9BD; }
.inks i:nth-child(4) { --c: #282535; }
.inks i:nth-child(5) { --c: #C83472; }
.chapters-nav a:nth-child(1) { --c: #155334 !important; }
.chapters-nav a:nth-child(2) { --c: #973A23 !important; }
.chapters-nav a:nth-child(3) { --c: #163F65 !important; }
.chapters-nav a:nth-child(5) { --c: #8C244A !important; }
.brand { display: flex; align-items: center; gap: 18px; }
.wordmark { font-family: var(--script); font-size: 38px; line-height: 40px; color: #D23B26; }
.inks { display: flex; gap: 6px; }
.inks i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); transition: transform .4s var(--ease); }
.inks i:nth-child(2) { transition-delay: .04s; }
.inks i:nth-child(3) { transition-delay: .08s; }
.inks i:nth-child(4) { transition-delay: .12s; }
.inks i:nth-child(5) { transition-delay: .16s; }
.brand:hover .inks i { transform: translateY(-5px); }
.plate { font-family: var(--cond); font-weight: 600; font-size: 14px; line-height: 18px; letter-spacing: .14em; color: #1A1916; }

.chapters-nav { display: flex; align-items: flex-end; gap: 44px; }
.chapters-nav a { position: relative; display: flex; flex-direction: column; align-items: center; padding-bottom: 6px; }
.chapters-nav b { font-family: var(--label); font-weight: 700; font-size: 17px; line-height: 22px; color: var(--c); }
.chapters-nav small { font-family: var(--cond); font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: .14em; color: #1A1916; }
.chapters-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--c); transform: scaleX(0); transition: transform .35s var(--ease);
}
.chapters-nav a:hover::after, .chapters-nav a.is-active::after { transform: scaleX(1); }

.post-office { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--label); color: #1A1916; }
.post-office b { font-size: 17px; line-height: 22px; }
.post-office span { font-size: 14px; line-height: 18px; }

/* ---------- Shared stamp parts ---------- */
.perf {
  background: var(--paper);
  border: 12px dotted var(--ground);
  box-shadow: inset 0 0 40px #966E324D, 0 20px 50px #3C281429;
}
.coin {
  display: grid; place-items: center; flex-shrink: 0;
  border-radius: 50%; background: var(--paper);
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 100;
}
.coin-latin { font-family: var(--latin); font-weight: 800; }

/* ---------- Hero ---------- */
.hero { padding: 40px 0 72px; }
.hero-stamp { padding: 26px; animation: land 1.1s var(--ease) both; }
/* type inside scales with the stamp face (1cqi = 1% of 1208px at full size) */
.hero-inner { container-type: inline-size; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 10px; background: var(--hero); }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 14px 0 4px; }
.hero-country { display: flex; align-items: center; gap: 2.3cqi; }
.coin-xl { width: 8.6cqi; height: 8.6cqi; font-size: 3.64cqi; line-height: 1.1; color: var(--hero); }
.hero .coin-latin { font-size: 3.15cqi; }
.country { font-size: 10.26cqi; line-height: 1.03; color: var(--paper); }
.latin { font-family: var(--latin); font-weight: 700; font-size: max(10px, 1.5cqi); letter-spacing: .3em; color: var(--paper); opacity: .8; }

.scene-wrap {
  position: relative; overflow: hidden;
  aspect-ratio: 1208 / 470;
  border: 3px solid var(--paper);
  background: linear-gradient(180deg, #EEE8D9 0%, #E1D9C8 45%, #D2C9B5 54%, #C1B7A1 100%);
  background: linear-gradient(180deg, #43BBD0 0%, #91CDCB 48%, #41A8B0 55%, #128DA8 100%);
  touch-action: pan-y;
}
.scene { display: block; width: 100%; height: 100%; }
#boat { cursor: pointer; outline: none; }
.hint {
  position: absolute; right: 1.3cqi; bottom: 1.2cqi;
  padding: .3em .9em; border-radius: 999px;
  background: #25211BB3; color: var(--paper);
  font-family: var(--script); font-size: max(12px, 1.5cqi); line-height: 1.35;
  pointer-events: none; transition: opacity .8s, transform .8s var(--ease);
}
.hint.is-gone { opacity: 0; transform: translateY(8px); }

.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 4px 6px 14px; }
.hero-title { font-size: 8.6cqi; line-height: 1.08; color: var(--paper); }
.hero-sign { display: flex; align-items: center; gap: 2.3cqi; }
.tagline { font-family: var(--script); font-size: max(14px, 1.82cqi); line-height: 1.27; color: var(--paper); opacity: .85; }

@keyframes land {
  from { opacity: 0; transform: translateY(28px) rotate(-.8deg); }
  to { opacity: 1; transform: none; }
}

/* ---------- Five-stamp sheet ---------- */
.sheet { padding: 96px 0 104px; background: var(--night); color: #EFE6CF; }
.sheet-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }
.sheet-title { font-size: clamp(52px, 6.7vw, 96px); line-height: 1.17; text-shadow: 3px 2px 0 #A93A248C; }
.sheet-sub { margin-top: 4px; font-family: var(--script); font-size: 32px; line-height: 40px; }
.sheet-note { flex-shrink: 0; width: 340px; padding-bottom: 4px; font-size: 18px; line-height: 30px; color: #B5AB98; }

.stamp-row { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.stamp-row li { display: flex; flex-direction: column; }
.stamp-row h3 { margin-top: 26px; font-family: var(--label); font-weight: 700; font-size: 19px; line-height: 24px; }
.stamp-row h3 span { margin-right: 4px; color: #C99A4A; }
.stamp-row p { margin-top: 8px; font-size: 16px; line-height: 27px; color: #BDB3A0; }

.mini {
  --play: paused;
  display: flex; flex-direction: column; gap: 10px; padding: 12px;
  background: var(--paper); color: var(--ink);
  border: 7px dotted var(--night);
  box-shadow: inset 0 0 18px #966E3252;
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), box-shadow .5s;
}
.stamp-row .mini:hover, .stamp-row .mini:focus-visible {
  --play: running;
  transform: translateY(-12px) rotate(-2.5deg);
  box-shadow: inset 0 0 18px #966E3252, 0 22px 30px #0008;
}
.stamp-row li:nth-child(even) .mini:hover, .stamp-row li:nth-child(even) .mini:focus-visible { transform: translateY(-12px) rotate(2deg); }
.mini-top, .mini-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mini-val { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 100; font-size: 28px; line-height: 30px; }
.mini-country { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-variation-settings: "wdth" 112; font-size: 24px; line-height: 28px; white-space: nowrap; }
.mini-country.wide { font-stretch: 125%; font-variation-settings: "wdth" 125; }
.mini-art { display: block; width: 100%; height: auto; aspect-ratio: 198 / 210; background: var(--bg); }
.mini-foot b { font-family: var(--label); font-weight: 700; font-size: 21px; line-height: 26px; }
.mini-foot small { font-family: var(--cond); font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: .14em; }

/* ---------- Chapters ---------- */
.chapter { padding: 104px 0; overflow-x: clip; }
#ch-1 { --ground: #B9CE76; background: var(--ground); }
#ch-2 { --ground: #EAC16B; background: var(--ground); }
#ch-3 { --ground: #76C4CB; background: var(--ground); }
#ch-4 { --ground: #D89073; background: var(--ground); }
#ch-5 { --ground: #DC94AE; background: var(--ground); }
.hero #sail { fill: #F3BC45; }
.hero #palms { stroke: #165640; }
.hero .hero-title { color: var(--paper); }
.sheet .sheet-title { color: #F5D46B; }
.sheet .sheet-sub { color: #F29CBA; }
.post { background: #ABC57C; }
.post .address button { background: #9C2956; }
.post .colophon .wordmark { color: #9C2956; }
.chapter + .chapter { border-top: 6px dotted #231E172E; }
.chapter-inner { display: flex; align-items: center; gap: 84px; }
.reverse .chapter-inner { flex-direction: row-reverse; }

.big-stamp {
  --play: paused; --k: .7; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%;
  position: relative; flex-shrink: 0; width: 520px; padding: 22px;
  container-type: inline-size;
  box-shadow: inset 0 0 34px #966E324D, 0 20px 50px #3C281429;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s var(--ease);
}
.big-stamp.is-tilting { transition: transform .08s linear; }
.big-stamp::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), #FFFFFF40, transparent 55%);
  opacity: 0; transition: opacity .4s;
}
.big-stamp.is-tilting::after { opacity: 1; }
.chapter.in-view .big-stamp { --play: running; }
.big-inner { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 10px; background: var(--ink); }
.big-top { display: flex; align-items: center; gap: 18px; padding: 2px 4px 0 2px; }
.big-top .coin, .big-foot .coin { color: var(--ink); }
/* sizes are design px, capped by cqi (1cqi = 1% of the 452px stamp face) so small screens scale */
.coin-md { width: min(76px, 16.8cqi); height: min(76px, 16.8cqi); font-size: min(34px, 7.5cqi); line-height: 1.1; }
.coin-md.coin-long { font-size: min(28px, 6.2cqi); }
.big-country {
  font-family: var(--display); font-weight: 800; font-stretch: 112%; font-variation-settings: "wdth" 112;
  font-size: min(62px, 13.7cqi); line-height: 1.29; color: var(--paper); white-space: nowrap;
}
.big-art { display: block; width: 100%; height: auto; aspect-ratio: 198 / 210; border: 3px solid var(--paper); background: var(--bg); }
.big-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 2px 6px; }
.big-name { font-size: min(68px, 15cqi); line-height: 1.12; color: var(--paper); }
.big-name-long { font-size: min(54px, 11.9cqi); }
.coin-sm { width: min(72px, 15.9cqi); height: min(72px, 15.9cqi); font-size: min(26px, 5.75cqi); line-height: 1.15; }
.coin-sm.coin-long { font-size: min(22px, 4.9cqi); }

.postmark {
  position: absolute; z-index: 2; top: 48%; right: -62px; width: 230px; height: auto;
  color: var(--ink); mix-blend-mode: multiply; pointer-events: none;
  opacity: 0; transform: rotate(-14deg) scale(1.6);
}
.reverse .postmark { right: auto; left: -62px; transform: rotate(9deg) scale(1.6); }
.stamped .postmark { animation: thud .55s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.reverse .stamped .postmark { animation-name: thud-r; }
@keyframes thud { to { opacity: .72; transform: rotate(-14deg) scale(1); } }
@keyframes thud-r { to { opacity: .72; transform: rotate(9deg) scale(1); } }

.story { display: flex; flex-direction: column; gap: 26px; width: 704px; flex-shrink: 1; padding-top: 16px; }
.kicker { font-family: var(--script); font-size: 24px; line-height: 30px; color: var(--ink); }
.story-title { font-size: clamp(44px, 4.8vw, 68px); line-height: 1.12; color: var(--text); text-shadow: 3px 2px 0 var(--shade); }
.lede { font-size: 24px; line-height: 40px; color: var(--text); }
.story > p:not(.kicker):not(.lede) { font-size: 19px; line-height: 34px; color: var(--body); }
.dots { border: 0; border-top: 6px dotted #231E1747; }
.fact {
  display: flex; flex-direction: column; gap: 8px; padding: 22px 28px;
  background: var(--paper); border: 8px dotted var(--ground);
  box-shadow: inset 0 0 24px #966E3238;
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
.fact:hover { transform: rotate(-.7deg) translateY(-3px); }
.fact-label { font-family: var(--script); font-size: 24px; line-height: 28px; color: var(--ink); }
.fact p + p { font-size: 19px; line-height: 32px; color: var(--text); }

/* ---------- Airmail footer ---------- */
.post { padding: 96px 0 48px; }
.envelope { border: 14px dashed #A93A24; background: #353158; box-shadow: 0 18px 40px #3C281429; }
.envelope.sending { animation: send 1.1s var(--ease); }
.letter {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
  padding: 52px 56px; background: var(--paper); box-shadow: inset 0 0 40px #966E3240;
}
.letter-copy { display: flex; flex-direction: column; gap: 20px; max-width: 680px; min-width: 0; }
.airmail { font-family: var(--label); font-weight: 700; font-size: 17px; line-height: 22px; color: #353158; }
.letter-title { font-size: clamp(40px, 4.8vw, 68px); line-height: 1.12; color: var(--text); text-shadow: 3px 2px 0 #A93A2466; }
.letter-note { max-width: 620px; font-size: 19px; line-height: 31px; color: #4A4235; }
.address { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; padding-top: 16px; }
.address label { padding-bottom: 10px; font-family: var(--label); font-weight: 700; font-size: 20px; line-height: 26px; }
.address input {
  flex: 1 1 220px; width: auto; min-width: 0; max-width: 400px; padding: 0 0 10px;
  border: 0; border-bottom: 2px dotted var(--text); border-radius: 0; background: transparent;
  font-family: var(--serif); font-size: 19px; line-height: 26px; color: var(--text);
}
.address input::placeholder { color: #8A7F6B; }
.address input:focus { outline: none; border-bottom: 2px solid #A93A24; }
.address button {
  display: flex; align-items: center; gap: 10px; padding: 12px 26px;
  border: 0; background: #A93A24; color: var(--paper); cursor: pointer;
  font-family: var(--label); font-weight: 700; font-size: 20px; line-height: 26px;
  box-shadow: 3px 3px 0 var(--text);
  transition: transform .15s, box-shadow .15s;
}
.address button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--text); }
.address button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--text); }
.address button:disabled { cursor: default; background: #353158; }
.btn-arrow { font-family: var(--latin); transition: transform .3s var(--ease); }
.address button:hover .btn-arrow { transform: translateX(4px); }
.address.shake { animation: shake .45s; }
.form-msg { min-height: 22px; font-family: var(--label); font-size: 16px; line-height: 22px; color: #353158; }
.form-msg.is-error { color: #A93A24; }

/* Envelope stamp: drag to peel and re-stick it, click to postmark it (see initStamp in main.js) */
.env-stamp-wrap {
  --dx: 0px; --dy: 0px; --rot: 2deg; --s: 1;
  position: relative; z-index: 1; flex-shrink: 0; width: 236px;
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(var(--s));
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.env-stamp-wrap:hover, .env-stamp-wrap:focus-visible { --s: 1.04; }
.env-stamp-wrap.is-dragging { --s: 1.08; z-index: 3; cursor: grabbing; transition: none; }
.env-stamp { --ink: #A93A24; background: #FBF6E6; border-color: #DCCFAF; box-shadow: inset 0 0 18px #966E3247, 0 4px 10px #3C28142E; transition: box-shadow .3s; }
.env-stamp-wrap:hover .env-stamp, .env-stamp-wrap:focus-visible .env-stamp { --play: running; box-shadow: inset 0 0 18px #966E3247, 0 14px 24px #3C281440; }
.env-stamp-wrap.is-dragging .env-stamp { --play: running; box-shadow: inset 0 0 18px #966E3247, 0 26px 38px #3C281459; }
.env-stamp-wrap .postmark { top: 34%; right: auto; left: -110px; transform: rotate(-8deg) scale(1.6); }
.env-stamp-wrap.is-cancelled .postmark { animation: thud-env .55s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.stamp-hint {
  position: absolute; left: -20px; right: -20px; top: calc(100% + 14px);
  font-family: var(--script); font-size: 16px; line-height: 22px; text-align: center; color: #8A7F6B;
  pointer-events: none; transition: opacity .6s;
}
.env-stamp-wrap.touched .stamp-hint { opacity: 0; }
@keyframes thud-env { to { opacity: .72; transform: rotate(-8deg) scale(1); } }

.colophon { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1.5px solid var(--text); }
.colophon .wordmark { font-size: 30px; line-height: 34px; color: #A93A24; }
.colophon span { font-family: var(--label); font-size: 16px; line-height: 22px; color: #4A4235; }

@keyframes send { 40% { transform: translateY(-16px) rotate(-.8deg); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* Uneven ink and paper fibres, like the supplied scanned postage stamps.
   Static, local textures: no animation cost and no pointer interception. */
.hero, .sheet, .chapter, .post { position: relative; isolation: isolate; }
:is(.hero, .sheet, .chapter, .post)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--print-grain); opacity: .16; mix-blend-mode: multiply;
}
.hero-stamp, .mini { position: relative; isolation: isolate; }
:is(.hero-stamp, .mini, .big-stamp)::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: var(--print-grain),
    repeating-linear-gradient(113deg, transparent 0 71px, #FFF8DF24 72px, transparent 73px 131px);
  opacity: .34; mix-blend-mode: screen;
  box-shadow: inset 0 0 4px 2px #FFFBE7A0, inset 0 0 24px #7C644338;
}
.scene-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(#153E4C55 .55px, transparent .9px) 0 0 / 3px 3px;
  opacity: .3; mix-blend-mode: multiply;
}
.perf { box-shadow: inset 0 0 22px #75694A38, 0 12px 22px #262B2726; }
.mini { box-shadow: inset 0 0 12px #75694A30; }
.hero .country, .hero-title, .big-country, .big-name { text-shadow: 1px .5px 0 #FFF7DD50; }

/* ---------- Scroll reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.stamp-row li:nth-child(2) { transition-delay: .08s; }
.stamp-row li:nth-child(3) { transition-delay: .16s; }
.stamp-row li:nth-child(4) { transition-delay: .24s; }
.stamp-row li:nth-child(5) { transition-delay: .32s; }

/* ---------- Stamp artwork motion (plays while --play is running) ---------- */
.sw1 { stroke-width: calc(1px * var(--k, 1)); }
.sw12 { stroke-width: calc(1.2px * var(--k, 1)); }
.sw15 { stroke-width: calc(1.5px * var(--k, 1)); }
.sw16 { stroke-width: calc(1.6px * var(--k, 1)); }
.sw2 { stroke-width: calc(2px * var(--k, 1)); }
.sw3 { stroke-width: calc(3px * var(--k, 1)); }
.sw4 { stroke-width: calc(4px * var(--k, 1)); }

.boll, .sway-a, .sway-b, .shuttle, .beater, .ship, .waves, .flap, .puff, .rays, .sun {
  animation-play-state: var(--play, paused);
  animation-iteration-count: infinite;
}
.boll { transform-origin: 99px 144px; animation: sway 3.4s ease-in-out infinite; }
.sway-a { transform-origin: 97px 172px; animation: sway 2.6s ease-in-out infinite; }
.sway-b { transform-origin: 95px 186px; animation: sway 3s ease-in-out -1.2s infinite reverse; }
.sprout .sway-a { transform-origin: 99px 132px; }
.sprout .sway-b { transform-origin: 99px 120px; }
.shuttle { animation: shuttle 1.8s cubic-bezier(.6, 0, .4, 1) infinite; }
.beater { animation: beat 1.8s ease-in-out infinite; }
.ship { transform-origin: 99px 160px; animation: bob 2.6s ease-in-out infinite; }
.waves { animation: waves 3s linear infinite; }
.flap { transform-origin: 48px 44px; animation: flap .6s ease-in-out infinite; }
.puff { transform-box: fill-box; transform-origin: center; animation: puff 4s ease-out infinite; }
.p2 { animation-delay: -.8s; } .p3 { animation-delay: -1.6s; } .p4 { animation-delay: -2.4s; } .p5 { animation-delay: -3.2s; }
.rays, .sun { transform-origin: 99px 170px; animation: glow 3.6s ease-in-out infinite; }

@keyframes sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(4deg); } 75% { transform: rotate(-4deg); } }
@keyframes shuttle { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(12px); } 75% { transform: translateX(-12px); } }
@keyframes beat { 0%, 40%, 100% { transform: translateY(0); } 50%, 90% { transform: translateY(0); } 45%, 95% { transform: translateY(26px); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(3px) rotate(2deg); } 70% { transform: translateY(-2px) rotate(-2deg); } }
@keyframes waves { to { transform: translateX(-48px); } }
@keyframes flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-.4); } }
@keyframes puff {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  70% { transform: translate(14px, -24px) scale(1.45); opacity: 0; }
  71% { transform: translate(-4px, 10px) scale(.4); opacity: 0; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes glow { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.08) rotate(4deg); } }

/* ---------- Desktop: every part is one screen (main.js sets zoom + min-height on [data-fit]) ---------- */
@media (min-width: 1101px) {
  [data-fit] { display: flex; flex-direction: column; justify-content: center; }
  .hero { padding: 24px 0; }
  .sheet, .chapter { padding: 48px 0; }
  .post { padding: 48px 0 28px; }
  .colophon { margin-top: 32px; }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 1240px) {
  .chapters-nav { gap: 24px; }
  .post-office { display: none; }
}
@media (max-width: 1100px) {
  .sheet-head { flex-direction: column; align-items: flex-start; }
  .sheet-note { width: auto; max-width: 480px; }
  .stamp-row { grid-template-columns: repeat(3, 1fr); row-gap: 56px; }
  .chapter-inner, .reverse .chapter-inner { flex-direction: column; align-items: stretch; gap: 64px; }
  .big-stamp { align-self: center; width: min(520px, 100%); }
  .story { width: auto; }
  .letter { flex-direction: column; }
  .env-stamp-wrap { align-self: flex-end; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 130px; }
  .selvage { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .plate { display: none; }
  .chapters-nav { order: 3; width: 100%; justify-content: space-between; gap: 8px; }
  .chapters-nav small { display: none; }
  .hero { padding: 24px 0 48px; }
  .hero-stamp { padding: 10px; border-width: 8px; }
  .hero-inner { padding: 8px; }
  .coin-xl { width: 60px; height: 60px; font-size: 26px; }
  .hero .coin-latin { font-size: 22px; }
  .latin, .tagline, .hint { display: none; }
  .hero-country { gap: 14px; }
  .stamp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; row-gap: 40px; }
  .mini { padding: 8px; border-width: 5px; gap: 8px; }
  .mini-val { font-size: 20px; line-height: 24px; }
  .mini-country { font-size: 17px; line-height: 22px; }
  .mini-foot b { font-size: 16px; line-height: 22px; }
  .mini-foot small { font-size: 10px; letter-spacing: .08em; }
  .letter { align-items: stretch; }
  .chapter { padding: 72px 0; }
  .big-stamp { padding: 12px; border-width: 8px; }
  .postmark { width: 150px; right: 6px; }
  .reverse .postmark { left: 6px; }
  .lede { font-size: 21px; line-height: 36px; }
  .letter { padding: 32px 22px; }
  .colophon { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .stamped .postmark, .env-stamp-wrap.is-cancelled .postmark { opacity: .72; transform: rotate(-14deg); }
}