/* ============================================================
   layout.css
   Page chrome: body, masthead, tab nav, panel switching, footer.
   ============================================================ */

body{
  margin:0;
  background:
    radial-gradient(ellipse at top, rgba(63,127,224,.10), transparent 55%),
    var(--walnut-900);
  color:var(--parchment);
  font-family:var(--font-body);
  min-height:100vh;
  /* faint horizontal scanlines over the gradient */
  background-image:
    radial-gradient(ellipse at top, rgba(63,127,224,.10), transparent 55%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0px, rgba(0,0,0,.12) 1px, transparent 1px, transparent 3px);
}

/* ---------- MASTHEAD ---------- */
.masthead{
  position:relative;
  border-bottom:1px solid var(--walnut-500);
  background:linear-gradient(180deg, var(--walnut-800), var(--walnut-900));
  padding:34px 24px 26px;
  text-align:center;
  overflow:hidden;
}
/* thin dark rails down the left and right edges */
.masthead::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.35) 6px 7px, transparent 7px),
    linear-gradient(90deg, transparent calc(100% - 7px), rgba(0,0,0,.35) calc(100% - 7px) calc(100% - 6px), transparent calc(100% - 6px));
  pointer-events:none;
}
.crest{
  width:128px; height:128px;
  margin:0 auto 10px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.crest img{
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));
}
.masthead h1{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-size:clamp(28px, 5vw, 46px);
  margin:0;
  color:var(--parchment);
  text-shadow:0 2px 0 rgba(0,0,0,.4);
}
.masthead h1 span{ color:var(--brass); }
.masthead .subline{
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--parchment-dim);
}
.masthead .subline::before,
.masthead .subline::after{ content:"— "; color:var(--clay); }
.masthead .subline::after{ content:" —"; }

/* ---------- TAB NAV ---------- */
.signpost{
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:center;
  gap:10px;
  padding:14px 16px;
  background:rgba(22,17,13,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--walnut-500);
  flex-wrap:wrap;
}
.tab-btn{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:14px;
  font-weight:600;
  color:var(--parchment-dim);
  background:linear-gradient(180deg, var(--walnut-600), var(--walnut-700));
  border:1px solid var(--walnut-500);
  border-radius:3px;
  padding:10px 20px;
  cursor:pointer;
  position:relative;
  transition:color .15s ease, background .15s ease, transform .1s ease;
}
/* small brass rivet in the corner of each tab */
.tab-btn::before{
  content:"";
  position:absolute; left:6px; top:6px;
  width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #eecb7b, var(--brass-dim));
}
.tab-btn:hover{ color:var(--parchment); transform:translateY(-1px); }
.tab-btn.active{
  color:var(--ink);
  background:linear-gradient(180deg, #dcb15c, var(--brass));
  border-color:var(--brass);
}

/* ---------- PANELS ---------- */
main{ max-width:1080px; margin:0 auto; padding:32px 20px 80px; }

.panel{ display:none; animation:fade .25s ease; }
.panel.active{ display:block; }
@keyframes fade{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:2px solid var(--walnut-500);
}
.section-head h2{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:26px;
  margin:0;
  color:var(--parchment);
}
.section-head h2 em{ color:var(--clay); font-style:normal; }
.section-head p{
  margin:4px 0 0;
  font-size:13px;
  color:var(--parchment-dim);
  font-family:var(--font-mono);
}

/* ---------- FOOTER ---------- */
footer{
  text-align:center; padding:30px 20px 40px;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--walnut-500);
}