/* Ish Travel – about page styles.
 * Generated from phase 2/design/about.html (approved designs, 24 Oct 2026).
 * Edit here from now on; the design HTML is no longer the source. */

.hero h1{font-size:clamp(46px, 7.4vw, 88px); max-width:12ch; line-height:1.02}

.hero__intro{font-size:19px; max-width:46ch; opacity:.92}

.island{position:relative; aspect-ratio:1/1.32; max-width:520px; width:100%; justify-self:center}

.island svg{width:100%; height:100%; overflow:visible}

.island__shape{fill:var(--fill); stroke:var(--red); stroke-width:1.4}

.island__photo{transition:opacity .6s}

.pin{cursor:pointer}

.pin circle.ring{fill:var(--red); opacity:.18; transform-box:fill-box; transform-origin:center; animation:pulse 2.6s ease-out infinite}

.pin circle.dot{fill:var(--red); stroke:var(--bg); stroke-width:3}

.pin text{font:600 13px var(--sans); fill:var(--fg); paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round}

.pin.is-on circle.dot{fill:var(--ink); }

.pin.is-on text{fill:var(--red)}

@keyframes pulse{0%{transform:scale(.6); opacity:.35} 100%{transform:scale(2.2); opacity:0}}

.dest__list a{display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px 18px; padding:22px 4px; text-decoration:none; transition:padding .3s}

.dest__list b{font:300 clamp(26px,3vw,34px)/1.1 var(--serif); transition:color .3s}

@media (max-width:820px){
  .topbar__l a:not(:first-child){display:none}
  .qs{grid-template-columns:1fr 1fr; border-radius:26px}
  .qs__f{border-right:0; border-bottom:1px solid rgba(18,17,15,.12)}
  .qs__f:first-child{grid-column:1 / -1}
  .qs__f:nth-child(3){border-bottom:1px solid rgba(18,17,15,.12)}
  .qs__f:focus-within{border-radius:18px}
  .qs .btn{grid-column:1 / -1; justify-content:center; margin-top:8px}
  .ways,.dest,.cta,.news{grid-template-columns:1fr}
  .way{min-height:440px}
  .way__body{padding:26px}
  .island{max-width:380px}
  .cta::after{display:none}
}

@media (max-width:560px){
  .topbar__r a:not(.heart){display:none}
  .hdr__bar{height:66px}
  .logo small{display:none}
  .hero .wrap{padding-block:120px 28px}
  .hero__intro{font-size:17px}
  .exp{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr}
  .why div,.why div + div{padding-left:0; border-left:0; border-bottom:1px solid var(--line); padding-bottom:24px}
  .dep{grid-template-columns:1fr auto; grid-template-areas:"d p" "t t" "s b"; gap:12px}
  .ftr__top{grid-template-columns:1fr}
  .news form{flex-direction:column; border-radius:24px}
  .news input{padding:14px 16px}
  .news .btn{justify-content:center}
  .head{margin-bottom:30px}
}

section[id]{scroll-margin-top:150px}

.crumbs{font-size:13px; color:var(--muted); display:flex; gap:8px; align-items:center}

.crumbs a{text-decoration:none}

.crumbs a:hover{color:var(--red)}

.ab-hero{padding-block:clamp(40px,5vw,70px) clamp(60px,7vw,100px)}

.ab-hero__grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(30px,5vw,80px); align-items:center; margin-top:28px}

.ab-hero h1{font-size:clamp(52px,7.4vw,88px); line-height:1}

.ab-hero h1 em{color:var(--red)}

.ab-hero__intro{font-size:19px; max-width:44ch; margin-top:26px}

.ab-hero__intro + p{color:var(--muted); max-width:48ch; margin-top:14px}

