/* Blaize et Émilie — design tokens and components.
   Everything the Shopify theme must reproduce lives in :root. */

/* block, not swap: a fallback serif painted first leaves a ghost under the
   display font once the hero's animated layer composites */
@font-face{font-family:"Agraham";src:url("../fonts/Agraham.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Keep Calm";src:url("../fonts/KeepCalm-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:block}

:root{
  /* surfaces and ink */
  --be-paper:#f4f3f0;
  --be-paper-2:#ebe9e4;
  --be-white:#ffffff;
  --be-ink:#1c1b19;
  --be-ink-2:#5c5a55;
  --be-mute:#9a978f;
  --be-line:rgba(28,27,25,.12);

  /* the materials */
  --be-walnut:#7b4f30;
  --be-ash:#d8c29f;
  --be-concrete:#b9b7b2;
  --be-navy:#1d2a5a;

  /* type: display serif for names, tracked sans for everything that labels */
  --be-serif:"Agraham","Didot","Bodoni MT",Georgia,serif;
  --be-sans:"Keep Calm","Futura","Jost","Avenir Next",Helvetica,Arial,sans-serif;
  --be-track:.18em;
  --be-track-wide:.28em;
  --be-t-label:11px;
  --be-t-body:14px;
  --be-t-lead:clamp(18px,1.6vw,22px);
  --be-t-name:clamp(44px,7vw,112px);
  --be-t-title:clamp(34px,4.4vw,64px);

  /* the frame: photos sit inset from the window like a print on a mat */
  --be-frame:14px;
  --be-radius:14px;
  --be-radius-sm:10px;
  --be-gutter:clamp(18px,4vw,56px);
  --be-header:52px;

  /* glass pills and overlays */
  --be-glass:rgba(255,255,255,.74);
  --be-shade:rgba(20,18,16,.38);
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--be-paper);color:var(--be-ink);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font:500 var(--be-t-body)/1.65 var(--be-sans);min-height:100vh;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--be-ash);color:var(--be-ink)}

/* ---------- type voices ---------- */
.be-label{font:500 var(--be-t-label)/1 var(--be-sans);letter-spacing:var(--be-track);text-transform:uppercase}
.be-label--wide{letter-spacing:var(--be-track-wide)}
.be-name{font:400 var(--be-t-name)/.95 var(--be-serif);letter-spacing:-.01em}
.be-title{font:400 var(--be-t-title)/1.05 var(--be-serif)}
.be-lead{font:400 var(--be-t-lead)/1.45 var(--be-serif)}
.be-lead em{font-style:italic}
.be-mute{color:var(--be-mute)}
.be-ink-2{color:var(--be-ink-2)}
.be-light{color:var(--be-white)}
.be-serif{font-family:var(--be-serif)}

/* ---------- pill button ---------- */
.be-pill{
  display:inline-flex;align-items:center;gap:.6em;
  padding:9px 20px;border-radius:999px;
  background:var(--be-glass);color:var(--be-ink);
  font:500 var(--be-t-label)/1 var(--be-sans);letter-spacing:var(--be-track);text-transform:uppercase;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 6px 18px rgba(28,27,25,.08);
  transition:background .25s,transform .25s,box-shadow .25s;
}
.be-pill:hover{background:var(--be-white);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 26px rgba(28,27,25,.12)}
.be-pill--ink{background:var(--be-ink);color:var(--be-paper);box-shadow:none}
.be-pill--ink:hover{background:#2b2926}
.be-pill--line{background:transparent;box-shadow:0 0 0 1px var(--be-line) inset}
.be-pill--line:hover{background:var(--be-glass)}

/* ---------- swatches (noyer, chêne...) ---------- */
.be-swatches{display:flex;gap:18px;align-items:center}
.be-swatch{display:inline-flex;align-items:center;gap:8px;font:500 10px/1 var(--be-sans);letter-spacing:var(--be-track);text-transform:uppercase;color:var(--be-ink-2)}
.be-swatch i{width:14px;height:14px;border-radius:50%;background:var(--c,var(--be-walnut));box-shadow:0 0 0 1px rgba(28,27,25,.1) inset}
.be-swatch--noyer{--c:#8a6a4e}
.be-swatch--chene{--c:#d6c3a2}
.be-swatch--frene{--c:#e6dcc4}
.be-swatch--beton{--c:#b9b7b2}
.be-light .be-swatch{color:rgba(255,255,255,.85)}

/* ---------- the frame ---------- */
.be-frame{position:relative;border-radius:var(--be-radius);overflow:hidden;background:var(--be-paper-2)}
.be-frame img{width:100%;height:100%;object-fit:cover}
.be-frame--full{margin:0 var(--be-frame);height:calc(100vh - var(--be-header) - var(--be-frame));height:calc(100svh - var(--be-header) - var(--be-frame))}

/* ---------- header: a quiet band above the frame ---------- */
.be-header{
  position:sticky;top:0;z-index:40;
  height:var(--be-header);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 calc(var(--be-frame) + 14px);
  background:var(--be-paper);
}
.be-header__nav{display:flex;gap:26px;align-items:center}
.be-header__nav--right{justify-content:flex-end}
.be-header__nav a{position:relative;padding:4px 0;transition:color .2s}
.be-header__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .3s cubic-bezier(.2,.7,.2,1)}
.be-header__nav a:hover::after,.be-header__nav a[aria-current]::after{right:0}
.be-header__brand{display:flex;justify-content:center;align-items:flex-start;height:var(--be-header);position:relative}
/* the seal hangs over the frame's top edge, like the first mockup; once the
   page scrolls it folds away and the bare monogram takes its place */
.be-seal,.be-mono{width:auto}
.be-header__brand .be-seal{height:92px;margin-top:8px;position:relative;z-index:2;transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.be-header__brand .be-mono{height:26px;position:absolute;top:13px;left:50%;transform:translate(-50%,-6px);opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.be-header.is-scrolled .be-seal{opacity:0;transform:translateY(-12px);pointer-events:none}
.be-header.is-scrolled .be-mono{opacity:1;transform:translate(-50%,0)}
.be-header.is-scrolled{box-shadow:0 1px 0 var(--be-line)}
.be-header__cart{display:inline-flex;align-items:center;gap:8px}
.be-header__cart svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.4}
.be-header--mono{grid-template-columns:auto 1fr}
.be-header--mono .be-header__brand{justify-content:flex-start}

/* ---------- sections ---------- */
.be-section{padding:clamp(56px,9vw,128px) var(--be-gutter)}
.be-section--tight{padding-top:clamp(32px,5vw,72px);padding-bottom:clamp(32px,5vw,72px)}
.be-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.be-split--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.be-split .be-name{font-size:clamp(44px,5.4vw,92px);overflow-wrap:anywhere}
.be-stack{display:grid;gap:22px;align-content:center;justify-items:start}
.be-stack > .be-label{color:var(--be-mute)}
.be-copy{max-width:42ch;color:var(--be-ink-2)}
.be-rule{height:1px;background:var(--be-line);margin:0 var(--be-gutter)}
.be-section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(24px,3vw,40px)}

/* ---------- hero (home) ---------- */
.be-hero{display:grid;grid-template-columns:1fr 1fr;gap:0}
.be-hero > figure{position:relative;overflow:hidden;background:var(--be-paper-2)}
.be-hero > figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);animation:be-settle 2.4s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes be-settle{to{transform:scale(1)}}
.be-hero__words{
  position:absolute;left:clamp(22px,3.2vw,48px);bottom:clamp(22px,3.2vw,48px);z-index:2;
  color:var(--be-white);text-shadow:0 1px 18px rgba(0,0,0,.25);
  opacity:0;transform:translateY(10px);animation:be-rise 1.2s cubic-bezier(.2,.7,.2,1) .5s forwards;
}
@keyframes be-rise{to{opacity:1;transform:none}}

/* ---------- product card (a framed photo with its name in the corner) ---------- */
.be-card{position:relative;display:block;border-radius:var(--be-radius);overflow:hidden;background:var(--be-paper-2);aspect-ratio:4/5}
.be-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.be-card:hover img{transform:scale(1.035)}
.be-card__words{position:absolute;z-index:2;left:clamp(18px,2.6vw,36px);bottom:clamp(18px,2.6vw,36px);display:grid;gap:14px;justify-items:start;color:var(--be-white)}
.be-card__words .be-name{font-size:clamp(40px,4.6vw,72px);text-shadow:0 2px 24px rgba(0,0,0,.3)}
.be-card--shade::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,var(--be-shade),transparent);pointer-events:none}

/* ---------- category tiles ---------- */
.be-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.be-tile{position:relative;display:block;border-radius:var(--be-radius-sm);overflow:hidden;aspect-ratio:1/1;background:var(--be-paper-2)}
.be-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.be-tile:hover img{transform:scale(1.04)}
.be-tile::before{content:"";position:absolute;inset:0 0 auto 0;height:40%;background:linear-gradient(rgba(244,243,240,.75),transparent);z-index:1}
.be-tile__label{position:absolute;top:18px;left:0;right:0;text-align:center;z-index:2;color:var(--be-ink);transition:letter-spacing .4s}
.be-tile:hover .be-tile__label{letter-spacing:var(--be-track-wide)}
.be-tile--light::before{background:linear-gradient(rgba(20,18,16,.35),transparent)}
.be-tile--light .be-tile__label{color:var(--be-white)}

/* ---------- a wide band with a faded edge for words (the Julia treatment) ---------- */
.be-band{position:relative;border-radius:var(--be-radius);overflow:hidden;min-height:clamp(340px,52vh,560px);display:grid;align-items:center;background:var(--be-paper-2)}
.be-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.be-band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,243,240,.96) 0%,rgba(244,243,240,.86) 32%,rgba(244,243,240,0) 62%);z-index:1}
.be-band__words{position:relative;z-index:2;padding:clamp(28px,5vw,72px);max-width:560px}
.be-band .be-title{font-size:clamp(30px,3.2vw,46px)}
.be-band--dark::before{background:linear-gradient(90deg,rgba(20,18,16,.72) 0%,rgba(20,18,16,.5) 36%,rgba(20,18,16,0) 66%)}
.be-band--dark .be-band__words{color:var(--be-white)}
.be-band--dark .be-copy{color:rgba(255,255,255,.78)}

