/* Lamppost — landing (direction 2a). One typeface, no scripts, nothing loaded from elsewhere. */
:root{--coral:#f26652;--coral-field:#f5836f;--ink:#291c18;--ivory:#eee7d9;--font:"Helvetica Neue",Helvetica,Arial,sans-serif;--pad:clamp(20px,5vw,72px)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--coral);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
body{min-height:100vh;display:flex;flex-direction:column}
a{color:var(--ink)}a:hover{color:#000}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--ink);color:var(--coral)}

/* The image is always shown whole. Wide screens: text sits in the empty coral left of the light (left ~40%). Narrow: image first as the hero, text below. */
.hero{flex:1;display:flex;flex-direction:column}
.hero-text{padding:clamp(28px,5vw,64px) var(--pad) clamp(36px,6vw,72px);display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,2.4vw,36px)}
.hero-art{order:-1}
.hero-art img{display:block;width:100%;height:auto}
@media (min-width:1100px){
.hero{display:grid;grid-template-columns:100%;align-content:start}
.hero-text,.hero-art{grid-area:1/1}
.hero-text{position:relative;z-index:1;width:40%;padding:clamp(32px,4vw,72px) 0 clamp(32px,4vw,72px) var(--pad);gap:clamp(18px,1.9vw,32px)}
/* The picture fits the window above the footer, so the footer shows without a scroll. It is still whole, never cropped: it shrinks and sits at the right, and the page's coral (the colour of the picture's own left edge) fills the gap. 61px = the footer on one line: 20px padding twice, a 2px border, one 15px line. */
.hero-art{display:flex;justify-content:flex-end}
.hero-art img{width:auto;max-width:100%;max-height:calc(100vh - 61px)}
.wordmark{font-size:clamp(60px,6vw,124px)}
.tagline{font-size:clamp(24px,2.1vw,40px)}
.sub{font-size:clamp(17px,1.25vw,22px)}
}

.wordmark{margin:0;font-size:clamp(52px,7.4vw,108px);font-weight:700;line-height:.9;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);-webkit-text-stroke:.035em var(--ivory);paint-order:stroke fill}
.back{font-size:22px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:var(--ink);-webkit-text-stroke:.035em var(--ivory);paint-order:stroke fill;width:max-content}
.tagline{margin:0;font-size:clamp(24px,2.5vw,36px);font-weight:700;line-height:1.1;letter-spacing:-.01em}
.nowrap{white-space:nowrap}
.sub{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.5;max-width:28em;text-wrap:pretty}
.stack{display:flex;flex-direction:column;gap:16px}
.note{margin:0;font-size:15px;line-height:1.5;max-width:28em}
h1.title{margin:0;font-size:clamp(34px,4vw,56px);font-weight:700;line-height:1.02;letter-spacing:-.015em}

.btn{font-family:inherit;display:flex;justify-content:space-between;align-items:center;gap:24px;width:max-content;min-width:260px;padding:16px 20px;background:var(--ink);color:var(--coral);border:0;border-radius:0;text-decoration:none;font-weight:700;font-size:17px;cursor:pointer}
.btn:hover{background:#000;color:var(--coral)}
.btn[disabled]{cursor:default;background:var(--ink)}

form{display:flex;flex-direction:column;gap:10px;max-width:440px}
label{font-size:15px;font-weight:700}
input[type=email]{font-family:inherit;font-size:18px;padding:14px 16px;border:2px solid var(--ink);border-radius:0;background:var(--coral-field);color:var(--ink)}
input[type=email]::placeholder{color:#7a3a2e}
form .btn{margin-top:8px}
/* A field no person sees or reaches by keyboard: a bot that fills every field fills it, and functions/access/submit.js then keeps nothing. The div also carries the hidden attribute, so a browser holding an older copy of this file still hides it. */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.page{flex:1;padding:clamp(40px,6vw,88px) var(--pad)}
.page article{max-width:760px;display:flex;flex-direction:column;gap:20px}
.title-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tag{border:2px solid var(--ink);padding:3px 8px;font-size:13px;font-weight:700}
.page p{margin:0;font-size:17px;line-height:1.55}
.page p.lead{font-size:18px}
.page h2{margin:24px 0 0;padding-top:16px;border-top:2px solid var(--ink);font-size:22px;font-weight:700}
.list{list-style:none;margin:0;padding:0;display:grid;gap:2px;background:var(--ink);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.list li{background:var(--coral);padding:14px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 20px;font-size:16px;line-height:1.5}

.site-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;padding:20px var(--pad);border-top:2px solid var(--ink);font-size:15px}
.site-foot a{font-weight:700}
.foot-right{display:flex;flex-wrap:wrap;gap:12px 28px}
.site-foot a.parent{font-weight:400}