/* UCLA Alumni. Figma: sidebar 264 · content area 1416 (264 → 1680) ·
   text column 1190 (376 → 1566). H1 is Georgia; every H2/H3 is Inter Bold. */
.case--ucla{
  --content:1416px;
  --col:1190px;
  --measure:860px;
  --ink:#071f3a;
  --ink-2:#101b2d;
  --ink-3:#344253;
  --ink-4:#5f6b78;
  --kick:#687381;          /* was #8593a5 — lifted to 4.5:1 */
  --brand:#2774ae;
  --brand-2:#1679c8;       /* was #177ed0 */
  --gold:#ffd100;
  background:#f9f7f2;
}
.case--ucla .side{background:rgba(255,253,248,.92);backdrop-filter:blur(16px)}
.case--ucla .progress span{background:var(--brand)}
.case--ucla .side__brand img{width:159px}

.side__nav--num a{display:flex;gap:12px;align-items:baseline;font-size:14.5px;line-height:21.8px}
.side__nav--num i{
  font-family:Cousine,ui-monospace,monospace;font-style:normal;font-weight:700;
  font-size:11px;color:#98a4b3;flex:none;
}
.side__nav--num a.is-here i{color:var(--brand)}

/* ── headings ───────────────────────────────────────────────────────── */
.case--ucla h1{
  max-width:1080px;font-family:var(--serif);font-weight:700;font-size:126px;
  line-height:110.9px;letter-spacing:-10.08px;color:var(--ink);margin:44px 0 0;
  /* the design's tracking also shrinks the spaces, which welds the words
     together at this size — give the word gap back without loosening letters */
  word-spacing:14px;
}
.h2--sans{
  font-family:var(--sans)!important;font-weight:700!important;font-size:72px!important;
  line-height:68.4px!important;letter-spacing:-4.56px!important;max-width:920px;
}
.case--ucla .lede{max-width:940px;font-size:28px;line-height:35px;letter-spacing:-.6px;color:#29394a}
.case--ucla .body{max-width:var(--measure);font-size:23px;line-height:31px;letter-spacing:-.7px;color:var(--ink-3)}
.body--tight{max-width:483px}
.case--ucla .eyebrow span{font-size:16px;line-height:18px;letter-spacing:1.68px;color:var(--brand)}
.eyebrow--soft span{color:rgba(255,255,255,.68)}

/* ── meta bar ───────────────────────────────────────────────────────── */
.meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:74px 0 0;
  background:rgba(255,255,255,.68);border:1px solid rgba(17,35,57,.13);
  border-radius:18px;overflow:hidden;
}
.meta > div{padding:29px 32px}
.meta > div + div{border-left:1px solid rgba(17,35,57,.13)}
.meta dt{
  font-weight:700;font-size:10px;line-height:15px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--brand-2);
}
.meta dd{
  margin:12px 0 0;font-family:var(--serif);font-weight:700;font-size:19px;
  line-height:20.9px;color:var(--ink-2);max-width:340px;
}

/* ── wide figures ───────────────────────────────────────────────────── */
.wide{margin:70px 0 0}
.wide img{width:100%;height:auto;border-radius:12px}
.wide--inset img{width:81%;margin-inline:auto}
.wide--caps figcaption{margin-bottom:18px;max-width:640px}
.wide--caps b{display:block;font-weight:700;font-size:15px;line-height:22.5px;color:var(--ink)}
.wide--caps span{display:block;margin-top:4px;font-size:13px;line-height:17.5px;color:var(--kick)}

/* ── 01 two-column intro ────────────────────────────────────────────── */
.two{display:grid;grid-template-columns:483fr 43fr 666fr;align-items:start;margin-top:6px}
.two > *:first-child{grid-column:1}
.two > .facts{grid-column:3}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.facts > div{
  background:rgba(255,255,255,.78);border:1px solid rgba(9,24,39,.12);
  border-radius:24px;padding:23px 26px 26px;
  box-shadow:0 16px 46px rgba(7,31,58,.06);
}
.facts span{
  display:block;font-weight:900;font-size:12px;line-height:18px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--brand);
}
.facts b{display:block;margin-top:14px;font-weight:700;font-size:24px;line-height:25.2px;letter-spacing:-.6px;color:var(--ink)}
.facts p{margin:12px 0 0;font-size:15px;line-height:21.8px;color:var(--ink-4)}

