/* ==========================================================
   Phuket Tours & Activities: tropical poster style
   Colours: island pink, ocean blue, sunset orange, city purple,
   sunshine yellow stickers, deep navy ink.
   ========================================================== */
:root{
  --ink:#152238;--muted:#45526A;--soft:#5E6A80;--line:#DDE3EC;--line2:#EEF2F7;
  --navy:#12355B;--sea:#0E7C9B;--sea2:#0B5E7E;--aqua:#22B5C2;
  --pink:#D81F6B;--pinkT:#FFF0F6;--blue:#1570C2;--blueT:#EEF6FF;--orange:#E2620A;--orangeT:#FFF5EA;--purple:#7B35C4;--purpleT:#F6F0FF;
  --sun:#FFE14D;--sunT:#FFF8DB;--sunLine:#F0C93A;--sunInk:#7A5A00;
  --price:#D7262E;--ok:#0E8A6E;--okT:#E4F6F0;--no:#C2341C;--noT:#FDECE8;
  --acc:var(--sea);--accT:#E8F6F8;
  --r:18px;--shadow:0 2px 6px rgba(18,53,91,.08),0 10px 24px rgba(18,53,91,.10);
  --script:"Kaushan Script",cursive;--display:"Baloo 2",system-ui,sans-serif;
}
.pink{--acc:var(--pink);--accT:var(--pinkT)}
.blue{--acc:var(--blue);--accT:var(--blueT)}
.orange{--acc:var(--orange);--accT:var(--orangeT)}
.purple{--acc:var(--purple);--accT:var(--purpleT)}
*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font:16px/1.6 Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#fff;overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--acc)}a:hover{color:var(--ink)}
h1,h2,h3{font-family:var(--display);line-height:1.12;text-wrap:balance;margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:99}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px;border-radius:6px}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ic.big{width:28px;height:28px;stroke-width:1.8}
.ic.soft{color:var(--muted);stroke-width:1.8;width:20px;height:20px}
.small{font-size:13px;color:var(--soft);line-height:1.5}

