/* JACAVA London -- design system
   Palette, type scale and layout grammar measured from dior.com:
   ground #F8F8F8, ink #33383C (never black), display serif ~32px centred at -0.02em,
   body sans 14-15px, full-bleed imagery, no UI accent colour, CTAs as underlined text links.
   Colour on this site belongs to the product and to nothing else. */

@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/assets/fonts/bodoni-moda.woff2') format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400;font-display:swap;
  src:url('/assets/fonts/bodoni-moda-italic.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('/assets/fonts/jost.woff2') format('woff2')}

:root{
  --paper:#F8F8F8; --paper-2:#FFFFFF; --plinth:#FFFFFF;
  --ink:#33383C; --ink-soft:#5C6167; --muted:#6B7075;
  --line:#E1E1E1; --line-soft:#EDEDED;
  --on-image:#FFFFFF; --on-light-image:#33383C;
  --serif:'Bodoni Moda','Bodoni 72','Didot','Playfair Display','Times New Roman',serif;
  --sans:'Jost','Futura','Avenir Next','Century Gothic',system-ui,sans-serif;
  --gut:clamp(1.25rem,4vw,3.5rem); --text:66ch; --nav:66px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#111214; --paper-2:#191A1D; --ink:#EDEEEF; --ink-soft:#C4C7CB;
    --muted:#92969C; --line:#2C2E32; --line-soft:#232529;
  }
}
:root[data-theme="dark"]{
  --paper:#111214; --paper-2:#191A1D; --ink:#EDEEEF; --ink-soft:#C4C7CB;
  --muted:#92969C; --line:#2C2E32; --line-soft:#232529;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
[id]{scroll-margin-top:calc(var(--nav) + 18px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:.8rem 1.2rem;z-index:100}
.skip:focus{left:0}

.wrap{max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:var(--text);margin-inline:auto;text-align:center}
.centre{text-align:center}
.display{font-family:var(--serif);font-size:clamp(1.55rem,2.5vw,2.15rem);line-height:1.18;letter-spacing:-.02em}
.display-lg{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.14;letter-spacing:-.02em}
.display-sm{font-family:var(--serif);font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.25;letter-spacing:-.015em}
.lede{color:var(--ink-soft);font-size:15px;max-width:var(--text);margin-inline:auto}
.kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rule{border:0;border-top:1px solid var(--line-soft);margin:0}

.tlink{display:inline-block;font-size:13px;font-weight:500;letter-spacing:.02em;color:inherit;
  border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .25s ease;background:none;cursor:pointer;font-family:inherit}
.tlink:hover{opacity:.55}
.tlink[disabled]{opacity:.5;cursor:default}
.tlink.on-image{color:var(--on-image)}

/* ---- navigation ---- */
#top-sentinel{position:absolute;top:0;height:1px;width:1px}
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav);display:flex;align-items:center;
  color:var(--ink);background:var(--paper);border-bottom:1px solid var(--line);
  transition:background .35s ease,border-color .35s ease,color .35s ease}
body.home .nav{background:transparent;border-bottom-color:transparent;color:var(--on-light-image)}
body.home .nav::before{content:'';position:absolute;inset:0;z-index:-1;transition:opacity .35s ease;
  background:linear-gradient(to bottom,rgba(255,255,255,.58),rgba(255,255,255,.36));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.home .nav.stuck::before{opacity:0}
body.home .nav.stuck{background:var(--paper);border-bottom-color:var(--line);color:var(--ink)}
.nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;gap:1rem}
.brand{grid-column:2;justify-self:center;font-family:var(--serif);font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;white-space:nowrap}
.navlinks{display:flex;gap:clamp(.85rem,1.8vw,1.7rem);align-items:center;white-space:nowrap}
.navlinks a,.navutil a{font-size:12px;letter-spacing:.07em;color:inherit;transition:opacity .2s}
.navlinks a:hover,.navutil a:hover{opacity:.6}
.navlinks a[aria-current=page]{border-bottom:1px solid currentColor;padding-bottom:2px}
.navutil{grid-column:3;justify-self:end;display:flex;gap:clamp(.85rem,1.6vw,1.5rem)}
.burger{display:none;background:none;border:0;color:inherit;font:inherit;font-size:12px;letter-spacing:.07em;cursor:pointer;padding:.5rem 0}
@media(max-width:1040px){
  .navlinks{position:fixed;inset:var(--nav) 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:0 var(--gut);max-height:0;overflow:hidden;
    transition:max-height .4s ease;color:var(--ink)}
  .navlinks.open{max-height:80vh}
  .navlinks a{width:100%;padding:1.05rem 0;border-bottom:1px solid var(--line-soft);font-size:13px}
  .burger{display:block}
}
@media(max-width:560px){
  /* Stockists lives in the menu and the footer; the utility row must stay on one line */
  .navutil a:first-child{display:none}
  .brand{letter-spacing:.26em;text-indent:.26em}
}

