/* ============================================================
   DAPWA — Defence Accounts Pensioners Welfare Association
   Design tokens
   ============================================================ */
:root{
  /* Color */
  --navy:        #16233F;   /* primary ink / headers / nav */
  --navy-soft:   #223357;   /* secondary panels on navy */
  --paper:       #F6F3EA;   /* page background */
  --paper-deep:  #EDE7D6;   /* recessed panels on paper */
  --brass:       #A9812E;   /* primary accent — insignia, links, rules */
  --brass-soft:  #D8C48C;   /* tints / hover backgrounds */
  --olive:       #5B6B45;   /* secondary accent — tags, sector grid */
  --signal:      #7A2E2E;   /* used only for notices / important flags */
  --ink:         #2A2A26;   /* body text */
  --ink-soft:    #5B5A50;   /* muted text */
  --line:        #D8D2BF;   /* hairline borders on paper */
  --line-navy:   rgba(246,243,234,0.18); /* hairline borders on navy */

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Scale — base is deliberately generous for a senior-heavy audience */
  --step-0: 1.0625rem;   /* 17px body */
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: 2.1rem;
  --step-4: 2.9rem;
  --step-5: 3.8rem;

  --radius: 3px;
  --container: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:var(--navy); text-decoration-color:var(--brass); text-underline-offset:3px; }
a:hover{ color:var(--brass); }

:focus-visible{
  outline:3px solid var(--brass);
  outline-offset:2px;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy);
  line-height:1.15;
  margin:0 0 0.5em;
  font-weight:600;
}
h1{ font-size:var(--step-5); font-weight:500; }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-2); }
h4{ font-size:var(--step-1); font-family:var(--font-body); font-weight:700; }

p{ margin:0 0 1.1em; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--brass);
  display:inline-flex;
  align-items:center;
  gap:0.6em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--brass);
  display:inline-block;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 1.5rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:0.55em;
  font-family:var(--font-body);
  font-weight:700;
  font-size:0.98rem;
  padding:0.85em 1.5em;
  border-radius:var(--radius);
  border:1.5px solid var(--navy);
  background:var(--navy);
  color:var(--paper);
  cursor:pointer;
  text-decoration:none;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover{ background:var(--brass); border-color:var(--brass); color:var(--navy); }
.btn-outline{
  background:transparent;
  color:var(--navy);
  border:1.5px solid var(--navy);
}
.btn-outline:hover{ background:var(--navy); color:var(--paper); }
.btn-brass{
  background:var(--brass);
  border-color:var(--brass);
  color:var(--navy);
}
.btn-brass:hover{ background:var(--navy); border-color:var(--navy); color:var(--paper); }

/* ---------------- Skip link ---------------- */
.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--brass); color:var(--navy);
  padding:0.8em 1.2em; z-index:1000; font-weight:700;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ---------------- Header / Seal ---------------- */
.site-header{
  background:var(--navy);
  color:var(--paper);
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--line-navy);
}
.header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:0.85rem 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:0.85rem;
  text-decoration:none;
  color:var(--paper);
}
.brand:hover{ color:var(--brass-soft); }
.seal{ width:46px; height:46px; flex:none; }
.brand-text{ line-height:1.2; }
.brand-text .assoc{
  display:block;
  font-family:var(--font-display);
  font-size:1.3rem;
  letter-spacing:0.01em;
}
.brand-text .place{
  display:block;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--brass-soft);
  margin-top:0.15em;
}

.main-nav ul{
  list-style:none; display:flex; gap:1.6rem;
  margin:0; padding:0; flex-wrap:wrap;
}
.main-nav a{
  color:var(--paper);
  text-decoration:none;
  font-size:0.96rem;
  font-weight:600;
  letter-spacing:0.01em;
  padding:0.4em 0.1em;
  border-bottom:2px solid transparent;
}
.main-nav a:hover,
.main-nav a[aria-current="page"]{
  border-bottom-color:var(--brass);
  color:var(--paper);
}

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line-navy);
  color:var(--paper); border-radius:var(--radius);
  padding:0.5em 0.7em; font-size:1.2rem; cursor:pointer;
}

