/* les amoureuses — store

   Rebuilt on sand rather than black.

   The manual calls the brand dark by default, and for aluminium flight cases
   that is right. Towels are not flight cases: they are sun, salt and time off,
   and a near-black gallery made a leisure product read as a watch launch.

   Nothing here is off-palette. LA—2's own scale runs
   #FBF7F1 · #F3E8D7 · #EBD8BD · #DDC094, the manual sets its own pages on that
   cream, and it lists the colour's role as "quiet ground". So the page became
   the paper, and black became the punctuation — the editorial band, the footer,
   the type. One oxblood accent, used as sparingly as the manual demands. */

@font-face{font-family:Switzer;font-weight:100 900;font-style:normal;font-display:swap;
  src:url("fonts/Switzer-Variable.woff2") format("woff2-variations")}
@font-face{font-family:Switzer;font-weight:100 900;font-style:italic;font-display:swap;
  src:url("fonts/Switzer-VariableItalic.woff2") format("woff2-variations")}

:root{
  /* LA—2 scale, transcribed from the manual's colour-scale page */
  --sand-50:#FBF7F1;       /* the page */
  --sand-100:#F3E8D7;      /* LA—2 proper — bands, card grounds */
  --sand-200:#EBD8BD;      /* accent panel */
  --sand-300:#DDC094;      /* warm hairline */

  --deep:#000000;          /* LA—3 */
  --light:#F5F5F5;         /* LA—4 */
  --accent:#9E0000;        /* LA—1 — accent only, never a field */

  /* ink on sand */
  --ink:#141414;
  --ink-70:rgba(20,20,20,.70);
  --ink-45:rgba(20,20,20,.50);
  --ink-28:rgba(20,20,20,.32);
  --ink-12:rgba(20,20,20,.14);
  --ink-06:rgba(20,20,20,.08);

  --gutter:clamp(20px,5vw,64px);
  --measure:62ch;
  --tr-display:-0.035em;
  --tr-label:0.18em;
}

/* Sections that stay dark keep the same variable names, so every component
   below works on either ground without a second set of rules. */
.on-deep{
  --ink:var(--light);
  --ink-70:rgba(245,245,245,.72);
  --ink-45:rgba(245,245,245,.48);
  --ink-28:rgba(245,245,245,.30);
  --ink-12:rgba(245,245,245,.14);
  --ink-06:rgba(245,245,245,.07);
  background:var(--deep);color:var(--light)
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--sand-50);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;font-family:Switzer,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;font-size:16px;line-height:1.6;background:var(--sand-50);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- type ---------- */
.label{font-size:11px;font-weight:500;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--ink-45)}
.display{font-weight:400;letter-spacing:var(--tr-display);line-height:1.02;
  font-size:clamp(36px,6.6vw,88px)}
.display--sm{font-size:clamp(27px,3.7vw,46px)}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--ink-70);
  max-width:46ch;font-weight:300}
.rule{height:1px;background:var(--ink-12);border:0;margin:0}

/* ---------- marks ---------- */
.mark{display:block;color:currentColor;line-height:0}
.mark svg{width:100%;height:auto;display:block;fill:currentColor}
.mark--wordmark{width:clamp(124px,12vw,164px)}
.mark--monogram{width:30px}

/* ---------- header ----------
   Over the hero photograph it is white and transparent; once the page scrolls
   onto sand it flips to ink on cream. One attribute, both states. */
.head{position:fixed;inset:0 0 auto;z-index:60;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:20px var(--gutter);color:var(--ink);
  background:var(--sand-50);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease,padding .4s ease}
.head[data-solid]{border-bottom-color:var(--ink-12)}
.head__nav{display:flex;gap:26px;align-items:center}
.head__nav--end{justify-content:flex-end}
.head a.nav{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-70);padding:6px 0;position:relative}
.head a.nav:hover{color:var(--ink)}
.head__brand{justify-self:center}

