/* ===========================================================
   NUÉ LAGOS
   Type: Bricolage Grotesque only (locked by the label artwork).
   Colour: brand pink #D674A0 throughout, bone ground. The brown from the
   label artwork is deliberately NOT used on the site.
   =========================================================== */

:root{
  --bone:#F7F3EC;
  --bone-2:#EFE9DF;
  --paper:#FFFFFF;
  /* The brand pink #D674A0 is only 2.77 against bone, which is unreadable as
     text. Rather than shift the brand colour, these are the SAME hue (333deg)
     and saturation taken darker, so everything stays unmistakably pink and
     clears AA. #D674A0 itself stays on the wordmark, where it belongs. */
  --brand:#D674A0;        /* the logo pink, untouched */
  --ink:#AD336A;          /* text and blocks: 5.49 on bone */
  --ink-soft:#A1526F;     /* secondary text */
  --rose:#AD336A;         /* accents match the ink; the lighter brand pink cannot carry small text */
  --rose-soft:#F6DDE8;
  --line:rgba(214,116,160,.34);
  --line-faint:rgba(214,116,160,.20);

  --ui: 'Bricolage Grotesque', -apple-system, 'Helvetica Neue', sans-serif;

  --pad: clamp(18px, 5vw, 64px);
  --gutter: clamp(14px, 2.4vw, 34px);

  --label: 500 clamp(9px,.72vw,10.5px)/1.4 var(--ui);
  --label-ls: .26em;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font:400 16px/1.6 var(--ui);
  font-variation-settings:"wdth" 100;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
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}
h1,h2,h3,p{margin:0}

/* --- shared atoms ------------------------------------------------ */
.label{
  font:var(--label);
  letter-spacing:var(--label-ls);
  text-transform:uppercase;
}
.display{
  font-weight:340;
  font-size:clamp(2.2rem, 6.2vw, 5.8rem);
  line-height:.94;
  letter-spacing:-.035em;
}
.display--sm{font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.04;font-weight:360}

.rule-link{
  display:inline-block;
  font:var(--label);
  letter-spacing:var(--label-ls);
  text-transform:uppercase;
  padding-bottom:5px;
  border-bottom:1px solid currentColor;
  transition:opacity .4s var(--ease);
}
.rule-link:hover{opacity:.55}

/* --- announcement ------------------------------------------------ */
.ticker{
  background:var(--ink);
  color:var(--bone);
  overflow:hidden;
  height:34px;
  display:flex;
  align-items:center;
  position:relative;
  z-index:60;
}
.ticker__track{
  display:flex;
  gap:0;
  white-space:nowrap;
  animation:slide 46s linear infinite;
  will-change:transform;
}
.ticker__item{
  font:var(--label);
  letter-spacing:var(--label-ls);
  text-transform:uppercase;
  padding:0 28px;
  opacity:.82;
}
.ticker__dot{font-size:5px;opacity:.45;align-self:center;line-height:34px}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* --- header ------------------------------------------------------ */
.head{
  position:sticky; top:0; z-index:50;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:18px var(--pad);
  background:var(--bone);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease);
}
.head.is-stuck{border-bottom-color:var(--line-faint)}
.head__l,.head__r{display:flex;align-items:center;gap:22px}
.head__r{justify-content:flex-end}
.head__burger{
  /* Three equal bars at 1.5px. At 1px with a stubby third bar this read as a
     single dash at normal viewing size. */
  display:flex;flex-direction:column;gap:5px;width:20px;padding:6px 0;
}
.head__burger i{
  display:block;height:1.5px;width:100%;background:currentColor;
  transition:transform .4s var(--ease);
}
.head__mark{width:clamp(74px,8vw,112px)}
.head__mark svg,.head__mark img{width:100%;height:auto;display:block}
.head__link{font:var(--label);letter-spacing:var(--label-ls);text-transform:uppercase}
.head__link .count{opacity:.5}
@media(max-width:760px){
  .head__l .head__link,.head__r .head__link--search{display:none}
}

