/* The header never slides, never shrinks, never grows a background plate. It
   only changes ink, because the house behind it changes from bright stone to
   night water. assets/js/header.js reads data-tone off whichever chapter is
   under the header line and copies it up here. */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gut);
  padding: clamp(1.1rem, 2.2vh, 1.7rem) var(--gut);
  color: var(--ink);
  transition: color .8s var(--ease);
  pointer-events: none;
}
.site-head > * { pointer-events: auto; }
.site-head[data-tone="light"] { color: var(--warm-white); }
.site-head[data-tone="light"] .mark__sub { color: rgba(251, 249, 244, .68); }
.site-head[data-tone="light"] .nav a::after { background: rgba(251, 249, 244, .8); }
.site-head[data-tone="light"] .head-cta { border-color: rgba(251, 249, 244, .45); }
.site-head[data-tone="light"] .head-cta:hover { background: var(--warm-white); color: var(--night); }
.site-head[data-tone="light"] .burger i { background: var(--warm-white); }

.mark { display: flex; align-items: baseline; gap: .62em; line-height: 1; }
.mark__word {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.9vw, 1.72rem);
  letter-spacing: .16em;
}
.mark__sub {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color .8s var(--ease);
}

.nav { display: flex; gap: clamp(1.1rem, 2.4vw, 2.4rem); justify-self: center; }
.nav a {
  position: relative;
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-bottom: .35em;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--ink); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .55s var(--slow);
}
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current]::after { transform: scaleX(1); }

.head-cta {
  font-size: var(--label); font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid var(--rule-2); padding: .78em 1.35em;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .8s var(--ease);
}
.head-cta:hover, .head-cta:focus-visible { background: var(--ink); color: var(--page); }

.burger { display: none; width: 2.4rem; height: 2.6rem; position: relative; }
.burger i {
  position: absolute; left: .15rem; right: .15rem; height: 1px; background: var(--ink);
  transition: transform .5s var(--slow), opacity .3s linear, background-color .8s var(--ease);
}
.burger i:nth-child(1) { top: calc(50% - .38rem); }
.burger i:nth-child(2) { bottom: calc(50% - .38rem); }
.is-menu-open .burger i:nth-child(1) { transform: translateY(.38rem) rotate(38deg); }
.is-menu-open .burger i:nth-child(2) { transform: translateY(-.38rem) rotate(-38deg); }

/* --- the phone menu: a calm plan drawing you read, not a list ----------- */
.menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--panel);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 22vh var(--gut) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--slow), visibility 0s linear .8s;
  visibility: hidden;
}
.is-menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
.menu__plan { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.menu__plan line, .menu__plan rect { fill: none; stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.menu__list { display: grid; align-content: start; gap: clamp(.3rem, 1.4vh, .9rem); position: relative; }
.menu__list a {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.3rem, 12vw, 3.6rem); line-height: 1.06;
  display: flex; align-items: baseline; gap: .7rem;
}
.menu__list a span { font-family: var(--sans); font-size: .58rem; letter-spacing: .26em; color: var(--ink-2); }
.menu__foot { display: flex; justify-content: space-between; align-items: end; gap: 1rem; position: relative; }

@media (max-width: 900px) {
  .nav, .head-cta { display: none; }
  .burger { display: block; }
  .site-head { grid-template-columns: auto 1fr auto; }
  .site-head .mark__sub { display: none; }
}
@media (min-width: 901px) { .menu { display: none; } }