/* ---------- hero: photograph and copy, side by side ----------
   The old hero floated one towel on black. It was handsome and it was a
   product still-life — no sun, no sand, nothing to want. This splits the
   screen: the towel photographed in place on the right, the claim on cream on
   the left. The rotation stays; what rotates is now a scene, not a swatch. */
.hero{min-height:100svh;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch}
.hero__copy{display:grid;align-content:center;gap:22px;
  padding:clamp(112px,14vh,160px) clamp(28px,4.5vw,72px) clamp(56px,8vh,90px) var(--gutter)}
.hero__line{margin:0;font-weight:300;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(38px,5.2vw,74px);max-width:11ch;text-wrap:balance}
.hero__sub{margin:0;max-width:36ch;color:var(--ink-70);font-size:16.5px;
  font-weight:300;line-height:1.6}
.hero__photo{position:relative;overflow:hidden;background:var(--sand-200)}
.hero__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .9s ease}
.hero__meta{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  padding:clamp(18px,2.4vw,30px);color:var(--light);
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.22) 42%,rgba(0,0,0,0))}
.hero__where{font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.hero__coord{font-size:11px;letter-spacing:.06em;opacity:.72}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- link with a drawn underline ---------- */
.ln{display:inline-flex;align-items:center;gap:9px;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;padding-bottom:4px;
  border-bottom:1px solid var(--ink-28);transition:border-color .3s,color .3s}
.ln:hover{border-bottom-color:var(--accent);color:var(--ink)}
.ln::after{content:"";width:16px;height:1px;background:currentColor;
  transition:width .3s ease}
.ln:hover::after{width:24px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;
  background:var(--deep);color:var(--light);padding:15px 30px;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;min-height:48px;
  transition:background .25s,color .25s}
.btn:hover{background:var(--accent)}
.btn--line{background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink-28)}
.btn--line:hover{background:var(--ink);color:var(--sand-50);box-shadow:none}

/* ---------- sections ---------- */
.section{padding:clamp(62px,10vh,132px) var(--gutter)}
.section__head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(26px,4.5vh,50px)}
.section__title{margin:0;font-weight:300;letter-spacing:-.025em;
  font-size:clamp(26px,3.2vw,42px);line-height:1.08}

/* ---------- collection grid ---------- */
.grid{display:grid;gap:clamp(18px,2.4vw,34px);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{display:block;position:relative}
.card-media{position:relative;aspect-ratio:1/2;overflow:hidden;
  background:var(--sand-100)}
.card-media img,.card-media video{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover}
.card-media__clip{opacity:0;transition:opacity .45s ease}
.card-media[data-playing] .card-media__clip{opacity:1}
.card__foot{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-top:13px}
.card__name{font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.card__price{font-size:12.5px;color:var(--ink-45)}
.card:hover .card__name{color:var(--accent)}

/* ---------- bands ----------
   .band  cream, the quiet change of pace
   .band--sand  the deeper accent panel, NAMI's pale-blue moment in our palette
   .band--deep  black, used at most once a page */
.band{background:var(--sand-100)}
.band--sand{background:var(--sand-200)}

/* ---------- editorial: a line over a full-bleed photograph ---------- */
/* Centred, the line landed on the towel and fought its own printed lettering.
   The scene keeps its clean sand at the left, so the copy goes there and the
   scrim runs sideways rather than top-to-bottom. */
.editorial{position:relative;min-height:min(72svh,640px);display:grid;
  align-items:center;justify-items:start;overflow:hidden;
  padding:clamp(56px,9vh,110px) var(--gutter);color:var(--light)}
.editorial img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 56%}
.editorial::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.34) 34%,
                             rgba(0,0,0,.06) 58%,rgba(0,0,0,.12) 100%)}
.editorial > .editorial__in{position:relative;z-index:2;display:grid;
  justify-items:start;text-align:left;gap:22px;max-width:21ch}
