/* =========================================================
   Setup Lookbook — flow-based build (flex/grid, no page-wide
   absolute positioning), fluid-scaled desktop layout.

   Every desktop-scope dimension below (width / height /
   padding / gap / font-size / line-height / letter-spacing)
   is written as `calc(var(--unit) * N)`, where N is the
   original Figma value in px at the 1728px reference canvas
   and --unit is a single fluid scale factor (defined right
   below) that equals 1px at a 1728px viewport and shrinks
   proportionally down to a floor at a 1024px viewport,
   holding flat below that. So the whole layout scales
   continuously with the window instead of jumping between
   fixed breakpoints or overflowing on narrower laptop/browser
   widths.

   Below 768px viewport, the SP layer at the bottom of this
   file takes over: it resets --unit back to a flat 1px (see
   that block), so every rule here that ISN'T explicitly
   overridden for SP simply falls back to its original fixed
   px size, unaffected by the fluid scaling above.
   ========================================================= */

:root {
  /* 1px at a 1728px viewport, scaling down to (1024/1728)px
     at a 1024px viewport and holding flat below that. */
  --unit: calc(clamp(1024px, 100vw, 1728px) / 1728);
}

* {
  box-sizing: border-box;
}

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

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: #e3e3e3;
}

p {
  margin: 0;
}

a {
  color: inherit;
  transition: opacity 0.2s ease;
}
a:hover {
  opacity: 0.6;
}

img {
  max-width: none;
}

/* -------------------------------------------------
   Fixed site header — hidden above the page, slides in once
   script.js confirms the hero has scrolled fully out of view
   (see the IntersectionObserver in script.js). The nav links'
   left/right edges match the same 1216px content column used
   everywhere else on the page (`.site-header__inner`, same
   pattern as `.hero__inner`).
   ------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(170, 170, 170, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
.site-header.is-visible {
  transform: translateY(0);
}
.site-header__inner {
  position: relative;
  max-width: calc(var(--unit) * 1216);
  margin: 0 auto;
  padding: calc(var(--unit) * 20) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__logo {
  display: block;
  flex-shrink: 0;
}
.site-header__logo img {
  display: block;
  width: auto;
  height: calc(var(--unit) * 32);
}
.site-header__burger {
  display: none;
}
.site-header__nav {
  display: flex;
  align-items: center;
  gap: calc(var(--unit) * 40);
}
.site-header__links {
  display: flex;
  align-items: center;
  gap: calc(var(--unit) * 32);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header__links a {
  display: block;
  font-family: 'neue-haas-grotesk-display', sans-serif;
  font-weight: 300;
  font-size: calc(var(--unit) * 14);
  letter-spacing: calc(var(--unit) * 0.5);
  color: #f7ff86;
  white-space: nowrap;
  text-decoration: none;
}
.site-header__arknets {
  display: block;
  flex-shrink: 0;
}
.site-header__arknets img {
  display: block;
  width: auto;
  height: calc(var(--unit) * 20);
}

.page {
  width: 100%;
  background: #e3e3e3;
}

/* -------------------------------------------------
   Shared: repeating photo band (used by hero + footer).
   Note: the source Figma export built this as 3 separate
   absolutely-positioned image fragments capped at a fixed
   1728px total width (each showing a different shifted crop
   of the same tall photo). That left blank gaps on wider
   screens and couldn't extend further. A single tiled CSS
   background does the same "repeating film-strip" look, and
   its height fluid-scales along with everything else here.
   ------------------------------------------------- */
.strip-row {
  /* Height derived from the row's own actual width (2.8 = 3.5
     tiles × the photo's native 1200:1500 = 0.8 aspect ratio), so
     `background-size: auto 100%` below naturally tiles the photo,
     undistorted, exactly 3.5 times — no forced horizontal squeeze,
     unlike a fixed height + percentage background-size would need. */
  aspect-ratio: 2.8 / 1;
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 100%;
}
.hero .strip-row {
  background-image: url("images/setup-29-photo.jpg");
}
.foot .strip-row {
  background-image: url("images/setup-31.jpg");
}

