/* FamilyTrip guides + content pages, 2026 light brand.
   Loaded by the city guides, the guide index, About, Contact and 404.
   Tokens use an --ft- prefix so they never clash with other page systems. */
:root{
  --ft-ivory:#FBF7EF;--ft-paper:#FFFFFF;--ft-sand:#F6EFE2;--ft-forest:#16243A;--ft-pine:#16243A;--ft-pine-dark:#16243A;
  --ft-sun:#F0B44C;--ft-coral:#E8735A;--ft-sky:#5FA8C8;--ft-muted:#5B6578;--ft-line:#E3D8C3;
  --ft-shadow:0 8px 24px rgba(22,36,58,.08);--ft-radius:18px;
  --ft-display:"Instrument Serif",Georgia,"Times New Roman",serif;--ft-ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
body.ft-guide-page,body.ft-content-page{margin:0;background:var(--ft-ivory);color:var(--ft-forest);font:17px/1.55 var(--ft-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.ft-guide-page *,.ft-content-page *{box-sizing:border-box}
.ft-guide-page a,.ft-content-page a{color:var(--ft-pine);text-underline-offset:3px}
.ft-guide-page a:hover,.ft-content-page a:hover{color:var(--ft-pine-dark)}
.ft-guide-page :focus-visible,.ft-content-page :focus-visible{outline:3px solid var(--ft-sun);outline-offset:3px;border-radius:6px}
.ft-guide-page img,.ft-content-page img{max-width:100%}
.ft-guide-page h1,.ft-guide-page h2,.ft-guide-page h3,.ft-content-page h1,.ft-content-page h2,.ft-content-page h3{font-family:var(--ft-display);color:var(--ft-forest);letter-spacing:-.015em}

/* Fallback header before the shared shell script replaces it. */
.ft-guide-page .ft-public-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;padding:10px clamp(16px,4vw,56px);background:var(--ft-ivory);border-bottom:1px solid var(--ft-line)}
.ft-guide-page .ft-public-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ft-forest);font:600 23px var(--ft-display);text-decoration:none}
.ft-guide-page .ft-public-brand img{width:36px;height:36px}
.ft-guide-page .ft-public-links{display:flex;gap:8px;flex-wrap:wrap}
.ft-guide-page .ft-public-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ft-forest);font-weight:600;text-decoration:none;border-radius:999px}
.ft-guide-page .ft-public-links a.primary{background:var(--ft-pine);color:#fff;padding:0 18px}

/* ---------- Page frame ---------- */
.ft-guide-page .city-guide{max-width:1160px;margin:0 auto;padding:28px clamp(16px,4vw,32px) 80px}
.ft-guide-page .city-breadcrumb{font-size:15px;color:var(--ft-muted);margin:0 0 18px}
.ft-guide-page .city-breadcrumb a{font-weight:600}

/* ---------- Hero ---------- */
.city-top{display:grid;gap:22px;margin-bottom:8px}
.city-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(22px,4vw,48px);align-items:center}
.city-hero.no-photo{grid-template-columns:1fr}
.city-kicker{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--ft-pine)}
.city-kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ft-sun)}
.city-hero h1{font-size:clamp(38px,6vw,64px);font-weight:600;line-height:1.04;letter-spacing:-.03em;margin:10px 0 16px}
.city-hero h1 em{font-style:italic;font-weight:500;color:var(--ft-pine)}
.city-dek{font-size:clamp(17px,1.6vw,19px);line-height:1.6;margin:0;max-width:60ch;color:var(--ft-forest)}
.city-hero-photo{margin:0;position:relative}
.city-hero-photo .ft-photo-frame{aspect-ratio:4/3;border-radius:24px}
.city-hero.no-photo .city-hero-photo{display:none}