/* --- section furniture ------------------------------------------- */
.sec{padding:clamp(72px,11vw,156px) var(--pad)}
.wrap{max-width:1560px;margin:0 auto}
.sec__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,52px);
}
.sec__eyebrow{color:var(--rose)}

/* --- product grid -------------------------------------------------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:clamp(44px,5vw,78px) var(--gutter);
}
@media(min-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}

.card{display:block;position:relative}
/* The shoot comes cut out on pure white. Dropping that straight onto the
   bone page would print a white rectangle behind every bag, which is card
   chrome nobody asked for. Multiply maps the white exactly to whatever the
   card sits on, so the paper runs under the bag and the contact shadow
   stays. Bone is 97/95/93 percent, so the cord colours shift by under 3
   percent, which is below the threshold anyone sees. */
.card__media{
  display:block;position:relative;aspect-ratio:4/5;overflow:hidden;
  /* isolate, or multiply reaches past the card and blends with whatever is
     underneath, which is how it bled through the quick view overlay */
  isolation:isolate;
  background:var(--bone);
  margin-bottom:14px;
}
.card__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  mix-blend-mode:multiply;
  transition:opacity .7s var(--ease), transform 1.4s var(--ease);
}
.card__media img.b{opacity:0}
.card:hover .card__media img.a{opacity:0}
.card:hover .card__media img{transform:scale(1.04)}
.card:hover .card__media img.b{opacity:1}

.card__line{color:var(--ink-soft);opacity:.75;display:block;margin-bottom:9px}
.card__name{font-size:.98rem;letter-spacing:.01em;font-weight:450;display:block}
.card__price{font-size:.86rem;color:var(--ink-soft);margin-top:5px;display:block}
.card__flag{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--bone);color:var(--ink);
  font:var(--label);letter-spacing:var(--label-ls);text-transform:uppercase;
  padding:7px 11px;
}

/* --- editorial split ---------------------------------------------- */
.split{display:grid;grid-template-columns:1fr;align-items:stretch}
@media(min-width:900px){.split{grid-template-columns:1.25fr 1fr}}
.split__media{position:relative;min-height:clamp(380px,62vw,760px);overflow:hidden;background:var(--bone-2)}
.split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__copy{
  background:var(--ink);color:var(--bone);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(18px,2.6vw,30px);
  padding:clamp(40px,6vw,86px) clamp(26px,5vw,72px);
}
.split__copy .label{color:var(--bone);opacity:.75}
.split__copy p{max-width:46ch;opacity:.95;font-size:clamp(.96rem,1.2vw,1.08rem)}

/* --- statement ------------------------------------------------------ */
.said{text-align:center;max-width:22ch;margin:0 auto}
.said--wide{max-width:34ch}
.said p{margin-top:clamp(18px,2.4vw,28px);color:var(--ink-soft);max-width:48ch;
  margin-left:auto;margin-right:auto;font-size:clamp(.96rem,1.2vw,1.06rem)}

/* --- newsletter ------------------------------------------------------ */