/* -------------------------------------------------
   Hero: the repeating photo band as a key visual, with a
   real-text overlay on top — matches the campaign banner, so
   this isn't a flattened image: every yellow word below is a
   styled HTML element. The small labels (season/tag row, brand
   row) use neue-haas-grotesk-display; only the big SET UP
   headline (`.hero__title`) is kept in the obviously-wide
   display face. The small labels are also wrapped in
   `.hero__inner`, which lines their left/right edges up with
   the site's standard 1216px content column — the SET UP
   headline is exempt from both that and the font swap, and
   stays centered on the full-bleed photo.
   ------------------------------------------------- */
.hero {
  position: relative;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--unit) * 40) 0;
  color: #f7ff86;
  font-family: 'neue-haas-grotesk-display', sans-serif;
  font-weight: 300;
}
.hero__inner {
  width: 100%;
  max-width: calc(var(--unit) * 1216);
  margin: 0 auto;
}
.hero__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.hero__season,
.hero__tag {
  font-size: calc(var(--unit) * 18);
  line-height: 1.35;
  letter-spacing: calc(var(--unit) * 0.5);
}
.hero__title {
  /* Kept in the display face — everything else under .hero__overlay
     switched to neue-haas-grotesk-display, but the SET UP headline
     stays in obviously-wide. */
  font-family: 'obviously-wide', sans-serif;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: calc(var(--unit) * 20);
  text-align: center;
}
.hero__title-main {
  font-weight: 500;
  font-size: calc(var(--unit) * 124);
  line-height: 0.92;
  letter-spacing: calc(var(--unit) * 2);
  white-space: nowrap;
}
.hero__title-sub {
  font-size: calc(var(--unit) * 32);
  letter-spacing: calc(var(--unit) * 7);
  padding-left: calc(var(--unit) * 5);
}
.hero__brands {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: calc(var(--unit) * 18);
  letter-spacing: calc(var(--unit) * 0.5);
}

/* -------------------------------------------------
   Intro description block
   ------------------------------------------------- */
.intro {
  width: calc(var(--unit) * 580);
  margin: calc(var(--unit) * 104) auto calc(var(--unit) * 152);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--unit) * 49);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-style: normal;
}
.intro__heading {
  display: flex;
  flex-direction: column;
  gap: calc(var(--unit) * 12);
}
.intro__title {
  font-size: calc(var(--unit) * 24);
  line-height: normal;
  color: #000;
  white-space: nowrap;
  text-align: center;
}
.intro__subtitle {
  font-size: calc(var(--unit) * 16);
  line-height: calc(var(--unit) * 24);
  letter-spacing: calc(var(--unit) * 0.8);
  color: #999;
  white-space: nowrap;
  text-align: center;
}
.intro__body {
  width: 100%;
  font-size: calc(var(--unit) * 16);
  line-height: calc(var(--unit) * 24);
  letter-spacing: calc(var(--unit) * 0.8);
  color: #000;
}

/* -------------------------------------------------
   Look section (repeats per brand: 01–04)
   ------------------------------------------------- */
.look-section {
  width: 100%;
  padding: calc(var(--unit) * 128) 0;
  background: #e3e3e3;
  /* Keeps the fixed header from covering the section's top when a
     header nav link scrolls to it (id="daiwa-pier39" etc.). */
  scroll-margin-top: calc(var(--unit) * 96);
}
.look-section--shaded {
  background: #d6d6d6;
}
.look-section__inner {
  /* max-width (not width) so this still shrinks to fit a
     container narrower than the fluid cap — e.g. on mobile,
     where --unit is reset to 1px (see the SP block) and this
     would otherwise sit at a fixed 1216px floor. */
  max-width: calc(var(--unit) * 1216);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* look-intro: photo + text column, side by side, alternating order per section */
.look-intro {
  display: flex;
  gap: calc(var(--unit) * 94);
  width: 100%;
  justify-content: center;
}
.look-photo {
  flex-shrink: 0;
  width: calc(var(--unit) * 608);
  height: var(--look-h);
  position: relative;
}
.look-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.look-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--text-w);
  height: var(--look-h);
}

.look-desc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--unit) * 64);
  width: 100%;
}
.look-desc__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--unit) * 40);
  width: 100%;
}

.numeral {
  font-family: 'obviously-wide', sans-serif;
  font-weight: 500;
  font-size: calc(var(--unit) * 50);
  line-height: calc(var(--unit) * 32);
  letter-spacing: calc(var(--unit) * 2.5);
  color: #f7ff86;
}

