/* ============================================================
   The Wallpaper Project — @peterpandev
   black · gold #D4B060 · off-white #F5F2EC
   ============================================================ */

:root{
  --black:#000;
  --gold:#D4B060;
  --ink:#F5F2EC;

  --hair:rgba(212,176,96,.4);      /* 1px gold hairline, 40% */
  --hair-soft:rgba(212,176,96,.18);
  --dim:rgba(245,242,236,.52);
  --dimmer:rgba(245,242,236,.32);

  --r:22px;                         /* card radius */
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --serif:"Cormorant Garamond","Cormorant fallback",ui-serif,Georgia,"Times New Roman",serif;

  --gut:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

/* Metric-matched fallback for Cormorant Garamond. Without this the webfont
   swap resizes the headline and nudges the whole hero — measured as the only
   source of layout shift on this page. These adjust values make the fallback
   occupy near-identical space, so the swap is invisible. */
@font-face{
  font-family:"Cormorant fallback";
  font-style:normal;
  src:local("Times New Roman"),local("Times");
  size-adjust:96.5%;   /* measured: matches Cormorant's advance width */
  ascent-override:100%;
  descent-override:28%;
  line-gap-override:0%;
}
/* Italic needs its own face — a synthesized oblique has different metrics
   and was measurably growing the H1 by 3px when the real italic swapped in. */
@font-face{
  font-family:"Cormorant fallback";
  font-style:italic;
  src:local("Times New Roman Italic"),local("Times Italic");
  size-adjust:96.5%;
  ascent-override:100%;
  descent-override:28%;
  line-gap-override:0%;
}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--black);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.no-scroll{overflow:hidden}

img{max-width:100%;height:auto;display:block}

::selection{background:var(--gold);color:#000}

/* keep scrollbars from breaking the black — notably inside the modal */
html{scrollbar-color:rgba(212,176,96,.34) #000;scrollbar-width:thin}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:rgba(212,176,96,.3);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(212,176,96,.55)}

:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#000;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ── type ─────────────────────────────────────────────── */

.display{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.015em;
  margin:0;
  /* vmin keeps the headline in proportion on short laptop viewports */
  font-size:clamp(2.4rem,6.4vw + .2vh,4.9rem);
}
.display em{font-style:italic;color:var(--gold)}

.display-sm{font-size:clamp(2rem,4.6vw,3.3rem)}
.display-xs{font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.14}

.eyebrow{
  font-size:.66rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.6rem;
  font-weight:500;
}
.eyebrow-tight{margin:2rem 0 .9rem;color:var(--dimmer);letter-spacing:.24em}

.lede{
  max-width:44ch;
  color:var(--dim);
  font-size:clamp(.95rem,1.5vw,1.06rem);
  margin:1.6rem 0 0;
}
.lede-center{margin-left:auto;margin-right:auto;text-align:center}

.microcopy{font-size:.76rem;line-height:1.5;color:var(--dimmer);margin:1.1rem 0 0}

.dim{color:var(--dimmer)}

/* ── hairline rules ───────────────────────────────────── */

.rule{
  border:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--hair-soft) 18%,var(--hair-soft) 82%,transparent);
  margin:0;
}

/* ── buttons ──────────────────────────────────────────── */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-family:var(--sans);
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:1.05rem 2.1rem;
  border-radius:100px;
  border:1px solid var(--hair);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  text-decoration:none;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}

.btn-gold{background:var(--gold);color:#000;border-color:var(--gold);font-weight:600}
.btn-gold:hover{background:#e0c179;border-color:#e0c179}
.btn:active{transform:scale(.985)}
.btn-block{display:flex;width:100%;margin-top:1rem}

.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ── hero ─────────────────────────────────────────────── */

.hero{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(48px,7vh,88px) var(--gut) clamp(40px,6vh,72px);
  text-align:center;
  position:relative;
}

/* Faint gold bloom. It sits ABOVE the packshot (z-index 2) rather than behind
   it: the packshot is opaque black, so a bloom underneath would be occluded
   and its cut-out edge would read as a visible rectangle around the image. */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:radial-gradient(58% 44% at 50% 56%,rgba(212,176,96,.075),transparent 72%);
  pointer-events:none;
}

.hero-inner{
  position:relative;
  max-width:1180px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* hero lede is centered and narrower than the section default */
.hero .lede{margin-left:auto;margin-right:auto;max-width:38ch}

/* Width is the only constraint; aspect-ratio derives the height, so there is
   no fractional max-height for the browser to round between layout passes.
   The svh term keeps the 16:10 packshot inside the viewport so the CTA
   stays above the fold on short laptop screens. */
.packshot{
  display:block;
  margin:clamp(1.4rem,3.2vh,2.6rem) auto clamp(1.5rem,3.4vh,2.4rem);
  width:min(100%,1040px,calc(40svh * 2.2));
}
/* The packshot has ~28% dead black above and below the artwork (measured:
   content occupies y=280..765 of 1000). Cropping to 20:9 with object-fit
   removes it so the cards read large. The padding is pure black on a pure
   black page, so the crop is seamless. aspect-ratio still reserves an exact
   box, which is what keeps CLS at zero. */
/* No border-radius and no hard edge: the packshot's black must be
   indistinguishable from the page black so the cards read as floating. */
.packshot img{
  width:100%;
  height:auto;
  aspect-ratio:20/9;
  object-fit:cover;
}

/* Feather all four sides into the page. Guarded: a browser that supports
   mask-image but not mask-composite would stack the two gradients wrongly
   and clip the artwork. Without the mask the image still blends — its edges
   are already pure #000 — so the fallback is simply a harder boundary. */
@supports (mask-composite:intersect) or (-webkit-mask-composite:source-in){
  .packshot img{
    -webkit-mask-image:
      linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),
      linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),
      linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
    mask-composite:intersect;
  }
}

