/* ============================================================
   Reminissit — shared styles for interior pages
   (about / privacy / terms). Tokens match index.html.
   ============================================================ */

:root{
  --navy:#2C3E50;
  --charcoal:#0F0E0C;
  --amber:#C8860A;
  --amber-light:#E8A020;
  --cream:#E8DDD0;
  --slate:#4A6A7A;
  --muted:rgba(232,221,208,.62);
  --dim:rgba(232,221,208,.42);
  --rule:rgba(232,221,208,.10);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Nunito Sans','Calibri',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--navy);
  background-image:radial-gradient(120% 60% at 50% 0%,#35495e 0%,var(--navy) 48%,#22303e 100%);
  background-attachment:fixed;
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.75;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---------- header ---------- */
.top{
  border-bottom:1px solid var(--rule);
}
.top-in{
  max-width:760px;
  margin:0 auto;
  padding:26px 28px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
}
.mark{
  font-family:var(--serif);
  font-size:25px;
  letter-spacing:.4px;
  text-decoration:none;
  white-space:nowrap;
}
.mark .a{font-weight:700;color:var(--cream)}
.mark .b{font-weight:400;color:var(--amber)}

.top-nav{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
}
.top-nav a{
  color:var(--dim);
  text-decoration:none;
  font-size:14px;
  letter-spacing:.2px;
  transition:color .2s;
}
.top-nav a:hover,
.top-nav a[aria-current="page"]{color:var(--amber)}

/* ---------- page shell ---------- */
.page{
  flex:1;
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:58px 28px 78px;
}

h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(31px,5.4vw,44px);
  line-height:1.2;
  letter-spacing:-.2px;
  text-wrap:balance;
}
.rule{
  width:64px;
  height:2px;
  background:var(--amber);
  border-radius:2px;
  margin:22px 0 8px;
}
.eff{
  font-size:13px;
  color:var(--dim);
  letter-spacing:.3px;
}

h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:22px;
  line-height:1.35;
  color:var(--cream);
  margin:44px 0 14px;
  text-wrap:balance;
}
h2 .n{
  color:var(--amber);
  font-weight:400;
  margin-right:10px;
}
h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:15px;
  letter-spacing:.3px;
  color:var(--cream);
  margin:26px 0 8px;
}

p{
  font-size:16px;
  color:var(--muted);
  max-width:68ch;
  text-wrap:pretty;
  margin-bottom:16px;
}
p.lead{
  font-size:18px;
  color:var(--cream);
  font-weight:300;
  margin-bottom:22px;
}
strong{color:var(--cream);font-weight:600}
em{font-style:italic}

a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(200,134,10,.35)}
a:hover{color:var(--amber-light);border-bottom-color:var(--amber-light)}

ul{margin:0 0 18px 0;padding-left:0;list-style:none;max-width:68ch}
li{
  position:relative;
  padding-left:20px;
  margin-bottom:9px;
  font-size:16px;
  color:var(--muted);
}
li::before{
  content:'';
  position:absolute;
  left:2px;top:11px;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--amber);
  opacity:.75;
}

/* pull quote — the one flourish these pages get */
.pull{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(20px,3.4vw,26px);
  line-height:1.45;
  color:var(--cream);
  max-width:24ch;
  margin:44px 0;
  padding-left:22px;
  border-left:2px solid var(--amber);
}

.callout{
  border:1px solid var(--rule);
  border-radius:12px;
  background:rgba(232,221,208,.035);
  padding:22px 24px;
  margin:30px 0;
}
.callout p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
footer{
  text-align:center;
  padding:0 24px 44px;
  font-size:13px;
  line-height:1.7;
  color:var(--dim);
}
.flinks{
  max-width:520px;
  margin:0 auto 20px;
  padding-top:26px;
  border-top:1px solid var(--rule);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 22px;
}
.flinks a{
  color:rgba(232,221,208,.62);
  font-size:13.5px;
  letter-spacing:.2px;
  border-bottom:none;
}
.flinks a:hover{color:var(--amber)}
.fentity{
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.3px;
  color:rgba(232,221,208,.52);
}
.faddr{margin-top:3px;font-size:12.5px;color:rgba(232,221,208,.34)}
.fcopy{margin-top:13px;font-size:12px;color:rgba(232,221,208,.28)}
footer p{max-width:none;margin-bottom:0;color:inherit;font-size:inherit}

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:4px;
}

@media (max-width:560px){
  .top-in{padding:20px 22px;flex-direction:column;align-items:flex-start;gap:14px}
  .mark{font-size:22px}
  .top-nav{gap:18px}
  .page{padding:40px 22px 60px}
  .pull{max-width:none;margin:34px 0}
}