/*
Theme Name: Halsey Nguyen
Author: Halsey Nguyen
Description: Personal portfolio, blog, travel and food theme converted from Halsey's custom static website.
Version: 1.3.0
Text Domain: halsey-nguyen
Requires at least: 6.4
Requires PHP: 7.4
*/

/* ============================================================
   HALSEY NGUYEN — design system
   Layout & type modelled on johnpham.co.uk:
   Inter body, Cormorant Garamond uppercase headings,
   ruled-box widget grid, 4fr/2fr main grid, 6-col footer.
   ============================================================ */
:root{
  --background:#fff;
  --foreground:#171717;
  --topbar-background:#171717;
  --separator:rgba(0,0,0,.1);
  --muted-foreground:#737373;
  --font-sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --font-display:"Cormorant Garamond",Georgia,serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --background:#0a0a0a;--foreground:#ededed;--topbar-background:#0a0a0a;
    --separator:#3b3b3b;--muted-foreground:#989898;
  }
}
:root[data-theme="dark"]{
  --background:#0a0a0a;--foreground:#ededed;--topbar-background:#0a0a0a;
  --separator:#3b3b3b;--muted-foreground:#989898;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--background);color:var(--foreground);
  font-family:var(--font-sans);font-size:14px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1{font-family:var(--font-display);font-size:2.25rem;line-height:1.111;font-weight:500;text-transform:uppercase;margin:0}
h2,h3,h4{margin:0}
p{margin:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--foreground);color:var(--background);padding:.5rem 1rem}

/* ---------- layout primitives ---------- */
.container{width:100%;margin-inline:auto;padding-inline:1rem}
@media (min-width:40rem){.container{max-width:40rem}}
@media (min-width:48rem){.container{max-width:48rem}}
@media (min-width:64rem){.container{max-width:64rem}}
@media (min-width:80rem){.container{max-width:80rem}}
@media (min-width:96rem){.container{max-width:96rem}}
.no-auto-padding{padding-inline:0}
#layout{display:flex;flex-direction:column;justify-content:space-between;row-gap:20px;min-height:100vh}
.flex-col{display:flex;flex-direction:column}

.home-section{border-left:1px solid var(--separator);border-right:1px solid var(--separator)}
.widget-spacing{padding:2rem 0}
@media (min-width:40rem){.widget-spacing{padding:2rem}}
.widget-border-bottom{border-bottom:1px solid var(--separator)}

.grid-A{display:grid;grid-template-columns:1fr;grid-auto-rows:max-content;width:100%}
.grid-A>:first-child{border-bottom:1px solid var(--separator)}
@media (min-width:64rem){
  .grid-A{grid-template-columns:4fr 2fr}
  .grid-A>:first-child{border-right:1px solid var(--separator);border-bottom:0}
}

.section-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.heading-action{
  display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap;
  font-weight:700;font-size:.7rem;text-decoration:underline;
  text-underline-offset:4px;transition:all .2s;
}
.heading-action:hover{text-decoration:none;cursor:pointer}
.heading-action svg{width:.85em;height:.85em}
.muted{color:var(--muted-foreground)}
.lede{font-size:.9rem;line-height:1.6;color:var(--muted-foreground);margin-top:.75rem;max-width:62ch}

/* ---------- topbar ---------- */
#topbar{
  display:flex;align-items:center;justify-content:center;
  background:var(--topbar-background);color:#fff;letter-spacing:.1rem;
  padding:10px 0;font-size:.6rem;font-weight:600;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #topbar{border-bottom:2px solid rgba(255,255,255,.1)}}
#topbar .container{display:flex;justify-content:center;align-items:center}
#topbar .topbar-inner{position:relative;padding-left:3rem;padding-right:3rem;min-height:24px}
#topbar .slide{max-width:100%;justify-content:center}
#topbar-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.theme-toggle{
  position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border:1px solid rgba(255,255,255,.35);border-radius:999px;
  background:transparent;color:#fff;padding:0;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s,border-color .2s,transform .2s;
}
.theme-toggle:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}
.theme-toggle:active{transform:translateY(-50%) scale(.94)}
.theme-icon{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-icon-moon{display:none}
:root[data-theme="dark"] .theme-icon-sun{display:none}
:root[data-theme="dark"] .theme-icon-moon{display:block}
:root[data-theme="light"] .theme-icon-sun{display:block}
:root[data-theme="light"] .theme-icon-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-icon-sun{display:none}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-icon-moon{display:block}
}
@media (max-width:420px){
  #topbar .topbar-inner{padding-left:2.6rem;padding-right:2.6rem}
  .theme-toggle{right:.6rem}
}
.slide{display:flex;align-items:center;gap:.5rem;font-weight:600;opacity:1;transition:opacity .3s;text-align:center}
.slide.hidden{opacity:0}
.blob{width:5px;height:5px;border-radius:50%;background:red;flex-shrink:0;animation:pulse 2s infinite}
@keyframes pulse{
  0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(255,0,0,.8)}
  70%{transform:scale(1);box-shadow:0 0 0 6px rgba(255,0,0,0)}
  100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(255,0,0,0)}
}

