/* Dark paper matches Work; accents continue to follow the active palette. */
#about.about-desk{--paper:#171919;--ink:#f5f1e8;--muted:#c1bbb0;--line:#f5f1e82b;display:block;position:relative;isolation:isolate;background:linear-gradient(180deg,#090b0c 0%,var(--paper) 55%,color-mix(in srgb,var(--firefly-light,#ffc09b) 9%,var(--paper)) 100%);color:var(--ink);border-top:1px solid var(--line);margin-inline:-20px;padding:clamp(64px,7.5vw,120px) 20px;overflow:clip}
.about-fireflies{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;color:var(--firefly-light,#ffc09b)}
.about-fireflies canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
#about .about-texture{position:absolute;inset:0;z-index:0;opacity:.16;mix-blend-mode:soft-light}
#about .about-grid{position:absolute;inset:0 20px;z-index:0;background-attachment:fixed;background-size:calc((100vw - 40px)/4) 100%,100% 180px;background-position:19px 0,0 0}
.about-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,6vw,96px);align-items:start}
.about-label{font-family:'Ballet',cursive;font-size:clamp(52px,5.5vw,88px);line-height:1.2;font-weight:400;letter-spacing:0;margin:0 0 22px;padding:8px 0 0 10px}
#about .about-title{font-family:Helvetica,Arial,sans-serif;font-size:clamp(38px,4.3vw,76px);font-weight:700;line-height:1;letter-spacing:-.06em;margin:0 0 32px}
.about-introduction{max-width:54ch}
.about-introduction p{font-size:16px;line-height:1.65;letter-spacing:-.02em;margin:0 0 20px}
.about-introduction p:last-child{margin-bottom:0}
.about-discovery-home{margin-top:30px;min-height:146px}
.about-discovery-controls{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:min(240px,100%);pointer-events:auto}
.about-thread-button{position:relative;display:grid;place-items:center;flex:none;width:76px;height:76px;min-height:0;padding:0;border:1px solid var(--ink);border-radius:50%;background:#fff;color:#20251f;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:background-color .25s,color .25s,border-color .25s;transform:translate(var(--pull-x,0px),var(--pull-y,0px))}
.about-thread-drawing{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%;pointer-events:none;user-select:none}
.about-thread-button:is(:hover,:focus-visible){background:#fff;border-color:var(--accent);color:#20251f}
.about-thread-button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.about-thread-button.is-pulling{cursor:grabbing}
.about-thread-label{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);display:block;width:max-content;max-width:140px;white-space:nowrap;color:var(--ink);font-size:12px;line-height:1.4;letter-spacing:-.02em;pointer-events:none}
.about-thread-hint{width:max-content;max-width:240px;margin:40px 0 0;color:var(--muted);font-size:10px;line-height:1.5;letter-spacing:.02em;text-align:left}
.about-thread-instructions{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.about-pull-string{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none;opacity:.85}
.about-pull-string.is-pulling{opacity:1}
.about-pull-string path{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round}
.about-card-paper{position:relative;flex:none;width:min(100%,var(--desk-card-width));height:var(--desk-card-height);transform:rotate(calc(var(--card-angle,-3deg) + var(--stack-pull,0deg)));transform-origin:50% 50%;perspective:1100px}
.about-portrait-stage{grid-column:1;grid-row:1;position:relative;z-index:1;min-width:0;width:min(100%,600px);height:690px;justify-self:center;padding:10px 8px 0}
.about-portrait{position:relative;z-index:1;margin:0;width:min(88%,440px);height:480px;border:1px solid var(--line);border-radius:4px;background:color-mix(in srgb,var(--ink) 5%,var(--paper));overflow:hidden;transform:rotate(-2deg)}
.about-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 10%}
.about-personal-copy{grid-column:2;grid-row:1;min-width:0;position:relative;z-index:1}
.about-card-slot{--desk-card-width:280px;--desk-card-height:346px;grid-column:1;grid-row:1;align-self:end;justify-self:end;position:relative;z-index:2;width:min(100%,600px);height:380px;margin-top:280px;padding:10px 12px 14px;display:flex;align-items:flex-start;justify-content:flex-end;pointer-events:none}
.about-card-deck{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(calc(var(--card-facing,180deg) + var(--pull-flip,0deg)))}
.about-card-slot.has-card .about-card-deck{--card-facing:0deg}
.about-card-turn{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:translateZ(0)}
.about-card-back{position:absolute;inset:0;color:var(--on-accent);background:var(--accent);border:1px solid currentColor;border-radius:4px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg) translateZ(1px);pointer-events:none}
.about-back-design{display:block;width:100%;height:100%;border-radius:3px}
.about-card-rest{position:absolute;inset:0;transform-style:preserve-3d;transform:translate3d(0,8px,-14px) rotateZ(calc(6deg - var(--stack-pull,0deg) * .25));pointer-events:none}
.about-card-rest[data-layer="1"]{transform:translate3d(0,8px,-7px) rotateZ(calc(-2deg + var(--stack-pull,0deg) * .2))}
.about-card-rest-front{transform:translateZ(1px)}
.about-card{--paper:#fff;--ink:#20251f;--muted:#60665e;--line:#20251f26;position:absolute;inset:0;z-index:2;flex:none;width:100%;height:var(--desk-card-height);padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:4px;box-shadow:0 8px 20px #0003;transform:translateZ(1px);backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:auto;margin-top:0}
.about-card-header{display:flex;justify-content:space-between;gap:12px;font-size:9px;line-height:1.4;letter-spacing:1px;text-transform:uppercase}
.about-card-count{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.about-card-visual{height:110px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 4%,var(--paper));border:1px solid var(--line);border-radius:2px;overflow:hidden;color:var(--ink)}
.about-card-visual svg{display:block;width:100%;height:100%}
.about-card[data-visual="painting"] .about-card-visual{background:color-mix(in srgb,var(--sculpture) 12%,var(--paper))}
.about-card[data-visual="record"] .about-card-visual{background:color-mix(in srgb,var(--accent) 15%,var(--paper))}
.about-card[data-visual="animal"] .about-card-visual{background:color-mix(in srgb,var(--ink) 7%,var(--paper))}
.about-card h3{font-size:20px;font-weight:700;line-height:1.1;letter-spacing:-.04em;margin:0;overflow-wrap:anywhere}
.about-card p{font-size:13px;line-height:1.5;margin:0;overflow-wrap:anywhere}
.about-card[data-layout="illustrated"]{padding:14px;gap:0}
.about-card[data-layout="illustrated"] .about-card-header{font-size:10px;line-height:1.15;letter-spacing:0}
.about-card[data-layout="illustrated"] .about-card-header>span:first-child{max-width:15ch}
.about-card[data-layout="illustrated"] .about-card-count{color:var(--ink)}
.about-card[data-layout="illustrated"] .about-card-visual{flex:1;min-height:0;height:auto;border:0;border-radius:0;background:transparent}
.about-card[data-layout="illustrated"] .about-card-visual img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;padding:14px 16px}
.about-card[data-layout="illustrated"] h3{font-size:20px;line-height:1.05;letter-spacing:-.04em;margin-top:4px}
.about-card[data-layout="illustrated"] p{margin-top:10px;flex:none}
.about-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:1000px) and (min-width:651px){.about-layout{gap:28px}.about-introduction p{font-size:14px}.about-portrait{height:410px;width:92%}.about-portrait-stage{height:650px}.about-card-slot{--desk-card-width:260px;margin-top:250px}.about-label{margin-bottom:18px}}