/* Photo frames: fixed ratio so nothing jumps, soft fallback when no photo exists. */
.ft-photo-frame{position:relative;display:block;width:100%;aspect-ratio:3/2;overflow:hidden;background:linear-gradient(135deg,#F6EFE2,#EADFCB);border-radius:16px}
.ft-photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.ft-photo-frame img.is-loaded{opacity:1}
.ft-photo-credit{display:block;margin-top:6px;font-size:12px;line-height:1.4;color:var(--ft-muted);overflow-wrap:anywhere}
.ft-photo-credit a{color:var(--ft-muted)}
figure[data-ft-photo]{margin:0}
figure.is-empty{display:none}

/* ---------- At a glance ---------- */
.city-glance{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin-top:8px}
.glance-box{background:var(--ft-paper);border:1px solid var(--ft-line);border-radius:20px;padding:22px 24px;box-shadow:var(--ft-shadow)}
.glance-box h2{font-size:24px;font-weight:600;margin:0 0 14px}
.glance-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:0}
.glance-list div{min-width:0}
.glance-list dt{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ft-pine);margin-bottom:4px}
.glance-list dt span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ft-sand);font-size:15px}
.glance-list dd{margin:0;font-size:16px;line-height:1.5}
.glance-list dd a{font-weight:600}
.city-hero-card{background:var(--ft-sand);border-radius:20px;padding:22px 24px;border-left:6px solid var(--ft-sun)}
.city-hero-card>span{display:block;font-size:15px;font-weight:700;color:var(--ft-pine)}
.city-hero-card strong{display:block;font:600 24px/1.2 var(--ft-display);margin:6px 0 10px;color:var(--ft-forest)}
.city-hero-card p{margin:0;font-size:16px;line-height:1.55}
.city-hero-card .city-actions{display:none}

/* Jump links */
.city-jump{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.city-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--ft-paper);border:1px solid var(--ft-line);color:var(--ft-forest);font-weight:600;font-size:15px;text-decoration:none}
.city-jump a:hover{border-color:var(--ft-pine);color:var(--ft-pine)}

/* ---------- Sections ---------- */
.ft-guide-page .city-section{padding:clamp(36px,5vw,56px) 0 0;scroll-margin-top:84px}
.ft-guide-page .city-section-label{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--ft-pine);letter-spacing:0;text-transform:none}
.ft-guide-page .city-section-label::before{content:"";width:22px;height:4px;border-radius:4px;background:var(--ft-sun)}
.ft-guide-page .city-section h2{font-size:clamp(28px,4vw,40px);font-weight:600;line-height:1.1;margin:8px 0 20px;max-width:24ch}
.ft-guide-page .city-section>p{max-width:68ch;line-height:1.6}
.decision-grid,.pattern-grid,.practical-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cluster-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.decision-card,.cluster-card,.practical-card{background:var(--ft-paper);border:1px solid var(--ft-line);border-radius:var(--ft-radius);padding:20px 22px;box-shadow:var(--ft-shadow)}
.pattern-card{background:var(--ft-sand);border-radius:var(--ft-radius);padding:20px 22px}
.decision-card strong,.pattern-card strong,.practical-card strong{display:block;font:600 20px/1.25 var(--ft-display);color:var(--ft-forest);margin-bottom:6px}
.decision-card p,.cluster-card p,.pattern-card p,.practical-card p{margin:0;font-size:16px;line-height:1.55;color:var(--ft-forest)}
.decision-card{border-top:4px solid var(--ft-pine)}

