/* Aerogramme — the note is correspondence that traveled to reach you.
   Committed to a single light world on purpose: this is paper, and a dark
   airmail letter is not a thing. */

:root {
  /* Three stocks, light to dark: the letter, the envelope, the desk it sits on. */
  --letter: #fbf9f4;
  --envelope: #e7e0d1;
  --envelope-shade: #ded6c4;
  --paper: #efece3;

  --ink: #1d2b3a;
  --soft: #5d6f80;
  --faint: #98a1a8;
  --red: #b8283a;
  --blue: #1f4e88;
  --rule: rgba(29, 43, 58, 0.16);
  --rule-faint: rgba(29, 43, 58, 0.09);

  --serif: "Iowan Old Style", "Hoefler Text", ui-serif, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Airmail banding, used both as the page frame and as the envelope border.
   Real par avion stock carries it around the whole perimeter, not just the top. */
.frame span {
  background: repeating-linear-gradient(
    -45deg,
    var(--red) 0 9px,
    var(--letter) 9px 18px,
    var(--blue) 18px 27px,
    var(--letter) 27px 36px
  );
}

.frame {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.frame span { position: absolute; }
.frame .t { top: 0; left: 0; right: 0; height: 8px; }
.frame .b { bottom: 0; left: 0; right: 0; height: 8px; }
.frame .l { top: 0; bottom: 0; left: 0; width: 8px; }
.frame .r { top: 0; bottom: 0; right: 0; width: 8px; }

.label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--soft);
}

/* ---------- board ---------- */

header {
  padding: 54px 32px 22px;
  text-align: center;
}

header h1 {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.06em;
  margin: 0;
}

header p {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 8px 0 0;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 32px 72px;
  align-items: start;
}

@media (max-width: 860px) {
  .board { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 18px 24px 56px; }
}

/* The column you write in sits on letter stock. The two you read sit on the desk. */
.writing {
  background: var(--letter);
  padding: 22px 24px 26px;
  margin-top: -22px;
  box-shadow: 0 6px 18px rgba(29, 43, 58, 0.07);
}

section h2 {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 4px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rule);
}

section .hint {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--faint);
  margin: 9px 0 18px;
}

.received h2 { color: var(--red); border-bottom-color: rgba(184, 40, 58, 0.32); }

/* ---------- entries ---------- */

.entry {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 20px;
  text-wrap: pretty;
}

.entry .who {
  display: block;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 3px;
}

.entry.mine .who { color: var(--soft); }

.entry .meta {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 5px;
}

.entry .meta .kept { color: var(--red); }

/* Controls stay out of the way on a mouse and stay reachable on a phone. */
.entry .controls {
  display: flex;
  gap: 14px;
  margin-top: 7px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.entry:hover .controls,
.entry:focus-within .controls { opacity: 1; }

@media (hover: none), (max-width: 860px) {
  .entry .controls { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .entry .controls { transition: none; }
}

.entry .controls .ghost {
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 2px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
}

.entry .controls .ghost:hover {
  background: transparent;
  color: var(--red);
  border-bottom-color: var(--red);
}

.edit-box {
  margin: 6px 0 0;
  font-size: 15px;
  min-height: 84px;
}

.empty {
  font-size: 14px;
  color: var(--faint);
  font-style: italic;
  margin: 0;
}

/* ---------- compose ---------- */

/* Inputs are ruled lines, not boxes. Writing on paper, not filling a form. */
textarea,
input[type="text"],
input[type="date"] {
  width: 100%;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 8px 0;
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
}

textarea {
  min-height: 104px;
  resize: vertical;
  font-size: 17px;
}

textarea::placeholder,
input::placeholder { color: var(--faint); font-style: italic; }

textarea:focus,
input:focus {
  outline: 0;
  border-bottom-color: var(--blue);
}

input[type="date"] {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--soft);
}

label.row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 16px;
  cursor: pointer;
}

label.row input { width: auto; margin: 0; accent-color: var(--red); }

#send-options .hint { margin-top: -8px; }

button {
  font-family: var(--sans);
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 11px 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

button:hover { background: var(--ink); color: var(--paper); }

button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

button.ghost {
  border: 0;
  border-bottom: 1.5px solid var(--red);
  padding: 0 0 3px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
}

button.ghost:hover { background: transparent; color: var(--red); }

button:disabled { opacity: 0.45; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}

/* ---------- the share slip ---------- */

.share {
  margin-top: 22px;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--soft);
}

.share code {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  word-break: break-all;
  color: var(--blue);
  margin: 9px 0 14px;
}

#today .entry:first-of-type { margin-top: 26px; }

footer {
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 24px 44px;
}

/* ---------- what the recipient opens ---------- */

.note-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 26px 44px;
}