/* ---------- navbar ---------- */
#navbar{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 0}
@media (min-width:48rem){#navbar{flex-direction:row}}
#navbar .nav-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}
#logo{text-transform:uppercase;letter-spacing:.25rem;font-size:1rem;font-weight:800;transition:all .2s ease-in-out}
#logo:hover{cursor:pointer;opacity:.5}
.menu-link{
  color:inherit;text-transform:uppercase;letter-spacing:.06rem;background:none;border:0;padding:0;
  font-size:.6rem;font-weight:500;transition:all .2s ease-in-out;
}
.menu-link:hover{cursor:pointer;opacity:.5}
.menu-link[aria-current="page"]{font-weight:800;text-decoration:underline;text-underline-offset:4px}
.desktop-menu{display:none}
@media (min-width:48rem){.desktop-menu{display:flex;gap:2rem;align-items:center}}
.menu-group{display:flex;gap:1.25rem;align-items:center}
.social-group{display:flex;gap:.75rem;align-items:center}
.social-icon{font-size:.85rem;transition:all .2s ease-in-out;display:inline-flex}
.social-icon:hover{cursor:pointer;opacity:.5}
.social-icon svg{width:1em;height:1em;fill:currentColor}
.toggler{width:30px;height:30px;color:var(--foreground);background:none;border:0;display:inline-flex;align-items:center;justify-content:center}
.toggler:hover{cursor:pointer;opacity:.5}
@media (min-width:48rem){.toggler{display:none}}
.hamburger .line{
  fill:none;stroke:currentColor;stroke-width:5.5;stroke-linecap:round;
  transition:stroke-dasharray .5s cubic-bezier(.25,.1,.25,1),stroke-dashoffset .5s cubic-bezier(.25,.1,.25,1);
}
.hamburger .line1,.hamburger .line3{stroke-dasharray:60 207}
.hamburger .line2{stroke-dasharray:60 60}
.toggler[aria-expanded="true"] .line1,.toggler[aria-expanded="true"] .line3{stroke-dasharray:90 207;stroke-dashoffset:-134}
.toggler[aria-expanded="true"] .line2{stroke-dasharray:1 60;stroke-dashoffset:-30}
.mobile-menu{display:grid;grid-template-rows:0fr;width:100%;overflow:hidden;transition:grid-template-rows .24s}
.mobile-menu.open{grid-template-rows:1fr}
@media (min-width:48rem){.mobile-menu{display:none}}
.mobile-menu-inner{display:flex;flex-direction:column;gap:14px;min-height:0}
.mobile-links{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;padding-top:20px}
.mobile-line{height:1px;background:var(--separator);width:100%}
.mobile-socials{display:flex;gap:.75rem;align-items:center;padding-bottom:20px}

.sidebar-backdrop{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity .24s}
.sidebar-backdrop.open{opacity:1;pointer-events:auto}
.sidebar{
  position:fixed;top:0;right:0;z-index:50;width:min(86vw,360px);height:100vh;
  background:var(--background);color:var(--foreground);border-left:1px solid var(--separator);
  display:flex;flex-direction:column;gap:28px;padding:32px 28px;
  transform:translateX(100%);transition:transform .24s;
}
.sidebar.open{transform:translateX(0)}
.sidebar-header{display:flex;justify-content:space-between;align-items:center;gap:20px}
.sidebar-title{text-transform:uppercase;letter-spacing:.14rem;font-size:.8rem;font-weight:800}
.sidebar-close{color:inherit;background:none;border:0;padding:0;text-transform:uppercase;letter-spacing:.06rem;font-size:.6rem;font-weight:500;transition:all .2s}
.sidebar-close:hover{cursor:pointer;opacity:.5}
.sidebar-links{display:flex;flex-direction:column}
.sidebar-link{
  border-top:1px solid var(--separator);padding:14px 0;text-transform:uppercase;
  letter-spacing:.08rem;font-size:.7rem;font-weight:600;transition:opacity .2s;
}
.sidebar-link:last-of-type{border-bottom:1px solid var(--separator)}
.sidebar-link:hover{opacity:.5}

/* ---------- hero ---------- */
.hero{position:relative;width:100%;overflow:hidden;height:500px}
@media (min-width:64rem){.hero{height:650px}}
@media (min-width:80rem){.hero{height:700px}}
.hero img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease-in-out}
.hero img.active{opacity:1}
.hero-caption{
  position:absolute;left:0;bottom:0;width:100%;padding:1.25rem 1.5rem;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.65),transparent);
  font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.14rem;
}
.hero-caption .big{
  display:block;font-family:var(--font-display);font-size:1.6rem;
  letter-spacing:.02rem;text-transform:none;font-weight:500;margin-bottom:.35rem;
}
@media (min-width:48rem){.hero-caption .big{font-size:2.2rem}}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
@media (min-width:48rem){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{display:flex;flex-direction:column;gap:.2rem;padding:.5rem 1rem;border-left:1px solid var(--separator)}
.stat:first-child{border-left:0}
@media (max-width:48rem){.stat:nth-child(odd){border-left:0}.stat:nth-child(n+3){margin-top:1rem}}
.stat-num{font-family:var(--font-display);font-size:2rem;line-height:1;font-weight:500}
.stat-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;color:var(--muted-foreground)}

