/* ==========================================================================
   Le Pin — marketing sections
   Kept out of the Webflow-generated CSS so a re-export can't overwrite it.
   Motion language matches the hero: expo easing + the template's
   CustomEase "slideshow-wipe" (0.625, 0.05, 0, 1).
   ========================================================================== */

:root {
  /* Warm paper and a deep blue-charcoal rather than pure black — the ink is pulled
     toward the dial so the whole page sits in the product's own colour world. */
  --paper: #f2f0ed;
  --paper-dim: #e6e3de;
  --ink: #14171a;
  --ink-deep: #0e1013;
  --ink-soft: #1c2126;

  --blue: #669fca;        /* sampled from the dial highlight */
  --blue-deep: #374f6a;   /* sampled from the dial centre   */
  --tan: #955e4f;         /* sampled from the leather strap */

  /* hairlines, not borders */
  --rule: 1px;
  --line-ink: rgba(20, 23, 26, .14);
  --line-paper: rgba(242, 240, 237, .16);

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --display: 'Haffer XH', Haffer, Arial, sans-serif;
  --sans: Haffer, Arial, sans-serif;
  --mono: 'Haffer Mono', ui-monospace, Menlo, monospace;

  --ease: cubic-bezier(.625, .05, 0, 1);
  --nav-h: 5.5rem;
}

/* --------------------------------------------------------------- primitives */

.lp {
  --line: var(--line-ink);
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  position: relative;
  z-index: 1;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }

.lp-section { padding: clamp(5rem, 12vw, 11rem) var(--gutter); position: relative; }
.lp-section.is--ink { background: var(--ink); color: var(--paper); --line: var(--line-paper); }
.lp-section.is--blue { background: var(--blue-deep); color: var(--paper); --line: var(--line-paper); }

/* brutalist section marker: 01 / SOMETHING */
.lp-eyebrow {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding-bottom: 1.35rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: var(--rule) solid var(--line);
}
.lp-eyebrow__num { opacity: .4; }
.lp-eyebrow__line { flex: 1 1 auto; }

/* display type — tight, heavy, brutal */
.lp-display {
  font-family: var(--display);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.035em;
  margin: 0;
  font-size: clamp(2.3rem, 6.6vw, 6.4rem);
  text-wrap: balance;
}
.lp-display.is--huge { font-size: clamp(2.9rem, 11vw, 11rem); line-height: .88; }

.lp-lede {
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.55;
  max-width: 44ch;
  margin: 0;
  opacity: .62;
}

/* line-mask reveal target (GSAP SplitText writes the inner spans) */
.lp-reveal .lp-line-mask { overflow: hidden; display: block; }

/* ------------------------------------------------------------------ ticker */

.lp-ticker {
  background: var(--ink);
  color: var(--paper);
  border-top: var(--rule) solid var(--ink);
  border-bottom: var(--rule) solid var(--ink);
  overflow: hidden;
  padding: clamp(.9rem, 2vw, 1.6rem) 0;
  user-select: none;
}
.lp-ticker__track { display: flex; width: max-content; will-change: transform; }
.lp-ticker__group { display: flex; align-items: center; flex: 0 0 auto; }
.lp-ticker__item {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4.2vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  padding: 0 1.5rem;
  white-space: nowrap;
  flex: 0 0 auto;
}
.lp-ticker__dot { width: .5em; height: .5em; background: var(--blue); flex: 0 0 auto; }

/* --------------------------------------------------------------- manifesto */

.lp-manifesto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .lp-manifesto__grid { grid-template-columns: 1.55fr .85fr; align-items: end; }
}
.lp-manifesto__aside { display: flex; flex-direction: column; gap: 1.25rem; }
.lp-manifesto__mark { width: clamp(2.5rem, 5vw, 4rem); height: auto; opacity: .9; }

/* ---------------------------------------------------------------- showcase */

.lp-showcase { padding-bottom: 0; }
.lp-showcase__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) {
  .lp-showcase__grid { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
}

.lp-showcase__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-soft);
}
@media (min-width: 900px) {
  .lp-showcase__media { position: sticky; top: clamp(5rem, 12vh, 8rem); }
}
.lp-showcase__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: transform, opacity;
}
.lp-showcase__img.is--active { opacity: 1; }

