/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT — site header, navigation, language switcher, page banner, footer.
   Everything shared by all four pages. Loaded on every page.

   The header is new: the original prototype was a single page and needed only
   a floating language switcher. Two variants:

     .site-header--overlay   home only — transparent, sits on top of the hero
     .site-header            interior pages — solid, in normal flow

   Both are the same markup; only the modifier differs.
   ═══════════════════════════════════════════════════════════════════════════ */

.skip-link{
  position:absolute;top:8px;left:8px;z-index:100;
  background:var(--amber);color:var(--ink);
  padding:10px 18px;border-radius:8px;font-weight:700;
  transform:translateY(-200%);transition:transform .15s ease;
}
.skip-link:focus{transform:translateY(0)}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header{
  position:relative;z-index:20;
  background:var(--ink);
  min-height:var(--header-h);
  display:flex;align-items:center;gap:24px;
  padding:0 var(--pad-x);
}
/* Overlay variant: the links sit directly on the hero photograph, whose top
   band is bright sky and birch foliage — white-on-white. A fully transparent
   header made the navigation unreadable there. The scrim gives the links
   something to sit against and fades out before it reaches the hero panel, so
   the photo still reads as a photo. The text-shadow is the second layer, for
   the few pixels where a light branch survives the gradient. */
.site-header--overlay{
  position:absolute;top:0;left:0;right:0;
  background:linear-gradient(180deg,
              rgba(20,22,20,0.68) 0%,
              rgba(20,22,20,0.40) 55%,
              rgba(20,22,20,0) 100%);
}
.site-header--overlay .brand,
.site-header--overlay .nav a{text-shadow:0 1px 4px rgba(0,0,0,0.55)}
.site-header--overlay .nav a{color:rgba(255,255,255,0.92)}

.brand{
  font-family:var(--sora);font-weight:600;font-size:17px;
  color:#fff;line-height:1.2;margin-right:auto;
  padding:16px 0;
  display:inline-flex;align-items:center;gap:10px;
}
.brand:hover{color:var(--amber)}
/* No fill here on purpose — the mark is a two-colour tile with its fills
   written into the markup, and one CSS fill would flatten it to a solid square.
   So the tile is the constant and only the name reacts on hover.
   flex:none stops it being squeezed when the header runs out of room on a
   narrow phone; the tile is the one thing that must not distort. */
.brand-mark{flex:none;display:block}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.nav a{
  color:rgba(255,255,255,0.78);
  font-size:15px;font-weight:500;
  padding:10px 0;position:relative;
  transition:color .15s ease;
}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;
  height:2px;background:var(--amber);
}

.nav-toggle{
  display:none;
  flex:none;
  width:42px;height:42px;padding:0;
  background:transparent;border:1px solid rgba(255,255,255,0.28);
  border-radius:9px;cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-toggle span{
  display:block;width:18px;height:2px;background:#fff;position:relative;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:#fff;
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

/* ── Language switcher ───────────────────────────────────────────────────── */
/* Real links now, not buttons: each language is its own URL, so switching is
   a navigation and the choice survives a copied link or a bookmark. */
.lang{display:flex;gap:8px;flex:none}
.lang a{
  display:flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.92);
  color:#5f5f5f;
  font-size:13px;font-weight:700;
  transition:border-color .15s ease,color .15s ease;
}
.lang a:hover{color:var(--ink)}
.lang a.is-on{border-color:var(--amber);color:var(--ink)}

/* ── Interior page banner ────────────────────────────────────────────────
   Interior pages have no hero photograph, so this dark band carries the
   heading and keeps the header from floating against bare paper. */
.page-head{
  background:var(--ink);color:#fff;
  padding:clamp(40px,6vw,72px) var(--pad-x) clamp(48px,7vw,84px);
}
.page-head h1{
  font-weight:700;font-size:clamp(30px,4.4vw,44px);
  line-height:1.1;text-wrap:balance;color:#fff;
}
.page-head p{
  font-size:clamp(16px,1.6vw,18px);line-height:1.6;
  color:rgba(255,255,255,0.75);
  margin:18px 0 0;max-width:560px;text-wrap:pretty;
}
.page-kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--amber);margin-bottom:16px;
}

/* Generic prose block for the placeholder pages. */
.prose{padding:var(--pad-y) var(--pad-x);max-width:760px}
.prose p{font-size:17px;line-height:1.7;color:var(--body);margin:0 0 20px}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer{
  background:var(--ink);color:#cfcfca;
  padding:clamp(40px,5vw,56px) var(--pad-x);
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:24px;font-size:14px;line-height:1.8;
}
.footer a{color:#cfcfca}
.footer a:hover{color:var(--amber)}
.footer-company{font-family:var(--sora);font-weight:600;color:#fff;font-size:18px}
.footer-right{text-align:right}
.footer-rights{margin-top:10px;color:#9a9a94}
.footer-nav{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:860px){
  .js .nav-toggle{display:flex}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);
    padding:8px var(--pad-x) 20px;
    border-top:1px solid rgba(255,255,255,0.1);
  }
  .js .nav{display:none}
  .js .nav.is-open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.08)}
  .nav a[aria-current="page"]::after{display:none}
  .nav a[aria-current="page"]{color:var(--amber)}

  /* With JavaScript unavailable the toggle stays hidden and the full
     navigation remains visible in normal flow. */
  .no-js .site-header{flex-wrap:wrap}
  .no-js .site-header--overlay{position:relative;background:var(--ink)}
  .no-js .lang{order:1}
  .no-js .nav{
    order:2;
    position:static;flex:1 0 100%;
    padding:8px 0 20px;box-shadow:none;
  }
}
@media(max-width:560px){
  .site-header{gap:12px}
  .brand{font-size:15px}
  .lang a{padding:6px 9px;font-size:12px}
  .lang svg{width:18px;height:12px}
}
@media(max-width:374px){
  /* Preserve full-size controls at the narrowest supported viewport. The
     accessible name stays on the brand link when its visible text is hidden. */
  .brand{gap:0}
  .brand span{display:none}
}
@media(max-width:640px){
  .footer{flex-direction:column}
  .footer-right{text-align:left}
}