#ribbon.project-ribbon{display:block;max-width:none;margin:0;border:0;background:#080e19;color:#eee5d5;padding:30px 0 42px;overflow:hidden;user-select:none}
#ribbon .ribbon-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 4.8% 14px}
#ribbon .ribbon-toolbar p{font:12px/1.6 Arial,sans-serif;letter-spacing:.16em;margin:0}
#ribbon .ribbon-toolbar p span{margin-left:18px;color:#9ca7ae;letter-spacing:.04em}
#ribbon .ribbon-toolbar>div{display:flex;gap:20px}
#ribbon .ribbon-toolbar button{border:0;padding:7px 0;background:transparent;color:#b8c2c8;font-size:12px;white-space:nowrap}
#ribbon .ribbon-toolbar button:hover{color:#fff}
#ribbon .ribbon-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-y;cursor:grab;padding:16px 4.8% 0;scroll-snap-type:none;overscroll-behavior-x:contain}
#ribbon .ribbon-viewport::-webkit-scrollbar{display:none}
#ribbon .ribbon-track,#ribbon .ribbon-group{display:flex;align-items:flex-start;gap:clamp(16px,2vw,32px);width:max-content}
#ribbon .ribbon-card{display:block;flex:0 0 auto;width:clamp(280px,37vw,680px);height:auto;aspect-ratio:auto;padding:0;margin:0;border:0;overflow:visible;text-align:left;background:transparent;color:inherit;cursor:pointer;scroll-snap-align:none}
#ribbon .ribbon-card::after{display:none}
#ribbon .ribbon-image{display:block;position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:#111b27;transform:perspective(1100px) rotateX(0) rotateY(0);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;will-change:transform}
#ribbon .ribbon-image>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transform:none!important;filter:none;border:0;border-radius:0;user-select:none;pointer-events:none}
#ribbon .ribbon-open{position:absolute;right:14px;bottom:14px;padding:9px 14px;background:#080e19d9;backdrop-filter:blur(8px);border:1px solid #f3e9d740;color:#f3e9d7;font-size:12px;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
#ribbon .ribbon-caption{display:flex;gap:16px;padding:17px 1px 2px;align-items:baseline}
#ribbon .ribbon-index{font:12px/1.4 monospace;color:#a6b8b5}
#ribbon .ribbon-title{position:static;display:block;color:#ece6da;font-size:16px;font-weight:400;line-height:1.5;max-width:100%;overflow-wrap:anywhere}
#ribbon .ribbon-title small{font-size:12px;color:#8d9ca6;opacity:1;line-height:1.6;font-weight:400;margin-top:4px}
#ribbon .ribbon-card:hover .ribbon-image,#ribbon .ribbon-card:focus-visible .ribbon-image{transform:perspective(1100px) translateY(-6px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 14px 30px #0005}
#ribbon .ribbon-card:hover .ribbon-open,#ribbon .ribbon-card:focus-visible .ribbon-open{opacity:1;transform:none}
#ribbon.is-dragging .ribbon-viewport,#ribbon.is-dragging .ribbon-card{cursor:grabbing}
#ribbon.is-dragging .ribbon-image{transform:none!important}
@media(max-width:600px){#ribbon.project-ribbon{padding:26px 0 30px}#ribbon .ribbon-toolbar{align-items:flex-start;padding:0 6% 8px}#ribbon .ribbon-toolbar p{font-size:11px}#ribbon .ribbon-toolbar p span{display:block;margin:5px 0 0}#ribbon .ribbon-toolbar>div{gap:12px}#ribbon .ribbon-card{width:80vw;min-width:240px}#ribbon .ribbon-viewport{padding-left:6%;padding-right:6%}#ribbon .ribbon-title{font-size:14px}#ribbon .ribbon-caption{gap:12px;padding-top:12px}}
@media(prefers-reduced-motion:reduce){#ribbon .ribbon-image{transform:none!important;will-change:auto}}

/* The selected-work gallery continues the dark cover palette. */
#works{background:#080e19;color:#eee5d5;border-color:#bdc9c526}
#works .eyebrow,#works .project-summary p,#works .carousel-controls>button{color:#aab7c0}
#works .section-heading .handwritten,#works .project-summary>.handwritten{color:#b8d3c7}
#works .project-summary{border-color:#7b8c8859}
#works .text-button{color:#d8e7de;border-color:#94ada0}
#works .carousel-controls>button:hover{color:#fff}
#works .dot:after{background:#52616c}
#works .dot.active:after{background:#c5e5d3}
#works .stack-card{background:#101824;box-shadow:0 16px 28px #0005}
#works .stack-card.active{box-shadow:0 20px 42px #0009}
#works button:focus-visible{outline-color:#b8d3c7}
#works .stack-card{cursor:pointer;transition:transform .6s cubic-bezier(.22,1,.36,1),filter .3s,translate .3s,box-shadow .3s}
#works .stack-card:hover,#works .stack-card:focus-visible{translate:0 -9px;filter:brightness(1.08);box-shadow:0 16px 34px #0009}
@property --edge-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
#works .stack-card::after{content:'';position:absolute;inset:0;padding:3px;pointer-events:none;background:conic-gradient(from var(--edge-angle),#b9e3d515 0deg,#b9e3d515 245deg,#ac9dde 282deg,#d0ffe9 320deg,#fff4d7 345deg,#b9e3d515 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s;animation:project-edge-orbit 2.7s linear infinite;animation-play-state:paused}
#works .stack-card:hover::after,#works .stack-card:focus-visible::after{opacity:1;animation-play-state:running}
@keyframes project-edge-orbit{to{--edge-angle:360deg}}
#works .stack-card .stack-open{display:block;left:auto;right:16px;bottom:16px;padding:10px 16px;border:1px solid #e8f2dd70;background:#080e19cf;backdrop-filter:blur(8px);font-size:13px;border-radius:24px;opacity:0;translate:0 7px;transition:opacity .25s,translate .25s}
#works .stack-card:hover .stack-open,#works .stack-card:focus-visible .stack-open{opacity:1;translate:0 0}
.meteor-trail{position:fixed;inset:0;width:100%;height:100%;z-index:45;pointer-events:none;contain:strict}
.meteor-trail[hidden],.modal-open .meteor-trail{display:none}
@media(max-width:800px){#works .stack-card .stack-open{right:8px;bottom:8px;padding:6px 9px;font-size:10px}}
@media(prefers-reduced-motion:reduce){#works .stack-card:hover,#works .stack-card:focus-visible{translate:none}#works .stack-card::after{animation:none}.meteor-trail{display:none}}
@media(hover:none),(pointer:coarse){.meteor-trail{display:none}}

/* Continue the cover palette through all remaining homepage sections. */
body{background:#080e19;color:#eee5d5}
#source[hidden]{display:none}
@media(hover:hover) and (pointer:fine){
 body.outer-custom-cursor:not(.modal-open):not(.cursor-pressed),body.outer-custom-cursor:not(.modal-open):not(.cursor-pressed) :is(main,main *,footer,footer *){cursor:url('assets/cursor-glow.svg') 10 9,auto!important}
 body.outer-custom-cursor :is(input,textarea,[contenteditable=true]){cursor:text!important}
}
#about>div:first-child{display:flex;flex-direction:column;align-items:flex-start;position:relative}
#about>div:first-child>.eyebrow{order:0;margin-bottom:24px}
#about .about-portrait{order:1;display:block;width:min(57%,230px);height:auto;margin:0 auto;object-fit:contain}
#about>div:first-child>h2{position:absolute;inset:43px 0 0;margin:0;font-size:clamp(25px,2.45vw,36px);font-weight:500;line-height:1.25;letter-spacing:3px;pointer-events:none}
#about>div:first-child>h2>span{position:absolute;writing-mode:vertical-rl;pointer-events:auto}
#about>div:first-child>h2>span:first-child{left:max(0px,calc(50% - 175px));top:30px;transform:rotate(-7deg)}
#about>div:first-child>h2>span:nth-child(2){right:max(0px,calc(50% - 175px));top:130px;color:#b8d3c7;transform:rotate(7deg)}
#about .about-copy{padding-top:43px}
@media(max-width:800px){#about .about-portrait{width:min(57%,215px)}#about .about-copy{padding-top:0}#about>div:first-child{max-width:400px;width:100%;margin:auto}#about>div:first-child>h2{font-size:26px}#about>div:first-child>h2>span:nth-child(2){top:105px}}
#about,#skills,#contact,#source,body>footer{background:#080e19;color:#eee5d5;border-color:#bdc9c526}
#about .eyebrow,#skills .eyebrow,#contact .eyebrow,#source .eyebrow,
#about .about-copy p,#skills .skill-actions,#skills .physics-caption p,
#contact .contact-grid p,#contact .contact-links small,#source p,body>footer p{color:#aab7c0}
#about .handwritten,#about .blue,#contact .blue,#contact>h2 span{color:#b8d3c7}
#about .about-tags span,#skills .physics,#contact>h2,#contact .contact-links>a,
#contact .contact-links>div,#contact .contact-links>button{border-color:#7b8c8859}
#skills .text-button,#contact .contact-links>button span{color:#d8e7de;border-color:#94ada0}
#contact #copy-status{color:#b8d3c7}
#skills .physics-caption>span{color:#8caaa0}
#about a:focus-visible,#skills button:focus-visible,#contact a:focus-visible,
#contact button:focus-visible,body>footer a:focus-visible{outline-color:#b8d3c7}
body>footer a:hover,#contact .contact-links>a:hover{color:#fff}

/* The skill playground, heading and caption form a single 16:9 slide. */
#skills{aspect-ratio:16/9;min-height:0;padding:clamp(16px,3vw,48px) 6%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,1.5vw,24px);overflow:hidden}
#skills .section-heading h2{font-size:clamp(22px,3.6vw,64px);line-height:1.1}
#skills .section-heading .eyebrow{margin-bottom:10px}
#skills .physics{container-type:size;min-height:0;height:auto;width:100%;margin:0;padding:0}
#skills .skill-block{--block-size:min(82px,9cqw,24cqh);width:var(--block-size);height:calc(var(--block-size)*1.04);padding:min(8px,.7cqw);border-radius:min(9px,1cqw);box-shadow:3px 4px 10px #0004}
#skills .skill-block strong{font-size:min(25px,2.5cqw,7cqh);max-width:100%;overflow-wrap:anywhere}
#skills .skill-block span{font-size:min(10px,1.1cqw,3cqh);margin-top:min(9px,1cqw)}
#skills .skill-block.large{--block-size:min(180px,18cqw,46cqh);height:var(--block-size);padding:min(19px,1.8cqw);border-radius:2px}
#skills .skill-block.large strong{font-size:min(23px,2.3cqw,6cqh)}
#skills .skill-block.large small{font-size:min(12px,1.2cqw,3cqh)}
#skills .skill-block.large span{font-size:min(10px,1.1cqw,3cqh)}
#skills .physics-caption{margin:0;gap:12px;min-width:0}
#skills .physics-caption>span{font-size:clamp(16px,2.3vw,36px)}
#skills .physics-caption p{margin:0;font-size:clamp(10px,.8vw,12px)}
@media(max-width:800px){
 #skills{padding:14px 6%;gap:6px}
 #skills .section-heading{gap:8px}
 #skills .section-heading h2{font-size:clamp(20px,3.6vw,28px);letter-spacing:-.5px}
 #skills .section-heading .eyebrow,#skills .skill-actions>span{display:none}
 #skills .skill-actions .text-button{font-size:12px;padding:4px 0}
 #skills .skill-block span,#skills .skill-block.large small{display:none}
 #skills .skill-block.large{justify-content:center}
 #skills .skill-block.large strong{font-size:min(18px,2.7cqw,7cqh)}
 #skills .physics-caption{flex-direction:row;align-items:center;gap:8px}
 #skills .physics-caption p{max-width:52%;text-align:right;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 #skills .physics{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:1fr 1fr;align-items:end;justify-items:center;gap:6px;min-height:0;height:auto;padding:0}
 #skills .skill-block{position:relative;grid-row:2;transform:none!important}
 #skills .skill-block.large{grid-column:span 2;grid-row:1}
}

/* One widescreen composition, including the heading, gallery, details and controls. */
#works{aspect-ratio:16/9;min-height:0;padding:25px 6% clamp(18px,2vw,32px);display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:clamp(8px,1vw,16px)}
#works .section-heading{min-width:0;gap:24px}
#works .section-heading h2{font-size:clamp(30px,3.6vw,64px);line-height:1.1}
#works .section-heading .eyebrow{margin-bottom:10px}
#works .section-heading .handwritten{font-size:clamp(16px,1.5vw,24px)}
#works .stack{container-type:size;min-height:0;height:auto;width:100%;max-width:none;margin:0;overflow:hidden}
#works .stack-card{width:min(60cqw,160cqh,840px);height:auto;aspect-ratio:16/9}
#works .stack-card>img{object-fit:contain}
#works .project-summary{width:100%;max-width:1000px;margin:0 auto;padding:12px 0;min-width:0}
#works .project-summary>div{min-width:0}
#works .project-summary h3{font-size:clamp(16px,1.8vw,26px);line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#works .project-summary p{font-size:14px;line-height:1.6;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
#works .carousel-controls{margin:0;gap:16px}
#works .carousel-controls>button{padding:8px 5px}
@media(max-width:800px){
 #works{padding:16px 6%;gap:6px}
 #works .section-heading h2{font-size:clamp(20px,3.6vw,28px);letter-spacing:-.5px}
 #works .section-heading .eyebrow{display:none}
 #works .project-summary{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:6px 0}
 #works .project-summary>.handwritten,#works .project-summary .eyebrow,#works .project-summary p{display:none}
 #works .project-summary h3{display:block;font-size:14px;line-height:1.4;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #works .project-summary .text-button{font-size:12px;padding:4px 0}
 #works .carousel-controls{gap:8px}
 #works .carousel-controls>button{font-size:11px;padding:4px 0}
 #works .dots{gap:0}
 #works .dot{width:16px;height:22px;flex-shrink:0}
 #works .dot:after,#works .dot.active:after{left:50%;transform:translateX(-50%)}
}