/* Atelier Fold 2026 — home page compositions */
.hero{padding-block:var(--s6) var(--sec);position:relative}
.hero-grid{display:grid;gap:var(--s7);align-items:center}
.hero-grid>*{min-inline-size:0}
.hero-t h1{max-inline-size:11ch}
.hero-t h1 em{display:block}
.hero-t .lead{margin-block-start:var(--s5)}
.hero-m{position:relative}
.hero-m .ph picture{aspect-ratio:5/4}
.hero-card{--ear:22px;--ear-c:var(--kraft);display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:var(--s3);margin-block-start:var(--s4);padding:var(--s3);background:var(--surface);border:2px solid var(--ink);text-decoration:none;color:var(--fg);max-inline-size:340px}
.hero-card picture,.hero-card img{inline-size:96px;block-size:96px;object-fit:cover}
.hero-card span{display:grid;line-height:1.3}
.hero-card b{font-family:var(--f-display);font-weight:500;font-size:1.25rem}
.hero-card small{font-size:var(--t-label);color:var(--muted)}
.hero-card:hover b{color:var(--brand-t);text-decoration:underline}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s8)}
  .hero-card{position:absolute;inset-inline-start:calc(var(--s6) * -1);inset-block-end:var(--s8);margin:0}
  .hero-m::before{content:"";position:absolute;inset-inline-end:-12px;inset-block-start:-12px;inline-size:38%;block-size:30%;background:var(--mustard);clip-path:polygon(0 0,100% 0,100% 100%,18% 100%)}
}
.hero-m .ph{position:relative}
/* clients: a static list, set like a colophon */
.clients{border-block:2px solid var(--ink);background:var(--surface)}
.clients .wrap{display:grid;gap:var(--s2) var(--s6);padding-block:var(--s4);align-items:center}
.cl-h{font-family:var(--f-body);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.cl-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5)}
.cl-list li{font-family:var(--f-display);font-size:1.25rem;font-variation-settings:"opsz" 30;white-space:nowrap}
.cl-list li{display:inline-flex;align-items:center;gap:var(--s2)}
.cl-list li::before{content:"";inline-size:8px;block-size:8px;background:var(--scrap);clip-path:polygon(0 0,100% 0,100% 100%)}
@media (min-width:860px){.clients .wrap{grid-template-columns:auto minmax(0,1fr)}}
/* unfold: two case sheets */
.unfolds{display:grid;gap:var(--s8)}
.unfold{display:grid;gap:var(--s5);align-items:center}
.unfold>*{min-inline-size:0}
.unfold-i{display:block;border:2px solid var(--ink)}
.unfold-i picture,.unfold-i img{aspect-ratio:4/3;object-fit:cover;inline-size:100%}
.unfold-t h3{font-size:var(--t-h2);margin-block:var(--s2) var(--s3)}
.unfold-t h3 a{text-decoration:none;display:inline-block;padding-block:5px}
.unfold-t h3 a:hover{color:var(--brand-t);text-decoration:underline;text-decoration-thickness:2px}
.unfold-t>p:not(.meta){font-size:1.125rem;max-inline-size:42ch}
.tabs-row{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:0;margin-block:var(--s5) var(--s3)}
.tabs-row li{padding:var(--s2) var(--s4) var(--s2) var(--s3);background:var(--surface);border:2px solid var(--ink);font-weight:600;font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.tabs-row li+li{margin-inline-start:-2px}
.tabs-row li:nth-child(1){background:var(--mustard)}
.tabs-row li:nth-child(3){background:var(--ink);color:#fff}
@media (min-width:1000px){.unfold{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s8)}.unfold--rev .unfold-i{order:2}.unfold--rev{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
/* mosaic: two drawers with folder tabs */
.drawers{display:grid;gap:var(--s7)}
.drawers>*{min-inline-size:0}
.drawer{position:relative;border-block-start:2px solid var(--ink);padding-block-start:var(--s5)}
.drawer-tab{position:absolute;inset-block-start:-40px;inset-inline-start:0;display:inline-flex;align-items:center;block-size:38px;padding-inline:var(--s4) var(--s6);background:var(--ink);color:#fff;font-weight:600;font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 100%,0 100%)}
.drawer--p .drawer-tab{background:var(--brand)}
.drawers{padding-block-start:40px;row-gap:calc(var(--s7) + 40px)}
.tiles{list-style:none;padding:0;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.tile{display:grid;text-decoration:none;color:var(--fg);background:var(--surface);border:2px solid var(--ink)}
.tile picture,.tile img{aspect-ratio:1;object-fit:cover;inline-size:100%}
.tile-t{display:grid;gap:2px;padding:var(--s3) var(--s4) var(--s4);border-block-start:2px solid var(--ink);line-height:1.3}
.tile-t b{font-family:var(--f-display);font-weight:500;font-size:1.25rem}
.tile-t small{font-size:var(--t-label);color:var(--muted)}
.tile:hover b{color:var(--brand-t);text-decoration:underline}
.tile--p{background:var(--ink);color:#fff}
.tile--p .tile-t{border-color:var(--ink)}
.tile--p .tile-t small{color:var(--cream-2);font-size:1rem}
.tile--p:hover b{color:#fff}
@media (min-width:1000px){.drawers{grid-template-columns:minmax(0,3fr) minmax(0,1.15fr);column-gap:var(--s6)}}
/* process ledger */
.steps{list-style:none;padding:0;display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));border-block-start:2px solid var(--ink)}
.steps li{padding:var(--s5) var(--s5) var(--s5) 0;border-block-end:1px solid var(--line)}
.steps .n{display:inline-grid;place-items:center;inline-size:48px;block-size:48px;font-family:var(--f-display);font-size:1.375rem;font-weight:500;color:#fff;background:var(--teal);margin-block-end:var(--s4);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.steps li:nth-child(2) .n{background:var(--brand)}
.steps li:nth-child(3) .n{background:var(--mustard);color:var(--ink)}
.steps li:nth-child(4) .n{background:var(--ink)}
.steps h3{margin-block-end:var(--s2)}
@media (min-width:1000px){.steps li+li{padding-inline-start:var(--s5);border-inline-start:1px solid var(--line)}}
/* scrap: the quote on teal */
.scrap{background:var(--teal);color:#fff;padding-block:var(--sec);position:relative;overflow:hidden}
.scrap .wrap{position:relative}
.scrap blockquote{margin:0}
.scrap blockquote p{font-family:var(--f-display);font-style:italic;font-weight:340;font-size:clamp(2rem,1.3rem + 3.2vw,4.25rem);line-height:1.08;letter-spacing:-.02em;max-inline-size:20ch;color:#fff;font-variation-settings:"opsz" 144,"SOFT" 100}
.bits{position:absolute;inset-inline-end:var(--gutter);inset-block-end:calc(var(--sec) * -1);inline-size:min(30vw,300px);block-size:min(30vw,300px);pointer-events:none}
.bits i{position:absolute;display:block}
.bits i:nth-child(1){inset:auto 0 0 auto;inline-size:62%;block-size:62%;background:var(--mustard);clip-path:polygon(10% 0,100% 8%,92% 100%,0 86%)}
.bits i:nth-child(2){inset:12% 40% auto auto;inline-size:42%;block-size:42%;background:var(--scrap);clip-path:polygon(50% 0,100% 100%,0 92%)}
.bits i:nth-child(3){inset:auto 50% 8% auto;inline-size:26%;block-size:26%;background:var(--cream)}
@media (max-width:759.98px){.bits{display:none}}
/* journal cards */
.cards3{list-style:none;padding:0;display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.card-j{--ear-c:var(--bg);display:grid;align-content:start;gap:var(--s2);block-size:100%;padding:var(--s5);background:var(--surface);border:2px solid var(--ink);text-decoration:none;color:var(--fg)}
.card-j time{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.card-j b{font-family:var(--f-display);font-weight:500;font-size:1.625rem;line-height:1.12}
.card-j span{color:var(--muted)}
.card-j:hover b{color:var(--brand-t);text-decoration:underline;text-decoration-thickness:1px}
/* commission desk */
.desk-grid{display:grid;gap:var(--s6)}
.desk-grid>*{min-inline-size:0}
.desk-grid h2{margin-block-end:var(--s3)}
.desk-grid .lead{margin-block-end:var(--s3)}
.desk .form-card,.form-card{--ear-c:var(--kraft)}
@media (min-width:1000px){.desk-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s8)}}