/* Luftpost: a letter from Tromsø.
   Desk blotter in oxblood, airmail paper in pale blue, one typewriter, one pen. */

:root {
  --felt: #4b1a22;
  --felt-deep: #2c0e14;
  --air: #dce8f1;
  --env: #efebe0;
  --card: #f6f1e4;
  --ink: #1d2434;
  --pen: #23408e;
  --red: #c0392e;
  --blue: #2a4b9b;
  --ribbon: #a3261f;
  --mark: #2c2b32;

  --type: 'Special Elite', 'Courier New', Courier, monospace;
  --hand: 'Reenie Beanie', 'Bradley Hand', 'Segoe Print', cursive;
  --sign: 'Homemade Apple', 'Reenie Beanie', cursive;
  --print: 'Old Standard TT', Georgia, 'Times New Roman', serif;

  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .27 0 0 0 0 .42 .34 0 0 0 -.1'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .55 0 0 0 -.17'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--felt-deep);
  color: var(--ink);
  font: 400 16px/1.72 var(--type);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
h1, h2, h3, strong { font-weight: 400; }
img, svg { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 2px solid var(--ribbon); outline-offset: 3px; border-radius: 2px; }
.topbar :focus-visible, .pc__btn:focus-visible, .pc__card:focus-visible { outline-color: #ffd98a; }

/* ---------- desk ---------- */

.desk {
  position: relative;
  overflow-x: clip;
  min-height: 100vh;
  padding-bottom: 30px;
  background:
    var(--grain),
    radial-gradient(130% 760px at 30% -60px, rgba(176, 84, 86, .45), transparent 72%),
    linear-gradient(#4b1a22, #3a141b);
}

.topbar {
  position: relative;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 10px 0;
}
.topbar__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  font-size: 14px;
  line-height: 1.2;
  color: #c6d7cc;
  text-decoration: underline;
  text-decoration-color: rgba(198, 215, 204, .45);
  text-underline-offset: 4px;
}
.topbar__link:hover { color: #fff; text-decoration-color: currentColor; }

.layout {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 10px;
}

/* ---------- envelope ---------- */

.hero { container-type: inline-size; }
.hero__in {
  --env-h: clamp(186px, 52cqw, 340px);
  --overlap: calc(var(--env-h) * .64);
  --rise: clamp(58px, 16cqw, 116px);
  --flap-h: clamp(56px, 15.500cqw, 118px);
  --b: clamp(8px, 2.100cqw, 14px);
  --s: clamp(7px, 1.800cqw, 12px);
  --tilt: 0deg;
  --bleed: 0px;
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--flap-h) + 4px);
}

.env-flap {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: calc(0px - var(--bleed));
  right: calc(0px - var(--bleed));
  height: var(--flap-h);
  background: #e4dfd1;
  clip-path: polygon(0 100%, 2.500% 82%, 45.500% 5%, 50% 0, 54.500% 5%, 97.500% 82%, 100% 100%);
  transform-origin: 50% 100%;
  transform: rotate(var(--tilt));
}
.env-flap::before {
  content: '';
  position: absolute;
  inset: 11% 3.400% 0;
  clip-path: polygon(0 100%, 2.500% 82%, 45.500% 5%, 50% 0, 54.500% 5%, 97.500% 82%, 100% 100%);
  background:
    linear-gradient(to top, rgba(14, 26, 60, .5), rgba(14, 26, 60, 0) 60%),
    repeating-linear-gradient(45deg, rgba(42, 75, 155, .55) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(42, 75, 155, .55) 0 1px, transparent 1px 5px),
    #c4d0e6;
}