/* ---------- article rows ---------- */
.rows{display:flex;flex-direction:column}
.row{
  display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 0;border-bottom:1px solid var(--separator);transition:opacity .2s;
}
.row:hover{opacity:.6}
.row-body{display:flex;flex-direction:column;gap:.35rem;flex:1;min-width:0}
.row-kicker{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;color:var(--muted-foreground)}
.row-title{font-size:1.05rem;font-weight:600;line-height:1.3}
.row-desc{font-size:.8125rem;line-height:1.5;color:var(--muted-foreground)}
.row-meta{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.08rem;color:var(--muted-foreground);margin-top:.25rem}
.row-thumb{flex-shrink:0;width:160px;height:107px;object-fit:cover;background:var(--separator)}
@media (max-width:480px){.row{flex-direction:column}.row-thumb{width:100%;height:180px}}

/* ---------- sidebar widgets ---------- */
.stack{display:flex;flex-direction:column}
.now-list{display:flex;flex-direction:column;margin-top:.75rem}
.now-item{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.65rem 0;border-top:1px solid var(--separator)}
.now-item:last-child{border-bottom:1px solid var(--separator)}
.now-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;color:var(--muted-foreground);flex-shrink:0}
.now-value{font-size:.8rem;font-weight:500;text-align:right}
.polaroids{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-top:1rem}
.polaroid{background:var(--background);border:1px solid var(--separator);padding:.4rem .4rem 1.4rem;transition:transform .25s;position:relative}
.polaroid:nth-child(odd){transform:rotate(-1.2deg)}
.polaroid:nth-child(even){transform:rotate(1.2deg)}
.polaroid:hover{transform:rotate(0) scale(1.02);z-index:2}
.polaroid img{width:100%;aspect-ratio:1/1;object-fit:cover}
.polaroid .cap{
  position:absolute;bottom:.3rem;left:.4rem;right:.4rem;
  font-size:.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.06rem;
  color:var(--muted-foreground);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.quote{font-family:var(--font-display);font-size:1.5rem;line-height:1.25;text-transform:none;margin:1rem 0 0;border:0;padding:0}
.quote cite{
  display:block;margin-top:.75rem;font-family:var(--font-sans);font-size:.6rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.1rem;color:var(--muted-foreground);font-style:normal;
}

/* ---------- travel map ---------- */
.travel-wrap{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1rem}
@media (min-width:64rem){.travel-wrap{grid-template-columns:1fr 1.9fr}}
.city-scroll{max-height:560px;overflow-y:auto;padding-right:.25rem}
.city-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.city-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;width:100%;text-align:left;
  background:none;border:0;border-top:1px solid var(--separator);padding:.6rem 0;color:inherit;
  font-family:inherit;transition:opacity .2s,padding-left .2s;
}
.city-list li:last-child .city-row{border-bottom:1px solid var(--separator)}
.city-row:hover{cursor:pointer;opacity:.55;padding-left:.3rem}
.city-row[aria-current="true"]{font-weight:700;padding-left:.3rem}
.city-row[aria-current="true"] .city-name::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#e40014;margin-right:.45rem;vertical-align:middle}
.city-name{font-size:.8rem;font-weight:600}
.city-details{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.city-country,.city-date{font-size:.58rem;color:var(--muted-foreground);letter-spacing:.06rem;text-transform:uppercase}
.map-frame{border:1px solid var(--separator);padding:1rem;width:100%;position:sticky;top:1rem}
.map-frame svg{width:100%;height:auto;display:block;overflow:visible}
.pin{fill:#e40014;opacity:.75;cursor:pointer;transition:opacity .2s}
.pin:hover{opacity:1}
.pin.active{opacity:1}
.pin-halo{fill:none;stroke:#e40014;stroke-width:1;opacity:0}
.pin-halo.active{opacity:.9;animation:halo 1.8s infinite}
@keyframes halo{0%{r:4;opacity:.9}100%{r:11;opacity:0}}
.map-readout{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--separator);flex-wrap:wrap;
}
.map-readout .place{font-family:var(--font-display);font-size:1.35rem;text-transform:uppercase;line-height:1}
.map-readout .coords{font-size:.58rem;color:var(--muted-foreground);letter-spacing:.08rem;font-variant-numeric:tabular-nums}
.country-filter{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.chip{
  background:none;color:inherit;border:1px solid var(--separator);
  padding:.3rem .7rem;font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08rem;transition:all .2s;
}
.chip:hover{cursor:pointer;border-color:var(--foreground)}
.chip[aria-pressed="true"]{background:var(--foreground);color:var(--background);border-color:var(--foreground)}

/* ---------- photo gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-top:1.5rem}
@media (min-width:48rem){.gallery{grid-template-columns:repeat(3,1fr)}}
@media (min-width:64rem){.gallery{grid-template-columns:repeat(4,1fr)}}
.shot{position:relative;overflow:hidden;background:var(--separator);border:0;padding:0;cursor:pointer;display:block}
.shot img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .5s,filter .3s}
.shot:hover img{transform:scale(1.04)}
.shot .shot-cap{
  position:absolute;left:0;right:0;bottom:0;padding:.6rem;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
  color:#fff;font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.08rem;
  opacity:0;transition:opacity .3s;text-align:left;
}
.shot:hover .shot-cap,.shot:focus-visible .shot-cap{opacity:1}
.shot[hidden]{display:none}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.92);
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:1rem;padding:2rem 1rem;
}
.lightbox.open{display:flex}
.lightbox img{max-width:min(92vw,1100px);max-height:78vh;object-fit:contain;width:auto}
.lightbox-cap{color:#fff;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.12rem;text-align:center}
.lightbox-close{
  position:absolute;top:1rem;right:1.25rem;background:none;border:0;color:#fff;
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;cursor:pointer;
}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;padding:1rem;line-height:1;opacity:.7}
.lightbox-nav:hover{opacity:1}
.lightbox-prev{left:.25rem}
.lightbox-next{right:.25rem}

/* ---------- page header ---------- */
.page-head{padding:1rem 0 2.5rem}
.page-head h1{font-size:2.75rem}
@media (min-width:48rem){.page-head h1{font-size:3.5rem}}
.page-kicker{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.14rem;color:var(--muted-foreground);margin-bottom:.75rem}

/* ---------- CV / about ---------- */
.cv-group{display:flex;flex-direction:column}
.cv-item{
  display:grid;grid-template-columns:1fr;gap:.3rem;
  padding:1.1rem 0;border-top:1px solid var(--separator);
}
.cv-group .cv-item:last-child{border-bottom:1px solid var(--separator)}
@media (min-width:48rem){.cv-item{grid-template-columns:1fr 1.4fr auto;gap:1.5rem;align-items:baseline}}
.cv-role{font-size:.92rem;font-weight:700;line-height:1.3}
.cv-org{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06rem;color:var(--muted-foreground);margin-top:.15rem}
.cv-desc{font-size:.8125rem;line-height:1.55;color:var(--muted-foreground)}
.cv-date{
  font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08rem;
  color:var(--muted-foreground);white-space:nowrap;
}
.tag-grid{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.tag{border:1px solid var(--separator);padding:.35rem .7rem;font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.06rem}
.lang-bars{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}
.lang{display:flex;align-items:center;gap:1rem}
.lang-name{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08rem;width:5.5rem;flex-shrink:0}
.lang-track{flex:1;height:6px;background:var(--separator)}
.lang-fill{height:100%;background:var(--foreground)}

/* ---------- post page ---------- */
.post-wrap{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:64rem){.post-wrap{grid-template-columns:minmax(0,1fr) 15rem;gap:3rem}}
.post-header{padding:1rem 0 2rem;border-bottom:1px solid var(--separator);margin-bottom:2rem}
.post-header h1{
  font-family:var(--font-sans);text-transform:none;font-weight:700;
  font-size:1.9rem;line-height:1.18;letter-spacing:-.01em;
}
@media (min-width:64rem){.post-header h1{font-size:2.6rem}}
.post-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;align-items:center;margin-top:1.25rem}
.post-meta span,.post-meta a{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;color:var(--muted-foreground)}
.post-meta a{text-decoration:underline;text-underline-offset:3px}
.post-meta a:hover{color:var(--foreground)}
.post-hero{width:100%;max-height:70vh;object-fit:cover;margin-bottom:2rem;border:1px solid var(--separator)}
.prose{max-width:68ch}
.prose p{font-size:1rem;line-height:1.75;margin:0 0 1.4rem}
.prose h2{font-size:1.5rem;font-weight:700;line-height:1.3;margin:2.5rem 0 1rem}
.prose h3{font-size:1.2rem;font-weight:700;margin:2rem 0 .75rem}
.prose ul,.prose ol{padding-left:1.4rem;margin:0 0 1.4rem}
.prose li{font-size:1rem;line-height:1.7;margin-bottom:.5rem}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose a:hover{opacity:.6}
.prose strong{font-weight:700}
.prose blockquote{
  margin:2rem 0;padding:.25rem 0 .25rem 1.5rem;border-left:2px solid var(--foreground);
  font-family:var(--font-display);font-size:1.4rem;line-height:1.4;
}
.prose figure{margin:2rem 0}
.prose figure img{width:100%;border:1px solid var(--separator)}
.prose figcaption{
  font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.08rem;
  color:var(--muted-foreground);margin-top:.6rem;text-align:center;
}
.post-aside{display:flex;flex-direction:column;gap:2rem;align-self:start;position:sticky;top:1.5rem}
.aside-block{display:flex;flex-direction:column}
.aside-title{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.14rem;margin-bottom:.75rem}
.aside-link{
  border-top:1px solid var(--separator);padding:.7rem 0;font-size:.78rem;
  font-weight:500;line-height:1.4;transition:opacity .2s;
}
.aside-link:last-of-type{border-bottom:1px solid var(--separator)}
.aside-link:hover{opacity:.55}
.post-nav{
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--separator);margin-top:3rem;
}
@media (min-width:48rem){.post-nav{grid-template-columns:1fr 1fr}}
.post-nav a{padding:1.5rem 0;display:flex;flex-direction:column;gap:.4rem;transition:opacity .2s}
.post-nav a:hover{opacity:.6}
@media (min-width:48rem){
  .post-nav a+a{border-left:1px solid var(--separator);padding-left:1.5rem;align-items:flex-end;text-align:right}
}
.post-nav .dir{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.12rem;color:var(--muted-foreground)}
.post-nav .t{font-size:.95rem;font-weight:600;line-height:1.35}

/* ---------- card grid (portfolio / blog index) ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--separator)}
@media (min-width:48rem){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:80rem){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  display:flex;flex-direction:column;gap:.6rem;padding:1.5rem;
  border-bottom:1px solid var(--separator);transition:background .2s;
}
@media (min-width:48rem){.card:nth-child(2n){border-left:1px solid var(--separator)}}
@media (min-width:80rem){
  .card:nth-child(2n){border-left:0}
  .card:not(:nth-child(3n+1)){border-left:1px solid var(--separator)}
}
.card:hover{background:color-mix(in srgb,var(--foreground) 3.5%,transparent)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--separator)}
.card-kicker{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;color:var(--muted-foreground)}
.card-title{font-size:1.02rem;font-weight:700;line-height:1.32}
.card-desc{font-size:.8rem;line-height:1.5;color:var(--muted-foreground)}
.card-date{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.08rem;color:var(--muted-foreground);margin-top:auto;padding-top:.5rem}
.card[hidden]{display:none}
.empty-state{padding:3rem 1.5rem;text-align:center;font-size:.8rem;color:var(--muted-foreground)}

/* ---------- newsletter ---------- */
#mailing-list{display:flex;flex-direction:column}
.mailing-inner{display:flex;flex-direction:column;gap:.25rem;padding:2.5rem 0}
.mailing-sub{font-size:.8rem;line-height:1.5;color:var(--muted-foreground);margin-top:.35rem;max-width:52ch}
.mailing-form{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem;max-width:34rem}
.mailing-controls{display:flex;flex-direction:column;gap:.5rem}
@media (min-width:40rem){.mailing-controls{flex-direction:row}}
.mailing-controls input{
  flex:1;height:48px;min-width:0;border:1px solid var(--foreground);background:transparent;
  color:var(--foreground);padding:.25rem .75rem;font-size:.875rem;font-family:inherit;outline:none;
}
.mailing-controls input:focus-visible{box-shadow:0 0 0 2px var(--separator)}
.mailing-controls input::placeholder{color:var(--muted-foreground)}
.subscribe-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:48px;padding:.5rem 1.25rem;
  border:1px solid var(--foreground);background:var(--background);color:var(--foreground);
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05rem;
  transition:all .2s;white-space:nowrap;
}
.subscribe-button:hover{cursor:pointer;background:var(--foreground);color:var(--background)}
.mailing-fineprint{font-size:.6rem;font-weight:500;text-transform:uppercase;color:var(--muted-foreground)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:64rem){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-block{padding:2rem;border-top:1px solid var(--separator)}
@media (min-width:64rem){.contact-block:nth-child(2){border-left:1px solid var(--separator)}}
.contact-list{display:flex;flex-direction:column;margin-top:1.25rem}
.contact-item{display:flex;flex-direction:column;gap:.2rem;padding:.9rem 0;border-top:1px solid var(--separator)}
.contact-item:last-child{border-bottom:1px solid var(--separator)}
.contact-item .k{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;color:var(--muted-foreground)}
.contact-item .v{font-size:.95rem;font-weight:600}
.contact-item a.v:hover{opacity:.6}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;color:var(--muted-foreground)}
.field input,.field textarea{
  border:1px solid var(--separator);background:transparent;color:var(--foreground);
  padding:.7rem;font-family:inherit;font-size:.875rem;outline:none;transition:border-color .2s;
}
.field input:focus,.field textarea:focus{border-color:var(--foreground)}
.field textarea{min-height:9rem;resize:vertical}
.form-note{font-size:.7rem;color:var(--muted-foreground);margin-top:.75rem;line-height:1.5}

/* ---------- footer ---------- */
#footer{display:flex;flex-direction:column;margin-top:.25rem;padding-bottom:1.5rem}
#footer .footer-container{display:flex;width:100%}
.footer-inner{display:flex;flex-direction:column;width:100%}
.footer-manifesto{display:flex;flex-direction:column;color:var(--muted-foreground);font-size:.75rem;line-height:1.65;letter-spacing:.3px}
.footer-manifesto .lead{font-style:italic;font-weight:700}
.footer-columns{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1.5rem}
@media (min-width:48rem){.footer-columns{grid-template-columns:repeat(6,1fr);gap:1rem}}
.footer-column{display:flex;flex-direction:column}
.footer-header{color:var(--foreground);letter-spacing:.4px;margin-bottom:.5rem;font-size:.72rem;font-weight:600}
.footer-links{display:flex;flex-direction:column;width:100%}
.footer-link{
  border-top:1px solid var(--separator);width:100%;color:var(--muted-foreground);
  letter-spacing:.4px;padding:10px 0;font-size:.72rem;font-weight:400;transition:opacity .2s;
}
.footer-link:last-of-type{border-bottom:1px solid var(--separator)}
.footer-link:hover{cursor:pointer;opacity:.5}
.footer-signoff{color:var(--muted-foreground);letter-spacing:.4px;font-size:.72rem;line-height:1.8;margin-top:1.5rem}
.footer-divider{background:var(--separator);width:100%;height:1px;margin:.5rem 0}
.footer-bottom{display:flex;flex-direction:column;justify-content:space-between;gap:.25rem}
@media (min-width:48rem){.footer-bottom{flex-direction:row}}
.footer-copyright{color:var(--muted-foreground);letter-spacing:.4px;font-size:.72rem;line-height:1.8}
.footer-location{display:flex;align-items:center;gap:.4rem}

/* ---------- misc ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--foreground);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero img{transition:none}
  .blob,.pin-halo.active{animation:none}
  .shot img{transition:none}
}
@media print{
  #topbar,#navbar,.sidebar,.sidebar-backdrop,#mailing-list,.post-nav,.lightbox{display:none}
  body{font-size:11pt}
  .home-section{border:0}
}

/* ============================================================
   SECTION CONTRAST BANDS
   ============================================================ */
.band-tint{background:color-mix(in srgb,var(--foreground) 4%,transparent)}
.band-invert{background:var(--foreground);color:var(--background);border-color:transparent}
.band-invert h1,.band-invert cite{color:var(--background)}

.section-label{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;justify-content:space-between}
.section-label .num{
  font-family:var(--font-sans);font-size:.6rem;font-weight:800;letter-spacing:.14rem;
  color:var(--muted-foreground);border:1px solid var(--separator);
  padding:.25rem .45rem;align-self:center;
}
.section-label h1{flex:1}

/* ---------- about: split intro ---------- */
.intro-split{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:64rem){.intro-split{grid-template-columns:1.1fr .9fr}}
.intro-text{padding:2.5rem 2rem;display:flex;flex-direction:column;justify-content:center}
.intro-name{font-size:3.2rem;line-height:.95}
@media (min-width:48rem){.intro-name{font-size:4.5rem}}
.intro-role{
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.18rem;
  color:var(--muted-foreground);margin-top:1rem;
}
.intro-lede{font-size:.95rem;line-height:1.65;margin-top:1.5rem;max-width:44ch}
.intro-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.btn-solid,.btn-ghost{
  display:inline-flex;align-items:center;gap:.45rem;padding:.75rem 1.2rem;
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;
  border:1px solid var(--foreground);transition:all .2s;
}
.btn-solid{background:var(--foreground);color:var(--background)}
.btn-solid:hover{background:transparent;color:var(--foreground)}
.btn-ghost:hover{background:var(--foreground);color:var(--background)}
.btn-solid svg{width:.9em;height:.9em}
.intro-figure{position:relative;min-height:320px;border-left:0}
@media (min-width:64rem){.intro-figure{border-left:1px solid var(--separator)}}
.intro-figure img{width:100%;height:100%;min-height:320px;object-fit:cover}

/* ---------- about: quote band ---------- */
.quote-band{display:flex;gap:1rem;align-items:flex-start;padding:3rem 2rem}
.quote-mark{font-family:var(--font-display);font-size:5rem;line-height:.7;opacity:.3;flex-shrink:0}
.quote-big{
  font-family:var(--font-display);font-size:1.7rem;line-height:1.3;
  margin:0;border:0;padding:0;max-width:34ch;
}
@media (min-width:48rem){.quote-big{font-size:2.3rem}}
.quote-big cite{
  display:block;margin-top:1.25rem;font-family:var(--font-sans);font-size:.6rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.14rem;opacity:.65;font-style:normal;
}

/* ---------- about: at a glance ---------- */
.glance{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:1.75rem;background:var(--separator)}
@media (min-width:48rem){.glance{grid-template-columns:repeat(4,1fr)}}
.glance-item{
  background:var(--background);padding:1.5rem 1rem;
  display:flex;flex-direction:column;gap:.35rem;align-items:center;text-align:center;
}
.glance-num{font-family:var(--font-display);font-size:2.8rem;line-height:1;font-weight:500}
.glance-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;color:var(--muted-foreground)}

