@font-face {
  font-family: "Instrument Serif";
  src: url("./assets/instrument-serif-v2.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root { --page: 255 255 255; --ink: 0 0 0; color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root { --page: 0 0 0; --ink: 255 255 255; }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: rgb(var(--page));
}

body {
  --edge: clamp(16px, 2.2vw, 32px);
  --unit: clamp(.65px, .10858vw, 1.75px);
  color: rgb(var(--ink));
  font-family: "Instrument Serif", serif;
}

/* Fill the viewport. Only the hero reflows; the corner anchors stay put. */
.artboard {
  position: relative;
  width: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding-block: max(56px, env(safe-area-inset-top)) max(56px, env(safe-area-inset-bottom));
  overflow: clip;
  isolation: isolate;
  background: rgb(var(--page));
}

.hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(20px, 4vw, 64px);
  width: min(100%, 1600px);
  padding-inline: max(clamp(16px, 10vw, 160px), env(safe-area-inset-left)) max(clamp(16px, 10vw, 160px), env(safe-area-inset-right));
}

.portrait {
  position: relative;
  width: min(100%, calc(clamp(80px, 100svh - 112px, 720px) * 269 / 400));
  aspect-ratio: 269 / 400;
}

.portrait > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.portrait-fade-bottom {
  background: linear-gradient(179.74535376899271deg, rgb(var(--page) / 0) 71.809%, rgb(var(--page)) 99.851%);
}

.portrait-fade-left {
  background: linear-gradient(238.1229168889175deg, rgb(var(--page) / 0) 60.606%, rgb(var(--page)) 87.524%);
}

.portrait-fade-right {
  background: linear-gradient(131.21110465828193deg, rgb(var(--page) / 0) 62.293%, rgb(var(--page)) 85.261%);
}

.flag {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: min(58vw, 110svh, 1280px);
  aspect-ratio: 532 / 278;
  border-top-left-radius: calc(116 * var(--unit));
  pointer-events: none;
}

/* Figma's image shadows follow the alpha silhouette, not its bounds.
   Separate masked layers keep the six Gaussian shadows independent.
   CSS blur() uses half the radius of Figma's drop-shadow blur. */
.flag-glow {
  position: absolute;
  inset: 0;
  filter: blur(calc(var(--blur) * var(--unit)));
}

.flag-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top-left-radius: calc(116 * var(--unit));
  background: #a3c2ff;
  mask-image: url("./assets/flag-mask-v2.png");
  mask-size: 100% 191.37%;
  mask-position: left bottom;
  mask-repeat: no-repeat;
}

.flag-crop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-top-left-radius: inherit;
}

.flag img {
  position: absolute;
  display: block;
  left: 0;
  top: -91.37%;
  width: 100%;
  height: 191.37%;
  max-width: none;
}

.preorder {
  margin: 0;
  font: 400 clamp(36px, 5.43vw, 88px) / 1.1 "Instrument Serif", serif;
  text-align: center;
  white-space: nowrap;
  text-shadow:
    0 calc(4 * var(--unit)) calc(9 * var(--unit)) rgb(var(--ink) / 35%),
    0 calc(17 * var(--unit)) calc(17 * var(--unit)) rgb(var(--ink) / 31%),
    0 calc(37 * var(--unit)) calc(22 * var(--unit)) rgb(var(--ink) / 18%),
    0 calc(66 * var(--unit)) calc(26 * var(--unit)) rgb(var(--ink) / 5%),
    0 calc(103 * var(--unit)) calc(29 * var(--unit)) rgb(var(--ink) / 1%);
}

.preorder-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.preorder-link[href] {
  cursor: pointer;
}

.preorder-link:focus-visible {
  outline: calc(2 * var(--unit)) solid #174dad;
  outline-offset: calc(6 * var(--unit));
  border-radius: calc(2 * var(--unit));
}

.brand {
  position: fixed;
  left: max(var(--edge), env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 3;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  min-height: 44px;
  font-size: clamp(15px, 1.63vw, 20px);
  line-height: 1.2;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.brand-link:focus-visible {
  outline: 2px solid #174dad;
  outline-offset: 4px;
  border-radius: 2px;
}

.brand-mark {
  display: block;
  flex: none;
  width: 1em;
  height: 1em;
}

/* Portrait phones and tablets stack the product and action instead of shrinking them. */
@media (max-width: 360px), (max-width: 600px) and (max-aspect-ratio: 1 / 1), (max-aspect-ratio: 4 / 5) {
  .artboard {
    padding-block: max(104px, calc(env(safe-area-inset-top) + 88px)) max(88px, calc(env(safe-area-inset-bottom) + 64px));
  }
  .hero { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 3svh, 32px); padding-inline: var(--edge); }
  .portrait { width: min(66vw, calc(max(130px, 100svh - 300px) * 269 / 400), 380px); }
  .preorder { font-size: clamp(40px, 12vw, 64px); }
  .flag { width: min(80vw, max(0px, 100vw - 144px), 60svh); }
}

/* Product exploration lives above the original composition. */
.preorder-link { padding: 0; border: 0; background: none; font: inherit; text-shadow: inherit; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cap-scrim { position: fixed; inset: 0; z-index: 20; background: rgb(243 245 249 / 58%); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transition: opacity .55s, visibility .55s; }
.cap-scrim.is-open { opacity: 1; visibility: visible; }
.cap-viewer { position: fixed; top: max(12px, env(safe-area-inset-top)); left: max(var(--edge), env(safe-area-inset-left)); width: clamp(72px, 8vw, 104px); aspect-ratio: 1; z-index: 11; pointer-events: auto; }
.cap-viewer.is-open { width: min(850px, 94vw, 90svh); height: min(850px, 94vw, 90svh); left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 21; pointer-events: auto; }
.cap-canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.cap-canvas { cursor: grab; }
.cap-canvas:active { cursor: grabbing; }
.cap-viewer:not(.is-open) .cap-canvas:not(.pointer-interaction):focus-visible { outline: 2px solid #2353b9; outline-offset: 2px; border-radius: 12px; }
@media (max-width: 600px) {
  .cap-viewer.is-open { width: 100vw; height: min(145vw, 82svh); }
}
@media (prefers-reduced-motion: reduce) {
  .cap-scrim { transition-duration: .01ms; }
}
.cap-scrim { pointer-events: none; }
.cap-scrim.is-open { pointer-events: auto; }

/* Reveal the preview without a visible loading label. */
.cap-canvas { opacity: 0; transition: opacity .22s ease; }
.cap-viewer.is-ready .cap-canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cap-canvas { transition: none; } }

@media (prefers-color-scheme: dark) { .cap-scrim { background: rgb(0 0 0 / 58%); } }

/* A sharp full-model render is visible and clickable before WebGL is ready. */
.cap-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transition: opacity .22s ease; }
.cap-canvas { position: relative; }
.cap-viewer.is-ready .cap-poster { opacity: 0; }
@media (prefers-color-scheme: dark) { .flag-glow::before { background: #00145c; } }