/* ===== base / reset ===== */
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background:#FFFFFF;
  overflow-x:hidden;
  font-family:"Inter", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ===== sticky top nav ===== */
.site-nav{
  position:sticky;
  top:0;
  z-index:100;
  background:#fff;
  border-bottom:0.5px solid rgba(0,0,0,.12);
}
.site-nav__inner{
  max-width:1920px;
  margin:0 auto;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(20px, 4vw, 72px);
}
.site-nav__brand{
  font-family:"Instrument Serif", serif;
  font-size:clamp(22px, 2vw, 32px);
  color:rgba(0,0,0,.95);
  text-decoration:none;
  white-space:nowrap;
}
.site-nav__links{ display:flex; align-items:center; gap:clamp(18px, 3vw, 40px); }
.site-nav__link{
  font-size:clamp(15px, 1.1vw, 19px);
  color:rgba(0,0,0,.6);
  text-decoration:none;
  transition:color .15s ease;
}
.site-nav__link:hover{ color:rgba(0,0,0,.95); }
.site-nav__link.is-active{ color:rgba(0,0,0,.95); border-bottom:2px solid #EBE248; padding-bottom:3px; }
.site-nav__cta{
  background:#EBE248;
  color:rgba(0,0,0,.78);
  font-weight:600;
  font-size:clamp(14px, 1vw, 18px);
  padding:12px 22px;
  border-radius:0;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}

/* ===== contact buttons: darker shape slides in from the side on hover ===== */
.contact-slide{ position:relative; overflow:hidden; }
.contact-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--slide, rgba(0,0,0,.22));
  transform:translateX(-101%);
  transition:transform .4s cubic-bezier(.65,.05,.36,1);
  z-index:0;
}
.contact-slide:hover::before{ transform:translateX(0); }
.cs-label{ position:relative; z-index:1; }

