/* travisleehoward.com
   Carolina Blue holds it together. Navy carries the weight.
   One loud idea per page: the wall of screens. Everything else stays quiet. */

:root{
  --navy:#13294B;
  --navy-2:#0E2140;
  --blue:#7BAFD4;          /* Carolina Blue */
  --blue-ink:#2F6A96;      /* Carolina Blue, darkened for links on light */
  --paper:#F5F7FA;
  --white:#FFFFFF;
  --ink:#16222F;
  --muted:#566779;
  --line:#D5DDE6;
  --tally:#E4473C;         /* the red "on air" light, used only on media */

  /* chapter hues, Story page only */
  --roots:#9B4A33; --casper:#7E8F55; --deck:#2E7D7B; --boston:#A2432F;
  --boulder:#B5553C; --charleston:#B98428; --rhode:#1F3A5F;

  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1180px;
  --gut:clamp(1rem,4vw,2.5rem);
  --measure:36rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(1rem,.96rem + .2vw,1.0625rem)/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0 0 .55em;color:var(--navy)}
h1{font-size:clamp(2.3rem,1.5rem + 3.4vw,4.1rem)}
h2{font-size:clamp(1.65rem,1.2rem + 1.8vw,2.55rem)}
h3{font-size:clamp(1.15rem,1.02rem + .55vw,1.4rem)}
p{margin:0 0 1em;max-width:var(--measure)}
.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
section{padding:clamp(3.25rem,7vw,6rem) 0}
.lede{font-size:clamp(1.08rem,1rem + .45vw,1.28rem);color:var(--muted);max-width:40rem}
.small{font-size:.9rem;color:var(--muted)}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.5rem .8rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9em 1.45em;border-radius:3px;font:600 .98rem/1 var(--sans);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--blue);color:var(--navy)}
.btn-primary:hover{background:#9CC4E2;color:var(--navy)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-2);color:#fff}
.btn-line{border-color:currentColor;color:var(--navy);background:transparent}
.on-dark .btn-line{color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.textlink{font-weight:600;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--blue);padding-bottom:1px}
.on-dark .textlink{color:#fff}

/* header */
header.site{position:sticky;top:0;z-index:30;background:rgba(19,41,75,.96);backdrop-filter:blur(8px);color:#fff}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:62px}
.brand{font:600 1.06rem/1 var(--serif);color:#fff;text-decoration:none;letter-spacing:.005em;white-space:nowrap}
.brand span{color:var(--blue)}
nav.main{display:flex;align-items:center;gap:1.4rem}
nav.main a{color:#D9E4EF;text-decoration:none;font-size:.95rem}
nav.main a:hover,nav.main a[aria-current]{color:#fff}
nav.main a[aria-current]{box-shadow:inset 0 -2px 0 var(--blue)}
nav.main .btn{padding:.6em 1em;font-size:.9rem}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:3px;padding:.45rem .7rem;font:600 .9rem var(--sans)}
@media(max-width:860px){
  .menu-btn{display:block}
  nav.main{display:none;position:absolute;left:0;right:0;top:62px;background:var(--navy);flex-direction:column;align-items:flex-start;padding:1rem var(--gut) 1.4rem;gap:1rem;border-top:1px solid rgba(255,255,255,.12)}
  nav.main.open{display:flex}
}

/* dark sections */
.on-dark{background:var(--navy);color:#DCE6F0}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}
.on-dark .lede,.on-dark .small{color:#AFC3D7}
.on-dark a:not(.btn){color:#fff}

/* HERO: type on navy, the photo stands beside it */
.hero{padding:0;background:var(--navy);color:#DCE6F0;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.08fr .92fr;min-height:min(86vh,780px)}
.hero .copy{padding:clamp(3rem,7vw,6rem) clamp(1rem,4vw,4rem) clamp(3rem,6vw,5rem) max(var(--gut),calc((100vw - var(--wrap))/2));display:flex;flex-direction:column;justify-content:center}
.hero .who{font:500 1rem/1.45 var(--sans);color:var(--blue);margin:0 0 1.4rem;letter-spacing:.01em}
.hero .who span{display:block}
.hero .who .booklink{font:italic 600 1.12rem/1.3 var(--serif);color:#fff;text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:4px}
.hero .who .booklink:hover{text-decoration-color:#fff}
.hero h1{color:#fff;font-weight:500;max-width:15ch;margin-bottom:.6em}
.hero .confess{font-size:clamp(1.05rem,1rem + .35vw,1.22rem);color:#C9D7E5;max-width:34rem}
.hero figure{margin:0;position:relative;background:#0b1830}
.hero figure img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hero figcaption{position:absolute;left:1rem;bottom:1rem;background:rgba(14,33,64,.82);color:#E6EEF6;font-size:.8rem;padding:.35rem .6rem;border-radius:2px}
@media(max-width:860px){
  .hero .grid{grid-template-columns:1fr;min-height:0}
  .hero figure{order:-1;height:62vh;max-height:520px}
  .hero .copy{padding:2.25rem var(--gut) 3rem}
}

/* rooms strip */
.rooms{background:var(--navy-2);color:#AFC3D7;padding:1.4rem 0;border-top:1px solid rgba(255,255,255,.08)}
.rooms .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.8rem}
.rooms .lab{color:#fff;font:600 .95rem var(--serif);margin-right:.4rem}
.rooms .wrap{align-items:center}
.rooms .logos{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.55rem}
.rooms .lab{flex-basis:100%}
.rooms .logos img{width:auto;opacity:.92}
.rooms .names{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
.rooms .names span{font-size:.9rem;white-space:nowrap}
@media(max-width:620px){.rooms .logos{gap:1rem 1.6rem}.rooms .logos{zoom:.85}}

/* facts */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{padding:1.6rem 1.2rem 1.5rem;border-left:1px solid var(--line)}
.fact:first-child{border-left:0;padding-left:0}
.fact b{display:block;font:600 clamp(1.6rem,1.2rem + 1.4vw,2.3rem)/1 var(--serif);color:var(--navy);margin-bottom:.45rem}
.fact span{font-size:.9rem;color:var(--muted);line-height:1.45;display:block}
@media(max-width:760px){.facts{grid-template-columns:1fr 1fr}.fact:nth-child(3){border-left:0;padding-left:0}.fact:nth-child(n+3){border-top:1px solid var(--line)}}

/* THE WALL OF SCREENS: the one loud idea */
.screens-head{display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:center;margin-bottom:2.2rem}
.screens-head h2{font-size:clamp(1.9rem,1.2rem + 2.2vw,2.75rem);line-height:1.12;margin:0}
.screens-head .lede{font-size:clamp(1.02rem,.98rem + .25vw,1.15rem);line-height:1.6;color:var(--muted);margin:0;max-width:34rem}
@media(max-width:860px){.screens-head{grid-template-columns:1fr;gap:1rem}}
.wall{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(88px,9vw,118px);gap:12px}
.tile{position:relative;margin:0;background:#0b1830;border-radius:6px;overflow:hidden;color:#fff;text-decoration:none;box-shadow:0 0 0 1px rgba(19,41,75,.08)}
.tile img{width:100%;height:100%;object-fit:cover;color:transparent}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:2.2rem .9rem .75rem;background:linear-gradient(transparent,rgba(9,20,40,.86));font-size:.84rem;line-height:1.35}
.tile .cap b{display:block;font:600 .98rem/1.25 var(--serif);color:#fff}
.tile .tally{position:absolute;top:.7rem;left:.75rem;display:inline-flex;align-items:center;gap:.4rem;font:600 .72rem/1 var(--sans);letter-spacing:.02em;background:rgba(9,20,40,.72);padding:.35rem .5rem;border-radius:2px}
.tile .tally::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tally)}
.tile.pending{background:repeating-linear-gradient(135deg,#17305a 0 14px,#142b52 14px 28px);display:flex;align-items:center;justify-content:center;text-align:center}
.tile.pending .note{padding:1rem;max-width:22ch;font-size:.88rem;color:#BFD0E2}
.tile.pending .note b{display:block;font:600 1rem/1.25 var(--serif);color:#fff;margin-bottom:.3rem}
.t-a{grid-column:span 7;grid-row:span 4}
.t-b{grid-column:span 5;grid-row:span 2}
.t-c{grid-column:span 5;grid-row:span 2}
.t-d{grid-column:span 3;grid-row:span 4}
.t-e{grid-column:span 4;grid-row:span 2}
.t-f{grid-column:span 5;grid-row:span 2}
.t-g{grid-column:span 4;grid-row:span 2}
.t-h{grid-column:span 5;grid-row:span 2}
@media(max-width:860px){
  .wall{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .t-a{grid-column:span 2;grid-row:span 2}
  .t-b,.t-c,.t-e,.t-f,.t-g,.t-h{grid-column:span 1;grid-row:span 1}
  .t-d{grid-column:span 1;grid-row:span 2}
  .tile .cap{font-size:.78rem;padding:1.8rem .7rem .6rem}
  .tile .cap b{font-size:.9rem}
}

/* video frame (reel and click-to-play embeds) */
.screen{position:relative;aspect-ratio:16/9;background:#0b1830;border-radius:6px;overflow:hidden;color:#fff}
.screen img{width:100%;height:100%;object-fit:cover;opacity:.88}
.screen button.play{all:unset;position:absolute;inset:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.screen button.play span{display:inline-flex;align-items:center;gap:.6rem;background:rgba(9,20,40,.82);padding:.8rem 1.1rem;border-radius:3px;font:600 .95rem var(--sans)}
.screen button.play span::before{content:"";border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.screen button.play:focus-visible span{outline:3px solid var(--blue)}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.screen.pending{background:repeating-linear-gradient(135deg,#17305a 0 14px,#142b52 14px 28px);display:flex;align-items:center;justify-content:center;text-align:center}
.screen.pending .note{max-width:30ch;color:#BFD0E2;font-size:.95rem;padding:1rem}
.screen.pending .note b{display:block;font:600 1.25rem/1.25 var(--serif);color:#fff;margin-bottom:.4rem}

/* two-column utility */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.split.top{align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* the letter: four signatures */
.letter{background:#fff;border:1px solid var(--line);border-radius:6px;padding:clamp(1.5rem,4vw,2.75rem);position:relative}
.letter blockquote{margin:0 0 1.6rem;font:500 clamp(1.25rem,1rem + 1vw,1.7rem)/1.4 var(--serif);color:var(--navy)}
.signers{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;border-top:1px solid var(--line);padding-top:1.2rem}
.signers div{font-size:.88rem;color:var(--muted);line-height:1.35}
.signers b{display:block;color:var(--navy);font-weight:600}
@media(max-width:700px){.signers{grid-template-columns:1fr 1fr}}
.letter .from{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem;font-size:.9rem;color:var(--muted)}

/* quotes */
.quote{margin:0;background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:4px;padding:1.4rem 1.5rem}
.quote p{font:500 1.12rem/1.5 var(--serif);color:var(--navy);margin:0 0 .8rem;max-width:none}
.quote cite{font-style:normal;font-size:.88rem;color:var(--muted)}
.quote cite b{color:var(--ink);font-weight:600}
.on-dark .quote{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);border-left-color:var(--blue)}
.on-dark .quote p{color:#fff}
.on-dark .quote cite,.on-dark .quote cite b{color:#AFC3D7}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:860px){.quotes{grid-template-columns:1fr}}

/* talks */
.talks{border-top:1px solid var(--line);margin-top:1.5rem}
.talk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:1rem 3rem;padding:1.7rem 0;border-bottom:1px solid var(--line)}
.talk h3{margin:0}
.talk h3 small{display:block;font:400 .95rem/1.4 var(--sans);color:var(--muted);margin-top:.45rem;letter-spacing:0}
.talk p{margin:0 0 .6rem}
.talk .meta{font-size:.88rem;color:var(--muted)}
@media(max-width:760px){.talk{grid-template-columns:1fr}}

/* proof cards */
.proofs{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:2rem 0 1.4rem}
.pf{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:1.6rem}
.pf .yr{font-size:.85rem;color:var(--blue);margin-bottom:.8rem}
.pf .hd{font:500 1.15rem/1.4 var(--serif);color:#fff;margin-bottom:.9rem}
.pf .stat{font:500 1.15rem/1.35 var(--serif);color:var(--blue);margin-bottom:.9rem}
.pf .stat b{color:#fff;font-weight:600}
.pf p{color:#C9D7E5;font-size:.97rem}
.pf .chg{border-top:1px solid rgba(255,255,255,.14);padding-top:.8rem;margin:1rem 0 0;color:#fff;font-size:.95rem}
.kicker{font:500 clamp(1.3rem,1.05rem + 1vw,1.8rem)/1.3 var(--serif);color:#fff;margin:0}
@media(max-width:760px){.proofs{grid-template-columns:1fr}}

/* both/and */
.both figure{margin:0}
.both figcaption{font-size:.85rem;color:var(--muted);margin-top:.6rem}

/* episode cards */
.eps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:960px){.eps{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.eps{grid-template-columns:1fr}}
.ep{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.ep .thumb{aspect-ratio:16/9;background:#0b1830;position:relative;overflow:hidden}
.ep .thumb img{width:100%;height:100%;object-fit:cover;color:transparent}
.ep .thumb.art{display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;font:600 1.1rem/1.25 var(--serif);text-align:center;padding:1rem}
.ep .body{padding:1.1rem 1.2rem 1.25rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.ep .show{font-size:.85rem;color:var(--muted)}
.ep h3{font-size:1.08rem;margin:0;line-height:1.3}
.ep p{font-size:.95rem;margin:0;flex:1}
.ep .links{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.5rem;font-size:.92rem;font-weight:600}
.ep .links a{color:var(--navy);text-decoration:none;border-bottom:2px solid var(--blue)}
.shorts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:760px}
.shorts .tile{aspect-ratio:9/16}
@media(max-width:760px){.shorts{grid-template-columns:repeat(2,1fr)}}

/* story */
.chapter{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1rem 3rem;padding:2.6rem 0;border-top:1px solid var(--line)}
.chapter .mark{border-top:5px solid var(--hue,var(--blue));padding-top:.9rem}
.chapter .mark h2{font-size:1.5rem;margin:0 0 .3rem}
.chapter .mark span{font-size:.88rem;color:var(--muted)}
.chapter .body p{max-width:40rem}
.chapter figure{margin:1.4rem 0 0;max-width:40rem}
.chapter figcaption{font-size:.85rem;color:var(--muted);margin-top:.5rem}
@media(max-width:760px){.chapter{grid-template-columns:1fr}}
.companies{list-style:none;padding:0;margin:1.2rem 0 0;max-width:46rem}
.companies li{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.97rem}
.companies li span{color:var(--muted);font-variant-numeric:tabular-nums}
.companies li b{color:var(--navy)}

/* forms */
form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:640px){form .row{grid-template-columns:1fr}}
label{display:block;font-size:.9rem;font-weight:600;color:var(--navy);margin-bottom:1rem}
label .opt{font-weight:400;color:var(--muted)}
input,select,textarea{display:block;width:100%;margin-top:.4rem;padding:.8em .9em;font:inherit;font-weight:400;color:var(--ink);background:#fff;border:1px solid #BCC8D5;border-radius:3px}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(123,175,212,.55);border-color:var(--blue-ink)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:clamp(1.25rem,4vw,2.25rem)}
.form-done{display:none}
.form-done.show{display:block}
.inline-form{display:flex;flex-wrap:wrap;gap:.6rem;max-width:32rem;margin-top:1.2rem}
.inline-form input{flex:1 1 15rem;margin:0}
.inline-form .btn{flex:0 0 auto}
.on-dark .inline-form input{background:#0E2140;border-color:#3A5A84;color:#fff}
.on-dark .inline-form input::placeholder{color:#8FA6BE}

/* close */
.close-cta h2{max-width:20ch}
.close-cta blockquote{margin:0 0 1.2rem;font:500 clamp(1.6rem,1.2rem + 1.8vw,2.6rem)/1.2 var(--serif);color:#fff;max-width:22ch}
.close-cta cite{font-style:normal;color:#AFC3D7;font-size:.95rem}

/* footer */
footer.site{background:var(--navy-2);color:#AFC3D7;font-size:.92rem;padding:2.8rem 0}
footer.site .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem}
footer.site h4{font:600 1rem var(--serif);color:#fff;margin:0 0 .7rem}
footer.site a{color:#fff;text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site ul{list-style:none;margin:0;padding:0;line-height:2}
footer.site .fine{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:1.2rem;font-size:.82rem;color:#8196AD}
@media(max-width:760px){footer.site .wrap{grid-template-columns:1fr}}

/* page heads on inner pages */
.pagehead{padding:clamp(3rem,7vw,5rem) 0 clamp(2rem,4vw,3rem)}
.pagehead h1{max-width:18ch}

details.full{margin-top:1rem}
details.full summary{cursor:pointer;font-weight:600;color:var(--navy)}
details.full .letterbody{margin-top:1rem}
details.full .letterbody p{max-width:42rem}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}