/* moonwatcher one-sheet — exact copy of the Illustrator artboard (1724.82 x 4442.16 pt).
   Desktop: every element is positioned in artboard units and the whole sheet scales with the
   viewport width (1 pt == 1 CSS px at 1725 px wide).  Mobile (< 1100 px): single column.
   Fonts: Adobe names first so a Typekit kit can be dropped in later; self-hosted fallbacks. */

@font-face { font-family: "Nautica"; src: url("../fonts/nautica.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-200.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-200-italic.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-200-var.woff2") format("woff2"); font-weight: 200; font-stretch: 62% 125%; font-display: swap; }

:root {
  --ink: #fff;
  --ground: #18181a;                 /* flat colour under the texture band (measured from the PDF render) */
  --tex-opacity: .13;
  --script: nautica, "Nautica", cursive;
  --serif: "hardcover-vf", "Newsreader", Georgia, serif;
  --sans: forma-djr-text, "Archivo", "Helvetica Neue", Arial, sans-serif;
  --W: 1724.82;                      /* artboard size in pt */
  --H: 4442.16;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--ground);
  font-family: var(--serif); font-weight: 200; font-variation-settings: "wght" 200;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
img, svg { display: block; }
figure, blockquote, p, h1, h2, h3, ul { margin: 0; padding: 0; }
ul { list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- the sheet */
.sheet {
  position: relative; width: 100%; max-width: 1725px; margin: 0 auto;
  container-type: inline-size; aspect-ratio: 1724.82 / 4442.16; overflow: hidden;
  background: var(--ground);
}
/* the grunge texture band (y 1282..3840) over the flat ground */
.tex {
  position: absolute; left: 0; width: 100%; top: calc(1282.08 * 100% / var(--H)); height: calc(2558.53 * 100% / var(--H));
  background-size: 100% 100%; opacity: var(--tex-opacity); pointer-events: none;
  /* at 13% opacity the 720px texture is indistinguishable from 1440px; image-set picks AVIF/WebP where supported */
  background-image: url("../img/texture-720.jpg");
  background-image: image-set(url("../img/texture-720.avif") type("image/avif"), url("../img/texture-720.webp") type("image/webp"), url("../img/texture-720.jpg") type("image/jpeg"));
}

/* positioned element: --x --y --w (--h) in pt */
.p { position: absolute; left: calc(var(--x) * 100% / var(--W)); top: calc(var(--y) * 100% / var(--H)); width: calc(var(--w) * 100% / var(--W)); }
.p.ra { left: auto; right: calc((var(--W) - var(--r)) * 100% / var(--W)); text-align: right; }

/* text — sizes in pt scale with the container */
.t { white-space: nowrap; font-size: calc(var(--fs) * 100cqw / var(--W)); line-height: calc(var(--lh) * 100cqw / var(--W)); }
/* fallback metrics tuned to the Adobe originals: Newsreader -0.01em ≈ Hardcover width, Archivo 83% ≈ Forma DJR Deck width */
.serif { font-family: var(--serif); font-weight: 200; font-variation-settings: "wght" 200; letter-spacing: -0.01em; }
.sans { font-family: var(--sans); font-weight: 200; font-stretch: 83%; text-transform: uppercase; }
.script { font-family: var(--script); font-weight: 400; }
em { font-style: italic; }
h2, h3 { font-size: inherit; font-weight: inherit; }

/* photos */
.photo { overflow: hidden; aspect-ratio: var(--w) / var(--h); }
.photo img, .photo picture { width: 100%; height: 100%; }
.photo img { object-fit: cover; object-position: 50% 50%; }
.orn { pointer-events: none; }
.orn img { width: 100%; height: auto; }
.icons a { position: absolute; left: calc(var(--x) * 100% / var(--W)); top: calc(var(--y) * 100% / var(--H)); width: calc(92.67 * 100% / var(--W)); aspect-ratio: 1; }
.icons a img { width: 100%; height: 100%; }
.icons a { transition: transform .15s ease; }
.icons a:hover, .thumb:hover { transform: scale(1.04); }
.thumb { transition: transform .15s ease; }
.logos img { width: 100%; height: auto; }

/* stacking: hero < texture band < photos < ornaments < text */
.photo.hero { z-index: 0; }
.tex { z-index: 1; }
.photo { z-index: 2; }
.orn, .centre-wrap { z-index: 3; }
.orn.under { z-index: 2; }            /* drawn beneath the centre photo in the artboard */
.t, .icons a, .logos, .qm, .title { z-index: 4; }

/* frame ornaments + nav are mobile-only */
.frame, .menu-btn, .menu { display: none; }

/* ---------------------------------------------------------------- mobile */
@media (max-width: 1099px) {
  :root { --title-h: 92px; --side: 28px; }
  html { scroll-padding-top: calc(var(--title-h) + 56px); }
  html, body { overflow-x: clip; }       /* the centre-photo frame swirl intentionally overhangs */
  body { background: var(--ground); }
  .sheet { aspect-ratio: auto; max-width: none; overflow: visible; display: flex; flex-direction: column; background: transparent; }
  .p { position: static; width: auto; left: auto; top: auto; right: auto; }
  .pb { display: block; height: .9em; }
  .p.ra { text-align: left; }
  .t { white-space: normal; font-size: 1rem; line-height: 1.45; }
  br.d { display: none; }
  .desk { display: none !important; }

  /* fixed texture behind everything, fixed swirl frame around the viewport */
  .tex { position: fixed; inset: 0; top: 0; height: 100%; width: 100%; z-index: -2; background-size: cover; background-position: center; }
  .frame { display: block; position: fixed; z-index: -1; pointer-events: none; opacity: .85; }   /* behind text, above the texture */
  .frame img { width: 100%; height: auto; }
  .frame.f-top { top: -2px; left: -2%; width: 104%; z-index: 3; }
  .frame.f-bottom { bottom: -2px; left: 8%; width: 84%; }
  .frame.f-left { left: -40vw; top: 44vh; width: 60vw; }
  .frame.f-right { right: -36vw; top: 60vh; width: 62vw; }

  /* title sticks at the top, section headers stick beneath it while their section scrolls */
  .site-head { position: sticky; top: 0; z-index: 5; height: var(--title-h); display: flex; align-items: center; justify-content: center;
               background: linear-gradient(to bottom, rgba(24,24,26,.98) 72%, rgba(24,24,26,0)); }
  .site-head .title { position: static; width: min(78vw, 420px); }
  .site-head .title img { width: 100%; height: auto; }
  section { position: relative; padding: 8px var(--side) 34px; }
  section > h2.t, section > h2.mob { position: sticky; top: var(--title-h); z-index: 4; padding: 6px 0 8px; margin: 0 calc(-1 * var(--side)) 10px; padding-left: var(--side);
               font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.15;
               background: linear-gradient(to bottom, rgba(24,24,26,.97) 88%, rgba(24,24,26,0)); }
  .t.serif, .t.sans { font-size: 1.02rem; line-height: 1.5; margin-bottom: .55em; }
  .t.sans.h3 { font-size: 1.15rem; margin-bottom: .1em; }
  .t.sans.small { font-size: .95rem; }
  .t.sans.q { font-size: 1.05rem; line-height: 1.6; }
  .group { margin-bottom: 1.1rem; }
  .group p { margin-bottom: 0; }

  .photo { position: relative; width: 100%; margin: 0 0 18px; aspect-ratio: var(--w) / var(--h); }
  .photo.hero { aspect-ratio: auto; height: 66vw; margin: calc(-1 * var(--title-h)) 0 0; z-index: 0;
                -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
  .photo.hero img { object-position: 50% 12%; }
  .photo.footer { aspect-ratio: auto; height: 70vw; margin: 12px 0 0;
                  -webkit-mask-image: linear-gradient(to top, #000 60%, transparent 100%); mask-image: linear-gradient(to top, #000 60%, transparent 100%); }
  .photo.footer img { object-position: 60% 50%; }
  .inset { width: min(100%, 420px); margin-inline: auto; }
  .centre-wrap { position: relative; width: min(100%, 360px); margin: 6px auto 24px; padding-top: 12%; }
  .centre-wrap .photo { margin: 0; }
  .centre-wrap .orn { position: absolute; left: -14%; top: 0; width: 128%; z-index: 1; }
  .thumb { display: block; margin-bottom: 10px; }
  .thumb .photo { margin-bottom: 8px; }
  .icons { position: relative; display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 8px; }
  .icons a { position: static; width: 56px; }
  .quote { padding: 8px var(--side) 30px; position: relative; }
  .quote .qm { display: inline-block; width: 14px; margin: 0 4px; vertical-align: super; }
  .quote .qm.close { margin-left: 6px; }
  .quote .attrib { text-align: right; font-size: 1.9rem; line-height: 1.2; margin-top: .3em; }
  .row { margin-bottom: .6em; }
  .row .sans { display: inline; font-size: .95rem; }
  .row .serif { display: inline; }
  .logos { width: min(80%, 320px); margin: 8px 0 0; }

  /* hamburger + full-screen section menu */
  .menu-btn { display: flex; position: fixed; top: 14px; right: 14px; z-index: 20; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%;
              background: rgba(24,24,26,.75); color: #fff; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(6px); }
  .menu-btn svg { width: 22px; height: 22px; }
  .menu-btn .x { display: none; }
  body.menu-open .menu-btn .bars { display: none; }
  body.menu-open .menu-btn .x { display: block; }
  .menu { position: fixed; inset: 0; z-index: 15; background: rgba(24,24,26,.96); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
          opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
  body.menu-open .menu { opacity: 1; visibility: visible; }
  body.menu-open { overflow: hidden; }
  .menu a { font-family: var(--script); font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.5; padding: 2px 20px; }
  .menu a:hover { text-decoration: underline; text-underline-offset: 6px; }
  .menu .menu-title { width: 60vw; max-width: 300px; margin-bottom: 22px; }
}
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) { .menu { transition: none; } }
@media (min-width: 1100px) { .mob { display: none !important; } }