/* Attention hierarchy: hero CTA / contact dock / skin frames / final key art. */
.hero-caption{padding-inline:10px;bottom:12px}
.claim{width:354px;height:auto;aspect-ratio:590/152;max-width:100%}
.claim span{font-size:23px}
html[data-skin="egypt"] .claim span{font-size:21px;letter-spacing:.025em}
.claim:focus-visible{outline-offset:4px}
.claim:hover{filter:brightness(1.12)}
/* Preserve the rich surface directly under the skin selector. */
html[data-skin="egypt"] .surface--catalog{background-image:linear-gradient(#030c10d9,#030c10d9),var(--bg-catalog)}
html[data-skin="egypt"] .surface--footer{background-image:linear-gradient(#030c10e8,#030c10e8),var(--bg-footer)}
/* Quiet supporting frames: broad clean bevel, no repeating filigree. */
html[data-skin="egypt"] .metal-box,
html[data-skin="egypt"] .small-banner,
html[data-skin="egypt"] .art-card{
 border-image:none;border:1px solid #8e764b;border-radius:12px;
 box-shadow:inset 0 0 0 2px #172a2d,0 2px 8px #0005;
}
html[data-skin="egypt"] .metal-box{background-color:#0a1a20}
html[data-skin="egypt"] .art-card{padding:4px;overflow:hidden}
html[data-skin="egypt"] .art-card img{border-radius:7px}
html[data-skin="egypt"] .small-banner{padding:12px 10px}
html[data-skin="egypt"] .streak{padding:12px 14px 16px;min-height:177px}
html[data-skin="egypt"] .streak-top{padding:0 0 14px}
html[data-skin="egypt"] .streak-icon{margin:0 auto 12px}
html[data-skin="egypt"] .streak p{margin:8px 0 0}
html[data-skin="egypt"] .vip-banner{padding:16px;height:224px}
html[data-skin="egypt"] .vip-banner h3{margin:12px 0 10px}
html[data-skin="egypt"] .promo-bottom{left:12px;right:12px;bottom:12px;padding:6px;border-radius:6px}
html[data-skin="egypt"] .activity{padding:14px}
html[data-skin="egypt"] .activity-row{gap:7px;padding:11px 0}
html[data-skin="egypt"] .activity-row>span{font-size:13px;overflow:hidden}
html[data-skin="egypt"] .activity-row b{font-size:12px;flex-shrink:0}
html[data-skin="egypt"] .support{padding:18px;height:192px}
html[data-skin="egypt"] .support>button{left:16px;right:16px;bottom:16px;height:40px}
html[data-skin="egypt"] .support img{bottom:40px;right:4px}
html[data-skin="egypt"] .support p{margin-top:12px}
html[data-skin="egypt"] .presentation{padding:12px;gap:10px}
/* Equal columns and one label baseline; artwork scales proportionally. */
.bottom-nav .nav-label{position:static;display:block;font-size:11px;line-height:14px;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;background:none;color:inherit}
html[data-skin="egypt"] .bottom-nav{
 height:100px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
 border:0;border-image:none;border-radius:0;background:none;
 box-shadow:none;padding:0 25px;isolation:isolate;
 bottom:env(safe-area-inset-bottom,0px);
}
html[data-skin="egypt"] .bottom-nav:before{
 content:"";position:absolute;left:0;right:0;bottom:0;height:70px;z-index:-1;
 background:url('assets/egypt-skin/contact-base-v4.webp') center bottom/contain no-repeat;pointer-events:none;
}
html[data-skin="egypt"] .bottom-nav a,
html[data-skin="egypt"] .bottom-nav button,
html[data-skin="egypt"] .bottom-nav .main-contact{
 position:relative;display:block;min-width:0;width:100%;height:100px;min-height:44px;
 padding:0;margin:0;background:none;color:#f1dca7;font-size:12px;font-weight:500;
}
html[data-skin="egypt"] .bottom-nav a span:first-child{
 position:absolute;width:32px;height:32px;left:50%;bottom:20px;
 transform:translateX(-50%);background-size:contain;
}
html[data-skin="egypt"] .bottom-nav .main-contact:before{
 content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%);
 width:62px;height:62px;background:url('assets/egypt-skin/contact-medallion-v4.webp') center/contain no-repeat;
 pointer-events:none;
}
html[data-skin="egypt"] .bottom-nav .main-contact span:first-child{
 position:absolute;width:38px;height:38px;left:50%;top:21px;bottom:auto;transform:translateX(-50%);
 border:0;border-radius:0;box-shadow:none;background:transparent url('assets/egypt-skin/icons-generated/contact.webp') center/contain no-repeat;
}
html[data-skin="egypt"] .bottom-nav a .nav-label,
html[data-skin="egypt"] .bottom-nav .main-contact .nav-label{
 position:absolute;inset:auto 0 9px;display:block;width:auto;height:14px;
 transform:none;margin:0;padding:0;border:0;box-shadow:none;background:none;
 font-size:12px;line-height:14px;text-align:center;color:inherit;white-space:nowrap;
}
html[data-skin="egypt"] .bottom-nav .main-contact .nav-label{font-weight:700;color:#fff0c1}
html[data-skin="egypt"] .bottom-nav a:hover{color:#fff4d4}
html[data-skin="egypt"] .bottom-nav .main-contact:hover:before{filter:brightness(1.1)}
html[data-skin="egypt"] .mobile-site{padding-bottom:calc(105px + env(safe-area-inset-bottom,0px))}
html[data-skin="egypt"] .final-scene{background:#030b10}
html[data-skin="egypt"] .final-scene img{aspect-ratio:780/1014;object-fit:cover}

/* Preserve the original full-width tab geometry; change material only. */
html[data-skin="egypt"] .main-tabs{
 height:48px;margin:0;padding:0;border:0;border-radius:0;
 background:#bd914c url('assets/egypt-skin/gold-tab-material.webp') center/390px 48px no-repeat;
 box-shadow:inset 0 1px #fff0be80,inset 0 -1px #69471e;
}
html[data-skin="egypt"] .main-tabs a{
 color:#493719;text-shadow:none;
}
html[data-skin="egypt"] .main-tabs a.active{
 color:#112c2d;border-bottom-color:#123e3c;text-shadow:none;
}
html[data-skin="egypt"] .main-tabs a span{filter:brightness(.25)}
/* Every inter-section separator shares fixed 26px geometry.
   End caps keep their width; only the center repeats. */
.ornament.ornament--thin,.ornament.ornament--knot,.ornament.ornament--wide{
 display:grid;grid-template-columns:12px minmax(0,1fr) 12px;
 height:26px;margin:0;padding:0;border:0;background:#070d12;
 filter:none;
}
.ornament span{display:block;height:26px;background-repeat:no-repeat;background-position:center}
.ornament .separator-left{background-image:url('assets/backgrounds/separator-left.webp');background-size:12px 26px}
.ornament .separator-middle{background-image:url('assets/backgrounds/separator-middle.webp');background-size:361.5px 26px;background-repeat:repeat-x}
.ornament .separator-right{background-image:url('assets/backgrounds/separator-right.webp');background-size:12px 26px}
html[data-skin="egypt"] .ornament{background:#071115}
html[data-skin="egypt"] .ornament .separator-left{background-image:url('assets/egypt-skin/separator-left.webp')}
html[data-skin="egypt"] .ornament .separator-middle{background-image:url('assets/egypt-skin/separator-middle.webp');background-size:535.0px 26px}
html[data-skin="egypt"] .ornament .separator-right{background-image:url('assets/egypt-skin/separator-right.webp')}

/* Swipe and drag keep vertical page scrolling available. */
.hero{touch-action:pan-y;cursor:grab}
.hero.is-dragging,.rail.is-dragging{cursor:grabbing;user-select:none}
.hero.is-dragging .hero-art{transition:none}
.rail{cursor:grab;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scroll-padding-inline:12px}
.rail.is-dragging{scroll-snap-type:none;scroll-behavior:auto}
.rail img,.hero img{-webkit-user-drag:none;user-select:none}
.rail:focus-visible,.hero:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Latest work: image, concise title, one quiet category. */
.latest{padding:4px 0 12px}
.latest-rail{gap:10px;padding-bottom:10px}
.latest .recent{width:270px;min-height:108px;padding:10px;gap:12px;align-items:center;position:relative;
 border:1px solid #53666b;border-radius:12px;background:#101c23;text-align:left}
html[data-skin="egypt"] .latest .recent{background:#0c2329;border-color:#856b3b}
.latest .recent img{width:66px;height:86px;object-fit:cover;border-radius:7px;flex-shrink:0}
.latest .recent-copy{flex:1;min-width:0;padding:0;font-size:17px;line-height:1.2;font-weight:600;color:#f0eee6}
.latest .recent-copy small{font-size:13px;line-height:1.3;color:#a1b3b7;font-weight:400;margin:7px 0 0}
.latest .recent-arrow{font-size:20px;font-weight:400;color:var(--accent);align-self:flex-end;padding-bottom:4px}
.project-promo{padding-top:14px}
.project-promo>h2{font-size:21px;margin:0 12px 12px}
.project-promo .vip-banner,html[data-skin="egypt"] .project-promo .vip-banner{
 height:auto;min-height:226px;padding:20px 18px 76px;margin:0 12px 26px;
}
.project-promo .project-copy{position:relative;max-width:225px;text-shadow:0 2px 6px #001018}
.project-promo .project-copy h3,html[data-skin="egypt"] .project-promo .project-copy h3{
 font-size:30px;line-height:1.05;font-weight:700;margin:0 0 14px;letter-spacing:-.02em;
}
.project-promo .project-copy p{font-size:15px;line-height:1.45;color:#d2dfe0;margin:0}
.project-promo .promo-bottom,html[data-skin="egypt"] .project-promo .promo-bottom{
 left:18px;right:18px;bottom:18px;padding:0;background:none;display:block;
}
.project-promo .promo-bottom button{width:100%;min-height:44px;padding:11px 16px;display:flex;align-items:center;justify-content:space-between;font-size:15px;letter-spacing:.04em}
.project-promo .promo-bottom button span{font-size:21px;color:inherit}

/* Equal round footer actions, with explicit internal alignment. */
.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 18px 24px}
.footer-actions button,.footer-actions a{
 width:56px;height:56px;flex:0 0 56px;box-sizing:border-box;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 margin:0;padding:0;gap:1px;border-radius:50%;text-align:center;line-height:1;
}
.footer-actions .footer-action-icon{display:block;height:25px;font-size:25px;line-height:25px}
.footer-actions small{display:block;margin:0;padding:0;font-size:10px;line-height:12px}
.footer-actions a .footer-action-icon{height:30px;font-size:30px;line-height:30px}

/* Soft backdrop separates the dock without a hard edge. */
.bottom-nav{isolation:isolate}
.bottom-nav:after{
 content:"";position:absolute;left:-1px;right:-1px;bottom:calc(-1 * env(safe-area-inset-bottom,0px));
 height:calc(130px + env(safe-area-inset-bottom,0px));z-index:-2;pointer-events:none;
 background:linear-gradient(to top,rgba(2,8,12,.88) 0%,rgba(2,8,12,.62) 38%,rgba(2,8,12,.22) 70%,rgba(2,8,12,0) 100%);
}
