:root{
  --ink:#1A1714; --cream:#EFE7D8; --linen:#E3D8C4; --stone:#CBBDA4; --umber:#5E5547;
  --brass:#A8844A; --wine:#4B1D1F; --pink:#F72585; --mist:#D9D0C0;
  --serif:'Newsreader',Georgia,serif;
  --body:'Familjen Grotesk',Helvetica,Arial,sans-serif;
  --ui:'Archivo','Arial Narrow',sans-serif;
  --pad:clamp(24px,4.5vw,64px);
  --section:clamp(88px,10vw,160px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:clamp(18px,1.3vw,20px);line-height:1.68;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{color:inherit;text-underline-offset:7px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--pink);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.wrap{padding-left:var(--pad);padding-right:var(--pad);max-width:1440px;margin:0 auto}

.ui{font-family:var(--ui);font-stretch:68%;font-variation-settings:'wdth' 68;text-transform:uppercase;letter-spacing:.09em;font-weight:650;font-size:15px;line-height:1.2}
.pk{color:var(--pink)}
.pk-ul{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:.05em;text-underline-offset:.12em}
.rule-pk{width:96px;height:2px;background:var(--pink)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:16px;transition:background .15s,color .15s,border-color .15s}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-outline{border-color:var(--pink)}
.btn-pink{background:var(--pink);color:var(--ink)}
.btn-ink:hover,.btn-outline:hover{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.btn-pink:hover{background:var(--cream);color:var(--ink)}

/* header */
.site-header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px var(--pad);background:var(--cream);border-bottom:1px solid var(--stone)}
.wordmark{display:flex;align-items:baseline;gap:10px;text-decoration:none;margin:0}
.wordmark .ui{font-size:13px;letter-spacing:.24em}
.nine{font-family:var(--serif);font-size:26px;color:var(--pink);line-height:1}
nav{display:flex;align-items:center;gap:36px}
.nav-link{text-decoration:none}
.nav-link:hover{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px}

/* hero */
.hero{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(56px,6vw,96px)}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(60px,12vw,172px);line-height:.92;letter-spacing:-.035em;max-width:1300px}
.hero-side{margin:clamp(40px,4.5vw,64px) 0 0 auto;max-width:560px;display:flex;flex-direction:column;gap:28px}
.hero-side p{font-size:clamp(18px,1.5vw,22px)}
.actions{display:flex;flex-wrap:wrap;gap:16px 24px}
/* photos: one warm monochrome treatment so every image reads as the same world */
.photo{margin:0;position:relative;overflow:hidden;background:var(--stone)}
.photo img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.94)}
.photo::after{content:"";position:absolute;inset:0;background:var(--brass);mix-blend-mode:multiply;opacity:.14;pointer-events:none}
.photo-full{height:clamp(420px,48vw,700px)}
.photo-dark{background:#2B2621;margin-top:calc(-1 * var(--section));margin-bottom:var(--section)}
.photo-dark img{filter:grayscale(1) contrast(1.1) brightness(.8)}
.photo-inset{grid-column:1 / -1;justify-self:end;width:min(100%,860px);aspect-ratio:3/2;margin-top:clamp(24px,4vw,48px)}

/* overlooked */
.overlooked{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,8vw,112px);padding-bottom:var(--section);border-top:1px solid var(--stone);padding-top:var(--section)}
.overlooked h2{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.2vw,60px);line-height:1.04;letter-spacing:-.015em}
.overlooked .sub{margin-top:16px;font-family:var(--serif);font-style:italic;font-size:clamp(23px,2.1vw,30px);line-height:1.3;color:var(--umber)}
.costs{font-family:var(--serif);font-size:clamp(27px,2.4vw,34px);line-height:1.42}

/* help */
.help{background:var(--linen);padding:var(--section) 0}
.display{font-family:var(--serif);font-weight:300;font-size:clamp(50px,7.8vw,112px);line-height:.98;letter-spacing:-.025em}
.display-sm{font-family:var(--serif);font-weight:300;font-size:clamp(46px,6vw,88px);line-height:1;letter-spacing:-.02em}
.lead{margin-top:28px;font-size:clamp(18px,1.5vw,22px)}
.phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4.5vw,64px);margin-top:clamp(48px,6vw,88px)}
.phases>div{padding-top:22px;border-top:2px solid var(--pink);display:flex;flex-direction:column;gap:16px}
.phases p{font-family:var(--serif);font-size:clamp(23px,1.9vw,27px);line-height:1.4}
.promise{margin-top:clamp(56px,7vw,104px);padding-top:28px;border-top:1px solid var(--brass);max-width:880px;font-family:var(--serif);font-size:clamp(23px,2.1vw,30px);line-height:1.35}

