/*
  Meet the Laws
  One stylesheet for every page. Mobile first; the editorial layout
  begins at 64rem (1024px).
*/

/* Fonts (self-hosted, SIL Open Font License; see /assets/fonts) */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: block;
  src: url("/assets/fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: block;
  src: url("/assets/fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/jost-latin-wght-normal.woff2") format("woff2");
}

/* Tokens */

:root {
  color-scheme: light;

  --ivory: #f6f1e7;
  --espresso: #2b1f18;
  --espresso-soft: #4b3d33;
  --taupe: #8b7867;      /* large accents only (3.7:1 on ivory) */
  --taupe-ink: #74624f;  /* small accent text (5.2:1 on ivory) */
  --rule: #cdbfad;       /* hairlines and the card edge */

  --serif: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --inset: clamp(0.625rem, 1.6vw, 1.5rem);
  --gutter: clamp(1.5rem, 5.5vw, 4.5rem);
  --measure: 90rem;
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background-color: var(--ivory);
  /* A barely-there paper grain. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .12 0 0 0 0 .09 0 0 0 .24 -.09'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color: var(--espresso);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.5;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
p {
  margin: 0;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.3em;
  transition: text-decoration-color 160ms ease;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--espresso);
  outline-offset: 4px;
}

::selection {
  background-color: #e4d9c8;
  color: var(--espresso);
}

/* The card: a fine edge inset from the viewport, like stationery on a table */

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100vh - 2 * var(--inset));
  min-height: calc(100svh - 2 * var(--inset));
  margin: var(--inset);
  padding: clamp(1.25rem, 3vw, 2.25rem) var(--gutter);
  border: 1px solid var(--rule);
}

.card > * {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}

/* Small capitals in the quiet sans */

.wordmark,
.eyebrow,
.note,
.label {
  font-family: var(--sans);
  font-weight: 400;
  text-transform: uppercase;
}

/* Masthead */

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.wordmark {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  line-height: 1;
  text-decoration: none;
}

a.wordmark {
  padding-block: 0.5rem;
}

.monogram {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

.monogram .amp {
  margin-inline: 0.26em;
  color: var(--taupe);
  font-size: 0.78em;
  font-style: italic;
  font-weight: 400;
}

/* Announcement (home page) */

.announcement {
  display: grid;
  justify-items: center;
  align-self: center;
  padding-block: clamp(3rem, 9vh, 4.5rem) clamp(3.5rem, 13vh, 7rem);
  text-align: center;
}

.eyebrow {
  margin-bottom: 1.75rem;
  padding-left: 0.32em; /* balances the trailing letter-spacing */
  color: var(--taupe-ink);
  font-size: 0.8125rem;
  letter-spacing: 0.32em;
}

.names {
  font-size: clamp(4.25rem, 22.5vw, 8.25rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.012em;
}

.names span {
  display: block;
}

.names .amp {
  display: block;
  margin-block: 0.02em 0.06em;
  color: var(--taupe);
  font-size: 0.72em;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
}

.letter {
  max-width: 23rem;
  margin-top: 2.75rem;
}

.statement {
  margin-bottom: 1.125rem;
  font-size: 1.75rem;
  font-style: italic;
  line-height: 1.2;
}

.message {
  max-width: 16.5em; /* breaks the first line after "engaged." */
  margin-inline: auto;
  color: var(--espresso-soft);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
  text-wrap: pretty;
}

.note {
  margin-top: 2.25rem;
  color: var(--taupe-ink);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  line-height: 2;
  text-wrap: balance;
}

.note::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: 0 auto 1.75rem;
  background-color: var(--rule);
}

/* Optional engagement photograph (see README) */

.portrait {
  width: min(100%, 21rem);
  margin: 3rem 0 0;
}

.portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  outline: 1px solid var(--rule);
  outline-offset: 0.625rem;
}

/* Colophon */

.colophon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1.5rem;
  color: var(--espresso-soft);
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

.colophon ul {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.colophon a,
.return a {
  display: inline-block;
  padding-block: 0.375rem;
}

/* Privacy, Terms and other text pages */

.document {
  display: grid;
  align-content: start;
  gap: 2.5rem;
  max-width: 38rem;
  padding-block: clamp(3.5rem, 10vh, 6rem);
}

.document h1 {
  font-size: clamp(3rem, 12vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}

.document .label {
  margin-top: 1rem;
  color: var(--taupe-ink);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
}

.prose {
  color: var(--espresso-soft);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
}

.prose > * + * {
  margin-top: 1.1em;
}

.prose h2 {
  margin-top: 2.25em;
  color: var(--espresso);
  font-size: 1.625rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
}

.prose h2 + p {
  margin-top: 0.5em;
}

.prose .return {
  margin-top: 3rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* Editorial layout */

@media (min-width: 64rem) {
  .announcement {
    container-type: inline-size;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2vw, 2rem);
    justify-items: stretch;
    text-align: left;
  }

  /* The letter's last line shares a baseline with "Hannah". */
  .announcement hgroup {
    grid-column: 1 / span 7;
    grid-row: 1;
    align-self: last baseline;
  }

  .eyebrow {
    margin-bottom: 2.25rem;
    padding-left: 0;
  }

  /* Sized to the column so the names never crowd the letter. */
  .names {
    font-size: 9vw;
    font-size: clamp(5.5rem, 10.4cqi, 10.5rem);
  }

  .names span + span {
    padding-left: 0.64em;
  }

  .names .amp {
    display: inline;
    margin: 0 0.04em 0 0;
    font-size: 1em;
  }

  .letter {
    grid-column: 8 / span 5;
    grid-row: 1;
    align-self: end;
    align-self: last baseline;
    max-width: 24rem;
    margin-top: 0;
  }

  .statement {
    font-size: 2rem;
  }

  .message {
    margin-inline: 0;
    font-size: 1.3125rem;
  }

  .note::before {
    margin-left: 0;
  }

  /* With a photograph: names and letter on the left, portrait on the right */

  .announcement:has(.portrait) hgroup {
    grid-column: 1 / span 7;
  }

  .announcement:has(.portrait) .names {
    font-size: clamp(5rem, 8.8cqi, 9.5rem);
  }

  .announcement:has(.portrait) .letter {
    grid-column: 1 / span 5;
    grid-row: 2;
    align-self: start;
    margin-top: 3rem;
  }

  .announcement:has(.portrait) .portrait {
    grid-column: 8 / span 5;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    width: 100%;
    max-width: 25rem;
    margin: 0;
  }

  .colophon {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }

  .document {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2vw, 2rem);
    max-width: var(--measure);
  }

  .document > header {
    grid-column: 2 / span 4;
  }

  .document .prose {
    grid-column: 6 / span 6;
    max-width: 36rem;
  }
}

@media (min-width: 75rem) {
  .announcement hgroup {
    grid-column: 2 / span 7;
  }

  .letter {
    grid-column: 9 / span 4;
  }
}

/* A gentle settling-in on first load */

@media (prefers-reduced-motion: no-preference) {
  .settle {
    animation: settle 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(var(--order, 0) * 140ms);
  }

  .portrait {
    --order: 1;
  }

  .letter {
    --order: 2;
  }

  @keyframes settle {
    from {
      opacity: 0;
      transform: translateY(0.5rem);
    }
  }
}

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