:root{--pt:#2b2b2b;--rule:#646963;--m:2vw;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
.page-one{--paper:#f0f0f0;--ink:#131812;}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--paper);font:400 clamp(13px,1.1vw,16px)/1.5 "Inter Tight",Helvetica,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #fff;outline-offset:3px;mix-blend-mode:difference}
.m{font-family:"IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;font-size:clamp(10px,.9vw,13px);line-height:1.35;letter-spacing:0}
.d{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.88}
.s{font-family:"Instrument Serif",Times,serif;font-weight:400;letter-spacing:-.01em}
h1,h2,h3,p{margin:0}
/* ---------- header: same structure as the main site, on a white background ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:calc(14px + env(safe-area-inset-top,0px)) 2vw 14px;background:#fff;color:#111;border-bottom:1px solid #e3e3e3}
.hd div{min-width:0}.hd div:nth-child(2){text-align:center}.hd div:last-child{flex:none;text-align:right;white-space:nowrap}
.hd a{margin-left:2.4em;padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .25s}
.hd a:hover,.hd a[aria-current=page]{border-color:#111}
section:not(#hero),footer,.pin-spacer{position:relative;z-index:2;background:var(--ink)}
.g3{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
/* HERO */
/* ---------- SKIP TO WORKS button (hero) ---------- */
#hero .skip{position:absolute;left:50%;top:calc(15vh + 20vw + 3vh);transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.1vh;color:var(--pt,#2b2b2b);text-align:center}
.skip-btn{display:inline-flex;align-items:center;gap:.7em;border-bottom:1px solid currentColor;font-size:clamp(13px,1.4vw,22px);letter-spacing:.09em;white-space:nowrap;transition:border-color .3s}
.skip-arrow{display:inline-block;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.skip:hover .skip-arrow,.skip:focus-visible .skip-arrow{transform:translate(.25em,-.25em)}
.skip:hover .skip-btn{border-bottom-width:2px;padding-bottom:calc(.55em - 1px)}
.skip-sub{text-transform:none;letter-spacing:.12em;color:#8a8a8a;font-size:clamp(10px,.85vw,13px)}
.skip:focus-visible{outline:2px solid currentColor;outline-offset:8px}
/* optional (desktop/tablet): keeps the service band and intro text below the button */
@media(min-width:768px){
 #hero .band{top:max(60vh,calc(17vh + 21.6vw + 13vh))}
 #hero .hdesc{top:max(72vh,calc(17vh + 21.6vw + 24vh))}
}
@media(max-width:767px){#hero .skip{top:calc(15svh + 21.6vw + 3svh)}.skip-btn{font-size:13px}}
@media(prefers-reduced-motion:reduce){.skip-arrow{transition:none}}
#hero{position:sticky;top:0;height:100svh;background:var(--paper);color:var(--pt);overflow:hidden}
.word{position:absolute;left:50%;top:12vh;transform:translateX(-50%);white-space:nowrap;font-size:19vw;margin:0}
.band{position:absolute;left:0;right:0;top:48vh;background:#fff;padding:3px var(--m);display:flex;justify-content:space-between;flex-wrap:wrap;gap:0 2em;font-size:10px}
.hdesc{position:absolute;left:50%;top:60vh;transform:translateX(-50%);width:min(47vw,560px);text-align:center}
.hint{position:absolute;bottom:3vh;width:100%;text-align:center}
/* MANIFESTO */F
#mani{position:relative;z-index:2;background:var(--ink);padding:22vh var(--m) 10vh}
.mt{font-size:clamp(28px,3.4vw,64px);line-height:.97;letter-spacing:-.01em;font-weight:500;text-transform:uppercase}
.mt span{display:block;text-align:justify;text-align-last:justify;white-space:nowrap}
.small{margin:6vh 0 0 16vw;width:65vw;max-width:830px}
.lab{display:block;text-align:center;margin-bottom:2vh;padding-top:4vh}
/* BRAND STAFGE */
#brand{padding:10vh 0 6vh}
.bs{position:relative;padding:0 var(--m)}
.bt{margin:0 0 4vh 14vw;width:65vw;max-width:830px}
.rows{position:relative;width:62vw;margin:0 auto;transform-origin:0 50%}
.br{position:relative;display:block;text-align:center;font-size:clamp(60px,13vw,240px);color:transparent;-webkit-text-stroke:1px #fff;margin-top:-.28em;white-space:nowrap}
.br:first-child{margin-top:0}
.ell{position:absolute;left:-12%;top:0;width:124%;height:100%;pointer-events:none;z-index:2}
.br:nth-child(even){transform:scaleY(-1)}
.br::after{content:attr(data-t);position:absolute;inset:0;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55);transform:translateX(var(--gx,3%)) scaleX(var(--gs,.94))}
.pwrap{margin:8vh 0 0}
.panel{position:relative;width:92vw;aspect-ratio:5/3;margin:0 auto;background:#333333;overflow:hidden;display:grid;place-items:center;text-align:center}
.panel .f{position:absolute;border:1px solid #fff;inset:calc(var(--i)*3.5%) calc(var(--i)*6%)}
.panel p{position:relative;z-index:2;color:#fff;mix-blend-mode:difference}
.un{display:grid;grid-template-columns:16vw 1fr;gap:2vw;margin-top:6vh;padding-bottom:10vh}
.un p{max-width:56ch}
/* PLATES */
.plate{position:relative;background:#3a3f39;display:grid;place-items:center;color:rgba(255,255,255,.4);overflow:hidden;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.plate:hover{transform:scale(1.03)}
.plate canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dots{display:none}
.card>.m:first-child{margin-bottom:1.4vh}.card>.m:last-child{margin-top:1.4vh}
/* STRIP */
#strip{position:relative;padding:8vh 0;min-height:100svh;overflow-x:clip}place-items: ;
#strip .lab{text-align:left;margin:0 0 4vh var(--m)}
.track{display:flex;gap:7.3vw;padding:0 var(--m);overflow-x:auto;scrollbar-width:none}
.card{flex:none;width:min(72vw,27vw*2.6);position:relative;padding:3% 0}
.card .plate{aspect-ratio:728 / 325;width:min(500px, 40vw);width: auto}
.card .m{display:block;text-align:center}
.btn2{background-color:#333333;border-radius:12px;padding:12px}
/* CONTACT */
#contact{position:relative;z-index:2;background:var(--ink);color:var(--paper);padding:16vh var(--m) 10vh;text-align:center}
.ct{font-size:clamp(26px,3.1vw,50px);line-height:.97;letter-spacing:-.01em;font-weight:500;text-transform:uppercase;text-align:left}
.ct span{display:block;text-align:justify;text-align-last:justify}
.ct .w{display:inline-block;font-style:normal}
@media(hover:hover) and (pointer:fine){.ct .w:hover{color:transparent;-webkit-text-stroke:1px var(--paper)}}
#cube{display:block;width:min(34vw,400px);aspect-ratio:1/1;margin:3vh auto}
/* WORK */
#work{position:relative;background:var(--ink);padding:14vh var(--m)}
.slide{margin:0 0 10vh;cursor:default}
.slide .plate{aspect-ratio:var(--ar,.75);width:min(72vw,360px)}
.slide.l .plate{width:min(92vw,520px)}
.slide .plate img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.wt{font-size:clamp(28px,2.8vw,48px);margin:2vh 0 1vh}
.stage-ui{display:none}
/* CASE */
#case{position:relative;padding:20vh var(--m) 0}
.ct2{font-size:clamp(34px,3.2vw,56px);padding-bottom:3vh;border-bottom:1px solid var(--rule)}
.meta{display:grid;grid-template-columns:1fr 1fr 1fr;padding-top:2vh}
.meta p:nth-child(2){padding-left:calc(50vw - 2vw - 33%)}.meta p:last-child{text-align:right}
.banner{margin:6vh calc(var(--m)*-1) 0;height:28vh;overflow:hidden}
.banner .plate{height:100%;background:#2a2e29;transition:none}
.banner .plate img,.pn img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.pn.has-img{padding:0}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:3vw;margin:10vh 0 12vh;width:60vw}
.cols p{opacity:.9}.cols .m{display:block;border-top:1px solid var(--rule);padding-top:8px;margin-bottom:8px;color:#aaa}
.bwrap{margin:16vh 0}
.browser{width:min(92vw,calc((100svh - 18vh)*16/9));aspect-ratio:16/9;margin:0 auto;background:#fff;color:#111;overflow:hidden}
.rail{display:flex;flex-direction:column;height:100%}
.pn{flex:none;width:100%;aspect-ratio:16/9;padding:6%;display:flex;align-items:center;font-size:clamp(20px,3vw,48px);font-weight:800;letter-spacing:-.04em;line-height:.95;text-transform:uppercase}
.pn:nth-child(2){background:#131812;color:#fff}.pn:nth-child(3){background:#e8e8e8}.pn:nth-child(4){background:#c8c8c8}
/* NEXT + FOOTER */
#next{padding:14vh var(--m) 10vh}
footer{padding:12vh var(--m) 6vh}
.fb{font-size:clamp(40px,10.5vw,190px);display:block}
.fm{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:6vh}
#cur{position:fixed;left:0;top:0;width:8px;height:8px;margin:-4px;border-radius:50%;background:#fff;mix-blend-mode:difference;z-index:60;pointer-events:none;display:none;font:400 10px/1 "IBM Plex Mono",monospace;color:#000;text-align:center;transition:width .3s,height .3s,margin .3s}
#cur.v{width:56px;height:56px;margin:-28px;line-height:56px;mix-blend-mode:normal;background:#f0f0f0}
/* PROJECT TABLE + SKILLS */
#proj{padding:0vh 0}
.pg{display:grid;grid-template-columns:repeat(3,1fr);margin:0 var(--m);border-right:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}
.pc,.kc{display:grid;grid-template-columns:auto 1fr;align-items:start;align-content:start;gap:0 1.1vw;padding:1.1vw 2.2vw 1.8vw;border-top:1px solid rgba(255,255,255,.2);border-left:1px solid rgba(255,255,255,.2)}
.pc>*,.kc>*{margin:0}
.pc>:not(.nb):not(h3),.kc>:not(.nb):not(h3){grid-column:1/-1}
.nb{display:grid;place-items:center;width:clamp(30px,2.8vw,44px);aspect-ratio:1;background:#e4e4e4;color:#1a1a1a;font-size:clamp(14px,1.3vw,20px)}
.pc h3{font:500 clamp(12px,1.05vw,16px)/1.25 "Inter Tight",sans-serif;text-transform:uppercase;color:#f4f4f4;overflow-wrap:anywhere}
.pc .dt{margin-top:2.6vw;font-size:clamp(14px,1.2vw,18px);color:#f4f4f4}
.pc .sb{margin-top:1.3vw;font-weight:500;color:#bdbdbd;font-size:clamp(12px,1vw,15px)}
.pc p:last-child{margin-top:.2vw;color:#8f938d;font-size:clamp(12px,1vw,15px)}
section#skills{background:#f4f4f4;color:#1a1a1a;padding:10vh var(--m)}
.sg{display:grid;grid-template-columns:repeat(5,1fr);border-right:1px solid #cfcfcf;border-bottom:1px solid #cfcfcf}
.kc{border-color:#cfcfcf;gap:0 .9vw;padding:1vw 1.3vw 1.6vw}
.kc h3{font:400 clamp(12px,1.05vw,16px)/1.25 "Inter Tight",sans-serif;color:#1a1a1a}
.kc .lv{margin-top:2.4vw;font-size:clamp(13px,1.2vw,18px);color:#1a1a1a}.kc .lv.f{color:#8a8a8a}
.kc .ds,.kc ul{color:#767676;font-size:clamp(11px,.95vw,15px);line-height:1.4}
.kc .ds{margin-top:1.1vw}.kc ul{list-style:none;padding:0;margin-top:3.4vw}
.kc.k .nb{background:#000;color:#fff}
/* DESKTOP + MOTION */
@media(min-width:768px) and (prefers-reduced-motion:no-preference){
 .track{overflow:visible;width:max-content}
 .card{width:min(27vw,48vh)}
 #work{height:100svh;padding:0;overflow:hidden;perspective:1300px}
 .slide{position:absolute;left:50%;top:50%;margin:0;cursor:pointer}
 .slide .plate,.slide.l .plate{height:min(66vh,calc(46vw/var(--ar,.75)));width:auto}
 .stage-ui{display:block}
 .sw{position:absolute;left:0;right:0;top:50%;text-align:center;z-index:40;font-size:clamp(28px,2.8vw,48px);pointer-events:none;transform:translateY(-50%)}
 .sl{position:absolute;left:var(--m);top:50%;z-index:40}.sr{position:absolute;right:var(--m);top:50%;z-index:40}
 .th{position:absolute;bottom:4vh;left:50%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:6px;max-width:94vw;z-index:40}
 .th button{position:relative;padding:0;border:1px solid transparent;opacity:.5;cursor:pointer;flex:none;transition:opacity .3s,border-color .3s,transform .3s}.th button::after{content:"";position:absolute;inset:-10px -3px}.th button:hover{opacity:.9;transform:translateY(-3px)}.th button.on{opacity:1;border-color:#fff}
 .dots{display:block}
 .bwrap{height:100svh;display:grid;place-items:center;margin:0}
 .rail{flex-direction:row;width:400%}.pn{width:25%}
}
@media(max-width:767px){.small,.pt{margin-left:0;width:100%}#uni{grid-template-columns:1fr}.cols{width:100%;grid-template-columns:1fr}.meta{grid-template-columns:1fr}.meta p:nth-child(2){padding:0}.meta p:last-child{text-align:left}.hd div:nth-child(2){display:none}.mt span,.ct span{text-align:left;text-align-last:left;white-space:normal}.card{width:70vw}.track{scroll-snap-type:x mandatory}.card{scroll-snap-align:center}.prog{display:none}.browser{width:94vw}.rail{overflow-x:auto;flex-direction:row;scroll-snap-type:x mandatory}.pn{width:100%;scroll-snap-align:start}}
@media(min-width:768px) and (min-aspect-ratio:1/1) and (prefers-reduced-motion:no-preference){
 #brand{height:420vh;padding:0}
 .bs{position:sticky;top:0;height:100svh;overflow:hidden;padding:0}
 .bt{position:absolute;top:6vh;left:14vw;margin:0;z-index:3}
 .rows{position:absolute;left:22vw;top:16vh;width:56vw;height:62vh;margin:0;z-index:1;transform-origin:0 50%}
 .br{font-size:var(--fs,12vw);line-height:.72;margin-top:-.2em}
 .pwrap{position:absolute;left:0;right:0;top:16vh;height:62vh;margin:0;clip-path:inset(0 0 0 100vw);z-index:2}
 .panel{position:absolute;left:26vw;right:var(--m);top:0;height:100%;width:auto;aspect-ratio:auto;margin:0}
 .un{position:absolute;left:var(--m);right:var(--m);bottom:3vh;margin:0;padding:0;z-index:3}
}
@media(max-width:767px){
 :root{--m:4.5vw}
 body{font-size:15px}
 .hd{mix-blend-mode:normal;background:rgba(19,24,18,.9);backdrop-filter:blur(8px);padding-bottom:10px;align-items:center}
 .hd div:first-child{display:none}.hd div:nth-child(2){display:block;flex:1;text-align:left}.hd div:last-child{flex:none}
 .hd a{margin-left:.9em}
 .hd{gap:10px}.hd div{min-width:0}.hd div:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hd div:last-child{white-space:nowrap}
 #brand{overflow-x:clip}#case,#work,#strip,#contact,#next{overflow-x:clip}
 .word{top:15svh}
 .band{top:41svh;flex-wrap:nowrap;overflow:hidden;gap:0 1em;font-size:9px}.band span:nth-child(n+4){display:none}
 .hdesc{top:auto;bottom:11svh;width:84vw;font-size:10px;background:rgba(240,240,240,.82);padding:8px}
 .hint{bottom:3svh}
 #mani{padding:18vh var(--m) 8vh}
 .mt{font-size:7.4vw;line-height:1}.mt span,.ct span{display:inline}.mt span::after,.ct span::after{content:" "}
 .small{margin-top:5vh}
 #brand{padding:8vh var(--m) 4vh}
 .bs{padding:0}.bt{margin:0 0 5vh}
 .rows{width:100%;height:70vw;margin:0}
 .br{font-size:25vw;line-height:.72;margin-top:-.2em}.br:first-child{margin-top:0}
 .pwrap{margin:8vh 0 0}.panel{width:100%;aspect-ratio:4/5}
 .un{margin-top:5vh;padding-bottom:6vh}
 #strip{min-height:0;padding:6vh 0 10vh}
 #strip{padding:10vh 0}.track{flex-direction:column;gap:9vh;overflow:visible;padding:0 var(--m)}.card{width:86vw}.card:nth-child(even){align-self:flex-end}
 .pg,.sg{grid-template-columns:1fr}.pc,.kc{gap:0 14px;padding:16px 16px 22px}.pc .dt,.kc .lv{margin-top:20px}.pc .sb,.kc .ds{margin-top:10px}.kc ul{margin-top:18px}.pc h3,.kc h3{font-size:13px}.pc p:last-child,.kc .ds,.kc ul{font-size:13px}#proj{padding:8vh 0}section#skills{padding:8vh var(--m)}
 #contact{padding:14vh var(--m) 8vh}
 .ct{font-size:6.2vw;line-height:1}
 #cube{width:72vw;margin:6vh auto}
 #work{padding:12vh var(--m) 2vh}.slide{margin:0 0 8vh}.slide .plate{width:78vw}.slide.l .plate{width:100%}.slide.r .plate{margin-left:auto}
 #case{padding:14vh var(--m) 0}.banner{height:34vh}.cols{margin:6vh 0 0}.bwrap{margin:10vh 0}.browser{width:100%}
 #next{padding:12vh var(--m) 8vh}
 footer{padding:10vh var(--m) 5vh}.fb{font-size:15vw}
}
@media(max-width:767px),(max-aspect-ratio:1/1){
 #brand{padding:8vh var(--m) 4vh;overflow-x:clip}
 .bs{padding:0}.bt{margin:0 0 5vh;width:100%}
 .rows{width:100%;height:calc(25vw*2.8);margin:0}
 .br{font-size:25vw;line-height:.72;margin-top:-.2em}.br:first-child{margin-top:0}
 .pwrap{margin:5vh 0 0}.panel{width:100%;aspect-ratio:1/1}
}
@media(max-width:767px) and (prefers-reduced-motion:no-preference){.dots{display:block}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* drag to scroll horizontally */
#strip,#work{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
#strip.dragging,#work.dragging{cursor:grabbing}
#strip img,#work img{-webkit-user-drag:none}

/* featured-work: pinned, cards centred on screen + progress bar */
.pbar{display:none}
@media(min-width:768px) and (prefers-reduced-motion:no-preference){
 #strip{height:100svh;min-height:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
 #strip .lab{position:absolute;top:calc(14px + 7vh);left:var(--m);margin:0}
 #strip .track{flex:none}
 #strip .card{padding:0;width:min(34vw,66vh)}
 .pbar{display:block;position:relative;align-self:center;flex:none;width:150px;height:9px;margin-top:4.5vh;pointer-events:none;opacity:0;transform-origin:50% 50%;will-change:transform,opacity}
 .pbar .ticks{position:absolute;inset:0}
 .pbar .ticks i{position:absolute;top:0;width:1px;height:100%;background:#fff;transition:opacity .25s linear}
 .pbar .box{position:absolute;left:0;top:0;height:100%;width:9px;border:1px solid rgba(255,255,255,.8);box-sizing:border-box}
}
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  .top-nav {
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 6vw;
  }
  .top-nav .brand {
    font-weight: 700;
    font-style: italic;
    font-size: 20px;
    letter-spacing: 1px;
  }
  .top-nav .nav-links {
    display: flex;
    gap: 32px;
    font-size: 13px;
    letter-spacing: 0.5px;
  }
  .top-nav .nav-links a:hover {
    opacity: 0.7;
  }
  .container {
    width: 100%;
    padding: 90px 4vw  4vw;
  }
  .dashed-line {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border-top: 1px dashed #ccc;
    margin-top: 20px;
    margin-bottom: 24px;
  }
  .header-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: flex-end;
  }
  .back-btn-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .back-btn {
    background-color: #000;
    color: #fff;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s;
  }
  .back-btn:hover {
    opacity: 0.8;
  }
  .section-label {
    font-size: 12px;
    color: #777;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .project-title {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.1;
    text-transform: uppercase;
  }
  .project-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .meta-list {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
  }
  .meta-list p {
    margin-bottom: 6px;
  }
  .meta-list strong {
    color: #111;
  }
  .tags-wrapper {
    margin-top: 24px;
  }
  .tags-title {
    font-size: 12px;
    color: #777;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
  }
  .tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .tag {
    background-color: #005f73;
    color: #fff;
    padding: 4px 14px;
    font-size: 13px;
  }
  .preview-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .preview-col .section-label {
    margin-bottom: 12px;
  }
  .preview-box {
    width: 100%;
    min-height: 280px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .preview-box img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  .gallery-full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    display: flex;
    flex-direction: column;
    gap: 0; /* 图片之间无间距 */
  }
  .gallery-item {
    width: 100%;
    min-height: 500px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    overflow: hidden;
  }
  .gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  @media (max-width: 768px) {
    .top-nav {
      flex-direction: column;
      gap: 12px;
      padding: 16px 4vw;
    }
    .top-nav .nav-links {
      gap: 16px;
      font-size: 12px;
    }
    .container {
      padding: 20px 4vw 0 4vw;
    }
    .header-section, .project-info-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .project-title {
      font-size: 32px;
    }
  }
</style>
.preview-box.preview-video { min-height: 0; }
.preview-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }