/* ═══════ Chica Ruch — shared stylesheet ═══════ */
:root{
  --paper:linear-gradient(160deg, #FCFAF5 0%, #F5EFE6 45%, #EBE3D6 100%);
  --ink:#0A0A0A;
  --ink-dim:rgba(10,10,10,0.62);
  --ink-faint:rgba(10,10,10,0.42);
  --ink-hair:rgba(10,10,10,0.10);
  --ink-line:rgba(10,10,10,0.20);
  /* CLIENT (final revision, May–Jul '26): neutral luxury base + muted peach accent.
     --red kept as the accent alias so existing rules/inline styles inherit the swap.
     #D89A74 = deeper peach for text accents (readable on cream); #E8B8A2/#E7B59B = her
     chosen muted/warm peach for fills, hovers, tags; #F4D7C8 = light panels. */
  --red:#D89A74;
  --accent:#E8B8A2;
  --accent-warm:#E7B59B;
  --accent-light:#F4D7C8;
  --serif:"Fraunces", Georgia, serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --max:1320px;

  /* Spacing scale */
  --space-1:0.4rem;
  --space-2:0.8rem;
  --space-3:1.2rem;
  --space-4:1.6rem;
  --space-5:2.4rem;
  --space-6:3.2rem;
  --space-7:4.8rem;
  --space-8:7rem;

  /* Motion vocabulary */
  --ease-signature:cubic-bezier(.2,.7,.2,1);
  --ease-spring:cubic-bezier(.34,1.3,.5,1);
  --dur-reveal:.9s;
  --dur-hover:.35s;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper); background-attachment:fixed; color:var(--ink)}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); font-weight:400;
  font-size:13px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  opacity:1;
}
body.ready{opacity:1}
body.leaving{opacity:0; transition: opacity .35s ease}
img,video{display:block; max-width:100%; height:auto}
video{
  -webkit-tap-highlight-color:transparent;
  pointer-events:none;
}
video[data-autoplay],
video.managed-video{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  transition:opacity .18s ease;
}
video.managed-video.is-priming{
  display:block !important;
  visibility:hidden !important;
  opacity:0 !important;
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
}
video.managed-video.is-playing{
  display:block !important;
  visibility:visible !important;
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  opacity:1 !important;
}
.has-managed-video{
  position:relative;
  overflow:hidden;
}
.video-poster-fallback{
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 15%;
  pointer-events:none;
  user-select:none;
  transition:opacity .18s ease;
}
.mk-card .vid .video-poster-fallback{
  object-position:center top;
}
video.managed-video.is-playing + .video-poster-fallback{
  opacity:0;
}
video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-enclosure{
  display:none !important;
  -webkit-appearance:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent); color:var(--ink)}

.label{
  font-family:var(--sans);
  font-size:11px; letter-spacing:0.04em;
  color:var(--ink-faint);
}