.lp-showcase__list { list-style: none; margin: 0; padding: 0 0 clamp(4rem, 10vw, 9rem); }
.lp-showcase__item { padding: clamp(2rem, 5vw, 3.25rem) 0; border-top: var(--rule) solid var(--line); }
.lp-showcase__item:last-child { border-bottom: var(--rule) solid var(--line); }
.lp-showcase__idx {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; opacity: .4; display: block; margin-bottom: 1rem; letter-spacing: .24em; font-size: .6875rem;
}
.lp-showcase__h {
  font-family: var(--display); font-size: clamp(1.5rem, 2.55vw, 2.25rem);
  line-height: 1.06; letter-spacing: -.03em; margin: 0 0 .95rem;
}
.lp-showcase__h > span:first-child { text-wrap: balance; }
.lp-showcase__p { margin: 0; opacity: .6; line-height: 1.6; max-width: 40ch; }

/* -------------------------------------------------------------------- band */

.lp-band { position: relative; height: clamp(18rem, 55vh, 34rem); overflow: hidden; background: var(--ink); }
.lp-band__img {
  position: absolute; inset: -12% 0;
  width: 100%; height: 124%;
  object-fit: cover;
  will-change: transform;
}
.lp-band__caption {
  position: absolute; inset: auto var(--gutter) clamp(1.5rem, 4vw, 2.5rem);
  font-family: var(--mono); font-size: clamp(.68rem, 1vw, .78rem);
  letter-spacing: .18em; text-transform: uppercase; color: var(--paper);
  display: flex; justify-content: space-between; gap: 1rem;
  mix-blend-mode: difference;
}

/* ------------------------------------------------------------------- specs */

.lp-specs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: var(--rule) solid var(--line);
  border-left: var(--rule) solid var(--line);
}
@media (min-width: 760px) { .lp-specs__grid { grid-template-columns: repeat(4, 1fr); } }

.lp-spec {
  border-right: var(--rule) solid var(--line);
  border-bottom: var(--rule) solid var(--line);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  min-height: clamp(9rem, 18vw, 13rem);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.lp-spec__k {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .24em;
  text-transform: uppercase; opacity: .4;
}
.lp-spec__v {
  font-family: var(--display); font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: .9; letter-spacing: -.04em; display: flex; align-items: baseline; gap: .12em;
}
.lp-spec__unit { font-family: var(--sans); font-size: .3em; letter-spacing: 0; opacity: .55; }

/* wipe that sweeps each cell in on scroll — GSAP animates --wipe from 1 to 0 */
html.w-mod-js .lp-spec { --wipe: 1; }
.lp-spec { --wipe: 0; }
.lp-spec::after {
  content: ''; position: absolute; inset: 0; background: var(--ink);
  transform: scaleY(var(--wipe)); transform-origin: bottom;
  will-change: transform; pointer-events: none;
}
.lp-section.is--ink .lp-spec::after { background: var(--paper); }

/* ----------------------------------------------------------------- gallery */

.lp-gallery__grid { display: grid; grid-template-columns: 1fr; gap: clamp(.75rem, 1.5vw, 1.25rem); }
@media (min-width: 760px) { .lp-gallery__grid { grid-template-columns: repeat(6, 1fr); } }

.lp-tile { position: relative; overflow: hidden; background: var(--ink-soft); aspect-ratio: 4/5; }
.lp-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.04); will-change: transform;
  transition: transform .8s cubic-bezier(.625,.05,0,1);
}
.lp-tile:hover img { transform: scale(1); }
.lp-tile__label {
  position: absolute; left: 0; bottom: 0;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  background: var(--paper); color: var(--ink); padding: .45rem .7rem;
  transform: translateY(101%); transition: transform .5s cubic-bezier(.625,.05,0,1);
}
.lp-tile:hover .lp-tile__label { transform: translateY(0); }

/* Spans are chosen so every row sums to exactly 6: (4+2) (2+4) (3+3).
   Items in a row equalise to the tallest, which is what we want here. */
