/* The Layout · Cabin Class theme
   White background, racing green #0F3A33, gold #C29A5B. Light only, no dark mode. */
:root{
  --green:#0F3A33;--gold:#C29A5B;--gold-text:#8E6A2B;--ink:#13211C;--muted:#5E6E66;--rule:#E1E6E2;--pale:#F3F6F3;--seat:#C9D4CE;
  --f-display:var(--gh-font-heading,'Fraunces',Georgia,serif);
  --f-body:var(--gh-font-body,'Source Sans 3',system-ui,sans-serif);
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --max:1180px;
  --content-width:700px;
}
*{box-sizing:border-box}
html{color-scheme:light only;background:#FFFFFF}
body{margin:0;background:#FFFFFF;color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:var(--max);margin:0 auto}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
button{font:inherit;cursor:pointer}
img,svg{max-width:100%}
img{height:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}
.eyebrow{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.lock{width:9px;height:11px;display:inline-block;vertical-align:-1px;margin-right:2px}
.lock path{fill:currentColor}

/* illustrations and seat map */
.ill-line{stroke:var(--green);stroke-width:2;fill:none}
.ill-blade{stroke-width:1.6}
.ill-thin{stroke:var(--seat);stroke-width:1.5;fill:none}
.ill-fill{fill:var(--green)}
.ill-paper,.ill-paper.ill-line,.ill-paper.ill-gold-line{fill:#FFFFFF}
.ill-soft{fill:var(--seat)}
.ill-gold{fill:var(--gold)}
.ill-gold-line{stroke:var(--gold);stroke-width:2;fill:none}
.ill-dash{stroke-dasharray:5 5}
.ill-beam{fill:var(--gold);opacity:.18}
.ill-sun{fill:var(--gold);opacity:.85}
.ill-lbl{font-family:var(--f-mono);font-size:8px;letter-spacing:1px;fill:var(--muted)}
svg.lopa{width:100%;height:auto;display:block}
.fus{fill:none;stroke:var(--green);stroke-width:1.5}
.seat{fill:var(--seat)}
.seat.hi{fill:var(--gold)}
.seat.lost{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-dasharray:2 2}
.lopa-lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:1px;fill:var(--muted)}

/* motion: the seat map fills nose to tail, the cover story rises in, cards ease up as you scroll */
.seat{animation:seatIn .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
.seat.hi{animation:seatIn .45s cubic-bezier(.2,.7,.2,1) both,seatGlow 1.6s ease-in-out 1.3s 2;animation-delay:var(--d,0ms),1.3s}
@keyframes seatIn{from{opacity:0;transform:translateY(4px)}}
@keyframes seatGlow{50%{fill:#E2C48E}}
.enter>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.enter>*:nth-child(2){animation-delay:.08s}.enter>*:nth-child(3){animation-delay:.16s}.enter>*:nth-child(4){animation-delay:.24s}.enter>*:nth-child(5){animation-delay:.32s}.enter>*:nth-child(6){animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0ms)}
.js .rv.in{opacity:1;transform:none}
.ill{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
a:hover .ill{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.js .rv{opacity:1;transform:none}}

/* masthead */
.mast{border-bottom:1px solid var(--rule);background:#FFFFFF;position:sticky;top:0;z-index:20}
.mast .inner{display:flex;flex-direction:column;align-items:center;gap:8px;padding-block:20px 0;transition:padding .3s}
.wm{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-size:2.4rem;font-weight:500;color:var(--green);letter-spacing:-.01em;transition:font-size .3s}
.wm .logo{width:38px;height:38px;flex:none;transition:width .3s,height .3s}
.wm .logo-img{height:44px;width:auto;transition:height .3s}
.tag{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.nav{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;align-items:center;font-size:.92rem;color:var(--muted);padding-block:11px;border-top:1px solid var(--rule);width:100%;margin-top:4px}
.nav a{background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;transition:background-size .3s ease,color .2s}
.nav a:hover,.nav a.on{color:var(--green);background-size:100% 1.5px}
.nav .sub{color:#FFFFFF;background:var(--green);padding:3px 13px;border-radius:999px}
.nav .sub:hover{color:#FFFFFF;background-size:0 0}
.nav .badge{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);border:1px solid var(--gold);border-radius:999px;padding:3px 10px}
.mast.small .inner{padding-block:10px 0}
.mast.small .wm{font-size:1.6rem}
.mast.small .wm .logo{width:28px;height:28px}
.mast.small .wm .logo-img{height:30px}
.mast.small .tag{display:none}
@media (max-width:560px){.wm{font-size:1.9rem}.nav{gap:14px;font-size:.86rem}}

/* buttons and forms */
.btn{display:inline-block;background:var(--green);color:#FFFFFF;border:0;padding:12px 20px;border-radius:999px;font-weight:600;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,58,51,.18)}
.btn-sm{padding:9px 16px;font-size:.88rem;align-self:flex-start}
.btn-line{display:inline-block;background:#FFFFFF;color:var(--green);border:1px solid var(--rule);padding:11px 19px;border-radius:999px;font-weight:600;transition:border-color .2s}
.btn-line:hover{border-color:var(--green)}
.inline-form,.wl-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.inline-form input,.wl-form input{font:inherit;flex:1 1 220px;min-width:0;border:1px solid var(--rule);border-radius:999px;padding:12px 18px;background:#FFFFFF;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.inline-form input:focus,.wl-form input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(15,58,51,.12)}
.form-msg{display:none;width:100%;font-size:.9rem}
.form-msg.ok{color:var(--green);font-weight:600}
.form-msg.bad{color:#9B3B2E}
form.success .ok,form.error .bad{display:block}
form.success input,form.success button{display:none}
form.loading button{opacity:.6;pointer-events:none}

/* cover story */
.lead-wrap{padding-block:36px 0}
.lead{background:var(--pale);border-radius:10px;padding:clamp(22px,4vw,44px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px;align-items:center}
@media (max-width:880px){.lead{grid-template-columns:1fr}}
.lead-copy{display:flex;flex-direction:column;gap:16px;min-width:0}
.chip{align-self:flex-start;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;background:var(--green);color:#FFFFFF;padding:5px 10px;border-radius:4px}
.lead h1{font-family:var(--f-display);font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.08;color:var(--green);font-weight:500}
.lead h1 a:hover{color:var(--gold-text)}
.lead .stand{font-size:1.08rem;color:var(--muted)}
.lead .meta{font-size:.85rem;color:var(--muted)}
.frame{display:block;background:#FFFFFF;border-radius:8px;padding:16px 14px 8px;min-width:0;overflow-x:auto;transition:box-shadow .3s}
.frame:hover{box-shadow:0 10px 30px rgba(15,58,51,.10)}
.frame svg{min-width:520px}
.frame.has-img{padding:0;overflow:hidden;aspect-ratio:16/10}
.frame.has-img img{width:100%;height:100%;object-fit:cover;display:block}

/* card grid */
.latest{padding-block:64px 56px}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--gold);margin-bottom:28px}
.sec-h h2{font-family:var(--f-display);font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:500;color:var(--green)}
.sec-h .more{font-size:.85rem;color:var(--muted)}
.sec-h .more:hover{color:var(--green)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;gap:10px;min-width:0}
.cover{aspect-ratio:16/9;position:relative;background:var(--pale);border-radius:8px;overflow:hidden}
.cover .ill{position:absolute;inset:0;width:100%;height:100%}
.cover img.ill{object-fit:cover}
.kicker{display:flex;gap:10px;align-items:center;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.kicker .beat{color:var(--gold-text)}
.tier.free{color:var(--green)}
.tier.mem{color:var(--muted)}
.card h3{font-family:var(--f-display);font-size:1.3rem;line-height:1.2;font-weight:500;color:var(--ink);transition:color .2s}
.card:hover h3{color:var(--green)}
.card p{font-size:.92rem;color:var(--muted)}
.card .meta{font-family:var(--f-mono);font-size:.7rem;color:var(--muted)}
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:48px;font-size:.9rem}

/* sign-up band */
.signup{background:var(--pale)}
.signup .inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-block:40px}
.signup h2{font-family:var(--f-display);font-size:1.7rem;color:var(--green);font-weight:500}
.signup p{color:var(--muted);margin-top:4px}
.signup .inline-form{flex:1 1 380px;max-width:520px}

/* page heads, tag and author pages */
.ph{padding-block:52px 8px}
.ph .inner{display:flex;flex-direction:column;gap:12px}
.ph h1{font-family:var(--f-display);font-size:clamp(2.2rem,5vw,3.4rem);font-weight:500;color:var(--green);line-height:1.06}
.ph .sub{font-size:1.1rem;color:var(--muted);max-width:60ch}
.ph .meta{font-family:var(--f-mono);font-size:.75rem}
.ph .inner.tag-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:32px;align-items:center;border-bottom:2px solid var(--gold);padding-bottom:28px}
.tag-copy{display:flex;flex-direction:column;gap:12px}
.tag-art{background:var(--pale);border-radius:10px;aspect-ratio:16/9;position:relative;overflow:hidden}
.tag-art .ill{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:760px){.ph .inner.tag-head{grid-template-columns:1fr}.tag-art{display:none}}
.narrow{max-width:var(--content-width);padding-block:24px 72px}
.ph .inner.narrow{padding-block:0 72px}

/* article */
.art{padding-block:44px 0}
.art-in{max-width:var(--content-width);display:flex;flex-direction:column;gap:16px}
.art .back{font-size:.88rem;color:var(--muted)}
.art .back:hover{color:var(--green)}
.art h1{font-family:var(--f-display);font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.06;font-weight:500;color:var(--green)}
.art .stand{font-size:1.18rem;color:var(--muted)}
.art .meta{font-size:.86rem;color:var(--muted)}
.art .meta a{color:var(--green)}
.art-wide{max-width:980px;margin-block:28px 8px;margin-inline:auto}
.art-hero{background:var(--pale);border-radius:10px;overflow:hidden}
.art-hero img{display:block;width:100%}
.cap{font-family:var(--f-mono);font-size:.7rem;color:var(--muted);margin-top:8px}
.endbox{margin-top:28px;padding:18px 20px;background:var(--pale);border-radius:8px;font-size:.98rem}
.endbox a{color:var(--green);font-weight:600;text-decoration:underline}
.endbox b{color:var(--green)}
.comments{margin-top:40px}

/* post and page body (Ghost editor content) */
.prose{font-size:1.13rem;line-height:1.75;padding-top:12px}
.prose-page{font-size:1.06rem}
.gh-content>*+*{margin-top:1.1em}
.gh-content>p:first-child{margin-top:0}
.prose>p:first-child::first-letter{font-family:var(--f-display);float:left;font-size:4em;line-height:.85;padding:6px 10px 0 0;color:var(--green);font-weight:500}
.gh-content h2{font-family:var(--f-display);font-size:1.7rem;line-height:1.2;color:var(--green);font-weight:500;margin-top:1.6em}
.gh-content h3{font-family:var(--f-display);font-size:1.3rem;line-height:1.25;color:var(--ink);font-weight:500;margin-top:1.4em}
.gh-content a{color:var(--green);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.gh-content a:hover{color:var(--gold-text)}
.gh-content ul,.gh-content ol{padding-left:1.3em}
.gh-content li+li{margin-top:.4em}
.gh-content blockquote{margin-inline:0;padding:4px 0 4px 20px;border-left:3px solid var(--gold);font-family:var(--f-display);font-size:1.3rem;line-height:1.45;color:var(--green)}
.gh-content blockquote.kg-blockquote-alt{border:0;padding:0;text-align:center;font-size:1.5rem}
.gh-content hr{border:0;border-top:1px solid var(--rule);margin-block:2em}
.gh-content figure{margin-inline:0}
.gh-content figcaption{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);margin-top:8px;text-align:center}
.gh-content img{border-radius:8px}
.gh-content table{border-collapse:collapse;width:100%;font-size:.92rem;display:block;overflow-x:auto}
.gh-content th{text-align:left;font-family:var(--f-mono);font-weight:500;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:8px 12px 8px 0;border-bottom:1px solid var(--rule)}
.gh-content td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.gh-content code{font-family:var(--f-mono);font-size:.88em;background:var(--pale);padding:1px 5px;border-radius:4px}
.gh-content pre{background:var(--pale);padding:16px;border-radius:8px;overflow-x:auto}
.gh-content pre code{background:none;padding:0}
.kg-width-wide{position:relative;width:min(980px,calc(100vw - 32px));left:50%;transform:translateX(-50%)}
.kg-width-full{position:relative;width:100vw;left:50%;transform:translateX(-50%)}
.kg-width-full img{border-radius:0}
.kg-callout-card{border-radius:8px}
.kg-bookmark-card a{text-decoration:none}

/* paywall (shown in place of members-only content) */
.paywall{position:relative;margin-top:-90px!important}
.paywall .fade{height:90px;background:linear-gradient(to bottom,rgba(255,255,255,0),#FFFFFF)}
.pay{border:1px solid var(--rule);border-radius:10px;background:var(--pale);padding:28px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;font-size:1rem;line-height:1.55}
.pay h2{font-family:var(--f-display);font-size:1.7rem;color:var(--green);font-weight:500;margin:0}
.pay p{color:var(--muted)}
.pay .row{display:flex;gap:10px;flex-wrap:wrap}
.pay .btn,.pay .btn-line{text-decoration:none}
.pay .btn{color:#FFFFFF}
.pay .btn-line{color:var(--green)}
.prose>.paywall:first-child{margin-top:0!important}
.prose>.paywall:first-child .fade{display:none}

/* pre-launch waitlist */
.wl{padding-block:24px 64px;min-height:80vh}
.wl-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.wl-top .wm{font-size:1.8rem}
.wl-top .wm .logo{width:32px;height:32px}
.wl-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;background:var(--pale);border-radius:10px;padding:clamp(22px,4vw,48px);margin-top:36px}
@media (max-width:880px){.wl-grid{grid-template-columns:1fr}}
.wl-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.wl h1{font-family:var(--f-display);font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.06;color:var(--green);font-weight:500}
.wl .stand{font-size:1.1rem;color:var(--muted)}
.wl .fine{font-size:.82rem;color:var(--muted)}
.wl .done{display:flex;flex-direction:column;gap:6px}
.wl .done h2{font-family:var(--f-display);font-size:1.5rem;color:var(--green);font-weight:500}
.wl-points{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:760px){.wl-points{grid-template-columns:1fr}}
.wl-points li{display:flex;flex-direction:column;gap:6px;border-top:2px solid var(--gold);padding-top:14px}
.wl-points b{font-family:var(--f-display);font-size:1.3rem;color:var(--green);font-weight:500}
.wl-points span{color:var(--muted);font-size:.95rem}

/* footer */
footer{border-top:1px solid var(--rule);font-size:.82rem;color:var(--muted)}
footer .inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:28px 44px}
.foot-links{display:flex;gap:16px;flex-wrap:wrap}
footer a:hover{color:var(--green)}
