*{box-sizing:border-box} :root{--paper:#eaeae8;--ink:#252624;--muted:#757672}html,body{margin:0;width:100%;height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper)}body{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #9c592d;outline-offset:5px}header{position:absolute;top:0;left:0;right:0;height:135px;z-index:10;display:flex;align-items:flex-start;justify-content:space-between;padding:27px 40px;pointer-events:none}header>*{pointer-events:auto}.brand img{width:105px;mix-blend-mode:multiply}nav{display:flex;gap:36px;padding-top:12px}nav button{border:0;background:none;text-transform:uppercase;font-size:14px;font-weight:600;padding:8px 0}nav span{font-size:10px;vertical-align:top;margin-left:5px;font-weight:400}nav button:after{content:'';display:block;height:1px;background:currentColor;transform:scaleX(0);transition:transform .3s;margin-top:7px}nav button:hover:after,.nav-active:after{transform:scaleX(1)}main{position:absolute;inset:0 0 110px;perspective:1200px}.intro{position:absolute;top:155px;left:40px;right:40px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.7px;color:var(--muted);pointer-events:none;z-index:2}.paper{position:absolute;left:9.4%;right:8.7%;top:8%;bottom:7.5%;perspective:1100px;filter:drop-shadow(0 18px 16px #00000009)}.leaf{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.1,1),background .65s,filter .65s;transform-origin:50% 100%;background:#fff}.leaf1{clip-path:polygon(6% 13%,30% 13%,47% 100%);background:linear-gradient(120deg,#fff 30%,#f2f2f0)}.leaf2{clip-path:polygon(47% 1%,47% 100%,30% 63%);background:linear-gradient(100deg,#cfcfcc,#e1e1df 70%,#f2f2f0)}.leaf3{clip-path:polygon(70% 13%,94% 13%,53% 100%);background:linear-gradient(260deg,#fff,#f1f1ee)}.leaf4{clip-path:polygon(6% 26%,47% 100%,6% 63%);background:linear-gradient(120deg,#fff,#f5f5f3)}.leaf5{clip-path:polygon(53% 1%,70% 63%,53% 100%);background:linear-gradient(270deg,#d1d1cf,#e1e1df 70%,#f0f0ed)}.leaf6{clip-path:polygon(94% 26%,94% 63%,53% 100%);background:linear-gradient(250deg,#fff,#f4f4f0)}.plinth{position:absolute;bottom:-3%;left:0;right:0;height:3%;background:#fafaf8;box-shadow:0 10px 0 #dfdfdc,0 20px 0 #c9c9c6}.paper:after,.paper:before{content:'';position:absolute;inset:0;background:#c6c6c3;clip-path:polygon(0 96%,12% 78%,47% 100%);z-index:-1}.paper:after{clip-path:polygon(53% 100%,88% 78%,100% 96%)}.leaf.active{filter:drop-shadow(10px 16px 14px #0005);background:linear-gradient(115deg,#565952,#282c27 55%,#868980);transform:rotateX(-12deg) rotateY(-7deg) translateZ(35px)}.grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.tile{border:0;border-right:1px solid #383a3533;border-bottom:1px solid #383a3533;background:transparent;position:relative;text-align:left;overflow:hidden;transition:background .7s}.tile:nth-child(3n){border-right:0}.tile:nth-child(n+4){border-bottom:0}.tile:before{content:'';position:absolute;inset:0;background:linear-gradient(125deg,#fff0,#fff3);opacity:0;transition:opacity .5s}.tile:hover:before{opacity:1}.tile .label{position:absolute;left:40px;bottom:30px;display:flex;align-items:center;gap:15px;opacity:0;transform:translateY(8px);transition:.45s}.tile .big-number{font-size:65px;font-weight:300;line-height:1;letter-spacing:-4px}.tile .name{font-size:12px;line-height:1.5;max-width:125px}.tile.selected .label,.tile:hover .label,.tile:focus-visible .label{opacity:1;transform:translateY(0)}.tile.selected{background:#181b1705}.hint{position:absolute;bottom:22px;left:40px;display:flex;gap:12px;align-items:center;font-size:12px;pointer-events:none;color:#686a64}.hint-line{width:25px;height:1px;background:#777}.tile:nth-child(n+4) .label{bottom:60px}footer{height:110px;position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;background:#272a26;color:#fafaf5;padding:15px 40px}.foot-left,.foot-right{font-size:11px;letter-spacing:1.4px;line-height:1.7;min-width:240px}.foot-right{text-align:right}footer small{font-size:10px;letter-spacing:.5px;color:#a7aaa2}.navigation{text-align:center}.numbers{display:flex;gap:18px}.numbers button{background:none;border:0;color:#a7aaa2;width:32px;height:32px;border-radius:50%;font-size:13px;transition:.3s}.numbers button.active{background:#fafaf5;color:#272a26;font-weight:bold}.numbers button:hover{color:#fff;box-shadow:0 0 0 1px #ffffff60}.numbers button.active:hover{color:#272a26}.back{background:none;border:0;color:#b9bcb3;font-size:21px;margin-top:9px}.back span{font-size:11px;vertical-align:2px;margin-left:4px}dialog{border:0;padding:0;max-width:none;max-height:none}dialog::backdrop{background:#181b17c9;backdrop-filter:blur(10px)}#viewer{position:fixed;inset:0;width:100%;height:100%;background:#171a17;color:white;overflow:hidden}#project-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:image-in .8s ease both}.viewer-bg{position:absolute;inset:0;background:#161915}.viewer-top{position:absolute;top:0;left:0;right:0;padding:27px 40px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#0007,transparent);font-size:12px;letter-spacing:1.6px}.close{width:48px;height:48px;border-radius:50%;border:1px solid #ffffff70;background:#25292533;color:inherit;font-size:30px;font-weight:200}.close:hover{background:#fff;color:#222}.viewer-bottom{position:absolute;bottom:0;left:0;right:0;padding:70px 40px 28px;background:linear-gradient(transparent,#000b);display:flex;justify-content:space-between;align-items:flex-end}.viewer-bottom h1{font-size:36px;font-weight:400;margin:10px 0 0;letter-spacing:-1px}#project-type{font-size:11px;letter-spacing:1.7px}.viewer-controls{display:flex;align-items:center;gap:22px}.viewer-controls button{background:none;color:white;border:1px solid #fff6;border-radius:50%;width:42px;height:42px;font-size:20px}#counter{font-size:12px;letter-spacing:1px}#alternate{position:absolute;bottom:110px;right:40px;background:#2228;color:white;border:1px solid #fff6;border-radius:25px;padding:12px 18px;font-size:12px}#info{width:min(520px,90vw);background:#eaeae8;padding:60px;color:#252624}#info .close{position:absolute;right:14px;top:14px;border-color:#999}#info h2{font-size:36px;font-weight:400}#info p{font-size:16px;line-height:1.7}.eyebrow{font-size:12px;letter-spacing:3px}.unfold{position:fixed;inset:0;pointer-events:none;z-index:50;display:none;perspective:1500px}.unfold.play{display:flex}.unfold div{width:25%;height:100%;background:linear-gradient(90deg,#d1d2cc,#fbfbf8 40%,#e1e1dc);transform-origin:left center;animation:unfold 1s cubic-bezier(.5,0,.2,1) both}.unfold div:nth-child(2){animation-delay:.06s}.unfold div:nth-child(3){animation-delay:.12s}.unfold div:nth-child(4){animation-delay:.18s}@keyframes unfold{0%{transform:rotateY(88deg) scaleX(.05);opacity:0}30%{opacity:1;transform:rotateY(-15deg) scaleX(1)}65%{opacity:1;transform:rotateY(0)}100%{opacity:0;transform:rotateY(-100deg)}}@keyframes image-in{from{opacity:.2;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@media(min-width:1500px){.paper{left:15%;right:15%}}@media(max-width:700px){header{padding:20px;height:110px}.brand img{width:75px}nav{gap:18px;padding-top:5px}nav button{font-size:11px}nav span{display:none}.intro{top:125px;left:20px;right:20px;font-size:8px;letter-spacing:1px}.intro span:last-child{display:none}.paper{left:4%;right:4%;top:23%;bottom:12%}.tile .label{left:14px;bottom:30px;display:block}.tile .big-number{font-size:44px}.tile .name{display:block;font-size:10px;max-width:95px}.tile:nth-child(n+4) .label{bottom:75px}.hint{left:20px;font-size:10px;bottom:24px}.foot-left,.foot-right{display:none}footer{justify-content:center;height:105px;padding:12px}.numbers{gap:13px}main{bottom:105px}.viewer-top{padding:20px;font-size:9px}.viewer-bottom{padding:60px 20px 28px;gap:20px}.viewer-bottom h1{font-size:25px}.viewer-controls{gap:10px}.viewer-controls button{width:35px;height:35px}#counter{font-size:10px}#alternate{right:20px;bottom:115px}.close{width:42px;height:42px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.unfold{display:none!important}}

/* Hover images occupy only one paper section, leaving the whole composition visible. */
.tile{perspective:1100px}
.paper-preview{position:absolute;left:50%;top:50%;width:100%;height:100%;display:flex;flex-direction:column;background:#f7f7f2;padding:0;box-shadow:none;pointer-events:none;opacity:0;transform:translate(-50%,-50%) rotateY(-78deg) rotateZ(-3deg) scale(.88);transform-origin:15% 50%;transition:transform .65s cubic-bezier(.18,.75,.2,1),opacity .28s;backface-visibility:hidden}
.paper-preview img{display:block;width:100%;height:100%;min-height:0;object-fit:cover;background:#e5e5e0}
.preview-caption{position:absolute;bottom:0;left:0;right:0;min-height:65px;padding:28px 22px 16px;display:flex;align-items:center;gap:12px;color:#fff;background:linear-gradient(transparent,#000a);font-size:12px;text-align:left}
.preview-caption b{font-size:14px}.preview-caption>span:last-child{margin-left:auto;margin-right:4px}
.tile.previewing .paper-preview{opacity:1;transform:translate(-50%,-50%) rotateY(0) rotateZ(0) scale(1)}
.tile.previewing .label{opacity:0;transform:translateY(8px)}
@media(max-width:700px){.paper-preview{width:100%;height:100%;padding:0}.preview-caption{font-size:10px;gap:5px;padding:25px 8px 12px}.preview-caption b{font-size:11px}.preview-caption>span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.paper-preview{transition:none;transform:translate(-50%,-50%)} }

/* Day keeps the original palette; night follows the supplied monochrome reference. */
.theme-toggle{position:absolute;right:40px;top:88px;display:flex;align-items:center;gap:9px;border:0;background:transparent;font-size:12px;padding:8px 0;color:var(--ink)}
.theme-track{display:block;width:34px;height:19px;border:1px solid currentColor;border-radius:20px;padding:3px}
.theme-track>span{display:block;width:11px;height:11px;border-radius:50%;background:currentColor;transition:transform .25s}
.theme-night{opacity:.6}.theme-day{font-weight:600}
html[data-theme="night"]{--paper:#e2e2e2;--ink:#fff;--muted:#555}
html[data-theme="night"] .theme-track>span{transform:translateX(15px)}
html[data-theme="night"] .theme-day{opacity:.6;font-weight:400}
html[data-theme="night"] .theme-night{opacity:1;font-weight:600}
html[data-theme="night"] .brand img{filter:grayscale(1) invert(1);mix-blend-mode:screen}
html[data-theme="night"] .leaf1,html[data-theme="night"] .leaf3{background:#000}
html[data-theme="night"] .leaf2,html[data-theme="night"] .leaf5{background:#393939}
html[data-theme="night"] .leaf4,html[data-theme="night"] .leaf6{background:#999}
html[data-theme="night"] .paper:before,html[data-theme="night"] .paper:after{background:#393939}
html[data-theme="night"] .plinth{background:#000;box-shadow:0 10px 0 #1b1b1b,0 20px 0 #393939}
html[data-theme="night"] .leaf.active{background:linear-gradient(115deg,#151515,#000 55%,#414141);filter:drop-shadow(10px 16px 14px #0005)}
html[data-theme="night"] .tile{border-color:#fff;border-right-width:2px;border-bottom-width:2px}
html[data-theme="night"] .tile:nth-child(3n){border-right:0}
html[data-theme="night"] .tile:nth-child(n+4){border-bottom:0}
html[data-theme="night"] .tile .label{text-shadow:0 1px 4px #0009}
html[data-theme="night"] footer{background:#a3a3a3;color:#fff}
html[data-theme="night"] footer small,html[data-theme="night"] .back{color:#fff}
html[data-theme="night"] .numbers button{color:#fff}
html[data-theme="night"] .numbers button.active{background:#fff;color:#393939}
html[data-theme="night"] #info{background:#393939;color:#fff}
html[data-theme="night"] .unfold div{background:linear-gradient(90deg,#000,#393939 40%,#999)}
html[data-theme="night"] button:focus-visible,html[data-theme="night"] a:focus-visible{outline-color:#555}
@media(max-width:700px){.theme-toggle{right:20px;top:68px;font-size:12px}}

/* Phone layout: six generous tap areas and safe-area-aware controls. */
@media(max-width:700px){
 html,body{height:100%;min-height:100svh}
 body{position:relative;height:100svh}
 header{height:138px;padding:18px 18px 0;align-items:flex-start}
 .brand img{width:70px}
 nav{gap:16px;padding-top:6px}
 nav button{font-size:12px;min-height:44px}
 .theme-toggle{top:71px;right:18px;min-height:44px;font-size:14px}
 main{top:145px;bottom:calc(124px + env(safe-area-inset-bottom));}
 .intro{top:-22px;left:18px;right:18px;font-size:10px;letter-spacing:1.2px}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));bottom:38px}
 .tile,.tile:nth-child(3n),html[data-theme="night"] .tile,html[data-theme="night"] .tile:nth-child(3n){border-right:1px solid #383a3533;border-bottom:1px solid #383a3533}
 .tile:nth-child(2n),html[data-theme="night"] .tile:nth-child(2n){border-right:0}
 .tile:nth-child(n+5),html[data-theme="night"] .tile:nth-child(n+5){border-bottom:0}
 html[data-theme="night"] .tile,html[data-theme="night"] .tile:nth-child(3n){border-color:#fff}
 .paper{left:4%;right:4%;top:10%;bottom:18%}
 .tile .label,.tile:nth-child(n+4) .label{left:16px;bottom:14px;opacity:1;transform:none}
 .tile .big-number{font-size:25px;letter-spacing:-1px}
 .tile .name{display:none}
 .tile.previewing .label{opacity:0}
 .hint{left:18px;bottom:12px;font-size:12px;gap:8px}
 footer{height:calc(124px + env(safe-area-inset-bottom));padding:12px 10px calc(12px + env(safe-area-inset-bottom));}
 .numbers{gap:5px}.numbers button{width:44px;height:44px;font-size:14px}
 .back{min-height:44px;margin:0;font-size:22px}.back span{font-size:14px}
 .preview-caption{font-size:12px;min-height:58px;padding:20px 10px 10px;gap:7px}
 .preview-caption b{font-size:12px}.preview-caption>span:last-child{display:none}
 .viewer-top{padding:16px;font-size:10px;letter-spacing:1px}
 .close{width:44px;height:44px}
 .viewer-bottom{padding:48px 18px calc(20px + env(safe-area-inset-bottom));display:block}
 .viewer-bottom h1{font-size:28px;margin:8px 0 18px}
 .viewer-controls{justify-content:space-between;gap:20px}
 .viewer-controls button{width:46px;height:46px}#counter{font-size:14px}
 #alternate{top:78px;bottom:auto;right:16px;min-height:44px;font-size:12px}
 #info{padding:56px 26px 32px}#info h2{font-size:30px}
}
@media(max-width:360px){nav{gap:9px}.numbers{gap:2px}nav button{font-size:11px}}
@media(max-width:700px) and (max-height:580px){body{min-height:580px;overflow-y:auto}main{min-height:310px}footer{position:absolute;top:456px;bottom:auto}}

body.admin-bar header{top:32px}body.admin-bar main{top:32px}
body:not(.home){overflow:auto}
.content-page{max-width:900px;margin:70px auto;padding:24px;color:#252624}
@media(max-width:782px){body.admin-bar header{top:46px}body.admin-bar main{top:46px}}@media(max-width:700px){body.admin-bar main{top:191px}}

/* 1.1 - Your website provides the header; the embed provides only the portfolio. */
main{top:0}
.intro{top:36px}
.paper{top:5%;bottom:7%}
.viewer-top{padding-top:38px;padding-bottom:12px}
.view-project-link{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:12px 19px;border:1px solid #fff;color:#fff;background:#ffffff15;border-radius:100px;text-decoration:none;text-transform:uppercase;font:600 11px/1.3 Arial,Helvetica,sans-serif;letter-spacing:1px;transition:background .2s,color .2s}
.view-project-link:hover,.view-project-link:focus-visible{background:#fff;color:#181b17}
.view-project-link[hidden]{display:none!important}
@media(max-width:700px){
 main{top:34px;bottom:calc(124px + env(safe-area-inset-bottom))}
 .intro{top:-16px}
 .paper{top:8%;bottom:18%}
 .viewer-top{padding-top:34px}
 .view-project-link{margin-top:10px;padding:12px 16px}
 .viewer-bottom{padding-bottom:calc(17px + env(safe-area-inset-bottom))}
 .viewer-bottom h1{margin-bottom:8px}
}

/* v1.4: make the origami composition itself follow the parent Day/Night toggle. */
html[data-theme="day"]{color-scheme:light}
html[data-theme="night"]{--paper:#292b29;--ink:#f6f6f3;--muted:#bfc0ba;color-scheme:dark}
html[data-theme="night"],html[data-theme="night"] body{background-color:var(--paper);color:var(--ink)}
html[data-theme="night"] .paper{filter:drop-shadow(0 18px 22px #0004)}
html[data-theme="night"] .paper-preview{background:#272926}
html[data-theme="night"] .hint,html[data-theme="night"] .intro{color:var(--muted)}
html[data-theme="night"] .tile:not(.previewing) .label{color:var(--ink)}
html[data-theme="night"] footer{background:#343733;color:#f8f8f5}
html[data-theme="night"] footer small,html[data-theme="night"] .back{color:#e7e7e2}
html[data-theme="night"] .numbers button{color:#fff}
html[data-theme="night"] #info{background:#292b29;color:#fff}
html,body{transition:background-color .35s ease,color .35s ease}
@media(prefers-reduced-motion:reduce){html,body{transition:none}}

/* v1.5: all paper facets, pleats, depth layers, and grid synchronize with Night.
   Explicit gradients are required: Day uses backgrounds with gradients, which
   can otherwise remain visible when only background-color is overridden. */
html[data-theme="night"] .leaf1{background:linear-gradient(120deg,#272a27 20%,#171917 92%)}
html[data-theme="night"] .leaf2{background:linear-gradient(100deg,#454944,#222622 75%,#171917)}
html[data-theme="night"] .leaf3{background:linear-gradient(260deg,#151815,#353935 94%)}
html[data-theme="night"] .leaf4{background:linear-gradient(120deg,#3b3f3b,#191c19)}
html[data-theme="night"] .leaf5{background:linear-gradient(270deg,#202420,#454945 70%,#1b1e1b)}
html[data-theme="night"] .leaf6{background:linear-gradient(250deg,#313531,#141614)}
html[data-theme="night"] .leaf.active{background:linear-gradient(115deg,#080a08,#555951 55%,#191d19)}
html[data-theme="night"] .paper:before,html[data-theme="night"] .paper:after{background:#484c48}
html[data-theme="night"] .plinth{background:#464a46;box-shadow:0 10px 0 #2b2e2b,0 20px 0 #1b1e1b}
html[data-theme="night"] .tile{border-color:#ffffff45}
html[data-theme="night"] .tile.selected{background:#ffffff05}
html[data-theme="night"] .tile:before{background:linear-gradient(125deg,#ffffff00,#ffffff12)}
html[data-theme="night"] .hint-line{background:#a0a5a0}
@media(max-width:700px){html[data-theme="night"] .tile,html[data-theme="night"] .tile:nth-child(3n){border-color:#ffffff45}}

/* v1.6: Night-mode hovered/selected origami facet opens as white paper.
   The normal Night palette remains charcoal when a facet is not active. */
html[data-theme="night"] .paper .leaf.active{
  background:linear-gradient(115deg,#ffffff 0%,#ffffff 55%,#f4f4f1 100%);
  filter:drop-shadow(10px 16px 14px #0008);
}

/* The project heading itself links to the same URL as View Project. */
#project-title{color:inherit;text-decoration:none;transition:opacity .2s ease,text-decoration-color .2s ease;}
#project-title[href]{cursor:pointer;text-underline-offset:7px;text-decoration-thickness:1px;}
#project-title[href]:hover,#project-title[href]:focus-visible{text-decoration:underline;opacity:.9;}
#project-title:not([href]){cursor:default;}

/* v1.9 — ONE layout for Day and Night. Only the palette changes.
   Keep the architectural image edge-to-edge with identical positioning,
   overlays, caption geometry and navigation in both modes.
   This replaces the inset gallery and foggy white gradients of v1.7/v1.8. */
#viewer #project-image {
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
#viewer .viewer-top {
  padding:38px 40px 12px;
}
#viewer .viewer-bottom {
  padding:70px 40px 28px;
  border:0;
}
#viewer #alternate {
  top:auto;
  bottom:110px;
  right:40px;
}

/* White paper instead of black behind the SAME image in Day mode.
   Restrict the white scrims to the original top/bottom overlay regions
   instead of fading out the whole photograph. */
html:not([data-theme="night"]) #viewer {
  background:#fff;
  color:#252624;
}
html:not([data-theme="night"]) #viewer .viewer-bg {background:#fff}
html:not([data-theme="night"]) #viewer #project-image {background:#fff}
html:not([data-theme="night"]) #viewer .viewer-top {
  color:#252624;
  background:linear-gradient(to bottom,rgba(255,255,255,.60),rgba(255,255,255,0));
}
html:not([data-theme="night"]) #viewer .viewer-bottom {
  color:#252624;
  background:linear-gradient(to top,rgba(255,255,255,.78),rgba(255,255,255,0));
}
html:not([data-theme="night"]) #viewer .close {
  color:#252624; background:rgba(255,255,255,.68); border-color:#25262470;
}
html:not([data-theme="night"]) #viewer .close:hover,
html:not([data-theme="night"]) #viewer .close:focus-visible {
  background:#252624; color:#fff;
}
html:not([data-theme="night"]) #viewer .viewer-controls button {
  color:#252624; border-color:#25262488; background:rgba(255,255,255,.48);
}
html:not([data-theme="night"]) #viewer .viewer-controls button:hover {
  color:#fff; background:#252624;
}
html:not([data-theme="night"]) #viewer .view-project-link {
  color:#252624; border-color:#252624; background:rgba(255,255,255,.7);
}
html:not([data-theme="night"]) #viewer .view-project-link:hover {
  color:#fff; background:#252624;
}
html:not([data-theme="night"]) #viewer #alternate {
  color:#252624; border-color:#25262488; background:rgba(255,255,255,.75);
}
html:not([data-theme="night"]) #viewer #alternate:hover {
  color:#fff; background:#252624;
}
/* A title only links when a project URL has actually been configured. */
#viewer #project-title[href] {
  display:inline-block; cursor:pointer; text-decoration:underline;
  text-decoration-color:currentColor; text-decoration-thickness:1px;
  text-underline-offset:6px; position:relative; z-index:2;
}
#viewer #project-title[href]::after {
  content:'↗'; display:inline-block; font-size:.53em;
  margin-left:.4em; vertical-align:top; line-height:1.35;
  text-decoration:none;
}
#viewer #project-title[href]:hover {opacity:.7}

@media(max-width:700px) {
  #viewer #project-image {inset:0;width:100%;height:100%;object-fit:cover}
  #viewer .viewer-top {padding:34px 18px 12px}
  #viewer .viewer-bottom {padding:60px 18px calc(17px + env(safe-area-inset-bottom))}
  #viewer #alternate {top:78px;bottom:auto;right:16px}
}

/* v2.0 Minimal portfolio chrome: keep project selector dots, omit captions. */
#home .intro, #home .hint, footer .foot-left, footer .foot-right, footer .back {display:none!important;}
footer {justify-content:center!important;}
.navigation {display:flex;justify-content:center;align-items:center;}
.numbers {align-items:center;justify-content:center;gap:17px;}
.numbers button {display:block!important;flex:0 0 24px;width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;border:1px solid currentColor!important;border-radius:50%!important;font-size:0!important;line-height:0!important;padding:0!important;color:#bfc3ba;transition:background .25s,border-color .25s,transform .25s;}
.numbers button.active {background:#fafaf5!important;border-color:#fafaf5!important;color:#fafaf5!important;}
.numbers button:hover {transform:scale(1.12)}
html[data-theme="night"] .numbers button {color:#fff;}
html[data-theme="night"] .numbers button.active {background:#fff!important;border-color:#fff!important;}
@media(max-width:700px){.numbers{gap:12px}.numbers button{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important}}

/* v2.1 - Only project titles on selection; no numerals overlaying origami. */
.tile .big-number{display:none!important}
.tile .label{gap:0!important}

/* v2.2: clean project hover, retaining interactive and accessible tiles. */
.grid .tile .label, .grid .tile .name, .grid .tile .preview-caption {display:none!important;}


/* v2.3 — Project names only during hover/focus; no resting labels or numbers. */
.grid .tile .label {
  display:flex!important;
  opacity:0!important;
  visibility:hidden;
  transform:translateY(8px)!important;
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.grid .tile .name {display:block!important;}
.grid .tile:is(:hover,:focus-visible) .label:not(.unused),
.grid .tile.previewing:is(:hover,:focus-visible) .label {
  opacity:1!important;
  visibility:visible;
  transform:translateY(0)!important;
}
.grid .tile .big-number {display:none!important;}
/* Hovered image preview retains the name, not the numeric index. */
.grid .tile.previewing .label {opacity:0!important;visibility:hidden!important;}
.grid .tile .preview-caption {display:none!important;}
.grid .tile.previewing:is(:hover,:focus-visible) .preview-caption {
  display:flex!important;
}
.grid .tile .preview-caption b {display:none!important;}
/* Labels are dark on the highlighted white paper in night mode. */
html[data-theme="night"] .grid .tile:is(:hover,:focus-visible) .label {
  color:#242624;
  text-shadow:0 1px 3px #fff9;
}
@media (hover:none) {
  .grid .tile.previewing .label {opacity:1!important;visibility:visible;transform:none!important;}
  .grid .tile.previewing .preview-caption {display:flex!important;}
}

/* v2.4 — Hover captions stay above project photographs.
   Day uses dark typography; Night uses white typography. */
.grid .tile .paper-preview {z-index:2;}
.grid .tile .label {z-index:4; isolation:isolate;}
.grid .tile.previewing .label {
  opacity:0!important; visibility:hidden!important;
}
.grid .tile.previewing:is(:hover,:focus-visible) .label {
  opacity:1!important; visibility:visible!important;
  transform:translateY(0)!important;
}
.grid .tile:is(:hover,:focus-visible) .label {
  color:#202321!important;
  text-shadow:0 1px 2px #fff9,0 0 9px #fffc;
}
html[data-theme="night"] .grid .tile:is(:hover,:focus-visible) .label {
  color:#fff!important;
  text-shadow:0 1px 3px #000d,0 0 10px #000b;
}
/* Subtle backing for readability over both dark and bright photo areas. */
.grid .tile:is(:hover,:focus-visible) .label .name {
  background:rgba(255,255,255,.72);
  border-radius:3px; padding:6px 9px;
  box-decoration-break:clone;
}
html[data-theme="night"] .grid .tile:is(:hover,:focus-visible) .label .name {
  background:rgba(0,0,0,.58);
}
@media (hover:none) {
  .grid .tile.previewing .label {opacity:1!important;visibility:visible!important;}
}


/* v2.5 — Smaller hover title pinned to the preview image's lower-left corner. */
.grid .tile .label {
  left:18px!important;
  right:auto!important;
  bottom:18px!important;
  top:auto!important;
  max-width:calc(100% - 36px);
  align-items:flex-end!important;
}
.grid .tile:is(:hover,:focus-visible) .label .name,
.grid .tile.previewing:is(:hover,:focus-visible) .label .name {
  font-size:11px!important;
  line-height:1.25!important;
  font-weight:600!important;
  max-width:180px!important;
  padding:4px 6px!important;
}
html[data-theme="night"] .grid .tile:is(:hover,:focus-visible) .label .name,
html[data-theme="night"] .grid .tile.previewing:is(:hover,:focus-visible) .label .name {
  background:rgba(0,0,0,.42)!important;
}
html:not([data-theme="night"]) .grid .tile:is(:hover,:focus-visible) .label .name,
html:not([data-theme="night"]) .grid .tile.previewing:is(:hover,:focus-visible) .label .name {
  background:rgba(255,255,255,.42)!important;
}
@media(max-width:700px){
  .grid .tile .label {left:12px!important;bottom:12px!important;max-width:calc(100% - 24px);}
  .grid .tile:is(:hover,:focus-visible) .label .name,
  .grid .tile.previewing:is(:hover,:focus-visible) .label .name {font-size:10px!important;max-width:140px!important;padding:3px 5px!important;}
}

/* Match the selector strip to the origami canvas in both palettes. */
footer,html[data-theme="night"] footer{background:var(--paper);color:var(--ink)}
html:not([data-theme="night"]) .numbers button{color:var(--ink)}
html:not([data-theme="night"]) .numbers button.active{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--paper)!important}
html:not([data-theme="night"]) .numbers button:hover{color:var(--ink);box-shadow:0 0 0 1px currentColor}
/* Homepage preview captions: translucent, edge-to-edge strip. */
.grid .tile .label{left:0!important;right:0!important;bottom:0!important;top:auto!important;max-width:none!important;width:100%!important;align-items:stretch!important;justify-content:center!important;text-shadow:none!important}
.grid .tile .label .name,
.grid .tile:is(:hover,:focus-visible) .label .name,
.grid .tile.previewing:is(:hover,:focus-visible) .label .name,
html:not([data-theme="night"]) .grid .tile:is(:hover,:focus-visible) .label .name,
html[data-theme="night"] .grid .tile:is(:hover,:focus-visible) .label .name{
 display:block!important;width:100%!important;max-width:none!important;border-radius:0!important;
 padding:6px 14px!important;text-align:center!important;font-family:"Segoe UI Variable","Segoe UI Variable Text","Segoe UI",Arial,sans-serif!important;
 font-size:clamp(14px,1.25vw,21px)!important;font-weight:550!important;line-height:1.25!important;letter-spacing:.025em;
 background:rgba(234,234,232,.48)!important;color:rgba(37,38,36,.76)!important;text-shadow:none!important;
}
html[data-theme="night"] .grid .tile:is(:hover,:focus-visible) .label .name{background:rgba(20,22,20,.48)!important;color:rgba(255,255,255,.8)!important}
@media(max-width:700px){.grid .tile .label .name,.grid .tile.previewing:is(:hover,:focus-visible) .label .name,.grid .tile:is(:hover,:focus-visible) .label .name{font-size:12px!important;padding:6px 8px!important}}

/* Actual transparent letterforms in a more substantial paper strip. */
html .grid .tile .label .name.name.name.name,
html .grid .tile:is(:hover,:focus-visible) .label .name.name.name.name,
html .grid .tile.previewing:is(:hover,:focus-visible) .label .name.name.name.name{
 position:relative!important;background:transparent!important;color:transparent!important;
}
.caption-cutout{position:absolute;inset:0;display:block;overflow:visible;pointer-events:none;font:inherit;letter-spacing:inherit}
.caption-cutout text{font:inherit;letter-spacing:inherit}
.caption-paper{fill:rgba(18,20,18,.86)}
html[data-theme="night"] .caption-paper{fill:rgba(234,234,232,.82)}

/* Restore palette-matched strips with clearer, nearly opaque lettering. */
html .grid .tile .label .name.name.name.name.name.name.name.name.name.name{background:rgba(255,255,255,.82)!important;color:rgba(25,27,25,.94)!important}
html[data-theme="night"] .grid .tile .label .name.name.name.name.name.name.name.name.name.name{background:rgba(0,0,0,.86)!important;color:rgba(255,255,255,.94)!important}
.caption-cutout{display:none!important}