/* ---- page shells ---- */
main{padding-top:var(--nav)}
body.home main{padding-top:0}
section{padding-block:clamp(3.5rem,7vw,7rem)}
section.tight{padding-block:clamp(2.2rem,4vw,3.6rem)}
section.bleed,section.hero{padding-block:0}
.pagehead{padding-block:clamp(3rem,6vw,5.5rem) clamp(2rem,4vw,3.4rem);text-align:center}
.pagehead h1{font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.12}
.pagehead .lede{margin-top:1.1rem}
.shead{text-align:center;max-width:var(--text);margin:0 auto clamp(2.2rem,4vw,3.4rem);display:grid;gap:.9rem;justify-items:center}

.crumbs{font-size:11.5px;color:var(--muted);letter-spacing:.04em;padding-block:1.4rem;text-align:center}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{margin-inline:.5rem;opacity:.45}
.crumbs .cur{color:var(--ink-soft)}

/* ---- hero (home) ---- */
.hero{display:grid;grid-template-columns:1fr 1fr}
.panel{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  padding:0 1.5rem clamp(2.2rem,4.5vh,3.4rem);overflow:hidden;min-height:100dvh}
.panel-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.panel-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.34) 20%,rgba(0,0,0,0) 55%)}
.panel-body{position:relative;z-index:2;text-align:center;display:grid;gap:.85rem;justify-items:center}
.panel.light{background:var(--plinth);color:var(--on-light-image)}
.panel.dark .panel-body{color:var(--on-image)}
.panel-product{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:5rem 1rem 9rem;z-index:1}
.panel-product picture{display:contents}
.panel-product img,.panel-product canvas{height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:860px){.hero{grid-template-columns:1fr}.panel{min-height:72vh}}

