/* ============================================================
   
   Type system: Fraunces (display) / Inter (body) / IBM Plex Mono (data labels)
   ============================================================ */


/*@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');


/* ---------- 1. Tokens ------------------------------------- */

/* ---------- 2. Reset + base ------------------------------- */
/*::selection{ background:var(--red); color:#fff; }*/

/* ---------- 3. Layout shells ------------------------------ */

/* .wrapper is a single-column hero shell by default; the loyalty page
   overrides it inline with a two-column grid. */

/* ---------- 4. Header + scroll meter (signature) ---------- */

/* Red-to-gold reading meter riding the header's bottom hairline.
   Pure CSS scroll-linked animation; silently absent where unsupported. */

/* ---------- 5. Shared editorial type ---------------------- */ /* .ssubsection-title */

/* ---------- 6. Home — hero -------------------------------- */

/* Client logo band */

/* ---------- 7. Home — selected work ----------------------- */

/*
.case-row:first-of-type{
  border-top: none;
}*/

/* Case media treatments */

/* ---------- 8. Home — more work / impact / career --------- */

/* ---------- 9. Contact + footers -------------------------- */

/* Case-study page footer */

/* ---------- 10. Case study — hero ------------------------- */

/*
.hero-info > h2{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 12px;
}*/

/* Fact strip */

/* TL;DR */

/* Hero image sets */
/* These are device mockups with their own bezel and transparent corners,
   so they get no frame of their own — only a radius for flat screenshots. */

/* ---------- 11. Case study — sections + lists ------------- */
/*.case-section{ background:var(--paper); }*/

/* Generic un-classed lists inside case copy */

/* ---------- 12. Case study — stat grid -------------------- */
/* Standalone caption paragraphs reusing .stat-label */

/* ---------- 13. Case study — card families ---------------- */

/* ---------- 14. Case study — callouts --------------------- */

/* ---------- 15. Case study — journey + compare ------------ */
/* Nested duplicate .compare-slot in the markup — flatten the inner one. */

/* ---------- 16. Case study — visuals ---------------------- */

/* ---------- 17. About page -------------------------------- */
/*.timeline-item:last-child{ border-bottom:1px solid var(--hair); }*/

/* ---------- 18. Legacy inline-style overrides ------------- */
/* A few pages hard-code light-theme values inline. Inline styles beat
   normal rules, so these are the only places !important is used. */

/* One section hardcodes style="background-color: black; color:white;" for
   its screenshot row. That black panel reads fine as an intentional dark
   pedestal (it matches the device-mockup panels used elsewhere), but this
   theme's .eyebrow-case / .section-title rules paint dark ink text by
   default — invisible on black. Force them light only inside that block. */

/* Anchor targets clear the sticky header */

/* ---------- 19. Responsive -------------------------------- */


/* ---------- 20. Motion + print ---------------------------- */