.brand-logo { height: calc(var(--unit) * 33); }
.brand-logo img { display: block; width: 100%; height: 100%; }
.brand-logo--04 { width: calc(var(--unit) * 138); }
.brand-logo--03 { width: calc(var(--unit) * 186); height: calc(var(--unit) * 36); overflow: hidden; }
.brand-logo--02 { width: calc(var(--unit) * 127); }
.brand-logo--01 { width: calc(var(--unit) * 241); height: calc(var(--unit) * 27); }

.essay {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--unit) * 24);
  width: 100%;
  font-family: 'Hiragino Kaku Gothic Pro', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: calc(var(--unit) * 14);
  color: #000;
  letter-spacing: calc(var(--unit) * 0.7);
}
.essay__p {
  width: 100%;
  line-height: calc(var(--unit) * 24);
}

.item-spec {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--unit) * 20);
  width: 100%;
  font-family: 'Hiragino Kaku Gothic Pro', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  font-weight: 300;
  letter-spacing: calc(var(--unit) * 0.7);
}
.item-spec__row {
  width: 100%;
}
.item-spec__name {
  font-size: calc(var(--unit) * 14);
  line-height: calc(var(--unit) * 20);
  color: #000;
}
.item-spec__name a {
  text-decoration: underline;
}
.item-spec__price {
  font-size: calc(var(--unit) * 12);
  line-height: calc(var(--unit) * 20);
  color: #777;
}

.stockists {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--unit) * 10);
  width: calc(var(--unit) * 338);
}
.stockists__heading p {
  font-family: 'obviously-wide', sans-serif;
  font-weight: 500;
  font-size: calc(var(--unit) * 20);
  line-height: calc(var(--unit) * 32);
  letter-spacing: calc(var(--unit) * 1);
  color: #f7ff86;
}
.stockists__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: 'Hiragino Kaku Gothic Pro', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  font-weight: 300;
  letter-spacing: calc(var(--unit) * 0.6);
  text-align: right;
}
.stockists__list a,
.stockists__list p {
  display: block;
  font-size: calc(var(--unit) * 12);
  line-height: calc(var(--unit) * 24);
  color: #000;
}
.stockists__list a {
  text-decoration: underline;
  cursor: pointer;
}
.stockists__list p a {
  display: inline;
}

/* detail-collage: a small self-contained free-form photo collage.
   Absolute positioning is intentionally scoped to this local component only
   (art-directed overlapping layout), not to the whole page. Its own size
   and every item's coordinates scale with --unit like everything else. */
.detail-collage {
  position: relative;
  width: var(--collage-w);
  height: var(--collage-h);
  margin: var(--collage-gap) auto 0;
}
.detail-collage__item {
  position: absolute;
}
.detail-collage__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* look-row: full-body photo + price/spec list, bottom aligned */
.look-row {
  display: flex;
  align-items: flex-end;
  gap: var(--row-gap);
  width: 100%;
  justify-content: center;
  margin-top: var(--row-offset);
}
.look-row__img {
  position: relative;
  flex-shrink: 0;
  height: calc(var(--unit) * 811);
  /* Matches the actual source video's native pixel size (534×854) —
     not a "clean" ratio like 9:16, so using the real numbers avoids
     any letterboxing from a mismatched container shape. */
  aspect-ratio: 534 / 854;
}
.look-row__img img,
.look-row__img video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.look-row__img img {
  object-fit: cover;
}
.look-row__img video {
  /* Show the full 9:16 video frame uncropped, rather than the cover
     crop used for the photos elsewhere on the page. */
  object-fit: contain;
  background: #000;
}

.spec-list {
  display: flex;
  flex-direction: column;
  width: calc(var(--unit) * 469);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Hiragino Kaku Gothic Pro', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  font-weight: 300;
  letter-spacing: calc(var(--unit) * 0.6);
}
.spec-list li {
  font-size: calc(var(--unit) * 12);
  line-height: calc(var(--unit) * 32);
  color: #000;
}
.spec-list li + li {
  margin-top: 10px;
}
.spec-list li a {
  display: block;
  color: inherit;
  text-decoration: none;
  line-height: 1.3;
}
.spec-list li a:hover {
  text-decoration: underline;
}
.spec-list__label {
  color: #999;
}