@media (min-width: 760px) {
  .lp-tile.is--w4 { grid-column: span 4; aspect-ratio: 16/10; }
  .lp-tile.is--w2 { grid-column: span 2; aspect-ratio: 4/5; }
  .lp-tile.is--w3 { grid-column: span 3; aspect-ratio: 3/2; }
}

/* clip reveal driven by ScrollTrigger.
   Scoped to .w-mod-js (Webflow sets it on <html>) so the content is visible by
   default — if the JS ever fails to run, nothing stays hidden. */
html.w-mod-js .lp-clip { clip-path: inset(0 0 100% 0); will-change: clip-path; }

/* --------------------------------------------------------------------- CTA */

.lp-cta { text-align: center; }
.lp-cta__price {
  font-family: var(--mono); font-size: clamp(.7rem, 1vw, .82rem);
  letter-spacing: .2em; text-transform: uppercase; opacity: .6; margin: 0 0 1.5rem;
}
.lp-cta__btn {
  display: inline-flex; align-items: center; gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.75rem, 4vw, 2.75rem);
  border: 2px solid currentColor;
  font-family: var(--mono); font-size: clamp(.75rem, 1.1vw, .9rem);
  letter-spacing: .18em; text-transform: uppercase;
  position: relative; overflow: hidden; isolation: isolate;
}
.lp-cta__btn span { position: relative; z-index: 1; transition: color .5s cubic-bezier(.625,.05,0,1); }
.lp-cta__btn::before {
  content: ''; position: absolute; inset: 0; background: var(--paper);
  transform: scaleY(0); transform-origin: bottom; z-index: 0;
  transition: transform .5s cubic-bezier(.625,.05,0,1);
}
.lp-cta__btn:hover::before { transform: scaleY(1); }
.lp-cta__btn:hover span { color: var(--ink); }
.lp-cta__arrow { position: relative; z-index: 1; transition: transform .5s cubic-bezier(.625,.05,0,1); }
.lp-cta__btn:hover .lp-cta__arrow { transform: translateX(.35rem); }

/* ------------------------------------------------------------------ footer */

.lp-footer { --line: var(--line-paper); background: var(--ink-deep); color: var(--paper); padding: clamp(3rem, 7vw, 5rem) var(--gutter) clamp(1.5rem, 3vw, 2rem); }
.lp-footer__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 760px) { .lp-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.lp-footer__mark { width: clamp(2.2rem, 4vw, 3rem); height: auto; margin-bottom: 1.25rem; }
.lp-footer__h {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; opacity: .45; margin: 0 0 1rem;
}
.lp-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.lp-footer__list a { opacity: .8; transition: opacity .3s; }
.lp-footer__list a:hover { opacity: 1; }
.lp-footer__bar {
  margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.25rem;
  border-top: var(--rule) solid var(--line-paper);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; opacity: .5;
}

/* ------------------------------------------------- reduced-motion fallback */

@media (prefers-reduced-motion: reduce) {
  .lp-clip { clip-path: none !important; }
  .lp-spec::after { display: none; }
  .lp *, .lp *::before, .lp *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =====================================================================
   Fixed nav over the marketing sections
   ---------------------------------------------------------------------
   .nav is color:#fff for the hero. Over the light sections below it was
   effectively invisible, so once the hero is scrolled past it becomes a
   solid ink bar — brutal, high contrast, and legible on every section.
   ===================================================================== */

.nav::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 100%;
  background: var(--ink);
  border-bottom: 1px solid rgba(244, 244, 244, .18);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .55s cubic-bezier(.625, .05, 0, 1);
  z-index: -1;
}
.nav.is--stuck::after { transform: scaleY(1); }

/* the nav's own children need to sit above that bar */
.nav-container { position: relative; z-index: 1; }

/* ---------------------------------------------- showcase: active row */

.lp-showcase__item { opacity: .38; transition: opacity .55s cubic-bezier(.625,.05,0,1); }
.lp-showcase__item.is--active { opacity: 1; }
@media (max-width: 899px) { .lp-showcase__item { opacity: 1; } }

/* =====================================================================
   Document pages (terms, privacy, shipping, FAQ, instructions…)
   ===================================================================== */

.lp-doc-head {
  padding: clamp(8rem, 18vh, 13rem) var(--gutter) clamp(3rem, 7vw, 5rem);
  border-bottom: var(--rule) solid var(--line-ink);
}
.lp-doc-head__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem, 8vw, 6rem); line-height: .92; letter-spacing: -.035em;
  margin: 0; text-wrap: balance;
}
.lp-doc-head__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-family: var(--mono); font-size: clamp(.66rem, 1vw, .76rem);
  letter-spacing: .18em; text-transform: uppercase;
  padding-bottom: 1.1rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: var(--rule) solid currentColor;
}
.lp-doc-head__meta a { opacity: .55; }
.lp-doc-head__meta a:hover { opacity: 1; }