.env,
.reply__env {
  position: relative;
  background: var(--fibre), linear-gradient(#f3efe5, #e9e4d7);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 18px 34px rgba(0, 0, 0, .38);
}
.env::before,
.reply__env::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--b);
  background: repeating-linear-gradient(118deg,
    var(--red) 0 var(--s),
    transparent var(--s) calc(var(--s) * 2),
    var(--blue) calc(var(--s) * 2) calc(var(--s) * 3),
    transparent calc(var(--s) * 3) calc(var(--s) * 4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.env {
  z-index: 2;
  height: var(--env-h);
  margin-inline: calc(0px - var(--bleed));
  transform-origin: 50% 0;
  transform: rotate(var(--tilt));
}

.env__label {
  position: absolute;
  left: 6.500%;
  top: 15%;
  display: grid;
  padding: .55em .95em .5em;
  background: var(--blue);
  color: #f3efe5;
  font: 700 clamp(9.500px, 2.500cqw, 17px)/1.18 var(--print);
  letter-spacing: .15em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 2px;
  outline: 1px solid rgba(243, 239, 229, .75);
  outline-offset: -3.500px;
  transform: rotate(-2deg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}

.env__to {
  position: absolute;
  left: 12%;
  top: 37.500%;
  display: grid;
  font-family: var(--sign);
  color: var(--pen);
  line-height: 1.25;
  white-space: nowrap;
  transform: rotate(-2deg);
}
.env__to span:first-child { font-size: clamp(19px, 5.300cqw, 38px); }
.env__to span:last-child { font-size: clamp(13px, 3.300cqw, 23px); margin-left: 1.3em; }

.env__stamps {
  position: absolute;
  top: 10%;
  right: 5%;
  display: flex;
  gap: clamp(4px, 1cqw, 8px);
}
.env__stamps .stamp { width: clamp(50px, 16cqw, 94px); height: auto; }
.env__stamps .stamp:nth-child(3) { display: none; }
.env__stamps .stamp:nth-child(1) { rotate: -2deg; }
.env__stamps .stamp:nth-child(2) { rotate: 1.500deg; translate: 0 2px; }
.env__stamps .stamp:nth-child(3) { rotate: -1deg; }

.stamp {
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4));
  transition: translate .25s ease, filter .25s ease;
}

.postmark {
  position: absolute;
  top: 9%;
  right: 19%;
  width: clamp(160px, 46cqw, 345px);
  height: auto;
  color: #171c2a;
  opacity: .74;
  mix-blend-mode: multiply;
  font-family: var(--type);
  rotate: -3deg;
  pointer-events: none;
}

/* ---------- letter sheets ---------- */

.sheet-wrap {
  position: relative;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .32)) drop-shadow(0 16px 24px rgba(0, 0, 0, .36));
}
.sheet-wrap--1 {
  z-index: 3;
  margin: calc(var(--overlap) - var(--env-h)) 6px 0;
}
.sheet-wrap--2 { margin: 0 6px; }

.sheet {
  position: relative;
  padding: 54px 20px 58px 36px;
  background: var(--fibre), linear-gradient(#e3edf5, #d9e6f0 55%, #d5e2ed);
  font-size: 16px;
  line-height: 1.72;
  text-wrap: pretty;
  isolation: isolate;
}
.sheet::after { content: ''; display: block; clear: both; }

.sheet__fold {
  position: absolute;
  left: 0; right: 0;
  z-index: -1;
  height: 40px;
  margin-top: -20px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0,
    rgba(255, 255, 255, .34) 46%,
    rgba(52, 84, 126, .26) 50%,
    rgba(52, 84, 126, .08) 64%,
    transparent 100%);
}
.sheet__fold--1 { top: 33.330%; }
.sheet__fold--2 { top: 66.660%; }

.sheet__hole {
  position: absolute;
  left: 11px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #0a1813, #1a382d);
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 255, 255, .65);
}
.sheet__hole--1 { top: calc(50% - 150px); }
.sheet__hole--2 { top: calc(50% + 137px); }

.sheet__edge {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 80px;
  transform: translateY(-100%);
  background: linear-gradient(to bottom, transparent, rgba(34, 60, 98, .26));
  opacity: 0;
  pointer-events: none;
}

.photo {
  position: relative;
  z-index: 1;
  float: right;
  width: 96px;
  margin: -70px -4px 8px 14px;
  padding: 5px 5px 0;
  background: #fbfaf5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 7px 14px rgba(20, 40, 70, .28);
  rotate: 3deg;
}
.photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
}
.photo figcaption {
  font: 18px/24px var(--hand);
  color: var(--pen);
  text-align: center;
  white-space: nowrap;
}
.photo__clip {
  position: absolute;
  top: -15px;
  left: 16px;
  width: 15px;
  height: 42px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}