.ab-hero__acts{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

.route{position:relative; max-width:480px; width:100%; justify-self:center}

.route svg{width:100%; height:auto; overflow:visible; display:block}

.route__line{fill:none; stroke:var(--red); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:6 7}

.route__mask{fill:none; stroke:var(--bg); stroke-width:6; stroke-dasharray:1200; stroke-dashoffset:0; animation:draw 3.2s .6s cubic-bezier(.5,0,.3,1) forwards}

@keyframes draw{to{stroke-dashoffset:1200}}

.route__stop circle{fill:var(--bg); stroke:var(--red); stroke-width:2.2}

.route__stop text{font:600 12.5px var(--sans); fill:var(--fg); paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round}

.route__stop.start circle{fill:var(--red)}

.route__note{position:absolute; left:0; bottom:6%; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px 16px; font-size:13px; max-width:210px; box-shadow:0 20px 40px -24px rgba(18,17,15,.35)}

.route__note b{display:block; font:400 20px/1.15 var(--serif); margin-bottom:4px}

.route__note span{color:var(--muted)}

.subnav{position:sticky; top:calc(76px + env(safe-area-inset-top,0px)); z-index:40; background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-block:1px solid var(--line)}

.subnav .wrap{display:flex; gap:6px; overflow-x:auto; padding-block:10px; scrollbar-width:none}

.subnav .wrap::-webkit-scrollbar{display:none}

.subnav a{flex:none; text-decoration:none; font-weight:600; font-size:14px; padding:9px 16px; border-radius:999px; color:var(--muted)}

.subnav a:hover{color:var(--fg); background:var(--fill)}

.subnav a[aria-current="page"]{background:var(--fg); color:var(--bg)}

.story{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,6vw,90px); align-items:center}

.story figure{margin:0; display:grid; gap:12px}

.story figure img{border-radius:var(--radius); aspect-ratio:4/5; object-fit:cover; width:100%; background:var(--fill)}

.story figcaption{font-size:13px; color:var(--muted); display:flex; gap:8px; align-items:center}

.story h2{font-size:clamp(36px,4.6vw,48px); margin-top:16px}

.story__text{display:grid; gap:18px; margin-top:26px; max-width:56ch}

.story__text p:first-child{font-size:19px}

.story__text p + p{color:var(--muted)}

.sign{display:flex; align-items:center; gap:14px; margin-top:30px; padding-top:24px; border-top:1px solid var(--line)}

.sign img{width:52px; height:52px; border-radius:50%; object-fit:cover}

.sign b{font:italic 400 22px/1.1 var(--serif); display:block}

.sign span{font-size:13px; color:var(--muted)}

.nums{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line)}

.nums div{padding:34px 24px 4px 0; display:grid; gap:10px; align-content:start}

.nums div + div{padding-left:24px; border-left:1px solid var(--line)}

.nums b{font:300 clamp(48px,6vw,76px)/1 var(--serif); font-variant-numeric:tabular-nums; letter-spacing:-.02em}

.nums b em{color:var(--red); font-style:normal}

.nums span{color:var(--muted); font-size:15px; max-width:22ch}

.tl{position:relative; display:grid; grid-template-columns:repeat(6, minmax(180px,1fr)); gap:24px; overflow-x:auto; padding:8px 2px 18px; scroll-snap-type:x mandatory}

.tl::before{content:""; position:absolute; left:0; right:0; top:73px; height:1px; background:var(--line)}

.tl li{list-style:none; position:relative; display:grid; gap:10px; scroll-snap-align:start; align-content:start}

.tl__y{font:300 44px/1 var(--serif); color:var(--fg)}

.tl li:last-child .tl__y{color:var(--red); font-style:italic}

.tl__mark{height:22px; display:flex; align-items:center}

.tl__mark .drop{width:14px; height:19px; outline:6px solid var(--bg-alt)}

.tl b{font:400 22px/1.2 var(--serif); margin-top:6px}

.tl p{color:var(--muted); font-size:15px}

.tl ol{margin:0; padding:0}

.beliefs{border-top:1px solid var(--line)}

.belief{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto; gap:20px 50px; align-items:start; padding-block:34px; border-bottom:1px solid var(--line)}

.belief h3{font-size:clamp(30px,3.6vw,44px)}

.belief h3 em{color:var(--red)}

.belief p{color:var(--muted); font-size:17px; max-width:50ch}

.belief small{display:block; margin-top:12px; color:var(--fg); font-weight:600; font-size:14px}

.belief__ex{font-size:13px; color:var(--muted); max-width:24ch; border-left:2px solid var(--red); padding-left:14px; line-height:1.5}

.belief__ex strong{display:block; color:var(--fg); font-weight:600; margin-bottom:2px}

.team{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}

.person{display:grid; gap:14px}

.person__img{position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; background:var(--fill)}

.person__img img{width:100%; height:100%; object-fit:cover; transition:transform 1s, filter .6s; filter:saturate(.85)}

.person:hover .person__img img{transform:scale(1.05); filter:none}