.lp-doc { padding: clamp(3rem, 8vw, 5.5rem) var(--gutter) clamp(4rem, 10vw, 7rem); }
.lp-doc__body { max-width: 74ch; font-size: clamp(.98rem, 1.15vw, 1.08rem); line-height: 1.62; }

.lp-doc__body > :first-child { margin-top: 0; }
.lp-doc__body p { margin: 0 0 1.2em; opacity: .78; }
.lp-doc__body h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1; letter-spacing: -.03em;
  margin: 2.8em 0 .9em; padding-top: 1em; border-top: var(--rule) solid var(--line-ink);
}
.lp-doc__body h3 {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.2;
  margin: 2.2em 0 .6em; letter-spacing: -.01em;
}
.lp-doc__body h4 {
  font-family: var(--mono); font-weight: 500; font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase; opacity: .55;
  margin: 2em 0 .7em;
}
.lp-doc__body ul, .lp-doc__body ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.lp-doc__body li { margin-bottom: .6em; opacity: .78; }
.lp-doc__body ul { list-style: none; padding-left: 1.2em; }
.lp-doc__body ul > li { position: relative; }
.lp-doc__body ul > li::before {
  content: ''; position: absolute; left: -1.2em; top: .62em;
  width: .34em; height: .34em; background: var(--blue);
}
.lp-doc__body strong, .lp-doc__body b { font-weight: 600; opacity: 1; }
.lp-doc__body a { text-decoration: underline; text-underline-offset: .18em; }
.lp-doc__body a:hover { color: var(--blue-deep); }
.lp-doc__body hr { border: 0; border-top: var(--rule) solid var(--line-ink); margin: 2.5em 0; }

/* index of the other documents, shown at the foot of every doc page */
.lp-doc-nav { border-top: var(--rule) solid var(--line-ink); padding: clamp(2.5rem, 6vw, 4rem) var(--gutter); }
.lp-doc-nav__h {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; opacity: .45; margin: 0 0 1.5rem;
}
.lp-doc-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 0;
}
@media (min-width: 760px) { .lp-doc-nav__list { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem,5vw,4rem); } }
.lp-doc-nav__list li { border-top: var(--rule) solid var(--line-ink); }
.lp-doc-nav__list a {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .95rem 0; font-size: 1.02rem;
  transition: padding-left .45s cubic-bezier(.625,.05,0,1), opacity .3s;
}
.lp-doc-nav__list a:hover { padding-left: .6rem; }
.lp-doc-nav__list a[aria-current="page"] { opacity: .35; pointer-events: none; }
.lp-doc-nav__n { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; opacity: .4; }

/* =====================================================================
   Header — pine mark, cart, menu
   ===================================================================== */

.nav-actions { display: flex; align-items: center; gap: clamp(.25rem, 1.5vw, .75rem); }

.nav-icon {
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  color: inherit; cursor: pointer; position: relative;
  border-radius: 0;
}
.nav-icon svg { width: 1.1875rem; height: 1.1875rem; display: block; overflow: visible; }
.nav-icon::after {
  content: ''; position: absolute; inset: auto 50% .45rem; height: 1px; width: 0;
  background: currentColor; opacity: .5;
  transition: width .5s var(--ease), left .5s var(--ease), right .5s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .nav-icon:hover::after { width: 1.15rem; left: calc(50% - .575rem); right: auto; }
}
.nav-icon:focus-visible { outline: 1px solid currentColor; outline-offset: -6px; }