/* ===== closing section: 1:1 scaled canvases (CTA home-only + footer both pages) ===== */
.cl-wrap{ overflow:hidden; }
.closing-stage{ transform-origin:top left; }
.cl-email:hover{ color:#FFFFFF !important; }

/* light variant used on the portfolio page (overrides inline styles) */
.closing.is-light .cl-footer{ background:#EDEDED !important; }
.closing.is-light .cl-dim{ color:rgba(0,0,0,.55) !important; }
.closing.is-light .cl-email:hover{ color:#000 !important; }

/* ===== portfolio gallery (merch images at varied sizes) ===== */
#portfolioView{
  display:none;
  max-width:1920px;
  margin:0 auto;
  padding:clamp(20px,3vw,48px) clamp(16px,4vw,72px) 90px;
}
.pf-gallery{
  column-count:3;
  column-gap:16px;
}
.pf-item{
  position:relative;
  break-inside:avoid;
  margin:0 0 16px;
  border-radius:14px;
  overflow:hidden;
  background:#f1efe9;
  max-height:520px;            /* condense the tall ones, never enlarge the short ones */
  animation:pfIn .6s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes pfIn{
  from{ opacity:0; transform:translateY(22px); }
  to  { opacity:1; transform:translateY(0); }
}
.pf-base{
  position:relative;
  z-index:2;
  width:100%;
  height:auto;                 /* native aspect ratio */
  display:block;
  object-fit:cover;
  transition:opacity .25s ease;
}
.pf-hover{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.pf-item:hover .pf-base{ opacity:0; }   /* reveal the hover image underneath */

@media (max-width:600px){ .pf-gallery{ column-count:2; } }

/* ===== scale the exact 1920×3524 canvas to fit the viewport ===== */
.scale-wrap{
  position:relative;
  width:100%;
  overflow:hidden;
}
.stage{
  transform-origin: top left;
}

/* ===== product showcase marquee (exact 356×352 grey tiles, now moving) ===== */
.marquee__track{
  display:flex;
  gap:63px;              /* 356 tile + 63 gap = 419 pitch, matching the layout */
  width:max-content;
  height:100%;
  align-items:center;
  animation: marquee 32s linear infinite;
  animation-duration: var(--dur, 32s);
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.mcard{
  flex:0 0 auto;
  width:356px;
  height:352px;
  background:rgba(217, 217, 217, 0.4);
  background-image:var(--img);
  background-size:cover;
  background-position:center;
  transition:background-image 0s;
}
.mcard:hover{ background-image:var(--img-h); }
@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-1 * var(--loop, 3352px))); }
}

/* ===== green block with wavy top & bottom edges cut into the rectangle =====
   Period doubled (140 -> 280px tile) = about half the frequency.
   Three mask layers (union): wavy top band, wavy bottom band, solid middle. */
.green-box{
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='28' viewBox='0 0 280 28'%3E%3Cpath d='M0,14 C46,7 94,7 140,14 C186,21 234,21 280,14 L280,28 L0,28 Z' fill='%23000'/%3E%3C/svg%3E") 0 top / 280px 28px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='28' viewBox='0 0 280 28'%3E%3Cpath d='M0,14 C46,21 94,21 140,14 C186,7 234,7 280,14 L280,0 L0,0 Z' fill='%23000'/%3E%3C/svg%3E") 140px bottom / 280px 28px repeat-x,
    linear-gradient(#000,#000) 0 28px / 100% calc(100% - 56px) no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='28' viewBox='0 0 280 28'%3E%3Cpath d='M0,14 C46,7 94,7 140,14 C186,21 234,21 280,14 L280,28 L0,28 Z' fill='%23000'/%3E%3C/svg%3E") 0 top / 280px 28px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='28' viewBox='0 0 280 28'%3E%3Cpath d='M0,14 C46,21 94,21 140,14 C186,7 234,7 280,14 L280,0 L0,0 Z' fill='%23000'/%3E%3C/svg%3E") 140px bottom / 280px 28px repeat-x,
    linear-gradient(#000,#000) 0 28px / 100% calc(100% - 56px) no-repeat;
}

/* ===== bold blocky arrow icon (CTA buttons + carousel) ===== */
.arrow-ico{ display:block; }
.arrow-ico path{
  fill:none;
  stroke:currentColor;
  stroke-width:15;
  stroke-linecap:square;
  stroke-linejoin:miter;
}
.arrow-ico--left{ transform:scaleX(-1); }

/* CTA button layout: text + bold arrow on one row */
.cta-text{
  flex-direction:row !important;
  align-items:center;
  justify-content:center;
  gap:0;
}
/* text-sized, lighter arrow tucked right next to the text (matches reference) */
.cta-text .cta-arrow{ width:56px; height:66px; flex:0 0 auto; margin-left:-4px; }
.cta-text .cta-arrow path{ stroke-width:13; }

/* ===== Premium Storefronts carousel (exact 1416×626 frame) ===== */
.sf-track{
  display:flex;
  height:100%;
  transition:transform .5s cubic-bezier(.65,.05,.36,1);
}
.sf-slide{
  flex:0 0 100%;
  height:100%;
  overflow:hidden;
}
.sf-img{ width:100%; height:100%; object-fit:cover; display:block; }
.sf-placeholder{ display:flex; align-items:center; justify-content:center; }
.sf-label{
  color:rgba(255,255,255,.92);
  font-family:"Instrument Serif", serif;
  font-size:40px;
}
.sf-arrow{
  width:54px; height:54px;
  border:none; border-radius:50%;
  background:#111; color:#fff;
  opacity:.5;
  display:grid; place-items:center;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, opacity .18s ease;
}
.sf-arrow:hover{ background:#000; opacity:1; transform:scale(1.08); }
.sf-arrow:active{ transform:scale(.96); }

.sf-dots{
  display:flex;
  justify-content:center;
  gap:16px;
}
.sf-dot{
  width:16px; height:16px; border-radius:50%;
  border:none; padding:0; cursor:pointer;
  background:rgba(0,0,0,.18);
  transition:background .2s ease, transform .2s ease;
}
.sf-dot:hover{ background:rgba(0,0,0,.4); }
.sf-dot.is-active{ background:rgba(0,0,0,.95); transform:scale(1.25); }

/* ===== opening fade-in (hero) ===== */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(26px); }
  to  { opacity:1; transform:translateY(0); }
}
.reveal{ opacity:0; animation:fadeUp .85s cubic-bezier(.22,.61,.36,1) both; }
.reveal-1{ animation-delay:.05s; }
.reveal-2{ animation-delay:.20s; }
.reveal-3{ animation-delay:.35s; }
.reveal-4{ animation-delay:.50s; }

@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
  .sf-track{ transition:none; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; animation:none; }
  .pf-item{ animation:none; }
  .sf-slide.is-pixelating{ animation:none; }
}