/* S341 · short, sharp, one idea per screen. Loaded last on every page.
   The home page is a media hub: the creed and his face up top, then listen and read, the stage, his why, the press, aloha.
   One ground, one rhythm: every section sits on white with the same vertical step, so the page reads as one piece
   from the sunrise in the hero to the sunset over the sea above the footer. */

:root{--s4-pad:clamp(56px,6.4vw,88px);--s4-ease:cubic-bezier(.22,1,.36,1)}

/* ---------- the hero: his face on the byline, four ways in ---------- */
.hero.hb .s4-hk{display:flex;align-items:center;gap:12px}
.s4-hkt>span+span::before{content:" · "}
.s4-hface{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.s4-paths{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;position:relative;z-index:6}
.s4-paths a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.34);background:rgba(10,22,51,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff!important;font:500 15px/1 var(--bc-sans);text-decoration:none!important;transition:background .2s,border-color .2s,transform .2s var(--s4-ease)}
.s4-paths a:first-child{background:#fff;border-color:#fff;color:var(--bc-ink)!important}
.s4-paths a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--s4-ease)}
.s4-paths a:hover{background:rgba(255,255,255,.16);border-color:#fff}
.s4-paths a:first-child:hover{background:#E8EFFE}
.s4-paths a:hover svg{transform:translateX(3px)}
.s4-paths a:focus-visible{outline:2.5px solid #fff;outline-offset:3px}
@media (max-width:600px){
  .s4-paths{gap:8px;margin-top:24px}
  .s4-paths a{padding:0 13px;font-size:14px;gap:6px}
  .s4-paths a svg{display:none}
  .hero.hb .s4-hk{gap:10px;letter-spacing:.18em}
  .s4-hface{width:32px;height:32px}
  .s4-hkt{display:flex;flex-direction:column;gap:4px}
  .s4-hkt>span+span::before{content:none}
}

/* ---------- the sections: one ground, one step ---------- */
.s4{background:#fff;font-family:var(--bc-sans);color:var(--bc-body)}
.s4 .s4-sec{position:relative;padding:var(--s4-pad) 0 0;margin:0;background:none}
.s4-anchor{position:absolute;top:0}
.s4-in{max-width:var(--bc-max);margin:0 auto;padding:0 var(--bc-gut);box-sizing:border-box}
.s4-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-bottom:28px}
.s4 .s4-k{margin:0 0 10px;font:500 12px/1.2 var(--bc-mono)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--bc-blue)}
.s4 .s4-h{margin:0;font:700 clamp(32px,3.6vw,46px)/1.05 'Source Serif Display','Source Serif 4',Georgia,serif!important;letter-spacing:-.015em;color:var(--bc-ink)!important;text-wrap:balance}
.s4 .s4-h em{font-style:italic;color:var(--bc-blue)!important}
.s4-lede{margin:12px 0 0;font:400 17px/1.55 var(--bc-sans);color:var(--bc-char);max-width:520px}
.s4-links{display:flex;gap:6px 24px;flex-wrap:wrap}
.s4-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 15px/1 var(--bc-sans);color:var(--bc-blue-ink)!important;text-decoration:none!important;border-bottom:0}
.s4-more svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--s4-ease)}
.s4-more:hover{color:var(--bc-ink)!important}
.s4-more:hover svg{transform:translateX(3px)}
.s4 a:focus-visible{outline:2.5px solid var(--bc-blue);outline-offset:3px;border-radius:8px}

