/* HEAVY CREAM — shared stylesheet. Every page reads this file. */

:root {
  color-scheme: dark;
  --bg: #000;
  --fg: #fff;
  --mute: #9a9a9a;
  --dim: #6f6f6f;
  --rule: #1c1c1c;
  --ph: #101010;
  --ph-edge: #262626;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: 40px;
  --maxw: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* Type scale */
.display {
  font-family: "Anton", "Oswald", sans-serif;
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
}
.caps {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.caps-sm { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; }
.mute { color: var(--mute); }
.dim { color: var(--dim); }
.body { font-size: 15px; line-height: 1.9; font-weight: 300; color: #e2e2e2; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 20;
  height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.nav .mark { height: 22px; width: auto; }
.nav .links { display: flex; gap: 34px; }
.nav .links a { font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--mute); }
.nav .links a.on, .nav .links a:hover { color: var(--fg); }

/* Layout */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 96px 0; }
.rule { border-top: 1px solid var(--rule); }

/* Hero (drop page) */
.hero {
  position: relative; height: 70vh; min-height: 420px;
  display: flex; align-items: center; justify-content: center;
  background: #0c0c0c; border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.hero .over { position: relative; text-align: center; text-shadow: 0 0 16px rgba(0,0,0,0.8); }

/* Leader: the drop's own film, full screen, then the drop below it. */
.hero.leader { height: calc(100vh - 72px); height: calc(100svh - 72px); min-height: 480px; background: #000; }
.hero.leader video { opacity: 1; object-fit: cover; object-position: 50% 58%; }   /* portrait film, full bleed, held on the pour */
.hero .over { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hero .hero-mark { width: 150px; height: auto; filter: drop-shadow(0 4px 18px rgba(0,0,0,0.7)); }
.hero .cue {
  position: absolute; left: 0; right: 0; bottom: calc(26px + var(--safe-bottom));
  text-align: center; color: var(--fg); opacity: 0.7; text-shadow: 0 0 12px rgba(0,0,0,0.8);
}
.hero .cue::after { content: ""; display: block; width: 1px; height: 28px; background: var(--fg); margin: 12px auto 0; opacity: 0.6; }
.hero .cue:hover { opacity: 1; }

/* Drop header */
.drop-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 96px var(--gutter) 56px; }
.drop-head .display { font-size: clamp(56px, 9vw, 92px); }

/* Object stack */
.stack { display: flex; flex-direction: column; align-items: center; gap: 88px; padding: 40px var(--gutter) 96px; }
.obj { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; max-width: 760px; }
.obj .img { width: 100%; aspect-ratio: 4 / 3; }
.obj .meta { display: flex; flex-direction: column; align-items: center; gap: 9px; }

/* Placeholder */
.ph {
  background: var(--ph); border: 1px solid var(--ph-edge);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mute);
}
.ph.dashed { border-style: dashed; color: var(--dim); background: #0d0d0d; }

/* Object page */
.obj-page { display: grid; grid-template-columns: 1fr 520px; }
.obj-page .gallery { display: flex; flex-direction: column; }
.obj-page .gallery .ph { aspect-ratio: 1 / 1; border: 0; border-bottom: 1px solid var(--rule); }
.obj-page .panel {
  position: sticky; top: 72px; align-self: start;
  padding: 88px 48px; display: flex; flex-direction: column; gap: 30px;
  border-left: 1px solid var(--rule); min-height: calc(100vh - 72px);
}
.edition { font-size: 78px; line-height: 0.92; }
.edition span { color: #4a4a4a; }
.specs { border-top: 1px solid var(--rule); padding-top: 26px; display: flex; flex-direction: column; gap: 11px; }
.specs div { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); line-height: 1.7; }

/* Buttons */
.btn {
  display: inline-block; border: 1px solid var(--fg); padding: 14px 34px;
  font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--fg); background: none;
  cursor: pointer; -webkit-appearance: none; font: inherit; font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase;
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn.solid { background: var(--fg); color: var(--bg); padding: 19px 0; width: 100%; text-align: center; font-size: 11px; letter-spacing: 0.42em; }
.btn.solid:hover { background: #e6e6e6; }
.btn.off { opacity: 0.35; pointer-events: none; }

/* STAG */
.strip { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 32px var(--gutter) 72px; }
.strip .ph { width: 100%; max-width: 1000px; aspect-ratio: 1000 / 440; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; width: 100%; max-width: 1000px; }
.issue { display: flex; flex-direction: column; gap: 16px; }
.issue .ph { aspect-ratio: 3 / 4; }

/* Archive */
.arch { display: flex; flex-direction: column; }
.arch a {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 24px;
  padding: 34px var(--gutter); border-bottom: 1px solid var(--rule);
}
.arch a:hover { background: #0a0a0a; }
.arch .display { font-size: 44px; }

/* Footer */
.foot {
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px var(--gutter) calc(28px + var(--safe-bottom));
}
.foot a, .foot span { font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--dim); }
.foot a:hover { color: var(--fg); }

/* Mobile */
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  .nav { height: 60px; }
  .hero.leader { height: calc(100vh - 60px); height: calc(100svh - 60px); }
  .hero.leader video { object-position: 50% 50%; }   /* the phone sees the whole frame */
  .hero .hero-mark { width: 124px; }
  .nav .links { gap: 22px; }
  .drop-head { padding: 72px var(--gutter) 40px; }
  .drop-head .caps-sm { line-height: 2.1; max-width: 300px; }
  .obj-page { grid-template-columns: 1fr; }
  /* Photos swipe sideways on the phone so the name and price are one swipe away, not three screens down. */
  .obj-page .gallery { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .obj-page .gallery::-webkit-scrollbar { display: none; }
  .obj-page .gallery .ph { flex: 0 0 100%; scroll-snap-align: start; border-bottom: 0; }
  .obj-page .panel { position: static; border-left: 0; border-top: 1px solid var(--rule); padding: 48px var(--gutter) 56px; min-height: 0; }
  .edition { font-size: 64px; }
  .strip .ph { aspect-ratio: 4 / 5; }
  .grid3 { grid-template-columns: 1fr 1fr; gap: 20px; }
  .grid3 .issue:first-child { grid-column: 1 / -1; }
  .stack { gap: 64px; }
  .arch .display { font-size: 32px; }
}