@font-face{font-family:"Aeonik";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/aeonik-Light.woff2) format("woff2")}
@font-face{font-family:"Aeonik";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/aeonik-Regular.woff2) format("woff2")}
@font-face{font-family:"Aeonik";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/aeonik-Medium.woff2) format("woff2")}
@font-face{font-family:"Aeonik";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/aeonik-Bold.woff2) format("woff2")}
@font-face{font-family:"Aeonik";font-style:normal;font-weight:800 900;font-display:swap;src:url(fonts/aeonik-Black.woff2) format("woff2")}
@font-face{font-family:"Aeonik";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/aeonik-RegularItalic.woff2) format("woff2")}
@font-face{font-family:"Aeonik";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/aeonik-MediumItalic.woff2) format("woff2")}

/* Design system = Newing Q2/2026 newsletter (sampled from the live page) */
:root{
  --bg:#F8F7E9;        /* page cream */
  --navy:#122757;      /* title, headings */
  --navy-sub:#112D52;  /* italic subtitle */
  --ink:#051D40;       /* body text + dark panels */
  --gold:#D59A04;      /* section headings, numerals, accents */
  --grey:#545454;      /* secondary heading line */
  --peach:#FEEDC7;     /* content panels */
  --btn:#F8CC64;       /* yellow buttons */
  --rule:#85898C;      /* thin rules */
  --dot:#FFC150;       /* halftone */
  --pad:clamp(20px,7.7vw,99px);--max:1082px
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 clamp(1rem,.92rem + .4vw,1.25rem)/1.45 "Aeonik",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-x:clip}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--pad));margin-inline:auto;padding-inline:var(--pad)}
strong,b{font-weight:700}
p+p{margin-top:.9em}
p{max-width:62ch}
h1,h2,h3,h4{font-weight:700;text-wrap:balance}
h3,h4{color:var(--navy);line-height:1.12;letter-spacing:0}

