/* =========================================================================
   Chilean Australian — independent cultural-heritage resource
   Editorial "cultural magazine" theme.
   Palette: Pacific/flag blue + Chilean red accent + copper + warm sand/cream.
   Type: Newsreader (editorial serif headings) + Inter (body).
   All content is visible with CSS alone — JS is progressive enhancement only.
   ========================================================================= */

:root{
  --blue:#0a3d7a; --blue-dark:#072a54; --blue-deep:#05203f; --blue-light:#1a5fb4;
  --red:#d52b1e; --copper:#b3703f; --copper-light:#c98a56;
  --cream:#f7f2e9; --cream-2:#efe7d6; --paper:#fffdf8;
  --ink:#1b2531; --muted:#57626e; --line:#e4dac7; --line-soft:#efe8da;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wrap:1180px; --prose:44rem;
  --sh-sm:0 1px 3px rgba(7,32,63,.08); --sh-md:0 14px 40px -18px rgba(7,32,63,.45);
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--blue-light); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
a:hover{color:var(--red)}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.15; color:var(--blue-dark); margin:0 0 .5em}
.container{width:min(100% - 2.6rem, var(--wrap)); margin-inline:auto}
.container--prose{width:min(100% - 2.6rem, var(--prose)); margin-inline:auto}

.skip-link{position:absolute; left:-9999px; top:0; background:var(--blue); color:#fff; padding:.7rem 1.1rem; z-index:200; border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---- decorative flag ribbon ---- */
.head__ribbon,.foot__ribbon{height:4px; background:linear-gradient(90deg,var(--blue) 0 40%, #fff 40% 60%, var(--red) 60% 100%)}

/* ---- header / nav ---- */
.site-head{position:sticky; top:0; z-index:100; background:rgba(255,253,248,.92); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line)}
.head__bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:70px}
.brand{font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--blue-dark); text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; letter-spacing:.2px}
.brand em{font-style:italic; color:var(--copper); font-weight:500}
.brand__star{width:20px; height:20px; flex:0 0 auto; background:var(--blue); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 18.9 5.9 21.4l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 18.9 5.9 21.4l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.brand--foot{color:#fff; font-size:1.4rem}
.brand--foot .brand__star{background:var(--copper-light)}
.site-nav ul{list-style:none; display:flex; gap:.2rem; margin:0; padding:0; flex-wrap:wrap}
.site-nav a{font-family:var(--sans); font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); text-decoration:none; padding:.5rem .7rem; border-radius:8px; display:block}
.site-nav a:hover{color:var(--blue); background:var(--cream-2)}
.site-nav a.is-active{color:var(--blue)}
.site-nav a.is-active::after{content:""; display:block; height:2px; background:var(--copper); margin-top:3px; border-radius:2px}
.nav-burger{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:.5rem; border-radius:8px}
.nav-burger span{width:24px; height:2px; background:var(--blue-dark); border-radius:2px; transition:.2s}

/* ---- hero ---- */
.hero{position:relative; overflow:hidden}
.hero--image{min-height:56vh; display:flex; align-items:flex-end; color:#fff; background:var(--blue-deep)}
.hero--image .hero__media{position:absolute; inset:0; z-index:0}
.hero--image .hero__media img{width:100%; height:100%; object-fit:cover; object-position:center}
.hero__scrim{position:absolute; inset:0; z-index:1; background:
  linear-gradient(180deg, rgba(5,32,63,.15) 0%, rgba(5,32,63,.30) 45%, rgba(5,32,63,.82) 100%),
  linear-gradient(90deg, rgba(5,32,63,.55) 0%, rgba(5,32,63,0) 60%)}
.hero__inner{position:relative; z-index:2; padding:3.4rem 0 2.8rem}
.hero--image .hero__inner{padding-top:8rem}
.hero--plain{color:#fff; background:
  radial-gradient(120% 140% at 12% 0%, var(--blue-light) 0%, var(--blue) 42%, var(--blue-deep) 100%)}
.hero--plain::after{content:""; position:absolute; inset:0; opacity:.16; background-image:
  radial-gradient(circle at 84% 30%, rgba(255,255,255,.5) 0 2px, transparent 2px),
  radial-gradient(circle at 92% 62%, rgba(255,255,255,.35) 0 3px, transparent 3px),
  repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 40px)}
.hero--plain .hero__inner{padding:4.2rem 0}
.hero__eyebrow{font-family:var(--sans); text-transform:uppercase; letter-spacing:.18em; font-size:.76rem; font-weight:700; color:var(--copper-light); margin:0 0 .8rem}
.hero h1{color:#fff; font-size:clamp(2.1rem,5.4vw,3.6rem); font-weight:600; max-width:16ch; letter-spacing:-.01em; text-shadow:0 2px 24px rgba(5,32,63,.45)}
.hero__lead{font-family:var(--serif); font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:400; line-height:1.5; max-width:40ch; margin:1rem 0 0; color:rgba(255,255,255,.94)}

/* ---- prose ---- */
.prose{background:var(--cream); padding:3.2rem 0 3.6rem}
.prose .container--prose>*:first-child{margin-top:0}
.prose p{margin:0 0 1.15rem; color:#26313d}
.prose p.lead,.prose .lead{font-family:var(--serif); font-size:1.32rem; line-height:1.55; color:var(--blue-dark)}
.prose h2{font-size:1.72rem; margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid var(--line); position:relative}
.prose h2::before{content:""; position:absolute; top:-1px; left:0; width:52px; height:3px; background:var(--copper); border-radius:2px}
.prose h3{font-size:1.28rem; margin-top:1.8rem; color:var(--blue)}
.prose ul,.prose ol{margin:0 0 1.2rem; padding-left:1.25rem}
.prose li{margin:.4rem 0}
.prose ul li::marker{color:var(--copper)}
.prose strong{color:var(--blue-dark)}
.prose em{color:#2f3a46}
.prose a{font-weight:500}

/* ---- contact form ---- */
.contact-form-wrap{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:1.6rem 1.6rem 1.9rem; margin:1.6rem 0 1rem; box-shadow:var(--sh-sm)}
.contact-form{display:flex; flex-direction:column; gap:.35rem}
.contact-form label{font-weight:600; font-size:.85rem; color:var(--blue-dark); margin-top:.7rem}
.contact-form input,.contact-form textarea{font-family:inherit; font-size:1rem; padding:.7rem .85rem; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink)}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--blue-light); outline-offset:1px; border-color:var(--blue-light)}
.btn{display:inline-block; font-family:var(--sans); font-weight:600; border:0; border-radius:999px; padding:.8rem 1.5rem; cursor:pointer; text-decoration:none; font-size:.95rem}
.btn-primary{background:var(--blue); color:#fff; margin-top:1rem; align-self:flex-start; box-shadow:0 8px 20px -10px rgba(10,61,122,.8)}
.btn-primary:hover{background:var(--red); color:#fff}
.form-note{font-size:.82rem; color:var(--muted); margin:.7rem 0 0}

/* ---- related "keep exploring" ---- */
.rel{background:var(--cream-2); border-top:1px solid var(--line); padding:2.6rem 0}
.rel__eyebrow{text-transform:uppercase; letter-spacing:.16em; font-size:.75rem; font-weight:700; color:var(--copper); margin:0 0 1rem}
.rel__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.rel__card{display:flex; align-items:center; justify-content:space-between; gap:1rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.3rem; text-decoration:none; color:var(--blue-dark); font-family:var(--serif); font-size:1.15rem; transition:transform .18s, box-shadow .18s, border-color .18s}
.rel__card:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--copper-light); color:var(--blue)}
.rel__arrow{color:var(--copper); font-size:1.2rem; transition:transform .18s}
.rel__card:hover .rel__arrow{transform:translateX(4px)}

/* ---- footer ---- */
.site-foot{background:var(--blue-deep); color:#cdd8e6}
.foot__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:2rem; padding:3rem 0 2.4rem}
.foot__brand p{color:#9fb2c8; font-size:.95rem; margin:.8rem 0 0; max-width:30ch}
.foot__col h3{color:#fff; font-family:var(--sans); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; margin:0 0 .9rem}
.foot__col ul{list-style:none; margin:0; padding:0}
.foot__col li{margin:.45rem 0}
.foot__col a{color:#b8c6d8; text-decoration:none; font-size:.95rem}
.foot__col a:hover{color:#fff; text-decoration:underline}
.foot__base{padding:1.2rem 0 2rem}
.foot__base p{color:#8093a8; font-size:.82rem; margin:0; max-width:70ch}

/* ---- CSS-only entrance animation (ends visible; safe if JS/anim never runs) ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:fadeUp .7s both}
  .prose.reveal{animation-delay:.05s}
  .rel.reveal{animation-delay:.1s}
}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

/* Safeguard: never leave content hidden waiting on JS (AOS-style traps). */
[data-aos]{opacity:1 !important; transform:none !important}

/* ---- responsive ---- */
@media (max-width:900px){
  .foot__grid{grid-template-columns:1fr 1fr; gap:1.6rem}
  .foot__brand{grid-column:1 / -1}
  .rel__grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:17px}
  .nav-burger{display:flex}
  .site-nav{position:fixed; inset:70px 0 auto 0; background:var(--paper); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height .28s ease; box-shadow:var(--sh-md)}
  .site-nav ul{flex-direction:column; gap:0; padding:.4rem 1.3rem 1rem}
  .site-nav li{border-bottom:1px solid var(--line-soft)}
  .site-nav a{padding:.85rem .2rem; font-size:.9rem}
  .site-nav a.is-active::after{display:none}
  .nav-toggle:checked ~ .site-head .site-nav{max-height:80vh}
  .nav-toggle:checked ~ .site-head .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .site-head .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .site-head .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero--image{min-height:52vh}
  .hero--image .hero__inner{padding-top:5.5rem}
}
/* When JS is absent the checkbox still toggles the menu (pure CSS). */