/*!
Stylesheet: KTO Design 2026 — Homepage
Description: Layout scaffold for the Korea Tourism Organisation 2026 homepage redesign.
*/

/* ─── Fonts ──────────────────────────────────────────────────────────────── */
@font-face{font-family:'Aloevera'; src:url('../fonts/Aloevera-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'Aloevera'; src:url('../fonts/Aloevera-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap;}
@font-face{font-family:'Aloevera'; src:url('../fonts/Aloevera-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap;}
@font-face{font-family:'Cerebri Sans'; src:url('../fonts/CerebriSansPro.woff2') format('woff2'), url('../fonts/CerebriSansPro.woff') format('woff'), url('../fonts/CerebriSansPro.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'Inter'; src:url('../fonts/Inter-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'Inter'; src:url('../fonts/Inter-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap;}

/* ─── Variables ─────────────────────────────────────────────────────────── */
:root {--primary-color:#012D67; --secondary-color:#f7d076; --red-color:#ED1B25; --gold-color:#ffe4a6; --brown-color:#c6a185; --hero-bg:#06122e; --section-bg:#0d2c5e; --dark-bg:#07142e; --page-top:#012F66; --footer-dark:#000F21; --line:rgba(255,255,255,0.18); --content-width:1200px; --heading-font:'Aloevera',Arial,sans-serif; --body-font:'Cerebri Sans','Helvetica Neue',Arial,sans-serif;}

/* ─── Base ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;}
body{position:relative; margin:0; color:#dfe6f5; font-size:16px; font-weight:400; line-height:1.6; font-family:var(--body-font); background:linear-gradient(180deg, var(--page-top) 0%, var(--footer-dark) 65%);}

/* ─── Page lantern background (footer-bg, bottom-anchored) ───────────────── */
.site-content{position:relative; isolation:isolate; background-image:url('../images/footer-bg.png'); background-repeat:no-repeat; background-position:center bottom; background-size:min(100%, 1920px);}
.site-content::after{content:""; position:absolute; left:0; right:0; bottom:0; height:min(92.3vw, 1772px); z-index:-2; pointer-events:none; background:linear-gradient(rgba(3,10,25,0) 42%, rgba(3,10,25,1) 80%);}

/* ─── Floating lanterns (decorative layer; animation added later) ──────────── */
.lanterns{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;}
.lantern{position:absolute; display:block; transform:translate(-50%,-50%); will-change:transform;}
.lantern-img{display:block; width:100%; height:auto; will-change:transform; filter:drop-shadow(0 0 24px rgba(255,150,40,0.45));}
h1,h2,h3,h4,h5{margin:0 0 0.4em; color:#fff; line-height:1.1; font-family:var(--heading-font); font-weight:700;}
p{margin:0 0 1em;}
a{color:inherit; text-decoration:none;}
p a{text-decoration:underline;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}

/* ─── Layout ─────────────────────────────────────────────────────────────── */
/* Smooth in-page anchor scrolling (e.g. Offers category quick-nav), disabled
   for users who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} }
.container{width:100%; max-width:var(--content-width); margin:0 auto; padding:0 24px;}
section{position:relative;}

/* ─── Utilities ──────────────────────────────────────────────────────────── */
.eyebrow{text-transform:uppercase; letter-spacing:4px; font-size:0.8em; color:rgba(255,255,255,0.6); margin-bottom:8px;}

/* ─── Button ─────────────────────────────────────────────────────────────── */
.btn{display:inline-block; padding:14px 48px; border-radius:9999px; background:var(--primary-color); color:#fff; font-family:'Inter',sans-serif; font-size:18px; font-weight:600; line-height:normal; letter-spacing:3.525px; text-transform:uppercase; text-align:center; white-space:nowrap; cursor:pointer; border:1px solid var(--line); transition:color 0.3s ease, background 0.3s ease;}
.btn:hover{background:#02377d; color:#fff;}

/* ─── Rainbow stroke (header / hero CTA, feature CTA, active offer tab) ───── */
:root{--rainbow:linear-gradient(90deg, #E7262F 0%, #F8CD70 37%, #00ABD7 67%, #9F2C8A 100%);}
.btn-rainbow{position:relative; background:rgba(0,0,0,0.28); color:#DADADA; border:0; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
.btn-rainbow:hover{background:rgba(0,0,0,0.55); color:#fff;}
.btn-rainbow::before, .guide-cta .wp-block-button__link::before, .guide-card-link a::before, .subtab-link.is-active::before, .faq-inner::before, .faq-item::before, .creator-quote-card::before, .creator-aside .wp-block-quote::before, .insta-feed-embed::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:2.1px; background:var(--rainbow); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude; pointer-events:none;}
.faq-item::before{opacity:0.5;}

/* ─── Floating header ────────────────────────────────────────────────────── */
.site-header{position:absolute; top:24px; left:0; right:0; z-index:50;}
.header-inner{display:flex; align-items:center; gap:24px; background:rgba(1,45,103,0.55); border:1px solid var(--line); border-radius:50px; padding:8px 28px; backdrop-filter:blur(8px);}
.site-header .logo{display:block;}
.site-header .logo img{height:60px; width:auto;}
.main-nav{margin-left:auto;}
.main-nav ul{display:flex; gap:28px;}
.main-nav a{font-size:0.95em; color:#e7ecf8;}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-ancestor > a,
.main-nav .current-menu-parent > a{color:var(--secondary-color);}
.header-btn{padding:12px 28px; font-size:14px; letter-spacing:2px;}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative; min-height:46.8vw; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.hero-bg{position:absolute; inset:0; z-index:0; will-change:transform; transform:scale(1.12);}
/* Progressive load: the small "medium" preview paints instantly (blurred) and
   the full image (set by main.js) fades in over it. Both layers sit inside the
   parallax-transformed .hero-bg so they move together. */
.hero-bg-thumb, .hero-bg-full{position:absolute; inset:0; background-repeat:no-repeat; background-position:center top; background-size:100% auto;}
.hero-bg-thumb{filter:blur(16px); transform:scale(1.06);}
.hero-bg-full{opacity:0; transition:opacity .6s ease;}
.hero-bg-full.is-loaded{opacity:1;}
.hero-inner{position:relative; z-index:1; text-align:center;}
.hero-title{display:block; margin:0;}
.hero-lockup{display:block; width:100%; max-width:1280px; height:auto; margin:0 auto; will-change:transform;}
.hero-btn{position:absolute; left:50%; bottom:calc(15% - 25px); z-index:2; transform:translateX(-50%); margin:0;}
/* Korea Theme Page: hero auto-fits the height of its background banner image.
   --hero-ratio is set inline per page from the featured image's dimensions. */
.page-template-template-korea-theme-page .hero{min-height:0; aspect-ratio:var(--hero-ratio, 1920 / 1248); margin-bottom:50px;}
/* Offers page: heading text lockup 30% smaller than the default hero lockup. */
.page-template-template-offers .hero-lockup{max-width:896px;}

/* ─── Intro ──────────────────────────────────────────────────────────────── */
.intro{padding:80px 0;}
.intro-inner{max-width:760px; margin:0 auto; text-align:center;}
.intro-title{font-size:2.6em; font-weight:500;}
.tabs-title{text-align:center; font-size:2.4em; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:48px; color:#fff;}

/* ─── Default Page (template-default-page.php) ────────────────────────────── */
/* Generic content page: homepage hero on top, the_content() body in the middle,
   shared FAQ + Newsletter below. The body is authored in the block editor, so
   these rules style both core blocks and hand-written HTML (e.g. the imported
   Privacy Policy markup: .page-section / .post-title / .dash-list / .mt10). */
.page-main{padding:70px 0 90px;}
.page-main-inner{max-width:900px; margin:0 auto;}
.page-main-title{text-align:center; font-size:2.8em; font-weight:600; margin:0 0 48px;}
.page-content{color:#dfe6f5; font-size:1.05em; line-height:1.7;}
.page-content > :first-child{margin-top:0;}
.page-content h2, .page-content h3, .page-content h4, .page-content .post-title{color:#fff; margin:1.8em 0 0.6em; line-height:1.2;}
.page-content h2{font-size:1.8em;}
.page-content h3, .page-content .post-title{font-size:1.4em;}
.page-content h4{font-size:1.2em;}
.page-content p{margin:0 0 1em;}
.page-content strong{color:#fff; font-weight:600;}
.page-content a{color:var(--secondary-color); text-decoration:underline; text-underline-offset:2px;}
.page-content a:hover{color:#fff;}
.page-content img{border-radius:10px; margin:1.2em 0;}
.page-content ul, .page-content ol{margin:0 0 1em; padding-left:1.5em;}
.page-content ul{list-style:disc;}
.page-content ol{list-style:decimal;}
.page-content li{margin:0.5em 0;}
/* Dash-marker lists carried over from the legacy Divi privacy markup. */
.page-content .dash-list{list-style:none; padding-left:1.4em;}
.page-content .dash-list > li{position:relative;}
.page-content .dash-list > li::before{content:"—"; position:absolute; left:-1.4em; color:var(--secondary-color);}
.page-content .page-section{margin:0 0 1.6em;}
.page-content .mt10{margin-top:10px;}
@media (max-width:768px){
  .page-main{padding:48px 0 64px;}
  .page-main-title{font-size:2em; margin-bottom:32px;}
}

/* ─── Korea Theme Page sections (template-korea-theme-page.php) ───────────── */
/* Replaces the homepage intro/tabs: a guide grid, an offers block, the
   content-creator two-column section and the "Discover Korea" section. */
.guide-section{padding:0;}
.offers-section{padding:60px 0 0;}

/* Guide to Korean Culture — header row + three image cards. */
.guide-head{display:flex; justify-content:space-between; align-items:center; gap:30px; margin-bottom:40px;}
.guide-title{font-size:2.6em; font-weight:800; text-transform:uppercase; line-height:1.1;}
.guide-sub{margin-top:12px; color:rgba(255,255,255,0.6); max-width:520px;}
.guide-cta{flex:0 0 auto;}
.guide-grid{display:flex; gap:24px;}
.guide-card{position:relative; flex:1 1 0; min-width:0; min-height:300px; padding:28px; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; color:#fff; text-decoration:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3); background-size:cover; background-position:center;}
.guide-card::after{content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(to bottom, rgba(4,25,73,0.85) 0%, rgba(4,25,73,0.15) 45%, rgba(4,25,73,0.6) 100%);}
.guide-card-top,.guide-card-btn{position:relative; z-index:1;}
.guide-card-eyebrow{text-transform:uppercase; letter-spacing:3px; font-size:0.72em; font-weight:700; color:rgba(255,255,255,0.85); margin-bottom:10px;}
.guide-card-title{font-size:1.5em; font-weight:800; line-height:1.18;}
.guide-card-btn{align-self:flex-start; margin-top:24px; padding:9.8px 33.6px; font-size:12.6px; letter-spacing:2.5px;}

/* Block-editor version: Group .guide-body authored in the page content, with
   the three info cards built from core Media & Text blocks. Reuses the
   hardcoded overlay-card design while keeping text/images editable. */
.guide-body{margin:0;}
/* Core Group blocks wrap their children in __inner-container — put the flex
   layouts there rather than on the .guide-head / .guide-grid wrappers. */
.guide-body .guide-head{margin-bottom:40px;}
.guide-body .guide-head{display:flex; justify-content:space-between; align-items:center; gap:30px; width:100%;}
.guide-body .guide-head > .wp-block-group__inner-container{display:flex; justify-content:space-between; align-items:center; gap:30px; width:100%;}
.guide-grid > .wp-block-group__inner-container{display:flex; gap:24px;}
.guide-body .guide-title{margin:0;}
.guide-body .guide-sub{margin:12px 0 0;}
.guide-cta-wrap{flex:0 0 auto; margin:0 0 0 auto; display:flex; align-items:center; justify-content:flex-end;}
.guide-cta .wp-block-button__link{position:relative; display:inline-block; padding:14px 48px; border-radius:9999px; background:rgba(0,0,0,0.28); color:#DADADA; font-family:'Inter',sans-serif; font-size:18px; font-weight:600; letter-spacing:3.525px; text-transform:uppercase; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:color 0.3s ease, background 0.3s ease;}
.guide-cta .wp-block-button__link:hover{background:rgba(0,0,0,0.55); color:#fff;}
/* Media & Text cards authored in the backend map back to the original
   hardcoded guide-card design: full-card image, gradient overlay and CTA pill. */
.guide-grid .guide-card.wp-block-media-text{position:relative; flex:1 1 0; min-width:0; min-height:300px; padding:0; border-radius:18px; overflow:hidden; display:block; color:#fff; text-decoration:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3); background:rgba(255,255,255,0.04);}
.guide-grid .guide-card.wp-block-media-text::after{content:""; position:absolute; inset:0; z-index:1; display:block; background:linear-gradient(to bottom, rgba(4,25,73,0.85) 0%, rgba(4,25,73,0.15) 45%, rgba(4,25,73,0.6) 100%);}
.guide-grid .guide-card .wp-block-media-text__media{position:absolute; inset:0; z-index:0; margin:0; width:100%; height:100%;}
.guide-grid .guide-card .wp-block-media-text__media img{width:100%; height:100%; object-fit:cover; display:block;}
.guide-grid .guide-card .wp-block-media-text__content{position:relative; z-index:2; min-height:300px; margin:0; padding:28px; display:flex; flex-direction:column; gap:10px;}
.guide-grid .guide-card .guide-card-eyebrow{margin:0;}
.guide-grid .guide-card .guide-card-title{margin:0; font-size:1.5em;}
.guide-grid .guide-card .guide-card-link{margin:auto 0 0;}
.guide-grid .guide-card .guide-card-link a{position:relative; display:inline-block; padding:9.8px 33.6px; border-radius:9999px; background:rgba(0,0,0,0.28); color:#DADADA; font-size:12.6px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; text-decoration:none; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:color 0.3s ease, background 0.3s ease;}
.guide-grid .guide-card .guide-card-link a:hover{background:rgba(0,0,0,0.55); color:#fff;}
@media (max-width:980px){
  .guide-body .guide-head{flex-direction:column; align-items:flex-start; gap:18px;}
  .guide-body .guide-head > .wp-block-group__inner-container{flex-direction:column; align-items:flex-start; gap:18px;}
  .guide-cta-wrap{margin-left:0; justify-content:flex-start;}
  .guide-grid > .wp-block-group__inner-container{flex-direction:column;}
}

/*-------------------------------------------------------------*
 * Offers page (template-offers.php)
 *-------------------------------------------------------------*/

/* Category quick-nav — four image cards overlapping the hero (Figma Group 3499).
   Hover mirrors the homepage theme tabs: lift + gradient intensify. */
.offers-cats-wrap{position:relative; z-index:2; margin-top:-110px;}
.offers-cats{display:flex; gap:12px; padding:12px; background:#fff; border-radius:24px; box-shadow:0 30px 60px rgba(0,0,0,0.35);}
.offers-cat{position:relative; flex:1 1 0; min-width:0; aspect-ratio:316 / 226; border-radius:20px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; background-color:#0b2a55; background-size:cover; background-position:center; transition:transform 0.3s ease, box-shadow 0.3s ease;}
.offers-cat::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom, rgba(var(--cat,4,159,231),0) 13%, rgba(var(--cat,4,159,231),1) 100%); transition:background 0.3s ease;}
.offers-cat:hover{transform:translateY(-4px);}
.offers-cat:hover::after{background:linear-gradient(to bottom, rgba(var(--cat,4,159,231),0.5) 11%, rgba(var(--cat,4,159,231),1) 100%);}
.offers-cat--flight{--cat:159,44,140;}
.offers-cat--stay{--cat:0,171,216;}
.offers-cat--tours{--cat:248,205,114;}
.offers-cat--activities{--cat:233,42,49;}
.offers-cat-label{position:relative; z-index:2; display:flex; align-items:center; gap:8px; padding:0 18px 20px; color:#fff; font-family:var(--heading-font); font-weight:700; font-size:1.25em; line-height:1.1; letter-spacing:0.3px; white-space:nowrap;}
.offers-cat-arrow{flex:0 0 auto; width:22px; height:8px; background:#fff; -webkit-mask:url('../images/offers-cat-arrow.png') no-repeat left center; mask:url('../images/offers-cat-arrow.png') no-repeat left center; -webkit-mask-size:contain; mask-size:contain;}
/* Icon revealed in the centre on hover — mirrors the homepage .tab-card-icon. */
.offers-cat-icon{position:absolute; top:42%; left:50%; transform:translate(-50%,-50%); width:auto; height:54px; max-width:60%; z-index:2; opacity:0; transition:opacity 0.3s ease;}
.offers-cat:hover .offers-cat-icon{opacity:1;}

/* Special-offers sections — centred head, 3-col deal grid, load-more. */
.special-offers{padding:70px 0; scroll-margin-top:24px;}
.special-offers + .special-offers{padding-top:0;}
.special-offers-head{text-align:center; margin-bottom:44px;}
.special-offers-icon{display:inline-flex; align-items:center; justify-content:center; gap:14px; color:rgba(255,255,255,0.85); margin-bottom:16px;}
.special-offers-icon-img{display:block; width:auto; height:46px;}
.special-offers-icon-img--plane{height:49px;}
.special-offers-icon-img--hotel{height:41px;}
.special-offers-icon-img--tours{height:45px;}
.special-offers-icon-img--activities{height:46px;}
.special-offers-icon-dot{flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:currentColor;}
.special-offers-title{font-size:2.2em; font-weight:800;}
.special-offers-desc{max-width:720px; margin:14px auto 0; color:rgba(255,255,255,0.85); font-size:1.05em; line-height:1.5;}
.special-offers-more{text-align:center; margin-top:44px;}
.special-offers-more .btn.is-loading{opacity:0.65; pointer-events:none;}

.deal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.deal-card{display:flex; border-radius:18px; padding:2.4px; background:var(--rainbow);}
.deal-card-link{display:flex; flex-direction:column; flex:1 1 auto; border-radius:15.6px; overflow:hidden; background:#fff; color:var(--primary-color); text-decoration:none;}
.deal-card-media{position:relative; display:flex; align-items:flex-end; flex:0 0 auto; height:220px; background-size:cover; background-position:center;}
.deal-card-media::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(1,21,52,0.92) 0%, rgba(1,21,52,0.45) 38%, rgba(1,21,52,0) 70%);}
.deal-card-cap{position:relative; z-index:1; width:100%; padding:18px 18px 16px; color:#fff;}
.deal-card-eyebrow{display:block; text-transform:uppercase; letter-spacing:3px; font-size:0.68em; font-weight:700; color:rgba(255,255,255,0.85); margin-bottom:8px;}
.deal-card-title{display:block; font-size:1.18em; font-weight:800; line-height:1.2;}
.deal-card-foot{display:flex; flex:0 0 auto; justify-content:space-between; align-items:center; gap:14px; height:104px; padding:16px 18px;}
.deal-meta{display:flex; flex-direction:column; justify-content:center; gap:7px; align-self:stretch; font-size:0.82em; min-width:0;}
.deal-meta-item{display:flex; align-items:flex-start; gap:8px; min-width:0;}
.deal-meta-item svg{flex:0 0 auto; margin-top:2px; color:var(--secondary-color);}
.deal-meta-text{min-width:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;}
.deal-provider{flex:0 1 auto; min-width:30%; max-width:40%; display:flex; align-items:center; justify-content:flex-end;}
.deal-provider img{max-height:50px; max-width:100%; width:auto; object-fit:contain; display:block;}
.deal-provider-text{font-family:'Inter',sans-serif; font-weight:800; font-size:1em; letter-spacing:-0.3px; color:var(--primary-color); text-transform:none;}
.deal-empty{grid-column:1 / -1; margin:0; padding:30px 0; text-align:center; color:rgba(255,255,255,0.6);}

/* Themed tabs (Know/Feel/Taste/Live/Play Korea) — restyle of the .subtab-link
   pattern so the existing sub-tab JS still drives them. */
/* Themed tab strip — each tab's fill comes from its --theme colour (set inline
   from the ACF "Theme Tabs" repeater). The active tab swaps the flat fill for a
   brush stroke in the same colour (overflow:visible lets it bleed past edges). */
.subtab-nav.ko-tabs{gap:0; flex-wrap:nowrap; border-radius:14px; overflow:visible; margin:30px 0 40px;}
.ko-tabs .ko-tab{position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:6px; padding:16px 22px; border:0; border-radius:0; color:#fff; text-transform:none; letter-spacing:normal; background:rgba(var(--theme,4,159,231),1); opacity:1; transition:background 0.25s ease;}
.ko-tabs .ko-tab > *{position:relative; z-index:1;}
.ko-tabs .ko-tab::before{content:none;}
.ko-tabs .ko-tab:first-child{border-top-left-radius:14px; border-bottom-left-radius:14px;}
.ko-tabs .ko-tab:last-child{border-top-right-radius:14px; border-bottom-right-radius:14px;}
.ko-tabs .ko-tab:not(.is-active):hover{background:color-mix(in srgb, rgb(var(--theme,4,159,231)) 65%, #fff);}
.ko-tabs .ko-tab.is-active{background:transparent; opacity:1;}
.ko-tabs .ko-tab.is-active::before{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:118%; height:150%; z-index:0; padding:0; background:rgba(var(--theme,4,159,231),1); -webkit-mask:url('../images/offers-tab-brush.png') no-repeat center; mask:url('../images/offers-tab-brush.png') no-repeat center; -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-composite:source-over; mask-composite:add;}
.ko-tab-name{font-family:var(--heading-font); font-weight:700; font-size:1.4em; line-height:1.1; letter-spacing:0.5px;}
.ko-tab-sub{text-transform:uppercase; letter-spacing:3px; font-size:0.62em; font-weight:500; opacity:0.95;}
.ko-tab-arrow{margin-left:4px;}

/* Image placeholders (layout only; swapped for real media later). */
.img-ph{display:block; width:100%; border-radius:14px; background:repeating-linear-gradient(45deg,rgba(255,255,255,0.06) 0 12px,rgba(255,255,255,0.02) 12px 24px); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18);}
.img-ph-wide{aspect-ratio:16/9;}
.img-ph-half{aspect-ratio:4/3;}
.img-ph-portrait{aspect-ratio:9/16;}
.img-ph-avatar{width:64px; height:64px; flex:0 0 64px; border-radius:50%;}
.img-ph-chip{width:22px; height:22px; flex:0 0 22px; border-radius:50%;}

/* Content Creator — ~72% main / ~28% aside, refined per Figma. */
.creator{padding:0 0 80px;}
.creator-layout{display:flex; gap:76px; align-items:flex-start;}
.creator-main{flex:1105; min-width:0;}
/* margin-top aligns the aside widgets with the left column's body text
   (past the byline: 150px avatar + 30px margin). */
.creator-aside{flex:432; min-width:0; display:flex; flex-direction:column; gap:30px; margin-top:180px;}

/* Rainbow rule between blocks (design: purple→gold→blue→red). */
.creator-rule{height:2px; border:0; margin:30px 0; background:linear-gradient(90deg,#9F2C8C 0%,#FACD71 35%,#00ACD8 68%,#E92831 100%);}

/* Shared brand accents */
.creator-dot{display:inline-block; width:6px; height:6px; margin:0 6px; border-radius:50%; background:#fff; vertical-align:middle;}
.creator-dot-dark{background:#000;}

/* Body copy in the main column (scoped so white cards keep their own colours) */
.creator-intro,.creator-block p,.creator-body{font-size:1.15em; line-height:1.35; color:rgba(255,255,255,0.78);}

/* Byline + avatar (with colour-brush swoosh behind) */
.creator-byline{display:flex; align-items:center; gap:30px; margin-bottom:30px;}
.creator-avatar{position:relative; flex:0 0 auto; width:150px; height:150px;}
.creator-avatar-brush{position:absolute; left:50%; top:50%; width:150%; height:150%; transform:translate(-50%,-50%); background:url('../images/color-brush2.svg') no-repeat center/contain; z-index:0; pointer-events:none;}
.creator-avatar-ph{position:relative; z-index:1; width:100%; height:100%; border-radius:50%; border:5px solid #fff; aspect-ratio:auto;}
.creator-name{font-size:2.1em; font-weight:700; letter-spacing:0.5px; margin:0;}
.creator-role{margin:8px 0 0; color:#fff; font-size:1.05em;}
.creator-intro{margin:0;}

/* Numbered content blocks */
.creator-block{margin:0;}
.creator-block-title{font-size:2.1em; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:24px;}
.creator-block p{margin-top:24px;}
.creator-figure{position:relative; margin:0;}
.creator-img-wide{aspect-ratio:1105/635; border-radius:20px;}
.creator-pin{position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:100px; background:rgba(22,45,86,0.70); font-size:0.62em; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#fff;}
.creator-pin svg{width:13px; height:auto;}
.creator-figure-grid{display:flex; gap:20px; aspect-ratio:1105/500;}
.creator-figure-grid .img-ph{height:100%; aspect-ratio:auto; border-radius:14px;}
.creator-img-65{flex:702;}
.creator-img-35{flex:383;}

/* Pull-quote (icon beside large heading-font text) */
.creator-pullquote{display:flex; gap:20px; align-items:flex-start; justify-content:center; margin:0; padding:10px 0 30px;}
.creator-pullquote-mark{flex:0 0 auto;}
.creator-pullquote-mark .ic-quote{width:54px; height:auto;}
.creator-pullquote p{max-width:826px; margin:0; font-family:var(--heading-font); font-weight:700; font-size:1.95em; line-height:1.15; letter-spacing:0.5px; color:#fff;}

/* ─── Editor (Gutenberg) blocks inside the creator main column ──────────── */
/* Column 1 is authored with core blocks; map the rendered WordPress classes
   onto the creator section's design (rainbow rule, pull-quote, headings). */
.creator-main .wp-block-separator{height:2px; max-width:none; margin:30px 0; border:0; opacity:1; background:linear-gradient(90deg,#9F2C8C 0%,#FACD71 35%,#00ACD8 68%,#E92831 100%);}
.creator-main .wp-block-heading{font-size:2.1em; margin:0 0 24px; letter-spacing:1px; text-transform:uppercase;}
.creator-main .wp-block-media-text .wp-block-heading{font-size:2.1em; margin:0; letter-spacing:0.5px; text-transform:none;}
/* Byline avatar (core media-text) styled as the old .creator-byline: a 150px
   circular photo with white border and a colour-brush swoosh behind it. */
.creator-main .wp-block-media-text{display:flex; align-items:center; gap:30px; margin:0 0 30px; grid-template-columns:none;}
.creator-main .wp-block-media-text__media{position:relative; flex:0 0 auto; width:150px; height:150px; margin:0;}
.creator-main .wp-block-media-text__media::before{content:""; position:absolute; left:50%; top:50%; width:150%; height:150%; transform:translate(-50%,-50%); background:url('../images/color-brush2.svg') no-repeat center/contain; z-index:0; pointer-events:none;}
.creator-main .wp-block-media-text__media img{position:relative; z-index:1; width:100%; height:100%; border-radius:50%; border:5px solid #fff; object-fit:cover; display:block;}
.creator-main .wp-block-media-text__content{margin:0; grid-column:auto;}
.creator-main .wp-block-media-text__content p{margin:8px 0 0; color:#fff; font-size:1.05em;}
/* Main-column pull-quote (core quote block) styled as the old .creator-pullquote:
   a 54px quote-mark icon beside large heading-font text, centred as a group. */
.creator-main .wp-block-quote{display:flex; gap:20px; align-items:flex-start; justify-content:center; border:0; margin:0; padding:10px 0 30px; text-align:left;}
.creator-main .wp-block-quote::before{content:""; flex:0 0 auto; width:54px; height:57px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 64'%3E%3Cpath fill='%23fff' d='M11.838 16.8C9.32 19.733 7.809 22.933 7.809 28.267c0 9.333 6.296 17.6 15.11 21.866l2.266-3.466C16.875 41.867 15.112 35.733 14.608 31.733c1.26.8 3.022 1.067 4.785.8 4.533-.533 8.059-4.266 8.059-9.333 0-2.4-1.008-4.8-2.518-6.667-1.763-1.866-3.778-2.666-6.296-2.666-2.77 0-5.289 1.333-6.8 2.933Zm25.184 0c-2.519 2.933-4.03 6.133-4.03 11.467 0 9.333 6.296 17.6 15.11 21.866l2.267-3.466c-8.311-4.8-10.074-10.934-10.577-14.934 1.259.8 3.022 1.067 4.785.8 4.533-.533 8.058-4.266 8.058-9.333 0-2.4-1.007-4.8-2.518-6.667-1.51-1.866-3.778-2.666-6.296-2.666-2.77 0-5.289 1.333-6.799 2.933Z'/%3E%3C/svg%3E") no-repeat center/contain;}
.creator-main .wp-block-quote p{max-width:826px; margin:0; font-family:var(--heading-font); font-weight:700; font-size:1.95em; line-height:1.15; letter-spacing:0.5px; color:#fff;}
/* Body copy authored as core paragraphs (matches the old .creator-block p). */
.creator-main > p{font-size:1.15em; line-height:1.35; color:rgba(255,255,255,0.78); margin:24px 0 0;}
/* Bulleted lists authored as core list blocks. The global `ul` reset strips
   markers, indent and spacing, so restore them for the article body (matching
   the paragraph copy) and indent nested sub-lists. */
.creator-main .wp-block-list{margin:24px 0 0; padding-left:1.4em; list-style:disc; color:rgba(255,255,255,0.78); font-size:1.15em; line-height:1.35;}
.creator-main .wp-block-list li{margin:0.5em 0;}
.creator-main .wp-block-list .wp-block-list{margin:0.5em 0 0; padding-left:1.4em; font-size:1em; list-style:circle;}
/* Images authored as core blocks: full-width, slightly rounded, with a pinned
   location caption matching the original hardcoded .creator-pin design. */
.creator-main .wp-block-image{position:relative; margin:0;}
.creator-main .wp-block-image img{display:block; width:100%; height:auto; border-radius:10px;}
.creator-main figure.wp-block-image:has(figcaption) img{cursor:zoom-in;}
.creator-main .wp-block-image figcaption{position:absolute; left:10px; bottom:10px; margin:0; display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:100px; background:rgba(22,45,86,0.70); font-size:0.62em; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#fff;}
.creator-main .wp-block-image figcaption::before{content:""; flex:0 0 auto; width:13px; height:17px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 19'%3E%3Cpath fill='%23fff' d='M7.5 0C3.364 0 0 3.364 0 7.5 0 12.865 5.265 18.75 7.5 18.75S15 12.865 15 7.5C15 3.364 11.636 0 7.5 0Zm0 10A2.5 2.5 0 1 1 7.5 5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") no-repeat center/contain;}
/* Two images shown side by side: 66 / 33 columns flush like the design grid.
   (display:flex comes from core's .is-layout-flex.) align-items:stretch makes
   both columns the same height; each image fills its column via object-fit. */
.creator-main .creator-image-row{margin:0; gap:20px; align-items:stretch;}
.creator-main .creator-image-row > .wp-block-column{display:flex;}
.creator-main .creator-image-row .wp-block-image{flex:1; min-width:0;}
.creator-main .creator-image-row .wp-block-image img{height:100%; object-fit:cover;}
/* Single video embedded in the article body (e.g. a Vimeo Noraebang clip).
   Portrait clips sit in a 2-column row so they don't tower full-width; the
   iframe fills its column at the clip's own aspect ratio with the image radius. */
.creator-main .creator-video-row .wp-block-embed{flex:1; min-width:0; margin:0;}
.creator-main .creator-video-row .wp-block-embed__wrapper{position:relative; aspect-ratio:240/426; border-radius:10px; overflow:hidden;}
.creator-main .creator-video-row iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}

/* Sidebar quote widget — core quote block styled as the old .creator-quote-card. */
.creator-aside .wp-block-quote{position:relative; margin:0; padding:103px 30px 50px; border:0; border-radius:15px; box-shadow:0 5px 5px rgba(0,0,0,0.05); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 64'%3E%3Cpath fill='%23fff' d='M11.838 16.8C9.32 19.733 7.809 22.933 7.809 28.267c0 9.333 6.296 17.6 15.11 21.866l2.266-3.466C16.875 41.867 15.112 35.733 14.608 31.733c1.26.8 3.022 1.067 4.785.8 4.533-.533 8.059-4.266 8.059-9.333 0-2.4-1.008-4.8-2.518-6.667-1.763-1.866-3.778-2.666-6.296-2.666-2.77 0-5.289 1.333-6.8 2.933Zm25.184 0c-2.519 2.933-4.03 6.133-4.03 11.467 0 9.333 6.296 17.6 15.11 21.866l2.267-3.466c-8.311-4.8-10.074-10.934-10.577-14.934 1.259.8 3.022 1.067 4.785.8 4.533-.533 8.058-4.266 8.058-9.333 0-2.4-1.007-4.8-2.518-6.667-1.51-1.866-3.778-2.666-6.296-2.666-2.77 0-5.289 1.333-6.799 2.933Z'/%3E%3C/svg%3E") no-repeat 30px 30px / 60px auto, rgba(0,0,0,0.38);}
.creator-aside .wp-block-quote p{max-width:none; margin:0; font-family:var(--heading-font); font-weight:700; font-size:1.5em; line-height:1.16; letter-spacing:0.9px; color:#fff;}
.creator-aside .wp-block-quote cite{display:block; margin:30px 0 0; font-size:1.1em; font-weight:600; line-height:1.28; color:#fff; font-style:normal;}

/* Share bar (label + icons reduced 20%, 40px spacing below) */
.creator-share{display:flex; align-items:center; gap:24px; margin:0 0 40px;}
.creator-share-label{font-size:1.08em; font-weight:600; color:#fff;}
.creator-share-list{display:flex; gap:16px; list-style:none; margin:0; padding:0;}
.creator-share-list a{display:block; width:32px; height:32px;}
.creator-share-list svg{display:block; width:32px; height:32px;}

/* About-the-creator card (white) */
.creator-about{margin-top:30px; padding:50px 60px; border-radius:30px; background:#fff;}
.creator-about .creator-about-head.wp-block-media-text{display:flex; align-items:center; gap:30px; grid-template-columns:none; margin:0 0 24px;}
.creator-about .creator-about-head.wp-block-media-text .wp-block-media-text__media{position:relative; flex:0 0 auto; width:120px; height:120px; margin:0;}
.creator-about .creator-about-head.wp-block-media-text .wp-block-media-text__media::before{content:""; position:absolute; left:50%; top:50%; width:150%; height:150%; transform:translate(-50%,-50%); background:url('../images/color-brush2.svg') no-repeat center/contain; z-index:0; pointer-events:none;}
.creator-about .creator-about-head.wp-block-media-text .wp-block-media-text__media img{position:relative; z-index:1; width:100%; height:100%; border-radius:50%; border:5px solid #fff; object-fit:cover; display:block;}
.creator-about .creator-about-head.wp-block-media-text .wp-block-media-text__content{margin:0; padding:0; grid-column:auto;}
.creator-about-head{display:flex; align-items:center; gap:30px; margin-bottom:24px;}
/* When the head is a core Group block, its children sit inside an inner
   container — make that the flex row (direct child only, so the meta group's
   own inner container keeps stacking its heading + lines). */
.creator-about-head > .wp-block-group__inner-container{display:flex; align-items:center; gap:30px;}
.creator-about .creator-avatar-sm{width:120px; height:120px;}
.creator-about-title{font-size:1.6em; font-weight:700; color:#012D67; margin:0;}
.creator-about-sub{margin:6px 0 0; color:#000; font-size:1.05em;}
.creator-about-sub .creator-handle{color:#D92E98;}
.creator-about-collab{margin:4px 0 0; color:#000; font-size:0.85em;}
.creator-about-bio{margin:0; color:#012D67; opacity:0.75; font-size:1.05em; line-height:1.4;}
/* About-card avatar authored as a core Image block: 120px circle, white border,
   colour-brush swoosh behind (mirrors the old .creator-avatar-sm placeholder). */
.creator-about-avatar{position:relative; flex:0 0 auto; width:120px; height:120px; margin:0;}
.creator-about-avatar::before{content:""; position:absolute; left:50%; top:50%; width:150%; height:150%; transform:translate(-50%,-50%); background:url('../images/color-brush2.svg') no-repeat center/contain; z-index:0; pointer-events:none;}
.creator-about-avatar img{position:relative; z-index:1; width:100%; height:100%; border-radius:50%; border:5px solid #fff; object-fit:cover; display:block;}

/* Content authored after the creator columns block (share bar + About block),
   rendered full-width below the two-column layout. */
.creator-after{margin-top:50px;}
.creator-after .creator-about{margin-top:30px;}

/* Aside — quote card (dark, rainbow border like the FAQ section) */
.creator-quote-card{position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:30px 30px 50px; border-radius:15px; background:rgba(0,0,0,0.38); box-shadow:0 5px 5px rgba(0,0,0,0.05);}
.creator-quote-icon{margin-bottom:10px;}
.creator-quote-icon .ic-quote{width:60px; height:auto;}
.creator-quote-text{font-family:var(--heading-font); font-weight:700; font-size:1.5em; line-height:1.16; letter-spacing:0.9px; color:#fff; margin:0;}
.creator-quote-by{margin:30px 0 0; font-size:1.1em; font-weight:600; line-height:1.28; color:#fff;}

/* Aside — must-see links card (white) */
.creator-links-card{padding:40px 30px 50px; border-radius:15px; background:#fff;}
.creator-links-title{font-family:'Allaina',var(--heading-font); font-weight:400; font-size:1.7em; line-height:1.16; letter-spacing:0.5px; color:#012D67; margin:0 0 24px;}
.creator-links-list{list-style:none; display:flex; flex-direction:column; gap:12px; margin:0; padding:0;}
.creator-links-list a, .creator-link{display:flex; justify-content:space-between; align-items:center; gap:20px; padding:17px 20px 20px; border-radius:10px; border:1.4px solid #012D67; color:#012D67; text-decoration:none; font-weight:600; font-size:1.05em;}
.creator-links-list a:hover, .creator-link:hover{background:rgba(1,45,103,0.05);}
.creator-link-arrow{flex:0 0 auto; width:18px; height:12px;}
/* Arrow rendered in CSS (no inline SVG in the content). */
.creator-links-list a::after,  .creator-link::after{content:""; flex:0 0 auto; width:18px; height:12px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none'%3E%3Cpath d='M0 6h16M12 1l5 5-5 5' stroke='%23012D67' stroke-width='2'/%3E%3C/svg%3E") no-repeat center/contain;}
.creator-embed{box-sizing:border-box; width:100%; border-radius:18px; overflow:hidden; background:#fff;}
.creator-embed .img-ph,
.creator-embed .instagram-media,
.creator-embed iframe{box-sizing:border-box; width:100% !important; min-width:0 !important; max-width:100% !important; border-radius:18px !important;}
.creator-embed .instagram-media{margin:0 !important;}

/* Discover Korea Through Their Eyes — intro text beside a card row. */
.discover{padding:80px 0; overflow:hidden;}
.discover-layout{display:flex; gap:40px; align-items:flex-start;}

/* Left column: stacked heading with a multicolour brush behind "Korea". */
.discover-intro{flex:0 0 460px;}
/* "Korea" + "Eyes…" display large (key), "Discover"/"Through Their" smaller
   (sub) — mirrors the homepage .feature-title sub/key size distribution. */
.discover-title{font-size:2.2em; font-weight:800; text-transform:uppercase; line-height:0.98; margin:0;}
.dt-line{display:block;}
.dt-key{font-size:1.7em; line-height:0.95;}
.discover-key{position:relative; display:inline-block; z-index:0;}
.discover-key::before{content:""; position:absolute; z-index:-1; left:50%; top:50%; transform:translate(-50%,-44%); width:150%; height:1.55em; background:url('../images/color-brush1.svg') no-repeat center; background-size:100% 100%;}
.discover-copy{margin:28px 0 0; max-width:430px; color:rgba(255,255,255,0.7); font-size:1.05em; line-height:1.4;}
.discover-copy p{margin:0 0 12px;}
.discover-copy p:last-child{margin-bottom:0;}
.discover-copy p a{text-decoration:underline; text-underline-offset:2px;}

/* Right column: horizontally-scrolling portrait cards bleeding to the edge. */
.discover-cards{flex:1; min-width:0; display:flex; gap:15px; overflow-x:auto; padding-bottom:10px; margin-right:calc((100vw - var(--content-width)) / -2); scrollbar-width:none; -ms-overflow-style:none;}
.discover-cards::-webkit-scrollbar{display:none;}
.discover-card{position:relative; flex:0 0 clamp(260px,24vw,330px); border-radius:20px; overflow:hidden;}
a.discover-card{display:block; color:inherit; text-decoration:none;}
a.discover-card:hover{transform:translateY(-4px); transition:transform 0.25s ease;}
.discover-card-img{display:block; width:100%; height:100%; aspect-ratio:47/67; border-radius:20px;}
.discover-card::after{content:""; position:absolute; inset:0; border-radius:20px; background:linear-gradient(180deg, rgba(var(--card-accent),0) 56%, rgba(var(--card-accent),0.8) 100%); pointer-events:none;}
.discover-card-body{position:absolute; left:30px; right:24px; bottom:30px; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:18px;}
.discover-card-title{font-family:var(--body-font); font-size:1.4em; font-weight:600; color:#fff; margin:0; line-height:1.12;}
.discover-card-handle{display:inline-flex; align-items:center; gap:8px; padding:7px 18px 7px 8px; border-radius:100px; border:1px solid #9F2C8C; background:#162D56; font-size:0.75em; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#fff;}
/* Imagify wraps the <img> in a <picture> and moves the class onto it, so clip
   the wrapper and stretch the inner <img> — works whether the class lands on an
   <img> (local) or a <picture> (live). */
.discover-card-avatar{width:34px; height:34px; flex:0 0 34px; border-radius:50%; aspect-ratio:auto; object-fit:cover; overflow:hidden;}
.discover-card-avatar img{width:100%; height:100%; border-radius:50%; object-fit:cover;}

@media (max-width:768px){
  .guide-section{padding:0;}
  .offers-section{padding:40px 0 0;}
  .guide-head{flex-direction:column; align-items:flex-start; gap:18px;}
  .guide-grid{flex-direction:column;}
  .creator{padding:0 0 56px;}
  .creator-layout{flex-direction:column; gap:40px;}
  .creator-main,.creator-aside{flex:1 1 auto; width:100%;}
  .creator-aside{margin-top:0;}
  .creator-main .wp-block-media-text{gap:20px;}
  .creator-main .wp-block-media-text__media{width:96px; height:96px;}
  .creator-about .creator-about-head.wp-block-media-text{gap:20px;}
  .creator-about .creator-about-head.wp-block-media-text .wp-block-media-text__media{width:84px; height:84px;}
  .creator-about .creator-avatar-sm,.creator-about-avatar{width:84px; height:84px;}
  .creator-about{padding:32px 24px;}
  .creator-about-head{gap:20px;}
  .creator-image-row{flex-direction:column;}
  .creator-image-row > .wp-block-column{flex-basis:auto !important;}
  .creator-pullquote{flex-direction:column; gap:14px;}
  .creator-main .wp-block-quote{flex-direction:column; align-items:center; gap:14px; text-align:center;}
  .discover{padding:56px 0;}
  .discover-layout{flex-direction:column;}
  .discover-intro{flex:1 1 auto;}
  .discover-title{font-size:2.4em;}
  /* .discover-layout keeps align-items:flex-start when it stacks to a column, so
     without an explicit width the cards row grows to its content width and gets
     clipped by .discover{overflow:hidden} — unreachable by touch. Pin it to the
     column width so overflow-x scrolls the cards instead. */
  .discover-cards{margin-right:0; width:100%; -webkit-overflow-scrolling:touch; touch-action:pan-x;}

  /* "Explore More Articles" pill overflows the viewport at its desktop size. */
  .guide-cta .wp-block-button__link{padding:13px 24px; font-size:14px; letter-spacing:2px;}
}

/* ─── Tabs ───────────────────────────────────────────────────────────────── */
.tabs{padding:0 0 80px;}
/* The tab nav docks to the top of the viewport as the page scrolls and the cards
   shrink in height down to 40% — their width is untouched. JS feeds `--shrink`
   (0 full → 1 docked) and `--card-h` (each card's natural square height in px).
   Height is real (not a transform), so the bar genuinely shortens and the panels
   below rise to meet it. */
.tab-nav{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:64px;
  position:sticky; top:14px; z-index:40; --shrink:0;}
/* Full-width docked backdrop — fades in only once the bar starts sticking. */
.tab-nav::before{content:""; position:absolute; z-index:-1; inset:calc(-12px * var(--shrink));
  border-radius:24px; background:rgba(1,45,103,calc(0.82 * var(--shrink)));
  box-shadow:0 18px 40px rgba(0,0,0,calc(0.35 * var(--shrink))); backdrop-filter:blur(8px);
  pointer-events:none;}
@media (prefers-reduced-motion: reduce){ .tab-nav{position:static;} .tab-nav::before{display:none;} }
.tab-link{flex:1 1 0; max-width:230px; cursor:pointer;}
/* Width is untouched (flex-driven); only the height collapses, from the natural
   square (--card-h) down to 40%. The image and the bottom-pinned label/gradient are
   both anchored to the bottom (background-position:bottom), so the reduction eats the
   top of the pill while the labelled bottom band stays put.
   width:100% is REQUIRED — it pins width to the flex-fixed .tab-link so that once JS
   makes the height a definite px value, aspect-ratio can't recompute width from the
   ratio and squash the card into a smaller square. Before JS sets --card-h the 100%
   height fallback resolves to auto, so aspect-ratio still derives the initial square. */
.tab-card{position:relative; display:block; width:100%; aspect-ratio:1/1;
  height:calc(var(--card-h, 100%) * (1 - 0.6 * var(--shrink, 0)));
  border-radius:16px; overflow:hidden; background-color:#0b2a55; background-size:cover; background-position:center bottom; transition:transform 0.3s ease, box-shadow 0.3s ease;}
.tab-card::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom, rgba(var(--theme),0) 13%, rgba(var(--theme),1) 100%); transition:background 0.3s ease;}
.tab-link:hover .tab-card{transform:translateY(-4px);}
.tab-link:hover .tab-card::before{background:linear-gradient(to bottom, rgba(var(--theme),0.5) 11%, rgba(var(--theme),1) 100%);}
.tab-link.is-active .tab-card{box-shadow:0 0 0 2px rgb(var(--theme));}
.tab-card-icon{position:absolute; top:42%; left:50%; transform:translate(-50%,-50%); width:54px; height:auto; z-index:2; filter:brightness(0) invert(1); opacity:0; transition:opacity 0.3s ease;}
.tab-link:hover .tab-card-icon{opacity:1;}
.tab-card-text{position:absolute; left:18px; right:14px; bottom:16px; z-index:2; display:flex; flex-direction:column; gap:2px;}
.tab-card-title{font-family:var(--heading-font); font-weight:700; font-size:1.4em; line-height:1; color:#fff;}
.tab-card-label{font-size:0.7em; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.9);}

/* ─── Tab panels ─────────────────────────────────────────────────────────── */
.tab-panel{display:none;}
.tab-panel.is-active{display:block;}
/* Entrance animation when switching tabs — applied only via the JS-added
   `panel-anim` class (not on initial load). The clicked tab scrolls the heading
   into view first, then the new panel fades/slides up. */
@keyframes tabPanelIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.tab-panel.panel-anim{animation:tabPanelIn 0.45s ease both;}
@media (prefers-reduced-motion: reduce){ .tab-panel.panel-anim{animation:none;} }
.panel-placeholder{text-align:center; padding:80px 0; color:rgba(255,255,255,0.5); font-style:italic;}

/* ─── Feature (intro card + Instagram) ───────────────────────────────────── */
.feature{display:flex; align-items:center; gap:60px; margin-bottom:100px;}
.feature-text{flex:1;}
.feature-title{font-size:3.9em; font-weight:800; text-transform:uppercase; line-height:0.92;}
.feature-title .ft-sub{display:block;}
.feature-title .ft-key{position:relative; display:inline-block; font-size:1.72em; line-height:1;}
.feature-title .ft-key::before{content:""; position:absolute; z-index:-1; left:50%; top:50%; transform:translate(-50%,-46%); width:120%; height:0.78em; background:url('../images/color-brush1.svg') no-repeat center; background-size: 450px;}
.feature-text .btn{margin-top:24px;}
.feature-card{flex:1; position:relative; display:flex; justify-content:center; align-items:center;}
.feature-card::before{content:""; position:absolute; left:64%; top:50%; transform:translate(-50%,-50%); width:160%; height:155%; background:url('../images/color-brush2.svg') no-repeat center/contain; z-index:0; pointer-events:none;}
.ig-card{position:relative; z-index:1; width:340px; background:#fff; color:var(--primary-color); border-radius:24px; overflow:hidden; transform:rotate(5deg); box-shadow:0 30px 60px rgba(0,0,0,0.35);}
.ig-card-media{display:block; height:300px; background:rgba(4,25,73,0.12); cursor:pointer;}
.ig-card-body{padding:24px;}
.ig-card-name{font-size:1.8em; color:#A22590;}
.ig-card-role{margin:0 0 14px; color:#555;}
.ig-card-handle{display:flex; align-items:center; gap:10px; margin:0; color:#333;}
.ig-icon{width:24px; height:24px; border-radius:6px; background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); display:inline-block;}

/* ─── Offers ─────────────────────────────────────────────────────────────── */
.offers{margin-bottom:100px;}
.offers-eyebrow{text-transform:uppercase; letter-spacing:4px; font-size:0.8em; font-weight:700; color:rgba(255,255,255,0.6); margin-bottom:8px;}
.offers-title{font-size:2.6em; font-weight:800; text-transform:uppercase;}
.subtab-nav{display:flex; gap:14px; flex-wrap:wrap; margin:30px 0 40px;}
.subtab-link{position:relative; padding:12px 26px; border:1px solid var(--line); border-radius:30px; cursor:pointer; font-family:'Inter',sans-serif; font-weight:600; font-size:0.85em; letter-spacing:2px; text-transform:uppercase; transition:background 0.3s ease;}
.subtab-link:hover{background:rgba(255,255,255,0.08);}
.subtab-link--url{padding:0;}
.subtab-link--url a{display:block; padding:12px 26px; color:inherit; text-decoration:none;}
.subtab-link.is-active{border-color:transparent; background:rgba(255,255,255,0.06);}
.subtab-panel{display:none;}
.subtab-panel.is-active{display:block;}
.offers-grid{display:flex; gap:24px;}
.offer-card{flex:1 1 0; position:relative; min-height:280px; border-radius:18px; overflow:hidden; background:rgba(255,255,255,0.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3); display:flex; align-items:flex-end;}
.offer-card-overlay{padding:24px; width:100%; background:linear-gradient(to top, rgba(4,25,73,0.9), transparent);}
.offer-card-title{font-size:1.4em; font-weight:700;}
.offer-card-text{margin:0; font-size:0.85em; color:rgba(255,255,255,0.8);}

/* ─── Themeable brush highlight (behind heading words, follows --theme) ────── */
.th-brush{position:relative; isolation:isolate; display:inline-block;}
.th-brush::before{content:""; position:absolute; z-index:-1; left:50%; top:54%; transform:translate(-50%,-50%); width:108%; height:1.18em; background-color:rgba(var(--theme),1); -webkit-mask:url('../images/theme-brush1.svg') no-repeat center; mask:url('../images/theme-brush1.svg') no-repeat center; -webkit-mask-size:100% 100%; mask-size:100% 100%;}
.th-brush-2::before{-webkit-mask-image:url('../images/theme-brush2.svg'); mask-image:url('../images/theme-brush2.svg');}
.th-brush-3::before{-webkit-mask-image:url('../images/theme-brush3.svg'); mask-image:url('../images/theme-brush3.svg');}

/* ─── Gallery carousel ───────────────────────────────────────────────────── */
.gallery{margin-bottom:30px;}
.gallery-eyebrow{text-transform:uppercase; letter-spacing:4px; font-size:0.8em; font-weight:700; color:rgba(255,255,255,0.6); margin-bottom:8px;}
.gallery-title{font-size:2.6em; font-weight:800; text-transform:uppercase;}
.gallery-carousel{margin-bottom:100px; margin-right:calc((100vw - var(--content-width)) / -2);}
.gallery-slide{position:relative; height:300px; margin:0 10px; border-radius:16px; overflow:hidden; background:rgba(255,255,255,0.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3); display:flex; align-items:flex-end; cursor:pointer;}
/* Caption pill: matches the content creator image caption treatment. */
.gallery-slide-caption{position:absolute; left:10px; bottom:10px; margin:0; display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:100px; background:rgba(22,45,86,0.70); color:#fff; font-size:0.62em; font-weight:600; line-height:1; letter-spacing:1px; text-transform:uppercase;}
.gallery-slide-caption::before{content:""; flex:0 0 auto; width:13px; height:17px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 19'%3E%3Cpath fill='%23fff' d='M7.5 0C3.364 0 0 3.364 0 7.5 0 12.865 5.265 18.75 7.5 18.75S15 12.865 15 7.5C15 3.364 11.636 0 7.5 0Zm0 10A2.5 2.5 0 1 1 7.5 5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") no-repeat center/contain;}

/* ─── Gallery lightbox (self-contained; modal built in main.js) ───────────── */
.lightbox{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:48px 72px; opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease;}
.lightbox.is-open{opacity:1; visibility:visible;}
.lightbox-backdrop{position:absolute; inset:0; background:rgba(0,15,33,0.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
.lightbox-figure{position:relative; z-index:1; margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; transform:scale(0.96); transition:transform 0.3s ease;}
.lightbox.is-open .lightbox-figure{transform:scale(1);}
.lightbox-img{display:block; max-width:100%; max-height:80vh; width:auto; height:auto; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,0.6);}
.lightbox-caption{margin-top:18px; text-align:center; color:#fff; font-size:1em; letter-spacing:1px; max-width:60ch;}
.lightbox-close, .lightbox-nav{position:absolute; z-index:2; display:flex; align-items:center; justify-content:center; border:0; cursor:pointer; color:#fff; background:rgba(255,255,255,0.1); border:1px solid var(--line); border-radius:50%; transition:background 0.2s ease, color 0.2s ease;}
.lightbox-close:hover, .lightbox-nav:hover{background:rgba(255,255,255,0.22);}
.lightbox-close{top:24px; right:24px; width:48px; height:48px; font-size:28px; line-height:1;}
.lightbox-nav{top:50%; transform:translateY(-50%); width:56px; height:56px; font-size:34px; line-height:1;}
.lightbox-prev{left:24px;}
.lightbox-next{right:24px;}
body.lightbox-open{overflow:hidden;}

/* ─── Photo Gallery (BWG) mosaic galleries inside article body ────────────── */
/* Galleries imported from the legacy Experience pages via [Best_Wordpress_Gallery]
   in mosaic view. Layout/hover reveal ported from the original korea/Divi setup,
   but the caption pill matches the CURRENT theme's homepage photo-gallery caption
   (.gallery-slide-caption): navy pill + white location pin. Instance-independent
   selectors ([class*=…]) so it works no matter how many galleries appear. */
.bwg-mosaic-thumbnails .bwg-zoom-effect .bwg-zoom-effect-overlay{background-color:transparent!important; opacity:1!important;}
.bwg-zoom-effect-overlay{position:relative; z-index:2;}

/* Caption pill (image title shown on hover) — matches .gallery-slide-caption */
[class*="bwg_mosaic_title_spun2_"],
[class*="bwg_ecommerce_spun2_"]{display:inline-flex!important; align-items:center; gap:7px; text-transform:uppercase; font-weight:600!important; font-size:12px!important; letter-spacing:1px; line-height:1!important; color:#fff!important; background:rgba(22,45,86,0.70)!important; border-radius:100px; padding:6px 14px;}
[class*="bwg_mosaic_title_spun1_"],
[class*="bwg_ecommerce_spun1_"]{top:auto!important; left:12px!important; transform:none!important; bottom:12px!important; text-align:left!important; opacity:1!important; padding:0;}
[class*="bwg_mosaic_title_spun2_"]::before{content:""; flex:0 0 auto; width:13px; height:17px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 19'%3E%3Cpath fill='%23fff' d='M7.5 0C3.364 0 0 3.364 0 7.5 0 12.865 5.265 18.75 7.5 18.75S15 12.865 15 7.5C15 3.364 11.636 0 7.5 0Zm0 10A2.5 2.5 0 1 1 7.5 5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") no-repeat center/contain;}

/* Hover tint over each mosaic thumbnail (reveals the caption) */
[class*="bwg_mosaic_thumb_spun_"]{position:relative; display:inline-block;}
[class*="bwg_mosaic_thumb_spun_"]::after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(1,45,103,0.30); opacity:0; transition:opacity 0.3s ease-in-out; z-index:1;}
[class*="bwg_mosaic_thumb_spun_"]:hover::after{opacity:1;}

/* Rounded lightbox image, matching the design */
.bwg_popup_image{border-radius:20px;}

/* Instagram embed widget — rounded corners to match the design */
.creator-aside .instagram-media{border-radius:20px!important; overflow:hidden;}

/* ─── More on culture ────────────────────────────────────────────────────── */
.more{margin-bottom:40px;}
.more-eyebrow{text-transform:uppercase; letter-spacing:4px; font-size:0.8em; font-weight:700; color:rgba(255,255,255,0.6); margin-bottom:8px;}
.more-title{font-size:2.6em; font-weight:800; text-transform:uppercase;}
.more-grid{display:flex; gap:24px; margin-top:30px;}
.info-card{flex:1 1 0; min-height:300px; border-radius:18px; overflow:hidden; background:rgba(255,255,255,0.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3); display:flex; align-items:center;}
.info-card-content{width:50%; padding:40px;}
.info-card-title{font-size:1.8em; font-weight:700;}
.info-card-content .btn{margin-top:20px; padding:9.8px 33.6px; font-size:12.6px; letter-spacing:2.5px;}

/* ─── Korea Festival ─────────────────────────────────────────────────────── */
.festival{padding:0;}
.festival-inner{position:relative; display:block; border-radius:24px; overflow:hidden;}
.festival-img{display:block; width:100%; height:auto;}

/* ─── FAQ ────────────────────────────────────────────────────────────────── */
.faq{padding:80px 0;}
.faq-inner{position:relative; display:flex; gap:60px; padding:40px; border-radius:24px; background:rgba(0,0,0,0.7);}
.faq-text{flex:1;}
.faq-desc p{margin:16px 0 0;}
/* Anchor links inside the FAQ description paragraphs are underlined. */
.faq-desc p a{text-decoration:underline; text-underline-offset:2px;}
.faq-title{font-size:3.9em; font-weight:800; text-transform:uppercase; line-height:0.95;}
.faq-title span{display:block;}
.faq-title .faq-key, .insta-title .faq-key{position:relative; display:inline-block; line-height:1; z-index: 5;}
.faq-title .faq-key::before, .insta-title .faq-key::before{content:""; position:absolute; z-index:-1; left:50%; top:50%; transform:translate(-50%,-46%); width:130%; height:0.78em; background:url('../images/color-brush3.svg') no-repeat center; background-size: 270px;}
.insta-title .faq-key::before{background-size:200px;}
.faq-list{flex:1;}
.faq-item{position:relative; border-radius:14px; margin-bottom:16px; overflow:hidden;}
.faq-question{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px; background:transparent; border:0; color:#fff; font-size:1em; text-align:left; cursor:pointer;}
.faq-icon{flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:1px solid var(--line); position:relative; transition:transform 0.3s ease;}
.faq-icon::before,.faq-icon::after{content:""; position:absolute; top:50%; left:50%; width:10px; height:1px; background:#fff; transform:translate(-50%,-50%);}
.faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);}
.faq-item.is-open .faq-icon::after{opacity:0;}
.faq-answer{max-height:0; overflow:hidden; transition:max-height 0.4s ease;}
.faq-answer p{margin:0; padding:2px 24px 22px;}

/* ─── Latest from Korea (Instagram feed) ─────────────────────────────────── */
.insta-feed{padding:24px 0 80px;}
.insta-title{font-size:3.2em; font-weight:800; text-transform:uppercase; line-height:0.95; text-align:left; margin:0 0 10px;}
/* Black card with a rainbow border, mirroring the FAQ section's .faq-inner. */
.insta-feed-embed{position:relative; padding:40px; border-radius:24px; background:#000;}
/* Let the Smash Balloon feed sit transparently on the black card. */
.insta-feed-embed #sb_instagram{padding-bottom:0 !important; background:transparent !important;}
@media (max-width:768px){
  .insta-feed{padding:8px 0 56px;}
  .insta-title{font-size:2.4em; margin-bottom:10px;}
  .insta-feed-embed{padding:22px;}
}

/* ─── Newsletter ─────────────────────────────────────────────────────────── */
.newsletter{padding:0 0 80px;}
.newsletter-card{display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px; padding:36px 20px; border-radius:30px; background:#fff; color:var(--primary-color);}
/* Grid children default to min-width:auto and can refuse to shrink, pushing the
   Mailchimp signup past the card edge on narrow screens. Let them shrink. */
.newsletter-intro,#mc_embed_signup{min-width:0; max-width:100%;}
.newsletter-intro{display:flex; align-items:center; gap:20px;}
.newsletter-img{flex:0 0 auto; width:130px; height:auto;}
.newsletter-title{margin:0 0 6px; font-size:34px; line-height:1.1; letter-spacing:0.5px; text-transform:uppercase; color:var(--primary-color);}
.newsletter-copy p{margin:0; max-width:420px; font-size:16px; line-height:1.4; color:var(--primary-color);}
.newsletter-copy p a{text-decoration:underline; text-underline-offset:2px;}
.newsletter-signup{display:flex; flex-direction:column; align-items:flex-start; gap:16px; width:460px; max-width:100%;}
.newsletter-form-title{margin:0; font-size:28px; line-height:1.1; letter-spacing:0.5px; text-transform:uppercase; color:var(--primary-color);}
.newsletter-form-copy{margin:0; font-size:15px; line-height:1.4; color:var(--primary-color);}
.newsletter-form{width:460px; max-width:100%; display:flex; align-items:center; gap:10px; border:1px solid var(--primary-color); border-radius:100px; padding:6px 6px 6px 24px;}
.newsletter-input{flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--primary-color); font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;}
.newsletter-input::placeholder{color:#BCBCBC; letter-spacing:1.5px; text-transform:uppercase;}
/* Typed email should read in normal case, but keep the placeholder uppercase. */
.newsletter-input[type="email"]{text-transform:none; letter-spacing:0.3px;}
.newsletter-input[type="email"]::placeholder{text-transform:uppercase; letter-spacing:1.5px;}
.newsletter-btn{flex:0 0 auto; padding:14px 28px; font-size:12px; letter-spacing:2.5px; border:0;}
.newsletter-btn.is-loading{opacity:0.65; pointer-events:none;}
.newsletter-response{width:460px; max-width:100%; margin:12px 0 0; padding:0 24px; font-size:13px; line-height:1.4; font-weight:500;}
.newsletter-response.is-success{color:#127a3e;}
.newsletter-response.is-error{color:var(--red-color);}
.newsletter-response a{color:inherit; text-decoration:underline;}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.site-footer{position:relative; padding:120px 0 36px;}
.site-footer > .container{position:relative; z-index:1;}
.footer-top{display:flex; align-items:center; gap:40px; flex-wrap:wrap; padding-bottom:40px;}
.footer-logo{display:block;}
.footer-logo img{height:90px; width:auto;}
.footer-nav{margin-left:auto;}
.footer-nav ul{display:flex; gap:28px; flex-wrap:wrap;}
.footer-nav a{font-size:0.8em; text-transform:uppercase; letter-spacing:2px; color:rgba(255,255,255,0.85);}
.footer-nav a:hover{color:var(--secondary-color);}
.footer-social{display:flex; gap:14px;}
.footer-social a{display:block; width:44px; height:44px;}
.footer-social svg, .footer-social img{display:block; width:100%; height:100%; object-fit:contain;}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--line);}
.copyright{margin:0; font-size:0.8em; color:rgba(255,255,255,0.55);}
.footer-legal{display:flex; gap:18px;}
.footer-legal a{font-size:0.8em; color:rgba(255,255,255,0.7);}

/* ─── Dynamic content imagery (offers, gallery, guides, feature card) ─────── */
/* Cards carry their photo via an inline background-image; these rules size it. */
.offer-card, .gallery-slide, .info-card, .ig-card-media{background-size:cover; background-position:center; background-repeat:no-repeat;}
.info-card{position:relative;}
.info-card::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(4,25,73,0.92) 0%, rgba(4,25,73,0.55) 45%, rgba(4,25,73,0) 78%);}
.info-card-content{position:relative; z-index:1;}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE
   Breakpoint ladder mirrors the korea theme (980 / 768 / 600 / 480). Layout
   stacks first at 980; type scale, hero, carousels and forms adapt below that.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Tablet & below: stack columns, collapse nav into a hamburger ─────────── */
@media (max-width:980px){
  /* Decorative rotated IG card + oversized brush pseudo-elements can push past
     the viewport edge; clip the overflow so there is no horizontal scroll. */
  body{overflow-x:hidden;}

  /* Header → hamburger. The checkbox precedes nav + CTA in the DOM, so its
     :checked state reveals them (no JS needed). */
  /* .header-inner also carries .container; the later .container padding rule
     (max-width:768px) would otherwise override this at equal specificity, so
     qualify with both classes to keep the header's own padding. */
  .header-inner.container{flex-wrap:wrap; border-radius:24px; padding:10px 16px 20px;}
  .site-header .logo img{height:48px;}
  .nav-toggle{display:flex; order:2; margin-left:auto; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:11px; cursor:pointer;}
  .nav-toggle span{display:block; width:100%; height:2px; background:#fff; border-radius:2px; transition:transform 0.3s ease, opacity 0.3s ease;}
  .main-nav{display:none; order:3; width:100%; margin:0; padding-top:10px;}
  .main-nav ul{flex-direction:column; align-items:center; gap:4px;}
  .main-nav a{display:block; padding:10px 0;}
  .header-btn{display:none; order:4; width:100%; margin-top:8px; text-align:center;}
  .nav-toggle-cb:checked ~ .main-nav,
  .nav-toggle-cb:checked ~ .header-btn{display:block;}
  /* Bars morph into an X while the menu is open */
  .nav-toggle-cb:checked ~ .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle-cb:checked ~ .nav-toggle span:nth-child(2){opacity:0;}
  .nav-toggle-cb:checked ~ .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* Two-column sections collapse to a single stacked column */
  .feature,.faq-inner{flex-direction:column; gap:40px;}

  /* Feature: on mobile the Instagram card sits directly beneath the heading,
     above the description + CTA. Unwrap .feature-text (display:contents) so its
     heading/paragraph/button reorder as flex items of .feature around the card. */
  .feature{align-items:stretch;}
  .feature-text{display:contents;}
  .feature-title{order:1;}
  .feature-card{order:2;}
  .feature-text > p{order:3;}
  .feature-text > .btn{order:4; align-self:flex-start;}
  .offers-grid,.more-grid{flex-direction:column;}
  .info-card-content{width:100%;}
  .gallery-carousel{margin-right:0;}
  .newsletter-card{grid-template-columns:1fr;}

  /* Offers page — deal grid to 2-up; category cards + themed tabs wrap. */
  .deal-grid{grid-template-columns:repeat(2,1fr); gap:20px;}
  .offers-cats{flex-wrap:wrap;}
  .offers-cat{flex:1 1 calc(50% - 6px);}
  .offers-cat-label{font-size:1.5em;}
  .subtab-nav.ko-tabs{flex-wrap:wrap; border-radius:0; overflow:visible; gap:10px;}
  .ko-tabs .ko-tab{flex:1 1 calc(50% - 5px); border-radius:12px;}
}

/* ─── Large phones / small tablets ────────────────────────────────────────── */
@media (max-width:768px){
  .container{padding:0 18px;}

  /* Bottom fade overlay: fixed height on mobile, and start the opaque fade
     later (55% vs 42%) so the gradient floor sits lower over the content. */
  .site-content::after{height:700px; background:linear-gradient(rgba(3,10,25,0) 55%, rgba(3,10,25,1) 80%);}

  /* Heading brush strokes use fixed-px background-size; shrink them on mobile
     so they stay proportional to the smaller heading type. */
  .faq-title .faq-key::before, .insta-title .faq-key::before{background-size:175px;}
  .feature-title .ft-key::before{background-size:300px;}

  /* Tighten vertical rhythm */
  .intro{padding:56px 0;}
  .tabs{padding:0 0 56px;}
  .faq{padding:56px 0;}
  .feature,.offers,.more{margin-bottom:56px;}
  .gallery-carousel{margin-bottom:56px;}

  /* Hero: floor the background-image height. With a fixed 500px height the
     '100% auto' sizing no longer fills the box, so switch to cover (centred)
     to keep the image edge-to-edge. Keep the floating CTA at full desktop
     size/styling so it reads the same as desktop on mobile. */
  .hero{min-height:500px;}
  /* The korea-theme-page hero is an aspect-ratio box on desktop. On mobile drop
     the ratio (otherwise the 500px height floor would drive the width up to
     height×ratio and overflow the screen) and just floor the height at 500px. */
  .page-template-template-korea-theme-page .hero{aspect-ratio:auto; min-height:500px;}
  .hero-bg{min-height:500px;}
  .hero-bg-thumb, .hero-bg-full{min-height:500px; background-size:cover; background-position:center;}
  /* Keep the heading-text lockup inside the viewport with side gutters. */
  .hero-lockup{width:calc(100% - 48px);}
  .hero-btn{bottom:8%;}

  /* Step heading display sizes down */
  .intro-title{font-size:2em;}
  .tabs-title{font-size:1.8em; margin-bottom:32px;}
  .feature-title{font-size:2.6em;}
  .offers-title,.gallery-title,.more-title,.guide-title{font-size:2em;}
  .faq-title{font-size:2.6em;}
  .newsletter-title{font-size:26px; white-space:normal;}

  /* Feature card: centre it and drop the tilt that overflowed the row */
  .feature-card{width:100%;}
  .feature-card::before{display:none;}
  .ig-card{width:100%; max-width:320px; transform:rotate(0deg);}

  /* Offer sub-tabs scroll horizontally rather than wrapping into many rows */
  .subtab-nav{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:10px; margin:24px 0 28px; padding-bottom:6px; scrollbar-width:none;}
  .subtab-nav::-webkit-scrollbar{display:none;}
  .subtab-link{flex:0 0 auto; white-space:nowrap; padding:10px 20px;}
  /* The "View All" URL pill pads its inner <a>; keep the <li> unpadded so it
     doesn't double up and stretch every sibling pill taller via align stretch. */
  .subtab-nav .subtab-link--url{padding:0;}
  .subtab-nav .subtab-link--url a{padding:10px 20px;}

  .faq-inner{padding:28px 22px; gap:28px;}

  /* Stacked travel-guide cards read better with a bottom-up scrim */
  .info-card{min-height:240px; align-items:flex-end;}
  .info-card::after{background:linear-gradient(to top, rgba(4,25,73,0.92) 8%, rgba(4,25,73,0.4) 55%, rgba(4,25,73,0) 100%);}
  .info-card-content{padding:28px;}
}

/* ─── Phones ──────────────────────────────────────────────────────────────── */
@media (max-width:600px){
  /* Tab selector → 3 on the first row, 2 centred on the second (all equal size).
     flex-wrap + the inherited justify-content:center handles the 3/2 split. */
  .tab-nav{gap:10px; margin-bottom:40px;}
  .tab-link{flex:0 0 calc(33.333% - 7px); max-width:calc(33.333% - 7px);}
  /* Mobile tab cards: flat solid colour — drop the photo, gradient overlay and
     rollover icon, and fill the card with the theme colour. */
  /* Fix cards at the 40% "shrunk" height and ignore the scroll-driven --shrink. */
  .tab-card{background-image:none !important; background-color:rgb(var(--theme)); border-radius:10px; height:calc(var(--card-h, 100%) * 0.4);}
  .tab-card::before{display:none;}
  .tab-card-icon{display:none;}
  .tab-card-text{left:10px; right:8px; bottom:6px;}
  .tab-card-title{font-size:1em;}
  /* Keep the label on a single line; ellipsize anything that overflows. */
  .tab-card-label{font-size:0.55em; letter-spacing:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

  .feature-title{font-size:2.2em;}
  .offer-card{min-height:220px;}
  .gallery-slide{height:240px;}

  /* Offers page — single-column deal grid; category cards stay 2-up. */
  .deal-grid{grid-template-columns:1fr;}
  .offers-cat{flex:1 1 calc(50% - 6px);}
  /* Shorten the load-more label to "Load More Offers" so it doesn't overflow. */
  .lm-cat{display:none;}

  /* Lightbox: tighter chrome on phones */
  .lightbox{padding:16px;}
  .lightbox-img{max-height:70vh;}
  .lightbox-close{top:12px; right:12px; width:40px; height:40px; font-size:24px;}
  .lightbox-nav{width:42px; height:42px; font-size:26px;}
  .lightbox-prev{left:8px;}
  .lightbox-next{right:8px;}

  /* Newsletter: stack image over copy, full-width stacked form controls */
  .newsletter-card{padding:28px 20px; text-align:center;}
  .newsletter-intro{flex-direction:column; gap:14px;}
  .newsletter-img{width:96px;}
  .newsletter-copy p{margin:0 auto;}
  .newsletter-form{flex-wrap:wrap; width:100%; border-radius:20px; padding:14px 16px; gap:12px;}
  .newsletter-input{flex:1 1 100%; text-align:center;}
  .newsletter-btn{flex:1 1 100%; padding:14px;}

  /* Footer: centre everything */
  .site-footer{padding:90px 0 32px;}
  .footer-top{flex-direction:column; align-items:center; text-align:center; gap:24px; padding-bottom:28px;}
  .footer-logo img{height:64px;}
  .footer-nav{margin-left:0;}
  .footer-nav ul{justify-content:center; gap:10px;}
  .footer-bottom{flex-direction:column; text-align:center; gap:14px; padding-top:20px;}
}

/* ─── Sub-500px phones: shrink heading brush strokes further ──────────────── */
@media (max-width:499px){
  .feature-title .ft-key::before{background-size:230px;}
  .faq-title .faq-key::before, .insta-title .faq-key::before{background-size:160px;}
  /* Shrink the tab card title so it fits inside the narrower cards. */
  .tab-card-title{font-size:0.82em;}
  /* Offers-page category cards: shrink the label so longer words like
     "Accommodation" fit inside the narrow 2-up cards. */
  .offers-cat-label{font-size:1.1em;}
}

/* ─── Small phones ────────────────────────────────────────────────────────── */
@media (max-width:480px){
  .feature-title{font-size:2em;}
  .faq-title{font-size:2.2em;}
  .offers-title,.gallery-title,.more-title,.guide-title{font-size:1.7em;}
  .btn{padding:13px 32px; font-size:16px;}
}

/* ─── Sub-400px phones ─────────────────────────────────────────────────────── */
@media (max-width:399px){
  /* Newsletter "Join our community" button: smaller type + tighter side padding
     so it sits comfortably on very narrow screens. */
  .newsletter-btn{font-size:13px; padding-left:15px; padding-right:15px;}
}

@media (max-width:349px){
  /* Shrink the tab card title further on the smallest phones. */
  .tab-card-title{font-size:0.75em;}
}