.nav-cart__count {
  position: absolute; top: .45rem; right: .4rem;
  min-width: 1.05em; height: 1.05em; padding: 0 .25em;
  background: var(--blue); color: var(--ink-deep);
  font-family: var(--mono); font-size: .5625rem; font-weight: 500;
  line-height: 1.05em; text-align: center; letter-spacing: 0;
}

/* hamburger: two rules that cross into an X */
.nav-burger__box { width: 1.25rem; height: .5rem; position: relative; }
.nav-burger__line {
  position: absolute; left: 0; width: 100%; height: 1px;
  background: currentColor;
  transition: transform .55s var(--ease), opacity .3s;
}
.nav-burger__line:nth-child(1) { top: 0; }
.nav-burger__line:nth-child(2) { bottom: 0; }
body.menu-open .nav-burger__line:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.menu-open .nav-burger__line:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* =====================================================================
   Full-screen menu
   ===================================================================== */

.lp-menu {
  position: fixed; inset: 0; z-index: 150;
  background: var(--ink-deep); color: var(--paper);
  --line: var(--line-paper);
  display: grid; grid-template-columns: 1fr;
  visibility: hidden; pointer-events: none;
}
.lp-menu.is--open { visibility: visible; pointer-events: auto; }
@media (min-width: 900px) { .lp-menu { grid-template-columns: 1.25fr .75fr; } }

.lp-menu__panel {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + clamp(1.5rem, 5vh, 3.5rem)) var(--gutter) clamp(2rem, 6vh, 3.5rem);
  overflow-y: auto;
}
.lp-menu__veil {
  position: absolute; inset: 0; background: var(--ink-deep);
  transform: scaleY(0); transform-origin: top; z-index: 2; pointer-events: none;
}

.lp-menu__list { list-style: none; margin: 0; padding: 0; }
.lp-menu__list li { overflow: hidden; }
.lp-menu__link {
  display: flex; align-items: baseline; gap: 1.1rem;
  padding: clamp(.3rem, 1.2vh, .7rem) 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 5.2vw, 3.6rem); line-height: 1.12;
  letter-spacing: -.035em;
  transition: opacity .5s var(--ease);
}
.lp-menu__n {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .24em;
  opacity: .35; transform: translateY(-.55em); flex: 0 0 auto;
}
@media (hover: hover) and (pointer: fine) {
  .lp-menu__list:hover .lp-menu__link { opacity: .32; }
  .lp-menu__list .lp-menu__link:hover { opacity: 1; }
}

.lp-menu__meta {
  display: flex; flex-wrap: wrap; gap: .6rem 2.5rem;
  padding-top: clamp(1.5rem, 4vh, 2.5rem);
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  border-top: var(--rule) solid var(--line);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .2em;
  text-transform: uppercase; opacity: .5;
}
.lp-menu__meta a { text-transform: none; letter-spacing: .08em; }

.lp-menu__media { position: relative; overflow: hidden; display: none; }
@media (min-width: 900px) { .lp-menu__media { display: block; } }
.lp-menu__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-menu__media figcaption {
  position: absolute; inset: auto var(--gutter) clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .24em;
  text-transform: uppercase; display: flex; justify-content: space-between; gap: 1rem;
}

body.menu-open { overflow: hidden; }
/* the header sits above the menu so the mark and the close control stay put */
.nav { z-index: 200; }
body.menu-open .nav::after { transform: scaleY(1); }
body.menu-open .nav-cart { opacity: 0; pointer-events: none; transition: opacity .3s; }

/* =====================================================================
   Showcase — sticky media on mobile too, and rows are real buttons
   ===================================================================== */

.lp-showcase__btn {
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; border-radius: 0;
  width: 100%; padding: 0; margin: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  display: block; position: relative;
}
.lp-showcase__btn:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }

/* affordance: a hairline that draws in, plus a caret */
.lp-showcase__h { display: flex; align-items: baseline; gap: .5em; }
.lp-showcase__caret {
  font-family: var(--sans); font-size: .34em; font-weight: 400; opacity: 0;
  transform: translateX(-.4em); line-height: 1;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.lp-showcase__item.is--active .lp-showcase__caret { opacity: .55; transform: translateX(0); }

/* hairline that draws under the heading — the second half of the affordance */
.lp-showcase__h > span:first-child { position: relative; }
.lp-showcase__h > span:first-child::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.12em; height: 1px;
  background: currentColor; opacity: .35;
  transform: scaleX(0); transform-origin: right;
  transition: transform .65s var(--ease);
}
.lp-showcase__item.is--active .lp-showcase__h > span:first-child::after,
.lp-showcase__btn:hover .lp-showcase__h > span:first-child::after {
  transform: scaleX(1); transform-origin: left;
}
@media (hover: hover) and (pointer: fine) {
  .lp-showcase__btn:hover .lp-showcase__caret { opacity: 1; transform: translateX(.15em); }
  .lp-showcase__btn:hover .lp-showcase__idx { opacity: .8; }
}
.lp-showcase__idx { transition: opacity .4s var(--ease); }

@media (max-width: 899px) {
  /* Block, not grid: a sticky grid item is confined to its own row, so it would
     unpin as soon as the media row ended. In normal flow its containing block is
     the whole wrapper, so it stays put for the length of the list. */
  .lp-showcase__grid { display: block; }

  .lp-showcase__media {
    position: sticky;
    top: calc(var(--nav-h) + .5rem);
    aspect-ratio: auto;
    height: 42vh;
    margin-bottom: 1.75rem;
    z-index: 2;              /* media sits above, so rows scroll away behind it */
  }
  /* fade the rows out as they pass under the pinned image */
  .lp-showcase__media::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -4.5rem;
    height: 4.5rem; pointer-events: none;
    background: linear-gradient(var(--ink) 18%, rgba(20,23,26,0));
  }
  .lp-showcase__list { position: relative; z-index: 1; padding-bottom: clamp(3rem, 10vw, 6rem); }

  /* on mobile the active row carries the weight, since the eye is on the image */
  .lp-showcase__item { opacity: .4; }
  .lp-showcase__item.is--active { opacity: 1; }
}

/* ---------------------------------------------- menu motion (no GSAP) ---
   Driven by CSS transitions so the menu also works on the document pages,
   which deliberately don't load GSAP. */

.lp-menu { transition: visibility 0s linear .75s; }
.lp-menu.is--open { transition-delay: 0s; }

.lp-menu__veil { transition: transform .75s var(--ease); transform: scaleY(1); }
.lp-menu.is--open .lp-menu__veil { transform: scaleY(0); transform-origin: bottom; transition-delay: .05s; }

.lp-menu__link { display: flex; transform: translateY(115%); transition: transform .85s var(--ease), opacity .5s var(--ease); }
.lp-menu.is--open .lp-menu__link { transform: translateY(0); }
.lp-menu__list li:nth-child(1) .lp-menu__link { transition-delay: .10s, 0s; }
.lp-menu__list li:nth-child(2) .lp-menu__link { transition-delay: .16s, 0s; }
.lp-menu__list li:nth-child(3) .lp-menu__link { transition-delay: .22s, 0s; }
.lp-menu__list li:nth-child(4) .lp-menu__link { transition-delay: .28s, 0s; }
.lp-menu__list li:nth-child(5) .lp-menu__link { transition-delay: .34s, 0s; }
.lp-menu__list li:nth-child(6) .lp-menu__link { transition-delay: .40s, 0s; }
.lp-menu__list li:nth-child(7) .lp-menu__link { transition-delay: .46s, 0s; }

.lp-menu__meta { opacity: 0; transform: translateY(1rem); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.lp-menu.is--open .lp-menu__meta { opacity: .5; transform: none; transition-delay: .5s; }

.lp-menu__media { clip-path: inset(0 0 0 100%); transition: clip-path .95s var(--ease); }
.lp-menu.is--open .lp-menu__media { clip-path: inset(0 0 0 0%); transition-delay: .12s; }
.lp-menu__media img { transform: scale(1.12); transition: transform 1.4s var(--ease); }
.lp-menu.is--open .lp-menu__media img { transform: scale(1); transition-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  .lp-menu, .lp-menu *, .lp-menu *::before { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .lp-menu__link { transform: none; }
  .lp-menu__media { clip-path: none; }
}