/* Yonathan Daniel, MD — site design system.
Serif editorial system in the spirit of the CV: bright paper, near-black
ink, one deep blue accent used deliberately.
Webfonts are loaded via +
in each page's , not an @import here — an @import inside this file
cannot start downloading until this stylesheet itself has arrived, which
serializes the two requests and delays first paint. */
:root {
--color-bg: #ffffff;
--color-surface: #f5f7f9;
--color-surface-2: #eef2f6;
--color-text: #161a1f;
--color-accent: #1156a3;
--color-accent-ink: #0c3d75;
--color-divider: color-mix(in srgb, #161a1f 13%, transparent);
--color-neutral-100: #f6f8fa;
--color-neutral-200: #e8ecf1;
--color-neutral-300: #d3dae1;
--color-neutral-400: #b3bcc6;
--color-neutral-500: #939daa;
--color-neutral-600: #74808e;
--color-neutral-700: #58636f;
--color-neutral-800: #3d4650;
--color-neutral-900: #262c33;
--color-accent-100: #eaf1fb;
--color-accent-200: #d3e3f6;
--color-accent-300: #a9c8ec;
--color-accent-700: #0c3d75;
--color-accent-800: #092c54;
--font-heading: "Source Serif 4", Georgia, serif;
--font-body: "Source Serif 4", Georgia, serif;
/* Utility sans: interface labels only — eyebrows, meta, tags, nav,
footer, captions. Headings, body copy and buttons stay in the serif. */
--font-ui: "IBM Plex Sans", system-ui, sans-serif;
--space-1: 5px;
--space-2: 10px;
--space-3: 15px;
--space-4: 20px;
--space-6: 30px;
--space-8: 40px;
--space-10: 56px;
--space-12: 80px;
--radius-sm: 2px;
--radius-md: 3px;
--shadow-sm: 0 1px 2px color-mix(in srgb, #262c33 10%, transparent);
--shadow-md: 0 6px 20px color-mix(in srgb, #262c33 12%, transparent);
--shadow-lg: 0 16px 48px color-mix(in srgb, #262c33 18%, transparent);
}
* , *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.015em;
margin: 0;
}
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-ink); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
font-size: 12px;
margin-top: var(--space-1);
color: var(--color-neutral-700);
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 24%, transparent); }
.text-muted { color: var(--color-neutral-700); }
/* — skip link: first focusable element on every page, visible only on focus — */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
padding: 12px 20px;
background: var(--color-accent);
color: #fff;
font-family: var(--font-heading);
font-weight: 600;
font-size: 14.5px;
text-decoration: none;
border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; color: #fff; }
.wrap {
max-width: 1080px;
margin: 0 auto;
padding-inline: 40px;
}
.eyebrow {
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent-700);
font-family: var(--font-ui);
font-weight: 500;
font-style: normal;
}
/* Same treatment for the eyebrow-style spans that carry their own inline
sizing/colour — the class supplies only the face and the tracking. */
.ui-label {
font-family: var(--font-ui);
font-weight: 500;
letter-spacing: 0.14em;
}
/* — nav — */
.site-nav {
position: sticky;
top: 0;
z-index: 20;
background: color-mix(in srgb, var(--color-bg) 92%, transparent);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--color-divider);
}
.site-nav .wrap {
display: flex;
align-items: baseline;
gap: 28px;
padding-block: 16px;
}
.site-nav .brand {
font-family: var(--font-heading);
font-weight: 600;
font-size: 19px;
color: var(--color-text);
text-decoration: none;
letter-spacing: -0.01em;
margin-right: auto;
}
.site-nav nav { display: flex; gap: 24px; }
.site-nav nav a {
color: var(--color-neutral-800);
text-decoration: none;
font-family: var(--font-ui);
font-size: 12.5px;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.site-nav nav a:hover, .site-nav nav a[aria-current="page"] { color: var(--color-accent); }
.nav-toggle { display: none; }
/* — buttons — */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
text-decoration: none;
font-family: var(--font-heading);
font-weight: 600;
font-size: 14.5px;
line-height: 1.2;
padding: 12px 22px;
border-radius: var(--radius-md);
border: 1px solid transparent;
white-space: nowrap;
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-ink); color: #fff; }
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-surface); color: var(--color-text); }
.btn-ghost { color: var(--color-accent); padding-inline: 4px; }
.btn-ghost:hover { color: var(--color-accent-ink); }
.btn svg { display: block; flex: none; }
/* — tags — */
.tag {
display: inline-flex;
align-items: center;
font-family: var(--font-ui);
font-size: 11.5px;
letter-spacing: 0.02em;
padding: 4px 11px;
border-radius: 999px;
background: var(--color-accent-100);
color: var(--color-accent-700);
}
/* — section rhythm — */
.section { padding-block: var(--space-12); scroll-margin-top: 76px; }
.section + .section { border-top: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent); }
.section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: var(--space-8); }
.section-head .eyebrow { flex: none; }
.section-head h2 { font-size: 40px; }
.rule-fill { flex: 1 1 auto; height: 1px; background: color-mix(in srgb, var(--color-accent) 25%, transparent); }
/* — cards — */
.card {
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
padding: var(--space-4);
background: var(--color-bg);
}
.card:hover { border-color: var(--color-accent-300); box-shadow: var(--shadow-sm); }
/* — byline list rows — */
.byline-row {
display: grid;
grid-template-columns: 170px 1fr 148px;
gap: 24px;
align-items: baseline;
padding: 20px 16px;
margin-inline: -16px;
border-bottom: 1px solid var(--color-divider);
color: inherit;
text-decoration: none;
}
.byline-row:hover { background: var(--color-surface); }
.byline-row .meta {
font-family: var(--font-ui);
font-size: 11.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-neutral-600);
}
.byline-row .headline {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 600;
line-height: 1.22;
letter-spacing: -0.008em;
color: var(--color-text);
}
/* Article preview. Sits in the third column; the row still lays out
correctly when a story has no image yet — the cell is simply empty. */
.byline-row .thumb {
width: 148px;
/* height:auto is required — the img's height attribute would otherwise
win over aspect-ratio and render the preview at its intrinsic height */
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
align-self: center;
border: 1px solid var(--color-divider);
border-radius: var(--radius-sm);
}
/* — stat numerals — */
.stat-num {
font-family: var(--font-heading);
font-weight: 600;
font-size: 30px;
color: var(--color-text);
line-height: 1;
}
.stat-label { margin-top: 10px; font-family: var(--font-ui); font-size: 13px; line-height: 1.45; color: var(--color-neutral-800); }
/* — footer — */
.site-footer {
border-top: 1px solid var(--color-divider);
padding-block: 40px;
}
.site-footer .wrap {
display: flex;
flex-wrap: wrap;
gap: 12px 28px;
align-items: center;
font-family: var(--font-ui);
font-size: 12px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--color-neutral-600);
}
.site-footer a { color: var(--color-neutral-700); }
.site-footer .spacer { flex: 1 1 auto; }
/* — photography teaser: native aspect ratios, equal height — */
.photo-strip { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.photo-strip a {
display: block;
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
overflow: hidden;
line-height: 0;
}
.photo-strip img { height: 200px; width: auto; max-width: none; display: block; }
/* — On air: broadcast segments — */
.reel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.reel-card {
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
}
/* A reel card that links out to the aired segment. Same box as .reel-card,
plus a bled-to-the-edge still and a play badge. */
.reel-card-link {
color: inherit;
text-decoration: none;
}
.reel-card-link:hover { border-color: var(--color-accent-300); box-shadow: var(--shadow-sm); }
.reel-card-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.reel-thumb {
position: relative;
display: block;
margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 4px;
border-bottom: 1px solid var(--color-divider);
background: var(--color-neutral-200);
line-height: 0;
}
.reel-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* Play badge: circle (::before) + triangle (::after), linked cards only.
Parked in the bottom-left corner rather than dead-centre so it never
sits on top of the subject's face. */
.reel-card-link .reel-thumb::before {
content: '';
position: absolute;
left: 12px; bottom: 12px;
width: 38px; height: 38px;
border-radius: 50%;
background: color-mix(in srgb, #0d1116 62%, transparent);
}
.reel-card-link .reel-thumb::after {
content: '';
position: absolute;
left: 26px; bottom: 24px;
border-style: solid;
border-width: 7px 0 7px 12px;
border-color: transparent transparent transparent #fff;
}
@media (prefers-reduced-motion: no-preference) {
.reel-card-link .reel-thumb::before { transition: background 140ms ease; }
}
.reel-card-link:hover .reel-thumb::before { background: var(--color-accent); }
/* both classes land on the same element, so match .reel-note's specificity */
.reel-note.reel-watch { color: var(--color-accent); }
.reel-card-link:hover .reel-note.reel-watch { color: var(--color-accent-ink); }
.reel-show {
font-family: var(--font-ui);
font-weight: 500;
font-size: 11.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-accent-700);
}
.reel-title {
font-family: var(--font-heading);
font-size: 19px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.008em;
}
.reel-meta {
font-family: var(--font-ui);
font-size: 12px;
letter-spacing: 0.02em;
color: var(--color-neutral-600);
}
.reel-topic { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--color-neutral-800); }
.reel-note {
font-family: var(--font-ui);
font-size: 11.5px;
letter-spacing: 0.02em;
color: var(--color-neutral-500);
margin-top: auto;
}
/* — headshot frame — */
.portrait {
width: 260px;
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
overflow: hidden;
}
.portrait img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) {
.wrap { padding-inline: 22px; }
.section { padding-block: var(--space-10); }
.section-head h2 { font-size: 32px; }
.site-nav .wrap { flex-wrap: wrap; row-gap: 6px; padding-block: 12px; }
.site-nav nav { gap: 14px 18px; flex-wrap: wrap; width: 100%; }
/* stack the row; the preview drops below the headline at a readable size */
.byline-row { grid-template-columns: 1fr; gap: 6px; }
.byline-row .thumb { width: 100%; max-width: 320px; margin-top: 10px; align-self: start; }
.mq-stack { grid-template-columns: 1fr !important; }
.mq-stack > figure, .mq-stack > .portrait { width: 180px !important; }
.mq-4col { grid-template-columns: repeat(2, 1fr) !important; }
.reel-grid { grid-template-columns: minmax(0, 1fr); }
/* the hero lede is set large for desktop; ease it off on narrow screens
so it doesn't run to a dozen lines before the portrait and buttons */
.hero-lede { font-size: 21px !important; }
}
@media (max-width: 640px) {
.photo-strip img { height: 150px; }
}