/* Wrap Gods — coming soon page
   Built to the supplied desktop and mobile comps. All imagery is the brand's
   own production art; type is Cinzel for display and Montserrat for set text
   per the brand guidelines. */

:root {
  --navy-deep: #060d1c;
  --navy: #0a1428;

  --gold: #d8ad5a;
  --gold-bright: #f2d492;
  --gold-deep: #a97f31;
  --gold-dark: #6d4f1a;

  --marble: #f4efe4;
  --marble-dim: #c3bcac;

  --ring: 0 0 0 3px rgba(216, 173, 90, .32);

  --band-h: 26px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--navy-deep);
  color: var(--marble);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Page shell ---------- */

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(rgba(6, 13, 28, .34), rgba(6, 13, 28, .34)),
    url('assets/bg-desktop.webp') center / cover no-repeat,
    var(--navy);
}

/* ---------- Meander bands ---------- */

.band {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: block;
  width: 100%;
  height: var(--band-h);
  background: url('assets/meander-a.webp') repeat-x center / auto 100%;
}

/* ---------- Logo ---------- */

.logo { margin: clamp(16px, 2vw, 30px) 0 clamp(12px, 1.7vw, 24px); }

.logo img {
  display: block;
  width: clamp(300px, 30vw, 440px);
  height: auto;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .72));
}

/* Sits under the three pillars */
.follow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin-top: clamp(18px, 2.4vw, 32px);
}

.follow__label {
  font-size: clamp(.64rem, .84vw, .76rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--marble);
  white-space: nowrap;
}

.social {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--gold-bright);
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.social a:hover {
  color: var(--navy-deep);
  background: var(--gold);
  border-color: var(--gold);
}

.social a:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- Content ---------- */

.content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3px, .45vw, 6px) clamp(20px, 4vw, 40px) clamp(3px, .45vw, 6px);
  text-align: center;
}

/* The sections pack toward the top on an even gap. Distributing the leftover
   height between them instead would push the gaps open on tall screens. */
.stack {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(8px, 1.2vw, 16px);
  width: 100%;
}

/* ---------- Headline ---------- */

/* Bottom margin matches .stack's gap so the headline sits on the same rhythm as
   the sections below it, even though it lives outside that group. */
.headline {
  display: block;
  width: clamp(210px, 23vw, 330px);
  height: auto;
  margin: 0 auto clamp(8px, 1.2vw, 16px);
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .65));
}

/* ---------- Tagline ---------- */

.tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 16px);
  margin: 0 0 clamp(7px, .9vw, 10px);
}

