/* ============================================================
   CELL 4 — PORTFOLIO FIELD — The Beauty Suite (B-opus lane)
   Winner G4 layout · folds in G2 (category-caption system honey-label + espresso
   descriptor · Valla signature line) + G3 (real BELLAMI install proof tile · bronde
   range). Porcelain-dominant canvas END-TO-END, HONEY accents only, espresso ink.
   ZERO dark rail (the G4 spine is taupe-on-paper text, never a filled rail).
   Radius = --radius (6px) on every frame. Repeated tiles are pixel-identical (T2.2):
   same frame, same caption slot, same gloss. Exposure-harmonized grid (T2.9) —
   one high-key warm-neutral treatment; the darker extension-install tile is lifted
   to sit inside the neighbour luma band. Alive at t0: ambient gloss/drift @keyframes
   (no scroll-gated content). ZERO lens-flare / diagonal streak / sparkle / per-card
   heart — shine is a feathered honey gloss ON the real hair only.
   Shared tokens are the only color source (--marble-50 / --terracotta / --stone-700).
   ============================================================ */

#cell-4 { overflow: hidden; } /* contain the ambient gloss bloom — never a page scrollbar */

.pf {
  position: relative;
  /* leave room on the left for the vertical PORTFOLIO spine (G4) */
  padding-left: clamp(0px, 2vw, 3.25rem);
}

/* ── vertical PORTFOLIO spine (G4) — taupe-on-paper text, NOT a filled rail ── */
.pf__spine {
  position: absolute;
  left: clamp(-0.25rem, -0.5vw, 0px);
  top: clamp(9rem, 20vw, 15rem);
  transform-origin: left top;
  transform: rotate(-90deg) translateX(-100%);
  font-family: var(--font-body);
  font-size: var(--step-mini);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-weight: 600;
  color: var(--text-on-light-muted);   /* muted espresso-taupe on porcelain */
  white-space: nowrap;
  pointer-events: none;
}
/* a short honey tick trailing the spine word — the accent regrip */
.pf__spine::after {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 1px;
  margin-left: 0.9rem;
  vertical-align: middle;
  background: var(--terracotta);        /* honey */
}

/* ── header block (top-left, G4 rhythm) ── */
.pf__head {
  max-width: 40rem;
  margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.75rem);
}
.pf__eyebrow {
  color: var(--text-on-light-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--space-m);
}
.pf__eyebrow-mark { color: var(--terracotta); font-size: 0.85em; line-height: 1; } /* honey florette — a confident mark, not dirt (T2.23) */

.pf__headline {
  font-size: var(--step-section);       /* H2A */
  color: var(--stone-700);              /* espresso ink on porcelain */
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin-bottom: var(--space-m);
  text-wrap: balance;
  position: relative;
}
.pf__headline-em {
  font-style: italic;                   /* Prata italic — the accent word */
  color: var(--terracotta);             /* honey emphasis (the single accent) */
}
/* honey hairline seam under the headline — the editorial regrip */
.pf__lede {
  position: relative;
  color: var(--text-on-light);          /* espresso body */
  font-size: var(--step-0);
  line-height: var(--leading-body);
  max-width: 34ch;
  padding-top: var(--space-m);
}
.pf__lede::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 2.5rem; height: 2px;
  background: var(--terracotta);        /* honey accent rule */
  border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════
   THE ASYMMETRIC MOSAIC — an 8-col grid; a tall center FEATURE anchors it,
   range tiles flank, one Valla pullquote fills the right whitespace (G4).
   Not a cookie-cutter grid (contract): tiles span deliberately different areas
   BUT every frame is the identical unit (same radius / caption slot / gloss).
   ══════════════════════════════════════════════════════════════ */
.pf__mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(3rem, 3.7vw, 4.6rem);      /* fine row unit → tiles span rows for asymmetry */
  gap: clamp(0.7rem, 0.4rem + 0.9vw, 1.35rem);
  align-items: stretch;
}

/* placements — asymmetric field with a tall center portrait dominating (G4).
   Rows are the fine unit above; each tile's row-span sets its height. The field
   resolves to a COMPOSED bottom edge (T2.5 dead-space / T2.6 disciplined):
   the left column (--a/--c), the center column (feature/--e) and the right region
   (--b/--ext/--f and the far-right --d) all bottom-align at row 12 — no ragged
   lower void. Three columns of hair + a far-right accent column + the pullquote.
     cols 1-4    left     : --a (top)  · --c (bottom)
     cols 4-8    center   : feature (tall) · --e (bottom)
     cols 8-11   r-center : --b (top) · --ext (mid) · --f (bottom)
     cols 11-13  far-right: quote (top) · --d (tall, to the floor) */