/* ---------- about: timeline ---------- */
.timeline{list-style:none;margin:1.75rem 0 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--separator)}
@media (min-width:48rem){.timeline::before{left:7.5rem}}
.tl-item{position:relative;padding:0 0 2rem 1.75rem;display:grid;grid-template-columns:1fr;gap:.25rem}
@media (min-width:48rem){
  .tl-item{grid-template-columns:7rem 1fr;gap:2.5rem;padding-left:0}
  .tl-body{padding-left:1.25rem}
}
.tl-item:last-child{padding-bottom:0}
.tl-dot{
  position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--background);border:2px solid var(--foreground);z-index:1;
}
@media (min-width:48rem){.tl-dot{left:calc(7.5rem - 5px)}}
.tl-date{
  font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.08rem;
  color:var(--muted-foreground);padding-top:.15rem;
}
@media (min-width:48rem){.tl-date{text-align:right}}
.tl-role{font-size:1.05rem;font-weight:700;line-height:1.3}
.tl-org{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08rem;color:var(--muted-foreground);margin-top:.25rem}
.tl-desc{font-size:.8125rem;line-height:1.55;color:var(--muted-foreground);margin-top:.5rem;max-width:56ch}

/* ---------- about: education cards ---------- */
.edu-grid{display:grid;grid-template-columns:1fr;gap:1px;margin-top:1.75rem;background:var(--separator)}
@media (min-width:48rem){.edu-grid{grid-template-columns:repeat(2,1fr)}}
.edu-card{background:var(--background);padding:1.75rem 1.25rem;display:flex;flex-direction:column;gap:.5rem}
.edu-year{font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;color:var(--muted-foreground)}
.edu-degree{font-family:var(--font-display);font-size:1.6rem;text-transform:uppercase;font-weight:500;line-height:1.1}
.edu-school{font-size:.78rem;line-height:1.45;color:var(--muted-foreground)}

