/* Branding case study (/dr-alisa-popescu/), on top of the shared case-study styles (portfolio-assets/css/main.css).
   The sections are rendered by portfolio-assets/js/case-study-pages.js from the optional fields galleryHeading,
   challenge, applications, brandSystem, impact and next. Layout follows mdx.so/projects: big titles, text blocks
   split title / copy, a collage of brand applications, then "Next project". */

@font-face { font-family: "DM Serif Display"; src: url("../fonts/DMSerifDisplay-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("../fonts/DMSerifDisplay-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }

.brand-case__heading, .brand-case__text-inner, .brand-case__collage, .brand-case__palette, .brand-case__proportions, .brand-case__type, .brand-case__next-link { width: 100%; max-width: 178rem; margin-inline: auto; }

/* Heading rows: "Brand book" + caption (split, like mdx "Initial concepts"), "Colour & type". */
.brand-case__heading { margin-bottom: clamp(3.6rem, 5vw, 7.9rem); }
.brand-case__heading h2, .brand-case__text h2 { margin: 0; color: var(--t-bright); font: normal 400 clamp(4.4rem, 6vw, 10rem)/.9 var(--_font-accent); letter-spacing: -.05em; }
.brand-case__heading--split { display: flex; align-items: end; justify-content: space-between; gap: 2rem 4rem; flex-wrap: wrap; padding-inline: 3rem; padding-top: clamp(6rem, 8vw, 12rem); }
.brand-case__heading--split p { margin: 0; color: var(--t-muted); font: 400 clamp(1.6rem, 1.3vw, 2.2rem)/1.3 var(--_font-default); }

/* The challenge / The impact: title on the left, large copy on the right. */
.brand-case__text { padding: clamp(8rem, 10vw, 16rem) 3rem clamp(5rem, 6vw, 9rem); }
.brand-case__text-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem 6rem; align-items: start; }
.brand-case__text p { margin: 0; color: var(--t-medium); font: 400 clamp(2.2rem, 2.2vw, 4rem)/1.18 var(--_font-default); letter-spacing: -.025em; }

