/* ===========================================================
   Seema Rao Portfolio — design system
   Ported faithfully from the approved mockup.
   Everything is scoped under .sr so it can't clobber wp-admin,
   the admin bar, or other plugins.
   =========================================================== */

.sr {
  --cream:#fff5e5; --cream-2:#fbefd9; --ink:#1d1d1d; --mute:#73695a;
  --faint:#a89e88; --line:#e9dec6; --yellow:#fff3a8; --pink:#fb8ed7;
  --red:#f0696b; --purple:#dc7dff; --blue:#527bff; --blue2:#3c6fa6;
  --mint:#dfeee6; --lilac:#f4e9fe; --blush:#ffe7e7;
  --accent:#f0696b;            /* Mortality Red — change to #527bff (Cobalt) or #1d1d1d (Ink) */
  background:var(--cream);
  color:var(--ink);
  font-family:'Schibsted Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.sr *{ box-sizing:border-box; }
.sr a{ text-decoration:none; color:inherit; }
.sr img{ display:block; max-width:100%; }
.sr h1,.sr h2,.sr h3,.sr p,.sr ul{ margin:0; }
.sr ::selection{ background:#1d1d1d; color:#fff5e5; }

/* page background follows the design even outside the wrapper */
body.sr-page{ margin:0; background:#fff5e5; }
html{ scroll-behavior:smooth; }

/* ---- shared tokens ------------------------------------------------ */
.sr-wrap{ max-width:1320px; margin:0 auto; padding:0 clamp(20px,4vw,48px); }
.sr-serif{ font-family:'Newsreader', Georgia, serif; }
.sr-eyebrow{
  font-family:'Newsreader', Georgia, serif;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute);
}
.sr-rel{ position:relative; }
.sr-z1{ position:relative; z-index:1; }

/* ---- spirograph flourish ----------------------------------------- */
/* color via --c, size/position via inline style on the element */
.sr-spiro{
  position:absolute; aspect-ratio:1; border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, var(--c) 0 .5deg, transparent .5deg 11.25deg),
    repeating-radial-gradient(circle, var(--c) 0 1px, transparent 1px 22px);
  -webkit-mask:radial-gradient(circle, transparent 0 30%, #000 34% 92%, transparent 100%);
          mask:radial-gradient(circle, transparent 0 30%, #000 34% 92%, transparent 100%);
  z-index:0; pointer-events:none;
}

/* ---- image slots -------------------------------------------------- */
.sr-img{
  position:relative; z-index:1; width:100%;
  background:var(--cream-2); border:1px solid var(--line); overflow:hidden;
}
.sr-img img{ width:100%; height:100%; object-fit:cover; }
/* on-brand placeholder (projects with no image yet) */
.sr-img--ph{ display:flex; align-items:center; justify-content:center; }
.sr-img--ph::after{
  content:attr(data-label);
  font-family:'Newsreader', Georgia, serif; font-style:italic;
  font-size:15px; color:var(--faint); letter-spacing:.02em;
}
.sr-img--ph{
  background-image:
    radial-gradient(circle at 30% 30%, rgba(220,125,255,.06), transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(82,123,255,.05), transparent 60%);
}

/* =================================================================
   NAV
   ================================================================= */
.sr-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,245,229,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.sr-nav__inner{
  max-width:1320px; margin:0 auto; padding:18px clamp(20px,4vw,48px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.sr-brand{ display:flex; align-items:baseline; gap:10px; }
.sr-brand b{ font-weight:600; font-size:17px; letter-spacing:-.01em; }
.sr-brand span{
  font-family:'Newsreader', Georgia, serif; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
.sr-nav__links{
  display:flex; align-items:center; gap:30px;
  font-family:'Newsreader', Georgia, serif; font-size:14px;
  letter-spacing:.1em; text-transform:uppercase;
}
.sr-nav__links a{ color:var(--mute); }
.sr-nav__links a:hover{ color:var(--ink); }
.sr-nav__links a.is-current{ color:var(--ink); }
.sr-nav__toggle{
  display:none; border:0; background:transparent; cursor:pointer;
  width:40px; height:40px; padding:8px; color:var(--ink);
}
.sr-nav__toggle svg{ width:100%; height:100%; }

/* =================================================================
   HERO
   ================================================================= */
.sr-hero{ scroll-margin-top:70px; position:relative;
  padding:clamp(48px,7vw,96px) clamp(20px,4vw,48px) clamp(28px,3vw,44px); }
.sr-hero, .sr-section{ max-width:1320px; margin:0 auto; }
.sr-hero__eyebrow{
  margin:0 0 clamp(28px,4vw,52px);
  font-family:'Newsreader', Georgia, serif; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
}
.sr-hero h1{
  font-weight:500; font-size:clamp(64px,11vw,168px);
  line-height:.9; letter-spacing:-.045em;
}
.sr-hero__row{
  margin-top:clamp(28px,4vw,44px);
  display:flex; flex-wrap:wrap; gap:32px;
  justify-content:space-between; align-items:flex-end;
}
.sr-hero__lead{
  max-width:30ch; font-size:clamp(20px,2.1vw,28px);
  line-height:1.32; letter-spacing:-.01em; color:var(--ink);
}
.sr-chips{ display:flex; flex-wrap:wrap; gap:8px; max-width:380px; }
.sr-chip{
  font-family:'Newsreader', Georgia, serif; font-size:13.5px; letter-spacing:.02em;
  padding:8px 16px; border-radius:999px; color:var(--ink);
}

/* hero media */
.sr-heromedia{ max-width:1320px; margin:0 auto;
  padding:0 clamp(20px,4vw,48px); position:relative; }
.sr-heromedia .sr-img{ height:clamp(360px,58vw,680px); }
.sr-caption{ margin:14px 0 0; font-family:'Newsreader', Georgia, serif;
  font-style:italic; font-size:16px; color:var(--mute); }

/* "Things I do" animated rings (hero media) */
.sr-tid{ --tid-gold:#e3a92b; width:100%; }
.sr-tid__kicker{
  margin:0 0 clamp(8px,2vw,22px); text-align:center;
  font-family:'Newsreader', Georgia, serif; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}
.sr-tid__stage{
  position:relative; width:100%; max-width:1180px; margin:0 auto;
  aspect-ratio:2.05/1;
}
.sr-tid__ring{ position:absolute; aspect-ratio:1; }
.sr-tid__ring .disc{
  position:absolute; inset:0; border-radius:50%;
  -webkit-mask:radial-gradient(circle, transparent 0 42%, #000 46% 95%, transparent 100%);
          mask:radial-gradient(circle, transparent 0 42%, #000 46% 95%, transparent 100%);
}
.sr-tid__ring .label{
  position:absolute; inset:18%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Schibsted Grotesk', system-ui, sans-serif;
  font-weight:700; line-height:1.04; letter-spacing:-.02em; color:var(--ink);
}
.sr-tid .r1{ left:0%;  top:6%;  width:27%; z-index:2; animation:tidFloatA 8s   ease-in-out infinite; }
.sr-tid .r2{ left:13%; top:44%; width:22%; z-index:4; animation:tidFloatB 9s   ease-in-out -2s infinite; }
.sr-tid .r3{ left:29%; top:1%;  width:19%; z-index:3; animation:tidFloatC 7s   ease-in-out -1s infinite; }
.sr-tid .r4{ left:41%; top:41%; width:22%; z-index:5; animation:tidFloatA 10s  ease-in-out -3s infinite; }
.sr-tid .r5{ left:58%; top:2%;  width:20%; z-index:3; animation:tidFloatB 8s   ease-in-out -4s infinite; }
.sr-tid .r6{ left:71%; top:26%; width:29%; z-index:2; animation:tidFloatC 9.5s ease-in-out -2.5s infinite; }
.sr-tid .r1 .disc{ background:repeating-conic-gradient(from 0deg, var(--purple) 0 1.2deg, transparent 1.2deg 11.25deg), repeating-radial-gradient(circle, var(--purple) 0 2.2px, transparent 2.2px 22px); animation:tidSpin  60s linear infinite; }
.sr-tid .r2 .disc{ background:repeating-conic-gradient(from 0deg, var(--red)    0 1.2deg, transparent 1.2deg 11.25deg), repeating-radial-gradient(circle, var(--red)    0 2.2px, transparent 2.2px 22px); animation:tidSpinR 70s linear infinite; }
.sr-tid .r3 .disc{ background:repeating-conic-gradient(from 0deg, var(--blue)   0 1.2deg, transparent 1.2deg 11.25deg), repeating-radial-gradient(circle, var(--blue)   0 2.2px, transparent 2.2px 22px); animation:tidSpin  52s linear infinite; }
.sr-tid .r4 .disc{ background:repeating-conic-gradient(from 0deg, var(--blue2)  0 1.2deg, transparent 1.2deg 11.25deg), repeating-radial-gradient(circle, var(--blue2)  0 2.2px, transparent 2.2px 22px); animation:tidSpinR 64s linear infinite; }
.sr-tid .r5 .disc{ background:repeating-conic-gradient(from 0deg, var(--pink)   0 1.2deg, transparent 1.2deg 11.25deg), repeating-radial-gradient(circle, var(--pink)   0 2.2px, transparent 2.2px 22px); animation:tidSpin  56s linear infinite; }
.sr-tid .r6{ }
.sr-tid .r6 .disc{ background:repeating-conic-gradient(from 0deg, var(--tid-gold) 0 1.2deg, transparent 1.2deg 11.25deg), repeating-radial-gradient(circle, var(--tid-gold) 0 2.2px, transparent 2.2px 22px); animation:tidSpinR 72s linear infinite; }
.sr-tid .r1 .label{ font-size:clamp(15px,1.85vw,24px); }
.sr-tid .r2 .label{ font-size:clamp(14px,1.7vw,22px); }
.sr-tid .r3 .label{ font-size:clamp(14px,1.65vw,21px); }
.sr-tid .r4 .label{ font-size:clamp(14px,1.7vw,22px); }
.sr-tid .r5 .label{ font-size:clamp(14px,1.65vw,21px); }
.sr-tid .r6 .label{ inset:21%; font-size:clamp(14px,1.7vw,22px); }
@keyframes tidFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes tidFloatB{0%,100%{transform:translateY(-12px)}50%{transform:translateY(12px)}}
@keyframes tidFloatC{0%,100%{transform:translateY(8px)}50%{transform:translateY(-18px)}}
@keyframes tidSpin{to{transform:rotate(360deg)}}
@keyframes tidSpinR{to{transform:rotate(-360deg)}}

/* =================================================================
   ABOUT lead
   ================================================================= */
.sr-about{ max-width:1320px; margin:0 auto;
  padding:clamp(72px,10vw,140px) clamp(20px,4vw,48px); }
.sr-about__grid{ display:flex; flex-wrap:wrap; gap:clamp(32px,5vw,72px); }
.sr-about__label{ flex:0 0 auto; width:160px; }
.sr-about__body{ flex:1 1 520px; min-width:300px; }
.sr-about__body p{
  font-size:clamp(24px,2.7vw,38px); line-height:1.3;
  letter-spacing:-.015em; color:var(--ink);
}
.sr-em-red{ font-family:'Newsreader', Georgia, serif; font-style:italic; color:var(--red); }

/* =================================================================
   WORK (homepage selected)
   ================================================================= */
.sr-work{ scroll-margin-top:70px; border-top:1px solid var(--line); }
.sr-work__head{
  max-width:1320px; margin:0 auto;
  padding:clamp(48px,5vw,72px) clamp(20px,4vw,48px) 0;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.sr-work__head h2{
  font-family:'Newsreader', Georgia, serif; font-size:15px;
  letter-spacing:.14em; text-transform:uppercase;
}
.sr-viewall{
  font-family:'Newsreader', Georgia, serif; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase;
  border-bottom:1px solid var(--ink); padding-bottom:2px;
}

/* full-width project */
.sr-proj{ max-width:1320px; margin:clamp(36px,4vw,56px) auto 0;
  padding:0 clamp(20px,4vw,48px); }
.sr-proj--gap{ margin-top:clamp(56px,7vw,104px); }
.sr-proj .sr-img{ height:clamp(320px,46vw,560px); }
.sr-proj--short .sr-img{ height:clamp(320px,42vw,520px); }
.sr-proj__meta{
  margin-top:22px; display:flex; flex-wrap:wrap; gap:24px;
  justify-content:space-between; border-top:1px solid var(--ink); padding-top:18px;
}
.sr-proj__no{
  font-family:'Newsreader', Georgia, serif; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mute); width:170px;
}
.sr-proj__txt{ flex:1 1 420px; min-width:280px; max-width:560px; }
.sr-proj__txt h3{ margin:0 0 8px; font-size:clamp(24px,2.4vw,32px);
  font-weight:500; letter-spacing:-.02em; }
.sr-proj__txt p{ font-size:16px; line-height:1.55; color:var(--mute); }
.sr-proj__stat{ text-align:right; min-width:120px; }
.sr-proj__statnum{ font-size:clamp(40px,4vw,58px); font-weight:500;
  line-height:.95; letter-spacing:-.03em; }
.sr-proj__statnum--sm{ font-size:clamp(34px,3.4vw,48px); }
.sr-proj__statlbl{ font-family:'Newsreader', Georgia, serif; font-size:13px;
  color:var(--faint); margin-top:4px; }

/* two-up cards */
.sr-twoup{
  max-width:1320px; margin:clamp(56px,7vw,104px) auto 0;
  padding:0 clamp(20px,4vw,48px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:clamp(28px,3vw,44px);
}
.sr-twoup--last{ padding-bottom:clamp(72px,9vw,128px); }
.sr-card .sr-img{ height:clamp(280px,30vw,420px); }
.sr-card__body{ margin-top:18px; border-top:1px solid var(--ink); padding-top:16px; }
.sr-card__no{ font-family:'Newsreader', Georgia, serif; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-bottom:10px; }
.sr-card__body h3{ margin:0 0 8px; font-size:clamp(22px,2.2vw,28px);
  font-weight:500; letter-spacing:-.02em; }
.sr-card__body p{ margin:0 0 16px; font-size:15.5px; line-height:1.55; color:var(--mute); }
.sr-card__stat{ display:flex; align-items:baseline; gap:10px; }
.sr-card__statnum{ font-size:34px; font-weight:500; letter-spacing:-.03em; }
.sr-card__statlbl{ font-family:'Newsreader', Georgia, serif; font-size:13px; color:var(--faint); }

/* =================================================================
   PULL QUOTE
   ================================================================= */
.sr-quote{ border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--lilac); }
.sr-quote__inner{ max-width:1100px; margin:0 auto;
  padding:clamp(72px,11vw,160px) clamp(20px,4vw,48px); }
.sr-quote__inner p:first-child{
  font-size:clamp(28px,3.6vw,52px); line-height:1.22;
  letter-spacing:-.02em; font-weight:500;
}
.sr-em-purple{ font-family:'Newsreader', Georgia, serif; font-style:italic;
  font-weight:400; color:var(--purple); }
.sr-quote__by{ margin:28px 0 0; font-family:'Newsreader', Georgia, serif;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }

/* =================================================================
   IMPACT
   ================================================================= */
.sr-impact{ max-width:none; margin:0;
  padding:clamp(64px,8vw,112px) clamp(20px,4vw,56px); }
.sr-impact__label{ margin:0 0 clamp(32px,4vw,48px);
  font-family:'Newsreader', Georgia, serif; font-size:15px;
  letter-spacing:.14em; text-transform:uppercase; }
.sr-impact__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.sr-stat{ border-top:2px solid var(--ink); padding:20px 24px 0 0; }
.sr-stat__num{ font-size:clamp(44px,5vw,68px); font-weight:500;
  line-height:.92; letter-spacing:-.035em; }
.sr-stat__lbl{ font-family:'Newsreader', Georgia, serif; font-size:13px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--mute); margin-top:10px; }

/* =================================================================
   INFO (dark band)
   ================================================================= */
.sr-info{ scroll-margin-top:70px; border-top:1px solid var(--line);
  background:#1d1d1d; color:#f4f0e6; }
.sr-info__inner{ max-width:1320px; margin:0 auto;
  padding:clamp(64px,8vw,120px) clamp(20px,4vw,48px); }
.sr-info h2{ margin:0 0 clamp(44px,6vw,72px); font-size:clamp(30px,4vw,52px);
  font-weight:500; letter-spacing:-.025em; max-width:20ch; color:#f4f0e6; }
.sr-info__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(32px,4vw,56px); }
.sr-col__head{ font-family:'Newsreader', Georgia, serif; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase;
  border-top:1px solid rgba(244,240,230,.22); padding-top:14px; margin-bottom:16px; }
.sr-role{ margin-bottom:16px; }
.sr-role:last-child{ margin-bottom:0; }
.sr-role b{ display:block; font-size:17px; font-weight:500; }
.sr-role span{ display:block; font-size:14px; color:#b3ac9c; }
.sr-list{ list-style:none; display:flex; flex-direction:column; gap:11px;
  font-size:15px; color:#ddd8cd; padding:0; margin:0; }

/* ---- CV download row (inside dark Info band) ---- */
.sr-cv{ margin-top:clamp(40px,5vw,64px); display:flex; flex-wrap:wrap; align-items:center;
  gap:14px 20px; border-top:1px solid rgba(244,240,230,.22); padding-top:24px; }
.sr-cv__label{ font-family:'Newsreader', Georgia, serif; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color:#a89e88; margin-right:4px; }
.sr-cv__link{ font-family:'Newsreader', Georgia, serif; font-size:15px; color:#f4f0e6;
  border:1px solid rgba(244,240,230,.4); border-radius:999px; padding:9px 18px;
  display:inline-flex; align-items:center; gap:8px; transition:background .2s, color .2s; }
.sr-cv__link:hover{ background:#f4f0e6; color:#1d1d1d; }

/* ---- contact form (cream contact section) ---- */
.sr-contactform{ max-width:680px; margin-top:clamp(20px,3vw,34px); }
.sr-contactform p{ margin:0 0 16px; }
.sr-contactform label{ display:block; font-family:'Newsreader', Georgia, serif; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.sr-contactform input[type=text],
.sr-contactform input[type=email],
.sr-contactform input[type=tel],
.sr-contactform textarea{
  width:100%; margin-top:8px; background:rgba(255,255,255,.45); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; font-family:'Schibsted Grotesk', sans-serif;
  font-size:16px; color:var(--ink); -webkit-appearance:none; }
.sr-contactform textarea{ min-height:140px; resize:vertical; }
.sr-contactform input:focus, .sr-contactform textarea:focus{ outline:none; border-color:var(--accent); }
.sr-contactform input[type=submit]{ width:auto; cursor:pointer; background:var(--ink); color:var(--cream);
  border:0; border-radius:999px; padding:15px 34px; font-family:'Newsreader', Georgia, serif;
  font-size:16px; letter-spacing:.02em; margin-top:4px; transition:background .2s; }
.sr-contactform input[type=submit]:hover{ background:var(--accent); }
.sr-contactform .wpcf7-spinner{ margin:0 0 0 12px; }
.sr-contactform .wpcf7-response-output{ border-radius:10px !important; margin:16px 0 0 !important;
  font-family:'Newsreader', Georgia, serif; font-size:14px; }
.sr-contactform .wpcf7-not-valid-tip{ font-family:'Schibsted Grotesk', sans-serif; font-size:12.5px; color:var(--red); }

/* =================================================================
   SPEAKING / PUBLICATIONS
   ================================================================= */
.sr-speaking{ scroll-margin-top:70px; max-width:1320px; margin:0 auto;
  padding:clamp(64px,8vw,120px) clamp(20px,4vw,48px);
  display:flex; flex-wrap:wrap; gap:clamp(40px,6vw,88px); }
.sr-speaking__col{ flex:1 1 460px; min-width:300px; }
.sr-speaking__col--pubs{ flex:1 1 320px; min-width:280px; }
.sr-speaking__label{ margin:0 0 28px; font-family:'Newsreader', Georgia, serif;
  font-size:15px; letter-spacing:.14em; text-transform:uppercase; }
.sr-rows{ display:flex; flex-direction:column; }
.sr-trow{ display:flex; gap:22px; padding:16px 0; border-top:1px solid var(--line); }
.sr-trow:last-child{ border-bottom:1px solid var(--line); }
.sr-trow__yr{ flex:0 0 48px; font-family:'Newsreader', Georgia, serif;
  font-size:14px; color:var(--faint); }
.sr-trow b{ font-size:19px; font-weight:500; }
.sr-trow small{ display:block; font-size:14px; color:var(--mute); }
.sr-pub{ padding:16px 0; border-top:1px solid var(--line); }
.sr-pub:last-child{ border-bottom:1px solid var(--line); }
.sr-pub b{ font-size:19px; font-weight:500; line-height:1.3; }
.sr-pub small{ display:block; font-size:14px; color:var(--mute); margin-top:3px; }

/* =================================================================
   CONTACT
   ================================================================= */
.sr-contact{ scroll-margin-top:70px; border-top:1px solid var(--line);
  position:relative; overflow:hidden; }
.sr-contact__inner{ max-width:1320px; margin:0 auto;
  padding:clamp(80px,11vw,180px) clamp(20px,4vw,48px); position:relative; z-index:1; }
.sr-contact__label{ margin:0 0 clamp(24px,3vw,36px);
  font-family:'Newsreader', Georgia, serif; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.sr-contact__email{ display:inline-block; font-size:clamp(34px,6.2vw,98px);
  font-weight:500; letter-spacing:-.04em; line-height:1;
  border-bottom:3px solid var(--accent); padding-bottom:6px; word-break:break-word; }
.sr-contact__social{ margin-top:clamp(32px,4vw,52px); display:flex; flex-wrap:wrap;
  gap:14px 44px; font-family:'Newsreader', Georgia, serif; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mute); }
.sr-contact__social a{ border-bottom:1px solid var(--line); }

/* =================================================================
   CTA (work page) + FOOTER
   ================================================================= */
.sr-cta{ border-top:1px solid var(--line); }
.sr-cta__inner{ max-width:1320px; margin:0 auto;
  padding:clamp(64px,9vw,140px) clamp(20px,4vw,48px);
  display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end; justify-content:space-between; }
.sr-cta__inner h2{ font-size:clamp(30px,4.4vw,60px); font-weight:500;
  letter-spacing:-.03em; max-width:16ch; }
.sr-cta__btn{ font-family:'Newsreader', Georgia, serif; font-size:16px; letter-spacing:.02em;
  padding:15px 28px; background:var(--ink); color:var(--cream); border-radius:999px; white-space:nowrap; }

.sr-footer{ border-top:1px solid var(--line); }
.sr-footer__inner{ max-width:1320px; margin:0 auto;
  padding:26px clamp(20px,4vw,48px); display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between;
  font-family:'Newsreader', Georgia, serif; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.sr-footer__brand{ color:var(--ink); font-family:'Schibsted Grotesk', system-ui, sans-serif;
  font-weight:600; font-size:15px; letter-spacing:-.01em; text-transform:none; }

/* =================================================================
   WORK PAGE — header + rows
   ================================================================= */
.sr-workhead{ max-width:1320px; margin:0 auto;
  padding:clamp(48px,7vw,96px) clamp(20px,4vw,48px) clamp(36px,4vw,56px); position:relative; }
.sr-workhead__crumb{ margin:0 0 clamp(24px,3vw,40px);
  font-family:'Newsreader', Georgia, serif; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
.sr-workhead h1{ font-weight:500; font-size:clamp(64px,11vw,168px);
  line-height:.9; letter-spacing:-.045em; }
.sr-workhead__lead{ margin:clamp(24px,3vw,40px) 0 0; max-width:40ch;
  font-size:clamp(18px,1.9vw,24px); line-height:1.4; letter-spacing:-.01em; color:var(--ink); }
.sr-resources{ margin-top:clamp(28px,3vw,40px); display:flex; flex-wrap:wrap; gap:10px; }
.sr-resource{ font-family:'Newsreader', Georgia, serif; font-size:14px; letter-spacing:.02em;
  padding:10px 18px; border:1px solid var(--ink); border-radius:999px;
  display:inline-flex; align-items:center; gap:8px; }
.sr-resource:hover{ background:var(--ink); color:var(--cream); }

.sr-worklist{ max-width:1320px; margin:0 auto;
  padding:clamp(40px,5vw,72px) clamp(20px,4vw,48px) clamp(72px,9vw,128px);
  border-top:1px solid var(--line); }
.sr-row{ display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,64px);
  align-items:center; margin-bottom:clamp(56px,8vw,112px); }
.sr-row:last-child{ margin-bottom:0; }
.sr-row--rev{ flex-direction:row-reverse; }
.sr-row__media{ flex:1 1 480px; min-width:300px; position:relative; }
.sr-row__media .sr-img{ height:clamp(280px,32vw,440px); }
.sr-row__body{ flex:1 1 340px; min-width:280px; }
.sr-row__no{ font-family:'Newsreader', Georgia, serif; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-bottom:14px; }
.sr-row__body h3{ margin:0 0 18px; font-size:clamp(26px,2.6vw,38px);
  font-weight:500; letter-spacing:-.025em; }
.sr-gr{ margin-bottom:14px; }
.sr-gr:last-child{ margin-bottom:0; }
.sr-gr__k{ font-family:'Newsreader', Georgia, serif; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.sr-gr__v{ margin:4px 0 0; font-size:15.5px; line-height:1.55; color:var(--mute); }
.sr-gr__v--ink{ color:var(--ink); }
.sr-gr__v b{ font-weight:600; }

/* =================================================================
   UX & CRO STUDIES  (anonymized client work — Pentagram-style cards)
   ================================================================= */
.sr-studies{ border-top:1px solid var(--line); }
.sr-studies__inner{ max-width:1320px; margin:0 auto;
  padding:clamp(56px,7vw,104px) clamp(20px,4vw,48px) clamp(64px,8vw,120px); }
.sr-studies__head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:clamp(28px,3.5vw,44px); }
.sr-studies__head h2{ font-family:'Newsreader', Georgia, serif; font-size:15px;
  letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
.sr-studies__note{ font-family:'Newsreader', Georgia, serif; font-style:italic;
  font-size:14px; color:var(--faint); }
.sr-studies__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:clamp(18px,2vw,26px); }
.sr-study{
  position:relative; border:1px solid var(--line); border-radius:22px;
  background:var(--cream-2); padding:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column; gap:14px;
}
.sr-study__tag{ font-family:'Newsreader', Georgia, serif; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.sr-study h3{ font-size:clamp(20px,1.9vw,25px); font-weight:500; letter-spacing:-.02em; line-height:1.1; }
.sr-study__gr{ font-size:14.5px; line-height:1.5; color:var(--mute); }
.sr-study__gr b{ color:var(--ink); font-weight:600; }
.sr-study__stat{ margin-top:auto; display:flex; align-items:baseline; gap:9px;
  border-top:1px solid var(--line); padding-top:14px; }
.sr-study__statnum{ font-size:clamp(24px,2.4vw,32px); font-weight:500; letter-spacing:-.03em; line-height:1; }
.sr-study__statlbl{ font-family:'Newsreader', Georgia, serif; font-size:12.5px; color:var(--faint); }
.sr-study__link{ align-self:flex-start; font-family:'Newsreader', Georgia, serif; font-size:13.5px;
  letter-spacing:.02em; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px; }
.sr-study__link:hover{ color:var(--mute); border-color:var(--mute); }

/* rounded frame around the Impact stat cluster (Silver-Linings cue) */
.sr-impact__grid{ border:1px solid var(--line); border-radius:22px;
  background:var(--cream-2); padding:clamp(10px,2vw,26px) clamp(18px,2.4vw,30px) clamp(22px,2.4vw,34px); }

/* =================================================================
   SELECTED GAMES showcase
   ================================================================= */
.sr-games{ max-width:1320px; margin:clamp(56px,7vw,104px) auto 0;
  padding:clamp(44px,5vw,72px) clamp(20px,4vw,48px) 0; border-top:1px solid var(--line); }
.sr-games__head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.sr-games__lead{ margin:14px 0 clamp(28px,3vw,40px); max-width:62ch;
  font-family:'Newsreader', Georgia, serif; font-size:clamp(16px,1.5vw,19px);
  line-height:1.5; color:var(--mute); }
.sr-games__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(218px,1fr));
  gap:clamp(22px,2.4vw,34px); }
.sr-game{ margin:0; }
.sr-game__shot{ aspect-ratio:9/16; background:var(--cream-2);
  border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.sr-game__shot img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.sr-game figcaption b{ display:block; margin-top:14px; font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.sr-game figcaption span{ display:block; margin-top:5px; font-family:'Newsreader', Georgia, serif;
  font-size:14px; line-height:1.5; color:var(--mute); }

/* =================================================================
   CV PAGES (UX & Brand / Museums & Art History)
   ================================================================= */
.sr-cvhead{ max-width:1100px; margin:0 auto; position:relative;
  padding:clamp(48px,7vw,96px) clamp(20px,4vw,48px) clamp(28px,3vw,40px); }
.sr-cvhead__eyebrow{ font-family:'Newsreader', Georgia, serif; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin:0 0 clamp(20px,3vw,32px); }
.sr-cvhead h1{ font-weight:500; font-size:clamp(54px,9vw,120px); line-height:.92; letter-spacing:-.045em; }
.sr-cvhead__role{ font-family:'Newsreader', Georgia, serif; font-style:italic;
  font-size:clamp(20px,2.4vw,30px); color:var(--mute); margin-top:10px; }
.sr-cvhead__contact{ margin-top:clamp(18px,2.4vw,26px); padding-top:18px; border-top:1px solid var(--line);
  font-family:'Newsreader', Georgia, serif; font-size:15px; color:var(--mute);
  display:flex; flex-wrap:wrap; gap:8px 20px; }
.sr-cvhead__contact a{ border-bottom:1px solid var(--line); }
.sr-cvhead__lead{ margin-top:clamp(22px,3vw,32px); max-width:60ch;
  font-size:clamp(19px,2vw,26px); line-height:1.4; letter-spacing:-.01em; color:var(--ink); }
.sr-cvhead__lead em{ font-family:'Newsreader', Georgia, serif; font-style:italic; color:var(--red); }
.sr-cvhead__actions{ margin-top:clamp(24px,3vw,34px); display:flex; flex-wrap:wrap; gap:12px; }
.sr-cvhead__pdf{ font-family:'Newsreader', Georgia, serif; font-size:14px; letter-spacing:.02em;
  padding:10px 18px; border:1px solid var(--ink); border-radius:999px; display:inline-flex; align-items:center; gap:8px; }
.sr-cvhead__pdf:hover{ background:var(--ink); color:var(--cream); }
.sr-cvhead__alt{ font-family:'Newsreader', Georgia, serif; font-size:14px; letter-spacing:.02em;
  padding:10px 18px; border-radius:999px; color:var(--mute); border:1px solid var(--line); }
.sr-cvhead__alt:hover{ color:var(--ink); border-color:var(--ink); }

.sr-cv-body{ max-width:1100px; margin:0 auto; padding:clamp(36px,4vw,56px) clamp(20px,4vw,48px) clamp(72px,9vw,120px); }
.sr-cv-grid{ display:grid; grid-template-columns:1.7fr 1fr; gap:clamp(36px,5vw,72px); align-items:start; }
.sr-cv-sec{ border-top:2px solid var(--ink); padding-top:16px; margin-bottom:clamp(36px,4vw,52px); }
.sr-cv-sec:last-child{ margin-bottom:0; }
.sr-cv-sec > h2{ font-family:'Newsreader', Georgia, serif; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute); margin:0 0 clamp(18px,2vw,26px); font-weight:500; }
.sr-cv-rail .sr-cv-sec > h2{ margin-bottom:16px; }
.sr-cvjob{ margin-bottom:clamp(22px,2.4vw,30px); }
.sr-cvjob:last-child{ margin-bottom:0; }
.sr-cvjob__top{ display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; justify-content:space-between; }
.sr-cvjob__role{ font-size:clamp(19px,1.9vw,23px); font-weight:600; letter-spacing:-.02em; }
.sr-cvjob__yr{ font-family:'Newsreader', Georgia, serif; font-size:14px; color:var(--faint); white-space:nowrap; }
.sr-cvjob__org{ font-size:15px; color:var(--accent); font-weight:600; margin-top:2px; }
.sr-cvjob__org.is-mute{ color:var(--blue2); }
.sr-cvjob p{ margin:8px 0 0; font-size:15.5px; line-height:1.55; color:var(--mute); max-width:62ch; }
.sr-cvjob ul{ list-style:none; margin:10px 0 0; padding:0; }
.sr-cvjob li{ position:relative; font-size:15px; line-height:1.5; color:var(--mute);
  padding-left:18px; margin-bottom:6px; max-width:62ch; }
.sr-cvjob li::before{ content:''; position:absolute; left:2px; top:9px; width:6px; height:6px;
  border-radius:50%; background:var(--accent); }
.sr-cvlist{ list-style:none; margin:0; padding:0; }
.sr-cvlist li{ position:relative; font-size:15.5px; line-height:1.5; color:var(--ink);
  padding-left:18px; margin-bottom:9px; }
.sr-cvlist li::before{ content:''; position:absolute; left:2px; top:9px; width:6px; height:6px;
  border-radius:50%; background:var(--accent); }
.sr-cvlist li b{ font-weight:600; }
.sr-cv-entry{ margin-bottom:14px; }
.sr-cv-entry:last-child{ margin-bottom:0; }
.sr-cv-entry b{ display:block; font-size:15.5px; font-weight:600; line-height:1.3; }
.sr-cv-entry span{ display:block; font-family:'Newsreader', Georgia, serif; font-size:14px; color:var(--mute); margin-top:2px; }
.sr-cv-trow{ display:flex; gap:16px; padding:11px 0; border-top:1px solid var(--line); }
.sr-cv-trow:first-of-type{ border-top:0; padding-top:0; }
.sr-cv-trow__yr{ flex:0 0 46px; font-family:'Newsreader', Georgia, serif; font-size:14px; color:var(--faint); }
.sr-cv-trow b{ font-size:16px; font-weight:600; }
.sr-cv-trow small{ display:block; font-size:13.5px; color:var(--mute); }
.sr-cv-trow small a{ color:var(--ink); border-bottom:1px solid var(--line); }
.sr-cv-trow small a:hover{ color:var(--accent); border-color:var(--accent); }
.sr-cv-rail .sr-cvlist li{ font-size:14.5px; color:var(--mute); }
@media (max-width:760px){ .sr-cv-grid{ grid-template-columns:1fr; gap:0; } }

/* =================================================================
   IDEAS BLOG — index + single post
   ================================================================= */
.sr-ideas-head{ max-width:1100px; margin:0 auto; position:relative;
  padding:clamp(48px,7vw,96px) clamp(20px,4vw,48px) clamp(24px,3vw,36px); }
.sr-ideas-head__eyebrow{ font-family:'Newsreader', Georgia, serif; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin:0 0 clamp(18px,3vw,30px); }
.sr-ideas-head h1{ font-weight:500; font-size:clamp(54px,9vw,120px); line-height:.92; letter-spacing:-.045em; }
.sr-ideas-head__lead{ margin-top:clamp(20px,3vw,30px); max-width:56ch;
  font-size:clamp(18px,2vw,25px); line-height:1.4; letter-spacing:-.01em; color:var(--ink); }

.sr-ideas-list{ max-width:1100px; margin:0 auto; padding:clamp(20px,3vw,40px) clamp(20px,4vw,48px) clamp(72px,9vw,120px); }
.sr-ideas-year{ font-family:'Newsreader', Georgia, serif; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); border-top:2px solid var(--ink); padding-top:14px;
  margin:clamp(32px,4vw,52px) 0 6px; }
.sr-ideas-year:first-child{ margin-top:0; }
.sr-idea{ display:flex; gap:20px; align-items:baseline; padding:15px 0; border-top:1px solid var(--line);
  text-decoration:none; }
.sr-idea:hover .sr-idea__title{ color:var(--accent); }
.sr-idea__date{ flex:0 0 84px; font-family:'Newsreader', Georgia, serif; font-size:13px; color:var(--faint); }
.sr-idea__title{ flex:1 1 auto; font-size:clamp(18px,1.9vw,22px); font-weight:500; letter-spacing:-.015em;
  color:var(--ink); line-height:1.25; transition:color .2s; }
.sr-idea__cat{ flex:0 0 auto; font-family:'Newsreader', Georgia, serif; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mute); text-align:right; max-width:160px; }
@media (max-width:680px){
  .sr-idea{ flex-wrap:wrap; gap:4px 14px; }
  .sr-idea__date{ flex:0 0 auto; order:1; }
  .sr-idea__cat{ order:3; text-align:left; }
  .sr-idea__title{ flex:1 1 100%; order:2; }
}

/* single post */
.sr-post{ max-width:760px; margin:0 auto; padding:clamp(48px,7vw,90px) clamp(20px,4vw,40px) 0; position:relative; }
.sr-post__meta{ display:flex; flex-wrap:wrap; gap:10px 18px; font-family:'Newsreader', Georgia, serif;
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-bottom:clamp(16px,2vw,22px); }
.sr-post__meta .sr-post__cat{ color:var(--accent); }
.sr-post h1.sr-post__title{ font-weight:500; font-size:clamp(34px,5vw,60px); line-height:1.04;
  letter-spacing:-.03em; margin-bottom:clamp(20px,3vw,30px); }
.sr-post__body{ max-width:680px; margin:0 auto; padding-bottom:clamp(48px,6vw,80px); }
.sr-post__body, .sr-post__body p, .sr-post__body li{ font-size:18px; line-height:1.65; color:#2c2820; }
.sr-post__body p{ margin:0 0 1.2em; }
.sr-post__body h2{ font-size:clamp(24px,3vw,34px); font-weight:500; letter-spacing:-.02em; line-height:1.15;
  margin:1.6em 0 .5em; }
.sr-post__body h3{ font-size:clamp(20px,2.4vw,26px); font-weight:600; letter-spacing:-.01em; margin:1.4em 0 .4em; }
.sr-post__body a{ color:var(--ink); border-bottom:1px solid var(--accent); }
.sr-post__body a:hover{ color:var(--accent); }
.sr-post__body img, .sr-post__body figure{ max-width:100%; height:auto; border-radius:14px; margin:1.4em 0; }
.sr-post__body figure img{ margin:0; }
.sr-post__body figcaption{ font-family:'Newsreader', Georgia, serif; font-style:italic; font-size:14px;
  color:var(--mute); text-align:center; margin-top:8px; }
.sr-post__body blockquote{ margin:1.5em 0; padding:6px 0 6px 24px; border-left:3px solid var(--accent);
  font-family:'Newsreader', Georgia, serif; font-style:italic; font-size:clamp(20px,2.4vw,26px);
  line-height:1.4; color:var(--ink); }
.sr-post__body ul, .sr-post__body ol{ margin:0 0 1.2em 1.2em; }
.sr-post__body li{ margin-bottom:.4em; }
.sr-post__body h2:first-child, .sr-post__body p:first-child{ margin-top:0; }
.sr-post__back{ display:block; max-width:680px; margin:0 auto clamp(48px,6vw,80px);
  font-family:'Newsreader', Georgia, serif; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mute); border-top:1px solid var(--line); padding-top:20px; }
.sr-post__back:hover{ color:var(--ink); }

/* =================================================================
   REVEAL animation
   ================================================================= */
.sr [data-reveal]{ opacity:0; transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.sr [data-reveal].is-in{ opacity:1; transform:none; }
.no-js .sr [data-reveal]{ opacity:1; transform:none; }

/* =================================================================
   RESPONSIVE — mobile nav + small-screen tuning
   ================================================================= */
@media (max-width:720px){
  .sr-nav__toggle{ display:block; }
  .sr-nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--cream); border-bottom:1px solid var(--line);
    padding:6px clamp(20px,4vw,48px) 14px;
    max-height:0; overflow:hidden; transition:max-height .32s ease; font-size:16px;
  }
  .sr-nav__links a{ display:block; width:100%; padding:13px 0; border-top:1px solid var(--line); }
  .sr-nav__inner.is-open .sr-nav__links{ max-height:60vh; }
  .sr-hero__row{ gap:24px; }
  .sr-chips{ max-width:none; }
  .sr-proj__meta{ gap:14px; }
  .sr-proj__stat{ text-align:left; }
}
@media (prefers-reduced-motion:reduce){
  .sr [data-reveal]{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}