/* buttons */
.s4-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.s4 .s4-play,.s4-solid,.s4-ghost{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:999px;font:500 15px/1 var(--bc-sans);text-decoration:none!important;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s var(--s4-ease),box-shadow .2s}
.s4 .s4-play,.s4-solid{background:var(--bc-blue);color:#fff!important;padding-left:8px;box-shadow:none}
.s4-solid{padding-left:22px;padding-right:22px}
.s4 .s4-play:hover,.s4-solid:hover{background:var(--bc-blue-ink);transform:translateY(-1px);box-shadow:0 12px 28px -14px rgba(21,89,245,.7)}
.s4-ghost{border:1px solid var(--bc-line2);color:var(--bc-ink)!important;background:#fff}
.s4-ghost:hover{border-color:var(--bc-ink)}
.s4 .s4-play small,.s4-ghost small{font:500 12px/1 var(--bc-mono);letter-spacing:.04em;margin-left:2px;color:inherit}
.s4-ph{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--bc-blue);flex:none}
.s4-ph svg{width:12px;height:12px;fill:currentColor;margin-left:2px}
.s4-ghost .s4-ph{width:28px;height:28px;margin-left:-10px;background:var(--bc-tint)}

/* ---------- listen and read ---------- */
.s4-lab-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:28px;align-items:start}
#listen .hx-feat{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start;margin:0;padding:24px;border-radius:var(--bc-r);background:var(--bc-navy);border:0;box-shadow:none}
#listen .hx-fart{border-radius:14px;box-shadow:none;aspect-ratio:1}
#listen .s4-ftx{min-width:0}
.s4-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 10px}
.s4-new{display:flex;align-items:center;gap:8px;margin:0;font:500 12px/1.2 var(--bc-mono);letter-spacing:.12em;text-transform:uppercase;color:#FFD9A0}
.s4-dot{width:7px;height:7px;border-radius:50%;background:#FFD9A0;box-shadow:0 0 0 4px rgba(255,217,160,.18)}
#listen .hx-fno{margin:0;font:500 12px/1.2 var(--bc-mono);letter-spacing:.12em;color:#AFC4F7}
#listen .hx-ft:not(#s341a#s341b){margin:0 0 10px;font:700 clamp(26px,2.4vw,32px)/1.08 'Source Serif Display','Source Serif 4',Georgia,serif!important;color:#fff;letter-spacing:-.01em}
#listen .hx-fd{margin:0 0 18px;font:400 16px/1.55 'Source Serif 4',Georgia,serif;color:#D5DDEC;max-width:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#listen .hx-acts{gap:10px}
#listen .s4-ghost{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.34)}
#listen .s4-ghost:hover{border-color:#fff}
#listen .hx-feat a:focus-visible{outline-color:#fff}
.s4-voice{margin:14px 0 0;font:400 13px/1.4 var(--bc-sans);color:#AEB9D0}

.s4-shelf{display:flex;flex-direction:column;min-width:0}
.s4-shk{margin:2px 0 6px;font:500 12px/1.2 var(--bc-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bc-mute)}
#listen .hx-eps{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
#listen .hx-ep{border-top:1px solid var(--bc-line);display:block!important}
#listen .hx-ep:last-child{border-bottom:1px solid var(--bc-line)}
#listen .hx-ep a{display:flex;flex-direction:row;align-items:center;gap:14px;padding:12px 4px;color:inherit;text-decoration:none!important;border-radius:12px}
#listen .hx-art{width:60px;height:60px;flex:none;margin:0;border-radius:10px;box-shadow:none;aspect-ratio:1}
#listen .hx-ep a:hover .hx-art{transform:none;box-shadow:none}
#listen .hx-art .hx-drawn{font-size:10px}
.s4-ept{display:flex;flex-direction:column;gap:4px;min-width:0}
#listen .hx-epk{font:500 11px/1.2 var(--bc-mono);letter-spacing:.1em;color:var(--bc-blue-ink)}
#listen .hx-ept{font:700 17px/1.25 'Source Serif Sub','Source Serif 4',Georgia,serif;color:var(--bc-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#listen .hx-epm{font:400 13px/1.2 var(--bc-sans);letter-spacing:0;color:var(--bc-mute)}
#listen .hx-ep a:hover .hx-ept{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
#listen .hx-ep-new .hx-epk::after{color:#B45309}
.s4-follow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:auto;padding-top:16px;font:400 14px/1.2 var(--bc-sans);color:var(--bc-mute)}
.s4-follow>span{margin-right:2px}
.s4-fbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid var(--bc-line2);color:var(--bc-ink)!important;font:500 14px/1 var(--bc-sans);text-decoration:none!important;transition:border-color .2s}
.s4-fbtn:hover{border-color:var(--bc-ink)}
.s4-fbtn svg{width:18px;height:18px;flex:none}

/* ---------- on stage: one justified row, every photo whole ---------- */
.s4-row{display:flex;gap:16px;margin:0;padding:0;list-style:none}
.s4-row>li{flex:var(--ar) 1 0;min-width:0}
.s4-row figure{margin:0}
.s4-row img{display:block;width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;border-radius:var(--bc-r-sm);background:var(--bc-paper2)}
.s4-row figcaption{display:flex;flex-direction:column;gap:3px;padding:12px 2px 0;font:400 14px/1.4 var(--bc-sans);color:var(--bc-mute)}
.s4-row figcaption b{font:700 17px/1.2 'Source Serif Sub','Source Serif 4',Georgia,serif;color:var(--bc-ink)}

/* ---------- my why: one line, his face ---------- */
.s4-why-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center}
.s4-face{display:block;width:132px;height:132px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 6px #fff,0 0 0 7px var(--bc-line)}
.s4-face img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.75) translate(-2%,9%)}
.s4-br{display:none}
.s4 .s4-why-h{margin:0 0 10px;font:700 clamp(28px,3.4vw,44px)/1.08 'Source Serif Display','Source Serif 4',Georgia,serif!important;letter-spacing:-.015em;color:var(--bc-ink)!important;text-wrap:balance}
.s4-why-p{margin:0 0 20px;font:400 italic 18px/1.5 'Source Serif 4',Georgia,serif;color:var(--bc-char);max-width:620px}

