/* v3 additions on top of the v1 design: 360 viewer, photos, Instagram, share */
.nav-ig{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(237,231,220,.25);border-radius:50%;transition:border-color .3s,color .3s}
.nav-ig:hover{border-color:var(--accent);color:var(--accent)}
.nav-ig svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.nav-ig .dot{fill:currentColor;stroke:none}

/* logbook photos */
.leg-img{margin:-28px -26px 20px;aspect-ratio:16/9;overflow:hidden;border-radius:16px 16px 0 0;position:relative}
.leg-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,20,36,.55))}
.leg-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--ease)}
.leg:hover .leg-img img{transform:scale(1)}
.leg-year{z-index:2;top:-.55em}
.leg h3{font-size:2rem}

/* 360 viewer */
.look{padding:40px 0 150px}
.look-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px 40px}
.look-head .eyebrow{grid-column:1/-1;margin-bottom:0}
.look-head .sub{margin:0 0 6px;max-width:360px}
.pano{position:relative;margin:0 var(--gutter);height:min(78vh,760px);min-height:420px;border-radius:22px;overflow:hidden;background:var(--bg2);border:1px solid var(--line);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pano-fallback,.pano-gl{position:absolute;inset:0;width:100%;height:100%}
.pano-fallback{object-fit:cover}
.pano-gl{opacity:0;transition:opacity .6s;outline:none}
.pano.ready .pano-gl{opacity:1}
.pano.ready.switching .pano-gl{opacity:0;transition:opacity .3s}
.pano::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(4,10,20,.6))}
.pano-frame i{position:absolute;width:26px;height:26px;border-color:var(--accent);border-style:solid;z-index:3;pointer-events:none}
.pano-frame i:nth-child(1){left:18px;top:18px;border-width:1.5px 0 0 1.5px}
.pano-frame i:nth-child(2){right:18px;top:18px;border-width:1.5px 1.5px 0 0}
.pano-frame i:nth-child(3){left:18px;bottom:18px;border-width:0 0 1.5px 1.5px}
.pano-frame i:nth-child(4){right:18px;bottom:18px;border-width:0 1.5px 1.5px 0}
.pano-hud{position:absolute;z-index:3;top:28px;display:flex;flex-direction:column;gap:2px;pointer-events:none;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.pano-hud-l{left:54px}
.pano-hud-r{right:54px;text-align:right;align-items:flex-end}
.pano-hud b{font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,3vw,2.4rem);text-transform:uppercase;line-height:1;color:var(--ink)}
.pano-hud .pano-hdg{font-variant-numeric:tabular-nums;color:var(--accent)}
.pano-tape{position:absolute;z-index:3;left:50%;bottom:26px;width:min(520px,62%);height:34px;transform:translateX(-50%);overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.pano-tape-in{position:absolute;left:0;top:0;height:100%;display:flex;will-change:transform}
.pano-tape-in span{flex:0 0 60px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink);text-align:center;padding-top:15px;
  background:linear-gradient(var(--ink),var(--ink)) center 0/1px 10px no-repeat,linear-gradient(rgba(237,231,220,.45),rgba(237,231,220,.45)) 0 0/1px 6px no-repeat}
.pano-tape-in span.cardinal{color:var(--accent);font-weight:500}
.pano-tape-mark{position:absolute;left:50%;top:0;width:0;height:0;margin-left:-5px;border:5px solid transparent;border-top-color:var(--accent)}
.pano-hint{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:999px;background:rgba(8,20,36,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;pointer-events:none;transition:opacity .6s;white-space:nowrap}
.pano.touched .pano-hint{opacity:0}
.drag-ico{width:26px;height:16px;position:relative;animation:nudge 1.8s var(--ease) infinite}
.drag-ico::before,.drag-ico::after{content:"";position:absolute;top:50%;width:8px;height:8px;border:solid var(--accent);border-width:0 0 1.5px 1.5px;margin-top:-4px}
.drag-ico::before{left:0;transform:rotate(45deg)}
.drag-ico::after{right:0;transform:rotate(-135deg)}
@keyframes nudge{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
.pano-btns{position:absolute;z-index:4;right:22px;bottom:22px;display:flex;gap:8px}
.pano-btns button{height:38px;min-width:38px;padding:0 12px;border-radius:999px;background:rgba(8,20,36,.65);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(237,231,220,.2);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;transition:border-color .3s,color .3s}
.pano-btns button:hover{border-color:var(--accent);color:var(--accent)}
.pano-btns button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.pano-load{position:absolute;z-index:3;left:0;right:0;top:0;height:2px;opacity:0;transition:opacity .3s;overflow:hidden}
.pano.loading .pano-load{opacity:1}
.pano-load span{display:block;height:100%;width:40%;background:var(--accent);animation:load 1s linear infinite}
@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.pano:fullscreen{margin:0;border-radius:0;height:100vh;border:0}
.pano-tabs{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin:16px var(--gutter) 0}
.pano-tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:8px 8px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel);text-align:left;transition:border-color .3s,transform .5s var(--ease)}
.pano-tab:hover{transform:translateY(-3px)}
.pano-tab[aria-selected="true"]{border-color:var(--accent)}
.pano-tab img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;filter:saturate(.75) brightness(.8);transition:filter .4s}
.pano-tab:hover img,.pano-tab[aria-selected="true"] img{filter:none}
.pano-tab b{font-family:var(--display);font-weight:700;font-size:1.15rem;text-transform:uppercase;line-height:1;padding:0 4px}
.pano-tab small{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 4px}
.pano-tab[aria-selected="true"] small{color:var(--accent)}

