/* ============================================================
nathaneadam.com — shared base styles
Extracted verbatim from index.html so every page shares one
source of truth. To adopt on the homepage, replace the whole
block in index.html with:
============================================================ */
:root{
/* Headings and display type. Poppins is loaded from Google Fonts in every
page ; the rest of the stack is the fallback, so if Google is
unreachable the site still renders in the system sans and nothing shifts
to a serif. Changed from Georgia on 24 Aug 2026 — see CLAUDE.md. */
--font-display:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
--ink:#141618;
--ink-soft:#4a5157;
--paper:#faf8f5;
--paper-2:#f2eee8;
--line:#e0d9cf;
--deep:#132a3e;
--accent:#9a5b2c;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--font-body);
font-size:19px;
line-height:1.65;
-webkit-font-smoothing:antialiased;
}
/* One page width everywhere, so every left edge lines up.
Prose is held to a readable measure inside it. */
.wrap,.wrap-wide{max-width:1060px;margin:0 auto;padding:0 26px;}
.measure{max-width:700px;}
/* -0.02em, not -0.01em: Poppins is a wide geometric sans and needs more
negative tracking than Georgia did to hold together at display sizes. */
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.02em;line-height:1.2;margin:0;}
a{color:var(--deep);}
a:hover{color:var(--accent);}
/* No image, video or embed may ever push the page sideways. */
img,video,iframe{max-width:100%;}
img{height:auto;}
/* ---------- top bar ---------- */
.topbar{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:10;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px;}
.brand{font-family:var(--font-display);font-size:20px;letter-spacing:0.01em;text-decoration:none;color:var(--ink);white-space:nowrap;}
.topnav{display:flex;gap:26px;font-size:15px;}
.topnav a{text-decoration:none;color:var(--ink-soft);}
.topnav a:hover{color:var(--accent);}
.topnav a[aria-current=page]{color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:2px;}
/* ---------- hamburger button ----------
Hidden entirely on desktop; only the media query below reveals it. */
.navtoggle{
display:none;width:42px;height:42px;padding:0;margin:0 -9px 0 0;
background:none;border:0;cursor:pointer;
flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.navtoggle span{
display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;
transition:transform .18s ease,opacity .18s ease;
}
.topbar--dark .navtoggle span{background:#fff;}
.navtoggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navtoggle.is-open span:nth-child(2){opacity:0;}
.navtoggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* On narrow screens the nav collapses behind the button.
The bar also stops being sticky so it doesn't eat a phone's viewport.
The collapse is gated on `.js-nav`, which nav.js puts on . If that
script fails to load the nav simply stays visible and wraps — never a dead
end with no navigation, which is what an unconditional display:none caused
the first time round. */
@media(max-width:760px){
.topbar{position:static;}
.topbar .wrap{flex-wrap:wrap;align-items:center;height:auto;gap:0;
padding-top:11px;padding-bottom:11px;}
.navtoggle{display:flex;margin-left:auto;}
.topnav{flex-basis:100%;flex-wrap:wrap;gap:14px 20px;font-size:15px;}
.topnav a{padding:2px 0;}
.js-nav .topnav{display:none;flex-direction:column;gap:0;padding-top:8px;}
.js-nav .topnav.open{display:flex;}
.js-nav .topnav a{padding:13px 0;border-top:1px solid var(--line);}
.js-nav .topbar--dark .topnav a{border-top-color:rgba(255,255,255,0.12);}
}
/* ---------- photo slots ----------
Each slot is an wrapped in a .shot. Until a real file exists at the
src, the browser falls back to the dashed .ph placeholder underneath, which
states exactly what photo belongs there. Drop the named file into
/images/ and it appears — no code change needed. */
.shot{position:relative;overflow:hidden;border-radius:6px;background:var(--paper-2);}
.shot img{display:block;width:100%;height:100%;object-fit:cover;position:relative;z-index:1;}
.shot img:not([src]),.shot img[src=""]{display:none;}
.ph{
position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;text-align:center;gap:7px;padding:22px;
border:2px dashed #c9bfb1;border-radius:6px;color:#8a8073;background:var(--paper-2);
}
.ph .ph-t{font-family:var(--font-display);font-size:17px;color:#6f6659;}
.ph .ph-d{font-size:13.5px;line-height:1.5;max-width:24ch;}
.ph .ph-f{font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#a2988a;margin-top:3px;}
figcaption{font-size:14.5px;color:var(--ink-soft);margin-top:11px;font-style:italic;}
/* ---------- hero ---------- */
.hero{padding:78px 0 62px;}
.hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:52px;align-items:center;}
.hero-shot{aspect-ratio:4/5;}
@media(max-width:820px){
.hero-grid{grid-template-columns:1fr;gap:38px;}
.hero-shot{aspect-ratio:3/2;max-height:380px;}
}
.eyebrow{
font-size:13px;letter-spacing:0.13em;text-transform:uppercase;
color:var(--ink-soft);margin-bottom:22px;
}
h1{font-size:clamp(34px,5.4vw,52px);}
.hero .lede{
font-size:21px;color:var(--ink-soft);margin:26px 0 0;max-width:640px;
}
.cta-row{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.btn{
display:inline-block;background:var(--deep);color:#fff;text-decoration:none;
padding:15px 28px;border-radius:5px;font-size:17px;font-weight:500;border:1px solid var(--deep);
}
.btn:hover{background:#0d1f2e;color:#fff;}
.btn-ghost{background:transparent;color:var(--deep);border:1px solid var(--line);}
.btn-ghost:hover{background:var(--paper-2);color:var(--deep);}
/* ---------- proof ---------- */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2);padding:30px 0;}
.proof ul{max-width:760px;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 30px;}
.proof li{font-size:15px;color:var(--ink-soft);display:flex;align-items:baseline;gap:9px;}
.proof b{font-family:var(--font-display);font-size:22px;color:var(--ink);font-weight:600;}
/* ---------- sections ---------- */
section{padding:70px 0;}
section + section{border-top:1px solid var(--line);}
h2{font-size:clamp(25px,3.4vw,32px);margin-bottom:26px;}
p{margin:0 0 22px;}
p:last-child{margin-bottom:0;}
.story h2,.story p{max-width:700px;}
.story p:first-of-type{font-size:21px;}
.story .sig{margin-top:30px;font-family:var(--font-display);font-style:italic;color:var(--ink-soft);font-size:17px;}
.pillars{display:grid;gap:34px;max-width:700px;}
.pillar h3{font-size:21px;margin-bottom:9px;}
.pillar .num{font-size:13px;letter-spacing:0.13em;text-transform:uppercase;color:var(--accent);margin-bottom:7px;}
.pillar p{color:var(--ink-soft);font-size:18px;}
/* ---------- signup ---------- */
.signup{background:var(--deep);color:#f4f1ec;border-top:none;}
.signup h2{color:#fff;max-width:700px;}
.signup p{color:#c3cdd6;max-width:640px;}
.signup a{color:#fff;}
form{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px;max-width:520px;}
input[type=email]{
flex:1 1 260px;padding:15px 16px;font-size:17px;border-radius:5px;
border:1px solid #40586c;background:#0e2131;color:#fff;font-family:inherit;
}
input[type=email]::placeholder{color:#8ba0b1;}
input[type=email]:focus{outline:2px solid #7fa8c9;outline-offset:1px;}
button{
padding:15px 28px;font-size:17px;font-weight:500;border-radius:5px;border:none;
background:#f4f1ec;color:var(--deep);cursor:pointer;font-family:inherit;
}
button:hover{background:#fff;}
.fineprint{font-size:14px;color:#9fb0bd;margin-top:16px;}
.formnote{font-size:15px;margin-top:14px;color:#c3cdd6;min-height:1.2em;}
/* ---------- footer ---------- */
footer{padding:46px 0 60px;font-size:16px;color:var(--ink-soft);}
.flinks{display:flex;flex-wrap:wrap;gap:10px 24px;margin-bottom:22px;}
.flinks a{color:var(--deep);}
.fmeta{font-size:14px;}
/* ============================================================
Interior-page additions (new — not in the original homepage)
============================================================ */
/* Page header used at the top of interior pages instead of the hero */
/* Vertical padding only. This element is always `class="pagehead wrap"`, and
the `.wrap` gutter is `padding:0 26px`. A `padding` shorthand here resets
left/right to 0 (same specificity, later in the file), which pulled the
header text 26px left of every other left edge on all three interior pages.
Use the longhands so the gutter survives. */
.pagehead{padding-top:64px;padding-bottom:44px;border-bottom:1px solid var(--line);}
.pagehead h1{font-size:clamp(31px,4.6vw,44px);max-width:760px;}
.pagehead .lede{font-size:20px;color:var(--ink-soft);margin:22px 0 0;max-width:660px;}
/* Credit lists — the "receipts" layout */
.creditgroup{max-width:760px;}
.creditgroup + .creditgroup{margin-top:52px;}
.creditgroup h3{font-size:15px;letter-spacing:0.13em;text-transform:uppercase;
font-family:inherit;font-weight:600;color:var(--accent);margin-bottom:20px;}
.credits{list-style:none;margin:0;padding:0;}
.credits li{padding:18px 0;border-top:1px solid var(--line);}
.credits li:last-child{border-bottom:1px solid var(--line);}
.credits .t{font-family:var(--font-display);font-size:20px;line-height:1.3;}
.credits .r{font-size:16px;color:var(--ink-soft);margin-top:5px;}
.credits .n{font-size:15px;color:var(--ink-soft);margin-top:7px;}
/* Inline roster of names (artists, etc.) */
.roster{font-family:var(--font-display);font-size:20px;line-height:1.6;max-width:700px;color:var(--ink);}
/* Speaking: topic cards */
.topics{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 34px;max-width:820px;}
@media(max-width:700px){.topics{grid-template-columns:1fr;}}
.topic h3{font-size:20px;margin-bottom:8px;}
.topic p{font-size:17px;color:var(--ink-soft);margin:0;}
/* Responsive video embed */
.video{position:relative;width:100%;aspect-ratio:16/9;background:var(--paper-2);
border-radius:6px;overflow:hidden;max-width:860px;}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* Pull quote */
blockquote.pull{
margin:34px 0;padding:4px 0 4px 24px;border-left:3px solid var(--accent);
font-family:var(--font-display);font-size:22px;line-height:1.45;max-width:700px;
}
blockquote.pull cite{display:block;font-family:inherit;font-size:15px;font-style:normal;
color:var(--ink-soft);margin-top:14px;}
/* ---------- imagery ---------- */
/* A plain framed photo with caption, used inline in prose */
figure.plate{margin:38px 0;max-width:760px;}
figure.plate img{display:block;width:100%;height:auto;border-radius:6px;background:var(--paper-2);}
/* Two photos side by side; stacks on narrow screens */
.plate-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:38px 0;max-width:820px;}
.plate-pair figure{margin:0;}
.plate-pair img{display:block;width:100%;height:auto;border-radius:6px;background:var(--paper-2);}
@media(max-width:640px){.plate-pair{grid-template-columns:1fr;}}
/* Small thumbnail sitting beside a credit entry */
.credits li.with-shot{display:grid;grid-template-columns:180px 1fr;gap:22px;align-items:start;}
.credits li.with-shot img{display:block;width:100%;height:auto;border-radius:5px;background:var(--paper-2);}
@media(max-width:640px){
.credits li.with-shot{grid-template-columns:1fr;gap:14px;}
.credits li.with-shot img{max-width:260px;}
}
/* Band used to break up long text pages.
No longer full-bleed. It was `width:100%` at a fixed 220–420px
height with object-fit:cover, which on a wide monitor made a ~4.6:1
letterbox out of students-studio.jpg (1600x1066, 3:2) — about two
thirds of the height thrown away, cutting heads off at both the top
and the bottom of the frame. Any wide crop of that photo decapitates
somebody, because there are faces at the very top and very bottom.
It now shows the whole frame and lines up exactly with the text
column: 1008px = the 1060px .wrap minus its 2x26px gutters, so the
left edge matches every other left edge on the page. */
.band{background:transparent;border:0;padding:0 26px;margin:44px 0 0;}
.band img{display:block;width:100%;max-width:1008px;margin:0 auto;
height:auto;border-radius:6px;background:var(--paper-2);}
.band figcaption{max-width:1008px;margin:0 auto;padding:0;}
/* Photographer credit inside a caption */
.credit{color:#8a8073;font-style:normal;font-size:0.9em;white-space:nowrap;}
/* ---------- small screens ---------- */
@media(max-width:700px){
body{font-size:17.5px;line-height:1.62;}
.wrap,.wrap-wide{padding:0 20px;}
section{padding:48px 0;}
.hero{padding:40px 0 44px;}
.pagehead{padding-top:36px;padding-bottom:30px;}
.hero .lede,.pagehead .lede{font-size:18.5px;}
.story p:first-of-type{font-size:18.5px;}
figure.plate,.plate-pair{margin:26px 0;}
.plate-pair{gap:18px;}
.proof{padding:22px 0;}
.proof ul{gap:10px 22px;}
.proof b{font-size:20px;}
blockquote.pull{font-size:19px;padding-left:18px;margin:26px 0;}
/* Match the .wrap gutter, which drops to 20px at this breakpoint. */
.band{padding:0 20px;margin-top:30px;}
.band figcaption{padding:0;}
.credits li{padding:15px 0;}
.credits .t{font-size:18.5px;}
/* Buttons go full width so they're easy to hit with a thumb */
.cta-row{gap:10px;}
.cta-row .btn{width:100%;text-align:center;padding:14px 20px;}
}
@media(max-width:420px){
.wrap,.wrap-wide{padding:0 16px;}
.band{padding:0 16px;}
.credit{white-space:normal;}
}
/* ============================================================
Homepage dark hero + featured strip (added 23 Aug 2026)
Borrowed from the grahamcochrane.com layout: dark hero, one
loud CTA, a "Featured in" strip. Deliberately NOT borrowed:
testimonial cards and the three-card offer grid — those imply
products for sale and undercut the professor position. See
CLAUDE.md, "Design direction".
Everything here is scoped to .topbar--dark, .herowrap or
.logostrip, all of which appear only on index.html. Interior
pages are untouched by design — check them anyway after
editing tokens.
============================================================ */
:root{
--cta:#ef8c1f; /* button orange — always paired with dark text */
--cta-hover:#ffa236;
--sky:#7fb8e0; /* headline highlight on navy */
}
/* ---------- dark top bar ---------- */
.topbar--dark{background:var(--deep);border-bottom:1px solid rgba(255,255,255,0.10);}
.topbar--dark .brand{color:#fff;}
.topbar--dark .topnav a{color:#b9c8d4;}
.topbar--dark .topnav a:hover{color:var(--cta);}
.topbar--dark .topnav a[aria-current=page]{color:#fff;border-bottom-color:var(--cta);}
/* ---------- full-bleed navy hero ----------
The portrait sits flush to the bottom edge and fades out with a
mask, which reads like a cutout without needing a cut-out PNG.
Below 820px the grid stacks and the bleed is reverted — a
bottom-aligned photo in a single column just leaves a gap. */
.herowrap{background:var(--deep);color:#f4f1ec;overflow:hidden;}
.herowrap .hero{padding:72px 0 64px;}
.herowrap .hero-grid{grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;}
.herowrap h1{color:#fff;}
.herowrap h1 .hl{color:var(--sky);}
.herowrap .lede{color:#c3cdd6;}
/* The portrait no longer bleeds off the bottom edge — the credit line lives
under it now, so there is nothing to bleed into. */
.herowrap .hero-shot{background:transparent;border-radius:8px;aspect-ratio:4/5;}
.herowrap .hero-shot img{object-position:center top;}
.herocred{margin:16px 0 0;text-align:center;line-height:1.45;}
.herocred b{display:block;font-family:var(--font-display);font-weight:600;
font-size:17px;color:#fff;letter-spacing:-0.01em;}
.herocred span{display:block;font-size:13.5px;color:#9fb8cc;margin-top:3px;}
/* ---------- phone hero: centred stack ----------
MUST restate grid-template-columns:1fr here. The base stacking rule
is plain `.hero-grid` (0,1,0) and `.herowrap .hero-grid` is (0,2,0),
so the desktop two-column rule wins on specificity even inside this
media query. Leaving it out kept phones on a two-column grid: the
headline broke to five lines and the portrait was crushed into a
side column. Same trap applies to every .herowrap override below.
The photo is shown WHOLE — no crop. portrait.jpg is 1000x1249 (4:5)
and the base .hero-shot rule forces aspect-ratio:3/2 below 820px,
which with object-fit:cover discarded ~47% of the height and cut the
top of his head off. */
@media(max-width:820px){
.herowrap .hero{padding:40px 0 48px;}
.herowrap .hero-grid{grid-template-columns:1fr;gap:34px;text-align:center;}
.herowrap h1{font-size:clamp(29px,7.6vw,38px);}
.herowrap .lede{font-size:18px;margin:18px auto 0;max-width:34ch;}
.herowrap .cta-row{margin-bottom:0;justify-content:center;}
.herowrap .hero-shot{
aspect-ratio:auto;max-height:none;align-self:auto;
width:min(100%,300px);margin:0 auto;
}
.herowrap .hero-shot img{height:auto;object-fit:contain;object-position:center;}
}
/* ---------- the one loud button ----------
Orange with near-black text, not white. White on this orange is
about 2.9:1 and fails; #1b1206 clears 8:1. Don't flip it. */
.btn-cta{background:var(--cta);border-color:var(--cta);color:#1b1206;font-weight:600;}
.btn-cta:hover{background:var(--cta-hover);border-color:var(--cta-hover);color:#1b1206;}
.herowrap .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.35);}
.herowrap .btn-ghost:hover{background:rgba(255,255,255,0.10);color:#fff;}
.signup button{background:var(--cta);color:#1b1206;font-weight:600;}
.signup button:hover{background:var(--cta-hover);}
/* ---------- "Featured in" strip ----------
Typographic wordmarks, not logo files. Every name here is a
verified appearance (see CLAUDE.md). Nothing goes in this strip
that can't be pointed at. */
.logostrip{background:var(--paper);border-bottom:1px solid var(--line);padding:28px 0 30px;}
.logostrip .lab{font-family:var(--font-display);font-style:italic;font-size:15px;
color:var(--ink-soft);text-align:center;margin:0 0 18px;}
.logostrip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
justify-content:center;align-items:center;gap:12px 36px;}
.logostrip li{font-family:var(--font-display);font-size:19px;letter-spacing:0.02em;
color:#6f6659;white-space:nowrap;}
@media(max-width:700px){
.logostrip{padding:22px 0 24px;}
.logostrip ul{gap:10px 22px;}
.logostrip li{font-size:16px;}
}
/* ---------- 404 page ----------
Used only by 404.html. Scoped to its own class so nothing else moves. */
.notfound-links{list-style:none;margin:0 0 34px;padding:0;max-width:700px;}
.notfound-links li{padding:13px 0;border-top:1px solid var(--line);font-size:17px;
color:var(--ink-soft);}
.notfound-links li:last-child{border-bottom:1px solid var(--line);}
.notfound-links a{font-family:var(--font-display);font-weight:600;
color:var(--deep);text-decoration:none;border-bottom:1px solid var(--line);}
.notfound-links a:hover{color:var(--accent);border-bottom-color:var(--accent);}
/* Simple two-column meta list (education, etc.) */
.meta{list-style:none;margin:0;padding:0;max-width:700px;}
.meta li{display:flex;gap:18px;padding:11px 0;border-top:1px solid var(--line);font-size:17px;}
.meta li:last-child{border-bottom:1px solid var(--line);}
.meta .k{flex:0 0 190px;color:var(--ink-soft);}
@media(max-width:560px){.meta li{flex-direction:column;gap:2px;}.meta .k{flex:none;font-size:15px;}}