/* ============================================================
   MYLE LA SOIE — a letter, before we begin
   ivory #fdf6ec · espresso #2c2016 · caramel #8b6844 · dusty rose
   Cormorant Garamond = feeling · Jost = facts
   ============================================================ */

:root {
  color-scheme: only light; /* one letter, one light — never auto-darkened by phone dark mode */
  --ivory: #fdf6ec;
  --ink: #2c2016;
  --caramel: #8b6844;
  --rose: #c99a9a;
  --paper: #fffdf8;
  --hair: rgba(44, 32, 22, 0.14);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;               /* ≥16px */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* Illustrations melt into the ivory page — no visible boxes.
   multiply removes light backgrounds; the brightness lift raises their
   cream paper to ≈ ivory so the seam disappears (ink barely changes). */
.divider, .beliefs__stamps, .about__doodle, .footer__moon,
.fabric__bow, .footer__bow, .letter__illustration {
  mix-blend-mode: multiply;
  filter: brightness(1.08);
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.4rem, 9vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 7vw, 2.6rem); text-align: center; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--caramel);
  margin: 0 0 1.4em;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============ THE SEALED ENVELOPE ============ */
.seal { display: none; }

html.sealed .seal {
  display: grid;
  place-content: center;
  justify-items: center;
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--ivory);
  padding: 24px;
  text-align: center;
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}
html.sealed body { overflow: hidden; }

.seal__envelope {
  border: 0; padding: 0; background: none; cursor: pointer;
  width: min(78vw, 380px);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 14px 44px rgba(44, 32, 22, 0.14);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.seal__envelope:hover,
.seal__envelope:focus-visible { transform: scale(1.02); box-shadow: 0 18px 52px rgba(44, 32, 22, 0.18); }
.seal__envelope:focus-visible { outline: 2px solid var(--caramel); outline-offset: 4px; }

.seal__line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 5vw, 1.6rem);
  margin: 28px 0 0;
}
.seal__hint {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--caramel);
  opacity: 0.75;
  margin: 10px 0 0;
}

/* opening */
html.sealed.opening .seal { opacity: 0; visibility: hidden; }
html.sealed.opening .seal__envelope { transform: scale(1.05) translateY(-14px); }

html.sealed .page { opacity: 0; transform: translateY(22px); }
html.sealed.opening .page,
html:not(.sealed) .page { opacity: 1; transform: none; transition: opacity 1.1s var(--ease) 0.25s, transform 1.1s var(--ease) 0.25s; }

/* ============ PAGE RHYTHM ============ */
.page { overflow-x: clip; }
section { padding: clamp(56px, 10vw, 96px) 24px; }

.divider {
  width: min(180px, 44vw);
  margin: 0 auto;
  opacity: 0.9;
}

/* ============ 1 · THE LETTER ============ */
.letter { padding-top: clamp(48px, 8vw, 80px); }

.letter__sheet {
  max-width: 680px;
  margin: 0 auto;
  background:
    linear-gradient(rgba(253, 246, 236, 0.42), rgba(253, 246, 236, 0.42)),
    url("images/letter-paper.jpg");
  background-size: 100% 100%;
  border-radius: 4px;
  box-shadow: 0 10px 36px rgba(44, 32, 22, 0.08);
  padding: clamp(40px, 12%, 84px);
  padding-bottom: clamp(56px, 15%, 110px); /* keep the sign-off off the border */
}

.letter__illustration {
  width: min(150px, 38vw);
  margin: 0 auto 26px;
}

.letter__body {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 4.4vw, 1.3rem);
  line-height: 1.75;
  max-width: 620px;
}
.letter__body p { margin: 0 0 1.15em; }
.letter__body em { font-style: italic; }

.letter__signoff {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.6;
  margin: 2em 0 0;
}

/* ============ 2 · WHAT WE BELIEVE ============ */
.beliefs { text-align: center; }
.beliefs__stamps {
  width: min(420px, 82vw);
  margin: 0 auto 18px;
}

