/* lyhjeremy.github.io. Compact, image-first card grid in apple.com idiom.
   Deliberate exception to DESIGN_STANDARDS.md; do not run designcheck.py here. */
:root{
  --bg:#fff; --bg-2:#f5f5f7; --card:#fff; --card-line:rgba(0,0,0,.08);
  --text:#1d1d1f; --text-2:#6e6e73; --line:#d2d2d7;
  --blue:#0066cc; --nav:rgba(251,251,253,.85); --nav-line:rgba(0,0,0,.08);
  --shadow:0 10px 28px rgba(0,0,0,.10);
  --c-blue:#0071e3; --c-green:#1f8a5b; --c-orange:#e8590c; --c-purple:#6e4fd8; --c-pink:#d6336c; --c-teal:#0b8f9c;
  --t-blue:#e2eeff; --t-green:#ddf3e7; --t-orange:#ffeadb; --t-purple:#eae2fc; --t-pink:#fce0ec; --t-teal:#dcf3f6;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",Menlo,Consolas,monospace;
  --max:1120px; --r:16px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#000; --bg-2:#121214; --card:#1c1c1e; --card-line:rgba(255,255,255,.14);
  --text:#f5f5f7; --text-2:#a1a1a6; --line:#3a3a3c;
  --blue:#409cff; --nav:rgba(0,0,0,.85); --nav-line:rgba(255,255,255,.1);
  --shadow:0 10px 28px rgba(0,0,0,.6);
  --c-blue:#64b5ff; --c-green:#5fd695; --c-orange:#ffa860; --c-purple:#bda7ff; --c-pink:#ff7fb0; --c-teal:#6fdce6;
  --t-blue:#1c1c1e; --t-green:#1c1c1e; --t-orange:#1c1c1e; --t-purple:#1c1c1e; --t-pink:#1c1c1e; --t-teal:#1c1c1e;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:56px}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:15px;line-height:1.45;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:60px;background:var(--card);padding:8px 12px;z-index:20;border-radius:8px}
.chev::after{content:" \203A"}

/* nav */
.nav{position:sticky;top:0;z-index:10;background:var(--nav);border-bottom:1px solid var(--nav-line);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.nav .wrap{display:flex;align-items:center;height:44px;gap:24px;font-size:12px;white-space:nowrap}
.nav .brand{color:var(--text);font-weight:600;font-size:14px;margin-right:auto}
.nav a{color:var(--text);opacity:.85}
.nav a:hover{opacity:1;text-decoration:none}
.nav button{background:none;border:0;color:var(--text);opacity:.85;font:inherit;cursor:pointer;padding:0}
.nav button[hidden]{display:none}
@media (max-width:700px){.nav .wrap{gap:16px;overflow-x:auto}}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;padding:44px 0 36px}
.hero h1{font-size:clamp(40px,6vw,64px);line-height:1.02;font-weight:700;letter-spacing:-.025em;color:var(--text)}
.hero .sub{font-size:19px;line-height:1.3;color:var(--text-2);margin-top:8px;max-width:44ch}
.hero .sub b{color:var(--text);font-weight:600}
.cta{display:flex;gap:20px;margin-top:14px;font-size:15px;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--t);color:var(--c);border:1px solid transparent}
:root[data-theme="dark"] .chip{border-color:var(--c);background:transparent}
.chip:hover{text-decoration:none;filter:brightness(.96)}
.hero .mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.hero .mosaic img{aspect-ratio:16/10;object-fit:cover;border-radius:10px;box-shadow:var(--shadow);border:6px solid #fff;background:#fff}
@media (max-width:860px){.hero{grid-template-columns:1fr;padding:32px 0 24px}.hero .mosaic{display:none}}

/* sections */
.section{padding:44px 0 0}
.band{background:var(--bg-2);padding:40px 0 48px;margin-top:48px}
.band .section{padding:0}
.section-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.section-eyebrow{width:100%;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:-6px}
.section-eyebrow.blue{color:var(--c-blue)}.section-eyebrow.orange{color:var(--c-orange)}
.section-eyebrow.purple{color:var(--c-purple)}.section-eyebrow.green{color:var(--c-green)}
.section-head h2{font-size:28px;line-height:1.1;font-weight:700;letter-spacing:-.02em}
.section-head p{font-size:15px;color:var(--text-2)}
.group-head{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px}
.group-head h3{font-size:15px;font-weight:600;color:var(--c,var(--text))}
.group-head span{font-size:13px;color:var(--text-2)}

/* grids and cards */
.grid{display:grid;gap:14px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.span-2{grid-column:span 2}
@media (max-width:980px){.cols-4,.cols-5{grid-template-columns:repeat(2,minmax(0,1fr))}.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cols-2,.cols-3,.cols-4,.cols-5{grid-template-columns:1fr}.span-2{grid-column:span 1}}

.card{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;min-width:0;--c:var(--text-2);--t:var(--card);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card>a.pic{display:block;background:#fff;padding:10px}
.card img.shot{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;
  border:1px solid rgba(0,0,0,.10)}
.card .body{padding:14px 16px 16px;background:var(--t);display:flex;flex-direction:column;gap:6px;flex:1}
.card .eyebrow{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--c)}
.card h3{font-size:18px;line-height:1.2;font-weight:600;letter-spacing:-.015em}
.card h3 a{color:var(--text)}
.card.big h3{font-size:24px}
.card p{font-size:14px;color:var(--text-2)}
.card .links{margin-top:auto;padding-top:6px;font-size:13px;display:flex;gap:14px;flex-wrap:wrap}
.card .stat{font-size:34px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--c);margin:2px 0 2px}
.card.mini .body{padding:10px 12px 12px;gap:3px}
.card.mini h3{font-size:14px}
.card.mini .links{font-size:12px;gap:10px;padding-top:2px}
.blue{--c:var(--c-blue);--t:var(--t-blue)}.green{--c:var(--c-green);--t:var(--t-green)}
.orange{--c:var(--c-orange);--t:var(--t-orange)}.purple{--c:var(--c-purple);--t:var(--t-purple)}
.pink{--c:var(--c-pink);--t:var(--t-pink)}.teal{--c:var(--c-teal);--t:var(--t-teal)}
.card.dark{--t:#0b1a33;--c:#8fc3ff;border-color:transparent}
.card.dark .body{background:linear-gradient(180deg,#0b1a33,#06101f)}
.card.dark h3 a,.card.dark h3{color:#fff}.card.dark p{color:#b8c4d6}.card.dark .links a{color:#8fc3ff}
.card.dark-purple{--t:#1b1240;--c:#c4b2ff;border-color:transparent}
.card.dark-purple .body{background:linear-gradient(180deg,#1b1240,#0d0920)}
.card.dark-purple h3 a,.card.dark-purple h3{color:#fff}.card.dark-purple p{color:#c3bde0}.card.dark-purple .links a{color:#b9a6ff}

.card.wide{flex-direction:row}
.card.wide>a.pic{flex:1.35;min-width:0;display:flex}
.card.wide img.shot{height:100%;aspect-ratio:auto;object-fit:cover;flex:1}
.card.wide .body{flex:1;justify-content:center}
.card.wide .links{margin-top:10px}
.card.wide h3{font-size:26px}
@media (max-width:840px){.card.wide{flex-direction:column}.card.wide img.shot{aspect-ratio:16/10;height:auto}}

/* stats */
.stats a{display:flex;flex-direction:column;justify-content:center;padding:14px 16px;border-radius:var(--r);
  background:var(--t);border:1px solid var(--card-line);color:var(--text);min-width:0}
.stats a:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow)}
.stats .v{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--c)}
.stats .l{font-size:12px;line-height:1.3;color:var(--text-2);margin-top:6px}

/* footer */
.footer{background:var(--bg-2);border-top:1px solid var(--line);margin-top:48px;padding:24px 0 32px;font-size:12px;color:var(--text-2)}
.footer .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.footer h4{font-size:12px;font-weight:600;color:var(--text);margin-bottom:6px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin:0 0 4px;line-height:1.35}
.footer .about{padding:16px 0;border-bottom:1px solid var(--line)}
.footer .about p{max-width:70ch;margin:0 0 8px;line-height:1.5}
.footer .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:14px}
.footer .legal a,.footer li a{color:var(--text-2)}
.footer code{font-family:var(--mono);background:var(--card);border:1px solid var(--card-line);padding:1px 6px;border-radius:4px;color:var(--text)}
@media (max-width:700px){.footer .cols{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.card,.stats a{transition:none}.card:hover,.stats a:hover{transform:none}}