.pf__tile--feature { grid-column: 4 / 8;   grid-row: 1 / 8; }   /* tall center — the shine hero */
.pf__tile--a       { grid-column: 1 / 4;   grid-row: 1 / 5; }   /* upper-left */
.pf__tile--c       { grid-column: 1 / 4;   grid-row: 5 / 12; }  /* lower-left — bottom-aligns at row 12 */
.pf__tile--b       { grid-column: 8 / 11;  grid-row: 1 / 4; }   /* upper-right platinum */
.pf__tile--ext     { grid-column: 8 / 11;  grid-row: 4 / 8; }   /* extensions install — bottom-aligns with feature */
.pf__tile--f       { grid-column: 8 / 11;  grid-row: 8 / 12; }  /* lower-right — bottom-aligns at row 12 */
.pf__quote         { grid-column: 11 / 13; grid-row: 1 / 4; }   /* pullquote in the far-right whitespace */
.pf__tile--d       { grid-column: 11 / 13; grid-row: 4 / 12; }  /* far-right tall — fills the column to the floor */
.pf__tile--e       { grid-column: 4 / 8;   grid-row: 8 / 12; }  /* lower-center — under the feature, bottom-aligns */

/* ── the tile: pixel-identical unit (T2.2) ── */
.pf__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.pf__frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--radius);         /* exactly 6px */
  overflow: hidden;
  background: var(--marble-100);        /* warm placeholder while decoding — never a dark box */
  box-shadow: 0 22px 44px -34px rgba(75, 56, 47, 0.5);
  border: 1px solid var(--hairline);    /* fine espresso hairline on porcelain */
}
.pf__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;             /* favour hair + crown, trim signage/ceiling (mobile plan crop intent) */
  display: block;
  /* exposure harmony (T2.9): a gentle high-key warm-neutral normalize so no tile
     blows hot or muddies dark against its neighbours — preserved blonde separation */
  filter: brightness(1.015) contrast(0.985) saturate(1.02);
  /* barely-perceptible ambient drift so the field breathes at t0 (low-distance) */
  animation: pf-tile-drift 14s var(--ease-inout) infinite alternate;
}
/* the extension-install macro is inherently darker (dark hair + dark ground) —
   lift it into the neighbour luma band (T2.9). Measured seated at luma~165 (band is
   146–176), so a touch less lift than before keeps it inside without over-washing
   the weft detail. */
.pf__img--ext {
  object-position: 50% 42%;             /* center the weft row, keep the seam story */
  filter: brightness(1.11) contrast(0.95) saturate(1.06) sepia(0.05);
}
/* the brunette-bronde range tile reads COOLER than the warm-neutral field
   (measured warmth R-B ≈ +6 vs the field's +17..+32). A small warm regrade seats it
   into the one high-key treatment (T2.9) WITHOUT changing its brunette identity —
   sepia adds warmth, saturate keeps the dimension, brightness lifts it off the floor. */
.pf__tile--f .pf__img {
  filter: brightness(1.05) contrast(0.98) saturate(1.05) sepia(0.08);
}

/* per-tile drift phase offsets so the field breathes organically, not in lockstep */
.pf__tile--a  .pf__img { animation-duration: 15s;   animation-delay: -2s; }
.pf__tile--b  .pf__img { animation-duration: 13.5s; animation-delay: -5s; }
.pf__tile--c  .pf__img { animation-duration: 16s;   animation-delay: -1s; }
.pf__tile--d  .pf__img { animation-duration: 14.5s; animation-delay: -7s; }
.pf__tile--e  .pf__img { animation-duration: 15.5s; animation-delay: -3s; }
.pf__tile--f  .pf__img { animation-duration: 13s;   animation-delay: -6s; }
.pf__tile--ext .pf__img { animation-duration: 17s;  animation-delay: -4s; }
@keyframes pf-tile-drift {
  from { transform: scale(1.05) translateY(0.6%); }
  to   { transform: scale(1.05) translateY(-0.9%); }
}

/* ── ambient honey gloss band — a soft specular pass drifts slowly across the
   real hair (feathered bloom, NEVER a hard streak). Staggered per tile so the
   field shimmers in sequence. Cursor-proximity nudge lives in cell-4.js (--gp). ── */