/* ═══ TOPBAR ═══ */
.topbar{
  position:fixed; top:0; left:0; right:0;
  z-index:60;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.5rem 1.6rem;
  font-family:var(--sans); font-size:13px;
  background:rgba(246,240,231,0.72);
  backdrop-filter:saturate(1.4) blur(7px);
  -webkit-backdrop-filter:saturate(1.4) blur(7px);
  border-bottom:1px solid var(--ink-hair);
  color:var(--ink);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.topbar.over-dark{
  background:rgba(10,10,10,0.28);
  border-bottom-color:rgba(255,255,255,0.14);
  color:#fff;
}
.topbar.over-dark a{color:#fff}
.topbar .left, .topbar .right{display:flex; gap:1.7rem; align-items:center}
/* Editorial nav: uppercase, letter-spaced micro-labels */
.topbar a{transition:opacity .25s, color .3s; opacity:0.78}
.topbar .left a:not(.pill), .topbar .right a:not(.book){
  text-transform:uppercase; letter-spacing:0.13em; font-size:11px;
}
.topbar a:hover{opacity:1}
.topbar a.active{opacity:1; color:var(--red)}
.topbar.over-dark a.active{color:var(--red)}
.topbar .pill{font-family:var(--serif); font-style:italic; font-size:15px; opacity:1; letter-spacing:-0.01em}
.topbar .right a.book{
  color:var(--red); border-bottom:1px solid var(--red); padding-bottom:2px;
  opacity:1; text-transform:uppercase; letter-spacing:0.13em; font-size:11px;
}
.topbar .right a.book:hover{background:var(--accent-warm); color:var(--ink); border-bottom-color:var(--accent-warm); padding:1px 6px 3px}

/* ═══ MOBILE NAV TRIGGER (hidden on desktop) ═══ */
.mobile-nav-trigger{
  display:none;
  background:none; border:none; cursor:pointer;
  color:inherit; padding:0;
  min-height:44px; min-width:44px;
  align-items:center; justify-content:center;
  gap:0.5rem;
  font-family:var(--sans); font-size:11px;
  letter-spacing:0.04em;
  -webkit-tap-highlight-color:transparent;
}
.topbar.over-dark .mobile-nav-trigger{color:#fff}
.mobile-nav-trigger svg{display:block; flex-shrink:0}

/* ═══ MOBILE NAV OVERLAY ═══ */
.mobile-nav-overlay{
  display:none;
  position:fixed; inset:0;
  z-index:200;
}
.mobile-nav-overlay.is-active{ display:block; }
.mobile-nav-overlay.is-active .mobile-nav-panel{transform:translateX(0) !important}
.mobile-nav-overlay.is-static .mobile-nav-panel{transform:translateX(0)}
.mobile-nav-overlay.is-static .mobile-nav-scrim{opacity:1}

.mobile-nav-scrim{
  position:absolute; inset:0;
  background:rgba(10,10,10,0.55);
  opacity:0;
}

.mobile-nav-panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(420px, 100vw);
  overflow:hidden;
  display:flex; flex-direction:column;
  transform:translateX(101%);
}

.mobile-nav-layers{ position:absolute; inset:0; }
.mobile-nav-layer{
  position:absolute; inset:0;
  background:var(--ink);
}
.mobile-nav-layer:nth-child(1){ background:rgba(10,10,10,0.7); }
.mobile-nav-layer:nth-child(2){ background:rgba(10,10,10,0.88); }
.mobile-nav-layer:nth-child(3){ background:#0A0A0A; }

.mobile-nav-inner{
  position:relative; z-index:2;
  height:100%; display:flex; flex-direction:column;
  padding:1.4rem 2rem 2.5rem;
  color:#fff;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.mobile-nav-head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:1.4rem;
  border-bottom:1px solid rgba(255,255,255,0.1);
  margin-bottom:2.5rem;
  flex-shrink:0;
}

.mobile-nav-wordmark{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:1.3rem; color:#fff;
  font-variation-settings:"opsz" 144;
  letter-spacing:-0.01em;
}

.mobile-nav-close{
  background:none; border:none; cursor:pointer;
  min-height:44px; min-width:44px;
  display:flex; align-items:center; justify-content:flex-end;
  gap:0.5rem;
  font-family:var(--sans); font-size:11px;
  color:rgba(255,255,255,0.5);
  letter-spacing:0.04em; padding:0;
  transition:color .25s;
  -webkit-tap-highlight-color:transparent;
}
.mobile-nav-close:hover{ color:var(--red); }

.mnc-x{
  width:14px; height:14px;
  position:relative; display:inline-block; flex-shrink:0;
}
.mnc-x::before,.mnc-x::after{
  content:''; position:absolute;
  top:50%; left:0; width:100%; height:1px;
  background:currentColor;
}
.mnc-x::before{ transform:rotate(45deg); }
.mnc-x::after{ transform:rotate(-45deg); }

.mobile-nav-links{
  list-style:none;
  flex:1; display:flex; flex-direction:column;
  justify-content:center; gap:0;
}
.mobile-nav-links li{ overflow:hidden; }

.mobile-nav-link{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(2rem, 8vw, 3.2rem);
  line-height:1.1; letter-spacing:-0.03em;
  color:rgba(255,255,255,0.7);
  padding:0.5rem 0;
  border-bottom:1px solid rgba(255,255,255,0.07);
  font-variation-settings:"opsz" 144;
  transition:color .25s, padding-left .25s;
  -webkit-tap-highlight-color:transparent;
}
.mobile-nav-link:hover{ color:#fff; padding-left:0.3rem; }
.mobile-nav-link.is-active{ color:#fff; }

.mn-idx{
  font-size:0.75rem; font-style:italic;
  color:rgba(255,255,255,0.25);
  flex-shrink:0; min-width:1.8rem;
  transition:color .25s;
}
.mobile-nav-link.is-active .mn-idx{ color:var(--red); }
.mobile-nav-link:hover .mn-idx{ color:rgba(255,255,255,0.5); }

.mobile-nav-foot{
  flex-shrink:0;
  padding-top:2rem;
  border-top:1px solid rgba(255,255,255,0.1);
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:rgba(255,255,255,0.4);
  flex-wrap:wrap; gap:0.5rem;
}
.mobile-nav-foot a{
  color:rgba(255,255,255,0.65);
  border-bottom:1px solid rgba(255,255,255,0.3);
  padding-bottom:1px;
  transition:color .25s, border-color .25s;
  min-height:44px; display:inline-flex; align-items:center;
}
.mobile-nav-foot a:hover{ color:var(--red); border-bottom-color:var(--red); }

/* ═══ Layout helpers ═══ */
.wrap{max-width:var(--max); margin:0 auto; padding:0 1.6rem; position:relative}

/* ═══ Hand-drawn editorial ornaments (2026-07-08 peach pass) ═══
   Decorative only: aria-hidden inline SVGs, absolutely positioned inside .wrap,
   never intercept clicks, never shift layout. Peach (--red / --accent) strokes. */
.orn{position:absolute; pointer-events:none; user-select:none; z-index:0; color:var(--red); opacity:.75}
.orn svg{display:block; width:100%; height:auto; overflow:visible}
.orn--sparkle{width:clamp(26px, 3.4vw, 48px)}
.orn--flourish{width:clamp(96px, 13vw, 190px)}
.orn--orbit{width:clamp(58px, 7.5vw, 116px); opacity:.55}
.orn--ink{color:var(--ink-faint)}
@media (max-width:640px){
  .orn{opacity:.45}
  .orn--hide-sm{display:none}
}

/* Peach wash band — soft full-section tint that alternates with cream */
.peach-band{background:linear-gradient(180deg, rgba(244,215,200,0) 0%, rgba(244,215,200,.5) 14%, rgba(244,215,200,.5) 86%, rgba(244,215,200,0) 100%)}
section{padding:7rem 0; position:relative}
section + section:not(.no-rule){border-top:1px solid var(--ink-hair)}
/* Page lead — editorial masthead */
.page-lead{
  padding:9.5rem 0 4rem;
  border-bottom:1px solid var(--ink-line);
  margin-bottom:5rem;
  position:relative;
}
/* hairline running-header rule with red index tick */
.page-lead::before{
  content:"";
  position:absolute; top:7.5rem; left:0; width:2.4rem; height:2px;
  background:var(--red);
}
.page-lead .meta{
  display:flex; justify-content:space-between; align-items:center;
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-faint);
  padding-bottom:1.4rem; margin-bottom:2rem;
  border-bottom:1px solid var(--ink-hair);
}
.page-lead .meta .crumb em{color:var(--red); font-style:italic; font-family:var(--serif); text-transform:none; letter-spacing:0}
.page-lead .ti{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(3.2rem, 9.5vw, 8rem);
  line-height:0.88; letter-spacing:-0.04em;
  font-variation-settings:"opsz" 144;
  text-wrap:balance;
  margin-left:-0.04em;
}
.page-lead .ti em{color:var(--red); font-style:italic}
.page-lead .sub{
  margin-top:1.8rem;
  font-family:var(--sans); font-size:13.5px;
  color:var(--ink-dim); max-width:56ch; line-height:1.75;
}

.chapter{
  display:grid; grid-template-columns: auto 1fr auto;
  gap:2rem; align-items:end;
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--ink-hair);
  margin-bottom:4rem;
}
.chapter .ix{font-family:var(--serif); font-style:italic; font-size:2.4rem; line-height:1; font-weight:300; color:var(--red)}
.chapter .ix em{color:var(--red); font-style:italic}
.chapter .lbl{font-family:var(--sans); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); justify-self:start; align-self:end; padding-bottom:0.4rem}
.chapter .ti{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(2.2rem, 5vw, 4.4rem);
  line-height:0.95; letter-spacing:-0.025em;
  text-align:right;
  font-variation-settings:"opsz" 144;
}
.chapter .ti em{color:var(--red); font-style:italic}

/* Chapter reveal accent — one deliberate underline draw-in on scroll-into-view,
   title stays static. Piggybacks the existing .r-up/.will-reveal/.in reveal system. */
.chapter.r-up{position:relative}
.chapter.r-up::after{
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  height:2px;
  width:0;
  background:var(--red);
  transition:width 1.1s cubic-bezier(.2,.7,.2,1);
}
.chapter.r-up.in::after{width:2.6rem}

/* ═══ FOOTER ═══ */
.footer{
  background:var(--ink); color:#fff;
  padding:5rem 1.6rem 2rem;
}
.footer .inner{max-width:var(--max); margin:0 auto}
.footer .top{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap:3rem; padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,0.18);
}
.footer .col h5{
  font-family:var(--sans); font-size:11px; font-weight:400;
  color:rgba(255,255,255,0.5); margin-bottom:1rem;
}
.footer .col a{
  display:block; padding:0.3rem 0; font-size:13px;
  transition: color .25s, padding-left .25s;
}
.footer .col a:hover{color:var(--red); padding-left:0.4rem}
.footer .brand{
  font-family:var(--serif); font-style:italic; font-size:1.6rem;
  font-weight:300; margin-bottom:0.6rem;
}
.footer .brand em{color:var(--red); font-style:italic}
.footer .tag{font-size:13px; color:rgba(255,255,255,0.6); max-width:32ch; line-height:1.6}
.footer .bot{
  display:flex; justify-content:space-between;
  margin-top:2rem;
  font-size:11px; color:rgba(255,255,255,0.5);
  flex-wrap:wrap; gap:1rem;
}
.footer .bot a{color:rgba(255,255,255,0.7); transition:color .25s}
.footer .bot a:hover{color:var(--red)}

/* ═══ Reveals ═══ */
.r-up{opacity:1; transform:none}
.r-fade{opacity:1}
.will-reveal.r-up{opacity:0; transform:translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.will-reveal.r-up.in{opacity:1; transform:translateY(0)}
.will-reveal.r-fade{opacity:0; transition: opacity .9s ease}
.will-reveal.r-fade.in{opacity:1}

/* Lazy-loaded background images: dark placeholder until JS sets the url */
[data-bg]{background-color:var(--accent-light); background-size:cover; background-position:center}

/* ═══ Reusable: cv (content video) ═══ */
.cv{position:relative; overflow:hidden; background:var(--accent-light)}
.cv video, .cv .poster{
  width:100%; height:100%;
  object-fit:cover; object-position:center 15%;
  background-size:cover; background-position:center 15%;
  transition: transform 1.1s var(--ease-signature);
}
.cv:hover video, .cv:hover .poster{transform:scale(1.05)}
/* editorial legibility scrim */
.cv::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 38%);
  opacity:0.9; transition:opacity var(--dur-hover) ease;
}
.cv:hover::after{opacity:1}
.cv .meta{
  position:absolute; left:1rem; right:1rem; bottom:1rem;
  display:flex; justify-content:space-between; align-items:flex-end;
  color:#fff; font-family:var(--sans); font-size:9px;
  letter-spacing:0.13em; text-transform:uppercase;
  z-index:2;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
}
@media (hover:hover) and (pointer:fine){
  .cv:hover .meta{opacity:1; transform:translateY(0)}
}
.cv .meta .v{font-family:var(--serif); font-style:italic; font-size:1rem; letter-spacing:0; text-transform:none}