/* ---------- footer ---------- */
.be-footer{padding:clamp(48px,7vw,96px) var(--be-gutter) 28px;border-top:1px solid var(--be-line);margin-top:clamp(24px,4vw,56px)}
.be-footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:40px}
.be-footer__col{display:grid;gap:14px;align-content:start}
.be-footer__col .be-label{color:var(--be-mute)}
.be-footer__col a{color:var(--be-ink-2);transition:color .2s}
.be-footer__col a:hover{color:var(--be-ink)}
.be-footer__brand{display:grid;gap:18px;align-content:start;justify-items:start}
.be-footer__brand .be-seal{height:84px}
.be-footer__news{display:flex;border-bottom:1px solid var(--be-ink);max-width:300px;width:100%}
.be-footer__news input{flex:1;border:0;background:none;font:inherit;padding:10px 0;color:var(--be-ink);outline:none;min-width:0}
.be-footer__news input::placeholder{color:var(--be-mute)}
.be-footer__news button{padding:0 4px}
.be-footer__foot{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(40px,6vw,72px);color:var(--be-mute)}
.be-footer__foot .be-label{font-size:10px}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .be-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .be-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .be-split,.be-split--rev{grid-template-columns:1fr}
  .be-split--rev > :first-child{order:2}
  .be-split .be-card{max-width:560px}
}
@media (max-width:760px){
  :root{--be-frame:8px;--be-radius:12px;--be-header:48px}
  .be-header{padding:0 calc(var(--be-frame) + 10px)}
  .be-header__nav{gap:16px}
  .be-header__nav .be-hide-sm{display:none}
  .be-header__brand .be-seal{height:70px}
  .be-hero{grid-template-columns:1fr}
  .be-hero > figure:last-child{display:none}
  .be-split,.be-split--rev{grid-template-columns:1fr}
  .be-split--rev > :first-child{order:2}
  .be-band::before{background:linear-gradient(to top,rgba(244,243,240,.96) 0%,rgba(244,243,240,.8) 45%,rgba(244,243,240,.1) 100%)}
  .be-band--dark::before{background:linear-gradient(to top,rgba(20,18,16,.8) 0%,rgba(20,18,16,.55) 45%,rgba(20,18,16,.05) 100%)}
  .be-band__words{align-self:end}
  .be-footer__grid{grid-template-columns:1fr}
  .be-footer__foot{flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .be-hero__words{opacity:1;transform:none}
}

/* ---------- the collection drawer: full height on the right, the page slides left to make room ---------- */
.be-stage{will-change:transform;transition:transform 1s cubic-bezier(.22,.61,.36,1)}
html.is-menu .be-stage{transform:translateX(calc(-50% + 7px))}
.be-wash{position:fixed;inset:0;z-index:8;pointer-events:none}
html.is-menu .be-wash{pointer-events:auto}
.be-drawer{
  position:fixed;top:14px;bottom:14px;right:14px;width:calc(50% - 21px);z-index:9;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0;
  border-radius:14px;overflow:hidden;background:var(--be-paper-2);
  transform:translateX(calc(100% + 28px));
  will-change:transform;contain:paint;
  transition:transform 1s cubic-bezier(.22,.61,.36,1);
}
html.is-menu .be-drawer{transform:none}

/* phones: the drawer covers the screen under the header instead of pushing the page aside */
@media (max-width:820px){
  .be-stage{will-change:auto;transform:none}
  html.is-menu .be-stage{transform:none}
  html.is-menu,html.is-menu body{overflow:hidden}
  .be-drawer{
    top:72px;right:8px;bottom:8px;left:8px;width:auto;
    border-radius:12px;
  }
}
.be-drawer .be-tile{position:relative;display:block;overflow:hidden;background:var(--be-paper-2);aspect-ratio:auto;border-radius:0}
.be-drawer .be-tile::before{display:none}
.be-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.be-tile:hover img{transform:scale(1.04)}
.be-tile--paper img{object-fit:contain;padding:10% 8% 4%}
.be-tile span{position:absolute;left:0;right:0;top:20px;z-index:2;text-align:center;font:500 11px/1 var(--be-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--be-ink);transition:letter-spacing .4s}
.be-tile:hover span{letter-spacing:.26em}
[data-drawer]{position:relative}
[data-drawer]::after{content:"";position:absolute;left:-20px;right:-20px;top:100%;height:30px}