.portfolio{--bg:#0b0b0b;--bg-soft:#161616;--fg:#f4f1eb;--fg-muted:#b5b1aa;--line:#30302f;--accent:#ff794a;--accent-fg:#15100d;--maxw:1360px;--radius:4px;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}.portfolio .wrap{padding-inline:clamp(20px,4vw,64px)}.portfolio a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.portfolio [id]{scroll-margin-top:76px}.portfolio-nav{z-index:10;border-bottom:1px solid var(--line);background:#0b0b0bf5;position:sticky;top:0}.portfolio-nav__inner{justify-content:space-between;align-items:center;gap:14px;min-height:62px;display:flex}.portfolio-nav nav{gap:clamp(14px,3.2vw,44px);display:flex}.portfolio-nav nav a,.portfolio-contact{color:var(--fg-muted);white-space:nowrap;font-size:14px}.portfolio-nav a:hover{color:var(--accent);text-decoration:none}.portfolio-brand{color:var(--fg);white-space:nowrap;font-weight:750}.portfolio-brand span,.portfolio-contact span,.portfolio-text-link span{color:var(--accent)}.portfolio-contact{border:1px solid var(--line);padding:5px 12px}.portfolio-hero{background:linear-gradient(90deg,#0b0b0b 12%,#0b0b0b50 70%,#0000),repeating-linear-gradient(90deg,#ffffff0d 0 1px,#0000 1px 76px),repeating-linear-gradient(0deg,#ffffff0d 0 1px,#0000 1px 76px),radial-gradient(at 83% 45%,#361a11,#0000 59%);overflow:hidden}.portfolio-hero>.wrap{padding-top:clamp(30px,5vw,70px)}.portfolio-kicker{color:var(--accent);font:600 12px/1.5 var(--mono);letter-spacing:.08em;align-items:center;gap:9px;display:flex}.portfolio-dot{background:var(--accent);border-radius:50%;flex:none;width:7px;height:7px;display:inline-block}.portfolio-hero__grid{grid-template-columns:.95fr 1.05fr;align-items:center;gap:clamp(24px,4vw,66px);padding-block:clamp(32px,5vw,72px);display:grid}.portfolio-hero h1{letter-spacing:-.07em;margin:0 0 24px;font-size:clamp(41px,6vw,88px);font-weight:850;line-height:1.08}.portfolio-hero h1 span{color:var(--accent)}.portfolio-hero__copy p{max-width:34em;color:var(--fg-muted)}.portfolio-hero__actions{flex-wrap:wrap;gap:10px;margin-top:25px;display:flex}.portfolio-button{border:1px solid var(--accent);background:var(--accent);color:var(--accent-fg);align-items:center;gap:22px;padding:9px 15px;font-size:14px;font-weight:700;display:inline-flex}.portfolio-button--plain{border-color:var(--line);color:var(--fg);background:var(--bg)}.portfolio-button:hover{filter:brightness(1.12);text-decoration:none}.portfolio-button--plain:hover{border-color:var(--accent)}.featured-work{min-width:0;color:var(--fg);background:#111;border:1px solid #5c463c;display:block}.featured-work:hover{border-color:var(--accent);text-decoration:none}.featured-work__top,.featured-work__bottom{justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;display:flex}.featured-work__top{font:12px/1.4 var(--mono);color:var(--fg-muted)}.featured-work__top .portfolio-dot{margin-right:5px}.featured-work__image{background:#fff;display:block;position:relative;overflow:hidden}.featured-work__image img{width:100%;height:auto;transition:transform .35s;display:block}.featured-work:hover img{transform:scale(1.04)}.featured-work__angle{color:#444;font:12px var(--mono);position:absolute;bottom:10px;right:12px}.featured-work__bottom strong{font-size:clamp(16px,2.1vw,24px);line-height:1.3;display:block}.featured-work__bottom small{color:var(--fg-muted)}.featured-work__arrow{color:var(--accent);font-size:26px}.portfolio-hero__index{border-top:1px solid var(--line);color:var(--fg-muted);font:11px/1.5 var(--mono);justify-content:space-between;gap:12px;padding-block:13px;display:flex}.portfolio-hero__index i{color:var(--accent);font-style:normal}.portfolio-section{padding-block:clamp(36px,6vw,84px)}.portfolio .section__title{letter-spacing:-.045em;margin:8px 0 12px;font-size:clamp(30px,4.6vw,60px);line-height:1.1}.portfolio-section__head{justify-content:space-between;align-items:end;gap:16px;margin-bottom:20px;display:flex}.portfolio-text-link{color:var(--fg);white-space:nowrap;padding-bottom:12px;font-size:14px}.portfolio .works{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.portfolio .work{background:#121212;border-radius:0}.portfolio .work:hover{border-color:var(--accent)}.portfolio .work__thumb{position:relative}.portfolio-card-index{z-index:1;color:var(--accent);font:12px/1.4 var(--mono);background:#121212;padding:4px 7px;position:absolute;top:12px;left:12px}.portfolio .ability{border-radius:0}.portfolio .ability h3 a{color:var(--accent)}@media (width<=760px){.portfolio-hero__grid{grid-template-columns:1fr;gap:28px}.portfolio-hero h1{font-size:clamp(40px,9vw,65px)}.featured-work__image img{object-fit:contain;max-height:310px}}@media (width<=490px){.portfolio-nav__inner{gap:8px;min-height:54px}.portfolio-brand,.portfolio-nav nav a,.portfolio-contact{font-size:12px}.portfolio-nav nav{gap:10px}.portfolio-contact{padding:4px 6px}.portfolio .works{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){html:has(.portfolio){scroll-behavior:auto}.featured-work__image img{transition:none}}.spin-case{padding-block:36px 0}.spin-case__heading{margin-top:30px}.spin-case__heading h1{margin-block:10px;font-size:clamp(32px,5.4vw,70px)}.spin-case__heading .section__lead{margin-bottom:24px}.spin-viewer{border:1px solid var(--line);background:var(--bg-soft)}.spin-viewer__stage{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;background:#fff;position:relative}.spin-viewer__stage.is-dragging{cursor:grabbing}.spin-viewer__stage img{object-fit:contain;width:100%;height:auto;max-height:56svh;display:block}.spin-viewer__hint{color:#fff;pointer-events:none;background:#111;padding:4px 9px;font-size:12px;position:absolute;bottom:12px;right:12px}.spin-viewer__controls{padding:14px clamp(12px,3vw,24px) 18px}.spin-viewer__timeline{align-items:center;gap:14px;margin-bottom:12px;display:flex}.spin-viewer__timeline input{min-width:0;accent-color:var(--accent);flex:1}.spin-viewer__timeline output{color:var(--fg-muted);font:13px var(--mono);text-align:right;min-width:10ch}.spin-viewer__buttons{flex-wrap:wrap;gap:8px;display:flex}.spin-viewer__buttons button:focus-visible,.spin-viewer__timeline input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.spin-viewer__status{color:var(--accent);margin-top:8px}.spin-case__details{grid-template-columns:1fr 1fr;gap:clamp(20px,5vw,68px);margin-top:50px;padding-block:36px;display:grid}.spin-case__details .section__title{font-size:clamp(25px,3vw,38px)}.spin-case__details p:not(.portfolio-kicker){color:var(--fg-muted)}@media (width<=640px){.spin-case{padding-block-start:22px}.spin-case__heading{margin-top:18px}.spin-case__details{grid-template-columns:1fr}}