/* ═══ Big typographic CTA ═══ */
.bigcta{
  text-align:center; padding:8rem 1.6rem;
  /* Peach moment: closing CTA warms from paper into the accent (client asked for
     peach-feel backgrounds at key moments, not a full peach site). */
  background:linear-gradient(180deg, rgba(232,184,162,0) 0%, rgba(232,184,162,0.22) 78%, rgba(231,181,155,0.30) 100%);
}
.bigcta .lbl{font-size:11px; color:var(--ink-faint); margin-bottom:1.4rem; display:block}
.bigcta h2{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(3rem, 9vw, 9rem);
  line-height:0.9; letter-spacing:-0.035em;
  font-variation-settings:"opsz" 144;
  text-wrap:balance;
}
.bigcta h2 em{color:var(--red); font-style:italic}
.bigcta .actions{
  margin-top:3rem;
  display:flex; gap:2rem; justify-content:center; flex-wrap:wrap;
}
.bigcta a{
  font-family:var(--serif); font-style:italic; font-size:1.4rem;
  border-bottom:1px solid var(--ink); padding-bottom:3px;
  transition: color .3s, border-color .3s, gap .3s;
}
.bigcta a:hover{color:var(--red); border-bottom-color:var(--red)}

/* ═══ BREAKPOINTS ═══ */
@media (max-width: 980px){
  .topbar .left, .topbar .right{gap:1rem}
  .footer .top{grid-template-columns: 1fr 1fr; gap:2rem}
  .chapter{grid-template-columns:auto 1fr auto; gap:1rem}
  .chapter .ti{font-size:clamp(1.6rem, 4vw, 2.8rem)}
}

