/* ------------------------------------------------------------------
   Components: header, nav, hero, rings, discs, frames, tiles, developers, footer
   ------------------------------------------------------------------ */

/* skip link */
.skip {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--gutter);
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--c-gold);
  color: var(--c-charcoal);
  font-weight: var(--fw-medium);
  border-radius: var(--radius);
}
.skip:focus {
  inset-block-start: 0.5rem;
}

/* ---------------- header: logo (start) · centered nav · button (end) ---------------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  height: var(--header-h);
  color: var(--c-paper);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.site-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: var(--c-hair-dark);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(44, 44, 44, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.site-header.is-scrolled::after {
  opacity: 1;
}
.site-header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--space-4);
}
.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  color: var(--c-paper);
}
.brand svg {
  height: 2.75rem;
  width: auto;
}
.site-header__end {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--space-3);
}

.nav ul {
  display: flex;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  position: relative;
  display: inline-block;
  padding-block: 0.4rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  letter-spacing: 0.01em;
  color: var(--c-paper);
}
.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav a:hover::after,
.nav a:focus-visible::after,
.nav a.is-active::after {
  transform: scaleX(1);
}

/* the one button on the site */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.5rem;
  border: 1px solid var(--c-gold);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-gold);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover,
.btn:focus-visible {
  background: var(--c-gold);
  color: var(--c-charcoal);
}

.nav-toggle {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  z-index: 60;
}
.nav-toggle span {
  position: absolute;
  inset-inline: 0.5rem;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-toggle span:nth-child(1) { inset-block-start: 1.15rem; }
.nav-toggle span:nth-child(2) { inset-block-start: 1.6rem; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.225rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-0.225rem) rotate(-45deg); }

/* mobile overlay menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
  overflow: hidden;
  background: var(--c-charcoal);
  color: var(--c-paper);
  padding-block: calc(var(--header-h) + var(--space-5)) var(--space-5);
}
.menu.is-open {
  display: block;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.menu a {
  display: block;
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  line-height: 1.2;
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--c-hair-dark);
}
.menu__rings {
  position: absolute;
  inset-block-end: -18vw;
  inset-inline-end: -22vw;
  width: 78vw;
  opacity: 0.7;
}
body.menu-open {
  overflow: hidden;
}

/* ---------------- hero ---------------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  max-height: 1200px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--c-charcoal);
}
.hero__media,
.hero__media picture,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__media img {
  object-fit: cover;
  object-position: 50% 42%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(44, 44, 44, 0.3) 0%, rgba(44, 44, 44, 0) 28%, rgba(44, 44, 44, 0) 62%, rgba(44, 44, 44, 0.6) 100%);
  pointer-events: none;
}
.hero__rings {
  position: absolute;
  inset-block-start: -14%;
  left: 40%;
  width: min(88vh, 62vw);
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
}
/* the cover lock-up lives on the left half of the frame, exactly like the printed cover */
.hero__title {
  direction: ltr;
  margin-right: auto;
  margin-left: 0;
  color: var(--c-charcoal);
  text-align: left;
  transform: translateY(-8vh);
}
.hero__title-a {
  display: block;
  font-size: var(--fs-display-sm);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0.005em;
}
.hero__title-b {
  display: block;
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 0.95;
  letter-spacing: -0.005em;
  margin-inline-start: 0.55em;
}
.hero__cue {
  position: absolute;
  inset-block-end: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(to bottom, var(--c-gold), transparent);
  overflow: hidden;
}
.hero__cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-paper);
  transform: translateY(-100%);
  animation: cue 2.4s var(--ease-in-out) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* ---------------- concentric rings (brand motif) ---------------- */
.rings {
  display: block;
  color: var(--c-gold);
  pointer-events: none;
}
.rings circle {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--sw, 2.5);
  vector-effect: non-scaling-stroke;
}
.rings--gold { color: var(--c-gold); }
.rings--paper { color: var(--c-paper); }
.rings--ink { color: var(--c-charcoal); }
.rings--rose { color: var(--c-rose); }

/* ---------------- solid half-discs (spreads 3, 6, 11, 13) ---------------- */
.disc {
  position: absolute;
  aspect-ratio: 1 / 2;
  pointer-events: none;
}
.disc--gold { background: var(--c-gold); }
.disc--ink { background: var(--c-charcoal); }
/* sits on the seam of the panorama band, bleeding off the right edge */
.disc--band {
  right: 0;
  bottom: 0;
  translate: 0 50%;
  width: clamp(5.5rem, 9vw, 9rem);
  border-start-start-radius: 100vmax;
  border-end-start-radius: 100vmax;
  --disc-from: 100%;
  z-index: 2;
}

