/* Nichole Quick, Ivory Monogram brand. Tokens: reference/nichole-quick/brand/tokens.json */
@font-face { font-family: "Bodoni Moda"; src: url("fonts/BodoniModa-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/BodoniModa-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/Jost-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/Jost-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/Jost-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --ivory: #F7F3EC;
  --ink: #1E1B18;
  --champagne: #B39463;
  --taupe: #7A6A5C;
  --stone: #E8DED2;
  --paper: #FFFDF9;
  --rule: #D9CDBE;
  --display: "Bodoni Moda", Didot, "Times New Roman", serif;
  --text: "Jost", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
}
a { color: var(--ink); text-decoration-color: var(--champagne); text-underline-offset: 3px; }
a:hover { color: var(--taupe); }

.hero {
  text-align: center;
  padding: 72px 20px 64px;
  border-bottom: 1px solid var(--rule);
}
.lockup { width: min(320px, 78vw); height: auto; }
.lede {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.4;
  max-width: 34em;
  margin: 40px auto 18px;
}
.tagline {
  font-family: var(--text);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 13px;
  color: var(--taupe);
  margin: 0 0 32px;
}
.cta {
  display: inline-block;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  text-decoration: none;
  padding: 14px 28px;
  border: 1px solid var(--champagne);
  color: var(--ink);
}
.cta:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

main { max-width: 860px; margin: 0 auto; padding: 0 20px; }

.label, h3 {
  font-family: var(--text);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 13px;
  color: var(--taupe);
}
.prose { max-width: 40em; margin: 64px auto; }
.prose .label { text-align: center; margin-bottom: 28px; }
.prose p { margin: 0 0 1.3em; }

blockquote {
  margin: 40px 0;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
blockquote p { font-family: var(--display); font-style: italic; font-size: 26px; margin: 0 0 8px; }
blockquote cite { font-style: normal; font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--taupe); }

h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 34px);
  text-align: center;
  margin: 0 0 32px;
}
.particulars {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 48px clamp(20px, 5vw, 56px);
  margin: 0 auto 64px;
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 40px; }
.grid h3 { margin: 16px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--champagne); }
.grid ul { list-style: none; margin: 0 0 16px; padding: 0; }
.grid li { padding: 4px 0; font-size: 16px; }

.contact { text-align: center; margin: 0 auto 72px; max-width: 34em; }
.monogram { width: 66px; height: auto; margin-bottom: 20px; }
.contact .lines { font-weight: 400; font-size: 17px; margin-top: 20px; }
.contact .lines span { color: var(--champagne); margin: 0 10px; }

footer { border-top: 1px solid var(--rule); text-align: center; padding: 40px 20px 48px; }
.closing { font-family: var(--display); font-style: italic; font-size: 20px; margin: 0 0 10px; }
.fine { font-size: 13px; letter-spacing: 0.08em; color: var(--taupe); margin: 0; }

@media (max-width: 520px) {
  body { font-size: 17px; }
  .hero { padding: 48px 16px 44px; }
  main { padding: 0 16px; }
  .contact .lines span { display: block; height: 0; overflow: hidden; }
  .contact .lines a { display: block; margin: 6px 0; }
}