/* Shared navigation and mobile composition. Original brand artwork is retained. */
:root{--ui-paper:#f6f4ef;--ui-ink:#141413;--ui-line:#d9d6cf;--ui-muted:#6c6961}
.ui-icon{display:inline-block;width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.site-chrome{position:sticky;top:0;z-index:30;background:var(--ui-paper);border-bottom:1px solid var(--ui-line)}
header.site-header{position:static;min-height:80px;padding:14px 3.3%;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:nowrap;border:0;background:transparent;color:var(--ui-ink)}
.site-header .primary-navigation{display:flex;align-items:center;justify-content:flex-end;gap:24px;width:auto;flex-wrap:nowrap;margin-left:auto;font-size:12px}
.site-header .primary-navigation a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0;white-space:nowrap}
.primary-navigation .ui-icon{width:17px;height:17px}
.site-header a:focus-visible,.site-header button:focus-visible,.site-menu a:focus-visible,.site-menu button:focus-visible{outline:2px solid var(--ui-ink);outline-offset:4px}
.header-actions{display:flex;align-items:center;gap:8px;flex:none}
.icon-control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;border:1px solid var(--ui-line);border-radius:50%;background:transparent;color:var(--ui-ink);cursor:pointer}
.icon-control .ui-icon{width:22px;height:22px}
.icon-control:hover{background:#eae7df}
.menu-trigger{display:none}
.ui-ready .menu-trigger{display:inline-flex}
.home-page #saved-count{position:absolute;top:-3px;right:-3px;width:19px;height:19px;margin:0;border:2px solid var(--ui-paper);background:var(--ui-ink);color:white;font-size:9px;line-height:15px}
.mobile-shortcuts{display:none}
html{scroll-padding-top:100px}
.skip:focus{position:fixed;z-index:60}
.button,.light-button,.dark-button,.text-link,.share-find,.story-foot a,.footer a,.estate>a,.notes article a,.look-action{align-items:center;gap:14px}
.share-find,.story-foot a,.footer a,.look-action{display:inline-flex}
.button .ui-icon,.light-button .ui-icon,.dark-button .ui-icon{width:20px;height:20px;margin-left:auto}
.hero-caption button,.save,.close,.close-dialog,.zoom-button{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0}
.save .ui-icon{width:20px;height:20px}
.close,.close-dialog{border:1px solid var(--ui-line);border-radius:50%;background:var(--ui-paper);color:var(--ui-ink)}
.information summary{display:flex;justify-content:space-between;align-items:center;gap:15px;list-style:none;min-height:48px}
.information summary::-webkit-details-marker{display:none}
.information details[open] summary .ui-icon{transform:rotate(180deg)}
.accordions details[open] summary>.ui-icon,.text-button[aria-expanded=true]>.ui-icon{transform:rotate(45deg)}
.site-header .nav-request{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 12px;border-left:0;background:var(--ui-ink);color:var(--ui-paper);font-size:11px;white-space:nowrap}
.campaign-page .site-header .primary-navigation{gap:20px}
.campaign-page .site-header{gap:20px}
.gallery-viewport{touch-action:pan-y}
.gallery-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;text-align:center}
.gallery-tabs button:first-child{padding-left:14px}
.gallery-tabs .ui-icon{width:18px;height:18px}
.gallery-tabs button[aria-pressed=true]{background:#e6e2da}
.gallery-arrows{position:absolute;right:12px;top:12px;display:flex;gap:8px}
.gallery-arrows button{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#f6f4efed;color:var(--ui-ink);border:1px solid #fff7}
.zoom-button{width:48px;height:48px;border-radius:50%;background:#f6f4efed}
.zoom-button svg{width:22px;height:22px}
.gallery-caption{min-height:32px;display:flex;align-items:center}
.modal-open .mobile-sticky{visibility:hidden}
.mobile-sticky button{display:flex;align-items:center;justify-content:center;gap:16px;min-height:48px}
.colour-options label{min-height:48px;padding:12px;border:1px solid #c9c5bc;border-radius:8px;cursor:pointer}
.colour-options label:has(input:checked){border-color:var(--ui-ink);background:#e6e2da}
.colour-options input{width:18px;height:18px;flex:none}
.size-options span{min-height:48px;display:grid;place-items:center;border-radius:8px}
dialog{overscroll-behavior:contain}
dialog::backdrop{background:#1118;backdrop-filter:blur(5px)}
dialog.site-menu{position:fixed;inset:0 0 0 auto;margin:0;width:min(540px,100%);height:100dvh;max-height:100dvh;max-width:100%;padding:26px 32px 24px;border:0;border-left:1px solid var(--ui-line);border-radius:0;background:var(--ui-paper);color:var(--ui-ink);overflow:auto;line-height:1.5}
.menu-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:32px}
.menu-kicker{margin:0;font-size:9px;letter-spacing:.12em;color:var(--ui-muted);line-height:1.6}
.site-menu h2{font-size:34px;letter-spacing:-.045em;line-height:1.1;margin:0 0 28px;font-weight:400}
.menu-links{display:grid;gap:0;border-top:1px solid var(--ui-line)}
.menu-links a{display:flex;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid var(--ui-line);min-height:80px}
.menu-links a>.ui-icon:first-child{width:23px;height:23px}
.menu-links a>.ui-icon:last-child{margin-left:auto;width:18px;height:18px}
.menu-links strong{display:block;font-size:19px;letter-spacing:-.025em;font-weight:400}
.menu-links small{display:block;margin-top:3px;font-size:11px;color:var(--ui-muted)}
.menu-links a[aria-current=page] strong{font-weight:600}
.menu-links a:hover{background:#eeebe4}
.menu-chapters{margin-top:26px}
.menu-chapters>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.menu-chapters a{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:1px solid var(--ui-line);border-radius:24px;padding:10px 13px;font-size:11px}
.menu-chapters .ui-icon{width:16px;height:16px}
.menu-feature{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:20px;margin-top:30px;background:#e9e5dc;border-radius:12px;overflow:hidden}
.menu-feature img{width:110px;height:140px;object-fit:cover;object-position:50% 35%}
.menu-feature>span{padding:12px 16px 12px 0}
.menu-feature small{display:block;font-size:8px;letter-spacing:.13em;margin-bottom:10px;color:var(--ui-muted)}
.menu-feature strong{display:block;font-size:23px;font-weight:400;letter-spacing:-.04em;line-height:1.1}
.menu-feature>span>span{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:10px}
.menu-feature .ui-icon{width:16px;height:16px}
.menu-footer{display:flex;justify-content:space-between;gap:16px;margin-top:28px;padding-top:20px;border-top:1px solid var(--ui-line);font-size:10px;color:var(--ui-muted)}
.menu-footer a{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.menu-footer>span{align-self:center}
.menu-footer .ui-icon{width:16px;height:16px}
@media(max-width:1150px){.campaign-page .primary-navigation .ui-icon{display:none}.campaign-page .site-header .primary-navigation{gap:15px}.campaign-page .site-header .nav-request{display:none}}
@media(max-width:1000px){
 .ui-ready .site-header .primary-navigation{display:none}
 .site-header .primary-navigation{flex-wrap:wrap}
 .site-header{gap:16px}
 .ui-ready .mobile-shortcuts{display:flex;align-items:center;justify-content:space-around;gap:0;height:44px;border-top:1px solid #e6e2db;padding:0 12px;font-size:11px}
 .mobile-shortcuts a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;flex:1;position:relative;color:#66635e}
 .mobile-shortcuts a[aria-current=page]{color:var(--ui-ink)}
 .mobile-shortcuts a[aria-current=page]::after{content:'';position:absolute;bottom:0;width:24px;height:2px;background:currentColor}
 .mobile-shortcuts .ui-icon{width:17px;height:17px}
 html{scroll-padding-top:126px}
}
@media(max-width:700px){
 header.site-header{min-height:68px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));gap:12px;flex-wrap:nowrap}
 .site-header .wordmark-art{width:152px}
 .header-actions{gap:6px}
 .icon-control{width:44px;height:44px;min-width:44px;min-height:44px}
 .icon-control .ui-icon{width:21px;height:21px}
 .site-header .brand{gap:8px}
 .site-header .sunnyfy-logo{width:96px;height:20px}
 .site-header .noble-logo{width:54px;height:20px}
 .site-header .brand-times{font-size:12px}
 .home-page .preview{display:none}
 html{scroll-padding-top:126px}
 .home-page .hero{grid-template-columns:1fr;min-height:0}
 .home-page .hero-copy{padding:30px 22px 25px}
 .home-page .hero h1{font-size:clamp(44px,12vw,58px);line-height:1.04;margin:22px 0 18px;letter-spacing:-.045em}
 .home-page .hero-intro{font-size:14px;line-height:1.65}
 .home-page .hero .button{margin-top:22px;min-height:50px;gap:28px}
 .home-page .edition{padding-top:24px;font-size:9px;gap:14px;align-items:start;line-height:1.6}
 .home-page .edition span{font-size:10px;margin:0;max-width:210px}
 .home-page .hero-image{min-height:280px;height:clamp(280px,42svh,390px)}
 .home-page .hero-image>img{padding:12px 21% 40px}
 .home-page .image-index{top:20px;left:22px;font-size:8px}
 .home-page .hero-caption{bottom:18px;font-size:20px}
 .home-page .noble-release{padding:0;gap:0;background:#141413;color:var(--ui-paper)}
 .home-page .noble-release-image img{aspect-ratio:4/4.8;object-position:50% 39%}
 .home-page .noble-release>div{padding:32px 22px 38px}
 .home-page .noble-release h2{font-size:58px;margin:22px 0}
 .home-page .noble-release p:not(.eyebrow){font-size:14px;line-height:1.7}
 .home-page .noble-release .button{background:var(--ui-paper);color:var(--ui-ink);width:100%;margin-top:24px;min-height:52px}
 .home-page .noble-release p.noble-release-note{font-size:10px;color:#bcb8ae}
 .home-page .noble-release .eyebrow{font-size:9px;letter-spacing:.1em}
 .home-page .filters{width:100%;gap:8px;overflow-x:auto;padding:5px 0 12px;scrollbar-width:none}
 .home-page .filters button{padding:10px 14px;border:1px solid var(--ui-line);border-radius:24px;min-height:44px;font-size:11px}
 .home-page .filters button[aria-pressed=true]{background:var(--ui-ink);color:var(--ui-paper);border-color:var(--ui-ink)}
 .home-page .filter-row{border-bottom:0;margin-bottom:10px}
 .home-page .save{width:44px;height:44px;min-width:44px;min-height:44px;right:6px;top:6px}
 .home-page .text-link{min-height:44px;line-height:1.4;font-size:11px;gap:6px}
 .home-page .text-link .ui-icon{width:17px;height:17px}
 .campaign-page .hero{position:relative;display:block;isolation:isolate}
 .campaign-page .hero-image{width:100%;height:calc(100svh - 112px);min-height:540px;max-height:820px}
 .campaign-page .hero-image img{object-position:50% 38%}
 .campaign-page .hero-image figcaption{bottom:auto;top:61px;left:22px;font-size:9px;z-index:2;color:#e8e4dc}
 .campaign-page .hero-copy{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;padding:24px 22px 22px;background:linear-gradient(180deg,#0006 0%,transparent 28%,transparent 42%,#0008 69%,#111e 100%)}
 .campaign-page .hero-copy .eyebrow{position:absolute;top:21px;left:22px;right:22px;display:flex;font-size:8px;line-height:1.6}
 .campaign-page .hero-copy .eyebrow span{font-size:7px;color:#eee;opacity:.9;max-width:140px}
 .campaign-page .hero h1{font-size:clamp(58px,17vw,84px);padding:0;margin:0 0 15px;line-height:.93;color:#fff}
 .campaign-page .hero-deck{font-size:13px;line-height:1.5;color:#ece9e1;margin:0}
 .campaign-page .hero .light-button{min-height:50px;padding:15px 18px;margin:22px 0 0;width:100%}
 .campaign-page .hero-foot{font-size:7px;letter-spacing:.1em;padding-top:21px;margin-top:0;color:#ddd7cb}
 .campaign-page .product{gap:30px;padding-top:40px}
 .campaign-page .product-info h2{font-size:clamp(48px,13vw,60px);line-height:1.02}
 .campaign-page .product-gallery{margin:0 -6px;width:calc(100% + 12px)}
 .gallery-tabs button{font-size:11px;min-height:52px;padding:16px 10px}
 .gallery-viewport{border-radius:4px}
 .campaign-page .white-edition{padding-top:44px;padding-bottom:44px}
 .campaign-page .white-copy h2{font-size:clamp(42px,12vw,56px)}
 .campaign-page .white-edition figure{margin:0 -6px;width:calc(100% + 12px)}
 .campaign-page .white-edition figure img{border-radius:4px}
 .campaign-page .mobile-sticky{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));padding:9px 10px 9px 16px;border:1px solid #d6d1c5;border-radius:15px;background:#f6f4eff2;backdrop-filter:blur(18px);box-shadow:0 6px 30px #1112;transform:translateY(calc(100% + 50px))}
 .campaign-page .mobile-sticky.visible{transform:translateY(0)}
 .campaign-page .mobile-sticky button{border-radius:9px;font-size:11px;padding:12px 15px}
 .campaign-page .mobile-sticky small{font-size:9px}
 .campaign-page .footer{padding-bottom:120px}
 dialog:not(.site-menu):not(#image-dialog){position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:92dvh;border-radius:20px 20px 0 0;padding:58px 22px max(28px,env(safe-area-inset-bottom));border:1px solid var(--ui-line);border-bottom:0}
 dialog:not(.site-menu) .close,dialog:not(.site-menu) .close-dialog{top:10px;right:14px;min-width:44px;min-height:44px;width:44px;height:44px}
 dialog h2{font-size:42px}
 dialog textarea,dialog input[type=text]{font-size:16px}
 #access-dialog .colour-options{gap:8px}
 #access-dialog .colour-options label{font-size:12px}
 #access-dialog .size-options{gap:7px}
 #access-dialog .size-options span{font-size:12px}
 #image-dialog{inset:0;margin:auto;width:calc(100% - 16px);max-height:94dvh;border-radius:12px}
 dialog.site-menu{padding:18px 22px max(22px,env(safe-area-inset-bottom));border-left:0}
 .menu-heading{margin-bottom:25px}
 .site-menu h2{font-size:31px;margin-bottom:25px}
 .menu-links a{min-height:76px;padding:16px 0;gap:16px}
 .menu-links strong{font-size:19px}
 .menu-links small{font-size:10px}
 .menu-feature{grid-template-columns:95px 1fr;gap:16px}
 .menu-feature img{width:95px;height:130px}
 .menu-feature strong{font-size:22px}
 .menu-feature>span>span{font-size:9px;gap:8px}
}
@media(max-width:360px){
 .site-header .wordmark-art{width:138px}
 .site-header .brand{gap:6px}
 .site-header .sunnyfy-logo{width:88px}
 .site-header .noble-logo{width:49px}
 .header-actions{gap:4px}
 .campaign-page .hero-image{min-height:530px}
 .campaign-page .hero h1{font-size:58px}
 .home-page .hero-copy{padding-left:18px;padding-right:18px}
 .home-page .edition{gap:10px}
 .campaign-page .mobile-sticky>span{font-size:11px}
 .campaign-page .mobile-sticky small{max-width:110px;line-height:1.4}
 .menu-kicker{font-size:8px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}