/* brush-stroke label, handwritten line */
.brush{display:inline-block;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:#fff;background:var(--acc);padding:8px 26px 4px;transform:rotate(-1.6deg);clip-path:polygon(1.5% 10%,30% 2%,70% 6%,98.5% 0,100% 45%,98% 94%,60% 100%,25% 95%,0 100%,.5% 55%);font-size:clamp(24px,3.4vw,34px);line-height:1.1}
.brush.sm{font-size:14px;padding:5px 14px 3px;letter-spacing:.03em}
.brush.big{font-size:clamp(32px,5vw,48px);padding:10px 30px 6px}
.brush.navy{background:var(--navy)}
.hand{font-family:var(--script);color:var(--acc);font-size:clamp(17px,2vw,21px);margin:0;transform:rotate(-1.5deg)}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand b{display:block;font-family:var(--display);font-weight:800;font-size:19px;line-height:1}
.brand small{display:block;font-family:var(--script);color:var(--pink);font-size:15px;line-height:1.2}
.logo{width:42px;height:42px;border-radius:50%;background:url("favicon.svg") center/cover}
.nav{display:flex;flex-wrap:wrap;gap:4px}
.nav a{padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:700;font-size:15px}
.nav a:hover{background:var(--line2)}
.nav a[aria-current]{background:var(--navy);color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 22px;border-radius:999px;background:var(--navy);color:#fff;text-decoration:none;font-weight:800;font-size:15px;border:2px solid var(--navy);font-family:Nunito,sans-serif}
.btn:hover{background:#0B2440;color:#fff}
.btn.alt{background:#fff;color:var(--navy)}.btn.alt:hover{background:var(--line2)}
.btn.sun{background:var(--sun);border-color:var(--sun);color:var(--navy)}.btn.sun:hover{background:#FFD21F}
.btn.glass{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.7);color:#fff}.btn.glass:hover{background:rgba(255,255,255,.26)}
.btn.wide{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:10px}

/* wave dividers */
.wave{display:block;width:100%;height:46px}

/* hero */
.hero{position:relative;color:#fff;background:
  radial-gradient(600px 300px at 88% 10%,rgba(255,225,77,.35),transparent 70%),
  linear-gradient(100deg,#0B4F72 0%,#0E7C9B 48%,#1FA8B8 100%);overflow:hidden}
.hero .wave{position:absolute;left:0;bottom:-1px;fill:#fff}
.hgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:center;padding-top:44px;padding-bottom:84px}
.htext{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.kick{margin:0;font-family:var(--script);font-size:22px;color:#FFF3B0;transform:rotate(-3deg);transform-origin:left}
.hero h1{display:flex;flex-direction:column;font-weight:400}
.s1{font-family:var(--script);font-size:clamp(64px,10vw,112px);line-height:.95;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.12)}
.s2{font-family:var(--script);font-size:clamp(36px,5.4vw,60px);line-height:1;color:var(--sun);margin-left:.6em;text-shadow:0 3px 0 rgba(0,0,0,.15)}
.trio{margin:6px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(17px,2vw,21px)}
.trio i{font-style:normal;color:var(--sun);padding:0 6px}
.hero .lead{margin:0;font-size:17px;max-width:46ch;color:#EAF7FA}
.prints{position:relative;height:420px}
.prints img{position:absolute;background:#fff;padding:8px 8px 26px;border-radius:4px;box-shadow:0 14px 30px rgba(0,0,0,.28);object-fit:cover}
.prints .p1{width:62%;height:56%;left:2%;top:4%;transform:rotate(-6deg)}
.prints .p2{width:44%;height:60%;right:2%;top:0;transform:rotate(5deg)}
.prints .p3{width:58%;height:50%;left:24%;bottom:2%;transform:rotate(-1.5deg)}
.sticker{position:absolute;right:-6px;bottom:8%;list-style:none;margin:0;padding:14px 18px 14px 16px;background:var(--sun);color:var(--navy);font-family:var(--display);font-weight:800;font-size:17px;line-height:1.35;transform:rotate(-5deg);box-shadow:0 10px 22px rgba(0,0,0,.22);clip-path:polygon(0 4%,100% 0,98% 100%,3% 97%)}
.sticker li::before{content:"✓ ";color:var(--navy)}

/* jump bar */
.jump{position:sticky;top:68px;z-index:15;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line2)}
.jump .wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px}
.chipset{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;font-weight:800;font-size:15px;text-decoration:none;color:#fff;background:var(--acc)}
.chip b{background:rgba(255,255,255,.28);border-radius:999px;padding:0 8px;font-size:13px}
.chip:hover{color:#fff;filter:brightness(1.08)}
.chip.sunny{background:var(--sun);color:var(--navy)}
.search{display:flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:999px;padding:0 14px;min-height:46px;color:var(--soft);background:#fff}
.search input{border:0;outline:0;font:inherit;font-size:16px;width:170px;background:transparent;color:var(--ink)}

/* category sections */
.cat{padding:34px 0 10px}
.catbox{background:var(--accT);border-radius:26px;padding:0 22px 24px;position:relative}
.cathead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;transform:translateY(-18px);margin-bottom:-4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:18px}
.card{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.card:hover{color:var(--ink);transform:translateY(-4px) rotate(-.4deg);box-shadow:0 4px 10px rgba(18,53,91,.1),0 18px 36px rgba(18,53,91,.16)}
.card[hidden],.cat[hidden]{display:none}
.ph{aspect-ratio:4/3;background:var(--line2);position:relative;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .ph img{transform:scale(1.04)}
.save{position:absolute;right:10px;top:10px;background:var(--sun);color:var(--navy);font-family:var(--display);font-weight:800;font-size:13px;padding:3px 10px 1px;border-radius:6px;transform:rotate(3deg);box-shadow:0 3px 8px rgba(0,0,0,.18)}
.route{height:100%;background:linear-gradient(135deg,var(--blue),var(--aqua));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:16px}
.route .rt{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.route b{font-family:var(--display);font-size:22px;line-height:1.15}.route span{font-size:14px}
.cb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px;flex-grow:1}
.cb h3{font-size:18px;font-weight:700;line-height:1.2;margin-bottom:2px}
.opt{font-size:13px;font-weight:800;color:var(--acc)}
.meta{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.meta .ic{width:16px;height:16px;color:var(--acc)}
.cf{margin-top:auto;padding-top:10px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.price{display:flex;flex-direction:column;line-height:1.15}
.price small{font-size:12px;color:var(--soft);font-weight:700}
.price b{font-family:var(--display);font-size:25px;font-weight:800;color:var(--price);white-space:nowrap;line-height:1.1}
.price s{font-size:13px;color:var(--soft);white-space:nowrap}
.go{width:40px;height:40px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;flex-shrink:0}
.flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:22px 0 0;font-weight:800;color:var(--navy)}
.flow span{display:flex;align-items:center;gap:6px}.flow .ic{color:var(--acc);width:22px;height:22px}.flow i{font-style:normal;color:var(--acc)}
.empty{text-align:center;color:var(--soft);padding:24px}

/* good to know */
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px;margin-bottom:18px}
.kc{background:#fff;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px;color:var(--acc);box-shadow:var(--shadow)}
.kc b{color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.2}.kc span{font-size:14px;color:var(--muted);line-height:1.5}
.kc.warn{background:var(--sun);color:var(--navy)}.kc.warn span{color:var(--navy)}

/* call to action band */
.cta{background:linear-gradient(180deg,#fff 0%,#E6F7FA 100%);padding:40px 0 70px;overflow:hidden}
.ctagrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,.9fr);gap:28px;align-items:center}
.note-sticker{background:var(--sun);padding:26px 24px;transform:rotate(-4deg);box-shadow:0 12px 26px rgba(0,0,0,.16);clip-path:polygon(0 3%,100% 0,97% 100%,2% 96%)}
.note-sticker p{margin:0;font-family:var(--script);font-size:24px;line-height:1.3;color:var(--navy);text-align:center}
.ctatext{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
ul.clean{list-style:none;padding:0;margin:0;width:100%}
ul.clean li{padding:7px 0 7px 26px;border-bottom:1px dashed var(--line);position:relative}
ul.clean li::before{content:"✓";position:absolute;left:2px;color:var(--ok);font-weight:800}
.small-prints{height:260px}
.small-prints .p1{width:72%;height:70%;left:0;top:0;transform:rotate(-5deg)}
.small-prints .p2{width:66%;height:64%;right:0;bottom:0;transform:rotate(6deg)}

/* footer */
footer.foot{position:relative;background:var(--navy);color:#D6E4F5;padding:20px 0 28px;margin-top:46px;font-size:14px}
.foot .wave{position:absolute;top:-45px;left:0;fill:var(--navy)}
.fgrid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:flex-start}
.fscript{font-family:var(--script);font-size:28px;color:#fff;margin:0 0 4px}
.foot p{margin:4px 0}.foot a{color:#fff;font-weight:700}
.foot .fl{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot .tags{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0 6px;font-family:var(--display);font-weight:700;color:var(--sun)}
.foot .small{color:#A9BFD9}

/* ---------------- tour detail ---------------- */
.detail{padding-bottom:20px}
.back{display:inline-flex;align-items:center;min-height:44px;font-weight:800;font-size:15px;text-decoration:none;margin-top:10px}
.dt{display:flex;flex-direction:column;gap:8px;margin:6px 0 22px;align-items:flex-start}
.dt h1{font-size:clamp(30px,4.4vw,46px);font-weight:800;color:var(--navy)}
.dopt{margin:0;font-family:var(--script);color:var(--acc);font-size:22px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.facts span{display:flex;align-items:center;gap:6px;background:var(--accT);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:700;color:var(--ink)}
.facts .ic{color:var(--acc)}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:180px 180px;gap:12px;margin-bottom:30px}
.gallery.g1{grid-template-columns:1fr;grid-template-rows:360px}
.gallery.g2{grid-template-columns:2fr 1fr;grid-template-rows:340px}
.gallery.g2 .main,.gallery.g1 .main{grid-row:auto;grid-column:auto}
.gi{all:unset;position:relative;cursor:zoom-in;border-radius:14px;overflow:hidden;background:var(--line2);box-shadow:var(--shadow)}
.gi:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.gi:hover img{transform:scale(1.04)}
.gi.main{grid-column:span 2;grid-row:span 2;border-radius:18px}
.gi .cap{position:absolute;left:10px;bottom:10px;background:rgba(18,53,91,.78);color:#fff;font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px}
.cols{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.maincol{flex:999 1 560px;display:flex;flex-direction:column;gap:36px}
.side{flex:1 1 300px;position:sticky;top:84px;background:#fff;border-radius:20px;padding:0 20px 20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow);overflow:hidden;border-top:8px solid var(--acc)}
.sl{font-size:13px;font-weight:800;color:var(--price);text-transform:uppercase;letter-spacing:.04em;margin-top:18px}
.sp-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sp-row b{font-family:var(--display);font-size:42px;color:var(--price);white-space:nowrap;line-height:1}
.sp-row s{color:var(--soft);font-size:16px;white-space:nowrap}
.side dl{margin:0;border-top:1px dashed var(--line);padding-top:10px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.side dl div{display:flex;justify-content:space-between;gap:8px}
.side dt{color:var(--soft)}.side dd{margin:0;font-weight:800;text-align:right}
.side .fl dd{color:var(--sunInk)}
.alert{background:var(--sunT);border:2px solid var(--sunLine);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.alert h2{font-size:22px;display:flex;align-items:center;gap:8px;color:var(--navy)}
.alert h2 .ic{color:var(--sunInk)}
.alert ul{margin:0;padding-left:20px;font-size:15px}
.alert a{font-weight:800;font-size:15px}
.flight{background:var(--sun);border-radius:14px;padding:12px 14px;display:flex;gap:12px;color:var(--navy);transform:rotate(-.6deg)}
.flight div{display:flex;flex-direction:column;gap:2px;font-size:15px}
.flight div>b{font-family:var(--display);font-size:18px;line-height:1.2}
.sec h2{font-size:clamp(24px,3vw,30px);font-weight:800;color:var(--navy);display:inline-block;margin-bottom:8px;background:linear-gradient(transparent 62%,var(--accT) 62%);padding:0 6px}
.sub{margin:0 0 14px;font-size:14px;color:var(--soft)}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:116px 30px minmax(0,1fr);gap:12px}
.tt{font-family:var(--display);font-weight:800;font-size:16px;color:var(--acc);text-align:right;padding-top:9px;line-height:1.2}
.dot{position:relative;display:flex;justify-content:center}
.dot::before{content:"";position:absolute;top:0;bottom:0;width:3px;border-radius:3px;background:repeating-linear-gradient(var(--acc) 0 6px,transparent 6px 11px);opacity:.5}
.tl li.first .dot::before{top:18px}.tl li.last .dot::before{bottom:auto;height:18px}
.dot::after{content:"";position:relative;margin-top:12px;width:18px;height:18px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 5px #fff,0 0 0 7px var(--accT)}
.tl li.first .dot::after{background:#fff;border:4px solid var(--acc)}
.tl li.last .dot::after{background:var(--navy)}
.tl li>div{padding:8px 0 18px}
.tl b{font-family:var(--display);font-size:18px;line-height:1.2}.tl p{margin:2px 0 6px;font-size:15px;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{background:var(--accT);color:var(--ink);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:800}
.acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:12px}
.act{background:#fff;border-radius:14px;padding:14px 12px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;font-size:14px;font-weight:800;box-shadow:var(--shadow)}
.ib{width:46px;height:46px;border-radius:50%;background:var(--accT);color:var(--acc);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ib .ic{width:22px;height:22px}
.ib.red{background:var(--noT);color:var(--no)}
.incgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.box{background:#fff;border-radius:18px;padding:16px 18px;box-shadow:var(--shadow)}
.box h3{font-size:18px;margin:14px 0 6px}.box h3:first-child{margin-top:0}
.box h3.ok{color:var(--ok)}.box h3.no{color:var(--no)}
.box p{margin:0;color:var(--muted);font-size:15px}
.box ul{margin:0;padding-left:20px}
ul.inc{list-style:none;padding:0}
.inc li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line2);font-size:15px}
.inc li small{display:block;font-size:13px;color:var(--soft)}
.yes,.nope{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.yes{background:var(--okT);color:var(--ok)}.nope{background:var(--noT);color:var(--no)}
.yes .ic,.nope .ic{width:14px;height:14px;stroke-width:3}
.tablewrap{overflow-x:auto;border-radius:14px;box-shadow:0 0 0 1px var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:15px;background:#fff}
.tbl th{background:var(--accT);text-align:left;padding:9px 12px;font-weight:800;font-size:14px}
.tbl td{padding:9px 12px;border-top:1px solid var(--line2);vertical-align:top}
.tbl .n{text-align:right;white-space:nowrap}
.tbl b.sp,.mgrid .sp{color:var(--price)}
.broch{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start;padding:22px 0;border-top:2px dashed var(--line)}
.broch figure{margin:0;position:sticky;top:84px}
.zoom{all:unset;cursor:zoom-in;display:block;border-radius:6px;overflow:hidden;background:#fff;padding:8px 8px 22px;box-shadow:0 10px 24px rgba(0,0,0,.16);transform:rotate(-.8deg)}
.zoom:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.broch figcaption{font-size:13px;color:var(--soft);margin-top:12px}
.tx{background:var(--accT);border-radius:16px;padding:16px 18px;font-size:15px}
.tx .lbl{display:inline-block;font-family:var(--script);font-size:18px;color:var(--acc);margin-bottom:6px}
.tx h3{font-size:19px;margin:0 0 6px}.tx h4{font-family:var(--display);font-size:16px;margin:14px 0 4px;color:var(--acc)}
.tx p{margin:4px 0}.tx ul{margin:4px 0;padding-left:20px}
.tx .tablewrap{margin:6px 0}.tx .tbl{font-size:13px}.tx .tbl th{background:#fff}
.sched{list-style:none;padding:0;margin:4px 0}
.sched li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:5px 0;border-bottom:1px dashed rgba(0,0,0,.1)}
.sched b{color:var(--acc);white-space:nowrap}
.note{background:#fff;border-left:4px solid var(--sunLine);border-radius:8px;padding:8px 12px;margin:10px 0;font-size:14px}
details.terms{background:#fff;border-radius:18px;box-shadow:var(--shadow)}
details.terms summary{cursor:pointer;padding:16px 20px;font-family:var(--display);font-weight:800;font-size:19px;min-height:44px}
details.terms .in{padding:0 20px 16px}details.terms h3{font-size:17px;margin:14px 0 4px}
.more{margin-top:40px;background:var(--accT);border-radius:24px;padding:0 22px 22px}
.more h2{display:inline-block;transform:translateY(-16px) rotate(-1.6deg);font-weight:800;text-transform:uppercase;color:#fff;background:var(--acc);padding:6px 22px 2px;font-size:22px;clip-path:polygon(1.5% 10%,98.5% 0,100% 50%,98% 94%,0 100%,.5% 55%)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.mgrid a{background:#fff;border-radius:14px;padding:14px;text-decoration:none;color:var(--ink);display:flex;justify-content:space-between;gap:8px;min-height:44px;font-weight:700;box-shadow:var(--shadow)}
.mgrid a:hover{transform:translateY(-2px)}
.mgrid .sp{white-space:nowrap;font-family:var(--display)}

/* ---------------- do's and don'ts, terms ---------------- */
.page{padding-top:36px;padding-bottom:20px;display:flex;flex-direction:column;gap:28px}
.page>h1,.tmain>h1{align-self:flex-start}
.lead{margin:0;font-size:17px;color:var(--muted);max-width:62ch}
.ddgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px}
.ddcol{background:var(--okT);border-radius:22px;padding:20px 22px}
.ddcol.dont{background:var(--noT)}
.ddcol h2{margin:0 0 8px;font-size:30px;display:flex;align-items:center;gap:10px;color:var(--ok)}
.ddcol.dont h2{color:var(--no)}
.badge{width:38px;height:38px;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center}
.dont .badge{background:var(--no)}.badge .ic{stroke-width:3}
.dd{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(0,0,0,.1)}
.dd .ib{background:#fff;color:var(--ok)}.dd .ib.red{background:#fff;color:var(--no)}
.dd b{font-family:var(--display);font-size:18px;line-height:1.2}.dd p{margin:2px 0 0;font-size:14px;color:var(--muted)}
.nature{background:var(--blueT);border-radius:22px;padding:22px}
.nature h2,.health h2{font-size:26px;color:var(--navy)}
.nature>p{margin:4px 0 14px;color:var(--muted);font-size:15px}
.ngrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px}
.nc{background:#fff;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted);box-shadow:var(--shadow)}
.nc b{font-family:var(--display);font-size:18px;color:var(--ink)}.nc .when{font-weight:800;color:var(--blue);font-size:13px}
.health{background:var(--sun);border-radius:22px;padding:20px 22px;transform:rotate(-.4deg)}
.hp{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.hp span{background:#fff;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:800}
.health p{margin:0;font-size:14px;color:var(--navy)}
.tpage{flex-direction:row;flex-wrap:wrap;gap:40px;align-items:flex-start}
.toc{flex:1 1 220px;position:sticky;top:90px;display:flex;flex-direction:column;background:var(--purpleT);border-radius:18px;padding:16px 18px;font-weight:700;font-size:15px}
.toc span{font-family:var(--script);font-size:18px;color:var(--purple);margin-bottom:6px}
.toc a{padding:7px 0;text-decoration:none;color:var(--ink);border-bottom:1px dashed rgba(0,0,0,.1)}.toc a:last-child{border:0}.toc a:hover{color:var(--purple)}
.tmain{flex:999 1 560px;display:flex;flex-direction:column;gap:24px}
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px}
.sum div{background:#fff;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow);border-top:6px solid var(--purple)}
.sum b{font-family:var(--display);font-size:20px;line-height:1.15}.sum span{font-size:14px;color:var(--muted)}
.sum .hot{border-top-color:var(--price)}.sum .hot b{color:var(--price)}
.tsec{border-top:2px dashed var(--line);padding-top:20px}
.tsec h2{margin:0 0 10px;font-size:26px;color:var(--navy)}
.tsec ul{margin:0;padding-left:20px}.tsec li{margin:5px 0}
.callout{margin-top:12px;background:var(--sun);border-radius:14px;padding:12px 16px;font-weight:800;font-size:15px;color:var(--navy);transform:rotate(-.4deg)}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(8,20,36,.92);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.lbx{position:absolute;top:12px;right:12px;width:48px;height:48px;border-radius:50%;border:0;background:var(--sun);color:var(--navy);font-size:26px;cursor:pointer}

@media (max-width:900px){
  .hgrid{grid-template-columns:minmax(0,1fr);padding-bottom:70px}
  .prints{height:300px;max-width:520px}
  .ctagrid{grid-template-columns:minmax(0,1fr)}
  .note-sticker{max-width:360px}
  .small-prints{display:none}
}
@media (max-width:820px){
  .broch{grid-template-columns:minmax(0,1fr)}.broch figure{position:static}
  .side{position:static;order:-1;flex-basis:100%}
  .gallery{grid-template-rows:140px 140px}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .top{position:relative}
  .top .wrap{min-height:56px;gap:4px;padding-top:6px;padding-bottom:6px}
  .brand b{font-size:17px}.brand small{font-size:13px}.logo{width:32px;height:32px}
  .nav{width:100%;justify-content:space-between}.nav a{padding:8px 12px;font-size:14px}
  .jump{position:sticky;top:0}
  .jump .chipset{display:none}
  .tbl{font-size:14px}.tbl th,.tbl td{padding:8px 9px}
  .tbl:not(.stack) td:nth-child(2){white-space:nowrap}
  .sched li{display:flex;flex-direction:column;gap:0}
  .catbox{padding:0 12px 16px;border-radius:20px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cb{padding:10px 10px 12px}.cb h3{font-size:16px}.meta{font-size:12.5px}.price b{font-size:20px}.go{width:32px;height:32px;font-size:16px}
  .save{font-size:11px}
  .route .rt{display:none}.route b{font-size:16px}.route span{font-size:12px}
  .search{flex:1}.search input{width:100%}
  .prints{height:250px}
  .sticker{font-size:14px;padding:10px 12px}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:200px 110px 110px}
  .gallery.g2{grid-template-columns:1fr;grid-template-rows:220px 140px}
  .gi.main{grid-column:span 2;grid-row:span 1}
  .tl li{grid-template-columns:78px 24px minmax(0,1fr);gap:8px}.tt{font-size:13px}
  .acts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stack thead{display:none}.stack tr{display:grid;padding:8px 12px;border-top:1px solid var(--line2)}
  .stack td{display:flex;justify-content:space-between;gap:12px;border:0;padding:3px 0;text-align:right}
  .stack td::before{content:attr(data-l);font-weight:700;color:var(--soft);text-align:left}
  .stack td.n{white-space:normal}
}
@media (max-width:380px){.grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.ph img,.gi img{transition:none}.card:hover{transform:none}}