/* Each photo essay follows the visual language of its own fictional business. */
.photo-showcase .photo-heading h2{overflow-wrap:normal}
.photo-story-step>small{display:inline-block}
@media(min-width:701px){
 body:is(.identity-02,.identity-05,.identity-07,.identity-12,.identity-13,.identity-14,.identity-17,.identity-22,.identity-24,.identity-28) .photo-narrative{grid-template-columns:1fr 1.15fr}
 body:is(.identity-02,.identity-05,.identity-07,.identity-12,.identity-13,.identity-14,.identity-17,.identity-22,.identity-24,.identity-28) .photo-story-stage{grid-column:2;grid-row:1}
 body:is(.identity-02,.identity-05,.identity-07,.identity-12,.identity-13,.identity-14,.identity-17,.identity-22,.identity-24,.identity-28) .photo-story-steps{grid-column:1;grid-row:1}
}
/* 01: measured Swiss service index */
.identity-01 .photo-heading{border-top:2px solid;padding-top:24px;align-items:start}
.identity-01 .photo-story-stage{border:0;box-shadow:12px 0 0 var(--accent)}
.identity-01 .photo-story-step>small{border-left:4px solid var(--accent);padding-left:12px}
/* 02: geometric electric composition */
.identity-02 .photo-heading h2{max-width:12ch;text-transform:uppercase}
.identity-02 .photo-story-stage{border:5px solid var(--ink);box-shadow:14px 14px 0 var(--accent)}
.identity-02 .photo-story-step>small{background:var(--accent);color:var(--ink);padding:8px 14px;align-self:start}
/* 04: roof-site safety language */
.identity-04 .photo-heading{border-left:12px solid var(--accent);padding-left:24px}
.identity-04 .photo-heading h2{text-transform:uppercase}
.identity-04 .photo-story-stage{border:7px solid var(--accent)}
.identity-04 .photo-story-step>small{background:var(--accent);color:#171a19;padding:6px 12px;align-self:start;font-weight:800}
/* 05: workshop joinery */
.identity-05 .photo-heading{border-bottom:3px double;padding-bottom:25px}
.identity-05 .photo-story-stage{border:10px ridge var(--accent);padding:0}
.identity-05 .photo-story-step{border-top:3px double}
/* 06: friendly cleaning shapes */
.identity-06 .photo-heading h2{max-width:11ch}
.identity-06 .photo-story-stage{border-radius:46% 46% 24px 24px;box-shadow:10px 10px 0 var(--accent)}
.identity-06 .photo-story-step>small{border:2px solid;border-radius:50px;padding:7px 14px;align-self:start;transform:rotate(-3deg)}
/* 07: an editorial color journal */
.identity-07 .photo-heading{display:block;border-top:1px solid;padding-top:22px}
.identity-07 .photo-heading>p{margin:22px 0 0 auto;max-width:36ch}
.identity-07 .photo-story-stage{border:0;aspect-ratio:4/5}
.identity-07 .photo-story-step h3{font-style:italic}
/* 08: architectural material study */
.identity-08 .photo-heading{align-items:start;border-top:1px solid;padding-top:30px}
.identity-08 .photo-story-stage{aspect-ratio:4/5;border:0}
.identity-08 .photo-story-step{padding-left:24px;border-left:1px solid}
/* 09: construction-site bold */
.identity-09 .photo-heading{border:4px solid;padding:26px}
.identity-09 .photo-heading h2{text-transform:uppercase}
.identity-09 .photo-story-stage{border:5px solid;box-shadow:12px 12px 0 var(--accent)}
.identity-09 .photo-story-step>small{font-weight:900;letter-spacing:.14em}
/* 12: annotated blueprint */
.identity-12 .photo-heading{border:1px dashed;padding:24px}
.identity-12 .photo-story-stage{border:2px dashed var(--accent);outline:1px solid var(--ink);outline-offset:8px}
.identity-12 .photo-story-step>small{border:1px solid;padding:6px 10px;align-self:start}
/* 13: newspaper photo desk */
.identity-13 .photo-heading{display:block;text-align:center;border-top:5px double;border-bottom:5px double;padding:22px 0}
.identity-13 .photo-heading>div{margin:auto}.identity-13 .photo-heading h2{max-width:none}
.identity-13 .photo-heading>p{margin:14px auto 0;max-width:48ch}
.identity-13 .photo-story-stage{border:8px solid var(--base);outline:1px solid var(--ink)}
.identity-13 .photo-story-step h3{font-weight:700}
/* 14: mid-century garden */
.identity-14 .photo-heading h2{max-width:12ch}
.identity-14 .photo-story-stage{border:0;border-radius:48% 8% 48% 8%;box-shadow:12px 12px 0 var(--accent)}
.identity-14 .photo-story-step>small{border-radius:50%;border:1px solid;padding:12px;align-self:start}
/* 17: soft comfort */
.identity-17 .photo-story-stage{border:0;border-radius:28px;box-shadow:0 18px 45px #0002}
.identity-17 .photo-story-step{border:0;border-radius:24px;padding:40px;margin-bottom:20px;background:color-mix(in srgb,var(--ink) 6%,var(--base))}
.identity-17 .photo-story-step:last-child{border:0}
/* 18: letterman playbook */
.identity-18 .photo-heading{border-top:8px double var(--accent);padding-top:24px}
.identity-18 .photo-heading h2{text-transform:uppercase}
.identity-18 .photo-story-stage{border:8px double var(--ink)}
.identity-18 .photo-story-step{border-top:4px solid var(--accent)}
/* 19: organic botanical field book */
.identity-19 .photo-heading{align-items:center}
.identity-19 .photo-story-stage{border:0;border-radius:49% 49% 2% 2%;aspect-ratio:4/5}
.identity-19 .photo-story-step h3{font-style:italic}
/* 21: saturated Memphis pop */
.identity-21 .photo-heading{border:4px solid;padding:25px;box-shadow:9px 9px 0 var(--accent);margin-right:10px}
.identity-21 .photo-story-stage{border:4px solid;box-shadow:12px 12px 0 var(--accent)}
.identity-21 .photo-story-step>small{background:var(--accent);color:var(--ink);padding:8px 14px;align-self:start;transform:rotate(3deg)}
/* 22: classic garage archive */
.identity-22 .photo-heading{border-block:3px double;padding:24px 0}
.identity-22 .photo-story-stage{border:12px solid var(--ink);outline:2px solid var(--accent);outline-offset:-7px}
.identity-22 .photo-story-step h3{letter-spacing:-.02em}
/* 23: cinematic night shift */
.identity-23 .photo-heading{border-left:3px solid var(--accent);padding-left:25px}
.identity-23 .photo-story-stage{border:1px solid var(--accent);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 30%,transparent)}
.identity-23 .photo-story-step>small{color:var(--accent);letter-spacing:.2em}
/* 24: considered landscape portfolio */
.identity-24 .photo-heading{display:block;text-align:center}
.identity-24 .photo-heading>div{margin:auto}.identity-24 .photo-heading h2{margin:18px auto 0}
.identity-24 .photo-heading>p{margin:20px auto 0;max-width:40ch}
.identity-24 .photo-story-stage{border:0;aspect-ratio:4/5}
.identity-24 .photo-story-step{border-top:0;border-bottom:1px solid}
/* 25: service ledger */
.identity-25 .photo-heading{border-top:2px solid;border-bottom:2px solid;padding:20px 0}
.identity-25 .photo-story-stage{border:1px solid;box-shadow:7px 7px 0 color-mix(in srgb,var(--accent) 35%,transparent)}
.identity-25 .photo-story-step{padding-left:28px;border-left:2px solid var(--accent)}
/* 28: handmade yard scrapbook */
.identity-28 .photo-heading h2{transform:rotate(-1deg)}
.identity-28 .photo-story-stage{border:14px solid #fffbea;box-shadow:0 9px 22px #0003;transform:rotate(1deg)}
.identity-28 .photo-story-step>small{background:var(--accent);padding:8px 12px;align-self:start;transform:rotate(-3deg)}
@media(max-width:700px){
 .photo-showcase .photo-heading{gap:0}
 body:is(.identity-02,.identity-09,.identity-21) .photo-heading{padding:18px}
 .identity-17 .photo-story-step{padding:25px}
 .identity-08 .photo-story-step,.identity-25 .photo-story-step{padding-left:16px}
 .identity-07 .photo-story-step img,.identity-24 .photo-story-step img{aspect-ratio:4/3}
 .identity-06 .photo-story-step img{border-radius:38% 38% 20px 20px}
 .identity-19 .photo-story-step img{border-radius:44% 44% 0 0}
 .identity-14 .photo-story-step img{border-radius:38% 8% 38% 8%}
 .identity-28 .photo-story-step img{border:8px solid #fffbea;box-shadow:0 5px 14px #0002}
 .identity-17 .photo-story-step img{border-radius:18px}
}
@media(prefers-reduced-motion:reduce){.photo-story-stage{transform:none!important}.photo-story-step>small{transform:none!important}}