.person__fav{position:absolute; left:12px; right:12px; bottom:12px; background:rgba(251,248,243,.94); color:#12110F; border-radius:16px; padding:12px 14px; font-size:13px; line-height:1.45; transform:translateY(8px); opacity:.0; transition:.4s}

.person__fav strong{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6F685F}

.person:hover .person__fav,.person:focus-within .person__fav{opacity:1; transform:none}

.person b{font:400 24px/1.1 var(--serif)}

.person span{font-size:14px; color:var(--muted)}

.person__langs{display:flex; gap:6px; flex-wrap:wrap}

.person__langs i{font-style:normal; font-size:12px; font-weight:600; border:1px solid var(--line); border-radius:999px; padding:4px 10px}

.resp{background:var(--footer); color:var(--footer-fg)}

.resp__grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(30px,6vw,90px); align-items:center}

.resp__img{border-radius:var(--radius); overflow:hidden; position:relative}

.resp__img img{aspect-ratio:1/1.05; object-fit:cover; width:100%}

.resp__img figcaption{position:absolute; left:16px; bottom:16px; font-size:12px; background:rgba(18,17,15,.6); padding:6px 12px; border-radius:999px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}

.resp .label{color:#C9A46A}

.resp h2{font-size:clamp(36px,4.6vw,48px); margin-top:16px}

.resp h2 em{color:#C9A46A}

.resp__list{list-style:none; padding:0; margin:30px 0; display:grid; gap:0; border-top:1px solid rgba(237,230,218,.14)}

.resp__list li{display:grid; grid-template-columns:110px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid rgba(237,230,218,.14); align-items:baseline}

.resp__list b{font:300 38px/1 var(--serif); color:#C9A46A; font-variant-numeric:tabular-nums}

.resp__list span{opacity:.8}

.resp .btn--ghost{border-color:rgba(237,230,218,.3); color:#EDE6DA}

.resp .btn--ghost:hover{border-color:#C9A46A; color:#C9A46A}

.bigq{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(24px,5vw,70px); align-items:start}

.bigq__score{display:grid; gap:6px; padding-top:10px}

.bigq__score b{font:300 88px/1 var(--serif)}

.bigq__score span{color:var(--muted); font-size:14px}

.bigq__score a{font-weight:600; color:var(--red); text-decoration:none; font-size:14px; margin-top:8px}

.bigq q{font:300 clamp(28px,3.4vw,42px)/1.25 var(--serif); quotes:none; display:block; text-wrap:pretty}

.bigq q::before{content:"\201C"; color:var(--red)}

.bigq q::after{content:"\201D"; color:var(--red)}

.bigq footer{margin-top:26px; font-size:14px; color:var(--muted)}

.bigq footer b{color:var(--fg)}

.more{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}

.more a{display:grid; gap:8px; padding:24px; border-radius:22px; border:1px solid var(--line); background:var(--card); text-decoration:none; transition:border-color .3s, transform .3s}

.more a:hover{border-color:var(--red); transform:translateY(-4px)}

.more b{font:400 22px/1.15 var(--serif); display:flex; justify-content:space-between; gap:10px; align-items:center}

.more b svg{color:var(--red); flex:none}

.more span{color:var(--muted); font-size:14px}

@media (max-width:1100px){
  .subnav{top:calc(76px + env(safe-area-inset-top,0px))}
  .team{grid-template-columns:repeat(2,1fr)}
  .nums{grid-template-columns:1fr 1fr}
  .nums div:nth-child(3){padding-left:0; border-left:0}
  .more{grid-template-columns:1fr 1fr}
  .belief{grid-template-columns:1fr 1fr}
  .belief__ex{grid-column:2}
}

@media (max-width:820px){
  .ab-hero__grid,.story,.resp__grid,.bigq{grid-template-columns:1fr}
  .route{max-width:380px}
  .belief{grid-template-columns:1fr; gap:12px}
  .belief__ex{grid-column:auto}
  .person__fav{opacity:1; transform:none}
}

@media (max-width:560px){
  .subnav{top:calc(66px + env(safe-area-inset-top,0px))}
  .nums{grid-template-columns:1fr}
  .nums div,.nums div + div{padding-left:0; border-left:0; border-bottom:1px solid var(--line); padding-bottom:24px}
  .team,.more{grid-template-columns:1fr}
  .resp__list li{grid-template-columns:84px 1fr}
  .route__note{position:static; margin-top:10px; max-width:none}
}

@media (prefers-reduced-motion: reduce){ .route__mask{display:none} }