/* ==========================================================================
   AALANKAAR STUDIOS — 06 · HOMEPAGE COMPOSITIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   A full-bleed woven backdrop, an oversized display line that arrives word by
   word, and a marquee of category names running along the floor.
   -------------------------------------------------------------------------- */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  background:var(--c-ink-deep);
  color:var(--c-ivory);
  padding-bottom:var(--s-5);
  margin-top:calc(-1 * var(--s-7));  /* the nav floats over it */
  padding-top:var(--s-8);
}

.hero__bg{
  position:absolute; inset:-8% 0 -8% 0;
  z-index:0;
}
.hero__bg img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.12);
  filter:saturate(.88) contrast(1.05);
  animation:hero-settle 2.6s var(--ease) .35s forwards;
}
@keyframes hero-settle{ to{ transform:scale(1); } }

.hero__scrim{
  position:absolute; inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(10,5,4,.72) 0%, rgba(10,5,4,.30) 34%, rgba(10,5,4,.86) 100%),
    radial-gradient(120% 78% at 50% 108%, rgba(122,20,33,.34), transparent 62%);
}

.hero__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.hero__eyebrow{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  font-size:var(--fs-label);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-gold-soft);
  margin-bottom:var(--s-4);
}
.hero__eyebrow::before{
  content:"";
  width:clamp(28px, 6vw, 74px);
  height:1px;
  background:var(--c-gold);
  transform-origin:left center;
  animation:rule-sweep 1.1s var(--ease) 1.1s backwards;
}

.hero__title{
  font-family:var(--font-display);
  font-size:var(--fs-mega);
  font-weight:500;
  line-height:.86;
  letter-spacing:-0.045em;
  max-width:15ch;
}
.hero__title em{
  font-style:italic;
  color:var(--c-gold-soft);
  font-weight:400;
}

.hero__foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-6);
  margin-top:var(--s-6);
  padding-top:var(--s-4);
  border-top:1px solid var(--rule-dark);
}
.hero__blurb{
  max-width:46ch;
  font-size:var(--fs-sm);
  line-height:var(--lh-loose);
  color:rgba(232,218,180,.72);
}
.hero__actions{ display:flex; gap:var(--s-3); flex-shrink:0; }
.hero .btn--outline{ --btn-fg:var(--c-ivory); border-color:rgba(232,218,180,.45); }

@media (max-width:820px){
  .hero__foot{ flex-direction:column; align-items:flex-start; }
  .hero__actions{ width:100%; }
  .hero__actions .btn{ flex:1; }
}

/* Scroll cue — a hairline that pulses downward forever */
.hero__cue{
  position:absolute;
  left:50%; bottom:var(--s-4);
  z-index:3;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-2);
  font-size:9px;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:rgba(232,218,180,.5);
}
.hero__cue i{
  display:block;
  width:1px; height:46px;
  background:linear-gradient(180deg, transparent, var(--c-gold-soft));
  overflow:hidden;
  position:relative;
}
.hero__cue i::after{
  content:"";
  position:absolute; inset:0;
  background:var(--c-ivory);
  animation:cue-run 2.1s var(--ease) infinite;
}
@keyframes cue-run{
  0%  { transform:translateY(-100%); }
  60% { transform:translateY(100%); }
  100%{ transform:translateY(100%); }
}

/* Hero marquee strip along the very bottom */
.hero__strip{
  position:relative;
  z-index:2;
  margin-top:var(--s-6);
  padding-block:var(--s-3);
  border-top:1px solid var(--rule-dark);
  border-bottom:1px solid var(--rule-dark);
}
.hero__strip .marquee__item{ color:rgba(232,218,180,.68); }

/* --------------------------------------------------------------------------
   MANIFESTO — a large italic statement with a drifting seal
   -------------------------------------------------------------------------- */

.manifesto{ position:relative; }
.manifesto__inner{
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--s-6);
  align-items:center;
}
@media (max-width:900px){ .manifesto__inner{ grid-template-columns:1fr; } }

.manifesto__text{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 3.4vw, 3rem);
  font-weight:400;
  line-height:1.24;
  letter-spacing:-0.02em;
  max-width:20ch;
}
.manifesto__text em{ font-style:italic; color:var(--c-vermilion); }

.manifesto__aside{ max-width:34ch; }