/* ---------- about: language rings ---------- */
.ring-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:1.75rem}
@media (min-width:48rem){.ring-row{grid-template-columns:repeat(5,1fr)}}
.ring-wrap{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.ring{width:78px;height:78px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--separator);stroke-width:4}
.ring-fg{fill:none;stroke:var(--foreground);stroke-width:4;stroke-linecap:round;transition:stroke-dasharray 1s ease}
.ring-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08rem}
.ring-pct{font-size:.56rem;font-weight:600;text-transform:uppercase;letter-spacing:.1rem;color:var(--muted-foreground)}

/* ---------- about: certifications ---------- */
.cert-grid{display:grid;grid-template-columns:1fr;gap:1px;margin-top:1.75rem;background:var(--separator)}
@media (min-width:40rem){.cert-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.cert-grid{grid-template-columns:repeat(3,1fr)}}
.cert{
  background:var(--background);padding:1rem 1.15rem;
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
}
.cert-name{font-size:.82rem;font-weight:600;line-height:1.35}
.cert-year{font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.08rem;color:var(--muted-foreground);white-space:nowrap}

/* ---------- about: mini card grid ---------- */
.mini-grid{display:grid;grid-template-columns:1fr;gap:1px;margin-top:1.75rem;background:var(--separator)}
@media (min-width:40rem){.mini-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.mini-grid{grid-template-columns:repeat(3,1fr)}}
.mini-card{background:var(--background);padding:1.15rem;display:flex;flex-direction:column;gap:.3rem}
.mini-date{font-size:.54rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;color:var(--muted-foreground)}
.mini-role{font-size:.88rem;font-weight:700;line-height:1.3}
.mini-org{font-size:.7rem;color:var(--muted-foreground);line-height:1.4}

