/*
  Shared article styling for every post in /blog.

  Lifted out of canada-tourist-visa-for-indians.html once a second article
  existed — six copies of the same 80 lines drift apart the first time anyone
  adjusts a colour. Every article now links this file plus blog-chrome.css.

  The blog index (/blog/index.html) keeps its own styles: it is a card grid,
  not an article, and shares almost nothing below the palette.
*/

:root {
  --gold: #C4A96B;
  --bg: #0D0B10;
  --bg-alt: #110E15;
  --text: #F0EBE3;
  --text-muted: rgba(240, 235, 227, 0.45);
  --border: rgba(240, 235, 227, 0.1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'Geist', Arial, sans-serif; font-weight: 300; font-size: 16px;
  line-height: 1.8; -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
p, li { font-size: 17px; letter-spacing: 0.01em; }

header { border-bottom: 1px solid var(--border); padding: 24px 0; }
header .wrap { max-width: 1200px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
header img { height: 34px; }
nav { display: flex; gap: 28px; }
nav a { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); text-decoration: none; }
nav a:hover { color: var(--gold); }

article { padding: 64px 0 40px; }
.eyebrow { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; color: var(--gold);
     font-size: clamp(34px, 6vw, 60px); line-height: 1.12; margin-bottom: 20px; }
.standfirst { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
              font-size: 21px; color: rgba(240,235,227,0.75); margin-bottom: 28px; }
.byline { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
          color: var(--text-muted); padding-bottom: 40px; border-bottom: 1px solid var(--border); }

h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; color: var(--gold);
     font-size: clamp(26px, 4vw, 38px); margin: 52px 0 16px; }
h3 { font-size: 16px; letter-spacing: 0.5px; margin: 32px 0 10px; color: var(--gold); font-weight: 400; }
p { margin-bottom: 18px; }
ul, ol { margin: 0 0 20px 22px; }
li { margin-bottom: 9px; }
strong { font-weight: 400; color: #fff; }

/* The one or two sentences per section worth reading even at a skim —
   set apart in serif italic gold rather than plain bold, so they read as
   a considered pull-line rather than another bolded phrase. */
.highlight { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
             font-weight: 500; font-size: 1.18em; color: var(--gold); }

table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); }
th { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 400; }
.num { text-align: right; white-space: nowrap; }

.note { border-left: 2px solid var(--gold); background: var(--bg-alt);
        padding: 18px 22px; margin: 28px 0; font-size: 15px; }
.note p:last-child { margin-bottom: 0; }

.cta { border: 1px solid var(--border); background: var(--bg-alt);
       padding: 32px; margin: 56px 0 24px; }
.cta h2 { margin-top: 0; font-size: 28px; }
.cta p { font-size: 15px; color: rgba(240,235,227,0.7); }
.cta-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.btn { display: inline-block; padding: 12px 26px; font-size: 11px; letter-spacing: 2px;
       text-transform: uppercase; text-decoration: none; border: 1px solid var(--gold); color: var(--gold); }
.btn-solid { background: var(--gold); color: #0D0B10; }

/* Related-reading strip at the foot of each article. Internal links between
   posts are how a reader who arrived on one search finds the rest, and how
   crawlers discover new articles without waiting for a sitemap re-crawl. */
.related { border-top: 1px solid var(--border); margin-top: 48px; padding-top: 28px; }
.related h3 { margin-top: 0; }
.related ul { list-style: none; margin-left: 0; }
.related li { margin-bottom: 7px; font-size: 15px; }
.related a { text-decoration: none; }
.related a:hover { text-decoration: underline; }

.disclaimer { font-size: 13px; color: var(--text-muted); font-style: italic;
              border-top: 1px solid var(--border); padding-top: 24px; margin-top: 40px; }
footer { border-top: 1px solid var(--border); padding: 32px 0; margin-top: 40px;
         font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
footer .wrap { max-width: 1200px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { text-decoration: none; color: var(--text-muted); }
footer a:hover { color: var(--gold); }
/* The office address, under the copyright. Uppercase at 2px tracking is right
   for a row of nav links but wrong for an address someone may want to read or
   copy, so this one line opts out of both. It also gives the PostalAddress in
   index.html the visible-text support structured data is meant to have. */
footer .foot-addr { display: inline-block; margin-top: 6px; text-transform: none;
         letter-spacing: 0.4px; font-size: 11px; opacity: 0.85; }