@font-face {
  font-family: Fraunces;
  src: url("/assets/fonts/fraunces-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Fraunces;
  src: url("/assets/fonts/fraunces-500-italic-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Fraunces;
  src: url("/assets/fonts/fraunces-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Fraunces;
  src: url("/assets/fonts/fraunces-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/assets/fonts/courier-prime-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/assets/fonts/courier-prime-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --desk: #141010;
  --desk-deep: #0a0808;
  --paper: #f3ece2;
  --paper-warm: #ebe2d4;
  --paper-shadow: #c8bdb0;
  --ink: #1c1412;
  --ink-soft: rgba(28, 20, 18, 0.72);
  --ink-faint: rgba(28, 20, 18, 0.45);
  --blood: #9f2131;
  --blood-bright: #c42d42;
  --blood-dim: rgba(159, 33, 49, 0.35);
  --serif: Fraunces, Georgia, serif;
  --type: "Courier Prime", "Courier New", monospace;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gutter: clamp(1rem, 4vw, 1.5rem);
  --sheet-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 2px 0 var(--paper-shadow);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
html, body { min-height: 100%; }
body {
  font-family: var(--type);
  font-size: 0.9375rem;
  color: var(--paper);
  background: var(--desk-deep);
  overflow-x: clip;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(159, 33, 49, 0.45); color: #fff; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--blood-bright);
  outline-offset: 3px;
}

.desk {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 70% 15%, rgba(159, 33, 49, 0.08), transparent 55%),
    radial-gradient(ellipse 50% 40% at 15% 80%, rgba(243, 236, 226, 0.03), transparent 50%),
    linear-gradient(180deg, #0c0a0a 0%, var(--desk) 50%, #0e0c0c 100%);
}
.desk::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ink-smear {
  position: fixed;
  top: 18%;
  right: -5%;
  z-index: 0;
  width: min(40vw, 22rem);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.12;
  background: radial-gradient(circle, var(--blood) 0%, transparent 68%);
  filter: blur(40px);
}

.wax-mark {
  position: fixed;
  top: max(var(--gutter), env(safe-area-inset-top));
  right: max(var(--gutter), env(safe-area-inset-right));
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--blood-dim);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
  transition: transform 0.2s ease;
}
.wax-mark:hover { transform: scale(1.06) rotate(-4deg); }
.wax-mark img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 50%;
}

.confession {
  position: relative;
  z-index: 1;
  width: min(42rem, 100%);
  margin-inline: auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: clamp(1.15rem, 3vw, 1.65rem);
  padding:
    max(var(--gutter), env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    max(var(--gutter), env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
}

.sheet {
  position: relative;
  min-width: 0;
  color: var(--ink);
  background: var(--paper);
  padding: clamp(1.15rem, 3.5vw, 1.65rem);
  box-shadow: var(--sheet-shadow);
  overflow: hidden;
}
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 27px,
      rgba(28, 20, 18, 0.035) 27px,
      rgba(28, 20, 18, 0.035) 28px
    );
}

.sheet-head {
  rotate: -1.2deg;
  margin-right: clamp(0.5rem, 3vw, 1.5rem);
  border-bottom: 3px double rgba(28, 20, 18, 0.12);
}
.sheet-head .folio {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.85rem;
}
.sheet-head h1 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 0.95;
  overflow-wrap: anywhere;
  container-type: inline-size;
  margin-bottom: 0.65rem;
}
.sheet-head .paper {
  display: block;
  font-size: clamp(2.6rem, 1rem + 11cqw, 4.5rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.sheet-head .pain {
  display: block;
  font-size: clamp(2.6rem, 1rem + 11cqw, 4.5rem);
  font-style: italic;
  font-weight: 500;
  color: var(--blood);
  letter-spacing: -0.01em;
}
.sheet-head .tld {
  display: inline-block;
  margin-top: 0.2em;
  font-family: var(--type);
  font-size: clamp(0.95rem, 0.55rem + 2cqw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.stamp {
  position: absolute;
  top: clamp(0.85rem, 2.5vw, 1.25rem);
  right: clamp(0.85rem, 2.5vw, 1.25rem);
  padding: 0.35rem 0.55rem;
  border: 3px solid var(--blood);
  border-radius: 4px;
  font-family: var(--type);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blood);
  rotate: 14deg;
  opacity: 0.82;
  mix-blend-mode: multiply;
}

.sheet-logo {
  rotate: 0.8deg;
  margin-left: clamp(0.75rem, 4vw, 2rem);
  padding: clamp(0.55rem, 1.5vw, 0.85rem);
  background: linear-gradient(180deg, #faf6f0 0%, var(--paper-warm) 100%);
}
.sheet-logo .logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
.sheet-logo figcaption {
  position: relative;
  z-index: 1;
  margin-top: 0.45rem;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-faint);
}

.sheet-body {
  rotate: -0.6deg;
  margin-right: clamp(0.25rem, 2vw, 1rem);
}
.sheet-body .confess {
  position: relative;
  z-index: 1;
  font-size: clamp(0.92rem, 0.85rem + 0.3cqw, 1rem);
  line-height: 1.72;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.sheet-body .confess em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
}

.margin-note {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.note {
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px dashed rgba(28, 20, 18, 0.15);
  background: rgba(235, 226, 212, 0.45);
}
.note dt {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.2rem;
}
.note dd {
  font-family: var(--type);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.note dd.hot {
  color: var(--blood);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 0.82rem;
}

.sheet-seal {
  rotate: 1deg;
  margin-left: clamp(0.35rem, 2.5vw, 1.25rem);
  border-top: 1px solid rgba(28, 20, 18, 0.1);
  background:
    radial-gradient(circle at 92% 8%, rgba(159, 33, 49, 0.08), transparent 42%),
    var(--paper);
}
.sheet-seal h2 {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 1rem + 2cqw, 1.85rem);
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.sheet-seal .sub {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.85rem;
}

.actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding: 0.55rem 1.2rem;
  font-family: var(--type);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.actions a.primary {
  color: var(--paper);
  background: var(--blood);
  box-shadow: 0 6px 20px rgba(159, 33, 49, 0.35);
}
.actions a.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(159, 33, 49, 0.42);
}
.actions a.secondary {
  color: var(--ink);
  background: transparent;
  border: 2px solid rgba(28, 20, 18, 0.18);
}
.actions a.secondary:hover {
  border-color: var(--blood-dim);
  color: var(--blood);
}

.mail-line {
  position: relative;
  z-index: 1;
  font-size: 0.65rem;
  color: var(--ink-faint);
  margin-bottom: 0.55rem;
}
.mail-line a {
  color: var(--blood);
  text-decoration: none;
  font-weight: 700;
}
.mail-line a:hover { text-decoration: underline; }

.disclaimer {
  position: relative;
  z-index: 1;
  font-size: 0.62rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

.sheet-foot {
  rotate: -0.4deg;
  padding: 0.75rem 1rem;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-faint);
  background: rgba(235, 226, 212, 0.65);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.error-desk {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}
.error-sheet {
  width: min(22rem, 100%);
  padding: clamp(1.5rem, 5vw, 2rem);
  text-align: center;
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--sheet-shadow);
  rotate: -1.5deg;
}
.error-sheet img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 50%;
  margin-bottom: 0.75rem;
  border: 2px solid var(--blood-dim);
}
.error-sheet h1 {
  font-family: var(--serif);
  font-size: 3.5rem;
  font-style: italic;
  color: var(--blood);
  margin-bottom: 0.4rem;
}
.error-sheet p {
  font-family: var(--type);
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
  line-height: 1.55;
}
.error-sheet a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 1.1rem;
  font-family: var(--type);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--blood);
}

@media (max-width: 560px) {
  .margin-note { grid-template-columns: 1fr; }

  .sheet-head,
  .sheet-logo,
  .sheet-body,
  .sheet-seal,
  .sheet-foot {
    margin-left: 0;
    margin-right: 0;
    rotate: 0deg;
  }

  .stamp { rotate: 8deg; }
  .actions a { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .actions a,
  .wax-mark { transition: none; }
}