/* --- footer ---------------------------------------------------------- */
.foot{background:var(--ink);color:var(--bone);padding:clamp(48px,7vw,92px) var(--pad) 28px}
.foot__grid{display:grid;gap:clamp(30px,5vw,56px);grid-template-columns:1fr}
@media(min-width:800px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr auto}}
.foot__mark{width:124px;margin-bottom:9px}
.foot__mark img{width:100%;height:auto}
.foot__sub{display:block;opacity:.55;margin-bottom:18px}
.foot__blurb{opacity:.85;max-width:34ch;font-size:.95rem}
.foot h3{font:var(--label);letter-spacing:var(--label-ls);text-transform:uppercase;
  color:var(--bone);opacity:.72;margin-bottom:16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot a{opacity:.88;font-size:.95rem;transition:opacity .3s var(--ease)}
.foot a:hover{opacity:1}
.cur{display:inline-flex;border:1px solid rgba(247,243,236,.42)}
.cur button{padding:9px 15px;font:var(--label);letter-spacing:var(--label-ls);
  text-transform:uppercase;opacity:.6;transition:all .3s var(--ease)}
.cur button.on{background:var(--bone);color:var(--ink);opacity:1}
.foot__base{
  margin-top:clamp(36px,5vw,60px);padding-top:22px;
  border-top:1px solid rgba(247,243,236,.28);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font:var(--label);letter-spacing:var(--label-ls);text-transform:uppercase;opacity:.6;
}

/* --- drawers / overlays ------------------------------------------------ */
.scrim{position:fixed;inset:0;background:rgba(88,24,56,.42);opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease);z-index:70;backdrop-filter:blur(2px)}
.scrim.on{opacity:1;pointer-events:auto}
.panel{
  position:fixed;top:0;bottom:0;width:min(420px,92vw);background:var(--bone);
  z-index:80;display:flex;flex-direction:column;
  transition:transform .5s var(--ease);
}
.panel--nav{left:0;transform:translateX(-101%)}
.panel--cart{right:0;transform:translateX(101%)}
.panel.on{transform:translateX(0)}
.panel__top{display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--pad);border-bottom:1px solid var(--line-faint)}
.panel__body{padding:clamp(22px,4vw,40px) var(--pad);overflow:auto;flex:1}
.panel--nav .panel__body ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,2vw,18px)}
.panel--nav a.big{font-size:clamp(1.6rem,4.6vw,2.4rem);letter-spacing:-.03em}
.panel__foot{padding:20px var(--pad) 28px;border-top:1px solid var(--line-faint)}
.cart__empty{color:var(--ink-soft);font-size:.95rem}
.cart__row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:start;
  isolation:isolate;background:var(--bone);
  padding:16px 0;border-bottom:1px solid var(--line-faint)}
.cart__row img{aspect-ratio:4/5;object-fit:cover;width:64px;mix-blend-mode:multiply}
.cart__rm{font:var(--label);letter-spacing:var(--label-ls);text-transform:uppercase;
  color:var(--ink-soft);margin-top:6px}
.cart__tot{display:flex;justify-content:space-between;margin-bottom:14px;font-size:1.02rem}
.btn-solid{display:block;width:100%;text-align:center;background:var(--ink);color:var(--bone);
  padding:16px;font:var(--label);letter-spacing:var(--label-ls);text-transform:uppercase;
  transition:background .4s var(--ease)}
.btn-solid:hover{background:var(--ink-soft)}

/* --- reveal ------------------------------------------------------------ */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* --- quick view ------------------------------------------------------- */
/* Cards had nowhere to go, which left the extra frames of each bag unused
   and the site unusable. This opens the full set for one piece. */
.qv{
  position:fixed;inset:0;z-index:90;background:var(--bone);
  overflow:auto;opacity:0;transition:opacity .4s var(--ease);
}
.qv.on{opacity:1}
.qv__close{
  position:fixed;top:22px;right:var(--pad);z-index:2;
  padding-bottom:5px;border-bottom:1px solid currentColor;
}
.qv__inner{display:grid;grid-template-columns:1fr;gap:0;min-height:100%}
@media(min-width:900px){.qv__inner{grid-template-columns:1.25fr .75fr}}
.qv__gallery{display:grid;gap:2px;background:var(--bone);padding:2px;isolation:isolate}
.qv__gallery img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.qv__side{
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2vw,22px);
  padding:clamp(40px,7vw,96px) var(--pad);
}
@media(min-width:900px){.qv__side{position:sticky;top:0;align-self:start;justify-content:center;min-height:100svh}}
.qv__line{color:var(--ink-soft)}
.qv__price{font-size:1.05rem;color:var(--ink-soft)}
.qv__detail{max-width:42ch;color:var(--ink);opacity:.85;font-size:clamp(.95rem,1.15vw,1.04rem)}
.qv__side .btn-solid{width:auto;min-width:230px}
.qv__note{color:var(--ink-soft);opacity:.7}