/* ---- full-bleed editorial band ---- */
.editorial{position:relative;min-height:clamp(380px,58vh,620px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.editorial img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.editorial .veil{position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.42)}
.editorial.on-dark .veil{background:rgba(0,0,0,.5)}
.editorial .inner{position:relative;z-index:2;text-align:center;color:var(--on-light-image);display:grid;gap:1.1rem;justify-items:center;padding-inline:1.5rem;max-width:56ch}
.editorial.on-dark .inner{color:var(--on-image)}

/* ---- product grid + carousel ---- */
.rail{display:flex;gap:clamp(.7rem,1.2vw,1.15rem);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--gut) 1.4rem;scrollbar-width:thin;scrollbar-color:var(--line) transparent;cursor:grab}
.rail:active{cursor:grabbing}
.rail::-webkit-scrollbar{height:1px}
.rail::-webkit-scrollbar-thumb{background:var(--line)}
.rail .shade{flex:0 0 clamp(178px,17vw,244px);scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(1.1rem,2.2vw,2.2rem);align-items:stretch}
@media(max-width:560px){.grid{grid-template-columns:repeat(2,1fr);gap:1rem}}
.shade{text-align:center;display:flex;flex-direction:column;height:100%}
.shade picture{display:block}
.shade .chip{aspect-ratio:1/1.32;width:100%;height:auto;display:block;object-fit:cover;
  background:var(--plinth);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.shade:hover .chip{opacity:.92;transform:scale(1.015)}
.shade h3,.shade .nm{font-family:var(--serif);font-size:1.02rem;margin-top:1.05rem;letter-spacing:-.01em;display:block}
.shade .desc{font-size:12.5px;color:var(--muted);margin-top:.3rem;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.shade .price{font-size:12.5px;margin-top:auto;padding-top:.5rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* ---- colour family nav ---- */
.families{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-bottom:clamp(2rem,4vw,3.2rem)}
.families a{display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--line);padding:.55rem .9rem;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);transition:border-color .2s,color .2s}
.families a:hover,.families a[aria-current=page]{border-color:var(--ink);color:var(--ink)}
.families i{width:10px;height:10px;display:block;background:var(--sw)}

/* ---- product detail ---- */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.pdp-media{background:var(--plinth);display:flex;align-items:center;justify-content:center;
  padding:clamp(1.5rem,3vw,3rem);min-height:min(76vh,660px);position:sticky;top:calc(var(--nav) + 20px)}
.pdp-media picture{display:contents}
.pdp-media img{height:min(64vh,560px);width:auto;object-fit:contain;max-width:100%;mix-blend-mode:multiply}
.pdp-info{display:grid;gap:1.3rem;align-content:start;max-width:52ch;padding-block:clamp(.5rem,2vw,1.5rem)}
.pdp-info h1{font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.12}
.pdp-price{font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.pdp-tagline{font-size:1.02rem;color:var(--ink-soft)}
.pdp-volume{font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
.pdp-def{display:grid;gap:.9rem;color:var(--ink-soft)}
.pdp-def .lbl{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pdp-swatch{font-size:12px;letter-spacing:.06em;color:var(--muted)}
.pdp-free{font-size:12.5px;color:var(--muted);line-height:1.7}
.pdp-free .lbl{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.35rem}
.pdp-actions{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;padding-top:.3rem}
.pdp-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.6rem;padding-top:1.2rem;border-top:1px solid var(--line-soft)}
.pdp-meta dt{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pdp-meta dd{margin:.35rem 0 0;font-family:var(--serif);font-size:1.05rem}
@media(max-width:940px){
  .pdp{grid-template-columns:1fr;gap:2.4rem}
  .pdp-media{position:static}
  .pdp-media{min-height:auto;padding:2rem 1rem}
  .pdp-media img{height:min(46vh,400px)}
  .pdp-info{max-width:52ch;margin-inline:auto;justify-items:center;text-align:center}
  .pdp-info h1,.pdp-tagline,.pdp-def{text-align:center}
  .pdp-swatch,.pdp-actions{justify-content:center}
}

/* ---- nine free grid ---- */
.nine{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.6rem);max-width:1000px;margin-inline:auto;text-align:center}
.nine div{border-top:1px solid var(--line-soft);padding-top:1.1rem}
.nine dt{font-size:14px;color:var(--ink)}
.nine dd{margin:.4rem 0 0;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){.nine{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.nine{grid-template-columns:1fr}}

/* ---- press ---- */
.press{padding-block:clamp(2.6rem,4.5vw,4rem);border-block:1px solid var(--line-soft)}
.press-inner{display:flex;justify-content:center}
.press-mask{display:none;width:min(920px,100%);aspect-ratio:1072/31;background:var(--ink-soft);
  -webkit-mask-image:url('/assets/img/press-mask.png');mask-image:url('/assets/img/press-mask.png');
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-source-type:luminance;mask-mode:luminance}
.press-img{width:min(920px,100%);background:#2B2B2B}
@supports (mask-mode:luminance) or (-webkit-mask-source-type:luminance){
  .press-mask{display:block} .press-img{display:none}
}
.mastheads{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.masthead{background:var(--paper);padding:clamp(1.6rem,3vw,2.6rem) 1rem;text-align:center;display:grid;gap:.5rem;align-content:center;min-height:132px}
.masthead .t{font-family:var(--serif);font-size:1.12rem}
.quotes{display:grid;gap:clamp(2rem,4vw,3.4rem);max-width:860px;margin-inline:auto}
.quote{text-align:center;display:grid;gap:1rem;justify-items:center;padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line-soft)}
.quote:first-child{border-top:0;padding-top:0}
.quote p{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.4;max-width:24ch}

/* ---- journal ---- */
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.9rem)}
.post{display:block;text-align:center}
.post .art{aspect-ratio:4/3;width:100%;height:auto;display:block;object-fit:cover;background:var(--line-soft);transition:opacity .3s}
.post:hover .art{opacity:.86}
.post h3,.post .nm{font-family:var(--serif);font-size:1.05rem;margin-top:1.05rem;display:block}
.post .kicker{display:block;margin-top:.55rem}
@media(max-width:760px){.jgrid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
.article{max-width:68ch;margin-inline:auto}
.article p{margin-bottom:1.4rem;color:var(--ink-soft)}
.article h2{font-size:clamp(1.4rem,2.2vw,1.8rem);margin:2.4rem 0 1rem}

/* ---- shade studio ---- */
.studio-stage{display:grid;justify-items:center;gap:clamp(1.6rem,3vw,2.4rem)}
.studio-plinth{background:var(--plinth);height:min(56vh,520px);display:flex;align-items:center;justify-content:center;padding:1rem 2rem;width:min(100%,420px)}
.studio-plinth canvas{height:100%;width:auto;object-fit:contain;max-width:100%;mix-blend-mode:multiply}
.studio-read{display:grid;gap:.35rem;justify-items:center;min-height:3.6rem}
.studio-hex{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.controls{width:min(100%,540px);display:grid;gap:1.35rem}
.ctrl{display:grid;gap:.6rem}
.ctrl label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:center}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;display:block}
input[type=range]::-webkit-slider-runnable-track{height:26px;border:1px solid var(--line);background:var(--track)}
input[type=range]::-moz-range-track{height:26px;border:1px solid var(--line);background:var(--track)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:6px;height:38px;margin-top:-7px;background:var(--ink);border:2px solid var(--paper-2);box-shadow:0 0 0 1px var(--ink)}
input[type=range]::-moz-range-thumb{width:6px;height:38px;border-radius:0;background:var(--ink);border:2px solid var(--paper-2);box-shadow:0 0 0 1px var(--ink)}
.presets{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.presets button{display:inline-flex;align-items:center;gap:.5rem;background:transparent;border:1px solid var(--line);
  color:var(--ink-soft);font:inherit;font-size:11px;letter-spacing:.08em;padding:.55rem .85rem;cursor:pointer;transition:border-color .2s,color .2s}
.presets button:hover,.presets button[aria-pressed=true]{border-color:var(--ink);color:var(--ink)}
.presets i{width:10px;height:10px;display:block;background:var(--sw)}

/* ---- facts + forms ---- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;max-width:860px;margin:clamp(2.2rem,4vw,3rem) auto 0;text-align:center}
.facts div{border-top:1px solid var(--line-soft);padding-top:1rem}
.facts dt{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:.45rem 0 0;font-family:var(--serif);font-size:1.15rem}
@media(max-width:700px){.facts{grid-template-columns:repeat(2,1fr)}}
.signup form{display:grid;gap:1.1rem;justify-items:center;max-width:430px;margin:2rem auto 0}
.field{display:grid;gap:.5rem;width:100%}
.field label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.field input{font:inherit;font-size:15px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.7rem 0;transition:border-color .25s;width:100%;text-align:center}
.field input::placeholder{color:var(--muted);opacity:1}
.field input:focus{outline:0;border-bottom-color:var(--ink)}
.field .help{font-size:12.5px;color:var(--muted);text-align:center}
.field .err{font-size:12.5px;color:var(--ink);min-height:1.3em;text-align:center;font-weight:500}

/* ---- footer ---- */
footer{border-top:1px solid var(--line-soft);padding-block:clamp(3rem,5vw,4.5rem) 2.2rem;margin-top:clamp(2rem,4vw,4rem)}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem;text-align:center}
footer .fh{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 1.1rem;font-weight:400;font-family:var(--sans);line-height:1.6}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
footer li a{font-size:13px;color:var(--ink-soft)}
footer li a:hover{color:var(--ink)}
.fbrand{display:block;text-align:center;font-family:var(--serif);font-size:20px;letter-spacing:.34em;
  text-indent:.34em;text-transform:uppercase;margin-bottom:clamp(2.2rem,4vw,3rem)}
.legal{margin-top:clamp(2.2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--line-soft);
  font-size:11.5px;color:var(--muted);max-width:70ch;margin-inline:auto;text-align:center;line-height:1.75}
@media(max-width:760px){.fgrid{grid-template-columns:repeat(2,1fr)}}

/* ---- reveal ---- */
.js-reveal .rv{opacity:0;transform:translateY(16px);transition:opacity .9s cubic-bezier(.22,.7,.3,1),transform .9s cubic-bezier(.22,.7,.3,1)}
.js-reveal .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js-reveal .rv{opacity:1;transform:none}
}