/* The rotating gold seal */
.seal{
  position:relative;
  width:clamp(120px, 16vw, 186px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.seal__ring{ position:absolute; inset:0; }
.seal__ring text{
  font-family:var(--font-sans);
  font-size:9.4px;
  letter-spacing:.28em;
  text-transform:uppercase;
  fill:var(--c-gold);
}
.seal__core{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.5rem, 2.6vw, 2.3rem);
  color:var(--c-vermilion);
}

/* The drawn lotus at the centre of the seal.
   Each petal draws its own outline on a stagger, then the whole mark settles
   into a very slow breath. Stroke, not fill — it has to read as a drawing,
   the way the motif is drawn onto a mat before it is woven. */
.seal__motif{
  position:relative;
  width:52%;
  overflow:visible;
}
.seal__petal,
.seal__line{
  fill:none;
  stroke:var(--c-vermilion);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.seal__line{ stroke:var(--c-gold); stroke-width:1.2; opacity:.8; }

/* Fails open like every other reveal: without .can-reveal the mark is simply
   drawn in full. */
.can-reveal .seal__petal,
.can-reveal .seal__line{
  stroke-dasharray:180;
  stroke-dashoffset:180;
}
.can-reveal .is-inview .seal__petal,
.can-reveal .is-inview .seal__line,
.can-reveal .seal.is-inview .seal__petal,
.can-reveal .seal.is-inview .seal__line{
  animation:seal-draw 1.5s var(--ease) forwards;
  animation-delay:calc(var(--p, 0) * 140ms + 200ms);
}
@keyframes seal-draw{ to{ stroke-dashoffset:0; } }

/* --------------------------------------------------------------------------
   COLLECTIONS — an editorial index of categories
   Rows that reveal a preview image on hover, following the pointer.
   -------------------------------------------------------------------------- */

.collections{ position:relative; }

.col-row{
  position:relative;
  display:grid;
  /* index · name · description · count · arrow */
  grid-template-columns:auto minmax(0,1fr) auto auto auto;
  align-items:center;
  gap:clamp(var(--s-3), 2.4vw, var(--s-5));
  padding:clamp(var(--s-3), 2vw, var(--s-4)) var(--s-4);
  border-bottom:1px solid var(--rule);
  transition:color var(--dur-3) var(--ease);
}
.col-row:first-child{ border-top:1px solid var(--rule); }

/* A gold wash that wipes up behind the row.
   z-index:-1 put this behind the section's own background, so on a textured
   section the wash vanished while the hover colour still applied — white type
   on an unchanged ground, i.e. invisible. The row now makes its own stacking
   context and the wash sits at 0, under the content but above the section. */
.col-row{ isolation:isolate; }
.col-row::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(90deg, rgba(122,20,33,.55), rgba(172,129,64,.18));
  transform:scaleY(0);
  transform-origin:bottom center;
  transition:transform var(--dur-3) var(--ease);
}
.col-row > *{ position:relative; z-index:1; }
.col-row:hover::before{ transform:scaleY(1); transform-origin:top center; }

.col-row:hover{ color:var(--c-ivory); }
.col-row:hover .col-row__index{ color:var(--c-gold-soft); }
.col-row:hover .col-row__count,
.col-row:hover .col-row__desc{ color:rgba(232,218,180,.78); }

.col-row__index{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  color:var(--c-gold);
  min-width:3ch;
}
.col-row__name{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 4.2vw, 3.4rem);
  font-weight:500;
  line-height:1.02;
  letter-spacing:var(--ls-display);
  transition:transform var(--dur-3) var(--ease), font-style var(--dur-2) var(--ease);
}
.col-row:hover .col-row__name{ font-style:italic; }
.col-row__desc{
  max-width:32ch;
  font-size:var(--fs-xs);
  line-height:1.65;
  color:var(--fg-muted);
}
.col-row__count{
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  color:var(--fg-faint);
  font-variant-numeric:tabular-nums;
}
.col-row__go{
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:.32;
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease-back);
}
.col-row:hover .col-row__go{ opacity:1; transform:rotate(-45deg) scale(1.06); }

@media (max-width:900px){
  .col-row{ grid-template-columns:auto minmax(0,1fr) auto auto; }
  .col-row__desc{ display:none; }
}
@media (max-width:640px){
  .col-row{ grid-template-columns:minmax(0,1fr) auto; gap:var(--s-3); padding-inline:var(--s-2); }
  .col-row__index{ display:none; }
  .col-row__count{ display:none; }
}

