/* ==================================================================
   ULTA BEAUTY REBRAND — case study (projects/ulta-beauty.html)
   Layout after a branding case study: overview line, big hero,
   title + facts beside challenge / approach, then the process in
   numbered chapters (a sticky index lights the one on screen).
   Site type everywhere (Inter, the site's labels); the brand's own
   Didot only inside the live brand pieces (Bodoni Moda as fallback).
   Builds on css/styles.css + css/project.css.
   ================================================================== */

.ub-page {
  --ub-ink:   #111111;
  --ub-porc:  #F5F0EA;
  --ub-glow:  #F26A2E;
  --ub-rouge: #C8174D;
  --ub-serif: Didot, "Didot LT STD", "Bodoni Moda", "Bodoni 72", Georgia, serif;
}

/* small tracked labels, the same as the site's section headings */
.ub-label,
.ub-overview span,
.ub-facts dt,
.ub-step__num i {
  font-size: var(--fs-heading);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--color-muted);
}
.ub-label { margin: 0 0 12px; }

/* ------------------------------------------------------------------
   Overview line + hero (UB-001)
   ------------------------------------------------------------------ */
.ub-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font-size: 0.9375rem;
  font-weight: var(--fw-light);
}

.ub-hero {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  max-height: calc(100svh - var(--header-h) - 96px);
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  outline: 1px solid var(--color-line);
  outline-offset: -1px;
  transition: background-color 0.9s var(--ease), color 0.9s var(--ease);
}
.ub-hero__mark { display: grid; justify-items: end; width: min(58%, 820px); }
.ub-word { display: block; width: 100%; height: auto; overflow: visible; color: inherit; }
.ub-word use { transform-box: fill-box; }
.ub-hero__beauty {
  margin: 0.6% 1% 0 0;
  font-size: clamp(0.9rem, 2.3vw, 2.2rem);
  font-weight: var(--fw-light);
  letter-spacing: 0.27em;
}
/* the Week 10 storyboard, as CSS: U rises, L slides, T drops, A climbs, swash flicks, beauty fades */
.ub-hero.is-playing .u { animation: ub-rise 1s 0.1s both cubic-bezier(.16, 1, .3, 1); }
.ub-hero.is-playing .l { animation: ub-slide 0.7s 0.7s both cubic-bezier(.16, 1, .3, 1); }
.ub-hero.is-playing .t { animation: ub-drop 0.7s 0.85s both cubic-bezier(.16, 1, .3, 1); }
.ub-hero.is-playing .a { animation: ub-up 0.7s 1s both cubic-bezier(.16, 1, .3, 1); }
.ub-hero.is-playing .s { animation: ub-flick 0.5s 1.55s both cubic-bezier(.16, 1, .3, 1); transform-origin: left bottom; }
.ub-hero.is-playing .ub-hero__beauty { animation: ub-fade 0.8s 1.9s both; }
@keyframes ub-rise  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes ub-slide { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes ub-drop  { from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: none; } }
@keyframes ub-up    { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@keyframes ub-flick { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes ub-fade  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ub-hero__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: clamp(10px, 1.6vw, 20px);
  font-size: var(--fs-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: inherit;
}
.ub-hero__bar > span:first-child, .ub-hero__replay { opacity: 0.7; }
.ub-hero__ways { display: flex; align-items: center; gap: 8px; }
.ub-hero__ways button {
  width: 16px; height: 16px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--c);
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.ub-hero__ways button:hover { transform: scale(1.25); }
.ub-hero__ways .ub-hero__replay {
  width: auto; height: auto;
  margin-left: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.ub-hero__ways .ub-hero__replay:hover { transform: none; color: var(--color-accent); }

/* ------------------------------------------------------------------
   Title + facts + challenge / approach (UB-002)
   ------------------------------------------------------------------ */
.ub-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 6vw, 96px);
  padding: clamp(36px, 5vw, 72px) 0 0;
}
.ub-facts { margin: 0; }
.ub-facts div { padding: 12px 0; border-top: 1px solid var(--color-line); }
.ub-facts dt { margin-bottom: 4px; }
.ub-facts dd { margin: 0; font-size: 0.9375rem; font-weight: var(--fw-light); line-height: 1.5; }
.ub-head__copy { max-width: 680px; }
.ub-head__copy .ub-label { margin-top: 28px; }
.ub-head__copy .ub-label:first-child { margin-top: 6px; }

/* ------------------------------------------------------------------
   Sticky process index (UB-003)
   ------------------------------------------------------------------ */
.ub-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  margin: var(--pj-space) calc(var(--gutter) * -1) 0;
  padding: 12px var(--gutter) 10px;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
}
.ub-nav .ub-label { margin-bottom: 8px; }
.ub-nav ol {
  display: flex;
  gap: 4px 22px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.ub-nav ol::-webkit-scrollbar { display: none; }
.ub-nav a {
  display: block;
  white-space: nowrap;
  color: var(--color-muted);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.ub-nav a b { font-weight: var(--fw-regular); margin-right: 4px; }
.ub-nav a:hover,
.ub-nav a.is-on { color: var(--color-accent); }
.ub-nav a.is-on b { color: var(--color-accent); }

/* ------------------------------------------------------------------
   Process chapters
   ------------------------------------------------------------------ */
.ub-step { margin-top: var(--pj-space); scroll-margin-top: calc(var(--header-h) + 90px); }
.ub-step__head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 6vw, 96px);
  padding-top: 18px;
  margin-bottom: clamp(28px, 4vw, 56px);
  border-top: 1px solid var(--color-line);
}
.ub-step__num { display: grid; gap: 8px; margin: 0; align-content: start; }
.ub-step__num span {
  font-size: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  font-weight: var(--fw-light);
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.ub-step__text { max-width: 680px; }
.ub-step .pj-row + .pj-row,
.ub-step .pj-row + .ub-reel__label,
.ub-step .ub-reel + .pj-row,
.ub-step > div + .pj-row,
.ub-step blockquote + .pj-row,
.ub-step .ub-copied + .pj-row { margin-top: var(--pj-gap); }

/* captions under process boards */
.ub-step .pj-row figure { display: flex; flex-direction: column; background: #141414; }
.ub-step .pj-row figcaption {
  padding: 9px 2px 2px;
  background: var(--color-bg);
  font-size: 0.75rem;
  font-weight: var(--fw-light);
  color: var(--color-muted);
}
.ub-step .pj-row figure img { flex: 1; }
.pj-row.ub-white figure { background: #fff; }
.pj-row.ub-white img { object-fit: contain; aspect-ratio: 6 / 5; }
.pj-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pj-row--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pj-row.ub-merch img { aspect-ratio: 1; object-fit: cover; }
.pj-row.ub-tall figure { background: var(--color-bg); }

/* the Week 2 line, set like the brand: Didot, two words in Rouge */
.ub-quote {
  margin: 0 0 var(--pj-gap);
  padding: clamp(36px, 6vw, 96px) clamp(24px, 6vw, 96px);
  background: var(--ub-ink);
  color: var(--ub-porc);
}
.ub-quote p {
  max-width: 22ch;
  margin: 0;
  font-family: var(--ub-serif);
  font-size: clamp(1.75rem, 1rem + 3.2vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
}
.ub-quote span { color: #E8456F; font-style: italic; }
.ub-quote footer { margin-top: 26px; font-size: var(--fs-heading); letter-spacing: var(--tracking-heading); text-transform: uppercase; color: #8A8A86; }

/* ------------------------------------------------------------------
   04 — the red-pen timeline scrubber
   ------------------------------------------------------------------ */
.ub-scrub { margin-bottom: var(--pj-gap); }
.ub-scrub__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #fff;
  overflow: hidden;
}
.ub-scrub__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.ub-scrub__frame img.is-on { opacity: 1; }
.ub-scrub__ctrl { padding-top: 14px; }
.ub-scrub__now { margin: 0 0 10px; font-size: 0.9375rem; font-weight: var(--fw-light); }
.ub-scrub__now b { font-weight: 500; margin-right: 10px; }
.ub-scrub input[type="range"] { width: 100%; accent-color: var(--color-accent); cursor: ew-resize; }
.ub-scrub__ticks {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.ub-scrub__ticks li { text-align: center; white-space: nowrap; overflow: hidden; }

/* ------------------------------------------------------------------
   06 — live pattern
   ------------------------------------------------------------------ */
.ub-pat {
  position: relative;
  margin-bottom: var(--pj-gap);
  background: var(--bg);
  color: var(--fg);
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}
.ub-pat__field { position: relative; aspect-ratio: 21 / 9; overflow: hidden; }
.ub-pat__field svg { position: absolute; overflow: visible; color: inherit; transition: transform 0.9s var(--ease), opacity 0.6s var(--ease); }
.ub-pat__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  padding: 12px clamp(12px, 1.6vw, 20px);
  background: var(--color-bg);
  color: var(--color-text);
}
.ub-pat__bar .ub-label { margin: 0; }
.ub-pat__bar [role="group"] { display: flex; flex-wrap: wrap; gap: 6px; }
.ub-pat__bar button,
.ub-sw {
  font: inherit;
  cursor: pointer;
}
.ub-pat__bar button {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ub-pat__bar button:hover,
.ub-pat__bar button[aria-pressed="true"] { color: var(--color-accent); border-color: var(--color-accent); }

/* ------------------------------------------------------------------
   07 — "Get hooked on ___"
   ------------------------------------------------------------------ */
.ub-hooked {
  position: relative;
  display: block;
  width: 100%;
  min-height: clamp(280px, 36vw, 520px);
  margin: 0 0 var(--pj-gap);
  padding: clamp(28px, 4vw, 64px);
  border: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  outline: 1px solid var(--color-line);
  outline-offset: -1px;
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}
.ub-hooked__line {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--ub-serif);
  font-size: clamp(2.4rem, 1.2rem + 5vw, 6.5rem);
  line-height: 1.02;
}
.ub-hooked__line em { font-style: normal; display: inline-block; transition: opacity 0.25s ease, transform 0.25s ease; }
.ub-hooked.is-swap .ub-hooked__line em { opacity: 0; transform: translateY(0.25em); }
.ub-hooked__u {
  position: absolute;
  right: 7%;
  bottom: 10%;
  width: clamp(130px, 20vw, 300px);
  height: auto;
  color: inherit;
  opacity: 0.95;
  transition: transform 0.8s var(--ease);
}
.ub-hooked:hover .ub-hooked__u { transform: translateY(-4%) rotate(-3deg); }
.ub-hooked__tip {
  position: absolute;
  left: clamp(28px, 4vw, 64px);
  bottom: clamp(16px, 2.4vw, 28px);
  font-size: var(--fs-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  opacity: 0.75;
}

/* ------------------------------------------------------------------
   08 — swatches, sized by how much of each the system uses
   ------------------------------------------------------------------ */
.ub-swatches { display: flex; min-height: clamp(220px, 26vw, 360px); }
.ub-sw {
  flex: var(--g) 1 0;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  padding: 14px 12px;
  border: 0;
  background: var(--c);
  color: #111;
  text-align: left;
  overflow: hidden;
  transition: flex-grow 0.5s var(--ease);
}
.ub-sw:nth-child(2) { color: #F5F0EA; }
.ub-sw:hover { flex-grow: calc(var(--g) + 10); }
.ub-sw b { font-family: var(--ub-serif); font-size: clamp(1rem, 0.7rem + 1vw, 1.5rem); font-weight: 400; }
.ub-sw span, .ub-sw i { font-size: 0.6875rem; font-style: normal; letter-spacing: 0.06em; white-space: nowrap; }
.ub-sw i { opacity: 0.7; }
.ub-copied { min-height: 1.4em; margin: 8px 0 0; font-size: 0.75rem; color: var(--color-accent); }

/* ------------------------------------------------------------------
   11 — the exploration reel (scrolls sideways)
   ------------------------------------------------------------------ */
.ub-reel__label { margin-top: clamp(28px, 3vw, 44px); }
.ub-reel { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-color: #3a3a38 transparent; }
.ub-reel__row { width: max(100%, 1500px); }
.ub-reel__row figure { scroll-snap-align: start; }
.ub-gif img { background: var(--ub-porc); object-fit: contain; aspect-ratio: 16 / 9; }

/* ------------------------------------------------------------------
   Credits + back / next (UB-004, UB-005)
   ------------------------------------------------------------------ */
.ub-end {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(56px, 7vw, 96px);
  padding: 22px 0 var(--pj-space);
  border-top: 1px solid var(--color-line);
}
.ub-end a {
  color: var(--color-text);
  font-size: var(--fs-project);
  letter-spacing: var(--tracking-project);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.ub-end a:hover { color: var(--color-accent); }

/* ------------------------------------------------------------------
   Smaller screens
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .ub-head, .ub-step__head { grid-template-columns: 1fr; }
  .ub-step__num { grid-auto-flow: column; justify-content: start; align-items: end; gap: 14px; }
  .pj-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ub-swatches { flex-wrap: wrap; }
  .ub-sw { flex: 1 1 33%; min-height: 120px; }
  .ub-sw:hover { flex-grow: 1; }
  .ub-sw i { white-space: normal; }
  .ub-scrub__ticks li:nth-child(even) { visibility: hidden; }
}
@media (max-width: 640px) {
  .ub-hero { aspect-ratio: 4 / 5; }
  .ub-hero__mark { width: 78%; }
  .ub-hero__bar { flex-direction: column; align-items: flex-start; }
  .ub-pat__field { aspect-ratio: 4 / 5; }
  .pj-row.ub-tall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-row--3.ub-tall figure:last-child:nth-child(odd) { grid-column: auto; }
  .ub-reel__row { width: 1100px; }
  .ub-end { flex-direction: column; }
  .ub-scrub__ticks { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ub-hero.is-playing * { animation: none !important; }
}