/* notebook.css — preview design system for /notebook/ (port of Claude Design's notebook direction to plain HTML/CSS, no React). Self-contained: does NOT reuse styles.css. Theme toggle via script.js sets [data-theme] on . */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/geist-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --bg: #f4efe0; --surface: #fbf7ea; --surface-2: #efe8d2; --ink: #1d1a12; --dim: #6a6352; --rule: #d5ccb0; --accent: #2f5d3a; --accent-ink: #fbf7ea; --tag: #e5dcc2; --grid: rgba(45, 38, 20, 0.045); --pos: #2f5d3a; --warn: #a35d2a; --danger: #8a2f2a; --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --measure: 1100px; --grid-size: 24px; --shadow-offset: 3px; --border-w: 1.5px; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #0e1814; --surface: #141f1a; --surface-2: #1a2620; --ink: #ecead8; --dim: #8a8a76; --rule: #233029; --accent: #d88a54; --accent-ink: #0e1814; --tag: #1a2620; --grid: rgba(255, 240, 200, 0.03); --pos: #7cb88a; --warn: #d88a54; --danger: #d97766; } } [data-theme='dark'] { --bg: #0e1814; --surface: #141f1a; --surface-2: #1a2620; --ink: #ecead8; --dim: #8a8a76; --rule: #233029; --accent: #d88a54; --accent-ink: #0e1814; --tag: #1a2620; --grid: rgba(255, 240, 200, 0.03); --pos: #7cb88a; --warn: #d88a54; --danger: #d97766; } [data-theme='light'] { --bg: #f4efe0; --surface: #fbf7ea; --surface-2: #efe8d2; --ink: #1d1a12; --dim: #6a6352; --rule: #d5ccb0; --accent: #2f5d3a; --accent-ink: #fbf7ea; --tag: #e5dcc2; --grid: rgba(45, 38, 20, 0.045); --pos: #2f5d3a; --warn: #a35d2a; --danger: #8a2f2a; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; } body { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .skip-link { position: absolute; left: -9999px; top: 0; padding: 8px 12px; background: var(--ink); color: var(--bg); font-family: var(--mono); z-index: 100; } .skip-link:focus { left: 0; } /* ─── Nav ──────────────────────────────────────────────────────────── */ .nb-nav { border-bottom: var(--border-w) solid var(--ink); background: var(--bg); position: sticky; top: 0; z-index: 10; } .nb-nav-inner { max-width: var(--measure); margin: 0 auto; padding: 14px 56px; display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; } .nb-brand { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -0.6px; color: var(--ink); white-space: nowrap; flex-shrink: 0; } .nb-brand .dot { color: var(--accent); } .nb-nav-spacer { flex: 1; } .nb-link { font-family: var(--mono); font-size: 13px; color: var(--dim); padding: 4px 8px; border: var(--border-w) solid transparent; white-space: nowrap; } .nb-link:hover { color: var(--ink); text-decoration: none; } .nb-link[aria-current='page'] { color: var(--ink); background: var(--tag); border-color: var(--ink); } .nb-divider { width: 1px; height: 14px; background: var(--rule); flex-shrink: 0; } .nb-resume { font-family: var(--mono); font-size: 12px; color: var(--dim); white-space: nowrap; } .nb-resume:hover { color: var(--ink); text-decoration: none; } .theme-toggle { background: transparent; border: var(--border-w) solid var(--rule); color: var(--dim); font-family: var(--mono); font-size: 14px; padding: 4px 8px; cursor: pointer; line-height: 1; } .theme-toggle:hover { color: var(--ink); border-color: var(--ink); } .icon-sun, .icon-moon { display: inline-block; } .icon-sun { display: none; } [data-theme='dark'] .icon-sun { display: inline-block; } [data-theme='dark'] .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .icon-sun { display: inline-block; } :root:not([data-theme='light']) .icon-moon { display: none; } } /* ─── Layout ───────────────────────────────────────────────────────── */ .nb-main { max-width: var(--measure); margin: 0 auto; padding: 0 56px; } /* ─── Crumbs ───────────────────────────────────────────────────────── */ .nb-crumbs { padding: 20px 0 0; font-family: var(--mono); font-size: 12px; color: var(--dim); } .nb-crumbs a { color: var(--dim); } .nb-crumbs a:hover { color: var(--ink); text-decoration: none; } .nb-crumbs .sep { margin: 0 8px; color: var(--rule); } .nb-crumbs .here { color: var(--ink); } /* ─── Hero ─────────────────────────────────────────────────────────── */ .nb-hero { padding: 56px 0 40px; } .nb-hero-meta { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 16px; } .nb-hero-meta .accent { color: var(--accent); } .nb-hero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(48px, 8vw, 92px); line-height: 0.95; margin: 0 0 32px; letter-spacing: -3px; color: var(--ink); } .nb-hero h1 .accent { color: var(--accent); } .nb-hero-sub { font-family: var(--display); font-size: 18px; max-width: 680px; margin: 0 0 28px; color: var(--ink); } /* /now hero variant — smaller h1 */ .nb-hero.now h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1; letter-spacing: -2px; margin-bottom: 18px; } .nb-hero.now .nb-hero-sub { font-size: 16px; color: var(--dim); } /* ─── Terminal block ───────────────────────────────────────────────── */ .nb-terminal { background: var(--surface); border: var(--border-w) solid var(--ink); padding: 20px; font-family: var(--mono); font-size: 13px; display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; max-width: 680px; box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink); margin: 0 0 32px; } .nb-terminal .prompt { color: var(--dim); } .nb-terminal .accent { color: var(--accent); } .nb-terminal a { color: var(--accent); } /* ─── Section header (numbered + dashed rule) ──────────────────────── */ .nb-section { padding: 40px 0; } .nb-section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; } .nb-section-num { font-family: var(--mono); font-size: 14px; background: var(--accent); color: var(--accent-ink); padding: 4px 10px; font-weight: 600; flex-shrink: 0; } .nb-section-title { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 4vw, 44px); margin: 0; letter-spacing: -1.5px; color: var(--ink); } .nb-section-rule { flex: 1; border-bottom: var(--border-w) dashed var(--rule); margin-bottom: 6px; min-width: 20px; } .nb-section-eyebrow { font-family: var(--mono); font-size: 11px; color: var(--dim); margin: 0 0 12px; letter-spacing: 0.5px; text-transform: uppercase; } /* ─── Card ─────────────────────────────────────────────────────────── */ .nb-card { border: var(--border-w) solid var(--ink); background: var(--surface); padding: 22px; box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink); } .nb-card.compact { padding: 18px; } .nb-card.dashed { border-style: dashed; } .nb-card-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .nb-card-name { font-family: var(--display); font-size: 26px; font-weight: 600; margin: 0; letter-spacing: -0.7px; color: var(--ink); } .nb-card.compact .nb-card-name { font-size: 20px; letter-spacing: -0.5px; } .nb-card-url { color: var(--accent); font-family: var(--mono); font-size: 12px; } .nb-card-status { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--pos); } .nb-card-body { font-size: 14px; line-height: 1.6; margin: 0; color: var(--ink); } .nb-card.compact .nb-card-body { font-size: 13px; line-height: 1.55; } .nb-card-shipped { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rule); font-family: var(--mono); font-size: 11px; color: var(--dim); } .nb-card-shipped .accent { color: var(--accent); } .nb-card-shipped a { color: var(--dim); } .nb-card-shipped a:hover { color: var(--ink); } .nb-card-meta { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--rule); } .nb-card-tag { background: var(--ink); color: var(--bg); padding: 2px 8px; font-size: 10px; font-family: var(--mono); letter-spacing: 0.5px; text-transform: uppercase; } /* ─── Card grids ───────────────────────────────────────────────────── */ .nb-grid-1 { display: grid; gap: 14px; } .nb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .nb-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .nb-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 820px) { .nb-grid-2, .nb-grid-3, .nb-grid-4 { grid-template-columns: 1fr; } } @media (min-width: 821px) and (max-width: 1100px) { .nb-grid-3, .nb-grid-4 { grid-template-columns: 1fr 1fr; } } /* ─── Experience row ───────────────────────────────────────────────── */ .nb-exp-row { border: var(--border-w) solid var(--ink); background: var(--surface); padding: 20px; display: grid; grid-template-columns: 200px 1fr; gap: 28px; box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink); } .nb-exp-row .yr { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 600; } .nb-exp-row .co { font-family: var(--display); font-size: 22px; font-weight: 600; margin-top: 4px; letter-spacing: -0.5px; line-height: 1.15; color: var(--ink); } .nb-exp-row .role { color: var(--dim); font-size: 12px; margin-top: 2px; } .nb-exp-row ul { margin: 0; padding: 0; list-style: none; font-size: 13px; display: grid; gap: 8px; align-self: center; } .nb-exp-row ul li { padding-left: 20px; position: relative; line-height: 1.5; } .nb-exp-row ul li::before { content: '→'; position: absolute; left: 0; color: var(--accent); } .nb-exp-row ul li a { color: var(--accent); text-decoration: underline; } @media (max-width: 720px) { .nb-exp-row { grid-template-columns: 1fr; gap: 14px; } } /* ─── Calendar card ────────────────────────────────────────────────── */ .nb-cal-card { border: var(--border-w) solid var(--ink); background: var(--surface); padding: 18px; box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink); display: grid; grid-template-columns: auto 1fr; gap: 16px; } .nb-cal-date { background: var(--accent); color: var(--accent-ink); padding: 10px 14px; text-align: center; font-family: var(--mono); align-self: start; } .nb-cal-date .mo { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; } .nb-cal-date .day { font-size: 22px; font-weight: 700; } .nb-cal-tag { font-size: 10px; color: var(--dim); font-family: var(--mono); text-transform: uppercase; letter-spacing: 1px; } .nb-cal-what { font-family: var(--display); font-size: 18px; font-weight: 600; margin: 2px 0 0; color: var(--ink); } .nb-cal-where { font-size: 12px; color: var(--dim); margin-top: 4px; } .nb-cal-note { font-size: 12px; margin-top: 6px; color: var(--ink); } /* ─── Targeting list (calendar inset) ──────────────────────────────── */ .nb-target { margin-top: 14px; padding: 18px; background: var(--surface); border: var(--border-w) dashed var(--ink); font-family: var(--mono); font-size: 12px; } .nb-target-eyebrow { color: var(--dim); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; } .nb-target ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; } .nb-target ul li::before { content: '→ '; color: var(--accent); } @media (max-width: 720px) { .nb-target ul { grid-template-columns: 1fr; } } /* ─── Feed card (lists inside) ─────────────────────────────────────── */ .nb-feed { border: var(--border-w) solid var(--ink); background: var(--surface); padding: 16px; box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink); } .nb-feed-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--rule); } .nb-feed-head strong { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink); } .nb-feed-head .src { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--dim); } .nb-feed ul { margin: 0; padding: 0; list-style: none; font-size: 13px; display: grid; gap: 4px; } .nb-feed ul li { line-height: 1.5; } .nb-feed .when { color: var(--dim); font-family: var(--mono); font-size: 11px; } .nb-feed .accent { color: var(--accent); } .nb-feed-podcast { font-size: 13px; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--rule); } .nb-feed ul.nb-feed-divider { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--rule); } /* ─── Stat tiles (WHOOP) ───────────────────────────────────────────── */ .nb-stat { border: var(--border-w) solid var(--ink); background: var(--surface); padding: 16px; box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink); } .nb-stat .k { font-family: var(--mono); font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; } .nb-stat .v { font-family: var(--display); font-size: 30px; margin-top: 6px; font-weight: 700; letter-spacing: -1px; color: var(--ink); } .nb-stat .v.warn { color: var(--warn); } .nb-stat .v.pos { color: var(--pos); } .nb-stat .v.danger { color: var(--danger); } /* ─── Notebook footer ──────────────────────────────────────────────── */ .nb-footer { padding: 32px 0; color: var(--dim); font-size: 12px; font-family: var(--mono); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: var(--border-w) solid var(--ink); margin-top: 32px; } .nb-footer a { color: var(--dim); } .nb-footer a:hover { color: var(--ink); } /* ─── Note block (lede / outro) ────────────────────────────────────── */ .nb-note { padding: 20px 24px; margin: 32px 0 0; background: var(--surface-2); border: var(--border-w) dashed var(--ink); font-family: var(--mono); font-size: 12px; color: var(--dim); } .nb-note a { color: var(--dim); text-decoration: underline; } .nb-note a:hover { color: var(--ink); } /* ─── Headshot ─────────────────────────────────────────────────────── */ .nb-headshot { border: var(--border-w) solid var(--ink); background: var(--surface); padding: 8px; box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink); display: inline-block; line-height: 0; } .nb-headshot img { display: block; max-width: 100%; height: auto; filter: grayscale(0.15) contrast(1.05); } /* ─── About grid (headshot + copy) ─────────────────────────────────── */ .nb-about { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; } .nb-about p { margin: 0 0 14px; line-height: 1.7; font-size: 14px; } .nb-about p:last-child { margin-bottom: 0; } .nb-about a { color: var(--accent); text-decoration: underline; } @media (max-width: 720px) { .nb-about { grid-template-columns: 1fr; } } /* ─── Prose (long-form body content for /privacy, /work sub-pages) ──── */ .nb-prose { max-width: 720px; font-size: 14px; line-height: 1.7; color: var(--ink); } .nb-prose p { margin: 0 0 14px; } .nb-prose p:last-child { margin-bottom: 0; } .nb-prose a { color: var(--accent); text-decoration: underline; } .nb-prose ul, .nb-prose ol { margin: 0 0 14px 22px; padding: 0; } .nb-prose li { margin-bottom: 6px; line-height: 1.6; } .nb-prose code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--rule); padding: 1px 6px; border-radius: 3px; } .nb-prose strong { font-weight: 600; color: var(--ink); } .nb-prose h3 { font-family: var(--display); font-size: 18px; font-weight: 600; margin: 24px 0 8px; color: var(--ink); } /* ─── Generic cron-script helpers ─────────────────────────────────── Every /now feed-sync script (update-whoop, -spotify, -trakt, -plex, -public-feeds, -projects) emits these two classes for the empty-state line and the trailing "Auto-updated …" timestamp. Feed-specific styling is handled by the .nb-feed cascade and the .nb-feed-podcast / .nb-feed-divider helpers above. */ .feed-empty { font-family: var(--mono); font-size: 12px; color: var(--dim); margin: 0 0 8px; } .feed-updated { font-family: var(--mono); font-size: 11px; color: var(--dim); margin: 12px 0 0; } .feed-updated a { color: var(--dim); text-decoration: underline; } /* ─── Case study ───────────────────────────────────────────────────── */ .nb-case { border: var(--border-w) solid var(--ink); background: var(--surface); padding: 28px; box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink); margin-bottom: 18px; } .nb-case-meta { font-family: var(--mono); font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px; } .nb-case-title { font-family: var(--display); font-size: clamp(22px, 3vw, 30px); font-weight: 600; letter-spacing: -1px; margin: 0 0 18px; line-height: 1.15; color: var(--ink); } .nb-case figure { margin: 0 0 18px; border: var(--border-w) solid var(--ink); background: var(--surface-2); padding: 6px; } .nb-case figure img { display: block; max-width: 100%; height: auto; } .nb-case figcaption { font-family: var(--mono); font-size: 11px; color: var(--dim); padding: 8px 4px 4px; border-top: 1px dashed var(--rule); margin-top: 6px; } .nb-case figcaption a { color: var(--accent); text-decoration: underline; } .nb-case p { margin: 0 0 12px; line-height: 1.65; font-size: 14px; } .nb-case p:last-child { margin-bottom: 0; } .nb-case a { color: var(--accent); text-decoration: underline; } .nb-case .reflect, .nb-case .outcome { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rule); font-size: 13px; color: var(--dim); } .nb-case .reflect strong, .nb-case .outcome strong { color: var(--ink); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .nb-case .outcome strong { color: var(--accent); } /* ─── Testimonial quote ────────────────────────────────────────────── */ .nb-quote { border: var(--border-w) solid var(--ink); background: var(--surface); padding: 22px; box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink); margin: 0; } .nb-quote blockquote { margin: 0 0 14px; font-family: var(--display); font-size: 16px; line-height: 1.55; color: var(--ink); position: relative; padding-left: 24px; } .nb-quote blockquote::before { content: '"'; position: absolute; left: 0; top: -6px; font-family: var(--display); font-size: 32px; color: var(--accent); line-height: 1; } .nb-quote figcaption { font-family: var(--mono); font-size: 12px; color: var(--dim); padding-top: 10px; border-top: 1px dashed var(--rule); } .nb-quote figcaption strong { color: var(--ink); } /* ─── Education / certifications ───────────────────────────────────── */ .nb-degree { border: var(--border-w) solid var(--ink); background: var(--surface); padding: 20px; box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink); margin-bottom: 14px; } .nb-degree h3 { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.5px; margin: 0 0 6px; color: var(--ink); } .nb-degree p { margin: 0; color: var(--dim); font-size: 13px; } .nb-certs { border: var(--border-w) dashed var(--ink); background: var(--surface-2); padding: 18px 22px; } .nb-certs h3 { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); margin: 0 0 12px; font-weight: 600; } .nb-certs ul { margin: 0; padding: 0; list-style: none; font-size: 13px; display: grid; gap: 6px; } .nb-certs ul li { padding-left: 18px; position: relative; } .nb-certs ul li::before { content: '→'; position: absolute; left: 0; color: var(--accent); } .nb-certs details { margin-top: 12px; } .nb-certs summary { cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--accent); padding: 6px 0; } .nb-certs summary:hover { color: var(--ink); } .nb-certs details[open] summary { margin-bottom: 8px; } /* ─── Skills ───────────────────────────────────────────────────────── */ .nb-skills { display: grid; gap: 14px; } .nb-skill-row { border: var(--border-w) solid var(--ink); background: var(--surface); padding: 16px 20px; box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink); display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: baseline; } .nb-skill-row dt { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .nb-skill-row dd { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink); } @media (max-width: 720px) { .nb-skill-row { grid-template-columns: 1fr; gap: 8px; } } /* ─── Memberships ──────────────────────────────────────────────────── */ .nb-membership { border: var(--border-w) solid var(--ink); background: var(--surface); padding: 20px; box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink); margin-bottom: 14px; } .nb-membership-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .nb-membership-head strong { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -0.5px; color: var(--ink); } .nb-membership-head a { color: var(--ink); text-decoration: none; } .nb-membership-head a:hover { color: var(--accent); } .nb-membership-role { font-family: var(--mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; } .nb-membership-meta { font-family: var(--mono); font-size: 11px; color: var(--dim); margin: 0 0 8px; } .nb-membership p { margin: 0; font-size: 13px; line-height: 1.6; } .nb-membership a { color: var(--accent); text-decoration: underline; } /* ─── Footer contact ───────────────────────────────────────────────── */ .nb-footer-contact { padding: 28px 0 12px; border-top: var(--border-w) solid var(--ink); margin-top: 32px; } .nb-footer-contact .name { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 6px; } .nb-footer-contact .links { font-family: var(--mono); font-size: 13px; color: var(--dim); margin: 0; display: flex; flex-wrap: wrap; gap: 16px; } .nb-footer-contact .links a { color: var(--accent); } /* ─── Reduced motion ───────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ─── Mobile padding ───────────────────────────────────────────────── */ @media (max-width: 720px) { .nb-nav-inner, .nb-main { padding-left: 24px; padding-right: 24px; } .nb-hero { padding-top: 32px; } .nb-section { padding: 28px 0; } } /* ─── Print (résumé.pdf) ─────────────────────────────────────────────── Suppress notebook ornamentation, force ATS-friendly system fonts, and reorder sections to match the live résumé layout. Graph paper, hard shadows, section numbers (/01...), the terminal block, and theme/nav chrome are all design language for screen — none of it belongs in a printed CV. Sections are reordered with flex `order` so Experience appears before Work; case studies and testimonials are hidden entirely (ATS parsers struggle with prose-heavy blocks). */ @media print { @page { size: letter; margin: 0.5in; } :root, [data-theme="dark"] { --bg: #fff; --surface: #fff; --surface-2: #fff; --ink: #000; --dim: #333; --rule: #ccc; --accent: #000; --accent-ink: #fff; --tag: #fff; --grid: transparent; --pos: #000; } /* System fonts — Geist Mono / Space Grotesk WOFF2 don't embed reliably in print PDFs. Match live print stack for ATS parity. */ body { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; font-size: 10pt; line-height: 1.4; background: #fff; color: #000; background-image: none; } /* Hide screen-only chrome and notebook ornamentation */ .nb-nav, .nb-terminal, .nb-hero-meta, .skip-link, .theme-toggle, .nb-section-num, .nb-section-rule, .nb-card-status, .nb-card-tag, .nb-headshot, .nb-note { display: none !important; } .no-print { display: none !important; } .print-only { display: inline; } /* Strip the hard-shadow card aesthetic and graph-paper grid */ .nb-card, .nb-exp-row, .nb-cal-card, .nb-target, .nb-degree, .nb-membership, .nb-quote, .nb-certs, .nb-skill-row, .nb-card.dashed { box-shadow: none !important; border: none !important; background: #fff !important; padding: 0 !important; } /* Force ATS-friendly serif/sans for all notebook labels that use --mono on screen (dates, skill categories, role tags, certifications heading). Geist Mono / typewriter aesthetic doesn't parse well in ATS pipelines. */ .nb-exp-row .yr, .nb-skill-row dt, .nb-certs h3, .nb-membership-role, .nb-membership-meta, .nb-footer, .nb-footer-contact .links { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .nb-membership-head strong, .nb-card-name, .nb-case-title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* The "8 products live · all AI-assisted..." section eyebrow is redundant in print — section heading already conveys the content. */ .nb-section-eyebrow { display: none; } /* Collapse the about grid to single column when the headshot is hidden */ .nb-about { display: block; grid-template-columns: 1fr; gap: 0; } .nb-main { max-width: 100%; padding: 0; } /* Section spacing + page-break safety */ .nb-section { padding: 0.4rem 0; border-bottom: none; break-inside: avoid; } .nb-section, article { page-break-inside: avoid; } h2, h3 { page-break-after: avoid; } /* Hero — strip the terminal/meta but keep tagline + lede */ .nb-hero { padding: 0 0 0.5rem; border-bottom: 1px solid #000; margin-bottom: 0.5rem; } .nb-hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16pt; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: #000; margin: 0 0 0.25rem; } .nb-hero h1 .accent { color: #000; } .nb-hero-sub { font-size: 10.5pt; color: #000; margin: 0 0 0.5rem; max-width: 100%; } /* Section headings — borrow live print pattern (sans, underlined) */ .nb-section-head { display: block; margin-bottom: 0.25rem; } .nb-section-title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12pt; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #000; border-bottom: 0.5pt solid #000; padding-bottom: 2pt; margin: 0.5rem 0 0.35rem; } /* Reorder for résumé scanning: Hero → About → Experience → Education → Skills → Projects → Memberships. Mirror live print order. */ .nb-main { display: flex; flex-direction: column; } .nb-hero { order: 0; } #about { order: 1; } #experience { order: 2; } #education { order: 3; } #skills { order: 4; } #work { order: 5; } #memberships { order: 6; } #contact { order: 7; } .nb-footer { order: 8; } #case-studies { display: none !important; } #testimonials { display: none !important; } /* Experience rows — keep year/co/role/bullets, drop visual flourishes */ .nb-grid-1, .nb-grid-2, .nb-grid-3, .nb-grid-4 { display: block; } .nb-exp-row { margin-bottom: 0.5rem; } .nb-exp-row .yr { font-size: 9pt; color: #333; margin-bottom: 0.1rem; } .nb-exp-row .co { font-size: 10.5pt; font-weight: 600; color: #000; display: inline; } .nb-exp-row .co a { color: #000; text-decoration: none; } .nb-exp-row .role { font-size: 9.5pt; color: #333; display: block; margin-bottom: 0.15rem; } .nb-exp-row ul { margin: 0.15rem 0 0; padding-left: 1.1rem; } .nb-exp-row ul li { font-size: 9.5pt; line-height: 1.35; margin-bottom: 0.15rem; padding-left: 0; } .nb-exp-row ul li::before { content: none; } .nb-exp-row ul li a { color: #000; text-decoration: underline; } /* Project cards — collapse to single column, strip card chrome */ .nb-card.compact { padding: 0.2rem 0 !important; } .nb-card-name { font-size: 10.5pt; font-weight: 600; margin-bottom: 0.1rem; color: #000; } .nb-card-url { display: none; } .nb-card-body { font-size: 9.5pt; line-height: 1.35; color: #000; } .nb-card-meta { display: none; } .nb-section-eyebrow { font-size: 9pt; color: #333; margin-bottom: 0.25rem; } /* Education + certifications — single column, expand the collapsed list */ .nb-degree { margin-bottom: 0.4rem; } .nb-certs h3 { font-size: 10pt; font-weight: 600; color: #000; margin: 0.25rem 0 0.15rem; border: none; } .nb-certs ul { font-size: 9pt; padding-left: 1rem; margin: 0; } .nb-certs ul li { padding-left: 0; margin-bottom: 0.15rem; } .nb-certs ul li::before { content: none; } .nb-certs details, .nb-certs details[open] { display: block; } .nb-certs details > summary { display: none; } .nb-certs details > *:not(summary) { display: revert; } /* Skills — flatten dl rows to inline label: value lines */ .nb-skills { display: block; } .nb-skill-row { display: block !important; padding: 0.15rem 0; font-size: 9.5pt; border-bottom: 0.25pt solid #ccc; } .nb-skill-row dt { display: inline; font-weight: 600; } .nb-skill-row dt::after { content: ": "; } .nb-skill-row dd { display: inline; margin: 0; } /* Memberships */ .nb-membership { margin-bottom: 0.35rem; } .nb-membership-head { display: block; } .nb-membership-role { font-size: 9.5pt; color: #333; } .nb-membership-meta { font-size: 9pt; color: #333; } /* Footer / contact — expand external URLs after links */ .nb-footer-contact, .nb-footer { border-top: 0.5pt solid #000; padding: 0.4rem 0 0; margin-top: 0.4rem; } .nb-footer-contact .name { font-size: 10pt; font-weight: 600; } .nb-footer-contact .links { font-size: 9pt; gap: 8px; } .nb-footer a, .nb-footer-contact .links a { color: #000; text-decoration: none; } .nb-footer a[href^="http"]::after, .nb-footer-contact .links a[href^="http"]::after, .nb-footer-contact .links a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; } .nb-footer-contact .links a[href^="mailto:"]::after { content: " (" attr(href) ")"; } a { color: #000; text-decoration: none; } }