/* -------------------------------------------------
   Per-section variables (photo/text height, collage size,
   collage gap, look-row gap/offset, text column width) —
   each raw Figma px value multiplied by --unit.
   ------------------------------------------------- */
.look-section--01 {
  --look-h: calc(var(--unit) * 811);
  --text-w: calc(var(--unit) * 514);
  --collage-w: calc(var(--unit) * 1120);
  --collage-h: calc(var(--unit) * 1983);
  --collage-gap: calc(var(--unit) * 128);
  --row-gap: calc(var(--unit) * 32);
  --row-offset: calc(var(--unit) * 128);
}

.look-section--02 {
  --look-h: calc(var(--unit) * 811);
  --text-w: calc(var(--unit) * 514);
  --collage-w: calc(var(--unit) * 1120);
  --collage-h: calc(var(--unit) * 2357);
  --collage-gap: calc(var(--unit) * 64);
  --row-gap: calc(var(--unit) * 32);
  --row-offset: calc(var(--unit) * 128);
}

.look-section--03 {
  --look-h: calc(var(--unit) * 811);
  --text-w: calc(var(--unit) * 543);
  --collage-w: calc(var(--unit) * 1120);
  --collage-h: calc(var(--unit) * 2422);
  --collage-gap: calc(var(--unit) * 64);
  --row-gap: calc(var(--unit) * 32);
  --row-offset: calc(var(--unit) * -105);
}

.look-section--04 {
  --look-h: calc(var(--unit) * 808);
  --text-w: calc(var(--unit) * 514);
  --collage-w: calc(var(--unit) * 1216);
  --collage-h: calc(var(--unit) * 2047);
  --collage-gap: calc(var(--unit) * 128);
  --row-gap: calc(var(--unit) * 64);
  --row-offset: calc(var(--unit) * 128);
}

/* collage item placement — local coordinates (see analysis notes),
   each multiplied by --unit so the whole collage scales as one piece. */
.look-section--01 .collage-01-a { left: 0; top: 0; width: calc(var(--unit) * 512); height: calc(var(--unit) * 683); }
.look-section--01 .collage-01-b { left: calc(var(--unit) * 704); top: calc(var(--unit) * 65); width: calc(var(--unit) * 416); height: calc(var(--unit) * 554); }
.look-section--01 .collage-01-c { left: calc(var(--unit) * 159); top: calc(var(--unit) * 811); width: calc(var(--unit) * 289); height: calc(var(--unit) * 361); }
.look-section--01 .collage-01-d { left: calc(var(--unit) * 463); top: calc(var(--unit) * 811); width: calc(var(--unit) * 289); height: calc(var(--unit) * 361); }
.look-section--01 .collage-01-e { left: calc(var(--unit) * 767); top: calc(var(--unit) * 811); width: calc(var(--unit) * 289); height: calc(var(--unit) * 361); }
.look-section--01 .collage-01-f { left: calc(var(--unit) * 352); top: calc(var(--unit) * 1300); width: calc(var(--unit) * 512); height: calc(var(--unit) * 683); }

.look-section--02 .collage-02-a { left: calc(var(--unit) * 672); top: 0; width: calc(var(--unit) * 384); height: calc(var(--unit) * 512); }
.look-section--02 .collage-02-b { left: calc(var(--unit) * 96); top: calc(var(--unit) * 187); width: calc(var(--unit) * 512); height: calc(var(--unit) * 683); }
.look-section--02 .collage-02-c { left: calc(var(--unit) * 736); top: calc(var(--unit) * 544); width: calc(var(--unit) * 384); height: calc(var(--unit) * 512); }
.look-section--02 .collage-02-d { left: calc(var(--unit) * 160); top: calc(var(--unit) * 1185); width: calc(var(--unit) * 289); height: calc(var(--unit) * 361); }
.look-section--02 .collage-02-e { left: calc(var(--unit) * 463); top: calc(var(--unit) * 1185); width: calc(var(--unit) * 289); height: calc(var(--unit) * 361); }
.look-section--02 .collage-02-f { left: calc(var(--unit) * 767); top: calc(var(--unit) * 1185); width: calc(var(--unit) * 289); height: calc(var(--unit) * 361); }
.look-section--02 .collage-02-g { left: calc(var(--unit) * 304); top: calc(var(--unit) * 1674); width: calc(var(--unit) * 512); height: calc(var(--unit) * 683); }

