/* ============================================================ Olivier Ueno. portfolio Built on Ueno Systems tokens. IBM Plex layered on top. ============================================================ */ /* Import the design system tokens verbatim, then override the font stack to load IBM Plex Sans / Mono at the front. */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { /* Brought in from Ueno Systems colors_and_type.css ---------- */ --u-gray-0: #ffffff; --u-gray-50: #fafafa; --u-gray-100: #f5f5f5; --u-gray-150: #f0f0f0; --u-gray-200: #e5e5e5; --u-gray-300: #d4d4d4; --u-gray-400: #a3a3a3; --u-gray-500: #737373; --u-gray-600: #525252; --u-gray-700: #404040; --u-gray-800: #262626; --u-gray-900: #171717; --u-gray-950: #0a0a0a; --u-bg: var(--u-gray-0); --u-bg-elevated: var(--u-gray-50); --u-bg-hover: var(--u-gray-150); --u-card: var(--u-gray-0); --u-border: var(--u-gray-200); --u-border-hover: var(--u-gray-300); --u-border-light: #f0f0f0; --u-fg: var(--u-gray-900); --u-fg-secondary: var(--u-gray-600); --u-fg-muted: var(--u-gray-500); --u-fg-faint: var(--u-gray-400); /* Accent. defaults to deep slate. Cycled by Tweaks. */ --u-primary: #2c3e50; --u-primary-hover: #1e2c3a; --u-primary-fg: #ffffff; --u-focus-ring: 0 0 0 3px color-mix(in oklab, var(--u-primary) 18%, transparent); --u-positive: #22c55e; --u-negative: #ef4444; --u-warning: #eab308; /* Plex layered on top of the system stack */ --u-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --u-font-mono: "IBM Plex Mono", "SF Mono", Menlo, Monaco, "Cascadia Code", monospace; --u-text-2xs: 0.6875rem; --u-text-xs: 0.75rem; --u-text-sm: 0.875rem; --u-text-base: 1rem; --u-text-md: 1.0625rem; --u-text-lg: 1.125rem; --u-text-xl: 1.25rem; --u-text-2xl: 1.5rem; --u-text-3xl: 1.875rem; --u-text-4xl: 2.5rem; --u-text-5xl: 3.5rem; --u-text-6xl: 5rem; --u-text-display: 2.625rem; --u-weight-light: 300; --u-weight-regular: 400; --u-weight-medium: 500; --u-weight-semibold: 600; --u-leading-tight: 1.15; --u-leading-snug: 1.4; --u-leading-base: 1.55; --u-tracking-eyebrow: 0.12em; --u-tracking-cap: 0.05em; --u-tracking-tight: -0.02em; --u-tracking-tighter: -0.035em; --u-space-2xs: 0.125rem; --u-space-xs: 0.25rem; --u-space-sm: 0.5rem; --u-space-md: 1rem; --u-space-lg: 1.5rem; --u-space-xl: 2rem; --u-space-2xl: 2.5rem; --u-space-3xl: 3rem; --u-space-4xl: 4rem; --u-space-5xl: 6rem; --u-space-6xl: 8rem; --u-radius-sm: 2px; --u-radius-md: 4px; --u-radius-lg: 8px; --u-radius-full: 9999px; --u-transition-fast: 0.1s ease; --u-transition-base: 0.18s ease; --u-transition-slow: 0.3s ease; --u-container-narrow: 960px; --u-container-wide: 1240px; --u-container-bleed: 1480px; /* Density. scales section padding */ --density: 1; color-scheme: light; } [data-theme="dark"] { --u-bg: #0a0a0a; --u-bg-elevated: #141414; --u-bg-hover: #1c1c1c; --u-card: #111111; --u-border: #262626; --u-border-hover: #353535; --u-border-light: #1a1a1a; --u-fg: #fafafa; --u-fg-secondary: #a3a3a3; --u-fg-muted: #737373; --u-fg-faint: #525252; --u-primary-fg: #fafafa; color-scheme: dark; } /* Accent presets driven by data-accent on */ [data-accent="slate"] { --u-primary: #2c3e50; --u-primary-hover: #1e2c3a; } [data-accent="steel"] { --u-primary: #3a5a7c; --u-primary-hover: #2a4660; } [data-accent="oxide"] { --u-primary: #b85c38; --u-primary-hover: #944626; } [data-accent="graphite"] { --u-primary: #5a5448; --u-primary-hover: #423d33; } /* Density */ [data-density="compact"] { --u-space-5xl: 4rem; --u-space-6xl: 5.5rem; } [data-density="generous"] { --u-space-5xl: 7rem; --u-space-6xl: 10rem; } /* ============================================================ Reset + base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--u-font-sans); font-size: var(--u-text-base); line-height: var(--u-leading-base); color: var(--u-fg); background: var(--u-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; transition: background-color var(--u-transition-base), color var(--u-transition-base); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; } hr { border: 0; border-top: 1px solid var(--u-border); margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--u-weight-regular); color: var(--u-fg); } p { margin: 0; } ::selection { background: var(--u-primary); color: var(--u-primary-fg); } /* ============================================================ Utilities ============================================================ */ .mono { font-family: var(--u-font-mono); font-variant-numeric: tabular-nums; } .eyebrow { font-family: var(--u-font-mono); font-size: var(--u-text-2xs); font-weight: var(--u-weight-regular); text-transform: uppercase; letter-spacing: var(--u-tracking-eyebrow); color: var(--u-fg-muted); } .fg-muted { color: var(--u-fg-muted); } .fg-faint { color: var(--u-fg-faint); } .fg-second { color: var(--u-fg-secondary); } .accent { color: var(--u-primary); } .tnum { font-variant-numeric: tabular-nums; } .divider { height: 1px; background: var(--u-border); width: 100%; } .divider-tight { height: 1px; background: var(--u-border-light); width: 100%; } .shell { max-width: var(--u-container-wide); margin: 0 auto; padding-inline: clamp(20px, 4vw, 48px); } .shell-narrow { max-width: var(--u-container-narrow); margin: 0 auto; padding-inline: clamp(20px, 4vw, 48px); } .shell-bleed { max-width: var(--u-container-bleed); margin: 0 auto; padding-inline: clamp(20px, 4vw, 48px); } /* ============================================================ Top nav ============================================================ */ .nav { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--u-bg) 92%, transparent); backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--u-border-light); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--u-space-md); padding-block: 16px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--u-font-mono); font-size: var(--u-text-sm); letter-spacing: 0.02em; color: var(--u-fg); } .brand .mark { width: 22px; height: 22px; border: 1px solid var(--u-fg); border-radius: 2px; display: grid; place-items: center; font-size: 11px; font-weight: 500; letter-spacing: -0.02em; } .brand-name { font-weight: 500; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-link { font-family: var(--u-font-mono); font-size: var(--u-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--u-fg-muted); padding: 8px 12px; border-radius: var(--u-radius-sm); transition: color var(--u-transition-base), background var(--u-transition-base); cursor: pointer; white-space: nowrap; } .nav-link:hover { color: var(--u-fg); } .nav-link.is-active { color: var(--u-fg); } .nav-link.is-active::after { content: ""; display: block; height: 1px; background: var(--u-fg); margin-top: 4px; margin-inline: 12px; margin-bottom: -9px; } .nav-right { display: flex; align-items: center; gap: 12px; font-family: var(--u-font-mono); font-size: var(--u-text-xs); color: var(--u-fg-muted); } .nav-kbd-hint { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--u-border); border-radius: var(--u-radius-sm); font-size: 11px; letter-spacing: 0.05em; color: var(--u-fg-muted); cursor: pointer; transition: border-color var(--u-transition-base), color var(--u-transition-base); } .nav-kbd-hint:hover { border-color: var(--u-fg); color: var(--u-fg); } .kbd { font-family: var(--u-font-mono); font-size: 10px; padding: 1px 5px; border: 1px solid var(--u-border); border-radius: 2px; background: var(--u-bg-elevated); color: var(--u-fg-secondary); } .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--u-positive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--u-positive) 18%, transparent); display: inline-block; } /* Theme toggle (sun/moon) ----------------------------------- */ .nav-theme { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; border: 1px solid var(--u-border); border-radius: var(--u-radius-sm); color: var(--u-fg-secondary); background: transparent; transition: border-color var(--u-transition-base), color var(--u-transition-base); cursor: pointer; } .nav-theme:hover { border-color: var(--u-fg); color: var(--u-fg); } .nav-theme-glyph { font-size: 14px; line-height: 1; } .nav-theme-dot { position: absolute; top: 4px; right: 4px; width: 4px; height: 4px; border-radius: 50%; background: transparent; transition: background var(--u-transition-base); } .nav-theme-dot[data-auto="1"] { background: var(--u-primary); } @media (max-width: 700px) { .nav-right .nav-kbd-hint, .nav-right .nav-time { display: none; } .nav-links { gap: 0; } .nav-link { padding: 8px; font-size: 10px; } } /* ============================================================ Footer ============================================================ */ .foot { border-top: 1px solid var(--u-border-light); margin-top: var(--u-space-6xl); } .foot-inner { padding-block: var(--u-space-2xl) var(--u-space-xl); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--u-space-xl); align-items: start; } .foot-col { display: flex; flex-direction: column; gap: 8px; } .foot a:hover { color: var(--u-fg); border-bottom-color: var(--u-fg); } .foot-link { font-size: var(--u-text-sm); color: var(--u-fg-secondary); border-bottom: 1px solid transparent; width: max-content; padding-bottom: 1px; } .foot-meta { margin-top: var(--u-space-xl); padding-block: var(--u-space-md); border-top: 1px solid var(--u-border-light); display: flex; justify-content: space-between; font-family: var(--u-font-mono); font-size: 11px; color: var(--u-fg-faint); letter-spacing: 0.04em; text-transform: uppercase; } @media (max-width: 700px) { .foot-inner { grid-template-columns: 1fr; gap: var(--u-space-lg); } .foot-meta { flex-direction: column; gap: 8px; } } /* ============================================================ Page chrome ============================================================ */ .page { padding-block: var(--u-space-5xl); animation: fadeIn 0.35s ease both; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Page header. used on project / about / contact pages */ .page-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u-space-3xl); align-items: end; padding-bottom: var(--u-space-2xl); border-bottom: 1px solid var(--u-border); margin-bottom: var(--u-space-3xl); } .page-head .lead h1 { font-size: clamp(2rem, 4.5vw, var(--u-text-4xl)); font-weight: var(--u-weight-light); letter-spacing: var(--u-tracking-tight); line-height: 1.05; } .page-head .lead .eyebrow { margin-bottom: 16px; display: block; } .page-head .meta { display: grid; grid-template-columns: max-content 1fr; row-gap: 6px; column-gap: var(--u-space-xl); font-family: var(--u-font-mono); font-size: var(--u-text-xs); color: var(--u-fg-secondary); } .page-head .meta dt { color: var(--u-fg-faint); text-transform: uppercase; letter-spacing: 0.08em; } .page-head .meta dd { margin: 0; color: var(--u-fg); } @media (max-width: 800px) { .page-head { grid-template-columns: 1fr; gap: var(--u-space-lg); } } /* ============================================================ HOME. common pieces ============================================================ */ .intro-paragraph { font-size: clamp(1.05rem, 1.4vw, var(--u-text-md)); line-height: 1.6; color: var(--u-fg-secondary); max-width: 56ch; text-wrap: pretty; } .intro-paragraph strong { color: var(--u-fg); font-weight: var(--u-weight-medium); } .now-block { border: 1px solid var(--u-border); border-radius: var(--u-radius-md); padding: var(--u-space-lg); display: flex; flex-direction: column; gap: 10px; } .now-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--u-space-md); font-size: var(--u-text-sm); } .now-row .k { font-family: var(--u-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--u-fg-muted); } .now-row .v { color: var(--u-fg); font-family: var(--u-font-mono); font-size: var(--u-text-xs); } .now-row .v.long { font-family: var(--u-font-sans); font-size: var(--u-text-sm); text-align: right; } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--u-space-lg); } .btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid var(--u-border); border-radius: var(--u-radius-sm); font-family: var(--u-font-mono); font-size: var(--u-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--u-fg); background: var(--u-card); transition: border-color var(--u-transition-base), background var(--u-transition-base), color var(--u-transition-base); cursor: pointer; } .btn:hover { border-color: var(--u-fg); } .btn.primary { background: var(--u-primary); border-color: var(--u-primary); color: var(--u-primary-fg); } .btn.primary:hover { background: var(--u-primary-hover); border-color: var(--u-primary-hover); } .btn .arrow { transition: transform var(--u-transition-base); } .btn:hover .arrow { transform: translateX(3px); } /* ============================================================ HOME. Direction A: Editorial / Asymmetric ============================================================ */ .home-a .hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.85fr); gap: var(--u-space-4xl); align-items: start; padding-block: var(--u-space-2xl) var(--u-space-5xl); } .home-a .hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: var(--u-weight-light); letter-spacing: var(--u-tracking-tighter); line-height: 0.98; } .home-a .hero h1 .name { display: block; } .home-a .hero h1 .surname { display: block; color: var(--u-primary); } .home-a .position { margin-top: var(--u-space-xl); font-size: clamp(1.05rem, 1.4vw, 1.15rem); line-height: 1.5; color: var(--u-fg-secondary); max-width: 38ch; text-wrap: pretty; } .home-a .position .accented { color: var(--u-fg); } .home-a .hero .right { display: flex; flex-direction: column; gap: var(--u-space-lg); margin-top: 8px; } @media (max-width: 900px) { .home-a .hero { grid-template-columns: 1fr; gap: var(--u-space-2xl); } } /* ============================================================ HOME. Direction B: Technical / Spec sheet ============================================================ */ .home-b { background-image: linear-gradient(to right, var(--u-border-light) 1px, transparent 1px), linear-gradient(to bottom, var(--u-border-light) 1px, transparent 1px); background-size: 64px 64px; background-position: -1px -1px; } .home-b .hero-frame { border: 1px solid var(--u-border); background: var(--u-bg); padding: 0; margin-block: var(--u-space-xl); } .home-b .title-block { display: grid; grid-template-columns: 1.5fr 1fr; border-bottom: 1px solid var(--u-border); } .home-b .title-block .left { padding: var(--u-space-2xl); border-right: 1px solid var(--u-border); } .home-b .title-block h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: var(--u-weight-regular); letter-spacing: var(--u-tracking-tight); line-height: 1; } .home-b .title-block .position { margin-top: var(--u-space-md); color: var(--u-fg-secondary); font-size: var(--u-text-base); max-width: 44ch; } .home-b .title-block .right { padding: var(--u-space-xl); } .home-b .spec-grid { display: grid; grid-template-columns: 1fr 1fr; row-gap: 10px; column-gap: var(--u-space-md); font-family: var(--u-font-mono); font-size: var(--u-text-xs); } .home-b .spec-grid dt { color: var(--u-fg-faint); text-transform: uppercase; letter-spacing: 0.08em; } .home-b .spec-grid dd { margin: 0; color: var(--u-fg); text-align: right; } .home-b .body-row { display: grid; grid-template-columns: 1.5fr 1fr; min-height: 200px; } .home-b .body-row .body { padding: var(--u-space-2xl); border-right: 1px solid var(--u-border); } .home-b .body-row .body .intro-paragraph { max-width: 50ch; } .home-b .body-row .meta-col { padding: var(--u-space-xl); display: flex; flex-direction: column; gap: 12px; } @media (max-width: 900px) { .home-b .title-block, .home-b .body-row { grid-template-columns: 1fr; } .home-b .title-block .left, .home-b .body-row .body { border-right: 0; border-bottom: 1px solid var(--u-border); } } /* ============================================================ HOME. Direction C: Catalogue (with absorbed technical character) ============================================================ */ .home-c { position: relative; } /* Registration marks in viewport corners. like a printed plate */ .home-c .reg-marks { position: absolute; pointer-events: none; inset: var(--u-space-xl) clamp(20px, 4vw, 48px); z-index: 0; } .home-c .reg-marks span { position: absolute; width: 14px; height: 14px; color: var(--u-fg-faint); font-family: var(--u-font-mono); font-size: 14px; line-height: 1; opacity: 0.55; } .home-c .reg-marks .tl { top: 0; left: 0; } .home-c .reg-marks .tr { top: 0; right: 0; text-align: right; } /* Drawing-style metadata strip above the hero */ .home-c .dwg-strip { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--u-space-md); padding-block: 14px; border-bottom: 1px solid var(--u-border); font-family: var(--u-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--u-fg-muted); } .home-c .dwg-strip .left, .home-c .dwg-strip .right { display: flex; gap: var(--u-space-lg); flex-wrap: wrap; } .home-c .dwg-strip .right .accent-tag { color: var(--u-fg); } .home-c .dwg-strip .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--u-positive); margin-right: 6px; vertical-align: middle; } @media (max-width: 700px) { .home-c .dwg-strip { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 10px; } } .home-c .hero { padding-block: clamp(var(--u-space-4xl), 11vw, var(--u-space-6xl)); text-align: center; position: relative; } .home-c .hero .eyebrow { display: block; margin-bottom: var(--u-space-md); } .home-c .hero h1 { font-size: clamp(3rem, 11vw, 9rem); font-weight: var(--u-weight-light); letter-spacing: -0.045em; line-height: 0.92; } .home-c .hero h1 .surname { color: var(--u-primary); } /* Hairline measurement under the title. like a dimension line */ .home-c .dim-line { display: grid; grid-template-columns: 1fr max-content 1fr; align-items: center; gap: 14px; margin: var(--u-space-xl) auto var(--u-space-md); max-width: 480px; font-family: var(--u-font-mono); font-size: 11px; color: var(--u-fg-muted); letter-spacing: 0.08em; text-transform: uppercase; } .home-c .dim-line .line { position: relative; height: 1px; background: var(--u-border); } .home-c .dim-line .line::before, .home-c .dim-line .line::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--u-border-hover); } .home-c .dim-line .line::before { left: 0; } .home-c .dim-line .line::after { right: 0; } .home-c .hero .position { margin: var(--u-space-md) auto 0; max-width: 56ch; font-size: var(--u-text-lg); color: var(--u-fg-secondary); text-wrap: balance; } .home-c .hero .cta-row { justify-content: center; } /* Specification row. replaces dense intro with a spec sheet */ .home-c .spec-strip { border-top: 1px solid var(--u-fg); border-bottom: 1px solid var(--u-border); display: grid; grid-template-columns: repeat(6, 1fr); margin-top: var(--u-space-4xl); } .home-c .spec-strip .cell { padding: var(--u-space-lg) var(--u-space-md); border-right: 1px solid var(--u-border-light); display: flex; flex-direction: column; gap: 6px; } .home-c .spec-strip .cell:last-child { border-right: 0; } .home-c .spec-strip .k { font-family: var(--u-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--u-fg-muted); } .home-c .spec-strip .v { font-family: var(--u-font-mono); font-size: var(--u-text-sm); color: var(--u-fg); font-variant-numeric: tabular-nums; letter-spacing: -0.005em; } .home-c .spec-strip .v.long { font-family: var(--u-font-sans); font-size: var(--u-text-sm); } .home-c .spec-strip .v .dot { color: var(--u-positive); margin-right: 4px; } @media (max-width: 900px) { .home-c .spec-strip { grid-template-columns: repeat(2, 1fr); } .home-c .spec-strip .cell { border-bottom: 1px solid var(--u-border-light); } .home-c .spec-strip .cell:nth-child(odd) { border-right: 1px solid var(--u-border-light); } } /* Disciplines strip. full-width, monospace, scrollable on overflow */ .home-c .disciplines { display: flex; align-items: center; gap: var(--u-space-lg); padding-block: var(--u-space-md); border-bottom: 1px solid var(--u-border); font-family: var(--u-font-mono); font-size: 11px; color: var(--u-fg-secondary); letter-spacing: 0.05em; text-transform: uppercase; overflow-x: auto; scrollbar-width: none; } .home-c .disciplines::-webkit-scrollbar { display: none; } .home-c .disciplines .k { color: var(--u-fg-faint); flex-shrink: 0; } .home-c .disciplines .items { display: flex; gap: var(--u-space-md); flex-wrap: nowrap; } .home-c .disciplines .items span { white-space: nowrap; color: var(--u-fg); } .home-c .disciplines .items span + span::before { content: "ยท"; color: var(--u-fg-faint); margin-right: var(--u-space-md); } /* The old intro-row is no longer used in C; keep for safety */ .home-c .below-divider { display: none; } /* ============================================================ PROJECT INDEX (used across all home directions) ============================================================ */ .section-head { display: flex; justify-content: space-between; align-items: baseline; padding-block: var(--u-space-md); border-bottom: 1px solid var(--u-fg); margin-bottom: var(--u-space-lg); } .section-head h2 { font-size: var(--u-text-xl); font-weight: var(--u-weight-medium); letter-spacing: -0.01em; } .section-head .count { font-family: var(--u-font-mono); font-size: var(--u-text-xs); color: var(--u-fg-muted); letter-spacing: 0.05em; } /* THUMB STYLE: IMAGE-LED ------------------------------------- */ .proj-grid--image { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--u-space-xl); margin-bottom: var(--u-space-4xl); } @media (max-width: 900px) { .proj-grid--image { grid-template-columns: repeat(2, 1fr); gap: var(--u-space-lg); } .proj-grid--image .proj-card--image, .proj-grid--image .proj-card--image h3, .proj-grid--image .proj-card--image .desc { text-align: center; } /* iOS Safari needs explicit width on flex children to stretch them; otherwise short text like "AVA Light" stays at content-width and sits at the left of the card. */ .proj-grid--image .proj-card--image h3, .proj-grid--image .proj-card--image .desc { width: 100%; align-self: stretch; } .proj-grid--image .proj-card--image .meta { justify-content: center; gap: 14px; width: 100%; } } @media (max-width: 600px) { .proj-grid--image { grid-template-columns: 1fr; gap: var(--u-space-xl); } .proj-grid--image .proj-card--image .desc { margin-inline: auto; max-width: 44ch; } } .proj-card--image { display: flex; flex-direction: column; gap: var(--u-space-md); cursor: pointer; transition: transform var(--u-transition-base); } .proj-card--image:hover { transform: translateY(-2px); } .proj-card--image .thumb { width: 100%; background-color: var(--u-bg-elevated); background-size: cover; background-position: center; background-repeat: no-repeat; border: 1px solid var(--u-border); border-radius: var(--u-radius-md); position: relative; overflow: hidden; transition: border-color var(--u-transition-base); } /* Use padding-top trick for 4:5 aspect ratio (universal browser support). 125% = height as 5/4 of width. Pre-iOS 15.4 doesn't support CSS aspect-ratio. */ .proj-card--image .thumb::before { content: ""; display: block; padding-top: 125%; } .proj-card--image:hover .thumb { border-color: var(--u-fg); } .proj-card--image .num { position: absolute; top: 14px; left: 14px; font-family: var(--u-font-mono); font-size: 11px; color: var(--u-fg-muted); letter-spacing: 0.05em; } .proj-card--image .badge { position: absolute; bottom: 14px; right: 14px; font-family: var(--u-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 8px; border: 1px solid var(--u-border); border-radius: 2px; background: var(--u-bg); color: var(--u-fg-secondary); } .proj-card--image .meta { display: flex; justify-content: space-between; font-family: var(--u-font-mono); font-size: 11px; color: var(--u-fg-muted); letter-spacing: 0.04em; } .proj-card--image h3 { font-size: var(--u-text-lg); font-weight: var(--u-weight-medium); letter-spacing: -0.01em; line-height: 1.2; } .proj-card--image .desc { font-size: var(--u-text-sm); color: var(--u-fg-secondary); line-height: 1.45; } /* THUMB STYLE: NUMBER-LED ----------------------------------- */ .proj-grid--number { display: flex; flex-direction: column; margin-bottom: var(--u-space-4xl); border-top: 1px solid var(--u-border); } .proj-card--number { display: grid; grid-template-columns: 90px minmax(0, 1.4fr) minmax(0, 1fr) max-content; gap: var(--u-space-xl); align-items: center; padding-block: var(--u-space-2xl); border-bottom: 1px solid var(--u-border); cursor: pointer; transition: background var(--u-transition-base), padding-inline var(--u-transition-base); } .proj-card--number:hover { background: var(--u-bg-elevated); padding-inline: var(--u-space-md); } .proj-card--number .num { font-family: var(--u-font-mono); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: var(--u-weight-light); color: var(--u-fg); letter-spacing: -0.05em; line-height: 1; } .proj-card--number h3 { font-size: clamp(1.5rem, 2.5vw, var(--u-text-2xl)); font-weight: var(--u-weight-regular); letter-spacing: -0.015em; line-height: 1.1; } .proj-card--number .tags { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--u-font-mono); font-size: 11px; color: var(--u-fg-muted); letter-spacing: 0.04em; } .proj-card--number .tag { padding: 3px 8px; border: 1px solid var(--u-border); border-radius: 2px; } .proj-card--number .meta-right { font-family: var(--u-font-mono); font-size: 11px; color: var(--u-fg-muted); text-align: right; display: flex; flex-direction: column; gap: 2px; } .proj-card--number .meta-right .year { color: var(--u-fg); font-size: var(--u-text-xs); } @media (max-width: 800px) { .proj-card--number { grid-template-columns: 60px 1fr; gap: var(--u-space-md); } .proj-card--number .tags, .proj-card--number .meta-right { display: none; } } /* THUMB STYLE: MINIMAL-TEXT (tabular register) -------------- */ .proj-grid--text { margin-bottom: var(--u-space-4xl); border-top: 1px solid var(--u-fg); border-bottom: 1px solid var(--u-border); } .proj-grid--text .row { display: grid; grid-template-columns: 40px minmax(0, 2fr) minmax(0, 1.2fr) 80px 100px 24px; gap: var(--u-space-md); align-items: center; padding-block: 14px; border-bottom: 1px solid var(--u-border-light); font-family: var(--u-font-mono); font-size: var(--u-text-xs); cursor: pointer; transition: background var(--u-transition-base), color var(--u-transition-base); } .proj-grid--text .row.header { cursor: default; color: var(--u-fg-faint); text-transform: uppercase; letter-spacing: 0.06em; background: var(--u-bg); font-size: 10px; } .proj-grid--text .row.header:hover { background: var(--u-bg); color: var(--u-fg-faint); } .proj-grid--text .row:hover { background: var(--u-bg-elevated); } .proj-grid--text .row .title-cell { font-family: var(--u-font-sans); font-size: var(--u-text-sm); font-weight: var(--u-weight-medium); color: var(--u-fg); } .proj-grid--text .row .arrow-cell { color: var(--u-fg-faint); text-align: right; } .proj-grid--text .row:hover .arrow-cell { color: var(--u-fg); transform: translateX(2px); } @media (max-width: 800px) { .proj-grid--text .row { grid-template-columns: 30px 1fr 60px 16px; } .proj-grid--text .row .role-cell, .proj-grid--text .row .status-cell { display: none; } } /* ============================================================ IMAGE PLACEHOLDER ============================================================ */ .img-ph { background: var(--u-bg-elevated); border: 1px solid var(--u-border); border-radius: var(--u-radius-md); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: var(--u-space-md); color: var(--u-fg-muted); font-family: var(--u-font-mono); min-height: 200px; } .img-ph::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(45deg, transparent 49.5%, var(--u-border-light) 49.5%, var(--u-border-light) 50.5%, transparent 50.5%); background-size: 36px 36px; opacity: 0.55; pointer-events: none; } .img-ph .ph-label { position: relative; z-index: 1; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--u-fg-muted); } .img-ph .ph-note { position: relative; z-index: 1; font-size: var(--u-text-xs); font-family: var(--u-font-sans); color: var(--u-fg-secondary); max-width: 32ch; text-wrap: pretty; background: var(--u-card); padding: 8px 12px; border: 1px solid var(--u-border); border-radius: var(--u-radius-sm); display: inline-block; align-self: flex-start; } .img-ph .ph-dim { position: relative; z-index: 1; align-self: flex-end; font-size: 10px; color: var(--u-fg-faint); letter-spacing: 0.05em; } /* ============================================================ PROJECT PAGE. common ============================================================ */ .proj-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--u-space-4xl); align-items: start; } .proj-body .main { display: flex; flex-direction: column; gap: var(--u-space-3xl); } .proj-body .side { display: flex; flex-direction: column; gap: var(--u-space-xl); position: sticky; top: 88px; } @media (max-width: 900px) { .proj-body { grid-template-columns: 1fr; } .proj-body .side { position: static; } } .section-title { font-family: var(--u-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--u-fg-muted); margin-bottom: var(--u-space-md); padding-bottom: var(--u-space-sm); border-bottom: 1px solid var(--u-border-light); display: flex; justify-content: space-between; } .section-title .num { color: var(--u-fg-faint); } .prose p { font-size: var(--u-text-base); line-height: 1.65; color: var(--u-fg); margin-bottom: var(--u-space-md); text-wrap: pretty; max-width: 64ch; } .prose p + p { margin-top: 0; } .prose strong { font-weight: var(--u-weight-medium); } /* Spec block. used on rig + ava ----------------------------- */ .spec-block { border: 1px solid var(--u-border); border-radius: var(--u-radius-md); padding: var(--u-space-lg); display: grid; grid-template-columns: 1fr 1fr; row-gap: 12px; column-gap: var(--u-space-lg); } .spec-block .spec { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px dashed var(--u-border-light); } .spec-block .spec:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; } .spec-block .spec .k { font-family: var(--u-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--u-fg-muted); } .spec-block .spec .v { font-family: var(--u-font-mono); font-size: var(--u-text-sm); color: var(--u-fg); font-variant-numeric: tabular-nums; } .spec-block .spec .v.lg { font-size: var(--u-text-xl); font-weight: var(--u-weight-medium); letter-spacing: -0.01em; } /* BOM table. AVA --------------------------------------------- */ .bom { border: 1px solid var(--u-border); border-radius: var(--u-radius-md); overflow: hidden; } .bom .bom-head { display: grid; grid-template-columns: 40px 1fr 100px 80px; gap: var(--u-space-md); padding: 10px var(--u-space-md); background: var(--u-bg-elevated); border-bottom: 1px solid var(--u-border); font-family: var(--u-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--u-fg-muted); } .bom .bom-row { display: grid; grid-template-columns: 40px 1fr 100px 80px; gap: var(--u-space-md); padding: 10px var(--u-space-md); border-bottom: 1px solid var(--u-border-light); font-family: var(--u-font-mono); font-size: var(--u-text-xs); align-items: center; } .bom .bom-row:last-child { border-bottom: 0; } .bom .bom-row .item { font-family: var(--u-font-sans); color: var(--u-fg); } .bom .bom-row .item small { font-family: var(--u-font-mono); display: block; color: var(--u-fg-muted); font-size: 11px; margin-top: 2px; } .bom .bom-row .qty, .bom .bom-row .ref, .bom .bom-row .idx { color: var(--u-fg-secondary); } .bom .bom-row .idx { color: var(--u-fg-faint); } /* Rig wind-region table ------------------------------------- */ .rig-region-table { border: 1px solid var(--u-border); border-radius: var(--u-radius-md); overflow: hidden; } .rig-region-head, .rig-region-row { display: grid; grid-template-columns: 80px 1fr 1fr 1fr; gap: var(--u-space-md); padding: 10px var(--u-space-md); font-family: var(--u-font-mono); font-size: var(--u-text-xs); font-variant-numeric: tabular-nums; align-items: center; } .rig-region-head { background: var(--u-bg-elevated); border-bottom: 1px solid var(--u-border); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--u-fg-muted); } .rig-region-row { border-bottom: 1px solid var(--u-border-light); color: var(--u-fg); } .rig-region-row:last-child { border-bottom: 0; } .rig-region-row .region { font-weight: var(--u-weight-medium); color: var(--u-fg); letter-spacing: 0.02em; } @media (max-width: 600px) { .rig-region-head, .rig-region-row { grid-template-columns: 60px 1fr 1fr; font-size: 11px; } .rig-region-head span:nth-child(4), .rig-region-row span:nth-child(4) { display: none; } } /* AVA gallery ------------------------------------------------ */ .ava-hero { aspect-ratio: 16/10; min-height: 320px; margin-bottom: var(--u-space-3xl); width: 100%; object-fit: cover; border-radius: var(--u-radius-md); background: var(--u-bg-elevated); } .ava-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u-space-md); } .ava-grid > * { width: 100%; border-radius: var(--u-radius-md); background: var(--u-bg-elevated); } .ava-grid > img { object-fit: cover; } .ava-grid .tall { grid-row: span 2; overflow: hidden; position: relative; min-height: 0; } .ava-grid .tall > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .ava-grid .wide { aspect-ratio: 4/3; } /* ============================================================ STRATCO. diagram + stats ============================================================ */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--u-border); border-bottom: 1px solid var(--u-border); } .stat { padding: var(--u-space-lg) var(--u-space-md); border-right: 1px solid var(--u-border); display: flex; flex-direction: column; gap: 6px; } .stat:last-child { border-right: 0; } .stat .num { font-family: var(--u-font-mono); font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--u-weight-light); color: var(--u-fg); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .stat .num .unit { font-size: 0.55em; color: var(--u-fg-muted); margin-left: 4px; } .stat .k { font-family: var(--u-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--u-fg-muted); line-height: 1.3; } @media (max-width: 700px) { .stat-row { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--u-border); } } /* Project summary: Problem / Approach / Tools / Result ----- */ .patr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--u-border); border: 1px solid var(--u-border); border-radius: var(--u-radius-md); overflow: hidden; margin-bottom: var(--u-space-2xl); } .patr-cell { background: var(--u-bg); padding: var(--u-space-md) var(--u-space-lg); display: flex; flex-direction: column; gap: 8px; min-width: 0; } .patr-cell .k { font-family: var(--u-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--u-fg-muted); } .patr-cell .v { font-size: var(--u-text-sm); line-height: 1.5; color: var(--u-fg); text-wrap: pretty; } @media (max-width: 900px) { .patr { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .patr { grid-template-columns: 1fr; } .patr-cell { padding: var(--u-space-sm) var(--u-space-md); } } /* Department workflow: proportional phase bar + equal cards */ .phase-bar { display: flex; gap: 0; margin-block: var(--u-space-md) var(--u-space-lg); border: 1px solid var(--u-border); border-radius: var(--u-radius-sm); overflow: hidden; } .phase-seg { padding: 16px 18px; background: var(--u-bg-elevated); display: flex; align-items: baseline; gap: 12px; min-width: 0; position: relative; overflow: hidden; border-right: 1px solid var(--u-border); } .phase-seg:last-child { border-right: 0; } .phase-seg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--u-primary); opacity: 0.4; } .phase-seg--primary::before { opacity: 1; } .phase-seg .seg-pct { font-family: var(--u-font-mono); font-size: var(--u-text-xl); font-weight: var(--u-weight-regular); color: var(--u-fg); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1; } .phase-seg .seg-name { font-family: var(--u-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--u-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .phase-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--u-space-md); } .phase-cards .phase-card { padding: var(--u-space-md) var(--u-space-md) var(--u-space-md) var(--u-space-md); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-radius-sm); display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; } .phase-cards .phase-card::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--u-fg-faint); border-radius: var(--u-radius-sm) 0 0 var(--u-radius-sm); opacity: 0.4; } .phase-cards .phase-card:nth-child(2)::before { background: var(--u-primary); opacity: 1; } .phase-cards .phase-card h4 { font-family: var(--u-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--u-fg-muted); font-weight: var(--u-weight-regular); margin: 0; } .phase-cards .phase-card .phase-card-sub { font-size: var(--u-text-sm); color: var(--u-fg); font-weight: var(--u-weight-medium); letter-spacing: -0.005em; margin: 2px 0 6px; line-height: 1.3; } .phase-cards .phase-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-family: var(--u-font-mono); font-size: 11px; color: var(--u-fg-secondary); line-height: 1.4; } @media (max-width: 800px) { .phase-cards { grid-template-columns: 1fr; } .phase-seg .seg-name { display: none; } .phase-seg { padding: 12px; gap: 0; } } /* Department workflow diagram (legacy, no longer used) */ .dept-diagram { border: 1px solid var(--u-border); border-radius: var(--u-radius-md); padding: var(--u-space-xl); display: grid; grid-template-columns: 1fr 60px 1fr 60px 1fr; gap: 0; align-items: stretch; position: relative; margin-block: var(--u-space-lg); } .dept-node { display: flex; flex-direction: column; gap: 8px; padding: var(--u-space-md); background: var(--u-bg-elevated); border: 1px solid var(--u-border); border-radius: var(--u-radius-sm); } .dept-node .k { font-family: var(--u-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--u-fg-muted); } .dept-node .v { font-size: var(--u-text-base); color: var(--u-fg); font-weight: var(--u-weight-medium); letter-spacing: -0.01em; } .dept-node ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-family: var(--u-font-mono); font-size: 11px; color: var(--u-fg-secondary); } .dept-arrow { display: flex; align-items: center; justify-content: center; color: var(--u-fg-faint); font-family: var(--u-font-mono); font-size: var(--u-text-lg); } @media (max-width: 900px) { .dept-diagram { grid-template-columns: 1fr; gap: var(--u-space-md); padding: var(--u-space-md); } .dept-arrow { transform: rotate(90deg); padding: 4px 0; } } /* ============================================================ ABOUT / CONTACT ============================================================ */ .about-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: var(--u-space-4xl); align-items: start; } .about-grid .prose p { font-size: var(--u-text-md); line-height: 1.65; color: var(--u-fg); margin-bottom: var(--u-space-lg); max-width: 60ch; } .about-grid .side-card { border: 1px solid var(--u-border); border-radius: var(--u-radius-md); padding: var(--u-space-lg); display: flex; flex-direction: column; gap: 12px; } .exp-list { display: flex; flex-direction: column; } .exp-row { display: grid; grid-template-columns: 80px 1fr max-content; gap: var(--u-space-md); padding-block: 14px; border-bottom: 1px solid var(--u-border-light); font-size: var(--u-text-sm); align-items: baseline; } .exp-row:last-child { border-bottom: 0; } .exp-row .when { font-family: var(--u-font-mono); font-size: 11px; color: var(--u-fg-muted); letter-spacing: 0.04em; } .exp-row .what { color: var(--u-fg); font-weight: var(--u-weight-medium); } .exp-row .what small { display: block; font-weight: var(--u-weight-regular); color: var(--u-fg-secondary); font-size: var(--u-text-xs); margin-top: 2px; } .exp-row .where { font-family: var(--u-font-mono); font-size: 11px; color: var(--u-fg-muted); text-align: right; } @media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } .exp-row { grid-template-columns: 1fr; gap: 4px; } .exp-row .where { text-align: left; } } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u-space-xl); } .contact-grid--three { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .contact-grid--three { grid-template-columns: 1fr 1fr; } } .contact-card { border: 1px solid var(--u-border); border-radius: var(--u-radius-md); padding: var(--u-space-xl); display: flex; flex-direction: column; gap: var(--u-space-sm); transition: border-color var(--u-transition-base); cursor: pointer; } .contact-card:hover { border-color: var(--u-fg); } .contact-card .label { font-family: var(--u-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--u-fg-muted); } .contact-card .v { font-size: var(--u-text-xl); font-weight: var(--u-weight-regular); letter-spacing: -0.01em; color: var(--u-fg); } .contact-card .note { font-size: var(--u-text-sm); color: var(--u-fg-secondary); margin-top: 4px; } @media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } } /* ============================================================ Command palette ============================================================ */ .palette-backdrop { position: fixed; inset: 0; z-index: 100; background: color-mix(in oklab, var(--u-gray-950) 30%, transparent); backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; animation: fadeIn 0.15s ease both; } .palette { width: min(560px, 92vw); background: var(--u-card); border: 1px solid var(--u-border); border-radius: var(--u-radius-lg); box-shadow: 0 30px 60px rgba(0,0,0,0.25); overflow: hidden; } .palette-input-wrap { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--u-border-light); gap: 12px; } .palette-input-wrap input { flex: 1; border: none; outline: none; background: transparent; color: var(--u-fg); font: inherit; font-size: var(--u-text-base); } .palette-list { max-height: 360px; overflow-y: auto; padding: 6px; } .palette-row { display: grid; grid-template-columns: 24px 1fr max-content; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--u-radius-sm); font-size: var(--u-text-sm); cursor: pointer; color: var(--u-fg); } .palette-row:hover, .palette-row.is-active { background: var(--u-bg-elevated); } .palette-row .idx { font-family: var(--u-font-mono); font-size: 11px; color: var(--u-fg-faint); } .palette-row .meta { font-family: var(--u-font-mono); font-size: 10px; color: var(--u-fg-muted); text-transform: uppercase; letter-spacing: 0.06em; } .palette-hint { padding: 10px 18px; border-top: 1px solid var(--u-border-light); font-family: var(--u-font-mono); font-size: 11px; color: var(--u-fg-muted); display: flex; justify-content: space-between; } /* ============================================================ Margin tick marks (registration marks on technical pages) ============================================================ */ .tick-marks { position: relative; } .tick-marks::before, .tick-marks::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: repeating-linear-gradient(to bottom, var(--u-border) 0, var(--u-border) 6px, transparent 6px, transparent 24px); opacity: 0.4; } .tick-marks::before { left: 8px; } .tick-marks::after { right: 8px; } @media (max-width: 1100px) { .tick-marks::before, .tick-marks::after { display: none; } } /* ============================================================ MOBILE. Sweeping responsive corrections. ============================================================ */ /* Nav: tighten on small screens, drop brand wordmark below ~480px */ @media (max-width: 600px) { .brand { gap: 8px; } } @media (max-width: 480px) { .brand-name { display: none; } .nav-link { font-size: 9px; padding: 6px; } .shell-bleed { padding-inline: 16px; } } /* Catalogue hero. Give the name a more sensible mobile size, keep top/bottom padding symmetric. */ @media (max-width: 600px) { .home-c .hero { padding-block: var(--u-space-3xl); } .home-c .hero h1 { font-size: clamp(2.75rem, 14vw, 4rem); } .home-c .hero .position { font-size: var(--u-text-md); } .home-c .hero .cta-row { flex-direction: column; align-items: stretch; gap: 8px; } .home-c .hero .cta-row .btn { justify-content: center; } } /* Section head: wrap on small screens. */ @media (max-width: 480px) { .section-head { flex-wrap: wrap; gap: 6px; } } /* Project page hero / image placeholder: shorter on mobile. */ @media (max-width: 700px) { .ava-hero { aspect-ratio: 4/3; min-height: 220px; } .img-ph { padding: 12px; min-height: 160px; } .img-ph .ph-note { font-size: 11px; padding: 6px 10px; } } /* AVA gallery: stack on mobile. */ @media (max-width: 700px) { .ava-grid { grid-template-columns: 1fr; } .ava-grid .tall, .ava-grid .wide { aspect-ratio: 4/3; grid-row: auto; } } /* Spec blocks: single column when cramped. */ @media (max-width: 500px) { .spec-block { grid-template-columns: 1fr; } .spec-block .spec { padding-bottom: 10px; border-bottom: 1px dashed var(--u-border-light); } .spec-block .spec:nth-last-child(-n+2) { border-bottom: 1px dashed var(--u-border-light); padding-bottom: 10px; } .spec-block .spec:last-child { border-bottom: 0; padding-bottom: 0; } .spec-block .spec .v.lg { font-size: var(--u-text-lg); } } /* BOM: drop the redundant "Reference" column on small screens (item already has the reference as ). */ @media (max-width: 700px) { .bom .bom-head, .bom .bom-row { grid-template-columns: 32px 1fr 60px; gap: 10px; padding: 10px 12px; } .bom .bom-head > span:nth-child(3), .bom .bom-row .ref { display: none; } } /* Page head: meta dl tighter on mobile. */ @media (max-width: 600px) { .page-head { padding-bottom: var(--u-space-lg); margin-bottom: var(--u-space-xl); } .page-head .lead h1 { font-size: clamp(1.75rem, 7vw, 2.25rem); } .page-head .meta { font-size: 11px; column-gap: var(--u-space-md); } } /* About + project sidebars: drop sticky on mobile. */ @media (max-width: 900px) { .proj-body .side { gap: var(--u-space-lg); } } /* Stat row: single column on the smallest screens. */ @media (max-width: 420px) { .stat-row { grid-template-columns: 1fr; } .stat { border-right: 0 !important; border-bottom: 1px solid var(--u-border); } .stat:last-child { border-bottom: 0; } } /* Department diagram: already stacks, but tighten padding. */ @media (max-width: 700px) { .dept-diagram { padding: var(--u-space-md); } .dept-node { padding: 12px; } .dept-arrow { font-size: var(--u-text-base); padding: 2px 0; } } /* Contact cards: vertical stack on small. */ @media (max-width: 700px) { .contact-card { padding: var(--u-space-lg); } .contact-card .v { font-size: var(--u-text-lg); word-break: break-word; } } /* Footer: tighten meta strip. */ @media (max-width: 700px) { .foot-meta { font-size: 10px; } } /* Page padding overall: looser on mobile so content breathes. */ @media (max-width: 600px) { .page { padding-block: var(--u-space-2xl); } .foot { margin-top: var(--u-space-4xl); } } /* Command palette: full-width-ish on tiny screens. */ @media (max-width: 500px) { .palette-backdrop { padding-top: 6vh; } .palette { width: calc(100vw - 24px); border-radius: var(--u-radius-md); } .palette-list { max-height: 60vh; } } /* Project number layout (number thumbnails): only number + title visible on small. */ @media (max-width: 600px) { .proj-card--number { padding-block: var(--u-space-lg); gap: var(--u-space-sm); } .proj-card--number .num { font-size: 2.25rem; } } /* Disable hover lift on touch: prevents sticky hover states on mobile. */ @media (hover: none) { .proj-card--image:hover { transform: none; } .proj-card--number:hover { padding-inline: 0; background: transparent; } } /* Prefers-reduced-motion: kill fade-in animation. */ @media (prefers-reduced-motion: reduce) { .page, .palette-backdrop { animation: none; } * { transition: none !important; } }