@media (max-width: 640px){
  .wrap{padding:0 1.1rem}
  section{padding:4.5rem 0}

  /* ── Topbar: show logo + book + hamburger only ── */
  .topbar{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    justify-content:stretch;
    box-sizing:border-box;
    width:100%;
    max-width:100vw;
    overflow:hidden;
    padding:1.1rem 1.2rem;
    font-size:11px;
    gap:1rem;
  }
  .topbar .left a:not(.pill){ display:none; }
  .topbar .right a:not(.book){ display:none; }
  .topbar .left{ gap:1rem; min-width:0 }
  .topbar .right{
    display:flex !important;
    gap:0.55rem;
    margin-left:0;
    flex-shrink:0;
    justify-content:flex-end;
    align-items:center;
    position:static;
    width:72px;
    height:44px;
  }
  .topbar .pill{ font-size:14px }
  .topbar .right a.book{ display:none }
  .mobile-nav-trigger{
    display:inline-flex !important;
    align-items:center;
    justify-content:space-between;
    position:static;
    z-index:1;
    width:72px;
    height:44px;
    padding:0;
    color:inherit !important;
  }
  .mobile-nav-trigger::before{
    content:"Menu";
    display:block;
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    line-height:1;
    color:currentColor;
  }
  .mobile-nav-trigger svg{
    display:block !important;
    color:currentColor !important;
    stroke:currentColor !important;
  }

  /* ── Page lead ── */
  .page-lead{
    padding:6.5rem 0 3rem;
    margin-bottom:3.5rem;
  }
  .page-lead::before{top:4.6rem}
  .page-lead .meta{
    display:grid;
    grid-template-columns:1fr;
    gap:0.5rem;
    align-items:start;
  }
  .page-lead .meta span{
    min-width:0;
    overflow-wrap:anywhere;
  }
  .page-lead .ti{
    max-width:100%;
    font-size:clamp(2.15rem, 10vw, 3.35rem);
    overflow-wrap:normal;
  }
  .page-lead .sub{
    font-size:13px;
    max-width:100%;
    overflow-wrap:anywhere;
  }

  /* ── Chapter ── */
  .chapter{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "ix lbl"
      "ti ti";
    gap:0.75rem;
    margin-bottom:2.5rem;
  }
  .chapter .ix{grid-area:ix}
  .chapter .lbl{grid-area:lbl}
  .chapter .ti{grid-area:ti; text-align:left}
  .chapter .ti{
    font-size:clamp(1.4rem, 7vw, 2.2rem);
    line-height:1;
  }
  .chapter .lbl{display:block; font-size:10px}

  /* ── BigCTA ── */
  .bigcta{padding:5.5rem 1.1rem}
  .bigcta .actions{gap:1rem 1.5rem}
  .bigcta a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }

  /* ── Footer ── */
  .footer{padding:4rem 1.1rem 2rem}
  .footer .top{grid-template-columns:1fr 1fr; gap:2rem 1.5rem}
  .footer .col a{
    min-height:44px;
    display:flex;
    align-items:center;
    padding:0.4rem 0;
  }
  .footer .bot a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  input,
  select,
  textarea,
  button{
    font-size:16px;
  }

  .mobile-nav-inner{padding:1.1rem 1.3rem 1.5rem}
  .mobile-nav-head{margin-bottom:1rem; padding-bottom:0.75rem}
  .mobile-nav-link{
    min-height:44px;
    align-items:center;
    padding:0.25rem 0;
    font-size:clamp(1.65rem, 7vw, 2.5rem);
  }
  .mobile-nav-foot{padding-top:1rem}

  a.cv,
  a.mk-card,
  a.brand-row,
  a.work-row{
    -webkit-tap-highlight-color:rgba(225,6,0,0.12);
  }

  .cv .meta{
    opacity:1;
    transform:none;
    font-size:9px;
    gap:0.45rem;
    min-width:0;
    overflow:hidden;
  }
  .cv .meta span:first-child{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .cv .meta .v{flex:0 0 auto}
  .brand-strip .line,
  .brand-strip .line span{
    min-width:0;
    max-width:100%;
    /* normal wrap + no balance — balance exploits emergency breaks and was
       splitting "Begumz" mid-word; no brand name exceeds a 390px line */
    overflow-wrap:normal;
    text-wrap:wrap;
  }
}