/* ── yellow voice band ──────────────────────────────────────────────── */
.voice{background:var(--gold);margin-top:96px;padding:64px 0 56px}
.voice__in{width:min(100% - 100px,var(--col));margin-inline:auto}
.voice .h2--sans{max-width:694px;color:var(--ink)}
.voice__cols{display:grid;grid-template-columns:repeat(2,minmax(0,356px));gap:230px;margin-top:26px}
.voice__cols p{margin:0;font-size:16px;line-height:25.6px;color:#172332}

/* ── dark bands ─────────────────────────────────────────────────────── */
.sec--band{background:var(--ink);color:#fff;padding:96px 0}
.sec--band .sec{padding-top:0}
.sec--band .sec + .sec{padding-top:120px}
.sec--navy .h2--sans,.sec--navy h3{color:#fff}
.sec--navy .body{color:rgba(255,255,255,.78)}
.sec--navy .kick{color:#7fbef0}
.sec--navy .show ul li,.sec--navy .webrow ul li{color:rgba(255,255,255,.82)}
.sec--navy .show__lede{color:rgba(255,255,255,.72)}
.sec--navy .kick{color:#7fbef0}

/* ── showcase rows ──────────────────────────────────────────────────── */
.show{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);
  gap:74px;align-items:center;margin-top:88px;
}
.show--flip > :first-child{order:2}
.show--solo{grid-template-columns:minmax(0,700px)}
.show > img,.stack img,.collage img{width:100%;height:auto;border-radius:12px}
.stack{display:flex;flex-direction:column;gap:20px}
.kick{
  display:block;font-family:Cousine,ui-monospace,monospace;font-weight:700;
  font-size:11px;line-height:11px;letter-spacing:1.76px;text-transform:uppercase;
  color:var(--brand);
}
.show h3,.webrow h3{margin:14px 0 0;font-weight:700;font-size:31px;line-height:32.2px;letter-spacing:-.84px;color:var(--ink)}
.sec--navy .show h3,.sec--navy .webrow h3{color:#fff}
.show__lede{margin:14px 0 0;font-size:16px;line-height:24px;color:var(--ink-4)}
.show ul,.freeform__copy ul{margin:26px 0 0;padding:0;list-style:none}
.show ul li,.freeform__copy ul li{
  position:relative;padding-left:26px;margin-bottom:20px;
  font-size:15px;line-height:21.8px;color:#3a4859;
}
.show ul li::before,.freeform__copy ul li::before{
  content:"";position:absolute;left:0;top:8px;width:10px;height:2px;background:var(--brand);
}
.sec--navy .show ul li::before,.sec--navy .freeform__copy ul li::before{background:#7fbef0}
.sec--navy .freeform__copy ul li{color:rgba(255,255,255,.82)}
.sec--navy .freeform__copy h3{color:#fff}

/* ── 03 web design rows ─────────────────────────────────────────────────
   Track sizes are the Figma columns in fr units, so the proportions survive
   any viewport: 527 / 69 / 437 for the first row, 104 / 396 / 96 / 538 for
   the mirrored one.                                                        */
.webrow{display:grid;align-items:start;margin-top:88px;
  grid-template-columns:527fr 69fr 437fr 157fr}
.webrow > .webrow__copy{grid-column:1}
.webrow > .webrow__screen{grid-column:3}
.webrow--flip{grid-template-columns:104fr 396fr 96fr 538fr 56fr}
.webrow--flip > .webrow__screen{grid-column:2}
.webrow--flip > .webrow__copy{grid-column:4}
.webrow__screen{width:100%;height:auto;border-radius:12px;align-self:start}
.webrow__mock{width:100%;height:auto;border-radius:12px;margin-top:44px}
.webrow .show__lede{margin-top:14px}
.webrow ul{margin:26px 0 0;padding:0;list-style:none}
.webrow ul li{position:relative;padding-left:26px;margin-bottom:20px;
  font-size:15px;line-height:21.8px;color:#3a4859}
.webrow ul li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:2px;background:var(--brand)}

/* ── email trio / campaign grid ─────────────────────────────────────── */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:96px;align-items:start}
.trio figure,.grid2 figure{margin:0}
.trio img{width:100%;height:auto;border-radius:12px;aspect-ratio:381 / 700;object-fit:cover;object-position:top}
.crow img{width:100%;height:auto;border-radius:0;display:block;background:#eef2f5}
.trio figcaption,.grid2 figcaption{margin-top:20px}
.trio b,.grid2 b{display:block;font-weight:700;font-size:15px;line-height:22.5px;color:#091827}
.trio span,.grid2 span{display:block;margin-top:6px;font-size:13px;line-height:17.5px;color:var(--kick)}
.range{margin:96px 0 0;max-width:576px;font-size:13px;line-height:17.5px;color:var(--kick)}
.crow{display:grid;margin-top:26px;align-items:start;column-gap:0}
.crow--a{grid-template-columns:665fr 20fr 506fr}
.crow--b{grid-template-columns:586fr 20fr 586fr;margin-top:20px;margin-bottom:150px}
.crow figure{
  background:#fff;border:1px solid rgba(9,24,39,.10);border-radius:26px;
  box-shadow:0 18px 58px rgba(7,31,58,.10);overflow:hidden;
}
.crow > figure:first-child{grid-column:1}
.crow > figure:last-child{grid-column:3}
.crow img{aspect-ratio:auto}
.crow--a > figure:first-child img{aspect-ratio:663 / 330;object-fit:cover}
.crow--a > figure:last-child img{aspect-ratio:504 / 330;object-fit:cover}
.crow--b img{aspect-ratio:584 / 330;object-fit:cover}
.crow figcaption{margin:0;padding:24px 19px 26px}
.crow b{display:block;font-weight:700;font-size:15px;line-height:22.5px;color:#091827}
.crow span{display:block;margin-top:6px;font-size:13px;line-height:17.5px;color:var(--kick)}

/* ── collage + print ────────────────────────────────────────────────── */
.freeform,.print{position:relative;width:100%}
/* section 06 was laid out by hand in the file, so it is reproduced from its
   own coordinates rather than forced into a grid */
.freeform{aspect-ratio:1190 / 1172;margin-top:70px}
.freeform__copy{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%)}
.print{aspect-ratio:1221 / 1990;margin-top:70px}
.crow--a,.crow--b{grid-template-columns:663fr 22fr 504fr}
.crow--b{grid-template-columns:584fr 22fr 584fr}
.freeform > img,.print > img{
  position:absolute;border-radius:12px;object-fit:cover;
  left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);
  width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);
}

/* ── closing ────────────────────────────────────────────────────────── */
.closing{width:min(100% - 100px,var(--col));margin:130px auto 0;padding-left:96px}
.closing p{
  margin:0;max-width:1000px;font-family:var(--serif);font-weight:400;font-size:64px;
  line-height:66.6px;letter-spacing:-3.52px;color:var(--ink);
}
.closing__art{margin:96px 0 0}
.closing__art img{width:100%;height:auto}
.case--ucla .casefoot{margin-top:0}

@media (max-width:1240px){
  .case--ucla h1{font-size:64px;line-height:1.02;letter-spacing:-2.6px}
  .h2--sans{font-size:44px!important;line-height:1.06!important;letter-spacing:-1.8px!important}
  .two,.show,.show--solo,.webrow,.webrow--flip{grid-template-columns:1fr;gap:36px}
  .webrow > *{grid-column:1!important}
  /* below the desktop breakpoint the hand-placed sections simply stack */
  .freeform,.print{aspect-ratio:auto;display:flex;flex-direction:column;gap:18px}
  .freeform > img,.print > img,.freeform__copy{position:static;width:100%;height:auto}
  .show--flip > :first-child{order:0}
  .voice__cols{gap:40px}
  .meta{grid-template-columns:1fr;gap:26px}
  .print{columns:2}
  .closing{padding-left:0}
  .closing p{font-size:38px;line-height:1.12;letter-spacing:-1.4px}
}
@media (max-width:760px){
  .case--ucla h1{font-size:40px;letter-spacing:-1.4px}
  .h2--sans{font-size:30px!important;letter-spacing:-1px!important}
  .case--ucla .lede{font-size:20px;line-height:29px}
  .case--ucla .body{font-size:18px;line-height:28px}
  .facts,.trio,.crow,.voice__cols{grid-template-columns:1fr}
  .print{columns:1}
  .wide--inset img{width:100%}
  .closing p{font-size:28px}
}

/* ── hero figures (numeric stat strip) ──────────────────────────────── */
.figs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:66px 0 0;
  border-top:1px solid rgba(17,35,57,.16);
  border-bottom:1px solid rgba(17,35,57,.16);
}
.figs > div{padding:28px 32px 26px}
.figs > div + div{border-left:1px solid rgba(17,35,57,.13)}
.figs dt{
  font-family:var(--serif);font-weight:700;font-size:44px;line-height:46px;
  letter-spacing:-1.8px;color:var(--ink);
}
.figs dd{
  margin:10px 0 0;font-size:13px;line-height:19px;letter-spacing:-.2px;
  color:var(--ink-4);max-width:200px;
}
.case--ucla .figs + .meta{margin-top:26px}
@media (max-width:1100px){
  .figs{grid-template-columns:repeat(2,1fr)}
  .figs > div:nth-child(3){border-left:0}
  .figs > div:nth-child(n+3){border-top:1px solid rgba(17,35,57,.13)}
}