/* A / September refinement. Opaque pigment colors, solid offsets, short responsive gestures.
   B and C retain their earlier appearance for comparison. */
:root[data-study=A]{--paper:#f4f5f0;--ink:#172d34;--muted:#536168;--accent:#b9341d;--button:#ef4b2a;--button-text:#172d34;--line:#c9cec7;--raised:#fffef8;--puzzle:#e7eae2;--blue:#2346cf;--tile:#2346cf;--pipe:#fffef8;--control:#fffef8;--control-ink:#172d34}
:root[data-study=A][data-theme=dark]{--paper:#142b31;--ink:#f4f5f0;--muted:#b5c6c6;--accent:#ff8768;--button:#ff7955;--button-text:#142b31;--line:#466167;--raised:#1c363c;--puzzle:#28434a;--blue:#a4bbff;--tile:#2346cf;--pipe:#fffef8;--control:#f4f5f0;--control-ink:#172d34}
.direction-a .navigation{min-height:94px}
.direction-a .brand{letter-spacing:-.8px}
.direction-a .navigation nav>a{position:relative;padding-block:11px}
.direction-a .navigation nav>a:not(.resume):after,.direction-a .about>a:after{content:'';position:absolute;left:0;bottom:6px;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:right}
.direction-a .navigation nav>a:hover,.direction-a .about>a:hover{text-decoration:none}
.direction-a .navigation nav>a:is(:hover,:focus-visible):after,.direction-a .about>a:is(:hover,:focus-visible):after{transform:scaleX(1);transform-origin:left}
.direction-a .hero{padding-top:60px;padding-bottom:65px;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center}
.direction-a .introduction{padding-bottom:14px;animation:none}
.direction-a .name{font-size:12px}
.direction-a h1{font-size:clamp(76px,8.1vw,116px);line-height:.96;letter-spacing:-4px;margin:26px 0 30px;font-variation-settings:'wdth' 95}
.direction-a h1>span{color:var(--blue);transform:rotate(-3deg);padding-bottom:7px}
.direction-a .intro{font-size:16px;max-width:385px;line-height:1.8}
.direction-a .primary{position:relative;isolation:isolate;gap:42px;min-height:64px;margin-top:32px;padding:17px 25px;font-size:14px;border:2px solid var(--edge);border-radius:5px;box-shadow:5px 6px 0 var(--shadow);transform:rotate(-2deg);filter:none}
.direction-a .primary:hover{filter:none;transform:translate(-1px,-2px) rotate(-3deg);box-shadow:6px 8px 0 var(--shadow)}
.direction-a .primary:active{transform:translate(4px,5px) rotate(-1deg);box-shadow:1px 1px 0 var(--shadow)}
.direction-a .button-arrow{position:relative;display:block;overflow:hidden;width:28px;height:28px}
.direction-a .button-arrow>span{position:absolute;inset:0;font:27px/28px Arial;text-align:center}
.direction-a .button-arrow>span:last-child{transform:translate(-110%,110%)}
.direction-a .primary:is(:hover,:focus-visible) .button-arrow>span:first-child{transform:translate(110%,-110%)}
.direction-a .primary:is(:hover,:focus-visible) .button-arrow>span:last-child{transform:translate(0,0)}
.direction-a .mechanism{position:relative;padding:12px 18px 18px 4px;perspective:1000px}
.direction-a .mechanism:before{content:'';position:absolute;inset:20px 8px 8px 14px;background:var(--shadow);border-radius:9px;transform:rotate(3deg)}
.direction-a .mechanism-surface{position:relative;border:2px solid var(--edge);background:var(--raised);border-radius:9px;transform:rotate(3deg) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-style:preserve-3d}
.direction-a .puzzle{border:0;background:none;margin:0;padding:26px 28px 20px;border-radius:0}
.direction-a .puzzle h2{font-size:24px;letter-spacing:-.5px}
.direction-a .puzzle-reset{font-size:12px;min-height:44px;min-width:44px;text-decoration:none;border:1px solid var(--line);border-radius:50%;padding:7px}
.direction-a .puzzle-reset:hover{background:var(--puzzle)}
.direction-a .puzzle>p{font-size:12px;margin-top:3px}
.direction-a .puzzle-play{display:flex;flex-direction:column;align-items:stretch;gap:20px;margin-top:23px}
.direction-a .pieces{gap:7px;width:100%;max-width:340px;margin:auto;isolation:isolate}
.direction-a .piece{background:var(--tile);border:0;border-radius:8px;box-shadow:0 3px 0 var(--shadow);overflow:hidden;transform:translateY(0)}
.direction-a .piece:nth-child(2),.direction-a .piece:nth-child(3){background:var(--button)}
.direction-a .pipe{border-color:var(--pipe);border-top-width:14px;border-left-width:14px;border-top-left-radius:36px;transform:translate(-7px,-7px)}
.direction-a .piece:nth-child(2) .pipe,.direction-a .piece:nth-child(3) .pipe{border-color:var(--button-text)}
.direction-a .piece:hover{transform:translateY(-3px)}
.direction-a .piece:active{transform:translateY(2px);box-shadow:0 1px 0 var(--shadow)}
.direction-a .piece:focus-visible{outline:3px solid var(--ink);outline-offset:3px;z-index:1}
.direction-a .puzzle-response{position:relative;display:grid;grid-template-columns:1fr;column-gap:15px;align-items:baseline;min-height:20px}
.direction-a .puzzle-status{font-size:12px;font-weight:650}
.direction-a .hint-button{font-size:11px;padding:9px 0;grid-column:2;grid-row:1;min-height:44px}
.direction-a #puzzle-hint,.direction-a .puzzle-reward{grid-column:1/-1;font-size:12px}
.direction-a .solved .piece{border:0}
.direction-a .solved .piece:nth-child(n){background:var(--tile)}
.direction-a .solved .piece:nth-child(n) .pipe{border-color:var(--pipe)}
.direction-a .solved .puzzle-status{color:var(--accent)}
.direction-a .corner-mark{position:absolute;right:-8px;top:17px;width:27px;height:8px;background:var(--button);transform:rotate(-30deg);pointer-events:none}
.direction-a .corner-mark:after{content:'';position:absolute;width:8px;height:8px;background:var(--blue);left:7px;top:-17px;border-radius:50%}
.direction-a .work{padding-top:36px}
.direction-a .work>h2{font-size:34px;margin-bottom:24px}
.direction-a summary{position:relative;min-height:90px;padding:25px 0;isolation:isolate}
.direction-a summary:before{content:'';position:absolute;inset:0 -14px;background:var(--puzzle);opacity:0;transform:scaleY(.75);transform-origin:50% 100%;z-index:-1;border-radius:4px}
.direction-a summary:is(:hover,:focus-visible):before{opacity:1;transform:scaleY(1)}
.direction-a .project-name{font-size:27px;transform:none;color:var(--ink)}
.direction-a .project-short{font-size:13px}
.direction-a .disclosure{font-size:29px;line-height:1;color:var(--blue);transform:rotate(-90deg)}
.direction-a details[open] .disclosure{transform:rotate(45deg)}
.direction-a .project-detail{font-size:15px;max-width:650px;line-height:1.85;padding:6px 0 28px}
.direction-a .project-detail .stack{font-size:11px;margin-top:17px}
.direction-a .about{margin-top:45px;padding-bottom:52px}
.direction-a .about img{border-radius:5px;filter:grayscale(1);transform:rotate(-3deg)}
.direction-a .about p{font-size:13px}
.direction-a .about>a{position:relative;padding-block:12px}
:root[data-study=A] .study-switcher{border-color:var(--line);box-shadow:3px 3px 0 #172d34;border-radius:4px}
:root[data-study=A] .study-switcher button{background:#e7eae2;border-color:#c9cec7}
@media(prefers-reduced-motion:no-preference){
 .direction-a .navigation nav>a:after,.direction-a .about>a:after{transition:transform 220ms cubic-bezier(.2,.8,.2,1)}
 .direction-a .primary{transition:transform 180ms cubic-bezier(.2,.8,.2,1),box-shadow 180ms cubic-bezier(.2,.8,.2,1)}
 .direction-a .primary:active{transition-duration:65ms}
 .direction-a .button-arrow>span{transition:transform 340ms cubic-bezier(.16,1,.3,1)}
 .direction-a .button-arrow>span:last-child{transition-delay:40ms}
 .direction-a .mechanism-surface{transition:transform 180ms cubic-bezier(.2,.8,.2,1)}
 .direction-a .pipe-wrap{transition:transform 430ms cubic-bezier(.2,1.35,.35,1)}
 .direction-a .piece{transition:transform 160ms cubic-bezier(.2,.8,.2,1),box-shadow 100ms ease}
 .direction-a .piece:active{transition-duration:65ms}
 .direction-a summary:before{transition:opacity 180ms ease,transform 220ms cubic-bezier(.2,.8,.2,1)}
 .direction-a .disclosure{transition:transform 300ms cubic-bezier(.2,1.35,.35,1)}
 .direction-a .solved .pieces{animation:none}
}
@media(max-width:1100px){.direction-a .hero{gap:36px;padding-top:45px}.direction-a h1{font-size:88px}.direction-a .puzzle{padding:18px}.direction-a .puzzle h2{font-size:22px}.direction-a .pieces{max-width:300px}.direction-a .puzzle>p{max-width:220px}}
@media(max-width:767px){
 .direction-a .navigation{min-height:78px}.direction-a .hero{grid-template-columns:1fr;gap:43px;padding:30px 22px 36px}.direction-a h1{font-size:clamp(72px,22vw,112px);letter-spacing:-3px;margin-block:23px 25px}.direction-a .name{font-size:10px}.direction-a .intro{font-size:15px;max-width:345px}.direction-a .primary{margin-top:25px;font-size:13px;min-height:61px}.direction-a .mechanism{max-width:450px;width:100%;margin:auto;padding:8px 13px 13px 0}.direction-a .puzzle{padding:19px 20px 13px}.direction-a .puzzle h2{font-size:23px}.direction-a .puzzle>p{max-width:none;font-size:11px}.direction-a .puzzle-play{margin-top:18px;gap:13px}.direction-a .pieces{max-width:340px}.direction-a .pipe{border-width:12px;transform:translate(-6px,-6px)}.direction-a .puzzle-status{font-size:11px}.direction-a .hint-button{font-size:10px}.direction-a .work{padding-top:28px;margin-top:13px}.direction-a .work>h2{font-size:28px}.direction-a summary{min-height:96px;padding-block:22px}.direction-a .project-name{font-size:25px}.direction-a .project-short{font-size:11px}.direction-a .project-detail{font-size:14px;line-height:1.8}.direction-a .about{margin-top:25px}.direction-a .about p{font-size:12px}
}
@media(hover:none),(pointer:coarse){.direction-a .primary:hover{transform:rotate(-2deg);box-shadow:5px 6px 0 var(--shadow)}.direction-a .primary:active{transform:translate(4px,5px) rotate(-1deg);box-shadow:1px 1px 0 var(--shadow)}.direction-a .piece:hover{transform:none}.direction-a .piece:active{transform:translateY(2px)}}
.study-switcher{display:none!important}
@media(prefers-reduced-motion:reduce){.direction-a .mechanism-surface{transform:rotate(3deg)}.direction-a .piece:hover{transform:none}.direction-a .primary:hover{transform:rotate(-2deg)}.direction-a .button-arrow>span{transition:none}.direction-a .primary:is(:hover,:focus-visible) .button-arrow>span:first-child{transform:none}.direction-a .primary:is(:hover,:focus-visible) .button-arrow>span:last-child{transform:translate(-110%,110%)}}