/* ---------------- Notice strip ---------------- */
.notice-strip{
  background:var(--brass);
  color:var(--navy);
}
.notice-strip .container{
  display:flex; align-items:center; gap:0.8rem;
  padding-top:0.55rem; padding-bottom:0.55rem;
  font-size:0.92rem; font-weight:600;
  flex-wrap:wrap;
}
.notice-strip .tag{
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.1em;
  background:var(--navy);
  color:var(--brass-soft);
  padding:0.2em 0.6em;
  border-radius:999px;
  text-transform:uppercase;
}

/* ---------------- Hero ---------------- */
.hero{
  background:
    radial-gradient(120% 140% at 85% -10%, rgba(169,129,46,0.16), transparent 55%),
    var(--paper);
  border-bottom:1px solid var(--line);
  padding:4.5rem 0 4rem;
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
  align-items:center;
}
.hero h1{ margin-bottom:0.4em; }
.hero h1 em{
  font-style:normal;
  color:var(--brass);
}
.hero-lede{
  font-size:1.2rem;
  color:var(--ink-soft);
  max-width:46ch;
  margin-bottom:1.6em;
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

.hero-figure{
  position:relative;
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
}
.hero-seal-mark{ width:100%; max-width:340px; height:auto; }

.hero-stats{
  display:flex; gap:2.4rem;
  margin-top:2.6rem;
  flex-wrap:wrap;
}
.hero-stats .stat b{
  display:block;
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--navy);
}
.hero-stats .stat span{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---------------- Sector grid (signature element) ---------------- */
.sector-section{ padding:4.5rem 0; }
.sector-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; margin-bottom:2.2rem; flex-wrap:wrap;
}
.sector-head p{ max-width:52ch; color:var(--ink-soft); margin:0.5em 0 0; }

.sector-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.sector-card{
  background:var(--paper);
  padding:2rem 1.8rem;
  text-decoration:none;
  color:var(--ink);
  position:relative;
  display:flex; flex-direction:column; gap:0.9rem;
  min-height:210px;
  transition:background .18s ease;
}
.sector-card:hover{ background:var(--paper-deep); }
.sector-card:hover .sector-arrow{ transform:translateX(4px); }
.sector-num{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.1em;
  color:var(--brass);
}
.sector-card h3{
  font-size:1.35rem;
  margin:0;
}
.sector-card p{
  color:var(--ink-soft);
  font-size:0.95rem;
  margin:0;
  flex:1;
}
.sector-arrow{
  font-family:var(--font-mono);
  color:var(--navy);
  transition:transform .18s ease;
}

/* ---------------- Panels / two-col content ---------------- */
.panel-section{ padding:4.5rem 0; background:var(--paper-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.panel-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
}
.panel-card{
  background:var(--paper);
  border:1px solid var(--line);
  padding:2rem;
}
.panel-card h3{ display:flex; align-items:center; gap:0.6em; }
.list-plain{ list-style:none; margin:0; padding:0; }
.list-plain li{
  padding:0.85em 0;
  border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1rem;
  font-size:0.98rem;
}
.list-plain li:last-child{ border-bottom:none; }
.list-plain .date{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--ink-soft);
  white-space:nowrap;
  padding-top:0.15em;
}

/* ---------------- Generic page header (interior pages) ---------------- */
.page-header{
  background:var(--navy);
  color:var(--paper);
  padding:3.2rem 0 2.6rem;
  border-bottom:4px solid var(--brass);
}
.page-header .eyebrow{ color:var(--brass-soft); }
.page-header .eyebrow::before{ background:var(--brass-soft); }
.page-header h1{ color:var(--paper); font-size:var(--step-4); margin-top:0.25em; }
.page-header p{ color:#D9D6C9; max-width:60ch; font-size:1.08rem; }
.breadcrumb{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--brass-soft);
  margin-top:1.2em;
}
.breadcrumb a{ color:var(--brass-soft); }

