/* Headings use Segoe UI, which only Windows has and which can't be served as a web font. Other devices get Open Sans (same humanist style), shrunk 5.7% so headings wrap the same way. The browser only downloads this file when Segoe UI is missing. */ @font-face { font-family: "Heading Sans"; font-style: normal; font-weight: 400 800; font-display: swap; size-adjust: 94.3%; src: url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format("woff2"); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: dark; --bg: #120b0a; --bg-alt: #1a1110; --surface: rgba(39, 27, 24, 0.78); --surface-strong: rgba(53, 37, 31, 0.9); --surface-soft: rgba(74, 51, 42, 0.72); --line: rgba(237, 204, 174, 0.12); --line-strong: rgba(237, 204, 174, 0.2); --text: #f4ebe4; --muted: rgba(244, 235, 228, 0.74); --muted-strong: rgba(244, 235, 228, 0.9); --accent: #c77a52; --accent-soft: #8f5d44; --accent-bright: #df9a68; --rose: #b86b5a; --shadow: 0 28px 80px rgba(0, 0, 0, 0.36); --radius: 1rem; --radius-sm: 0.75rem; /* Literata is loaded from Google Fonts in each page's ; its optical sizing keeps small text sturdy. */ --font-body: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif; /* Segoe UI on Windows; everywhere else, "Heading Sans" (Open Sans scaled to Segoe UI's width, below). */ --font-display: "Segoe UI", "Heading Sans", sans-serif; background: radial-gradient(circle at 12% 8%, rgba(199, 122, 82, 0.15), transparent 20%), radial-gradient(circle at 88% 20%, rgba(135, 82, 58, 0.18), transparent 22%), radial-gradient(circle at 65% 94%, rgba(199, 122, 82, 0.08), transparent 28%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 24px), repeating-linear-gradient(45deg, rgba(199, 122, 82, 0.035) 0 2px, transparent 2px 72px), linear-gradient(160deg, #120b0a 0%, #1a1110 42%, #120b0a 100%); background-attachment: fixed; font-family: var(--font-body); color: var(--text); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; min-height: 100vh; background: transparent; color: var(--text); } body::before, body::after { content: ""; position: fixed; inset: auto; pointer-events: none; z-index: 0; filter: blur(24px); opacity: 0.55; } body::before { top: -4rem; right: -5rem; width: 18rem; height: 18rem; border-radius: 999px; background: rgba(199, 122, 82, 0.14); } body::after { left: -4rem; bottom: 8rem; width: 14rem; height: 14rem; border-radius: 999px; background: rgba(143, 93, 68, 0.16); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button, input, textarea { font: inherit; } .page { position: relative; z-index: 1; min-height: 100vh; overflow: clip; } .shell { width: min(1360px, calc(100% - 2rem)); margin: 0 auto; padding: 0 0 4rem; } .site-header { position: sticky; top: 0; z-index: 30; padding-top: 0.85rem; width: 100vw; margin-left: calc((100% - 100vw) / 2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background: linear-gradient(180deg, rgba(16,10,9,0.36), rgba(16,10,9,0.18)); border-bottom: 1px solid rgba(255,255,255,0.02); } .header-bar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; padding: 0.45rem 0 0.2rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; width: min(1360px, calc(100% - 2rem)); margin: 0 auto; } /* header scroll behavior removed */ .primary-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; font-family: var(--font-display); font-size: 0.92rem; letter-spacing: 0.1em; text-transform: uppercase; } .nav-link { padding: 0.55rem 0.8rem; border-bottom: 1px solid transparent; color: var(--muted); transition: color 160ms ease, border-color 160ms ease, transform 160ms ease; } .nav-link:hover, .nav-link.active { color: var(--text); border-bottom-color: var(--accent-bright); transform: translateY(-1px); } .page-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: 1.5rem; align-items: start; padding: 4.75rem 0 2rem; } .hero-copy { display: grid; gap: 1.3rem; } .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; width: fit-content; padding: 0.5rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(199, 122, 82, 0.14); color: var(--muted-strong); font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; } .eyebrow::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: linear-gradient(135deg, #f0c69d 0%, #c77a52 45%, #8f5d44 100%); box-shadow: 0 0 0 6px rgba(199, 122, 82, 0.16); } .hero-title { margin: 0; max-width: 13ch; font-family: var(--font-display); font-size: clamp(3.3rem, 6.2vw, 6.7rem); line-height: 0.94; letter-spacing: -0.07em; text-wrap: balance; } .hero-text { max-width: 62ch; margin: 0; font-size: clamp(1.02rem, 1.45vw, 1.18rem); line-height: 1.8; color: var(--muted); } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.82rem 1.15rem; border: 1px solid transparent; border-radius: 0.85rem; font-family: var(--font-display); font-size: 0.88rem; letter-spacing: 0.12em; text-transform: uppercase; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; } .button:hover { transform: translateY(-2px); } .button.primary { background: linear-gradient(135deg, var(--accent) 0%, #a95f3d 100%); color: #150d0b; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28); } .button.ghost { border-color: var(--line); background: rgba(255, 255, 255, 0.02); color: var(--text); } .button.ghost:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.04); } .stat-grid, .card-grid, .blog-grid, .contact-grid, .work-grid, .about-grid { display: grid; gap: 1rem; } .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stat-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat, .panel, .card, .blog-card, .contact-card, .work-card, .note-card { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(39, 27, 24, 0.84), rgba(39, 27, 24, 0.7)); box-shadow: var(--shadow); } .stat { padding: 1.05rem; background: linear-gradient(180deg, rgba(53, 37, 31, 0.92), rgba(39, 27, 24, 0.74)); } .stat-value { display: block; margin-bottom: 0.35rem; font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.05em; color: var(--text); } .stat-label, .note-body, .card p, .blog-card p, .work-card p, .contact-card p, .panel p, .section-desc { color: var(--muted); line-height: 1.75; } .hero-stack { display: grid; gap: 1rem; } .media-card { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--radius) + 0.15rem); background: linear-gradient(180deg, rgba(61, 43, 35, 0.92), rgba(33, 22, 19, 0.9)); box-shadow: var(--shadow); } .media-card img { width: 100%; height: 100%; object-fit: cover; } .page-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr); gap: 2rem; align-items: stretch; padding: 4.75rem 0 2rem; } /* Both hero columns share a top and bottom edge: the stat row sinks to the bottom of the copy, and the last card in the stack grows to fill. */ .hero-copy { display: flex; flex-direction: column; } .hero-copy .stat-grid { margin-top: auto; } .hero-stack { display: flex; flex-direction: column; gap: 1rem; } .hero-stack > :last-child { flex: 1 0 auto; } /* Heroes whose side column is a portrait or profile card use a narrower side. */ .page-hero.narrow-side { grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr); } /* About: the portrait sets the hero height; the facts card sinks to meet its bottom edge. */ .page-hero.about-hero { grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); } .about-hero .hero-copy > .note-card { margin-top: auto; } .media-card.headshot img { object-position: 50% 20%; } /* Label-over-value rows. The list grows and spreads its rows so neighbouring cards have no dead space. */ .row-list { display: flex; flex: 1; flex-direction: column; justify-content: space-between; margin: 0.4rem 0 0; padding: 0; list-style: none; } .row-list li { display: grid; gap: 0.2rem; padding: 0.75rem 0; border-top: 1px solid var(--line); } .row-list li:last-child { padding-bottom: 0; } .row-list li > span:first-child { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-bright); } .row-list li > :last-child { color: var(--muted-strong); line-height: 1.55; } .row-list a:hover { color: var(--accent-bright); } .right-now { padding: 1.1rem 1.3rem; } .right-now .row-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } .right-now .row-list li:last-child { padding-bottom: 0.75rem; } .media-card.rose { aspect-ratio: 1 / 1; } .media-card.headshot { aspect-ratio: 957 / 1271; } .profile-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .profile-card h3 { margin: 0.9rem 0 0.35rem; font-family: var(--font-display); } .profile-card p { max-width: 48ch; margin: 0; color: var(--muted); line-height: 1.75; } .profile-card .pill-row { justify-content: center; } .profile-card .media-card.rose { width: 7.5rem; } .media-card.pcb { aspect-ratio: 16 / 10; } .media-card.can { aspect-ratio: 3 / 4; } .note-card { padding: 1.1rem; } .panel { padding: 1.3rem 1.4rem; } .panel .section-desc { margin: 0; } .panel .pill-row { margin-top: auto; } .about-grid > .panel { display: flex; flex-direction: column; gap: 1rem; } .profile-card.big .media-card.rose { width: 11rem; } .profile-card .now-playing { width: 100%; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); } /* The card's 48ch paragraph cap would pin this heading left of centre. */ .profile-card .now-playing .section-kicker { max-width: none; margin-bottom: 0.7rem; } /* Now playing: an even grid of name tiles, so long titles never break mid-name. */ .game-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .game-tiles li:last-child:nth-child(odd) { grid-column: span 2; } .game-tiles li { display: flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 0.6rem; background: rgba(255, 255, 255, 0.025); font-family: var(--font-display); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-card .list { width: 100%; margin-top: 0.8rem; text-align: left; } .list li span:last-child { text-align: right; color: var(--muted-strong); } /* Quiet cards: border only, no fill, for supporting details. */ .subtle { background: rgba(255, 255, 255, 0.015); box-shadow: none; } .section { padding: 1.2rem 0 0; } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-top: 0.6rem; border-top: 1px solid var(--line); } .section-kicker { margin: 0; font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-bright); } .section-title { margin: 0.3rem 0 0; font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.45rem); line-height: 1.05; letter-spacing: -0.04em; } .section-copy { max-width: 68ch; margin: 0.65rem 0 0; } .card-grid, .blog-grid, .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card, .blog-card, .work-card, .contact-card { padding: 1.15rem; } .card h3, .blog-card h3, .work-card h3, .contact-card h3 { margin: 0 0 0.45rem; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.02em; } .rule { margin: 1rem 0; border: 0; border-top: 1px solid var(--line); } .project-top, .blog-top, .contact-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .project-tags, .pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; } .pill { padding: 0.42rem 0.65rem; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-strong); background: rgba(255, 255, 255, 0.02); } .pill-link { color: var(--accent-bright); border-color: var(--accent-soft); transition: background 160ms ease; } .pill-link:hover { background: rgba(199, 122, 82, 0.14); } .pill::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.45rem; border-radius: 999px; background: linear-gradient(135deg, #f1c49b 0%, #c77a52 45%, #8f5d44 100%); vertical-align: middle; } .media-frame { margin-bottom: 1rem; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: radial-gradient(circle at 50% 40%, rgba(199, 122, 82, 0.2), transparent 65%), linear-gradient(180deg, rgba(61, 43, 35, 0.92), rgba(33, 22, 19, 0.9)); } .media-frame img { width: 100%; height: 100%; object-fit: cover; } /* Tall cut-outs (like the can) sit whole inside the frame instead of being cropped. */ .media-frame.contain img { object-fit: contain; padding: 1rem; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45)); } /* Black line icons, tinted copper for the dark theme. */ .media-frame.icon img { object-fit: contain; padding: 2.5rem; filter: invert(72%) sepia(38%) saturate(640%) hue-rotate(335deg) brightness(95%); } /* Whole-card links: the entire card is clickable, with a lift on hover. */ .card-link { display: flex; flex-direction: column; transition: transform 160ms ease, border-color 160ms ease; } .card-link:hover { transform: translateY(-3px); border-color: var(--accent-soft); } .card-link:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; } /* Pills pinned to the bottom of a card so a row of cards lines up. */ .card > .pill-row:last-child, .blog-card > .pill-row:last-child, .work-card > .project-tags:last-child { margin-top: auto; padding-top: 0.9rem; } .card-grid > .card, .blog-grid > .blog-card, .work-grid > .work-card { display: flex; flex-direction: column; } .card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .muted { color: var(--muted); } /* Experience timeline */ .role-list { display: grid; gap: 1rem; } .role { display: grid; grid-template-columns: minmax(200px, 0.32fr) minmax(0, 1fr); gap: 1.5rem; padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(39, 27, 24, 0.84), rgba(39, 27, 24, 0.7)); box-shadow: var(--shadow); scroll-margin-top: 6rem; } .role-meta { display: grid; align-content: start; gap: 0.35rem; } .role-org { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; } .role-dates { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-bright); } .role h3 { margin: 0 0 0.45rem; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -0.02em; } .role p, .role li { color: var(--muted); line-height: 1.75; } .role p { margin: 0; } .role ul { margin: 0.6rem 0 0; padding-left: 1.1rem; } section[id], article[id], details[id] { scroll-margin-top: 6rem; } .desk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .desk-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .desk-grid .card { display: flex; flex-direction: column; } .desk-grid .media-frame, .desk-grid .slot.media-frame { aspect-ratio: 1 / 1; } /* ---------- Photo / video slots ---------- An empty slot shows a dashed placeholder with the file path to drop in. */ .slot { position: relative; width: 100%; min-width: 0; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--radius-sm); background: linear-gradient(180deg, rgba(61, 43, 35, 0.92), rgba(33, 22, 19, 0.9)); } .slot > img, .slot > video { display: block; width: 100%; height: 100%; object-fit: cover; } .slot.is-empty { display: grid; place-items: center; border: 1px dashed rgba(223, 154, 104, 0.35); background: repeating-linear-gradient(135deg, rgba(199, 122, 82, 0.05) 0 10px, transparent 10px 20px), rgba(39, 27, 24, 0.6); } .slot.is-empty > img, .slot.is-empty > video { display: none; } .slot.is-empty::after { content: attr(data-hint); max-width: 90%; padding: 0.6rem; text-align: center; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.08em; line-height: 1.6; color: var(--muted); white-space: pre-line; } .slot.media-frame { aspect-ratio: 4 / 3; } .slot.square { aspect-ratio: 1 / 1; } .slot.portrait { aspect-ratio: 4 / 5; } .slot.tall { aspect-ratio: 3 / 4; } .card > .slot, .blog-card > .slot, .work-card > .slot, .game-card > .slot { margin-bottom: 1rem; } /* Galleries */ .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .gallery.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* First image spans two columns and two rows for a feature shot. */ .gallery.featured > :first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } /* The feature fills the 2x2 area set by its neighbours, so a portrait shot can't stretch the rows. */ .gallery.featured > :first-child > img { position: absolute; inset: 0; } /* ---------- Sidequests page ---------- */ .jump-row { display: flex; flex-wrap: wrap; gap: 0.6rem; } .jump-row a { padding: 0.55rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-strong); background: rgba(255, 255, 255, 0.02); transition: border-color 160ms ease, color 160ms ease; } .jump-row a:hover { border-color: var(--accent-soft); color: var(--text); } /* Flex rather than grid so an uneven last row sits centred instead of leaving a hole on the right. */ .game-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .game-grid > * { flex: 0 0 calc((100% - 3rem) / 4); min-width: 0; } /* PCB build: the main shot sits beside the write-up; the (portrait) bench photos run underneath as squares. */ .build-strip { margin-top: 1rem; } .build-strip > .slot { aspect-ratio: 1 / 1; } /* Fix stories: two photos side by side, then the write-up. */ .fix-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1rem; } .fix-media > .slot { aspect-ratio: 4 / 3; } .fix-card code { padding: 0.05rem 0.35rem; border-radius: 0.3rem; background: rgba(255, 255, 255, 0.06); font-size: 0.9em; color: var(--muted-strong); } /* Axe renders: the angled shot sits beside the write-up; the top-down view and close-up run underneath. */ .gallery.axe-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; } .axe-strip > .slot { aspect-ratio: 16 / 10; } .panel > .callout { margin: 0; } /* Painting, portrait timelapse, write-up. The middle column is sized so a 9:16 video matches the painting's height (painting is 1179:1059). */ .feature.painting-feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.634fr) minmax(0, 0.9fr); } .painting-feature > .slot { aspect-ratio: 1179 / 1059; } .painting-feature > .slot.timelapse { aspect-ratio: 9 / 16; } .painting-feature video { background: #0c0706; } .game-card { display: flex; flex-direction: column; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(39, 27, 24, 0.84), rgba(39, 27, 24, 0.7)); box-shadow: var(--shadow); } .game-card h3 { margin: 0 0 0.35rem; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.02em; } .game-card p { margin: 0; color: var(--muted); line-height: 1.7; } .game-card .pill-row { margin-top: auto; padding-top: 0.9rem; } /* Two-column feature: media on one side, write-up on the other. */ .feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 1rem; align-items: stretch; } .feature > .panel { display: flex; flex-direction: column; gap: 1rem; } .feature .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature .gallery > :first-child { grid-column: span 2; } /* Sub-heading inside a section: groups related blocks without starting a new section. */ .subhead { margin: 2rem 0 0.9rem; scroll-margin-top: 6rem; } .section-head + .subhead { margin-top: 0.4rem; } .subhead h3 { margin: 0.25rem 0 0; font-family: var(--font-display); font-size: clamp(1.2rem, 1.6vw, 1.5rem); letter-spacing: -0.03em; } .section-desc.intro { margin: 0 0 1rem; } /* Desk panel in the Sidequests hero: a thumbnail list that spreads to fill the column. */ .desk-panel { display: flex; flex-direction: column; padding: 1.2rem 1.3rem; scroll-margin-top: 6rem; } .desk-panel h3 { margin: 0.3rem 0 0.4rem; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -0.02em; } /* 2x2 grid of photo tiles; rows share the panel's height so it lines up with the hero copy. */ .desk-grid-panel { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1rem; margin: 0.6rem 0 0; padding: 0; list-style: none; } .desk-grid-panel li { display: flex; flex-direction: column; min-height: 0; } /* The photo fills whatever height the row gets instead of setting it: a tall portrait would otherwise stretch the whole hero. */ .desk-grid-panel .slot { flex: 1 1 0; min-height: 10rem; aspect-ratio: auto; margin-bottom: 0.6rem; } .desk-grid-panel .slot > img { position: absolute; inset: 0; } .desk-grid-panel h4 { margin: 0 0 0.15rem; font-family: var(--font-display); font-size: 1rem; } .desk-grid-panel p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; } /* PC specs: a slim note inside the Games section. */ .spec-note { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.5rem; margin-top: 1rem; padding: 1rem 1.3rem; box-shadow: none; } .spec-note-head h4 { margin: 0.2rem 0 0; font-family: var(--font-display); font-size: 1.1rem; } .spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0; } .spec-grid > div { padding: 0.55rem 0.8rem; border-left: 1px solid var(--line); } .spec-grid dt { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-bright); } .spec-grid dd { margin: 0.2rem 0 0; color: var(--muted-strong); } .spec-list li span:first-child { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-bright); } .replay-list li span:first-child { color: var(--text); } /* ---------- Skills: six cards, each backed by where the skill was used ---------- */ .card-grid.skill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .skill-grid .card h3 { margin-top: 0.3rem; } .evidence { display: grid; gap: 0.55rem; margin: 0.4rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--line); list-style: none; } .evidence li { position: relative; padding-left: 1rem; color: var(--muted); font-size: 0.94rem; line-height: 1.6; } .evidence li::before { content: ""; position: absolute; top: 0.65em; left: 0; width: 0.4rem; height: 0.4rem; border-radius: 999px; background: var(--accent); } .evidence a { color: var(--accent-bright); text-decoration: underline; text-decoration-color: rgba(223, 154, 104, 0.35); text-underline-offset: 0.18em; } .evidence a:hover { text-decoration-color: var(--accent-bright); } @media (max-width: 1080px) { .card-grid.skill-grid { grid-template-columns: 1fr; } } /* Minecraft render: a portrait video column beside its write-up. */ .feature.render-feature { grid-template-columns: 16rem minmax(0, 1fr); margin-top: 1rem; } .render-feature > .slot.tall-video { aspect-ratio: 9 / 16; } .render-feature video { background: #0c0706; } /* Server fixes: the two screenshots sit side by side at the height of the write-up. */ .feature.server-fix > .fix-media { margin: 0; } .feature.server-fix > .fix-media > .slot { aspect-ratio: auto; min-height: 16rem; } .feature.server-fix > .fix-media > .slot > img { position: absolute; inset: 0; } .panel code { padding: 0.05rem 0.35rem; border-radius: 0.3rem; background: rgba(255, 255, 255, 0.06); font-size: 0.9em; color: var(--muted-strong); } @media (max-width: 1080px) { .feature.render-feature { grid-template-columns: 1fr; } .render-feature > .slot.tall-video { width: min(100%, 22rem); justify-self: center; } } /* Crashing PC: photo beside the full troubleshooting write-up. */ .feature.crash-feature { margin-top: 1rem; } .crash-feature > .slot { aspect-ratio: auto; min-height: 18rem; } .crash-feature > .slot > img { position: absolute; inset: 0; } .crash-feature > .panel { gap: 0.6rem; } .crash-feature > .panel h3 { margin: 0; font-family: var(--font-display); font-size: 1.2rem; } .crash-feature > .panel p { margin: 0; color: var(--muted); line-height: 1.7; } .crash-feature .steps { margin: 0.2rem 0; } /* Numbered troubleshooting steps inside a fix card. */ .steps { display: grid; gap: 0.45rem; margin: 0 0 0.9rem; padding: 0; list-style: none; counter-reset: step; } .steps li { position: relative; padding-left: 1.9rem; color: var(--muted); font-size: 0.94rem; line-height: 1.55; counter-increment: step; } .steps li::before { content: counter(step); position: absolute; top: 0.1rem; left: 0; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border: 1px solid var(--accent-soft); border-radius: 999px; font-family: var(--font-display); font-size: 0.72rem; color: var(--accent-bright); } /* Work: a short reflection at the end of each role. */ .takeaway { margin: 0.9rem 0 0; padding: 0.75rem 1rem; border-left: 3px solid var(--accent-bright); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: rgba(199, 122, 82, 0.08); color: var(--muted-strong); line-height: 1.65; } .takeaway span { display: block; margin-bottom: 0.2rem; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-bright); } /* Closing call to action. */ .cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.8rem 2rem; border: 1px solid var(--accent-soft); border-radius: var(--radius); background: radial-gradient(circle at 85% 50%, rgba(199, 122, 82, 0.18), transparent 55%), linear-gradient(180deg, rgba(53, 37, 31, 0.92), rgba(39, 27, 24, 0.8)); box-shadow: var(--shadow); } .cta-band .section-desc { max-width: 52ch; margin: 0.6rem 0 0; } /* ---------- Contact form ---------- */ .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .form-actions .button:disabled { opacity: 0.6; cursor: wait; transform: none; } .form-status { margin: 0; color: var(--muted); line-height: 1.5; } .form-footnote { margin: 1.2rem 0 0; font-size: 0.85rem; font-style: italic; color: var(--muted); opacity: 0.8; } .form-status[data-kind="ok"] { color: #9fd48a; } .form-status[data-kind="error"] { color: #f0a08a; } /* ---------- Lightbox ---------- */ img[data-zoom] { cursor: zoom-in; transition: filter 160ms ease; } img[data-zoom]:hover { filter: brightness(1.08); } img[data-zoom]:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; } .lightbox-open, .lightbox-open body { overflow: hidden; } .lightbox { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 1.5rem; background: rgba(8, 5, 4, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: lightbox-in 160ms ease; } .lightbox[hidden] { display: none; } @keyframes lightbox-in { from { opacity: 0; } } .lightbox-figure { display: grid; justify-items: center; gap: 0.8rem; height: 100%; margin: 0; align-content: center; } .lightbox-img { max-width: 100%; max-height: calc(100vh - 7rem); object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); } .lightbox-caption { max-width: 70ch; text-align: center; color: var(--muted); font-size: 0.95rem; line-height: 1.5; } .lightbox-btn { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(39, 27, 24, 0.85); color: var(--text); font-family: var(--font-display); font-size: 1.8rem; line-height: 1; cursor: pointer; transition: border-color 160ms ease, background 160ms ease; } .lightbox-btn:hover, .lightbox-btn:focus-visible { border-color: var(--accent-bright); background: rgba(74, 51, 42, 0.95); outline: none; } .lightbox-btn[hidden] { visibility: hidden; display: grid; } .lightbox-close { position: absolute; top: 1rem; right: 1rem; z-index: 1; } @media (max-width: 720px) { .lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 3.5rem 0.75rem 1rem; } .lightbox-figure { grid-column: 1 / -1; grid-row: 1; } .lightbox-prev { grid-row: 2; justify-self: start; } .lightbox-next { grid-row: 2; justify-self: end; } } /* ---------- About timeline ---------- */ .timeline { position: relative; display: grid; gap: 0.9rem; margin: 0; padding: 0 0 0 1.6rem; list-style: none; } .timeline::before { content: ""; position: absolute; top: 0.4rem; bottom: 0.4rem; left: 0.35rem; width: 2px; background: linear-gradient(180deg, var(--accent-bright), rgba(199, 122, 82, 0.1)); } .timeline > li { position: relative; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.2rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(39, 27, 24, 0.84), rgba(39, 27, 24, 0.7)); } .timeline > li::before { content: ""; position: absolute; top: 1.35rem; left: -1.6rem; width: 0.8rem; height: 0.8rem; border-radius: 999px; background: linear-gradient(135deg, #f0c69d 0%, #c77a52 45%, #8f5d44 100%); box-shadow: 0 0 0 5px rgba(199, 122, 82, 0.16); } .timeline .when { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-bright); padding-top: 0.2rem; } .timeline h3 { margin: 0 0 0.25rem; font-family: var(--font-display); font-size: 1.05rem; } .timeline p { margin: 0; color: var(--muted); line-height: 1.7; } .timeline .tag { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); vertical-align: middle; } .callout { padding: 0.9rem 1.1rem; border: 1px solid rgba(223, 154, 104, 0.35); border-left: 3px solid var(--accent-bright); border-radius: var(--radius-sm); background: rgba(199, 122, 82, 0.08); color: var(--muted-strong); line-height: 1.7; } .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .list { margin: 0; padding: 0; list-style: none; } .list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); color: var(--muted); } .list li:last-child { border-bottom: 0; } .contact-grid { grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr); align-items: start; } .field { display: grid; gap: 0.4rem; margin-bottom: 0.95rem; } .field label { font-family: var(--font-display); font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .field input, .field textarea { width: 100%; padding: 0.95rem 1rem; border: 1px solid rgba(237, 204, 174, 0.14); border-radius: 0.78rem; background: rgba(17, 11, 10, 0.82); color: var(--text); outline: none; resize: vertical; } .field input:focus, .field textarea:focus { border-color: rgba(199, 122, 82, 0.54); box-shadow: 0 0 0 4px rgba(199, 122, 82, 0.16); } .footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; } .accent { color: var(--accent-bright); } .tight { max-width: 46rem; } .stack-gap { display: grid; gap: 1rem; } .about-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } .about-aside { display: grid; gap: 1rem; } @media (max-width: 1080px) { .page-hero, .about-grid, .contact-grid { grid-template-columns: 1fr; } .card-grid, .card-grid.two, .card-grid.four, .blog-grid, .work-grid, .stat-grid, .stat-grid.two { grid-template-columns: 1fr; } .desk-grid, .desk-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .role { grid-template-columns: 1fr; gap: 0.8rem; } .page-hero.narrow-side, .feature, .field-row { grid-template-columns: 1fr; } .gallery, .gallery.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .game-grid > * { flex-basis: calc((100% - 1rem) / 2); } .timeline > li { grid-template-columns: 1fr; gap: 0.3rem; } .spec-note { grid-template-columns: 1fr; gap: 0.6rem; } .feature.painting-feature { grid-template-columns: 1fr; } .painting-feature > .slot.timelapse { width: min(100%, 22rem); justify-self: center; } .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-stack .media-card.headshot { width: min(100%, 28rem); align-self: center; } } @media (max-width: 720px) { .shell { width: min(100% - 1rem, 1360px); } .header-bar { padding-top: 0.25rem; } .primary-nav { justify-content: center; gap: 0.1rem; font-size: 0.8rem; letter-spacing: 0.06em; } .nav-link { padding: 0.5rem 0.45rem; } .page-hero { padding-top: 3.2rem; } .gallery, .gallery.four, .desk-grid, .desk-grid.four { grid-template-columns: 1fr; } .game-grid > * { flex-basis: 100%; } .gallery.featured > :first-child { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 9; } .footer { flex-direction: column; } .section-head, .project-top, .blog-top, .contact-top { align-items: start; flex-direction: column; } } /* A single fix photo matches the height of a two-photo pair (two 4:3 halves = 8:3). */ .fix-media.single { grid-template-columns: 1fr; } .fix-media.single > .slot { aspect-ratio: 8 / 3; } /* Wide gallery tile: spans two columns, takes the row height from its neighbour. */ .gallery > .slot.wide { grid-column: span 2; aspect-ratio: auto; } .gallery > .slot.wide > img { position: absolute; inset: 0; } @media (max-width: 720px) { .gallery > .slot.wide { grid-column: auto; aspect-ratio: 16 / 9; } }