/* The Expat Club — shared styles for content / city / blog pages.
   Brand identity: Midnight Ink + Brass + Bone + Deep Teal, Cormorant Garamond
   (display) + Hanken Grotesk (text). Sharp corners, hairline rules, tracked caps. */

:root{
  --ink:#111E38; --bone:#FBF7EF; --brass:#B4915A; --brass-dark:#8f7143;
  --teal:#2E4B47; --panel:#F3EEE2; --hairline:rgba(17,30,56,.12);
  --muted:rgba(17,30,56,.62); --maxw:1140px;
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bone);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.05;letter-spacing:-.005em;color:var(--ink);margin:0}
a{color:var(--brass)}
a:hover{color:var(--brass-dark)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.narrow{max-width:44rem}
.eyebrow{font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--brass)}

/* Buttons — sharp, tracked uppercase */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:none;cursor:pointer;font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;padding:.95rem 1.7rem;text-decoration:none;transition:background .2s ease,color .2s ease,border-color .2s ease}
.btn-amber{background:var(--brass);color:var(--ink)}
.btn-amber:hover{background:var(--brass-dark);color:var(--bone)}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink:hover{background:#1b2a4d;color:var(--bone)}
.btn-ghost{background:transparent;color:var(--brass);border:1px solid var(--brass)}
.btn-ghost:hover{background:var(--brass);color:var(--ink)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* Header — bone nav with wordmark */
header.site{background:var(--bone);border-bottom:1px solid var(--hairline)}
header.site .bar{max-width:var(--maxw);margin:0 auto;padding:1.15rem clamp(1.25rem,4vw,2.5rem);display:flex;align-items:center;justify-content:space-between}
header.site a.brand{display:flex;align-items:baseline;gap:.5rem;color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:500;font-size:1.5rem;line-height:1}
header.site a.brand:hover{color:var(--ink)}
header.site .dot{display:none}
header.site nav a{color:var(--muted);text-decoration:none;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-left:1.6rem}
header.site nav a:hover{color:var(--ink)}
@media(max-width:680px){header.site a.brand{font-size:1.3rem}header.site .bar{flex-wrap:wrap}header.site nav{width:100%;margin-top:.5rem;display:flex;flex-wrap:wrap;gap:.4rem 0}header.site nav a{margin-left:0;margin-right:1.1rem;font-size:.62rem;letter-spacing:.12em}}

/* Hero band — flat ink */
.chero{position:relative;overflow:hidden;color:var(--bone);background:var(--ink)}
.chero .sun{display:none}
.chero .wrap{position:relative;z-index:2;padding:clamp(3.2rem,8vw,5.5rem) clamp(1.25rem,4vw,2.5rem) clamp(3.6rem,8vw,6rem)}
.chero::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(251,247,239,.03) 0 12px,transparent 12px 24px);pointer-events:none}
.chero .crumb{color:rgba(251,247,239,.6);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin:0 0 1.5rem}
.chero .crumb a{color:rgba(251,247,239,.6);text-decoration:none}
.chero .crumb a:hover{color:var(--bone)}
.chero .eyebrow{color:var(--brass);display:block;margin-bottom:1rem}
.chero h1{color:var(--bone);font-size:clamp(2.6rem,6vw,4.2rem);font-weight:500;max-width:18ch;line-height:1}
.chero h1 em{font-style:italic;color:var(--brass)}
.chero .lead{color:rgba(251,247,239,.82);font-size:clamp(1.05rem,1.7vw,1.2rem);margin-top:1.3rem;max-width:40rem;line-height:1.6}

/* Email capture */
.capture{margin-top:2.2rem;max-width:34rem}
.capture form{display:flex;gap:0;border:1px solid rgba(251,247,239,.25)}
.capture input{flex:1;border:none;background:var(--bone);padding:.95rem 1.1rem;font-family:var(--body);font-size:1rem;color:var(--ink);min-width:0}
.capture input:focus{outline:none}
.capture .btn{white-space:nowrap;border:none}
.capture .micro{color:rgba(251,247,239,.6);font-size:.72rem;letter-spacing:.04em;margin:.9rem 0 0}
.capture .done{display:none;border:1px solid rgba(180,145,90,.5);padding:1rem 1.2rem;color:var(--bone)}
.capture.sent form,.capture.sent .micro{display:none}
.capture.sent .done{display:block}
@media(max-width:520px){.capture form{flex-direction:column}.capture .btn{justify-content:center}}

/* Body content */
main{padding:clamp(2.8rem,6vw,4.5rem) 0}
main h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:2.8rem 0 1rem;font-weight:500}
main h3{font-size:1.3rem;margin:1.9rem 0 .5rem}
main p{margin:0 0 1.2rem}
main .lead-p{font-size:1.22rem;line-height:1.6;color:var(--ink);margin-bottom:1.8rem}
main ul,main ol{margin:0 0 1.4rem;padding-left:1.2rem}
main li{margin:.45rem 0}
blockquote{margin:1.9rem 0;padding:1.1rem 1.5rem;background:var(--panel);border-left:2px solid var(--brass)}
blockquote p:last-child{margin:0}

/* Card grid */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1px;margin:1.8rem 0 2.2rem;background:var(--hairline);border:1px solid var(--hairline)}
.card{background:var(--bone);padding:1.5rem 1.6rem}
.card h3{margin:0 0 .5rem;font-size:1.25rem}
.card p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.55}
a.card{text-decoration:none;color:var(--ink);transition:background .2s ease}
a.card:hover{background:#fff}
a.card:hover h3{color:var(--brass-dark)}

/* Stat row */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1px;margin:2rem 0;background:var(--hairline);border:1px solid var(--hairline)}
.stat{background:var(--panel);padding:1.4rem 1.4rem}
.stat b{display:block;font-family:var(--display);font-size:2rem;font-weight:500;color:var(--ink);line-height:1}
.stat span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.4rem;display:block}

/* CTA band */
.cta{background:var(--ink);color:var(--bone);padding:clamp(2.4rem,5vw,3.4rem);margin:3.2rem 0;text-align:center;position:relative}
.cta::before{content:"";position:absolute;inset:12px;border:1px solid rgba(180,145,90,.4);pointer-events:none}
.cta h2{color:var(--bone);font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 .7rem;font-weight:500}
.cta p{color:rgba(251,247,239,.82);margin:0 0 1.5rem;max-width:34rem;margin-left:auto;margin-right:auto}

/* FAQ */
.faq{margin:2.6rem 0}
.faq details{border-bottom:1px solid var(--hairline);padding:.2rem 0}
.faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:500;font-size:1.25rem;color:var(--ink);padding:1rem 2rem 1rem 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);font-family:var(--body);font-weight:300;font-size:1.4rem;color:var(--brass);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:0 0 1rem;color:var(--ink)}

.disclaimer{font-size:.8rem;color:var(--muted);margin-top:2rem}

/* Related */
.related{background:var(--panel);padding:clamp(2.2rem,5vw,3.2rem) 0;margin-top:3.2rem;border-top:1px solid var(--hairline)}
.related h2{font-size:1.5rem;margin:0 0 1.2rem;font-weight:500}
.related ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.related a{font-weight:600;color:var(--brass)}
.related a:hover{color:var(--brass-dark)}

/* Footer */
footer.site{background:var(--ink);color:rgba(251,247,239,.6);padding:2.6rem 0;font-size:.85rem}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;align-items:center}
footer.site a{color:rgba(251,247,239,.6);text-decoration:none}
footer.site a:hover{color:var(--brass)}