.content-section{ padding:4rem 0; }
.content-narrow{ max-width:72ch; }

/* Cards for orders / resources */
.doc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.9rem; }
.doc-item{
  display:flex; align-items:flex-start; gap:1.1rem;
  background:var(--paper); border:1px solid var(--line); padding:1.3rem 1.5rem;
}
.doc-icon{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em;
  background:var(--olive); color:var(--paper);
  padding:0.35em 0.55em; border-radius:2px; text-transform:uppercase;
  flex:none; margin-top:0.2em;
}
.doc-item h4{ margin:0 0 0.25em; font-size:1.05rem; }
.doc-item p{ margin:0; color:var(--ink-soft); font-size:0.92rem; }
.doc-item .doc-meta{ font-family:var(--font-mono); font-size:0.76rem; color:var(--ink-soft); }

/* Table (directory) */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); }
table.directory{
  width:100%; border-collapse:collapse; background:var(--paper); min-width:640px;
}
table.directory th, table.directory td{
  text-align:left; padding:0.9em 1.1em; border-bottom:1px solid var(--line); font-size:0.95rem;
}
table.directory th{
  background:var(--navy); color:var(--paper);
  font-family:var(--font-mono); font-size:0.74rem;
  letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
}
table.directory tr:last-child td{ border-bottom:none; }
table.directory tr:hover td{ background:var(--paper-deep); }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.info-block{ margin-bottom:1.8rem; }
.info-block .eyebrow{ margin-bottom:0.5em; }
.info-block address{ font-style:normal; line-height:1.7; }

.map-frame{
  border:1px solid var(--line);
  aspect-ratio:4/3;
  background:var(--paper-deep);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft);
  font-family:var(--font-mono);
  font-size:0.85rem;
  text-align:center;
  padding:2rem;
}

/* Gallery */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
}
.gallery-tile{
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:0.78rem;
  text-align:center;
  padding:1rem;
  letter-spacing:0.04em;
}

/* Bank / donation card */
.bank-card{
  background:var(--navy); color:var(--paper);
  padding:2rem; border:1px solid var(--line-navy);
}
.bank-card dl{ display:grid; grid-template-columns:auto 1fr; gap:0.5em 1.2em; margin:1em 0 0; }
.bank-card dt{ font-family:var(--font-mono); font-size:0.76rem; color:var(--brass-soft); letter-spacing:0.06em; text-transform:uppercase; }
.bank-card dd{ margin:0; font-weight:600; }

/* ---------------- Footer ---------------- */
.site-footer{
  background:var(--navy); color:#C9C6B8;
  padding:3.5rem 0 1.5rem;
  margin-top:0;
}
.footer-grid{
  display:grid;
  grid-template-columns:2.3fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--line-navy);
}
.footer-brand{ display:flex; gap:0.85rem; align-items:flex-start; }
.footer-brand .seal{ width:40px; height:40px; }
.footer-brand p{ color:#A9A691; font-size:0.92rem; margin-top:0.6em; }
.site-footer h4{ color:var(--paper); font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; font-family:var(--font-mono); font-weight:600; margin-bottom:1em; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.65em; }
.site-footer a{ color:#C9C6B8; text-decoration:none; font-size:0.94rem; }
.site-footer a:hover{ color:var(--brass-soft); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem;
  padding-top:1.5rem; font-size:0.82rem; color:#8B896F;
}

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-figure{ order:-1; max-width:220px; margin:0 auto; }
  .panel-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .sector-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  :root{ --step-5:2.6rem; --step-4:2.1rem; --step-3:1.7rem; }
  .main-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--navy); border-top:1px solid var(--line-navy);
    padding:1rem 1.5rem 1.5rem;
  }
  .main-nav.open{ display:block; }
  .main-nav ul{ flex-direction:column; gap:0.2rem; }
  .main-nav li{ border-bottom:1px solid var(--line-navy); }
  .main-nav a{ display:block; padding:0.8em 0; }
  .nav-toggle{ display:inline-flex; }
  .sector-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero{ padding:3rem 0 2.5rem; }
}