.cluster-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.cluster-card>figure{margin:0}
.cluster-card .ft-photo-frame{border-radius:0}
.cluster-card .ft-photo-credit{padding:0 22px}
.cluster-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:10px}
.cluster-card h3{font-size:22px;font-weight:600;line-height:1.2;margin:0}
.cluster-card .tags{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.cluster-card .tags span{font-size:13px;font-weight:600;padding:4px 11px;border-radius:999px;background:var(--ft-sand);color:var(--ft-forest)}
.cluster-card .tags span.age{background:#FDE7E1;box-shadow:inset 0 0 0 1px var(--ft-coral)}
.cluster-card ul{padding-left:20px;margin:2px 0 0;font-size:16px;line-height:1.55}
.cluster-card li{margin:4px 0}

.age-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ft-guide-page .age-row{display:flex;flex-direction:column;gap:8px;background:var(--ft-paper);border:1px solid var(--ft-line);border-radius:var(--ft-radius);padding:20px 22px}
.ft-guide-page .age-row strong{align-self:flex-start;display:inline-flex;align-items:center;min-height:32px;padding:2px 14px;border-radius:999px;background:var(--ft-coral);color:var(--ft-forest);font-weight:700;font-size:19px}
.ft-guide-page .age-row p{margin:0;font-size:16px;line-height:1.55}

.verify-box{background:#EAF4F8;border:1px solid #CBE3EE;border-left:6px solid var(--ft-sky);border-radius:var(--ft-radius);padding:20px 24px}
.verify-box>strong{font-size:18px}
.verify-box ul{margin:10px 0 0;padding-left:22px;line-height:1.6;font-size:16px}
.source-list{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px}
.source-list a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:600}
.guide-note{font-size:15px;color:var(--ft-muted);line-height:1.55;margin-top:14px}

.city-final{padding:clamp(40px,6vw,64px) 0 0}
.city-final-inner{background:var(--ft-sand);border-radius:24px;padding:clamp(24px,4vw,40px);border:1px solid var(--ft-line)}
.city-final h2{margin-top:6px}
.city-final p{max-width:62ch;line-height:1.6;margin:0}
.city-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.city-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;text-decoration:none;font-weight:700;font-size:16px;background:var(--ft-pine);color:#fff;box-shadow:var(--ft-shadow)}
.city-actions a:hover{background:var(--ft-pine-dark);color:#fff}
.city-actions a.secondary{background:transparent;color:var(--ft-pine);border:2px solid var(--ft-pine);box-shadow:none}
.city-actions a.secondary:hover{background:var(--ft-paper);color:var(--ft-pine-dark)}
.ft-plan-city-btn:hover{background:#16243A!important}

@media(max-width:980px){.cluster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .city-hero{grid-template-columns:1fr}
  .city-hero-photo{order:-1}
  .city-hero-photo .ft-photo-frame{aspect-ratio:3/2;border-radius:20px}
  .city-glance,.glance-list,.decision-grid,.pattern-grid,.practical-grid,.cluster-grid,.age-grid{grid-template-columns:1fr}
  .ft-guide-page .city-guide{padding-top:18px}
}
@media(prefers-reduced-motion:reduce){.ft-photo-frame img{transition:none}html{scroll-behavior:auto}}
@media print{.ft-photo-frame{display:none}.city-jump{display:none}}

/* ---------- Content pages: guide index, About, Contact ---------- */
.ft-content-page main{max-width:1160px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(16px,4vw,32px) 80px}
.ft-page-intro{max-width:760px;margin:0 0 28px}
.ft-page-intro .ft-kicker{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--ft-pine)}
.ft-page-intro .ft-kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ft-sun)}
.ft-content-page h1{font-size:clamp(38px,6vw,60px);font-weight:600;line-height:1.05;letter-spacing:-.03em;margin:10px 0 14px}
.ft-content-page h1 em{font-style:italic;font-weight:500;color:var(--ft-pine)}
.ft-page-intro p{font-size:clamp(17px,1.6vw,19px);line-height:1.6;margin:0;max-width:62ch}
.ft-band-title{font-size:clamp(26px,3.4vw,34px);font-weight:600;margin:44px 0 6px}
.ft-band-sub{margin:0 0 18px;color:var(--ft-muted);max-width:62ch}
.ft-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--ft-pine);color:#fff!important;font-weight:700;text-decoration:none;box-shadow:var(--ft-shadow);border:0;font:700 16px var(--ft-ui);cursor:pointer}
.ft-btn:hover{background:var(--ft-pine-dark)}
.ft-btn.secondary{background:transparent;color:var(--ft-pine)!important;border:2px solid var(--ft-pine);box-shadow:none}