.tagline span {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: clamp(.7rem, 1.35vw, 1.15rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

/* One laurel asset, split down the middle into two flanking branches.
   Drawn as backgrounds so the unused half costs no layout width. */
.tagline__leaf {
  flex: 0 0 auto;
  width: clamp(14px, 1.5vw, 23px);
  height: clamp(28px, 3vw, 46px);
  background-image: url('assets/icon-laurel.webp');
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.tagline__leaf--l { background-position: left center; }
.tagline__leaf--r { background-position: right center; }

/* ---------- Lede ---------- */

.lede {
  margin: 0 0 clamp(7px, .9vw, 9px);
  font-size: clamp(.84rem, 1.1vw, 1rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--marble);
}

/* ---------- Form ---------- */

.signup { width: 100%; }

.signup__row {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 16px);
  width: 100%;
  max-width: 830px;
  margin: 0 auto;
}

.field {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
}

.field__icon {
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -9px;
  color: var(--gold);
  pointer-events: none;
}

.field input {
  width: 100%;
  padding: 15px 16px 15px 46px;
  font-family: 'Montserrat', sans-serif;
  font-size: .92rem;
  color: var(--marble);
  background: rgba(6, 13, 28, .5);
  border: 1px solid var(--gold-deep);
  border-radius: 6px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.field input::placeholder { color: rgba(195, 188, 172, .8); }
.field input:hover { border-color: var(--gold); }

.field input:focus {
  outline: none;
  background: rgba(6, 13, 28, .75);
  border-color: var(--gold-bright);
  box-shadow: var(--ring);
}

.field input[aria-invalid="true"] {
  border-color: #dd6a55;
  box-shadow: 0 0 0 3px rgba(221, 106, 85, .2);
}

/* Honeypot — off-screen for people, plain in the DOM for bots */
.pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Button ---------- */

.btn {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 230px;
  height: 54px;
  padding: 0 26px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #241a06;
  cursor: pointer;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .5));

  /* The plate art carries the laurel ends, so it is 9-sliced: the ends render
     at a fixed width and only the middle stretches. Stretching the whole image
     would fatten the laurels as the button width changes. Border width is the
     105px slice scaled to the button height (105 x 54/182). */
  background: none;
  border: 0 solid transparent;
  border-left-width: 31px;
  border-right-width: 31px;
  border-image-source: url('assets/btn.webp');
  border-image-slice: 0 105 0 105 fill;
  border-image-repeat: stretch;
  transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
}

.btn:hover { filter: brightness(1.07) drop-shadow(0 9px 20px rgba(0, 0, 0, .55)); }
.btn:active { transform: translateY(1px); }

/* Press: the button dips, then a gold ring pushes out from its edge */
.btn.is-pressed { animation: btnPress .5s cubic-bezier(.34, 1.4, .5, 1); }

@keyframes btnPress {
  0% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 6px 16px rgba(0, 0, 0, .5));
  }
  30% {
    transform: scale(.955);
    filter: brightness(1.45) saturate(1.15)
            drop-shadow(0 2px 8px rgba(0, 0, 0, .5))
            drop-shadow(0 0 16px rgba(242, 212, 146, .95));
  }
  60% {
    transform: scale(1.015);
    filter: brightness(1.18)
            drop-shadow(0 6px 16px rgba(0, 0, 0, .5))
            drop-shadow(0 0 10px rgba(242, 212, 146, .45));
  }
  100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 6px 16px rgba(0, 0, 0, .5));
  }
}
.btn:focus-visible { outline: none; box-shadow: var(--ring), 0 6px 20px rgba(0, 0, 0, .45); }
.btn[disabled] { cursor: default; filter: saturate(.5) brightness(.92); }

.btn__spinner { display: none; }

.signup.is-busy .btn__label { visibility: hidden; }

.signup.is-busy .btn__spinner {
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(36, 26, 6, .3);
  border-top-color: #241a06;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Status + fineprint ---------- */

.status {
  margin: 12px 0 0;
  font-size: .88rem;
  line-height: 1.5;
}

.status:empty { margin: 0; }
.status.is-error { color: #ffab97; }
.status.is-ok { color: var(--gold-bright); }

.fineprint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 8px 0 0;
  font-size: .74rem;
  font-weight: 500;
  color: rgba(195, 188, 172, .9);
}

.fineprint svg { flex: 0 0 auto; }

/* Sits on the same line as the fineprint, so the notice costs no page height */
.fineprint__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 173, 90, .45);
  transition: color .15s ease, border-color .15s ease;
}

.fineprint__link::before {
  content: '·';
  margin-right: .5em;
  border: 0;
  color: rgba(216, 173, 90, .5);
}

.fineprint__link:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.fineprint__link:focus-visible { outline: none; color: var(--gold-bright); box-shadow: var(--ring); }

/* Success swaps the form out for the confirmation */
.signup.is-done .signup__row,
.signup.is-done .fineprint { display: none; }

.signup.is-done .status {
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 22px;
  text-align: center;
  font-size: .94rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--gold-bright);
  border: 1px solid var(--gold-deep);
  border-radius: 2px;
  background: rgba(6, 13, 28, .66);
}

/* ---------- Three pillars ---------- */

.pillars {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 44px);
  margin: clamp(8px, 1vw, 11px) 0 0;
  padding: 0;
  list-style: none;
}

.pillars li {
  display: flex;
  align-items: center;
  gap: clamp(9px, 1.1vw, 15px);
  padding-left: clamp(16px, 2.6vw, 44px);
  border-left: 1px solid rgba(216, 173, 90, .3);
  text-align: left;
}

.pillars li:first-child { border-left: none; padding-left: 0; }