/* ---------- 21. Mytheresa portfolio ---------------------- */
.myt-theme{ --red:#8b6f00; --red-dim:#5d4a00; --red-wash:rgba(223,200,61,.14); }
.myt-theme .site-header::after{ background:var(--myt); }
.myt-theme .case-hero::before{ background:var(--myt); }
.myt-theme .eyebrow-case::before{ background:var(--myt); }
.myt-theme .case-kicker::before{ background:var(--myt); }
.myt-theme .stat-icon,
.myt-theme .strategy-number,
.myt-theme .principle-card > span,
.myt-theme .evidence-card > span,
.myt-theme .case-link:hover{ color:var(--red); }

.myt-home-hero{ background:var(--paper); overflow:hidden; }
.myt-home-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr); gap:clamp(36px,7vw,88px); align-items:center; }
.myt-home-copy h1{ font-family:var(--display); font-size:clamp(42px,6.5vw,76px); line-height:.98; letter-spacing:-.055em; max-width:12ch; margin-bottom:26px; }
.myt-home-copy .case-intro{ max-width:56ch; }
.myt-hero-photo{ position:relative; }
.myt-hero-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); filter:saturate(.82) contrast(1.04); }
.myt-hero-label{ position:absolute; left:18px; bottom:18px; background:#000; color:#fff; padding:14px 16px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }

.myt-case-list{ display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); }
.myt-case-card{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(320px,1.18fr); gap:clamp(30px,5vw,70px); align-items:center; min-height:500px; padding:clamp(32px,5vw,64px); background:var(--ink); text-decoration:none; }
.myt-case-card:nth-child(2){ background:var(--paper); }
.myt-case-card h3{ font-family:var(--display); font-size:clamp(30px,4.3vw,50px); line-height:1.03; letter-spacing:-.04em; margin-bottom:18px; }
.myt-case-card p{ color:var(--ink-muted); }
.myt-card-index{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:18px; }
.myt-card-media{ min-width:0; }
.myt-card-media.web img{ border:1px solid var(--hair); border-radius:var(--radius); }
.myt-phone-pair{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:500px; margin-left:auto; }
.myt-phone-pair img,
.device-gallery img{ border-radius:24px; box-shadow:0 18px 50px rgba(25,26,25,.12); }
.myt-phone-pair img:nth-child(2){ transform:translateY(30px); }

.myt-summary{ max-width:76ch; font-size:clamp(18px,2.2vw,23px); line-height:1.55; color:var(--ink-muted); }
.myt-visual-frame{ border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.myt-visual-frame img{ width:100%; }
.device-gallery{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,2vw,24px); align-items:start; margin-top:clamp(28px,5vw,52px); }
.device-gallery figure{ margin:0; }
.device-gallery figure:nth-child(even){ margin-top:34px; }
.device-gallery figcaption{ margin-bottom:12px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }

.experiment-stack{ display:flex; flex-direction:column; gap:clamp(54px,8vw,96px); margin-top:clamp(30px,5vw,56px); }
.experiment{ display:grid; grid-template-columns:minmax(230px,.68fr) minmax(0,1.32fr); gap:clamp(28px,5vw,70px); align-items:start; padding-top:36px; border-top:1px solid var(--hair); }
.experiment-copy h3{ font-family:var(--display); font-size:clamp(26px,3.2vw,38px); line-height:1.05; letter-spacing:-.03em; margin-bottom:14px; }
.experiment-copy .hypothesis-copy{ color:var(--ink-muted); }
.experiment-metrics{ display:flex; flex-wrap:wrap; gap:18px 28px; margin-top:24px; }
.experiment-metric strong{ display:block; font-size:clamp(28px,3vw,40px); line-height:1; }
.experiment-metric span{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.experiment-compare{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.experiment-compare figure{ margin:0; }
.experiment-compare figcaption{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
.experiment-compare img{ width:100%; border:1px solid var(--hair); border-radius:var(--radius); }

.next-case{ display:flex; justify-content:space-between; gap:24px; align-items:center; padding:28px 0; border-top:1px solid var(--hair); }
.next-case small{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.next-case a{ font-size:clamp(18px,2.2vw,26px); font-weight:600; text-decoration:none; }

@media (max-width:900px){
  .myt-home-grid,.myt-case-card,.experiment{ grid-template-columns:1fr; }
  .myt-case-card{ min-height:0; }
  .myt-phone-pair{ margin:0; }
  .device-gallery{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:620px){
  .myt-home-grid{ grid-template-columns:1fr; }
  .myt-home-copy h1{ font-size:clamp(38px,12vw,58px); }
  .myt-case-card{ padding:28px 22px 44px; }
  .device-gallery{ grid-template-columns:1fr 1fr; }
  .device-gallery figure:nth-child(even){ margin-top:0; }
  .experiment-compare{ gap:10px; }
  .next-case{ align-items:flex-start; flex-direction:column; }
}