/* --------------------------------------------------------------------------
   FEATURE SPLIT — image beside copy, alternating
   -------------------------------------------------------------------------- */

.split-feature{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(var(--s-5), 6vw, var(--s-8));
  align-items:center;
}
.split-feature--flip > *:first-child{ order:2; }
@media (max-width:900px){
  .split-feature{ grid-template-columns:1fr; }
  .split-feature--flip > *:first-child{ order:0; }
}

.split-feature__media{ position:relative; }
/* A panel that brings its own light background must bring its own ink with
   it. Inheriting colour from the section works only while the section is
   light — on a textured dark one it produced ivory type on an ivory card,
   i.e. an empty box. Same reason the tokens below are literal rather than
   --fg / --fg-muted, both of which flip on a dark ground. */
.split-feature__badge{
  position:absolute;
  right:calc(-1 * var(--s-4));
  bottom:var(--s-5);
  background:var(--c-ivory-lift);
  color:var(--c-ink);
  padding:var(--s-3) var(--s-4);
  border:1px solid var(--gold-line);
  max-width:230px;
  box-shadow:var(--shadow-lg);
}
.split-feature__badge strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.1rem;
  font-weight:500;
  margin-bottom:4px;
}
.split-feature__badge strong{ color:var(--c-ink); }
.split-feature__badge span{ font-size:var(--fs-xs); color:rgba(23,12,9,.62); line-height:1.5; }

/* --------------------------------------------------------------------------
   PROCESS — numbered steps on a vertical gold thread
   -------------------------------------------------------------------------- */

.process{ position:relative; }

/* Steps on the left, the thing they produce on the right. The image is
   sticky so it stays with the reader through all four stages. */
.process__layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(var(--s-5), 6vw, var(--s-8));
  align-items:start;
}
@media (max-width:900px){
  .process__layout{ grid-template-columns:1fr; gap:var(--s-6); }
}

.process__media{
  position:sticky;
  top:110px;
  margin:0;
}
@media (max-width:900px){ .process__media{ position:static; } }

.process__caption{
  display:flex;
  justify-content:space-between;
  gap:var(--s-3);
  border-top:1px solid var(--rule-soft);
  padding-top:var(--s-2);
  margin-top:var(--s-3);
  font-size:var(--fs-xs);
  color:var(--fg-faint);
}

.process__list{ position:relative; padding-left:var(--s-6); }
.process__list::before{
  content:"";
  position:absolute;
  left:9px; top:8px; bottom:8px;
  width:1px;
  background:var(--gold-line);
  transform-origin:top center;
  transition:transform 1.8s var(--ease);
}
/* Fails open, like every other reveal — see 04-motion.css. */
.can-reveal .process__list::before{ transform:scaleY(0); }
.can-reveal .process__list.is-inview::before{ transform:scaleY(1); }

.process__step{
  position:relative;
  padding-block:var(--s-5);
  border-bottom:1px solid var(--rule-soft);
}
.process__step:last-child{ border-bottom:0; }
.process__step::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--s-6) + 5px);
  top:calc(var(--s-5) + 10px);
  width:9px; height:9px;
  border-radius:50%;
  background:var(--c-ivory);
  border:1px solid var(--c-gold);
  transition:background var(--dur-3) var(--ease), transform var(--dur-3) var(--ease-back);
}
.process__step:hover::before{ background:var(--c-vermilion); border-color:var(--c-vermilion); transform:scale(1.5); }

.process__num{
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  color:var(--c-gold);
  margin-bottom:var(--s-2);
}
.process__title{ font-family:var(--font-display); font-size:var(--fs-lg); font-weight:500; line-height:1.15; }
.process__body{ color:var(--fg-muted); line-height:var(--lh-loose); margin-top:var(--s-3); max-width:52ch; }

/* --------------------------------------------------------------------------
   STAT BAND
   -------------------------------------------------------------------------- */

.stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--s-5);
  padding-block:var(--s-6);
  border-block:1px solid var(--rule);
}
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); gap:var(--s-5) var(--s-4); } }