/* --- card motion ------------------------------------------------------ */
/* A silent loop per piece, held back until hover so it costs nothing on
   load. The still stays underneath, so a failed or blocked video is simply
   the photograph. */
.card__clip{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .55s var(--ease);
  pointer-events:none;
}
.card.is-playing .card__clip{opacity:1}
.card.is-playing .card__media img{opacity:0}

/* Sold out pieces stay on the page. The tag sits on the photograph rather
   than replacing the price, because the price is still the thing a customer
   came to read and the next one will cost the same. */
.card__sold{
  position:absolute;top:0;left:0;z-index:2;
  background:var(--ink);color:var(--bone);
  padding:7px 13px;
}
.card.is-sold .card__media img{opacity:.82}
.card.is-sold:hover .card__media img.a{opacity:0}
.card.is-sold .card__name,.card.is-sold .card__price{opacity:.72}

.card__cue{
  /* --plate-pad died with the inset white plate; the cutouts sit on the
     paper now. The calc was invalid, so this has been pinned to the TOP
     of every card ever since instead of hovering at the bottom. */
  position:absolute;left:50%;bottom:14px;
  transform:translate(-50%,8px);
  background:var(--ink);color:var(--bone);
  padding:9px 16px;border-radius:999px;
  opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease);
  pointer-events:none;
}
.card:hover .card__cue{opacity:1;transform:translate(-50%,0)}

/* staggered entrance, so a row arrives as a sequence rather than a block */
.grid .rv{transition-delay:calc(var(--i,0) * 60ms)}
@media (prefers-reduced-motion:reduce){
  .grid .rv{transition-delay:0ms}
  .card__clip{display:none}
}

/* --- full bleed banner ------------------------------------------------- */
/* The device craftingyarn.com is built on: a photograph edge to edge with one
   huge line over it. The shoot is high key, so every banner carries a scrim;
   without one white type disappears into the sweep. */
