/* BrutMOD — Button hover: the shell disappears; label explodes x4 in neon. Keep .btn base styles; load this file LAST in . */ .btn.button-raise { position: relative; overflow: visible; /* allow the big label to spill out */ text-decoration: none; outline-offset: 2px; } /* inner span that grows */ .btn.button-raise .btn-grow { display: inline-block; line-height: 1; white-space: nowrap; transform-origin: left center; transition: transform 90ms linear, color 60ms linear, background-color 60ms linear; will-change: transform, color, background-color; } /* HOVER: shell goes white + border invisible */ .btn.button-raise:hover { background-color: #fff; /* match page background */ border-color: transparent !important; /* keep border width but hide it */ box-shadow: none; } /* FOCUS (keyboard): same shell but keep a visible outline for a11y */ .btn.button-raise:focus-visible { background-color: #fff; border-color: transparent !important; box-shadow: none; outline: 2px solid #000; } /* label becomes huge + neon in both states */ .btn.button-raise:hover .btn-grow, .btn.button-raise:focus-visible .btn-grow { transform: scale(4); color: var(--accent, #39ff88); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .btn.button-raise .btn-grow { transition: none; } .btn.button-raise:hover .btn-grow, .btn.button-raise:focus-visible .btn-grow { transform: none; } } /* Footer CTA variant: align text right, grow from the right edge */ .btn.button-raise.grow-right { text-align: right; } .btn.button-raise.grow-right .btn-grow { transform-origin: right center; /* explode leftwards on hover/focus */ } /* --- Global link styling (exclude .btn) --- */ a:not(.btn) { font-weight: 700; /* bold */ text-decoration: none; /* no underline by default */ color: inherit; /* keep current text color */ -webkit-tap-highlight-color: transparent; } a:not(.btn):hover, a:not(.btn):focus-visible { color: var(--accent, #39ff88); /* neon on hover/focus */ text-decoration: none; /* still no underline */ outline-offset: 2px; } /* Active page indicator: Add class="is-active" to the current page link OR set aria-current="page" on that */ a:not(.btn).is-active, a:not(.btn)[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent, #39ff88); text-decoration-thickness: 3px; text-underline-offset: 3px; } /* --- Strong override: no underline on non-button links by default --- */ a:not(.btn), a:not(.btn):link, a:not(.btn):visited { text-decoration: none !important; border-bottom: 0 !important; /* in case underline was faked as a border */ } /* Hover/focus: neon, still no underline */ a:not(.btn):hover, a:not(.btn):focus-visible { color: var(--accent, #39ff88); text-decoration: none !important; border-bottom: 0 !important; } /* Active/current page indicator (manual) */ a:not(.btn).is-active, a:not(.btn)[aria-current="page"] { text-decoration: underline !important; text-decoration-color: var(--accent, #39ff88); text-decoration-thickness: 3px; text-underline-offset: 3px; } /* ===== Typography additions (safe + reversible) ===== */ :root{ --sans: system-ui,-apple-system,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif; --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; } /* global fallback — only sets stacks if the base CSS didn't already */ body{ font-family: var(--sans); } /* mono label utility (for tags like “Studio”) */ .type-mono{ font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: .85rem; /* compact, assertive label */ line-height: 1; } /* grid-flirting scales for headings (no layout reflow spikes) */ h1.mega{ font-size: clamp(4.75rem, 7.2vw, 6.25rem); line-height: .9; } h2.submega, h3.submega{ font-size: clamp(2.5rem, 3.4vw, 2.45rem); line-height: 1; letter-spacing: .005em; } /* — Typographic scale v2 (bigger + clearer spacing) — */ .type-mono{ display: inline-block; /* allow margins to take effect */ margin-bottom: 1rem; /* space between label and H1 */ } @media (min-width: 1200px){ h1.mega{ font-size: 128px; /* big, confident */ line-height: 0.84; letter-spacing: -0.018em; } h2.submega, h3.submega{ font-size: 44px; /* clearly below the hero */ line-height: 1.02; } } @media (min-width: 1600px){ h1.mega{ font-size: 160px; /* grid-flirting at ultra-wide */ line-height: 0.82; } h2.submega, h3.submega{ font-size: 48px; } } /* --- Hero scale override: make H1 decisively larger than subheads --- */ h1.mega{ font-size: clamp(4rem, 11vw, 10rem); /* bigger min, bigger pref, bigger max */ line-height: 0.84; letter-spacing: -0.015em; } /* Tame subheads slightly so the contrast is obvious */ h2.submega, h3.submega{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1; } /* --- Pixel-based takeover: hero dominates subheads on large viewports --- */ @media (min-width: 1200px){ h1.mega{ font-size: 128px; /* big, confident */ line-height: 0.84; letter-spacing: -0.018em; } h2.submega, h3.submega{ font-size: 44px; /* clearly below the hero */ line-height: 1.02; } } @media (min-width: 1600px){ h1.mega{ font-size: 160px; /* grid-flirting at ultra-wide */ line-height: 0.82; } h2.submega, h3.submega{ font-size: 48px; } } /* --- Pixel-based takeover: hero dominates subheads on large viewports --- */ @media (min-width: 1200px){ h1.mega{ font-size: 128px; /* big, confident */ line-height: 0.84; letter-spacing: -0.018em; } h2.submega, h3.submega{ font-size: 44px; /* clearly below the hero */ line-height: 1.02; } } @media (min-width: 1600px){ h1.mega{ font-size: 160px; /* grid-flirting at ultra-wide */ line-height: 0.82; } h2.submega, h3.submega{ font-size: 48px; } } /* === FINAL OVERRIDE: hero dominates at every viewport === */ h1.mega{ font-size: clamp(64px, 14vw, 192px); /* big on phones, gigantic on desktop */ line-height: 0.82; letter-spacing: -0.02em; margin-top: 0.25rem; /* tiny lift so it breathes under STUDIO */ } h2.submega, h3.submega{ font-size: clamp(28px, 4.5vw, 56px); /* clearly smaller than hero at all sizes */ line-height: 1; letter-spacing: 0; } /* === Nuclear override: hero is decisively HUGE on all screens === */ :root{ --hero-min: 96px; /* phone floor */ --hero-pref: 18vw; /* scales hard with viewport */ --hero-max: 288px; /* desktop ceiling (~2× what you see now) */ } h1.mega{ font-size: clamp(var(--hero-min), var(--hero-pref), var(--hero-max)) !important; line-height: 0.80 !important; letter-spacing: -0.02em !important; margin-top: 0.25rem !important; } /* keep subheads clearly below the hero */ h2.submega, h3.submega{ font-size: clamp(24px, 3.5vw, 48px) !important; line-height: 1 !important; } /* Phone/touch cap: keep the dramatic feel without blowing off-screen */ @media (max-width: 640px), (hover: none) { .btn.button-raise:hover .btn-grow, .btn.button-raise:focus-visible .btn-grow, .btn.button-raise:active .btn-grow { transform: scale(2.5); /* was 4; adjust here if you want more/less */ } /* keep the “invisible shell” behavior on interaction */ .btn.button-raise:hover, .btn.button-raise:focus-visible, .btn.button-raise:active { background-color: #fff; border-color: transparent !important; box-shadow: none; } } /* Mobile/touch trigger: when .triggered is present, show the big label */ @media (hover: none), (pointer: coarse) { .btn.button-raise.triggered { background-color: #fff; border-color: transparent !important; box-shadow: none; } .btn.button-raise.triggered .btn-grow { transform: scale(2.5); /* capped for phone */ color: var(--accent, #39ff88); } } /* Tiny global reduction: hero size ≈ previous - 6px at all viewports */ h1.mega{ font-size: calc(clamp(64px, 14vw, 192px) - 6px) !important; } /* ===== Utilities: extend top/bottom rules to full viewport width ===== */ /* Apply to any bordered box that should project its top/bottom border all the way to the browser edges, without changing layout. */ .bleed-x { position: relative; } .bleed-x::before, .bleed-x::after{ content: ""; position: absolute; left: 50%; width: 100vw; /* full viewport width */ transform: translateX(-50%); height: 1px; background: #000; pointer-events: none; } /* Align with the box’s own border (assumes 1px borders on boxes) */ .bleed-x::before{ top: -1px; } .bleed-x::after { bottom: -1px; } /* Small neon grid code tag */ .grid-code{ position: absolute; /* anchors to the hero container */ top: 8px; right: 12px; padding: 0 .4rem; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 12px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, #39ff88); background: #fff; /* sits cleanly over rules */ } /* Slightly smaller on phones so it doesn’t crowd the H1 */ @media (max-width: 640px){ .grid-code{ font-size: 11px; top: 6px; right: 10px; } } /* Reposition the code tag so it doesn't collide with the STUDIO label */ .grid-code{ top: auto !important; bottom: 8px; right: 12px; z-index: 2; /* sits above the bleed lines */ } @media (max-width: 640px){ .grid-code{ bottom: 6px; right: 10px; } } /* Label wrapper lets us position the code relative to the STUDIO badge */ .label-wrap{ position: relative; display: inline-block; } /* Place the grid code to the RIGHT of the label, and ABOVE the hero border */ .label-wrap .grid-code{ position: absolute; left: calc(100% + 10px); /* sit next to the label */ top: -28px; /* pull above the hero’s top padding/border */ padding: 0 .35rem; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, #39ff88); background: transparent; /* outside the box – no white chip */ pointer-events: none; /* purely decorative */ z-index: 3; } @media (max-width: 640px){ .label-wrap .grid-code{ top: -24px; font-size: 11px; } } /* keep the STUDIO label + code on one line, no hyphen breaks */ .label-wrap{ white-space: nowrap; } .label-wrap .grid-code{ white-space: nowrap; overflow-wrap: normal; word-break: keep-all; hyphens: none; display: inline-block; } /* Sit the code ON the top bleed line (outside the box) */ .grid-code-topline{ position: absolute !important; top: -1px; /* same Y as the .bleed-x top rule */ right: 12px; transform: translateY(-50%); /* center the chip over the 1px rule */ padding: 0 .35rem; line-height: 1; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, #39ff88); background: #fff; /* keeps the text readable over the line */ white-space: nowrap; z-index: 4; } @media (max-width: 640px){ .grid-code-topline{ font-size: 11px; right: 10px; } } /* Footer backlink — understated until hovered */ .sep{ padding: 0 .5rem; } .backlink{ font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 0.95rem; font-weight: 500; /* lighter than global bold links */ opacity: 0.7; text-decoration: none !important; color: inherit; } .backlink:hover, .backlink:focus-visible{ opacity: 1; color: var(--accent, #39ff88); /* neon on hover, consistent with nav */ outline-offset: 2px; } /* Hero flow spacing (applied only when container has .hero-flow) */ .hero-flow .type-mono{ margin-bottom: clamp(10px, 1.5vw, 18px); } .hero-flow .mega{ margin-bottom: clamp(14px, 2.6vw, 32px); /* space below H1 */ } .hero-flow p{ margin-top: clamp(6px, 1vw, 12px); margin-bottom: clamp(16px, 2.8vw, 36px); /* space before the CTA */ max-width: 60ch; /* keep copy line length sane */ } .hero-flow .btn{ margin-top: clamp(12px, 3vw, 40px); /* extra breathing above button */ } /* ===== Footer layout ===== */ .site-footer{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; /* lets it wrap if space is tight */ } .footer-meta{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .footer-cta{ margin-left: auto; } /* Mobile: stack blocks vertically (meta → backlink → button) */ @media (max-width: 640px){ .site-footer{ flex-direction: column; align-items: flex-start; gap: .4rem; } .footer-meta{ flex-direction: column; align-items: flex-start; gap: .25rem; } .sep{ display: none; } /* no middle dot on mobile */ .backlink{ display: block; } /* its own line */ .footer-cta{ align-self: stretch; } /* let button align to the right */ .footer-cta .btn{ width: 100%; text-align: right; /* works with .grow-right */ } } /* Footer box must always render as a bordered card */ .site-footer{ border: 1px solid #000; /* bring back the frame */ background: #fff; /* avoid bleed-line show-through */ padding: clamp(12px, 2.2vw, 18px) clamp(14px, 2.6vw, 24px); box-sizing: border-box; width: 100%; } /* Desktop layout remains row-based; mobile stacks (from earlier rules) */ @media (max-width: 640px){ .footer-cta{ width: 100%; display: flex; justify-content: flex-end; } .footer-cta .btn{ width: auto; } /* avoid edge collision inside frame */ } /* Footer box: match other cards (thicker border) + vertical gap above */ .site-footer{ border: 2px solid #000; /* thicker, like other boxes */ background: #fff; /* hide any bleed behind */ padding: clamp(12px, 2.2vw, 18px) clamp(14px, 2.6vw, 24px); margin-top: clamp(20px, 3.2vw, 44px); /* create clear gap to section above */ box-sizing: border-box; width: 100%; } /* Keep any oversized label contained by the footer frame */ .site-footer{ position: relative; overflow: hidden; /* clip exploding text at the border */ } /* Always push CTA to the right edge (desktop + mobile) */ .footer-cta{ display: flex; justify-content: flex-end; align-items: center; width: 100%; margin-left: auto; /* desktop safety */ } /* CTA text grows from the right and stays right-aligned */ .footer-cta .btn{ text-align: right; } /* Anchor CTA in the footer's bottom-right; clip overflow from “explosion” */ .site-footer{ position: relative; overflow: hidden; /* ensures enlarged text stays inside the box */ } .site-footer .btn-cta{ position: absolute; right: clamp(14px, 2.6vw, 24px); bottom: clamp(12px, 2.2vw, 18px); text-align: right; } /* Mobile: return to normal flow but keep it right-aligned */ @media (max-width: 640px){ .site-footer .btn-cta{ position: static; display: inline-block; margin-left: auto; /* push to the right within the footer */ } } /* ==== Footer layout reset (undo absolute pin, make stacking reliable) ==== */ .site-footer{ position: relative; overflow: hidden; /* clip the big label */ display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* meta (© + backlink) */ .footer-meta{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } /* CTA row */ .footer-cta{ display: flex; justify-content: flex-end; align-items: center; width: 100%; } /* Button itself — NEVER absolute; anchor it right */ .site-footer .btn-cta{ position: static !important; /* kill earlier absolute rule */ margin-left: auto; /* push right */ text-align: right; } /* Mobile: stack vertically (© → backlink → button) */ @media (max-width: 640px){ .site-footer{ flex-direction: column; align-items: stretch; gap: .4rem; } .footer-meta{ flex-direction: column; align-items: flex-start; gap: .25rem; } .sep{ display: none; } /* no dot on mobile */ .footer-cta{ width: 100%; justify-content: flex-end; /* keep button to the right */ } .site-footer .btn-cta{ width: auto; /* natural width, right-aligned */ } } /* Let the CTA actually reach the right edge of the footer box */ .site-footer{ padding-right: 0 !important; /* remove the right padding */ } /* Push the button to the very edge (account for the 2px footer frame) */ .site-footer .btn-cta{ margin-left: auto; /* stay on the right */ margin-right: -2px; /* overlap footer border width */ text-align: right; } /* Mobile keeps stacking but still hugs the right edge */ @media (max-width: 640px){ .footer-cta{ width: 100%; display: flex; justify-content: flex-end; } .site-footer .btn-cta{ margin-right: -2px; } } /* FINAL mobile alignment — CTA pinned to the right edge, always */ @media (max-width: 640px){ .site-footer{ padding-right: 0 !important; /* let the button reach the wall */ overflow: hidden; /* clip the big label inside */ } .site-footer .footer-cta{ display: grid !important; /* robust, wrapper-agnostic */ justify-items: end !important; /* push content to the right */ width: 100% !important; } .site-footer .footer-cta .btn-cta{ display: inline-block !important; margin-right: -2px !important; /* kiss the inner border */ text-align: right !important; /* label grows leftward */ } } /* Mobile/touch override: footer CTA expands to the RIGHT (desktop unchanged) */ @media (max-width: 640px), (hover: none) { /* put the CTA on the left so it can grow rightward */ .site-footer .footer-cta { justify-content: flex-start !important; } .site-footer .btn-cta { margin-left: 0 !important; text-align: left !important; /* label aligns left */ } /* flip the growth direction specifically for the footer CTA */ .site-footer .btn-cta .btn-grow { transform-origin: left center !important; /* expand to the right */ } /* keep the 2.5x cap you liked on phones (already present, here for safety) */ .btn.button-raise.triggered .btn-grow { transform: scale(2.5); } } /* Bleed lines should match the thicker 2px borders */ .bleed-x::before, .bleed-x::after{ height: 2px !important; } .bleed-x::before{ top: -2px !important; } /* align to the outer edge */ .bleed-x::after { bottom: -2px !important; } /* Desktop/tablet: right gap for CTA inside the footer box */ @media (min-width: 641px){ .site-footer{ padding-right: clamp(14px, 2.6vw, 24px) !important; /* restore right padding */ } .site-footer .footer-cta{ justify-content: flex-end !important; /* push CTA to the right side */ } .site-footer .btn-cta{ margin-right: 0 !important; /* remove previous -2px overlap */ text-align: right; } } /* Mobile/touch stays as we set: button grows to the RIGHT */ @media (max-width: 640px), (hover: none){ .site-footer .footer-cta{ justify-content: flex-start !important; } .site-footer .btn-cta{ margin-left: 0 !important; text-align: left !important; } .site-footer .btn-cta .btn-grow{ transform-origin: left center !important; } } /* Make bleed rules render on top of adjacent boxes (footer included) */ .bleed-x{ position: relative; /* establish stacking context */ z-index: 1; /* sit above normal flow siblings */ } .bleed-x::before, .bleed-x::after{ content: ""; position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); height: 2px !important; /* match 2px frames */ background: #000; pointer-events: none; z-index: 5; /* draw OVER later siblings like the footer */ } .bleed-x::before{ top: -2px !important; } .bleed-x::after { bottom: -2px !important; } /* Ensure bleed rules can escape the card and sit above the footer */ .bleed-x{ position: relative; overflow: visible !important; /* was likely clipping the ::after line */ z-index: 2; /* paint above neighbors */ } .bleed-x::before, .bleed-x::after{ content: ""; position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); height: 2px; /* match 2px frames */ background: #000; pointer-events: none; z-index: 5; /* ensure it renders over the gap */ } .bleed-x::before{ top: -2px; } .bleed-x::after { bottom: -2px; } /* Full-width divider that ignores container width and clipping */ .bleed-divider{ position: relative; height: 0; border-top: 2px solid #000; width: 100vw; /* span the full viewport */ left: 50%; transform: translateX(-50%); /* center across viewport */ pointer-events: none; z-index: 10; /* render above neighboring boxes */ margin: 0; /* we’ll place it exactly in markup */ } /* The bottom bleed from the section above is being clipped/painted under the footer. Make sure the section above can *show* its ::after line and sits above the footer. */ .card.bleed-x, .row.bleed-x { position: relative; /* needed so z-index applies */ overflow: visible !important; /* prevent clipping of ::after at -2px */ z-index: 2; /* paint above the footer box */ } /* Footer should sit below that bleed in the stacking order */ .site-footer { position: relative; z-index: 1; } /* Ensure the bleed rules are 2px and aligned to box edges */ .bleed-x::before, .bleed-x::after { height: 2px; background: #000; left: 50%; width: 100vw; transform: translateX(-50%); position: absolute; content: ""; pointer-events: none; } .bleed-x::before { top: -2px; } .bleed-x::after { bottom: -2px; } /* Don't clip lines drawn by the footer button */ .footer-inner{ overflow: visible !important; } /* was hidden earlier */ .btn-cta{ overflow: hidden; } /* still clip exploding label */ /* === Button bleed utility: draw rules at the button's top/bottom === */ .btn-bleed-x{ position: relative; z-index: 1; /* button above its own lines */ background: #fff; /* ensures clean “underlap” */ } .btn-bleed-x::before, .btn-bleed-x::after{ content:""; position:absolute; left:50%; width:100vw; /* extend to viewport edges */ transform:translateX(-50%); height:2px; /* match your box borders */ background:#000; pointer-events:none; z-index:0; /* under the button, over the page */ } .btn-bleed-x::before{ top:-2px; } /* align to the button’s top border */ .btn-bleed-x::after { bottom:-2px; }/* align to the bottom border */ /* Don't clip lines drawn by the footer button */ .footer-inner{ overflow: visible !important; } /* was hidden earlier */ .btn-cta{ overflow: hidden; } /* still clip exploding label */ /* === Button bleed utility: draw rules at the button's top/bottom === */ .btn-bleed-x{ position: relative; z-index: 1; /* button above its own lines */ background: #fff; /* ensures clean “underlap” */ } .btn-bleed-x::before, .btn-bleed-x::after{ content:""; position:absolute; left:50%; width:100vw; /* extend to viewport edges */ transform:translateX(-50%); height:2px; /* match your box borders */ background:#000; pointer-events:none; z-index:0; /* under the button, over the page */ } .btn-bleed-x::before{ top:-2px; } /* align to the button’s top border */ .btn-bleed-x::after { bottom:-2px; }/* align to the bottom border */ /* page gutter var to align with other boxes */ :root{ --gutter: clamp(14px, 2.6vw, 24px); } /* target the copyright that sits directly AFTER the footer box */ .site-footer + .copyright{ display: block; width: 100%; box-sizing: border-box; margin-top: 50px; /* gap from the footer */ padding-right: var(--gutter); /* same right inset as cards/buttons */ text-align: right; /* align text to right side */ } /* Inline brand mark sizing/alignment */ .brand-mark{ height: 0.9em; /* match cap-height-ish of the word */ width: auto; margin-left: .4ch; /* small gap from text */ vertical-align: -0.12em; /* nudge down to baseline-align */ } /* If the asset is an SVG and should inherit text color */ .brand .brand-mark { color: currentColor; } /* Optional: cap it on tiny screens */ @media (max-width: 480px){ .brand-mark{ height: 0.8em; } } /* Brand mark ~2× relative to the wordmark */ .brand .brand-mark{ height: 1.8em; /* was ~0.9em → now ~2× */ width: auto; margin-left: .5ch; /* a touch more breathing room */ vertical-align: -0.24em;/* nudge down so it sits on the baseline */ } /* Cap it slightly on tiny screens so it doesn't crowd the bar */ @media (max-width: 480px){ .brand .brand-mark{ height: 1.3em; vertical-align: -0.18em; } } /* Make the wordmark + icon share a vertical center */ .brand{ display: inline-flex; /* keep it inline, but allow centering */ align-items: center; /* vertical centering for text + icon */ gap: .5ch; /* tidy space between BRUTMOD and icon */ } /* Icon: large, but centered rather than baseline-aligned */ .brand .brand-mark{ height: 1.8em; /* ~2× the cap height */ width: auto; margin-left: 0; /* gap handled by .brand */ vertical-align: middle; /* harmless with inline-flex */ align-self: center; /* belt-and-suspenders centering */ transform: translateY(0); /* remove previous nudge, if any */ } /* Slight down-nudge if it looks optically high (tweak px if needed) */ @media (min-width: 641px){ .brand .brand-mark{ transform: translateY(1px); } } /* Keep it from crowding on tiny screens */ @media (max-width: 480px){ .brand .brand-mark{ height: 1.3em; transform: translateY(0); } } /* ===== Work gallery ===== */ .work-section{ margin-top: clamp(24px, 4vw, 56px); } .work-grid{ --gap: clamp(10px, 1.8vw, 22px); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); } /* Card spans: 1-up mobile, 2-up tablet, 3-up desktop */ .work-card{ grid-column: 1 / -1; } @media (min-width: 640px){ .work-card{ grid-column: span 6; } } /* 2 across */ @media (min-width: 1024px){ .work-card{ grid-column: span 4; } } /* 3 across */ /* Brutalist card styling */ .work-card{ border: 2px solid #000; background: #fff; display: flex; flex-direction: column; } /* Clickable area covers the card */ .work-card > a{ display: flex; flex-direction: column; color: inherit; text-decoration: none; } /* Thumb: 4:3 by default; change to 1/1 for squares if you prefer */ .work-thumb{ aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-bottom: 2px solid #000; background: #f2f2f2; /* safe fallback if image missing */ } /* Meta block */ .work-meta{ padding: clamp(10px, 1.6vw, 18px) clamp(12px, 2vw, 22px); } .work-meta h3{ margin: 0 0 .25rem 0; font-weight: 800; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.1; } .work-meta .kicker{ /* small mono tag above/beside titles */ font: 700 .8rem var(--mono, ui-monospace, Menlo, monospace); letter-spacing: .08em; text-transform: uppercase; opacity: .85; } /* Optional: very subtle hover, stays brutal */ .work-card:hover .work-meta h3, .work-card:focus-within .work-meta h3{ color: var(--accent, #39ff88); } /* Keep keyboard focus visible */ .work-card a:focus-visible{ outline: 2px solid #000; outline-offset: 2px; } /* ===== Case page card (matches other boxes) ===== */ .case-card{ position: relative; border: 2px solid #000; /* same thick frame */ background: #fff; margin-top: clamp(20px, 3.2vw, 44px); } /* inner layout + padding like the other sections */ .case-grid{ padding: clamp(16px, 2.5vw, 28px) clamp(18px, 3vw, 36px); display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 2vw, 24px); } /* compact mono meta row */ .case-meta{ grid-column: 1 / -1; font: 700 0.9rem var(--mono, ui-monospace, Menlo, monospace); letter-spacing: .08em; text-transform: uppercase; display: flex; gap: 1.25rem; flex-wrap: wrap; } /* hero image block */ .case-media{ grid-column: 1 / -1; margin: 0; border-top: 2px solid #000; /* inner rule, brutalist */ padding-top: clamp(12px, 1.6vw, 20px); } .case-media img{ width: 100%; height: auto; display: block; } .case-media figcaption{ margin-top: .35rem; font: 600 .85rem var(--mono, ui-monospace, Menlo, monospace); letter-spacing: .06em; opacity: .8; } /* two-column copy on desktop, single column on mobile */ .case-copy{ grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); row-gap: clamp(16px, 2.6vw, 28px); column-gap: clamp(12px, 2vw, 24px); } .case-copy h2.submega{ grid-column: 1 / 5; margin: 0; } .case-copy p{ grid-column: 5 / -1; margin: 0; max-width: 65ch; } @media (max-width: 900px){ .case-copy h2.submega{ grid-column: 1 / -1; } .case-copy p{ grid-column: 1 / -1; } } /* ===== Case meta row ===== */ .case-meta{ grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 2vw, 24px); row-gap: clamp(8px, 1.2vw, 14px); padding-bottom: clamp(12px, 1.6vw, 20px); border-bottom: 2px solid #000; /* rule above the figure */ } .case-meta .meta-item{ grid-column: span 4; /* 3 columns on desktop */ display: grid; grid-auto-rows: min-content; row-gap: 4px; } .case-meta .type-mono{ font: 700 0.85rem var(--mono, ui-monospace, Menlo, monospace); letter-spacing: .08em; text-transform: uppercase; opacity: .85; display: block; } .case-meta .meta-item strong{ font-weight: 800; line-height: 1.1; } /* Mobile: stack to a single column */ @media (max-width: 900px){ .case-meta .meta-item{ grid-column: 1 / -1; } } /* Baseline-align the left H2 and right paragraph in case rows */ .case-copy{ align-items: baseline; /* grid items aim for shared baseline */ } .case-copy h2.submega, .case-copy p{ align-self: baseline; /* each item locks to that baseline */ margin: 0; } /* Tiny optical nudge so the first lines look perfectly level on desktop */ @media (min-width: 900px){ .case-copy h2.submega{ line-height: 0.88; } /* tighter cap height = truer baseline */ .case-copy p{ transform: translateY(2px); } /* lift paragraph baseline ~2px */ } /* Case breadcrumb (subtle, mono, aligns with card grid) */ .case-crumbs{ grid-column: 1 / -1; font: 700 .85rem var(--mono, ui-monospace, Menlo, monospace); letter-spacing: .08em; text-transform: uppercase; margin-bottom: clamp(8px, 1vw, 12px); } .case-crumbs .crumb-back{ text-decoration: none; border-bottom: 2px solid transparent; } .case-crumbs .crumb-back:hover, .case-crumbs .crumb-back:focus-visible{ color: var(--accent, #39ff88); border-bottom-color: var(--accent, #39ff88); outline: none; } /* ===== Services (grid of thick-bordered cards) ===== */ .services-section{ margin-top: clamp(24px, 4vw, 56px); } .services-grid{ --gap: clamp(10px, 1.8vw, 22px); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); } .service-card{ grid-column: 1 / -1; /* 1-up mobile */ border: 2px solid #000; background: #fff; display: flex; flex-direction: column; height: 100%; } @media (min-width: 640px){ .service-card{ grid-column: span 6; } } /* 2 across */ @media (min-width: 1024px){ .service-card{ grid-column: span 4; } } /* 3 across */ .service-body{ padding: clamp(14px, 2.2vw, 22px) clamp(16px, 2.8vw, 28px); display: grid; grid-auto-rows: min-content; row-gap: clamp(8px, 1.4vw, 14px); } .service-body .kicker{ font: 700 .82rem var(--mono, ui-monospace, Menlo, monospace); letter-spacing: .08em; text-transform: uppercase; opacity: .85; } .service-body h3{ margin: 0; font-weight: 800; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.05; } .service-body p{ margin: 0; max-width: 65ch; } .service-list{ margin: 0; padding: 0; list-style: none; display: grid; row-gap: 6px; } .service-list li{ display: grid; grid-template-columns: auto 1fr; column-gap: .6ch; } .service-list li::before{ content: "—"; font-weight: 800; align-self: start; } /* Subtle hover: keep it brutal */ .service-card:hover h3, .service-card:focus-within h3{ color: var(--accent, #39ff88); } /* Focus visibility for accessibility */ .service-card a:focus-visible{ outline: 2px solid #000; outline-offset: 2px; } /* ===== Contact form (BrutMOD) ===== */ .contact-card{ position: relative; border: 2px solid #000; background: #fff; margin-top: clamp(20px, 3.2vw, 44px); } .contact-grid{ padding: clamp(16px, 2.5vw, 28px) clamp(18px, 3vw, 36px); display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 2vw, 24px); } .form-block{ grid-column: 1 / -1; max-width: 900px; } .form-row{ display: grid; grid-template-columns: 1fr 2fr; column-gap: clamp(10px, 1.6vw, 18px); align-items: baseline; } @media (max-width: 720px){ .form-row{ grid-template-columns: 1fr; row-gap: 6px; } } .form-label{ font: 700 .85rem var(--mono, ui-monospace, Menlo, monospace); letter-spacing: .08em; text-transform: uppercase; } .input, .textarea{ width: 100%; border: 2px solid #000; background: #fff; padding: .65rem .75rem; font: inherit; line-height: 1.1; box-sizing: border-box; } .textarea{ min-height: 9rem; resize: vertical; } .input:focus-visible, .textarea:focus-visible{ outline: 2px solid #000; outline-offset: 2px; } .form-actions{ margin-top: clamp(12px, 2.6vw, 24px); display: flex; gap: .75rem; justify-content: flex-start; align-items: center; } .form-hint{ font: 600 .85rem var(--mono, ui-monospace, Menlo, monospace); letter-spacing: .06em; opacity: .8; } .form-error{ display: none; margin-top: .5rem; color: #b00020; font-weight: 700; } .form-error.show{ display: block; } /* keep our send button consistent with site buttons */ .btn .btn-grow{ display:inline-block; line-height:1; white-space:nowrap; transform-origin:left center; }