.stat__num{
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-0.03em;
}
.stat__num sup{ font-size:.42em; color:var(--c-gold); vertical-align:super; margin-left:2px; }
.stat__label{
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-muted);
  margin-top:var(--s-3);
}

/* --------------------------------------------------------------------------
   VOICES — three testimonials, side by side
   A rotator showed one quote and hid two. Three at once is more convincing
   and needs no timer, no dots and no JavaScript.
   -------------------------------------------------------------------------- */

.voices{
  position:relative;
  overflow:hidden;
  background:var(--c-maroon);
  color:var(--c-ivory);
}
/* A warm bloom low and left, so the ink is not a flat field. */
.voices::before{
  content:"";
  position:absolute;
  left:-10%; bottom:-40%;
  width:80vw; aspect-ratio:1;
  background:radial-gradient(circle, rgba(122,20,33,.55), transparent 62%);
  pointer-events:none;
}
.voices .wrap{ position:relative; z-index:1; }

.voices__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(var(--s-5), 5vw, var(--s-7));
  align-items:start;
}
@media (max-width:900px){ .voices__grid{ grid-template-columns:1fr; gap:var(--s-6); } }

.voices__item{ position:relative; }

/* A small entrance: the mark draws a breath, the rule under it opens, and the
   line settles. Enough to feel alive, not enough to read as a slideshow. */
.voices__mark{ transition:transform var(--dur-4) var(--ease-back), opacity var(--dur-3) var(--ease); }
.can-reveal .voices__item .voices__mark{ opacity:0; transform:translateY(10px) scale(.6); }
.can-reveal .voices__item.is-inview .voices__mark{ opacity:.75; transform:none; }

.voices__item::after{
  content:"";
  position:absolute;
  left:0; bottom:calc(-1 * var(--s-4));
  width:100%; height:1px;
  background:linear-gradient(90deg, var(--c-gold), transparent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 1.1s var(--ease) .2s;
}
.can-reveal .voices__item.is-inview::after{ transform:scaleX(1); }

.voices__item:hover .voices__mark{ transform:scale(1.12) rotate(-4deg); }

.voices__mark{
  display:block;
  font-family:var(--font-display);
  font-size:2.6rem;
  line-height:.6;
  color:var(--c-gold);
  opacity:.75;
  margin-bottom:var(--s-3);
}

.voices__text{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.05rem, 1.5vw, 1.4rem);
  font-weight:400;
  line-height:1.45;
  color:var(--c-ivory);
}

.voices__who{
  display:block;
  margin-top:var(--s-4);
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--fs-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(232,218,180,.6);
}

/* --------------------------------------------------------------------------
   MADE TO ORDER — the closing invitation
   -------------------------------------------------------------------------- */

.made{
  position:relative;
  overflow:hidden;
  background:var(--c-ink-deep);
  color:var(--c-ivory);
  text-align:center;
  padding-block:clamp(var(--s-7), 12vw, var(--s-9));
}
.made__label{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-gold);
}
.made__title{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(2.2rem, 6.6vw, 5.4rem);
  line-height:1.06;
  letter-spacing:-0.02em;
  max-width:18ch;
  margin:var(--s-5) auto 0;
}
/* The question mark is the only thing in the line that is not ivory. */
.made__title em{ font-style:italic; color:var(--c-vermilion); }

.made__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-3);
  justify-content:center;
  margin-top:var(--s-6);
}
.made .btn--outline{ --btn-fg:var(--c-ivory); border-color:rgba(232,218,180,.45); }

.made__note{
  margin-top:var(--s-5);
  font-size:var(--fs-xs);
  letter-spacing:.06em;
  color:rgba(232,218,180,.5);
}

/* --------------------------------------------------------------------------
   JOURNAL CARDS
   -------------------------------------------------------------------------- */

.journal-card,
.post-card{ display:flex; flex-direction:column; }
/* Anchor-wrapped media needs display:block so `aspect-ratio` can apply
   (inline elements ignore aspect-ratio). Explicit width:100% ensures the
   aspect-ratio has a base measurement to derive the height from. */
