/* Hallmark · shape: open project index · genre: modern-minimal · theme: custom · job: hire · idea: "Two Ledsak projects lead beside a compact identity" · vibe: "Clear type, open space, visible work"
 * paper: oklch(97.9% 0.001 240) · accent: oklch(27% 0.025 240) · display: Rethink Sans · body: Rethink Sans · hero: identity rail beside two stacked projects · nav: identity rail · footer: name and return link · imagery: authentic product exports on case studies · signature: oversized project titles beside a quiet identity
 * axes: light/grotesk-sans/neutral · posture: Restrained · copy: verbatim · contrast: pending · fold: pending · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, preserved project-specific scope and delivery qualifications instead of adding generic claims */
@import url('./tokens.css');
@import url('./base.css');
@font-face { font-family: 'Rethink Sans'; src: url('./fonts/rethink-sans-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rethink Sans'; src: url('./fonts/rethink-sans-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rethink Sans'; src: url('./fonts/rethink-sans-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
html, body { overflow-x: clip; }
body { font-synthesis: none; }
a { text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
.skip { position: fixed; inset: var(--space-md) auto auto var(--space-md); padding: var(--space-sm) var(--space-md); z-index: var(--z-toast); color: var(--color-accent-ink); background: var(--color-accent); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }
.site-shell { position: relative; width: 100%; max-width: var(--container); min-height: 100svh; margin-inline: auto; }
.identity-rail { position: absolute; inset: 0 auto 0 0; width: var(--rail-width); border-right: var(--rule-hair) solid var(--color-rule); padding: var(--space-xl) var(--gutter); }
.identity { display: inline-block; text-decoration: none; font-size: clamp(18px,1.6vw,24px); line-height: 1.27; letter-spacing: -.03em; white-space: nowrap; }
.identity strong { display: block; font-weight: 500; }
.identity span { display: block; color: var(--color-ink-2); font-size: .84em; letter-spacing: -.02em; margin-top: var(--space-2xs); }
.rail-nav { margin-top: var(--space-2xl); font-size: clamp(18px,1.6vw,24px); }
.rail-nav a { display: block; width: fit-content; min-height: 44px; text-decoration: none; }
.home-main { margin-left: var(--rail-width); padding: var(--home-top) var(--gutter) var(--space-2xl) var(--main-inset); }
.project-entry { padding-bottom: var(--home-divider-gap); }
.project-entry + .project-entry { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--home-project-gap); padding-bottom: var(--space-0); }
.project-title { font-size: var(--text-display); line-height: 1.05; letter-spacing: var(--tracking-display); font-weight: 700; margin: var(--space-0); text-wrap: balance; }
.project-title a { text-decoration: none; }
.project-summary { font-size: clamp(23px,2.9vw,44px); line-height: 1.2; letter-spacing: -.04em; color: var(--color-ink-2); margin-top: var(--space-lg); }
.project-status { font-size: clamp(18px,1.95vw,29px); line-height: 1.35; letter-spacing: -.02em; color: var(--color-muted); margin-top: var(--space-md); }
.read-link { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(20px,2vw,30px); line-height: 1.25; letter-spacing: -.03em; margin-top: var(--home-link-gap); text-decoration: none; }
.site-footer { display: flex; justify-content: space-between; gap: var(--space-lg); padding: var(--space-md) var(--gutter) var(--space-xl); color: var(--color-muted); font-size: clamp(14px,1.2vw,18px); }
.site-footer a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.site-footer span { display: inline-flex; align-items: center; }
@media (hover:hover) and (pointer:fine) { a:hover { text-decoration: underline; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
.home-main { padding-left: 4.8%; padding-bottom: var(--space-0); }
.project-title { line-height: .9; }
.read-link { margin-top: calc(var(--home-link-gap) - var(--space-xs)); }
.project-entry { padding-bottom: calc(var(--home-divider-gap) - var(--space-xs)); }
.site-footer { padding-top: var(--space-0); padding-bottom: var(--space-lg); }
a:active { opacity: .7; }
.project-status { font-variant-numeric: tabular-nums; }
.rail-nav { margin-top: calc(var(--space-2xl) + var(--space-md)); }
.read-link { margin-top: calc(var(--home-link-gap) - var(--space-xs) - var(--space-3xs)); }
.home-main + .site-footer { position: absolute; inset: auto 0 var(--space-xl); padding: var(--space-0) var(--gutter); }
.home-main + .site-footer { bottom: var(--gutter); }
.home-main + .site-footer { bottom: calc(var(--gutter) + var(--space-2xs) + var(--space-3xs)); letter-spacing: -.03em; }
.site-shell { display: grid; grid-template-columns: minmax(190px, var(--rail-width)) minmax(0, 1fr); align-items: start; }
.identity-rail { position: sticky; inset: auto; top: var(--space-0); grid-column: 1; grid-row: 1 / span 2; width: auto; min-height: 100svh; height: 100%; }
.rail-nav { display: grid; gap: var(--space-xs); }
.rail-nav a { display: inline-flex; align-items: center; }
.home-main { grid-column: 2; margin-left: var(--space-0); padding: var(--space-4xl) var(--gutter) var(--space-0) var(--space-2xl); min-width: 0; }
.project-title { line-height: 1; }
.project-entry { padding-bottom: var(--space-2xl); }
.project-entry + .project-entry { padding-top: var(--space-2xl); padding-bottom: var(--space-0); }
.home-main + .site-footer { position: static; inset: auto; grid-column: 2; padding: var(--space-xl) var(--gutter) var(--space-lg) var(--space-2xl); }
.profile-section { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: var(--gap-columns); margin-top: var(--space-4xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); scroll-margin-top: var(--space-xl); }
.profile-section h2 { font-size: clamp(30px,3.2vw,48px); font-weight: 500; letter-spacing: -.03em; line-height: 1.12; }
.profile-copy { font-size: clamp(18px,1.6vw,23px); line-height: 1.65; color: var(--color-ink-2); }
.profile-copy p { max-width: 65ch; }
.profile-copy p + p { margin-top: var(--space-lg); }
.contact-section { margin-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.contact-pending { color: var(--color-muted); }
.contact-links { display: grid; justify-items: start; gap: var(--space-md); }
.contact-links a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
@media (min-width: 961px) { .identity-rail { height: 100svh; } }
@media (max-width: 960px) {
 .site-shell { display: block; }
 .identity-rail { position: static; height: auto; min-height: 0; border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg) var(--gutter); }
 .identity { font-size: 22px; }
 .rail-nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-0); font-size: 18px; }
 .home-main { padding: var(--space-2xl) var(--gutter) var(--space-0); }
 .project-title { font-size: clamp(44px,9.7vw,92px); }
 .project-summary { font-size: clamp(23px,3.6vw,32px); letter-spacing: -.025em; }
 .project-status { font-size: 19px; }
 .read-link { font-size: 22px; margin-top: var(--space-lg); }
 .home-main + .site-footer { padding: var(--space-lg) var(--gutter); }
 .profile-section { margin-top: var(--space-3xl); }
 .profile-copy { font-size: 19px; }
}
@media (max-width: 600px) {
 .identity-rail { align-items: start; flex-direction: column; gap: var(--space-md); }
 .rail-nav { gap: var(--space-lg); }
 .project-title { font-size: clamp(38px,10.5vw,60px); letter-spacing: -.035em; line-height: 1.06; }
 .project-entry { padding-bottom: var(--space-xl); }
 .project-entry + .project-entry { padding-top: var(--space-xl); }
 .profile-section { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-xl); }
 .contact-section { padding-bottom: var(--space-2xl); }
 .profile-copy { font-size: 18px; }
}
@font-face { font-family: 'Rethink Sans'; src: url('./fonts/rethink-sans-italic-400.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
.project-title { font-size: clamp(3rem, 7vw, 105px); }
.project-entry + .project-entry { padding-bottom: var(--space-2xl); }
@media (max-width: 960px) { .project-title { font-size: clamp(38px, 7.5vw, 72px); } }
@media (max-width: 600px) { .project-title { font-size: clamp(34px, 9vw, 54px); line-height: 1.08; } .project-entry + .project-entry { padding-bottom: var(--space-xl); } }
.web-showcase { margin-top: var(--space-3xl); padding-top: var(--space-xl); padding-bottom: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.web-showcase h2 { font-size: clamp(30px,3.2vw,48px); line-height: 1.12; letter-spacing: -.03em; font-weight: 500; }
.web-showcase .project-summary { font-size: clamp(20px,1.8vw,27px); letter-spacing: -.02em; line-height: 1.5; }
.web-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-xl) var(--gap-columns); margin-top: var(--space-xl); }
.web-tile { min-width: 0; }
.web-tile:first-child { grid-column: 1 / -1; }
.web-tile-link { display: block; text-decoration: none; }
.web-tile-link img { width: 100%; height: auto; border: var(--rule-hair) solid var(--color-rule); }
.web-tile h3 { font-size: clamp(24px,2.3vw,34px); line-height: 1.2; letter-spacing: -.025em; font-weight: 500; margin-top: var(--space-md); }
.web-tile p { margin-top: var(--space-2xs); color: var(--color-muted); font-size: 16px; }
.web-index-link, .live-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 19px; margin-top: var(--space-lg); }
.web-main { grid-column: 2; min-width: 0; padding: var(--space-3xl) var(--gutter) var(--space-0) var(--space-2xl); }
.web-main h1 { font-size: clamp(40px,5vw,74px); line-height: 1.04; letter-spacing: -.035em; font-weight: 500; }
.web-intro { font-size: clamp(20px,2vw,28px); color: var(--color-ink-2); margin-top: var(--space-lg); }
.web-contents { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xl); }
.web-contents a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.website-project { padding-top: var(--space-xl); margin-top: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); scroll-margin-top: var(--space-xl); }
.website-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: var(--gap-columns); }
.website-heading h2 { font-size: clamp(30px,3.3vw,48px); line-height: 1.12; font-weight: 500; letter-spacing: -.025em; }
.website-description { font-size: 19px; color: var(--color-ink-2); line-height: 1.6; }
.website-description .live-link { margin-top: var(--space-md); color: var(--color-ink); }
.website-note, .capture-note { font-size: 16px; line-height: 1.6; color: var(--color-muted); max-width: 65ch; margin-top: var(--space-lg); }
.web-screen-pair { display: grid; grid-template-columns: minmax(0,3.4fr) minmax(0,1fr); gap: var(--gap-columns); align-items: start; margin-top: var(--space-xl); }
.web-shot { margin: var(--space-0); min-width: 0; }
.web-shot a { display: block; cursor: zoom-in; }
.web-shot img { width: 100%; height: auto; border: var(--rule-hair) solid var(--color-rule); }
.web-shot figcaption { font-size: 14px; color: var(--color-muted); margin-top: var(--space-sm); line-height: 1.5; }
.web-details { margin-top: var(--space-xl); }
.web-details summary { cursor: pointer; min-height: 44px; width: fit-content; font-size: 18px; }
.web-details summary:active { opacity: .7; }
.web-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--gap-columns); margin-top: var(--space-lg); }
.capture-note { margin-block: var(--space-3xl); }
.web-page .site-footer { grid-column: 2; padding: var(--space-xl) var(--gutter) var(--space-lg) var(--space-2xl); }
@media (max-width:960px) { .web-main { padding: var(--space-2xl) var(--gutter) var(--space-0); } .web-page .site-footer { padding: var(--space-lg) var(--gutter); } }
@media (max-width:600px) { .web-grid, .website-heading, .web-detail-grid { grid-template-columns: minmax(0,1fr); } .web-tile:first-child { grid-column: auto; } .web-screen-pair { grid-template-columns: minmax(0,1fr); } .web-screen-pair .web-shot:last-child { max-width: 240px; } .website-project { margin-top: var(--space-2xl); } .web-showcase { margin-top: var(--space-2xl); } }
.project-summary { line-height: 1.35; }
/* Hallmark · answered F1 · the About section preserves the user's supplied copy verbatim */
.web-showcase-compact { margin-top: var(--space-2xl); padding-block: var(--space-lg); }
.web-overview summary { display: list-item; list-style-position: outside; margin-left: var(--space-lg); cursor: pointer; min-height: 44px; color: var(--color-muted); }
.web-overview summary h2 { display: inline; font-size: clamp(22px,2vw,28px); font-weight: 400; letter-spacing: -.02em; line-height: 1.5; }
.web-overview summary:active { opacity: .7; }
.web-overview-content { padding: var(--space-md) var(--space-0) var(--space-xs) var(--space-lg); font-size: 18px; line-height: 1.6; color: var(--color-ink-2); }
.web-overview-content .web-index-link { margin-top: var(--space-sm); font-size: 18px; }
.web-showcase-small { margin-top: var(--space-2xl); padding-block: var(--space-xl); }
.web-showcase-small h2 { font-size: clamp(24px,2.2vw,32px); font-weight: 500; }
.web-small-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.web-small-card { display: block; min-width: 0; text-decoration: none; }
.web-small-card img { display: block; width: 100%; height: auto; border: var(--rule-hair) solid var(--color-rule); }
.web-small-card h3 { font-size: 16px; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; margin-top: var(--space-sm); }
.web-showcase-small .web-index-link { font-size: 16px; margin-top: var(--space-lg); }
@media (max-width:960px) { .web-small-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width:600px) { .web-small-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Keep eight supporting web projects balanced and small. */
.web-small-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:960px){.web-small-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.web-small-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Homepage previews stay in a single row at each screen size. */
@media(max-width:960px){.web-small-card:nth-child(n+4){display:none}}
@media(max-width:600px){.web-small-card:nth-child(n+3){display:none}}
/* Approved dark introduction, with a shared horizontal site header. */
.site-shell{display:block;max-width:var(--container);padding-inline:clamp(var(--space-lg),4vw,var(--space-2xl))}
.identity-rail{position:static;inset:auto;width:auto;height:auto;min-height:0;padding:var(--space-lg) 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-lg);border:0}
.identity{font-size:21px}.identity strong{font-weight:700}.identity span{display:none}
.rail-nav{display:flex;flex-wrap:wrap;gap:var(--gutter);margin:0;font-size:18px}.rail-nav a{display:inline-flex;align-items:center}
.home-main,.web-main{margin:0;padding:0;min-width:0}
.intro-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:var(--space-lg);align-items:center;padding-top:60px;min-height:570px}
.intro-identity h1{font-size:clamp(78px,12vw,172px);font-weight:700;letter-spacing:-.065em;line-height:.87;margin:0}
.intro-identity p{font-size:clamp(28px,4.3vw,60px);font-weight:700;letter-spacing:-.045em;line-height:1.15;margin-top:var(--gutter)}
.intro-portrait{display:block;width:100%;height:auto;max-width:580px;justify-self:end}
.intro-statement{border-top:1px solid var(--color-rule);padding-top:var(--gutter);margin-top:20px;font-size:clamp(24px,3.3vw,44px);line-height:1.35;letter-spacing:-.035em}
.work-heading{margin-top:80px;margin-bottom:var(--gutter);scroll-margin-top:var(--gutter)}.work-heading h2{font-size:clamp(30px,3.5vw,44px);font-weight:700;letter-spacing:-.035em}
.project-title{font-size:clamp(36px,5.5vw,70px);line-height:1.08}.project-summary{font-size:clamp(21px,2.2vw,28px);letter-spacing:-.025em;max-width:44ch}.project-status{font-size:18px}.read-link{font-size:20px;margin-top:20px;text-decoration:underline}
.project-entry{padding-bottom:var(--space-xl)}.project-entry+.project-entry{padding-block:var(--space-xl)}
.home-main+.site-footer,.web-page .site-footer{padding:var(--gutter) 0;grid-column:auto;border-top:1px solid var(--color-rule)}
.web-main{padding-top:var(--space-2xl)}.web-showcase-small{margin-top:var(--space-xl)}
@media(max-width:960px){.intro-hero{min-height:460px;padding-top:var(--space-xl)}.intro-identity h1{font-size:clamp(72px,13vw,120px)}.intro-identity p{font-size:clamp(25px,4.5vw,40px)}.rail-nav{gap:var(--space-lg)}.work-heading{margin-top:var(--space-2xl)}}
@media(max-width:600px){.identity-rail{gap:var(--space-sm);align-items:center;padding-block:20px}.identity{font-size:17px}.rail-nav{font-size:15px;gap:var(--space-md)}.intro-hero{grid-template-columns:minmax(0,1fr);gap:var(--space-sm);padding-top:var(--space-xl);min-height:0}.intro-identity h1{font-size:clamp(72px,20vw,116px);line-height:.9}.intro-identity p{font-size:32px;margin-top:20px}.intro-portrait{width:82%;max-width:340px;justify-self:center}.intro-statement{margin-top:var(--space-sm);padding-top:var(--space-lg)}.work-heading{margin-top:48px}.project-title{font-size:36px}.home-main+.site-footer{padding-inline:0}.contact-links a{font-size:17px}.web-main{padding-top:var(--space-xl)}}
/* Keep primary navigation visible while reading. */
.identity-rail{position:sticky;top:0;z-index:var(--z-sticky-nav);background:var(--color-paper);border-bottom:var(--rule-hair) solid var(--color-rule)}
#work,#about,#contact{scroll-margin-top:112px}
/* The illustration travels into a reserved header slot without moving text. */
.dark-home .identity{display:flex;align-items:center;gap:var(--space-xs)}
.dark-home .identity-icon{display:block;flex:0 0 36px;width:36px;height:36px;margin:0;overflow:hidden;opacity:0}
.identity-icon img{width:100%;height:100%;object-fit:contain;transform:translateY(12%) scale(1.65);transform-origin:50% 30%}
.portrait-flight{position:fixed;top:0;left:0;z-index:calc(var(--z-sticky-nav) + 1);pointer-events:none;transform-origin:0 0;overflow:hidden;will-change:transform}
.portrait-flight img{display:block;width:100%;height:100%;transform-origin:50% 30%}
.portrait-motion .intro-portrait{visibility:hidden}
@media(max-width:600px){.dark-home .identity-icon{flex-basis:28px;width:28px;height:28px}.dark-home .identity{font-size:16px}}
@media(prefers-reduced-motion:reduce){.dark-home .identity-icon{opacity:1}.portrait-flight{display:none}.portrait-motion .intro-portrait{visibility:visible}}
.portrait-flight .portrait-clean{position:absolute;inset:0}
/* Restore the desktop identity rail while retaining the new introduction. */
@media(min-width:961px){
 .site-shell{display:grid;grid-template-columns:210px minmax(0,1fr);column-gap:var(--space-2xl);align-items:start}
 .identity-rail{grid-column:1;grid-row:1 / span 2;height:100svh;width:auto;padding:var(--space-xl) var(--space-lg) var(--space-xl) 0;display:block;border-bottom:0;border-right:var(--rule-hair) solid var(--color-rule)}
 .identity{font-size:20px}.dark-home .identity{font-size:20px;gap:var(--space-xs)}
 .rail-nav{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-sm);margin-top:var(--space-2xl);font-size:20px}
 .home-main,.web-main{grid-column:2;grid-row:1}
 .home-main+.site-footer,.web-page .site-footer{grid-column:2;grid-row:2}
 .intro-hero{min-height:540px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-sm)}
 .intro-identity h1{font-size:clamp(78px,9vw,130px)}
 .intro-identity p{font-size:clamp(28px,3.2vw,44px)}
 .intro-portrait{max-width:480px}
}
/* The introduction ends before the work section begins. */
.intro-statement{border-top:0;padding-top:var(--space-lg)}
.work-heading{border-top:var(--rule-hair) solid var(--color-rule);margin-top:var(--space-2xl);padding-top:var(--space-xl);margin-bottom:var(--space-lg)}
@media(max-width:600px){.work-heading{margin-top:var(--space-xl);padding-top:var(--space-lg)}}
/* Project panels form a collection; page sections use open space and rules. */
.project-list{display:grid;gap:var(--space-lg)}
.project-entry,.project-entry+.project-entry{padding:var(--space-xl);border:var(--rule-hair) solid var(--color-rule);background:var(--color-paper-2);border-radius:var(--radius-card)}
.project-title{font-size:clamp(28px,3.4vw,44px);font-weight:500;line-height:1.15;letter-spacing:-.03em}
.project-summary{font-size:clamp(19px,1.8vw,24px);line-height:1.5;margin-top:var(--space-md);max-width:48ch}
.project-status{font-size:15px;margin-top:var(--space-lg);color:var(--color-muted)}
.read-link{font-size:17px;margin-top:var(--space-sm)}
.web-showcase-small{margin-top:var(--space-3xl);padding-top:var(--space-xl);padding-bottom:0}
.profile-section{margin-top:var(--space-3xl);padding-top:var(--space-xl)}
.profile-section h2,.web-showcase-small h2,.work-heading h2{font-size:clamp(28px,2.8vw,36px);font-weight:700;letter-spacing:-.03em}
.profile-copy{font-size:clamp(18px,1.5vw,21px)}
.contact-section{margin-top:var(--space-3xl);padding-bottom:var(--space-2xl)}
@media(max-width:600px){.project-entry,.project-entry+.project-entry{padding:var(--space-lg)}.project-list{gap:var(--space-md)}.web-showcase-small,.profile-section,.contact-section{margin-top:var(--space-2xl)}}
/* Open project index: typography carries the work, rules carry the rhythm. */
.project-list{gap:0}
.project-entry,.project-entry+.project-entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xl);padding:var(--space-xl) 0;border:0;border-bottom:var(--rule-hair) solid var(--color-rule);border-radius:0;background:var(--color-clear)}
.project-title{font-size:clamp(30px,3.3vw,46px);font-weight:500;letter-spacing:-.03em;line-height:1.12;max-width:13ch}
.project-summary{margin:0;font-size:clamp(18px,1.6vw,22px);line-height:1.55;letter-spacing:-.015em}
.project-status{margin-top:var(--space-md);font-size:14px}
.read-link{margin-top:var(--space-md);font-size:16px;min-height:44px}
.work-heading{margin-bottom:var(--space-sm)}
.work-heading h2{font-size:24px;font-weight:500;color:var(--color-muted);letter-spacing:-.02em}
@media(max-width:600px){.project-entry,.project-entry+.project-entry{grid-template-columns:minmax(0,1fr);gap:var(--space-lg);padding:var(--space-xl) 0}.project-title{font-size:34px;max-width:18ch}.project-summary{font-size:19px}}
/* Compact authentic design collage, grouped with the case-study metadata. */
.project-entry.project-featured{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:var(--space-xl)}
.featured-copy .project-title{max-width:16ch}.featured-copy .project-detail{margin-top:var(--space-lg)}
.crm-thumbnail{display:block;min-width:0;text-decoration:none}.thumbnail-screens{position:relative;aspect-ratio:4/3;background:var(--color-paper-2);overflow:hidden}
.thumb-workspace{position:absolute;width:88%;height:auto;left:4%;top:10%}
.thumb-filter{position:absolute;right:3%;top:24%;width:29%;height:65%;overflow:hidden;border:var(--rule-hair) solid var(--color-rule)}
.thumb-filter img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:right center}
.thumbnail-caption{display:block;margin-top:var(--space-sm);font-size:13px;line-height:1.5;color:var(--color-muted)}
@media(max-width:600px){.project-entry.project-featured{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}}
/* The compact identity arrives with the portrait, after the hero recedes. */
.portrait-motion .identity strong{opacity:0}
.portrait-motion .identity:focus-visible strong{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.portrait-motion .identity strong,.intro-identity{opacity:1!important;transform:none!important}}
/* A continuous two-word title morph, rather than a second name fading in. */
.hero-word{display:inline-block}
.identity strong .compact-word{display:inline;color:inherit;font:inherit;letter-spacing:inherit;margin:0}
.portrait-motion .intro-identity h1{opacity:0}
.name-flight{position:fixed;top:0;left:0;display:block;white-space:nowrap;pointer-events:none;z-index:calc(var(--z-sticky-nav) + 1);transform-origin:0 0;color:var(--color-ink);will-change:transform}
@media(prefers-reduced-motion:reduce){.name-flight{display:none}.portrait-motion .intro-identity h1{opacity:1}}

.case-thumbnail{display:block;min-width:0;text-decoration:none}.case-thumbnail>img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain}
/* Keep the navigation near the viewport edge on wide displays. */
@media(min-width:961px){
 .site-shell{max-width:none;padding-inline:clamp(32px,3vw,64px)}
 .home-main,.web-main,.home-main+.site-footer,.web-page .site-footer{width:100%;max-width:1440px}
}