/* v4: wider panel and bilingual navigation on the copper canvas. */
:root {
  --frame: clamp(22px, 3.5vw, 64px);
  --panel-width: min(1520px, calc(100vw - var(--frame) * 2));
}

html {
  background: var(--rust);
  padding: var(--frame);
  min-height: 100%;
  scroll-padding-top: calc(var(--frame) + 24px);
}

body {
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: 5px;
  box-shadow: 0 20px 70px #452b201c;
}

.contact {
  border-radius: 0 0 5px 5px;
}

.hero {
  height: calc(100svh - 88px - var(--frame) * 2);
}

/* Size large type against the panel, so its proportions stay consistent. */
.hero h1 { font-size: clamp(72px, calc(var(--panel-width) * .086), 146px); }
.contact h2 { font-size: clamp(48px, calc(var(--panel-width) * .063), 98px); }

@media (max-width: 1000px) {
  :root { --gutter: clamp(24px, 4vw, 48px); }
  .hero h1 { font-size: calc(var(--panel-width) * .092); }
}

@media (max-width: 700px) {
  :root {
    --frame: 10px;
    --gutter: 20px;
  }

  .hero { height: 690px; }
  .hero h1 { font-size: clamp(40px, calc(var(--panel-width) * .12), 84px); }
  .contact h2 { font-size: clamp(32px, calc(var(--panel-width) * .093), 62px); }
  .header:has(.mobile-nav:not([hidden])) { top: var(--frame); }
  .mobile-nav {
    inset: calc(82px + var(--frame)) var(--frame) var(--frame);
    border-radius: 0 0 5px 5px;
    padding: 36px 24px;
  }
}

/* The language links work as normal links, including without JavaScript. */
.header-actions{display:flex;align-items:center;gap:24px}
.language-switch{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.06em}
.language-switch a{padding:9px 2px;color:var(--muted);border-bottom:1px solid transparent}
.language-switch a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--rust)}
.language-switch a:hover{color:var(--rust)}
.language-switch>span{color:var(--line)}
:lang(en) .hero h1{font-size:clamp(64px,calc(var(--panel-width) * .075),132px)}
@media(max-width:1000px){.header-actions{gap:16px}.desktop-nav{gap:22px}.header-contact{gap:18px}}
@media(max-width:700px){.header-actions{gap:10px}.language-switch{font-size:9px;gap:5px}:lang(en) .hero h1{font-size:clamp(36px,calc(var(--panel-width) * .102),72px)}}