/* Destination photo grid */
.ft-dest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ft-dest{display:flex;flex-direction:column;background:var(--ft-paper);border:1px solid var(--ft-line);border-radius:20px;overflow:hidden;text-decoration:none;color:var(--ft-forest)!important;box-shadow:var(--ft-shadow);transition:transform .2s ease,box-shadow .2s ease}
.ft-dest:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(22,36,58,.13)}
.ft-dest .ft-photo-frame{border-radius:0;aspect-ratio:16/10}
.ft-dest-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.ft-dest-body strong{font:600 22px/1.2 var(--ft-display)}
.ft-dest-body .ft-dest-sub{font-size:15px;color:var(--ft-muted);font-weight:600}
.ft-dest-body p{margin:0;font-size:16px;line-height:1.5}
.ft-dest-go{margin-top:auto;padding-top:8px;font-weight:700;color:var(--ft-pine)}
.ft-dest-credit{padding:0 20px 12px;font-size:12px;color:var(--ft-muted)}
.ft-feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0;background:var(--ft-sand);border-radius:24px;overflow:hidden;text-decoration:none;color:var(--ft-forest)!important;margin:0 0 18px;border:1px solid var(--ft-line)}
.ft-feature .ft-photo-frame{border-radius:0;height:100%;min-height:240px;aspect-ratio:auto}
.ft-feature-body{padding:clamp(22px,4vw,36px);display:flex;flex-direction:column;justify-content:center;gap:10px}
.ft-feature-body strong{font:600 clamp(26px,3vw,34px)/1.1 var(--ft-display)}
.ft-feature-body p{margin:0;line-height:1.55}
.ft-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ft-quick{display:block;background:var(--ft-paper);border:1px solid var(--ft-line);border-left:6px solid var(--ft-sun);border-radius:18px;padding:20px 22px;text-decoration:none;color:var(--ft-forest)!important;box-shadow:var(--ft-shadow)}
.ft-quick strong{display:block;font:600 21px/1.2 var(--ft-display);margin-bottom:4px}
.ft-quick span{display:block;color:var(--ft-muted);font-weight:600;font-size:15px;margin-bottom:8px}
.ft-quick p{margin:0;font-size:16px;line-height:1.55}
.ft-note{font-size:15px;color:var(--ft-muted);margin-top:28px;max-width:70ch}
@media(max-width:980px){.ft-dest-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.ft-dest-grid,.ft-quick-grid,.ft-feature{grid-template-columns:1fr}.ft-feature .ft-photo-frame{min-height:0;aspect-ratio:16/10}}
@media(prefers-reduced-motion:reduce){.ft-dest{transition:none}.ft-dest:hover{transform:none}}

/* Simple content cards (About, Contact) */
.ft-card{background:var(--ft-paper);border:1px solid var(--ft-line);border-radius:20px;padding:clamp(20px,3vw,28px);box-shadow:var(--ft-shadow)}
.ft-band{background:var(--ft-sand);border-radius:24px;padding:clamp(22px,4vw,36px)}

/* Singapore "discover together" board (family-guide-discovery.js) in the light brand. */
.ft-guide-page .discovery-board{background:var(--ft-sand);color:var(--ft-forest);border-radius:24px;margin:36px 0 8px}
.ft-guide-page .discovery-board h2{font-weight:600;color:var(--ft-forest)}
.ft-guide-page .board-plan{background:var(--ft-pine);font-weight:700;min-height:48px}
.ft-guide-page .discovery-tile{border-color:var(--ft-line);border-radius:18px;box-shadow:var(--ft-shadow)}
.ft-guide-page .discovery-tile h3{font-weight:600}
.ft-guide-page .discovery-tile p{font-size:16px;line-height:1.55}
.ft-guide-page .discovery-photo span{font-size:13px;font-weight:700}
.ft-guide-page .tile-photo-credit,.ft-guide-page .tile-source{font-size:12px}
.ft-guide-page .tile-role{font-size:13px;letter-spacing:0;text-transform:none;color:var(--ft-pine)}
.ft-guide-page .tile-meta,.ft-guide-page .board-photo-note{font-size:14px;color:var(--ft-muted)}
.ft-guide-page .tile-actions button{min-height:44px;padding:8px 14px;font:600 15px var(--ft-ui);border-color:var(--ft-line);color:var(--ft-pine)}
.ft-guide-page .tile-actions button[aria-pressed=true]{background:var(--ft-pine);color:#fff}
/* Round 11: breadcrumb and photo-credit links large enough to tap */
.city-breadcrumb a{display:inline-block;min-height:44px;line-height:44px}