.stamps {
  list-style: none;
  margin: 34px auto 0;
  padding: 0;
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.stamp {
  width: min(210px, 44vw);
  background: var(--paper);
  border: 1.5px dashed rgba(139, 104, 68, 0.5);
  box-shadow: 0 0 0 5px var(--paper), 0 3px 14px rgba(44, 32, 22, 0.07);
  padding: 18px 14px 16px;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.4;
}
.stamp:nth-child(odd)  { transform: rotate(-1.2deg); }
.stamp:nth-child(even) { transform: rotate(1deg); }
.stamp:nth-child(3)    { transform: rotate(-0.5deg); }

.stamp__num {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--caramel);
  margin-bottom: 8px;
}

/* ============ 3 · ABOUT ME ============ */
.about { text-align: center; }
.about__lines {
  max-width: 480px;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.65;
}
.about__lines p { margin: 0 0 1em; }
.about__doodle {
  width: min(280px, 64vw);
  margin: 26px auto 0;
}

/* ============ 4 · THE FABRIC ============ */
.fabric { text-align: center; }
.fabric > p {
  max-width: 560px;
  margin: 26px auto 0;
  font-size: 1.02rem;
}
.fabric__photo {
  position: relative;
  width: min(420px, 84vw);
  margin: 30px auto 0;
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--hair);
  box-shadow: 0 8px 30px rgba(44, 32, 22, 0.1);
  transform: rotate(-0.6deg);
}
.fabric__photo > img:first-child { width: 100%; }
.fabric__bow {
  position: absolute;
  top: -34px;
  right: -26px;
  width: 84px;
  transform: rotate(14deg);
}
.fabric__note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--caramel);
  margin-top: 18px;
}

/* ============ FORMS (shared) ============ */
.hp { position: absolute; left: -9999px; }

label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.72;
  margin-bottom: 8px;
  text-align: left;
}
label span { opacity: 0.65; letter-spacing: 0.08em; }

input, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  padding: 10px 2px;
  transition: border-color 0.4s var(--ease);
}
input:focus, textarea:focus { outline: none; border-bottom-color: var(--caramel); }
::placeholder { color: rgba(44, 32, 22, 0.4); }

button[type="submit"] {
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--ink);
  border: 0;
  border-radius: 2px;
  padding: 16px 42px;
  cursor: pointer;
  transition: background 0.5s var(--ease);
}
button[type="submit"]:hover { background: var(--caramel); }

.form-success {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 4.5vw, 1.5rem);
  text-align: center;
  max-width: 460px;
  margin: 30px auto 0;
}

/* ============ 5 · LEAVE ME A NOTE ============ */
.note { text-align: center; }
.note__invite { max-width: 500px; margin: 0 auto; }

.note__form.paper {
  max-width: 560px;
  margin: 34px auto 0;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 4px;
  box-shadow: 0 6px 26px rgba(44, 32, 22, 0.07);
  padding: clamp(24px, 6vw, 40px);
  text-align: center;
}
.note__form textarea {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.9;
  resize: vertical;
  min-height: 190px;
}
.note__fields {
  display: grid;
  gap: 20px;
  margin: 26px 0 30px;
  text-align: left;
}
@media (min-width: 560px) { .note__fields { grid-template-columns: 1fr 1fr; } }

.trust {
  font-family: var(--sans);
  font-style: italic;
  font-size: 0.82rem;
  opacity: 0.62;
  max-width: 380px;
  margin: 20px auto 0;
  line-height: 1.6;
}

/* ============ 6 · THE LETTER LIST ============ */
.list { text-align: center; }
.list__line { max-width: 420px; margin: 0 auto; }
.list__form {
  max-width: 400px;
  margin: 28px auto 0;
  display: grid;
  gap: 18px;
}
.list__form input { text-align: center; }

/* ============ 7 · FOOTER ============ */
.footer {
  text-align: center;
  padding: clamp(56px, 10vw, 90px) 24px 64px;
}
.footer__moon { width: min(240px, 56vw); margin: 0 auto 8px; }
.footer__line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 4.6vw, 1.45rem);
  margin: 0 0 8px;
}
.footer__sign { font-size: 0.85rem; opacity: 0.7; margin: 0; }
.footer__bow { width: 40px; margin: 22px auto 0; }

/* ============ SCROLL REVEALS (JS + motion-ok only) ============ */
html.js:not(.reduce) .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
html.js:not(.reduce) .reveal.in-view { opacity: 1; transform: none; }

/* ============ WIDER SCREENS ============ */
@media (min-width: 750px) {
  section { padding-inline: 40px; }
  .stamp { font-size: 1.1rem; }
}