/* 2026 visual direction: cinematic work inside a precise, signal-led interface. */
:root{
  --bg:#070b10;
  --surface:#0e151b;
  --text:#eff7f6;
  --muted:#b1c1c5;
  --quiet:#82959c;
  --line:#30434a;
  --accent:#88e7e2;
  --gutter:clamp(24px,6vw,104px);
  --sans:'Segoe UI','Microsoft YaHei','PingFang SC',Arial,sans-serif;
  --mono:Consolas,'Courier New',monospace;
}
body{background:var(--bg);letter-spacing:.005em}
html{scroll-padding-top:0}
a:focus-visible,button:focus-visible,video:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.section{max-width:1680px;padding:112px var(--gutter)}
.section-label{margin-bottom:44px;border-top-color:var(--line);color:var(--accent);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em}
.section-label span:last-child{color:var(--muted);font-family:var(--sans);font-weight:400}
.eyebrow,.mini-label,.project-number,.skill-tag,.source-note{font-family:var(--mono);letter-spacing:.1em}
.draft{border-color:#69746f;color:#d3d5bf}
.section-heading{align-items:end;margin-bottom:44px}
.section-heading h2,.case-heading h2{font-size:clamp(42px,5.2vw,76px);font-weight:700;line-height:1.18;letter-spacing:-.065em}
.section-heading h2::after{content:"";display:block;width:46px;height:3px;margin-top:28px;background:var(--accent)}
.section-heading>p{max-width:390px;color:var(--muted);font-size:15px;line-height:1.9}
.text-link{border-color:#738b8f}
.text-link:hover{color:var(--accent);border-color:var(--accent)}
.button{border-color:#6b888d;border-radius:2px}
.button:hover{background:#183037}
.button.primary{background:var(--accent);border-color:var(--accent);color:#071014;font-weight:700}
.button.primary:hover{background:#b7fffa;color:#071014}

/* Immersive first screen */
.site-header{height:94px;padding:0 var(--gutter);border-bottom:1px solid #c6ffff27;background:linear-gradient(180deg,#071014bd,#07101400)}
.wordmark{font-family:var(--sans);font-size:27px;font-weight:800;letter-spacing:-.075em;gap:14px}
.wordmark::before{content:"";display:block;width:10px;height:10px;background:var(--accent);box-shadow:0 0 18px #88e7e2a0}
.wordmark>span.brand-name{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.1em;color:#dcebea}
.site-header nav{gap:clamp(18px,3vw,46px);font-size:12px;letter-spacing:.07em}
.site-header nav>a:hover{color:var(--accent)}
.site-header sup{color:var(--accent)}
.site-header .nav-contact{border:1px solid #91ccc88a;padding:4px 15px;border-radius:2px}
.site-header .nav-contact:hover{background:#88e7e226}
.hero{height:100svh;min-height:680px;max-height:none;background:#070b10;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent calc(100% - 1px),#9cffff13 0),linear-gradient(0deg,transparent calc(100% - 1px),#9cffff13 0);background-size:80px 80px;mask-image:linear-gradient(90deg,#0007,transparent 60%)}
.hero-art{inset:0;z-index:-2;opacity:1}
.hero-art img,.hero-art video{object-fit:cover;object-position:center;filter:brightness(.58) contrast(1.08) saturate(.95)}
.hero-art::after{background:linear-gradient(90deg,#070b10df 0%,#070b1092 39%,#070b102e 78%,#070b1042 100%),linear-gradient(0deg,#070b10c9 0%,transparent 30%)}
.hero-signal{position:absolute;top:132px;right:var(--gutter);display:flex;align-items:center;gap:13px;color:#d2f4f0;font:11px var(--mono);letter-spacing:.09em;text-shadow:0 1px 12px #000}
.signal-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 15px var(--accent);animation:signal-pulse 2.8s ease-in-out infinite}
@keyframes signal-pulse{50%{opacity:.48;box-shadow:0 0 3px var(--accent)}}
.hero-copy{position:absolute;top:clamp(160px,23vh,300px);left:var(--gutter);right:auto;width:min(58vw,850px);max-width:none;padding:0}
.hero-copy .eyebrow{color:var(--accent);font:600 11px var(--mono);letter-spacing:.2em}
.hero h1{font-family:var(--sans);font-size:clamp(68px,7.4vw,130px);font-weight:750;line-height:1.08;letter-spacing:-.085em;margin:30px 0 30px;text-shadow:0 2px 34px #000a}
.hero h1>span{font-family:inherit;font-weight:inherit;color:var(--accent)}
.hero-subtitle{max-width:550px;color:#e0eded;font-size:16px;line-height:1.9;letter-spacing:.04em;text-shadow:0 2px 18px #000}
.hero-actions{gap:22px;margin-top:40px}
.hero-actions .button.primary{min-height:52px;padding:12px 23px;border-radius:2px;background:var(--accent);border-color:var(--accent);color:#071014;font-size:13px;gap:30px}
.hero-actions .button.primary:hover{background:#b7fffa}
.hero-actions .text-link{min-height:48px;border-color:#a5d6d4;font-size:13px;color:#ecf8f7;gap:18px}
.hero-bottom{left:var(--gutter);right:var(--gutter);min-height:106px;padding:20px 0;border-top-color:#b9ffff55}
.hero-index{gap:8px 28px}
.hero-index a{padding:5px 0 5px 12px;border-left:1px solid #a8d9d481;color:#eef5f4;font-size:12px;letter-spacing:.04em}
.hero-index a>span{color:var(--accent);font-family:var(--mono);font-size:10px}
.hero-index a:hover{color:var(--accent);border-left-color:var(--accent)}
.hero-caption{color:#bbd0d2;font:10px var(--mono)!important;letter-spacing:.1em}
.hero-caption span{color:#ecf8f7!important;font:12px var(--sans)!important;letter-spacing:.03em}
#hero-playback{border-color:var(--accent);border-radius:2px;color:var(--accent)}

/* Full-width personal page */
.section.about{max-width:none;padding:24px 0 0;background:#091117}
.about .section-label{margin:0 var(--gutter) 24px}
.about-frame{position:relative;padding:clamp(28px,4.4vw,72px);border-color:#47666b;background:radial-gradient(circle at 86% 58%,#122930 0%,#081118 42%,#050b10 82%)}
.about-frame::before{content:"BARRY / PROFILE 001";position:absolute;right:var(--gutter);top:16px;color:#81aeb0;font:10px var(--mono);letter-spacing:.12em}
.about-topline h2{color:#f0f7f6;font-family:var(--sans);font-weight:800;font-size:clamp(96px,15vw,235px);letter-spacing:-.11em}
.about-topline>a{color:var(--accent);font-family:var(--mono);font-size:10px}
.about-topline>a:hover,.about-connect a:hover{color:#c1fffa}
.about-layout{gap:clamp(32px,6vw,120px);margin-top:clamp(24px,4vh,60px)}
.about-copy{align-self:stretch;justify-content:flex-end;padding:0 0 clamp(80px,15vh,160px)}
.about-role{color:var(--accent);font-family:var(--sans);font-weight:650;font-size:clamp(34px,4.5vw,68px);letter-spacing:-.07em;line-height:1.1}
.about-photo{border:1px solid #9bcbca5c;background:#102025}
.about-photo img{filter:saturate(.75) contrast(1.08)}
.about-photo figcaption{right:0;bottom:0;width:100%;padding:16px 20px;background:linear-gradient(0deg,#030a0bcf,transparent);text-align:right;font-family:var(--mono)}

/* Work archive */
.work{padding-top:70px}
.project-grid{gap:30px}
.project-card{border:1px solid #365057;background:#101a20;transition:border-color .25s,transform .25s,box-shadow .25s}
.project-card:hover{transform:translateY(-4px);border-color:#88e7e2a8;box-shadow:0 20px 48px #0006}
.project-image{background:#0e171b}
.project-image::after{content:"";position:absolute;inset:50% 0 0;pointer-events:none;background:linear-gradient(0deg,#04090a99,transparent)}
.project-image img{transition:transform .6s ease,filter .6s ease}
.project-number{z-index:1;top:18px;left:18px;border:1px solid #a8ece6aa;border-radius:1px;background:#071015d6;color:var(--accent);font-size:10px;padding:8px 11px}
.project-open{z-index:1;right:18px;bottom:18px;width:48px;height:48px;border:1px solid var(--accent);border-radius:2px;background:#071015d6;color:var(--accent)}
.project-card:hover .project-open{background:var(--accent);color:#071014}
.image-note{z-index:1;color:#eaf9f6;font-family:var(--mono);font-size:10px}
.project-meta{padding:24px 26px 27px;border-top:1px solid #385057;align-items:start}
.project-meta .eyebrow{color:var(--accent);font-size:11px}
.project-meta h3{font-size:clamp(26px,2.6vw,36px);font-weight:650;letter-spacing:-.045em}
.project-meta>p{max-width:320px;line-height:1.7}
.project-meta>p span{display:block;margin-left:0;color:var(--accent)}
.fashion-card{background:#101d22}
.fashion-copy{padding:clamp(28px,4vw,58px);background:linear-gradient(150deg,#162c32,#0c171d 70%)}
.fashion-copy>.eyebrow{color:var(--accent)}
.fashion-copy>h3{font-size:clamp(40px,4.5vw,68px);font-weight:700;line-height:1.2;letter-spacing:-.07em}
.fashion-copy em{color:var(--accent);font-family:inherit}
.fashion-copy>div p{font-size:26px;font-weight:650}
.fashion-copy>div span{font-size:13px;color:#b8ccce}
.fashion-copy>.text-link{color:var(--accent);border-color:#86b9b9}
.fashion-card .fashion-images{background:#14272d}
.fashion-card .collage-tile{background:#0a151a}

/* Process and case study */
.strength-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:46px}
.strength-list article{display:flex;flex-direction:column;gap:0;min-height:330px;margin:0;padding:30px;border:1px solid #365057;background:linear-gradient(145deg,#111f25,#0a1218)}
.strength-index{color:var(--accent);font:12px var(--mono)}
.strength-list article>div{margin-top:40px}
.strength-list h3{font-size:clamp(20px,2vw,27px);line-height:1.45;font-weight:650;letter-spacing:-.04em}
.strength-list p{margin-top:16px;color:#b6c6c9;font-size:14px;line-height:1.85}
.skill-tag{margin-top:auto;padding-top:28px;color:var(--accent);font-size:10px;text-align:left}
.case-heading{gap:8%}
.case-heading .eyebrow,.mini-label{color:var(--accent)}
.case-facts{border-top-color:#64888b}
.case-facts>div{border-bottom-color:var(--line)}
.case-facts dt{color:var(--accent);font-family:var(--mono);font-size:11px}
.case-facts dd{color:var(--text)}
.case-intro,.workflow-layout{gap:clamp(32px,6vw,80px)}
.case-intro h3,.sub-heading h3,.workflow-layout h3{font-weight:650;letter-spacing:-.04em}
.shot-display{border:1px solid #426369;background:#0b1418}
.shot-display figcaption{background:#112229;color:#d2e3e3;font-family:var(--mono)}
.shot-controls{border-bottom-color:#426369}
.shot-controls>button[aria-pressed=true]{background:#143238;border-bottom-color:var(--accent);color:#fff}
.shot-controls>button:hover{background:#143238}
.shot-controls>button span{color:var(--accent)}
.asset-grid img,.workflow-layout img{background:#111d22}
.asset-grid figure,.workflow-layout figure{border:1px solid #365057}
.asset-grid figcaption,.workflow-layout figcaption{padding:12px;color:var(--accent);font-family:var(--mono)}
.case-outcomes{border-top-color:#426369}
.case-outcomes article{padding:24px;border:1px solid #365057;background:#0c171d}

/* Final invitation and detail dialog */
.section.contact{max-width:none;padding-top:92px;background:radial-gradient(circle at 90% 0%,#174049 0%,#0e1a20 40%,#080f14 80%)}
.contact h2{font-size:clamp(46px,6.3vw,96px);font-weight:700;line-height:1.18;letter-spacing:-.07em}
.contact-intro{max-width:600px;margin-top:28px;color:#bacdd0;font-size:16px;line-height:1.9}
.contact-email{margin-top:48px;border-bottom-color:var(--accent);font-weight:650;letter-spacing:-.04em}
.contact-email:hover{color:var(--accent)}
.contact-actions .button{border-color:var(--accent);color:var(--accent)}
.contact-actions .button:hover{background:#88e7e221}
.footer-bottom{border-top-color:#517076}
dialog{border-color:#50757a;background:#091319;color:var(--text)}
dialog::backdrop{background:#02080bcf}
.dialog-toolbar{background:#0b1a20fb;border-bottom-color:#41636a}
.dialog-toolbar>.eyebrow{color:var(--accent)}
.close-dialog{border-color:#6d9ba0;border-radius:2px}
.close-dialog:hover{background:#204049}
.detail-grid section{padding:22px;border:1px solid #365057;background:#0e1c22}
.dialog-heading .eyebrow{color:var(--accent)}
.detail-media img,.detail-media video{background:#071013}
.detail-media figure{border-bottom:1px solid #365057;padding-bottom:22px}
.detail-media figcaption{color:var(--accent);font-family:var(--mono)}

@media(max-width:1100px){
  .hero-copy{width:min(64vw,750px)}
  .hero-signal{display:none}
  .strength-list{grid-template-columns:1fr 1fr}
  .strength-list article{min-height:300px}
}
@media(max-width:760px){
  :root{--gutter:20px}
  .section{padding:82px var(--gutter)}
  .section-label{margin-bottom:36px}
  .section-heading{margin-bottom:34px}
  .section-heading h2,.case-heading h2{font-size:clamp(38px,9.5vw,56px)}
  .section-heading>p{font-size:14px}
  .site-header{height:76px;padding:0 var(--gutter)}
  .wordmark{font-size:24px}
  .wordmark>span.brand-name{font-size:10px}
  .site-header nav{top:76px;padding:20px var(--gutter);background:#0b171cf9}
  .site-header .nav-contact{justify-content:center;padding:5px 15px;margin:8px 0 0}
  .hero{height:100svh;min-height:780px;max-height:none}
  .hero-art{inset:0;opacity:1}
  .hero-art img,.hero-art video{object-position:center;filter:brightness(.46) contrast(1.12) saturate(.9)}
  .hero-art::after{background:linear-gradient(90deg,#070b10c9,#070b108f),linear-gradient(0deg,#070b10db 0%,transparent 45%)}
  .hero-copy{top:190px;left:var(--gutter);right:var(--gutter);width:auto;max-width:500px}
  .hero-copy .eyebrow{font-size:10px}
  .hero h1{font-size:clamp(54px,13vw,80px);line-height:1.11;margin:24px 0}
  .hero-subtitle{font-size:14px;max-width:340px}
  .hero-actions{gap:18px;flex-wrap:wrap;margin-top:28px}
  .hero-actions .button.primary{padding:10px 16px;min-height:48px;gap:16px}
  .hero-actions .text-link{font-size:12px}
  .hero-bottom{left:var(--gutter);right:var(--gutter);min-height:126px;padding:14px 0}
  .hero-index{grid-template-columns:1fr 1fr;gap:0 12px}
  .hero-index a{font-size:11px;padding-left:8px}
  .hero-caption{display:none}
  .section.about{padding:20px 0 0}
  .about .section-label{margin:0 var(--gutter) 20px}
  .about-frame{padding:28px var(--gutter)}
  .about-frame::before{right:var(--gutter);font-size:8px}
  .about-topline h2{font-size:clamp(70px,18vw,128px)}
  .about-layout{margin-top:34px}
  .about-copy{align-self:auto;justify-content:flex-start;padding:clamp(48px,9vh,88px) 0 0}
  .about-role{font-size:clamp(38px,9vw,56px)}
  .about-photo{max-height:560px}
  .work{padding-top:82px}
  .project-grid{gap:22px}
  .project-meta{padding:20px}
  .project-meta>p{max-width:none}
  .fashion-card{display:flex;flex-direction:column-reverse}
  .fashion-copy{padding:26px}
  .fashion-copy>h3{font-size:42px}
  .strength-list{grid-template-columns:1fr;gap:10px;margin-top:30px}
  .strength-list article{min-height:0;padding:24px}
  .strength-list article>div{margin-top:22px}
  .skill-tag{padding-top:20px}
  .case-intro,.workflow-layout{gap:24px}
  .section.contact{padding-top:82px}
  .contact h2{font-size:clamp(42px,10vw,60px)}
  .contact-intro{font-size:14px}
  .detail-grid section{padding:18px}
}
@media(max-width:390px){
  .hero-copy{top:168px}
  .hero h1{font-size:52px}
  .hero-actions{gap:10px}
  .hero-actions .button.primary{font-size:12px;gap:8px}
  .hero-actions .text-link{gap:8px}
  .about-frame{padding:26px 16px}
}
@media(prefers-reduced-motion:reduce){.signal-dot{animation:none}}