.lh {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 9px;
  align-items: center;
  width: fit-content;
  margin-bottom: 18px;
  padding-bottom: 8px;
  border-bottom: 3px double rgba(42, 75, 155, .6);
  font-family: var(--print);
}
.lh__mark { grid-row: 1 / span 2; width: auto; height: 32px; }
@media (max-width: 699px) {
  .lh { max-width: calc(100% - 112px); }
  .lh__sub { white-space: normal; }
}
.lh__name { font-weight: 700; font-size: 17px; line-height: 1.15; color: var(--mark); align-self: end; }
.lh__sub { font-style: italic; font-size: 12.500px; line-height: 1.3; color: var(--blue); align-self: start; white-space: nowrap; }

.letter p { margin-bottom: 1.15em; }
.letter .date { margin-bottom: 1.3em; clear: right; }
.letter a,
.slip a {
  color: var(--ribbon);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.letter a:hover, .slip a:hover { color: var(--blue); }

.greet {
  margin: 0 0 .75em;
  font-size: 27px;
  line-height: 1.28;
  letter-spacing: -.01em;
}
.js-type { white-space: nowrap; }
.tch { display: inline-block; white-space: pre; }
.tch--low { translate: 0 1.200px; }
.tch--light { opacity: .7; }

.letter h2 {
  margin: 1.9em 0 1em;
  font-size: 1.06em;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-thickness: 1.500px;
  text-underline-offset: 5px;
}
.letter h2:first-child { margin-top: 0; }
.letter strong {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.xout { position: relative; display: inline-block; line-height: 1; white-space: nowrap; }
.xout::after {
  content: 'xxxxxxxx';
  position: absolute;
  left: 0; right: -1px; top: 0;
  overflow: hidden;
  line-height: 1;
  letter-spacing: .01em;
  opacity: .92;
}

.ink-l { opacity: .76; }
.ink-h { text-shadow: 0 0 .5px rgba(29, 36, 52, .6); }
.ink-d { position: relative; top: .9px; }

.stands { list-style: none; counter-reset: stand; }
.stands li {
  position: relative;
  counter-increment: stand;
  padding-left: 2.1em;
  margin-bottom: 1.15em;
}
.stands li::before { content: counter(stand) '.'; position: absolute; left: 0; }
.stands li:last-child { margin-bottom: 0; }

.cont { text-align: right; margin-top: 1.4em; }
.pageno { text-align: center; margin-bottom: 1.6em; }

.prices { margin: 1.3em 0 1.4em; }
.prices div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .5em;
  margin-bottom: .4em;
}
.prices dt {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.prices dt::after {
  content: '. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .';
  flex: 1 1 0;
  width: 0;
  min-width: 2ch;
  margin-left: .5em;
  overflow: hidden;
  white-space: nowrap;
  opacity: .6;
  direction: rtl;
}
.prices dd { margin-left: auto; white-space: nowrap; }

.bye { margin-top: 1.9em; }
.sig {
  width: fit-content;
  margin: -2px 0 0 2px;
  font: 34px/1.6 var(--sign);
  color: var(--pen);
  rotate: -4deg;
  transform-origin: 0 50%;
}
.sig-typed { margin: 0 0 2.3em; }
.letter .ps { margin-bottom: 0; }

/* ---------- postcards ---------- */

.cards { margin: 46px calc(50% - 50vw) 40px; scroll-margin-top: 16px; }

.slip {
  position: relative;
  width: fit-content;
  max-width: min(330px, 86vw);
  margin: 0 0 2px 22px;
  padding: 12px 16px 11px;
  background: var(--fibre), var(--air);
  font-size: 14.500px;
  line-height: 1.55;
  transform: rotate(-1.400deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 16px rgba(0, 0, 0, .25);
}
.slip h2 {
  margin-bottom: 4px;
  font-size: 1.04em;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cards__list {
  list-style: none;
  display: flex;
  gap: 14px;
  padding: 26px 16px 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cards__list::-webkit-scrollbar { display: none; }

.pc {
  --r: -1.100deg;
  flex: 0 0 min(88vw, 360px);
  display: flex;
  flex-direction: column;
  scroll-snap-align: center;
  rotate: var(--r);
}
.pc:nth-child(even) { --r: 1.200deg; }

.pc__card {
  position: relative;
  z-index: 1;
  perspective: 1400px;
  cursor: pointer;
  transition: translate .25s ease;
}
.pc__inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3, .1, .2, 1);
}
.pc[data-flipped='true'] .pc__inner { transform: rotateY(180deg); }

.pc__face {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: var(--fibre), var(--card);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 24px rgba(0, 0, 0, .32);
}

.pc__front { padding: 10px 10px 0; }
.pc__front img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 0 0;
  box-shadow: 0 0 0 1px rgba(29, 36, 52, .12);
}
.pc__cap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 2px;
  font-family: var(--print);
  line-height: 1.2;
}
.pc__name { font-weight: 700; font-size: 16px; color: var(--mark); }
.pc__kind { font-style: italic; font-size: 14.500px; color: #474d5c; }

.pc__back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 11px;
  padding: 14px 13px 12px 15px;
  color: var(--pen);
}
.pc__msg {
  padding-right: 10px;
  border-right: 1px solid rgba(29, 36, 52, .42);
  font-family: var(--hand);
  font-size: clamp(17px, 5.600vw, 22px);
  line-height: 1.03;
}
.pc__msg h3 { margin-bottom: 5px; font-size: 1.36em; line-height: 1; }
.pc__msg p + p { margin-top: 7px; }

.pc__addr {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
}
.pc__stamp { flex: none; width: 46px; height: auto; rotate: 2.500deg; }
.pc__links { list-style: none; width: 100%; margin-top: auto; }
.pc__links li {
  display: flex;
  align-items: flex-end;
  min-height: 45px;
  border-bottom: 1px solid rgba(29, 36, 52, .4);
}
.pc__links a {
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 44px;
  padding-bottom: 3px;
  font: 14px/1.3 var(--type);
  color: var(--ribbon);
  text-decoration: none;
  white-space: nowrap;
}
.pc__links a:hover { color: var(--blue); }

.pc__btn {
  align-self: flex-end;
  min-height: 44px;
  margin: -3px 20px 0 0;
  padding: 7px 14px 0;
  background: #e6dfcc;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: rgba(29, 36, 52, .5);
  text-underline-offset: 3px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .3);
}
.pc__btn:hover { background: #f1ebdb; }
.pc__btn[aria-pressed='true'] { background: var(--air); }

/* ---------- reply envelope ---------- */

.reply { margin: 56px 0 0; scroll-margin-top: 20px; }
.reply__env {
  --b: 10px;
  --s: 9px;
  padding: calc(var(--b) + 16px) calc(var(--b) + 16px) calc(var(--b) + 22px);
}
.reply__print {
  font: 700 11.500px/1.3 var(--print);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue);
}
.reply__stamp {
  position: absolute;
  top: calc(var(--b) + 14px);
  right: calc(var(--b) + 14px);
  width: 62px;
  height: auto;
  rotate: 2deg;
}
.reply__text { margin-top: 64px; }
.reply__text h2 { margin-bottom: 10px; font-size: 23px; line-height: 1.3; }
.reply__text p { max-width: 34em; }
.reply__cta { margin-top: 20px; }
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 3px 24px 0;
  background: var(--blue);
  color: #f6f3ea;
  font-size: 17px;
  text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 3px 0 #1a306c, 0 8px 16px rgba(26, 48, 108, .28);
  transition: translate .12s ease, box-shadow .12s ease;
}
.btn:hover { background: #22408a; }
.btn:active { translate: 0 3px; box-shadow: 0 0 0 #1a306c; }
.reply__alt { margin-top: 12px; }
.reply__alt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ribbon);
  text-underline-offset: 4px;
}
.reply__addr {
  display: grid;
  width: min(100%, 290px);
  margin: 14px 0 0 auto;
  font: normal 28px/1 var(--hand);
  color: var(--pen);
}
.reply__addr > * {
  display: flex;
  align-items: flex-end;
  min-height: 44px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(29, 36, 52, .4);
}
.reply__addr a {
  font: 15px/1.3 var(--type);
  color: var(--ribbon);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.reply__addr a:hover, .reply__alt a:hover { color: var(--blue); }

/* ---------- stamp series ---------- */

.series { width: min(100%, 340px); margin: 58px auto 0; }
.series__stamps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
  padding: 0 16px;
}
.series .stamp { width: 100%; height: auto; }
.series .stamp:nth-child(1) { rotate: -3deg; }
.series .stamp:nth-child(2) { rotate: 2deg; translate: 0 8px; }
.series .stamp:nth-child(3) { rotate: 1.500deg; }
.series .stamp:nth-child(4) { rotate: -2.500deg; translate: 0 6px; }
.slip--series { margin: 28px auto 0; max-width: 310px; transform: rotate(1.200deg); }

