/* ========================================================================== Post-AI design system Adapted from Pasta-Lab.github.io's css/site.css (the PASTA lab site) -- same design tokens, layout primitives, and component classes, retargeted at this site's data-driven pages. Dropped from the source file, and why: - .pasta, .pasta__row, .pasta__icon, .pasta__letter, .pasta__word (the "PASTA" backronym list) -- this site has no such list. - .hero__loop and its @keyframes pasta-loop / dark-theme / reduced-motion overrides -- the animated sprite-sheet hero graphic is Pasta-Lab- specific brand art (assets/brand/hero-loop-sheet.webp) that was not copied here. - .faculty (the multi-PI grid container) -- this site has one PI, not a faculty grid. .pi/.pi__frame/.pi__photo/etc. are kept since a single PI card still uses them. - .student-grid (the roster grid container) -- kept .student/.student__* since they may still style individual entries. - .openings (the job-openings list container) -- kept .opening/.opening__* for the same reason. - .partner, .partner-grid, .partner__logo, .partner__mark, .partner__name, .partner__where, and .logo--perplexity/.logo--vals/.logo--ethereum/ .logo--amazon (the "Collaborators" section and its per-partner logo masks) -- no data/ file describes collaborators or partners, and the four .logo--* rules pointed at ../assets/logos/*.svg, a directory that was deliberately not copied into this repo's assets/ tree. If a collaborators section is ever added here, assets/logos/ (with its own SVGs) needs to be added too -- it does not exist today. Every design token (:root and :root[data-theme='dark'] custom properties), the spacing/type scale, and every other component class are UNCHANGED -- the palette and scales are the whole point of borrowing this stylesheet. IMPORTANT: this stylesheet requires STANDARDS mode -- the inverse of css/style.css, which requires quirks mode (see scripts/check-pages.mjs). Any page that links css/post-ai.css MUST start with and MUST NOT also link css/style.css; scripts/check-pages.mjs enforces both halves of that rule for every page in POST_AI_PAGES. */ /* --- Fonts ---------------------------------------------------------------- */ @font-face { font-family: 'Space Grotesk'; src: url('../assets/fonts/space-grotesk-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; 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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; 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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Tokens --------------------------------------------------------------- */ :root { /* surfaces and ink */ --canvas: #f4f4f2; --surface: #ffffff; --surface-2: #ecece9; --surface-inset: #e6e6e2; --ink: #17171a; --ink-2: #4a4a50; --ink-3: #5f5f67; --line: #e0e0dc; --line-strong: #cfcfc9; /* one accent, tonal per theme */ --accent: #b84a1e; --accent-hover: #a8431b; --accent-on: #ffffff; /* For small text sitting on an accent-wash background, where the plain accent drops below 4.5:1. */ --accent-strong: #9a3c17; --accent-wash: rgba(184, 74, 30, 0.09); --accent-line: rgba(184, 74, 30, 0.28); /* brand illustration colours, decoration only */ --semolina: #fdcf6b; --semolina-deep: #dca440; --basil: #8cb581; --sauce: #f38b5d; /* shape: the brand is voxels, so every corner is square */ --r-sm: 0; --r-md: 0; --r-lg: 0; --r-pill: 0; /* depth, tinted with ink rather than black */ --shadow-sm: 0 1px 2px rgba(23, 23, 26, 0.05); --shadow-md: 0 2px 4px rgba(23, 23, 26, 0.04), 0 8px 20px rgba(23, 23, 26, 0.06); --shadow-lg: 0 4px 8px rgba(23, 23, 26, 0.05), 0 18px 44px rgba(23, 23, 26, 0.1); /* type */ --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* layout */ --shell: 1200px; --gutter: clamp(1.25rem, 4vw, 3rem); --nav-h: 68px; /* motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 260ms; color-scheme: light; } :root[data-theme='dark'] { --canvas: #131315; --surface: #1b1b1e; --surface-2: #232327; --surface-inset: #101012; --ink: #edede9; --ink-2: #b4b4ba; --ink-3: #9a9aa2; --line: #2c2c31; --line-strong: #3a3a41; --accent: #f38b5d; --accent-hover: #ffa77c; --accent-on: #131315; --accent-strong: #f79a70; --accent-wash: rgba(243, 139, 93, 0.12); --accent-line: rgba(243, 139, 93, 0.32); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.4); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 18px 44px rgba(0, 0, 0, 0.5); color-scheme: dark; } /* --- Base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1.5rem); } body { margin: 0; /* A long unbroken token has no break opportunity, so on a phone it pushes the whole page sideways rather than wrapping. The longest on the site is a 71-character Etherscan URL in challenges/level_4_82457693012849571639.html, which overflows a 375px screen on its own. break-word only acts when the alternative is overflow, so ordinary text is untouched. Everything else that could scroll horizontally is already contained: each grid has a narrow-screen override, pre and table scroll inside themselves, and main's overflow-x: clip holds the full-bleed rules. */ overflow-wrap: break-word; background: var(--canvas); color: var(--ink-2); font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; letter-spacing: -0.022em; line-height: 1.12; text-wrap: balance; } p { margin: 0 0 1rem; max-width: 68ch; } p:last-child { margin-bottom: 0; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--accent-hover); } img { max-width: 100%; display: block; } ul, ol { margin: 0; padding: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } ::selection { background: var(--accent-wash); color: var(--ink); } main:focus { outline: none; } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 0.5rem; top: -4rem; z-index: 200; padding: 0.7rem 1.1rem; color: var(--accent-on); background: var(--accent); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: top 160ms var(--ease); } .skip-link:focus { top: 0.5rem; color: var(--accent-on); } /* --- Navigation ----------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: color-mix(in srgb, var(--canvas) 86%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .nav[data-stuck='true'] { border-bottom-color: var(--line); background: color-mix(in srgb, var(--canvas) 94%, transparent); } .nav__inner { height: 100%; display: flex; align-items: center; gap: 1.5rem; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -0.02em; flex: none; } .brand__mark { width: 38px; height: auto; } .brand__name { font-size: 1.0625rem; } .brand:hover { color: var(--ink); } .brand:hover .brand__mark { transform: rotate(-6deg) scale(1.06); } .brand__mark { transition: transform var(--dur) var(--ease); } .nav__menu { margin-left: auto; } .nav__links { display: flex; align-items: center; gap: clamp(0.35rem, 1.4vw, 1rem); list-style: none; } .nav__links a { display: block; padding: 0.4rem 0.55rem; color: var(--ink-2); font-size: 0.9375rem; font-weight: 500; text-decoration: none; border-radius: var(--r-sm); white-space: nowrap; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .nav__links a:hover { color: var(--ink); background: var(--surface-2); } .nav__links a[aria-current='page'] { color: var(--accent); } .nav__tools { display: flex; align-items: center; gap: 0.35rem; flex: none; } .icon-btn { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .icon-btn:hover { color: var(--ink); background: var(--surface-2); border-color: var(--line); } .icon-btn svg { width: 19px; height: 19px; fill: currentColor; } .theme-toggle .theme-toggle__moon { display: none; } :root[data-theme='dark'] .theme-toggle .theme-toggle__moon { display: block; } :root[data-theme='dark'] .theme-toggle .theme-toggle__sun { display: none; } .nav__burger { display: none; } @media (max-width: 860px) { .nav__burger { display: grid; } /* Burger beside the theme toggle at the right edge, rather than stranded next to the brand. The auto margin moves from .nav__menu to .brand, so the empty space opens AFTER the brand instead of before the menu -- everything downstream then collects at the right. Done this way rather than with flex `order` on the burger: order changes paint position only, so the tab sequence would still run brand, burger, theme while the eye sees brand, theme, burger, and keyboard focus would jump right then back left. Here visual order and DOM order stay identical. .nav__menu is a zero-width flex item at this size (.nav__links is position: fixed), so it contributes nothing but two container gaps between the burger and the toggle -- hence the tighter gap below, which is what makes the two icons read as one cluster instead of two controls. */ .brand { margin-right: auto; } .nav__menu { margin-left: 0; } .nav__inner { gap: 0.35rem; } .nav__links { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--gutter) 1rem; background: var(--canvas); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms; } .nav__links[data-open='true'] { opacity: 1; transform: none; visibility: visible; } .nav__links a { padding: 0.75rem 0.5rem; font-size: 1rem; } } /* --- Sections and headings ------------------------------------------------ */ .section { padding-block: clamp(3.5rem, 8vw, 6.5rem); } .section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .section--edge { border-top: 1px solid var(--line); } .section__head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } .section__head--split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .section__head h2 { font-size: clamp(1.65rem, 3.2vw, 2.35rem); } .section__head p { margin-top: 0.85rem; max-width: none; line-height: 1.7; color: var(--ink-2); } .page-head { padding-block: clamp(2.5rem, 6vw, 4.25rem) clamp(1.5rem, 3vw, 2.25rem); } .page-head h1 { font-size: clamp(2.1rem, 5vw, 3.35rem); } /* Intro copy spans its container so the text edges line up with the cards and section blocks below, rather than stopping at the default reading measure. */ .page-head p { margin-top: 1rem; max-width: none; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); } /* --- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.25rem; font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: none; } .btn--primary { background: var(--accent); color: var(--accent-on); } .btn--primary:hover { background: var(--accent-hover); color: var(--accent-on); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn--ghost:hover { background: var(--surface); border-color: var(--ink-3); color: var(--ink); } .btn svg { width: 16px; height: 16px; fill: currentColor; flex: none; } /* --- Hero ----------------------------------------------------------------- */ .hero { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); overflow: hidden; } /* Portrait left, identity right, bio spanning both (see .hero__bio further down, which is where the span is set). `auto` for the portrait column so it takes the width the image asks for rather than a share of the shell, and `start` so a short identity block does not float in the middle of a tall portrait. * * This rule and the 900px query below it are the ONLY .hero__grid * declarations in the file, and they are meant to stay that way: a second * copy appended near the bottom is how grid-template-columns here and in the * query below both went dead -- overridden unconditionally from 550 lines * away, so editing either one did nothing and every check stayed green. */ .hero__grid { display: grid; /* Identity column first, portrait second. */ grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: clamp(1.5rem, 5vw, 4rem); /* stretch, not start: the art column then takes the identity block's full height and .pi__frame grows into it, which is what ties the portrait's height to the text beside it. Shrink the

and the image follows. */ align-items: stretch; } .hero__title { font-size: clamp(2.4rem, 6.5vw, 4.2rem); font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; } .hero__lede { margin-top: 1.4rem; max-width: 46ch; font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--ink-2); } .hero__lede b { color: var(--ink); font-weight: 600; } .hero__art { position: relative; display: flex; flex-direction: column; min-height: 190px; /* The cap lives HERE, on the container, not on the portrait alone. This is a column flex container, so align-items: stretch gives every child the column's width. The portrait carried its own 340px cap while the style chips below it stretched, which matched only by coincidence on a phone -- there the content column IS about 340px. Once .hero__grid collapses to one column at 900px the column goes full width, the portrait stayed 340 and the chips ran to 740 on an iPad, wider than the image they control. Capping the container bounds both together, and gives .pi__frame its width by stretch -- which is what it needs, having no intrinsic width of its own (its only child is absolutely positioned, so it measured 0x280 before any width was supplied). */ width: min(100%, 340px); } /* .pi__frame ships a fixed 280px height for its use in a card elsewhere. Here it fills whatever height the identity column leaves after the style chips, so a 300x340 portrait stops letterboxing against the frame's gradient -- that grey down both sides was the frame being wider than the image needed. */ .hero__art .pi__frame { height: auto; flex: 1 1 auto; min-height: 190px; } @media (max-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } } /* --- Statement ------------------------------------------------------------ */ /* Closes the hero rather than sitting in its own section. */ .statement { margin-top: clamp(2.5rem, 6vw, 4.5rem); max-width: min(100%, 52ch); font-size: clamp(1.3rem, 2.6vw, 1.95rem); font-weight: 500; line-height: 1.34; letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; } /* --- Tags and meta chips -------------------------------------------------- */ .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; } .tag { padding: 0.24rem 0.62rem; color: var(--ink-3); background: var(--surface-2); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; } .chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.15rem; } .chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.75rem; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 0.82rem; font-weight: 500; text-decoration: none; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .chip:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-wash); } /* --- Filter buttons ------------------------------------------------------- */ .filters { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 2rem; } .filter { padding: 0.42rem 0.95rem; font-family: inherit; font-size: 0.875rem; font-weight: 500; color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .filter:hover { color: var(--ink); border-color: var(--line-strong); } .filter[aria-pressed='true'] { color: var(--accent-on); background: var(--accent); border-color: var(--accent); } .filter__count { margin-left: 0.5rem; font-family: var(--font-mono); font-size: 0.76rem; opacity: 0.65; } /* --- Publications --------------------------------------------------------- */ .result-count { margin: -1rem 0 0; color: var(--ink-3); font-size: 0.9rem; } .pub-year { display: flex; align-items: center; gap: 1rem; margin: 2.5rem 0 1.1rem; color: var(--ink); font-family: var(--font-mono); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.04em; } .pub-year::after { content: ''; flex: 1; height: 1px; background: var(--line); } .pub-list { list-style: none; display: grid; gap: 0.5rem; } .pub { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.15rem; padding: 1.05rem 1.15rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .pub:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .pub__venue { align-self: start; color: var(--accent); font-family: var(--font-mono); font-size: 0.755rem; font-weight: 600; line-height: 1.45; letter-spacing: 0.02em; text-transform: uppercase; overflow-wrap: break-word; } .pub__title { margin: 0; font-size: 1.03rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.012em; } .pub__title a { color: var(--ink); text-decoration: none; } .pub__title a:hover { color: var(--accent); } .pub__authors { margin: 0.4rem 0 0; max-width: none; font-size: 0.9rem; color: var(--ink-3); line-height: 1.55; } .pub__authors .is-pi { color: var(--ink); font-weight: 600; } .pub__domains { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; } .domain { padding: 0.12rem 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-2); border: 1px solid var(--line-strong); } /* All four read the same. One accent runs the page, and the label text already says which domain it is. */ .pub__award { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.55rem; padding: 0.2rem 0.6rem; color: var(--ink); background: color-mix(in srgb, var(--semolina) 34%, var(--surface)); border: 1px solid color-mix(in srgb, var(--semolina-deep) 40%, transparent); border-radius: var(--r-pill); font-size: 0.775rem; font-weight: 600; } .pub__links { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; } .pub__link { padding: 0.18rem 0.55rem; color: var(--ink-2); background: var(--surface-2); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 0.735rem; text-decoration: none; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .pub__link:hover { color: var(--accent-on); background: var(--accent); } @media (max-width: 700px) { .pub { grid-template-columns: 1fr; gap: 0.5rem; } .pub__venue { order: -1; } } /* --- People --------------------------------------------------------------- */ .style-switch { display: inline-flex; gap: 0.2rem; padding: 0.25rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); } .style-switch button { padding: 0.38rem 0.9rem; font-family: inherit; font-size: 0.83rem; font-weight: 600; color: var(--ink-3); background: transparent; border: 0; border-radius: var(--r-pill); cursor: pointer; transition: color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .style-switch button:hover { color: var(--ink); } .style-switch button[aria-pressed='true'] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); } .pi { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .pi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } /* The three portrait styles have different framing (a bust versus a full figure), so the photo is given a definite box and contained inside it. Percentages on a grid item would resolve to auto here and overflow. */ .pi__frame { position: relative; height: 280px; background: radial-gradient(120% 78% at 50% 100%, var(--accent-wash), transparent 70%), var(--surface-inset); overflow: hidden; } .pi__photo { position: absolute; top: 1.1rem; left: 1.1rem; width: calc(100% - 2.2rem); height: calc(100% - 1.1rem); object-fit: contain; object-position: center bottom; transition: opacity 220ms var(--ease), transform 320ms var(--ease); } .pi__photo.is-swapping { opacity: 0; transform: translateY(6px) scale(0.98); } .pi__body { padding: 1.15rem 1.25rem 1.35rem; } .pi__name { font-size: 1.18rem; } .pi__role { margin: 0.3rem 0 0; font-size: 0.875rem; color: var(--ink-3); } .pi__affil { margin: 0.55rem 0 0; font-size: 0.9rem; font-weight: 600; color: var(--accent); } .pi__interests { margin: 0.75rem 0 0; font-size: 0.885rem; color: var(--ink-2); line-height: 1.55; } .pi__links { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1rem; } .student { padding: 0.85rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color var(--dur) var(--ease); } .student:hover { border-color: var(--accent-line); } .student__name { display: block; color: var(--ink); font-weight: 600; font-size: 0.97rem; } .student__name a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent-line); } .student:hover .student__name a { color: var(--accent); border-bottom-color: var(--accent); } .student__affil { display: block; margin-top: 0.15rem; color: var(--ink-3); font-size: 0.82rem; } .student__note { color: var(--ink-3); font-size: 0.78rem; font-style: italic; } /* --- Projects ------------------------------------------------------------- */ /* This was `display: grid` with NO grid-template-columns, which makes a single column -- every project card spanned the full page width. The cards were never badly tuned; the column rule was missing. */ .projects { display: grid; gap: clamp(0.9rem, 2vw, 1.35rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } .project { padding: clamp(1rem, 2vw, 1.35rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .project__title { font-size: clamp(1.4rem, 2.4vw, 1.8rem); } .project__tagline { margin-top: 0.55rem; max-width: none; font-size: 1.05rem; color: var(--ink); font-weight: 500; } .project__body { margin-top: 1rem; } /* These sit inside a full-width card, so the text tracks the card rather than stopping at the default reading measure. */ .project__body p { max-width: none; font-size: 0.975rem; line-height: 1.7; } .project__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; } .status { display: inline-flex; align-items: center; padding: 0.2rem 0.62rem; color: var(--accent-strong); background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .project__people { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--ink-3); max-width: none; } .project__people b { color: var(--ink-2); font-weight: 600; } /* --- Join page ------------------------------------------------------------ */ .opening { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: clamp(1.25rem, 2.6vw, 1.75rem) 0; border-bottom: 1px solid var(--line); } .opening__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; } .opening__role { font-size: clamp(1.1rem, 2vw, 1.35rem); } .opening__where { padding: 0.18rem 0.6rem; color: var(--accent-strong); background: var(--accent-wash); border: 1px solid var(--accent-line); font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; } .opening__about { margin: 0; max-width: none; color: var(--ink-2); font-size: 0.965rem; line-height: 1.7; } .contact-note { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); } .contact-note p { max-width: none; line-height: 1.7; } /* --- Footer --------------------------------------------------------------- */ .footer { margin-top: clamp(3rem, 7vw, 5rem); padding-block: clamp(2.25rem, 4vw, 3.25rem); border-top: 1px solid var(--line); background: var(--surface); } .footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); } .footer__slogan { margin-top: 0.85rem; max-width: 34ch; font-size: 0.925rem; color: var(--ink-3); } .footer h2 { margin-bottom: 0.75rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .footer ul { list-style: none; display: grid; gap: 0.45rem; } .footer ul a { color: var(--ink-2); font-size: 0.92rem; text-decoration: none; } .footer ul a:hover { color: var(--accent); } .footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.35rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-3); } @media (max-width: 700px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__grid > :first-child { grid-column: 1 / -1; } } /* --- States --------------------------------------------------------------- */ .state { padding: 2.5rem 1.5rem; text-align: center; color: var(--ink-3); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); } .state p { margin-inline: auto; } .state--error { border-color: var(--accent-line); color: var(--ink-2); } /* --- Reveal on scroll ----------------------------------------------------- */ /* Scoped to .js, set synchronously in the document head, so the page is fully readable when scripting is off instead of stuck at zero opacity. */ @media (prefers-reduced-motion: no-preference) { .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms); } .js [data-reveal].is-visible { opacity: 1; transform: none; } .js .hero [data-reveal] { transition-duration: 760ms; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* --- Print ---------------------------------------------------------------- */ @media print { .nav, .footer, .filters, .hero__art { display: none; } body { background: #fff; color: #000; } } /* The Chinese name rides beside the Latin one at a smaller size, so the pair reads as one signature rather than two competing names. */ .brand__cn { margin-left: 0.4rem; color: var(--ink-3); font-size: 0.9375rem; font-weight: 500; } /* The header row collapses in stages, dropping whatever costs least first. At full width it holds brand + five links + four icons + theme toggle + version switch, which needs about 1100px. The burger only arrives at 860px, so every width in between rendered a nav wider than its own viewport and put a horizontal scrollbar on the whole page -- measured at 861px it hung 196px past the edge, with the version switch clipped mid-word. Measured overflow, and what removing each part recovers: width as-was -social -switch -both 861 196 39 32 0 900 161 4 0 0 960 107 0 0 0 1050 25 0 0 0 Neither alone clears 861px, hence two stages. Social goes first because it costs nothing: the footer's "Elsewhere" column carries all four of these links (check #14 enforces that in both directions), so hiding the header row cannot strand a profile. The version switch goes second, and only below 960px where dropping the icons is not enough -- it is the one control with no duplicate anywhere, so it stays visible as long as the row can hold it. The nav links are never dropped here; they collapse into the burger at 860px, and losing primary navigation would cost more than either. */ .nav__social { display: flex; align-items: center; gap: 0.15rem; } @media (max-width: 1100px) { .nav__social { display: none; } } @media (max-width: 960px) { .nav__tools .mode-switch { display: none; } } /* The bio spans both hero columns. It is prose meant to be read; beside the portrait it inherited hero__lede's 46ch cap and wrapped into a narrow ribbon, which cost vertical space AND readability. * * The columns and align-items this pairs with live on .hero__grid up in the * Hero section, NOT here: a copy of them used to sit on this line, silently * beating the originals from 550 lines away. */ .hero__bio { grid-column: 1 / -1; margin-top: 1.5rem; color: var(--ink-2); font-size: clamp(1.02rem, 1.5vw, 1.12rem); line-height: 1.65; } .hero__bio p + p { margin-top: 0.85rem; } /* The user asked in plain words that this bio use the entire linewidth. Without this, emitting real

tags (see renderBio in js/home.js) pulls in the global `p { max-width: 68ch }` rule, which would cap the bio at roughly two-thirds of the shell -- narrower than intended, not wider. */ .hero__bio p { max-width: none; } .hero__bio strong { color: var(--ink); font-weight: 600; } .hero__cn { color: var(--ink-3); font-size: 0.62em; font-weight: 500; } .hero__art .style-switch { margin-top: 1.1rem; justify-content: center; } /* 900px, the same breakpoint .hero__grid stacks at up in the Hero section, not a nearby-but-different one: two breakpoints for the same layout is how the 833-900px silent-two-column gap got introduced in the first place. .hero__grid's own stacking declaration stays with the rest of that rule and is deliberately not repeated here; this block exists solely because .hero__bio's `grid-column: 1 / -1` is set just above and has to be undone after it. */ @media (max-width: 900px) { .hero__bio { grid-column: auto; } } /* A slim accent band, not a box: this sits directly under the hero and must not out-shout it. */ .recruit { padding: clamp(1.1rem, 2.5vw, 1.6rem) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--accent-wash); } /* max-width: none on both -- the global `p { max-width: 68ch }` capped these two blocks while every neighbour spanned the full shell, so the recruiting callout and the teaching prose read as indented for no stated reason. Same fix the hero bio already carries. */ .recruit p { margin: 0 0 0.6rem; max-width: none; color: var(--ink-2); } .recruit p:last-child { margin-bottom: 0; } .recruit ul { margin: 0.3rem 0 0.7rem 1.1rem; color: var(--ink-2); } /* .callout-list's own styling (list-style:none plus a bullet via ::before) lives only in css/style.css, which the Post-AI pages never load (quirks mode, out of scope here) -- so without this, the recruiting callout's bullets fall back to default browser discs. Mirrors css/style.css:730-738, adapted to sit as a li::before marker (that file's version puts the bullet in margin-right on the li itself, which this page's list has no room for once list-style:none removes the default marker box). */ .recruit .callout-list { list-style: none; margin-left: 0; padding-left: 1.6em; } .recruit .callout-list li { position: relative; } .recruit .callout-list li::before { content: "•"; position: absolute; left: -1.1em; color: var(--accent); } .news-rows { list-style: none; margin: 0; padding: 0; } .news-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 1rem; padding: 0.55rem 0 0.55rem 0.85rem; border-bottom: 1px solid var(--line); box-shadow: inset 2px 0 0 transparent; } .news-row__date { color: var(--ink-3); font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.02em; } .news-row__body { color: var(--ink-2); } /* An inset shadow rather than a border: a real border would widen the box and push pinned rows out of alignment with the rest. Every row reserves the same left padding, so only the colour changes between marked and unmarked. */ .news-row--pinned { box-shadow: inset 2px 0 0 var(--accent); } .news-row--pinned .news-row__body { color: var(--ink); } /* column-reverse paints the