@media (max-width: 360px){
  .topbar{padding:0.9rem 1rem}
  .topbar .right,
  .mobile-nav-trigger{width:64px}
  .mobile-nav-trigger::before{font-size:9px}
  .footer .top{grid-template-columns:1fr; gap:1.6rem}
}

@media (max-width: 640px) and (max-height: 720px){
  .mobile-nav-inner{padding-bottom:0.9rem}
  .mobile-nav-head{margin-bottom:0.35rem}
  .mobile-nav-link{
    min-height:38px;
    font-size:clamp(1.45rem, 6.2vw, 2rem);
    line-height:1;
  }
  .mobile-nav-foot{padding-top:0.35rem}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
  .r-up, .r-fade{opacity:1; transform:none}
  body{opacity:1}
  .chapter.r-up::after{width:2.6rem; transition:none}
}

/* ============================================
   CONTENT PASS 1 — Model card, PR/Affiliate,
   Audience demographics
   ============================================ */

/* Model Card grid — 2 columns desktop, 1 mobile.
   Reuses .info-block (.k / .h) from happy-hour.html. */
.model-card-grid{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:0 4rem;
  border-top:1px solid var(--ink-hair);
  margin-top:2rem;
}
.model-card-grid .info-block{
  padding:1rem 0;
  border-top:none;
  border-bottom:1px solid var(--ink-hair);
  display:flex; justify-content:space-between; align-items:baseline;
  gap:2rem;
}
.model-card-grid .info-block .k{
  margin-bottom:0;
  white-space:nowrap;
}
.model-card-grid .info-block .h{
  margin-bottom:0;
  text-align:right;
}
@media (max-width: 768px){
  .model-card-grid{grid-template-columns:1fr; gap:0}
}