.look-section--03 .collage-03-a { left: calc(var(--unit) * 64); top: 0; width: calc(var(--unit) * 512); height: calc(var(--unit) * 683); }
.look-section--03 .collage-03-b { left: calc(var(--unit) * 640); top: calc(var(--unit) * 64); width: calc(var(--unit) * 512); height: calc(var(--unit) * 683); }
.look-section--03 .collage-03-c { left: calc(var(--unit) * 272); top: calc(var(--unit) * 875); width: calc(var(--unit) * 320); height: calc(var(--unit) * 400); }
.look-section--03 .collage-03-d { left: calc(var(--unit) * 624); top: calc(var(--unit) * 875); width: calc(var(--unit) * 320); height: calc(var(--unit) * 400); }
.look-section--03 .collage-03-e { left: calc(var(--unit) * 64); top: calc(var(--unit) * 1403); width: calc(var(--unit) * 512); height: calc(var(--unit) * 683); }
.look-section--03 .collage-03-f { left: calc(var(--unit) * 704); top: calc(var(--unit) * 1590); width: calc(var(--unit) * 320); height: calc(var(--unit) * 400); }
.look-section--03 .collage-03-g { left: calc(var(--unit) * 800); top: calc(var(--unit) * 2022); width: calc(var(--unit) * 320); height: calc(var(--unit) * 400); }

.look-section--04 .collage-04-a { left: calc(var(--unit) * 704); top: 0; width: calc(var(--unit) * 512); height: calc(var(--unit) * 683); }
.look-section--04 .collage-04-b { left: calc(var(--unit) * 256); top: calc(var(--unit) * 64); width: calc(var(--unit) * 384); height: calc(var(--unit) * 512); }
.look-section--04 .collage-04-c { left: calc(var(--unit) * 2); top: calc(var(--unit) * 267); width: calc(var(--unit) * 320); height: calc(var(--unit) * 480); }
.look-section--04 .collage-04-d { left: calc(var(--unit) * 160); top: calc(var(--unit) * 875); width: calc(var(--unit) * 289); height: calc(var(--unit) * 361); }
.look-section--04 .collage-04-e { left: calc(var(--unit) * 463); top: calc(var(--unit) * 875); width: calc(var(--unit) * 289); height: calc(var(--unit) * 361); }
.look-section--04 .collage-04-f { left: calc(var(--unit) * 767); top: calc(var(--unit) * 875); width: calc(var(--unit) * 289); height: calc(var(--unit) * 361); }
.look-section--04 .collage-04-g { left: calc(var(--unit) * 352); top: calc(var(--unit) * 1364); width: calc(var(--unit) * 512); height: calc(var(--unit) * 683); }

/* -------------------------------------------------
   Video / YouTube section
   ------------------------------------------------- */
.video {
  padding: calc(var(--unit) * 120) 0 calc(var(--unit) * 96);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--unit) * 24);
}
.video-heading {
  font-family: 'obviously-wide', sans-serif;
  font-weight: 500;
  font-size: calc(var(--unit) * 40);
  line-height: calc(var(--unit) * 32);
  color: #f7ff86;
}
.video-subheading {
  font-family: 'Hiragino Kaku Gothic Pro', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: calc(var(--unit) * 18);
  line-height: normal;
  color: #000;
  margin-bottom: calc(var(--unit) * 40);
}
.video-row {
  display: flex;
  gap: calc(var(--unit) * 64);
  align-items: flex-start;
}
.video-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--unit) * 24);
  align-items: center;
  width: calc(var(--unit) * 576);
}
.video-card__thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d9d9d9;
  height: calc(var(--unit) * 324);
  width: 100%;
  overflow: hidden;
}
.video-card__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-card__soon {
  font-family: 'obviously-wide', sans-serif;
  font-weight: 500;
  font-size: calc(var(--unit) * 24);
  letter-spacing: calc(var(--unit) * 1);
  color: #999;
}
.video-card__caption {
  width: calc(var(--unit) * 512);
  font-family: 'Hiragino Kaku Gothic Pro', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: calc(var(--unit) * 15);
  line-height: calc(var(--unit) * 32);
  color: #000;
}

