/* Carvé & Crüz — the site.
   A banner across the top, a film behind the name, and the clothes below on a colour that the film
   melts into very gradually.
   html[data-film] picks the clips, html[data-look] their finish,
   html[data-ground] the colour behind the clothes. */

:root {
  /* behind the clothes (green by default) */
  --bg: #5cb270; --bg-deep: #47a05f; --fg: #0b1f13; --deep: #0f4a2c;
  --zone-light: rgba(216, 244, 214, .62); --zone-deep: rgba(8, 58, 32, .74); --zone-mid: rgba(52, 150, 88, .55);
  /* banner */
  --bar: rgba(248, 245, 238, .93); --nav-fg: #17191b; --bar-h: 64px;

  --alert: #b8472a;
  --muted: color-mix(in srgb, var(--fg) 62%, var(--bg)); --line: color-mix(in srgb, var(--fg) 16%, transparent);
  --panel: color-mix(in srgb, var(--bg) 16%, #fff); --panel-fg: var(--fg); --accent: var(--fg); --accent-fg: #f6f8f3;
  --body: 'Archivo', system-ui, sans-serif; --radius: 999px;
  --shadow: drop-shadow(0 22px 20px color-mix(in srgb, var(--fg) 24%, transparent));
  --peek: clamp(200px, 36svh, 380px);   /* how much of the shop shows on the opening screen */
  --sheet-pad: clamp(40px, 4vw, 60px);
  /* The fade runs the whole way from the big name down to the clothes, so it is as gradual as the space allows.
     shop.js measures the page and sets both: --fade is its height, --sink is how far below the top of the shop the colour
     becomes complete. Its middle always sits halfway between the bottom of the big name and the top of the clothes. */
  --fade: 22svh;
  --sink: 0px;
  --track: .2em;                        /* letter spacing of the big name */
}
/* ---------- colours behind the clothes (plain colours only) ---------- */
html[data-ground="sage"]      { --bg: #a9c4a2; --bg-deep: #93b28d; --fg: #14241a; --deep: #1c3a28; --zone-light: rgba(241, 247, 236, .8); --zone-deep: rgba(22, 56, 38, .6); --zone-mid: rgba(122, 170, 130, .5); }
html[data-ground="mint"]      { --bg: #b8e0cb; --bg-deep: #9fd1b8; --fg: #0f2620; --deep: #14463a; --zone-light: rgba(242, 251, 247, .8); --zone-deep: rgba(14, 60, 50, .5); --zone-mid: rgba(120, 196, 170, .5); }
html[data-ground="lightblue"] { --bg: #bcdcf2; --bg-deep: #a3cdea; --fg: #0f2233; --deep: #1d4a73; --zone-light: rgba(244, 250, 255, .8); --zone-deep: rgba(30, 74, 120, .5); --zone-mid: rgba(140, 190, 232, .5); }
html[data-ground="blue"]      { --bg: #7db7e8; --bg-deep: #5f9fd8; --fg: #0c1f33; --deep: #123a66; --zone-light: rgba(232, 244, 253, .66); --zone-deep: rgba(14, 44, 88, .7); --zone-mid: rgba(70, 140, 214, .5); }
html[data-ground="turquoise"] { --bg: #45c6bf; --bg-deep: #29b0aa; --fg: #06211f; --deep: #0b4d4d; --zone-light: rgba(216, 248, 244, .64); --zone-deep: rgba(6, 70, 74, .7); --zone-mid: rgba(30, 160, 160, .5); }
html[data-ground="yellow"]    { --bg: #f4e8a8; --bg-deep: #ebda8c; --fg: #2a2410; --deep: #7a6520; --zone-light: rgba(255, 252, 234, .8); --zone-deep: rgba(150, 120, 30, .38); --zone-mid: rgba(236, 214, 120, .5); }
html[data-ground="sand"]      { --bg: #dcc39a; --bg-deep: #cfb283; --fg: #2a1f12; --deep: #6b4a26; --zone-light: rgba(252, 244, 226, .7); --zone-deep: rgba(104, 72, 38, .5); --zone-mid: rgba(200, 160, 104, .5); }
html[data-ground="peach"]     { --bg: #f4c6a8; --bg-deep: #ebb18e; --fg: #2e1a10; --deep: #8a4a26; --zone-light: rgba(255, 244, 234, .78); --zone-deep: rgba(140, 74, 38, .42); --zone-mid: rgba(240, 170, 130, .5); }
html[data-ground="stone"]     { --bg: #d0d0c9; --bg-deep: #bebeb6; --fg: #17181a; --deep: #4a4c50; --zone-light: rgba(250, 250, 247, .8); --zone-deep: rgba(60, 62, 66, .42); --zone-mid: rgba(170, 170, 162, .5); }

body { background: var(--bg-deep); }
.cursor { display: none; }
.size { border-radius: 12px; }

/* ---------- the banner: Men's and Women's on the left, the name in the middle, the bag on the right ---------- */
.nav, html.is-scrolled .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--bar-h); padding: 0 clamp(16px, 3vw, 44px); color: var(--nav-fg);
  background: var(--bar); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid rgba(0, 0, 0, .08); }
.nav__links { justify-self: start; gap: clamp(18px, 2.4vw, 36px); }
.nav__links button { position: relative; height: var(--bar-h); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; }
.nav__links button::after { content: ''; position: absolute; left: 0; right: .22em; bottom: calc(var(--bar-h) / 2 - 14px); height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav__links button:hover::after, .nav__links button[aria-pressed="true"]::after { transform: scaleX(1); }
.nav__links button[aria-pressed="true"] { font-weight: 600; }
.nav__brand { justify-self: center; padding-left: .26em; font: 600 clamp(18px, 1.7vw, 25px)/1 var(--display); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; }
.nav__bag { justify-self: end; position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; }
.nav__bag sup { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 18px; background: var(--nav-fg); color: #f7f4ec; font-size: 10px; font-weight: 600; transition: scale .3s var(--ease); }
.nav__bag sup.is-empty { scale: 0; }

/* ---------- hero: the film, with the name very faintly in it ---------- */
.cover { height: 200vh; height: 200svh; }
.hero { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: start center; padding: var(--bar-h) 0 var(--peek); background: #16262e; color: #fff; }
/* two players sit on top of each other and dissolve from one clip to the next */
/* old transfers carry dark borders at the frame edge, so the picture is enlarged a touch to hide them */
.hero__film { position: absolute; left: 0; top: 0; width: 100%; height: calc(100svh - var(--peek) + var(--sink) + 8px); object-fit: cover; object-position: 50% var(--film-y, 50%); transform: scale(1.08); opacity: 0; transition: opacity 1.3s ease; }
.hero__film.is-on { opacity: 1; }
/* the finish: modern free footage given an old film-stock look */
.hero__tone { position: absolute; inset: 0; pointer-events: none; }
html[data-look="film"] .hero__film { filter: contrast(1.06) saturate(1.28) sepia(.24) hue-rotate(-9deg) brightness(1.05); }
html[data-look="film"] .hero__tone { background:
    url(/shared/grain-film.png),
    radial-gradient(60% 50% at 8% 0%, rgba(255, 150, 70, .26), transparent 70%),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(20, 10, 0, .42) 100%),
    linear-gradient(180deg, rgba(255, 224, 170, .10), rgba(40, 90, 110, .12)); animation: grainShift .9s steps(5) infinite; }
html[data-look="vhs"] .hero__film { filter: contrast(1.16) saturate(1.5) brightness(1.06) blur(.7px); }
html[data-look="vhs"] .hero__tone { background:
    url(/shared/grain-film.png),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .10) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 20, .38) 100%),
    linear-gradient(90deg, rgba(255, 0, 80, .05), rgba(0, 200, 255, .05)); animation: grainShift .9s steps(5) infinite; }
html[data-look="clean"] .hero__tone { background: radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(0, 0, 0, .25) 100%); }
@keyframes grainShift { 0% { background-position: 0 0, 0 0, 0 0, 0 0; } 20% { background-position: -70px 40px, 0 0, 0 0, 0 0; } 40% { background-position: 50px -90px, 0 0, 0 0, 0 0; } 60% { background-position: -120px -30px, 0 0, 0 0, 0 0; } 80% { background-position: 90px 110px, 0 0, 0 0, 0 0; } 100% { background-position: 0 0, 0 0, 0 0, 0 0; } }

/* The big name sits very faintly in the picture. Partway down the scroll it comes forward for a moment
   (--bump peaks about a quarter of the way, while the name is still clear of the rising colour), then it is gone
   and only the banner and the clothes remain. --rise runs from 0 at the top of the page to 1 when the shop fills the screen. */
.word { position: relative; z-index: 2; margin-top: calc((100svh - var(--peek) - var(--bar-h)) * .22); display: flex; align-items: baseline; justify-content: center; gap: .5em; padding-left: var(--track); font: 500 clamp(30px, 7.9vw, 156px)/1 var(--display); letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap;
  --bump: max(0, calc(1 - max(var(--rise, 0) - .25, .25 - var(--rise, 0)) / .2));
  opacity: calc(.2 + .66 * var(--bump)); transform: translateY(calc(var(--rise, 0) * -17svh)) scale(calc(1 + .04 * var(--bump))); }
.word span { display: inline-block; }

/* ---------- the shop ---------- */
.sheet { position: relative; z-index: 2; min-height: 100vh; margin-top: calc(-100vh - var(--peek)); margin-top: calc(-100svh - var(--peek)); padding-top: var(--sheet-pad); }
/* the colour itself starts a little way down (--sink), level with the tops of the clothes; above that the film still shows through the fade */
.sheet::before { content: ''; position: absolute; inset: var(--sink) 0 0; z-index: -1; background: url(/shared/grain.png), linear-gradient(180deg, var(--bg) 0, var(--bg) 55%, var(--bg-deep) 100%); }
/* The fade. One long, even ramp carries the colour up out of the film (fully there at the clothes, gone by the big name),
   and three broad, faint swells on top of it bend its edge so it never reads as a straight line and sits a little higher
   at the left and right. As you scroll, each part lifts and spreads a little differently. */
.mist { position: absolute; left: 0; right: 0; bottom: calc(100% - 2px - var(--sink)); height: 130svh; overflow: hidden; pointer-events: none; }
.mist i { position: absolute; left: var(--x); bottom: calc(var(--ry) * -1); width: var(--w); height: calc(var(--ry) * 2); margin-left: calc(var(--w) / -2); opacity: var(--a, 1);
  background: radial-gradient(closest-side, var(--bg) 0%, var(--bg) 7%, color-mix(in srgb, var(--bg) 93%, transparent) 16%, color-mix(in srgb, var(--bg) 80%, transparent) 27%, color-mix(in srgb, var(--bg) 64%, transparent) 38%, color-mix(in srgb, var(--bg) 47%, transparent) 49%, color-mix(in srgb, var(--bg) 32%, transparent) 60%, color-mix(in srgb, var(--bg) 19%, transparent) 71%, color-mix(in srgb, var(--bg) 9%, transparent) 82%, color-mix(in srgb, var(--bg) 3%, transparent) 92%, transparent 100%);
  transform: translateX(calc(var(--rise, 0) * var(--drift, 0vw))) scaleY(calc(1 + var(--rise, 0) * var(--grow, .5))); will-change: transform; }
.mist i:nth-child(1) { left: 0; bottom: 0; width: 100%; height: var(--fade); margin-left: 0; transform-origin: 50% 100%; transform: scaleY(calc(1 + var(--rise, 0) * .3));   /* the long ramp */
  background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 97%, transparent) 6%, color-mix(in srgb, var(--bg) 88%, transparent) 15%, color-mix(in srgb, var(--bg) 75%, transparent) 25%, color-mix(in srgb, var(--bg) 60%, transparent) 35%, color-mix(in srgb, var(--bg) 45%, transparent) 45%, color-mix(in srgb, var(--bg) 31%, transparent) 55%, color-mix(in srgb, var(--bg) 20%, transparent) 65%, color-mix(in srgb, var(--bg) 11%, transparent) 75%, color-mix(in srgb, var(--bg) 5%, transparent) 85%, color-mix(in srgb, var(--bg) 1.5%, transparent) 93%, transparent 100%); }
.mist i:nth-child(2) { --x: 6%; --w: 90vw; --ry: calc(var(--fade) * 1.25); --a: .5; --grow: .55; --drift: 5vw; }
.mist i:nth-child(3) { --x: 56%; --w: 80vw; --ry: calc(var(--fade) * .9); --a: .4; --grow: .35; --drift: -4vw; }
.mist i:nth-child(4) { --x: 96%; --w: 88vw; --ry: calc(var(--fade) * 1.3); --a: .5; --grow: .65; --drift: -6vw; }
.mist::after { content: ''; position: absolute; inset: 0; background: url(/shared/grain.png); -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 60%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, transparent 60%, #000 100%); opacity: .8; }

/* zones of light and depth in the colour, held in place while the clothes scroll over them */
.sky { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; margin-top: calc(var(--sink) - var(--sheet-pad)); margin-bottom: calc(-100vh - var(--sink) + var(--sheet-pad)); margin-bottom: calc(-100svh - var(--sink) + var(--sheet-pad)); pointer-events: none;
  background:
    url(/shared/grain.png),
    radial-gradient(44% 78% at 108% 62%, var(--zone-deep) 0%, color-mix(in srgb, var(--zone-deep) 58%, transparent) 42%, transparent 74%),
    radial-gradient(40% 46% at -6% 104%, color-mix(in srgb, var(--zone-deep) 85%, transparent) 0%, transparent 72%),
    radial-gradient(44% 50% at 58% 46%, var(--zone-light) 0%, color-mix(in srgb, var(--zone-light) 36%, transparent) 55%, transparent 78%),
    radial-gradient(36% 40% at 14% 52%, var(--zone-mid) 0%, transparent 75%); }
.field, .foot { position: relative; z-index: 1; }
.field { gap: clamp(28px, 4vw, 72px) clamp(16px, 3vw, 56px); }
.field .piece:nth-child(n) { grid-column: span 4; margin-top: 0; }
.field .piece:nth-child(3n+2) { margin-top: clamp(36px, 6vw, 104px); }
/* stillness: the clothes never drift or follow the mouse; a piece only grows a touch when hovered */
.piece { translate: none; }
.piece__float, .pdp__photo { animation: none; }
.piece__float img { rotate: calc(var(--r, 0deg) * .5); transition: opacity .8s, scale .5s var(--ease); }
.piece:hover .piece__float img { rotate: calc(var(--r, 0deg) * .5); scale: 1.04; }
.piece__name { margin-top: 10px; font-size: 11px; font-weight: 500; letter-spacing: .18em; }
/* Coming soon / Sold out, under the name of a piece */
.piece__tag { display: block; margin-top: 5px; font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--fg) 62%, var(--bg)); }
.pdp__add:disabled { opacity: .45; cursor: not-allowed; }
.pdp__ship { margin: -14px 0 26px; font-size: 12px; color: var(--muted); text-align: center; }
@media (hover:hover) { .field:has(.piece:hover) .piece:not(:hover) { opacity: 1; filter: none; } }
.foot { justify-content: center; margin-top: clamp(70px, 9vw, 150px); padding-block: 26px; color: color-mix(in srgb, var(--fg) 70%, var(--bg)); }

/* overlays */
.pdp__stage { background: url(/shared/grain.png), linear-gradient(180deg, var(--bg), var(--bg-deep)); }
.pdp__name, .drawer__head h2, .cartpage__head h2 { font-family: var(--display); }
.pdp > .back { background: color-mix(in srgb, #fff 70%, transparent); }

/* ---------- preview-only picker (remove with preview.js) ---------- */
.pv { position: fixed; z-index: 45; left: 14px; bottom: 14px; max-width: min(380px, calc(100vw - 28px)); padding: 10px 12px 9px; border-radius: 14px; background: rgba(18,18,20,.92); color: #f4f4f1; font: 500 10px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.pv p { opacity: .6; margin: 10px 0 7px; }
.pv__toggle { display: flex; align-items: center; gap: 8px; letter-spacing: .14em; text-transform: uppercase; }
.pv__toggle i { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(#5cb270, #bcdcf2, #f4e8a8, #dcc39a, #5cb270); }
.pv:not(.pv--open) > :not(.pv__toggle) { display: none; }
.pv.pv--open .pv__toggle { opacity: .7; }
.pv__row { display: flex; flex-wrap: wrap; gap: 6px; }
.pv__row button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); letter-spacing: .12em; }
.pv__row button[style]::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.pv button.is-on { background: #f4f4f1; color: #121214; border-color: #f4f4f1; }

@media (max-width: 760px) {
  :root { --bar-h: 56px; --peek: clamp(170px, 31svh, 270px); --sheet-pad: 46px; }
  .nav, html.is-scrolled .nav { padding: 0 12px; }
  .nav__links { gap: 10px; }
  .nav__links button { font-size: 10px; letter-spacing: .1em; }
  .nav__links button::after { right: .1em; }
  .nav__brand { font-size: 13px; letter-spacing: .18em; padding-left: .18em; }
  .nav__bag { margin-right: -6px; }
  /* on a phone the big name takes two lines so it can stay large */
  .word { flex-wrap: wrap; row-gap: .08em; font-size: 13.4vw; }
  .word span:last-child { flex-basis: 100%; text-align: center; }
  .field .piece:nth-child(n) { grid-column: span 6; margin-top: 0; }
  .field .piece:nth-child(even) { margin-top: 30px; }
  .piece__name { font-size: 10px; letter-spacing: .14em; }
}
@media (prefers-reduced-motion: reduce) {
  .cover { height: 100vh; height: 100svh; }
  .sheet { margin-top: calc(-1 * var(--peek)); }
  .mist i { transform: none; }
  .hero__tone { animation: none !important; }
}

/* a first-time visitor's grid waits (at most 3 seconds) for the owners' settings, so nothing hidden or reordered flashes up */
.cc-wait .field { visibility: hidden; }

/* the question about counting visits: small, at the bottom, easy to answer either way */
.consent { position: fixed; left: 50%; bottom: 16px; z-index: 94; width: min(600px, calc(100vw - 32px)); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 12px 14px 12px 18px; border-radius: 16px; background: rgba(250, 248, 242, .97); color: #17191b; box-shadow: 0 10px 34px rgba(0, 0, 0, .2);
  font: 400 13.5px/1.4 var(--body); opacity: 0; translate: -50% 14px; transition: opacity .45s, translate .45s; }
.consent.is-on { opacity: 1; translate: -50% 0; }
.consent p { flex: 1 1 250px; margin: 0; }
.consent div { display: flex; align-items: center; gap: 8px; }
.consent button { padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(23, 25, 27, .22); font-weight: 500; color: inherit; }
.consent [data-consent="yes"] { background: #17191b; border-color: #17191b; color: #fff; }
.consent .consent__more { border: 0; padding-inline: 4px; text-decoration: underline; text-underline-offset: 3px; font-weight: 400; }

/* the policies page */
.policy { position: fixed; inset: 0; z-index: 99; display: none; overflow-y: auto; background: #f5f2ea; color: #17191b; }
.policy.is-open { display: block; }
.policy__in { max-width: 680px; margin: 0 auto; padding: 26px 20px 90px; font: 400 15px/1.65 var(--body); }
.policy__back { color: #6c6a64; text-decoration: underline; text-underline-offset: 3px; }
.policy h2 { font: 500 clamp(30px, 5vw, 42px)/1.1 var(--display); margin: 26px 0 10px; }
.policy h3 { font: 600 12px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; margin: 28px 0 8px; }
.policy p { margin: 0 0 10px; }
.policy a, .policy .link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.policy__choice { padding: 12px 14px; background: #fff; border: 1px solid rgba(23, 25, 27, .13); border-radius: 12px; }

/* the contact email, at the very bottom left */
.foot { position: relative; }
.foot__mail { position: absolute; left: clamp(16px, 4vw, 48px); bottom: 26px; font-size: 12px; letter-spacing: .06em; color: inherit; text-decoration: none; }
.foot__mail:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .foot { flex-direction: column; align-items: flex-start; gap: 10px; padding-left: 16px; } .foot__mail { position: static; } .foot__legal { align-self: center; } }