/* Story components for the Art & Artist case study.
   Built on the editorial tokens, so light and dark follow the site theme. */

/* Hero: two real screens side by side, warm like the product's imagery. */
.portfolio .ap-hero--art::before {background:radial-gradient(ellipse at 50% 46%,#a07a55 0%,#5a4636 52%,#221d19 100%)}
.portfolio .ap-hero-screens {display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,3vw,36px);line-height:0}
.portfolio .ap-hero-screens img {display:block;width:auto;height:auto;max-width:44%;max-height:560px;border-radius:28px;filter:drop-shadow(0 22px 34px #0006)}
.portfolio .ap-hero-screens img+img {margin-top:48px}

/* The question that reset the project. */
.portfolio .ap-quote {margin:8px 0 0 176px;padding:4px 0 4px 24px;border-left:2px solid var(--ap-accent)}
.portfolio .ap-quote p {font:italic 400 clamp(26px,3.4vw,38px)/1.15 'Averia Serif Libre',Georgia,serif;letter-spacing:-.02em;color:var(--ap-ink);max-width:24ch;text-wrap:balance}
.portfolio .ap-quote footer {margin-top:12px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ap-muted)}

/* Annotated screen: numbered pins on the image, notes beside it. */
.portfolio .ap-annotated {display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:center;margin-top:28px;padding:clamp(18px,3vw,32px);background:var(--ap-surface);border-radius:17px}
.portfolio .ap-annotated-screen .ap-image-button {position:relative;border:0;background:transparent;overflow:visible}
.portfolio .ap-annotated-screen img {border-radius:26px;box-shadow:0 18px 40px #0000001f}
.portfolio .ap-pin,.portfolio .ap-annotated-notes li>span {display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ap-accent);color:light-dark(#fff,#052e22);font:600 13px/1 'Inclusive Sans',sans-serif;flex:0 0 auto}
.portfolio .ap-pin {position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 3px color-mix(in srgb,var(--ap-paper) 70%,transparent),0 6px 14px #0004}
.portfolio .ap-annotated-notes ol {list-style:none;margin:0;padding:0;display:grid;gap:18px}
.portfolio .ap-annotated-notes li {display:flex;gap:14px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ap-secondary)}
.portfolio .ap-annotated-notes li p {margin:3px 0 0}
.portfolio .ap-annotated-notes li strong {font-weight:500;color:var(--ap-ink)}
.portfolio .ap-annotated-notes figcaption {margin-top:22px;padding-top:16px;border-top:1px solid var(--ap-line);font-size:13px;color:var(--ap-muted)}

/* Four generations of Home: same width, each scrollable on its own. */
.portfolio .ap-generations {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px}
.portfolio .ap-gen {margin:0;min-width:0;display:flex;flex-direction:column}
.portfolio .ap-gen figcaption {display:grid;gap:3px;margin-bottom:12px;font-size:12px;color:var(--ap-muted)}
.portfolio .ap-gen figcaption span {font:600 12px/1 'Inclusive Sans',sans-serif;letter-spacing:.08em;color:var(--ap-accent)}
.portfolio .ap-gen figcaption strong {font:400 19px/1.2 'Averia Serif Libre',Georgia,serif;color:var(--ap-ink)}
.portfolio .ap-gen-window {height:clamp(440px,52vw,620px);overflow-y:auto;border:1px solid var(--ap-line);border-radius:14px;background:var(--ap-surface);scrollbar-width:thin;overscroll-behavior:contain}
.portfolio .ap-gen-window .ap-image-button {border:0;border-radius:0}
.portfolio .ap-gen-window .ap-image-button:hover {transform:none;box-shadow:none}
.portfolio .ap-gen p {margin-top:12px;font-size:13px;line-height:1.5;color:var(--ap-secondary)}
.portfolio .ap-gen-window:focus-visible,.portfolio .ap-strip:focus-visible {outline:3px solid var(--ap-accent);outline-offset:2px}
.portfolio .ap-chapter-head--follow {margin:44px 0 0}

/* What testing changed. */
.portfolio .ap-learnings {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.portfolio .ap-learn {padding:22px;background:var(--ap-surface);border-radius:17px}
.portfolio .ap-learn h3 {font-size:20px;line-height:1.2;letter-spacing:-.4px;margin-bottom:14px}
.portfolio .ap-learn dl {display:grid;gap:12px}
.portfolio .ap-learn dt {font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ap-muted)}
.portfolio .ap-learn dd {margin-top:4px;font-size:14px;line-height:1.5;color:var(--ap-secondary)}
.portfolio .ap-learn div:last-child dt {color:var(--ap-accent)}
.portfolio .ap-learn div:last-child dd {color:var(--ap-ink)}

/* Short cases. */
.portfolio .ap-cases {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.portfolio .ap-cases article {padding:22px;border:1px solid var(--ap-line);border-radius:17px}
.portfolio .ap-cases span {font:600 12px/1 'Inclusive Sans',sans-serif;letter-spacing:.08em;color:var(--ap-accent)}
.portfolio .ap-cases h3 {font-size:20px;line-height:1.2;letter-spacing:-.4px;margin:12px 0 8px}
.portfolio .ap-cases p {font-size:14px;line-height:1.55;color:var(--ap-secondary)}

/* A sideways strip for a sequence of screens. */
.portfolio .ap-strip {display:flex;gap:14px;overflow-x:auto;margin-top:28px;padding-bottom:10px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.portfolio .ap-strip .ap-stage {flex:0 0 clamp(180px,19%,200px);scroll-snap-align:start;padding:14px}
.portfolio .ap-strip figcaption {font-size:13px;color:var(--ap-secondary);text-align:center;margin-top:10px}

/* Tables: captions and the then/now comparison. */
.portfolio .ap-table-wrap caption {caption-side:bottom;text-align:left;padding-top:10px;font-size:12px;color:var(--ap-muted)}
.portfolio .ap-compare td:first-child {color:var(--ap-secondary)}
.portfolio .ap-compare td:last-child {color:var(--ap-ink)}

@media(max-width:860px){
 .portfolio .ap-generations {grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(72%,300px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
 .portfolio .ap-gen {scroll-snap-align:start}
 .portfolio .ap-learnings,.portfolio .ap-cases {grid-template-columns:1fr}
}
@media(max-width:650px){
 .portfolio .ap-hero-screens img {max-height:340px;border-radius:17px}
 .portfolio .ap-hero-screens img+img {margin-top:28px}
 .portfolio .ap-quote {margin-left:0}
 .portfolio .ap-annotated {grid-template-columns:1fr}
 .portfolio .ap-annotated-screen {max-width:300px;margin:0 auto}
 .portfolio .ap-gen-window {height:460px}
 .portfolio .ap-chapter-head--follow {margin-top:32px}
}