/* ============================================================
   How To Become An Airline Pilot — Robert Lawrence
   Production stylesheet. Follows the approved "dawn at cruise
   altitude" direction (MOCKUP_PLAN.md §5, design/ cards).
   ============================================================ */
@font-face{font-family:"Besley";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/Besley-normal-400-900.woff2) format("woff2")}
@font-face{font-family:"Besley";font-style:italic;font-weight:400 900;font-display:swap;src:url(../fonts/Besley-italic-400-900.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/PublicSans-normal-400-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IBMPlexMono-normal-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/IBMPlexMono-normal-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/IBMPlexMono-normal-600.woff2) format("woff2")}

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --night:#1B2432;--night2:#26344A;--ink:#232A33;--paper:#FAF7F2;--card:#FFFFFF;
  --mist:#E9EFF4;--steel:#46607A;--line:#C9D3DD;--dim:#93A1B2;
  --dawn:#E8862E;--dawn-deep:#AE5106;--glow:#FFB35C;
  --serif:"Besley",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --wrap:1140px;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
body{font:400 17px/1.65 var(--sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;
  /* sticky footer, so short pages (thank-you.html) don't leave it mid-screen */
  min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1;display:flex;flex-direction:column}
/* a single-section page stretches to fill, so no bare paper band above the footer */
main>section:only-child{flex:1}
/* height:auto is required — the width/height attributes on <img> are
   presentational hints, and without this they force a literal pixel
   height and stretch the photo. */
img{display:block;max-width:100%;height:auto}
h1,h2,h3{text-wrap:balance}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--card);color:var(--ink);padding:10px 16px;border-radius:0 0 6px 0;font:600 14px var(--sans)}
.skip:focus{left:0}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--dawn-deep);outline-offset:2px}
.on-dark a:focus-visible,.on-dark button:focus-visible{outline-color:var(--glow)}