.pf__gloss {
  position: absolute;
  inset: -12% -34%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 42%,
    rgba(255, 249, 240, 0.14) 49%,
    rgba(255, 249, 240, 0.24) 52%,
    rgba(255, 249, 240, 0.14) 55%,
    transparent 62%
  );
  mix-blend-mode: screen;
  opacity: 0.9;
  transform: translateX(calc(-38% + var(--gp, 0) * 8%));
  animation: pf-gloss-travel 9s var(--ease-inout) infinite;
  will-change: transform, opacity;
}
/* staggered start per tile → sequential shimmer across the field */
.pf__tile--feature .pf__gloss { animation-delay: -0.5s; }
.pf__tile--a  .pf__gloss { animation-delay: -1.5s; }
.pf__tile--b  .pf__gloss { animation-delay: -3s; }
.pf__tile--c  .pf__gloss { animation-delay: -4.5s; }
.pf__tile--ext .pf__gloss { animation-delay: -6s; }
.pf__tile--d  .pf__gloss { animation-delay: -2.2s; }
.pf__tile--e  .pf__gloss { animation-delay: -5.2s; }
.pf__tile--f  .pf__gloss { animation-delay: -7s; }
@keyframes pf-gloss-travel {
  0%   { transform: translateX(-46%); opacity: 0; }
  16%  { opacity: 0.9; }
  50%  { opacity: 0.55; }
  84%  { opacity: 0.9; }
  100% { transform: translateX(46%); opacity: 0; }
}

/* on hover (hover-capable only, T2.30): a single quick diagonal sheen sweep +
   the frame lifts a hair. Touch resolves to the resting state (no dangling hover). */
.pf__hover-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 250, 244, 0.32) 50%,
    transparent 60%
  );
  background-size: 240% 100%;
  background-position: 180% 0;
  opacity: 0;
  mix-blend-mode: screen;
}
@media (hover: hover) and (pointer: fine) {
  .pf__frame { transition: box-shadow var(--dur-fast) var(--ease-out); }
  .pf__tile:hover .pf__frame,
  .pf__tile:focus-within .pf__frame {
    box-shadow: 0 30px 56px -32px rgba(75, 56, 47, 0.6);
  }
  /* the sweep is added + animated by cell-4.js on pointerenter (tight <450ms) */
  .pf__hover-sheen.is-sweeping { animation: pf-hover-sweep 0.42s var(--ease-out) 1; }
  /* the caption honey label gets an underline-travel on tile hover/focus */
  .pf__tile:hover .pf__cat::after,
  .pf__tile:focus-within .pf__cat::after { transform: scaleX(1); }
}
@keyframes pf-hover-sweep {
  0%   { background-position: 175% 0; opacity: 0; }
  22%  { opacity: 1; }
  100% { background-position: -70% 0; opacity: 0; }
}

/* ── category caption (borrow G2) — honey label + espresso descriptor.
   Every tile carries it (zero anonymous tiles, cell gate). Identical slot on all. ── */
.pf__caption {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  padding-top: 0.7rem;
  line-height: 1.2;
}
.pf__cat {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--terracotta);             /* honey label */
  white-space: nowrap;
}
/* honey underline-travel target (activated on tile hover/focus above) */
.pf__cat::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.pf__desc {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--text-on-light-muted);    /* muted espresso-taupe */
  white-space: nowrap;
}
/* a faint honey divider between label and descriptor (G2 pipe), only when they share a line */
.pf__cat::before {
  content: "";
  position: absolute;
  right: -0.42rem; top: 50%;
  width: 1px; height: 0.8em;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--terracotta) 55%, transparent);
}

/* ── Valla pullquote (G4 + G2 Valla line) — fills the right whitespace ── */
.pf__quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.25rem 0 0.25rem clamp(0.5rem, 0.9vw, 1.1rem);
  border-left: 1px solid var(--hairline);
}
.pf__quote-mark {
  font-family: var(--font-display);     /* Prata */
  font-size: 2.4rem;
  line-height: 0.6;
  color: var(--terracotta);             /* honey */
  height: 1rem;
}
.pf__quote-body {
  font-family: var(--font-display);     /* Prata — Body-A / pullquote */
  font-size: clamp(1.05rem, 0.9rem + 0.55vw, 1.4rem);
  line-height: 1.28;
  color: var(--stone-700);              /* espresso */
  text-wrap: balance;
}
.pf__quote-body em { font-style: italic; color: var(--terracotta); } /* honey emphasis */
.pf__quote-sign {
  font-family: var(--font-display);     /* Prata — reads as a poised signature */
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--terracotta);             /* honey signature */
  margin-top: 0.15rem;
}

/* ── bottom care-line row (G4) — B monogram · rule · care-line ── */
.pf__foot {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 0.5rem + 1.2vw, 1.75rem);
  margin-top: clamp(2rem, 1.25rem + 2.5vw, 3.75rem);
}
.pf__monogram {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--terracotta) 55%, transparent);
  font-family: var(--font-display);     /* Prata monogram */
  font-size: 1.35rem;
  color: var(--stone-700);              /* espresso ink */
  background: color-mix(in srgb, var(--cream) 70%, transparent);
}
.pf__foot-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--hairline);          /* fine espresso hairline connector */
}
.pf__careline {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--step-mini);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--text-on-light-muted);
}
.pf__foot-arrow { color: var(--terracotta); }  /* honey arrow */