/* ---------- back of the envelope ---------- */

.back {
  position: relative;
  max-width: 740px;
  margin: 64px 10px 0;
  padding: 44px 18px 22px;
  background:
    linear-gradient(to bottom right, transparent calc(50% - .7px), rgba(29, 36, 52, .2) 50%, transparent calc(50% + .7px)) left top / 50% 74% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - .7px), rgba(29, 36, 52, .2) 50%, transparent calc(50% + .7px)) right top / 50% 74% no-repeat,
    var(--fibre),
    linear-gradient(#f1ede2, #e7e2d4);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 16px 30px rgba(0, 0, 0, .34);
  font-size: 13.500px;
  line-height: 1.65;
  text-align: center;
  color: #2f3646;
}
.back p + p { margin-top: 6px; }
.back__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 6px;
}
.back__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--ribbon);
  text-underline-offset: 4px;
}
.back__links a:hover { color: var(--blue); }

/* ---------- hover life (pointer devices) ---------- */

@media (hover: hover) {
  .pc__card:hover { translate: 0 -4px; }
  .stamp:hover {
    translate: 0 -3px;
    filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .34)) brightness(1.04);
  }
  .env__stamps .stamp:nth-child(2):hover { translate: 0 -1px; }
  .series .stamp:nth-child(2):hover { translate: 0 5px; }
  .series .stamp:nth-child(4):hover { translate: 0 3px; }
}

