/* Botanical heraldic gallery. Scoped to the homepage; inner pages retain their art direction. */
#gallery-page{position:relative;isolation:isolate;min-height:100svh;padding:0 clamp(20px,3.8vw,74px);background:radial-gradient(ellipse at 48% 40%,#191914 0%,#0c0d0d 57%,#090a0b 100%);overflow:hidden}
#gallery-page:before,#gallery-page:after{content:'';position:absolute;z-index:-1;pointer-events:none;top:11%;bottom:8%;width:100px;background:url('assets/convallaria-logo.png') center/100% auto repeat-y;opacity:.07;filter:grayscale(1)}#gallery-page:before{left:-58px;transform:rotate(-12deg)}#gallery-page:after{right:-58px;transform:rotate(12deg)}
#gallery-page .masthead{height:126px;min-height:126px;padding:0;display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
.portal-kicker{font-size:12px;letter-spacing:.28em;line-height:2;color:#c2bfb6}.portal-kicker span{display:block;font-size:12px;letter-spacing:.15em;color:#817f78}.portal-kicker:after{content:'';display:block;width:130px;border-top:1px solid #454039;margin-top:8px}
#gallery-page .brand{gap:20px;font-size:clamp(25px,2.6vw,46px);font-variant:normal;letter-spacing:.035em;white-space:nowrap;align-items:center;color:#e5dfd1}#gallery-page .brand-mark{width:64px;height:64px;flex-shrink:0}#gallery-page .brand-emblem{filter:grayscale(.7) sepia(.25);opacity:.92}
.brand-type{display:flex;flex-direction:column}.brand-title{font-weight:400;line-height:1.1;letter-spacing:.025em;font-stretch:condensed}.brand-type small{font:10px/1.4 var(--sans);letter-spacing:.4em;margin-top:12px;color:#9b988f;text-align:center}.brand-chinese{font:26px/1 'SimSun',serif;letter-spacing:.16em;margin-left:12px}
.portal-clock{text-align:right;font-size:12px;letter-spacing:.17em;line-height:1.7;color:#bfbcb3;font-variant-numeric:tabular-nums}.portal-clock .clock-time{display:block;font-size:14px;letter-spacing:.26em}.clock-caption{display:block;color:#777b77;font-size:12px;letter-spacing:.12em;margin-top:8px}
#gallery-page .gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;min-height:560px;flex:1;padding:0;transition:none;align-items:stretch}
#gallery-page .panel{height:clamp(590px,calc(100svh - 248px),880px);min-height:0;border:1px solid color-mix(in srgb,var(--accent) 28%,#171918);background:radial-gradient(ellipse at 45% 30%,color-mix(in srgb,var(--accent) 9%,#121414),#0c0d0f 70%);overflow:hidden;box-shadow:none;transition:border-color .35s,box-shadow .35s}
#gallery-page .panel-number{top:16px;left:14px;font-size:23px;color:color-mix(in srgb,var(--accent) 70%,#d8d5cd);z-index:6}
#gallery-page .panel-art{inset:0;transform:none;filter:none;overflow:hidden;transition:filter .4s,transform .8s}
#gallery-page .panel-emblem,.transition-color .panel-emblem{position:absolute;z-index:1;inset:20px 7% auto;width:86%;height:auto;aspect-ratio:1;transform:none;opacity:.66;transition:opacity .45s,transform .8s}
#gallery-page .panel-emblem img,.transition-color .panel-emblem img{object-fit:contain;width:100%;height:100%;filter:saturate(.85);mix-blend-mode:normal}
.home-portrait{position:absolute;z-index:2;top:19%;bottom:0;left:0;width:100%;overflow:hidden;mask-image:linear-gradient(#000 0%,#000 72%,transparent 100%);transform-origin:50% 40%;transition:transform .8s cubic-bezier(.16,1,.3,1),filter .45s;filter:brightness(.76) saturate(.85)}
.home-portrait img{display:block;height:100%;width:100%;object-fit:cover;object-position:50% 0%}
.home-portrait.sheet{background:none}
#gallery-page .panel-shade{z-index:3;background:linear-gradient(180deg,#0000 44%,#0a0b0c22 55%,#0a0b0cc4 72%,#0a0b0cf0 91%,#0a0b0c)}
#gallery-page .panel-caption{z-index:5;left:9px;right:9px;bottom:25px;transition:translate .65s}
#gallery-page .host-name{font:clamp(24px,2.15vw,39px)/1.2 var(--serif);font-variant:normal;text-transform:uppercase;letter-spacing:-.055em;color:#efebe1;display:block;white-space:nowrap}
#gallery-page .host-purpose{font-size:13px;letter-spacing:.13em;color:var(--accent);margin:12px 0 0;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.panel-access{display:flex;justify-content:center;align-items:center;gap:10px;min-height:32px;font-size:12px;letter-spacing:.11em;color:#c1b7a4;margin-top:13px}.access-symbol{display:inline-block;border:1px solid #bba57b;border-radius:50%;width:13px;height:13px;position:relative}.access-symbol:after{content:'';position:absolute;width:11px;height:11px;left:5px;top:-1px;border:1px solid #bba57b;border-radius:50%}
.panel-footnote{display:block;min-height:36px;margin:13px 2px 0;font-size:12px;color:#92908c;letter-spacing:.07em;line-height:1.6}.panel-open{display:block;margin:14px 0 0;color:var(--accent);font-size:12px;letter-spacing:.11em}
#gallery-page .panel-line{position:absolute;left:3px;right:3px;bottom:-19px;width:auto;margin:0;background:var(--accent);opacity:.5}
/* One stationary frame: bright edge, light falling inward over the artwork. */
#gallery-page .panel::before{inset:0;z-index:7;border:0;padding:0;opacity:0;transform:none;pointer-events:none;background:none;box-shadow:inset 0 0 0 1px #f6e7bb,inset 0 0 7px 1px #ebce8d99,inset 0 0 22px 4px #d7b96a40,inset 0 0 45px 6px #c9a45812;transition:opacity .28s ease}
#gallery-page .panel::after,#gallery-page .panel-energy{display:none!important;animation:none!important}
#gallery-page .gallery-footer{height:122px;min-height:110px;display:grid;grid-template-columns:1fr auto 1fr;gap:25px;align-items:center;letter-spacing:.1em;color:#a39f94}
.footer-signature{font:17px/1.7 var(--serif);letter-spacing:.24em}.footer-signature small{display:block;font:10px/1.8 var(--sans);letter-spacing:.3em;color:#77766f}
.home-nav{display:flex;align-items:center;gap:clamp(20px,3vw,52px);font-size:12px;letter-spacing:.13em;height:100%}.home-nav a{position:relative;padding:20px 0}.home-nav a:hover{color:#e6d7b6}.home-nav a[aria-current=page]{color:#e1d5b8}.home-nav a[aria-current=page]:after{content:'';position:absolute;bottom:5px;left:0;right:0;height:1px;background:#d4bd7d}
.footer-motto{display:flex;justify-content:flex-end;gap:25px;align-items:center;font:italic 12px/1.8 var(--serif);letter-spacing:.2em;text-align:right}.footer-seal{width:44px;height:44px;object-fit:contain;filter:grayscale(1);opacity:.7}
/* The reference keeps figures and typography still when the frame illuminates. */
#gallery-page .panel:is(:hover,:focus-visible) .panel-art,#gallery-page .gallery:has(.panel:hover) .panel:not(:hover) .panel-art{filter:none;transform:none}
#gallery-page .panel:is(:hover,:focus-visible) .home-portrait{transform:none;filter:brightness(.9) saturate(.85)}
#gallery-page .panel:is(:hover,:focus-visible) .panel-emblem{opacity:.66;transform:none;translate:none;filter:none}
#gallery-page .panel:is(:hover,:focus-visible) .panel-caption,#gallery-page .panel:is(:hover,:focus-visible) .panel-number{translate:none;transform:none}
#gallery-page .panel:focus-visible{outline:none;border-color:#e8d299;box-shadow:none}
#gallery-page .panel:focus-visible::before{opacity:1;transform:none}
@media(hover:hover){#gallery-page .panel:hover{border-color:#e8d299;box-shadow:none}#gallery-page .panel:hover::before{opacity:1;transform:none}}
@media(min-width:1700px){#gallery-page .masthead{height:138px;min-height:138px}#gallery-page .panel{height:calc(100svh - 260px)}#gallery-page .host-name{font-size:39px}}
@media(max-width:1200px){#gallery-page .masthead{gap:16px}.portal-kicker{font-size:11px;letter-spacing:.12em}.portal-kicker span{letter-spacing:.04em;font-size:11px}#gallery-page .brand{font-size:26px;gap:10px}#gallery-page .brand-mark{width:44px;height:44px}.brand-chinese{font-size:20px;margin-left:6px}.brand-type small{font-size:9px;letter-spacing:.15em}.portal-clock{font-size:11px}.clock-caption{font-size:10px}#gallery-page .gallery{gap:8px}#gallery-page .host-name{font-size:25px}.footer-motto{letter-spacing:.07em;font-size:11px;gap:12px}.footer-signature{font-size:13px;letter-spacing:.12em}.home-nav{gap:22px}}
@media(max-width:1000px){#gallery-page .gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}#gallery-page .panel{height:610px}#gallery-page .host-name{font-size:35px}.portal-kicker span{display:none}.portal-kicker:after{width:70px}.brand-chinese{display:none}#gallery-page .masthead{height:112px;min-height:112px}#gallery-page .gallery-footer{grid-template-columns:1fr auto;height:110px}.footer-motto{display:none!important}.panel-footnote{font-size:13px}.home-portrait{top:18%}}
@media(max-width:600px){#gallery-page{padding:0 15px}#gallery-page .masthead{height:118px;min-height:118px;grid-template-columns:1fr auto;gap:0}#gallery-page .brand{grid-column:1/-1;grid-row:1;font-size:27px;justify-content:center;gap:13px;padding-top:19px}#gallery-page .brand-mark{width:42px;height:42px}.brand-type small{font-size:9px;letter-spacing:.2em;margin-top:7px}.portal-kicker{grid-column:1;grid-row:2;font-size:10px;letter-spacing:.15em;padding:14px 0}.portal-kicker:after{display:none}.portal-clock{grid-column:2;grid-row:2;font-size:10px;letter-spacing:.03em;display:flex;gap:8px;align-items:center}.portal-clock .clock-time{font-size:10px;letter-spacing:.04em}.clock-caption{display:none}#gallery-page .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#gallery-page .panel{height:510px}#gallery-page .panel-number{font-size:21px;left:12px;top:12px}#gallery-page .panel-emblem{top:28px;left:6%;width:88%}#gallery-page .host-name{font-size:27px}#gallery-page .host-purpose{font-size:12px;letter-spacing:.06em}.panel-access{font-size:11px;gap:8px}.panel-footnote{font-size:12px;letter-spacing:0}.home-portrait{top:19%}#gallery-page .panel-caption{left:8px;right:8px;bottom:25px}.panel-open{font-size:12px}#gallery-page .gallery-footer{height:auto;min-height:126px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:14px 0}.footer-signature{text-align:center;font-size:14px}.footer-signature small{display:none}.home-nav{gap:32px;height:auto}#gallery-page .gallery-footer .home-nav{display:flex}.home-nav a{padding:15px 0;font-size:12px}}
@media(max-width:380px){#gallery-page .host-name{font-size:23px}.brand-title{font-size:23px}#gallery-page .panel{height:480px}.panel-footnote{font-size:12px}.panel-access{gap:6px}}
@media(min-width:1001px){#gallery-page .gallery{min-height:500px}#gallery-page .panel{height:clamp(500px,calc(100svh - 248px),880px)}}
#gallery-page .host-name{font-size:clamp(34px,3.1vw,52px);font-weight:400;transform:scaleX(.65);width:153.846%;margin-left:-26.923%;letter-spacing:-.025em;line-height:1.08}
@media(max-width:1000px){#gallery-page .host-name{font-size:44px}}@media(max-width:600px){#gallery-page .host-name{font-size:36px}}@media(max-width:380px){#gallery-page .host-name{font-size:31px}}
@media(prefers-reduced-motion:reduce){#gallery-page *{transition:none!important;animation:none!important}}

@font-face{font-family:PortalWire;src:url('assets/fonts/wire-one.ttf') format('truetype');font-display:swap}@font-face{font-family:PortalBodoni;src:url('assets/fonts/bodoni-moda.ttf') format('truetype');font-display:swap}#gallery-page .brand-title{font-family:PortalWire,sans-serif;font-size:52px;letter-spacing:.025em}#gallery-page .host-name{font-family:PortalBodoni,serif;font-weight:400}.brand-chinese{vertical-align:middle}.brand-type small{margin-top:8px}.home-portrait{filter:brightness(.9) saturate(.85)}@media(max-width:1200px){#gallery-page .brand-title{font-size:40px}}@media(max-width:600px){#gallery-page .brand-title{font-size:39px}}@media(max-width:380px){#gallery-page .brand-title{font-size:34px}}

.home-portrait .home-sprite{display:block;width:100%;height:100%}
.home-portrait.individual{top:23%;bottom:-4%}
.home-portrait.individual img{object-position:50% 0%;transform:none}
.home-portrait.individual img[src$="dahlia-home-v3.png"]{object-position:55% 0%}
.home-portrait.individual img[src$="epiphyllum-home-v5.png"]{object-position:43% 0%}

/* Taller, narrower folio proportions independent of the window's height. */
@media(min-width:1001px){#gallery-page{padding-inline:clamp(24px,4.2vw,82px)}#gallery-page .gallery{min-height:0;flex:1;align-items:stretch}#gallery-page .panel{height:auto;aspect-ratio:1 / 3.15;min-height:570px}#gallery-page .masthead{height:112px;min-height:112px}#gallery-page .gallery-footer{height:106px;min-height:106px}}
@media(min-width:601px) and (max-width:1000px){#gallery-page .panel{height:auto;aspect-ratio:1 / 3.15;min-height:640px}}
@media(max-width:600px){#gallery-page .panel{height:auto;aspect-ratio:1 / 3.4;min-height:540px}}

/* Fit the full studio name without widening the gallery header. */
#gallery-page .brand-title{font-size:clamp(26px,3vw,44px);white-space:normal;max-width:470px;text-align:center}
#gallery-page .brand{white-space:normal}
.footer-signature{max-width:320px}
@media(max-width:600px){#gallery-page .brand-title{font-size:30px;max-width:270px}.brand-chinese{font-size:18px}.footer-signature{max-width:240px}}