.journal-card__media,
.post-card__media{
  display:block;
  width:100%;
  overflow:hidden;
  aspect-ratio:4 / 5;
  background:var(--bg-lift);
}
.journal-card__media img,
.post-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.journal-card:hover .journal-card__media img,
.post-card:hover .post-card__media img,
a.post-card:hover .post-card__media img{ transform:scale(1.06); }
.journal-card__meta,
.post-card__meta{
  display:flex;
  gap:var(--s-3);
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-faint);
  margin-top:var(--s-4);
}
.journal-card__title,
.post-card__title{
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:500;
  line-height:1.24;
  margin-top:var(--s-2);
  transition:color var(--dur-2) var(--ease);
}
.journal-card:hover .journal-card__title,
.post-card:hover .post-card__title,
.post-card__title a:hover{ color:var(--c-vermilion); }
.journal-card__excerpt,
.post-card__excerpt{ font-size:var(--fs-sm); color:var(--fg-muted); line-height:1.7; margin-top:var(--s-2); }
.post-card__body{ padding-top:0; }

/* Blog archive grid */
.posts-grid,
.journal-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(var(--s-5), 4vw, var(--s-6));
  margin-top:var(--s-5);
}
@media (max-width:1024px){ .posts-grid, .journal-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){  .posts-grid, .journal-grid{ grid-template-columns:1fr; } }

/* Single post layout
   - .single-post__hero: featured image inside the site's .wrap
   - .single-post__body: prose in the SAME .wrap so the text column and
     the image column share the same left edge / right edge. The prose
     block gets a comfortable max-width for reading, but is left-aligned
     within the wrap (margin-inline: 0 not auto) so it visually attaches
     to the image column above it rather than centering. */
.single-post{ display:block; }
.single-post__hero{ padding-block:var(--s-6) var(--s-5); }
.single-post__hero .media--wide{ aspect-ratio:16/9; }
.single-post__body{ padding-block:var(--s-4) var(--s-8); }
.single-post__body .prose{
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:var(--lh-loose);
  color:var(--fg);
  /* Full width of the .wrap — matches the hero image width exactly. */
  max-width:none;
  margin-inline:0;
}
.single-post__body .prose > * + *{ margin-top:var(--s-4); }
.single-post__body .prose h2{ font-family:var(--font-display); font-size:var(--fs-lg); font-weight:500; line-height:1.15; margin-top:var(--s-6); }
.single-post__body .prose h3{ font-family:var(--font-display); font-size:var(--fs-md); font-weight:500; line-height:1.22; margin-top:var(--s-5); }
.single-post__body .prose p{ color:var(--fg-muted); }
.single-post__body .prose a{ color:var(--c-vermilion); text-decoration:underline; text-underline-offset:3px; }
.single-post__body .prose blockquote{
  border-left:2px solid var(--c-gold);
  padding-left:var(--s-4);
  margin:var(--s-5) 0;
  font-family:var(--font-script);
  font-style:italic;
  font-size:1.35rem;
  color:var(--fg);
}
.single-post__body .prose ul,
.single-post__body .prose ol{ list-style:revert; padding-left:1.5em; }
.single-post__body .prose li{ margin:.4em 0; color:var(--fg-muted); }
.single-post__body .prose img{ border-radius:var(--radius-sm); margin:var(--s-4) 0; }

/* Related posts grid uses the same .posts-grid rules above */
.related-posts .sec-head{ margin-bottom:var(--s-5); }

/* --------------------------------------------------------------------------
   PAGE HEADER (shop, archives, single pages)
   -------------------------------------------------------------------------- */

.page-head{
  position:relative;
  padding-block:calc(var(--s-7) + var(--s-4)) var(--s-6);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
}
.page-head__inner{ position:relative; z-index:2; }
.page-head__crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-faint);
  margin-bottom:var(--s-4);
}
.page-head__crumbs a{ transition:color var(--dur-2) var(--ease); }
.page-head__crumbs a:hover{ color:var(--c-vermilion); }
.page-head__title{
  font-family:var(--font-display);
  font-size:var(--fs-xxl);
  font-weight:500;
  line-height:.98;
  letter-spacing:-0.035em;
}
.page-head__sub{
  margin-top:var(--s-4);
  max-width:56ch;
  color:var(--fg-muted);
  line-height:var(--lh-loose);
}
.page-head__motif{
  position:absolute;
  right:calc(-1 * var(--s-6));
  top:50%;
  transform:translateY(-50%);
  width:min(360px, 34vw);
  opacity:.12;
  pointer-events:none;
}