/* ---------- tablet ---------- */

@media (min-width: 700px) {
  .topbar { padding-inline: 22px; }
  .sheet { padding: 66px 60px 80px 94px; font-size: 17px; }
  .sheet-wrap--1 { margin-inline: 14px; }
  .letter .date { clear: none; }
  .env__stamps .stamp { width: clamp(50px, 12.400cqw, 94px); }
  .env__stamps .stamp:nth-child(3) { display: block; }
  .postmark { top: 8%; right: 14%; }
  .sheet-wrap--2 { margin-inline: 14px; }
  .sheet__hole { left: 32px; width: 19px; height: 19px; }
  .photo { width: 142px; margin: -88px -16px 12px 28px; padding: 7px 7px 0; }
  .photo figcaption { font-size: 22px; line-height: 30px; }
  .photo__clip { top: -19px; left: 24px; width: 18px; height: 50px; }
  .lh__mark { height: 38px; }
  .lh__name { font-size: 20px; }
  .lh__sub { font-size: 14px; }
  .greet { font-size: 35px; }
  .sig { font-size: 42px; }
  .pc__msg { font-size: 22px; }
  .reply__env {
    --b: 13px;
    --s: 11px;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: 40px;
    padding: 34px 40px 40px;
  }
  .reply__print { grid-column: 1 / -1; }
  .reply__stamp { top: 30px; right: 34px; width: 84px; }
  .reply__text { margin-top: 26px; }
  .reply__text h2 { font-size: 27px; }
  .reply__addr { align-self: end; margin-top: 110px; }
  .back { margin-inline: auto; padding: 60px 30px 26px; }
}

/* ---------- desktop: the still life ---------- */

