/* Touch + motion layer (phones and tablets). Loaded after style.css / v3.css. */

/* ---------- helm dock ---------- */
.dock{display:none}
.touch .dock{position:fixed;z-index:60;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:2px;padding:6px;border-radius:999px;
  background:rgba(8,20,36,.72);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(200,162,90,.28);
  box-shadow:0 18px 50px rgba(0,0,0,.5);transition:transform .55s var(--ease),opacity .4s}
.touch .dock.away{transform:translate(-50%,140%);opacity:0}
.dock a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:58px;padding:7px 8px 6px;border-radius:999px;color:var(--muted);transition:color .3s}
.dock a.on{color:#081424}
.dock svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dock span{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase}
.dock-ind{position:absolute;z-index:0;left:0;top:6px;bottom:6px;border-radius:999px;background:var(--accent);opacity:0;transition:transform .55s var(--ease),width .55s var(--ease),opacity .3s;box-shadow:0 0 24px rgba(200,162,90,.45)}
@media (min-width:1021px){.touch .dock{display:none}}

/* ---------- tap ripples ---------- */
.ripples{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.ripples i{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1.5px solid var(--accent);animation:ripple 1.3s cubic-bezier(.2,.7,.3,1) forwards}
.ripples i::before,.ripples i::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1px solid rgba(200,162,90,.6);animation:ripple 1.3s cubic-bezier(.2,.7,.3,1) .14s forwards}
.ripples i::after{animation-delay:.28s;border-color:rgba(160,186,212,.5)}
@keyframes ripple{from{transform:scale(1);opacity:1}to{transform:scale(22);opacity:0}}

/* ---------- motion chip ---------- */
.motion-chip{position:absolute;z-index:5;right:var(--gutter);bottom:30px;display:flex;align-items:center;gap:9px;padding:10px 16px 10px 12px;border-radius:999px;
  background:rgba(8,20,36,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(200,162,90,.5);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:opacity .6s,transform .6s var(--ease)}
.motion-chip svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.6;animation:rock 2.2s var(--ease) infinite}
.motion-chip.done{opacity:0;transform:scale(.8)}
@keyframes rock{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}

/* ---------- hero on touch ---------- */
.touch .hud-bl{display:none}
.touch .hero .lens span{font-size:.55rem}

/* ---------- services: tilt glow ---------- */
.card.glow .card-glow{opacity:1}

/* ---------- logbook: swipe deck with coverflow ---------- */
.touch .log-head{flex-direction:row;align-items:flex-end;flex-wrap:wrap}
.touch .route{display:block}
.touch .leg-year{font-size:4.4rem}
.swipe-hint{display:none}

/* ---------- tickets: tap to stamp ---------- */
.touch .q-list li{cursor:pointer;-webkit-tap-highlight-color:transparent}
.touch .q-list li.open::before{transform:scaleY(1)}
.touch .q-list li.open,.touch .q-list li.open .q-meta,.touch .q-list li.open .q-idx{color:#0a0a0a}
.touch .q-list li.open .q-name{transform:translateX(10px)}
.touch .q-list li.open .q-arr{transform:rotate(45deg)}
.touch .q-list li.open .q-subs span{border-color:rgba(8,20,36,.35)}
.touch .q-list li.open .q-subs i{color:#081424}
.touch .q-list li:hover::before{transform:scaleY(0)}
.touch .q-list li.open:hover::before{transform:scaleY(1)}
.touch .q-list li:hover{color:inherit}
.touch .q-list li.open:hover{color:#0a0a0a}

/* ---------- gallery: captions always on for touch; stories on phones ---------- */
.touch .hw-item figcaption{opacity:1;transform:none}
.story-bars,.story-count{display:none}
.stories .hw-head{margin-bottom:22px}
.stories .story-bars{display:flex;gap:4px;padding:0 var(--gutter) 10px}
.stories .story-bars i{flex:1;height:3px;border-radius:2px;background:rgba(237,231,220,.2);overflow:hidden}
.stories .story-bars b{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.stories .hw-grid{display:flex;gap:0;padding:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.stories .hw-grid::-webkit-scrollbar{display:none}
.stories .hw-item{flex:0 0 100%;height:min(74svh,640px);border-radius:0;border:0;scroll-snap-align:center;scroll-snap-stop:always;cursor:default}
.stories .hw-item img{transform:scale(1.12) translate3d(var(--px,0),var(--py,0),0);filter:none;transition:transform .5s ease-out}
.stories .hw-item figcaption{padding:90px 22px 26px}
.stories .hw-item figcaption b{font-size:2.2rem}
.stories .hw-item figcaption span{font-size:.7rem}
.stories .story-count{display:block;padding:12px var(--gutter) 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--muted)}

/* ---------- 360 on touch ---------- */

/* ---------- phones: portrait ---------- */
@media (max-width:600px){
  .touch .hero{padding-bottom:110px}
  .touch .rose{right:-75%;top:62%;opacity:.5;width:150vw;height:150vw}
  .touch .hud-tr{display:flex;top:auto;bottom:96px;right:var(--gutter)}
  .touch .motion-chip{left:var(--gutter);right:auto;bottom:40px}
  .touch .foot{padding-bottom:110px}
  .touch .contact{padding-bottom:140px}
  .touch .leg h3{font-size:1.9rem}
}

/* ---------- phones: landscape (short screens) ---------- */
@media (orientation:landscape) and (max-height:520px){
  .hero{min-height:100svh;padding:76px calc(var(--gutter) + 40px) 26px var(--gutter);justify-content:flex-end}
  .name{font-size:min(17vw,27svh)}
  .name-wrap{margin:8px 0 12px}
  .hero-foot{flex-wrap:nowrap;gap:24px;align-items:center}
  .lede{font-size:.86rem;max-width:44ch;line-height:1.45}
  .ctas .btn{padding:11px 18px;font-size:.82rem}
  .hud-tl,.hud-tr,.hud-bl,.hud-br{display:none}
  .rose{right:-22%;opacity:.5}
  .motion-chip{bottom:auto;top:76px;right:var(--gutter)}
  .manifesto .stick{gap:14px}
  .words{font-size:min(7.4vw,13svh)}
  h2{font-size:min(9vw,17svh)}
  .sec-head{margin-bottom:26px}
  .look{padding-bottom:70px}
  .look-head{grid-template-columns:1fr auto}
  .look-head .sub{display:none}
  .pano{height:calc(100svh - 20px);min-height:0;margin:0 10px;border-radius:14px}
  .pano-hud{top:16px}.pano-hud-l{left:20px}.pano-hud-r{right:20px}
  .pano-hud b{font-size:1.2rem}
  .pano-tape{bottom:14px;width:46%}
  .pano-tabs{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x mandatory}
  .pano-tab{flex:0 0 26%;scroll-snap-align:start}
  .log-sticky{padding-top:80px}
  .touch .leg{flex-basis:min(300px,44vw)}
  .touch .leg-img{aspect-ratio:21/9}
  .touch .leg-note{display:none}
  .touch .log-track{padding-bottom:80px}
  .miles{padding:80px 0 60px}
  .miles-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
  .miles-text .sub{font-size:.88rem}
  .globe-wrap{order:0;max-width:min(86svh,100%);position:sticky;top:20px}
  .miles-text h2{font-size:min(9vw,16svh)}
  .stories .hw-item{flex-basis:62%;height:80svh;scroll-snap-align:center}
  .stories .hw-item+.hw-item{margin-left:8px}
  .huge{font-size:min(15vw,30svh)}
  .dock a{min-width:52px;padding:5px 8px 4px}
  .dock span{display:none}
}

/* ---------- tablets ---------- */
@media (min-width:601px) and (max-width:1100px){
  .touch .hw-grid{grid-template-columns:repeat(3,1fr)}
  .touch .leg{flex-basis:min(400px,46vw)}
  .touch .rose{opacity:.5}
}
@media (min-width:601px) and (orientation:portrait){
  .touch .hero{min-height:88svh}
  .touch .name{font-size:min(23vw,22svh)}
}

/* nothing may widen the page sideways (clip keeps position:sticky working) */
html,body{overflow-x:clip}
.miles{overflow-x:clip}

/* ---------- fixes from the iPhone pass ---------- */
/* top bar: solid navy fading out, no blur (blurred headings behind it looked like a smudge) */
.touch .nav.scrolled{background:linear-gradient(180deg,rgba(8,20,36,.97) 0%,rgba(8,20,36,.93) 64%,rgba(8,20,36,0) 100%);-webkit-backdrop-filter:none;backdrop-filter:none;padding-bottom:30px}
.touch section[id]{scroll-margin-top:72px}
/* logbook: the swipe hint sits above the deck, clear of the boat on the route line */
/* globe on phones and narrow tablets: count, globe, current ship, ship chips, photo, then the text */
@media (max-width:900px) and (orientation:portrait){
  .touch .miles-text{display:contents}
  .touch .miles-grid{gap:0}
  .touch .miles-text .eyebrow{order:1;margin-bottom:0}
  .touch .miles-text h2{order:2;margin:10px 0 18px}
  .touch .globe-wrap{order:3;margin-bottom:18px;max-width:min(520px,100%)}
  .touch .miles-now{order:4;justify-content:center}
  .touch .miles-ships{order:5;display:flex;gap:8px;overflow-x:auto;border:0;margin:0 calc(var(--gutter)*-1) 16px;padding:2px var(--gutter) 6px;scroll-snap-type:x proximity;scrollbar-width:none}
  .touch .miles-ships::-webkit-scrollbar{display:none}
  .touch .miles-ships li{flex:0 0 auto;scroll-snap-align:start}
  .touch .miles-ships button{grid-template-columns:10px auto;grid-template-rows:auto auto;gap:2px 8px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(13,29,49,.75)}
  .touch .miles-ships button:hover,.touch .miles-ships button[aria-pressed="true"]{padding-left:14px;border-color:var(--c);background:rgba(200,162,90,.1)}
  .touch .miles-ships i{grid-row:1/3;align-self:center;width:10px;height:10px;border-radius:50%}
  .touch .miles-ships .s-name{font-size:.9rem;white-space:nowrap}
  .touch .miles-ships .s-yr{display:none}
  .touch .miles-ships b{grid-column:2;min-width:0;text-align:left;font-size:.68rem}
  .touch .miles-photo{order:6}
  .touch .miles-replay{order:7;justify-self:start;margin-bottom:26px}
  .touch .miles-text .sub{order:8;margin:0}
}
.touch .globe-wrap{scroll-margin-top:64px}
.touch .pano-hint{white-space:normal;max-width:min(78%,300px);text-align:center;justify-content:center;line-height:1.5;padding:10px 16px}

/* landscape phones: logbook cards go sideways (photo left, text right) so a card fits the screen */
@media (orientation:landscape) and (max-height:520px){
  .touch .leg{flex-basis:min(560px,74vw);display:grid;grid-template-columns:42% 1fr;column-gap:20px;align-content:start;padding:22px 22px 22px 0}
  .touch .leg>*:not(.leg-img){grid-column:2}
  .touch .leg-img{grid-column:1;grid-row:1/span 8;margin:-22px 0 -22px 0;aspect-ratio:auto;height:calc(100% + 44px);border-radius:16px 0 0 16px}
  .touch .leg-img::after{background:linear-gradient(90deg,transparent 60%,rgba(8,20,36,.5))}
  .touch .leg-year{font-size:3.4rem;right:14px}
  .touch .leg h3{font-size:1.7rem;margin:8px 0 4px}
  .touch .leg-note{display:block;font-size:.84rem}
  .touch .tags{margin-top:10px}
  .touch .log-track{padding:28px 13vw 70px}
}
@media (orientation:landscape) and (max-height:420px){
  .name{font-size:min(15vw,24svh)}
  .hero{padding-top:66px}
  .lede{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
}
@media (orientation:landscape) and (max-height:520px){.stories .hw-item figcaption{padding:60px 16px 16px}.stories .hw-item figcaption b{font-size:1.45rem}}
@media (max-width:600px){.leg .leg-role{font-size:1.7rem}}
@media (orientation:landscape) and (max-height:520px){.touch .leg .leg-role{font-size:1.45rem}}

/* logbook everywhere: scroll down, the section pins, the voyage and sea run east */
@media (max-width:899px){
  .log-sticky{position:sticky;top:0;height:100vh;height:100svh;padding:84px 0 0}
  .log-viewport{flex:1}
  .log-track{position:absolute;flex-direction:row;align-items:center;gap:7vw;padding:0 9vw 15vh;transform:none}
  .route{display:block}
  .leg{flex:0 0 min(360px,80vw)}
  .leg:nth-of-type(odd){transform:translateY(-4%)}
  .leg:nth-of-type(even){transform:translateY(4%)}
  .leg-end{padding:0 10vw 0 0}
  .log-head{flex-direction:row;align-items:flex-end;flex-wrap:wrap;gap:6px 20px}
  .log-head h2{font-size:clamp(2.6rem,12vw,4rem)}
  .log-nm{font-size:2rem}
}
@media (max-width:600px){.leg-note{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.leg .leg-img{aspect-ratio:16/10}}
@media (orientation:landscape) and (max-height:520px){
  .log-sticky{padding-top:60px}
  .log-head h2{font-size:min(9vw,15svh)}
  .log-track{padding-bottom:12vh}
}
@media (max-width:899px){.log-viewport{margin-top:46px}.leg-year{font-size:3.6rem}}
@media (orientation:landscape) and (max-height:520px){.log-viewport{margin-top:30px}}
@media (max-width:600px),(orientation:landscape) and (max-height:520px){.leg-year{display:none}}