/* Lettermoth site. One look: the green desk blotter at night, with the lamp on. */
@font-face { font-family: 'Bevan'; src: url('fonts/Bevan-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('fonts/AtkinsonHyperlegible-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('fonts/AtkinsonHyperlegible-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'La Belle Aurore'; src: url('fonts/LaBelleAurore-Regular.ttf') format('truetype'); font-display: swap; }

:root {
  --blotter: #2F4A47; --deep: #1B2E2C; --paper: #EDE4D0; --edge: #F3EEE0; --ink: #1F2A44;
  --red: #C8402F; --blue: #2E5FA3; --lamp: #E6B55A; --cream: #F1EBDC; --muted: #C6C9BC;
  --display: 'Bevan', Georgia, serif;
  --body: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --hand: 'La Belle Aurore', 'Segoe Script', cursive;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; background: var(--deep); color: var(--cream);
  font: 18px/1.6 var(--body);
  background-image: radial-gradient(60% 40% at 85% 0%, rgba(230,181,90,.16), rgba(230,181,90,0) 70%), radial-gradient(120% 80% at 50% 10%, #3B5C57 0%, #2F4A47 40%, #1B2E2C 100%);
  background-attachment: fixed;
}
a { color: var(--cream); text-underline-offset: 3px; }
a:hover { color: var(--lamp); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; border-radius: 4px; }
.stripe { height: 12px; background: repeating-linear-gradient(135deg, var(--red) 0 14px, var(--cream) 14px 22px, var(--blue) 22px 36px, var(--cream) 36px 44px); }
.wrap { width: min(1080px, 100% - 40px); margin-inline: auto; }

header.site { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding-block: 26px; }
header.site img { display: block; height: 46px; width: auto; max-width: 100%; }
header.site nav { display: flex; gap: 22px; font-size: 16px; }
header.site nav a { text-decoration: none; color: var(--muted); }
header.site nav a:hover { color: var(--cream); }

h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 7vw, 74px); }
h2 { font-size: clamp(28px, 4vw, 42px); }
h3 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--lamp); margin: 0 0 10px; }
p { margin: 0; }
.lede { font-size: clamp(19px, 2.4vw, 23px); line-height: 1.5; max-width: 34ch; color: var(--cream); }
.muted { color: var(--muted); }
.hand { font-family: var(--hand); font-size: clamp(26px, 3.6vw, 36px); line-height: 1.2; color: var(--lamp); }

.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; padding-block: 36px 90px; }
.hero .copy { display: grid; gap: 26px; justify-items: start; }
.soon { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 14px; background: var(--red); color: #FFF8EA; font-weight: 700; font-size: 18px; border-bottom: 3px solid rgba(0,0,0,.3); }
.fine { font-size: 15px; color: var(--muted); }

.phone { position: relative; width: min(100%, 340px); margin-inline: auto; border-radius: 46px; padding: 9px; background: #0A100F; box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1.5px rgba(241,235,220,.2); }
.phone img { display: block; width: 100%; height: auto; border-radius: 38px; }
.phone.tilt { transform: rotate(3deg); }

section { padding-block: 70px; border-top: 1px solid rgba(241,235,220,.14); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 44px; }
.step { display: grid; gap: 18px; align-content: start; }
.step p { color: var(--muted); }
.step .phone { width: min(100%, 280px); }

.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.points li { padding-left: 34px; position: relative; }
.points li::before { content: ''; position: absolute; left: 0; top: .5em; width: 16px; height: 16px; border-radius: 3px; background: repeating-linear-gradient(135deg, var(--red) 0 4px, var(--cream) 4px 6px, var(--blue) 6px 10px, var(--cream) 10px 12px); }

.letter { background: var(--paper); color: var(--ink); border-radius: 6px; padding: 30px 32px; box-shadow: 0 20px 40px rgba(0,0,0,.4); transform: rotate(-1.2deg); }
.letter .hand { color: var(--ink); font-size: clamp(22px, 3vw, 28px); }
.letter .by { margin-top: 14px; text-align: right; }

footer.site { padding-block: 50px 70px; border-top: 1px solid rgba(241,235,220,.14); display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 15px; }
footer.site nav { display: flex; gap: 24px; }

/* Text pages */
.doc { padding-block: 30px 90px; max-width: 760px; }
.doc h1 { font-size: clamp(34px, 6vw, 54px); margin-bottom: 14px; }
.doc h2 { font-size: clamp(22px, 3vw, 28px); margin: 44px 0 12px; }
.doc p, .doc li { color: var(--cream); }
.doc p + p { margin-top: 14px; }
.doc ul { padding-left: 22px; display: grid; gap: 8px; margin: 12px 0 0; }
.doc .updated { color: var(--muted); font-size: 15px; margin-bottom: 30px; }
.doc .box { margin-top: 24px; padding: 18px 20px; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid rgba(241,235,220,.16); }
.doc dt { font-weight: 700; margin-top: 26px; }
.doc dd { margin: 6px 0 0; color: var(--cream); }

@media (max-width: 820px) {
  .hero, .two { grid-template-columns: 1fr; gap: 44px; }
  .steps { grid-template-columns: 1fr; }
  .hero .phone { order: -1; width: min(100%, 300px); }
  header.site nav { gap: 18px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: no-preference) {
  .phone.tilt { transition: transform .4s ease; }
  .phone.tilt:hover { transform: rotate(0deg); }
}