/* Variable Fraunces with the optical-size axis (opsz 9..144): display cut for the
   names, text cut for small copy. Self-hosted; no external requests anywhere. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-variable-italic.woff2") format("woff2");
}

/* ---------- tokens ---------- */
:root {
  --ivory: #fbf9f4;
  --card: #fffdf8;
  --ink: #38352e;
  --oxblood: #7a4238;
  --gray: #8a8478;
  --gray-2: #6b665c;
  --rule: rgba(56, 53, 46, 0.22);
  --edge: rgba(76, 67, 57, 0.18);
  --teal: #3a5a63;   /* reserved for later phases */
  --amber: #c9922a;  /* reserved for later phases */

  --serif: "Fraunces", Georgia, serif;
  --ui: system-ui, -apple-system, sans-serif;
  --names: clamp(3.4rem, 12vw, 11rem);
  --names-stacked: clamp(3.6rem, 19vw, 4.9rem);
  --h1: clamp(1.75rem, 2.4vw + 1rem, 2.6rem);
  --body: clamp(1rem, 0.2vw + 0.95rem, 1.0625rem);

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-6: 3rem;
  --s-8: 4rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);

  --r-pill: 999px;

  --shadow-flat: 0 1px 2px rgba(56, 45, 30, 0.08), 0 2px 6px rgba(56, 45, 30, 0.08);
  --shadow-lift: 0 1px 2px rgba(56, 45, 30, 0.10), 0 10px 28px rgba(56, 45, 30, 0.16),
                 0 30px 60px -20px rgba(56, 45, 30, 0.18);
  --shadow-btn: 0 1px 2px rgba(56, 45, 30, 0.12), 0 8px 20px rgba(56, 45, 30, 0.18);

  /* The only three interaction curves on the site. */
  --spring-snappy: linear(
    0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%,
    1.067 22.5%, 1.089 26%, 1.079 30.3%, 1.049 36%, 1.024 42.6%, 1.011 50.3%,
    1.004 59.2%, 1.001 69.3%, 1
  );
  --spring-smooth: linear(
    0, .0676, .2153, .3858, .5473, .6845, .7927, .8729, .9292, .9665,
    .9895, 1.0025, 1.0088, 1.011, 1.0107, 1.0093, 1.0075, 1.0056,
    1.004, 1.0027, 1
  );
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
}

@supports not (animation-timing-function: linear(0, 1)) {
  :root {
    --spring-snappy: var(--ease-snap);
    --spring-smooth: var(--ease-snap);
  }
}