/* instagram: two drifting film strips with a profile card on top */
.social{padding:150px 0 60px;overflow:hidden}
.ig-stage{position:relative;padding:20px 0 40px}
.ig-rail{position:relative;width:110vw;margin-left:-5vw;padding:10px 0}
.ig-rail-a{transform:rotate(-2.5deg)}
.ig-rail-b{transform:rotate(1.5deg);margin-top:4px}
.ig-track{display:flex;gap:14px;width:max-content;will-change:transform}
.ig-card{position:relative;display:block;flex:0 0 auto;width:clamp(150px,17vw,250px);aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--bg2);border:1px solid var(--line);transition:transform .6s var(--ease),border-color .3s}
.ig-card:hover{border-color:var(--accent);transform:translateY(-8px) rotate(-1deg)}
.ig-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .5s;filter:saturate(.85) brightness(.9)}
.ig-card:hover img{transform:scale(1.07);filter:none}
.ig-kind{position:absolute;top:10px;right:10px;width:22px;height:22px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.ig-meta{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;padding:34px 12px 12px;background:linear-gradient(transparent,rgba(4,10,20,.85));font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease)}
.ig-card:hover .ig-meta{opacity:1;transform:none}
.ig-meta b{color:var(--accent);font-weight:500}
.ig-profile{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;width:min(340px,82vw);padding:30px 28px 26px;border-radius:22px;text-align:center;
  background:rgba(8,20,36,.78);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(200,162,90,.35);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.ig-ring{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,var(--accent),#ede7dc,var(--accent),#7d6232,var(--accent));animation:spin 10s linear infinite}
.ig-ring svg{width:100%;height:100%;padding:16px;border-radius:50%;background:var(--bg);fill:none;stroke:var(--ink);stroke-width:1.6;animation:spin 10s linear infinite reverse}
.ig-ring .dot{fill:var(--accent);stroke:none}
.ig-profile b{font-family:var(--display);font-weight:900;font-size:clamp(2rem,4vw,2.8rem);text-transform:uppercase;line-height:1}
.ig-bio{color:var(--muted);font-size:.95rem;line-height:1.45}
.ig-follow{margin-top:6px;padding:11px 22px;border-radius:999px;background:var(--accent);color:#081424;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;transition:transform .4s var(--ease)}
.ig-profile:hover .ig-follow{transform:scale(1.05)}

/* share + toast */
button.ig{text-align:left}
.toast{position:fixed;left:50%;bottom:28px;z-index:95;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:var(--accent);color:#081424;padding:11px 20px;border-radius:999px;font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;transition:opacity .3s,transform .5s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1000px){
  .pano-tabs{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:760px){
  .nav-ig{display:none}
  .look-head{grid-template-columns:1fr}
  .pano{height:68vh;min-height:380px;border-radius:16px}
  .pano-hud{top:22px}.pano-hud-l{left:22px}.pano-hud-r{right:22px}
  .pano-hud b{font-size:1.3rem}
  .pano-tape{bottom:70px;width:80%}
  .pano-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px}
  .pano-tab{flex:0 0 42%;scroll-snap-align:start}
  .ig-card{width:clamp(130px,38vw,180px)}
  .ig-profile{position:relative;left:auto;top:auto;transform:none;margin:34px auto 0;padding:22px 20px}
}
@media (prefers-reduced-motion:reduce){.drag-ico{animation:none}}

/* STCW modules under the ticket row */
.q-subs{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.q-subs span{display:inline-flex;align-items:baseline;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;transition:border-color .3s}
.q-subs i{font-style:normal;white-space:nowrap;color:var(--accent);transition:color .3s}
.q-list li:hover .q-subs span{border-color:rgba(8,20,36,.35)}
.q-list li:hover .q-subs i{color:#081424}
@media (max-width:760px){.q-subs{grid-column:1/-1}}

/* sea miles globe */
.miles{padding:150px 0 120px;position:relative}
.miles-grid{display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,1.25fr);gap:40px 60px;align-items:center;padding:0 var(--gutter)}
.miles-text h2{display:flex;flex-direction:column;gap:6px;margin:14px 0 22px}
.miles-count{font-variant-numeric:tabular-nums;color:var(--accent)}
.miles-text h2 small{font-family:var(--mono);font-weight:400;font-size:.8rem;letter-spacing:.2em;color:var(--muted)}
.miles-text .sub{max-width:440px;margin:0 0 26px}
.miles-now{display:flex;gap:14px;align-items:baseline;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 18px;min-height:1.2em}
.miles-date{color:var(--ink)}
.miles-ships{list-style:none;border-top:1px solid var(--line);margin:0 0 22px;padding:0}
.miles-ships button{width:100%;display:grid;grid-template-columns:12px 1fr auto auto;gap:14px;align-items:center;padding:13px 4px;border-bottom:1px solid var(--line);text-align:left;transition:background .3s,padding .4s var(--ease)}
.miles-ships button:hover,.miles-ships button[aria-pressed="true"]{background:rgba(200,162,90,.07);padding-left:12px}
.miles-ships i{width:12px;height:3px;border-radius:2px;background:var(--c);box-shadow:0 0 10px var(--c)}
.s-name{font-weight:600}
.s-yr{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.08em}
.miles-ships b{font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums;min-width:82px;text-align:right}
.miles-replay{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:10px 18px;border:1px solid var(--line);border-radius:999px;transition:border-color .3s,color .3s}
.miles-replay:hover{border-color:var(--accent);color:var(--accent)}
.globe-wrap{position:relative;width:100%;max-width:720px;aspect-ratio:1;justify-self:center;touch-action:pan-y;cursor:grab}
.globe-wrap:active{cursor:grabbing}
.globe{display:block;border-radius:50%;filter:drop-shadow(0 40px 80px rgba(0,0,0,.55))}
.globe-ring{position:absolute;inset:-4%;border-radius:50%;border:1px dashed rgba(200,162,90,.28);pointer-events:none;animation:spin 80s linear infinite}
.globe-off{display:none}
@media (max-width:900px){
  .miles-grid{grid-template-columns:1fr}
  .globe-wrap{max-width:520px;order:-1}
  .miles{padding:110px 0 80px}
}
@media (max-width:1180px){.nav .status{display:none}}

/* maple leaf, kept small and brass */
.leaf{width:.95em;height:.95em;fill:var(--accent);vertical-align:-.12em;margin-right:.55em}
.home-port{display:inline-flex;align-items:center}
/* six nav links need more room than v1's four: hand over to the menu button earlier */
@media (max-width:1020px){
  .nav-links,.nav .status{display:none}
  .menu-btn{display:block}
}

/* home waters gallery */
.home-waters{padding:130px 0 60px}
.hw-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px 40px}
.hw-head .sub{max-width:380px;margin:0 0 6px}
.hw-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;grid-auto-flow:dense;gap:12px;padding:0 var(--gutter)}
.hw-item{position:relative;margin:0;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:var(--bg2);cursor:zoom-in;outline:none}
.hw-wide{grid-column:span 2;grid-row:span 3}
.hw-tall{grid-row:span 3}
.hw-sq{grid-row:span 2}
.hw-item img{width:100%;height:100%;object-fit:cover;transform:scale(1.08) translate3d(var(--px,0),var(--py,0),0);transition:transform 1.2s var(--ease),filter .6s;filter:saturate(.9)}
.hw-item:hover img,.hw-item:focus-visible img{transform:scale(1.02);filter:none}
.hw-item:focus-visible{border-color:var(--accent)}
.hw-item figcaption{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:3px;padding:44px 16px 14px;background:linear-gradient(transparent,rgba(4,10,20,.88));transform:translateY(12px);opacity:0;transition:opacity .45s,transform .6s var(--ease)}
.hw-item:hover figcaption,.hw-item:focus-visible figcaption{opacity:1;transform:none}
.hw-item figcaption b{font-family:var(--display);font-weight:900;font-size:1.35rem;text-transform:uppercase;line-height:1}
.hw-item figcaption span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.hw-box{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:4vh 4vw;background:rgba(4,10,20,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hw-box[hidden]{display:none}
.hw-box img{max-width:100%;max-height:82vh;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.hw-box p{margin:14px 0 0;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-align:center}
.hw-close{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(237,231,220,.3);font-size:1.6rem;line-height:1}
.hw-close:hover{border-color:var(--accent);color:var(--accent)}
/* ship photo under the globe's ship list */
.miles-photo{margin:0 0 22px;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;max-height:0;opacity:0;transition:max-height .7s var(--ease),opacity .5s}
.miles-photo.on{max-height:420px;opacity:1}
.miles-photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:1000px){.hw-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){
  .hw-head{grid-template-columns:1fr}
  .hw-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px;gap:8px}
  .hw-wide{grid-column:span 2;grid-row:span 2}
  .hw-item figcaption{opacity:1;transform:none;padding:30px 10px 10px}
  .hw-item figcaption b{font-size:1rem}
}
/* keep each ship in frame when a tile crops its photo */
.hw-item img[src$="playfair-anchor.jpg"]{object-position:50% 32%}
.hw-item img[src$="pathfinder-run.jpg"]{object-position:50% 42%}
.hw-item img[src$="playfair-harbour.jpg"]{object-position:50% 55%}
.hw-land{grid-column:span 2;grid-row:span 2}
.leg-credit figcaption{position:absolute;right:8px;bottom:6px;z-index:3;font-family:var(--mono);font-size:.55rem;letter-spacing:.06em;color:rgba(237,231,220,.8);text-shadow:0 1px 4px rgba(0,0,0,.8)}
.leg-credit figcaption a{text-decoration:underline;text-underline-offset:2px}
.miles-photo{position:relative}
.miles-photo figcaption{position:absolute;right:8px;bottom:6px;font-family:var(--mono);font-size:.55rem;color:rgba(237,231,220,.8);text-shadow:0 1px 4px rgba(0,0,0,.8)}
@media (max-width:760px){.hw-land{grid-column:span 2;grid-row:span 2}}

/* 360 viewer as a full-screen overlay (opened from the gallery) */
.pano-modal{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;gap:12px;padding:max(16px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));
  background:rgba(4,10,20,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .35s}
.pano-modal[hidden]{display:none}
.pano-modal.on{opacity:1}
.pano-modal .pano{flex:1;height:auto;min-height:0;margin:0;transform:scale(.97);transition:transform .5s var(--ease)}
.pano-modal.on .pano{transform:none}
.pano-modal .pano-tabs{margin:0;flex:0 0 auto;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.pano-modal .pano-tabs::-webkit-scrollbar{display:none}
.pano-modal .pano-tab{flex:0 0 clamp(130px,16vw,190px)}
.pano-close{position:absolute;z-index:6;top:max(26px,calc(env(safe-area-inset-top) + 10px));right:28px;width:46px;height:46px;border-radius:50%;
  background:rgba(8,20,36,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(237,231,220,.35);font-size:1.7rem;line-height:1}
.pano-close:hover{border-color:var(--accent);color:var(--accent)}
.pano-modal .pano-hud-r{right:90px}
.pano-open,.pano-open body{overflow:hidden}
/* 360° badge on gallery tiles */
.hw-360{position:absolute;z-index:3;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  background:rgba(8,20,36,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(200,162,90,.6);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--accent);transition:background .3s,color .3s}
.hw-360::before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;border-left-color:transparent;animation:spin 2.4s linear infinite}
.hw-item.is-360:hover .hw-360{background:var(--accent);color:#081424}
.stories .hw-360{top:auto;bottom:118px;left:22px;padding:11px 18px;font-size:.78rem}
@media (max-width:760px){.pano-modal{padding-left:8px;padding-right:8px}.pano-close{right:18px}.pano-modal .pano-hud-r{right:76px}}
@media (orientation:landscape) and (max-height:520px){.pano-modal .pano-tabs{display:none}.pano-modal{padding:8px}}