/* ── sections ─────────────────────────────────────────── */

.section{
  padding:clamp(80px,13vh,148px) var(--gut);
  max-width:1180px;
  margin:0 auto;
}
.section-center{text-align:center}
.section-center .btn{margin-top:2.2rem}

/* ── gallery grid ─────────────────────────────────────── */

.grid{
  list-style:none;
  margin:3rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(16px,2.4vw,28px);
}

.card{
  position:relative;
  width:100%;
  padding:0;
  background:transparent;
  border:1px solid var(--hair);
  border-radius:var(--r);
  overflow:hidden;
  cursor:pointer;
  display:block;
  color:inherit;
  text-align:left;
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.card:hover{border-color:rgba(212,176,96,.85);transform:scale(1.012)}

.card img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.card:hover img{transform:scale(1.035)}

.card-bar{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.25rem 1.15rem;
  border-top:1px solid var(--hair-soft);
}
.card-name{font-family:var(--serif);font-size:1.28rem;line-height:1.2}
.card-tag{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dimmer);white-space:nowrap}

/* ── footer ───────────────────────────────────────────── */

.footer{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem 2rem;
  flex-wrap:wrap;
  padding:2.4rem var(--gut);
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
}

.social{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem}
.social a{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--dim);
  text-decoration:none;
  transition:color .35s var(--ease);
}
.social a:hover{color:var(--gold)}

/* hairline icons, drawn in currentColor so they inherit the hover */
.social svg{
  width:17px;
  height:17px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  overflow:visible;
}
.social .handle{color:var(--dimmer);transition:color .35s var(--ease)}
.social a:hover .handle{color:var(--gold)}

/* ── overlays: modal + lightbox ───────────────────────── */

.overlay{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:var(--gut);
  opacity:0;
  transition:opacity .32s var(--ease);
}
.overlay[hidden]{display:none}
.overlay.in{opacity:1}

.overlay-scrim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.modal,.lightbox-panel{
  position:relative;
  width:100%;
  background:#000;
  border:1px solid var(--hair);
  border-radius:var(--r);
  transform:translateY(12px) scale(.985);
  transition:transform .38s var(--ease);
  max-height:calc(100svh - 2 * var(--gut));
  overflow-y:auto;
}
.overlay.in .modal,.overlay.in .lightbox-panel{transform:none}

.modal{max-width:466px;padding:clamp(1.9rem,4vw,2.6rem);text-align:center}
.modal .display-xs{text-wrap:balance}
.lightbox-panel{max-width:900px;overflow:hidden;display:flex;flex-direction:column}
/* image yields space so the three size buttons always stay visible */
.lightbox-panel img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  min-height:0;
  max-height:46svh;
}

.lightbox-meta{padding:clamp(1.3rem,3vw,1.9rem);border-top:1px solid var(--hair-soft)}
.lightbox-meta .eyebrow{margin:.6rem 0 1.5rem}

.close{
  position:absolute;
  top:.65rem;
  right:.85rem;
  z-index:2;
  width:38px;height:38px;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:var(--dim);
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  transition:color .3s var(--ease);
}
.close:hover{color:var(--gold)}

/* ── form ─────────────────────────────────────────────── */

#gate-form{margin-top:1.9rem}

#gate-form input{
  width:100%;
  padding:1rem 1.15rem;
  background:transparent;
  border:1px solid var(--hair-soft);
  border-radius:12px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:.95rem;
  text-align:center;
  transition:border-color .3s var(--ease);
}
#gate-form input + input{margin-top:.6rem}
#gate-form input::placeholder{color:var(--dimmer)}
#gate-form input:focus{outline:0;border-color:var(--hair)}
#gate-form input.invalid{border-color:#C4564A}

.field-error{
  color:#D9756A;
  font-size:.75rem;
  text-align:left;
  margin:.6rem 0 0;
}
.field-error[hidden]{display:none}

/* ── size buttons (locked / unlocked) ─────────────────── */

.sizes{display:grid;gap:.6rem}

.size{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  padding:.9rem 1.15rem;
  border:1px solid var(--hair-soft);
  border-radius:12px;
  background:transparent;
  color:var(--ink);
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  text-decoration:none;
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.size:hover{border-color:var(--hair)}

.size-state{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:.62rem;
  letter-spacing:.16em;
  color:var(--dimmer);
  white-space:nowrap;
}
.size.unlocked .size-state{color:var(--gold)}

.single-list{display:grid;gap:.6rem;text-align:left}
.single-group{border:1px solid var(--hair-soft);border-radius:12px;padding:.85rem 1.1rem}
.single-group h4{
  font-family:var(--serif);font-weight:400;font-size:1.05rem;margin:0 0 .5rem;
}
.single-group a{
  color:var(--dim);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  margin-right:1rem;
  border-bottom:1px solid var(--hair-soft);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.single-group a:hover{color:var(--gold);border-color:var(--gold)}

/* ── scroll reveal ────────────────────────────────────── */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.reveal.seen{opacity:1;transform:none}

/* ── reduced motion ───────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
  .card:hover{transform:none}
  .card:hover img{transform:none}
}