/* Cruise: deep water and a clean wake. Teal to sky is the only colour that
 * moves; it marks the main action and what the crew is doing now. */
:root{ --a1:#0D9488; --a2:#0284C7; --ok:#0F9D74; --grad:linear-gradient(90deg,#14B8A6,#38BDF8); --on-grad:#04131A; --bg:#F3F7F9; --card2:#EDF3F6 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --a1:#5EEAD4; --a2:#38BDF8; --ok:#6EE7B7; --bg:#071219; --bg2:#0A1820; --card:#0E1E28; --card2:#132733 } }
:root[data-theme="dark"]{ --a1:#5EEAD4; --a2:#38BDF8; --ok:#6EE7B7; --bg:#071219; --bg2:#0A1820; --card:#0E1E28; --card2:#132733 }
.hero h1 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .pulse{margin-top:6px;max-height:90px}
.phone .ask{background:radial-gradient(120% 90% at 85% 0%,rgba(56,189,248,.42),transparent 60%),radial-gradient(90% 80% at 0% 100%,rgba(94,234,212,.26),transparent 60%),#0E1E28}

/* the crew at work */
.crewbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px}
.crewbar .cb{display:flex;gap:12px;align-items:center;padding:10px;border-radius:16px;background:var(--card2);animation:rise .4s var(--ease) both;animation-delay:calc(var(--i) * 70ms);position:relative}
.crewbar .cb img{width:40px;height:40px;border-radius:12px;flex:none}
.crewbar .cb b{display:block;font-family:var(--display);font-size:.98rem;letter-spacing:-.02em}
.crewbar .cb span{display:block;color:var(--muted);font-size:.82rem;line-height:1.35}
.crewbar .cb.live::after{content:"";position:absolute;top:12px;inset-inline-end:12px;width:8px;height:8px;border-radius:99px;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}
@media (max-width:900px){ .crewbar{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .crewbar{grid-template-columns:1fr} }
.bigtabs{margin-top:4px;padding:4px} .bigtabs button{padding:10px 18px;font-size:.95rem}
.bigtabs .cnt{display:inline-block;min-width:22px;padding:1px 7px;border-radius:99px;background:color-mix(in srgb,var(--a2) 18%,transparent);color:var(--ink);font-size:.76rem;margin-inline-start:4px}

/* setup: three ways to give a CV */
.cvways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.cvway{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border-radius:18px;border:1px dashed var(--line2);background:var(--bg2);text-align:start;cursor:pointer;margin:0;color:var(--ink);font-weight:400;transition:border-color .2s,transform .16s var(--spring)}
.cvway:hover{border-color:var(--a2)} .cvway:active{transform:scale(.98)}
.cvway svg{width:22px;height:22px;color:var(--a1);margin-bottom:4px}
.cvway b{font-size:.98rem} .cvway span{color:var(--muted);font-size:.84rem}
.cvway input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.cvway[disabled]{opacity:.5;cursor:not-allowed}
@media (max-width:720px){ .cvways{grid-template-columns:1fr} }

/* openings */
.opening{grid-template-columns:auto minmax(0,1fr) auto;align-items:start}
.scorebox{width:52px!important;height:52px!important;background:transparent!important;color:var(--ink)!important}
.scorebox svg.ring,.ring{width:52px!important;height:52px!important}
.why{margin:8px 0 0;font-size:.9rem;color:var(--ink);line-height:1.5}
.opening .acts{flex-direction:column;align-items:stretch}
@media (max-width:640px){ .opening .acts{flex-direction:row} }

/* applications */
.appitem{align-items:start}
.replies{display:grid;gap:6px;margin-top:10px}
.reply{padding:10px 12px;border-radius:12px;background:var(--card);font-size:.9rem}
.reply small{display:block;color:var(--faint);font-size:.78rem;margin-top:2px}
.letter{margin-top:10px} .letter summary{cursor:pointer;color:var(--muted);font-size:.86rem;font-weight:650}
.letter pre{white-space:pre-wrap;font-family:var(--sans);font-size:.9rem;line-height:1.55;background:var(--card);padding:14px;border-radius:12px;margin:8px 0 0;max-height:360px;overflow:auto}
.mailcard .mblist{margin:0 0 12px;padding-inline-start:18px;display:grid;gap:6px;font-size:.92rem}
.appsgrid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width:900px){ .appsgrid{grid-template-columns:1fr} }