@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--ease-out:cubic-bezier(0.23, 1, 0.32, 1);--ink:#14231f;--night:#101916;--paper:#ded4bb;--gold:#d4af66;--serif:'IM Fell English',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--night);color:var(--paper);font-family:var(--sans);font-size:16px}a{color:inherit;text-decoration:none}button{font:inherit}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #fff1af;outline-offset:6px}img{display:block;width:100%;object-fit:cover}.skip{position:fixed;top:-100px;left:15px;background:var(--paper);color:var(--ink);padding:12px;z-index:10}.skip:focus{top:15px}header{height:94px;padding:0 5.5%;display:flex;align-items:center;gap:40px;border-bottom:1px solid #d4af6630;background:#101916}header .brand{width:111px;flex-shrink:0}.brand img,footer img,.hero h1 img{filter:invert(90%) sepia(20%) saturate(560%) hue-rotate(351deg)}nav{display:flex;gap:35px;margin:auto;font-size:13px}.header-cta{font-size:12px;text-transform:uppercase;letter-spacing:1.4px;border-bottom:1px solid var(--gold);padding:10px 0;color:var(--gold)}.header-cta span{margin-left:18px}.hero{min-height:750px;height:calc(100svh - 94px);max-height:1050px;position:relative;display:flex;align-items:center;padding:80px 8%;overflow:hidden}.hero-photo{position:absolute;inset:0;background:linear-gradient(90deg,#0b1616 3%,#0b1616e0 24%,#0b161633 67%),linear-gradient(0deg,#0b1616 0%,transparent 25%),url('assets/skullrock-hero.webp') 68% 40%/cover}.hero-content{position:relative;max-width:580px}.eyebrow{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:2.5px;line-height:1.8;color:var(--gold);margin:0 0 28px}.beware{width:105px;filter:invert(70%) sepia(22%) saturate(895%) hue-rotate(356deg);margin:45px 0 10px 12px;transform:rotate(-7deg)}h1{margin:0;width:440px;max-width:100%}.hero-sub{font-family:var(--serif);font-size:29px;line-height:1.35;margin:29px 0 34px}.hero-sub em{color:#c7bea8}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:45px;min-height:52px;padding:16px 24px;font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;border:1px solid var(--gold)}.gold{background:var(--gold);color:#14201d}.button:hover{background:#e8c887}.text-link{display:inline-flex;gap:25px;align-items:center;border:0;background:none;color:inherit;font-size:12px;cursor:pointer;border-bottom:1px solid #d4af6655;padding:12px 0}.hero-content>.text-link{display:flex;width:max-content;margin-top:15px}.hero-bottom{position:absolute;bottom:32px;left:8%;right:6%;display:flex;align-items:center;justify-content:space-between;font-size:12px}.hero-bottom b{margin-left:18px;font-weight:400;color:var(--gold)}.small-caps{font-size:9px;letter-spacing:2px;text-transform:uppercase}.hero-bottom>a{border:1px solid #d4af6655;border-radius:50%;padding:13px 18px}.coordinates{display:flex;justify-content:space-between;align-items:center;padding:22px 6%;font-size:9px;letter-spacing:2px;background:#1a2a24;color:#b9bca8;border-top:1px solid #d4af662c;border-bottom:1px solid #d4af662c}.section{padding:105px 8%;scroll-margin-top:0}h2{font-family:var(--serif);font-size:clamp(40px,4.5vw,65px);font-weight:400;line-height:1.04;margin:0 0 32px;letter-spacing:-1.8px}h2 em{font-weight:400;color:var(--gold)}.journal{background:radial-gradient(ellipse at 20% 40%,#ece2cc66,transparent 60%),repeating-linear-gradient(4deg,#00000002 0 1px,transparent 1px 5px),var(--paper);color:var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center}.journal .eyebrow{color:#66512a}.journal h2 em{color:#66512a}.legend-copy>p:not(.eyebrow){max-width:435px;line-height:1.8;color:#425047;font-size:14px}.legend-copy>.lead{font-family:var(--serif);font-size:25px!important;color:var(--ink)!important;line-height:1.3!important}.journal-note{border-top:1px solid #14231f3b;margin-top:30px;padding-top:20px;display:flex;gap:20px;align-items:center}.journal-note>span{font-size:33px;color:#66512a}.journal-note p{font-family:var(--serif);font-size:21px;margin:0}.journal-note small{display:block;font-family:var(--sans);font-size:9px;text-transform:uppercase;letter-spacing:1.2px;margin-top:10px;color:#536057}.queen{margin:0;position:relative;transform:rotate(2deg);background:#e9dfc9;padding:12px 12px 0;box-shadow:4px 10px 25px #14231f26}.queen img{aspect-ratio:4/5;object-position:44%}.queen figcaption{padding:18px 8px;font-size:8px;letter-spacing:1.6px}.stamp{position:absolute;right:-25px;bottom:48px;border:2px solid #a6915e;color:#cbb985;border-radius:50%;width:100px;height:100px;display:grid;place-content:center;text-align:center;font-size:11px;letter-spacing:1px;transform:rotate(-15deg);background:#152d27e8}.witness{background:#10231f}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px;gap:30px}.section-heading h2{margin-bottom:0}.section-heading>p{font-size:13px;line-height:1.8;color:#b4bcab}.gallery{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:270px 270px;gap:20px}.photo{padding:0;border:0;position:relative;cursor:pointer;overflow:hidden;color:white;background:#101916;text-align:left}.photo-tall{grid-row:span 2}.photo img{height:100%;transition:transform .4s}.photo:hover img{transform:scale(1.03)}.photo span{position:absolute;bottom:0;left:0;right:0;padding:50px 24px 22px;background:linear-gradient(transparent,#071510e6);font-family:var(--serif);font-size:24px;display:flex;justify-content:space-between}.photo b{font-family:var(--sans);font-weight:400}.film{margin-top:30px;border-bottom:1px solid #d4af6644}.film summary{cursor:pointer;padding:20px 0;list-style:none;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;display:flex;justify-content:space-between}.film summary::-webkit-details-marker{display:none}.film video{width:100%;max-height:700px;background:black}.visit{display:grid;grid-template-columns:1fr 1fr;gap:10%;background:repeating-linear-gradient(45deg,#d4af6603 0 1px,transparent 1px 30px),#182a24}.visit-heading>p:not(.eyebrow){font-size:14px;line-height:1.8;color:#b4bcab}.compass{font-family:Georgia,serif;font-size:125px;width:180px;height:180px;line-height:1;text-align:center;position:relative;opacity:.4;margin-top:40px;color:var(--gold)}.compass span{display:block;font-family:var(--sans);font-size:9px}.visit-card{border:1px solid #d4af6666;padding:42px;background:#101d17;align-self:center;box-shadow:10px 10px 0 #d4af6608}.visit-card h3{font-family:var(--serif);font-size:32px;font-weight:400;margin:0 0 10px}.address{font-size:14px;color:#b8bfad}.hours{display:grid;gap:9px;border-top:1px solid #d4af6633;border-bottom:1px solid #d4af6633;margin:30px 0;padding:25px 0}.hours span{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--gold);margin-bottom:4px}.hours strong{font-size:17px;font-weight:500}.hours b{font-size:14px;font-weight:400;color:#b8bfad}.visit-card .button{width:100%}.copy{margin-top:10px}.copy-status{font-size:12px;color:var(--gold);min-height:16px;margin:5px 0}.visit-footnote{font-size:11px;line-height:1.7;color:#b8bfad;margin:15px 0 0}.shops{background:var(--paper);color:var(--ink)}.shops .eyebrow,.shops h2 em{color:#66512a}.shops .section-heading>p{color:#425047}.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.shop-card{border:1px solid #14231f44;padding:40px;background:#ede4cd44}.shop-number{font-size:9px;letter-spacing:2px;color:#66512a}.shop-card h3{font-family:var(--serif);font-size:38px;font-weight:400;margin:30px 0 15px}.shop-card p{font-size:14px;color:#425047}.coming{display:inline-block;border:1px solid #14231f44;padding:11px 14px;margin-top:15px;font-size:10px;text-transform:uppercase;letter-spacing:1.5px}.last-warning{text-align:center;padding:75px 20px;background:#10231f}.last-warning p{font-family:var(--serif);font-size:40px;line-height:1.2;margin:0 0 15px}.last-warning em{color:var(--gold)}footer{display:flex;justify-content:space-between;align-items:center;padding:35px 6%;gap:25px;border-top:1px solid #d4af6633}footer img{width:90px}footer p,footer>a:last-child{font-size:10px;color:#b8bfad}dialog{border:1px solid var(--gold);padding:18px;background:var(--night);color:var(--paper);max-width:min(95vw,1000px);max-height:95svh}dialog::backdrop{background:#000d}dialog img{max-height:78svh;object-fit:contain}dialog p{font-family:var(--serif);font-size:20px;margin:16px 0 0}.close{position:absolute;top:25px;right:25px;background:#10231f;color:white;border:1px solid var(--gold);width:44px;height:44px;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:1500px){.section{padding-left:max(8%,calc((100vw - 1260px)/2));padding-right:max(8%,calc((100vw - 1260px)/2))}}@media(max-width:800px){header{height:78px;gap:20px;padding:0 5%}header .brand{width:85px}nav{gap:20px;margin-left:auto;margin-right:0}nav a{font-size:12px}.header-cta{display:none}.hero{min-height:740px;height:calc(100svh - 78px);padding:70px 7% 120px}.hero-photo{background:linear-gradient(90deg,#0b1616d9,#0b161655),linear-gradient(0deg,#0b1616 0%,transparent 60%),url('assets/skullrock-hero.webp') 40% 35%/cover}.hero-content{max-width:460px}.hero h1{width:350px}.hero .eyebrow{font-size:9px;max-width:280px}.beware{margin-top:30px;width:90px}.hero-sub{font-size:26px}.hero-bottom{left:7%;right:7%;font-size:11px}.small-caps{display:none}.coordinates{justify-content:center;font-size:8px;padding:20px;text-align:center}.coordinates span:not(:nth-child(3)){display:none}.section{padding:65px 7%}.journal,.visit{grid-template-columns:1fr;gap:45px}.legend-copy>p:not(.eyebrow){max-width:none}.queen{width:90%;margin:0 auto}.queen img{aspect-ratio:1/1}.stamp{right:-20px}.section-heading{display:block}.section-heading>p{margin-top:24px}.gallery{grid-template-rows:200px 200px;gap:12px}.photo span{font-size:20px;padding:35px 15px 16px}.compass{display:none}.visit-card{padding:30px}.shop-grid{gap:18px}.shop-card{padding:25px}.shop-card h3{font-size:30px}.last-warning p{font-size:32px}footer{flex-wrap:wrap}footer p{max-width:150px;line-height:1.8}}@media(max-width:480px){nav{gap:16px}.gallery{display:flex;flex-direction:column}.photo{height:300px}.photo-tall{height:440px}.shop-grid{grid-template-columns:1fr}.visit-card h3{font-size:28px}.hero h1{width:300px}.hero-sub{font-size:25px}footer>a:last-child{width:100%;text-align:center;margin-top:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* Faded sea charts sit below the section content. */
.beware{filter:none}
.journal,.visit{position:relative;isolation:isolate;overflow:hidden}
.journal::before,.visit::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/treasure-map.svg') center/cover no-repeat}
.journal::before{opacity:.19}
.visit::before{opacity:.18;filter:sepia(1) brightness(1.8)}
@media(max-width:800px){.journal::before,.visit::before{background-size:auto 100%;background-position:58% center}.journal::before{opacity:.14}.visit::before{opacity:.14}}