@media(max-width:650px){
 #about.about-desk{margin-inline:-12px;padding:56px 12px 40px}
 #about .about-grid{inset-inline:12px;background-size:calc((100vw - 24px)/2) 100%,100% 140px;background-position:11px 0,0 0}
 .about-layout{grid-template-columns:minmax(0,1fr);gap:0}
 .about-personal-copy{display:contents}
 .about-label{grid-column:1;grid-row:1;font-size:56px;margin:0 0 22px}
 #about .about-title{grid-column:1;grid-row:2;font-size:clamp(36px,8.6vw,52px);margin-bottom:26px}
 .about-portrait-stage{grid-column:1;grid-row:3;height:auto;width:100%;padding:0 10px;margin-bottom:32px}
 .about-portrait{width:100%;height:clamp(280px,85vw,430px);transform:rotate(-1.5deg)}
 .about-introduction{grid-column:1;grid-row:4;max-width:54ch}
 .about-introduction p{font-size:15px;line-height:1.6;margin-bottom:18px}
 .about-label,.about-title,.about-introduction,.about-discovery-home{position:relative;z-index:1}
 .about-discovery-home{grid-column:1;grid-row:6;width:100%;margin-top:18px;min-height:246px}
 .about-discovery-controls{width:100%;align-items:center}
 .about-thread-hint{text-align:center}
 .about-thread-drawing{transform:rotate(90deg)}
 .about-card-slot{grid-column:1;grid-row:5;width:100%;height:calc(var(--desk-card-height) + 30px);margin:26px 0 0;justify-self:center;justify-content:center;padding:14px 12px 22px}
 .about-card-paper{--card-angle:-2deg}
 .about-card{height:var(--desk-card-height);width:100%;transform:translateZ(1px);padding:18px}
}
@media(prefers-reduced-motion:reduce){.about-thread-button{transition:none}}
@media(max-width:650px) and (max-height:520px){.about-card-slot{--desk-card-width:260px;--desk-card-height:272px;height:calc(var(--desk-card-height) + 30px)}.about-card{padding:14px;gap:9px}.about-card-visual{height:64px}.about-card h3{font-size:18px}.about-card p{font-size:12px;line-height:1.4}}