/* ── ambient / reduced-motion safety: everything alive-at-t0, nothing gated ── */
@media (prefers-reduced-motion: reduce) {
  .pf__img { animation: none; transform: scale(1.05); }
  .pf__gloss { animation: none; opacity: 0; }
  .pf__hover-sheen.is-sweeping { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RECOMPOSITION (≤760px) — per DESIGN mobile plan cell 4:
   mosaic → alternating single-column rhythm; start hero-adjacent, then range,
   then darker/bronde variety; favour hair texture/ribboning/length; cap initial
   load to 6 items. Recomposed, not squished — each tile keeps its 6px frame,
   identical caption slot, its gloss. The Valla pullquote re-slots between rows.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .pf { padding-left: 0; }
  .pf__spine {
    /* the spine returns to a small horizontal eyebrow-scale label on mobile */
    position: static;
    transform: none;
    display: block;
    letter-spacing: 0.3em;
    margin-bottom: var(--space-s);
  }
  .pf__spine::after { display: none; }

  .pf__head { max-width: none; margin-bottom: var(--space-l); }
  .pf__headline { font-size: clamp(2rem, 8vw, 2.6rem); }
  .pf__lede { max-width: none; }

  /* alternating single-column rhythm — tiles alternate offset for editorial variation,
     NOT a flat stack. Row unit is auto; each tile gets an explicit aspect frame. */
  .pf__mosaic {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }
  /* mobile order: hero-adjacent first (feature), then range, then darker/bronde/extensions.
     Cap initial load to 6 items (mobile plan) — hide the last two behind a reveal toggle. */
  .pf__tile--feature { order: 1; }
  .pf__tile--a       { order: 2; }
  .pf__tile--b       { order: 3; }
  .pf__quote         { order: 4; }
  .pf__tile--c       { order: 5; }
  .pf__tile--ext     { order: 6; }
  .pf__tile--d       { order: 7; }
  .pf__tile--e       { order: 8; }
  .pf__tile--f       { order: 9; }

  /* each mobile tile is a clean editorial portrait frame; alternate the crop weight
     with an offset margin for organic rhythm (T2.6 — one consistent rule, not random) */
  .pf__frame { aspect-ratio: 4 / 5; }
  .pf__tile--feature .pf__frame { aspect-ratio: 3 / 4; }   /* the feature stays taller */
  .pf__tile--ext .pf__frame { aspect-ratio: 1 / 1; }       /* the install macro reads best square */
  .pf__tile:nth-of-type(odd)  { margin-right: clamp(1.5rem, 8vw, 3rem); }
  .pf__tile:nth-of-type(even) { margin-left: clamp(1.5rem, 8vw, 3rem); }

  /* cap initial load to 6 items → the last two portraits reveal on tap (mobile plan) */
  .pf.is-collapsed .pf__tile--e,
  .pf.is-collapsed .pf__tile--f { display: none; }
  .pf__more {
    order: 10;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--space-xs);
    padding: 0.7rem 1.3rem;
    border-radius: var(--radius);
    border: 1px solid var(--hairline-strong);
    background: color-mix(in srgb, var(--cream) 70%, transparent);
    font-family: var(--font-body);
    font-size: var(--step-mini);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: var(--stone-700);
  }
  .pf__more[hidden] { display: none; }
  .pf:not(.is-collapsed) .pf__more { display: none; }

  /* pullquote re-slots as a calm centered breath between rows (no left rail on mobile) */
  .pf__quote {
    border-left: none;
    padding-left: 0;
    align-items: center;
    text-align: center;
    padding-block: var(--space-s);
  }
  .pf__quote-body { max-width: 26ch; }

  /* foot care-line stacks so the arrow line never wraps awkwardly */
  .pf__foot { flex-wrap: wrap; gap: var(--space-s); }
  .pf__foot-rule { order: 3; flex-basis: 100%; }
  .pf__careline { letter-spacing: 0.16em; }
}

/* very narrow (≤390px) — keep the headline to controlled lines, tighten the offset */
@media (max-width: 390px) {
  .pf__headline { font-size: clamp(1.85rem, 9vw, 2.3rem); }
  .pf__tile:nth-of-type(odd)  { margin-right: clamp(1rem, 6vw, 2rem); }
  .pf__tile:nth-of-type(even) { margin-left: clamp(1rem, 6vw, 2rem); }
}