/* ============================================================
   TRAVEL: pin colours + place card
   ============================================================ */
.pin{fill:var(--muted-foreground);opacity:.55;cursor:pointer;transition:fill .2s,opacity .2s}
.pin:hover{opacity:1;fill:var(--foreground)}
.pin.active{fill:#e40014;opacity:1}
.pin-halo{fill:none;stroke:#e40014;stroke-width:1.2;opacity:0}
.pin-halo.active{opacity:.9;animation:halo 1.8s infinite}

.place-card{
  border:1px solid var(--separator);border-top:0;
  padding:1.1rem;display:none;flex-direction:column;gap:.9rem;
}
.place-card.show{display:flex;animation:cardIn .3s ease}
@keyframes cardIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.place-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.place-card-name{
  font-family:var(--font-display);font-size:1.5rem;text-transform:uppercase;
  font-weight:500;line-height:1;
}
.place-card-name::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#e40014;margin-right:.5rem;vertical-align:middle;
}
.place-card-sub{
  font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;
  color:var(--muted-foreground);margin-top:.4rem;
}
.place-card-count{
  font-size:.54rem;font-weight:700;text-transform:uppercase;letter-spacing:.08rem;
  color:var(--muted-foreground);border:1px solid var(--separator);
  padding:.25rem .5rem;white-space:nowrap;flex-shrink:0;
}
.place-card-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
@media (min-width:48rem){.place-card-strip{grid-template-columns:repeat(4,1fr)}}
.place-card-strip .shot img{aspect-ratio:1/1}
.place-card-empty{font-size:.72rem;color:var(--muted-foreground);padding:.5rem 0}

/* ============================================================
   FOOD widget (home) + food page
   ============================================================ */
.food-tagline{
  font-family:var(--font-display);font-size:1.15rem;line-height:1.35;
  margin-top:.85rem;color:var(--foreground);
}
.food-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-top:1rem}
.food-tile{position:relative;overflow:hidden;background:var(--separator);display:block}
.food-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .45s}
.food-tile:hover img{transform:scale(1.07)}
.food-tile-cap{
  position:absolute;left:0;right:0;bottom:0;padding:.3rem .35rem;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent);
  color:#fff;font-size:.46rem;font-weight:700;text-transform:uppercase;letter-spacing:.06rem;
  opacity:0;transition:opacity .25s;text-align:center;
}
.food-tile:hover .food-tile-cap{opacity:1}
.food-meta{
  display:flex;gap:1.25rem;margin-top:.85rem;padding-top:.75rem;
  border-top:1px solid var(--separator);
}
.food-meta span{font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.08rem;color:var(--muted-foreground)}
.food-meta strong{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--foreground)}