/* ---------- featured in: one row ---------- */
.s4-press-in{display:flex;align-items:center;gap:20px 40px;flex-wrap:wrap;padding-top:28px;padding-bottom:28px;border-top:1px solid var(--bc-line);border-bottom:1px solid var(--bc-line)}
.s4-press-in{width:calc(100% - 2 * var(--bc-gut));max-width:calc(var(--bc-max) - 2 * var(--bc-gut));padding-left:0;padding-right:0}
.s4-press .s4-k{margin:0;flex:none}
.s4-logos{display:flex;align-items:center;justify-content:space-between;gap:20px 36px;flex:1 1 560px;flex-wrap:wrap}
.s4-logos a{display:inline-flex;align-items:center;min-height:44px;opacity:.72;filter:grayscale(1);transition:opacity .2s,filter .2s}
.s4-logos a:hover{opacity:1;filter:none}
.s4-logos img{display:block;height:26px;width:auto}
.s4-logos a:nth-child(4) img,.s4-logos a:nth-child(5) img{height:20px}

/* ---------- say aloha: same ground, then the sea and the footer ---------- */
.s4+section.close#contact,body:has(.s4) section.close#contact{background:#fff!important;padding-top:var(--s4-pad)!important;padding-bottom:max(calc(var(--s4-pad) + 64px),190px)!important}
body:has(.s4) .close h2.alohah{margin:0 0 14px!important}
body:has(.s4) .close .crow2{gap:10px;margin-top:24px}

/* ---------- phone ---------- */
@media (max-width:900px){
  .s4-lab-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  #listen .hx-feat{grid-template-columns:120px minmax(0,1fr);gap:20px}
}
@media (max-width:600px){
  .s4-head{margin-bottom:20px;gap:6px}
  .s4-lede{font-size:16px;margin-top:8px}
  .s4-links{gap:0 20px}
  #listen .hx-feat{grid-template-columns:76px minmax(0,1fr);gap:0 14px;padding:16px;border-radius:18px}
  #listen .hx-fart{grid-column:1;grid-row:1/3;border-radius:10px;align-self:start}
  #listen .s4-ftx{display:contents}
  #listen .s4-ftx>*{grid-column:1/-1}
  #listen .s4-meta{grid-column:2;grid-row:1/3;align-self:center;flex-direction:column;align-items:flex-start;gap:6px;margin:0}
  #listen .hx-ft:not(#s341a#s341b){margin:16px 0 8px;font-size:24px}
  #listen .hx-fd{margin:0 0 16px;font-size:15.5px}
  #listen .hx-acts{display:grid;grid-template-columns:1fr 1fr}
  #listen .hx-acts a{justify-content:center}
  #listen .s4-play{justify-content:flex-start!important}
  .s4-voice{margin:12px 0 0}
  #listen .hx-ept{font-size:16px}
  .s4-follow{padding-top:14px}
  .s4-follow>span{width:100%}
  .s4-row{overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(-1 * var(--bc-gut));padding:0 var(--bc-gut) 4px;scrollbar-width:none;overscroll-behavior-x:contain}
  .s4-row::-webkit-scrollbar{display:none}
  .s4-row>li{flex:none;width:auto;scroll-snap-align:start}
  .s4-row img{height:220px;width:auto}
  .s4-row figure{width:min-content}
  .s4-row figcaption{min-width:200px}
  .s4-why-in{grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:start}
  .s4-face{width:72px;height:72px;box-shadow:0 0 0 4px #fff,0 0 0 5px var(--bc-line)}
  .s4-br{display:inline}
  .s4-why-p{font-size:17px;margin-bottom:16px}
  .s4-why-in .s4-acts{margin-left:-90px}
  .s4-press-in{gap:14px;padding-top:22px;padding-bottom:22px}
  .s4-logos{gap:14px 24px;justify-content:flex-start;flex-basis:100%}
  .s4-logos img{height:22px}
  .s4-logos a:nth-child(4) img,.s4-logos a:nth-child(5) img{height:17px}
}
@media (prefers-reduced-motion:reduce){.s4 *,.s4-paths a,.s4-paths a svg{transition:none!important;transform:none!important}}
@media print{.s4-paths,.s4-follow{display:none!important}}

/* ---------- the footer, tighter on a phone ---------- */
@media (max-width:520px){
  .bf-in{padding-top:44px}
  .bf-top{gap:22px;padding-bottom:30px}
  .bf-brand{gap:12px}
  .bf-grid{padding:30px 0;gap:26px 16px}
  .bf-col>a,.bf-col address a{padding:4px 0}
}
.s4-row:focus-visible{outline:2.5px solid var(--bc-blue);outline-offset:4px;border-radius:var(--bc-r-sm)}

/* =====================================================================
   The inner pages: one system. A header, then sections on a two-column grid
   (the label on the left, the content on the right), the same step between each.
   ===================================================================== */
.hx-sr,.s4-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.s4p{max-width:var(--bc-max);margin:0 auto;padding:0 var(--bc-gut) var(--s4-pad);box-sizing:border-box;font-family:var(--bc-sans);color:var(--bc-body)}
.s4p .s4-k{margin:0 0 12px;font:500 12px/1.2 var(--bc-mono)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--bc-blue)!important}
.s4p-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:48px;align-items:center;padding:clamp(48px,6vw,80px) 0 clamp(40px,5vw,64px)}
.s4p .s4p-h1{margin:0 0 16px!important;font:700 clamp(44px,6vw,76px)/1 'Source Serif Display','Source Serif 4',Georgia,serif!important;letter-spacing:-.02em!important;color:var(--bc-ink)!important;text-wrap:balance}
.s4p .s4p-h1 em{font-style:italic;color:var(--bc-blue)!important}
.s4p-lede{margin:0 0 26px;font:400 italic clamp(18px,1.6vw,21px)/1.5 'Source Serif 4',Georgia,serif;color:var(--bc-char);max-width:560px}
.s4p .s4-solid small{font:500 12px/1 var(--bc-mono)}
.s4p-port{margin:0}
.s4p-port img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--bc-r)}
.s4p-port figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:10px;font:400 13px/1.4 var(--bc-sans);color:var(--bc-mute)}
.s4p-port figcaption a,.s4p-dlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:500 14px/1 var(--bc-sans);color:var(--bc-blue-ink)!important;text-decoration:none!important;white-space:nowrap}
.s4p-port figcaption a svg,.s4p-dl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.s4p-port figcaption a:hover{color:var(--bc-ink)!important}

