/* ========================================================================== /resume — a screen + print rendering of public/Brian_Reed_Resume.pdf. Self-contained: this is the only stylesheet on the route, so it carries its own reset and forces a light "paper" look regardless of the page theme. Fonts load from Google Fonts in the page : Geologica sets the header block, DM Sans everything else. Layout is one grid repeated everywhere: a rail on the left for section labels, and a single content column capped to a readable measure. Everything aligns to those two tracks, which is what makes the page scannable at a glance. Dates deliberately stay on the role line rather than in a column of their own: an untagged PDF is read geometrically, and a separate date column gets hoisted away from the roles it belongs to. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --ink: #111111; --body: #26262a; --muted: #55555c; --faint: #85858d; --rule: #dcdad5; --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Display face, header block only — the name and the title under it. */ --display: 'Geologica', var(--sans); /* Letter page geometry */ --page-w: 8.5in; --page-h: 11in; --pad-x: 0.65in; --pad-y: 0.5in; /* The two tracks every row aligns to. */ --rail: 0.95in; --rail-gap: 0.3in; /* Prose measure: ~80 characters at the 14px body size. Type size and measure move together — enlarging one without the other just trades bigger glyphs for more wrapped lines. */ --measure: 5.95in; /* 4px spacing scale. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 18px; --s6: 28px; } html { background: #e7e5e1; /* The résumé is paper regardless of the rest of the site's theme, so pin the UA's scrollbars and form controls to light too. */ color-scheme: light; } body { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding: 28px 16px; } /* Each .page is a physical 8.5in × 11in letter sheet. */ .pages { display: flex; flex-direction: column; align-items: center; gap: 24px; } .page { width: var(--page-w); min-height: var(--page-h); max-width: 100%; background: #fff; color: var(--body); padding: var(--pad-y) var(--pad-x); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 8px 28px rgba(0, 0, 0, 0.1); } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } /* Inline middle-dot separator shared by contact / skills / meta rows. The markup already puts a real space on each side, so this only tops it up. */ .dot { color: var(--faint); margin: 0 0.1em; } .muted { color: var(--muted); } /* ---------- Header ---------- */ .hd { margin-bottom: var(--s6); } .name { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1.02; letter-spacing: -1px; color: var(--ink); } .sub { font-family: var(--display); font-size: 15px; color: var(--muted); margin-top: var(--s2); } .contact-line { font-size: 12.5px; color: var(--muted); margin-top: var(--s1); } /* ---------- The page grid ---------- */ .sec { display: grid; grid-template-columns: var(--rail) 1fr; column-gap: var(--rail-gap); align-items: start; border-top: 1px solid var(--rule); padding-top: var(--s3); margin-top: var(--s5); } .page > .sec:first-child { margin-top: 0; } .sec-label { grid-column: 1; font-size: 10.5px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); /* Nudge the small caps onto the same optical baseline as the first row. */ padding-top: 3px; } .sec-body { grid-column: 2; min-width: 0; } /* ---------- Summary ---------- */ .summary { max-width: var(--measure); color: var(--body); } /* ---------- Skills ---------- Lists of short atoms rather than prose, so they take the full column instead of the reading measure the paragraphs are held to. */ .skills-grid { display: grid; grid-template-columns: 76px 1fr; row-gap: var(--s2); column-gap: var(--s3); } .skills-label { font-size: 12px; color: var(--faint); padding-top: 2px; } .skills-values { color: var(--ink); min-width: 0; } /* A skill is one atom: wrap between entries, never inside a name (which would otherwise break "AI-assisted" at its hyphen). */ .skill { white-space: nowrap; } /* ---------- Experience ---------- */ .job { margin-bottom: var(--s5); page-break-inside: avoid; break-inside: avoid; } .sec-body > .job:last-child { margin-bottom: 0; } /* Role left, dates hard right against the measure, so the entry blocks share a right edge with the prose below them. */ .job-hd { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); max-width: var(--measure); } .dates { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; } .role { font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: -0.1px; color: var(--ink); } .job-meta { font-size: 13.5px; color: var(--muted); max-width: var(--measure); } .job-link { font-size: 12.5px; color: var(--faint); white-space: nowrap; } .bullets { list-style: none; margin-top: var(--s2); } .bullets li { position: relative; padding-left: 16px; max-width: var(--measure); color: var(--body); margin-bottom: var(--s1); } .bullets li:last-child { margin-bottom: 0; } .bullets li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 7px; height: 1px; background: var(--faint); } /* Compact rows (early career, military, certifications) carry no bullets, so they need less room between them than a full entry. */ .job.compact { margin-bottom: var(--s3); } /* ---------- Intro card (modal shown on load) ---------- A native opened with showModal() (see client.ts). The dialog *is* the card — the browser puts it in the top layer and centres it, so there is no wrapper overlay to position and no z-index to manage. The dim and blur move to ::backdrop, which the UA paints behind the top layer. Closed is the default state: a without `open` is display:none, so nothing here needs to hide it if the script does not run. */ .intro-card { /* Undo the UA's default dialog box, then rebuild it as the card. */ margin: auto; border: 0; padding: 34px 36px 32px; width: calc(100% - 48px); max-width: 400px; background: #fff; border-radius: 12px; text-align: center; color: var(--body); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4); animation: intro-fade 0.25s ease-out; } /* showModal() makes the pages behind inert, but inert does not stop scrolling — without this you can wheel past content you cannot click. Degrades to the old behaviour (scrollable) wherever :has() is unsupported. */ html:has(dialog.intro-card[open]) { overflow: hidden; } .intro-card::backdrop { background: rgba(15, 13, 10, 0.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: intro-fade 0.25s ease-out; } @keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } } .intro-eyebrow { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; } .intro-title { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.4px; color: var(--ink); } .intro-text { font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: 8px; } .intro-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; } .intro-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border-radius: 8px; border: 1px solid var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); background: #fff; cursor: pointer; user-select: none; transition: background 0.15s ease, color 0.15s ease; } .intro-btn:hover { background: #f1efea; text-decoration: none; } .intro-btn-primary { background: var(--ink); color: #fff; } .intro-btn-primary:hover { background: #2a2a2a; color: #fff; } .intro-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* ---------- Small screens ---------- Below the sheet width there is no room for the rail, so it collapses: dates run inline above the role and every row falls into a single column. */ @media screen and (max-width: 820px) { body { padding: 16px 0; } .pages { gap: 16px; } .page { min-height: 0; padding: 32px 20px; } /* Narrower than the longest skill name, so breaking inside one beats overflowing the sheet. */ .skill { white-space: normal; } .name { font-size: 32px; } .sec { grid-template-columns: 1fr; row-gap: var(--s2); } .sec-label, .sec-body { grid-column: 1; } .sec-label { padding-top: 0; } /* No room for a role and its dates side by side; the dates lead instead. */ .job-hd { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 2px; } .skills-grid { grid-template-columns: 1fr; row-gap: 2px; } .skills-label { margin-top: var(--s2); } } /* ---------- Print ---------- */ @page { size: letter; margin: 0; } @media print { html, body { background: #fff; } body { padding: 0; /* Never strand a single line of a paragraph across a page break. */ orphans: 2; widows: 2; } /* Printing with the modal still open would otherwise put the card on page one; the backdrop needs clearing too, since the top layer prints. */ .intro-card, .intro-card::backdrop { display: none !important; } .pages { display: block; gap: 0; } .page { width: auto; min-height: auto; max-width: none; margin: 0; box-shadow: none; /* Padding stands in for the page margin (@page margin is 0). */ break-after: page; } .page:last-child { break-after: auto; } }