/* ---------------- framed photo with rings ---------------- */
.frame {
  position: relative;
}
.frame__rings {
  position: absolute;
  width: 62%;
  z-index: 2;
}
.frame__rings--top-start {           /* RTL start = right; rings overlap onto the text column side */
  inset-block-start: -22%;
  inset-inline-start: -16%;
}
.frame__rings--top-end {
  inset-block-start: -12%;
  inset-inline-end: -14%;
}
.frame__rings--bottom-end {
  inset-block-end: -10%;
  inset-inline-end: -10%;
  width: 62%;
}
/* spread 3: dark half-disc pinned to the photo's right edge */
.frame__disc {
  inset-block-start: 58%;
  right: 0;
  width: 18%;
  transform: translateY(-50%);
  opacity: 0.88;
  border-start-start-radius: 100vmax;
  border-end-start-radius: 100vmax;
  z-index: 1;
  --disc-from: 100%;
}
.js .frame__disc { transform: translate(var(--disc-from, 100%), -50%); }
.js .frame__disc.is-in { transform: translate(0, -50%); }

/* ---------------- spread 11: photo inside a tall arc ---------------- */
.arc {
  position: relative;
  padding-inline-start: 18%;   /* room for the rings to breathe on the cream side */
}
.arc__clip {
  clip-path: inset(0 0 0 44%);            /* left 44 % is cream (physical, like the print) */
}
.arc__clip .media {
  border-radius: 0;
  background: transparent;
}
.arc__clip picture {
  display: block;
  height: 100%;
  clip-path: ellipse(72% 50% at 44% 50%);
}
.arc__clip picture img {
  height: 100%;
}
.arc__rings {
  position: absolute;
  left: 20%;
  top: 8%;
  width: 46%;
  z-index: 2;
}
.arc__disc {
  position: absolute;
  left: 22%;
  top: 38%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(114, 114, 114, 0.7);
  z-index: 1;
  pointer-events: none;
}

/* ---------------- circle tile strip (spread 10) ---------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-5);
  padding-inline: var(--space-3);
  margin-block: var(--space-7) 0;
  margin-inline: 0;
  padding-block: 0;
  list-style: none;
}
.tiles .media--circle {
  outline-offset: 8px;
}

/* ---------------- spread 4: four ring circles ---------------- */
.ring-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  list-style: none;
  margin: var(--space-7) auto 0;
  padding: 0;
  max-width: var(--w-narrow);
}
.ring-list__item {
  text-align: center;
}
.ring-list__circle {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: min(100%, 15rem);
  margin: 10px auto var(--space-4);
  padding: 14%;
  border-radius: 50%;
  border: 1.5px solid var(--c-gold);
  outline: 1px solid var(--c-gold);
  outline-offset: 8px;
}
.ring-list__circle p {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-ink);
}
.ring-list__circle strong {
  font-weight: var(--fw-bold);
}
.ring-list__label {
  font-weight: var(--fw-bold);
  line-height: 1.4;
  max-width: 14rem;
  margin-inline: auto;
}

/* ---------------- site plan ---------------- */
.plan {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  mix-blend-mode: multiply;   /* white paper of the drawing sinks into the cream ground */
}
.plan img {
  width: 100%;
  height: auto;
}

/* ---------------- developers (spread 12): centered, narrow ---------------- */
.section-developers {
  overflow: hidden;
}
.section-developers__rings {
  position: absolute;
  inset-block-start: -12%;
  inset-inline-start: -8%;
  width: min(44vw, 40rem);
  opacity: 0.55;
}
.dev-intro {
  text-align: center;
  margin-block-end: var(--space-7);
  position: relative;
}
.dev-intro .prose {
  max-width: 40rem;
}
.dev {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.dev__logo {
  display: grid;
  place-items: center;
  width: clamp(9rem, 12vw, 11rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--c-gold);
  outline: 1px solid var(--c-gold-soft);
  outline-offset: 7px;
  color: var(--c-paper);
  margin-block: 8px var(--space-5);
}
.dev__logo svg,
.dev__logo img {
  width: 60%;
  height: auto;
}
.dev__logo img {
  width: 66%;
}
.dev .rule {
  width: 3.5rem;
  background: var(--c-gold);
  margin-block-end: var(--space-3);
}
.dev p {
  max-width: 30rem;
}
.dev p + p {
  margin-block-start: 1em;
}

/* short gold accent rule (spread 6) */
.rule--accent {
  width: 3.5rem;
  background: var(--c-gold);
  margin-block: var(--space-4);
}

/* ---------------- closing + footer ---------------- */
.closing {
  position: relative;
  overflow: hidden;
}
.closing .bleed {
  aspect-ratio: 21 / 9;
}
.closing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(44, 44, 44, 0.1) 0%, rgba(44, 44, 44, 0) 40%, rgba(44, 44, 44, 0.85) 100%);
  pointer-events: none;
}
.closing__rings {
  position: absolute;
  inset-block-start: -34%;
  right: 6%;
  width: min(90vh, 50vw);
  z-index: 2;
}

