/* Afterturn is a design experiment, separate from professional projects.
   The visual explains a rule; it is not presented as a screenshot. */
.p-lab-card.p-afterturn-card{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);border-top:4px solid var(--accent);padding:0;align-items:stretch}
.at-rule-figure{margin:0;padding:26px 26px 14px;background:#ece5f3;border-right:1px solid #d5cedb;display:flex;flex-direction:column;justify-content:center;min-width:0}
.at-rule-art{background:#292135;color:#fff8ed;padding:23px 25px 21px;border:1px solid #211a2b;box-shadow:0 7px 17px #29213518}
.at-art-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.at-art-heading>span:first-child{font:650 9px/1.55 Inter,Arial,sans-serif;letter-spacing:.13em;max-width:16em;color:#e0d5ec}
.at-target{font:500 11px/1.3 Inter,Arial,sans-serif;border:1px solid #897b97;border-radius:4px;display:flex;align-items:center;gap:10px;padding:7px 10px;white-space:nowrap}
.at-target b{font:700 24px/1 Sora,Arial,sans-serif;color:#ffdc81}
.at-duel{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;margin:27px 0 23px}
.at-card-group{display:flex;flex-direction:column;align-items:center;gap:13px;min-width:0}
.at-playing-card{position:relative;width:100%;max-width:128px;aspect-ratio:.74;border:2px solid #ffdc81;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:4px 5px 0 #120e1c5e}
.at-winner{background:#ffdc81;color:#292135;transform:rotate(-5deg)}
.at-loser{background:#57406b;color:#fff8ed;border-color:#bba4ce;transform:rotate(5deg)}
.at-corner{position:absolute;top:10px;left:12px;font:600 13px/1 Sora,Arial,sans-serif}
.at-playing-card>strong{font:700 clamp(48px,4.5vw,67px)/1 Sora,Arial,sans-serif;letter-spacing:-.065em;margin:8px 4px 6px 0}
.at-card-detail{font:550 10px/1.4 Inter,Arial,sans-serif;opacity:.9}
.at-versus{font:italic 17px/1.4 Georgia,serif;color:#c5b5d3;align-self:center;margin-top:-22px}
.at-outcome{font:550 10px/1.5 Inter,Arial,sans-serif;color:#ece1f5;text-align:center;min-height:30px}
.at-next-target{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 0 0;border-top:1px solid #645271;font:500 11px/1.6 Inter,Arial,sans-serif;color:#d0c1de}
.at-next-target strong{color:#fff8ed;font-weight:600}.at-next-number{font:700 35px/1 Sora,Arial,sans-serif;color:#ffdc81;white-space:nowrap}.at-next-number>span{font-size:25px;color:#bba4ce;margin-right:12px}
.at-rule-figure figcaption{font:500 10px/1.5 Inter,Arial,sans-serif;color:#51465f;padding-top:12px}
.v-lab-body.at-project-copy{padding:32px 34px;justify-content:center}
.at-project-copy p.at-kicker{font:650 10px/1.5 Inter,Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#6a4c93;margin:0 0 12px}
.at-project-copy h3{font:700 37px/1.15 Sora,Arial,sans-serif;letter-spacing:-.035em;margin:0 0 9px}
.at-project-copy p.at-facts{font:600 11px/1.6 Inter,Arial,sans-serif;color:#64576e;margin:0 0 22px}
.at-project-copy>p{margin:0 0 15px;font-size:14px;line-height:1.7}
.at-project-copy>p strong{color:var(--p-ink)}
.at-project-copy p.at-version{font-size:12px;color:#706678;line-height:1.6;margin:0 0 22px}
.at-project-copy .at-play{align-self:flex-start;gap:15px;margin-top:0}
@media(max-width:850px){.p-lab-card.p-afterturn-card{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}.at-rule-figure{padding:21px 18px 14px}.at-rule-art{padding:20px 17px}.v-lab-body.at-project-copy{padding:26px 25px}.at-duel{gap:10px}.at-art-heading>span:first-child{font-size:8px;letter-spacing:.1em}.at-outcome{font-size:9px}.at-playing-card>strong{font-size:49px}.at-project-copy h3{font-size:33px}}
@media(max-width:650px){.p-lab-card.p-afterturn-card{grid-template-columns:1fr}.at-rule-figure{border-right:0;border-bottom:1px solid #d5cedb;padding:24px 22px 14px}.at-rule-art{padding:22px}.at-art-heading>span:first-child{font-size:9px}.at-duel{gap:17px}.at-playing-card{max-width:133px}.at-playing-card>strong{font-size:60px}.at-outcome{font-size:10px}.v-lab-body.at-project-copy{padding:28px 25px}.at-project-copy h3{font-size:34px}}
@media(max-width:370px){.at-rule-figure{padding:18px 15px 12px}.at-rule-art{padding:17px 15px}.at-duel{gap:10px;margin-block:22px 18px}.at-outcome{font-size:9px}.at-art-heading>span:first-child{font-size:8px}.at-playing-card>strong{font-size:50px}.at-target{gap:6px;padding:7px 8px}.at-project-copy .at-play{font-size:13px}.v-lab-body.at-project-copy{padding:25px 21px}}
@media print{.p-lab-card.p-afterturn-card{break-inside:avoid}.at-play{display:none!important}.at-rule-art{print-color-adjust:exact;-webkit-print-color-adjust:exact}}


/* Folly Harbor lives in the personal-project lab as a WIP story/game experiment. */
.p-lab-card.p-folly-card{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);border-top:4px solid var(--accent);padding:0;align-items:stretch}
.fh-scene-figure{margin:0;padding:24px 24px 14px;background:#e6edf3;border-right:1px solid #ced8e1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.fh-scene{position:relative;overflow:hidden;border:1px solid #203041;box-shadow:0 10px 22px rgba(18,30,45,.13);background:#162332;min-height:390px;display:flex;align-items:flex-end}
.fh-sky{position:absolute;inset:0 0 44% 0;background:linear-gradient(180deg,#74839a 0%,#47566c 38%,#253449 100%)}
.fh-moon{position:absolute;right:11%;top:12%;width:58px;height:58px;border-radius:50%;background:#f4f0da;box-shadow:0 0 0 8px rgba(244,240,218,.08)}
.fh-stars,.fh-stars:before,.fh-stars:after{content:"";position:absolute;border-radius:50%;background:#dbe5ef;opacity:.8}
.fh-stars{width:3px;height:3px;left:18%;top:18%;box-shadow:170px 16px 0 #dbe5ef, 250px 42px 0 #dbe5ef, 390px 18px 0 #dbe5ef, 80px 56px 0 #dbe5ef, 315px 76px 0 #dbe5ef, 490px 64px 0 #dbe5ef}
.fh-stars:before{width:4px;height:4px;left:110px;top:104px}
.fh-stars:after{width:2px;height:2px;left:460px;top:20px}
.fh-harbor-line{position:absolute;left:0;right:0;top:52%;height:2px;background:rgba(219,229,239,.18)}
.fh-water{position:absolute;left:0;right:0;bottom:0;height:44%;background:linear-gradient(180deg,#203244 0%,#172635 62%,#13212e 100%)}
.fh-water:before{content:"";position:absolute;inset:16% 0 auto 0;height:1px;background:rgba(210,228,242,.18);box-shadow:0 24px 0 rgba(210,228,242,.12),0 50px 0 rgba(210,228,242,.08),0 78px 0 rgba(210,228,242,.08)}
.fh-town{position:absolute;left:0;right:0;bottom:42%;height:90px}
.fh-lighthouse{position:absolute;left:12%;bottom:0;width:22px;height:96px;background:#d2d7db;clip-path:polygon(24% 100%,76% 100%,62% 18%,38% 18%)}
.fh-lighthouse:before{content:"";position:absolute;left:-10px;right:-10px;top:10px;height:14px;background:#f4f0da;clip-path:polygon(18% 100%,82% 100%,68% 0,32% 0)}
.fh-lighthouse:after{content:"";position:absolute;left:5px;top:34px;width:12px;height:6px;background:#495a65;box-shadow:0 15px 0 #495a65, 0 30px 0 #495a65}
.fh-house{position:absolute;bottom:0;background:#263646;border:2px solid #31475d;box-shadow:inset 0 -8px 0 rgba(0,0,0,.12)}
.fh-house:before{content:"";position:absolute;left:-2px;right:-2px;top:-16px;height:16px;background:#31475d;clip-path:polygon(50% 0,100% 100%,0 100%)}
.fh-house:after{content:"";position:absolute;left:9px;top:10px;width:8px;height:8px;background:#f1cb67;box-shadow:16px 0 0 #f1cb67,0 15px 0 #f1cb67,16px 15px 0 #f1cb67}
.fh-house-1{left:58%;width:36px;height:32px}
.fh-house-2{left:68%;width:42px;height:42px}
.fh-house-3{left:79%;width:34px;height:28px}
.fh-copy-block{position:relative;z-index:2;margin:0 26px 28px;padding:22px 22px 18px;background:linear-gradient(180deg,rgba(12,18,24,.12),rgba(12,18,24,.36)),rgba(16,24,35,.74);backdrop-filter:blur(2px);border:1px solid rgba(212,228,242,.22);color:#f6f7f2;max-width:420px}
.fh-copy-block .fh-overline{margin:0 0 8px;font:650 10px/1.45 Inter,Arial,sans-serif;letter-spacing:.14em;color:#cfe6ea;text-transform:uppercase}
.fh-copy-block h3{margin:0 0 11px;font:700 clamp(34px,4vw,50px)/1 Sora,Arial,sans-serif;letter-spacing:-.05em;color:#f3f6ef}
.fh-copy-block p{margin:0 0 13px;font:500 14px/1.6 Inter,Arial,sans-serif;color:#d8e2ea;max-width:28ch}
.fh-choice-row{display:flex;flex-wrap:wrap;gap:8px}
.fh-choice-row span{display:inline-flex;align-items:center;padding:7px 10px;border:1px solid rgba(219,229,239,.25);background:rgba(255,255,255,.06);font:550 10px/1.45 Inter,Arial,sans-serif;color:#eef4f5}
.fh-scene-figure figcaption{font:500 10px/1.5 Inter,Arial,sans-serif;color:#536273;padding-top:12px}
.v-lab-body.fh-project-copy{padding:32px 34px;justify-content:center}
.fh-project-copy .at-kicker{color:#1982c4}.fh-project-copy h3{font:700 37px/1.15 Sora,Arial,sans-serif;letter-spacing:-.035em;margin:0 0 9px}
.fh-project-copy p.at-facts{font:600 11px/1.6 Inter,Arial,sans-serif;color:#5d6b77;margin:0 0 22px}
.fh-project-copy>p{margin:0 0 15px;font-size:14px;line-height:1.7}.fh-project-copy p.at-version{font-size:12px;color:#64727f;line-height:1.6;margin:0 0 22px}.fh-project-copy .at-play{align-self:flex-start}
@media(max-width:850px){.p-lab-card.p-folly-card{grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr)}.fh-scene-figure{padding:20px 18px 14px}.fh-copy-block{margin:0 18px 20px;padding:18px 18px 15px}.v-lab-body.fh-project-copy{padding:26px 25px}.fh-copy-block h3{font-size:40px}}
@media(max-width:650px){.p-lab-card.p-folly-card{grid-template-columns:1fr}.fh-scene-figure{border-right:0;border-bottom:1px solid #ced8e1;padding:24px 22px 14px}.fh-scene{min-height:360px}.fh-copy-block{max-width:none;margin:0 16px 18px}.v-lab-body.fh-project-copy{padding:28px 25px}.fh-project-copy h3{font-size:34px}}
@media(max-width:430px){.fh-copy-block h3{font-size:32px}.fh-copy-block p{font-size:13px}.fh-choice-row span{font-size:9px;padding:6px 8px}.fh-scene{min-height:330px}}
@media print{.p-lab-card.p-folly-card{break-inside:avoid}.fh-copy-block,.fh-scene{print-color-adjust:exact;-webkit-print-color-adjust:exact}}


/* Folly Harbor logo stage */
.fh-logo-stage{background:#0b1118;display:flex;align-items:center;justify-content:center;min-height:390px;padding:20px;border:1px solid #203041;box-shadow:0 10px 22px rgba(18,30,45,.13)}
.fh-logo-image{display:block;max-width:100%;height:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.25))}
@media(max-width:650px){.fh-logo-stage{min-height:auto;padding:14px}}