/* Shared, dependency-free styles for the public app directory. */
:root { color-scheme: light; --ink:#172b48; --muted:#4a607b; --blue:#1757aa; --paper:#f7f9fc; --line:#d7e1ee; }
* { box-sizing:border-box; }
html { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); line-height:1.65; -webkit-font-smoothing:antialiased; }
body { margin:0; }
a { color:var(--blue); text-underline-offset:.22em; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible { outline:3px solid #1757aa; outline-offset:5px; border-radius:3px; }
.skip { position:absolute; top:-100px; left:1rem; padding:.6rem 1rem; background:white; z-index:2; }
.skip:focus { top:1rem; }
.wrap { width:min(1080px, calc(100% - 3rem)); margin-inline:auto; }
header { border-bottom:1px solid var(--line); background:#fff; }
.header-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 2rem; padding-block:1rem; }
.brand { color:var(--ink); font-weight:700; font-size:1.1rem; text-decoration:none; letter-spacing:-.03em; }
nav { display:flex; flex-wrap:wrap; gap:.2rem 1rem; }
nav a { display:inline-flex; align-items:center; min-height:44px; padding:.25rem .2rem; color:var(--muted); text-decoration:none; }
nav a[aria-current=page] { color:var(--blue); text-decoration:underline; font-weight:600; }
main { min-height:65vh; padding-block:4.5rem 5rem; }
h1,h2,h3 { line-height:1.15; text-wrap:balance; }
h1 { font-size:clamp(2.5rem,6vw,4.5rem); letter-spacing:-.055em; margin:.6rem 0 1.5rem; max-width:16ch; }
h2 { font-size:1.65rem; letter-spacing:-.025em; margin:0 0 1rem; }
h3 { font-size:1.12rem; margin:0 0 .5rem; }
p { margin:0 0 1.25rem; max-width:68ch; }
.eyebrow { color:var(--blue); font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.lead { font-size:1.2rem; color:var(--muted); max-width:52ch; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:4rem; align-items:center; margin-bottom:4rem; }
.icon { display:block; width:100%; height:auto; border-radius:23%; outline:1px solid rgb(0 0 0 / .1); }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1.75rem; }
.button { display:inline-flex; align-items:center; min-height:48px; padding:.65rem 1.2rem; background:var(--blue); color:#fff; font-weight:600; text-decoration:none; border-radius:.65rem; }
.button:hover { background:#104785; }
.card { display:grid; grid-template-columns:120px minmax(0,1fr); gap:2rem; padding:2rem; background:#fff; border:1px solid var(--line); border-radius:1.5rem; }
.card h3 { font-size:1.8rem; }
.label { color:var(--muted); font-size:.9rem; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; border-top:1px solid var(--line); padding-top:2rem; }
.grid p { color:var(--muted); }
.note { padding:1.5rem; background:#eaf1fb; border-left:3px solid var(--blue); margin-top:2rem; }
.note p:last-child { margin-bottom:0; }
.prose { max-width:740px; }
.prose h1 { max-width:none; font-size:clamp(2.3rem,5vw,3.5rem); }
.prose section { margin-top:2.75rem; }
li { margin-bottom:.8rem; padding-left:.25rem; }
ol,ul { padding-left:1.4rem; }
kbd,code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.9em; }
kbd { border:1px solid #a9bbd2; border-radius:.25rem; padding:.1rem .35rem; background:#fff; }
footer { border-top:1px solid var(--line); padding-block:2rem; color:var(--muted); font-size:.9rem; }
footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
footer p { margin:0; }
footer a { display:inline-block; padding-block:.3rem; }
p,li,a { overflow-wrap:break-word; }
@media(max-width:650px) { .wrap { width:calc(100% - 2rem); } main { padding-block:2.5rem 3rem; } .hero { grid-template-columns:1fr; gap:2rem; } .hero .icon { width:120px; grid-row:1; } .grid { grid-template-columns:1fr; gap:1.2rem; } .card { grid-template-columns:1fr; padding:1.5rem; gap:1.5rem; } .card .icon { width:88px; } }
@media(forced-colors:active) { a:focus-visible { outline-color:Highlight; } }
/* Expanded project directory. Product initials are navigation markers, not logos. */
html { scroll-padding-top:2rem; }
.directory-intro { max-width:850px; }
.directory-intro h1 { max-width:20ch; }
.directory-start { margin-block:3rem 1rem; }
.category-nav { gap:.5rem; }
.category-nav a { padding:.55rem .85rem; border:1px solid var(--line); background:#fff; border-radius:.5rem; color:var(--blue); text-decoration:underline; }
.catalog-section { margin-block:3.5rem; }
.section-heading { margin-bottom:1.5rem; }
.section-heading p { color:var(--muted); }
.catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.catalog-card { display:flex; flex-direction:column; padding:1.75rem; border:1px solid var(--line); border-radius:1rem; background:#fff; }
.card-heading { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.card-heading p { margin:0; }
.project-mark { display:inline-flex; flex:none; width:56px; height:56px; align-items:center; justify-content:center; border-radius:14px; background:#eaf1fb; color:var(--blue); font-size:1.2rem; font-weight:700; letter-spacing:-.04em; }
.project-icon { display:block; flex:none; width:56px; height:56px; object-fit:contain; }
.project-heading > .project-icon { width:88px; height:88px; margin-bottom:1.5rem; }
.prose > .project-icon { width:64px; height:64px; margin-bottom:1.5rem; }
.catalog-card h3 { font-size:1.4rem; line-height:1.25; }
.catalog-card h3 a { color:var(--ink); text-decoration:none; }
.catalog-card h3 a:hover { text-decoration:underline; }
.catalog-card > p { color:var(--muted); }
.card-links { display:flex; flex-wrap:wrap; gap:.25rem 1rem; margin-top:auto; padding-top:.5rem; }
.card-links a { display:inline-flex; align-items:center; min-height:44px; }
.about-section { margin-top:4rem; padding-top:3rem; border-top:1px solid var(--line); }
.contact-section { margin-top:2rem; }
.project-heading { margin-bottom:3rem; }
.project-heading > .project-mark { width:88px; height:88px; font-size:1.8rem; border-radius:22px; margin-bottom:1.5rem; }
.project-heading h1 { max-width:23ch; font-size:clamp(2.3rem,5.2vw,4rem); }
.features { grid-template-columns:repeat(2,minmax(0,1fr)); }
.source-section { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line); }
.source-links { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }
.source-links a { display:inline-flex; align-items:center; min-height:44px; }
@media(max-width:650px) { .catalog-grid,.features { grid-template-columns:1fr; } .catalog-card { padding:1.25rem; } .catalog-section { margin-block:2.75rem; } }