/* v11 layer: components for the two home strategies (11a systems first, 11b images first). */

/* ---- shared ---- */
.y-also{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:48px;align-items:start;margin-top:64px}
.y-also .x-also{margin-top:0}
.y-lab .x-frame{border-color:#50514a;background:#111}
.y-lab figcaption{color:#a7a89f}
.x-egro .x-fig figcaption{white-space:nowrap}

/* ---- 11a hero: pipeline console ---- */
.y-hero-a h1{font-size:clamp(40px,4.9vw,70px);line-height:1.03;max-width:13ch}
.y-hero-a .x-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.y-console{margin:0;background:#1a1b19;color:#eeefe7;border:1px solid #45473d;border-radius:3px;overflow:hidden;background-image:radial-gradient(#33342e 1px,transparent 1.2px);background-size:14px 14px}
.y-console-head{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid #35382f;font:12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#bfc3b6;background:#1a1b19}
.y-console-head i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:1px}
.y-console-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center;padding:18px}
.y-console-flow>div{position:relative;background:#fff;aspect-ratio:4/5;overflow:hidden}
.y-console-flow img{width:100%;height:100%;object-fit:cover}
.y-console-flow span{position:absolute;left:8px;top:8px;padding:3px 8px;border-radius:30px;background:#1a1b19;color:#eeefe7;font:11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.y-console-flow b{font:400 20px/1 var(--mono);color:#bfc3b6}
.y-console-steps{list-style:none;margin:0;padding:0 18px;background:#1a1b19;border-top:1px solid #35382f}
.y-console-steps li{display:grid;grid-template-columns:30px minmax(0,auto) minmax(0,1fr);gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px solid #2b2d26;font:13px/1.4 var(--mono)}
.y-console-steps li:last-child{border-bottom:0}
.y-console-steps span{color:#8b8f80}
.y-console-steps em{font-style:normal;color:#a7a89f;text-align:right;font-size:12px}
.y-console figcaption{padding:13px 18px;border-top:1px solid #45473d;background:#1a1b19;font:13px/1.4 var(--mono);color:#bfc3b6}
.y-console figcaption strong{font-weight:500;color:#fff;font-size:19px;letter-spacing:-.03em;margin-right:6px}

/* ---- 11a Dickies chain ---- */
.y-chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:.62fr .62fr 1fr 1fr;gap:28px;align-items:start}
.y-chain>li{position:relative;min-width:0;border-top:1px solid var(--ink);padding-top:14px}
.y-chain>li>.mono{display:block;margin-bottom:14px;text-transform:uppercase;font-size:12.5px}
.y-chain>li:not(:last-child):after{content:'→';position:absolute;right:-22px;top:46%;font:20px/1 var(--mono)}
.y-chain .x-garment-stack{aspect-ratio:auto;padding:10px;gap:8px}
.y-chain .x-garment-stack .garment-item{aspect-ratio:1/1}
.y-chain .x-frame{aspect-ratio:3/4}
.y-then{margin-top:28px;padding:18px 22px;border-left:2px solid var(--red);background:#faf9f5;font-size:16px;line-height:1.65;color:#42433e;max-width:none}
.y-then strong{color:var(--ink);font-weight:500}

/* ---- 11a method ---- */
.y-method{border-top:1px solid var(--line)}
.y-rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.y-rules li{position:relative;padding:28px 36px 30px 74px;border-bottom:1px solid var(--line)}
.y-rules li:nth-child(odd){border-right:1px solid var(--line);padding-left:64px}
.y-rules li:nth-child(odd) .y-rule-n{left:0}
.y-rule-n{position:absolute;left:28px;top:30px;font:500 15px/1 var(--mono);color:var(--red)}
.y-rules h3{font-size:22px;line-height:1.25;letter-spacing:-.035em;margin-bottom:12px}
.y-rules p{font-size:16px;line-height:1.65;color:#42433e}
.y-rules .mono{display:inline-block;margin-top:14px;text-transform:uppercase;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:30px;padding:4px 10px}

/* ---- 11a toolbox ---- */
.y-toolbox{margin-top:64px;border-top:1px solid #50514a}
.y-toolbox-title{text-transform:uppercase;color:#a7a89f;font-size:12.5px;padding:16px 0 4px;max-width:none}
.y-toolbox dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.y-toolbox dl>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid #35362f;align-items:baseline}
.y-toolbox dt{font:12.5px/1.4 var(--mono);letter-spacing:.045em;text-transform:uppercase;color:#a7a89f}
.y-toolbox dd{margin:0;font-size:15.5px;line-height:1.5;color:#eeefe7}
.y-toolbox+.y-also{margin-top:40px}

/* ---- 11b hero: three kinds of work ---- */
.y-hero-b .x-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4%,56px)}
.y-hero-b h1{font-size:clamp(48px,5.6vw,84px)}
.y-bento{display:grid;grid-template-columns:1fr 1.15fr;grid-template-rows:1fr 1fr;gap:10px;aspect-ratio:1/.92;min-width:0}
.y-bento figure{position:relative;margin:0;overflow:hidden;border:1px solid var(--ink);background:#1a1b19;min-height:0}
.y-bento img{width:100%;height:100%;object-fit:cover}
.y-bento-a{grid-row:1/3}
.y-bento-a img{object-position:50% 15%}
.y-bento-b img{object-position:38% 50%}
.y-bento .x-tag{left:10px;top:auto;bottom:10px}

/* ---- 11b Dickies: three different looks ---- */
.y-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.y-three .x-frame{aspect-ratio:3/4}
.y-how{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center;margin-top:36px;padding-top:28px;background:radial-gradient(circle,#9c9d93 0 1px,transparent 1.4px) 0 0/8px 3px repeat-x}
.y-how .x-garment-stack{aspect-ratio:auto;padding:10px;gap:8px}
.y-how .x-garment-stack .garment-item{aspect-ratio:1/1}
.y-how .x-dickies-inputs .x-arrow{margin-top:-30px}
.y-how .x-note{border-top:0;padding-top:0}

@media(max-width:1000px){
.y-toolbox dl{grid-template-columns:1fr}
.y-chain{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
.y-chain>li:nth-child(2):after{display:none}
.y-also{grid-template-columns:minmax(0,1fr) 170px;gap:28px}
}
@media(max-width:760px){
.y-hero-a .x-hero-grid,.y-hero-b .x-hero-grid{grid-template-columns:1fr}
.y-hero-a h1{font-size:clamp(34px,9.6vw,48px);max-width:none}
.y-console{order:0}
.y-console-steps li{grid-template-columns:26px minmax(0,1fr)}
.y-console-steps em{grid-column:2;text-align:left}
.y-bento{order:0;aspect-ratio:1/1.02}
.y-rules{grid-template-columns:1fr}
.y-rules li,.y-rules li:nth-child(odd){padding:24px 0 26px 44px;border-right:0}
.y-rule-n{left:0;top:27px}
.y-three{gap:10px}
.y-three figcaption{font-size:12px}
.y-how{grid-template-columns:1fr;gap:24px}
.y-also{grid-template-columns:1fr}
.y-lab{max-width:240px}
.y-toolbox dl>div{grid-template-columns:1fr;gap:3px}
.y-then{padding:16px 18px}
.x-egro .x-fig figcaption{white-space:normal}
}
@media(max-width:520px){
.y-chain>li:after{display:none}
.y-chain{gap:18px 14px}
}

/* refinements after first review */
.y-hero-a h1{max-width:16ch}
.y-how .x-dickies-inputs{grid-template-columns:1fr;gap:8px}
.y-how .x-garment-stack{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
.y-how .x-dickies-inputs .x-arrow{margin:0;justify-self:center;transform:rotate(90deg)}
.y-how .x-garments figcaption{margin-top:6px}
@media(max-width:760px){
.y-three{grid-template-columns:repeat(2,minmax(0,1fr))}
.y-three .x-fig:first-child{grid-column:1/-1}
}

/* v11.1: role, credits, hiring facts, portrait */
.y-role{margin:18px 0 0;font:500 clamp(17px,1.5vw,21px)/1.3 var(--mono);letter-spacing:-.01em;color:var(--ink);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;max-width:none}
.y-role strong{font-weight:500;padding:5px 12px;background:var(--ink);color:var(--paper);border-radius:30px;font-size:.82em;letter-spacing:.03em}
.x-hero .y-role+.hero-intro{margin-top:14px}
.y-credit{margin:16px 0 4px;border-top:1px solid var(--line)}
.y-credit>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;padding:8px 0;border-bottom:1px solid var(--line);align-items:baseline}
.y-credit dt{font:12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.y-credit dd{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.y-credit>div:last-child dd{font-weight:500}
.y-about{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:7%;align-items:start}
.y-about .about-statement{font-size:clamp(34px,4.2vw,58px);line-height:1.06;margin:22px 0 28px}
.y-about .about-copy p{font-size:17px;line-height:1.7;color:#42433e;max-width:60ch}
.y-hire{margin:28px 0 22px;border-top:1px solid var(--ink)}
.y-hire>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px solid var(--line);align-items:baseline}
.y-hire dt{font:12.5px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.y-hire dd{margin:0;font-size:16px;line-height:1.5}
.y-hire>div:first-child dd{font-weight:500}
.y-about-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;padding-top:44px}
.y-portrait{margin:0}
.y-portrait-frame{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid #45473d;border-radius:3px;background:#1a1b19}
.y-portrait-frame img{width:100%;height:100%;object-fit:cover}
.y-portrait figcaption{display:flex;justify-content:space-between;gap:10px;margin-top:10px;font:12.5px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.y-portrait figcaption span:first-child{color:var(--ink)}
.y-about-side .form-study{align-self:start}
@media(max-width:1100px){.y-about-side{grid-template-columns:1fr;max-width:340px}}
@media(max-width:760px){
.y-about{grid-template-columns:1fr;gap:36px}
.y-about-side{padding-top:0;grid-template-columns:1fr 1fr;max-width:none;gap:12px}
.y-hire>div{grid-template-columns:1fr;gap:2px}
.y-credit>div{grid-template-columns:78px minmax(0,1fr);gap:10px}
}

/* portrait above the form study, both at full column width */
.y-about-side{grid-template-columns:1fr;gap:18px;max-width:460px;margin-left:auto;width:100%}
.y-portrait-frame{aspect-ratio:1/1}
.y-portrait-frame img{object-position:50% 50%}
@media(max-width:1100px){.y-about-side{max-width:400px}}
@media(max-width:760px){.y-about-side{grid-template-columns:1fr;max-width:420px;margin-left:0}}

/* v11.2: roles in the hero, credits on case pages */
.y-seeking{margin:16px 0 0;max-width:none;font:13px/1.55 var(--mono);letter-spacing:.02em;color:#42433e}
.y-seeking span{display:inline-block;margin-right:8px;padding:2px 8px;border:1px solid var(--ink);border-radius:30px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.x-hero .hero-intro+.y-seeking{margin-top:14px}
.y-seeking+.hero-links{margin-top:22px}
.compact-case .case-context.y-case-dl{margin-top:30px;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 40px;padding:18px 0 0;border-left:0;border-top:1px solid var(--line)}
.compact-case .case-context.y-case-dl dt{margin-top:0}
@media(max-width:760px){.compact-case .case-context.y-case-dl{grid-template-columns:1fr 1fr;gap:12px 22px}}
.case-context .y-outcome dd{font-weight:500;color:var(--ink)}
.y-egro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.y-egro-grid .x-frame{aspect-ratio:1/1}
.y-egro-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.y-egro-split .x-frame{aspect-ratio:4/5}
.y-egro-split p{font-size:17px;line-height:1.7;color:#42433e;max-width:56ch}
.y-egro-split p+p{margin-top:16px}
@media(max-width:760px){
.y-egro-grid{grid-template-columns:1fr;gap:16px}
.y-egro-split{grid-template-columns:1fr;gap:24px}
.y-seeking{font-size:12.5px}
}