@font-face {
  font-family: "Libre Caslon Display";
  src: url("assets/fonts/libre-caslon-display.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 110%;
}

:root {
  color-scheme: light;
  --ink: #7d542d;
  --gold: #d29c4b;
  --paper: #fafafa;
  --header-height: clamp(100px, 6.53vw, 130px);
  --serif: "Libre Caslon Display", "Baskerville", "Times New Roman", serif;
  font-family: var(--serif);
  color: var(--ink);
  background: #f3e7d7;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
::selection { color: #fffaf2; background: #80572f; }

.site-header {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: var(--header-height);
  background: var(--paper);
  border: 1px solid #e9dfd2;
}

.brand {
  display: block;
  width: clamp(163px, 10.25vw, 204px);
  line-height: 0;
  color: #885510;
  text-decoration: none;
}

.brand-logo { display: block; width: 100%; height: auto; overflow: visible; }
.brand-name { fill: currentColor; font-family: var(--serif); font-size: 75px; letter-spacing: -3.7px; }
.brand-caption { fill: currentColor; font-family: Arial, Helvetica, sans-serif; font-size: 9.2px; letter-spacing: 3.25px; }

.coming-soon {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  overflow: hidden;
  background: #f3e7d7;
}

.boutique-scene {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.announcement {
  width: min(100%, 1060px);
  padding: clamp(76px, 5.35vw, 107px) 24px clamp(60px, 3.7vw, 74px);
  text-align: center;
}

.eyebrow {
  margin: 0 0 28px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(12px, .855vw, 17px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .31em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(48px, 3.32vw, 66px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.02em;
}

.gold-divider {
  display: block;
  width: 72px;
  height: 2px;
  margin: 29px auto 24px;
  background: var(--gold);
}

.opening {
  margin: 0;
  font-size: clamp(27px, 1.56vw, 31px);
  line-height: 1.25;
  letter-spacing: -.015em;
}

.invitation {
  margin: 7px 0 0;
  font-size: clamp(21px, 1.21vw, 24px);
  line-height: 1.1;
  letter-spacing: -.012em;
}

.social-links {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 64px;
  margin-top: 29px;
}

.social-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  min-width: 78px;
  font-size: 22px;
  line-height: 1.2;
  text-decoration: none;
}

.social-icon {
  display: grid;
  place-items: center;
  width: 71px;
  height: 71px;
  border-radius: 50%;
  color: #fffdf8;
  background: #80572f;
  transition: background-color 180ms ease, transform 180ms ease;
}

.social-icon svg { width: 39px; height: 39px; }
.social-link[data-social="tiktok"] svg { width: 36px; height: 36px; }
.social-link[aria-disabled="true"] { cursor: default; }
.social-link[href]:hover .social-icon { background: #68411f; transform: translateY(-3px); }
.social-link[href]:hover > span:last-child { text-decoration: underline; text-underline-offset: 4px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 7px; border-radius: 3px; }

@media (min-width: 761px) and (max-aspect-ratio: 19/10) {
  .announcement { padding-top: 90px; padding-bottom: 95px; }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .announcement { width: 70%; }
  .eyebrow { font-size: 11px; letter-spacing: .24em; }
  h1 { font-size: 46px; }
  .invitation { font-size: 20px; }
}

@media (max-width: 760px) {
  :root { --header-height: 106px; }
  .brand { width: 168px; }
  .coming-soon { align-items: start; }
  .boutique-scene {
    object-fit: cover;
    object-position: 49% center;
    opacity: .55;
  }
  .coming-soon::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, rgb(246 236 222 / .55), rgb(246 236 222 / .2) 60%, transparent);
    pointer-events: none;
  }
  .announcement { width: 100%; padding: 66px 22px 80px; }
  .eyebrow { max-width: 330px; margin: 0 auto 28px; font-size: 10px; line-height: 1.9; letter-spacing: .29em; }
  h1 { font-size: clamp(38px, 6.7vw, 49px); line-height: 1.08; letter-spacing: -.04em; }
  .gold-divider { width: 55px; margin: 28px auto 24px; }
  .opening { font-size: 28px; }
  .invitation { max-width: 410px; margin: 12px auto 0; font-size: 22px; line-height: 1.3; }
  .desktop-break { display: none; }
  .social-links { gap: 43px; margin-top: 32px; }
  .social-icon { width: 64px; height: 64px; }
  .social-icon svg { width: 34px; height: 34px; }
  .social-link[data-social="tiktok"] svg { width: 32px; height: 32px; }
  .social-link { font-size: 21px; gap: 12px; }
}

@media (max-width: 380px) {
  .announcement { padding: 48px 16px 56px; }
  h1 { font-size: 34px; }
  .eyebrow { max-width: 280px; }
  .opening { font-size: 26px; }
  .invitation { font-size: 20px; }
}

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