/* noahgdorfman.com — see design/DESIGN.md */

:root {
    --paper: #F4F2EC;
    --paper-2: #EBE8DF;
    --ink: #141414;
    --ink-2: #4A4740;
    --muted: #807B70;
    --hair: #D6D1C5;
    --signal: #FFB341;
    --signal-wash: rgba(255, 179, 65, 0.22);
    --printed: saturate(.75) contrast(1.08) sepia(.15);
    --sans: 'IBM Plex Sans', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
    --max: 1120px;
    --gutter: 32px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: var(--signal); color: var(--ink); }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* Every photo is "printed" onto the paper */
img, video { filter: var(--printed); mix-blend-mode: multiply; }
.link {
    text-decoration: none;
    background-image: linear-gradient(var(--signal), var(--signal));
    background-size: 100% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .2s;
}
.link:hover { background-size: 100% 100%; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Header */
header { padding-top: 22px; }
.bar {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 12px; border-bottom: 2px solid var(--ink);
}
.bar .name { font-weight: 600; font-size: 15px; text-decoration: none; }
.bar nav { display: flex; gap: 28px; font-size: 15px; }
.bar nav a { text-decoration: none; color: var(--ink-2); }
.bar nav a:hover { color: var(--ink); }

/* Rail layout: label column + content column */
.row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--gutter);
    padding: 56px 0;
    border-bottom: 0.5px solid var(--hair);
}
.label {
    font-family: var(--mono); font-size: 13px; color: var(--muted);
    padding-top: 6px;
}

footer { display: flex; justify-content: space-between; padding: 28px 0 40px; font-family: var(--mono); font-size: 12px; color: var(--muted); }

@media (max-width: 860px) {
    :root { --gutter: 20px; }
    .row { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 44px 0; }
    .label { padding-top: 0; }
    .bar nav { gap: 18px; }
}

/* ---------- Home ---------- */
/* Hero */
.hero { padding: 88px 0 72px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: end; border-bottom: 0.5px solid var(--hair); }
.hero h1 { font-size: clamp(48px, 7.5vw, 92px); font-weight: 600; letter-spacing: -0.035em; line-height: .95; }
.hero p { font-size: 22px; line-height: 1.45; color: var(--ink-2); margin-top: 28px; max-width: 600px; }
.hero p mark { background: linear-gradient(transparent 58%, var(--signal-wash) 58%); color: inherit; }

.status { border-top: 2px solid var(--ink); font-size: 14px; }
.status .head { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 10px 0 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); display: inline-block; margin-right: 8px; box-shadow: 0 0 0 0 rgba(255,179,65,.7); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,179,65,.6);} 70% { box-shadow: 0 0 0 8px rgba(255,179,65,0);} 100% { box-shadow: 0 0 0 0 rgba(255,179,65,0);} }
.status dl { display: grid; grid-template-columns: 76px 1fr; }
.status dt, .status dd { padding: 9px 0; border-top: 0.5px solid var(--hair); }
.status dt { color: var(--muted); font-family: var(--mono); font-size: 12px; padding-top: 11px; }
.status dd .sub { display: block; color: var(--muted); font-size: 12px; font-family: var(--mono); }

/* Featured project */
.feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--gutter); }
.feature figure { aspect-ratio: 4 / 3; overflow: hidden; }
.feature img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature h3 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.feature h3 a { text-decoration: none; }
.feature h3 a:hover { background: linear-gradient(transparent 60%, var(--signal-wash) 60%); }
.feature p { color: var(--ink-2); margin-top: 14px; }
.meta { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-top: 18px; line-height: 1.8; }
.actions { display: flex; gap: 20px; margin-top: 22px; font-size: 15px; }

