/* IKU — โปสเตอร์ฟ้าสว่าง: กรมท่าเข้ม ทองลายเส้น หัวเรื่องเซริฟ เหรียญกลม แผงมุมตัด + ".red" แสงออโรร่าแดง */
@font-face{font-family:"Trirong";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/trirong-thai-500-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Trirong";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/trirong-thai-600-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Trirong";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/trirong-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Trirong";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/trirong-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cinzel-latin-600-normal.woff2) format("woff2")}

:root{
  --ink:#1b2a5e; --ink-2:#44507a; --ink-3:#69739a;
  --bg:#f7f9fd; --paper:#fff; --soft:#eef3fa; --line:#dde5f1;
  --accent:#2a4a9b; --accent-ink:#fff; --accent-soft:#e6edf9;
  --gold:#a8822f; --gold-2:#c9a24c; --gold-3:#ecd38f; --lav:#7d6cc4; --red:#e3262f;
  --serif:"Trirong","Plex Thai",Georgia,serif; --caps:"Cinzel","Trirong",Georgia,serif;
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(27,42,94,.05),0 12px 32px -12px rgba(27,42,94,.2);
  --shadow-lg:0 2px 6px rgba(27,42,94,.06),0 28px 60px -20px rgba(27,42,94,.35);
  --ease:cubic-bezier(.2,.8,.2,1);
  --flourish:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cg fill='none' stroke='%23c9a24c' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M2 8h40M78 8h40'/%3E%3Cpath d='M42 8c6-6 12-6 18 0c6 6 12 6 18 0M42 8c6 6 12 6 18 0c6-6 12-6 18 0'/%3E%3C/g%3E%3Cpath d='M60 3l4 5-4 5-4-5z' fill='%23c9a24c'/%3E%3C/svg%3E");
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cg fill='none' stroke='%23c9a24c' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M2 5h30M26 1l6 4-6 4'/%3E%3C/g%3E%3Ccircle cx='36' cy='5' r='1.6' fill='%23c9a24c'/%3E%3C/svg%3E");
}
body{background:
  radial-gradient(1200px 600px at 85% -10%,rgba(214,228,248,.9),transparent 60%),
  radial-gradient(900px 500px at -10% 30%,rgba(232,226,250,.55),transparent 60%),
  var(--bg) fixed;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.site-main{flex:1 0 auto}
::selection{background:var(--gold-3);color:var(--ink)}
a{color:var(--accent)}
h1,h2,h3,.article__title,.card__title,.block__title,.list-head h1{font-family:var(--serif);font-weight:600;letter-spacing:0}
.btn{border-radius:999px;transition:transform .2s var(--ease)}
.btn:hover{transform:translateY(-1px)}

/* ---------- โลโก้ IKU.red ---------- */
.brand{gap:10px}
.brand__badge{position:relative;display:inline-grid;flex:none;width:34px;height:34px;border-radius:10px;overflow:hidden;
  animation:iku-glow 16s ease-in-out infinite;transition:transform .5s var(--ease)}
.brand__badge::after{content:"";position:absolute;inset:-20% auto -20% -60%;width:40%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:iku-shine 7s 1.5s ease-in-out infinite}
.brand__mark{display:block;width:34px;height:34px}
.brand:hover .brand__badge{transform:rotate(-8deg) scale(1.08)}
.brand__name{font-family:var(--caps);font-weight:600;font-size:22px;letter-spacing:.14em;color:var(--ink);display:inline-flex;align-items:baseline}
.brand__name::after{
  content:".red";font-family:var(--font);letter-spacing:.02em;margin-left:-.1em;font-weight:600;font-size:.9em;
  background:linear-gradient(100deg,#ff2a3d 0%,#ff6b4a 18%,#e3262f 36%,#c2185b 54%,#ff4d6d 72%,#ff8a3d 86%,#ff2a3d 100%);
  background-size:400% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:iku-aurora 16s ease-in-out infinite}
.brand--foot .brand__name{color:#fff}
.brand--foot .brand__name::after{background-image:linear-gradient(100deg,#ff5866 0%,#ff9a7a 18%,#ff4655 36%,#ff6fa3 54%,#ff7a8c 72%,#ffb070 86%,#ff5866 100%)}
@keyframes iku-aurora{
  0%{background-position:0% 50%;filter:drop-shadow(0 0 2px rgba(255,60,70,.25))}
  25%{filter:drop-shadow(0 0 8px rgba(255,90,80,.55))}
  50%{background-position:100% 50%;filter:drop-shadow(0 0 4px rgba(194,24,91,.4))}
  75%{filter:drop-shadow(0 0 9px rgba(255,120,60,.5))}
  100%{background-position:0% 50%;filter:drop-shadow(0 0 2px rgba(255,60,70,.25))}}
@keyframes iku-glow{0%,100%{box-shadow:0 4px 14px -4px rgba(227,38,47,.65)}50%{box-shadow:0 4px 20px -2px rgba(255,70,80,.85)}}
@keyframes iku-shine{0%,70%{left:-60%}90%,100%{left:130%}}

/* ---------- หัวเว็บ ---------- */
.site-head{background:color-mix(in srgb,#fff 82%,transparent);border-bottom:1px solid color-mix(in srgb,var(--gold-2) 30%,var(--line))}
.icon-btn:hover,.lang-switch:hover{background:var(--accent-soft)}
.nav__list a{transition:background .2s,color .2s}
@media (min-width:900px){
  .nav__list a{font-size:15px}
  .nav__list a[aria-current]{background:none;color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold-2);border-radius:0}
}
.iku-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.iku-progress::before{content:"";position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--gold-3),var(--gold-2),var(--gold))}
.iku-progress::after{content:"";position:absolute;bottom:-3px;left:calc(var(--p,0) * (100% - 8px));width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,#fff6d6 0 30%,#ffb347 60%,transparent 70%);box-shadow:0 0 10px 3px rgba(255,180,80,.6);opacity:calc(min(1, var(--p,0) * 20))}

/* ---------- ฮีโร่แบบโปสเตอร์ ---------- */
.hero{position:relative;padding:0 0 40px;background:none;overflow:hidden}
.hero__in{display:grid;gap:4px;position:relative}
.iku-art{order:0;position:relative;margin:0 calc(var(--gutter) * -1);height:min(58svh,520px);min-height:340px;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent);
  --mx:0;--my:0;
  --s1:#cfe0f5;--s2:#f4f8fe;--s3:#e7eef9;--far1:#c4d4ea;--far2:#dbe5f3;--near1:#3d5aa8;--near2:#1b2a5e;
  --w1:#3e64b5;--w2:#16245a;--c:#fff;--cs:#c9d8ee;--bird:#44507a;
  -webkit-tap-highlight-color:transparent;isolation:isolate}
.iku-art__svg{display:block;width:100%;height:100%;cursor:pointer;user-select:none}
.iku-art__svg *{transition:fill 1.4s ease,opacity 1.4s ease}
.iku-art__svg stop{transition:stop-color 1.6s ease}
.iku-art__vert{position:absolute;right:12px;top:18px;margin:0;writing-mode:vertical-rl;font-family:var(--caps);font-size:12px;letter-spacing:.32em;color:var(--ink);opacity:.8;pointer-events:none;
  display:flex;align-items:center;gap:10px}
.iku-art__vert span{font-family:var(--serif);font-size:20px;letter-spacing:.2em}
.iku-art__vert::before,.iku-art__vert::after{content:"";width:1px;height:28px;background:linear-gradient(var(--gold-2),transparent)}
.iku-art__hint{position:absolute;left:50%;bottom:20%;transform:translateX(-50%);padding:6px 14px;border-radius:999px;
  background:rgba(27,42,94,.78);color:#fff;font-size:12.5px;white-space:nowrap;pointer-events:none;border:1px solid rgba(236,211,143,.5);
  animation:iku-hint 7s 2.5s ease both}
@keyframes iku-hint{0%{opacity:0;transform:translate(-50%,8px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.i-stars{opacity:0}
.i-trims{opacity:.85}
.i-chofa{fill:none;stroke:url(#i-gold);stroke-width:1.6;stroke-linecap:round}
.i-win{fill:#f3dc9a;opacity:.25}
.i-chime circle{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.i-temple{cursor:pointer}
.i-temple.is-ring .i-chime circle{animation:iku-ring 1.6s ease-out}
.i-temple.is-ring .i-chime circle+circle{animation-delay:.35s}
.i-temple:hover .i-trims{opacity:1;filter:drop-shadow(0 0 3px rgba(243,220,154,.9))}

/* คืนลอยโคม (แตะดวงอาทิตย์) */
.hero.is-night .iku-art{--s1:#0b1433;--s2:#1d2a5c;--s3:#35407a;--far1:#2a3768;--far2:#34427a;--near1:#16224f;--near2:#0b1433;
  --w1:#1c2b66;--w2:#070d26;--c:#5a6699;--cs:#2a3566;--bird:#9aa6d6}
.hero.is-night .i-stars{opacity:1}
.hero.is-night .i-sunglow,.hero.is-night .i-rays{opacity:.08}
.hero.is-night .i-sun{fill:#f6efd6}
.hero.is-night .i-win{opacity:1;filter:drop-shadow(0 0 3px #ffcf6b)}
.hero.is-night .i-trims{opacity:1;filter:drop-shadow(0 0 2px rgba(243,220,154,.8))}
.hero.is-night .i-lantern use{filter:drop-shadow(0 0 6px rgba(255,170,70,.9))}

/* การเคลื่อนไหวในภาพ */
.i-rays{transform-box:view-box;transform-origin:500px 70px;animation:iku-rays 14s ease-in-out infinite}
.i-ray{animation:iku-ray 6s ease-in-out infinite}
.i-ray--1{animation-delay:-2s}.i-ray--2{animation-delay:-4s}
.i-sun{cursor:pointer;transform-box:fill-box;transform-origin:50% 50%;animation:iku-pulse 5s ease-in-out infinite;transition:fill 1.4s}
.i-clouds{transform:translate(calc(var(--mx) * -14px),calc(var(--my) * -6px));transition:transform .8s var(--ease)}
.i-cloud{animation:iku-drift 26s ease-in-out infinite alternate}
.i-cloud--b{animation-duration:32s;animation-delay:-8s}.i-cloud--c{animation-duration:38s;animation-delay:-14s}.i-cloud--d{animation-duration:29s;animation-delay:-4s}
.i-temple{transform:translate(calc(var(--mx) * 6px),0);transition:transform .8s var(--ease)}
.i-bird{animation:iku-fly 10s ease-in-out infinite}.i-bird--2{animation-delay:-3s}.i-bird--3{animation-delay:-6s}
.i-glint{animation:iku-glint 4s var(--d,0s) ease-in-out infinite}
.i-boat{transform-box:fill-box;transform-origin:50% 100%;animation:iku-rock 4s ease-in-out infinite;cursor:pointer}
.i-boat.is-go{animation:iku-boat 4s var(--ease) both}
.i-lantern{transform-box:fill-box;transform-origin:50% 50%;animation:iku-float 9s var(--d,0s) ease-in-out infinite}
.i-up{transform-box:fill-box;transform-origin:50% 50%;animation:iku-rise 7s cubic-bezier(.3,.1,.4,1) forwards;pointer-events:none}

@keyframes iku-rays{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes iku-ray{0%,100%{opacity:.35}50%{opacity:.95}}
@keyframes iku-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes iku-drift{from{transform:translateX(-20px)}to{transform:translateX(24px)}}
@keyframes iku-fly{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,-12px)}}
@keyframes iku-glint{0%,100%{opacity:.15}50%{opacity:.9}}
@keyframes iku-rock{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-3px) rotate(1.5deg)}}
@keyframes iku-boat{0%{transform:translateX(0)}45%{transform:translateX(520px);opacity:0}55%{transform:translateX(-360px);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes iku-float{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(4px,-14px) rotate(3deg)}}
@keyframes iku-rise{0%{transform:translateY(0) scale(.4);opacity:0}12%{transform:translateY(-20px) scale(1);opacity:1}100%{transform:translate(var(--dx,20px),-560px) scale(.55);opacity:0}}
@keyframes iku-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(6)}}

/* ตัวหนังสือฮีโร่ */
.hero__eyebrow{order:1;margin:-36px 0 6px;position:relative;z-index:1;display:flex;align-items:center;gap:12px;
  font-family:var(--caps);font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.hero__eyebrow::before,.hero__eyebrow::after{content:"";width:40px;height:10px;background:var(--arrow) center/contain no-repeat}
.hero__eyebrow::before{transform:scaleX(-1)}
.hero__title{order:2;font-family:var(--serif);font-size:clamp(38px,9vw,74px);line-height:1.12;margin:0 0 6px;color:var(--ink);text-wrap:balance;
  text-shadow:0 1px 0 #fff,0 10px 30px rgba(27,42,94,.12)}
.hero__lead{order:3;color:var(--ink-2);margin:0 0 22px;padding-top:22px;position:relative}
.hero__lead::before{content:"";position:absolute;left:0;top:0;width:150px;height:16px;background:var(--flourish) left center/contain no-repeat}
.hero__search{order:4;max-width:600px}
.hero .search-form{padding:6px;border-radius:999px;background:#fff;border:1px solid color-mix(in srgb,var(--gold-2) 45%,var(--line));box-shadow:var(--shadow)}
.hero .search-form input{border:0;background:transparent;min-height:48px}
.hero .search-form input:focus{outline:none}
.hero .search-form:focus-within{border-color:var(--gold-2);box-shadow:0 0 0 4px rgba(201,162,76,.18),var(--shadow)}
.search-form button{background:var(--ink);transition:background .2s,transform .2s var(--ease)}
.search-form button:hover{background:var(--accent);transform:scale(1.03)}

/* เหรียญคำมั่น */
.hero__vows{order:5;list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0;max-width:600px}
.vow{display:grid;grid-template-columns:52px 1fr;column-gap:14px;align-items:center;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--gold-2) 30%,transparent)}
.vow:last-child{border-bottom:1px solid color-mix(in srgb,var(--gold-2) 30%,transparent)}
.vow__medal{grid-row:1 / span 2;width:52px;height:52px;border-radius:50%;
  background:var(--icon) center/26px no-repeat,radial-gradient(circle at 35% 30%,#3d5aa8,#1b2a5e 70%);
  box-shadow:0 0 0 2px #fff,0 0 0 3px var(--gold-2),0 8px 18px -8px rgba(27,42,94,.6);transition:transform .6s var(--ease)}
.vow:hover .vow__medal{transform:rotate(360deg)}
.vow__t{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--ink);line-height:1.3}
.vow__d{font-size:14px;color:var(--ink-3);line-height:1.5}
.vow--src{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ecd38f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h7a2 2 0 0 1 2 2v12a2 2 0 0 0-2-2H4zM20 5h-5a2 2 0 0 0-2 2v12a2 2 0 0 1 2-2h5z'/%3E%3C/svg%3E")}
.vow--date{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ecd38f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4M9 15l2 2 4-4'/%3E%3C/svg%3E")}
.vow--true{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ecd38f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6 .7-4.5 4.1 1.2 6L12 16.4 6.7 19.4l1.2-6L3.4 9.3l6-.7z'/%3E%3C/svg%3E")}

@media (max-width:899px){.hero__title{margin-top:4px}}
@media (max-width:599px){
  .hero__eyebrow{font-size:11.5px;letter-spacing:.18em;white-space:nowrap;gap:8px}
  .hero__eyebrow::before,.hero__eyebrow::after{width:26px}
  .iku-art__vert{display:none}
}
@media (min-width:900px){
  .hero{padding:28px 0 64px}
  .hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:48px;align-items:center}
  .hero__in>*:not(.iku-art){grid-column:1}
  .iku-art{grid-column:2;grid-row:1 / span 6;margin:-28px calc(var(--gutter) * -1) 0 0;height:min(84vh,720px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%),linear-gradient(180deg,#000 80%,transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent,#000 16%),linear-gradient(180deg,#000 80%,transparent);mask-composite:intersect}
  .hero__eyebrow{margin-top:0}
}

/* กลีบลีลาวดีลอย + ประกายทอง */
.iku-petal{position:absolute;top:0;left:0;z-index:2;width:22px;height:22px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-26 -26 52 52'%3E%3Cg fill='%23fffaf2' stroke='%23ead9bf' stroke-width='1'%3E%3Cpath d='M0 0C-7-6-6-20 0-24C6-20 7-6 0 0Z'/%3E%3Cpath d='M0 0C-7-6-6-20 0-24C6-20 7-6 0 0Z' transform='rotate(72)'/%3E%3Cpath d='M0 0C-7-6-6-20 0-24C6-20 7-6 0 0Z' transform='rotate(144)'/%3E%3Cpath d='M0 0C-7-6-6-20 0-24C6-20 7-6 0 0Z' transform='rotate(216)'/%3E%3Cpath d='M0 0C-7-6-6-20 0-24C6-20 7-6 0 0Z' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='5' fill='%23f7c948'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 4px 6px rgba(27,42,94,.18));animation:iku-petal var(--t,12s) linear forwards}
@keyframes iku-petal{
  0%{transform:translate(var(--x0),var(--y0)) rotate(0);opacity:0}
  8%{opacity:1}
  50%{transform:translate(calc((var(--x0) + var(--x1)) / 2),calc(var(--y0) + 60px)) rotate(200deg)}
  92%{opacity:1}
  100%{transform:translate(var(--x1),var(--y1)) rotate(420deg);opacity:0}}
.iku-spark{position:fixed;z-index:60;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff 0 30%,#ecd38f 55%,transparent 70%);animation:iku-spark .8s ease-out forwards}
@keyframes iku-spark{to{transform:translate(var(--sx),var(--sy)) scale(.2);opacity:0}}

/* ---------- หัวข้อบล็อก: ป้ายอังกฤษตัวทอง + เส้นลาย ---------- */
.block__title{display:flex;flex-direction:column;gap:2px;font-size:clamp(24px,3.4vw,32px);color:var(--ink)}
.block__title::after{content:"";width:120px;height:14px;margin-top:6px;background:var(--flourish) left center/contain no-repeat}

/* ---------- หมวด: แถวป้ายอังกฤษ + แผงมุมตัด ---------- */
.sections{gap:14px;grid-template-columns:1fr}
@media (min-width:700px){.sections{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.sections{grid-template-columns:repeat(3,1fr)}}
.sections__item{--lbl:"Destinations";--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ecd38f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 40h28M13 40v-3h22v3M16 37c0-9 3.5-13 8-13s8 4 8 13M22.5 24 24 8l1.5 16'/%3E%3Ccircle cx='24' cy='7' r='1.5'/%3E%3C/svg%3E")}
.sections__item--where-to-stay{--lbl:"Where to stay";--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ecd38f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 36V16M6 28h36v8M42 36V24a4 4 0 0 0-4-4H22v8M10 24a3 3 0 1 0 6 0 3 3 0 0 0-6 0'/%3E%3C/svg%3E")}
.sections__item--getting-around{--lbl:"Getting around";--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ecd38f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='12' y='8' width='24' height='26' rx='5'/%3E%3Cpath d='M12 22h24M18 34l-4 6M30 34l4 6M17 29h2M29 29h2'/%3E%3C/svg%3E")}
.sections__item--food{--lbl:"Food";--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ecd38f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 24h32a16 14 0 0 1-32 0zM18 18c-2-3 2-5 0-8M24 18c-2-3 2-5 0-8M30 18c-2-3 2-5 0-8M16 38h16'/%3E%3C/svg%3E")}
.sections__item--itineraries{--lbl:"Itineraries";--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ecd38f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l12-4 12 4 12-4v28l-12 4-12-4-12 4z M18 8v28M30 12v28'/%3E%3C/svg%3E")}
.sections__item--seasons{--lbl:"Seasons";--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ecd38f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='7'/%3E%3Cpath d='M24 6v5M24 37v5M6 24h5M37 24h5M11 11l3.5 3.5M33.5 33.5 37 37M11 37l3.5-3.5M33.5 14.5 37 11'/%3E%3C/svg%3E")}
.sections a{position:relative;display:grid;grid-template-columns:1fr 104px;grid-template-rows:auto auto;align-items:center;column-gap:14px;
  min-height:104px;padding:12px 12px 12px 18px;border-radius:4px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.sections a::after{content:"";grid-column:2;grid-row:1 / span 2;align-self:stretch;min-height:80px;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  background:var(--ic) center/46px no-repeat,linear-gradient(150deg,#4d6ec0,#1b2a5e 75%);transition:filter .4s}
.sections a::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(236,211,143,.35),transparent);transition:left .8s var(--ease)}
.sections a:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--gold-2)}
.sections a:hover::before{left:120%}
.sections a:hover::after{filter:brightness(1.15)}
.sections__name{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink);align-self:end}
.sections__name::before{content:var(--lbl);display:flex;align-items:center;gap:8px;font-family:var(--caps);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.sections__count{grid-column:1;align-self:start;justify-self:start;margin-top:4px;background:var(--accent-soft);color:var(--ink-2)}

/* ---------- การ์ด: ภาพมุมตัด ---------- */
.card{border-radius:6px;border-color:var(--line);border-top:2px solid var(--gold-2);background:#fff;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card__img{padding:10px 10px 0}
.card__img .hero-img{clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.card__img img{transition:transform .9s var(--ease)}
.card:hover .card__img img{transform:scale(1.05)}
.kicker{font-family:var(--caps);font-size:11.5px;letter-spacing:.16em;color:var(--gold)}
.chips a{border-color:color-mix(in srgb,var(--gold-2) 35%,var(--line));transition:transform .25s var(--ease),background .25s}
.chips a:hover{transform:translateY(-2px);background:var(--accent-soft);color:var(--ink)}
.route-list a{transition:transform .25s var(--ease),border-color .25s}
.route-list a:hover{transform:translateX(4px);border-color:var(--gold-2)}

/* ---------- หน้าบทความ ---------- */
.article__title{color:var(--ink);font-size:clamp(30px,6.4vw,48px)}
.prose h2{padding-top:18px;position:relative}
.prose h2::before{content:"";position:absolute;left:0;top:0;width:90px;height:12px;background:var(--flourish) left center/contain no-repeat}
.prose blockquote{border-left-color:var(--gold-2);font-family:var(--serif)}
.is-style-tec-tip{background:var(--accent-soft);border-left-color:var(--accent)}
.is-style-tec-day{border-top:2px solid var(--gold-2)}
.is-style-tec-day>h3:first-child,.is-style-tec-day>h2:first-child{color:var(--ink);font-family:var(--serif)}
.tec-kind{color:var(--gold)}
.tec-leg__mode{background:var(--accent)}
.list-head h1::after{content:"";display:block;width:120px;height:14px;margin-top:8px;background:var(--flourish) left center/contain no-repeat}

/* ---------- ท้ายเว็บ: ฟ้ากลางคืน ดาว โคมลอย ---------- */
.site-foot{position:relative;margin-top:80px;background:
  radial-gradient(1px 1px at 12% 30%,#fff8de 50%,transparent 51%),radial-gradient(1px 1px at 32% 70%,#fff8de 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 58% 22%,#fff8de 50%,transparent 51%),radial-gradient(1px 1px at 78% 60%,#fff8de 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 90% 18%,#fff8de 50%,transparent 51%),radial-gradient(1px 1px at 45% 45%,#fff8de 50%,transparent 51%),
  linear-gradient(180deg,#1b2a5e,#0b1433);color:#cfd6ee;overflow:hidden}
.site-foot::before{content:"";position:absolute;left:50%;top:14px;width:180px;height:18px;margin-left:-90px;background:var(--flourish) center/contain no-repeat;opacity:.9}
.site-foot::after{content:"";position:absolute;right:10%;bottom:-40px;width:18px;height:26px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -30 40 60'%3E%3Cpath d='M-10 -14Q0 -20 10 -14L8 12Q0 15 -8 12Z' fill='%23ffd38a' stroke='%23e0913a'/%3E%3Cellipse cy='10' rx='3' ry='4' fill='%23fff6d6'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 8px rgba(255,170,70,.9));animation:iku-footlantern 22s linear infinite}
@keyframes iku-footlantern{0%{transform:translate(0,0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translate(-120px,-420px);opacity:0}}
.site-foot__in{padding-top:28px}
.foot__tag,.foot__note{color:#a9b3d6}
.foot__copy{color:#8590b8}
.foot__links a{color:#fff}
.foot__links a:hover{color:var(--gold-3)}

/* ---------- ข้อความแซว + โคมฉลอง ---------- */
.iku-toast{position:fixed;left:50%;bottom:22px;z-index:90;max-width:calc(100vw - 32px);padding:11px 20px;border-radius:14px;
  background:rgba(27,42,94,.94);color:#fff;border:1px solid rgba(236,211,143,.55);box-shadow:var(--shadow-lg);font-size:15px;text-align:center;
  transform:translate(-50%,24px) scale(.96);opacity:0;pointer-events:none;transition:transform .45s var(--ease),opacity .3s}
.iku-toast.is-on{transform:translate(-50%,0) scale(1);opacity:1}

/* เผยทีละส่วนตอนเลื่อน (เฉพาะเมื่อ JS ทำงาน) */
.iku-reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--rd,0s)}
.iku-reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  .iku-art__hint{display:none}
  .iku-reveal{opacity:1!important;transform:none!important}
}
@media print{.iku-art,.hero__vows,.iku-toast,.iku-progress,.iku-petal{display:none!important}.site-foot::after{display:none}}