.s4p-sec{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:16px 48px;padding:40px 0;border-top:1px solid var(--bc-line);margin:0!important}
.s4p .s4p-h2{margin:0 0 8px!important;font:700 clamp(26px,2.4vw,32px)/1.1 'Source Serif Display','Source Serif 4',Georgia,serif!important;letter-spacing:-.01em!important;color:var(--bc-ink)!important;text-transform:none!important}
.s4p-sub{margin:0;font:400 15px/1.55 var(--bc-sans);color:var(--bc-mute);max-width:340px}
.s4p a:focus-visible,.s4p button:focus-visible,.s4p label:focus-visible{outline:2.5px solid var(--bc-blue);outline-offset:3px;border-radius:8px}

/* bios: one length at a time */
.s4p-seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--bc-paper2);border:1px solid var(--bc-line);margin-bottom:16px}
.s4p-seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.s4p-seg label{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;font:500 15px/1 var(--bc-sans);color:var(--bc-char);cursor:pointer;transition:background .15s,color .15s}
.s4p-seg label:hover{color:var(--bc-ink)}
.s4p-seg input:checked+label{background:#fff;color:var(--bc-ink);box-shadow:0 1px 2px rgba(10,22,51,.08),0 0 0 1px var(--bc-line)}
.s4p-seg input:focus-visible+label{outline:2.5px solid var(--bc-blue);outline-offset:2px}
.s4p .s4p-bio{display:none;margin:0;padding:0;border:0;background:none;box-shadow:none}
.s4p-bios:has(#bl-s:checked) .s4p-bio[data-l="s"],.s4p-bios:has(#bl-m:checked) .s4p-bio[data-l="m"],.s4p-bios:has(#bl-l:checked) .s4p-bio[data-l="l"]{display:block}
.s4p-bio p{margin:0;font:400 17px/1.65 'Source Serif 4',Georgia,serif;color:var(--bc-ink);max-width:720px}
.s4p-bfoot{display:flex;align-items:center;gap:16px;margin-top:14px;font:500 12px/1 var(--bc-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bc-mute)}
.s4p .pk-copy{margin:0;min-height:40px;padding:0 16px;border:1px solid var(--bc-line2);border-radius:999px;background:#fff;font:500 14px/1 var(--bc-sans);letter-spacing:0;text-transform:none;color:var(--bc-ink);cursor:pointer}
.s4p .pk-copy:hover{border-color:var(--bc-ink)}
.s4p .pk-copy.ok{background:var(--bc-ink);border-color:var(--bc-ink);color:#fff}

/* photos */
.s4p-photos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 14px}
.s4p-photos li{margin:0}
.s4p-photos a{position:relative;display:flex;flex-direction:column;gap:8px;text-decoration:none!important;color:inherit}
.s4p-photos img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:12px;background:var(--bc-paper2);transition:transform .3s var(--s4-ease)}
.s4p-cap{display:flex;flex-direction:column;gap:2px;font:400 13px/1.35 var(--bc-sans);color:var(--bc-mute)}
.s4p-cap b{font:600 14px/1.3 var(--bc-sans);color:var(--bc-ink)}
.s4p-dl{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--bc-ink);box-shadow:0 2px 8px rgba(10,22,51,.18);opacity:0;transition:opacity .2s}
.s4p-photos a:hover .s4p-dl,.s4p-photos a:focus-visible .s4p-dl{opacity:1}
.s4p-photos a:hover img{transform:translateY(-2px)}
@media (hover:none){.s4p-dl{opacity:1}}

/* lines */
.s4p-lines{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.s4p-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:start;padding:16px 0;border-bottom:1px solid var(--bc-line)}
.s4p-lines li:nth-child(-n+2){padding-top:0}
.s4p-lines blockquote{margin:0;font:400 italic 18px/1.45 'Source Serif 4',Georgia,serif;color:var(--bc-ink);border:0;padding:0}
.s4p-lines cite{grid-row:2;font:500 12px/1.2 var(--bc-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--bc-mute)}
.s4p-lines .pk-copy{grid-column:2;grid-row:1/3;align-self:center}

/* facts */
.s4p-facts{margin:0;display:flex;flex-direction:column}
.s4p-facts>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 24px;padding:12px 0;border-bottom:1px solid var(--bc-line)}
.s4p-facts>div:first-child{padding-top:0}
.s4p-facts dt{font:500 12px/1.6 var(--bc-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bc-mute)}
.s4p-facts dd{margin:0;display:flex;flex-direction:column;gap:4px;font:400 16px/1.5 var(--bc-sans);color:var(--bc-ink)}
.s4p-facts a{color:var(--bc-blue-ink)!important;font-weight:500;text-decoration:none!important}
.s4p-facts a:hover{text-decoration:underline!important;text-underline-offset:3px}
.s4p-topics{display:flex;flex-wrap:wrap;gap:4px 18px}