/* Applications collage: a bento grid of the mockups. */
.brand-case__applications { padding: 0 3rem clamp(4rem, 6vw, 8rem); }
.brand-case__collage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(22rem, 22vw, 40rem); grid-auto-flow: dense; gap: clamp(1.2rem, 1.2vw, 2.4rem); margin-block: 0; padding: 0; list-style: none; }
.brand-case__tile { position: relative; overflow: hidden; border: 1px solid var(--st-muted); border-radius: clamp(1.8rem, 2vw, 3rem); background: var(--base-tint); box-shadow: 0 2rem 6rem #0000002e; }
.brand-case__tile--wide { grid-column: span 2; grid-row: span 2; }
.brand-case__tile--tall { grid-row: span 2; }
.brand-case__tile--long { grid-column: span 2; }
.brand-case__tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.brand-case__tile:hover img { transform: scale(1.04); }

/* Brand system: palette, proportions, typeface. */
.brand-case__system { position: relative; isolation: isolate; padding: clamp(8rem, 10vw, 16rem) 3rem clamp(4rem, 6vw, 8rem); }
.brand-case__system::before { content: ''; position: absolute; z-index: -1; top: 20%; left: 50%; width: 70rem; height: 70rem; max-width: 90vw; border-radius: 50%; background: #184b47; opacity: .35; filter: blur(140px); transform: translateX(-50%); pointer-events: none; }
.brand-case__label { margin: 0 0 1.6rem; color: var(--accent); font: 500 1.3rem/1 var(--_font-accent); letter-spacing: .16em; text-transform: uppercase; }
.brand-case__palette { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(1rem, 1vw, 1.6rem); margin-block: 0 clamp(3rem, 4vw, 6rem); padding: 0; list-style: none; }
.brand-case__swatch { display: flex; flex-direction: column; justify-content: flex-end; gap: .6rem; min-height: clamp(18rem, 16vw, 28rem); padding: 1.8rem; border: 1px solid #ffffff1f; border-radius: 2.2rem; background: var(--swatch); }
.brand-case__swatch--dark { color: #f8f6f0; }
.brand-case__swatch--light { color: #1d2624; }
.brand-case__swatch-role { margin-bottom: auto; font: 400 1.1rem/1.3 var(--_font-default); letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.brand-case__swatch strong { font: 400 clamp(1.8rem, 1.4vw, 2.4rem)/1.1 var(--_font-default); letter-spacing: -.02em; color: inherit; }
.brand-case__swatch code { font: 400 1.3rem/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .06em; color: inherit; opacity: .85; background: none; padding: 0; }

.brand-case__proportions { margin-bottom: clamp(5rem, 6vw, 9rem); }
.brand-case__bar { display: flex; height: clamp(1.8rem, 1.6vw, 2.6rem); overflow: hidden; border: 1px solid #ffffff1f; border-radius: 99px; }
.brand-case__legend { display: flex; flex-wrap: wrap; gap: 1rem 3.2rem; margin: 1.8rem 0 0; padding: 0; list-style: none; color: var(--t-medium); font: 400 1.5rem/1.3 var(--_font-default); }
.brand-case__legend li { display: flex; align-items: center; gap: 1rem; }
.brand-case__legend i { width: 1.2rem; height: 1.2rem; border: 1px solid #ffffff38; border-radius: 50%; }

.brand-case__type { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 4rem 8rem; padding: clamp(3rem, 4vw, 6rem); border: 1px solid var(--st-muted); border-radius: clamp(2.2rem, 2.4vw, 3.6rem); background: linear-gradient(145deg, #f8f6f0 0%, #ece6d6 100%); color: #1d2624; }
.brand-case__type-specimen { display: grid; place-items: center; aspect-ratio: 1; max-width: 46rem; width: 100%; margin-inline: auto; border: 1px solid #184b4733; border-radius: 50%; color: #184b47; font: 400 clamp(12rem, 15vw, 26rem)/1 "DM Serif Display", Georgia, serif; letter-spacing: -.04em; }
.brand-case__type .brand-case__label { color: #8a6c0e; }
.medusa-portfolio .brand-case__type-name { margin: 0 0 2rem; color: #184b47; font: 400 clamp(4.4rem, 5vw, 8.4rem)/1 "DM Serif Display", Georgia, serif; letter-spacing: -.02em; }
.medusa-portfolio .brand-case__type-glyphs { margin: 0 0 2.4rem; color: #303836; font: 400 clamp(2rem, 1.8vw, 3rem)/1.35 "DM Serif Display", Georgia, serif; }
.brand-case__type-note { max-width: 60ch; margin: 0 0 2.4rem; color: #4a5452; font: 400 1.7rem/1.5 var(--_font-default); }
.brand-case__roles { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.brand-case__roles li { padding: 1rem 1.6rem; border: 1px solid #184b4766; border-radius: 99px; color: #184b47; font: 400 1.4rem/1 var(--_font-default); }

/* Next project. */
.brand-case__next { padding: clamp(4rem, 6vw, 8rem) 3rem clamp(8rem, 10vw, 14rem); }
.brand-case__next-link { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 4rem; padding: clamp(2.4rem, 3vw, 4.8rem); overflow: hidden; border: 1px solid var(--st-muted); border-radius: clamp(2.2rem, 2.4vw, 3.6rem); background: linear-gradient(145deg, #222c4a73, #0c122259); color: var(--t-bright); text-decoration: none; transition: border-color .4s; }
.brand-case__next-link:hover { border-color: #a69abd88; }
.brand-case__next-copy { display: flex; flex-direction: column; gap: 1.6rem; }
.brand-case__next-label { color: var(--accent); font: 500 1.4rem/1 var(--_font-accent); letter-spacing: .16em; text-transform: uppercase; }
.brand-case__next-title { font: 400 clamp(5rem, 7vw, 12rem)/.9 var(--_font-accent); letter-spacing: -.055em; }
.brand-case__next-arrow { display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: 50%; background: linear-gradient(135deg, #7657f0, #a58cff); color: #fff; font-size: 2.4rem; transition: transform .4s; }
.brand-case__next-link:hover .brand-case__next-arrow { transform: rotate(45deg); }
.brand-case__next-image { overflow: hidden; aspect-ratio: 16 / 10; border-radius: clamp(1.6rem, 1.8vw, 2.4rem); }
.brand-case__next-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.brand-case__next-link:hover .brand-case__next-image img { transform: scale(1.04); }

@media (max-width: 1199px) {
  .brand-case__palette { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .brand-case__type { grid-template-columns: 1fr; }
  .brand-case__type-specimen { max-width: 30rem; }
}
@media (max-width: 767px) {
  .brand-case__heading--split, .brand-case__text, .brand-case__applications, .brand-case__system, .brand-case__next { padding-inline: 1.6rem; }
  .brand-case__text-inner { grid-template-columns: 1fr; }
  .brand-case__collage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 16rem; }
  .brand-case__tile--wide { grid-column: span 2; grid-row: span 1; }
  .brand-case__palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-case__swatch { min-height: 14rem; }
  .brand-case__next-link { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-case__tile img, .brand-case__next-image img, .brand-case__next-arrow { transition: none; }
}