/* why */
.why{padding-top:var(--section);padding-bottom:var(--section)}
.why p{font-family:var(--serif);font-size:clamp(21px,1.8vw,26px);line-height:1.55}
.two{display:grid;grid-template-columns:520px minmax(0,640px);gap:clamp(32px,8vw,112px);align-items:start}
.stack{display:flex;flex-direction:column;gap:20px}
.why .why-open{font-size:clamp(38px,3.8vw,54px);line-height:1.05;letter-spacing:-.015em}
.mother{margin:clamp(56px,9vw,136px) 0 clamp(48px,8vw,120px);display:flex;flex-direction:column;gap:32px}
.rule-long{width:120px}
.why .mother p{font-weight:300;font-size:clamp(76px,14.5vw,208px);line-height:.88;letter-spacing:-.04em}
.why .same{font-size:clamp(30px,2.8vw,40px);line-height:1.2}
.why .asking{margin-top:clamp(64px,10vw,144px);max-width:1000px;font-size:clamp(28px,2.9vw,42px);line-height:1.25;color:var(--umber)}
.asking span{color:var(--ink)}
.why .kicker-muted{margin-top:clamp(48px,7vw,104px);font-family:var(--ui);font-size:15px;line-height:1.2;color:var(--umber)}
.signoff{margin-top:clamp(32px,4vw,48px);display:flex;flex-direction:column;gap:6px}
.why .signoff .name{font-size:clamp(24px,2vw,30px);line-height:1.2}
.signoff .ui{color:var(--umber)}
.why .question{margin-top:24px;font-weight:300;font-size:clamp(52px,8.3vw,120px);line-height:.95;letter-spacing:-.03em;max-width:1200px}

/* music */
.music{background:var(--ink);color:var(--cream);padding:var(--section) 0}
.music-inner,.stage-inner{display:flex;gap:clamp(40px,8vw,112px);align-items:flex-end}
.music-inner>div:first-child,.stage-inner h2{flex:1}
.side{flex:0 0 440px;display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.music .side p{color:var(--mist)}
.kicker-pk{color:var(--pink);margin-bottom:28px}
.music .display{font-size:clamp(50px,7.2vw,104px)}

/* stage */
.stage{background:var(--wine);color:var(--cream);padding:var(--section) 0}
.stage h2{font-family:var(--serif);font-weight:300;font-size:clamp(72px,11.7vw,168px);line-height:.9;letter-spacing:-.035em}
.stage .side p{color:#E0D2C0}

/* involved */
.involved{padding-top:var(--section);padding-bottom:var(--section)}
.paths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3.3vw,48px);margin-top:clamp(32px,4.5vw,64px)}
.paths>div{padding-top:24px;border-top:1px solid var(--ink);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.paths h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.5vw,36px);line-height:1.1}
.link{padding:8px 0}

/* signup */
.signup{background:var(--linen);padding:clamp(72px,9vw,128px) 0}
.signup-inner{display:grid;grid-template-columns:540px minmax(0,560px);gap:clamp(24px,8vw,112px);align-items:start}
.signup h2{font-family:var(--serif);font-weight:300;font-size:clamp(46px,5.6vw,80px);line-height:1;letter-spacing:-.02em}
.signup form{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.field{display:flex;gap:16px}
.field input{flex:1;min-width:0;height:56px;padding:0 4px;border:0;border-bottom:1px solid var(--ink);background:transparent;font:inherit;color:var(--ink)}
.field input:focus{outline:none;border-bottom:2px solid var(--pink)}
.hp{position:absolute;left:-9999px}

/* footer */
.site-footer{background:var(--ink);color:var(--cream);border-top:2px solid var(--pink);padding:72px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.legal{margin-top:20px;font-size:14px;color:#A89E8E}
.footer-links{display:flex;flex-direction:column;font-size:16px;line-height:1.9}
.footer-links a{text-decoration:none}
.footer-links a:hover{text-decoration:underline}

/* tablet */
@media (max-width:1100px){
  .two,.signup-inner{grid-template-columns:1fr}
  .music-inner,.stage-inner{flex-direction:column;align-items:flex-start}
  .side{flex:none;max-width:560px}
  .paths{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* phone */
@media (max-width:720px){
  .photo-full{height:auto;aspect-ratio:4/5}
  .photo-inset{aspect-ratio:4/5}
  nav .nav-link{display:none}
  .wordmark .ui{font-size:11px}
  .nine{font-size:22px}
  .hero-side{margin-left:0}
  .actions .btn{flex:1 1 100%}
  .overlooked{grid-template-columns:1fr}
  .phases,.paths{grid-template-columns:1fr}
  .field{flex-direction:column}
  .field .btn{width:100%}
  .side .btn,.stage .btn{width:100%}
  .footer-inner{flex-direction:column}
}