:root{
  --magenta:#9F066B;
  --anth:#343434;
  --beige:#D7C4B8;
  --stone:#DDD8D6;
  --cotton:#FAF8F6;
  --taupe:#696367;
  --white:#fff;
  --line:rgba(52,52,52,.10);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Montserrat",Arial,sans-serif;
  --max:1160px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cotton);color:var(--anth);
  font-family:var(--sans);-webkit-font-smoothing:antialiased
}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{width:min(var(--max),calc(100% - 44px));margin-inline:auto}

.kicker{
  margin:0 0 14px;color:var(--magenta);font-size:10px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase
}
.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;padding:13px 18px;border:0
}
.btn-primary{background:var(--magenta);color:#fff}
.btn-ghost{
  border:1px solid rgba(159,6,107,.22);color:var(--magenta);
  background:rgba(255,255,255,.38)
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

.hero{padding:42px 0 46px}
.hero-grid{
  display:grid;grid-template-columns:.88fr 1.12fr;gap:66px;align-items:center
}
.hero h1{
  max-width:520px;margin:0;
  font-family:var(--serif);font-size:clamp(54px,5.4vw,82px);
  line-height:.95;letter-spacing:-.035em;font-weight:500;color:var(--magenta)
}
.hero .lead{
  max-width:500px;margin:25px 0 0;font-size:15px;line-height:1.8;color:var(--taupe)
}
.hero-media{
  overflow:hidden;border-radius:24px;aspect-ratio:16/10;background:#eee7e2
}
.hero-media img{width:100%;height:100%;object-fit:cover}

.intro-strip{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0
}
.intro-row{
  display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;
  color:var(--taupe);font-family:var(--serif);font-size:20px
}
.intro-row span{white-space:nowrap}

.story{padding:64px 0 28px}
.story-grid{
  display:grid;grid-template-columns:330px 1fr;gap:64px;align-items:start
}
.story h2,.section-head h2{
  font-family:var(--serif);font-size:clamp(40px,4.3vw,60px);
  line-height:1;color:var(--magenta);font-weight:500;margin:0
}
.story-copy p{
  margin:0 0 18px;color:var(--taupe);font-size:15px;line-height:1.9;max-width:760px
}
.story-copy strong{color:var(--anth);font-weight:600}

.experiences-section{padding:44px 0 68px}
.section-head{
  display:grid;grid-template-columns:330px 1fr;gap:60px;
  align-items:end;margin-bottom:34px
}
.section-head>p{
  margin:0;color:var(--taupe);font-size:14px;line-height:1.8;max-width:660px
}
.experiences-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px
}
.experience-card{
  position:relative;overflow:hidden;display:block;min-height:100%;
  text-decoration:none;border:1px solid var(--line);border-radius:22px;
  background:rgba(255,255,255,.36);
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease
}
.experience-card:hover{
  background:#fff;transform:translateY(-3px);
  box-shadow:0 15px 34px rgba(52,52,52,.07)
}
.experience-card::after{
  content:"";position:absolute;left:22px;bottom:0;width:64px;height:4px;
  background:var(--magenta);border-radius:4px 4px 0 0
}
.experience-media{aspect-ratio:16/10;overflow:hidden;background:#ece5e1}
.experience-media img{
  width:100%;height:100%;object-fit:cover;transition:transform .35s ease
}
.experience-card:hover .experience-media img{transform:scale(1.015)}
.experience-body{padding:24px 22px 30px}
.experience-body h3{
  font-family:var(--serif);font-size:clamp(34px,3vw,46px);
  line-height:.95;letter-spacing:-.025em;font-weight:500;color:var(--anth);
  margin:0 0 12px
}
.experience-body h3.one-line-title{
  font-size:clamp(29px,2.2vw,35px);
  white-space:nowrap;
}

.tags{
  font-size:10.5px;line-height:1.6;color:var(--magenta);
  text-transform:uppercase;letter-spacing:.10em;font-weight:600
}
.experience-body p{
  font-size:13px;line-height:1.75;color:var(--taupe);
  margin:17px 0 22px
}
.link{
  font-size:11px;font-weight:600;color:var(--magenta);
  text-transform:uppercase;letter-spacing:.06em
}

.statement{padding:12px 0 66px}
.statement-box{
  border-radius:24px;background:#fff;padding:48px;
  border:1px solid rgba(52,52,52,.06)
}
.statement-box p{
  font-family:var(--serif);font-size:clamp(38px,4.5vw,60px);
  line-height:1.05;margin:0;color:var(--anth)
}
.statement-box strong{color:var(--magenta);font-weight:500}
.statement-box::after{
  content:"";display:block;width:72px;height:4px;background:var(--magenta);
  margin-top:28px;border-radius:4px
}

.contact-band{
  margin:0 auto 66px;background:var(--magenta);color:#fff;border-radius:24px
}
.contact-band-inner{
  padding:42px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center
}
.contact-band h2{
  font-family:var(--serif);font-size:42px;font-weight:500;margin:0
}
.contact-band p{margin:8px 0 0;opacity:.84;font-size:13px;line-height:1.7}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.contact-band .btn{background:#fff;color:var(--magenta)}
.contact-band .btn-outline{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff}

.breadcrumb{
  padding-top:28px;font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--taupe)
}
.breadcrumb a{text-decoration:none}

.detail-hero{padding:32px 0 54px}
.detail-grid{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:66px;align-items:center
}
.detail-hero h1{
  font-family:var(--serif);font-size:clamp(58px,6.3vw,94px);
  color:var(--magenta);line-height:.86;letter-spacing:-.04em;font-weight:500;margin:0
}
.detail-hero .lead{
  font-family:var(--serif);font-size:30px;line-height:1.25;
  color:var(--taupe);margin:25px 0 0;max-width:560px
}
.detail-photo{
  border-radius:24px;overflow:hidden;aspect-ratio:16/10;background:#eee7e2
}
.detail-photo img{width:100%;height:100%;object-fit:cover}

.content-section{padding:58px 0;border-top:1px solid var(--line)}
.content-grid{
  display:grid;grid-template-columns:310px 1fr;gap:70px;align-items:start
}
.content-grid h2{
  font-family:var(--serif);font-size:42px;line-height:1.05;
  font-weight:500;color:var(--magenta);margin:0
}
.content-copy p{
  font-size:15px;line-height:1.9;color:var(--taupe);margin:0 0 18px;max-width:760px
}
.content-copy strong{color:var(--anth);font-weight:600}

.fact-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px
}
.fact{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px
}
.fact span{
  display:block;color:var(--magenta);font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px
}
.fact p{font-size:12.5px;line-height:1.65;margin:0;color:var(--taupe)}

.quote-section{padding:12px 0 58px}
.quote-box{border-radius:24px;background:#fff;padding:46px}
.quote-box p{
  font-family:var(--serif);font-size:clamp(34px,4vw,54px);
  line-height:1.08;margin:0;color:var(--anth)
}
.quote-box strong{color:var(--magenta);font-weight:500}

.related{padding:8px 0 64px}
.related h2{
  font-family:var(--serif);font-size:40px;color:var(--magenta);font-weight:500;margin:0 0 24px
}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.related-card{
  display:block;text-decoration:none;padding:22px;border-radius:18px;
  background:#fff;border:1px solid var(--line)
}
.related-card span{
  display:block;color:var(--magenta);font-size:9px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;margin-bottom:8px
}
.related-card strong{
  display:block;font-family:var(--serif);font-size:28px;line-height:1;color:var(--anth);font-weight:500
}

.detail-cta{padding:0 0 66px}
.detail-cta-inner{
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
  border-top:1px solid var(--line);padding-top:38px
}
.detail-cta h2{
  font-family:var(--serif);font-size:40px;color:var(--magenta);font-weight:500;margin:0
}
.detail-cta p{color:var(--taupe);font-size:13px;line-height:1.7;margin:8px 0 0}
.detail-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.social-note{
  margin-top:14px;font-size:11px;color:var(--taupe)
}
.social-note a{color:var(--magenta);font-weight:600;text-decoration:none}

@media(max-width:1050px){
  .experiences-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .hero-grid,.story-grid,.section-head,.detail-grid,.content-grid{grid-template-columns:1fr}
  .hero-grid,.detail-grid{gap:34px}
  .hero-media,.detail-photo{order:-1}
  .story-grid,.section-head,.content-grid{gap:22px}
  .fact-grid{grid-template-columns:1fr}
  .contact-band-inner,.detail-cta-inner{grid-template-columns:1fr}
  .contact-actions,.detail-actions{justify-content:flex-start}
  .related-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .experiences-grid{grid-template-columns:1fr}
  .experience-body h3.one-line-title{font-size:38px;white-space:normal}
}
@media(max-width:720px){
  .wrap{width:min(100% - 30px,var(--max))}
  .hero{padding:28px 0 38px}
  .hero h1{font-size:50px}
  .hero .lead{font-size:14px;margin-top:18px}
  .intro-row{font-size:17px}
  .experience-body h3{font-size:42px}
  .statement-box{padding:34px 24px}
  .contact-band-inner{padding:30px}
  .contact-band h2{font-size:34px}
  .detail-hero h1{font-size:64px}
  .detail-hero .lead{font-size:24px}
  .quote-box{padding:32px 22px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .experience-card,.experience-media img{transition:none}
}
