/* Quiet monochrome controls; spectrum appears as a moving glass reflection. */
html{overflow-x:clip}
.social-links{display:flex;align-items:center;gap:8px}
.social-link{position:relative;isolation:isolate;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;overflow:hidden;border:1px solid #ffffff35;background:linear-gradient(145deg,#303030,#111 48%,#080808);color:#fff;box-shadow:inset 0 1px 1px #ffffff50,inset 0 -2px 5px #0009,0 5px 12px #0002;transition:border-color .2s,transform .25s}
[data-theme="light"] .social-link{background:linear-gradient(145deg,#fff,#f0f0f0 55%,#dedede);color:#101010;border-color:#0002;box-shadow:inset 0 1px 2px #fff,inset 0 -2px 4px #0001,0 5px 12px #0001}
.social-glyph{position:relative;z-index:2;width:21px;height:21px;transition:filter .2s}
.social-glyph svg{display:block;width:100%;height:100%}
.social-gloss{position:absolute;inset:-65%;z-index:1;pointer-events:none;opacity:.18;background:conic-gradient(from 50deg,transparent 18%,#49edff90,#5da8ff95,#d83bff90,#ff496490,#ff8a3b90,#ffea3b90,transparent 72%);filter:blur(5px);animation:social-spectrum 2.4s linear infinite;animation-play-state:paused;transition:opacity .2s}
.social-link:after{content:'';position:absolute;inset:2px;border-radius:inherit;z-index:3;pointer-events:none;background:radial-gradient(ellipse at var(--glass-x,24%) var(--glass-y,8%),#ffffff78,transparent 62%),linear-gradient(135deg,transparent 61%,#ffffff16);opacity:.65;transition:opacity .2s}
.social-link:is(:hover,:focus-visible,:active){border-color:var(--ink)}
.social-link:is(:hover,:focus-visible,:active) .social-gloss{opacity:1;animation-play-state:running}
.social-link:is(:hover,:focus-visible,:active):after{opacity:1}
.social-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px;--glass-x:50%;--glass-y:20%}
.vision-contact>.social-links{gap:14px;margin-top:30px}
.vision-contact .social-link{width:72px;height:72px;border-radius:21px}
.vision-contact .social-glyph{width:31px;height:31px}
.portrait-switch:focus-visible{outline:2px solid white;outline-offset:-7px;box-shadow:inset 0 0 0 5px #050505}
.portrait-caption{filter:none;color:#fff;text-shadow:none;width:fit-content;right:auto;max-width:calc(100% - 38px);padding:8px 10px;border:1px solid #ffffff24;border-radius:8px;background:linear-gradient(135deg,#111e,#111b);backdrop-filter:blur(8px);gap:5px}
.portrait-caption:before{display:none}
.portrait-count{opacity:.9}
.source-object-inner,.answer-object-inner,.operation-panel>div{opacity:1}
[data-theme="light"] .contact-card{box-shadow:0 14px 36px #1018201a,0 3px 10px #1018200c}
.portrait-surface .hero-interaction{bottom:34px;right:24px;z-index:5;pointer-events:none}
@media(min-width:769px){
  .contact-float{--contact-card-width:clamp(640px,calc(100vw - 640px),840px)}
  .contact-card{padding-inline:24px}
  .contact-form{gap:20px}
  .contact-field input,.contact-field textarea{padding-inline:8px}
}
@keyframes social-spectrum{to{transform:rotate(360deg)}}
.project-row{position:relative;min-width:0;border-top:1px solid var(--line);padding-block:2.2rem}
.project-row:before{content:'';position:absolute;left:0;top:-1px;width:70px;height:1px;background:linear-gradient(90deg,var(--accent-secondary),var(--magenta),transparent);transition:width .35s}
.project-row:hover:before{width:200px}
.project-row-head{display:grid;grid-template-columns:3ch minmax(0,1fr);gap:1rem;align-items:start}
.project-row-order,.project-row-kind{font:400 .8125rem/1.5 var(--body);color:var(--muted);margin:0}
.project-row h2{font:700 clamp(1.25rem,2vw,1.75rem)/1.2 var(--display);letter-spacing:-.025em;margin:.5rem 0 0;overflow-wrap:anywhere}
.project-row-summary{max-width:68ch;margin-block:1rem 1.5rem;line-height:1.5}
.project-row-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin:0}
.project-row dt{font:400 .75rem/1.5 var(--body);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:.5rem}
.project-row dd{margin:0;overflow-wrap:anywhere;line-height:1.5}
.project-row-tool{display:block;margin-bottom:.35rem}
.project-row-tool b{font-weight:500}.project-row-tool>span{color:var(--muted)}
@media(min-width:761px) and (max-width:1100px){.portrait-surface .hero-interaction{bottom:84px;right:18px}}
@media(max-width:760px){
  .header-actions{gap:8px}.social-links{gap:6px}
  .social-link{width:44px;height:44px}
  .vision-contact .social-link{width:64px;height:64px;border-radius:19px}
  .vision-contact .social-glyph{width:28px;height:28px}
  .theme-toggle{width:44px;min-height:44px;padding:0}.theme-label{display:none}
  .photo-case-caption{font-size:.75rem;gap:12px}
  .photo-case .product-overlay>span{font-size:.75rem}
  .photo-case .product-overlay>div{font-size:.9375rem}
  .portrait-surface .hero-interaction{bottom:168px;right:18px}
  .decision-line{right:-19px}
  .project-row-details{grid-template-columns:1fr;gap:1rem}
}
@media(max-width:768px){.contact-send,.contact-send:hover{color:#091114}}
@media(max-width:380px){.portrait-count:after{content:' · TAP';letter-spacing:.05em}}
.contact-field textarea{display:block;width:100%;min-width:0;min-height:44px;height:44px;padding:10px 16px;border:0;border-radius:4px;background:transparent;color:var(--ink);font:400 1rem/1.4 var(--body);box-sizing:border-box;resize:none;overflow-y:hidden;scrollbar-width:thin}
.contact-field textarea::placeholder{color:var(--muted);opacity:1}
.contact-field textarea:focus{outline:none;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.contact-field input:focus-visible,.contact-field textarea:focus-visible{outline:2px solid var(--secondary-ink);outline-offset:2px}
@media(min-width:769px){.contact-field textarea{padding-inline:8px}}
@media(max-width:768px){.contact-field textarea{min-height:46px;height:46px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);border-radius:8px;background:color-mix(in srgb,var(--ink) 4%,transparent)}}
@media(prefers-reduced-motion:reduce){.social-gloss{animation:none}.social-link,.social-glyph,.social-link:after{transition:none}.social-link:is(:hover,:focus-visible,:active){transform:none}}
.portrait-surface .portrait-switch .hero-interaction{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 15px;border:1px solid #ffffff70;border-radius:999px;background:linear-gradient(150deg,#ffffff29,#090909dc 64%);box-shadow:inset 0 1px 0 #ffffff40,0 8px 24px #0005;color:#fff;font:500 .75rem/1.3 var(--body);letter-spacing:.025em;pointer-events:none}
.portrait-switch .hero-interaction>span:last-child{font:400 1.6rem/1 var(--body)}
.portrait-switch:is(:hover,:focus-visible) .hero-interaction{border-color:#69e5ff;box-shadow:inset 0 1px 0 #fff5,0 0 22px #49edff25}
@media(max-width:760px){.portrait-surface .portrait-switch .hero-interaction{bottom:168px;right:18px;padding:9px 13px;gap:10px}.portrait-switch .hero-interaction .interaction-touch{max-width:none;text-align:left;line-height:1.3}}