/* coverage */
.s4p-cov{list-style:none;margin:0;padding:0}
.s4p-cov li{margin:0;border-bottom:1px solid var(--bc-line)}
.s4p-cov li:first-child a{padding-top:0}
.s4p-cov a{display:grid;grid-template-columns:190px minmax(0,1fr) 80px;gap:4px 24px;align-items:baseline;padding:12px 0;text-decoration:none!important;color:var(--bc-ink)!important}
.s4p-cov b{font:500 12px/1.4 var(--bc-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bc-mute)}
.s4p-cov span{font:400 16px/1.45 var(--bc-sans)}
.s4p-cov small{font:400 14px/1.4 var(--bc-sans);color:var(--bc-mute);text-align:right}
.s4p-cov a:hover span{color:var(--bc-blue-ink);text-decoration:underline;text-underline-offset:3px}

.s4p-reach .s4p-sub{margin-bottom:16px;max-width:none}

@media (max-width:900px){
  .s4p-head{grid-template-columns:minmax(0,1fr) 220px;gap:28px}
  .s4p-sec{grid-template-columns:minmax(0,1fr);gap:16px}
  .s4p-photos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .s4p-lines{grid-template-columns:minmax(0,1fr)}
  .s4p-lines li:nth-child(2){padding-top:16px}
}
@media (max-width:600px){
  .s4p-head{grid-template-columns:minmax(0,1fr) 112px;gap:16px 18px;align-items:start;padding:36px 0 32px}
  .s4p-hl{display:contents}
  .s4p-head .s4-k,.s4p-head .s4p-h1{grid-column:1}
  .s4p-port{grid-column:2;grid-row:1/3;align-self:start}
  .s4p-port figcaption{display:none}
  .s4p-port img{border-radius:16px}
  .s4p-lede,.s4p-head .s4-acts{grid-column:1/-1;margin:0}
  .s4p-head .s4-acts a{flex:1 1 auto;justify-content:center}
  .s4p-sec{padding:32px 0}
  .s4p-photos{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
  .s4p-cap{font-size:12px}
  .s4p-cap b{font-size:13px}
  .s4p-lines blockquote{font-size:17px}
  .s4p-facts>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .s4p-cov a{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
  .s4p-cov b{grid-column:1}
  .s4p-cov small{grid-column:2;grid-row:1}
  .s4p-cov span{grid-column:1/-1}
  .s4p-seg{display:flex}
  .s4p-seg label{flex:1;justify-content:center}
}
@media print{.s4p-seg,.pk-copy,.s4p-dl{display:none!important}.s4p-bio{display:block!important}}
main section.close[style*="height:150px"]{background:#fff!important}
html body{background:#fff!important}
@media (min-width:1100px){
  .s4p-facts{display:block;columns:2;column-gap:40px}
  .s4p-facts>div{break-inside:avoid;grid-template-columns:minmax(0,1fr);gap:4px}
  .s4p-facts>div,.s4p-facts>div:first-child{padding:0 0 12px;margin-bottom:12px}
}

/* =====================================================================
   Writing: the list is the page. One line per note on a laptop, the waveform beside it.
   ===================================================================== */
.s4w .wr-head{padding:clamp(40px,5vw,72px) 0 0}
.s4w .wr-k{font:500 12px/1.2 var(--bc-mono)!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--bc-blue)!important}
.s4w .wr-head h1{margin:12px 0 14px!important;font:700 clamp(44px,6vw,76px)/1 'Source Serif Display','Source Serif 4',Georgia,serif!important;letter-spacing:-.02em!important;color:var(--bc-ink)!important}
.s4w .wr-lede{font:400 italic clamp(18px,1.6vw,21px)/1.5 'Source Serif 4',Georgia,serif!important;color:var(--bc-char)!important;max-width:560px;margin:0}
.s4w .wr-sec{margin-top:clamp(40px,5vw,64px)}
.s4w .wr-h2{font:700 clamp(26px,2.4vw,32px)/1.1 'Source Serif Display','Source Serif 4',Georgia,serif!important;color:var(--bc-ink)!important;letter-spacing:-.01em!important;margin:0 0 6px!important}
.s4w .wr-sub{font:400 15px/1.5 var(--bc-sans)!important;color:var(--bc-mute)!important;margin:0!important}
.s4w .wr-list{margin-top:18px;border-top:1px solid var(--bc-ink)}
.s4w .wr-row{grid-template-columns:52px minmax(0,1fr) minmax(0,300px) 120px;gap:2px 24px;align-items:center;padding:14px 6px;border-bottom:1px solid var(--bc-line)}
.s4w .wr-row:hover{background:var(--bc-paper2)}
.s4w .wr-no{padding-top:0;font:500 12px/1 var(--bc-mono);color:var(--bc-blue-ink)}
.s4w .wr-main{display:contents}
.s4w .wr-t{grid-column:2;font:700 18px/1.3 'Source Serif Sub','Source Serif 4',Georgia,serif!important;color:var(--bc-ink)}
.s4w .wr-row:hover .wr-t{color:var(--bc-blue-ink)}
.s4w .wr-d{grid-column:2;margin-top:2px;max-width:none;font:400 14px/1.45 var(--bc-sans);color:var(--bc-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s4w .wr-wv{grid-column:3;grid-row:1/span 3;margin:0;min-width:0;overflow:hidden}
.s4w .wr-side{grid-column:4;grid-row:1/span 3;padding:0;gap:4px}
.s4w .wr-side>*{font:500 11px/1.3 var(--bc-mono)!important;letter-spacing:.06em!important;color:var(--bc-mute)!important;text-transform:uppercase}
.s4w .wr-side .wr-kind{color:var(--bc-ink)!important}
.s4w .wr-url{display:none!important}
.s4w .wr-row[data-start]{background:linear-gradient(90deg,var(--bc-tint),transparent 60%)}
.s4w-start{grid-column:2;order:-1;display:block;margin-bottom:2px;font:500 11px/1.3 var(--bc-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bc-blue-ink)}
.s4w .wr-row[data-start] .wr-t{grid-row:auto}
.s4w .wr-sum{margin-top:14px;font:400 14px/1.5 var(--bc-sans);color:var(--bc-mute)}
.s4w .wr-chips button{font-family:var(--bc-sans)}
/* where it runs: three links in a row */
.s4w .wr-cards{gap:14px;margin-top:16px}
.s4w .wr-col{padding:18px 20px;gap:6px;border:1px solid var(--bc-line);border-radius:var(--bc-r-sm);box-shadow:none;background:#fff}
.s4w .wr-col:hover{transform:none;border-color:var(--bc-ink)}
.s4w .wr-ck,.s4w .wr-cm{font:500 11px/1.3 var(--bc-mono)!important;letter-spacing:.08em!important;color:var(--bc-mute)!important}
.s4w .wr-ct{font:700 20px/1.2 'Source Serif Sub','Source Serif 4',Georgia,serif!important;color:var(--bc-ink)!important}
.s4w .wr-cd{font:400 14px/1.5 var(--bc-sans)!important;color:var(--bc-char)!important}
/* the sign-up: one band, the same navy as the footer it leads into */
.s4w .wr-dband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:8px 40px;align-items:center;margin-top:clamp(40px,5vw,64px);padding:clamp(24px,3vw,36px);background:var(--bc-navy);border-radius:var(--bc-r)}
.s4w .wr-dband>*{grid-column:1}
.s4w .wr-dband .wr-dform,.s4w .wr-dband .wr-fine{grid-column:2}
.s4w .wr-dband .wr-dform{grid-row:1/3;align-self:end}
.s4w .wr-dband h2{margin:4px 0 6px!important;font-size:clamp(24px,2.6vw,30px)!important}
.s4w .wr-dl{margin:0;font:400 15px/1.5 var(--bc-sans)}
@media (max-width:1000px){
  .s4w .wr-row{grid-template-columns:44px minmax(0,1fr) 110px}
  .s4w .wr-wv{grid-column:2;grid-row:auto;margin-top:6px}
  .s4w .wr-side{grid-column:3}
}
@media (max-width:700px){
  .s4w .wr-head{padding-top:32px}
  .s4w .wr-row{grid-template-columns:40px minmax(0,1fr);gap:2px 12px;padding:14px 2px;align-items:start}
  .s4w .wr-no{padding-top:4px}
  .s4w .wr-d{display:none}
  .s4w .wr-wv{grid-column:2;margin-top:8px}
  .s4w .wr-side{grid-column:2;grid-row:auto;flex-direction:row;flex-wrap:wrap;gap:2px 12px;margin-top:6px;align-items:center;text-align:left}
  .s4w .wr-t{font-size:17px!important}
  .s4w .wr-dband{grid-template-columns:minmax(0,1fr)}
  .s4w .wr-dband .wr-dform,.s4w .wr-dband .wr-fine{grid-column:1;grid-row:auto}
  .s4w .wr-cards{grid-template-columns:minmax(0,1fr)}
  .s4w .wr-cd{display:none}
  .s4w .wr-chips{display:flex!important;flex-wrap:wrap;gap:8px;width:100%}
  .s4w .wr-chips[hidden]{display:none!important}
  .s4w .wr-chips button{flex:0 0 auto!important;width:auto!important;min-height:44px!important;padding:0 11px!important;margin:0!important;letter-spacing:.04em!important}
  .s4w .wr-chips{gap:6px!important}
  .s4w .wr-col{padding:14px 16px}
}

/* =====================================================================
   My why: the letter stays whole. It gets a wider measure, a tighter leading,
   smaller figures and less air between them, then How I run things after it.
   ===================================================================== */
.why-cover{min-height:0!important}
.why-cover .wc-in{padding:96px 28px 168px!important}
.why-cover .folio{margin-bottom:22px}
.why-band .why-in{max-width:760px;padding:56px 24px 64px!important}
.why-band .lcard{margin-bottom:8px}
.why-band p{font-size:19px!important;line-height:1.7!important;max-width:none!important}
.why-body p{margin-top:18px!important}
.why-body p.lede{font-size:20.5px!important}
.pq{margin:32px auto!important;padding:16px 8px!important;font-size:clamp(22px,2.6vw,27px)!important}
.pq i{font-size:34px!important;margin-bottom:6px!important}
.why-div{margin:32px 0 12px!important}
.why-art,.wfig{margin:28px auto!important;max-width:400px!important}
.why-rcpt{margin:28px 0!important}
.why-rcpt .wr-row{max-width:520px;margin:0 auto}
.why-rcpt .wr-one{max-width:260px!important}
.why-mon{margin:36px 0 8px!important;padding:32px 28px!important}
.why-sig{margin-top:36px!important;padding-top:20px!important}
.s4y-rcpts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.s4y-rcpts li{display:flex;flex-direction:column;gap:8px;margin:0}
.s4y-rcpts img{width:100%;height:auto;aspect-ratio:8/9;object-fit:cover;border-radius:10px!important;border:1px solid var(--bc-line)!important;box-shadow:none!important;transform:none!important}
.s4y-rcpts li>span:last-child{font:500 10.5px/1.35 var(--bc-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bc-mute);text-align:center}
.s4y-lg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8%;aspect-ratio:8/9;overflow:hidden;border-radius:10px;border:1px solid var(--bc-line);background:#fff;padding:8%;box-sizing:border-box}
.s4y-rcpts .s4y-lg img{border:0!important;border-radius:0!important;aspect-ratio:auto!important;object-fit:contain;height:auto;flex:none}
.s4y-rcpts .s4y-lg img:first-child{width:40%}
.s4y-rcpts .s4y-lg img:last-child{width:84%}
/* how I run things */
.s4y-os{background:#fff;padding:var(--s4-pad) 0 calc(var(--s4-pad) - 24px)}
.s4y-in{max-width:var(--bc-max);margin:0 auto;padding:0 var(--bc-gut);box-sizing:border-box}
.s4y-os .s4-k{margin:0 0 10px;font:500 12px/1.2 var(--bc-mono)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--bc-blue)!important}
.s4y-os .s4y-h2{margin:0 0 28px!important;font:700 clamp(30px,3.4vw,42px)/1.08 'Source Serif Display','Source Serif 4',Georgia,serif!important;letter-spacing:-.015em!important;color:var(--bc-ink)!important}
.s4y-rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:r}
.s4y-rules li{margin:0;padding:20px 0 0;border-top:2px solid var(--bc-ink);counter-increment:r}
.s4y-rules li::before{content:"0" counter(r);display:block;margin-bottom:10px;font:500 12px/1 var(--bc-mono);letter-spacing:.1em;color:var(--bc-blue-ink)}
.s4y-os h3{margin:0 0 8px!important;font:700 20px/1.2 'Source Serif Sub','Source Serif 4',Georgia,serif!important;color:var(--bc-ink)!important}
.s4y-rules p{margin:0;font:400 15px/1.55 var(--bc-sans);color:var(--bc-char)}
.s4y-walk{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:12px 48px;margin-top:44px;padding-top:28px;border-top:1px solid var(--bc-line)}
.s4y-walk p{margin:0 0 12px;font:400 italic 17px/1.6 'Source Serif 4',Georgia,serif;color:var(--bc-char);max-width:680px}
@media (max-width:900px){.s4y-rules{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}.s4y-walk{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
  .why-cover .wc-in{padding:56px 22px 150px!important}
  .why-cover .folio span:not(:first-child){display:none}
  .why-cover .folio{justify-content:center}
  .why-band .why-in{padding:36px 20px 48px!important}
  .why-band p{font-size:17px!important;line-height:1.65!important}
  .why-body p.lede{font-size:18px!important}
  .s4y-rcpts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s4y-rules{grid-template-columns:minmax(0,1fr);gap:18px}
  .s4y-rules li{padding-top:14px}
  .s4y-walk{margin-top:32px}
}
.why-rcpt .wr-row{max-width:400px!important}
.why-rcpt .wr-one{max-width:200px!important}

/* =====================================================================
   Say aloha: who answers, three ways in, the map, the three companies. Each said once.
   ===================================================================== */
.s4c .ch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:16px 48px;align-items:end;padding:clamp(40px,5vw,72px) 0 0}
.s4c .ch>*{grid-column:1}
.s4c .ch .k{font:500 12px/1.2 var(--bc-mono)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--bc-blue)!important}
.s4c .ch h1{margin:8px 0 8px!important;font:700 clamp(44px,6vw,76px)/1 'Source Serif Display','Source Serif 4',Georgia,serif!important;letter-spacing:-.02em!important;color:var(--bc-ink)!important}
.s4c .ch p#c-1{margin:0;font:400 italic clamp(18px,1.6vw,21px)/1.5 'Source Serif 4',Georgia,serif;color:var(--bc-char);max-width:540px}
.s4c .ch .ch-me{grid-column:2;grid-row:2/5;align-self:start;margin:0;position:static;box-shadow:none!important;border:1px solid var(--bc-line);border-radius:var(--bc-r);padding:18px;background:#fff}
.s4c .ch .ch-me p{margin:0;max-width:none}
.s4c .ch-mn{font:700 19px/1.2 'Source Serif Sub','Source Serif 4',Georgia,serif!important;color:var(--bc-ink)!important}
.s4c .ch-mr,.s4c .ch-mh{font:400 14px/1.45 var(--bc-sans)!important;color:var(--bc-mute)!important;margin-top:4px!important}
.s4c .trio{gap:14px;margin:36px 0 14px}
.s4c .trio .card{padding:20px!important;border:1px solid var(--bc-line);border-radius:var(--bc-r-sm);box-shadow:none!important;background:#fff;transform:none!important;opacity:1!important}
.s4c .card .ck{font:500 12px/1.2 var(--bc-mono)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--bc-blue)!important}
.s4c .card .big{font:700 clamp(19px,1.7vw,22px)/1.25 'Source Serif Sub','Source Serif 4',Georgia,serif!important;color:var(--bc-ink)!important;margin:6px 0 4px!important;padding:6px 0!important}
.s4c .trio .card p{margin:0 0 12px!important;font:400 14px/1.55 var(--bc-sans)!important;color:var(--bc-mute)!important}
.s4c-lk{display:inline-flex;align-items:center;min-height:44px;margin-top:auto;font:500 15px/1 var(--bc-sans);color:var(--bc-blue-ink)!important;text-decoration:none!important}
.s4c-lk:hover{color:var(--bc-ink)!important;text-decoration:underline!important;text-underline-offset:4px}
.s4c .map{margin:0 0 14px!important;border-radius:var(--bc-r)!important;border:1px solid var(--bc-line)!important}

.s4c .lane{padding:14px 20px!important;margin:0 0 8px!important;border:1px solid var(--bc-line)!important;border-radius:var(--bc-r-sm)!important;box-shadow:none!important;background:#fff!important}
.s4c .lane:hover{transform:none!important;border-color:var(--bc-ink)!important}
.s4c .lane .lk{font:500 12px/1.2 var(--bc-mono)!important;letter-spacing:.12em;text-transform:uppercase}
.s4c .lane .lt{font:400 15px/1.5 var(--bc-sans)!important;color:var(--bc-char)!important}
.s4c .lane .la{font:500 14px/1 var(--bc-sans)!important;letter-spacing:0!important;color:var(--bc-blue-ink)!important}
.s4c:last-of-type{padding-bottom:var(--s4-pad)}
.s4c a:focus-visible{outline:2.5px solid var(--bc-blue);outline-offset:3px;border-radius:8px}
@media (max-width:760px){
  .s4c .ch{grid-template-columns:minmax(0,1fr);padding-top:32px}
  .s4c .ch .ch-me{grid-column:1;grid-row:auto;margin-top:12px}
  .s4c .trio{margin-top:24px}

}
#listen .hx-fart .hx-drawn b{font-size:clamp(28px,3.4vw,44px)}
#listen .hx-fart .hx-drawn i{font-size:clamp(13px,1.3vw,17px)}
#listen .hx-art .hx-drawn{padding:12% 8%}
#listen .hx-art .hx-drawn b{font-size:15px}
#listen .hx-art .hx-drawn i{display:none}
@media (max-width:600px){#listen .hx-acts a{min-width:0;padding-right:14px}#listen .s4-ghost{padding-left:14px}}
@media (max-width:360px){#listen .hx-acts small{display:none}}

body:has(.s4) .close h2.alohah{font-size:clamp(32px,3.6vw,46px)!important}
@media (max-width:1100px){.s4-press .s4-k{flex-basis:100%}.s4-logos{justify-content:flex-start;gap:16px 32px;flex-basis:auto}}
.s4 h2.s4-k:not(#s341a#s341b#s341c){font:500 12px/1.2 var(--bc-mono)!important;letter-spacing:.16em!important}
#contact h2.alohah:not(#s341a#s341b#s341c){font-size:clamp(32px,3.6vw,46px)!important}