/* -------------------------------------------------
   Footer: closing photo band with a text overlay (same repeating
   strip as the hero, plus a dark scrim so the yellow text stays
   legible over the photo), then a plain bottom bar with the
   ARKnets logo and copyright.
   ------------------------------------------------- */
.foot {
  padding-top: calc(var(--unit) * 24);
}
.foot__band {
  position: relative;
}
.foot__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.foot__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--unit) * 14);
  text-align: center;
  color: #f7ff86;
  font-family: 'obviously-wide', sans-serif;
}
.foot__title {
  font-weight: 500;
  font-size: calc(var(--unit) * 56);
  line-height: 1;
  letter-spacing: calc(var(--unit) * 1);
  text-transform: uppercase;
}
.foot__subtitle {
  font-weight: 300;
  font-size: calc(var(--unit) * 18);
  letter-spacing: calc(var(--unit) * 3);
  text-transform: uppercase;
}
.foot__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--unit) * 16);
  padding: calc(var(--unit) * 48) 0;
  background: #e3e3e3;
}
.foot__bottom-logo {
  display: block;
  width: auto;
  height: calc(var(--unit) * 24);
}
.foot__copyright {
  font-family: 'Inter', sans-serif;
  font-size: calc(var(--unit) * 12);
  letter-spacing: calc(var(--unit) * 0.5);
  color: #999;
}

/* -------------------------------------------------
   Back-to-top: fixed bottom-right, hidden until script.js's
   hero IntersectionObserver says the hero has scrolled out of
   view (same signal that reveals the fixed header).
   ------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(170, 170, 170, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  opacity: 0.8;
}
.back-to-top svg {
  width: 18px;
  height: 18px;
  fill: #f7ff86;
}

/* -------------------------------------------------
   Scroll fade-in
   Progressive enhancement: elements only start hidden once
   script.js has confirmed it's running (adds .js-enabled to
   <html>) and observes them; without JS, or with reduced
   motion requested, everything just stays fully visible.
   ------------------------------------------------- */
