/**
 * Atelier Forma v0.4 — Architectural Modern
 * Original editorial identity: pale limestone, graphite, smoked oak.
 * Keeps earlier CSS as a graceful fallback while the asset importer is pending.
 */
:root {
    --paper:#ecebe7;
    --green:#202625;
    --rust:#a28e73;
    --line:#bbbcb7;
    --gutter:clamp(22px,5vw,100px);
    --sans:'Avenir Next',Avenir,'Segoe UI',Arial,sans-serif;
    --serif:'Iowan Old Style','Baskerville',Georgia,serif;
}
body{background:var(--paper);color:var(--green)}
::selection{background:#ad9d82;color:#151b1a}
.demo-strip{background:#242c2b;color:#f5f4ef;letter-spacing:.2em}
.demo-strip a{opacity:.8}
.site-logo{gap:17px;letter-spacing:.22em}
.logo-icon{
    font-family:var(--serif);
    font-size:clamp(34px,3.3vw,54px);
    font-style:normal;
    font-weight:400;
    line-height:.85;
    letter-spacing:-.12em;
    margin-right:6px;
}
.site-header{padding-top:26px;padding-bottom:23px}
.site-header.scrolled,.menu-open .site-header{background:rgba(236,235,231,.95);backdrop-filter:blur(18px)}
.header-detail,.header-contact,.menu-toggle{letter-spacing:.18em}
.menu-panel{background:#d5d6d0}
.menu-panel nav a{font-family:var(--serif)}
.menu-panel nav a:hover{color:#92836f}
.hero{min-height:720px;background:#303633}
.hero-photo{background-position:64% center}
.hero-overlay{background:linear-gradient(90deg,rgba(8,17,19,.68) 0%,rgba(9,18,19,.28) 54%,rgba(9,18,19,.04) 100%),linear-gradient(0deg,rgba(8,17,18,.55),transparent 45%)}
.hero>.cinema-video{object-position:60% center}
.hero-main{bottom:clamp(140px,16vh,220px)}
.hero h1{
    font-size:clamp(75px,10.5vw,188px);
    letter-spacing:-.077em;
    line-height:.88;
    max-width:1100px;
    text-shadow:0 1px 18px rgba(0,0,0,.12);
}
.hero h1 em{font-style:italic;font-weight:400}
.hero-summary p{max-width:365px;font-size:16px;line-height:1.75}
.hero-eyebrow,.hero-bottom{letter-spacing:.17em}
.hero-eyebrow span:last-child{opacity:.75}
.circle-arrow{width:76px;height:76px;transition:background .25s}
.circle-arrow:hover{background:rgba(255,255,255,.2)}
.intro{padding-top:180px;padding-bottom:180px}
.intro h2{font-weight:400;letter-spacing:-.059em}
.intro h2 em,.works h2 em,.studio h2 em,.process h2 em{color:var(--rust)}
.intro-grid>div p{font-size:17px;line-height:1.9}
.section-tag,.micro{letter-spacing:.2em}
.image-break{height:76vh}
.image-break:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,15,15,.45),transparent 37%);z-index:2;pointer-events:none}
.image-caption{z-index:4}
.image-break .cinema-toggle{z-index:5}
.works{padding-top:175px;padding-bottom:175px}
.works-heading{margin-top:75px}
.work-image,.portfolio-image{background:#d1d0c8}
.work-image img,.portfolio-image img{filter:saturate(.89) contrast(1.04)}
.work-corner{backdrop-filter:blur(10px);background:rgba(24,29,29,.2)}
.work-details,.portfolio-meta{color:#747970;letter-spacing:.18em}
.work-item h3{font-family:var(--serif);font-weight:400}
.cinema-interlude{background:#d6d4cc}
.cinema-interlude-content h2 em{color:#8b816f}
.cinema-interlude-content h2{font-size:clamp(69px,6.5vw,138px)}
.manifesto{background:#292f2e;color:#f1f1ed;min-height:770px}
.manifesto>p:nth-child(2){max-width:1450px}
.manifesto em{color:#b6a48b}
.studio{padding-top:190px;padding-bottom:190px}
.studio-grid{gap:8vw}
.studio-photo img,.studio-editorial-photo img{filter:saturate(.9)}
.process{background:#dfe0db}
.process h3{letter-spacing:-.06em}
.cta,.inner-next,.next-case{background:#202625;color:#f2f1eb}
.cta h2 em{color:#c5b39e}
.cta-arrow{border-color:rgba(255,255,255,.7)}
.footer{background:#ecebe7}
.footer-head em{color:var(--rust)}
.footer-credits{color:#565d56}
.editorial-page-head h1{letter-spacing:-.082em}
.editorial-page-head h1 em,.story-split h2 em,.studio-editorial-copy h2 em,.value-section em,.contact-copy h2 em,.portfolio-head h1 em,.case-finish h2 em{color:var(--rust)}
.editorial-full,.case-full-photo,.project-hero{background:#adaaa2}
.project-veil{background:linear-gradient(0deg,rgba(6,17,19,.7),transparent 65%),linear-gradient(90deg,rgba(9,22,23,.3),transparent 65%)}
.portfolio-item>p{max-width:460px}
.portfolio-outro{background:#dfe0db}
.case-quote{background:#dcdcd5}
.case-quote blockquote{color:#2b3330}
.contact-button{background:#202625}
.menu-bottom{color:#626761}
body:not(.home) .site-header{background:#ecebe7}
body.forma-interior-preview .site-header{background:#ecebe7}
body.forma-interior-preview.menu-open .site-header{background:#d5d6d0}
.crossed{text-decoration:line-through;text-decoration-thickness:1px}
@media(min-width:1600px){
    .hero-photo{background-position:70% center}
    .hero>.cinema-video{object-position:70% center}
}
@media(max-width:850px){
    .hero h1{font-size:11vw}
    .cinema-interlude-content h2{font-size:9vw}
}
@media(max-width:620px){
    .site-header{padding-top:18px;padding-bottom:18px}
    .logo-icon{font-size:37px}
    .site-logo{gap:8px}
    .hero{height:calc(100svh - 32px);min-height:620px}
    .hero-main{bottom:145px}
    .hero h1{font-size:16vw;line-height:.93}
    .hero-summary p{font-size:13px;max-width:200px}
    .intro{padding-top:100px;padding-bottom:115px}
    .intro h2{font-size:11.7vw}
    .image-break{height:65vh;min-height:400px}
    .works{padding-top:110px;padding-bottom:120px}
    .works h2,.studio h2,.process h2{font-size:11.5vw}
    .cinema-interlude-content h2{font-size:12vw}
    .manifesto{min-height:620px}
    .manifesto>p:nth-child(2){font-size:11vw}
    .portfolio-head h1{font-size:12.5vw}
    .project-hero h1{font-size:12.5vw}
    .footer{padding-top:85px}
}
@media(prefers-reduced-motion:reduce){
    .hero-photo{transform:none!important}
}
/* v0.4.1 — small-screen overflow safeguards and touch targets */
@media(max-width:767px){
html,body{max-width:100%;overflow-x:clip}
.site-header,.hero-main,.hero-summary,.works-heading,.intro-grid,.studio-grid,.studio-content,.portfolio-grid,.case-lead,.contact-layout{min-width:0}
.hero h1,.intro h2,.works h2,.studio h2,.process h2,.editorial-page-head h1,.portfolio-head h1,.case-lead h2,.case-finish h2{overflow-wrap:break-word}
.menu-panel{overflow-y:auto;overscroll-behavior:contain;padding-top:125px;padding-bottom:72px}
.menu-panel nav{min-height:0;gap:8px}
.menu-panel nav a{font-size:clamp(38px,12vw,75px);line-height:1.04}
.menu-bottom{gap:16px;flex-wrap:wrap}
.cinema-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center}
.image-break .cinema-toggle{bottom:85px}
.hero .cinema-toggle{bottom:70px}
.work-grid,.portfolio-grid,.process-grid{min-width:0}
.work-item,.portfolio-item{min-width:0}
.work-image img,.portfolio-image img,.case-photo img{max-width:100%}
.project-hero h1{max-width:calc(100vw - 2 * var(--gutter))}
}
@media(max-width:390px){
.header-right{gap:12px}
.site-logo{gap:5px}
.logo-icon{font-size:32px;margin-right:4px}
.hero h1{font-size:15vw}
.hero-summary p{max-width:180px}
.hero-summary{gap:10px}
.cinema-label{letter-spacing:.05em}
}