/* Shared finishing layer: quiet contrast, considered spacing, and useful motion. */
:root { --wine-dark: #21090e; --oxblood: #410d18; --gold: #bf9b60; --gold-light: #e7d4ae; --ivory: #f7f3ec; --ink: #302b27; --muted: #6a625b; --header-height: 100px; --dock-height: 62px; }
html { scroll-padding-top: calc(var(--header-height) + var(--dock-height) + 24px); }
body { margin: 0; padding-top: calc(var(--header-height) + var(--dock-height)); text-rendering: optimizeLegibility; }
::selection { color: #fff9ef; background: #652535; }
/* Keep both navigation rows flush to the viewport, including on mobile. */
.site-header { position: fixed; inset: 0 0 auto; margin: 0; z-index: 20; background: #21090e; border-bottom: 1px solid #d4b77e28; }
.header-inner { min-height: 98px; padding-bottom: 0; }
.wordmark { font-size: 25px; letter-spacing: -.25px; }
.wordmark-name > span { font-size: 9px; letter-spacing: 3.4px; }
.site-header nav a { font-size: 12px; }
.header-cta { min-height: 44px; font-size: 11px; border-color: #d5b47b70; transition: background .2s ease, border-color .2s ease; }
.header-cta:hover { background: #c5b58e15; border-color: #d5b47b; }
.service-dock { position: fixed; inset: var(--header-height) 0 auto; margin: 0; background: #260b12; box-shadow: 0 6px 20px #21090e14; }
.service-links { gap: 30px; }
.service-links a { font-size: 12px; }
.gold-break { height: 1px; opacity: .8; }
.hero { background: radial-gradient(ellipse at 20% 0%,#6d2b3540,transparent 55%),linear-gradient(115deg,#21090e,#43131f 52%,#240a11); padding-top: 54px; }
.hero .eyebrow { font-size: 10px; letter-spacing: 2.5px; }
.hero-note { font-size: 15px; line-height: 1.8; max-width: 620px; margin-inline: auto; }
.hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 25px; margin-top: 28px; }
.hero-actions .text-link { color: var(--gold-light); font-size: 12px; }
.share-story { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; border: 0; border-bottom: 1px solid #d4b77e6b; padding: 8px 0; background: transparent; color: inherit; font-size: 12px; }
.share-story::after { content: '↗'; font-size: 17px; }
.hero-actions .share-story { color: #f3e7d7; }
.hero-portrait { margin-top: 58px; }
.hero-story-link { font-size: 12px; }
.eyebrow { font-size: 11px; letter-spacing: 2.1px; }
.memory-photo { border-width: 3px; border-image: none; border-color: #c6a56c; box-shadow: 0 16px 48px #21090e16; background: #21090e; }
.memory-photo img { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
@media (hover: hover) { .memory-photo:hover img { transform: scale(1.025); } }
.memory-photo:focus-visible { outline-width: 3px; outline-offset: 7px; }
.photo-seal { filter: drop-shadow(0 4px 8px #21090e30); }
figcaption, .hero-portrait figcaption { font-size: 12px; line-height: 1.7; }
.hero-portrait figcaption span:last-child { font-size: 10px; }
.story-copy > p:not(.eyebrow):not(.lead), .purpose-copy > p:nth-child(2) { font-size: 15px; }
.bench-copy > p:last-child { font-size: 14px; }
.text-link { font-size: 12px; }
.purpose-section { background: #172a25; }
.pillar-gateway { gap: 28px; }
.pillar-gateway > a { border-top-color: #b49360; padding: 26px 28px 24px 0; transition: background .2s ease; }
.pillar-gateway > a:hover { background: #b4936009; }
.pillar-gateway strong { font-size: 32px; }
.pillar-gateway a > span:not(.gateway-number):not(.gateway-arrow) { font-size: 14px; line-height: 1.9; }
.gateway-number { font-size: 10px; }
.program-directory-link, .program-directory-link .text-link { font-size: 13px; }
.footer-top { padding-block: 56px; }
.footer-links, .footer-back { font-size: 12px; }
.footer-top > p { font-size: 13px; }
.footer-bottom { font-size: 11px; }
.page-lead { font-size: 16px; }
.page-status { font-size: 10px; padding: 7px 14px; border-color: #c7a66e60; }
.page-breadcrumbs { font-size: 12px; }
.page-body p, .area-article p { font-size: 15px; }
.page-outline { top: calc(var(--header-height) + var(--dock-height) + 24px); }
.collection-preview p { font-size: 14px; }
.page-next { gap: 18px 35px; }
.page-next .share-story { color: var(--oxblood); }
.reading-progress { position: fixed; inset: 0 auto auto 0; width: 100%; height: 2px; background: linear-gradient(90deg,#a67b45,#efd9ac); transform: scaleX(0); transform-origin: left; z-index: 100; pointer-events: none; }
body.photo-open { overflow: hidden; }
dialog.photo-dialog { border: 1px solid #b99861; box-shadow: 0 32px 100px #0008; }
.photo-stage { background: #1d1013; touch-action: pan-y pinch-zoom; }
#photo-display { border: 1px solid #b99861; border-image: none; box-shadow: none; max-height: 67dvh; }
#photo-description { font-size: 13px; color: #e1d7ca; max-width: 720px; }
#photo-count { font-size: 12px; }
.photo-controls button { border-color: #b9986170; transition: background .2s ease; }
.photo-controls button:hover { background: #b998611c; }
.store-page .page-hero { padding-block: 62px 64px; }
.store-hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: clamp(40px,7vw,100px); }
.store-page .hero-intro { text-align: left; }
.store-page .page-emblem { margin-inline: 0; }
.store-page .page-emblem .royal-logo { width: 74px; margin-left: 0; }
.store-page .hero .eyebrow { margin-top: 25px; }
.store-page h1 { font-size: clamp(47px,5.4vw,76px); line-height: 1.02; letter-spacing: -1.8px; max-width: 650px; }
.store-page .page-lead { max-width: 480px; margin-left: 0; }
.store-page .hero-actions { justify-content: flex-start; margin-top: 26px; }
.store-preview { min-width: 0; }
.store-preview .memory-photo { aspect-ratio: 4 / 5; padding: 20px; background: #eae3d9; border: 1px solid #c6a56c; box-shadow: 0 24px 75px #0003; }
.store-preview .memory-photo img { object-fit: contain; height: 100%; width: 100%; }
.store-preview figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 15px; color: #e0cdb7; }
.store-preview figcaption span:last-child { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.store-page .store-body { max-width: 1180px; }
.store-intro { max-width: 720px; }
.collection-preview { gap: 38px; }
.collection-preview section { padding: 28px; border: 1px solid #c9b693; background: #fffaf247; }
.collection-preview h3 { font-size: 35px; }
.collection-status { padding: 46px; border: 1px solid #c9b693; background: #eee7da66; margin-bottom: 25px; }
.collection-status .eyebrow { margin-bottom: 20px; }
.collection-status > p:last-child { max-width: 620px; }
@media (min-width: 1600px) { .header-inner { min-height: 104px; padding-bottom: 0; } }
@media (max-width: 1000px) { .site-header nav { gap: 22px; } .store-hero-grid { gap: 40px; } .footer-top { flex-wrap: wrap; } }
@media (max-width: 800px) { .header-inner { min-height: 80px; } .wordmark { font-size: 23px; } .store-page .page-hero { padding-block: 42px 48px; } .store-hero-grid { grid-template-columns: 1fr; gap: 36px; } .store-preview { max-width: 480px; width: 100%; margin-inline: auto; } .store-page h1 { max-width: 620px; } .store-page .page-lead { max-width: 600px; } .page-outline { position: static; } }
@media (max-width: 650px) { .header-inner { min-height: 76px; gap: 10px; } .wordmark { font-size: 21px; } .wordmark-name > span { font-size: 7px; letter-spacing: 2.8px; } .header-cta { padding-inline: 11px; gap: 10px; font-size: 10px; min-height: 40px; } .hero { padding-top: 38px; } .hero .eyebrow { font-size: 9px; } .hero-note { font-size: 14px; } .hero-actions { gap: 10px 22px; margin-top: 24px; } .hero-actions .text-link, .share-story { font-size: 12px; } .hero-portrait { margin-top: 42px; } figcaption, .hero-portrait figcaption { font-size: 11px; } .hero-portrait figcaption span:last-child { font-size: 8px; } .story-copy > p:not(.eyebrow):not(.lead), .purpose-copy > p:nth-child(2) { font-size: 14px; } .pillar-gateway strong { font-size: 30px; } .pillar-gateway > a { padding-block: 20px; } .pillar-gateway a > span:not(.gateway-number):not(.gateway-arrow) { font-size: 13px; } .footer-top { padding-block: 38px; } .footer-bottom { flex-direction: column; gap: 7px; font-size: 10px; } .store-page h1 { font-size: clamp(43px,12vw,60px); letter-spacing: -1.2px; } .store-page .page-lead { font-size: 14px; } .store-preview .memory-photo { padding: 14px; } .collection-preview section { padding: 23px; } .collection-status { padding: 28px 24px; } #photo-description { font-size: 12px; } #photo-display { max-height: 58dvh; } .photo-dialog-caption { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
@media print { body { padding-top: 0; } .site-header, .service-dock, .reading-progress { position: static; } .hero-actions, .share-story, .reading-progress { display: none !important; } }