/* coopernorman.dev — clean, self-contained portfolio styles.
   (A portfolio site can use tasteful color; that's a human-facing surface,
   unlike the deliberately B&W ATS resumes.) */
:root{
  --ink:#13202E; --body:#2C3A48; --muted:#5C6B7A; --navy:#1E3A5F; --accent:#1D4ED8;
  --emerald:#0F766E; --line:#E2E8F0; --bg:#FFFFFF; --soft:#F7F9FC; --code:#0F172A;
  --maxw:880px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--body); background:var(--bg); line-height:1.62; font-size:17px; -webkit-font-smoothing:antialiased; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ color:var(--ink); line-height:1.25; font-weight:700; }
h2{ font-size:1.55rem; margin:0 0 .5rem; }
h3{ font-size:1.18rem; margin:1.4rem 0 .4rem; }
p{ margin:.55rem 0; }
section{ padding:46px 0; border-top:1px solid var(--line); }
.eyebrow{ text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:700; color:var(--navy); }

/* nav */
.nav{ position:sticky; top:0; z-index:10; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:58px; }
.nav .brand{ font-weight:700; color:var(--ink); letter-spacing:.02em; }
.nav .links a{ color:var(--body); margin-left:18px; font-size:.95rem; }
@media(max-width:620px){ .nav .links a{ margin-left:12px; font-size:.85rem; } }

/* hero */
.hero{ padding:64px 0 50px; border-top:0; }
.hero h1{ font-size:2.6rem; letter-spacing:-.01em; }
.hero .lede{ font-size:1.2rem; color:var(--body); margin:.9rem 0 0; max-width:62ch; }
.hero .sub{ color:var(--muted); margin-top:.6rem; max-width:62ch; }
.chips{ margin:18px 0 4px; display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-size:.82rem; font-weight:600; color:var(--navy); background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:5px 12px; }
.cta{ margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }
.btn{ display:inline-block; font-weight:600; font-size:.95rem; border-radius:8px; padding:10px 16px; border:1px solid var(--navy); }
.btn.primary{ background:var(--navy); color:#fff; }
.btn.primary:hover{ background:#162d49; text-decoration:none; }
.btn.ghost{ background:#fff; color:var(--navy); }
.btn.ghost:hover{ background:var(--soft); text-decoration:none; }

/* cards grid */
.group{ font-size:1.06rem; color:var(--navy); font-weight:700; margin:30px 0 0; letter-spacing:.005em; }
.group:first-of-type{ margin-top:20px; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:14px; }
@media(max-width:680px){ .grid{ grid-template-columns:1fr; } }
.card{ border:1px solid var(--line); border-radius:12px; padding:20px 22px; background:#fff; transition:box-shadow .15s,border-color .15s; }
.card:hover{ box-shadow:0 6px 22px rgba(20,40,70,.08); border-color:#cdd8e6; }
.card h3{ margin:.1rem 0 .35rem; }
.card .tag{ font-size:.78rem; font-weight:700; color:var(--emerald); text-transform:uppercase; letter-spacing:.06em; }
.card p{ color:var(--body); font-size:.96rem; }
.card .more{ font-weight:600; font-size:.92rem; }

/* lane list */
.lanes{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-top:18px; }
@media(max-width:720px){ .lanes{ grid-template-columns:1fr; } }
.lane h3{ margin:0 0 .3rem; font-size:1.05rem; }
.lane p{ font-size:.93rem; color:var(--muted); margin:0; }

.proj li{ margin:.5rem 0; list-style:none; }
.proj b{ color:var(--ink); }
ul.bare{ list-style:none; }

/* contact */
.contact a{ font-weight:600; }
footer{ padding:30px 0 50px; color:var(--muted); font-size:.88rem; border-top:1px solid var(--line); }

/* ===== case-study article ===== */
.article{ padding:40px 0 20px; }
.article .back{ font-size:.9rem; font-weight:600; }
.article h1{ font-size:2rem; margin:.6rem 0 .2rem; letter-spacing:-.01em; }
.article .note{ color:var(--muted); font-style:italic; font-size:.92rem; margin-bottom:1.2rem; }
.article h2{ font-size:1.35rem; margin:1.8rem 0 .4rem; }
.article img{ max-width:100%; height:auto; display:block; margin:1.1rem 0 .4rem; border:1px solid var(--line); border-radius:8px; }
.article table{ border-collapse:collapse; width:100%; margin:1rem 0; font-size:.95rem; }
.article th,.article td{ border:1px solid var(--line); padding:8px 12px; text-align:left; }
.article th{ background:var(--soft); }
.article pre{ background:var(--code); color:#E6EDF3; border-radius:10px; padding:16px 18px; overflow-x:auto; font-size:.86rem; line-height:1.5; margin:1rem 0; }
.article code{ font-family:"SF Mono",Consolas,"Roboto Mono",monospace; }
.article :not(pre)>code{ background:var(--soft); border:1px solid var(--line); border-radius:5px; padding:1px 5px; font-size:.85em; color:var(--code); }
.article blockquote{ border-left:3px solid var(--line); padding-left:14px; color:var(--muted); margin:1rem 0; }