/* ================================================================ Web UI kit styles — shared across all pages. ================================================================ */ a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color .2s ease, color .2s ease; } a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); } /* When loaded inside the iOS phone preview, the dynamic island + status bar overlay the top ~50px of the viewport. The mobile-preview page sets via ?frame=ios so we can pad the sticky nav below that safe area. No effect on the live site. */ html[data-frame="ios"] .nav { top: 50px; } html[data-frame="ios"] body { padding-top: 50px; } /* Blur the safe-area strip above the nav, matching the nav's own backdrop-filter, so content scrolling under the iOS status bar stays blurred instead of showing through as a solid band. Anchored on so it escapes the nav's stacking context. */ html[data-frame="ios"]::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 50px; z-index: 49; background: color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); pointer-events: none; } /* ---------- Nav (shared, multi-page) ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid transparent; transition: border-color .2s ease; } .nav.scrolled { border-bottom-color: var(--rule); } .nav-inner { max-width: 64rem; margin: 0 auto; padding: .9rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { border: none; font-size: 1.2rem; } .brand-dot { color: var(--accent); } .nav-links { display: flex; gap: 1.5rem; font-size: .88rem; color: var(--ink-muted); } .nav-links a { border: none; border-bottom: 1px solid transparent; color: inherit; padding: .25rem 0; } .nav-links a:hover { color: var(--accent-ink); } .nav-links a.current { color: var(--accent-ink); border-bottom-color: var(--accent); } .nav-toggle { display: none; background: none; border: none; padding: 6px; cursor: pointer; color: var(--ink); } .nav-toggle svg { width: 22px; height: 22px; } .nav-mobile { display: none; flex-direction: column; gap: .25rem; padding: .4rem var(--gutter) 1rem; border-top: 1px solid var(--rule); } .nav-mobile a { border: none; color: var(--ink); font-size: 1.05rem; font-family: var(--sans); padding: .55rem 0; } .nav-mobile a.current { color: var(--accent-ink); } .nav-mobile.open { display: flex; } @media (max-width: 640px) { .nav-links { display: none; } .nav-toggle { display: inline-flex; } } /* ---------- Layout ---------- */ main { max-width: 64rem; margin: 0 auto; padding: 0 var(--gutter); } .page { padding: 4rem 0 5rem; } .col { max-width: var(--measure); } /* page-top eyebrow (section label) + h2 pattern, now page-level */ .page-label { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .85rem; color: var(--accent-ink); text-transform: lowercase; letter-spacing: .06em; margin: 0 0 .75rem; } .page h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 4.5vw, 3.1rem); line-height: 1.05; letter-spacing: -.015em; margin: 0 0 2rem; } /* ---------- Hero (home page only) ---------- */ .hero { padding: 2.5rem 0 3rem; } h1.name { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 10vw, 5.75rem); line-height: .95; letter-spacing: -.02em; margin: 0 0 1.75rem; } h1.name em { font-style: italic; font-weight: 400; color: var(--accent-ink); } .lede { font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.45; color: var(--ink); max-width: 34rem; margin: 0 0 2.25rem; } .eyebrow { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .95rem; color: var(--accent-ink); letter-spacing: .02em; margin: 0 0 1.25rem; } .meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--ink-muted); font-size: .95rem; align-items: baseline; } .meta span { white-space: nowrap; } .meta .sep { color: var(--ink-faint); } .meta-label { font-family: var(--sans); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); } .meta a { color: var(--ink); border-bottom: 1px solid var(--rule); } .meta a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); } /* Home-page quick nav (cards linking to subpages) */ .home-index { margin-top: 4rem; border-top: 1px solid var(--rule); } .home-index a { display: flex; justify-content: space-between; align-items: baseline; padding: 1.35rem 0; border: 0; border-bottom: 1px solid var(--rule); color: var(--ink); gap: 1rem; } .home-index a:hover { color: var(--accent-ink); } .home-index .hi-title { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; letter-spacing: -.01em; } .home-index .hi-hint { color: var(--ink-faint); font-size: .88rem; font-family: var(--sans); } .home-index a:hover .hi-hint { color: var(--accent); } /* Home-page about block — sits inside the hero-text column, below the meta row */ .home-about { padding: 2rem 0 0; max-width: 34rem; } .home-about p { margin: 0 0 1.05rem; } .home-about p:last-child { margin-bottom: 0; } /* Hero — framed portrait (V4): hairline frame, cream mat, terracotta registration dot at bottom-right. Photo sits beside the name column on desktop, collapses beneath it on mobile. Contact details sit beneath the portrait as a compact sender-card. */ .hero--framed { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 3rem; align-items: start; padding-bottom: 4rem; } .hero--framed .hero-text > *:first-child { margin-top: 0; } /* Right column — portrait + contact flow together as one stack. Shifted 6px inside (via margin-right) so the terracotta dot's overhang still lands flush with the container's right edge (and the nav links above) instead of poking past it. */ .hero-side { justify-self: end; width: 260px; padding-top: 0.25rem; margin-right: 14px; } .hero-side .portrait-frame { margin: 0; } .hero-side .hero-contact { margin-top: 1.5rem; width: 100%; } .hero-contact { display: grid; grid-template-columns: 3.8rem 1fr; gap: .45rem 0.75rem; font-size: .85rem; line-height: 1.45; } .hero-contact dt { font-family: var(--sans); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); padding-top: .2rem; } .hero-contact dd { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--ink); overflow-wrap: anywhere; } .hero-contact dd a { color: inherit; } .hero-contact dd a.placeholder { font-style: italic; color: var(--ink-faint); border-bottom-style: dashed; } .portrait-frame { margin: 0; width: 260px; height: 320px; border: 1px solid color-mix(in oklab, var(--ink) 25%, transparent); padding: 10px; background: var(--paper, #faf5e8); position: relative; box-sizing: content-box; flex: 0 0 auto; } .portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; } /* Bottom-right mark on the portrait — a real XCharter period glyph in terracotta. Offsets compensate for the line-box geometry so the visible dot sits at the same point as the previous CSS circle: centred on (frame.right + 1px, frame.bottom + 1px). */ .portrait-frame::after { content: "."; position: absolute; right: -13px; bottom: -18px; font-family: var(--serif); font-weight: 700; font-size: 80px; line-height: 1; color: var(--accent, #c05a3b); } @media (max-width: 720px) { .hero--framed { grid-template-columns: 1fr; gap: 2rem; } .hero-side { justify-self: start; width: 100%; max-width: 22rem; order: -1; padding-top: 0; } .portrait-frame { margin: 0; width: min(200px, 60vw); height: calc(min(200px, 60vw) * 1.23); padding: 8px; } .portrait-frame::after { font-size: 64px; right: -10.2px; bottom: -15px; } } /* ---------- Research ---------- */ .paper-row { padding: 1.25rem 0; border-bottom: 1px solid var(--rule); } .paper-row:last-child { border-bottom: 0; } .paper-body { min-width: 0; } .paper-title { font-family: var(--serif); font-weight: 700; font-size: 1.08rem; line-height: 1.35; margin: 0 0 .35rem; letter-spacing: -.005em; } .paper-authors { color: var(--ink-muted); font-size: .92rem; margin: 0 0 .65rem; } .paper-authors .self { color: var(--ink); font-weight: 500; } .paper-authors a { color: var(--ink-muted); border-bottom-color: var(--rule); } .paper-authors a:hover { color: var(--accent-ink); } .paper-abstract { color: var(--ink); margin: 0 0 .55rem; font-size: .98rem; line-height: 1.55; } .paper-abstract.collapsed { display: none; } .toggle-abstract { background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: .85rem; color: var(--accent-ink); cursor: pointer; font-style: italic; font-weight: 400; } .toggle-abstract:hover { color: var(--accent); } /* ---------- Teaching ---------- */ .teach-group { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; letter-spacing: -.005em; margin: 2.5rem 0 .5rem; } .teach-group:first-of-type { margin-top: 0; } .teach-where { color: var(--ink-muted); font-weight: 400; font-size: .95rem; } .teach-list { border-top: 1px solid var(--rule); } .teach { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem 2rem; padding: 1rem 0; } .teach + .teach { padding-top: .65rem; } .teach-year { color: var(--ink-faint); font-size: .88rem; font-variant-numeric: tabular-nums; font-style: italic; font-weight: 400; padding-top: .1rem; } .teach-course { font-family: var(--serif); font-weight: 400; font-size: 1.02rem; line-height: 1.35; } .teach-sub { color: var(--ink-muted); font-weight: 400; } .teach-role { color: var(--ink-muted); font-size: .88rem; margin-top: .15rem; } .teach-role a { color: var(--ink-muted); } .teach-role a:hover { color: var(--accent-ink); } @media (max-width: 560px) { .teach { grid-template-columns: 1fr; gap: .15rem; } .teach-where { display: block; margin-top: .15rem; } } /* ---------- CV / Contact ---------- */ .cv-row { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: baseline; } .btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: .7rem 1.1rem; border-radius: 2px; font-family: var(--sans); font-size: .92rem; transition: all .2s ease; } .btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--paper); } .btn svg { width: 1em; height: 1em; } .contact-grid { display: grid; grid-template-columns: 10rem 1fr; gap: .75rem 2rem; font-size: .98rem; } .contact-grid dt { color: var(--ink-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; padding-top: .15rem; font-family: var(--sans); } .contact-grid dd { margin: 0; } @media (max-width: 560px) { .contact-grid { grid-template-columns: 1fr; gap: .15rem; } .contact-grid dt { padding-top: .75rem; } .contact-grid dt:first-of-type { padding-top: 0; } } /* Page ends at the last content block — no footer chrome. */