/* ========================================================= e-lliot.com — 2026 revamp paper studio: cool ground, ink type, one blue, one clay ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Karla:ital,wght@0,300..700;1,300..600&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap'); /* The wordmark is self-hosted and preloaded in the page . font-display: block holds the name invisible for a beat rather than painting it in a fallback face and swapping — no flash of the wrong font. Safe here because the file is 84KB and preloaded; never do this for body text. */ @font-face { font-family: 'Rubik 80s Fade'; src: url('fonts/rubik-80s-fade-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; } :root { /* cool paper: a light gray leaning blue, with the ink cooled to match. warm ink on a cool ground reads as a printing error, so these move together */ --paper: #f2f4f7; --paper-deep: #e5e9ef; --ink: #14171c; --ink-soft: #565c66; --ink-faint: #8f97a3; --blue: #1a35c4; --blue-deep: #0e1f7a; --cyan: #35b7e8; --clay: #b0563a; --rule: 1px solid rgba(20, 23, 28, 0.14); --f-display: 'Instrument Serif', Georgia, serif; --f-body: 'Karla', 'Helvetica Neue', Helvetica, sans-serif; --f-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace; --f-mark: 'Rubik 80s Fade', var(--f-display); --gutter: clamp(1.25rem, 5vw, 5.5rem); --measure: 62ch; /* strong custom curves — the built-in CSS easings are too weak to read as intentional */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease: var(--ease-out); /* durations: interaction feedback stays under 300ms, ambient motion is slow on purpose */ --t-press: 140ms; --t-hover: 200ms; --t-veil: 260ms; --t-enter: 520ms; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: clamp(1rem, 0.94rem + 0.28vw, 1.12rem); line-height: 1.62; font-weight: 400; /* clip, not hidden: `hidden` would turn into the scroll container */ overflow-x: clip; -webkit-font-smoothing: antialiased; } /* paper grain ------------------------------------------------ */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.4; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"); } /* type ------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--f-display); /* Instrument Serif ships one weight — synthetic bolding would smear it */ font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; margin: 0; text-wrap: balance; } p { margin: 0 0 1.05em; max-width: var(--measure); text-wrap: pretty; } p:last-child { margin-bottom: 0; } .lede { font-family: var(--f-display); font-size: clamp(1.35rem, 1rem + 1.5vw, 2.2rem); font-weight: 400; line-height: 1.24; letter-spacing: -0.005em; max-width: 26ch; } /* the hero lede is a longer, listed sentence — it needs a wider measure than the section ledes, or it stacks into a tall narrow column */ .lede--hero { max-width: 38ch; font-size: clamp(1.2rem, 0.98rem + 1.05vw, 1.8rem); line-height: 1.3; } .mono { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } em { font-style: italic; } /* links — signature blur-fade from the old site --------------- */ a { color: inherit; text-decoration: none; transition: color var(--t-hover) var(--ease-out), filter var(--t-veil) var(--ease-out), opacity var(--t-veil) var(--ease-out); } a.u { box-shadow: inset 0 -1px 0 rgba(20, 23, 28, 0.3); transition: box-shadow var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), filter var(--t-veil) var(--ease-out), opacity var(--t-veil) var(--ease-out); } /* hover effects are gated: touch devices fire :hover on tap and would leave a link stuck blurred until the next tap elsewhere */ @media (hover: hover) and (pointer: fine) { a:hover { filter: blur(1.1px); opacity: 0.72; } a.u:hover { color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); } } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; filter: none; opacity: 1; } /* ========================================================= nav ========================================================= */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.85rem var(--gutter); background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(9px) saturate(1.1); border-bottom: var(--rule); } .nav__mark { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; } .nav__links { display: flex; gap: clamp(0.85rem, 2.4vw, 2rem); } .nav__links a { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } .nav__links a:hover { color: var(--ink); } .nav__links a.is-active { color: var(--blue); } @media (max-width: 620px) { /* the hero carries the name on small screens — the nav mark only steals room */ .nav__mark { display: none; } .nav { justify-content: center; } .nav__links { gap: 1.1rem; } .nav__links a[data-optional] { display: none; } } /* ========================================================= layout scaffolding ========================================================= */ .wrap { padding-inline: var(--gutter); } section { position: relative; } .section-head { display: flex; align-items: baseline; gap: 1rem; padding-block: 0.7rem; border-top: var(--rule); margin-bottom: clamp(2rem, 4vw, 3.4rem); } .section-head__num { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-faint); letter-spacing: 0.1em; } .section-head__title { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; } /* asymmetric two-column: rail + body */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; } @media (max-width: 800px) { .split { grid-template-columns: 1fr; gap: 1.1rem; } } /* ========================================================= hero ========================================================= */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(6rem, 14vh, 10rem) clamp(3rem, 8vh, 6rem); overflow: hidden; } .hero__orb { position: absolute; top: 44%; right: -24vw; width: min(70vw, 660px); aspect-ratio: 1; translate: 0 -50%; z-index: 0; pointer-events: none; opacity: 0.34; filter: blur(0.6px); mix-blend-mode: multiply; /* ambient, not interactive — slow constant motion is the point */ animation: drift 16s var(--ease-in-out) infinite alternate; } .hero__orb img { width: 100%; height: 100%; object-fit: contain; animation: spin 90s linear infinite; } /* transform only: animating filter every frame forever burns GPU for no gain */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes drift { from { transform: scale(1) translateY(0); } to { transform: scale(0.84) translateY(-2%); } } .hero__inner { position: relative; z-index: 1; } .hero__mark { font-family: var(--f-mark); font-weight: 400; font-size: clamp(3.4rem, 15.5vw, 13rem); line-height: 0.86; letter-spacing: 0.005em; margin: 0 0 clamp(1.5rem, 4vw, 2.75rem); text-transform: uppercase; } .hero__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin-top: clamp(1.6rem, 4vw, 2.6rem); padding-top: 0.9rem; border-top: var(--rule); max-width: 46rem; } .hero__meta span { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } .hero__scroll { position: absolute; bottom: clamp(1.2rem, 4vh, 2.4rem); left: var(--gutter); z-index: 1; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); } .hero__scroll::before { content: ""; display: inline-block; width: 2.4rem; height: 1px; background: var(--ink-faint); vertical-align: middle; margin-right: 0.7rem; transform-origin: left; animation: stretch 2.6s var(--ease) infinite; } @keyframes stretch { 0%, 100% { transform: scaleX(0.4); } 50% { transform: scaleX(1); } } /* ========================================================= now / work ========================================================= */ .now { padding-block: clamp(4rem, 10vh, 8rem) clamp(2rem, 6vh, 4rem); } .entry { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: clamp(0.6rem, 3vw, 2.5rem); padding-block: clamp(1.5rem, 3vw, 2.25rem); border-top: var(--rule); } .entry:last-of-type { border-bottom: var(--rule); } @media (max-width: 660px) { .entry { grid-template-columns: 1fr; gap: 0.5rem; } } .entry__when { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-faint); padding-top: 0.45rem; } .entry__role { font-family: var(--f-display); font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); font-weight: 400; margin-bottom: 0.15rem; } .entry__org { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.85rem; } .entry__body { color: var(--ink-soft); } .entry__body strong { color: var(--ink); font-weight: 600; } /* ========================================================= pact — the one inverted panel ========================================================= */ .pact { background: var(--blue-deep); color: var(--paper); margin-block: clamp(3rem, 8vh, 7rem); padding-block: clamp(3.5rem, 9vh, 7rem); position: relative; overflow: hidden; } .pact::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 88% 6%, rgba(53, 183, 232, 0.42), transparent 58%), radial-gradient(70% 70% at 4% 100%, rgba(53, 183, 232, 0.16), transparent 62%); pointer-events: none; } .pact > * { position: relative; } .pact .section-head { border-color: rgba(242, 244, 247, 0.24); } .pact .section-head__num { color: rgba(242, 244, 247, 0.45); } .pact__title { font-size: clamp(2.8rem, 8.5vw, 7rem); font-weight: 400; line-height: 0.96; margin-bottom: clamp(1.25rem, 3vw, 2rem); } .pact__lede { font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem); color: rgba(242, 244, 247, 0.86); max-width: 44ch; } .pact__grid { display: grid; /* 2×2 rather than four thin columns — the copy needs the measure */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 6vw, 5rem); margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid rgba(242, 244, 247, 0.24); } .pact__cell h3 { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); font-weight: 500; margin-bottom: 0.6rem; font-variation-settings: normal; } .pact__cell p { color: rgba(242, 244, 247, 0.78); font-size: 0.96rem; } .pact__cta { display: inline-flex; align-items: baseline; gap: 0.75rem; margin-top: clamp(2rem, 5vw, 3rem); padding: 0.8rem 1.5rem; border: 1px solid rgba(242, 244, 247, 0.45); border-radius: 999px; font-family: var(--f-mono); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; transition: background var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } /* pressable things must answer the press */ .pact__cta:active { transform: scale(0.97); } .pact__cta span { transition: transform var(--t-hover) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .pact__cta:hover { background: var(--paper); color: var(--blue-deep); border-color: var(--paper); filter: none; opacity: 1; } .pact__cta:hover span { transform: translateX(4px); } } /* ========================================================= design gallery ========================================================= */ .work { padding-block: clamp(2rem, 6vh, 4rem); } .gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(0.75rem, 2vw, 1.6rem); } .piece { position: relative; grid-column: span 6; margin: 0; } /* generated galleries: tiles carry a repeating 7/5/4/4/4 span rhythm, so any number of pieces packs without hand-assigning a class per tile */ .gallery--auto { grid-auto-flow: dense; } .piece--wide { grid-column: span 7; } .piece--slim { grid-column: span 5; } .piece--third { grid-column: span 4; } .piece--full { grid-column: span 12; } .piece--nudge { margin-top: clamp(1.5rem, 5vw, 4.5rem); } @media (max-width: 720px) { .piece, .piece--wide, .piece--slim, .piece--third { grid-column: span 12; } .piece--nudge { margin-top: 0; } } /* the frame is a