.editorial__line{margin:0;font-weight:300;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(32px,5vw,68px);text-wrap:balance}
.editorial__line em{font-style:italic;font-weight:300}
.editorial .label{color:rgba(245,245,245,.72)}
.editorial .btn--line{color:var(--light);box-shadow:inset 0 0 0 1px rgba(245,245,245,.5)}
.editorial .btn--line:hover{background:var(--light);color:var(--deep);box-shadow:none}

/* ---------- footer ---------- */
.foot{padding:clamp(52px,8vh,88px) var(--gutter) 40px;
  display:grid;gap:44px;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
.foot__h{margin:0 0 14px;font-size:11px;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--ink-45);font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{font-size:13px;color:var(--ink-70)}
.foot a:hover{color:var(--ink)}
.foot__brand{display:grid;gap:16px;align-content:start}
.foot__tag{font-size:13px;font-style:italic;color:var(--ink-45)}
.foot__legal{grid-column:1/-1;display:flex;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--ink-12);
  font-size:11px;color:var(--ink-45)}

@media (max-width:900px){
  .foot{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- rail: a scrollable row, not a wrapped grid ----------
   Sixteen cards in a grid leaves a ragged half-row and a dead corner. A rail
   keeps the row unbroken and is native scroll-snap, so it is a real swipe on
   touch with no library. */
.rail{position:relative}
/* No negative margins. Bleeding the track with margin-inline:-gutter made it
   wider than the viewport and pushed the whole page into horizontal overflow.
   The rail's section drops its own inline padding and the track carries it. */
.rail__track{display:flex;gap:clamp(14px,1.8vw,26px);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:0 var(--gutter) 4px}
.rail__track::-webkit-scrollbar{display:none}
.rail__track > .card{flex:0 0 clamp(184px,20vw,244px);scroll-snap-align:start}
.rail__nav{position:absolute;top:0;bottom:64px;width:56px;display:grid;
  place-items:center;z-index:4;border:0;background:none;color:var(--ink);
  opacity:0;transition:opacity .3s ease;pointer-events:none}
.rail:hover .rail__nav{opacity:1;pointer-events:auto}
.rail__nav[disabled]{opacity:0!important;pointer-events:none}
.rail__nav--prev{left:0}
.rail__nav--next{right:0}
.rail__nav span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(251,247,241,.92);backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px var(--ink-12);font-size:15px;line-height:1;
  transition:background .25s,color .25s,box-shadow .25s}
.rail__nav:hover span{background:var(--accent);color:var(--light);
  box-shadow:0 0 0 1px var(--accent)}
@media (hover:none){.rail__nav{display:none}}
/* the section that hosts a rail gives up its inline padding to the track */
.section--rail{padding-inline:0}
.section--rail .section__head{padding-inline:var(--gutter)}

/* ---------- story ---------- */
.figure-row{display:grid;gap:clamp(10px,1.4vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.figure-row img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.bleed{margin-inline:calc(var(--gutter) * -1)}
.bleed img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 45%}
.keywords{display:flex;flex-wrap:wrap;gap:10px 0;list-style:none;margin:0;padding:0}
.keywords li{font-size:clamp(15px,1.8vw,22px);font-weight:300;letter-spacing:-.01em;
  color:var(--ink-70);padding-right:18px;margin-right:18px;
  border-right:1px solid var(--ink-12);line-height:1.3}
.keywords li:last-child{border-right:0}
.swatches{display:flex;gap:0;margin-top:14px}
.swatches div{flex:1;height:76px;display:grid;align-items:end;padding:9px 11px;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(28px,5vw,72px)}

/* ---------- product ----------
   Towel and photograph side by side at matched height, each keeping its own
   proportion. Two earlier attempts failed: a shared stage tall enough for the
   1:2 towel stranded the 3:4 photograph in dead space, and giving the stage
   .card-media meant its absolute full-bleed img rule fought the contained one
   and drew the artwork twice. */
.pdp{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(28px,4vw,64px);align-items:start}
/* Four images now, not two. Side by side they would have been thumbnails, so
   the media column scrolls and the buy panel is what stays put — the standard
   luxury PDP, and the only arrangement that gives each photograph real size. */
.pdp__media{display:grid;gap:clamp(10px,1.4vw,20px)}
.pdp__info{position:sticky;top:104px;align-self:start}
.pdp__towel,.pdp__shot{margin:0;position:relative;overflow:hidden;
  background:var(--sand-100)}
/* height is definite so the 1:2 ratio can resolve a width from it and centre */
.pdp__towel{height:min(88svh,880px);aspect-ratio:1/2;margin-inline:auto}
.pdp__shot{aspect-ratio:3/4;width:100%}
.pdp__towel img,.pdp__shot img,.pdp__towel video{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover}
.pdp__towel video{opacity:0;transition:opacity .45s ease}
.pdp__towel[data-playing] video{opacity:1}
.essay p{color:var(--ink-70);font-size:15.5px;line-height:1.65;margin:0 0 15px;max-width:52ch}
.essay p:last-child{margin-bottom:0}
.pal{display:flex;gap:7px;margin-top:9px}
.pal span{width:26px;height:26px;display:inline-block;box-shadow:0 0 0 1px var(--ink-12)}
.pdp__price{margin:26px 0 6px;font-size:24px;font-weight:300}

/* facts as a definition list — it is literally term/definition, and it gives
   assistive tech and search engines the pairing for free */
.facts{margin:0;display:grid;gap:16px}
.facts dt{margin:0}
.facts dd{margin:7px 0 0;color:var(--ink-70);font-size:14px;line-height:1.6}

.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--ink-12)}
.faq summary{cursor:pointer;padding:20px 2px;font-size:15px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary span:last-child{color:var(--accent);font-size:17px;line-height:1}
.faq details[open] summary span:last-child{transform:rotate(45deg)}
.faq p{margin:0;padding:0 2px 22px;color:var(--ink-70);max-width:62ch}

.form{max-width:520px;display:grid;gap:18px}
.form label{display:grid;gap:7px}
.form input,.form textarea{background:transparent;border:0;
  border-bottom:1px solid var(--ink-28);color:var(--ink);padding:12px 2px;
  font:inherit;font-size:16px;border-radius:0}
.form input:focus,.form textarea:focus{outline:none;border-bottom-color:var(--accent)}
.form textarea{resize:vertical}
.form .btn{justify-self:start;margin-top:4px}

/* ================= mobile ================= */
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  margin-right:-10px}
.menu-btn span{display:block;width:20px;height:1px;background:currentColor;position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:20px;
  height:1px;background:currentColor;transition:transform .3s ease}
