/* Bianca roster page v2: white-gallery variant.
   Direction from live brand feedback 2026-08-14: near-white ground, ink type,
   one accent (lacquer red), modern grotesk display, iOS-glass chips, rounded.
   Her work is the color; the frame stays monochrome. */
:root {
  --paper: #FCFAF6;      /* warm near-white: light, but in the Distinctive cream family */
  --white: #FFFFFF;      /* cards, tiles */
  --ink: #0E0E0C;        /* type, primary CTA */
  --mist: #EAE3D7;       /* sand-tinted hairlines: the beige undertone */
  --stone: #6E6555;      /* warm brown-gray secondary type (AA on paper) */
  --accent: #C2255C;      /* deep pink, Bianca's pick 2026-08-17 (was espresso); AA on paper */
  --accent-text: #C2255C; /* accent-colored TEXT, always AA on paper */
  --on-accent: #FFFFFF;   /* text sitting on accent fills */
  --accent-on-dark: #FFA3C6; /* the accent, lightened for the dark mobile hero */
  --f-display: 'Akshar', sans-serif;
  --f-sub: 'Archivo', sans-serif; /* rendered narrow+heavy via font-stretch on h2/h3 */
  --f-btn: 'Overpass', sans-serif;
  --f-kicker: 'Catamaran', sans-serif;
  --f-body: 'Archivo', sans-serif;
  --display: 'Catamaran', sans-serif; /* micro-labels: captions, badges, socials */
  --body: 'Archivo', sans-serif;
  --glass: rgba(255,255,255,0.72);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  background: var(--paper);
  color: var(--ink);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em { font-style: normal; color: var(--accent-text); }
h1 { font-family: var(--f-display); }
h1, h2, h3 { font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
h2, h3 { font-family: var(--f-sub); font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }

.kicker {
  font-family: var(--f-kicker);
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500; color: var(--accent-text); margin-bottom: 1.1rem;
}
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- NAV (glass bar) ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.4rem;
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(252,250,246,0.92); opacity: 0; transition: opacity 0.35s ease;
  box-shadow: 0 1px 0 rgba(14,14,12,0.06);
}
.nav.scrolled::before { opacity: 1; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.brand-logo { height: 2.1rem; width: auto; }
.nav-cta {
  font-family: var(--f-btn);
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
  background: var(--ink); color: var(--paper);
  padding: 0 1.2rem; border-radius: 999px;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: background 0.25s;
}
.nav-cta:hover, .nav-cta:focus-visible { background: var(--accent); color: var(--on-accent); }

/* ---------- HERO ---------- */
/* Desktop: cinematic right-bleed. The video runs full height to the right edge and
   fades into the paper ground on the left, where the name sits in ink. Her face
   stays framed because the video pane is portrait-proportioned, never wall-wide. */
.hero {
  position: relative; min-height: min(100svh, 880px); overflow: hidden;
  display: flex; align-items: center;
  padding: 6.5rem 2.4rem 3rem;
}
.hero-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; width: 100%; }
.hero-media {
  position: absolute; top: 0; right: 0; bottom: 0;
  /* Portrait-proportioned pane tied to hero HEIGHT, not viewport width: her whole
     head stays in frame on any monitor; the white ground grows to fill the left. */
  width: auto; aspect-ratio: 3 / 4; max-width: 58%;
}
.hero-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, var(--paper) 0%, rgba(252,250,246,0) 38%);
}
.hero-video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.hero-scrim { display: none; }
.hero h1 { font-size: clamp(4.2rem, 9vw, 7.6rem); margin-bottom: 0.7rem; color: var(--ink); }
.hero-line { font-size: 1.2rem; color: var(--stone); max-width: 36rem; margin-bottom: 2rem; }
.btn {
  font-family: var(--f-btn);
  display: inline-flex; align-items: center; font-size: 0.75rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 500;
  border: 1.5px solid var(--ink); color: var(--ink); padding: 0 1.6rem; border-radius: 999px;
  min-height: 48px; transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--paper); }
.btn-solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-solid:hover, .btn-solid:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- SECTIONS ---------- */
section { padding: 5.5rem 2.4rem; max-width: 1180px; margin: 0 auto; }
.section-head { margin-bottom: 2.6rem; }
.section-head h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.section-sub { color: var(--stone); margin-top: 0.9rem; max-width: 32rem; }