/* Audience demographics — same primitive */
.audience-demo{margin-top:4rem}
.audience-demo .model-card-grid{margin-top:0.6rem}

/* PR & Affiliate grid — 9:16 vertical cards */
.pr-subsection{margin-top:3rem}
.pr-subsection h3{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--ink-faint);
  text-transform:uppercase;
  margin-bottom:1.5rem;
  font-weight:400;
}
/* Shared media-kit card — 9:16 rounded video/image cards with a sans caption
   below. Used by modelling.html PR & Affiliate grids and content.html's
   "Paid social for brands" rows (promoted from content.html's page-local
   styles 2026-07-08 so both sections render identically). No play-badge —
   the whole card is already a link out to the source post/reel. */
.mk-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem}
.mk-row.four-up{grid-template-columns:repeat(4, 1fr)}
.mk-card{display:block}
.mk-card .vid{position:relative; aspect-ratio:9/16; border-radius:14px; overflow:hidden; background:var(--accent-light)}
.mk-card .vid video,
.mk-card .vid img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.mk-card:hover .vid video,
.mk-card:hover .vid img{transform:scale(1.04)}
.mk-card .cap{margin-top:0.7rem}
.mk-card .cap .t,
.brand-pair .cap .t{display:block; font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--ink); line-height:1.4; letter-spacing:0; text-transform:none}
.mk-card .cap .c,
.brand-pair .cap .c{display:block; font-family:var(--sans); font-size:9px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.13em; margin-top:0.15rem}
/* Two posts sharing one brand caption (e.g. Nominal, NYX) — same 9:16 card
   size as every other tile in the row, just two of them side by side under
   one caption instead of one video with its own. Without this the pair had
   no layout rule at all and fell back to block-stacked full-width anchors,
   roughly double the height of the tiles beside it. */