.menu-btn span::before{top:-6px} .menu-btn span::after{top:6px}
body[data-menu] .menu-btn span{background:transparent}
body[data-menu] .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
body[data-menu] .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:55;background:var(--sand-100);color:var(--ink);
  display:grid;align-content:center;gap:6px;padding:0 var(--gutter);
  opacity:0;pointer-events:none;transition:opacity .3s ease}
body[data-menu] .menu{opacity:1;pointer-events:auto}
body[data-menu] .head{color:var(--ink)}
.menu a{font-size:30px;font-weight:300;letter-spacing:-.02em;padding:11px 0;
  border-bottom:1px solid var(--ink-06)}

@media (max-width:860px){
  .head{grid-template-columns:1fr auto;padding:14px var(--gutter)}
  .head__nav{display:none}
  .head__brand{justify-self:start;display:flex;align-items:center;min-height:44px}
  .menu-btn{display:flex}

  .hero{grid-template-columns:1fr;min-height:auto;
    grid-template-areas:"photo" "copy"}
  .hero__photo{grid-area:photo;width:100%;height:min(62svh,560px)}
  .hero__copy{grid-area:copy;padding:clamp(30px,6vh,48px) var(--gutter) clamp(40px,7vh,60px);
    gap:18px}
  .hero__line{font-size:clamp(34px,10vw,48px);max-width:none}

  .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .rail__track > .card{flex:0 0 60vw}

  .pdp{grid-template-columns:1fr;gap:26px}
  /* Stacked full-width, the two 1:2 images ran 1572px tall and pushed the
     product name to 1390px and the price to 1962px — two and a half screens
     before a phone buyer sees what it costs. A height-capped swipe gallery
     keeps the imagery large and brings name, price and button onto screen one.
     Slides sit at 86% so the next one peeks: that is the affordance, no dots. */
  .pdp__media{position:static;flex-direction:row;align-items:stretch;
    gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .pdp__media::-webkit-scrollbar{display:none}
  .pdp__towel,.pdp__shot{flex:0 0 86%;scroll-snap-align:center;
    height:min(70svh,620px);width:auto;aspect-ratio:auto}
  .pdp__towel:only-child{flex-basis:100%}
  .pdp__towel img,.pdp__shot img{position:absolute;inset:0;
    width:100%;height:100%;object-fit:contain}
  .pdp__towel video{position:absolute;inset:0}
  .essay p{max-width:none}

  .editorial{min-height:62svh;justify-items:stretch}
  .editorial > .editorial__in{max-width:none}
  .figure-row{grid-template-columns:1fr;gap:12px}
  .two-col{gap:32px}
  .bleed img{aspect-ratio:4/3}
  .keywords li{font-size:15px;padding-right:12px;margin-right:12px}
  .swatches div{height:60px;font-size:12px;padding:8px 5px;letter-spacing:0}

  .foot{grid-template-columns:1fr;gap:30px}
  .foot__legal{flex-direction:column;gap:8px}
  .display{font-size:clamp(30px,9vw,44px)}

  /* Letterspaced 10.5px caps read as luxury on a monitor and as a usability
     failure on a phone — Lighthouse's legible-font audit only runs under mobile
     emulation. Desktop keeps its scale; the phone gets the 12px floor. */
  .label,.foot__h,.foot__legal span,.hero__coord,.ln,.head a.nav{font-size:12px}
}

@media (max-width:420px){
  .grid{grid-template-columns:1fr;gap:18px}
  .rail__track > .card{flex:0 0 74vw}
}

/* every tappable thing clears 44px */
@media (hover:none){
  .head a.nav,.foot a,.ln{min-height:44px;display:inline-flex;align-items:center}
}

/* Flat-lays are shot on seamless white. On a sand ground that white has to look
   chosen, not leaked — so it becomes a plate the towel sits on. */
.plate{background:#fff;padding:clamp(20px,3vw,44px);
  box-shadow:0 24px 60px -34px rgba(20,20,20,.45)}
.plate img{width:100%;height:auto}

/* the same band, used as a page header — shorter, and it starts under the
   fixed bar rather than behind it */
.editorial--head{min-height:min(46svh,420px);padding-top:calc(clamp(56px,9vh,110px) + 34px)}
.editorial--head .editorial__line{font-size:clamp(30px,4.2vw,58px)}
@media (max-width:860px){.editorial--head{min-height:38svh}}

/* ---------- waitlist ---------- */
.wl{display:grid;gap:10px;max-width:440px}
.wl__row{display:flex;gap:10px;flex-wrap:wrap}
.wl input[type=email]{flex:1 1 200px;background:transparent;border:0;
  border-bottom:1px solid var(--ink-28);color:var(--ink);padding:12px 2px;
  font:inherit;font-size:16px;border-radius:0;min-height:48px}
.wl input[type=email]:focus{outline:none;border-bottom-color:var(--accent)}
.wl__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;margin:0}
.wl__note{margin:0;font-size:12.5px;color:var(--ink-45);max-width:38ch}
.wl__ok{margin:0;font-size:14.5px;color:var(--ink)}
.join{max-width:560px;margin-inline:auto;text-align:center;display:grid;
  justify-items:center;gap:2px}
.join .wl{margin-top:22px;width:100%}
.join .wl__row{justify-content:center}
.join .wl__note{margin-inline:auto}