:root{--paper:#f8f5f0;--ink:#203a35;--forest:#173b36;--muted:#65736e;--line:#e7e0d6;--accent:#ad835f;--card:#fffefa}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;line-height:1.6}a{text-decoration:none;color:inherit}a:focus-visible{outline:3px solid #a97a40;outline-offset:3px}.container{max-width:1130px;padding:0 24px;margin:auto}.topbar{background:#fffefaee;position:sticky;top:0;z-index:10;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.topbar .container{display:flex;justify-content:space-between;align-items:center;min-height:72px;gap:16px}.logo{display:flex;gap:12px;align-items:center}.star{display:grid;place-items:center;width:39px;height:39px;background:var(--forest);color:#fff;border-radius:100%;font-size:23px}.logo strong{display:block;font-size:12px;letter-spacing:.22em}.logo small{display:block;font-size:9px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}.navlink{font-size:12px;font-weight:650;padding:9px 15px;border:1px solid var(--line);border-radius:30px}.crumbs{padding:23px 0;font-size:12px;color:#65746e}.crumbs a{text-decoration:underline;text-underline-offset:3px}.crumbs b{font-weight:450;color:#9ea9a1;margin:0 7px}.hero{position:relative;min-height:460px;display:flex;align-items:end;overflow:hidden;border-radius:16px;isolation:isolate;background:#345b58}.hero img,.hero .backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(92deg,#082b2cc7 0%,#11383ca6 41%,#1a33322e 100%)}.hero .content{padding:54px 55px 62px;color:white;max-width:850px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}.hero h1,.heading h2,.story h2,.card h3,.quote,.videobox h3,.empty h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.035em}.hero h1{font-size:clamp(48px,8vw,90px);line-height:1.03;margin:11px 0 18px}.hero p{font-size:16px;color:#f1f6f1;max-width:530px;margin:0 0 22px}.tag{display:inline-block;border-radius:50px;border:1px solid #ffffffa0;padding:7px 12px;font-size:11px;letter-spacing:.04em}.heading{margin:50px 0 20px}.heading .eyebrow{color:#b68d62}.heading h2{font-size:clamp(34px,5vw,48px);line-height:1.2;margin:9px 0 8px}.heading p{color:var(--muted);font-size:14px;max-width:690px;margin:0}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.cards.places{grid-template-columns:repeat(3,minmax(0,1fr))}.card{display:block;background:var(--card);border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 4px 16px #203a3509;transition:transform .2s}.card:hover{transform:translateY(-3px)}.card .cover{position:relative;height:250px;background:#a7bcb1}.cards.places .cover{height:205px}.card .cover img{width:100%;height:100%;object-fit:cover;display:block}.card .label{position:absolute;left:14px;top:14px;border-radius:50px;color:#fff;background:#1c423bdb;padding:6px 12px;font-size:11px}.card .details{padding:20px 22px 24px}.card h3{font-size:31px;margin:1px 0 6px}.card p{font-size:13px;color:var(--muted);margin:0}.card .arrow{float:right;color:var(--accent);font-size:26px}.meta{display:flex;gap:35px;flex-wrap:wrap;padding:24px 0;border-bottom:1px solid var(--line)}.meta>div{display:flex;flex-direction:column}.meta small{font-size:10px;color:var(--accent);font-weight:800;letter-spacing:.13em;text-transform:uppercase}.meta strong{font-weight:600;font-size:13px}.story{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:52px 0}.story h2{font-size:clamp(35px,5vw,53px);margin:8px 0}.story .text{font-family:Georgia,serif;font-size:23px;line-height:1.55}.story p{color:var(--muted);font-size:14px}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.gallery figure{margin:0;overflow:hidden;border-radius:13px;background:#cfdcd5;position:relative;aspect-ratio:3/4}.gallery figure.wide{grid-column:span 2;aspect-ratio:1.52}.gallery figure.full{grid-column:span 3;aspect-ratio:2.05}.gallery a{display:block;height:100%;width:100%}.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}.gallery figure:hover img{transform:scale(1.035)}.gallery figcaption{position:absolute;left:0;bottom:0;right:0;padding:40px 16px 12px;color:white;font-size:12px;background:linear-gradient(transparent,#162d29a9);pointer-events:none}.picnote{font-size:12px;color:var(--muted);margin:12px 0}.empty{background:#e4ece6;border:1px dashed #9eb5a7;border-radius:17px;text-align:center;padding:65px 20px}.empty .icon{font-family:Georgia,serif;font-size:55px;color:#6d9482}.empty h2{margin:0 0 10px;font-size:36px}.empty p{margin:0 auto;color:var(--muted);font-size:14px;max-width:500px}.videobox{display:flex;align-items:center;gap:20px;background:#ede8df;border:1px dashed #c1bcaf;margin:26px 0 20px;border-radius:15px;padding:24px}.videobox .play{width:62px;height:62px;border-radius:100%;background:#dae5dc;display:grid;place-items:center;font-size:27px;flex-shrink:0}.videobox h3{margin:0 0 5px;font-size:25px}.videobox p{font-size:13px;color:var(--muted);margin:0}.next{margin:40px 0 18px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;font-size:13px}.next a{text-decoration:underline;text-underline-offset:3px}.panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0}.panels>div{background:#e4ede4;border-radius:15px;padding:27px}.panels>div:last-child{background:#ede8dd}.panels strong{font-family:Georgia,serif;font-weight:400;font-size:28px}.panels p{font-size:14px;color:var(--muted);margin:6px 0}.footer{border-top:1px solid var(--line);margin-top:60px;padding:28px 0 44px;color:var(--muted);font-size:12px}.footer strong{color:var(--ink)}.edit-note{font-size:13px;background:#eef2ea;border-radius:13px;padding:18px 22px;color:#526a59;margin:20px 0}.gallery-count{font-size:11px;letter-spacing:.13em;color:#9b7a54;text-transform:uppercase}.gallery-chip{background:#fffefa;padding:8px 12px;border-radius:50px;font-size:11px;border:1px solid var(--line);display:inline-flex;gap:6px}.thumbs{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}.thumbs a{color:#456c5b;text-decoration:underline;font-size:12px}@media(max-width:750px){.container{padding:0 15px}.hero{min-height:420px}.hero .content{padding:36px 26px 44px}.hero h1{font-size:56px}.story{grid-template-columns:1fr;gap:12px;margin:38px 0}.cards.places{grid-template-columns:repeat(2,minmax(0,1fr))}.cards.places .cover{height:195px}.card h3{font-size:27px}.gallery{gap:8px}.gallery figcaption{font-size:11px}.topbar .container{min-height:65px}.logo strong{font-size:11px;letter-spacing:.12em}.logo small{font-size:8px}.navlink{font-size:11px}.meta{gap:22px}}@media(max-width:480px){.hero{min-height:390px}.hero h1{font-size:48px}.hero p{font-size:14px}.cards,.cards.places{grid-template-columns:1fr}.cards .cover,.cards.places .cover{height:230px}.heading{margin-top:36px}.gallery{grid-template-columns:1fr 1fr}.gallery figure{aspect-ratio:3/4}.gallery figure.wide{grid-column:span 2}.gallery figure.full{grid-column:span 2;aspect-ratio:1.5}.panels{grid-template-columns:1fr}.videobox{padding:18px}.videobox .play{width:48px;height:48px}.story .text{font-size:20px}}


/* Philippines 2027 animated flag */
.flag-card,.flag-scene{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.flag-card{background:radial-gradient(circle at 20% 20%, #456f69 0%, #244641 48%, #173b36 100%)}
.flag-scene{background:linear-gradient(135deg,#113632 0%,#1f4e47 45%,#254e50 100%)}
.flag-card::before,.flag-scene::before{content:"";position:absolute;inset:auto -10% -25% -10%;height:55%;background:radial-gradient(ellipse at center,#ffffff14 0%,transparent 70%);filter:blur(22px)}
.flag-card::after,.flag-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 30%,rgba(0,0,0,.12) 100%);pointer-events:none}
.flag-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.flag-wrap.small{width:min(76%,320px);height:150px}
.flag-wrap.large{width:min(82%,780px);height:270px}
.flag-pole{position:absolute;left:6%;top:50%;transform:translateY(-50%);width:8px;height:88%;border-radius:10px;background:linear-gradient(180deg,#e8e3d8,#8a7f72 45%,#c9bfb2 100%);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.25)}
.flag-pole::before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7cf 0%,#f0c96a 38%,#a77824 100%)}
.flag-ph{position:absolute;left:calc(6% + 8px);top:50%;transform:translateY(-50%);width:82%;height:68%;filter:drop-shadow(0 10px 24px rgba(0,0,0,.28));transform-origin:left center;animation:flag-wave 3.8s ease-in-out infinite}
.flag-ph .cloth{position:absolute;inset:0;border-radius:0 14px 14px 0;overflow:hidden;background:linear-gradient(to bottom,#0057b8 0 50%,#ce1126 50% 100%)}
.flag-ph .cloth::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(100deg,rgba(255,255,255,.18) 0 24px,rgba(255,255,255,.02) 24px 50px,rgba(0,0,0,.08) 50px 74px,rgba(255,255,255,.04) 74px 100px);mix-blend-mode:soft-light;opacity:.75;animation:shine-shift 5s linear infinite}
.flag-ph .triangle{position:absolute;left:0;top:0;height:100%;width:42%;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
.flag-ph .sun{position:absolute;left:14%;top:50%;transform:translate(-50%,-50%);width:16%;aspect-ratio:1;border-radius:50%;background:#f7c641;box-shadow:0 0 0 6px rgba(247,198,65,.12)}
.flag-ph .sun::before{content:"";position:absolute;inset:-36%;background:conic-gradient(from 0deg,#f7c641 0 10deg,transparent 10deg 35deg,#f7c641 35deg 45deg,transparent 45deg 80deg,#f7c641 80deg 90deg,transparent 90deg 125deg,#f7c641 125deg 135deg,transparent 135deg 170deg,#f7c641 170deg 180deg,transparent 180deg 215deg,#f7c641 215deg 225deg,transparent 225deg 260deg,#f7c641 260deg 270deg,transparent 270deg 305deg,#f7c641 305deg 315deg,transparent 315deg 350deg,#f7c641 350deg 360deg);-webkit-mask:radial-gradient(circle,transparent 0 38%,#000 39% 72%,transparent 73%);mask:radial-gradient(circle,transparent 0 38%,#000 39% 72%,transparent 73%)}
.flag-ph .star{position:absolute;width:6.2%;aspect-ratio:1;background:#f7c641;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.flag-ph .star.s1{left:6.5%;top:12%}
.flag-ph .star.s2{left:6.5%;bottom:12%}
.flag-ph .star.s3{left:29%;top:50%;transform:translateY(-50%)}
.flag-caption{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.hero.flag-hero{background:#193f3a}
.hero.flag-hero .content{position:relative;z-index:2}
.card .cover.flag-cover{background:#173b36}
.card .cover.flag-cover > img{display:none}
@keyframes flag-wave{0%{transform:translateY(-50%) perspective(1200px) rotateY(0deg) skewY(0deg) scaleY(1)}25%{transform:translateY(-50%) perspective(1200px) rotateY(-8deg) skewY(1.2deg) scaleY(1.01)}50%{transform:translateY(-50%) perspective(1200px) rotateY(0deg) skewY(-1.4deg) scaleY(.995)}75%{transform:translateY(-50%) perspective(1200px) rotateY(7deg) skewY(.9deg) scaleY(1.01)}100%{transform:translateY(-50%) perspective(1200px) rotateY(0deg) skewY(0deg) scaleY(1)}}
@keyframes shine-shift{0%{transform:translateX(-8%)}50%{transform:translateX(8%)}100%{transform:translateX(-8%)}}
@media(max-width:750px){.flag-wrap.large{width:min(88%,620px);height:220px}.flag-wrap.small{height:136px}.flag-caption{bottom:14px;font-size:10px}}
@media(max-width:480px){.flag-wrap.large{width:min(92%,520px);height:190px}.flag-wrap.small{width:min(82%,290px);height:122px}.flag-pole{left:4.5%}.flag-ph{width:84%}.flag-caption{display:none}}



/* Full-photo preview refinement – 27 October 2026 */
.card .cover.photo-cover {height:320px;background:#243b39;isolation:isolate;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .cover.photo-cover::before{content:"";position:absolute;inset:-15px;background-image:var(--preview-image);background-size:cover;background-position:center;filter:blur(20px) brightness(.52) saturate(.88);transform:scale(1.07);z-index:-1}
.card .cover.photo-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#071d190d,#071d1926);z-index:-1}
.card .cover.photo-cover img{position:relative;display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 8px 18px #102d2b40)}
.card .cover.photo-cover .label{z-index:2;left:13px;top:13px}
.cards.places{align-items:stretch}
.cards.places .cover.photo-cover{height:290px}
@media(max-width:750px){.cards.places .cover.photo-cover{height:250px}}
@media(max-width:480px){.cards.places .cover.photo-cover{height:300px}}
/* Portraits in hero sections: full length, no chopped heads, legs, or group */
.hero.hero-portrait{min-height:475px;background:linear-gradient(115deg,#123932 0%,#25473d 50%,#2e4c46 100%);display:flex;align-items:end;justify-content:flex-start;isolation:isolate}
.hero.hero-portrait::after{content:"";position:absolute;inset:-22px;background-image:var(--hero-image);background-size:cover;background-position:center;filter:blur(30px) brightness(.28);z-index:-3}
.hero.hero-portrait::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0c2b2de8 0%,#133331e0 37%,#13333145 70%,transparent 100%);z-index:-1;pointer-events:none}
.hero.hero-portrait .hero-portrait-img{inset:0 0 0 auto;width:48%;height:100%;object-fit:contain;object-position:center;z-index:-2;filter:drop-shadow(0px 12px 24px rgba(0,0,0,.28));}
.hero.hero-portrait .content{max-width:57%;position:relative;z-index:1}
@media(max-width:750px){.hero.hero-portrait{min-height:530px}.hero.hero-portrait .hero-portrait-img{width:62%;opacity:.9}.hero.hero-portrait .content{max-width:68%}}
@media(max-width:480px){.hero.hero-portrait{min-height:590px;align-items:end}.hero.hero-portrait .hero-portrait-img{inset:0 0 auto 0;width:100%;height:74%;object-fit:contain;object-position:center top;opacity:1}.hero.hero-portrait::before{background:linear-gradient(0deg,#0c2b2df5 0%,#0c2b2dce 27%,#0c2b2d1b 70%)}.hero.hero-portrait .content{max-width:100%;padding:26px 25px 30px}.hero.hero-portrait h1{font-size:47px;margin:8px 0}.hero.hero-portrait p{font-size:14px;max-width:95%}}
/* Gallery cards: entire shot visible, with soft-focus coordinated background */
.gallery figure.uncropped{isolation:isolate;background:#29413f}
.gallery figure.uncropped::before{content:"";position:absolute;inset:-12px;background-image:var(--preview-image);background-position:center;background-size:cover;filter:blur(18px) brightness(.5) saturate(.85);z-index:-1}
.gallery figure.uncropped img{object-fit:contain;object-position:center;filter:drop-shadow(0 5px 16px #132a2840)}
.gallery figure.uncropped figcaption{background:linear-gradient(transparent,#112c28b5);padding-top:28px}
@media(prefers-reduced-motion:reduce){.card:hover{transform:none}.gallery figure:hover img{transform:none}.flag-ph,.flag-ph .cloth::after{animation:none}}

/* Philippine flag 2027: cinematic short loop, no external libraries */
.flag-film-cover{background:#132f32;isolation:isolate}
.flag-film-cover .flag-film-poster,.flag-film-cover .flag-film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.flag-film-cover .flag-film-video{z-index:1}
.flag-film-cover .label{z-index:2;background:#112e2ac9;backdrop-filter:blur(8px)}
.flag-film-cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#00000022,transparent 28%,transparent 72%,#00000021)}
.flag-film-hero{background:#173934;isolation:isolate}
.flag-film-hero .flag-film-stage{position:absolute;inset:0 0 0 auto;width:100%;overflow:hidden;z-index:-2;background:#183738}
.flag-film-hero .flag-film-poster,.flag-film-hero .flag-film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right}
.flag-film-hero .flag-film-video{z-index:1}
.flag-film-hero::before{z-index:-1;background:linear-gradient(90deg,#102e30f5 0%,#102e30e8 37%,#102e3095 56%,#102e3015 100%)}
.flag-film-hero .content{z-index:1;position:relative;max-width:670px;text-shadow:0 2px 14px #05282566}
@media(max-width:750px){.flag-film-hero .flag-film-video,.flag-film-hero .flag-film-poster{object-position:55% center}.flag-film-hero::before{background:linear-gradient(0deg,#102e30f4 0%,#102e30d9 27%,#102e3070 61%,#102e3020 100%)}.flag-film-hero .content{padding:38px 29px 42px}}
@media(prefers-reduced-motion:reduce){.flag-film-video{display:none!important}}


/* 2027: photorealistic ocean sunset & moving flag - October 2026 */
.flag-film-cover{background:#b85a39}
.flag-film-cover .flag-film-poster,.flag-film-cover .flag-film-video{object-position:15% center}
.flag-film-hero{background:#b85a39}
.flag-film-hero .flag-film-stage{background:#b85a39}
.flag-film-hero .flag-film-poster,.flag-film-hero .flag-film-video{object-position:4% center}
/* The photographic flag stays left, so the lettering is placed over the open sky on the right. */
.flag-film-hero{justify-content:flex-end;align-items:flex-end}
.flag-film-hero::before{background:linear-gradient(90deg,transparent 0%,rgba(20,17,22,.06) 48%,rgba(18,22,28,.73) 100%)}
.flag-film-hero .content{position:relative;z-index:2;margin-left:auto;max-width:57%;text-align:right;padding:40px 42px 44px;text-shadow:0 2px 16px rgba(0,0,0,.58)}
.flag-film-hero .content p{margin-left:auto}
@media(max-width:750px){
 .flag-film-hero{min-height:460px;justify-content:flex-end}
 .flag-film-hero::before{background:linear-gradient(0deg,rgba(17,24,28,.92) 0%,rgba(18,20,24,.46) 39%,rgba(0,0,0,.03) 78%)}
 .flag-film-hero .flag-film-poster,.flag-film-hero .flag-film-video{object-position:0% center}
 .flag-film-hero .content{max-width:100%;margin-left:0;width:100%;text-align:left;padding:28px 26px 34px}
 .flag-film-hero .content p{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.flag-film-video{display:none!important}}