.banner{
  position:relative;
  min-height:clamp(420px,62vh,660px);
  display:flex;align-items:flex-end;
  overflow:hidden;background:var(--bone-2);
}
.banner img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 48%;
}
.banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(70,20,44,.62) 0%,rgba(70,20,44,.22) 46%,rgba(70,20,44,0) 78%);
}
.banner__in{
  position:relative;z-index:2;color:#fff;
  padding:clamp(26px,5vw,66px) var(--pad);
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2vw,22px);
}
.banner__eyebrow{opacity:.92}
.banner__title{
  font-weight:600;letter-spacing:-.035em;line-height:.9;
  font-size:clamp(2.6rem,7.4vw,6.4rem);text-wrap:balance;
}
.banner__cta{
  background:#fff;color:var(--ink);
  padding:14px 26px;
  font:var(--label);letter-spacing:var(--label-ls);text-transform:uppercase;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.banner__cta:hover{background:var(--ink);color:#fff}

/* --- horizontal rail ---------------------------------------------------- */
.rail{padding:clamp(56px,8vw,110px) 0 clamp(40px,6vw,80px)}
.rail__head{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 var(--pad);margin-bottom:clamp(22px,3vw,38px);
}
.rail__head h2{
  color:var(--ink);font-weight:500;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.9rem,5vw,4rem);
}
.rail__nav{display:flex;gap:10px;flex:0 0 auto}
.rail__nav button{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.rail__nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.rail__nav button[disabled]{opacity:.3;pointer-events:none}
.rail__track{
  display:flex;gap:var(--gutter);
  padding:0 var(--pad);
  overflow-x:auto;scroll-snap-type:x proximity;
  /* snap aligns a card to the scrollport start, which ignores the track's
     own padding and shunts the first card under the left edge */
  scroll-padding-left:var(--pad);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rail__track::-webkit-scrollbar{display:none}
.rail__track > .card{
  flex:0 0 auto;
  width:clamp(220px,32vw,330px);
  scroll-snap-align:start;
}

/* A picture only landing banner carries no overlay, so no scrim. With the
   second banner gone the hero is the entire first impression, so it is given
   most of the screen rather than a polite two thirds. */
.banner--plain::after,.banner--hero::after{display:none}
.banner--hero{min-height:clamp(540px,88vh,960px)}
.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;
}
.head__link--nav{display:none}
@media(min-width:900px){.head__link--nav{display:inline}}

/* --- collection page --------------------------------------------------- */
/* The filters are Nué's own nameplate, hung on a cord from the rule that
   closes the page title. The rule stops being a divider and becomes the rail
   they hang from, which is why the tags sit under it rather than beside it.
   Brand pink and white only: solid pink plate with white type when selected,
   the same plate drawn as an outline when it is not. */
.collhead{padding:clamp(52px,8vw,96px) var(--pad) 0}
.collhead__bar{
  display:flex;flex-direction:column;gap:10px;
  padding-bottom:clamp(16px,2.2vw,22px);
  border-bottom:1px solid var(--brand);
}
.taglane{
  display:flex;gap:clamp(4px,1vw,16px);align-items:flex-start;
  overflow-x:auto;scrollbar-width:none;
  padding:0 2px clamp(10px,1.6vw,18px);
  perspective:900px;
}
.taglane::-webkit-scrollbar{display:none}
/* The hearts already hang off a rule and carry their own drop; the
   section below does not need to open at full chapter spacing too. */
.collhead + .sec{padding-top:clamp(28px,4vw,56px)}

.filter{
  flex:0 0 auto;padding:0;line-height:0;
  transform-style:preserve-3d;transform-origin:50% 0;
  transition:transform .45s var(--ease);
  cursor:pointer;
}
.filter__heart{width:clamp(86px,10vw,116px);height:auto;overflow:visible}
.filter__cord{stroke:var(--brand);stroke-width:1.4}
.filter__shape{
  fill:none;stroke:var(--brand);stroke-width:2.4;
  stroke-linejoin:round;
  transition:fill .35s var(--ease);
}
.filter__text{
  fill:var(--ink);
  /* sized so the longest word, STATEMENT, keeps clear air inside the lobes */
  font-family:var(--ui);font-size:13px;font-weight:500;
  letter-spacing:1px;text-transform:uppercase;
  transition:fill .35s var(--ease);
}
.filter:hover .filter__shape{fill:var(--brand)}
.filter:hover .filter__text{fill:#fff}
.filter.on .filter__shape{fill:var(--brand)}
.filter.on .filter__text{fill:#fff;font-weight:600}
.filter.on{transform:translateY(4px)}

@media (prefers-reduced-motion:reduce){ .filter{transition:none} }
.card.is-hidden{display:none}

/* --- contact ------------------------------------------------------------ */


/* --- help pages --------------------------------------------------------- */
/* Shipping, returns, care and contact. One column of reading width, left
   aligned rather than centred: these are reference pages, and the eye should
   find the next line where it found the last one. */
.page{padding:clamp(64px,10vw,130px) var(--pad) clamp(72px,11vw,150px)}
.page__in{max-width:1560px;margin:0 auto}
.page__head{
  padding-bottom:clamp(16px,2.2vw,24px);
  border-bottom:1px solid var(--brand);
  display:flex;flex-direction:column;gap:10px;
}
.page__body{max-width:62ch;margin-top:clamp(30px,4vw,52px)}
.page__body p{margin:0 0 1.15em;font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.72}
.page__body p:last-child{margin-bottom:0}
.page__links{display:flex;gap:clamp(18px,3vw,34px);flex-wrap:wrap;margin-top:clamp(34px,5vw,60px)}