/* Final portfolio refinement — cool archive palette, precise corners, quiet landing. */
:root{
  --ink:#182630;
  --paper:#edf1f3;
  --line:#24333e;
  --accent:#8298a8;
  --signal:#aab7c0;
  --muted:#687783;
}

html{background:#e5e9ec;color:var(--ink)}
body{
  background-color:#e5e9ec;
  background-image:
    radial-gradient(circle at 18% 10%,#f7f9fa 0,transparent 31%),
    radial-gradient(circle at 83% 72%,#9eabb51e 0,transparent 34%),
    radial-gradient(#1c2b3510 .65px,transparent .8px);
  background-size:auto,auto,6px 6px;
}

.site-header{
  position:sticky;top:0;z-index:80;
  height:82px;
  background:#e9edf0e8;
  border-color:#72808a52;
  backdrop-filter:blur(18px) saturate(.8);
}
.identity__mark{background:#1b2a35;color:#eef2f4;border-color:#1b2a35;border-radius:13px}
.identity em{color:#687783}
.header-nav a{border-radius:12px;padding:7px 9px}
.header-nav a:hover{background:#d5dde2;text-decoration:none}
.header-meta a,.site-header a{color:inherit}

/* Intro: a file-index calibration system, not a title poster. */
.landing{
  position:relative;
  width:min(1440px,96vw);
  min-height:calc(100svh - 104px);
  margin:18px auto 96px;
  overflow:hidden;
  border:1px solid #24333e;
  border-radius:30px;
  background:
    linear-gradient(120deg,#f4f6f7 0,#e6ebee 54%,#d9e0e5 100%);
  box-shadow:0 22px 55px #34424c17;
  isolation:isolate;
}
.landing:before{
  content:'';position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(#52657210 1px,transparent 1px),linear-gradient(90deg,#52657210 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at center,#000 0,transparent 72%);
}
.landing__rail{
  position:absolute;z-index:6;left:28px;right:28px;
  display:flex;justify-content:space-between;
  font:700 8px/1 "Courier New",monospace;letter-spacing:.14em;color:#536471;
}
.landing__rail--top{top:26px}.landing__rail--bottom{bottom:25px}
.landing__system{
  position:absolute;z-index:1;left:50%;top:50%;
  width:min(650px,72vw);height:min(570px,66vh);
  transform:translate(-50%,-50%);
}
.landing__frame{
  position:absolute;left:50%;top:50%;
  border:1px solid #40535f99;
  background:#edf1f31a;
  transform:translate(-50%,-50%);
  animation:landing-frame-in 1.35s both cubic-bezier(.2,.75,.2,1),landing-breathe 8s 1.6s ease-in-out infinite alternate;
}
.landing__frame i{
  position:absolute;top:-14px;height:15px;
  border:1px solid #40535f99;border-bottom:0;
  border-radius:8px 8px 0 0;background:#e8edf0;
}
.landing__frame--one{width:100%;height:100%;border-radius:58px;animation-delay:.04s}.landing__frame--one i{left:12%;width:28%}
.landing__frame--two{width:79%;height:79%;border-radius:48px;animation-delay:.14s}.landing__frame--two i{right:10%;width:31%}
.landing__frame--three{width:57%;height:57%;border-radius:38px;animation-delay:.24s}.landing__frame--three i{left:7%;width:36%}
.landing__frame--four{width:34%;height:34%;border-radius:28px;animation-delay:.34s}.landing__frame--four i{right:8%;width:41%}
.landing__scanner{
  position:absolute;z-index:4;top:5%;bottom:5%;left:12%;width:1px;
  background:linear-gradient(transparent,#607784 18%,#607784 82%,transparent);
  box-shadow:0 0 14px #506a7850;
  animation:landing-scan 5.5s 1.2s ease-in-out infinite alternate;
}
.landing__identity{
  position:absolute;z-index:5;left:50%;top:50%;
  width:min(290px,70vw);padding:24px;
  transform:translate(-50%,-50%);
  border:1px solid #24333e;border-radius:21px;
  background:#edf1f3e8;backdrop-filter:blur(14px);
  text-align:center;box-shadow:0 18px 34px #3d4c5617;
  animation:landing-card-in .85s .5s both ease-out;
}
.landing__identity>span{font:700 8px/1 "Courier New",monospace;letter-spacing:.14em;color:#657580}
.landing__identity h1{margin:19px 0 7px;font-size:25px;line-height:1;letter-spacing:-.04em;font-weight:500}
.landing__identity p{margin:0;color:#64727c;font-size:9px;letter-spacing:.08em}
.landing__identity a{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:24px;padding:12px 14px;
  border:1px solid #24333e;border-radius:14px;
  background:#1e2e39;color:#edf1f3;text-decoration:none;
  font:700 8px/1 var(--sans);letter-spacing:.1em;transition:.25s;
}
.landing__identity a:hover{background:#536b7a;transform:translateY(-2px)}
.landing__identity a b{font-size:14px}
@keyframes landing-frame-in{from{opacity:0;transform:translate(-50%,-50%) scale(.72)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes landing-breathe{to{transform:translate(-50%,-50%) scale(.985)}}
@keyframes landing-scan{to{left:88%}}
@keyframes landing-card-in{from{opacity:0;transform:translate(-50%,-44%)}to{opacity:1;transform:translate(-50%,-50%)}}

main{width:min(1200px,92vw)}
.filters{padding:46px 0 58px}
.filters:before{color:#536471}
.filter{
  border:1px solid #334650;border-radius:16px;
  background:#e7ecef;color:#24333e;box-shadow:none;
}
.filter:hover,.filter.is-active{background:#23343f;color:#edf1f3}

/* Drawer geometry: straight shoulders, clean joins, no same-colour tabs. */
.archive{height:720px;margin-bottom:86px;perspective:none;scroll-margin-top:104px}
.archive:after{display:none}
.archive__back{
  inset:0 3% auto;height:148px;padding:26px 30px;
  overflow:hidden;
  border:1px solid #15232d;border-radius:28px 28px 0 0;
  background:#1d2b35;color:#e7edf0;
  box-shadow:0 19px 42px #31424d1a;
  filter:none;
}
.archive__back:after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(4deg,#ffffff08 0 1px,transparent 1px 5px);
}
.files{inset:102px 6% 128px}
.file{
  --folder:#eef2f4;
  height:150px;
  overflow:visible;
  border:1px solid #263944;border-radius:0 0 22px 22px;
  background:var(--folder);background-image:none;
  box-shadow:0 6px 0 #34465012,0 12px 24px #3446500c;
  filter:none;
}
.file:nth-child(2n){--folder:#e4eaed}.file:nth-child(3n){--folder:#f1f4f5}.file:nth-child(7){--folder:#c9d4db}.file:nth-child(8){--folder:#d9e1e5}
.file:nth-child(n){background:var(--folder)!important;background-image:none!important}
.file:after{display:none}
.file__tab{
  top:-43px;left:min(var(--tab),62%);width:38%;height:44px;
  display:grid;grid-template-columns:54px 1fr 54px;align-items:center;gap:7px;
  padding:8px 13px;
  border:1px solid #263944;border-bottom:0;border-radius:18px 18px 0 0;
  background:var(--folder)!important;background-image:none!important;color:#1d2d37!important;
  box-shadow:inset 0 1px #ffffff80!important;
  transform:none!important;filter:none!important;
  pointer-events:auto;
}
.file__tab:after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:3px;
  background:var(--folder);pointer-events:none;
}
.file__tab strong{font-family:"Courier New",monospace;font-size:12px;color:#1d2d37;text-transform:none}
.file__tab span{color:#415562}.file__tab span:last-child{text-align:right}
.file__body{padding:22px 25px;background:transparent}
.file__no{color:#6a7b86}.file__summary{color:#364a56}.file__meta{color:#40545f}
.file:hover{transform:translateY(-10px)}
.file.is-hidden{transform:translateY(70px)}
.drawer-front{
  height:132px;grid-template-columns:1fr 1fr;
  padding:22px 34px;overflow:hidden;
  border:1px solid #182832;border-radius:0 0 28px 28px;
  background:#263741;color:#e8edf0;
  box-shadow:0 24px 48px #2639442b;
  filter:none;
}
.drawer-front__index,.drawer-front__hint{font-family:"Courier New",monospace;color:#c7d1d7}
.drawer-front__hint{text-align:right}
.drawer-label{display:none!important}

/* Project reader and every project sub-page. */
.reader__scrim{background:#14212b82}
.reader__sheet{
  background:#edf1f3;border:1px solid #253641;border-radius:30px 30px 0 0;
  box-shadow:0 -22px 62px #1b2c3740;
}
.reader__handle{background:#edf1f3f2;border-color:#a4b0b8;border-radius:29px 29px 0 0}
.reader__handle span{background:#263944}
.reader__close{
  border:1px solid #233640;border-radius:14px;background:#8ba0ad;color:#182832;
  box-shadow:2px 3px 0 #24353f;
}
.experience{background:#d8e0e5}
.cover-copy{
  border:1px solid #b9c6cd66;border-radius:24px;
  background:#182731e8;color:#edf1f3;
  box-shadow:7px 8px 0 #8298a8;
}
.cover-copy__index{color:#b8c5cd}.cover-copy__desc{color:#cdd6db}
.experience--cover .enter-case,.experience--product .enter-case,.reader-end button{
  border:1px solid #21333e;border-radius:15px;
  background:#8298a8;color:#162630;box-shadow:2px 3px 0 #20333d;
}
.experience--product .orbit-hint{
  border:1px solid #314650;border-radius:14px;
  background:#e7ecefd6;color:#20333d;
}
.material-lock{background:radial-gradient(circle at 68% 48%,#edf2f4,#bcc8cf 65%,#9dabb4)}
.material-screw{background:radial-gradient(circle at 68% 48%,#edf1f2,#c7d0d5 68%,#a6b3bb)}
.material-light{background:radial-gradient(circle at 68% 48%,#49656f,#1a2c33 62%,#101a1f)}
.material-light .experience__shade{background:linear-gradient(90deg,#101a1f 0,transparent 48%)}
.case-intro{
  margin:18px;padding:7vw 6vw;
  border:1px solid #2b3d47;border-radius:26px;
  background:#edf1f3;
}
.project-facts{margin:0 18px 18px;gap:10px;border:0;background:transparent}
.project-facts div{border:1px solid #8c9aa3;border-radius:18px;background:#e4eaed}
.document-page{background:#dbe2e6}
.document-page img,.document-video,.placeholder-page img{
  border:1px solid #84939c;border-radius:22px;background:#10181d;
  box-shadow:0 14px 34px #2639441c;
}
.document-caption{color:#5c6e79}.reader-end{background:#dbe2e6}
.reader-end button{color:#eef2f4;background:#263944}

footer{color:#526672;border-color:#7c8b945e}
footer a{color:inherit;text-decoration:none}
.footer__legal{display:flex;justify-content:center}
.footer__legal a{border-bottom:1px solid #7c8b9470;padding-bottom:2px}
.footer__legal a:hover{color:#243944;border-color:#243944}

@media(max-width:700px){
  .site-header{height:72px}.landing{min-height:calc(100svh - 90px);margin:12px auto 66px;border-radius:22px}.landing__rail{left:16px;right:16px}.landing__system{width:84vw;height:58vh}.landing__frame--one{border-radius:38px}.landing__frame--two{border-radius:31px}.landing__frame--three{border-radius:25px}.landing__frame--four{border-radius:19px}.landing__identity{width:min(270px,76vw);padding:20px}.landing__rail--top span:last-child{display:none}
  .filters{padding:30px 0 48px}.archive{height:660px}.files{top:90px;inset-inline:3%}.file{height:124px}.file__tab{left:var(--mobile-tab);width:59%;grid-template-columns:38px 1fr 42px;padding-inline:9px}.drawer-front{height:112px;padding:18px}.drawer-front__hint{display:none}.file__body{padding:18px 16px}
  .cover-copy{border-radius:20px;box-shadow:5px 6px 0 #8298a8}.case-intro{margin:8px;border-radius:21px}.project-facts{margin:0 8px 8px;grid-template-columns:1fr}.document-page img,.document-video{border-radius:16px}
  footer{gap:14px;flex-wrap:wrap}.footer__legal{order:3;width:100%;justify-content:flex-start}.footer__top{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.landing__frame,.landing__scanner,.landing__identity{animation:none!important}}

/* Image-led landing carousel. */
.landing--carousel{background:#121b22;cursor:grab;touch-action:pan-y}
.landing--carousel:active{cursor:grabbing}
.landing--carousel:before{display:none}
.landing__slides,.landing__slide{position:absolute;inset:0}
.landing__slides{z-index:0;background:#111a20}
.landing__slide{margin:0;opacity:0;visibility:hidden;transition:opacity 1.15s cubic-bezier(.22,.68,.22,1),visibility 1.15s;overflow:hidden}
.landing__slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.045);filter:saturate(.76) contrast(1.03);will-change:transform}
.landing__slide:nth-child(3) img,.landing__slide:nth-child(4) img,.landing__slide:nth-child(5) img{width:200%;max-width:none;object-position:left center}
.landing__slide.is-active{opacity:1;visibility:visible;z-index:2}
.landing__slide.is-active img{animation:landing-image-drift 7.4s cubic-bezier(.2,.75,.2,1) both}
.landing__slide:nth-child(2) img{width:100%;object-position:center;filter:saturate(.68) contrast(1.05) brightness(.92)}
.landing__slide:nth-child(4) img{filter:saturate(.78) contrast(1.02) brightness(1.2)}
.landing__slide:nth-child(5) img{filter:saturate(.72) contrast(1.02) brightness(1.08)}
.landing__veil{position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(180deg,#0d172017 0,#0d172005 42%,#101a23b8 100%),linear-gradient(90deg,#101a2375 0,transparent 48%)}
.landing--carousel .landing__rail{z-index:8;color:#eef3f5;text-shadow:0 1px 9px #081017c9}
.landing--carousel .landing__identity{left:32px;top:auto;bottom:58px;width:310px;padding:22px;transform:none;text-align:left;background:#13212bd9;color:#edf2f4;border-color:#b7c4cb70;border-radius:22px;box-shadow:0 18px 42px #07101742;animation:none}
.landing--carousel .landing__identity>span{color:#b7c5cd}
.landing--carousel .landing__identity h1{margin:15px 0 7px;font-size:30px;color:#f2f5f6}
.landing--carousel .landing__identity p{color:#b9c6cd}
.landing--carousel .landing__identity>span,.landing--carousel .landing__identity h1,.landing--carousel .landing__identity p{transition:opacity .22s ease,transform .22s ease}
.landing--carousel .landing__identity.is-changing>span,.landing--carousel .landing__identity.is-changing h1,.landing--carousel .landing__identity.is-changing p{opacity:0;transform:translateY(5px)}
.landing--carousel .landing__identity a{margin-top:20px;background:#edf2f4;color:#182832;border-color:#edf2f4;transition:transform .3s,background .3s}
.landing--carousel .landing__identity a:hover{background:#d4dfe5;transform:translateY(-3px)}
.landing__controls{position:absolute;z-index:8;right:32px;bottom:61px;display:flex;gap:10px;align-items:flex-end}
.landing__controls button{width:62px;padding:10px 0 0;border:0;outline:0;background:transparent;color:#dbe3e8;cursor:pointer;font:700 8px/1 "Courier New",monospace;text-align:left}
.landing__controls button:focus-visible{outline:1px solid #dbe3e8;outline-offset:6px;border-radius:3px}
.landing__controls button span{position:relative;display:block;width:100%;height:2px;margin-bottom:9px;overflow:hidden;border-radius:2px;background:#dbe3e84c}
.landing__controls button span:after{content:'';position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:#eef3f5}
.landing__controls button.is-active span:after{animation:landing-progress 7.2s linear forwards}
.landing__controls button b{font-weight:700;opacity:.55;transition:opacity .3s}
.landing__controls button.is-active b,.landing__controls button:hover b{opacity:1}
.landing--carousel.is-paused .landing__controls button.is-active span:after{animation-play-state:paused}
@keyframes landing-image-drift{from{transform:scale(1.045)}to{transform:scale(1)}}
@keyframes landing-progress{to{transform:scaleX(1)}}

@media(max-width:700px){
  .landing--carousel .landing__identity{left:16px;right:16px;bottom:82px;width:auto;padding:18px;border-radius:19px}.landing--carousel .landing__identity h1{font-size:27px}.landing__controls{left:18px;right:18px;bottom:30px;gap:7px}.landing__controls button{flex:1;width:auto}.landing--carousel .landing__rail--bottom{display:none}.landing__slide:nth-child(1) img{object-position:58% center}.landing__slide:nth-child(3) img,.landing__slide:nth-child(4) img,.landing__slide:nth-child(5) img{width:235%}.landing__slide:nth-child(2) img{width:100%;object-position:center}
}
@media(prefers-reduced-motion:reduce){.landing__slide{transition:none}.landing__slide.is-active img,.landing__controls button.is-active span:after{animation:none}}