/* hero: Q2 masthead, two halftone panels on a cream gradient */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--ink);background:linear-gradient(180deg,#FAF8EC 0%,#FDFAEC 45%,#F1EFE2 100%)}
.hero::before,.hero::after{content:"";position:absolute;background:url(img/halftone-hero.svg) center/contain no-repeat;pointer-events:none;aspect-ratio:900/760}
.hero::before{width:min(52vw,640px);left:44%;top:-8%;opacity:.95}
.hero::after{width:min(60vw,760px);right:-14%;bottom:-18%;transform:rotate(180deg);opacity:.95}
.bar,.hero-body{z-index:1;position:relative}
.bar{display:flex;justify-content:space-between;align-items:center;padding-block:clamp(24px,4vw,64px) 0;position:relative}
.mark{display:block;line-height:0}
.mark img{display:block;width:clamp(96px,12.7vw,163px);height:auto}
.bar span{font-weight:400;font-size:clamp(1.1rem,2.6vw,2.08rem);color:var(--navy)}
.hero-body{position:relative;padding-block:clamp(36px,7vw,100px) clamp(40px,6vw,80px)}
.kicker{font-size:clamp(2.6rem,10.8vw,8.67rem);font-weight:700;text-transform:uppercase;letter-spacing:0;line-height:1.05;color:var(--navy)}
.headline{margin-top:clamp(18px,3vw,40px);font-size:clamp(1.3rem,3.1vw,2.5rem);font-weight:500;font-style:italic;line-height:1.4;color:var(--navy-sub);max-width:20em;text-transform:lowercase}
.headline::first-letter{text-transform:uppercase}
.stats-h{position:relative;margin-top:clamp(40px,6vw,80px);font-weight:700;font-size:clamp(1.35rem,3.1vw,2.5rem);color:var(--navy);line-height:1.12}
.stats{position:relative;list-style:none;padding:0;margin-top:clamp(14px,2vw,24px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.5vw,20px)}
.stats li{background:var(--peach);padding:clamp(14px,2vw,26px);display:flex;flex-direction:column;gap:8px}
.stats b{font-size:clamp(2.6rem,6.4vw,5.2rem);font-weight:700;line-height:.95;color:var(--gold)}
.stats span{font-size:clamp(.9rem,1.5vw,1.2rem);line-height:1.3;color:var(--ink)}

/* sections: Q2 rhythm = cream, thin full-width rule, gold numbered heading, navy bold sub-heading */
section{padding-block:clamp(48px,8vw,112px);border-bottom:1px solid var(--rule)}
.sec-head{margin-bottom:clamp(28px,4vw,56px)}
.sec-head h2{font-size:clamp(1.9rem,7.4vw,5.9rem);line-height:1.03;letter-spacing:0;text-transform:uppercase;color:var(--gold);text-wrap:balance}
.sec-head p{font-weight:700;font-size:clamp(1.35rem,3.1vw,2.5rem);line-height:1.15;margin-top:clamp(12px,2vw,24px);color:var(--navy);max-width:22em}
.story{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,56px);align-items:start}
.story h3{font-size:clamp(1.5rem,3.1vw,2.5rem)}
.story>h3{grid-column:1/-1;margin-bottom:-8px}
.big{margin-top:clamp(20px,3vw,32px);padding:clamp(16px,2.4vw,28px);background:var(--peach)}
.big b{display:block;font-size:clamp(3.2rem,7vw,5.6rem);font-weight:700;line-height:.95;color:var(--gold)}
.big span{display:block;margin-top:8px;font-weight:700}
.tri{list-style:none;padding:0;margin:1.1em 0;display:grid;gap:10px}
.tri li{display:flex;gap:14px;padding:14px 16px;background:var(--peach)}
.tri li::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--gold);margin-top:.5em}
.pull{font-weight:500;font-style:italic;font-size:clamp(1.1rem,1.9vw,1.5rem);line-height:1.4;max-width:none;margin-block:1.4em;padding:clamp(18px,2.4vw,32px);background:var(--ink);color:#FBF8EC}
.sub{margin-top:clamp(48px,7vw,96px);font-size:clamp(1.5rem,3.1vw,2.5rem);padding-top:clamp(20px,3vw,40px);border-top:1px solid var(--rule)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(20px,3vw,40px)}
.card{padding:clamp(18px,2.6vw,36px);background:var(--peach)}
.card h3{font-size:clamp(1.3rem,2.4vw,2rem);margin-bottom:.6em}
.steps{display:flex;flex-wrap:wrap;gap:6px 0;background:var(--ink);color:#FBF8EC;padding:clamp(18px,2.4vw,30px);margin-block:1.4em;font-weight:700;font-size:clamp(1rem,1.7vw,1.4rem);line-height:1.5;max-width:none}
.steps i{font-style:normal;color:var(--btn)}
.ask{font-weight:700;font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.25;max-width:32em;margin-block:1em;color:var(--navy)}
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(20px,3vw,40px)}
.mod{padding:clamp(18px,2.2vw,30px);background:var(--peach)}
.mod .tag{display:inline-block;font-weight:700;letter-spacing:.08em;font-size:.85rem;color:var(--ink);padding-bottom:4px;margin-bottom:14px;border-bottom:3px solid var(--gold)}
.mod h4{font-size:clamp(1.25rem,2vw,1.6rem);margin-bottom:14px}
.mod p{font-size:1rem}
.mod .ask{font-size:1.1rem;margin-block:.9em}

/* what's next: Q2 section V = gold heading, peach panels */
.next .card.wide{grid-column:1/-1}
.next .card.wide p{max-width:62ch}
.next .card.has-ph{display:grid;grid-template-columns:5fr 7fr;gap:0 clamp(20px,3.5vw,48px);align-items:start}
.next .card.has-ph.flip{grid-template-columns:7fr 5fr}
.next .card.has-ph.flip .ph{order:2}
.next .card.has-ph .ph-card{margin-bottom:0}
.cta{display:inline-block;margin-top:1.2em;background:var(--btn);color:var(--ink);font-weight:500;padding:.55em 1.6em;text-decoration:underline;text-underline-offset:.18em;border-radius:0;text-align:center}
.cta:hover{background:#F2BB45}

/* closing */
.closing{border-bottom:1px solid var(--rule)}
.closing p{font-size:clamp(1.1rem,1.9vw,1.5rem);line-height:1.5;max-width:46ch}
.closing .lead{font-weight:700;font-size:clamp(1.6rem,3.6vw,2.9rem);line-height:1.12;max-width:22ch;color:var(--navy);margin-bottom:.7em}
.sign{margin-top:clamp(28px,4vw,56px);font-weight:700;letter-spacing:.14em;font-size:1.4rem;color:var(--gold)}
.tagline{font-style:italic;font-weight:500;margin-top:6px;color:var(--navy-sub)}

/* footer: Q2 = near-white band, gold thanks line, italic navy second line, yellow buttons */
footer{background:#FEFEFC;border-top:1px solid var(--rule);padding-block:clamp(40px,6vw,80px) 36px}
.thanks{text-align:center}
.thanks p{margin-inline:auto;max-width:none}
.t1{font-weight:700;font-size:clamp(1.25rem,2.6vw,2.1rem);line-height:1.15;color:var(--gold);text-wrap:balance}
.t2{margin-top:.2em;font-weight:500;font-style:italic;font-size:clamp(1.1rem,2.2vw,1.8rem);color:var(--navy-sub)}
.thanks .cta{margin-top:1.6em}
.past{margin-top:clamp(36px,5vw,64px);padding-top:clamp(20px,3vw,32px);border-top:1px solid var(--rule);text-align:center}
.past h2{font-size:clamp(1.25rem,2.4vw,1.9rem);color:var(--navy)}
.past ul{list-style:none;padding:0;margin-top:clamp(14px,2vw,24px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.5vw,20px)}
.past li{display:flex}
.past a,.past .soon{flex:1;padding:.55em .8em;background:var(--btn);color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:.18em;text-align:center;font-size:clamp(.95rem,1.7vw,1.3rem)}
.past a.on{background:var(--gold);color:var(--ink);text-decoration:none;font-weight:700}
.past .soon{background:transparent;border:1px solid var(--rule);text-decoration:none;color:var(--grey)}
.past em{display:block;font-size:.8em;font-weight:400}
.follow{margin-top:clamp(28px,4vw,48px);padding-top:clamp(18px,2.6vw,28px);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.follow p{font-weight:700;color:var(--navy);width:100%}
.social{list-style:none;padding:0;display:flex;gap:10px;color:var(--navy)}
.social a,.social span{display:grid;place-items:center;width:44px;height:44px;text-decoration:none}
.social a:hover{color:var(--gold)}
.wordmark{margin-top:clamp(24px,4vw,40px);text-align:right}
.wordmark img{display:inline-block;width:clamp(120px,15vw,190px);height:auto}
.credit{margin-top:36px;font-size:.8rem;opacity:.7;text-align:center;max-width:none}

/* photos: Q2 treatment = natural colour, square corners, soft shadow, small caption */
.ph{margin:0}
.ph-wide{margin-bottom:clamp(32px,5vw,72px)}
.hero .ph-wide{margin-top:clamp(28px,4vw,48px);margin-bottom:0}
.ph-card{margin-bottom:clamp(16px,2vw,24px)}
.ph-img{overflow:hidden;box-shadow:0 8px 28px rgb(5 29 64/.18);background:var(--peach)}
.ph-img img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
.ph-card .ph-img img{aspect-ratio:16/10}
.ph-side{margin-top:clamp(20px,3vw,32px)}
.ph-side .ph-img img{aspect-ratio:4/3}
.ph-band{margin-block:clamp(24px,4vw,48px)}
.closing .ph-band{margin-top:0}
.ph figcaption{margin-top:10px;max-width:none;font-size:.8125rem;font-style:italic;line-height:1.4;color:var(--grey)}

@media(max-width:820px){
  .story{grid-template-columns:1fr}
  .mods{grid-template-columns:1fr}
  .next .card.has-ph,.next .card.has-ph.flip{display:block}
  .next .card.has-ph .ph-card{margin-bottom:16px}
  .hero::before{left:30%;top:-3%}
}
@media(max-width:640px){
  .stats{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr}
  .ph-wide .ph-img img,.ph-band .ph-img img{aspect-ratio:3/2}
  .past ul{grid-template-columns:1fr 1fr}
  .follow{justify-content:flex-start}
  .wordmark{text-align:left}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