/* Portrait pocket: the deck peeks out, then a pulled card takes the foreground. */
.about-portrait-stage{height:540px}
.about-portrait{z-index:2}
.about-portrait-stage>.about-card-slot{position:absolute;inset:70px 0 auto auto;z-index:1;width:280px;height:346px;margin:0;padding:0;display:block;--desk-card-width:280px;--desk-card-height:346px}
.about-portrait-stage .about-card-paper{transform:translate(0,0) rotate(-12deg)}
.about-portrait-stage>.about-card-slot.is-presented{z-index:3}
.about-card-slot:not(.is-presented) .about-card{pointer-events:none}
.about-card-slot.is-presented .about-card-rest{visibility:hidden}
@media(max-width:1000px) and (min-width:651px){.about-portrait-stage{height:460px}.about-portrait-stage>.about-card-slot{right:-8px;width:260px;--desk-card-width:260px}}
@media(max-width:650px){
 .about-portrait-stage{height:auto;margin:10px 0 36px;padding:0 24px 0 0}
 .about-portrait{width:100%}
 .about-portrait-stage>.about-card-slot{top:22px;right:0;width:min(75%,280px);--desk-card-height:346px;height:346px}
 .about-discovery-home{grid-row:5;min-height:160px;margin-top:26px}
 .about-card-slot.is-presented .about-card-paper{max-width:100%}
}

/* Single-sided cards sit almost entirely inside the portrait footprint. */
.about-portrait-stage{overflow:visible}
.about-portrait-stage>.about-card-slot{right:auto;overflow:visible}
.about-portrait-stage .about-card-paper{transform:translate(0,0) rotate(0deg)}
.about-card-slot .about-card-deck{transform:none;transform-style:flat}
.about-card-slot .about-card-turn{transform:none;transform-style:flat}
.about-card-slot .about-card{backface-visibility:visible;-webkit-backface-visibility:visible;transform:none}
.about-card-slot .about-card-back,.about-card-slot .about-card-rest{display:none}

.about-pocket-rest{position:absolute;inset:0;background:#fff;border:1px solid #20251f40;border-radius:4px;transform:translate(calc(5px + var(--layer)*5px),calc(-4px - var(--layer)*5px));box-shadow:0 3px 8px #0003;pointer-events:none;overflow:hidden}
.about-pocket-rest img{width:100%;height:100%;object-fit:contain;padding:28px}
.about-portrait-stage .about-card-paper{z-index:4}

.about-card-slot.is-presented .about-pocket-rest{visibility:hidden}

.about-pocket-stack{position:absolute;z-index:1;pointer-events:none}
.about-pocket-stack .about-pocket-rest{visibility:visible}
.about-portrait-stage{height:620px}
@media(max-width:1000px) and (min-width:651px){.about-portrait-stage{height:560px}}
@media(max-width:650px){.about-portrait-stage{height:auto;padding-bottom:145px}}

/* A small fan peeks along the upper right edge of the portrait. */
.about-pocket-stack .about-pocket-rest{transform-origin:0 100%;transform:translate(calc(var(--stack-depth)*8px),calc(var(--stack-depth)*12px)) rotate(calc(2deg + var(--stack-depth)*3deg));background:#f0efeb}

.about-pocket-stack .about-pocket-rest,.about-pocket-back{color:var(--on-accent);background:var(--accent);border:1px solid currentColor}
.about-pocket-back{position:absolute;inset:0;border-radius:4px;z-index:5;pointer-events:none;overflow:hidden}
.about-card-slot.is-presented .about-pocket-back{display:none}
.about-pocket-stack .about-back-design,.about-pocket-back .about-back-design{width:100%;height:100%;display:block}

.about-portrait-stage .about-card-paper{transform-style:preserve-3d}
.about-card-slot .about-card-deck,.about-card-slot .about-card-turn{transform-style:preserve-3d}
.about-card-slot .about-card{backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(1px)}
.about-pocket-back{backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(2px)}
.about-card-slot:is(.is-presented,.is-turning) .about-pocket-back{display:block;transform:rotateY(180deg) translateZ(2px)}

.about-portrait-stage>.about-card-slot.is-emerging{z-index:0}

/* Let rotated corners and shadows extend beyond the layout boxes. */
#about.about-desk{overflow:visible}
.about-layout,.about-card-slot,.about-card-paper,.about-card-deck,.about-card-turn{overflow:visible}
@media(max-width:650px){.about-portrait-stage>.about-card-slot{width:min(280px,calc(100vw - 128px))}}

/* Accumulated pulls form a foreground fan; the separate rear stack counts down. */
.about-portrait-stage>.about-front-card{z-index:3;pointer-events:none}
.about-portrait-stage>.about-card-slot.is-presented:not(.about-front-card){z-index:var(--front-card-z,8)}
.about-card-slot.is-empty{visibility:hidden}

.about-portrait{transform-origin:50% 55%;will-change:transform}

/* Softer linework on every copy of the card back. */
.about-back-design [stroke="currentColor"]{stroke:color-mix(in srgb,var(--on-accent) 55%,var(--accent))}
.about-pocket-stack .about-pocket-rest,.about-pocket-back{border-color:color-mix(in srgb,var(--on-accent) 45%,var(--accent))}

/* Shared scallop artwork uses the brighter tone selected by each theme. */
#about .about-card-back,
#about .about-pocket-stack .about-pocket-rest,
#about .about-pocket-back{background:var(--card-back-color,var(--accent)) url('about-card-back-pattern.svg') center / 100% 100% no-repeat;border:0}