/* ---------- base and atmosphere ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--body);
  line-height: 1.5;
}

/* Warm light across the desk, behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 60% at 18% 8%, rgba(250, 236, 214, 0.55) 0%,
              rgba(250, 236, 214, 0) 60%);
}

/* Paper grain over everything, felt not seen. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 6vw, 3rem) var(--gutter) clamp(2rem, 8vw, 4rem);
  overflow-wrap: break-word;
  text-align: center;
}

/* ---------- type ---------- */
h1 {
  margin: var(--s-1) 0 0;
  font-family: var(--serif);
  font-size: var(--h1);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

a {
  color: inherit;
}

button,
input {
  color: inherit;
  font-family: inherit;
}

.eyebrow {
  color: var(--gray);
  font: 600 0.72rem/1.4 var(--ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hand {
  color: var(--gray-2);
  font-family: var(--serif);
  font-style: italic;
}

.doodle {
  display: inline-block;
}

.doodle svg {
  display: block;
  width: 100%;
  height: auto;
}

.d-ink { color: var(--ink); }
.d-oxblood { color: var(--oxblood); }
.d-gray { color: var(--gray); }

/* ---------- controls ---------- */
button.primary {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: var(--s-3);
  padding: 0.95rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  box-shadow: var(--shadow-btn);
  color: var(--ivory);
  cursor: pointer;
  font: 600 1rem var(--ui);
  transition: transform 0.25s var(--ease-snap), box-shadow 0.25s var(--ease-snap),
              background-color 0.25s var(--ease-snap);
}

@media (hover: hover) {
  button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(56, 45, 30, 0.12), 0 14px 28px rgba(56, 45, 30, 0.22);
  }
}

button.primary:active {
  transform: translateY(0) scale(0.98);
}

a.quiet {
  align-self: center;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  color: var(--gray-2);
  font-size: 0.85rem;
  font-weight: 600;
  text-underline-offset: 3px;
  transition: text-underline-offset 0.2s var(--ease-snap);
}

@media (hover: hover) {
  a.quiet:hover {
    text-underline-offset: 5px;
  }
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(201, 146, 42, 0.55);
  outline-offset: 3px;
}

/* ---------- scroll reveal ("set down on the desk") ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 0.55s var(--spring-snappy), transform 0.65s var(--spring-snappy),
              box-shadow 0.8s var(--ease-snap);
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    transform: none;
    opacity: 1;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- hero: the envelope face ---------- */
main.home {
  max-width: none;
  padding: 0;
  text-align: left;
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.letter-lift {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sheet {
  background: radial-gradient(ellipse 90% 60% at 18% 8%, rgba(250, 236, 214, 0.55),
              rgba(250, 236, 214, 0) 60%), var(--ivory);
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sheet::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  border-top: 1px solid var(--edge);
}

.h-from {
  position: absolute;
  top: var(--gutter);
  left: var(--gutter);
}

.h-postage {
  position: absolute;
  top: calc(var(--gutter) - 0.5rem);
  right: var(--gutter);
  display: flex;
  align-items: center;
}

.h-postage .leaves {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-right: 0.25rem;
}

.h-postage .leaves .doodle {
  width: 1.125rem;
}

.h-postage .leaf-oak {
  opacity: 0.75;
}

.h-postage .postmark {
  position: relative;
  z-index: 1;
  width: 3.25rem;
  margin-right: -1rem;
}

.h-postage .stamp {
  width: 4rem;
}

.h-names {
  position: absolute;
  top: 50%;
  right: var(--gutter);
  left: var(--gutter);
  transform: translateY(-56%);
}

.names {
  font-family: var(--serif);
  font-size: var(--names-stacked);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.03em;
  line-height: 0.92;
}

.names .amp {
  font-style: italic;
  font-weight: 300;
}

.hand-underline {
  display: block;
  width: 7.5rem;
  height: 0.875rem;
  margin: 0.625rem 0 0 0.25rem;
}

.hand-underline svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hand-underline path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.dateline {
  margin-top: 1.25rem;
  color: var(--gray-2);
  font: 600 0.75rem/1.6 var(--ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.h-cue {
  z-index: 4;
  min-height: 44px;
  text-decoration: none;
  position: absolute;
  right: var(--gutter);
  bottom: 2.125rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.h-cue .hand {
  color: var(--gray);
  font-size: 0.95rem;
}

.h-cue .arrow {
  width: 0.7rem;
}

.hero .envelope {
  position: absolute;
  pointer-events: none;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  margin: 0;
  z-index: 3;
  height: 36%;
  border-top: 1px solid rgba(56, 53, 46, 0.16);
  background: #f3efe6;
}

html:not(.js) .hero .envelope {
  display: none;
}

@media (min-width: 700px) {
  .names {
    font-size: var(--names);
    letter-spacing: -0.035em;
    line-height: 0.95;
  }

  .names .stack {
    display: none;
  }

  .h-names {
    transform: translateY(-54%);
  }

  .hand-underline {
    width: clamp(9rem, 21vw, 19rem);
    height: clamp(1rem, 2.4vw, 2.2rem);
  }

  .h-postage .leaves .doodle {
    width: 1.625rem;
  }

  .h-postage .postmark {
    width: 4.875rem;
    margin-right: -1.375rem;
  }

  .h-postage .stamp {
    width: 6rem;
  }
}

/* The sheet owns the entrance; its wrapper owns the later tugs. */
html.js .sheet {
  animation: letter-pull 0.9s var(--spring-smooth) both;
}

html.js .hero .envelope {
  animation: envelope-rest 0.64s var(--ease-snap) 0.22s both;
}

html.js .hand-underline path {
  animation: draw 0.43s var(--ease-snap) 0.72s both;
}

html.js .h-cue {
  animation: cue-in 0.2s var(--ease-snap) 0.86s both;
}

@keyframes letter-pull {
  from { transform: translateY(28%); }
  to { transform: translateY(0); }
}

@keyframes envelope-rest {
  from { transform: translateY(0); }
  to { transform: translateY(calc(100% - 12px)); }
}

@keyframes draw {
  from { stroke-dashoffset: 1; opacity: 0; }
  2% { opacity: 1; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes cue-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero *,
  .hero *::before,
  .hero *::after {
    animation: none !important;
    transition: none !important;
  }

  .letter-lift,
  html.js .sheet {
    transform: none !important;
  }

  html.js .hero .envelope {
    transform: translateY(calc(100% - 12px));
  }

  html.js .hand-underline path {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  html.js .h-cue {
    opacity: 1;
  }
}

/* ---------- postcards ---------- */
.postcards {
  padding: var(--s-8) var(--gutter) var(--s-6);
  text-align: center;
}

.postcard-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.postcard {
  width: min(330px, 100%);
  border: 1px solid var(--edge);
  background: var(--card);
  box-shadow: var(--shadow-lift);
  text-align: left;
}

html.js .postcard[data-reveal]:not(.is-visible) {
  box-shadow: var(--shadow-flat);
}

.pc-front img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: sepia(0.1) saturate(0.88);
}

.pc-back {
  position: relative;
  aspect-ratio: 3 / 2;
}

.pc-rule {
  position: absolute;
  top: 7%;
  bottom: 7%;
  left: 50%;
  width: 1px;
  background: var(--rule);
}

.pc-back .pc-note {
  position: absolute;
  top: 8%;
  left: 5%;
  width: 40%;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.4;
}

.pc-back .pc-where {
  position: absolute;
  bottom: 8%;
  left: 5%;
  width: 40%;
  margin: 0;
  color: var(--gray);
  font: 600 0.53rem/1.4 var(--ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pc-back .pc-stamp {
  position: absolute;
  top: 5%;
  right: 4%;
  width: 22%;
}

.pc-back .pc-postmark {
  position: absolute;
  top: 11%;
  right: 19%;
  width: 18%;
}

.pc-back .pc-line {
  position: absolute;
  right: 5%;
  left: 56%;
  height: 1px;
  background: var(--rule);
}

.pc-back .pc-line.l1 { top: 58%; }
.pc-back .pc-line.l2 { top: 72%; }
.pc-back .pc-line.l3 { top: 86%; }

@media (min-width: 600px) {
  .postcard {
    width: 360px;
  }
}

@media (min-width: 900px) {
  .postcard-row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 4.375rem;
  }

  .postcard {
    width: 440px;
  }

  .postcard:nth-child(2) {
    margin-top: 2.75rem;
  }

  .pc-back .pc-note {
    font-size: 1.375rem;
  }

  .pc-back .pc-where {
    font-size: 0.66rem;
  }
}

footer.site {
  position: relative;
  z-index: 1;
  margin-top: var(--s-4);
  padding: 0 var(--gutter) var(--s-4);
  color: var(--gray);
  font: 500 0.72rem/1.6 var(--ui);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

footer.site a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  color: inherit;
  text-underline-offset: 3px;
}

/* ---------- postcard back: address confirm + receipt ---------- */
.flow-page,
.simple-page {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
}

/* the card under the letter and postcards (guest.html) takes main's column */
.guest > .flow-page {
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 6vw, 3rem) var(--gutter) clamp(2rem, 8vw, 4rem);
  text-align: center;
}

.postcard-back {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 3 / 2;
  margin-top: var(--s-3);
  padding: 5% 5% 6%;
  border: 1px solid var(--edge);
  background: var(--card);
  box-shadow: var(--shadow-lift);
  text-align: left;
}

html.js .postcard-back[data-reveal]:not(.is-visible) {
  box-shadow: var(--shadow-flat);
}

.pb-top {
  display: flex;
  min-height: 6.5rem;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
}

.pb-top .pc-note {
  max-width: 55%;
  margin: 0;
  font-size: 1.0625rem;
}

.pb-postage {
  display: flex;
  flex: none;
  align-items: center;
}

.pb-postage .pc-postmark {
  position: relative;
  z-index: 1;
  width: 3rem;
  margin-right: -0.9rem;
}

.pb-postage .pc-stamp {
  width: 3.75rem;
}

.postcard-back .addr {
  margin-top: auto;
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-style: normal;
  line-height: 1.5;
}

.pc-row {
  display: block;
  padding: 0.15rem 0;
  border-bottom: 1px solid var(--rule);
}

.postcard-back .label {
  margin-top: 0.75rem;
  color: var(--gray);
  font: 600 0.62rem/1.4 var(--ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.action-form {
  width: 100%;
}

/* receipt */
.sealed .seal {
  position: absolute;
  top: -0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: 22%;
}

html.js .sealed .seal {
  opacity: 0;
  transform: scale(0.82);
}

html.js .sealed.is-visible .seal {
  animation: seal-press 0.5s linear(
    0, 0.014, 0.055 1.8%, 0.218 3.7%, 0.867 8.5%, 1.085 10.7%, 1.212 12.9%,
    1.264 15%, 1.262 17%, 1.217 19.5%, 1.098 24%, 1.035 28.5%, 0.993 33%,
    0.981 38%, 0.988 45%, 0.998 55%, 1.001 68%, 1
  ) 0.25s both;
}

@keyframes seal-press {
  to { opacity: 1; transform: none; }
}

/* ---------- edit form + column pages ---------- */
/* ---------- the card you write on (address_edit.html) ---------- */
.card-form {
  width: 100%;
}
.card-form .pb-top {
  min-height: 0;
}
.card-form .addr {
  margin-top: 0.5rem;
}
.card-form .pc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.45em;
  padding: 0;
}
.card-form .who {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  white-space: nowrap;
}
.card-form input:not([type="hidden"]) {
  min-width: 0;
  padding: 0.5rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  appearance: none;
  color: var(--ink);
  font: inherit;
  field-sizing: content;
}
.card-form input::placeholder {
  color: var(--gray);
  font-style: italic;
  opacity: 1;
}
.card-form input:focus {
  outline: none;
  box-shadow: 0 2px 0 var(--ink);
}
.card-form .last:placeholder-shown {
  min-width: 5.2em;
}
.card-form .guest:placeholder-shown {
  min-width: 10.5em;
}
.card-form .street {
  flex: 1;
}
.card-form .city {
  flex: 1 1 5em;
}
.card-form .state {
  flex: 0 0 2.6em;
}
.card-form .zip {
  flex: 0 0 3.6em;
}
.card-form .amp {
  color: var(--gray-2);
}
.card-form .who > .amp:last-child {
  margin-left: -0.3em;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

input[aria-invalid="true"] {
  border-bottom-color: var(--oxblood);
  box-shadow: 0 2px 0 var(--oxblood);
}

.form-error {
  width: 100%;
  margin: var(--s-3) 0 0;
  padding: 0.4rem 0 0.4rem 0.9rem;
  border-left: 3px solid var(--oxblood);
  color: var(--oxblood);
  font: italic 1rem/1.45 var(--serif);
  text-align: left;
}

.body-copy {
  margin: var(--s-3) 0 0;
  color: var(--gray-2);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-align: left;
}

.error-page .body-copy {
  text-align: center;
}

.error-page .quiet {
  margin-top: var(--s-2);
}

@media (max-width: 22.5rem) {
  main {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}