.footer {
  text-align: center;
  padding-block: var(--space-7) var(--space-5);
}
.footer__logo {
  display: inline-flex;
  color: var(--c-paper);
}
.footer__logo svg {
  height: clamp(3.5rem, 6vw, 5rem);
  width: auto;
}
.footer__motif {
  width: min(22rem, 64vw);
  margin: var(--space-6) auto;
  color: var(--c-paper);
}
.partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  color: var(--c-paper);
  list-style: none;
  margin: 0;
  padding: 0;
}
.partners svg,
.partners img {
  height: 2.1rem;
  width: auto;
  opacity: 0.92;
}
.partners img {
  height: 2.3rem;
}
.footer .rule {
  max-width: 24rem;
  margin: var(--space-6) auto var(--space-4);
}
.footer__note {
  font-size: var(--fs-small);
  color: var(--text-soft);
  letter-spacing: 0.02em;
}

/* ---------------- responsive ---------------- */
@media (max-width: 1023px) {
  .site-header__inner {
    grid-template-columns: auto 1fr;
  }
  .nav {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
  .site-header__end .btn {
    min-height: 2.5rem;
    padding: 0 1.1rem;
  }
  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
    padding-inline: var(--space-2);
  }
  .ring-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 34rem;
  }
  .frame__rings {
    width: 50%;
  }
  .frame__rings--top-start { inset-block-start: -14%; inset-inline-start: -8%; }
  .frame__rings--top-end { inset-block-start: -12%; inset-inline-end: -10%; }
  .frame__rings--bottom-end { inset-block-end: -14%; inset-inline-end: -8%; width: 54%; }
  .arc {
    padding-inline-start: 10%;
  }
  .section-developers__rings {
    width: 60vw;
    inset-block-start: -8%;
    inset-inline-start: -20%;
  }
  .dev-intro {
    margin-block-end: var(--space-6);
  }
}

@media (max-width: 767px) {
  .brand svg {
    height: 2.25rem;
  }
  .site-header__inner {
    column-gap: var(--space-2);
  }
  .site-header__end {
    gap: var(--space-1);
  }
  .site-header__end .btn {
    font-size: 0.8125rem;
    padding: 0 0.9rem;
  }
  .hero {
    height: min(100svh, 130vw);
    min-height: 520px;
  }
  .hero__media img {
    object-position: 34% 50%;
  }
  .hero__rings {
    left: 22%;
    width: 96vw;
    inset-block-start: -8%;
  }
  .hero__title {
    transform: translateY(-6vh);
  }
  .hero__cue {
    inset-block-end: var(--space-3);
    height: 2.75rem;
  }
  .disc--band {
    width: 3.5rem;
    bottom: 0;
    translate: 0 0;      /* stays inside the band so it never touches the copy below */
  }
  .tiles {
    gap: var(--space-4) var(--space-3);
    margin-block-start: var(--space-5);
  }
  .ring-list {
    gap: var(--space-5) var(--space-3);
    margin-block-start: var(--space-6);
  }
  .ring-list__circle {
    width: min(100%, 11rem);
    outline-offset: 6px;
  }
  .ring-list__circle p {
    font-size: 0.75rem;
    line-height: 1.45;
  }
  .ring-list__label {
    font-size: var(--fs-small);
  }
  .arc {
    padding-inline-start: 4%;
  }
  .closing .bleed {
    aspect-ratio: 4 / 3;
  }
  .closing__rings {
    right: -14%;
    width: 80vw;
    inset-block-start: -8%;
  }
  .partners {
    gap: var(--space-4) var(--space-5);
  }
  .partners svg,
  .partners img {
    height: 1.7rem;
  }
  .partners img {
    height: 1.9rem;
  }
}