/* The font stylesheet is linked from each page's , not @import-ed here: an @import cannot even be requested until this file has fully downloaded, which serialises the whole chain and delays first paint. */ :root { --ink: #080907; --ink-2: #10120e; --paper: #f3f0e7; --muted: #a8a89f; --acid: #c7ff2f; --line: rgba(243, 240, 231, 0.16); --line-soft: rgba(243, 240, 231, 0.075); --gutter: clamp(1.25rem, 3.2vw, 3.8rem); --font-display: "Big Shoulders"; --font-stencil: "Big Shoulders Stencil"; --font-sans: "Schibsted Grotesk"; --font-mono: "Martian Mono"; } * { box-sizing: border-box; } html { min-width: 320px; scroll-behavior: smooth; background: var(--ink); color-scheme: dark; } body { margin: 0; overflow-x: hidden; background: var(--ink); color: var(--paper); font-family: var(--font-sans), Arial, sans-serif; -webkit-font-smoothing: antialiased; } body::selection { background: var(--acid); color: var(--ink); } a { color: inherit; text-decoration: none; } a:focus-visible { outline: 2px solid var(--acid); outline-offset: 5px; } .site-shell { position: relative; isolation: isolate; } .topbar { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr 1fr auto auto; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); min-height: 5.25rem; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); background: var(--ink); } .identity { display: inline-flex; align-items: center; gap: 0.75rem; width: max-content; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .identity-mark { width: auto; height: 0.92rem; background: none; box-shadow: none; } .section-kicker { margin: 0; color: var(--muted); font-size: 0.62rem; line-height: 1.4; letter-spacing: 0.17em; text-transform: uppercase; } /* the nav reads as source files — acid, monospaced, lowercase */ .nav-links { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono), "Courier New", monospace; font-size: 0.56rem; font-weight: 400; letter-spacing: 0.02em; text-transform: none; } .nav-links a { padding: 0.34rem 0.6rem; border: 1px solid transparent; color: var(--acid); transition: background-color 160ms ease, border-color 160ms ease; } .nav-links a:hover, .nav-links a:focus-visible { background: rgba(199, 255, 47, 0.12); } /* the page you are on reads like the open file */ .nav-links a.is-active { border-color: rgba(199, 255, 47, 0.42); background: rgba(199, 255, 47, 0.14); } .nav-links a:focus-visible { outline-offset: 2px; } .nav-links a, .footer > a:last-child { transition: color 180ms ease; } .nav-links a:hover, .footer > a:last-child:hover { color: var(--acid); } .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.9rem; min-height: 2.8rem; padding: 0.7rem 1.1rem; border: 1px solid var(--acid); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; } .button:hover { transform: translateY(-2px); } .button--acid { background: var(--acid); color: var(--ink); } .button--acid:hover { background: transparent; color: var(--acid); } .button--outline { margin-top: 2.2rem; background: transparent; color: var(--acid); } .button--outline:hover { background: var(--acid); color: var(--ink); } .hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100svh - 5.25rem); overflow: hidden; padding: clamp(3rem, 7vh, 6rem) var(--gutter) clamp(2rem, 5vh, 4rem); border-bottom: 1px solid var(--line); background: radial-gradient(circle at 18% 45%, rgba(199, 255, 47, 0.07), transparent 25rem); } .grid-overlay { position: absolute; z-index: -1; inset: 0; background-image: repeating-linear-gradient( 90deg, transparent 0, transparent calc(8.3333% - 1px), var(--line-soft) calc(8.3333% - 1px), var(--line-soft) 8.3333% ); background-position: var(--gutter) 0; } .hero-copy { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; } .kicker { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 clamp(2rem, 4vh, 3.5rem); color: var(--acid); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .kicker::before { width: 2.7rem; height: 1px; content: ""; background: var(--acid); } h1, h2, h3, p { margin-top: 0; } h1 { max-width: 64rem; margin-bottom: 0; font-family: var(--font-display), "Arial Narrow", sans-serif; font-size: clamp(6.3rem, 11vw, 12rem); font-weight: 700; line-height: 0.7; letter-spacing: -0.055em; text-transform: uppercase; } .hero h1 > span { display: block; } .hero-line-2 { margin-left: 9%; } .hero-line-3 { position: relative; width: max-content; color: var(--acid); } .hero-line-3::after { position: absolute; bottom: 0.04em; left: calc(100% + 0.17em); width: clamp(3rem, 8vw, 8rem); height: 0.075em; content: ""; background: var(--acid); transform-origin: left center; animation: signal-pulse 3.4s cubic-bezier(0.55, 0.05, 0.4, 1) infinite; } .hero-meta { display: flex; flex-wrap: wrap; gap: 0.85rem 1.25rem; margin-top: 3rem; color: var(--muted); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; } .hero-meta > span:nth-child(even) { color: var(--acid); } .monogram { position: absolute; z-index: 1; top: 50%; left: -3%; width: 54%; transform: translateY(-50%); user-select: none; } .scroll-cue { position: absolute; z-index: 5; right: var(--gutter); bottom: 2.1rem; display: flex; gap: 1rem; color: var(--muted); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; } .work-section { position: relative; padding: clamp(6rem, 12vw, 12rem) var(--gutter); background: var(--paper); color: var(--ink); } .section-heading { display: grid; grid-template-columns: 1fr 2.2fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: end; margin-bottom: clamp(4rem, 8vw, 8rem); } .section-heading .section-kicker { color: var(--acid); } .section-heading h2, .about h2, .contact h2 { margin-bottom: 0; font-family: var(--font-display), "Arial Narrow", sans-serif; font-size: clamp(4.2rem, 7.5vw, 8rem); font-weight: 600; line-height: 0.86; letter-spacing: -0.04em; text-transform: uppercase; } .section-heading > p:last-child { max-width: 25rem; margin-bottom: 0; font-size: clamp(0.98rem, 1.25vw, 1.2rem); line-height: 1.55; letter-spacing: -0.02em; } .project-list { border-top: 1px solid var(--ink); } .project { display: grid; grid-template-columns: minmax(20rem, 1fr) minmax(20rem, 1fr); min-height: 32rem; border-bottom: 1px solid var(--ink); } .project-art { position: relative; overflow: hidden; min-height: 32rem; background: var(--ink); color: var(--paper); } .project-art::before, .project-art::after { position: absolute; content: ""; pointer-events: none; } .project-info { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(2rem, 5vw, 5rem); transition: background-color 220ms ease, color 220ms ease; } .project:hover .project-info { background: var(--acid); } .project-number, .art-index { position: absolute; top: 2rem; left: 2rem; font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; } .project-info h3 { max-width: 38rem; margin: 0 0 1rem; font-family: var(--font-display), "Arial Narrow", sans-serif; font-size: clamp(3.5rem, 6.5vw, 7rem); font-weight: 600; line-height: 0.84; letter-spacing: -0.04em; text-transform: uppercase; } .project-info p { margin-bottom: 0; color: #595b54; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .project-mark { position: absolute; top: 1.5rem; right: 1.8rem; font-size: 2rem; transition: transform 220ms ease; } .project:hover .project-mark { transform: translate(0.35rem, -0.35rem); } .art-word { position: absolute; right: -0.04em; bottom: -0.19em; color: transparent; font-family: var(--font-display), "Arial Narrow", sans-serif; font-size: clamp(22rem, 39vw, 42rem); font-weight: 800; line-height: 0.72; -webkit-text-stroke: 1px rgba(243, 240, 231, 0.24); } .art-cross { position: absolute; z-index: 2; top: 50%; left: 50%; width: 0.7rem; height: 0.7rem; border: 1px solid var(--acid); transform: translate(-50%, -50%) rotate(45deg); } .project-art--signal::before { top: 0; bottom: 0; left: 38%; width: 1px; background: var(--acid); box-shadow: 9rem 0 0 rgba(243, 240, 231, 0.12), -9rem 0 0 rgba(243, 240, 231, 0.12); } .project-art--signal::after { top: 50%; left: 0; width: 100%; height: 1px; background: var(--line); } .project-art--binary { background-image: radial-gradient(circle, rgba(199, 255, 47, 0.75) 0 3px, transparent 4px); background-size: 3.5rem 3.5rem; } .project-art--binary::after { inset: 15%; border: 1px solid var(--acid); background: var(--ink); transform: rotate(-6deg); } .project-art--binary .art-word { z-index: 3; } .project-art--axis::before { inset: 10% 18%; border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 0 0 5rem var(--ink), 0 0 0 calc(5rem + 1px) rgba(243, 240, 231, 0.13), 0 0 0 10rem var(--ink), 0 0 0 calc(10rem + 1px) rgba(243, 240, 231, 0.13); } .project-art--frame::before { top: 16%; right: 14%; bottom: 16%; left: 14%; border: 1px solid var(--acid); transform: skewX(-13deg); } .project-art--frame::after { top: 16%; right: 14%; width: 28%; height: 1px; background: var(--acid); box-shadow: 0 6rem 0 var(--acid), 0 12rem 0 var(--acid), 0 18rem 0 var(--acid); } .project-art--code { background-image: repeating-linear-gradient(0deg, transparent 0, transparent calc(20% - 1px), var(--line) calc(20% - 1px), var(--line) 20%), repeating-linear-gradient(90deg, transparent 0, transparent calc(16.666% - 1px), var(--line) calc(16.666% - 1px), var(--line) 16.666%); } .project-art--code::before { top: 22%; left: 14%; width: 46%; height: 28%; border-top: 1px solid var(--acid); border-left: 1px solid var(--acid); } .project-art--code::after { right: 14%; bottom: 18%; width: 46%; height: 28%; border-right: 1px solid var(--acid); border-bottom: 1px solid var(--acid); } .expertise { padding: clamp(6rem, 12vw, 12rem) var(--gutter); background: var(--ink); } .section-heading--compact { display: block; } .section-heading--compact .section-kicker { margin-bottom: clamp(1.2rem, 2.5vw, 2rem); } .section-heading--compact h2 { color: var(--paper); } .service-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); } .service { min-height: 24rem; padding: 2rem; border-right: 1px solid var(--line); transition: background-color 200ms ease, color 200ms ease; } .service:last-child { border-right: 0; } .service > span { display: block; margin-bottom: clamp(5rem, 10vw, 10rem); color: var(--acid); font-size: 0.58rem; letter-spacing: 0.15em; } .service h3 { margin-bottom: 1.4rem; font-family: var(--font-display), "Arial Narrow", sans-serif; font-size: clamp(2.5rem, 4vw, 4.5rem); font-weight: 600; line-height: 0.9; text-transform: uppercase; } .service p { max-width: 24rem; margin-bottom: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; } .service:hover { background: var(--acid); color: var(--ink); } .service:hover > span, .service:hover p { color: var(--ink); } .about { position: relative; display: grid; grid-template-columns: 0.85fr 1.15fr; min-height: 50rem; overflow: hidden; background: var(--acid); color: var(--ink); } .about-monogram { display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 5vw, 4.5rem); overflow: hidden; border-right: 1px solid rgba(8, 9, 7, 0.3); } .about-copy { align-self: center; padding: clamp(3rem, 7vw, 8rem); } .about .section-kicker { margin-bottom: clamp(3rem, 7vw, 7rem); color: rgba(8, 9, 7, 0.62); } .about h2 { max-width: 55rem; } .about-lede { max-width: 37rem; margin: 3rem 0 4rem; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.55; letter-spacing: -0.025em; } .principles { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; padding-top: 1.3rem; border-top: 1px solid rgba(8, 9, 7, 0.3); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .contact { position: relative; display: flex; min-height: 48rem; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; padding: clamp(6rem, 12vw, 12rem) var(--gutter); background: var(--ink); } .contact .section-kicker { margin-bottom: 3rem; color: var(--acid); } .contact h2 { position: relative; z-index: 2; font-size: clamp(6rem, 13vw, 14rem); line-height: 0.72; } .contact h2 span { color: var(--acid); } .contact-note { position: relative; z-index: 2; max-width: 32rem; margin: 3rem 0 0; color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.55; } .contact .button { position: relative; z-index: 2; } .contact-orbit { position: absolute; top: 50%; right: -10rem; width: clamp(30rem, 48vw, 55rem); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; transform: translateY(-50%); } .contact-orbit::before, .contact-orbit::after { position: absolute; border: 1px solid var(--line); border-radius: 50%; content: ""; } .contact-orbit::before { inset: 16%; } .contact-orbit::after { inset: 35%; } .contact-orbit > span { position: absolute; top: 12%; left: 17%; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--acid); box-shadow: 0 0 1.4rem rgba(199, 255, 47, 0.6); transform-origin: 16rem 16rem; animation: orbit 12s linear infinite; } .footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 2rem; min-height: 6rem; padding: 0 var(--gutter); border-top: 1px solid var(--line); background: var(--ink); color: var(--muted); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; } .footer p { margin-bottom: 0; } @keyframes signal-pulse { 0%, 15% { opacity: 0.35; transform: scaleX(0.16); } 55%, 70% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0.35; transform: scaleX(0.16); } } @keyframes orbit { to { transform: rotate(360deg); } } @media (max-width: 1100px) { .hero { grid-template-columns: minmax(0, 1fr); } h1 { font-size: clamp(6rem, 12.5vw, 9rem); } .section-heading { grid-template-columns: 0.8fr 2.2fr; } .section-heading > p:last-child { grid-column: 2; } .project-info h3 { font-size: clamp(3.5rem, 6vw, 5.5rem); } .about { grid-template-columns: 0.72fr 1.28fr; } .about-monogram { padding: 2rem; } } @media (max-width: 780px) { .topbar { grid-template-columns: 1fr auto; min-height: 4.6rem; } .nav-links { display: none; } /* no min-height override here — the base 2.8rem is the 44px touch target */ .button--acid { padding-inline: 0.8rem; } .hero { display: block; min-height: 44rem; padding-top: 3rem; padding-bottom: 3rem; } .hero-copy { min-height: 38rem; } h1 { font-size: clamp(2.5rem, 24vw, 8.2rem); } .hero-line-2 { margin-left: 0; } .monogram { left: -4%; width: 96%; } .scroll-cue { display: none; } .work-section, .expertise, .contact { padding-top: 6rem; padding-bottom: 6rem; } .section-heading, .section-heading--compact { display: block; margin-bottom: 4rem; } .section-heading h2 { margin-top: 2.5rem; } .section-heading > p:last-child { margin-top: 2rem; } .project { display: block; min-height: 0; } .project-art { min-height: 24rem; } .project-info { min-height: 21rem; padding: 4rem var(--gutter) 2rem; } .project-info h3 { font-size: clamp(3.6rem, 17vw, 6rem); } .service-list { display: block; } .service { min-height: 22rem; border-right: 0; border-bottom: 1px solid var(--line); } .service > span { margin-bottom: 6rem; } .about { display: block; min-height: 0; } .about-monogram { border-right: 0; border-bottom: 1px solid rgba(8, 9, 7, 0.3); } .about-copy { padding: 5rem var(--gutter); } .about .section-kicker { margin-bottom: 3rem; } .contact h2 { font-size: clamp(5.4rem, 23vw, 9rem); } .contact-orbit { right: -23rem; opacity: 0.7; } .footer { grid-template-columns: 1fr auto; padding-top: 1.5rem; padding-bottom: 1.5rem; } .footer p { display: none; } } @media (max-width: 420px) { .identity { font-size: 0.66rem; } .button--acid { font-size: 0.56rem; letter-spacing: 0.06em; } h1 { /* floor is deliberately far below the vw term: at any real viewport 23vw wins, but under Android text scaling a rem floor pushes the headline off an unscrollable screen */ font-size: clamp(2.5rem, 23vw, 6.2rem); } .hero-meta { font-size: 0.5rem; } .project-art { min-height: 20rem; } .project-info { min-height: 18rem; } .about-monogram { padding: 1.5rem; } } @media (hover: none) { .project-info { background: var(--acid); } .service:first-child { background: var(--acid); color: var(--ink); } .service:first-child > span, .service:first-child p { color: var(--ink); } .tile--01 .tile-name { color: var(--acid); } .tile--01 .tile-num { -webkit-text-stroke-color: var(--acid); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } /* ============================================================ MULTI-PAGE LAYER Three type voices: display = Big Shoulders (headlines, giant glyphs) stencil = Big Shoulders Stencil (accent words, index numerals) mono = Martian Mono (telemetry: kickers, labels, meta) ============================================================ */ html { scroll-padding-top: 6rem; } /* ---- retune display metrics for Big Shoulders ---- */ h1 { font-weight: 800; line-height: 0.86; letter-spacing: -0.015em; } .section-heading h2, .about h2, .contact h2, .cta-band h2 { font-weight: 700; line-height: 0.88; letter-spacing: -0.01em; } .project-info h3 { font-weight: 700; line-height: 0.88; letter-spacing: -0.01em; } .service h3 { font-weight: 700; letter-spacing: -0.005em; } .art-word { font-family: var(--font-stencil), var(--font-display), "Arial Narrow", sans-serif; font-weight: 800; } /* Every stencil glyph on the site resolves to 800 except /contact's "word.", which inherited 700. Pinning it lets the Stencil face ship as one static weight instead of a variable font. */ .stencil { font-family: var(--font-stencil), var(--font-display), "Arial Narrow", sans-serif; font-weight: 800; } /* ---- hero: AP mark left, headline centre, tagline right ---- Below 1101px the mark returns to a layered watermark (see media blocks). */ @media (min-width: 1101px) { .hero { grid-template-columns: minmax(0, 4.8fr) minmax(0, 11.2fr); } /* the headline is set in three deliberate lines — never let it re-wrap. With the right column gone it runs to the edge, so it can go big: 12.5vw keeps the longest line ("that won't" + indent) inside its column. */ .hero h1 { font-size: clamp(3.6rem, 12.5vw, 13rem); } .hero h1 > span { white-space: nowrap; } .hero h1 { margin-left: 7%; } .hero-line-2 { margin-left: 5%; } .monogram { position: static; grid-column: 1; grid-row: 1; align-self: center; width: 100%; transform: none; } .hero-copy { grid-column: 2; grid-row: 1; /* with the kicker gone the copy is headline + discipline line — centre it against the vertically-centred mark instead of splitting the two apart */ justify-content: center; } .hero-meta { margin-top: 2.2rem; } } /* ---- telemetry voice: Martian Mono ---- */ .section-kicker, .kicker, .hero-meta, .scroll-cue, .project-number, .art-index, .project-info p, .service > span, .principles, .footer, .project-meta, .page-hero-meta, .tile-tag, .tile-scope, .tile-cta-label, .contact-lines, .lost-code { font-family: var(--font-mono), "Courier New", monospace; } .section-kicker { font-size: 0.8rem; letter-spacing: 0.12em; } .kicker { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em; } .hero-meta { font-size: 0.52rem; letter-spacing: 0.06em; } .scroll-cue { font-size: 0.54rem; letter-spacing: 0.06em; } .project-number, .art-index { font-size: 0.54rem; letter-spacing: 0.09em; } .project-info p { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.07em; } .service > span { font-size: 0.54rem; } .principles { font-size: 0.56rem; font-weight: 500; letter-spacing: 0.07em; } .footer { font-size: 0.56rem; letter-spacing: 0.07em; } /* ---- topbar: multi-page nav ---- */ .nav-links a.is-active { color: var(--acid); } /* ---- shared page hero (work / about) ---- */ .page-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem clamp(2rem, 5vw, 5rem); overflow: hidden; padding: clamp(4rem, 9vh, 7rem) var(--gutter) clamp(2.4rem, 5vh, 4rem); border-bottom: 1px solid var(--line); background: radial-gradient(circle at 86% 18%, rgba(199, 255, 47, 0.055), transparent 24rem); } .page-hero .kicker { margin-bottom: clamp(2.2rem, 5vh, 4rem); } .page-hero h1 { margin-bottom: 0; font-size: clamp(5.4rem, 15vw, 16rem); line-height: 0.8; text-transform: uppercase; } .page-hero h1 .stencil { color: var(--acid); } .page-hero-meta { display: flex; flex-direction: column; gap: 0.6rem; padding-bottom: 0.9rem; color: var(--muted); font-size: 0.54rem; letter-spacing: 0.07em; text-align: right; text-transform: uppercase; } .page-hero-meta b { color: var(--acid); font-weight: 400; } .page-lede { grid-column: 1 / -1; max-width: 36rem; margin: 1.6rem 0 0; font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.55; letter-spacing: -0.02em; color: var(--muted); } .page-hero--statement h1 { max-width: 62rem; font-size: clamp(3.4rem, 7.2vw, 7.6rem); line-height: 0.9; } /* ---- work index rows (home) ---- */ .work-index { padding: clamp(5.5rem, 11vw, 10rem) var(--gutter); background: var(--paper); color: var(--ink); } .index-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; } .tile { position: relative; z-index: 1; display: flex; flex-direction: column; grid-column: span 2; min-height: clamp(13rem, 21vw, 19rem); overflow: hidden; padding: 1.4rem 1.5rem; background: var(--ink); color: var(--paper); } .tile--01, .tile--wide { grid-column: span 4; } .tile-art { position: absolute; inset: 0; z-index: 0; } .tile-num { position: absolute; z-index: 1; right: -0.04em; bottom: -0.2em; color: transparent; font-family: var(--font-stencil), var(--font-display), "Arial Narrow", sans-serif; font-size: clamp(8rem, 13vw, 14rem); font-weight: 800; line-height: 0.72; -webkit-text-stroke: 1px rgba(243, 240, 231, 0.24); transition: -webkit-text-stroke-color 200ms ease; } .tile--01 .tile-num, .tile--wide .tile-num { font-size: clamp(10rem, 16vw, 17rem); } .tile-tag, .tile-scope { position: absolute; z-index: 3; top: 1.35rem; color: var(--muted); font-size: 0.54rem; letter-spacing: 0.09em; text-transform: uppercase; } .tile-tag { left: 1.5rem; } .tile-scope { right: 1.5rem; } .tile-name { position: relative; z-index: 3; max-width: 82%; margin-top: auto; font-family: var(--font-display), "Arial Narrow", sans-serif; font-size: clamp(2rem, 2.9vw, 3.3rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase; transition: color 180ms ease; } .tile--01 .tile-name, .tile--wide .tile-name { font-size: clamp(2.4rem, 3.8vw, 4.2rem); } .tile-mark { position: absolute; z-index: 3; right: 1.3rem; bottom: 1.15rem; color: var(--acid); font-size: 1.5rem; opacity: 0; transform: translate(-0.4rem, 0.4rem); transition: opacity 180ms ease, transform 180ms ease; } .tile:hover .tile-num, .tile:focus-visible .tile-num { -webkit-text-stroke-color: var(--acid); } .tile:hover .tile-name, .tile:focus-visible .tile-name { color: var(--acid); } .tile:hover .tile-mark, .tile:focus-visible .tile-mark { opacity: 1; transform: translate(0, 0); } /* inset the ring: acid-on-ink reads on every edge; the +5px outer ring sits on paper (invisible) and gets painted over by sibling tiles */ .tile:focus-visible { outline-offset: -5px; } /* per-project motifs — same signal language as the /work art panels */ .tile-art--signal::before { content: ""; position: absolute; top: 0; bottom: 0; left: 36%; width: 1px; background: var(--acid); box-shadow: 6rem 0 0 rgba(243, 240, 231, 0.12), -6rem 0 0 rgba(243, 240, 231, 0.12); } .tile-art--signal::after { content: ""; position: absolute; top: 58%; left: 0; width: 100%; height: 1px; background: var(--line); } .tile-art--binary { background-image: radial-gradient(circle, rgba(199, 255, 47, 0.75) 0 1.5px, transparent 2.5px); background-size: 2.4rem 2.4rem; } .tile-art--binary::before { content: ""; position: absolute; inset: 18% 16%; border: 1px solid var(--acid); background: var(--ink); transform: rotate(-5deg); } .tile-art--axis::before { content: ""; position: absolute; top: -55%; right: -14%; width: 82%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 0 0 3.2rem var(--ink), 0 0 0 calc(3.2rem + 1px) rgba(243, 240, 231, 0.13), 0 0 0 6.4rem var(--ink), 0 0 0 calc(6.4rem + 1px) rgba(243, 240, 231, 0.13); } .tile-art--frame::before { content: ""; position: absolute; inset: 20% 14%; border: 1px solid var(--acid); transform: skewX(-13deg); } .tile-art--frame::after { content: ""; position: absolute; top: 20%; right: 14%; width: 24%; height: 1px; background: var(--acid); box-shadow: 0 2.4rem 0 var(--acid), 0 4.8rem 0 var(--acid); } .tile-art--code { background-image: repeating-linear-gradient(0deg, transparent 0, transparent calc(25% - 1px), var(--line) calc(25% - 1px), var(--line) 25%), repeating-linear-gradient(90deg, transparent 0, transparent calc(20% - 1px), var(--line) calc(20% - 1px), var(--line) 20%); } .tile-art--code::before { content: ""; position: absolute; top: 20%; left: 12%; width: 32%; height: 30%; border-top: 1px solid var(--acid); border-left: 1px solid var(--acid); } .tile-art--code::after { content: ""; position: absolute; right: 12%; bottom: 20%; width: 32%; height: 30%; border-right: 1px solid var(--acid); border-bottom: 1px solid var(--acid); } /* closing acid bar */ .tile--cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; grid-column: 1 / -1; min-height: 0; padding: 1.5rem; background: var(--acid); color: var(--ink); transition: background-color 180ms ease, color 180ms ease; } .tile-cta-label { font-size: 0.54rem; letter-spacing: 0.09em; text-transform: uppercase; } .tile-cta-text { display: inline-flex; align-items: center; gap: 1.1rem; font-family: var(--font-display), "Arial Narrow", sans-serif; font-size: clamp(1.7rem, 2.6vw, 2.6rem); font-weight: 700; line-height: 1; text-transform: uppercase; } .tile-cta-text span { transition: transform 180ms ease; } .tile--cta:hover { background: var(--ink); color: var(--acid); } .tile--cta:hover .tile-cta-text span { transform: translate(0.3rem, -0.3rem); } .tile--cta:focus-visible { outline-color: var(--ink); outline-offset: -5px; } .tile--cta:hover:focus-visible { outline-color: var(--acid); } /* ---- work page: project meta ---- */ .project-info .project-blurb { max-width: 30rem; margin: 1.3rem 0 0; color: #454741; font-family: var(--font-sans), Arial, sans-serif; font-size: 1rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.55; text-transform: none; } .project-meta { display: flex; flex-wrap: wrap; gap: 1.1rem 2.4rem; margin-top: 2.1rem; padding-top: 1.4rem; border-top: 1px solid rgba(8, 9, 7, 0.25); font-size: 0.54rem; letter-spacing: 0.07em; text-transform: uppercase; } .project-meta b { display: block; margin-bottom: 0.45rem; color: #595b54; font-weight: 400; } .project-meta a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; transition: color 180ms ease; } .project-info h3 a { transition: color 180ms ease; } /* Per-line underline: at line-height .84 it strikes through the wrapped lines — that banding is the intended look, not a bug. */ .project-info h3 a:hover, .project-info h3 a:focus-visible { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.09em; } /* ---- work page: live-site snapshots ---- */ .project-shot { position: absolute; z-index: 4; inset: 0; display: flex; align-items: center; justify-content: center; padding: clamp(1.6rem, 4vw, 3.5rem); } .project-shot img { display: block; width: min(84%, 36rem); height: auto; border: 1px solid var(--acid); background: var(--ink); box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.55); transform: rotate(-2deg); transition: transform 220ms ease; } .project:nth-child(even) .project-shot img { transform: rotate(2deg); } .project:hover .project-shot img, .project-shot:focus-visible img { transform: rotate(0deg); } .project-shot:focus-visible { outline: 2px solid var(--acid); outline-offset: -6px; } .project-art .art-index { z-index: 5; } /* ---- about page: approach ---- */ .approach { padding: clamp(6rem, 12vw, 11rem) var(--gutter); background: var(--ink); } .approach-list { border-top: 1px solid var(--line); } .approach-row { display: grid; grid-template-columns: minmax(6rem, 11rem) minmax(11rem, 1fr) 2fr; align-items: center; gap: 2rem; padding: 2.2rem 0; border-bottom: 1px solid var(--line); } .approach-num { color: transparent; font-family: var(--font-stencil), var(--font-display), "Arial Narrow", sans-serif; font-size: clamp(3.4rem, 6vw, 6rem); font-weight: 800; line-height: 0.8; -webkit-text-stroke: 1px rgba(243, 240, 231, 0.4); transition: -webkit-text-stroke-color 200ms ease; } .approach-row:hover .approach-num { -webkit-text-stroke-color: var(--acid); } .approach-row h3 { margin: 0; font-family: var(--font-display), "Arial Narrow", sans-serif; font-size: clamp(1.9rem, 3.2vw, 3.2rem); font-weight: 700; line-height: 0.9; text-transform: uppercase; } .approach-row p { max-width: 30rem; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; } /* ---- contact page ---- */ .contact--page { min-height: calc(100svh - 5.25rem); justify-content: center; } .contact-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; } .contact-actions .button { margin-top: 0; } .button--mail { background: var(--acid); color: var(--ink); font-family: var(--font-mono), "Courier New", monospace; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none; padding: 1rem 1.5rem; } .button--mail:hover { background: transparent; color: var(--acid); } .contact-lines { position: relative; z-index: 2; width: 100%; max-width: 42rem; margin-top: 4.5rem; border-top: 1px solid var(--line); font-size: 0.56rem; letter-spacing: 0.07em; text-transform: uppercase; } .contact-line { display: grid; grid-template-columns: 7.5rem 1fr; gap: 2rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line); } .contact-line b { color: var(--muted); font-weight: 400; } .contact-line a { text-transform: none; transition: color 180ms ease; } .contact-line a:hover { color: var(--acid); } /* ---- CTA band (bottom of home / work / about) ---- */ .cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3rem; padding: clamp(5rem, 9vw, 8rem) var(--gutter); border-top: 1px solid var(--line); background: var(--ink); } .cta-band .section-kicker { margin-bottom: 1.7rem; color: var(--acid); } .cta-band h2 { margin: 0; font-family: var(--font-display), "Arial Narrow", sans-serif; font-size: clamp(3.6rem, 8vw, 8.5rem); text-transform: uppercase; } .cta-band h2 span { color: var(--acid); } .cta-band .button { margin-bottom: 0.5rem; } /* ---- 404 ---- */ .lost { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: calc(100svh - 11.5rem); overflow: hidden; padding: 6rem var(--gutter); } .lost-code { margin: 0 0 2.2rem; color: var(--acid); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; } .lost h1 { margin: 0 0 2.4rem; color: transparent; font-family: var(--font-stencil), var(--font-display), "Arial Narrow", sans-serif; font-size: clamp(9rem, 26vw, 23rem); line-height: 0.8; -webkit-text-stroke: 1.5px var(--acid); } .lost p { max-width: 28rem; margin: 0 0 2.8rem; color: var(--muted); font-size: 1rem; line-height: 1.55; } /* ---- footer (multi-page) ---- */ .footer { grid-template-columns: auto 1fr auto auto; gap: 2.4rem; } .footer-nav { display: flex; gap: 1.5rem; } .footer-nav a, .footer-mail { transition: color 180ms ease; } .footer-nav a:hover, .footer-mail:hover { color: var(--acid); } .footer-mail { text-transform: none; letter-spacing: 0.02em; } /* ---- responsive: multi-page layer ---- */ @media (max-width: 1100px) { .approach-row { grid-template-columns: minmax(5rem, 8rem) 1fr; } .approach-row p { grid-column: 2; } .tile { grid-column: span 3; min-height: clamp(11rem, 22vw, 15rem); } .tile--01, .tile--wide { grid-column: span 3; } .tile--cta { grid-column: 1 / -1; min-height: 0; } .tile-num { font-size: clamp(7.5rem, 15vw, 11rem); } .tile--01 .tile-num, .tile--wide .tile-num { font-size: clamp(9rem, 19vw, 13rem); } } @media (max-width: 780px) { .topbar { grid-template-columns: 1fr auto; grid-template-rows: auto auto; min-height: 0; padding-top: 0.95rem; padding-bottom: 0; } .nav-links { display: flex; grid-column: 1 / -1; grid-row: 2; gap: 1.5rem; margin-top: 0.95rem; padding: 0.85rem 0; border-top: 1px solid var(--line); } .hero { display: block; min-height: 0; padding-bottom: 3.4rem; } .hero-copy { min-height: 0; } .hero-meta { margin-top: 2.4rem; } .page-hero { display: block; } .page-hero h1 { font-size: clamp(4.6rem, 21vw, 8rem); } .page-hero-meta { flex-direction: row; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 2.2rem; padding-bottom: 0; text-align: left; } .tile, .tile--01, .tile--wide { grid-column: 1 / -1; min-height: 12rem; } .tile--cta { grid-column: 1 / -1; flex-wrap: wrap; min-height: 0; } .tile-num { font-size: clamp(7rem, 30vw, 10rem); } .tile--01 .tile-num, .tile--wide .tile-num { font-size: clamp(8rem, 34vw, 10.75rem); } .tile-name { font-size: clamp(1.9rem, 8vw, 2.6rem); } .tile--01 .tile-name, .tile--wide .tile-name { font-size: clamp(2.2rem, 9vw, 2.6rem); } .tile-cta-text { font-size: clamp(1.4rem, 3.5vw, 1.7rem); } .approach-row { display: block; padding: 2rem 0; } .approach-num { margin-bottom: 1.2rem; } .approach-row h3 { margin-bottom: 0.9rem; } .cta-band { display: block; } .cta-band .button { margin-top: 2.6rem; margin-bottom: 0; } .contact--page { min-height: 0; padding-top: 7rem; padding-bottom: 7rem; } .contact-line { grid-template-columns: 6rem 1fr; gap: 1rem; } .footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.8rem; padding-top: 1.6rem; padding-bottom: 1.6rem; } .footer > a:last-child { margin-left: auto; } } /* forced-colors (Windows High Contrast): keep the outline-only glyphs as outlines — otherwise their transparent fill is repainted solid */ @media (forced-colors: active) { .tile-num, .approach-num, .monogram, .about-monogram, .art-word, .lost h1 { forced-color-adjust: none; } } /* ============================================================ AP// MARK, BLUEPRINT DRAWING & VISUAL PANES ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---- the 3D blueprint of the ap// mark ---- */ .bp { display: block; width: 100%; height: auto; overflow: visible; } .bp-grid-fine { fill: none; stroke: rgba(243, 240, 231, 0.045); stroke-width: 1; } .bp-grid-bold { fill: none; stroke: rgba(243, 240, 231, 0.085); stroke-width: 1; } /* far face of the solid — dashed, the way hidden edges are drawn */ .bp-back { fill: none; stroke: rgba(243, 240, 231, 0.17); stroke-width: 1.6; stroke-dasharray: 8 7; } .bp-depth { stroke: rgba(243, 240, 231, 0.15); stroke-width: 1.3; } .bp-front { fill: none; stroke: rgba(199, 255, 47, 0.55); stroke-width: 2.6; stroke-linejoin: round; } .bp-counter { fill: none; stroke: rgba(199, 255, 47, 0.34); stroke-width: 2; } .bp-node { fill: none; stroke: rgba(199, 255, 47, 0.85); stroke-width: 1.6; } .bp-dim, .bp-axis, .bp-reg { fill: none; stroke: rgba(243, 240, 231, 0.3); stroke-width: 1.1; } .bp-ext { fill: none; stroke: rgba(243, 240, 231, 0.2); stroke-width: 1; } .bp-arrowhead { fill: rgba(243, 240, 231, 0.45); } .bp-axis--z { stroke: var(--acid); } .bp-label, .bp-tick { font-family: var(--font-mono), "Courier New", monospace; font-size: 19px; letter-spacing: 0.04em; fill: rgba(243, 240, 231, 0.42); } .bp-tick { font-size: 16px; } .bp-label--accent { fill: var(--acid); } /* ink colourway — the same drawing on the acid panel */ .bp--ink .bp-grid-fine { stroke: rgba(8, 9, 7, 0.09); } .bp--ink .bp-grid-bold { stroke: rgba(8, 9, 7, 0.16); } .bp--ink .bp-back { stroke: rgba(8, 9, 7, 0.34); } .bp--ink .bp-depth { stroke: rgba(8, 9, 7, 0.3); } .bp--ink .bp-front { stroke: rgba(8, 9, 7, 0.88); } .bp--ink .bp-counter { stroke: rgba(8, 9, 7, 0.6); } .bp--ink .bp-node { stroke: rgba(8, 9, 7, 0.9); } .bp--ink .bp-dim, .bp--ink .bp-axis, .bp--ink .bp-reg, .bp--ink .bp-ext { stroke: rgba(8, 9, 7, 0.42); } .bp--ink .bp-arrowhead { fill: rgba(8, 9, 7, 0.55); } .bp--ink .bp-label, .bp--ink .bp-tick { fill: rgba(8, 9, 7, 0.62); } .bp--ink .bp-label--accent { fill: rgba(8, 9, 7, 0.95); } .bp--ink .bp-axis--z { stroke: rgba(8, 9, 7, 0.95); } /* ---- terminal pane ---- */ .term { overflow: hidden; border: 1px solid var(--line); background: #0b0d09; } .term-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--line); background: rgba(243, 240, 231, 0.04); } .term-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(243, 240, 231, 0.2); } .term-dot:first-child { background: rgba(199, 255, 47, 0.7); } .term-title { margin-left: 0.55rem; color: var(--muted); font-family: var(--font-mono), "Courier New", monospace; font-size: 0.5rem; letter-spacing: 0.09em; text-transform: uppercase; } .term-body { padding: 1rem 1.05rem 1.15rem; font-family: var(--font-mono), "Courier New", monospace; font-size: 0.6rem; line-height: 1.95; } .tl { margin: 0; overflow-wrap: anywhere; color: var(--paper); } .tl--cont { padding-left: 1.5rem; } .tl--out { color: var(--muted); } .tp { color: var(--acid); } .tw { color: #8a9a70; } .ts { color: #cfccc0; } .tok { color: var(--acid); } .caret { display: inline-block; width: 0.45rem; height: 0.8em; background: var(--acid); vertical-align: -0.1em; animation: caret-blink 1.1s steps(2) infinite; } @keyframes caret-blink { 50% { opacity: 0; } } /* ---- service cards, now visual-first ---- */ .service { display: flex; flex-direction: column; } .service > span { margin-bottom: 1.4rem; } .service-visual { margin-bottom: auto; padding-bottom: 1.9rem; } .service:hover .term, .service:hover .code, .service:hover .spec, .service:hover .wire { border-color: rgba(8, 9, 7, 0.35); } /* type specimen */ .spec { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.05rem 1.15rem; border: 1px solid var(--line); background: rgba(243, 240, 231, 0.02); } .spec-glyph { font-family: var(--font-display), "Arial Narrow", sans-serif; font-size: 3.4rem; font-weight: 700; line-height: 0.78; } .spec--lg .spec-glyph { font-size: clamp(4.5rem, 9vw, 7.5rem); } .spec-swatches { display: flex; gap: 0.4rem; } .sw { width: 1.85rem; height: 1.85rem; border: 1px solid var(--line); } .sw--ink { background: #080907; } .sw--paper { background: var(--paper); } .sw--acid { background: var(--acid); } .spec-meta { color: var(--muted); font-family: var(--font-mono), "Courier New", monospace; font-size: 0.5rem; letter-spacing: 0.09em; text-transform: uppercase; } /* code pane */ .code { overflow: hidden; border: 1px solid var(--line); background: #0b0d09; } .code-tab { padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--line); background: rgba(243, 240, 231, 0.04); color: var(--muted); font-family: var(--font-mono), "Courier New", monospace; font-size: 0.5rem; letter-spacing: 0.09em; text-transform: uppercase; } .code-body { /* the buffer is white-space:pre, so on a phone it hides ~43% of itself mid-glyph unless it can scroll; the frame and tab strip stay put */ overflow-x: auto; overscroll-behavior-x: contain; padding: 0.75rem 0; font-family: var(--font-mono), "Courier New", monospace; font-size: 0.52rem; line-height: 1.9; } .cl { margin: 0; padding: 0 0.7rem; color: #cfccc0; white-space: pre; } .ln { display: inline-block; width: 2.1rem; color: rgba(243, 240, 231, 0.22); } .c-sel { color: var(--acid); } .c-prop { color: var(--paper); } .c-val { color: var(--muted); } .c-fn { color: rgba(199, 255, 47, 0.75); } /* wireframe sketch */ .wire { display: block; width: 100%; height: auto; border: 1px solid var(--line); } .wire-grid { fill: none; stroke: rgba(243, 240, 231, 0.06); } .wire-box { fill: none; stroke: rgba(243, 240, 231, 0.35); stroke-width: 1.4; } .wire-box--fill { fill: rgba(199, 255, 47, 0.08); stroke: var(--acid); } .wire-guide { stroke: rgba(199, 255, 47, 0.35); stroke-width: 1; stroke-dasharray: 5 4; } .wire-node { fill: none; stroke: var(--acid); stroke-width: 1.4; } /* ---- about: both halves ---- */ .halves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: clamp(1.1rem, 2.2vw, 2rem); padding: clamp(3.5rem, 7vw, 6rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--line); background: var(--ink); } .half-tag { display: block; margin-bottom: 1rem; color: var(--acid); font-family: var(--font-mono), "Courier New", monospace; font-size: 0.54rem; letter-spacing: 0.09em; text-transform: uppercase; } /* ---- footer credit ---- */ .footer { grid-template-columns: auto 1fr auto auto auto; } .footer-credit { margin: 0; color: var(--muted); } @media (max-width: 1100px) { .footer { grid-template-columns: auto 1fr auto auto; } .footer-credit { display: none; } } /* Below the three-zone layout the mark sits behind the headline, so it drops back to a watermark: the extrusion survives, the annotation layer would only be noise. */ /* Below the three-zone layout the mark drops out of its absolute position and flows underneath the headline — it stands on its own instead of sitting behind the type, so the annotation layer comes back with it. */ @media (max-width: 1100px) { .hero { padding-bottom: clamp(2.5rem, 6vw, 4rem); } .monogram { position: static; width: 100%; max-width: 34rem; margin-top: clamp(2.2rem, 6vw, 3.5rem); transform: none; opacity: 1; } } @media (max-width: 480px) { /* at this size the dimension labels are too small to earn their space */ .monogram .bp-dim-g, .monogram .bp-title-g, .monogram .bp-reg-g { display: none; } } /* ---- board tiles carry a snapshot of the site behind the motif -------- */ .tile-shot { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; /* centre the crop so each site's own nav bar falls outside the tile */ object-position: center; filter: grayscale(0.5) brightness(0.5) contrast(1.04); transition: filter 320ms ease, transform 320ms ease; } /* scrim so the name and labels stay readable over any image */ .tile:not(.tile--cta)::after { position: absolute; z-index: 2; inset: 0; content: ""; background: linear-gradient(to top, rgba(8, 9, 7, 0.94) 0%, rgba(8, 9, 7, 0.5) 42%, rgba(8, 9, 7, 0.18) 100%); pointer-events: none; } /* the line-art motif stays, quieter, so the board still reads as a system */ .tile-shot ~ .tile-art { opacity: 0.5; transition: opacity 320ms ease; } .tile:hover .tile-shot, .tile:focus-visible .tile-shot { filter: grayscale(0) brightness(0.72) contrast(1); transform: scale(1.03); } .tile:hover .tile-shot ~ .tile-art, .tile:focus-visible .tile-shot ~ .tile-art { opacity: 0.22; } @media (hover: none) { .tile-shot { filter: grayscale(0.3) brightness(0.5) contrast(1.04); } } /* ---- selected work, as code ------------------------------------------ An editor pane: the file tree is the real navigation into /work, the buffer states the same thing in the site's own idiom. */ .ide { margin: 0 var(--gutter); padding: 0; overflow: hidden; border: 1px solid var(--line); background: #0b0d09; } .ide-wrap { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem); } .ide-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); background: rgba(243, 240, 231, 0.04); } .ide-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(243, 240, 231, 0.2); } .ide-dot:first-child { background: rgba(199, 255, 47, 0.7); } .ide-tab { margin-left: 0.7rem; padding: 0.25rem 0.75rem; border: 1px solid var(--line); background: rgba(243, 240, 231, 0.05); color: var(--paper); font-family: var(--font-mono), "Courier New", monospace; font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; } .ide-path { margin-left: auto; color: var(--muted); font-family: var(--font-mono), "Courier New", monospace; font-size: 0.5rem; letter-spacing: 0.08em; } .ide-body { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); } .ide-side { padding: 1rem 0 1.4rem; border-right: 1px solid var(--line); font-family: var(--font-mono), "Courier New", monospace; font-size: 0.55rem; letter-spacing: 0.05em; } .ide-side-title { margin: 0 0 0.9rem; padding: 0 0.95rem; color: var(--muted); font-size: 0.5rem; letter-spacing: 0.11em; text-transform: uppercase; } .ide-folder { margin: 0 0 0.35rem; padding: 0 0.95rem; color: var(--paper); } .ide-side ul { margin: 0; padding: 0; list-style: none; } .ide-file { display: block; padding: 0.34rem 0.95rem 0.34rem 1.9rem; color: var(--muted); transition: background-color 160ms ease, color 160ms ease, padding-left 160ms ease; } .ide-file::before { margin-left: -0.85rem; margin-right: 0.5rem; color: rgba(243, 240, 231, 0.25); content: "›"; } .ide-file:hover, .ide-file:focus-visible { background: rgba(199, 255, 47, 0.08); color: var(--acid); padding-left: 2.1rem; } .ide-file:focus-visible { outline: 1px solid var(--acid); outline-offset: -1px; } .ide-code { padding: 1rem 0 1.4rem; overflow-x: auto; font-family: var(--font-mono), "Courier New", monospace; font-size: 0.55rem; line-height: 1.95; } .ide-code .cl { padding: 0 1.1rem; } .c-key { color: rgba(199, 255, 47, 0.8); } .c-str { color: var(--paper); } .c-com { color: rgba(243, 240, 231, 0.32); } .ide-status { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.95rem; border-top: 1px solid var(--line); background: rgba(199, 255, 47, 0.06); color: var(--muted); font-family: var(--font-mono), "Courier New", monospace; font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; } .ide-status-right { color: var(--acid); } @media (max-width: 780px) { .ide-body { grid-template-columns: minmax(0, 1fr); } .ide-side { border-right: 0; border-bottom: 1px solid var(--line); } .ide-path { display: none; } } /* the pane now opens the work section — dark block on the paper page */ .work-index .ide-wrap { padding: 0 0 clamp(2.5rem, 5vw, 4rem); } .work-index .ide { margin: 0; border-color: rgba(8, 9, 7, 0.22); } /* ---- top bar: what the practice does, in the kicker treatment ---- */ .topbar-tag { display: flex; align-items: center; margin: 0; color: var(--acid); font-family: var(--font-mono), "Courier New", monospace; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } @media (max-width: 1100px) { .topbar { grid-template-columns: 1fr auto auto; } .topbar-tag { display: none; } } /* outline button for use on the acid panel */ .button--ink { margin-top: 2.6rem; border-color: var(--ink); background: transparent; color: var(--ink); } .button--ink:hover { background: var(--ink); color: var(--acid); } /* Section label on the paper work section. Acid on cream is ~1.02:1, so the acid sits on an ink chip instead of directly on the background. */ .section-kicker--chip { display: inline-block; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); padding: 0.55rem 0.9rem; background: var(--ink); color: var(--acid); } /* Diagonal arrow as SVG. The ↗ character (U+2197) has an emoji presentation and iOS renders it as a blue emoji tile, so it is never used as text. */ .arw { display: inline-block; flex: none; width: 0.95em; height: 0.95em; vertical-align: -0.13em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; } /* The statement heading carries long words (DEVELOPMENT, ATTENTION), so it can't take the sizing meant for the short one-word page titles: at 21vw its widest line ran 420px into 335px of column and was silently clipped by the page's overflow-x. It costs 5.33px of ink per px of font. */ @media (max-width: 780px) { .page-hero--statement h1 { font-size: clamp(2.2rem, 15vw, 4.4rem); } } /* ============================================================ MOBILE PASS This layer is last on purpose: the multi-page layer above it is unmediated, and a media query adds no specificity — only a later rule can win. ============================================================ */ @media (max-width: 780px) { /* Section headings: a continuous ramp. The old <=420px rule scaled BACKWARDS — a 414px iPhone XR rendered them 17% larger than a 440px Pro Max. */ .section-heading h2, .about h2 { font-size: clamp(3.7rem, 18.5vw, 5.25rem); } /* Telemetry type floor. Martian Mono at 8–9px with 0.09–0.11em tracking reads as separated specks; the tracking is halved because at these sizes tracking is what kills legibility, not the size alone. */ .ide-tab, .ide-side-title, .spec-meta, .term-title, .code-tab { font-size: 0.66rem; letter-spacing: 0.06em; } .tile-tag, .tile-scope, .tile-cta-label, .project-meta, .project-number, .art-index, .half-tag { font-size: 0.7rem; letter-spacing: 0.06em; } .hero-meta, .footer, .contact-lines { font-size: 0.72rem; letter-spacing: 0.05em; } /* The only navigation on a phone, and the conversion address. Must come after the .footer rule above. */ .nav-links { gap: 1.1rem; padding: 0.7rem 0; font-size: 0.78rem; } .nav-links a { padding: 0.55rem 0.7rem; } .footer-mail, .contact-lines a { font-size: 0.8rem; letter-spacing: 0.01em; } /* The row gap and the .nav-links margin-top are the same gutter expressed twice, which pushes the hairline 2.3x off centre. Track shrinks so the CTA cannot be pushed off-screen under Android text scaling. */ .topbar { row-gap: 0; grid-template-columns: minmax(0, 1fr) auto; } .topbar .button--acid { max-width: 100%; overflow-wrap: anywhere; } /* File tree: 21.9px flush rows with 0px between them -> 44px rows with a seam. padding-left leaves the transition so focus cannot shift the row. */ .ide-file { display: flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; transition: background-color 160ms ease, color 160ms ease; } .ide-side li + li { border-top: 1px solid var(--line); } /* The status path duplicates .ide-path (hidden here) and the tab label, and forces the strip to three lines at 320px. */ .ide-status { justify-content: flex-start; gap: 0; } .ide-status > span:first-child { display: none; } /* Footer targets: 11px inline boxes -> ~30px. The row gap goes up first so no two targets can overlap once they grow. */ .footer { row-gap: 2rem; } .footer-nav a, .footer-mail, .footer > a:last-child { display: inline-block; padding-block: 0.5rem; margin-block: -0.5rem; } /* The mailto is computed-style-identical to the two static rows beside it and only announces itself on :hover, which never fires on a phone. */ .contact-line a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; text-decoration-color: rgba(199, 255, 47, 0.55); } /* Long client names must not be amputated by body{overflow-x:hidden}. "ENTERTAINMENT" alone runs 448px into a 400px column at 17vw; the rest of the lineup still fits, so only this card steps down. */ #everest-entertainment .project-info h3 { font-size: clamp(2.6rem, 13vw, 6rem); } /* safety net for the next long name — inert at today's sizes */ .project-info h3 { overflow-wrap: anywhere; } /* 404 sized itself against the DESKTOP chrome height while the real mobile chrome is 14.7rem, forcing a pointless 52px scroll on a dead-end page. */ .lost { min-height: calc(100svh - 14.8rem); padding-top: 3.5rem; padding-bottom: 3.5rem; } } /* The 3-up expertise grid overflows 53.5px in the 781–1100px band (every phone, rotated) because grid items default to min-width:auto and the pre-formatted code pane's min-content is 374px. Scoped so 1101px+ is untouched; pairs with .code-body{overflow-x:auto}. */ @media (max-width: 1100px) { .service-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Landscape phones. The stylesheet had no max-height or orientation query at all, so a 390px-tall viewport took its sizing from its 844px WIDTH. The width clause keeps short desktop windows out. */ @media (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) { .monogram { max-width: 18rem; margin-top: 1rem; } .about, .project, .project-art { min-height: 0; } .expertise, .work-section, .contact { padding-block: clamp(2.5rem, 7vh, 6rem); } .work-index { padding-block: clamp(2.25rem, 6.5vh, 5.5rem); } .cta-band { padding-block: clamp(2rem, 5.5vh, 5rem); } } /* Touch devices paint .project-info acid, and the global focus ring is acid too — a 1.00:1 focus indicator on every link on /work. ink-on-acid is 15.7:1. */ @media (hover: none) { .project-info a:focus-visible { outline-color: var(--ink); } /* Re-declared here because it has to follow the base .tile-mark rule to win — in its old position inside the earlier (hover:none) block it was silently overridden. */ .tile-mark { opacity: 1; transform: translate(0, 0); } } .project:hover .project-info a:focus-visible { outline-color: var(--ink); } /* A horizontal fling at the end of the code buffer should not be handed to the page — iOS reads that as the back gesture. */ .ide-code { overscroll-behavior-x: contain; } /* ---- second pass: legibility floor for the things you act on ------------ The tiny mono telemetry is the house style and stays small, but anything interactive or load-bearing was landing at 8.6–10.9px on a phone. */ @media (max-width: 780px) { /* button labels — "Start a project" was 8.96px on every page */ .button { font-size: 0.78rem; } .button--acid { font-size: 0.72rem; letter-spacing: 0.08em; } /* the wordmark is the only route home from an inner page */ .identity { font-size: 0.76rem; padding-block: 0.75rem; margin-block: -0.75rem; } /* the file tree is real navigation into /work, not decoration */ .ide-side { font-size: 0.72rem; } .ide-status { font-size: 0.62rem; } .kicker { font-size: 0.72rem; } .page-hero-meta, .project-info p { font-size: 0.7rem; letter-spacing: 0.05em; } /* the eight "Live" links were 13px tall — under the 24px AA floor */ .project-meta a { display: inline-block; padding-block: 0.45rem; margin-block: -0.45rem; } } @media (max-width: 420px) { /* the <=420 block shrank the CTA below the base size; keep it legible */ .button--acid { font-size: 0.68rem; letter-spacing: 0.06em; } .identity { font-size: 0.72rem; } } /* ---- touch is a property of the device, not the viewport width ---------- A phone in landscape is 844px wide, so it sailed past every max-width:780 rule above and kept 21.9px nav rows and 11px links. */ @media (pointer: coarse) { .ide-file { display: flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; } .ide-side li + li { border-top: 1px solid var(--line); } .identity { padding-block: 0.75rem; margin-block: -0.75rem; } .nav-links a { padding: 0.55rem 0.7rem; } .project-meta a, .footer-nav a, .footer-mail, .footer > a:last-child { display: inline-block; padding-block: 0.5rem; margin-block: -0.5rem; } } /* Landscape phones sit above the 780px breakpoint but are still phones. */ @media (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) { .kicker { font-size: 0.72rem; } .page-hero-meta, .project-info p, .project-meta { font-size: 0.7rem; letter-spacing: 0.05em; } .ide-side { font-size: 0.72rem; } .ide-status, .scroll-cue { font-size: 0.64rem; } } @media (pointer: coarse) { .scroll-cue { padding-block: 0.6rem; margin-block: -0.6rem; font-size: 0.64rem; } } /* Both code panes scroll horizontally on a phone, but iOS paints no scrollbar, so a hard cut mid-token reads as a rendering bug rather than as "more this way". Fading the right edge of the scroll viewport makes it legible as an affordance. The mask sits on the scroller's box, so it stays at the edge whatever the scroll position. */ @media (max-width: 780px) { .code-body, .ide-code { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.75rem), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 2.75rem), transparent 100%); } } /* At 320 the 6rem label column leaves 184px for a 187px email address, so it bled 2.9px past the screen. Stack label over value instead. */ @media (max-width: 420px) { .contact-line { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; } } @media (pointer: coarse) { .contact-line a { display: inline-block; padding-block: 0.5rem; margin-block: -0.5rem; } } /* iOS does not reliably clip with overflow-x:hidden on — the page can still be panned sideways even though the scrollbar says otherwise. `clip` does not create a scroll container, so it actually holds. Browsers that don't know `clip` ignore this and keep the `hidden` declared at the top. */ html, body { overflow-x: clip; } /* Safety net: nothing should ever be able to push the page wider than the window on a phone, whatever copy goes in later. */ @media (max-width: 780px) { h1, h2, h3, p, li, a, b, span, dt, dd, figcaption { overflow-wrap: break-word; } }