.js-enabled .fade-in {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-enabled .fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   SP (smartphone) responsive layer
   No mobile mockup was supplied — this reflows the same
   content/DOM into a standard single-column mobile pattern:
   image-then-copy stacking, a 2-col grid for the detail
   collage, and simplified hero/footer banners. Everything
   above this block stays the desktop (>768px) design as-is;
   these rules only override what needs to change for SP.

   The very first thing this block does is reset --unit back
   to a flat 1px. That's what keeps this whole layer safe from
   the fluid scaling added above: every desktop rule that ISN'T
   explicitly overridden below still falls through the cascade,
   but now resolves to its original fixed px size (N * 1px)
   instead of the shrunk fluid value — so none of the mobile
   typography/spacing needs to be re-specified just because the
   desktop rules became fluid.
   ========================================================= */
@media (max-width: 768px) {

  :root {
    --unit: 1px;
  }

  body { background: #e3e3e3; }

  .page {
    width: 100%;
  }

  /* Hero + footer band: on SP, show a single non-repeating photo
     (cropped to cover, centered) instead of the tiled PC pattern.
     Sized to the photo's own native 1200×1500 ratio rather than a
     short fixed band, so the full portrait shot reads clearly. */
  .strip-row {
    height: auto;
    aspect-ratio: 1200 / 1500;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  /* Hero: the fluid --unit-based sizes above would render at their
     full 1728px-reference px value here (see the SP reset at the top
     of this block), so the overlay text gets its own vw-based scale
     instead — smooth across phone widths without another breakpoint. */
  .hero__overlay {
    padding: 5vw 0;
  }
  .hero__inner {
    padding: 0 5vw;
  }
  .hero__season,
  .hero__tag {
    font-size: clamp(10px, 2.8vw, 14px);
  }
  .hero__title-main {
    font-size: clamp(44px, 15vw, 96px);
    letter-spacing: 0;
  }
  .hero__title-sub {
    font-size: clamp(20px, 5.5vw, 32px);
    letter-spacing: clamp(4px, 1.5vw, 8px);
    padding-left: 0;
  }
  .hero__brands {
    font-size: clamp(9px, 2.6vw, 13px);
  }

  /* Footer overlay + bottom bar */
  .foot__overlay {
    gap: 10px;
    padding: 0 24px;
  }
  .foot__title {
    font-size: clamp(28px, 9vw, 48px);
    letter-spacing: 0;
  }
  .foot__subtitle {
    font-size: clamp(11px, 3vw, 15px);
    letter-spacing: clamp(1px, 0.8vw, 3px);
  }
  .foot__bottom {
    gap: 12px;
    padding: 32px 24px;
  }
  .foot__bottom-logo {
    height: 20px;
  }
  .foot__copyright {
    font-size: 11px;
    text-align: center;
  }

  /* Intro */
  .intro {
    width: 100%;
    padding: 0 24px;
    margin: 48px auto 64px;
    gap: 32px;
  }
  .intro__title {
    font-size: 20px;
    white-space: normal;
  }
  .intro__subtitle {
    white-space: normal;
  }

  /* Look sections */
  .look-section {
    padding: 64px 0;
    scroll-margin-top: 68px;
  }
  .look-section__inner {
    padding: 0 24px;
  }

  .look-intro {
    flex-direction: column;
    gap: 32px;
  }
  /* Always lead with the photo on mobile, regardless of which
     side it sits on in the desktop two-column layout. */
  .look-photo {
    order: 1;
  }
  .look-text {
    order: 2;
  }

  .look-photo,
  .look-text {
    width: 100%;
    height: auto;
  }
  .look-photo {
    aspect-ratio: 608 / 811;
  }

  .look-desc {
    gap: 40px;
  }


  .spec-list li + li {
    margin-top: 16px;
  }

  .numeral {
    font-size: 32px;
    letter-spacing: 1.6px;
  }
  .brand-logo--01 { width: 170px; height: 19px; }
  .brand-logo--02 { width: 90px; height: 23px; }
  .brand-logo--03 { width: 132px; height: 26px; }
  .brand-logo--04 { width: 98px; height: 23px; }

  .stockists {
    width: 100%;
    margin: 24px 0 0;
  }

  /* Detail collage: give up the art-directed overlap and lay
     the same photos out in a plain 2-column grid. The !important
     overrides here intentionally beat the many per-photo desktop
     coordinate rules (.look-section--0X .collage-0X-x) rather
     than repeating every one of them at this breakpoint. */
  .detail-collage {
    position: static;
    width: 100%;
    height: auto;
    margin: 32px auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .detail-collage__item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4;
  }

  .look-row {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    margin-top: 48px;
  }
  .look-row__img {
    width: 100%;
    height: auto;
    aspect-ratio: 534 / 854;
  }
  .spec-list {
    width: 100%;
  }

  /* Video */
  .video {
    padding: 64px 24px 48px;
  }
  .video-heading {
    font-size: 28px;
  }
  .video-row {
    flex-direction: column;
    gap: 32px;
    width: 100%;
  }
  .video-card {
    width: 100%;
  }
  .video-card__thumb {
    height: 56vw;
    max-height: 260px;
  }
  .video-card__caption {
    width: 100%;
  }

  /* Detail-photo lightbox: tap a detail-collage photo to view it
     enlarged. SP-only — script.js only ever opens it when
     matchMedia('(max-width: 768px)') is true, so this styling
     lives here too rather than in the shared desktop rules. */
  .lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
  }
  .lightbox.is-open {
    opacity: 1;
    visibility: visible;
  }
  .lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }
  .lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }

  .detail-collage__item img {
    cursor: zoom-in;
  }

  /* Fixed header: the nav collapses behind a hamburger button that
     drops down the brand links + ARKnets logo as a panel. */
  .site-header__inner {
    padding: 16px 24px;
  }
  .site-header__logo img {
    height: 20px;
  }
  .site-header__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
  .site-header__burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #000;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .site-header__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .site-header__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .site-header__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  /* The header bar itself has no background normally (removed per
     request); give it one only while the dropdown nav is open, so
     the logo/burger row doesn't stay see-through above the panel.
     Translucent + backdrop-blur (frosted glass) instead of a flat
     fill, so page content still shows through, softened. */
  .site-header.nav-open {
    background: rgba(170, 170, 170, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .site-header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    background: rgba(170, 170, 170, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 24px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }
  .site-header__nav.is-open {
    display: flex;
  }
  .site-header__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .site-header__links a {
    font-size: 15px;
  }
  .site-header__arknets img {
    height: 18px;
  }
}