@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&display=swap"); /* ========================================================================== Cradlepoint Studio — visual system Charcoal / warm paper / muted rust / soft sage. Editorial, not terminal. ========================================================================== */ :root { --ink: #090b0c; --ink-elevated: #111314; --ink-soft: #171a1b; --ink-glass: rgba(12, 14, 15, 0.72); --paper: #efebe4; --paper-2: #e4dfd6; --paper-3: #f6f3ed; --text: #f3f0ea; --text-soft: #c4c0b8; --text-faint: #8f8b84; --ink-text: #161817; --ink-muted: #5c5f5c; --rust: #b57568; --rust-deep: #8a4a42; --rust-soft: #d4a89a; --sage: #7eb8a8; --sage-deep: #3d7a6c; --line: rgba(243, 240, 234, 0.08); --line-strong: rgba(243, 240, 234, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.28); --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.42); --radius: 1.15rem; --radius-sm: 0.75rem; --radius-pill: 999px; --max: 1180px; --pad: max(1.35rem, calc((100vw - var(--max)) / 2)); --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Instrument Serif", Georgia, "Times New Roman", serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.45s; } *, *::before, *::after { box-sizing: border-box; } /* Home scene lives on html so body.portal / body.subpage tints cannot wipe it (those classes sit on in the markup). */ html { scroll-behavior: smooth; min-height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background: linear-gradient(90deg, rgba(5, 7, 9, 0.62), rgba(5, 7, 9, 0.16), rgba(5, 7, 9, 0.62)), url("../assets/background.webp") center top / cover no-repeat fixed, #050709; } body { margin: 0; min-height: 100vh; color: var(--text); font-family: var(--font-sans); font-optical-sizing: auto; font-size: 1rem; line-height: 1.65; overflow-x: hidden; background: transparent; } /* Home-page scanline + depth overlay */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.58)), repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.045) 0, rgba(255, 255, 255, 0.045) 1px, transparent 1px, transparent 4px ); mix-blend-mode: screen; opacity: 0.38; } a { color: inherit; } img { display: block; max-width: 100%; } h1, h2, h3, p { overflow-wrap: anywhere; } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.03em; color: var(--text); } h1 { margin: 0.55rem 0 1.35rem; font-size: clamp(3.4rem, 8.2vw, 6.8rem); line-height: 0.92; letter-spacing: -0.04em; } h1 em, h2 em { color: var(--rust-soft); font-style: italic; } h2 { margin: 0.35rem 0 0; font-size: clamp(2.35rem, 5.2vw, 4.4rem); line-height: 1.02; } h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.18; } .eyebrow { margin: 0; color: var(--rust); font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--paper); color: var(--ink-text); padding: 0.7rem 1rem; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; } .skip-link:focus { top: 1rem; } :focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; } /* -------------------------------------------------------------------------- */ /* Header / footer */ /* -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 0.85rem var(--pad); background: linear-gradient(180deg, rgba(5, 7, 9, 0.82), rgba(5, 7, 9, 0.62)); border-bottom: 1px solid transparent; backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); } .site-header::after { content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); } .brand, .footer-brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; } .brand img, .footer-brand img { width: 2.35rem; height: 2.35rem; object-fit: contain; border-radius: 0.55rem; } .brand span, .footer-brand span { display: grid; line-height: 1; } .brand strong, .footer-brand strong { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; } .brand small, .footer-brand small { margin-top: 0.32rem; color: var(--rust); font-family: var(--font-sans); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.18em; } .site-header nav, footer nav { display: flex; align-items: center; gap: clamp(0.35rem, 1.4vw, 0.55rem); } .site-header nav a, footer nav a { color: var(--text-faint); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; padding: 0.55rem 0.7rem; border-radius: var(--radius-pill); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .site-header nav a:hover, footer nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); } .site-header nav a[aria-current="page"] { color: var(--text); background: rgba(181, 117, 104, 0.12); } .nav-cta { margin-left: 0.25rem; padding: 0.6rem 1rem !important; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); color: var(--text) !important; border-radius: var(--radius-pill) !important; } .nav-cta:hover { border-color: rgba(181, 117, 104, 0.45); background: rgba(181, 117, 104, 0.12) !important; } /* -------------------------------------------------------------------------- */ /* Buttons */ /* -------------------------------------------------------------------------- */ .button { min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.25rem; text-decoration: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; border-radius: var(--radius-pill); border: 1px solid transparent; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .button:hover { transform: translateY(-1px); } .button.primary { background: var(--paper); color: var(--ink-text); box-shadow: var(--shadow-sm); } .button.primary:hover { background: #fff; box-shadow: var(--shadow-md); } .button.secondary { border-color: var(--line-strong); color: var(--text); background: rgba(255, 255, 255, 0.02); } .button.secondary:hover { border-color: rgba(181, 117, 104, 0.5); background: rgba(181, 117, 104, 0.08); } .text-link { align-self: center; color: var(--rust-soft); font-size: 0.88rem; font-weight: 500; text-underline-offset: 0.28rem; transition: color var(--dur) var(--ease); } .text-link:hover { color: var(--text); } /* ========================================================================== */ /* Portal home */ /* ========================================================================== */ .portal, .subpage { /* Soft tints only — never opaque, never replace the html scene */ background: radial-gradient(ellipse 80% 50% at 70% 0%, rgba(181, 117, 104, 0.06), transparent 55%), radial-gradient(ellipse 60% 40% at 10% 30%, rgba(126, 184, 168, 0.04), transparent 50%); } .portal .eyebrow, .subpage .eyebrow { color: var(--rust); } .portal h1, .portal h2, .portal h3, .subpage h1, .subpage h2 { color: var(--text); } /* Hero */ .portal-hero { min-height: min(78vh, 52rem); display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; padding: clamp(4.5rem, 9vw, 7.5rem) var(--pad) clamp(3.5rem, 6vw, 5rem); } .portal-hero-copy > p:not(.eyebrow) { max-width: 34rem; margin: 0; color: var(--text-soft); font-size: clamp(1.05rem, 1.5vw, 1.18rem); line-height: 1.7; font-weight: 400; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.1rem; margin-top: 2.1rem; } .portal-hero-art { position: relative; margin: 0; width: 100%; aspect-ratio: 16 / 9; border-radius: calc(var(--radius) + 0.35rem); overflow: hidden; box-shadow: var(--shadow-lg); isolation: isolate; background: #0a0c0d; } .portal-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: saturate(0.9) contrast(1.03) brightness(0.96); transition: transform 1.1s var(--ease); } .portal-hero-art:hover img { transform: scale(1.02); } .portal-hero-art::after { content: ""; position: absolute; inset: 0; /* light base vignette only — keep banner titles readable */ background: linear-gradient(0deg, rgba(9, 11, 12, 0.42) 0%, transparent 38%); pointer-events: none; } .portal-hero-art figcaption { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; max-width: 17rem; margin: 0; padding: 0.75rem 0.9rem; border-radius: var(--radius-sm); background: rgba(9, 11, 12, 0.78); backdrop-filter: blur(12px); color: var(--text-soft); font-size: 0.76rem; line-height: 1.45; border: 1px solid var(--line); } /* Proof strip — soft metrics, not a spreadsheet */ .portal-proof { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.65rem; margin: 0 var(--pad); padding: 0.35rem 0 0.5rem; text-decoration: none; color: var(--text-soft); } .portal-proof span { min-height: 5.8rem; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; padding: 1rem 1.05rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.35; overflow-wrap: anywhere; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .portal-proof strong { font-family: var(--font-display); font-size: 1.55rem; font-weight: 400; letter-spacing: -0.02em; text-transform: none; color: var(--text); line-height: 1.1; } .portal-proof:hover span { background: rgba(255, 255, 255, 0.05); border-color: var(--line-strong); } /* Pathways */ .pathways, .selected-work { padding: clamp(5rem, 10vw, 8.5rem) var(--pad); } .pathways header, .selected-work header { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); } .pathways header h2, .selected-work header h2 { max-width: 18ch; } .selected-work header > a { color: var(--rust-deep); font-size: 0.88rem; font-weight: 500; text-underline-offset: 0.28rem; white-space: nowrap; } .pathway-grid { display: grid; grid-template-columns: 1.2fr 0.9fr 1fr; grid-template-rows: auto auto auto; gap: 0.9rem; align-items: stretch; } /* Pathway cards: 16:9 media band on top, copy below. Source art is almost all 16:9 marketing banners — full-bleed portrait crops were slicing titles in half. */ .pathway { position: relative; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; padding: 0; min-height: 100%; border-radius: var(--radius); border: 1px solid var(--line); background: var(--ink-elevated); color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .pathway img { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: center center; flex-shrink: 0; background: #0a0c0d; filter: saturate(0.88) brightness(0.94) contrast(1.02); transition: transform 0.9s var(--ease), filter var(--dur) var(--ease); } /* no full-card wash — art stays readable in its own frame */ .pathway::after { content: none; } .pathway > *:not(img) { position: relative; z-index: 2; } .pathway > span, .work-row span, .project-list span, .route-trio span, .funding-page span, .access-page span { color: var(--rust-soft); font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .pathway > span { display: block; padding: 1.15rem 1.3rem 0; } .pathway h3 { margin: 0.45rem 0 0.4rem; padding: 0 1.3rem; font-size: clamp(1.45rem, 2.3vw, 2.1rem); max-width: 18ch; } .pathway p { max-width: 32rem; margin: 0; padding: 0 1.3rem; color: var(--text-soft); font-size: 0.9rem; line-height: 1.55; flex: 1 1 auto; } .pathway b { display: block; margin-top: auto; padding: 1rem 1.3rem 1.3rem; color: var(--paper); font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; } .pathway:hover { transform: translateY(-3px); border-color: rgba(181, 117, 104, 0.28); box-shadow: var(--shadow-md); } .pathway:hover img { transform: scale(1.03); filter: saturate(0.96) brightness(0.98) contrast(1.03); } /* Explicit placement — no tall row-spans (those forced empty voids under 16:9 art) */ .funding-path { grid-column: 1; grid-row: 1; } .technology-path { grid-column: 2 / 4; grid-row: 1; } .publishing-path { grid-column: 1; grid-row: 2; } .projects-path { grid-column: 2 / 4; grid-row: 2; } .small-path { grid-column: 1 / 3; grid-row: 3; justify-content: center; padding: 1.35rem 1.4rem; background: linear-gradient(145deg, #161314, #121314); min-height: 8.5rem; } .press-path { grid-column: 3; grid-row: 3; } /* text-only doorways: no media band */ .small-path > span { padding: 0; } .small-path h3 { margin: 0.55rem 0 0.85rem; padding: 0; font-size: 1.55rem; max-width: none; } .small-path b { padding: 0; margin-top: 0; } /* Selected work */ .selected-work { background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(181, 117, 104, 0.06), transparent 60%), var(--paper); color: var(--ink-text); } .selected-work .eyebrow { color: var(--rust-deep); } .selected-work h2 { color: var(--ink-text); } .work-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; } .work-row > a { display: flex; flex-direction: column; min-height: 0; padding: 0.75rem; border-radius: var(--radius); background: var(--paper-3); color: var(--ink-text); text-decoration: none; border: 1px solid rgba(22, 24, 23, 0.06); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .work-row > a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .work-row img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: center center; margin-bottom: 0.9rem; border-radius: calc(var(--radius-sm) + 0.1rem); background: #121416; filter: saturate(0.92) contrast(1.02); } .work-row h3 { margin: 0.45rem 0 0; color: var(--ink-text); font-size: 1.45rem; } .work-row span { color: var(--rust-deep); } /* Current priority */ .current-priority { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding: clamp(5rem, 10vw, 8rem) var(--pad); background: radial-gradient(ellipse 50% 60% at 90% 50%, rgba(181, 117, 104, 0.08), transparent 55%), linear-gradient(180deg, rgba(5, 7, 9, 0.42), rgba(5, 7, 9, 0.62)); } .current-priority > div > p:not(.eyebrow) { max-width: 36rem; color: var(--text-soft); font-size: 1.05rem; } .priority-actions { display: grid; gap: 0.55rem; } .priority-actions > a { padding: 1.05rem 0.25rem 1.05rem 0; border-bottom: 1px solid rgba(181, 117, 104, 0.28); color: var(--paper); text-decoration: none; font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.02em; transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease); } .priority-actions > a:hover { color: var(--rust-soft); padding-left: 0.4rem; } .priority-actions small { margin-top: 1.1rem; color: var(--text-faint); font-size: 0.82rem; line-height: 1.5; } /* Closing routes */ .closing-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; padding: 0 var(--pad) clamp(4rem, 8vw, 6rem); } .closing-routes > a { min-height: 22rem; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.6rem, 4vw, 2.5rem); border-radius: var(--radius); text-decoration: none; border: 1px solid transparent; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .closing-routes > a:first-child { background: radial-gradient(ellipse 80% 70% at 20% 0%, rgba(126, 184, 168, 0.12), transparent 55%), #d9d4cb; color: var(--ink-text); } .closing-routes > a:last-child { background: radial-gradient(ellipse 70% 60% at 80% 100%, rgba(181, 117, 104, 0.18), transparent 50%), #2a1a1c; color: var(--paper); } .closing-routes > a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .closing-routes span { color: var(--rust-deep); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .closing-routes > a:last-child span { color: var(--rust-soft); } .closing-routes h2 { margin: 0.7rem 0 0.65rem; font-size: clamp(2rem, 3.5vw, 2.8rem); color: inherit; } .closing-routes p { margin: 0 0 1.25rem; max-width: 28rem; opacity: 0.78; font-size: 0.95rem; } .closing-routes b { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600; } /* Footer */ footer { display: grid; grid-template-columns: 1fr auto auto; gap: 2rem; align-items: center; padding: 2.25rem var(--pad) 2.5rem; background: rgba(5, 7, 9, 0.72); backdrop-filter: blur(12px); border-top: 1px solid var(--line); } footer nav { flex-wrap: wrap; } footer > p { margin: 0; color: var(--text-faint); font-size: 0.72rem; } .footer-brand small { color: var(--text-faint); } /* ========================================================================== */ /* Subpages */ /* ========================================================================== */ .subpage main { min-height: 75vh; } .sub-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding: clamp(4rem, 9vw, 7rem) var(--pad); } .sub-hero.text-only { grid-template-columns: 1fr; } .sub-hero > div { max-width: 44rem; } .sub-hero h1 { font-size: clamp(3rem, 6.5vw, 5.6rem); } .sub-hero p:not(.eyebrow) { color: var(--text-soft); font-size: 1.08rem; max-width: 36rem; } .sub-hero img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: center center; border-radius: var(--radius); background: #0a0c0d; filter: saturate(0.9) contrast(1.02); box-shadow: var(--shadow-lg); } .sub-content, .project-list, .route-trio, .traction-metrics, .access-page, .funding-page { padding: clamp(3.5rem, 7vw, 6rem) var(--pad); } .sub-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; background: var(--paper); color: var(--ink-text); } .sub-content article { padding: 1.5rem 1.35rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.35); border: 1px solid rgba(22, 24, 23, 0.06); } .sub-content h2, .project-list h2, .route-trio h2, .access-page h2, .funding-page h2 { color: inherit; font-size: clamp(1.55rem, 2.4vw, 2rem); margin: 0.4rem 0 0.7rem; } .sub-content blockquote { grid-column: 1 / -1; margin: 0.5rem 0; padding: 2rem 2.1rem; border-radius: var(--radius); border-left: none; background: #2a1b1d; color: var(--paper); font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.25; letter-spacing: -0.02em; } .sub-content a { color: var(--rust-deep); } .next-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 0 var(--pad) 3rem; } .next-routes a { padding: 1.6rem 1.5rem; border-radius: var(--radius); background: var(--ink-elevated); color: var(--paper); text-decoration: none; font-family: var(--font-display); font-size: 1.25rem; border: 1px solid var(--line); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); } .next-routes a + a { background: #2a1a1c; } .next-routes a:hover { transform: translateY(-2px); } .project-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; background: transparent; } .project-list article { min-height: 16.5rem; display: flex; flex-direction: column; padding: 1.45rem; border-radius: var(--radius); background: var(--ink-elevated); border: 1px solid var(--line); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .project-list article:hover { transform: translateY(-2px); border-color: rgba(181, 117, 104, 0.28); } .project-list p { color: var(--text-soft); margin: 0 0 1.2rem; } .project-list a { margin-top: auto; color: var(--rust-soft); font-weight: 600; font-size: 0.88rem; text-decoration: none; } .route-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; background: var(--paper); color: var(--ink-text); } .route-trio article { padding: 1.55rem; border-radius: var(--radius); background: var(--paper-3); border-top: 3px solid var(--rust-deep); border: 1px solid rgba(22, 24, 23, 0.06); border-top-width: 3px; border-top-color: var(--rust-deep); } .route-trio p { color: var(--ink-muted); } .funding-page { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 0.9rem; background: var(--paper); color: var(--ink-text); } .funding-lead { display: flex; flex-direction: column; padding: 1.7rem; border-radius: var(--radius); background: radial-gradient(ellipse 80% 60% at 30% 0%, rgba(181, 117, 104, 0.25), transparent 55%), #241618; color: var(--paper); min-height: 28rem; } .funding-lead strong { margin-top: 2rem; font-family: var(--font-display); font-size: clamp(4.5rem, 9vw, 6.5rem); font-weight: 400; line-height: 0.85; letter-spacing: -0.04em; } .funding-lead small { color: var(--rust-soft); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } .funding-lead p { margin-top: auto; color: var(--text-soft); } .funding-page > div { display: grid; gap: 0.65rem; } .funding-page > div article { padding: 1.3rem 1.4rem; border-radius: var(--radius-sm); background: var(--paper-3); border: 1px solid rgba(22, 24, 23, 0.06); } .funding-rule { display: block; width: 100%; max-width: 48rem; margin: 1.5rem auto 0; padding: 1.75rem 1.35rem; box-sizing: border-box; background: rgba(5, 7, 9, 0.9); border: 1px solid var(--line); border-radius: var(--radius); color: var(--paper); font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.65rem); line-height: 1.45; text-align: center; letter-spacing: -0.01em; white-space: normal; word-break: normal; overflow-wrap: break-word; hyphens: manual; } /* One sentence per line when space allows — never a single-character tower */ .funding-rule span { display: block; max-width: 100%; } .funding-rule span + span { margin-top: 0.35rem; } .traction-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; background: transparent; } .traction-metrics div { min-height: 10.5rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.3rem; border-radius: var(--radius); background: var(--paper); color: var(--ink-text); border: 1px solid rgba(22, 24, 23, 0.06); } .traction-metrics strong { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.3rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1; } .traction-metrics span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); } .access-page { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 0.9rem; background: var(--paper); color: var(--ink-text); } .access-page article { min-height: 22rem; display: flex; flex-direction: column; padding: 1.5rem; border-radius: var(--radius); border: 1px solid rgba(22, 24, 23, 0.08); background: var(--paper-3); } .access-page article.request { background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(181, 117, 104, 0.2), transparent 55%), #241618; color: var(--paper); border-color: transparent; box-shadow: var(--shadow-md); } .access-page nav { display: grid; gap: 0.5rem; margin-top: auto; } .access-page a { color: inherit; } .access-page .button { margin-top: auto; } .subpage > footer { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 2rem var(--pad); border-top: 1px solid var(--line); } .subpage > footer a { color: var(--text-faint); } /* ========================================================================== */ /* Responsive */ /* ========================================================================== */ @media (max-width: 1000px) { .site-header nav a:nth-child(2), .site-header nav a:nth-child(4) { display: none; } } @media (max-width: 900px) { .portal-hero { grid-template-columns: 1fr 1fr; gap: 2rem; } .portal-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pathway-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .funding-path { grid-row: auto; grid-column: 1 / -1; } .technology-path { grid-column: 1 / -1; grid-row: auto; } .publishing-path, .projects-path { grid-column: auto; grid-row: auto; } .small-path, .press-path { grid-column: auto; grid-row: auto; } .work-row { grid-template-columns: 1fr 1fr; } .sub-hero { grid-template-columns: 1fr 1fr; } .project-list { grid-template-columns: 1fr 1fr; } .access-page { grid-template-columns: 1fr; } .access-page article { min-height: 16rem; } } @media (max-width: 720px) { .site-header { position: relative; align-items: flex-start; flex-wrap: wrap; } .site-header nav { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 0.25rem; } .site-header nav a:nth-child(1), .site-header nav a:nth-child(3), .site-header nav a:nth-child(5) { display: none; } .portal-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 3.25rem; } .portal-hero-art { aspect-ratio: 16 / 9; } .portal-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 1rem; } .portal-proof span, .portal-proof strong { min-width: 0; word-break: break-word; } .portal-proof span { min-height: 5.2rem; } .pathways header, .selected-work header { display: grid; gap: 0.75rem; } .pathway-grid { grid-template-columns: 1fr; grid-template-rows: none; } .pathway, .funding-path, .technology-path, .publishing-path, .projects-path, .small-path, .press-path { grid-column: auto; grid-row: auto; min-height: 0; } .small-path { min-height: 0; } .work-row { grid-template-columns: 1fr; } .work-row > a { min-height: 0; } .current-priority, .closing-routes { grid-template-columns: 1fr; } .closing-routes { padding-left: var(--pad); padding-right: var(--pad); } .closing-routes > a { min-height: 18rem; } .hero-actions { display: grid; } .button { width: 100%; } .text-link { padding: 0.5rem 0; text-align: center; } .sub-hero { grid-template-columns: 1fr; } .sub-hero img { aspect-ratio: 16 / 9; height: auto; } .sub-content, .project-list, .route-trio, .traction-metrics, .funding-page { grid-template-columns: 1fr; } .sub-content blockquote { grid-column: auto; } .next-routes { grid-template-columns: 1fr; } .funding-lead { min-height: 22rem; } footer, .subpage > footer { grid-template-columns: 1fr; display: grid; gap: 1.25rem; } footer nav { justify-content: flex-start; } } /* ========================================================================== Guided pitch deck (Funding page) — linear argument, not brochure collage ========================================================================== */ .pitch-page main { max-width: none; } .pitch-open .pitch-toc { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.75rem; } .pitch-toc a { padding: 0.5rem 0.8rem; border-radius: var(--radius-pill); border: 1px solid var(--line); background: rgba(5, 7, 9, 0.45); color: var(--text-soft); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; text-transform: uppercase; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .pitch-toc a:hover { color: var(--text); border-color: rgba(181, 117, 104, 0.4); background: rgba(181, 117, 104, 0.1); } .pitch-section { padding: clamp(3.5rem, 7vw, 5.5rem) var(--pad); border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(5, 7, 9, 0.55), rgba(5, 7, 9, 0.72)); } .pitch-section:nth-of-type(even) { background: linear-gradient(180deg, rgba(8, 10, 11, 0.72), rgba(5, 7, 9, 0.62)); } .pitch-head { max-width: 42rem; margin-bottom: 1.75rem; } .pitch-head h2 { margin-top: 0.4rem; font-size: clamp(2rem, 4.2vw, 3.2rem); color: var(--text); } .pitch-lede, .pitch-note { max-width: 44rem; color: var(--text-soft); font-size: 1.02rem; } .pitch-note { margin-top: 1.25rem; font-size: 0.9rem; color: var(--text-faint); } .pitch-grid { display: grid; grid-template-columns: 1.15fr 0.95fr; gap: 0.9rem; } .pitch-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pitch-card { padding: 1.4rem 1.35rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(17, 19, 20, 0.88); backdrop-filter: blur(10px); } .pitch-card h3 { margin: 0 0 0.65rem; font-size: 1.45rem; color: var(--text); } .pitch-card p, .pitch-card li { color: var(--text-soft); font-size: 0.95rem; line-height: 1.55; } .pitch-card ul { margin: 0; padding-left: 1.1rem; } .pitch-card li + li { margin-top: 0.4rem; } .pitch-card a { color: var(--rust-soft); font-weight: 600; text-decoration: none; } .pitch-card a:hover { color: var(--text); } .pitch-card-lead { grid-row: span 2; } .pitch-statement { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.35; letter-spacing: -0.02em; color: var(--paper) !important; margin: 0 0 1rem; } .pitch-priority { border-color: rgba(181, 117, 104, 0.35); box-shadow: 0 0 0 1px rgba(181, 117, 104, 0.08); } .pitch-priority > span, .pitch-card > span:first-child { display: inline-block; margin-bottom: 0.75rem; color: var(--rust-soft); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .beachhead { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; } .beachhead li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; padding: 1.15rem 1.25rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(17, 19, 20, 0.88); } .beachhead li > span { font-family: var(--font-display); font-size: 1.35rem; color: var(--rust-soft); line-height: 1; } .beachhead strong { display: block; margin-bottom: 0.3rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; color: var(--text); } .beachhead p { margin: 0; color: var(--text-soft); font-size: 0.92rem; } .pitch-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(17, 19, 20, 0.9); } .pitch-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .pitch-table th, .pitch-table td { padding: 1rem 1.2rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .pitch-table thead th { color: var(--rust-soft); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(0, 0, 0, 0.25); } .pitch-table tbody th { width: 22%; font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; color: var(--text); } .pitch-table td { color: var(--text-soft); } .pitch-table td:nth-child(2), .pitch-table td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--paper); font-weight: 600; } .pitch-table th[scope="col"]:nth-child(2), .pitch-table th[scope="col"]:nth-child(3) { width: 12%; } .pitch-table tr:last-child th, .pitch-table tr:last-child td { border-bottom: 0; } .pitch-outcomes { margin-top: 0.9rem; } .pitch-outcomes ul { columns: 2; column-gap: 2rem; } .pitch-funding-embed { padding: 0; background: transparent; } .pitch-funding-embed.funding-page { margin: 0; } .pitch-step-nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); } .pitch-step-nav a { color: var(--rust-soft); font-size: 0.9rem; font-weight: 600; text-decoration: none; } .pitch-step-nav a:hover { color: var(--text); } .pitch-close { padding-bottom: clamp(4rem, 8vw, 6rem); } @media (max-width: 900px) { .pitch-grid, .pitch-grid-3 { grid-template-columns: 1fr; } .pitch-card-lead { grid-row: auto; } .pitch-outcomes ul { columns: 1; } } @media (max-width: 720px) { .beachhead li { grid-template-columns: 2.25rem 1fr; gap: 0.75rem; } .pitch-table tbody th { width: auto; } } /* ========================================================================== Subpage compositions (purpose-specific — not cloned card grids) ========================================================================== */ .page-shell main > section { min-width: 0; } .status-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .6rem; border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rust-soft); } .status-pill.live { border-color: rgba(126,184,168,.45); color: var(--sage); } .status-pill.shipping { border-color: rgba(181,117,104,.4); color: var(--rust-soft); } .status-pill.planning { color: var(--text-faint); } .status-pill.future { color: #7a7872; border-style: dashed; } .media-frame { border-radius: var(--radius); overflow: hidden; background: #0a0c0d; border: 1px solid var(--line); box-shadow: var(--shadow-md); } .media-frame img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; display: block; } .section-block { padding: clamp(3rem, 6vw, 5rem) var(--pad); border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(5,7,9,.5), rgba(5,7,9,.68)); } .section-block.paper { background: var(--paper); color: var(--ink-text); } .section-block.paper h2, .section-block.paper h3 { color: var(--ink-text); } .section-block.paper p, .section-block.paper li { color: var(--ink-muted); } .section-block.paper .eyebrow { color: var(--rust-deep); } .section-kicker { max-width: 40rem; margin-bottom: 1.5rem; } .section-kicker h2 { margin-top: .4rem; font-size: clamp(1.9rem, 3.8vw, 2.9rem); } /* About — editorial profile */ .about-profile { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(3.5rem, 7vw, 6rem) var(--pad); } .about-portrait { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #0a0c0d; } .about-portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; display: block; } .about-profile h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); } .capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; } .capability-grid article { padding: 1.1rem 1.15rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(17,19,20,.88); } .capability-grid h3 { margin: 0 0 .4rem; font-size: 1.2rem; } .capability-grid p { margin: 0; color: var(--text-soft); font-size: .88rem; } .timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; } .timeline::before { content: ""; position: absolute; left: 1rem; top: .5rem; bottom: .5rem; width: 1px; background: linear-gradient(var(--rust), var(--sage)); opacity: .55; } .timeline li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 1rem; padding: 1rem 0; } .timeline li > span { z-index: 1; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--rust); background: #0e1112; display: grid; place-items: center; font-size: .65rem; color: var(--rust-soft); font-weight: 700; } .stack-flow { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .55rem; } .stack-flow div { padding: 1rem .85rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(17,19,20,.9); text-align: center; font-family: var(--font-display); font-size: 1.05rem; color: var(--text); } .stack-flow small { display: block; margin-top: .45rem; font-family: var(--font-sans); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); } /* Projects — portfolio */ .portfolio-feature { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; padding: clamp(2.5rem, 5vw, 4rem) var(--pad); } .portfolio-feature .copy { display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(17,19,20,.9); } .portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .9rem; padding: 0 var(--pad) clamp(3rem, 6vw, 5rem); } .portfolio-card { display: flex; flex-direction: column; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(17,19,20,.9); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .portfolio-card:hover { transform: translateY(-3px); border-color: rgba(181,117,104,.35); } .portfolio-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .portfolio-card .body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; } .portfolio-card h3 { margin: 0; font-size: 1.45rem; } .portfolio-card p { margin: 0; color: var(--text-soft); font-size: .88rem; flex: 1; } .portfolio-card .action { color: var(--rust-soft); font-size: .82rem; font-weight: 600; } .ecosystem { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .65rem; } .ecosystem article { padding: 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(17,19,20,.88); } .ecosystem h3 { margin: .4rem 0; font-size: 1.2rem; } .ecosystem p { margin: 0; color: var(--text-soft); font-size: .85rem; } /* Publishing */ .release-inventory { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .75rem; } .release-inventory figure { margin: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: #0a0c0d; } .release-inventory img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .release-inventory figcaption { padding: .65rem .75rem; font-size: .75rem; color: var(--text-soft); background: rgba(17,19,20,.95); } .lifecycle { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .5rem; counter-reset: life; } .lifecycle li { list-style: none; padding: 1rem .85rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(17,19,20,.9); font-size: .88rem; color: var(--text-soft); } .lifecycle strong { display: block; margin-bottom: .35rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: var(--text); } .route-compare { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .85rem; } .route-compare article { padding: 1.35rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(17,19,20,.9); display: flex; flex-direction: column; gap: .55rem; } .route-compare h3 { margin: 0; font-size: 1.5rem; } .route-compare p { margin: 0; color: var(--text-soft); font-size: .9rem; flex: 1; } .gate-list { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; } .gate-list article { padding: 1.1rem 1.2rem; border-radius: var(--radius-sm); border-left: 3px solid var(--rust-deep); background: rgba(17,19,20,.88); border: 1px solid var(--line); border-left-width: 3px; border-left-color: var(--rust); } /* Technology zones */ .tech-zone { padding: clamp(2.75rem, 5vw, 4.5rem) var(--pad); border-top: 1px solid var(--line); } .tech-zone.live-zone { background: linear-gradient(180deg, rgba(20,28,27,.72), rgba(5,7,9,.7)); } .tech-zone.future-zone { background: linear-gradient(180deg, rgba(28,18,20,.55), rgba(5,7,9,.72)); } .tech-zone.hyp-zone { background: rgba(5,7,9,.55); } .tech-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.25rem; align-items: center; } .proof-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; } .proof-chips span { padding: .45rem .7rem; border-radius: var(--radius-pill); border: 1px solid var(--line); background: rgba(0,0,0,.28); font-size: .72rem; color: var(--text-soft); } .hyp-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .65rem; } .hyp-grid article { padding: 1.1rem; border-radius: var(--radius-sm); border: 1px dashed rgba(181,117,104,.35); background: rgba(17,19,20,.75); } .hyp-grid h3 { margin: .35rem 0; font-size: 1.15rem; } .hyp-grid p { margin: 0; color: var(--text-soft); font-size: .86rem; } /* Traction dashboard */ .metric-board { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; padding: clamp(2.5rem, 5vw, 4rem) var(--pad); } .metric-board article { min-height: 9.5rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.2rem; border-radius: var(--radius); background: var(--paper); color: var(--ink-text); border: 1px solid rgba(22,24,23,.08); } .metric-board strong { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.1rem); font-weight: 400; line-height: 1; letter-spacing: -.03em; } .metric-board span { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); } .evidence-columns { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; } .evidence-columns article { padding: 1.35rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(17,19,20,.9); } .funnel { display: grid; gap: .45rem; } .funnel div { display: grid; grid-template-columns: 1fr auto; gap: .35rem; padding: .75rem .9rem; border-radius: var(--radius-sm); background: rgba(255,255,255,.03); border: 1px solid var(--line); font-size: .88rem; color: var(--text-soft); } .funnel b { color: var(--text); font-weight: 600; } .disclosure-box { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(0,0,0,.28); color: var(--text-faint); font-size: .82rem; } /* Press library */ .asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .85rem; } .asset-card { display: flex; flex-direction: column; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(17,19,20,.92); overflow: hidden; } .asset-card .preview { aspect-ratio: 16 / 10; display: grid; place-items: center; background: #0a0c0d; padding: 1rem; } .asset-card .preview img { max-width: 100%; max-height: 9rem; width: auto; height: auto; object-fit: contain; } .asset-card .preview.cover img { width: 100%; max-height: none; height: 100%; object-fit: cover; } .asset-card .meta { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; } .asset-card h3 { margin: 0; font-size: 1.15rem; } .asset-card p { margin: 0; color: var(--text-soft); font-size: .82rem; flex: 1; } .asset-card .dl { display: flex; flex-wrap: wrap; gap: .5rem; } .asset-card .dl a { color: var(--rust-soft); font-size: .78rem; font-weight: 600; text-decoration: none; } .copy-stack { display: grid; gap: .75rem; } .copy-stack details { border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(17,19,20,.9); padding: .85rem 1.1rem; } .copy-stack summary { cursor: pointer; font-weight: 600; color: var(--text); } .copy-stack pre { white-space: pre-wrap; font-family: var(--font-sans); font-size: .88rem; color: var(--text-soft); margin: .75rem 0 0; line-height: 1.55; } .link-row { display: flex; flex-wrap: wrap; gap: .55rem; } .link-row a { padding: .55rem .85rem; border-radius: var(--radius-pill); border: 1px solid var(--line); text-decoration: none; font-size: .78rem; color: var(--text-soft); } .link-row a:hover { color: var(--text); border-color: rgba(181,117,104,.4); } /* Data room index */ .doc-index { display: grid; gap: .55rem; } .doc-row { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1.6fr) auto auto; gap: 1rem; align-items: center; padding: 1rem 1.15rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(17,19,20,.9); text-decoration: none; color: inherit; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .doc-row:hover { border-color: rgba(181,117,104,.35); background: rgba(24,20,20,.95); } .doc-row strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: var(--text); } .doc-row span { color: var(--text-soft); font-size: .86rem; } .doc-row em { font-style: normal; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rust-soft); } .access-banner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; padding: clamp(2.5rem, 5vw, 4rem) var(--pad); } .access-banner article { padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(17,19,20,.92); } .access-banner .request { background: linear-gradient(160deg, rgba(40,23,26,.95), rgba(17,19,20,.95)); } @media (max-width: 1000px) { .about-profile, .portfolio-feature, .tech-split, .evidence-columns, .access-banner { grid-template-columns: 1fr; } .capability-grid, .portfolio-grid, .route-compare, .hyp-grid, .asset-grid { grid-template-columns: 1fr 1fr; } .release-inventory, .lifecycle, .stack-flow { grid-template-columns: 1fr 1fr; } .doc-row { grid-template-columns: 1fr; gap: .35rem; } } @media (max-width: 720px) { .capability-grid, .portfolio-grid, .route-compare, .hyp-grid, .asset-grid, .metric-board, .ecosystem, .gate-list, .release-inventory, .lifecycle, .stack-flow { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .pathway:hover, .work-row > a:hover, .closing-routes > a:hover, .button:hover { transform: none; } .pathway:hover img, .portal-hero-art:hover img { transform: none; } }