/* The three icons have different natural proportions, so they are normalised to
   a common height — otherwise the headings sit at three different levels. */
.pillars img {
  flex: 0 0 auto;
  width: auto;
  height: clamp(26px, 2.7vw, 39px);
  object-fit: contain;
}

.pillars h2 {
  margin: 0;
  font-size: clamp(.66rem, .92vw, .82rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-bright);
}


/* ---------- Hero food ---------- */

/* Pushed well past the right edge so the visible mass clears the content column
   while the wrap itself can be much larger. The column runs off the bottom of
   the page, so it reads as rising out of the floor behind the border. */
/* Wrap and pillar are a single image. It runs off the bottom-right corner so
   the pillar reads as continuing past the frame. */
.hero-food {
  position: absolute;
  right: clamp(-300px, -10.5vw, -60px);
  bottom: clamp(-110px, -3.5vw, -20px);
  z-index: 1;
  display: block;
  /* No tight max: the cap used to stop it growing past 640px, so on a wide
     monitor it shrank into the corner instead of holding its share of the
     frame. Both the width and the right offset now scale with the viewport. */
  width: clamp(380px, 36vw, 1000px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, .75));
}

/* ---------- Signup confirmation ---------- */

.confirm {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 22px);
  background: rgba(4, 8, 18, .94);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s;
}

.confirm.is-on { opacity: 1; visibility: visible; }

.confirm__icon {
  width: clamp(96px, 15vw, 168px);
  height: auto;
  color: var(--gold-bright);
  filter: drop-shadow(0 0 26px rgba(242, 212, 146, .35));
}

/* The ring sweeps round, then the tick draws in after it */
.confirm__ring,
.confirm__tick {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}

.confirm__ring { --len: 64; }
.confirm__tick { --len: 24; }

.confirm.is-on .confirm__ring { animation: draw .55s cubic-bezier(.4, 0, .2, 1) forwards; }
.confirm.is-on .confirm__tick { animation: draw .35s cubic-bezier(.4, 0, .2, 1) .42s forwards; }

@keyframes draw { to { stroke-dashoffset: 0; } }

.confirm__word {
  margin: 0;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.15rem, 3.4vw, 2rem);
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--marble);
  opacity: 0;
}

.confirm.is-on .confirm__word { animation: riseIn .45s ease-out .64s forwards; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Cookie consent ---------- */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 26px);
  padding: 14px clamp(16px, 4vw, 32px);
  background: rgba(4, 8, 18, .96);
  border-top: 1px solid var(--gold-deep);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .5);
}

.consent[hidden] { display: none; }

.consent__text {
  margin: 0;
  font-size: clamp(.76rem, 1.6vw, .86rem);
  line-height: 1.5;
  color: var(--marble);
}

.consent__text a {
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 173, 90, .45);
}

.consent__text a:hover { border-bottom-color: var(--gold-bright); }

