/* Portfolio cover — independent stylesheet, intentionally not loaded by app pages */ :root { --p-900: #2a1f47; --p-800: #3c2a5a; --p-700: #6d4fa8; --p-600: #8a6dc9; --p-500: #a78bd6; --p-400: #c1aee3; --p-200: #ebe3f7; --p-100: #f4effb; --p-50: #faf7fd; --ink-1: #1a1430; --ink-2: #4a3f63; --ink-3: #7c7292; --ink-4: #a8a0b8; --bg: #ffffff; --bg-soft: #fbfaff; --line: #e6dff2; --line-strong: #d3c8e6; --r-sm: 8px; --r: 14px; --r-lg: 22px; --shadow: 0 1px 2px rgba(60, 42, 90, 0.06), 0 8px 24px rgba(60, 42, 90, 0.06); --shadow-strong: 0 2px 6px rgba(60, 42, 90, 0.08), 0 16px 40px rgba(60, 42, 90, 0.10); } /* Per-project palette overrides — each project page gets its own identity. Apply via on the project's cover page. Lycia and Science 37 stay on the default purple system above. */ body.remedly { --p-900: #0a2e54; --p-800: #0f4373; --p-700: #155b97; --p-600: #1a6dba; --p-500: #2078cc; --p-400: #4d97da; --p-200: #b8d6ec; --p-100: #e6f0fa; --p-50: #f3f8fc; --line: #d6e3ef; --line-strong: #b8d6ec; --bg-soft: #f8fbfd; --shadow: 0 1px 2px rgba(15, 67, 115, 0.06), 0 8px 24px rgba(15, 67, 115, 0.06); --shadow-strong: 0 2px 6px rgba(15, 67, 115, 0.08), 0 16px 40px rgba(15, 67, 115, 0.10); } /* Home + Resume share the personal-brand orange identity (#ffaa5f, the 'HARUN' orange from the 2020 htlogo4.png). Lycia/Science37/Remedly each have their own project identity; the pages about Harun himself stay on a single shared palette. */ body.home, body.resume { --p-900: #5a2d05; --p-800: #7a4112; --p-700: #b35a18; --p-600: #d97f2c; --p-500: #ffaa5f; --p-400: #ffc185; --p-200: #ffe2c2; --p-100: #fff1e0; --p-50: #fff8ef; --line: #e8e9ed; --line-strong: #d2d4da; --bg-soft: #f6f7fa; --shadow: 0 1px 2px rgba(20, 24, 38, 0.05), 0 8px 24px rgba(20, 24, 38, 0.06); --shadow-strong: 0 2px 6px rgba(20, 24, 38, 0.07), 0 16px 40px rgba(20, 24, 38, 0.10); } /* Lighter orange on buttons + featured CTAs on the home page so they match the gradient mid-tone the rest of the type uses, not the deepest shade. White text on this orange clears WCAG AA at large-text size. */ body.home .btn-primary, body.home .featured-cta, body.resume .btn-primary, body.resume .featured-cta { background: #e29050; } body.home .btn-primary:hover, body.home .featured-card:hover .featured-cta, body.resume .btn-primary:hover, body.resume .featured-card:hover .featured-cta { background: #cd7a37; } /* Science 37 brand green — sampled from science37.com (#6CC24A primary) */ body.science37 { --p-900: #1d3a13; --p-800: #2c581d; --p-700: #4a8e30; --p-600: #5cab3d; --p-500: #6CC24A; --p-400: #8fd372; --p-200: #c5e6b4; --p-100: #e3f3d9; --p-50: #f3f9ee; --line: #d8e8cd; --line-strong: #b8d9a3; --bg-soft: #fbfdf9; --shadow: 0 1px 2px rgba(29, 58, 19, 0.06), 0 8px 24px rgba(29, 58, 19, 0.06); --shadow-strong: 0 2px 6px rgba(29, 58, 19, 0.08), 0 16px 40px rgba(29, 58, 19, 0.10); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-soft); color: var(--ink-1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--p-700); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; } /* ===== Topbar ===== */ .topbar { border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); position: sticky; top: 0; z-index: 10; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; } .brand-mark { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--p-700), var(--p-500)); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 13px; font-weight: 800; } .topbar nav a { color: var(--ink-2); margin-left: 4px; font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: 999px; transition: background 0.16s ease, color 0.16s ease; } .topbar nav a:first-child { margin-left: 0; } .topbar nav a:hover { color: var(--p-700); background: var(--p-100); text-decoration: none; } /* Current page indicator — permanent pill in the brand-tinted color */ .topbar nav a.active { color: var(--p-700); background: var(--p-100); font-weight: 700; } .topbar nav a.active:hover { background: var(--p-200); } /* ===== Breadcrumb trail (project cover pages) ===== */ .crumb-trail { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.01em; margin: 0 0 22px; } /* Tighten the hero's top whitespace when a breadcrumb sits above the eyebrow — the original 88px was sized for an eyebrow-first hero. */ .hero:has(.crumb-trail) { padding-top: 28px; } @media (max-width: 560px) { .hero:has(.crumb-trail) { padding-top: 20px; } } .crumb-trail a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; padding: 4px 10px 4px 6px; border-radius: 999px; transition: background 0.16s ease, color 0.16s ease; } .crumb-trail a:hover { background: var(--p-100); color: var(--p-700); text-decoration: none; } .crumb-trail a svg { width: 14px; height: 14px; } .crumb-sep { color: var(--ink-4); user-select: none; } .crumb-current { color: var(--ink-1); font-weight: 600; } /* ===== Hero ===== */ .hero { padding: 88px 0 56px; border-bottom: 1px solid var(--line); background: radial-gradient(1200px 400px at 50% -100px, var(--p-100), transparent 60%), var(--bg-soft); } .eyebrow { display: inline-block; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-700); font-weight: 800; margin-bottom: 16px; } .hero h1 { font-size: 52px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 22px; font-weight: 800; color: var(--ink-1); max-width: 860px; } .hero h1 em { font-style: normal; background: linear-gradient(120deg, var(--p-700), var(--p-500)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero .lede { font-size: 19px; color: var(--ink-2); max-width: 720px; margin: 0 0 32px; } .hero .lede + .lede { margin-top: -18px; } .hero-meta { display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; color: var(--ink-3); } .hero-meta strong { color: var(--ink-1); font-weight: 600; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } /* ===== Hero side-by-side grid (text + video) ===== */ .hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; } .hero-text { min-width: 0; } .hero-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-strong); } .hero-video iframe, .hero-video video { width: 100%; height: 100%; border: 0; display: block; } .hero-video-cover { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; border: 0; font: inherit; color: white; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.22), transparent 58%), linear-gradient(135deg, var(--p-700), var(--p-500)); transition: opacity 0.45s ease; } .hero-video-cover.is-playing { opacity: 0; pointer-events: none; } .hero-video-cover .cover-orb { width: 86px; height: 86px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); border: 2px solid rgba(255, 255, 255, 0.55); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.28); transition: background 0.18s ease, transform 0.18s ease; } .hero-video-cover:hover .cover-orb { background: rgba(255, 255, 255, 0.26); transform: scale(1.04); } .hero-video-cover .cover-orb svg { width: 32px; height: 32px; margin-left: 5px; color: white; } .hero-video-cover .cover-label { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.92); letter-spacing: 0.16em; text-transform: uppercase; } .hero-video-cover.is-pending { cursor: default; } .hero-video-cover.is-pending:hover .cover-orb { background: rgba(255, 255, 255, 0.16); transform: none; } .hero-video-cover.is-pending .cover-orb svg { margin-left: 0; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--r); font-weight: 600; font-size: 14px; border: 1px solid transparent; transition: transform 0.08s ease, box-shadow 0.16s ease, background 0.16s ease; cursor: pointer; } .btn-primary { background: var(--p-700); color: white; box-shadow: var(--shadow); } .btn-primary:hover { background: var(--p-800); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-strong); } .btn-secondary { background: white; color: var(--ink-1); border-color: var(--line-strong); } .btn-secondary:hover { border-color: var(--p-500); color: var(--p-700); text-decoration: none; } .btn svg { width: 16px; height: 16px; } /* ===== Section ===== */ section { padding: 72px 0; border-bottom: 1px solid var(--line); } section:last-of-type { border-bottom: none; } .section-header { margin-bottom: 36px; max-width: 1040px; } .section-header h2 { font-size: 32px; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 12px; color: var(--ink-1); font-weight: 700; } .section-header p { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 0; } .kicker { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-700); font-weight: 800; margin-bottom: 10px; } /* ===== Narrative prose blocks (used inside sections that need long-form copy) ===== */ .prose { max-width: 1100px; margin: 0 0 8px; } .prose p { font-size: 17.5px; line-height: 1.78; color: var(--ink-2); margin: 0 0 18px; } .prose p:last-child { margin-bottom: 0; } .prose strong { color: var(--ink-1); font-weight: 600; } .prose ol, .prose ul { font-size: 17.5px; line-height: 1.78; color: var(--ink-2); margin: 0 0 18px; padding-left: 26px; } .prose li { margin-bottom: 10px; } .prose li:last-child { margin-bottom: 0; } /* ===== Thesis network diagram ===== */ .thesis-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; } .vert { background: white; border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px; position: relative; transition: border-color 0.16s, transform 0.08s; } .vert:hover { border-color: var(--p-500); transform: translateY(-2px); } .vert-icon { font-size: 28px; margin-bottom: 12px; } .vert h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--ink-1); } .vert p { font-size: 13px; color: var(--ink-3); margin: 0; line-height: 1.5; } .network-note { margin-top: 28px; padding: 20px 22px; background: var(--p-50); border: 1px solid var(--p-200); border-radius: var(--r); color: var(--ink-2); font-size: 15px; line-height: 1.6; } .network-note strong { color: var(--ink-1); } /* ===== Artifact card grid ===== */ .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .cards.three { grid-template-columns: repeat(3, 1fr); } .card { background: white; border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.16s, transform 0.08s, box-shadow 0.16s; text-decoration: none; color: inherit; } .card:hover { border-color: var(--p-500); transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; } .card-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-700); align-self: flex-start; padding: 4px 10px; background: var(--p-100); border-radius: 999px; } .card-tag.live { color: #1a7f4e; background: #e6f5ec; } .card-tag.demo { color: #b3691a; background: #fdf3e2; } .card h3 { font-size: 17px; font-weight: 700; margin: 0; color: var(--ink-1); letter-spacing: -0.005em; } .card p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.5; } .card-foot { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--p-700); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .card-foot svg { width: 13px; height: 13px; } /* Non-clickable informational card — used in the demo section while the live URL is pending */ .card.no-link { cursor: default; background: var(--bg-soft); } .card.no-link:hover { border-color: var(--line); transform: none; box-shadow: none; } /* ===== Vertical decks layout ===== */ .deck-row { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 16px; align-items: stretch; padding: 20px 0; border-bottom: 1px solid var(--line); } .deck-row:last-child { border-bottom: none; } .deck-label { display: flex; flex-direction: column; justify-content: center; gap: 4px; } .deck-label .icon { font-size: 26px; line-height: 1; } .deck-label h3 { font-size: 18px; font-weight: 700; margin: 0; color: var(--ink-1); } .deck-label p { font-size: 13px; color: var(--ink-3); margin: 0; } .deck-tile { background: white; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; transition: border-color 0.16s, transform 0.08s; } .deck-tile:hover { border-color: var(--p-500); transform: translateY(-1px); text-decoration: none; } .deck-tile .ttl { font-size: 14px; font-weight: 700; color: var(--ink-1); } .deck-tile .sub { font-size: 13px; color: var(--ink-3); line-height: 1.5; } .deck-tile .meta { margin-top: auto; padding-top: 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-700); font-weight: 700; } /* ===== Tour list ===== */ .tour { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; } .tour-step { background: white; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: border-color 0.16s, transform 0.08s; position: relative; } .tour-step:hover { border-color: var(--p-500); transform: translateY(-2px); text-decoration: none; } .tour-num { position: absolute; top: 18px; right: 22px; font-size: 36px; font-weight: 800; color: var(--p-200); line-height: 1; } .tour-step h3 { font-size: 17px; font-weight: 700; margin: 0; color: var(--ink-1); padding-right: 40px; } .tour-step p { font-size: 14px; color: var(--ink-2); margin: 0; } .tour-step .meta { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-top: 4px; } .tour-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 9px 16px; background: var(--p-700); color: white; border-radius: 999px; font-size: 13px; font-weight: 600; align-self: flex-start; transition: background 0.16s ease, transform 0.08s ease, box-shadow 0.16s ease; box-shadow: 0 1px 2px rgba(60, 42, 90, 0.08); } .tour-cta svg { width: 14px; height: 14px; } .tour-step:hover .tour-cta { background: var(--p-800); box-shadow: 0 2px 6px rgba(60, 42, 90, 0.15); } /* ===== Footer ===== */ footer { padding: 56px 0 80px; background: var(--p-900); color: var(--p-200); } footer .wrap { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; } footer h3 { color: white; margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; } footer p { margin: 0; font-size: 14px; color: var(--p-400); } footer .contact { display: flex; flex-direction: column; gap: 4px; text-align: right; font-size: 14px; } footer .contact a { color: white; } footer .contact a:hover { color: var(--p-300); text-decoration: underline; } /* Brand link (no hover underline) */ a.brand { text-decoration: none; color: inherit; } a.brand:hover { text-decoration: none; } /* ===== Featured (Lycia) card ===== */ .featured-card { display: grid; grid-template-columns: 1.5fr 1fr; background: white; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.16s, transform 0.08s, box-shadow 0.16s; box-shadow: var(--shadow); } .featured-card:hover { border-color: var(--p-500); transform: translateY(-2px); text-decoration: none; box-shadow: var(--shadow-strong); } .featured-content { padding: 36px 40px; display: flex; flex-direction: column; gap: 14px; justify-content: center; } .featured-content h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.015em; margin: 0; color: var(--ink-1); line-height: 1.2; } .featured-content p { font-size: 15px; color: var(--ink-2); line-height: 1.6; margin: 0; } .featured-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 10px 18px; background: var(--p-700); color: white; border-radius: 999px; font-size: 14px; font-weight: 600; align-self: flex-start; transition: background 0.16s ease; } .featured-card:hover .featured-cta { background: var(--p-800); } .featured-visual { background: linear-gradient(135deg, var(--p-700), var(--p-900)); display: flex; align-items: center; justify-content: center; padding: 36px; position: relative; min-height: 280px; } .featured-visual.placeholder { background: #d8d4dc; color: var(--ink-2); } /* Real screenshot or mockup inside a featured-card visual — fills edge to edge, ignores the gradient padding. Centered cover-fit by default; override .featured-visual img with object-position per-card if a source image needs a different crop bias. */ .featured-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .placeholder-label { font-size: 18px; font-weight: 600; color: var(--ink-2); letter-spacing: -0.01em; } .vert-stack { display: flex; flex-direction: column; gap: 12px; } .vert-pill { background: rgba(255, 255, 255, 0.15); color: white; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 600; backdrop-filter: blur(6px); } /* ===== Screen gallery (Science 37) ===== */ .screen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .screen-tile { background: white; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.16s, transform 0.08s, box-shadow 0.16s; display: flex; flex-direction: column; } .screen-tile:hover { border-color: var(--p-500); transform: translateY(-2px); text-decoration: none; box-shadow: var(--shadow); } .screen-thumb { aspect-ratio: 16 / 10; background: var(--p-50); overflow: hidden; display: flex; align-items: center; justify-content: center; } .screen-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transition: transform 0.4s ease; } .screen-tile:hover .screen-thumb img { transform: scale(1.02); } .screen-cap { font-size: 13px; font-weight: 600; padding: 12px 14px 14px; color: var(--ink-2); letter-spacing: -0.005em; } /* ===== Screen card grid (richer variant: thumb + title + description + CTA) ===== */ .screen-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .screen-card { background: white; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.16s, box-shadow 0.16s, transform 0.08s; } .screen-card:hover { border-color: var(--p-500); box-shadow: var(--shadow); transform: translateY(-2px); } .screen-card-thumb { display: block; aspect-ratio: 16 / 9; background: var(--p-50); overflow: hidden; } .screen-card-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transition: transform 0.4s ease; } .screen-card:hover .screen-card-thumb img { transform: scale(1.02); } .screen-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; gap: 4px; } .screen-card-body h3 { font-size: 14px; font-weight: 700; margin: 0; color: var(--ink-1); letter-spacing: -0.005em; } .screen-card-body p { font-size: 12px; color: var(--ink-2); margin: 0; line-height: 1.45; flex: 1; } .screen-card-cta { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; text-decoration: none; color: #b3691a; background: #fdf3e2; border: 1px solid #f0d9a8; transition: background 0.14s, color 0.14s, border-color 0.14s; } .screen-card-cta:hover { background: #f9e3b9; color: #8f5316; text-decoration: none; } /* ===== Project grid ===== */ .project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .project-tile { background: white; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.16s, transform 0.08s, box-shadow 0.16s; display: flex; flex-direction: column; } .project-tile:hover { border-color: var(--p-500); transform: translateY(-2px); text-decoration: none; box-shadow: var(--shadow); } .project-thumb { aspect-ratio: 1 / 1; background: var(--p-50); overflow: hidden; display: flex; align-items: center; justify-content: center; } .project-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .project-tile:hover .project-thumb img { transform: scale(1.04); } .project-tile h3 { font-size: 15px; font-weight: 700; margin: 0; padding: 14px 16px 16px; color: var(--ink-1); letter-spacing: -0.005em; } /* ===== About section ===== */ .about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; } .about-grid > div:first-child p { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px; } .about-meta { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; } .about-meta h4 { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-700); font-weight: 800; margin: 16px 0 4px; } .about-meta h4:first-child { margin-top: 0; } .about-meta p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.5; } /* ===== Project detail page ===== */ .project-page .project-hero { padding: 56px 0 24px; border-bottom: 1px solid var(--line); background: var(--bg-soft); } .project-page .project-hero h1 { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; margin: 12px 0 0; color: var(--ink-1); } .back-link { display: inline-block; font-size: 13px; color: var(--ink-3); font-weight: 600; letter-spacing: 0.02em; margin-bottom: 4px; } .back-link:hover { color: var(--p-700); text-decoration: none; } .project-body { padding: 40px 0 24px; } .project-images { display: flex; flex-direction: column; gap: 20px; } .project-images img { width: 100%; height: auto; display: block; border-radius: var(--r); border: 1px solid var(--line); background: white; } .project-nav { border-top: 1px solid var(--line); padding: 24px 0; } .project-nav-inner { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; } .proj-nav-link { color: var(--ink-2); } .proj-nav-link:hover { color: var(--p-700); text-decoration: none; } .proj-nav-home { color: var(--p-700); padding: 8px 16px; background: var(--p-100); border-radius: 999px; } .proj-nav-home:hover { background: var(--p-200); } /* ===== Responsive ===== */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } .hero h1 { font-size: 40px; } .hero .lede { font-size: 17px; } .thesis-grid { grid-template-columns: repeat(2, 1fr); } .cards, .cards.three, .tour { grid-template-columns: 1fr; } .deck-row { grid-template-columns: 1fr; } .deck-label { padding-bottom: 6px; } footer .wrap { align-items: flex-start; } footer .contact { text-align: left; } .featured-card { grid-template-columns: 1fr; } .featured-visual { padding: 28px; } .vert-stack { flex-direction: row; flex-wrap: wrap; justify-content: center; } .project-grid { grid-template-columns: repeat(2, 1fr); } .screen-grid { grid-template-columns: repeat(2, 1fr); } .about-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .wrap { padding: 0 20px; } .hero { padding: 56px 0 40px; } .hero h1 { font-size: 32px; } section { padding: 48px 0; } .topbar nav a { margin-left: 2px; padding: 4px 8px; font-size: 12.5px; } .featured-content { padding: 28px 24px; } .featured-content h3 { font-size: 20px; } .project-grid { grid-template-columns: 1fr; } .screen-grid { grid-template-columns: 1fr; } .project-page .project-hero h1 { font-size: 28px; } }