@font-face{font-family:"Instrument Serif";src:url(/fonts/InstrumentSerif.ttf);font-display:swap}
@font-face{font-family:"Instrument Serif";font-style:italic;src:url(/fonts/InstrumentSerif-Italic.ttf);font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/Inter.ttf);font-weight:100 900;font-display:swap}
:root{--bg:#070d16;--panel:#0d1522;--line:#1c2433;--line2:#2e3747;--text:#f2efe9;--ink2:#cfcac1;--muted:#8f97a3;--gold:#c9a66b;--gold2:#e0c38e}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
.serif{font-family:"Instrument Serif",Georgia,serif;font-weight:400}
nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px 64px;background:#070d16f2;border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.brand{display:flex;flex-direction:column;line-height:1.1;text-decoration:none}
.brand b{font-family:"Instrument Serif",serif;font-weight:400;font-size:28px;line-height:1}
.brand span{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold2);font-weight:600}
.links{display:flex;gap:34px;align-items:center;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase}
.links a{text-decoration:none;color:var(--ink2)}.links a:hover{color:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:600 15px Inter,sans-serif;padding:14px 24px;border-radius:2px;letter-spacing:0;text-transform:none;text-decoration:none;transition:transform .15s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--gold);color:#14110b!important}.btn-gold:hover{background:var(--gold2)}
.btn-line{border:1px solid var(--gold);color:var(--gold2)!important;background:transparent}.btn-line:hover{background:#c9a66b1a}
.links .btn{padding:11px 18px;font-size:12.5px}
.eyebrow{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold2);font-weight:600}
/* article */
.a-hero{position:relative;height:min(66vh,580px);overflow:hidden;isolation:isolate}
.a-hero::before{content:"";position:absolute;z-index:3;inset:22px 40px 0 40px;border:1px solid #c9a66b40;border-bottom:0;pointer-events:none}
.a-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.8) contrast(1.05) brightness(.85)}
.a-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 3%,#070d16a6 45%,#070d1633 100%),linear-gradient(90deg,#070d1666,transparent 30%,transparent 70%,#070d1666)}
.a-head{position:relative;z-index:2;max-width:760px;margin:-210px auto 0;padding:0 5vw}
.a-head h1{font-size:clamp(42px,5.6vw,72px);line-height:.98;margin:14px 0 16px;letter-spacing:-.5px}
.a-head h1 em{color:var(--gold2)}
.a-meta{color:var(--muted);font-size:13.5px;display:flex;gap:14px;flex-wrap:wrap}
.credit{max-width:760px;margin:10px auto 0;padding:0 5vw;font-size:11.5px;color:var(--muted)}
article{max-width:760px;margin:0 auto;padding:26px 5vw 40px}
article p,article li{color:var(--ink2);font-size:17px}
article p{margin:0 0 18px}
article h2{font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(30px,3.4vw,40px);line-height:1.08;margin:44px 0 14px;color:var(--text)}
article h3{font-size:18px;margin:26px 0 8px;color:var(--gold2)}
article ul,article ol{margin:0 0 20px 22px}article li{margin-bottom:8px}
article a{color:var(--gold2);text-underline-offset:3px}
article strong{color:var(--text)}
.answer{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:2px;padding:18px 20px;margin:8px 0 26px}
.answer p{margin:0}.answer b{color:var(--gold2)}
.toc{border:1px solid var(--line);border-radius:2px;padding:16px 20px;margin:0 0 28px;font-size:15px}
.toc b{display:block;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.toc ol{margin:0 0 0 18px}.toc li{font-size:15px;margin-bottom:4px}.toc a{color:var(--ink2);text-decoration:none}.toc a:hover{color:var(--gold2)}
.box{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:24px;margin:34px 0}
.box h3{margin-top:0;font-family:"Instrument Serif",serif;font-weight:400;font-size:30px;line-height:1.1;color:var(--text)}
.box p{margin-bottom:16px}
.box .row{display:flex;gap:12px;flex-wrap:wrap}
.cta-box{background:linear-gradient(135deg,#131c2b,#0a111c);border-color:#c9a66b55;box-shadow:inset 0 0 0 1px #c9a66b14}
.ig-box{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center}
.ig-thumb{aspect-ratio:9/16;border-radius:4px;border:1px solid var(--line2);background:radial-gradient(circle at 30% 30%,#1b2638,#070d16 70%);display:grid;place-items:center;text-decoration:none;color:var(--muted);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;text-align:center;padding:10px}
.ig-thumb i{display:block;width:54px;height:54px;border-radius:50%;border:1.5px solid var(--gold);margin:0 auto 10px;position:relative}
.ig-thumb i::after{content:"";position:absolute;left:21px;top:16px;border-left:16px solid var(--gold);border-top:10px solid transparent;border-bottom:10px solid transparent}
.checklist li{list-style:none;position:relative;padding-left:4px}.checklist{margin-left:18px}
.checklist li::before{content:"□";position:absolute;left:-20px;color:var(--gold)}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;color:var(--text);list-style:none}
.faq summary::after{content:"+";float:right;color:var(--gold)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:10px 0 0}
.sources{font-size:14px}.sources li{font-size:14px;color:var(--muted)}
.series{border-top:1px solid var(--line);padding-top:20px;margin-top:34px}
.updated{font-size:13px;color:var(--muted)}
/* follow strip */
.follow{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a111c;padding:22px 4vw;display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.follow .av{width:44px;height:44px;border-radius:50%;border:2px solid var(--gold);display:grid;place-items:center;font-family:"Instrument Serif",serif;font-size:22px;color:var(--gold2)}
.follow p{color:var(--ink2);font-size:15px}.follow b{color:var(--text)}
/* index */
.b-head{position:relative;max-width:1100px;margin:0 auto;padding:96px 5vw 40px;isolation:isolate}
.b-head::before{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw) 0 35%;background:url(/img/ortigas-map.jpg) 40% 30%/cover no-repeat;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%,#000 70%,transparent),linear-gradient(0deg,transparent,#000 40%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 40%,#000 70%,transparent),linear-gradient(0deg,transparent,#000 40%);mask-composite:intersect}
.b-head::after{content:"Map data © OpenStreetMap contributors";position:absolute;right:5vw;bottom:12px;font-size:10.5px;color:var(--muted)}
.b-head h1{font-size:clamp(46px,6.4vw,92px);line-height:.94;margin:14px 0 16px;letter-spacing:-1px}.b-head h1 em{color:var(--gold2)}
.b-head p{color:var(--ink2);max-width:600px;font-size:17px}
.posts{max-width:1100px;margin:0 auto;padding:20px 5vw 56px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post{background:var(--panel);border:1px solid var(--line);border-radius:2px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:border-color .2s}
.post:hover{border-color:#c9a66b80}
.post img{width:100%;aspect-ratio:16/10;object-fit:cover}
.post .pb{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.post h2{font-family:"Instrument Serif",serif;font-weight:400;font-size:27px;line-height:1.08}
.post p{color:var(--muted);font-size:14.5px}
.post .k{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold2);font-weight:600}
.post.soon{opacity:.55;pointer-events:none}.post.soon .ph{aspect-ratio:16/10;background:radial-gradient(circle at 30% 30%,#1b2638,#070d16 70%)}
.b-cta{max-width:1100px;margin:0 auto 60px;padding:0 5vw}
footer{border-top:1px solid var(--line);padding:34px 64px 46px;color:var(--muted);font-size:12.5px;display:grid;gap:8px}
footer b{color:var(--text);font-family:"Instrument Serif",serif;font-weight:400;font-size:22px}
footer a{color:var(--gold2)}
@media (max-width:900px){
 nav{padding:14px 18px}footer{padding:30px 22px 40px}.a-hero::before{inset:14px 12px 0 12px}.b-head{padding-top:64px}.b-head::before{inset:0 0 0 10%;opacity:.4}.b-head::after{font-size:9px;bottom:6px}
 .links a:not(.btn){display:none}
 .brand b{font-size:22px}.brand span{font-size:9.5px;letter-spacing:1.8px}
 .links .btn{white-space:nowrap;padding:8px 12px;font-size:12.5px}
 .posts{grid-template-columns:1fr}
 .a-head{margin-top:-150px}
 article p,article li{font-size:16.5px}
 .ig-box{grid-template-columns:96px 1fr;gap:16px}
}
sup{font-size:11px;margin-left:1px}sup a{text-decoration:none;color:var(--gold)}
.post img{height:auto;flex:none}.posts{align-items:start}

/* redesign D: section numerals, gold hairlines */
article h2{position:relative;padding-top:18px}
article h2::before{content:"";position:absolute;left:0;top:0;width:56px;height:1px;background:var(--gold)}
.post h2{font-size:28px}
.post img{filter:saturate(.85)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.post{transition:none}}

/* lead capture (Oct 22): end-of-guide box, booking first, City Notes email as a quiet second line */
.endbox .nl{border-top:1px solid #c9a66b33;margin-top:22px;padding-top:18px}
.endbox .nl-k{font-size:15px;color:var(--ink2);margin:0 0 10px}
.endbox .nl-k b{color:var(--text)}
.nlf{display:grid;grid-template-columns:1fr auto;gap:10px;max-width:520px}
.nlf input[type=email]{font:16px Inter,sans-serif;color:var(--text);background:#080f19;border:1px solid var(--line2);border-radius:2px;padding:11px 12px;outline:none;width:100%}
.nlf input[type=email]:focus{border-color:var(--gold)}
.nlf .btn{padding:11px 18px;font-size:14px;color:var(--text)!important;border-color:var(--line2)}
.nlc{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--muted);margin:10px 0 0;line-height:1.45;max-width:560px}
.nlc input{width:16px;height:16px;margin-top:1px;accent-color:var(--gold);flex:none}
.nl .err{color:#f0a48c;font-size:13px;margin-top:6px}.nl .err:empty{display:none}
.nl .hp{position:absolute;left:-9999px}
.nl .done p{margin:0;color:var(--ink2)}.nl .done b{color:var(--gold2)}
.nl-pr{font-size:14px;margin:14px 0 0!important;color:var(--muted)}
@media (max-width:900px){.nlf{grid-template-columns:1fr}.endbox .nl-k{font-size:14.5px}}