.consent__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.consent__btn {
  padding: 9px 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #241a06;
  background: linear-gradient(180deg, #f4d999 0%, #dcb264 45%, #b98f3c 100%);
  border: 1px solid var(--gold-deep);
  border-radius: 2px;
  cursor: pointer;
  transition: filter .15s ease;
}

.consent__btn:hover { filter: brightness(1.08); }
.consent__btn:focus-visible { outline: none; box-shadow: var(--ring); }

.consent__btn--quiet {
  color: var(--marble);
  background: transparent;
  border-color: rgba(216, 173, 90, .5);
}

.consent__btn--quiet:hover { color: var(--gold-bright); border-color: var(--gold-bright); }

@media (max-width: 600px) {
  .consent { flex-direction: column; gap: 12px; padding: 14px 18px; text-align: center; }
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1 1 0; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Every row is centred on the page. Above 1200px the wrap sits in the right
   margin, so the content column is capped against viewport width to keep a gap
   between the two — a fixed cap collides once the viewport narrows. */
/* Desktop spacing between sections comes from .stack distributing the leftover
   height, so the fixed margins are cleared or the two would compound. */
@media (min-width: 861px) {
  .tagline,
  .lede { margin-bottom: 0; }

  /* These two sit apart from the block above them, so they take an extra
     step on top of the stack's shared gap. */
  .pillars { margin-top: clamp(10px, 1.4vw, 18px); }
  .follow { margin-top: clamp(10px, 1.4vw, 18px); }
}

@media (min-width: 1200px) {
  .signup__row,
  .pillars { max-width: min(620px, 46vw); }
}

/* Below that there is no room beside the content, so the wrap drops into the
   flow underneath it.
   The offset is `top`, not a negative bottom margin: .content is a flex-grow
   item, so it simply absorbs any space a negative margin frees and the band
   never moves. Shifting the group visually leaves its slot reserved, letting
   the foot of the column slide under the border. */
@media (max-width: 1199px) {
  .hero-food {
    position: relative;
    /* The desktop rule offsets this into the right margin; both insets have to
       be cleared or relative positioning keeps nudging it off centre. */
    right: auto;
    bottom: auto;
    top: clamp(48px, 16vw, 86px);
    width: min(78%, 560px);
    margin: 12px auto 0;
  }
}

/* ---------- Tablet ---------- */


/* ---------- Mobile ---------- */

@media (max-width: 860px) {
  :root { --band-h: 20px; }

  .page {
    background:
      linear-gradient(rgba(6, 13, 28, .34), rgba(6, 13, 28, .34)),
      url('assets/bg-mobile.webp') center / cover no-repeat,
      var(--navy);
  }

  .logo { margin-top: 22px; margin-bottom: 0; }

  .follow { margin-top: 24px; }

  .logo img { width: min(62vw, 260px); }

  .content {
    justify-content: flex-start;
    padding-top: 4px;
    max-width: 560px;
  }

  /* Extra room above so the artwork does not crowd the logo */
  .headline { width: min(84%, 330px); margin: 20px auto 10px; }

  /* Tuned to hold one line at 390px wide */
  .tagline { gap: 8px; }
  .tagline span { font-size: clamp(.58rem, 2.65vw, .82rem); letter-spacing: .05em; }
  .tagline__leaf { width: clamp(16px, 4.4vw, 26px); height: clamp(30px, 8vw, 46px); }

  .lede { font-size: clamp(.82rem, 3.4vw, .94rem); }

  .signup__row { flex-direction: column; max-width: 440px; }

  /* Border width tracks the button height so the sliced laurel ends keep their
     proportions: 105 x (50/182). */
  .btn {
    width: 100%;
    height: 50px;
    border-left-width: 29px;
    border-right-width: 29px;
  }

  /* Icons above the copy, three across and centred on the page */
  .pillars {
    align-self: stretch;
    gap: 0;
    width: 100%;
    margin-top: 26px;
  }

  .pillars li {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 0 6px;
    border-left: 1px solid rgba(216, 173, 90, .28);
    text-align: center;
  }

  .pillars img { height: 40px; }
  .pillars h2 { font-size: .68rem; letter-spacing: .04em; }

  /* With every row centred there is no side channel for the wrap, so it drops
     into the flow beneath the content where it can be much larger. `top` slides
     the foot of the column under the border without freeing layout space that
     the flex-grow content would just reabsorb. */
  .hero-food {
    position: relative;
    right: auto;
    bottom: auto;
    top: clamp(60px, 20vw, 110px);
    width: min(100%, 500px);
    margin: 4px auto 0;
  }
}

@media (max-width: 420px) {
  .pillars h2 { font-size: .62rem; }
  .hero-food { width: min(100%, 430px); }
}

/* ---------- Short desktop windows ----------
   The masthead is the tallest thing on the page, so it gives ground first.
   Scaling it down keeps the footer border and the column on screen rather than
   pushing them below the fold. */

@media (max-height: 1010px) and (min-width: 861px) {
  .logo img { width: clamp(230px, 22vw, 320px); }
  .headline { width: clamp(175px, 18.5vw, 268px); }
  .logo { margin-bottom: clamp(10px, 1.4vw, 18px); }
}

@media (max-height: 820px) and (min-width: 861px) {
  .logo img { width: clamp(190px, 18vw, 265px); }
  .headline { width: clamp(160px, 16vw, 230px); }
  .lede { display: none; }
}