:root {
  color-scheme: dark;
  /* Cera PRO is not supplied. No font is downloaded by this prototype. */
  --brand-font: "Cera PRO", "Avenir Next", "Century Gothic", Futura, "Trebuchet MS", Arial, sans-serif;
  --mauve: #825b5c;
  --brown: #362d26;
  --white: #fff;
  font-family: var(--brand-font);
  color: var(--white);
  background: var(--brown);
}
/* Enable ONLY after licensed files have been supplied, updating the paths:
@font-face {
  font-family: "Cera PRO";
  src: url("fonts/CeraPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cera PRO";
  src: url("fonts/CeraPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid #ffda8b; outline-offset: 5px; }
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: max(820px, 91.11vw);
  background: var(--mauve);
}
.masthead { position: absolute; top: 2.1vw; left: 2.5vw; z-index: 5; }
.wordmark { font-size: clamp(29px, 2.8vw, 48px); font-weight: 700; letter-spacing: -.065em; line-height: 1; }
.munksjo-v2 #title {
  position: absolute;
  z-index: 1;
  top: 5.1vw;
  left: 29.9%;
  margin: 0;
  transform: translate3d(0, var(--title-offset, 0px), 0);
  width: max-content;
  max-width: 70%;
  font-size: clamp(70px, 8.3vw, 160px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -.045em;
}
.sand-layer { position: absolute; z-index: 2; top: 4.94vw; left: 0; width: 100%; transform: translate3d(0, var(--sand-offset, 0px), 0); pointer-events: none; }
.sand-layer picture, .sand-layer img { display: block; width: 100%; height: auto; }
.tagline { position: absolute; z-index: 3; top: 25.9vw; left: 29.9%; margin: 0; font-size: clamp(49px, 6.35vw, 120px); font-weight: 400; line-height: .99; letter-spacing: -.04em; }
.badge { position: absolute; z-index: 3; left: 75%; top: 26.3vw; width: 15.2vw; height: 15.2vw; transform: translate(-50%, -50%); }
.badge-ring { position: absolute; inset: 0; }
.badge-ring span { position: absolute; left: calc(50% - .5em); top: 0; width: 1em; height: 50%; transform-origin: 50% 100%; transform: rotate(var(--angle)); font-size: clamp(14px, 1.45vw, 27px); text-align: center; }
.badge-center { position: absolute; left: 50%; top: 50%; width: max-content; margin: 0; transform: translate(-50%, -50%); font-size: clamp(15px, 1.65vw, 30px); font-weight: 700; line-height: .99; }
.countdown-panel { position: absolute; z-index: 3; top: 42vw; left: 50%; transform: translateX(-50%); width: 37%; padding: 17px 20px 15px; border-radius: 30px; background: rgb(130 91 92 / 83%); }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.countdown > div { position: relative; display: flex; flex-direction: column; align-items: center; }
.countdown > div + div::before { content: ":"; position: absolute; left: -.08em; top: -.08em; font-size: clamp(35px, 4.4vw, 82px); font-weight: 400; }
.countdown dt { order: 2; font-size: clamp(13px, 1.05vw, 20px); line-height: 1.3; }
.countdown dd { order: 1; margin: 0; font-size: clamp(35px, 4.4vw, 82px); font-variant-numeric: tabular-nums; font-weight: 400; letter-spacing: -.04em; line-height: 1.12; }
.no-script-date { text-align: center; margin: 8px 0 0; }
.intro { position: absolute; z-index: 10; inset: 0; overflow: hidden; pointer-events: none; }
/* Mirror only the alpha intro: reveal from top left toward bottom right. */
.intro video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; background: transparent; transform: scaleX(-1); }
.intro-control { position: absolute; z-index: 11; top: 26px; right: 28px; border: 1px solid rgb(255 255 255 / 45%); border-radius: 24px; background: rgb(54 45 38 / 30%); color: #fff; padding: 10px 17px; font: 14px var(--brand-font); cursor: pointer; }
.intro-control:hover { background: rgb(54 45 38 / 55%); }
.footer { position: relative; z-index: 3; min-height: 360px; padding: 78px 14% 64px; background: var(--brown); }
.footer .wordmark { font-size: 36px; }
.footer-details { display: flex; align-items: flex-start; justify-content: space-between; gap: 36px; margin-top: 34px; font-size: 16px; line-height: 1.8; color: #d6cec6; }
.footer-details p { margin: 0; }
.footer-details a { text-underline-offset: 4px; }
/* Desktop visual pass: preserve the sand/intro geometry and all layer levels.
   Smaller type gives the portrait reference more breathing room in 16:9. */
@media (min-width: 1001px) {
  .munksjo-v2 #title {
    top: 6vw;
    font-size: clamp(70px, 6.7vw, 129px);
    line-height: 1.08;
  }
  .tagline {
    top: 24.6vw;
    font-size: clamp(49px, 5vw, 96px);
    line-height: 1.02;
  }
  .badge {
    left: 73.5%;
    top: 25.2vw;
    width: 12.5vw;
    height: 12.5vw;
  }
  .badge-ring span { font-size: clamp(14px, 1.2vw, 23px); }
  .badge-center { font-size: clamp(15px, 1.3vw, 25px); line-height: 1.03; }
  .countdown-panel {
    top: 38vw;
    width: 31%;
    padding: 14px 18px 13px;
    border-radius: 26px;
  }
  .countdown dd, .countdown > div + div::before {
    font-size: clamp(35px, 3.3vw, 64px);
  }
  .countdown dt { font-size: clamp(13px, .85vw, 16px); }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .countdown-panel { width: 44%; }
  .badge { width: 170px; height: 170px; }
}
@media (max-width: 760px) {
  .hero { height: 100svh; min-height: 780px; }
  .masthead { top: 24px; left: 24px; }
  .wordmark { font-size: 30px; }
  .munksjo-v2 #title { top: 100px; left: 7%; font-size: clamp(50px, 13.4vw, 88px); line-height: 1.05; }
  .sand-layer { top: 150px; left: -30%; width: 160%; }
  .tagline { top: 315px; left: 7%; font-size: clamp(38px, 10.3vw, 65px); line-height: 1.03; }
  .badge { left: 79%; top: 352px; width: 132px; height: 132px; }
  .badge-center { font-size: 15px; }
  .badge-ring span { font-size: 13px; }
  .countdown-panel { top: 467px; width: 88%; padding: 15px 12px; border-radius: 22px; }
  .countdown dd, .countdown > div + div::before { font-size: clamp(32px, 9.6vw, 54px); }
  .countdown dt { font-size: 13px; }
  .intro-control { top: 22px; right: 20px; font-size: 13px; padding: 9px 13px; }
  .footer { min-height: 330px; padding: 48px 24px; }
  .footer-details { flex-wrap: wrap; gap: 24px; font-size: 15px; }
}
@media (max-width: 360px) {
  .badge { width: 112px; height: 112px; left: 80%; }
  .badge-ring span { font-size: 12px; }
  .badge-center { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  .sand-layer, .munksjo-v2 #title { transform: none !important; }
}

@media (max-width: 760px) {
  .munksjo-v2 #title { transform: none; }
}