/* ---------- VIDEO WALL (white gallery) ---------- */
.wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem 0.9rem; }
.tile {
  position: relative; cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.3s ease-out;
}
.tile video, .tile > img {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 16px; background: var(--mist);
  box-shadow: 0 14px 34px -18px rgba(14,14,12,0.25);
}
.tile-still { cursor: default; }
.tile:hover { transform: translateY(-4px); }
.tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 16px; }
.tile figcaption {
  margin-top: 0.6rem;
  font-family: var(--display);
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500; color: var(--ink);
}
.tile.playing figcaption { color: var(--accent-text); }
.tile::after {
  content: "Tap for sound"; position: absolute; top: 0.7rem; left: 0.7rem;
  font-family: var(--display);
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
  color: var(--ink); background: rgba(252,250,246,0.94);
  padding: 0.32rem 0.62rem; border-radius: 999px;
  opacity: 0; transition: opacity 0.25s;
}
.tile:hover::after, .tile.playing::after { opacity: 1; }
.tile.playing::after { content: "Sound on"; background: var(--accent); color: var(--on-accent); }
.tile-ig {
  position: absolute; top: 0.55rem; right: 0.55rem; z-index: 2;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(252,250,246,0.94); color: var(--ink);
  box-shadow: 0 2px 8px rgba(14,14,12,0.12);
  transition: background 0.25s, color 0.25s;
}
.tile-ig:hover, .tile-ig:focus-visible { background: var(--ink); color: var(--white); }

/* ---------- LANES ---------- */
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; align-items: start; }
.lane h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0.8rem; }
.lane p { color: var(--stone); max-width: 26rem; }
.lane { border-left: 1px solid var(--mist); padding-left: 1.6rem; }
.lane:first-child { border-left: none; padding-left: 0; }
/* The Face: editorial strip, scrolls sideways on small screens */
.face-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.8rem; }
.face-strip img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px;
  box-shadow: 0 14px 34px -18px rgba(14,14,12,0.25);
}

/* ---------- BOOKING ---------- */
.booking-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.booking-list li {
  display: flex; gap: 1.2rem; align-items: baseline;
  background: var(--white); border: 1px solid var(--mist); border-radius: 18px;
  padding: 1.5rem 1.6rem;
}
.booking-num { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--accent-text); }
.booking-list .booking-h { font-size: 1.15rem; margin-bottom: 0.3rem; letter-spacing: -0.01em; }
.booking-list p { color: var(--stone); font-size: 0.92rem; }

/* ---------- CONTACT ---------- */
.contact { text-align: center; padding-bottom: 6.5rem; }
.contact h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.contact-sub { color: var(--stone); margin: 1rem auto 2.2rem; max-width: 28rem; }
.socials {
  margin-top: 1.8rem; display: flex; justify-content: center; align-items: center; gap: 1rem;
  font-family: var(--display);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
}
.socials a { color: var(--stone); padding: 0.6rem 0.2rem; min-height: 44px; display: inline-flex; align-items: center; transition: color 0.25s; }
.socials a:hover, .socials a:focus-visible { color: var(--accent-text); }
.socials span { color: var(--mist); }

/* ---------- FOOTER ---------- */
.footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.6rem 2.4rem; border-top: 1px solid var(--mist);
  font-size: 0.78rem; color: var(--stone);
}
.footer-brand { font-family: var(--display); font-weight: 500; font-size: 0.9rem; color: var(--ink); }
.footer-brand em { color: var(--ink); font-style: italic; }
.footer a:hover { color: var(--ink); }

/* ---------- SCROLL REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease-out, transform 0.45s ease-out; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- TABLET (iPad: 3-col wall so tiles stay legible) ---------- */
@media (min-width: 761px) and (max-width: 1080px) {
  .wall { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- MOBILE (390px composition) ---------- */
@media (max-width: 760px) {
  .nav { padding: 0.7rem 1rem; }
  .brand-logo { height: 1.8rem; }
  .hero { min-height: 100svh; padding: 0 1.2rem 2.8rem; align-items: flex-end; }
  .hero-media { inset: 0; width: auto; aspect-ratio: auto; max-width: none; }
  .hero-media::before { display: none; }
  .hero-scrim {
    display: block; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(14,14,12,0.94) 0%, rgba(14,14,12,0.55) 34%, rgba(14,14,12,0.1) 62%);
  }
  .hero h1 { font-size: clamp(3.4rem, 16vw, 4.6rem); color: var(--paper); }
  .hero-line { font-size: 1rem; color: #E8E2D6; }
  .hero-line em { color: var(--accent-on-dark); }
  .hero .btn { border-color: var(--paper); color: var(--paper); }
  .hero .btn:hover, .hero .btn:focus-visible { background: var(--paper); color: var(--ink); }
  section { padding: 3.6rem 1.2rem; }
  .wall { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 0.8rem; }
  .tile figcaption { font-size: 0.62rem; }
  .lanes { grid-template-columns: 1fr; gap: 2rem; }
  .lane { border-left: none; padding-left: 0; border-top: 1px solid var(--mist); padding-top: 1.4rem; }
  .lane:first-child { border-top: none; padding-top: 0; }
  .face-strip { display: flex; overflow-x: auto; gap: 0.7rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 0.4rem; }
  .face-strip img { flex: 0 0 62%; scroll-snap-align: start; }
  .booking-list { grid-template-columns: 1fr; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .tile:hover { transform: none; }
}