/* Project table */
.table { margin-top: 56px; border-top: 2px solid var(--ink); }
.thead, .trow { display: grid; grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1fr) 24px; gap: 20px; align-items: baseline; }
.thead { font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 10px 0; border-bottom: 0.5px solid var(--ink); }
.trow { padding: 16px 0; border-bottom: 0.5px solid var(--hair); text-decoration: none; position: relative; transition: background .15s; }
.trow:hover { background: var(--signal-wash); }
.trow .yr, .trow .stack { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.trow .t { font-weight: 500; }
.trow .d { color: var(--ink-2); font-size: 15px; }
.trow .arr { color: var(--muted); transition: transform .15s; }
.trow:hover .arr { transform: translateX(3px); color: var(--ink); }

/* About */
.about { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 48px; }
.about p { font-size: 19px; line-height: 1.6; color: var(--ink); }
.about p + p { margin-top: 18px; color: var(--ink-2); font-size: 17px; }

/* Experience */
.xp { border-top: 2px solid var(--ink); }
.xp div { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; padding: 14px 0; border-bottom: 0.5px solid var(--hair); align-items: baseline; }
.xp .y { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.xp .c { font-weight: 500; }
.xp .r { color: var(--ink-2); font-size: 15px; }

/* Contact */
.contact h2 { font-size: clamp(32px, 5vw, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.contact .elsewhere { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; font-size: 16px; }

/* GitHub section */
.gh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.gh-stats div { padding: 14px 0 18px; border-bottom: 0.5px solid var(--hair); }
.gh-stats div + div { padding-left: 20px; border-left: 0.5px solid var(--hair); }
.gh-stats b { display: block; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.gh-stats span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.langs { margin-top: 32px; }
.langs .bar { display: flex; height: 14px; gap: 2px; }
.langs .bar i { display: block; height: 14px; min-width: 0; }
.langs .key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.langs .key i { display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: 0; }
.langs .summary { font-size: 15px; color: var(--ink-2); margin-top: 14px; }
.repos { margin-top: 32px; border-top: 0.5px solid var(--ink); }
.repos a { display: grid; grid-template-columns: minmax(0, 1fr) 120px 110px; gap: 20px; padding: 11px 0; border-bottom: 0.5px solid var(--hair); text-decoration: none; font-size: 15px; transition: background .15s; }
.repos a:hover { background: var(--signal-wash); }
.repos .n { font-family: var(--mono); font-size: 14px; }
.repos .l, .repos .w { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; }

/* Origin stories */
.origins { margin-top: 28px; border-top: 0.5px solid var(--ink); font-size: 15px; }
.origins div { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); padding: 10px 0; border-bottom: 0.5px solid var(--hair); }
.origins .ar { color: var(--muted); }
.origins .fix { font-weight: 500; justify-self: start; align-self: start; }
.origins .h { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* Headshot */
.shot { position: relative; width: 200px; }
.shot img { width: 200px; aspect-ratio: 4/5; object-fit: cover; display: block; }

@media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; gap: 48px; padding: 56px 0; }
    .hero p { font-size: 19px; }
    .feature, .about { grid-template-columns: 1fr; }
    .shot { order: -1; } .gh-stats b { font-size: 26px; } .repos a { grid-template-columns: minmax(0,1fr) 90px; } .repos .l { display: none; }
    .thead { display: none; }
    .trow { grid-template-columns: 1fr 24px; gap: 4px 12px; }
    .trow .t { grid-column: 1; grid-row: 1; }
    .trow .arr { grid-column: 2; grid-row: 1; }
    .trow .yr { grid-column: 1; grid-row: 3; }
    .trow .d { grid-column: 1; grid-row: 2; }
    .trow .stack { display: none; }
    .xp div { grid-template-columns: 1fr; gap: 2px; }
    }

/* ---------- Project pages ---------- */
.crumb { display: inline-block; margin-top: 40px; font-family: var(--mono); font-size: 13px; color: var(--muted); text-decoration: none; }
.crumb:hover { color: var(--ink); }

/* Title block */
.top { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; padding: 28px 0 64px; border-bottom: 0.5px solid var(--hair); }
.top h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 600; letter-spacing: -0.035em; line-height: .98; }
.dek { font-size: 22px; line-height: 1.45; color: var(--ink-2); margin-top: 24px; max-width: 620px; }
.facts { margin-top: 40px; border-top: 2px solid var(--ink); display: grid; grid-template-columns: 120px minmax(0, 1fr); font-size: 15px; }
.facts dt, .facts dd { padding: 11px 0; border-bottom: 0.5px solid var(--hair); }
.facts dt { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 13px; }
.facts dd a + a { margin-left: 18px; }
.clip video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; background: var(--paper-2); }
.cap { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.5; }

/* Still photo hero: a wider media column, the photo at its own shape */
.top.still { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.photo img { width: 100%; display: block; }

/* Wide hero: title block on top, landscape media full width below */
.top.wide { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.top.wide .facts { max-width: 760px; }
.hero-media img, .hero-media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.embed { position: relative; }
.embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: var(--paper-2); }

/* Phone screenshots */
.phones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.phones img { width: 100%; aspect-ratio: 1284 / 2778; object-fit: cover; display: block; border: 0.5px solid var(--hair); }

/* Prose */
.prose { max-width: 680px; }
.prose p { font-size: 18px; line-height: 1.65; }
.prose p + p { margin-top: 16px; }
.prose em { font-style: italic; }
.prose h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin: 40px 0 10px; }
.prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 16px 0 0 1.2em; font-size: 18px; line-height: 1.65; }
.prose li + li { margin-top: 6px; }
.prose pre { margin-top: 20px; padding: 16px 18px; background: var(--paper-2); font-family: var(--mono); font-size: 13px; line-height: 1.6; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose p.cap { font-size: 12px; line-height: 1.5; }
.prose .parts, .prose .figure { margin-top: 24px; }
.prose .parts + p { margin-top: 24px; }
code { font-family: var(--mono); font-size: .88em; background: var(--paper-2); padding: 1px 5px; }

/* LED states */
.states { margin-top: 28px; border-top: 2px solid var(--ink); max-width: 680px; }
.states div { display: grid; grid-template-columns: 28px 170px minmax(0, 1fr); align-items: center; padding: 11px 0; border-bottom: 0.5px solid var(--hair); font-size: 15px; }
.led { width: 12px; height: 12px; border-radius: 50%; }
.states .c { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }

/* Steps */
.steps { display: flex; align-items: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; font-family: var(--mono); font-size: 14px; }
.steps span { border: 0.5px solid var(--ink); padding: 8px 12px; }
.steps i { font-style: normal; color: var(--muted); }

/* Build photos */
.stage + .stage, .grid2 + .stage { margin-top: 56px; }
.steps + p { margin-top: 28px; }
.stage h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.grid2 figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.grid2.screens figure img { aspect-ratio: 5 / 3; }
.grid2 + p { margin-top: 28px; }

/* Lessons */
.lessons { border-top: 2px solid var(--ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
.lessons li { list-style: none; display: grid; grid-template-columns: 36px minmax(0, 1fr); padding: 16px 0; border-bottom: 0.5px solid var(--hair); }
.lessons .n { font-family: var(--mono); font-size: 13px; color: var(--muted); padding-top: 3px; }
.lessons h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.lessons p { color: var(--ink-2); margin-top: 4px; font-size: 15px; }

/* Parts */
.parts { border-top: 2px solid var(--ink); }
.parts div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; padding: 12px 0; border-bottom: 0.5px solid var(--hair); font-size: 15px; }
.parts .p { font-weight: 500; }
.parts .d { color: var(--ink-2); }
.warn { margin-top: 24px; padding: 14px 16px; background: var(--signal-wash); font-size: 14px; color: var(--ink-2); max-width: 680px; }
.warn b { color: var(--ink); font-weight: 600; }

/* Prev / next */
.pager { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--ink); }
.pager a { padding: 36px 0; text-decoration: none; }
.pager a + a { text-align: right; border-left: 0.5px solid var(--hair); }
.pager span { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pager b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; }
.pager a:hover b { background: linear-gradient(transparent 60%, var(--signal-wash) 60%); display: inline; }

@media (max-width: 860px) {
    .top, .top.still { grid-template-columns: 1fr; gap: 40px; padding-bottom: 48px; }
    .clip { max-width: 280px; }
    .grid2, .lessons { grid-template-columns: 1fr; }
    .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .states div { grid-template-columns: 24px minmax(0, 1fr); }
    .states .m { grid-column: 2; color: var(--ink-2); font-size: 14px; }
    .parts div { grid-template-columns: 1fr; gap: 2px; }
    .pager b { font-size: 20px; }
}