/* ========================================================================= A. Feder Cooper — site styles Editorial-minimal, content-first. Serif display + clean sans body. ========================================================================= */ /* --- Self-hosted fonts (no third-party request; zero-CLS metric-matched fallbacks) --- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/inter-var.woff2) format("woff2"); } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/newsreader-var.woff2) format("woff2"); } /* Metric-matched fallbacks (Capsize) so the real fonts swap in with no reflow */ @font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"); ascent-override: 90.4365%; descent-override: 22.518%; line-gap-override: 0%; size-adjust: 107.1194%; } @font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); ascent-override: 76.4676%; descent-override: 27.5699%; size-adjust: 96.1192%; } :root { /* Type */ --font-display: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif; --font-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* Light theme (default) */ --bg: #fcfcfb; --bg-subtle: #f3f3f0; --text: #1b1b1a; --text-muted: #6c6c68; --border: #e6e5e0; --border-strong: #d6d5cf; --accent: #345b8c; --accent-hover: #21436c; --accent-soft: rgba(52, 91, 140, 0.09); --honor-bg: #f4ecd8; --honor-text: #87601a; --selection: rgba(52, 91, 140, 0.16); /* Scale */ --measure: 44rem; /* prose reading cap */ --measure-wide: 58rem; /* page frame (nav + content) */ --space: 1.5rem; } @media (prefers-color-scheme: dark) { :root { --bg: #15171b; --bg-subtle: #20242c; --text: #e8e7e3; --text-muted: #9a9da4; --border: #2a2f38; --border-strong: #39404b; --accent: #8fb6f0; --accent-hover: #aecbf6; --accent-soft: rgba(143, 182, 240, 0.12); --honor-bg: #2d2a1d; --honor-text: #ddc079; --selection: rgba(143, 182, 240, 0.22); } } /* Manual override via toggle */ :root[data-theme="light"] { --bg: #fcfcfb; --bg-subtle: #f3f3f0; --text: #1b1b1a; --text-muted: #6c6c68; --border: #e6e5e0; --border-strong: #d6d5cf; --accent: #345b8c; --accent-hover: #21436c; --accent-soft: rgba(52, 91, 140, 0.09); --honor-bg: #f4ecd8; --honor-text: #87601a; --selection: rgba(52, 91, 140, 0.16); } :root[data-theme="dark"] { --bg: #15171b; --bg-subtle: #20242c; --text: #e8e7e3; --text-muted: #9a9da4; --border: #2a2f38; --border-strong: #39404b; --accent: #8fb6f0; --accent-hover: #aecbf6; --accent-soft: rgba(143, 182, 240, 0.12); --honor-bg: #2d2a1d; --honor-text: #ddc079; --selection: rgba(143, 182, 240, 0.22); } /* ----------------------------------------------------------------- base -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "cv05"; } ::selection { background: var(--selection); } /* Smooth cross-fade when switching themes. The `theme-anim` class is added to only for the duration of a toggle, so page loads and hovers aren't affected. */ html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color 0.45s ease, border-color 0.45s ease, color 0.4s ease, box-shadow 0.45s ease, fill 0.4s ease !important; } @media (prefers-reduced-motion: reduce) { html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: none !important; } } a { color: var(--accent); text-decoration: none; text-underline-offset: 2px; transition: color 0.15s ease; } a:hover { color: var(--accent-hover); text-decoration: underline; } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; } strong { font-weight: 600; } em, i { font-style: italic; } /* ---------------------------------------------------------------- layout -- */ .wrap { width: min(88%, 720px); margin: 0 auto; } .wrap--wide { width: min(88%, 1500px); /* fluid: scales with the window, caps on huge screens */ margin: 0 auto; } main { padding-bottom: 5rem; } /* Keep running prose at a readable measure inside the wider frame */ .lead, .callout, .hero__roles, .page-intro, .section > p, .entry__desc, .entry__title { max-width: 64rem; } /* ------------------------------------------------------------------- nav -- */ .nav { width: min(88%, 1500px); margin: 0 auto; padding: 1.4rem 0; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .nav__home { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--text); letter-spacing: 0.01em; } .nav__home:hover { color: var(--accent); text-decoration: none; } .nav__links { display: flex; align-items: center; gap: 1.4rem; font-size: 0.92rem; } .nav__links a { color: var(--text-muted); } .nav__links a:hover { color: var(--accent); text-decoration: none; } .nav__links a.is-current { color: var(--text); } .theme-toggle { background: none; border: 1px solid var(--border-strong); color: var(--text-muted); width: 2rem; height: 2rem; border-radius: 999px; cursor: pointer; display: inline-grid; place-items: center; font-size: 0.95rem; line-height: 1; padding: 0; transition: border-color 0.15s ease, color 0.15s ease; } .theme-toggle:hover { color: var(--text); border-color: var(--text-muted); } /* ------------------------------------------------------------------ hero -- */ .hero { padding: 1.5rem 0 0.5rem; } .hero__name { font-size: clamp(2.4rem, 6vw, 3.4rem); margin: 0 0 0.2rem; letter-spacing: -0.012em; } .hero__roles { color: var(--text-muted); font-size: 1rem; line-height: 1.5; margin: 0.6rem 0 0; } .hero__roles .sep { opacity: 0.5; padding: 0 0.1rem; } .hero__top { display: flex; gap: 2rem; align-items: flex-start; justify-content: space-between; } .hero__portrait { flex: 0 0 auto; width: 116px; height: 116px; border-radius: 50%; object-fit: cover; filter: grayscale(8%); /* Framed ring: gap in the page color + a hairline outline. Theme-aware, so it stays seamless in dark mode (the "gap" is just the dark background). */ box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--border-strong), 0 6px 16px rgba(0, 0, 0, 0.14); } .lead { font-size: 1.12rem; line-height: 1.7; margin: 1.8rem 0 0; } .callout { margin: 1.6rem 0 0; padding: 0.55rem 0 0.55rem 1.1rem; border-left: 2px solid var(--accent); color: var(--text); font-size: 1.02rem; } /* ----------------------------------------------------------- meta links -- */ .meta-links { margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.65rem; font-size: 0.92rem; } .pill-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.34rem 0.8rem; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); background: transparent; transition: border-color 0.15s ease, background 0.15s ease; } .pill-link:hover { text-decoration: none; border-color: var(--accent); background: var(--accent-soft); color: var(--text); } .pill-link .ico { width: 16px; height: 16px; opacity: 0.85; } /* --------------------------------------------------------------- section -- */ .section { margin-top: 3.6rem; } .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; margin-bottom: 1.6rem; } .section__title { font-size: 1.5rem; margin: 0; } .section__aside { font-size: 0.9rem; color: var(--text-muted); } .section__aside a { color: var(--text-muted); border-bottom: 1px solid var(--border-strong); } .section__aside a:hover { color: var(--accent); text-decoration: none; border-color: var(--accent); } /* -------------------------------------------------------- publications --- */ .pub-tools { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; align-items: center; margin-bottom: 1.8rem; } .pub-search { flex: 1 1 14rem; min-width: 0; padding: 0.5rem 0.85rem; font: inherit; font-size: 0.95rem; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 8px; transition: border-color 0.15s ease; } .pub-search:focus { outline: none; border-color: var(--accent); } .pub-search::placeholder { color: var(--text-muted); } .filters { display: flex; flex-wrap: wrap; gap: 0.4rem; } .filter { font: inherit; font-size: 0.84rem; padding: 0.32rem 0.7rem; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s ease; } .filter:hover { color: var(--text); border-color: var(--text-muted); } .filter.is-active { color: var(--bg); background: var(--accent); border-color: var(--accent); } .pub-count { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 1.2rem; } .pub-list { list-style: none; margin: 0; padding: 0; } .pub { padding: 1.15rem 0; border-top: 1px solid var(--border); } .pub:first-child { border-top: none; } .pub__title { font-size: 1.04rem; line-height: 1.4; margin: 0 0 0.25rem; font-weight: 600; font-family: var(--font-body); } .pub__title a { color: var(--text); } .pub__title a:hover { color: var(--accent); } .pub__authors { font-size: 0.95rem; color: var(--text-muted); line-height: 1.55; } .pub__authors .me { color: var(--text); font-weight: 600; } .pub__venue { font-size: 0.95rem; color: var(--text-muted); margin-top: 0.15rem; } .pub__venue em { color: var(--text); font-style: italic; } .pub__note { font-style: normal; } .pub__foot { margin-top: 0.55rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.55rem; } .pub__links { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.85rem; } .pub__links a { color: var(--text-muted); padding: 0.12rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; } .pub__links a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; } .tag { font-size: 0.74rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.12rem 0.5rem; border-radius: 999px; white-space: nowrap; } .tag--type { background: var(--bg-subtle); color: var(--text-muted); } .tag--honor { background: var(--honor-bg); color: var(--honor-text); font-weight: 600; } .spacer { flex: 1 1 auto; } .empty { color: var(--text-muted); font-style: italic; padding: 2rem 0; } noscript .pub-fallback { color: var(--text-muted); } /* --------------------------------------------------------------- writing -- */ .entry-year { margin-top: 2.6rem; } .entry-year__label { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-muted); margin: 0 0 0.8rem; font-weight: 500; } .entry { padding: 0.9rem 0; border-top: 1px solid var(--border); } .entry:first-of-type { border-top: none; } .entry__title { font-size: 1.05rem; margin: 0 0 0.15rem; font-weight: 600; } .entry__title a { color: var(--text); } .entry__title a:hover { color: var(--accent); } .entry__desc { color: var(--text-muted); font-size: 0.97rem; } .entry__soon { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.4rem; } /* ---------------------------------------------------------------- footer -- */ .footer { border-top: 1px solid var(--border); margin-top: 4rem; padding: 2rem 0 3rem; color: var(--text-muted); font-size: 0.88rem; } .footer .wrap, .footer-inner { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; align-items: center; justify-content: space-between; } .footer a { color: var(--text-muted); } .footer a:hover { color: var(--accent); } .footer__personal { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; } /* Icon links in the footer (e.g. Pasta) */ .icon-link { display: inline-flex; align-items: center; color: var(--text-muted); } .icon-link svg { width: 16px; height: 16px; display: block; } .icon-link:hover { color: var(--accent); } /* Easter egg: tiny trash-can that lets Oscar pop out of the bottom corner */ .grouch { background: none; border: none; padding: 0; margin: 0; line-height: 0; color: var(--text-muted); cursor: pointer; transition: color 0.2s ease, transform 0.2s ease; } .grouch:hover { color: var(--accent); transform: translateY(-1px); } .grouch svg { width: 13px; height: 13px; display: block; } .grouch-pop { position: fixed; right: 22px; bottom: 0; width: 150px; max-width: 38vw; z-index: 50; pointer-events: none; transform: translateY(105%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } /* Desktop: reveal on hover. Touch is handled in app.js via the .show class. */ @media (hover: hover) { .footer:has(.grouch:hover) .grouch-pop, .footer:has(.grouch:focus-visible) .grouch-pop { transform: translateY(0); } } .grouch-pop.show { transform: translateY(0); pointer-events: auto; } .grouch-pop img { width: 100%; display: block; border-radius: 10px 10px 0 0; border: 1px solid var(--border); border-bottom: none; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.22); } /* --------------------------------------------------------------- gallery -- */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem; margin-top: 1.5rem; } .gallery img, .gallery video { width: 100%; height: 220px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; transition: transform 0.4s ease; } .gallery a { cursor: zoom-in; display: block; } .gallery a:hover img { transform: scale(1.02); } .page-intro { color: var(--text-muted); margin-top: 0.5rem; } /* --------------------------------------------------------------- lightbox -- */ .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.86); display: none; align-items: center; justify-content: center; padding: 4vmin; cursor: zoom-out; opacity: 0; transition: opacity 0.2s ease; } .lightbox.show { display: flex; opacity: 1; } .lightbox img, .lightbox video { max-width: 100%; max-height: 92vh; border-radius: 6px; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5); } /* ---------------------------------------------------------------- article -- */ .article { max-width: 44rem; } .article .post-meta { color: var(--text-muted); font-size: 0.95rem; margin: 0.4rem 0 2.4rem; } .article h2 { font-size: 1.6rem; margin: 2.6rem 0 0.8rem; } .article h3 { font-size: 1.2rem; margin: 2rem 0 0.6rem; font-weight: 500; } .article p { margin: 0 0 1.1rem; } .article ol, .article ul { padding-left: 1.4rem; margin: 0 0 1.1rem; } .article li { margin-bottom: 0.6rem; } .article blockquote { margin: 1.6rem 0; padding: 0.4rem 0 0.4rem 1.2rem; border-left: 2px solid var(--border-strong); color: var(--text-muted); font-style: italic; } .article figure { margin: 2rem 0; } .article figure img { width: 100%; border-radius: 6px; border: 1px solid var(--border); } .article figcaption { font-size: 0.88rem; color: var(--text-muted); margin-top: 0.5rem; text-align: center; } /* Footnote (hover tooltip) and inline citation */ .footnote, .citation-tooltip { position: relative; cursor: help; color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--text-muted); } .footnote::after, .citation-tooltip .tooltip-text { content: attr(data-footnote); position: absolute; bottom: 135%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 270px; background: var(--bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: 6px; padding: 8px 10px; font-size: 0.85rem; font-style: normal; line-height: 1.45; text-align: left; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 20; } .citation-tooltip .tooltip-text { content: none; } .footnote:hover::after, .citation-tooltip:hover .tooltip-text { opacity: 1; } .section-link { color: var(--accent); } .references { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .references h2 { font-size: 1.3rem; } .references ol { padding-left: 1.4rem; font-size: 0.95rem; color: var(--text-muted); } .references li { margin-bottom: 0.9rem; } .references li a { word-break: break-word; } /* ------------------------------------------------------------ responsive -- */ @media (max-width: 600px) { body { font-size: 16px; } .hero__top { flex-direction: column-reverse; align-items: flex-start; gap: 1.2rem; } .hero__portrait { width: 88px; height: 88px; } .nav { flex-wrap: wrap; gap: 0.6rem 1rem; } .section__head { flex-direction: column; gap: 0.3rem; } } @media print { .nav, .theme-toggle, .pub-tools, .footer { display: none; } a { color: var(--text); } }