/* ============================================================
   PRECISE TRAVEL MAP (Leaflet)
   ============================================================ */
.travel-wrap--precise{align-items:start}
.map-frame--precise{padding:0;overflow:hidden}
.map-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem 1rem 0}
.map-toolbar-note{font-size:.58rem;color:var(--muted-foreground);letter-spacing:.08rem;text-transform:uppercase}
.travel-map-canvas{height:460px;width:100%;margin-top:1rem;border-top:1px solid var(--separator);border-bottom:1px solid var(--separator);background:color-mix(in srgb,var(--foreground) 2%,transparent)}
@media (max-width:47.99rem){.travel-map-canvas{height:340px}}
.travel-insights{border:1px solid var(--separator);border-top:0;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.85rem}
.travel-insights-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.travel-insights-head h3{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.08rem}
.travel-insights-meta{font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;color:var(--muted-foreground)}
.travel-top-list{display:flex;flex-direction:column;gap:.5rem}
.travel-top-item{display:grid;grid-template-columns:minmax(5rem,auto) 1fr auto;gap:.75rem;align-items:center}
.travel-top-country{font-size:.7rem;font-weight:600}
.travel-top-bar{display:block;height:10px;background:color-mix(in srgb,var(--foreground) 8%,transparent);border-radius:999px;overflow:hidden}
.travel-top-bar span{display:block;height:100%;background:#4460e6;border-radius:999px}
.travel-top-count{font-size:.65rem;font-weight:700;color:var(--muted-foreground)}
.travel-popup-shell .leaflet-popup-content-wrapper{border-radius:14px;box-shadow:0 16px 36px rgba(0,0,0,.16)}
.travel-popup-shell .leaflet-popup-content{margin:0;min-width:180px}
.travel-popup{display:flex;flex-direction:column}
.travel-popup-media img{width:100%;height:100px;object-fit:cover;border-radius:14px 14px 0 0}
.travel-popup-copy{padding:.8rem .9rem;display:flex;flex-direction:column;gap:.2rem}
.travel-popup-copy strong{font-size:.9rem;line-height:1.25}
.travel-popup-copy span,.travel-popup-date{font-size:.62rem;font-weight:700;letter-spacing:.08rem;text-transform:uppercase;color:var(--muted-foreground)}
.leaflet-container{font-family:var(--font-sans)}
.leaflet-control-attribution{font-size:.6rem}
.leaflet-popup-tip{box-shadow:none}
:root[data-theme="dark"] .leaflet-layer,:root[data-theme="dark"] .leaflet-control-zoom a,:root:not([data-theme="light"]) .leaflet-layer,:root:not([data-theme="light"]) .leaflet-control-zoom a{filter:brightness(.88) contrast(1.1)}
:root[data-theme="dark"] .travel-popup-shell .leaflet-popup-content-wrapper,:root:not([data-theme="light"]) .travel-popup-shell .leaflet-popup-content-wrapper{background:#171717;color:#ededed}
:root[data-theme="dark"] .travel-popup-shell .leaflet-popup-tip,:root:not([data-theme="light"]) .travel-popup-shell .leaflet-popup-tip{background:#171717}