.hero-bottom>a{border:0;border-radius:0;width:64px;height:64px;padding:0;display:grid;place-items:center}
.hero-bottom .skeleton-pointer{width:62px;height:42px;object-fit:contain;transform:rotate(90deg)}
.hero-bottom>a:hover .skeleton-pointer{filter:brightness(1.2)}

.graphic-button{display:block;width:240px;max-width:100%;transform-origin:center;transition:transform 180ms ease}
.graphic-button img{width:100%;height:auto;object-fit:contain}
@media(hover:hover){.graphic-button:hover{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.graphic-button:hover{transform:none}}

.hero-photo{transform-origin:center}

/* The brush mask reveals the existing letter artwork, without drawing outlines. */
.beware-brush{transform:translateX(215px)}
.hero h1 img{--wave-rise:8px;--wave-drift:4px;--wave-roll:2deg;transform-origin:50% 60%;animation:logo-wave 27s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:paused}
.hero[data-wave-running="true"] h1 img{animation-play-state:running}
/* Unequal crests and troughs create a long, irregular tide cycle. */
@keyframes logo-wave{
0%,100%{transform:translate(0,0) rotate(0)}
7%{transform:translate(calc(var(--wave-drift)*-.4),calc(var(--wave-rise)*-.45)) rotate(calc(var(--wave-roll)*-.35))}
16%{transform:translate(var(--wave-drift),var(--wave-rise)) rotate(var(--wave-roll))}
24%{transform:translate(calc(var(--wave-drift)*.3),calc(var(--wave-rise)*.2)) rotate(calc(var(--wave-roll)*.15))}
35%{transform:translate(calc(var(--wave-drift)*-.8),calc(var(--wave-rise)*-.85)) rotate(calc(var(--wave-roll)*-.9))}
43%{transform:translate(calc(var(--wave-drift)*-.3),calc(var(--wave-rise)*-.35)) rotate(calc(var(--wave-roll)*-.2))}
49%{transform:translate(calc(var(--wave-drift)*.6),calc(var(--wave-rise)*.5)) rotate(calc(var(--wave-roll)*.55))}
57%{transform:translate(calc(var(--wave-drift)*.1),calc(var(--wave-rise)*-.1)) rotate(calc(var(--wave-roll)*-.1))}
70%{transform:translate(calc(var(--wave-drift)*-1),calc(var(--wave-rise)*-1)) rotate(calc(var(--wave-roll)*-1))}
82%{transform:translate(calc(var(--wave-drift)*.8),calc(var(--wave-rise)*.75)) rotate(calc(var(--wave-roll)*.8))}
92%{transform:translate(calc(var(--wave-drift)*.15),calc(var(--wave-rise)*.15)) rotate(calc(var(--wave-roll)*.1))}
}
.motion-toggle{position:absolute;z-index:1;top:22px;right:6%;border:1px solid #d4af6655;background:#101916b3;color:var(--paper);padding:10px 14px;font-size:10px;letter-spacing:1px;cursor:pointer}
.motion-toggle[hidden]{display:none}
@media(max-width:800px){.hero h1 img{--wave-rise:5px;--wave-drift:2px;--wave-roll:1.5deg}}
@media(prefers-reduced-motion:reduce){.hero h1 img{animation:none!important;transform:none}.motion-toggle{display:none}}
svg.beware{display:block;height:auto}

/* A single shared WebGL canvas; coins never intercept journal interactions. */
.coin-trail{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.coin-trail[hidden]{display:none}
.coin-trail canvas{display:block;width:100%;height:100%}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.coin-trail{display:none!important}}

/* Lightning begins at the hero's top edge, directly below navigation. */
.hero-lightning{position:absolute;top:0;left:65%;width:50vw;height:50svh;object-fit:contain;object-position:center top;transform:translateX(-50%);opacity:0;pointer-events:none;z-index:0}
@media(prefers-reduced-motion:reduce){.hero-lightning{display:none}}

.hero-lightning{mix-blend-mode:screen}

.hero-lightning{filter:drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 10px #d3eaff) drop-shadow(0 0 24px #81b8ed)}

/* Navigation floats over the full-height hero. */
header{position:absolute;inset:0 0 auto;width:100%;z-index:5;background:transparent;border:0;display:grid;grid-template-columns:1fr auto 1fr}
header nav{grid-column:2;margin:0}
header .header-cta{grid-column:3;justify-self:end}
.hero{height:100svh}
.motion-toggle{top:110px}
.hero-lightning{top:0}
@media(max-width:800px){header{grid-template-columns:1fr}header nav{grid-column:1;justify-self:center;margin:0}.hero{height:100svh;padding-top:110px}.motion-toggle{top:94px}.hero-lightning{top:0}}

/* Supplied Skull Rock sea chart behind the captain's journal. */
.journal::before{background-image:url('assets/skull-rock-map.webp');background-position:center;background-size:cover;opacity:.3}
@media(max-width:800px){.journal::before{background-size:auto 100%;background-position:center;opacity:.22}}

/* Keep the full captain's sketch visible at every screen size. */
.queen img{aspect-ratio:auto;height:auto;object-fit:contain}

/* Let the torn parchment illustration sit directly on the sea chart. */
.queen{background:transparent;padding:0;box-shadow:none}

/* Dark brown sampled from the sketch; shadow follows the torn alpha edges. */
.queen img{filter:drop-shadow(0 14px 18px rgb(26 9 3 / 42%))}
@media(max-width:800px){.queen img{filter:drop-shadow(0 10px 13px rgb(26 9 3 / 42%))}}

/* Buoyant parchment: irregular drift and a restrained bend through the artwork. */
.parchment-filter{position:absolute;overflow:hidden;pointer-events:none}
.queen{--parchment-rise:14px;transform-origin:52% 55%;animation:parchment-drift 29s ease-in-out infinite;animation-play-state:paused;filter:drop-shadow(0 14px 18px rgb(26 9 3 / 42%))}
.queen img{filter:url('#parchment-water')}
.journal[data-parchment-running="true"] .queen{animation-play-state:running}
@keyframes parchment-drift{
  0%,100%{transform:perspective(900px) translate(0,0) rotate(2deg) rotateX(0deg);filter:drop-shadow(0 14px 18px rgb(26 9 3 / 42%))}
  9%{transform:perspective(900px) translate(5px,calc(-.4 * var(--parchment-rise))) rotate(.8deg) rotateX(1deg);filter:drop-shadow(-2px 18px 20px rgb(26 9 3 / 38%))}
  21%{transform:perspective(900px) translate(-3px,calc(-1 * var(--parchment-rise))) rotate(-.3deg) rotateX(2.5deg);filter:drop-shadow(-5px 24px 25px rgb(26 9 3 / 32%))}
  28%{transform:perspective(900px) translate(-7px,3px) rotate(3.8deg) rotateX(-1.2deg);filter:drop-shadow(4px 11px 15px rgb(26 9 3 / 46%))}
  39%{transform:perspective(900px) translate(2px,calc(-.2 * var(--parchment-rise))) rotate(2.4deg) rotateX(.5deg);filter:drop-shadow(1px 16px 19px rgb(26 9 3 / 40%))}
  53%{transform:perspective(900px) translate(7px,calc(-.8 * var(--parchment-rise))) rotate(.2deg) rotateX(2deg);filter:drop-shadow(-4px 22px 23px rgb(26 9 3 / 34%))}
  61%{transform:perspective(900px) translate(3px,4px) rotate(4.1deg) rotateX(-1.5deg);filter:drop-shadow(4px 10px 14px rgb(26 9 3 / 47%))}
  74%{transform:perspective(900px) translate(-6px,calc(-.55 * var(--parchment-rise))) rotate(1.2deg) rotateX(1.5deg);filter:drop-shadow(-3px 20px 22px rgb(26 9 3 / 36%))}
  88%{transform:perspective(900px) translate(-2px,calc(-1.15 * var(--parchment-rise))) rotate(-.5deg) rotateX(2.8deg);filter:drop-shadow(-5px 25px 26px rgb(26 9 3 / 31%))}
  94%{transform:perspective(900px) translate(4px,2px) rotate(3deg) rotateX(-.5deg);filter:drop-shadow(2px 12px 16px rgb(26 9 3 / 44%))}
}
@media(max-width:800px){.queen{--parchment-rise:8px}}
@media(prefers-reduced-motion:reduce){.queen{animation:none;transform:rotate(2deg)}.queen img{filter:none}}