/* ==========================================================================
   THE REEL — every piece, in motion
   Three rows of product tiles running in alternating directions at different
   speeds. It reads as one continuous ribbon of work rather than a grid, which
   is the point: the catalogue is small and hand-made, so showing all of it at
   once says more than showing four of it well.

   Built on the same .marquee track the announcement bar uses, so 04-motion.js
   clones it for a seamless loop and nothing new has to be taught to scroll.
   ========================================================================== */

.reel-section{
  position:relative;
  overflow:hidden;
  background:var(--c-ink-deep);
  color:var(--c-ivory);
}

/* A slow vermilion bloom behind the rows so the ink is never flat. */
.reel-section::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:120vw; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(122,20,33,.34) 0%, transparent 62%);
  pointer-events:none;
  animation:reel-bloom 14s var(--ease-soft) infinite;
}
@keyframes reel-bloom{
  0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:.85; transform:translate(-50%,-50%) scale(1.12); }
}

.reel{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:clamp(var(--s-3), 1.4vw, var(--s-4));
}

.reel__row{ --marquee-dur:64s; }
.reel__row:nth-child(2){ --marquee-dur:78s; --marquee-dir:reverse; }
.reel__row:nth-child(3){ --marquee-dur:56s; }

.reel__row .marquee__track{
  gap:clamp(var(--s-3), 1.4vw, var(--s-4));
  padding-right:clamp(var(--s-3), 1.4vw, var(--s-4));
  align-items:flex-start;
}

/* Tiles */
.reel__tile{
  position:relative;
  flex-shrink:0;
  width:clamp(148px, 15vw, 250px);
  aspect-ratio:3 / 4;
  overflow:hidden;
  background:var(--bg-lift);
  display:block;
  transition:transform var(--dur-3) var(--ease);
}
/* Stagger the heights so the ribbon has a rhythm rather than a hard edge. */
.reel__tile:nth-child(3n+2){ aspect-ratio:1 / 1;  margin-top:clamp(14px, 2vw, 34px); }
.reel__tile:nth-child(4n+3){ aspect-ratio:4 / 5;  margin-top:clamp(6px, 1vw, 16px); }

.reel__tile{ background:#241512; }   /* a warm ground, not a black hole, while lazy images arrive */
.reel__tile img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.9) brightness(.96);
  transition:transform var(--dur-5) var(--ease), filter var(--dur-3) var(--ease);
}
.reel__tile:hover{ transform:translateY(-6px); z-index:2; }
.reel__tile:hover img{ transform:scale(1.08); filter:saturate(1.05) brightness(1); }

/* The name and price rise out of the floor of the tile on hover. */
.reel__meta{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:var(--s-4) var(--s-3) var(--s-3);
  background:linear-gradient(180deg, transparent, rgba(10,5,4,.88));
  transform:translateY(101%);
  opacity:0;
  transition:transform var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease);
}
.reel__tile:hover .reel__meta,
.reel__tile:focus-visible .reel__meta{ transform:translateY(0); opacity:1; }

.reel__name{
  display:block;
  font-family:var(--font-display);
  font-size:.92rem;
  font-weight:500;
  line-height:1.2;
  color:var(--c-ivory);
}
.reel__price{
  display:block;
  margin-top:3px;
  font-size:var(--fs-xs);
  color:var(--c-gold-soft);
  font-variant-numeric:tabular-nums;
}

