@charset "UTF-8";

:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  color: #f7f6f4;
  background: #050505;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
[hidden] { display: none !important; }

/* These dimensions depend on the viewport, never on the number of links. */
.stage {
  --view-height: 100svh;
  --portrait-top: 108px;
  --portrait-height: clamp(330px, 55svh, 440px);
  --links-shift: max(0px, calc(50svh - 318px));
  isolation: isolate;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none;
  min-height: max(640px, var(--view-height));
  margin: 0 auto;
  padding-inline: max(26px, env(safe-area-inset-left, 0px)) max(26px, env(safe-area-inset-right, 0px));
  display: grid;
  grid-template-rows: 108px minmax(426px, 1fr) auto;
  background: #050505;
}

.atmosphere,
.portrait {
  position: absolute;
  pointer-events: none;
}

.atmosphere {
  z-index: -3;
  inset: 0;
  background:
    radial-gradient(ellipse at 87% 32%, #79070b55, transparent 40%),
    radial-gradient(ellipse at 12% 86%, #82070b38, transparent 27%),
    linear-gradient(145deg, #020202 12%, #0e0607 47%, #020202 76%);
}

.atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/atmosphere.svg') center / cover no-repeat;
  opacity: .4;
}

.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#0008, transparent 24%, #0005 57%, transparent 86%, #0009);
}

/* No imitation photography: the official image is applied here by app.js. */
.portrait {
  z-index: -2;
  top: var(--portrait-top);
  left: 50%;
  width: min(100%, calc(var(--portrait-height) * .8002853));
  height: var(--portrait-height);
  transform: translateX(-50%);
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  /* Fade only the perimeter; the central subject stays fully opaque.
     Match the mask to the photo width rather than transparent contain gutters. */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 16%, #000 84%, transparent),
    linear-gradient(to bottom, transparent, #000 8%, #000 64%, transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 16%, #000 84%, transparent),
    linear-gradient(to bottom, transparent, #000 8%, #000 64%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.brand {
  align-self: start;
  text-align: center;
  min-height: 108px;
  padding-top: max(clamp(26px, 5svh, 44px), env(safe-area-inset-top, 0px));
}

/* Temporary text, not a reconstruction of the official brand artwork. */
.brand h1 {
  margin: 0 0 12px .26em;
  font-size: clamp(34px, 10vw, 45px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .26em;
}

.brand img {
  display: block;
  width: min(100%, 290px);
  height: 55px;
  margin: 0 auto 12px;
  object-fit: contain;
}

/* A single center for 2/4/5 links; the group grows in both directions. */
.links {
  position: relative;
  top: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  width: 100%;
  padding-block: calc(12px + var(--links-shift) + var(--links-shift)) 12px;
  outline: none;
}

.link {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 16px;
  min-height: 66px;
  padding: 12px 23px;
  border: 1.5px solid #686868;
  border-radius: 999px;
  text-decoration: none;
  background: linear-gradient(170deg, #1c1c1cf5, #080808f5 60%, #030303);
  box-shadow: inset 0 1px 0 #ffffff16, 0 8px 24px #0006;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  -webkit-tap-highlight-color: #ffffff15;
}

.link--primary {
  border-color: #ff303b;
  background: linear-gradient(180deg, #cf111b 0%, #85060c 24%, #470205 65%, #290103);
  box-shadow: inset 0 1px 5px #ff747455, 0 0 22px #e0001826, 0 8px 24px #0007;
}

.link--promo {
  border-color: #ff303b;
  background: linear-gradient(180deg, #2c0306, #090001);
  box-shadow: inset 0 0 12px #e3001833, 0 0 18px #ed00182b;
}

.link-icon { display: flex; align-items: center; justify-content: center; }
.link-icon svg { width: 35px; height: 35px; }
.link-title {
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: .005em;
  overflow-wrap: anywhere;
}
.link[data-id="shop"] .link-title { text-transform: uppercase; }
.arrow {
  justify-self: end;
  width: 9px;
  height: 9px;
  border-top: 1.7px solid;
  border-right: 1.7px solid;
  transform: rotate(45deg);
}

.link:focus-visible,
.skip-link:focus-visible,
.no-script a:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.link:active { transform: scale(.985); }

.footer {
  align-self: end;
  position: relative;
  text-align: center;
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
}
.footer small {
  display: block;
  margin-top: 16px;
  color: #aaa5a5;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: .01em;
}

.skip-link {
  position: fixed;
  z-index: 10;
  top: 12px;
  left: 12px;
  transform: translateY(-200%);
  padding: 12px 16px;
  border-radius: 8px;
  color: #000;
  background: #fff;
}
.skip-link:focus { transform: translateY(0); }

/* Keep the no-JavaScript fallback in the same grid area, not in a new row. */
/* Do not override display: the browser hides raw noscript text when JS is on.
   With JS off it becomes a normal grid item containing the fallback links. */
noscript {
  padding-top: calc(var(--links-shift) + var(--links-shift));
  grid-column: 1;
  grid-row: 2;
  position: relative;
  top: 0;
  align-self: center;
}
.links,
.no-script { grid-column: 1; grid-row: 2; }
.footer { grid-column: 1; grid-row: 3; }
.no-script {
  display: grid;
  gap: 18px;
}
.no-script p { text-align: center; color: #d5d0d0; }
.no-script a {
  display: grid;
  place-items: center;
  min-height: 66px;
  padding: 15px;
  border: 1.5px solid #686868;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  background: #0b0b0b;
}
.no-script a:first-of-type {
  border-color: #ff303b;
  background: linear-gradient(#a60a13, #320104);
}

@media (hover: hover) {
  .link:hover { transform: translateY(-2px); border-color: #ccc; }
  .link--primary:hover,
  .link--promo:hover { border-color: #ff737b; box-shadow: 0 0 28px #e7002438; }
}

/* Desktop gets a restrained portrait frame; mobile stays edge to edge.
   On short desktop windows the document scrolls instead of shrinking the content. */
@media (min-width: 1024px) {
  body {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 32px;
    background: radial-gradient(ellipse at 50% 38%, #201013, #09090a 62%);
  }
  .stage {
    --portrait-top: 148px;
    --portrait-height: 440px;
    max-width: 420px;
    min-height: max(800px, min(860px, calc(100svh - 64px)));
    grid-template-rows: 164px minmax(480px, 1fr) auto;
    padding-inline: 28px;
    border: 1px solid #ffffff24;
    border-radius: 36px;
    box-shadow: 0 18px 55px #0006, 0 2px 10px #0005;
  }
  .brand { padding-top: 64px; }
  .footer { padding-bottom: 28px; }
  .links, noscript { top: 52px; }
  .links { padding-block: 12px; }
  noscript { padding-top: 0; }
}

@media (max-width: 359px) {
  .stage { padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
  .brand h1 { font-size: 34px; }
  .link { padding-inline: 18px; gap: 12px; grid-template-columns: 30px minmax(0, 1fr) 10px; }
  .link-icon svg { width: 30px; height: 30px; }
  .link-title { font-size: 14px; }
}

/* Dynamic viewport follows Safari/Chrome toolbar expansion without fixing height.
   Intrinsic grid sizing can still grow for enlarged text or extra links. */
@supports (height: 100dvh) {
  .stage { --view-height: 100dvh; }
}

/* Short screens and landscape scroll naturally; nothing is squeezed or hidden. */
@media (max-width: 1023px) and (max-height: 600px) {
  .stage {
    --portrait-top: 124px;
    --portrait-height: 400px;
    --links-shift: 20px;
    min-height: 740px;
    grid-template-rows: 124px minmax(480px, 1fr) auto;
  }
  .brand { padding-top: max(28px, env(safe-area-inset-top, 0px)); }
}

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