/* ---- Header ---- */
header{position:sticky;top:0;z-index:50;background:#141C28;transition:box-shadow .2s ease}
header.scrolled{box-shadow:0 1px 0 rgba(250,247,242,.12),0 10px 24px -18px rgba(0,0,0,.8)}
.bar{max-width:var(--wrap);margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.wordmark{display:flex;align-items:center;gap:10px;font:600 21px var(--serif);color:var(--paper);text-decoration:none;letter-spacing:.01em}
.wordmark::before{content:"";flex:none;width:8px;height:8px;background:var(--dawn);transform:rotate(45deg)}
nav.primary{display:flex;gap:30px}
nav.primary a{font:500 14.5px/1 var(--sans);color:var(--dim);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
nav.primary a:hover,nav.primary a:focus-visible{color:var(--paper);border-bottom-color:var(--dawn);outline:none}
.burger{display:none;flex-direction:column;gap:5px;padding:10px 6px;background:none;border:0;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--paper);border-radius:2px}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#141C28 0%,#1B2432 46%,#223349 72%,#2E4562 90%,#385072 100%);color:var(--paper)}
.hero .wrap{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:84px 24px 190px;display:grid;grid-template-columns:7fr 4fr;gap:72px;align-items:center}
.eyebrow{display:flex;align-items:center;gap:10px;font:500 12.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--glow)}
.eyebrow::before{content:"";flex:none;width:7px;height:7px;background:var(--dawn);transform:rotate(45deg)}
.hero h1{font:600 52px/1.08 var(--serif);letter-spacing:-.01em;margin:20px 0 12px}
.tag{font:500 17px var(--sans);color:var(--glow);margin-bottom:24px}
.lede{font:400 17.5px/1.7 var(--sans);color:#C9D2DE;max-width:56ch;margin-bottom:16px}
.lede:last-of-type{margin-bottom:34px}
.cta{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;font:600 15px/1 var(--sans);padding:15px 26px;border-radius:6px;border:0;cursor:pointer;text-decoration:none;color:var(--night)}
.btn-primary{background:var(--dawn)}
.btn-primary:hover{background:#D9761C}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost-dark{background:transparent;border:1.5px solid rgba(250,247,242,.45);color:var(--paper)}
.btn-ghost-dark:hover{border-color:var(--paper);background:rgba(250,247,242,.08)}
.feature{justify-self:end;margin:0}
.feature img{width:300px;border-radius:5px;border:1px solid rgba(255,179,92,.28);box-shadow:0 30px 60px -18px rgba(0,0,0,.55),0 0 40px rgba(232,134,46,.12)}
.feature figcaption{font:400 11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:14px;max-width:300px}
.waypoint{position:absolute;z-index:2;left:24px;bottom:44px;font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.waypoint b{color:var(--glow);font-weight:500}
.horizon{position:absolute;left:0;right:0;bottom:118px;height:2px;z-index:1;background:linear-gradient(90deg,transparent 2%,rgba(255,179,92,.95) 20%,rgba(255,179,92,.95) 58%,rgba(232,134,46,.3) 84%,transparent);box-shadow:0 0 26px 3px rgba(232,134,46,.5)}
.ground{position:absolute;left:0;right:0;bottom:0;height:118px;z-index:0;background:linear-gradient(180deg,#111925,#0C121B)}

/* ---- Sections ---- */
section{padding:96px 24px}
.inner{max-width:var(--wrap);margin:0 auto}
.shead{display:flex;align-items:baseline;gap:24px;margin-bottom:40px}
.s-eyebrow{display:flex;align-items:center;gap:10px;font:500 12.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.s-eyebrow::before{content:"";flex:none;width:7px;height:7px;background:var(--dawn);transform:rotate(45deg)}
h2{font:600 33px/1.15 var(--serif);margin-top:12px;white-space:nowrap}
.rule{flex:1;height:1px;background:var(--line);position:relative;align-self:center;top:6px}
.rule::before{content:"";position:absolute;left:0;top:-1px;width:44px;height:3px;background:var(--dawn)}
.chip{display:inline-flex;align-items:center;gap:7px;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dawn-deep);background:#FBEBD9;border:1px solid #E8C69E;border-radius:100px;padding:5px 12px;white-space:nowrap}
.chip::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--dawn)}
.shead .chip{align-self:center}

/* ---- Biography ---- */
.bio{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start}
.photo-col{position:sticky;top:40px}
.photo-col img{border-radius:8px;width:100%;max-width:340px}
.pull{max-width:340px;margin-top:26px;padding-left:18px;border-left:3px solid var(--dawn)}
.pull p{font:italic 500 19px/1.55 var(--serif);color:var(--night)}
.pull cite{display:block;font:500 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--steel);margin-top:12px}
.bio-copy p{font-size:16.5px;margin-bottom:14px;max-width:60ch}
.bio-copy p:last-child{margin-bottom:0}
.photo-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.photo-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;box-shadow:0 12px 28px -14px rgba(27,36,50,.18)}
.photo-strip figcaption{font:400 12.5px/1.5 var(--sans);color:var(--steel);margin-top:8px}

/* ---- Books ---- */
#books{padding-top:0}
.books-intro{font-size:16.5px;max-width:70ch;margin:-14px 0 36px;color:#3A4350}
.books-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.book{background:var(--card);border:1px solid #EEE8DE;border-radius:10px;overflow:hidden;box-shadow:0 12px 28px -14px rgba(27,36,50,.18);transition:transform .15s ease,box-shadow .15s ease;display:flex;flex-direction:column}
.book:hover{transform:translateY(-3px);box-shadow:0 18px 36px -14px rgba(27,36,50,.26)}
.book img{width:100%;aspect-ratio:718/982;object-fit:cover;border-bottom:1px solid #EEE8DE}
.book .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.book h3{font:600 18px/1.3 var(--serif);margin-bottom:14px}
.book .row{display:flex;gap:10px;margin-top:auto}
.btn-sm{font-size:13.5px;padding:10px 16px;border-radius:5px}
.btn-ghost-light{background:transparent;border:1.5px solid var(--steel);color:var(--night)}
.btn-ghost-light:hover{border-color:var(--night);background:rgba(70,96,122,.08)}

/* ---- Testimonial ---- */
.mist{background:var(--mist)}
.quote-band{max-width:860px;margin:0 auto;text-align:center}
.qmark{font:700 64px/0.5 var(--serif);color:var(--dawn);display:block;margin-bottom:26px}
blockquote{font:italic 500 22px/1.6 var(--serif)}
cite{display:block;font:500 12.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--steel);margin-top:22px}

/* ---- Podcasts ---- */
.pods{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pod{display:flex;gap:18px;background:var(--card);border:1px solid #EEE8DE;border-radius:10px;padding:20px;box-shadow:0 12px 28px -16px rgba(27,36,50,.16)}
.pod img{flex:none;width:92px;height:92px;border-radius:8px;object-fit:cover}
.pod h3{font:600 19px/1.3 var(--serif);margin-bottom:4px}
.pod p{font-size:13.5px;color:#5B6470;margin-bottom:8px}
.link{font:500 14px var(--sans);color:var(--dawn-deep);text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--night)}

/* ---- Speaking ---- */
.night-band{background:var(--night);color:var(--paper);text-align:center}
.night-band .s-eyebrow{justify-content:center;color:var(--glow)}
.speaker-photo{display:block;width:132px;height:132px;border-radius:50%;object-fit:cover;object-position:50% 32%;border:3px solid var(--dawn);margin:0 auto 22px}
.night-band h2{white-space:normal;margin-bottom:10px}
.night-band p{color:#C9D2DE;max-width:46ch;margin:0 auto 26px}

/* ---- Sponsors ---- */
.sponsors{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sponsor{border:1px dashed var(--line);border-radius:10px;padding:20px;display:flex;gap:18px;align-items:flex-start}
/* one tidy box for both marks: the wide Sheppard logo and the tall
   Gabe Lopez portrait are letterboxed, never cropped or stretched */
.sponsor img{flex:none;width:104px;height:104px;object-fit:contain;border-radius:6px;background:var(--card);border:1px solid #EEE8DE;padding:8px}
.sponsor h3{font:600 17px var(--serif);margin:10px 0 4px}
.sponsor p{font-size:13.5px;color:#5B6470;margin-bottom:8px}

/* ---- Contact ---- */
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start}
.contact-grid h2{white-space:normal}
.contact-intro>p{font-size:16px;max-width:44ch;margin:12px 0 18px}
form{background:var(--card);border:1px solid #E3DCD1;border-radius:10px;padding:28px;box-shadow:0 16px 34px -18px rgba(27,36,50,.2)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font:600 13px var(--sans);margin-bottom:6px}
input,textarea{width:100%;font:400 15px var(--sans);color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:6px;padding:12px 14px;margin-bottom:16px}
input::placeholder,textarea::placeholder{color:#8A94A1}
input:focus,textarea:focus{outline:none;border-color:var(--dawn-deep);box-shadow:0 0 0 3px rgba(232,134,46,.25)}
textarea{min-height:110px;resize:vertical}
form button{font:600 15px var(--sans);color:var(--night);background:var(--dawn);border:0;border-radius:6px;padding:14px 26px;cursor:pointer}
form button:hover{background:#D9761C}
form button[disabled]{opacity:.6;cursor:default}
.form-note{font-size:12px;color:var(--steel);margin-top:12px}
/* submit feedback — empty until the form is used, so it takes no space */
.form-status{font:600 14px/1.5 var(--sans);color:var(--steel);margin-top:14px}
.form-status:empty{display:none}
.form-status.ok{color:#1C6B41}
.form-status.err{color:#A32B1E}
/* honeypot — hidden from humans, visible to naive bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Thank-you page (thank-you.html) ---- */
.thanks{max-width:62ch}
.thanks h2{white-space:normal}
.thanks p{margin-top:18px}

/* ---- Footer ---- */
footer{background:var(--night);color:var(--dim);padding:56px 24px 40px}
.foot{max-width:var(--wrap);margin:0 auto;display:flex;flex-direction:column;gap:26px}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
nav.footer-nav{display:flex;gap:24px;flex-wrap:wrap}
nav.footer-nav a{font:500 13.5px/1 var(--sans);color:var(--dim);text-decoration:none}
nav.footer-nav a:hover{color:var(--paper)}
.foot-meta{border-top:1px solid rgba(147,161,178,.25);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px}
.foot-meta .mono{font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* ---- Tablet ≤1023px ---- */
@media (max-width:1023px){
  section{padding:64px 24px}
  .hero .wrap{gap:48px}
  .hero h1{font-size:44px}
  .books-grid{grid-template-columns:repeat(2,1fr)}
}
/* ---- ≤900px: stack the two-column grids ---- */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;padding-top:56px;padding-bottom:170px}
  .feature{justify-self:start}
  .bio{grid-template-columns:1fr}
  .photo-col{position:static}
  .photo-strip{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}
/* ---- ≤720px ---- */
@media (max-width:720px){
  nav.primary{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;gap:0;background:#141C28;border-top:1px solid rgba(250,247,242,.1);padding:8px 24px 16px}
  nav.primary.open{display:flex}
  nav.primary a{padding:14px 0;font-size:16px;border-bottom:1px solid rgba(250,247,242,.07)}
  .burger{display:flex}
  .pods,.sponsors{grid-template-columns:1fr}
  .shead{flex-wrap:wrap;gap:12px}
  .rule{flex-basis:100%;top:0}
  .shead .chip{align-self:flex-start}
}
/* ---- Mobile ≤640px ---- */
@media (max-width:640px){
  section{padding:48px 20px}
  .chip{white-space:normal;line-height:1.5}
  .wordmark{font-size:17px;line-height:1.25;max-width:250px}
  .hero .wrap{padding:40px 20px 150px;gap:40px}
  .hero h1{font-size:40px}
  .tag{font-size:14.5px}
  .lede{font-size:15.5px}
  .cta{flex-direction:column;align-items:stretch}
  .btn{min-height:48px}
  .horizon{bottom:44px}
  .ground{height:44px}
  .waypoint{display:none}
  h2{font-size:27px;white-space:normal}
  .books-grid{grid-template-columns:1fr}
  .book .row .btn{flex:1;padding:12px 10px;font-size:14px}
  blockquote{font-size:19px}
  .frow{grid-template-columns:1fr}
}
@media (min-width:480px) and (max-width:640px){
  .books-grid{grid-template-columns:repeat(2,1fr)}
}