/* ==========================================================================
   Site banner — the green "book cover" band at the top of every page.
   October 2026.

   Two sizes share this one file:
     <header class="site-banner">                    the full banner (home page)
     <header class="site-banner site-banner--slim">  the shorter one (every other page)

   Linked last in each page's <head> so it wins over the older header rules.
   ========================================================================== */

/* A stand-in for the name's typeface, sized to match it, so nothing jumps
   or overlaps in the instant before the real typeface arrives. */
@font-face{
  font-family:'Banner Fallback';
  src:local('Georgia'),local('Times New Roman'),local('Times');
  size-adjust:82%;
}

.site-banner{
  --banner-green:#1d3426;
  --banner-cream:#f7f2e4;
  --banner-gold:#a06d0c;        /* gold on cream */
  --banner-gold-light:#e4c57c;  /* gold on green */
  background:var(--banner-cream);
  border-bottom:1px solid #dbcda9;
}

/* ---------- the green band ---------- */
.site-banner .banner-band{
  background:var(--banner-green);
  border-top:4px solid #b8892b;
  padding-top:34px;
}
.site-banner .banner-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
}
.site-banner .banner-text{
  flex:1 1 auto;
  min-width:0;
  align-self:center;
  padding-bottom:34px;
}

/* Jane's name */
.site-banner .banner-name{
  display:inline-block;
  font-family:'Cormorant Garamond','Banner Fallback',Georgia,serif;
  font-weight:500;
  font-size:clamp(3.5rem,calc(13.5vw - 24px),7.25rem);
  line-height:.92;
  letter-spacing:-.015em;
  white-space:nowrap;
  color:var(--banner-cream);
  text-decoration:none;
}
.site-banner .banner-name:focus-visible{outline-color:var(--banner-gold-light)}

/* the tagline, with a short gold rule above it */
.site-banner .banner-tagline{
  margin:0 0 0 .2em;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.25rem,2.6vw,1.9rem);
  line-height:1.2;
  letter-spacing:0;
  color:var(--banner-gold-light);
}
.site-banner .banner-tagline::before{
  content:"";
  display:block;
  width:64px;
  height:2px;
  margin:24px 0 16px;
  background:#d9b565;
}

/* ---------- Ollie's arched window ---------- */
.site-banner .banner-arch{
  flex:0 0 clamp(250px,40vw,470px);
  aspect-ratio:470 / 246;
  box-sizing:border-box;
  display:flex;
  padding:9px 9px 0;
  background:var(--banner-cream);
  border-radius:50% 50% 0 0 / 70% 70% 0 0;
}
.site-banner .banner-arch-line{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  border:1px solid #c9a04a;
  border-bottom:0;
  border-radius:50% 50% 0 0 / 70% 70% 0 0;
}
.site-banner .banner-arch picture{display:block;width:90%;margin-bottom:3%}
.site-banner .banner-ollie{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(4px 6px 0 rgba(160,109,12,.14));
}

/* ---------- the menu strip ---------- */
.site-banner nav{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:0 34px;
  padding:0;
  border:0;
}
.site-banner nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:13px 0 10px;
  border-bottom:3px solid transparent;
  font-family:'Karla',sans-serif;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.07em;
  color:#232620;
  text-decoration:none;
}
.site-banner nav a:hover{
  color:var(--banner-green);
  text-decoration:none;
  border-bottom-color:rgba(160,109,12,.45);
}
.site-banner nav a.nav-free,
.site-banner nav a[aria-current]{
  color:#232620;
  padding-bottom:10px;
  border-bottom:3px solid var(--banner-gold);
}

/* ---------- the shorter banner used on inside pages ---------- */
.site-banner--slim .banner-band{padding-top:16px}
.site-banner--slim .banner-inner{gap:32px}
.site-banner--slim .banner-text{padding-bottom:18px}
.site-banner--slim .banner-name{font-size:clamp(2.75rem,7.4vw,4.25rem);line-height:1}
.site-banner--slim .banner-tagline{font-size:clamp(1.1rem,2.2vw,1.35rem)}
.site-banner--slim .banner-tagline{margin-top:10px}
.site-banner--slim .banner-tagline::before{display:none}
.site-banner--slim .banner-arch{flex-basis:clamp(190px,26vw,260px);padding:6px 6px 0}

/* ---------- phones ---------- */
@media (max-width:680px){
  .site-banner .banner-band{padding-top:22px}
  .site-banner .banner-inner{flex-direction:column;align-items:stretch;gap:18px}
  .site-banner .banner-text{align-self:auto;padding-bottom:0}
  .site-banner .banner-name{font-size:clamp(3rem,17vw,5.5rem)}
  .site-banner .banner-tagline{font-size:1.3rem}
  .site-banner .banner-tagline::before{margin:16px 0 12px}
  .site-banner .banner-arch{flex:0 0 auto;width:min(270px,84%);align-self:center}
  .site-banner nav{gap:0 clamp(12px,4.2vw,20px)}
  .site-banner nav a{font-size:.9rem;letter-spacing:.01em;padding:10px 0 7px}
  .site-banner nav a.nav-free,
  .site-banner nav a[aria-current]{padding-bottom:7px}

  .site-banner--slim .banner-band{padding-top:14px}
  .site-banner--slim .banner-text{padding-bottom:16px}
  .site-banner--slim .banner-name{font-size:clamp(2.6rem,13vw,3.6rem)}
  .site-banner--slim .banner-tagline{font-size:1.1rem;margin-top:8px}
  .site-banner--slim .banner-arch{display:none}
}