/* ── reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } /* ── tokens ─────────────────────────────────────────────────────────────── */ :root { --paper: #FFFFFF; /* pure white */ --paper-2: #EDEDED; --ink: #141414; --ink-2: rgba(20, 20, 20, 0.62); --ink-3: rgba(20, 20, 20, 0.42); --ink-4: rgba(20, 20, 20, 0.12); --rule: rgba(20, 20, 20, 0.14); --accent: oklch(45% 0.16 260); /* cobalt, used sparingly */ --display: 'Cormorant Garamond', 'Times New Roman', serif; --body: 'Cormorant Garamond', 'Times New Roman', serif; --mono: 'Cormorant Garamond', 'Times New Roman', serif; /* legacy slot, same family now */ --pad-x: clamp(28px, 6vw, 88px); --pad-y: clamp(28px, 4vw, 56px); --gap-section: clamp(48px, 8vw, 120px); --line: 1.55; --hair: 0.5px; --enter: 320ms cubic-bezier(.2,.7,.2,1); } /* type pairing was a tweak; Cormorant is now the lock-in. Stubs kept so any stale data-type attribute on from old saved state is a no-op. */ [data-density="tight"] { --pad-x: clamp(20px, 4vw, 56px); --pad-y: clamp(20px, 3vw, 36px); --gap-section: clamp(36px, 6vw, 72px); } [data-density="spacious"] { --pad-x: clamp(40px, 8vw, 128px); --pad-y: clamp(36px, 5vw, 80px); --gap-section: clamp(72px, 10vw, 168px); } [data-dark="1"] { --paper: #0E0E0E; --paper-2: #1A1A1A; --ink: #E8E8E6; --ink-2: rgba(232, 232, 230, 0.62); --ink-3: rgba(232, 232, 230, 0.42); --ink-4: rgba(232, 232, 230, 0.12); --rule: rgba(232, 232, 230, 0.18); --accent: oklch(72% 0.13 250); } /* ── shell ──────────────────────────────────────────────────────────────── */ html, body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: var(--line); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @media (hover: hover) { *, *::before, *::after { cursor: none !important; } } body { min-height: 100vh; overflow-x: hidden; } .shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; position: relative; } /* PhotoStream sits behind everything; content lifts above it */ .shell > .chrome, .shell > main, .shell > .footer { position: relative; z-index: 1; } /* ── photostream ────────────────────────────────────────────────────────── Slow horizontal drift of photo placeholders. Cards are positioned within the upper band only (above & below the nav, through the top half of the wordmark). Drop real photos into the slot array's `img` field. */ .photostream { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* quieter on every other page */ .photostream.is-quiet { opacity: 0.22; } /* band guides — shown only while Tweaks panel is open */ .ps-band { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(20,20,20,0.55); border-bottom: 1px dashed rgba(20,20,20,0.55); background: rgba(20,20,20,0.025); pointer-events: none; } .ps-band-tag { position: absolute; left: 12px; top: -10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(20,20,20,0.72); background: var(--paper); padding: 1px 6px; border: 1px solid rgba(20,20,20,0.25); } [data-dark="1"] .ps-band { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.04); } [data-dark="1"] .ps-band-tag { color: rgba(255,255,255,0.85); background: var(--ink); border-color: rgba(255,255,255,0.35); } .ps-card { position: absolute; left: 0; height: calc(var(--h) * var(--band-h) * 1vh); width: calc(var(--h) * var(--band-h) * 1vh * var(--ar)); top: calc((var(--band-top) + (1 - var(--h)) * var(--band-h) * var(--pos)) * 1vh); background-color: var(--paper-2); background-size: cover; background-position: center; overflow: hidden; will-change: transform; transform: translate3d(100vw, 0, 0); /* start off-screen until rAF takes over */ } /* placeholder fill — matches the gallery .frame look (b&w film print) */ .ps-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(140% 100% at 50% 35%, rgba(255,255,255,0.06), transparent 60%), linear-gradient(180deg, #6e6e6c 0%, #3a3a38 55%, #1e1e1c 100%); } .ps-card.is-color::before { background: radial-gradient(140% 100% at 30% 25%, rgba(255,210,160,0.28), transparent 60%), linear-gradient(180deg, #8a6d4a 0%, #5b3a2a 55%, #2c1a14 100%); } /* hide placeholder fill once a real image is set */ .ps-card[style*="background-image"]::before { content: none; } .ps-label { position: absolute; left: 8px; bottom: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); background: rgba(0,0,0,0.32); padding: 2px 6px; border-radius: 2px; } .ps-card[style*="background-image"] .ps-label { display: none; } @keyframes ps-drift { from { transform: translate3d(105vw, 0, 0); } to { transform: translate3d(calc(-100% - 8vw), 0, 0); } } @media (prefers-reduced-motion: reduce) { .ps-card { transform: translate3d(45vw, 0, 0) !important; } } @media (max-width: 820px) { .photostream { opacity: 0.6; } } /* ── chrome (top header) ────────────────────────────────────────────────── */ .chrome { position: sticky; top: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 24px; padding: 26px var(--pad-x) 20px; background: color-mix(in oklab, var(--paper) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10; font-family: var(--body); font-size: 15px; color: var(--ink-2); } .chrome .wm a { color: var(--ink); font-family: var(--display); font-style: italic; font-size: 22px; line-height: 1; letter-spacing: 0; } .chrome .nav { justify-self: end; display: flex; gap: 22px; font-family: var(--display); font-style: italic; font-size: 17px; } .chrome .nav a { color: var(--ink-3); position: relative; padding: 2px 0; transition: color .15s; } .chrome .nav a:hover { color: var(--ink); } .chrome .nav a[aria-current="page"] { color: var(--ink); } .chrome .nav { position: relative; } .nav-indicator { position: absolute; bottom: -2px; left: 0; height: 1px; background: var(--ink-3); transform-origin: center; pointer-events: none; } @keyframes nav-underline-in { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes nav-underline-out { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* ── footer ─────────────────────────────────────────────────────────────── */ .footer { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 24px; padding: 18px var(--pad-x) 22px; margin-top: clamp(80px, 12vw, 160px); font-family: var(--body); font-style: italic; font-size: 14px; color: var(--ink-3); border-top: var(--hair) solid var(--rule); } /* ── pages ──────────────────────────────────────────────────────────────── */ .page { padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) * 1.2); animation: fadeUp var(--enter); } @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* folio (page header) — just the section name, big italic */ .folio { margin-bottom: clamp(48px, 7vw, 96px); } .folio h2 { margin: 0; font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(48px, 7vw, 96px); line-height: 1; letter-spacing: -0.01em; color: var(--ink); } /* type primitives */ .kicker { font-family: var(--body); font-style: italic; font-size: 13px; color: var(--ink-3); } .lede { font-family: var(--display); font-style: italic; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.3; color: var(--ink); max-width: 30ch; margin: 0; } .prose { font-size: 16px; line-height: 1.7; max-width: 58ch; color: var(--ink); } .prose p { margin: 0 0 1em; } .prose em { font-family: var(--display); font-style: italic; font-weight: 400; } .prose a { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; color: var(--accent); padding-bottom: 1px; } .rule { border: 0; border-top: var(--hair) solid var(--rule); margin: 0; } /* ── INDEX (home) ───────────────────────────────────────────────────────── */ .index-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 120px); align-items: end; min-height: 82vh; padding-top: clamp(16px, 3vw, 32px); padding-bottom: clamp(32px, 4vw, 56px); } .index-hero .wordmark { font-family: 'Cormorant Garamond', 'Times New Roman', serif; font-size: clamp(56px, 9vw, 150px); line-height: 0.86; letter-spacing: -0.035em; margin: 0; font-weight: 300; } .index-hero .wordmark .row { display: block; } .index-hero .wordmark .it { font-style: italic; } .index-hero .statement { display: flex; flex-direction: column; gap: 18px; padding-bottom: 10px; } .hero-lede { font-family: 'Lora', 'Times New Roman', serif; font-weight: 400; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 36ch; letter-spacing: 0; } /* typewriter cycle in hero statement */ .tw { display: inline-grid; vertical-align: baseline; } .tw-meas { visibility: hidden; white-space: nowrap; grid-area: 1 / 1; font-style: italic; pointer-events: none; } .tw-word { grid-area: 1 / 1; white-space: nowrap; justify-self: start; font-style: italic; color: var(--ink); } .tw-caret { display: inline-block; width: 1px; height: 0.95em; vertical-align: -0.12em; margin: 0 1px; background: currentColor; animation: tw-blink 1.05s steps(2, end) infinite; } .tw-trail { font-style: italic; } @keyframes tw-blink { 50% { opacity: 0; } } /* numbered index — quiet, museum-y */ .index-toc { border-top: var(--hair) solid var(--rule); margin-top: clamp(24px, 4vw, 48px); } .toc-row { display: grid; grid-template-columns: 80px 1fr auto; align-items: baseline; gap: clamp(16px, 3vw, 40px); padding: 16px 0; border-bottom: var(--hair) solid var(--rule); color: var(--ink); transition: color .2s, padding .2s; } .toc-row .num { font-family: var(--body); font-style: italic; font-size: 13px; color: var(--ink-3); } .toc-row .title { font-family: var(--display); font-size: clamp(20px, 2.4vw, 30px); font-style: italic; line-height: 1; } .toc-row .meta { font-family: var(--body); font-style: italic; font-size: 13px; color: var(--ink-3); } .toc-row:hover { padding-left: 12px; } .toc-row:hover .title { color: var(--ink); } /* ── ABOUT ──────────────────────────────────────────────────────────────── */ .about-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.8fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .about-grid .prose { max-width: 56ch; } .about-grid h3 { font-family: var(--body); font-style: italic; font-size: 13px; font-weight: 400; color: var(--ink-3); margin: 36px 0 12px; } .about-grid ul.tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--display); font-style: italic; font-size: 18px; color: var(--ink-2); } .about-grid ul.tags li::after { content: "·"; margin-left: 16px; color: var(--ink-4); } .about-grid ul.tags li:last-child::after { content: ""; } /* ── CV ─────────────────────────────────────────────────────────────────── */ .cv-list { display: flex; flex-direction: column; } .cv-entry { display: grid; grid-template-columns: 120px 1fr; gap: clamp(24px, 4vw, 64px); padding: clamp(28px, 4vw, 48px) 0; border-top: var(--hair) solid var(--rule); } .cv-entry:last-child { border-bottom: var(--hair) solid var(--rule); } .cv-entry .when { font-family: var(--body); font-style: italic; font-size: 13px; color: var(--ink-3); padding-top: 6px; } .cv-entry .role { font-family: var(--display); font-size: clamp(26px, 3.2vw, 38px); font-style: italic; line-height: 1.05; margin: 0 0 4px; font-weight: 400; } .cv-entry .place { font-family: var(--display); font-size: 17px; color: var(--ink-2); margin-bottom: 16px; } .cv-entry .place .stack { color: var(--ink-3); margin-left: 12px; font-family: var(--body); font-style: italic; font-size: 13px; } .cv-entry .notes { list-style: none; margin: 0; padding: 0; max-width: 62ch; font-size: 15.5px; line-height: 1.6; } .cv-entry .notes li { padding: 4px 0 4px 22px; position: relative; } .cv-entry .notes li::before { content: "—"; position: absolute; left: 0; top: 4px; color: var(--ink-3); } .cv-aux { display: grid; grid-template-columns: 120px 1fr; gap: clamp(24px, 4vw, 64px); padding: clamp(20px, 3vw, 28px) 0; border-top: var(--hair) solid var(--rule); } .cv-aux .when { font-family: var(--body); font-style: italic; font-size: 13px; color: var(--ink-3); } .cv-aux dl { margin: 0; display: grid; grid-template-columns: 180px 1fr; gap: 8px 24px; } .cv-aux dt { font-family: var(--body); font-style: italic; font-size: 13px; color: var(--ink-3); } .cv-aux dd { margin: 0; font-family: var(--display); font-style: italic; font-size: 17px; } /* ── PHOTOGRAPHS ────────────────────────────────────────────────────────── */ .gallery-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; padding-bottom: clamp(36px, 5vw, 64px); } .gallery-intro .right { justify-self: end; text-align: right; font-family: var(--body); font-style: italic; font-size: 13px; color: var(--ink-3); display: flex; flex-direction: column; gap: 4px; } .gallery-intro .right b { font-weight: 400; color: var(--ink-2); } /* film placeholder — quiet, photographic, neutral grey */ .frame { position: relative; background: var(--paper-2); overflow: hidden; cursor: none; display: block; } .frame::before { content: ""; position: absolute; inset: 0; background: radial-gradient(140% 100% at 50% 35%, rgba(255,255,255,0.04), transparent 60%), linear-gradient(180deg, #6e6e6c 0%, #3a3a38 55%, #1e1e1c 100%); } [data-dark="1"] .frame::before { background: radial-gradient(140% 100% at 50% 35%, rgba(255,255,255,0.05), transparent 60%), linear-gradient(180deg, #2a2a28 0%, #161614 55%, #080807 100%); } .frame::after { /* faint film grain */ content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 28% 36%, rgba(255,255,255,.05), transparent 55%), radial-gradient(circle at 72% 70%, rgba(0,0,0,.12), transparent 55%); mix-blend-mode: overlay; pointer-events: none; } .frame:hover { /* no transform — galleries don't bounce */ } /* salon hang */ .salon { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 36px; gap: clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px); } /* sheet (uniform) */ .sheet { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px); } .sheet-cell { display: flex; flex-direction: column; gap: 10px; } .sheet-frame { aspect-ratio: 3/4; } .sheet-frame.wide { aspect-ratio: 4/3; } /* small caption used in sheet mode */ .caption { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; font-family: var(--body); font-style: italic; font-size: 12px; color: var(--ink-3); } .cap-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cap-title { font-family: var(--display); font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* numbered index */ .gx-index { border-top: var(--hair) solid var(--rule); } .gx-row { display: grid; grid-template-columns: 60px 100px 1fr auto; gap: clamp(16px, 3vw, 40px); align-items: center; padding: 14px 0; border-bottom: var(--hair) solid var(--rule); transition: padding .2s; } .gx-row:hover { padding-left: 12px; } .gx-row .num { font-family: var(--body); font-style: italic; font-size: 13px; color: var(--ink-3); } .gx-row .thumb { width: 100px; aspect-ratio: 4/3; position: relative; background: var(--paper-2); overflow: hidden; } .gx-row .thumb::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #6e6e6c, #1e1e1c); } .gx-row .name { font-family: var(--display); font-style: italic; font-size: clamp(18px, 2.2vw, 24px); color: var(--ink); } .gx-row .meta { font-family: var(--body); font-style: italic; font-size: 13px; color: var(--ink-3); text-align: right; } /* ── MOVING IMAGE ───────────────────────────────────────────────────────── */ .film-hero { position: relative; aspect-ratio: 16/9; background: var(--paper-2); margin-bottom: clamp(32px, 5vw, 64px); overflow: hidden; cursor: none; } .film-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(170deg, #4a4a48 0%, #1a1a18 70%, #0a0a08 100%); } .film-hero .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; border: var(--hair) solid rgba(255,255,255,0.45); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.78); font-family: var(--display); font-style: italic; font-size: 22px; letter-spacing: 0.04em; transition: transform .25s, border-color .25s; z-index: 1; } .film-hero:hover .play { transform: translate(-50%, -50%) scale(1.05); border-color: rgba(255,255,255,0.85); } .film-hero .caption { position: absolute; bottom: 16px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--body); font-style: italic; font-size: 13px; color: rgba(255,255,255,0.52); z-index: 1; } .film-list { border-top: var(--hair) solid var(--rule); } .film-row { display: grid; grid-template-columns: 60px 1fr auto auto; align-items: baseline; gap: clamp(16px, 3vw, 40px); padding: 16px 0; border-bottom: var(--hair) solid var(--rule); } .film-row .num { font-family: var(--body); font-style: italic; font-size: 13px; color: var(--ink-3); } .film-row .title { font-family: var(--display); font-style: italic; font-size: clamp(20px, 2.2vw, 26px); color: var(--ink); } .film-row .runtime, .film-row .yr { font-family: var(--body); font-style: italic; font-size: 13px; color: var(--ink-3); } /* ── WRITING ────────────────────────────────────────────────────────────── */ .essay-list { border-top: var(--hair) solid var(--rule); } .essay-row { display: grid; grid-template-columns: 80px 1fr auto; align-items: baseline; gap: clamp(16px, 3vw, 40px); padding: 20px 0; border-bottom: var(--hair) solid var(--rule); transition: padding .2s; } .essay-row:hover { padding-left: 12px; } .essay-row .date { font-family: var(--body); font-style: italic; font-size: 13px; color: var(--ink-3); } .essay-row .title { font-family: var(--display); font-style: italic; font-size: clamp(20px, 2.4vw, 28px); color: var(--ink); } .essay-row .topic { font-family: var(--body); font-style: italic; font-size: 13px; color: var(--ink-3); } /* ── READING ────────────────────────────────────────────────────────────── */ .shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 36px); border-top: var(--hair) solid var(--rule); padding-top: clamp(20px, 3vw, 32px); } .book { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-bottom: var(--hair) solid var(--rule); } .book .when { font-family: var(--body); font-style: italic; font-size: 13px; color: var(--ink-3); } .book .title { font-family: var(--display); font-style: italic; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.15; } .book .author { font-family: var(--display); font-size: 15px; color: var(--ink-2); } .book .note { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; max-width: 38ch; } .book .now { display: inline-flex; align-items: center; gap: 8px; font-family: var(--body); font-style: italic; font-size: 13px; color: var(--accent); margin-bottom: 4px; } .book .now i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } } .section-label { font-family: var(--body); font-style: italic; font-size: 13px; color: var(--ink-3); margin: 0 0 12px; font-weight: 400; } /* ── CONTACT ────────────────────────────────────────────────────────────── */ .contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 120px); align-items: start; padding-top: clamp(24px, 4vw, 56px); } .contact .stack { display: flex; flex-direction: column; gap: 6px; } .contact .stack a { font-family: var(--display); font-style: italic; font-size: clamp(34px, 5vw, 64px); line-height: 1.05; color: var(--ink); display: inline-block; width: max-content; position: relative; font-weight: 400; } .contact .stack a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--ink-3); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); } .contact .stack a:hover::after { transform: scaleX(1); } .contact .right { font-family: var(--body); font-size: 15px; color: var(--ink-2); line-height: 1.65; } .contact .right p { margin: 0 0 1em; max-width: 36ch; } .contact .right b { color: var(--ink); font-weight: 400; font-style: italic; font-family: var(--display); font-size: 17px; } /* obfuscated email — visual separators are faded so the address still reads */ .email-sep { color: var(--ink-3); font-style: italic; padding: 0 0.05em; } /* ── custom cursor ──────────────────────────────────────────────────────── */ .cursor { position: fixed; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width .25s cubic-bezier(.2,.7,.2,1), height .25s cubic-bezier(.2,.7,.2,1), background .2s, opacity .2s; mix-blend-mode: difference; filter: invert(1); } .cursor.hover { width: 16px; height: 16px; } .cursor.over-photo { width: 88px; height: 88px; background: var(--ink); } .cursor .lbl { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 12px; font-family: var(--body); font-style: italic; font-size: 12px; color: var(--ink); opacity: 0; transition: opacity .25s; white-space: nowrap; text-align: center; pointer-events: none; } .cursor.over-photo .lbl { opacity: 1; } @media (hover: none) { .cursor { display: none; } .frame, .film-hero { cursor: pointer; } } /* ── responsive ────────────────────────────────────────────────────────── */ @media (max-width: 820px) { .chrome { grid-template-columns: 1fr auto; } .chrome .nav { gap: 14px; } .index-hero { grid-template-columns: 1fr; } .about-grid, .gallery-intro, .contact { grid-template-columns: 1fr; min-height: 0; } .cv-entry, .cv-aux { grid-template-columns: 1fr; } .cv-aux dl { grid-template-columns: 1fr; } .salon { grid-template-columns: repeat(6, 1fr); } .sheet { grid-template-columns: repeat(2, 1fr); } .gx-row { grid-template-columns: 40px 60px 1fr auto; } .footer { grid-template-columns: 1fr; gap: 6px; } }