.brand-pair{display:grid; grid-template-columns:1fr 1fr; gap:0.6rem}
.brand-pair .cap{grid-column:1 / -1; margin-top:0.7rem}
@media (max-width:640px){
  .mk-row{gap:0.6rem}
  .mk-row.four-up{grid-template-columns:repeat(2, 1fr)}
  .mk-card .cap .t{font-size:0.9rem}
  .brand-pair{gap:0.4rem}
}

.pr-chips{
  display:flex; flex-wrap:wrap;
  gap:0.6rem 1.6rem; margin-top:1rem;
  font-family:var(--serif); font-style:italic;
  font-size:1.1rem; color:var(--ink-dim);
  line-height:1.4;
}
.pr-chips span{transition:color .25s}
.pr-chips span:hover{color:var(--red)}

/* Happy Hour intro videos — twin 9:16 block */
.happyhour-intros{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:1rem; margin:2rem 0 3rem;
}
.happyhour-intros video{
  width:100%;
  aspect-ratio: 9 / 16;
  object-fit:cover;
  background:var(--accent-light);
  display:block;
}
.happyhour-intros .video-caption{
  display:block;
  font-family:var(--sans);
  font-size:11px; letter-spacing:0.04em;
  color:var(--ink-faint);
  text-transform:uppercase;
  margin-top:0.5rem;
}
@media (max-width: 768px){
  .happyhour-intros{grid-template-columns:1fr}
}

/* Linked cards and rows */
a.mk-card,
a.work-row,
a.cv,
a.brand-row,
.editorial a,
.swim-grid a,
.dance-workshop-grid a,
.ep-grid a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.work-row,
a.brand-row {
  display: grid;
}
a.cv {
  display: block;
  position: relative;
}
.editorial a {
  display: contents;
}
.swim-grid a,
.dance-workshop-grid a,
.ep-grid a {
  display: block;
}