is a direct child of , leaving headings centred to the reading measure while paragraphs ran the full column. */ /* 04 Top dock ========================================================================== */ /* Glass dock: content stays faintly visible through it as the page moves underneath. The heavy blur is what keeps label text legible over whatever scrolls past - without it, a low alpha alone would make the labels sit on moving content and become hard to read. */ .site-nav { position: sticky; top: 0; z-index: 100; background: rgba(12, 12, 13, 0.55); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--line); } /* Browsers without backdrop-filter get a solid bar instead of unreadable text floating over the page content. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-nav { background: rgba(10, 10, 10, 0.96); } } /* The name belongs in the hero, not the dock. */ .nav-brand { display: none; } .nav-links { display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap; width: 100%; max-width: var(--wrap); margin-inline: auto; padding: 8px clamp(10px, 4vw, 30px); } .nav-links a { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 14px; border-radius: 10px; color: var(--muted); font-size: 0.9rem; font-weight: 450; transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .nav-links a:hover { color: var(--heading); background: rgba(255, 255, 255, 0.07); text-decoration: none; } .nav-links a:active { transform: scale(0.97); } /* The current page gets a rule that grows out from the centre. */ .nav-links a[aria-current="page"] { color: var(--heading); } /* Wider spacing between dock items on anything above a phone. Kept off small screens because the four labels only just fit one row at 320px, and extra gap there would wrap them. */ @media (min-width: 620px) { .nav-links { gap: clamp(10px, 2.2vw, 30px); } .nav-links a { padding-inline: 6px; } } .nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1.5px; border-radius: 2px; background: var(--heading); transform-origin: center; animation: nav-underline 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes nav-underline { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } /* Scroll-driven condense: the bar tightens and deepens as the page moves. Pure CSS - browsers without scroll timelines simply keep the static bar. */ @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .site-nav { animation: nav-condense linear both; animation-timeline: scroll(root block); animation-range: 0 140px; } /* Deepens a little on scroll but stays glass - going to 0.94 here made the bar opaque the moment you scrolled, losing the effect entirely. */ @keyframes nav-condense { to { background: rgba(12, 12, 13, 0.72); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); } } .nav-links { animation: nav-tighten linear both; animation-timeline: scroll(root block); animation-range: 0 140px; } @keyframes nav-tighten { to { padding-block: 4px; } } } } /* 05 Page headers ========================================================================== */ body > header { padding-block: clamp(1.8rem, 4vw, 3rem) 0; } body > header h1 { margin-bottom: 0.7rem; } .subtitle, .lab-tagline, .error-sub { color: var(--muted); font-size: 1.08rem; line-height: 1.6; } /* Only the title block is centred - the page title, its one-line standfirst and the action buttons under it. Nothing here targets a container, because .project-header on several pages wraps the whole article body, and setting text-align on it centred every paragraph on the page. Running text is always left-aligned: centred prose gives the eye no fixed left edge to return to on each new line. */ body > header > h1, .page-head h1, .lab-hero h1, .lab-hero .lab-eyebrow, .lab-hero .lab-tagline, .guide-header h1, .curriculum-header h1, .project-header > h1, .error-code, .error-message { text-align: center; } /* Only the first paragraph of a header block is the standfirst - these sections carry ordinary body copy after it on several pages. */ .page-head > .lede, .page-head > .subtitle, body > header > .subtitle, body > header > .lede, .lab-hero > p:first-of-type, .guide-header > p:first-of-type, .curriculum-header > p:first-of-type, .error-sub { text-align: center; margin-inline: auto; } /* .page-head holds only a title block (title, standfirst, one action), so it is safe to centre wholesale - unlike .project-header, which on several pages wraps the entire article body. */ .page-head, .page-head > .wrap { text-align: center; } .page-head .lede, .page-head .subtitle { margin-inline: auto; } .page-head .header-links { justify-content: center; } .page-head .back-link { display: inline-flex; } /* The first section follows a header that already carries a rule and its own bottom margin, so it does not need a second full gap stacked on top. */ .page-head + .block, .page-head + section, body > header + main > .block:first-of-type { padding-top: clamp(0.6rem, 1.5vw, 1.2rem); } /* Action rows under a title sit centred beneath it. */ .page-head > .header-links, .lab-hero > .header-links, .guide-header > .header-links, .curriculum-header > .header-links, body > header > .header-links { justify-content: center; } /* Title blocks: eyebrow, large centred title, one narrow standfirst, then a lot of air. No dividing rule - the whitespace does that job. */ .page-head, .guide-header, .curriculum-header, .lab-hero, body > header { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem); margin-bottom: 0; border-bottom: none; } .page-head h1, .lab-hero h1, .guide-header h1, .curriculum-header h1, body > header > h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); line-height: 1.08; letter-spacing: -0.028em; margin-bottom: 1.1rem; } /* Only the FIRST paragraph is the standfirst. These header blocks contain ordinary body prose further down on some pages, and centring that made it unreadable - hence :first-of-type rather than every

. */ .page-head .lede, .page-head .subtitle, body > header > .subtitle, body > header > .lede, .lab-hero > p:first-of-type, .lab-tagline, .guide-header > p:first-of-type, .curriculum-header > p:first-of-type { max-width: 46ch; margin-inline: auto; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.55; color: var(--muted); } /* The eyebrow sits above the title as a quiet label. */ .lab-eyebrow, .page-head .cd-kicker, body > header .cd-kicker { text-align: center; margin-bottom: 0.9rem; } /* Actions sit well below the standfirst, not crowded against it. */ .page-head .header-links, .lab-hero .header-links, .guide-header .header-links, .curriculum-header .header-links, body > header .header-links { margin-top: 2rem; } /* .project-header is not a title block on every page - on several it wraps the whole article - so it only gets spacing, never centring. */ .project-header { padding-bottom: 1.4rem; margin-bottom: 1.8rem; } .lab-eyebrow, .cd-kicker, .post-meta, .lab-meta, .contact-meta { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.7rem; } .post-meta, .lab-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; } .lede, .cd-lede, .curriculum-intro { font-size: 1.18rem; line-height: 1.65; color: var(--muted); margin-bottom: 1.6rem; } /* Rows of actions */ .header-links, .section-cta, .cd-cta, .resource-links, .contact-social-row, .form-actions, .language-selector, .share-section { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 1.6rem 0; } /* The copy-link control closes the page, so it is centred under the article rather than left-hanging off the last paragraph. */ .share-section { justify-content: center; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); } .share-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); } /* Buttons - outlined, never filled, except the one primary. */ .btn-pill, .pill, .back-link, .resource-link, .lang-btn, .submit-btn, .error-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--heading); font-family: var(--font); font-size: 0.9rem; font-weight: 450; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease; } .btn-pill:hover, .pill:hover, .back-link:hover, .resource-link:hover, .lang-btn:hover, .submit-btn:hover, .error-link:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--line-strong); text-decoration: none; } .btn-pill svg, .pill svg, .back-link svg { width: 15px; height: 15px; flex: 0 0 auto; } .pill.primary, .submit-btn, .lang-btn.active { background: var(--heading); border-color: var(--heading); color: var(--bg); } .pill.primary:hover, .submit-btn:hover, .lang-btn.active:hover { background: #ffffff; border-color: #ffffff; color: var(--bg); } .submit-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* 06 Hero ========================================================================== */ /* The hero is an introduction, not a landing screen: it stays short enough that the first section of actual work is visible without scrolling. */ .hero { padding-block: clamp(1.6rem, 3.5vw, 2.6rem) 0; } /* Centred stack at every width: portrait, name, bio, links. One layout that behaves the same from a 320px phone to a 4K display - nothing to reflow, nothing to break at an in-between size. column-reverse because the portrait comes last in the markup. */ .hero-inner { display: flex; flex-direction: column-reverse; align-items: center; gap: clamp(12px, 2vw, 18px); text-align: center; } .hero-text { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; } .hero-text h1 { font-size: clamp(1.7rem, 3.6vw, 2.35rem); margin-bottom: 0.5rem; } .bio { font-size: 1.05rem; line-height: 1.6; color: var(--text); margin-bottom: 1.15rem; margin-inline: auto; max-width: 56ch; } .bio strong { color: var(--heading); font-weight: 500; } .xbio { font-style: italic; color: var(--text); } .hero-portrait { flex: 0 0 auto; width: clamp(88px, 9vw, 112px); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: var(--sunk); border: 3px solid #ffffff; transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease; } .hero-portrait:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); } .hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; } .links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; } .icon-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); transition: color 0.16s ease, border-color 0.16s ease; } .icon-link:hover { color: var(--heading); border-color: var(--line-strong); transform: translateY(-2px); } .icon-link svg { width: 18px; height: 18px; } /* On a wide screen the whole action row should sit on one line, so the hero controls run slightly tighter than the 44px touch minimum kept on phones. */ @media (min-width: 701px) { .links { gap: 7px; } .links .icon-link { width: 40px; height: 40px; } .links .pill { min-height: 40px; padding: 8px 15px; font-size: 0.87rem; } } /* 07 Sections ========================================================================== */ .block { padding-block: var(--gap) 0; } /* The first section already sits under a page header with its own rule and bottom margin, so it does not need a second full gap on top of that. */ main > .block:first-child, main > .wrap:first-child > .block:first-child { padding-top: clamp(1rem, 2vw, 1.6rem); } .sec-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 14px; margin-bottom: 0.5rem; border-bottom: 1px solid var(--line); } .sec-num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--faint); } .sec-head h2 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.7rem); } /* 08 Entries ========================================================================== */ .entries { display: flex; flex-direction: column; } /* Rows in a document, divided by a rule - not stacked cards. */ .entry { display: grid; grid-template-columns: 150px 1fr; gap: clamp(14px, 3vw, 34px); align-items: start; padding-block: 1.6rem; border-bottom: 1px solid var(--line); } .entry:last-child { border-bottom: none; } .entry-date { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); padding-top: 0.3rem; } .entry-body { display: flex; gap: 16px; min-width: 0; } .entry-text { min-width: 0; } /* Three kinds of logo tile, distinguished by what the artwork already is: .entry-logo real company logos, drawn dark on white -> white tile .entry-logo.icon SVGs drawn for this theme -> dark tile .entry-logo.cover photographs -> fill it */ .entry-logo { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; background: #ffffff; overflow: hidden; display: flex; align-items: center; justify-content: center; } .entry-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; } .entry-logo.icon { background: var(--sunk); } .entry-logo.icon img { padding: 9px; } .entry-logo.cover { background: var(--sunk); } .entry-logo.cover img { padding: 0; object-fit: cover; } /* These letterform marks stand in for a missing logo and sit on the white tile, so they take dark ink - the muted grey they used to inherit was unreadable against it. */ .mono-mark { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: #1c1c1e; } .serif-mark { font-size: 1.2rem; color: #1c1c1e; } .entry-logo.icon .mono-mark, .entry-logo.icon .serif-mark { color: var(--muted); } /* The Lossfunk file is a white wordmark on transparency, so on the white tile the other logos use it would vanish. Inverting it to black keeps this tile the same size and colour as the rest, so every row's text stays aligned. */ .entry-logo.lossfunk-mark img { filter: invert(1); padding: 7px; } .entry-title { font-size: 1.08rem; font-weight: 600; line-height: 1.4; margin: 0 0 0.4rem; color: var(--heading); } .entry-title a { color: var(--heading); } .entry-title a:hover { color: var(--accent); text-decoration: none; } .entry-text p { margin: 0 0 0.6rem; font-size: 0.98rem; color: var(--muted); } /* 09 Cards & lists ========================================================================== */ .card-grid, .achievement-grid, .theme-grid, .skills-grid, .obs-grid, .focus-list, .paper-list { display: grid; gap: 0; margin: 1.4rem 0 0; padding: 0; list-style: none; } .card-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 clamp(24px, 4vw, 48px); } .achievement-grid, .theme-grid, .obs-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 clamp(24px, 4vw, 44px); } .skills-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(24px, 4vw, 40px); } /* Flat rows: a rule on top, nothing else. */ .card, .achievement-card, .theme-item, .obs-card, .week-card, .timeline-card, .focus-item, .paper-item, .summit-stat, .contact-item, .research-paper { display: block; padding-block: 1.4rem; border-top: 1px solid var(--line); background: none; } .card { display: flex; flex-direction: column; gap: 5px; } .card:hover .card-title, .focus-item:hover .focus-title { color: var(--accent); } .card:hover { text-decoration: none; } .card-title, .focus-title, .week-title, .paper-title { font-size: 1.04rem; font-weight: 600; color: var(--heading); line-height: 1.4; transition: color 0.16s ease; } .card-meta, .obs-label, .week-number, .credit, .caption, .cd-shot-cap, .paper-authors { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--faint); } .card-excerpt, .focus-description, .week-description, .obs-value, .paper-description, .timeline-content, .figure-explainer { font-size: 0.97rem; line-height: 1.62; color: var(--muted); margin: 0; } .obs-card { display: flex; flex-direction: column; gap: 4px; } .obs-label { text-transform: uppercase; } .obs-value strong { color: var(--heading); } .week-header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 0.4rem; } .week-number { text-transform: uppercase; } .week-topics { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 0.93rem; color: var(--muted); } /* The stats are bare s in an unclassed wrapper, so the wrapper is selected by what it contains and laid out as a row of figures. */ div:has(> .summit-stat) { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 clamp(20px, 4vw, 40px); margin: 1.2rem 0; } .summit-stat .number { display: block; font-size: 1.9rem; font-weight: 600; color: var(--heading); } .summit-stat .label { font-family: var(--font-mono); font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); } .skill-group { border: none; padding: 0; } .skill-group-title { display: block; font-family: var(--font-mono); font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--faint); margin-bottom: 0.8rem; } /* 10 Tags ========================================================================== */ .tags, .skill-pills, .tech-stack, .cd-points { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.7rem 0 0; padding: 0; list-style: none; } .tag, .skill-pill, .highlight-pill { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.78rem; white-space: nowrap; } .title-tag { font-size: 0.72rem; padding: 1px 9px; vertical-align: middle; } /* Category classes are kept neutral on purpose - colour is reserved for links, so the page stays quiet. */ .tag.research, .tag.systems, .tag.pytorch, .tag.cuda, .tag.vision, .tag.perception, .tag.medical, .tag.agent, .tag.design, .tag.data, .tag.community, .tag.python, .tag.javascript, .tag.soft { color: var(--muted); } /* 11 Timeline ========================================================================== */ /* Markup here is: li > .date + .timeline-card > .timeline-content > [logo, text] so .timeline-content is the row, not .timeline-card. */ .timeline { list-style: none; padding: 0; margin: 1.6rem 0 0; } .timeline li { margin: 0; padding-block: 1.7rem; border-top: 1px solid var(--line); } .timeline li:first-child { border-top: none; padding-top: 0.8rem; } .timeline-card { display: block; } .timeline-content { display: flex; gap: 16px; align-items: flex-start; } .timeline-content > div:last-child { min-width: 0; flex: 1 1 auto; } .timeline-logo-placeholder { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: var(--sunk); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); } .timeline-logo-placeholder svg { width: 22px; height: 22px; } /* The rows are written with
runs, so they need the leading set here. */ .timeline-content > div:last-child { line-height: 1.72; } .timeline-content b { font-size: 1.04rem; font-weight: 600; color: var(--heading); } .timeline-content b a { color: var(--heading); } .timeline-content b a:hover { color: var(--accent); } .timeline-content .tag { margin-top: 0.3rem; } .timeline .date, .date { display: block; margin-bottom: 0.7rem; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); } /* 12 Papers & resources ========================================================================== */ .paper-item { margin: 0; } .paper-header { margin-bottom: 0.4rem; } .paper-title { display: inline; margin-right: 5px; } .paper-authors { font-size: 0.85rem; } .paper-description { margin-bottom: 0.7rem; } .paper-links { display: flex; flex-wrap: wrap; gap: 14px; } .paper-links a { font-size: 0.85rem; color: var(--accent); } /* 13 Figures, code & math ========================================================================== */ /* Images sit in their own band of space, centred, and never wider than the text column plus a little - a full-bleed diagram beside a 70ch paragraph reads as two unrelated things. */ .figure-frame, figure { margin: 2.4rem 0; padding: 0; border: none; background: none; } .figure-frame img, figure img { width: auto; max-width: 100%; max-height: 78vh; border-radius: 8px; margin-inline: auto; background: var(--sunk); } figcaption, .caption, .cd-shot-cap, .figure-explainer { display: block; margin-top: 0.85rem; font-family: var(--font); font-size: 0.88rem; line-height: 1.55; color: var(--faint); letter-spacing: 0; max-width: var(--measure); } /* These class names are used on both elements and on

wrappers around an image, so they are styled as containers and the inner image is centred separately below. */ .featured-image, .project-img-large, .cd-shot { display: block; max-width: 100%; margin: 2rem auto; border-radius: 8px; } img.featured-image, img.project-img-large, img.cd-shot { width: auto; max-height: 72vh; background: var(--sunk); } /* Centre images inside their wrapper by making the wrapper do the centring. Auto margins are unreliable here because these images carry intrinsic widths and per-page inline sizing; a flex column centres them whatever width they end up at. The caption stays a normal block beneath. */ figure, .figure-frame, div.featured-image, div.project-img-large, div.cd-shot { display: flex; flex-direction: column; align-items: center; } figure > figcaption, .figure-frame > figcaption, .figure-frame > .caption, .figure-frame > .figure-explainer { align-self: center; width: 100%; max-width: var(--measure); } article img, main img { margin-inline: auto; } /* Loose images inside article prose get the same treatment, so pages that never used .figure-frame still line up with the ones that did. */ article > img, article p > img, article section > img { max-width: 100%; max-height: 78vh; width: auto; border-radius: 8px; margin: 2rem auto; background: var(--sunk); } code { font-family: var(--font-mono); font-size: 0.88em; padding: 0.12em 0.36em; border-radius: 4px; background: var(--sunk); color: var(--text); } /* Code is a distinct kind of content, so it gets a real panel: its own surface, a hairline edge, and room to breathe. It also breaks out slightly wider than the prose measure, because code lines do not wrap. */ pre, .code-block, .primer-code { margin: 2rem auto; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: #0e0e10; overflow-x: auto; -webkit-overflow-scrolling: touch; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.65; tab-size: 2; } pre code, .code-block code { padding: 0; background: none; color: var(--text); font-size: inherit; } /* Program output and training logs read as results, not as source: dimmer ink, a marked left edge, so they are never mistaken for code to run. */ .codelog { border-left: 3px solid var(--line-strong); color: var(--muted); } /* Results tables get a defined header and quiet row rules, so figures are scannable down a column. */ table.data thead th, article table thead th, main table thead th { border-bottom: 1px solid var(--line-strong); color: var(--heading); padding-bottom: 0.6rem; } article table tbody tr:hover, main table tbody tr:hover { background: rgba(255, 255, 255, 0.03); } article table td, main table td { font-variant-numeric: tabular-nums; } .math-block { margin: 1.8rem auto; overflow-x: auto; } /* 14 Callouts ========================================================================== */ /* A rule in the margin, not a tinted box. */ .highlight-box, .theory-box, .note { margin: 1.8rem 0; padding: 0.2rem 0 0.2rem 1.3rem; border-left: 2px solid var(--line-strong); background: none; max-width: var(--measure); } .note { color: var(--muted); font-size: 0.96rem; } .highlight-box p:last-child, .theory-box p:last-child, .note p:last-child, .content-box p:last-child { margin-bottom: 0; } .content-box { margin: 1.6rem 0; } /* .intro-block is a boxed opening section: keep its own inset padding, but centre the box itself on the reading measure like every other block. */ .intro-block { margin: 1.6rem auto; max-width: min(100%, var(--prose-measure, 76ch)); } .credits-section, .worldview-section { margin-top: var(--gap); } /* 15 Forms & contact ========================================================================== */ .contact-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 56px); margin-top: 1.6rem; } .contact-intro p { color: var(--muted); } .contact-note { color: var(--faint); font-size: 0.95rem; } .contact-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 1.4rem; font-family: var(--font); font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--text); } /* Contact rows are links, not cards - icon beside label, no rule above. */ .contact-item { display: inline-flex; align-items: center; gap: 9px; border-top: none; padding-block: 0.3rem; color: var(--text); } .contact-item:hover { color: var(--accent); text-decoration: none; } .contact-item svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; } .contact-social-row { gap: 20px; margin: 0.3rem 0 0; } .contact-form { display: flex; flex-direction: column; gap: 12px; } .form-row { display: flex; gap: 12px; flex-wrap: wrap; } .form-row > * { flex: 1 1 200px; } .modern-input, .modern-textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; color: var(--text); font-family: var(--font); font-size: 1rem; } .modern-textarea { min-height: 150px; resize: vertical; } .modern-input::placeholder, .modern-textarea::placeholder { color: var(--faint); } .modern-input:focus, .modern-textarea:focus { outline: none; border-color: var(--heading); } /* 16 Footer & 404 ========================================================================== */ footer { margin-top: var(--gap); padding-block: 1.8rem 2.4rem; border-top: 1px solid var(--line); font-size: 0.86rem; color: var(--faint); text-align: center; } .error-page { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 62vh; } .error-code { font-size: clamp(3.5rem, 13vw, 5.5rem); font-weight: 600; color: var(--heading); line-height: 1; } .error-message { font-size: 1.25rem; color: var(--heading); margin: 0.9rem 0 0.4rem; } .error-sub { margin-inline: auto; margin-bottom: 1.8rem; } /* 16b Research-page components Ported here from per-page