@media (min-width: 1100px) {
  .topbar { position: absolute; top: 0; left: 0; right: 0; padding: 6px 30px 0; }

  .layout {
    display: grid;
    grid-template-columns: minmax(0, 740fr) minmax(0, 440fr);
    column-gap: clamp(44px, 5.500vw, 84px);
    row-gap: 72px;
    max-width: 1330px;
    padding: 12px 44px 0;
  }
  .hero { grid-column: 1; grid-row: 1; }
  .sheet-wrap--1, .sheet-wrap--2 { margin-inline: 0; }
  .hero__in { --tilt: -1.100deg; --bleed: 22px; }
  .sheet-wrap--2 { grid-column: 1; grid-row: 2; }

  .sheet {
    padding: 70px clamp(44px, 5vw, 74px) 88px clamp(78px, 7.400vw, 106px);
    font-size: clamp(17px, 1.250vw, 18px);
    line-height: 1.75;
  }
  .photo { width: 150px; margin: -94px -18px 14px 30px; }

  .cards {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-top: 78px;
  }
  .slip__swipe { display: none; }
  .slip { margin-left: 8px; }
  .cards__list {
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: 64px;
    padding: 30px 0 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .pc { --r: -2.300deg; flex: none; width: 93%; align-self: flex-start; }
  .pc:nth-child(even) { --r: 2.600deg; align-self: flex-end; }
  .pc:nth-child(3) { --r: -1.200deg; }
  .pc:nth-child(5) { --r: -3deg; }
  .pc__front { padding: 12px 12px 0; }
  .pc__front img { aspect-ratio: 720 / 508; }
  .pc__cap { min-height: 46px; }
  .pc__name { font-size: 18px; }
  .pc__kind { font-size: 15.500px; }
  .pc__back {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 16px;
    padding: 20px 18px 18px 22px;
  }
  .pc__msg { padding-right: 14px; font-size: clamp(19px, 1.560vw, 22.500px); line-height: 1.06; }
  .pc__stamp { width: clamp(52px, 4.500vw, 66px); }
  .pc__links a { font-size: 15px; }

  .reply { grid-column: 1; grid-row: 3; margin: 0; align-self: center; rotate: .700deg; }
  .series { grid-column: 2; grid-row: 3; margin: 0 auto; align-self: center; width: min(100%, 380px); }
  .back { max-width: 1242px; margin-top: 84px; padding: 84px 40px 30px; }
}

/* ---------- the opening ---------- */

@keyframes flap-open {
  from { transform: perspective(900px) rotateZ(var(--tilt)) rotateX(97deg); }
  to { transform: perspective(900px) rotateZ(var(--tilt)) rotateX(0deg); }
}
@keyframes sheet-move {
  0%, 17% {
    transform: translateY(calc(14px - var(--overlap)));
    z-index: 1;
    animation-timing-function: cubic-bezier(.3, .7, .3, 1);
  }
  48% {
    transform: translateY(calc(0px - var(--overlap) - var(--rise)));
    z-index: 1;
    animation-timing-function: cubic-bezier(.45, 0, .15, 1);
  }
  48.100% { z-index: 3; }
  100% { transform: translateY(0); z-index: 3; }
}
@keyframes unfold {
  from { clip-path: inset(-40px -40px calc(100% - var(--rise)) -40px); }
  to { clip-path: inset(-40px -40px 0% -40px); }
}
@keyframes edge {
  from { top: var(--rise); opacity: 1; }
  80% { opacity: 1; }
  to { top: 100%; opacity: 0; }
}
@keyframes type-wait {
  from { visibility: hidden; }
  to { visibility: visible; }
}
@keyframes strike {
  from { opacity: 0; transform: translateY(-3px) scale(1.12); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  [data-intro='run'] .env-flap { animation: flap-open .44s cubic-bezier(.2, .7, .25, 1) .04s both; }
  [data-intro='run'] .sheet-wrap--1 { animation: sheet-move 1.150s linear both; }
  [data-intro='run'] .sheet-wrap--1 .sheet { animation: unfold .85s cubic-bezier(.5, 0, .2, 1) .55s both; }
  [data-intro='run'] .sheet-wrap--1 .sheet__edge { animation: edge .85s cubic-bezier(.5, 0, .2, 1) .55s both; }
  [data-intro='run'] .js-type:not(.is-split) { animation: type-wait 2s step-end both; }
  [data-intro='run'] .tch { animation: strike 80ms ease-out both; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .topbar__replay { display: none; }
  .stamp, .pc__card, .btn { transition: none; }
  .pc__inner { transition: none; transform: none !important; }
  .pc__back { transform: none; visibility: hidden; }
  .pc[data-flipped='true'] .pc__back { visibility: visible; }
  .pc[data-flipped='true'] .pc__front { visibility: hidden; }
}

/* ---------- without script: both sides of each card, no controls ---------- */

html:not(.js) .topbar__replay,
html:not(.js) .pc__btn { display: none; }
html:not(.js) .pc__card { cursor: auto; }
html:not(.js) .pc__back { position: relative; inset: auto; transform: none; margin-top: 10px; min-height: 240px; }