/* King & Pauper crown landing page — consolidated production preview styling.
   High-definition photo/video use separate sources; website copy and buttons are DOM text. */
:root{--crown-shift:0px;--champagne:#d7ba83}
.dev-ribbon{display:none!important}
.page-home .topbar{position:absolute;top:0;left:0;right:0;background:transparent;z-index:25;box-shadow:none}
.crown-home{
 position:relative;isolation:isolate;overflow:hidden;
 min-height:665px;height:100svh;max-height:1160px;
 background:radial-gradient(ellipse 78% 55% at 50% 25%,#392d20 0%,#14110f 57%,#060504 100%);color:#f7eddc;border-bottom:1px solid #a9824a6e
}
.crown-photo{
 position:absolute;inset:0;z-index:0;pointer-events:none;
 background-color:#050404;
 background-image:url('./assets/crown_mountain_gold_4k_v10.webp');
 background-repeat:no-repeat;background-size:cover;background-position:center center;
 transform:none;filter:none;
 -webkit-mask-image:none;mask-image:none
}
.crown-film{
 position:absolute;inset:0;left:0;top:0;width:100%;height:100%;
 aspect-ratio:auto;object-fit:cover;object-position:center center;z-index:1;
 transform:none;pointer-events:none;opacity:0;
 -webkit-mask-image:none;mask-image:none
}
.crown-home.video-playing .crown-film{opacity:1}
.crown-home:after{
 content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 background:linear-gradient(to bottom,rgba(0,0,0,.12) 0%,transparent 27%,transparent 53%,rgba(0,0,0,.20) 72%,#050404 100%)
}
.crown-grain{position:absolute;inset:0;z-index:3;opacity:.11;pointer-events:none;
 background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E")
}
.crown-copy{
 position:absolute;z-index:10;left:4%;right:4%;bottom:6%;max-width:900px;margin:0 auto;
 display:flex;align-items:center;flex-direction:column;text-align:center;color:#f8e9d0
}
.crown-copy h1{
 font:500 clamp(29px,3.9vw,55px)/1.09 var(--display);
 letter-spacing:.09em;text-transform:uppercase;margin:0 0 18px;
 text-shadow:0 3px 22px #000b
}
.crown-copy h1 span{color:#f8e9d0}
.crown-copy p{
 font:500 clamp(11px,1.3vw,16px)/1.75 var(--sans);
 letter-spacing:.20em;text-transform:uppercase;color:#ede0d0;margin:0 0 24px;
 text-shadow:0 2px 12px #000b
}
.crown-shop-btn,.crown-shop-btn:hover,.crown-shop-btn:focus-visible{
 position:relative;z-index:30;display:inline-flex;align-items:center;justify-content:space-between;
 touch-action:manipulation;pointer-events:auto;-webkit-tap-highlight-color:rgba(232,196,133,.45);
 background:linear-gradient(to bottom,#dac28c 0%,#d1b57c 45%,#bd9f6a 100%);
 border:1px solid #dfc68e;border-radius:5px;box-shadow:0 2px 12px #0009,inset 0 1px #fff4;
 color:#19140c;min-height:57px;width:min(455px,95%);padding:0 27px;
 font:700 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;text-shadow:none
}
.crown-shop-btn:active{filter:brightness(.94)}
.crown-trust{display:flex;justify-content:center;align-items:center;margin-top:24px;flex-wrap:wrap;
 color:#c5bcad;font:500 9px var(--sans);letter-spacing:.06em}
.crown-trust span{padding:4px 13px;border-right:1px solid #c5ad8680}
.crown-trust span:last-child{border:0}
.collection{scroll-margin-top:92px}
@media(max-width:670px){
 .page-home .topbar{height:74px;padding:0 4%}
 .crown-home{min-height:665px;height:100svh;max-height:1000px}
 .crown-copy{left:4%;right:4%;bottom:6%}
 .crown-copy h1{font-size:clamp(34px,8.7vw,48px);line-height:1.12;white-space:nowrap;letter-spacing:.073em;margin-bottom:16px}
 .crown-copy p{font-size:10.5px;line-height:1.75;letter-spacing:.15em;margin-bottom:20px}
 .crown-shop-btn,.crown-shop-btn:hover,.crown-shop-btn:focus-visible{width:min(323px,84vw);min-height:55px;padding:0 16px;font-size:10px;letter-spacing:.048em}
 .crown-trust{font-size:8px;letter-spacing:.015em;margin-top:32px;flex-wrap:nowrap}
 .crown-trust span{padding:3px 7px;white-space:nowrap}
 .nav-panel{top:74px}
}
@media(prefers-reduced-motion:reduce){
 .crown-film{display:none!important}.crown-photo{transform:none!important}
}

/* The original approved mockup's editorial masthead is champagne gold, not white. */
.page-home .brand strong{color:#d6b777;letter-spacing:.065em;font-weight:500;text-shadow:0 2px 14px #0009}
.page-home .brand strong em{color:#e6c78c}
.page-home .brand-crown{display:none}
.page-home .brand small{display:none}
.page-home .topbar{background:transparent}

/* Final reference geometry: compact crown and a balanced editorial footer. */
@media(max-width:670px){
  .crown-copy{bottom:5.6%}
  .crown-copy h1{font-weight:500}
  .crown-copy p{font-weight:600}
  .crown-trust{margin-top:58px}
}

/* Authentic mountain-crest gold fragments, aligned over both still art and flowing video. */
.crown-mountain-flakes{position:absolute;inset:0;z-index:3;pointer-events:none;
 background:transparent url('./assets/mountain_ridge_gold_flakes_v12.webp') center center / cover no-repeat;
 opacity:1;transform:none;will-change:auto}
.crown-copy{z-index:10}


/* Readability fix: keep TWO WORLDS visible against the bright moving gold river.
   Restrict the vignette to the lettering, not the mountains/crown/river animation. */
.crown-copy h1{
  position:relative;
  isolation:isolate;
  color:#fff0d8;
  text-shadow:0 2px 5px rgba(0,0,0,.94),0 3px 16px #000,0 0 25px #000;
}
.crown-copy h1 span{color:#fff0d8}
.crown-copy{isolation:isolate}
.crown-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-55px;
  left:-22px;
  right:-22px;
  height:175px;
  pointer-events:none;
  background:radial-gradient(ellipse 80% 67% at 50% 42%,
    rgba(0,0,0,.98) 0%,
    rgba(0,0,0,.84) 45%,
    rgba(0,0,0,.2) 75%,
    transparent 100%);
}

/* Final reference-aligned black fade directly beneath the TWO WORLDS headline. */
.crown-copy h1{
  background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.97) 15%,rgba(0,0,0,.99) 85%,transparent 100%);
  padding:6px 15px;
  box-shadow:0 0 20px 10px rgba(0,0,0,.45);
  border-radius:1px;
}