/* The portfolio adopts the clean presentation Matt liked in the concept studies. */
.index-layout{--index-space:clamp(3rem,5vw,5.5rem)}
.index-layout .index-header{border-bottom:1px solid var(--red)}
.index-layout .work-intro{grid-template-columns:1.35fr 1fr;gap:3rem;padding:3rem var(--gutter)}
.index-layout .work-intro h1{font-size:clamp(3rem,6.2vw,6.8rem);line-height:1.03;letter-spacing:-.06em}
.index-layout .work-intro h1>span{white-space:nowrap}
.index-layout .work-intro>div{align-self:end;max-width:420px;justify-self:end}
.index-layout .work-intro .work-intro-lead{color:var(--red);font-size:1.3rem;line-height:1.3;letter-spacing:-.025em}
.index-layout .work-intro>div>p+p{font-size:1.0625rem;color:var(--ink);line-height:1.5;margin-top:1rem}
.index-layout .work-intro .type-cta{margin-top:1rem}
.index-work-label{display:flex;justify-content:space-between;gap:2rem;padding:1.25rem 0;margin:0 var(--gutter);border-top:1px solid var(--red)}
.index-layout .index-work-label h2{font-size:1rem;letter-spacing:0;line-height:1.5;font-weight:700}
.index-work-label p{font-size:.875rem;color:var(--muted)}
.index-layout .work-browser{padding-bottom:0;gap:3.5rem 2.5rem}
.project-preview{overflow:hidden;aspect-ratio:1.5;background:#fafafa}
.project-preview img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.work-card .preview-link:hover img{transform:scale(1.025)}
.index-layout .work-card .card-heading{align-items:start}
.index-layout .work-card .card-heading>span{padding-top:.35rem;font-size:.875rem}
.index-layout .work-card .card-heading h2{font-size:clamp(1.75rem,2.5vw,2.8rem);line-height:1.05;letter-spacing:-.045em}
.index-layout .work-card .feeling{margin:1rem 0 .5rem;font-size:1rem;line-height:1.5}
.index-layout .work-card>p:not(.feeling){font-size:1rem;line-height:1.5;color:var(--ink)}
.index-layout .work-card .work-card-scope{margin-top:.9rem;font-size:.875rem!important;color:var(--muted)!important}
.index-layout .work-card>.type-cta{font-size:.875rem;margin-top:1rem}
.index-work-note{padding:0 var(--gutter);margin:2rem 0 3.5rem;font-size:.8125rem;color:var(--muted)}
.index-statement{padding:var(--index-space) var(--gutter);background:var(--red);color:white}
.index-layout .index-statement .index,.index-layout .index-statement h2{color:white}
.index-layout .index-statement h2{font-size:clamp(3rem,6vw,6.5rem);margin:2rem 0;line-height:1.05}
.index-statement>div{display:grid;grid-template-columns:1fr 1fr;gap:4rem;max-width:1100px}
.index-statement>div p{font-size:1.125rem;line-height:1.5;max-width:500px}
.index-layout .craft-index{padding:var(--index-space) var(--gutter);border-bottom:1px solid var(--red)}
.index-layout .chapter-heading{display:grid;grid-template-columns:1.35fr 1fr;gap:1.25rem 3rem;margin-bottom:2.5rem}
.index-layout .chapter-heading>.index{grid-column:1/-1}
.index-layout .chapter-heading h2{font-size:clamp(2.75rem,4.5vw,4.8rem)}
.index-layout .chapter-heading>p:not(.index){align-self:end;font-size:1rem;max-width:420px;justify-self:end}
.index-layout .craft-rows{margin-left:0}
.index-layout .craft-row h3{font-size:clamp(1.7rem,2.5vw,2.7rem)}
.index-layout .craft-row summary{padding-block:1.4rem}
.index-layout .craft-house{padding:var(--index-space) var(--gutter);display:grid;grid-template-columns:1.35fr 1fr;gap:3rem}
.index-layout .craft-house .chapter-heading{display:block;margin:0}
.index-layout .craft-house .chapter-heading h2{margin-top:1.5rem}
.index-layout .house-story .lead{color:var(--red);font-size:1.5rem}
.index-layout .house-story>p+p{font-size:1rem}
.index-layout .house-ways{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;border-top:1px solid var(--red);padding-top:2rem}
.index-layout .house-ways h3{font-size:1.5rem}
.index-layout .craft-advisory{grid-column:1/-1;margin-top:0}
.index-layout .craft-contact{padding:var(--index-space) var(--gutter)}
.index-layout .craft-contact h2{font-size:clamp(3.5rem,7vw,7.5rem);margin:2rem 0}
.index-layout .craft-contact>div p{font-size:1.125rem}

/* Each project opens into the same white-paper, image-led presentation. */
.simplified-index .work-intro .work-intro-lead{font-size:1.3rem}
.simplified-index .craft-index .chapter-heading{display:block;margin-bottom:2rem}
.simplified-index .craft-row summary{grid-template-columns:3rem 1fr 1.5rem}
.simplified-index .craft-row .detail-symbol{grid-column:3;margin-left:0}
.simplified-index .craft-contact h2{font-size:clamp(3.5rem,7vw,7.5rem)}
.case-opening{padding:1.5rem var(--gutter) 0}
.case-back{font-size:.875rem!important}
.index-layout .case-intro{padding:2rem 0 2.5rem;grid-template-columns:1.35fr 1fr;gap:3rem}
.index-layout .case-intro h1{color:var(--red);font-size:clamp(3rem,6.5vw,7rem);line-height:1.02;letter-spacing:-.06em}
.case-intro>div{max-width:420px;justify-self:end}
.case-intro .case-lead{font-size:1.3rem;color:var(--red);line-height:1.35;letter-spacing:-.025em}
.case-intro>div>p+p{font-size:1rem;line-height:1.5;color:var(--ink);margin-top:1rem}
.case-intro .case-scope{font-size:.875rem!important;color:var(--muted)!important}
.case-image{margin:0 var(--gutter)}
.case-image img{width:100%;height:auto}
.case-image figcaption{font-size:.8125rem;color:var(--muted);margin-top:.8rem}
.compact-image{max-width:600px;margin-inline:auto}
.case-story{padding:var(--index-space) var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.index-layout .case-story h2{font-size:clamp(2rem,3.6vw,3.8rem);margin:1.5rem 0}
.case-story article>p:not(.index){font-size:1.0625rem;line-height:1.55;max-width:500px}
.case-story .case-forms{font-size:.875rem!important;color:var(--red);border-top:1px solid var(--rule);margin-top:1.5rem;padding-top:1rem}
.case-more{padding-top:2.5rem;border-top:1px solid var(--red);margin-bottom:3.5rem}
.more-heading{display:flex;justify-content:space-between;align-items:end;gap:2rem;padding:0 var(--gutter) 2.5rem}
.index-layout .more-heading h2{font-size:clamp(2.75rem,4.5vw,4.8rem)}
.more-heading>.type-cta{font-size:.875rem;white-space:nowrap}
.case-contact{padding:2.5rem var(--gutter);background:var(--red);color:white;display:flex;justify-content:space-between;align-items:center;gap:2rem}
.case-contact>p{font-size:clamp(1.75rem,3vw,3.2rem);line-height:1.2;letter-spacing:-.04em}
.index-layout .case-contact .type-cta{color:white;font-size:1rem}

@media(max-width:1050px){
 .index-layout .work-intro,.index-layout .case-intro{gap:2rem}.index-layout .work-intro h1{font-size:6.1vw}.index-layout .work-browser{gap:3rem 2rem}
 .index-layout .craft-house{gap:2rem}.index-layout .chapter-heading{gap:1.25rem 2rem}.index-layout .house-ways{gap:2rem}
 .case-story{gap:3rem}.index-statement>div{gap:3rem}
}
@media(max-width:700px){
 .simplified-index .craft-row summary{grid-template-columns:1.6rem 1fr 1.5rem}
 .simplified-index .craft-row .detail-symbol{grid-row:1}
 .index-layout .work-intro{display:block;padding-block:2.5rem}.index-layout .work-intro h1{font-size:11.8vw;line-height:1.05}.index-layout .work-intro>div{margin-top:1.75rem;max-width:100%}.index-layout .work-intro .work-intro-lead{font-size:1.25rem}.index-layout .work-intro>div>p+p{font-size:1rem}.index-layout .work-intro .type-cta{margin-top:1rem}
 .index-work-label{display:block;padding-block:1rem}.index-work-label p{margin-top:.25rem;font-size:.8125rem}.index-layout .work-browser{gap:2.75rem}.index-layout .work-card .card-heading h2{font-size:1.9rem}.index-layout .work-card .card-heading>span{font-size:.8125rem}.index-work-note{margin:1.5rem 0 3rem;font-size:.75rem}
 .index-layout .index-statement h2{font-size:11vw;margin:1.5rem 0}.index-statement>div{grid-template-columns:1fr;gap:1.5rem}.index-statement>div p{font-size:1rem}
 .index-layout .chapter-heading{display:block;margin-bottom:2rem}.index-layout .chapter-heading h2{font-size:10.8vw;margin-top:1.5rem}.index-layout .chapter-heading>p:not(.index){margin-top:1.5rem;font-size:1rem}
 .index-layout .craft-row h3{font-size:1.65rem}.index-layout .craft-house{display:block}.index-layout .house-story{margin-top:2rem}.index-layout .house-story .lead{font-size:1.4rem}.index-layout .house-ways{grid-template-columns:1fr;gap:2rem;margin-top:2.5rem}.index-layout .craft-advisory{margin-top:2rem}.index-layout .craft-contact h2{font-size:12vw}
 .index-layout .case-intro{display:block;padding:2rem 0}.index-layout .case-intro h1{font-size:12vw}.case-intro>div{max-width:100%;margin-top:1.5rem}.case-intro .case-lead{font-size:1.2rem}.case-image figcaption{font-size:.75rem}.compact-image{margin-inline:var(--gutter)}
 .case-story{grid-template-columns:1fr;gap:2.5rem}.index-layout .case-story h2{font-size:9vw;margin:1.25rem 0}.case-story article>p:not(.index){font-size:1rem}.case-more{padding-top:2rem;margin-bottom:3rem}.more-heading{display:block;padding-bottom:2rem}.index-layout .more-heading h2{font-size:10.8vw}.more-heading>.type-cta{margin-top:1rem}.case-contact{display:block;padding-block:2rem}.case-contact>p{font-size:7.5vw}.index-layout .case-contact .type-cta{margin-top:1rem}
}

/* Art House creative practice and Hey Now! Agency footer. */
.index-layout .index-header .nav{margin-left:auto;order:initial;width:auto;gap:clamp(1.25rem,3vw,3rem)}
.index-layout .index-header .nav a{color:var(--red);white-space:nowrap}
.say-hi span{display:inline-block;margin-left:.25em}
.index-layout .art-house-footer{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2.5rem}
.agency-link{display:flex;align-items:center;justify-self:end;gap:1.25rem;color:var(--ink)}
.agency-link img{width:76px;height:76px;flex:none}
.agency-link>span{font-size:1rem;font-weight:700;line-height:1.4}
.agency-link:hover>span{text-decoration:underline;text-underline-offset:.25em}
.index-layout .art-house-footer .footer-bottom{grid-column:1/-1;width:100%}
@media(max-width:700px){
 .index-layout .index-header{gap:1rem;flex-wrap:nowrap}
 .index-layout .index-header .brand{width:90px}
 .index-layout .index-header .nav{gap:1rem}
 .index-layout .index-header .nav a{font-size:.875rem}
 .index-layout .art-house-footer{grid-template-columns:1fr;gap:2rem}
 .agency-link{justify-self:start;gap:1rem}
 .agency-link img{width:64px;height:64px}
 .agency-link>span{font-size:.9375rem}
}

/* Dedicated selected-work index and supplemental source artwork. */
.portfolio-index{padding-top:2.5rem;padding-bottom:4rem}
.index-layout .portfolio-index .index-work-label{align-items:baseline;border-top:0;padding-bottom:2.5rem}
.index-layout .portfolio-index .index-work-label h1{color:var(--red);font-size:clamp(3rem,6.5vw,7rem);line-height:1.05;letter-spacing:-.055em}
.index-layout .portfolio-index .index-work-label p{font-size:1.125rem;color:var(--red)}
.supplemental-image{margin-block:3rem}
.supplemental-image img{max-width:1100px;margin-inline:auto}
.supplemental-image img[src*="1826-club"]{max-width:720px}
.supplemental-story{padding:0 var(--gutter) 4rem;max-width:950px}
.supplemental-story p{font-size:1.0625rem;line-height:1.55;margin-top:1.25rem}
@media(max-width:700px){
 .portfolio-index{padding-top:1.5rem;padding-bottom:3rem}
 .index-layout .portfolio-index .index-work-label{padding-bottom:1.5rem}
 .index-layout .portfolio-index .index-work-label h1{font-size:12vw}
 .index-layout .portfolio-index .index-work-label p{font-size:1rem;margin-top:.75rem}
 .supplemental-image{margin-block:2rem}
}

/* Mockups use the untouched source artwork rather than redrawing its lettering. */
.application-scene{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1.5;overflow:hidden;background:radial-gradient(ellipse at 40% 20%,#fff 0%,#eeeae4 75%);perspective:1400px}
.folded-brochure{display:flex;width:78%;filter:drop-shadow(12px 22px 12px #302b252c);transform:rotate(-7deg) rotateX(18deg) rotateY(-12deg);transform-style:preserve-3d}
.brochure-panel{position:relative;width:33.333%;aspect-ratio:2/3;overflow:hidden;background:white;transform-origin:left center}
.brochure-panel img{position:absolute!important;top:0;left:0;width:300%!important;height:auto!important;max-width:none!important;margin:0!important;transform:none!important}
.brochure-panel.panel-1 img{left:-100%}.brochure-panel.panel-2 img{left:-200%}
.brochure-panel.panel-0{transform:rotateY(-10deg)}.brochure-panel.panel-2{transform:rotateY(12deg)}
.brochure-panel:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#00000015,transparent 9%,transparent 90%,#00000012)}
.print-scene:has(img[src*="p2"]) .brochure-panel{aspect-ratio:400/929}
.email-scene{background:radial-gradient(ellipse at 25% 20%,#fff,#e7e3dc)}
.email-device{width:37%;height:84%;padding:2% 1.1%;border-radius:4%/3%;background:#313132;box-shadow:2px 2px 0 #8c8c8c,14px 24px 23px #302b2538;transform:rotate(-7deg) rotateY(-12deg)}
.email-viewport{height:100%;overflow-y:auto;background:white;scrollbar-width:thin;overscroll-behavior:contain}
.email-viewport img{display:block;width:100%!important;height:auto!important;max-width:none!important;transform:none!important;margin:0!important}
.project-preview .application-scene{width:100%;height:100%;aspect-ratio:auto}
.project-preview .email-viewport{overflow:hidden}
.supplemental-image .application-scene{max-width:1100px;margin:auto}
@media(prefers-reduced-motion:reduce){.application-scene *{transition:none!important}}

.desktop-display{position:relative;width:83%;border:8px solid #383839;border-bottom-width:15px;border-radius:6px;background:#383839;box-shadow:12px 18px 20px #302b2530;transform:rotate(-5deg) rotateY(-10deg)}
.desktop-display:after{content:"";position:absolute;top:calc(100% + 15px);left:37%;width:26%;height:18px;background:linear-gradient(90deg,#a5a5a5,#ddd,#999);clip-path:polygon(35% 0,65% 0,75% 80%,100% 90%,100% 100%,0 100%,0 90%,25% 80%)}
.desktop-display img{display:block;width:100%;height:auto!important;transform:none!important}

/* Approved Art House messaging; existing services and layout retained. */
.index-layout .work-intro .hero-support{font-size:1.0625rem;line-height:1.5;color:var(--ink)}
.index-layout .index-work-label .showcase-introduction{max-width:640px;font-size:1rem;line-height:1.5;color:var(--ink)}
.index-layout .services-pillars .index{margin-bottom:1.5rem}
.index-layout .services-pillars h2{max-width:1100px}