:root{
  --red:#d40d12; --red-deep:#a3080c; --rose:#f08c90; --blush:#fbe4e5;
  --paper:#ffffff; --ink:#1a0b0c; --ink-soft:#5c3f41;
  --sans:"Josefin Sans", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --serif:"Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --measure:38rem; --gutter:clamp(1.25rem, 5vw, 5rem);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#140f10; --ink:#f7ecec; --ink-soft:#c9a9ab; --blush:#2b1517; } }
:root[data-theme="dark"]{ --paper:#140f10; --ink:#f7ecec; --ink-soft:#c9a9ab; --blush:#2b1517; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); font-size:1.125rem; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
a:focus-visible, button:focus-visible{outline:2px solid currentColor; outline-offset:4px}

/* Header */
header{position:absolute; inset:0 0 auto 0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:calc(1.25rem + env(safe-area-inset-top,0px)) var(--gutter) 1.25rem; color:#fff; font-family:var(--sans); font-weight:300}
.wordmark{display:flex; align-items:center; gap:.85rem; text-decoration:none; font-size:1.05rem; letter-spacing:.02em}
.wordmark img{width:2.4rem; height:2.4rem}
nav a{text-decoration:none; margin-left:1.75rem; font-size:1rem; border-bottom:1px solid transparent; padding-bottom:.2rem; transition:border-color .2s}
nav a:hover{border-color:#fff}
@media (max-width:640px){ nav{display:none} }

/* Hero */
.hero{position:relative; background:var(--red); color:#fff; min-height:100svh; display:grid; grid-template-rows:1fr auto; overflow:hidden}
.hero .rings{position:absolute; right:-8vw; top:50%; transform:translateY(-52%); width:min(110vh,92vw); max-width:none; height:auto; opacity:1}
.hero .copy{position:relative; z-index:1; padding:0 var(--gutter) clamp(3rem,8vh,6rem); grid-row:2; max-width:36rem}
.hero h1{font-family:var(--sans); font-weight:200; font-size:clamp(2.6rem,7vw,5.6rem); line-height:1.02; letter-spacing:-.005em; margin:0 0 1.5rem}
.hero p{font-size:clamp(1.05rem,1.6vw,1.3rem); font-weight:300; margin:0 0 2.25rem; max-width:30rem; line-height:1.5}
/* Pill button — used by the hero link and the ask form's submit button. justify-self keeps it from stretching inside the form grid. */
.cta{display:inline-block; justify-self:start; font-family:var(--sans); font-weight:400; line-height:1.6; text-decoration:none; background:#fff; color:var(--red); padding:.95rem 1.6rem .8rem; border-radius:999px; border:0; font-size:1rem; cursor:pointer; transition:transform .25s}
.cta:hover{transform:translateY(-2px)}
.cta:disabled{opacity:.6; cursor:default; transform:none}
@keyframes bloom{from{opacity:0; transform:translateY(-52%) scale(.94)} to{opacity:1; transform:translateY(-52%) scale(1)}}
.hero .rings{animation:bloom 1.6s cubic-bezier(.2,.7,.2,1) both}
@media (max-width:760px){
  .hero .rings{right:-30vw; top:38%; width:120vw}
  .hero{grid-template-rows:55svh auto}
}

/* Generic section */
section{padding:clamp(4.5rem,11vw,9rem) var(--gutter)}
.inner{max-width:72rem; margin:0 auto}
h2{font-family:var(--sans); font-weight:300; font-size:clamp(1.9rem,4.2vw,3.2rem); line-height:1.1; margin:0 0 1.5rem; letter-spacing:-.005em}
h3{font-family:var(--sans); font-weight:400; font-size:1.25rem; margin:0 0 .6rem; line-height:1.3}
p{margin:0 0 1.2em; max-width:var(--measure)}
.lead{font-size:clamp(1.35rem,2.3vw,1.85rem); line-height:1.4; font-weight:300; max-width:44rem}

/* Manifesto */
.manifesto .inner{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:clamp(2rem,6vw,6rem); align-items:start}
.manifesto h2{position:sticky; top:2rem}
@media (max-width:760px){ .manifesto .inner{grid-template-columns:1fr} .manifesto h2{position:static} }

/* Ways of working */
.ways{background:var(--blush)}
.ways .grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,5vw,4rem) clamp(2rem,6vw,6rem); margin-top:3rem}
.ways .grid > div{padding-top:1.25rem; border-top:1px solid var(--red)}
.ways .grid p{color:var(--ink-soft)}
@media (max-width:640px){ .ways .grid{grid-template-columns:1fr} }

/* Hypothesis loop — a real sequence, so it gets one */
.loop .inner{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); align-items:center}
.loop svg{width:100%; max-width:24rem; height:auto; margin:0 auto}
@media (max-width:760px){ .loop .inner{grid-template-columns:1fr} }

/* Contact */
.contact{background:var(--red); color:#fff}
.contact h2{font-size:clamp(2.2rem,6vw,4.5rem); font-weight:200; max-width:20ch}
.contact p{max-width:30rem}
.contact a.mail{font-family:var(--sans); font-size:clamp(1.2rem,2.5vw,1.8rem); font-weight:300; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:.25rem; transition:border-color .2s}
.contact a.mail:hover{border-color:#fff}
.contact .inner{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:3rem; align-items:end}
.contact ul{list-style:none; margin:0; padding:0; font-family:var(--sans); font-weight:300; font-size:1rem; line-height:2}
.contact ul a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4)}
.reach .mail{display:inline-block}
.reach ul{margin-top:1.5rem}
@media (max-width:760px){ .contact .inner{grid-template-columns:1fr} }

/* Ask form — underline fields, white on the red, same pill button as the hero */
.ask{margin-top:2.25rem; max-width:30rem; display:grid; gap:1.25rem}
.ask label{display:grid; gap:.35rem; font-family:var(--sans); font-weight:300; font-size:1rem}
.ask input:not([type=hidden]), .ask textarea{appearance:none; -webkit-appearance:none; font:inherit; font-size:1.05rem; line-height:1.4; color:#fff; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.6); border-radius:0; padding:.45rem 0; width:100%; transition:border-color .2s}
.ask textarea{resize:vertical; min-height:6rem}
.ask input:hover, .ask textarea:hover{border-bottom-color:#fff}
.ask input:focus-visible, .ask textarea:focus-visible{outline:2px solid #fff; outline-offset:4px; border-bottom-color:#fff}
.ask input:-webkit-autofill{-webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 1000px var(--red) inset; transition:background-color 9999s}
.ask .gotcha{position:absolute; left:-9999px; height:1px}
.ask .form-note{font-family:var(--sans); font-weight:300; margin:0; min-height:1.6em}

footer{background:var(--red-deep); color:rgba(255,255,255,.85); padding:1.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom,0px)); font-family:var(--sans); font-weight:300; font-size:.9rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem 2rem}
footer img{width:1.6rem; height:1.6rem; display:inline-block; vertical-align:middle; margin-right:.6rem}