/* Edges fade into the ink so the loop has no visible seam. */
.reel__row{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

@media (max-width:640px){
  .reel__row:nth-child(3){ display:none; }   /* two rows is enough on a phone */
}

@media (prefers-reduced-motion: reduce){
  .reel-section::after{ animation:none; }
  /* The track stops; the row becomes an ordinary horizontal scroller. */
  .reel__row{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .reel__row .marquee__track{ animation:none; }
}

/* ==========================================================================
   TEXTURED SECTIONS
   Every homepage section sits on its own dark ground, built from a brocade
   or weave photograph that is blurred past legibility and dropped to a low
   opacity. The pattern is felt, not read — at full strength it would fight
   the type on every line.

   Three dials per section, set from markup so a section's identity lives
   with the section:
       --tex        the photograph
       --tex-base   the ink underneath it
       --tex-op     how much of it comes through   (0.10 – 0.26)

   Each section gets a different photograph and a different base, so the page
   reads as a sequence of rooms rather than one long dark corridor.
   ========================================================================== */

.section--tex{
  position:relative;
  isolation:isolate;                 /* keeps the layers below out of the page's stacking context */
  background:var(--tex-base, #0A0504);
  color:var(--c-ivory);
  overflow:hidden;
}

/* The pattern itself. */
.section--tex::before{
  content:"";
  position:absolute;
  inset:-8%;                         /* over-sized so the blur has no soft edge */
  z-index:0;
  background-image:var(--tex);
  background-size:cover;
  background-position:center;
  filter:blur(var(--tex-blur, 16px)) saturate(.55);
  opacity:var(--tex-op, .18);
  pointer-events:none;
}

/* A vignette so the centre stays calm and the type always has ground. */
.section--tex::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:radial-gradient(120% 90% at 50% 45%,
              transparent 0%,
              rgba(10,5,4,.55) 62%,
              rgba(10,5,4,.88) 100%);
  pointer-events:none;
}

/* Everything the section actually contains sits above both layers. */
.section--tex > *{ position:relative; z-index:1; }

/* Hairlines and muted text have to be read against ink, not ivory. */
.section--tex{
  --fg:        var(--c-ivory);
  --fg-muted:  rgba(232,218,180,.66);
  --fg-faint:  rgba(232,218,180,.38);
  --rule:      rgba(232,218,180,.16);
  --rule-soft: rgba(232,218,180,.08);
  --bg-lift:   #1A0F0B;
}

/* The seam between two textured sections — a single gold hairline, so the
   change of ground reads as deliberate rather than as a rendering seam. */
.section--tex + .section--tex{ border-top:1px solid rgba(172,129,64,.18); }

@media (prefers-reduced-motion: reduce){
  .section--tex::before{ filter:blur(var(--tex-blur, 16px)); }
}

/* ==========================================================================
   VOICES — arrival and drift
   Each testimonial rises on its own beat, then breathes very slightly out of
   phase with its neighbours, so the row is never completely still without
   ever pulling attention off the words.
   ========================================================================== */

.can-reveal .voices__item{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--v, 0) * 140ms);
}
.can-reveal .voices__item.is-inview{ opacity:1; transform:none; }

/* The quote mark draws attention first, then settles back. */
.voices__mark{
  display:block;
  transform-origin:left center;
  animation:voice-mark 7s var(--ease-soft) infinite;
  animation-delay:calc(var(--v, 0) * 900ms);
}
@keyframes voice-mark{
  0%, 78%, 100%{ transform:translateY(0) rotate(0); opacity:.75; }
  86%          { transform:translateY(-3px) rotate(-4deg); opacity:1; }
}

/* A slow, tiny float. Amplitude is deliberately under 5px — anything more
   and three columns moving at once reads as a page that will not sit still. */
.voices__item{
  animation:voice-float 9s var(--ease-soft) infinite;
  animation-delay:calc(var(--v, 0) * 1200ms);
}
@keyframes voice-float{
  0%, 100%{ transform:translateY(0); }
  50%     { transform:translateY(-4px); }
}
/* The float must not fight the arrival transform. */
.can-reveal .voices__item{ animation:none; }
.can-reveal .voices__item.is-inview{
  animation:voice-float 9s var(--ease-soft) infinite;
  animation-delay:calc(var(--v, 0) * 1200ms + 1s);
}

.voices__item:hover{ animation-play-state:paused; }
.voices__item:hover .voices__mark{ animation-play-state:paused; }

@media (prefers-reduced-motion: reduce){
  .voices__item,
  .voices__mark{ animation:none !important; }
}

/* ==========================================================================
   MADE TO ORDER vs FOOTER
   Both are dark, so back to back they read as one very long block. The
   closing invitation keeps its texture; the footer drops to flat ink and is
   separated by a gold hairline and a change of rhythm.
   ========================================================================== */

.made{
  border-bottom:1px solid rgba(172,129,64,.28);
}

.footer{
  background:#080403;          /* flatter and darker than any textured section */
  padding-top:var(--s-6);
}
.footer::before{
  /* a single hairline of light where the two meet */
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(172,129,64,.5), transparent);
}
.footer__address{
  font-style:normal;
  font-size:var(--fs-sm);
  line-height:1.75;
  color:rgba(232,218,180,.72);
}