/* The envelope: a flap folded open at the top, the letter resting inside it. */
.envelope {
  position: relative;
  width: 100%;
  max-width: 512px;
  background: var(--envelope);
  padding: 8px;
  box-shadow: 0 20px 46px rgba(29, 43, 58, 0.17), 0 2px 5px rgba(29, 43, 58, 0.1);
}

.envelope .border {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.envelope .border span { position: absolute; }
.envelope .border .t { top: 0; left: 0; right: 0; height: 8px; }
.envelope .border .b { bottom: 0; left: 0; right: 0; height: 8px; }
.envelope .border .l { top: 0; bottom: 0; left: 0; width: 8px; }
.envelope .border .r { top: 0; bottom: 0; right: 0; width: 8px; }

.envelope .border span {
  background: repeating-linear-gradient(
    -45deg,
    var(--red) 0 8px,
    var(--envelope) 8px 16px,
    var(--blue) 16px 24px,
    var(--envelope) 24px 32px
  );
}

.flap {
  height: 78px;
  margin: 0 0 -30px;
  background: var(--envelope-shade);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  position: relative;
  z-index: 1;
}

.par-avion {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--soft);
  border: 1px solid var(--blue);
  padding: 3px 7px;
  transform: rotate(-3deg);
}

.note-card {
  position: relative;
  z-index: 2;
  background: var(--letter);
  width: 100%;
  text-align: center;
  padding: 46px 32px 40px;
  box-shadow: 0 -1px 0 rgba(29, 43, 58, 0.07), 0 8px 20px rgba(29, 43, 58, 0.09);
}

@media (max-width: 480px) {
  .flap { height: 62px; margin-bottom: -24px; }
  .note-card { padding: 38px 24px 34px; }
  .par-avion { top: 20px; left: 20px; }
}

.note-card .to { margin: 0 0 30px; }

.note-card .body {
  font-size: 23px;
  line-height: 1.52;
  font-style: italic;
  margin: 0 0 30px;
  text-wrap: pretty;
}

.note-card .sig { font-size: 16px; color: var(--soft); margin: 0 0 5px; }

.note-card .posted {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 32px;
}

.note-card .kept {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}

/* The invitation to write back. It waits until the note has been kept, so it
   never competes with the letter for attention on first read. */
.write-back {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-faint);
}

.write-back .wb-label { color: var(--red); margin: 0 0 10px; }

.write-back .wb-line {
  font-size: 15px;
  font-style: italic;
  color: var(--soft);
  margin: 0 0 20px;
  text-wrap: pretty;
}

.write-back .wb-button {
  display: inline-block;
  text-decoration: none;
  font-family: var(--sans);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 11px 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: background 140ms ease, color 140ms ease;
}

.write-back .wb-button:hover { background: var(--ink); color: var(--letter); }

.write-back .wb-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

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

/* Sealed means the letter is genuinely inside: pushed a full card-height down
   and clipped away by the envelope, with a closed lid over the top. The final
   state is exactly the static layout, so no-JS and errors degrade to it. */
.envelope.sealed,
.envelope.opening { overflow: hidden; }

.envelope.sealed .note-card { transform: translateY(100%); }

/* The lid only exists while the envelope is closing or opening. Absolutely
   positioned so it never touches the resting layout. */
.lid {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  height: 190px;
  z-index: 5;
  background: linear-gradient(178deg, var(--envelope-shade), #d3c9b4);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transform-origin: 50% 0;
  backface-visibility: hidden;
}

.envelope.opening .lid { animation: lid-open 520ms cubic-bezier(0.4, 0, 0.3, 1) forwards; }

.envelope.opening .note-card {
  transform: none;
  transition: transform 640ms cubic-bezier(0.16, 0.8, 0.3, 1) 220ms;
}

@keyframes lid-open {
  0% { transform: rotateX(0); opacity: 1; }
  70% { transform: rotateX(-150deg); opacity: 1; }
  100% { transform: rotateX(-178deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .envelope.opening .lid,
  .envelope.opening .note-card {
    animation: none;
    transition: none;
  }
  .write-back .wb-button { transition: none; }
}

/* The address side of a held envelope. It never opens. */
.face {
  position: relative;
  z-index: 4;
  background: var(--envelope);
  text-align: center;
  padding: 44px 30px 38px;
}

/* A held note is still in transit. Same page, no body, a postmark instead. */
.in-transit .headline {
  font-size: 22px;
  line-height: 1.45;
  margin: 0 0 22px;
  text-wrap: balance;
}

.in-transit .arrives {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid rgba(184, 40, 58, 0.35);
  border-radius: 999px;
  padding: 9px 18px;
  display: inline-block;
  margin: 0 0 32px;
}