/* =====================================================================
   Layout — header, nav, footer, main wrapper
   ===================================================================== */

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 22px;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.site-logo {
  display: inline-block;
  width: 58.861px;
  height: 38.4px;
  line-height: 0;
}
.site-logo .logo-monogram { width: 100%; height: auto; color: var(--ink); }
.site-logo .logo-monogram path { fill: currentColor; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav__list {
  display: flex;
  gap: 28px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.site-nav__item a {
  position: relative;
  text-transform: uppercase;
}
/* On the index the PROJECTS / OBJECTS toggles appear, centred in the
   header (the header is fixed, so it's their containing block) while
   WORK stays on the right, underlined. */
.site-nav__item--index { display: none; gap: 14px; }
body.overlay-index .site-nav__item--index {
  display: flex;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

/* Each toggle is a radio-style mark from Tarnac's own glyph set: filled
   when its category is lit, empty and blurred when it isn't. */
/* Fixed width: the two glyphs differ slightly, which would nudge the
   label sideways on every toggle. */
.site-nav__word::before {
  content: '\25CF';
  display: inline-block;
  width: 1.1em;
}
.site-nav__word.is-off::before { content: '\25CB'; }

.site-nav__label {
  display: inline-block;
  transition: filter var(--t-med) var(--ease);
}
.site-nav__word.is-off .site-nav__label { filter: blur(1px); }

/* Touch screens keep :hover on the last tapped element, so the global
   link fade would leave a just-selected word gray, and the un-blur
   would leave a just-deselected one sharp. The circle and blur already
   show the state, so the toggles skip the fade, and un-blur only where
   hover is real. */
.site-nav__word:hover { opacity: 1; }
@media (hover: hover) {
  .site-nav__word.is-off:hover .site-nav__label { filter: none; }
}

/* The index slot marks its state with the circles instead, and holds
   two links — neither should get the underline. */
.site-nav__item:not(.site-nav__item--index).is-active a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
}

.site-nav__toggle {
  display: none;
  width: 28px;
  height: 22px;
  position: relative;
}
.site-nav__toggle span {
  position: absolute;
  left: 4px; right: 4px;
  height: 1.5px;
  background: currentColor;
}
.site-nav__toggle span:nth-child(1) { top: 6px; }
.site-nav__toggle span:nth-child(2) { bottom: 6px; }

/* Two hairlines are a small thing to hit with a thumb, so the button
   catches taps well outside them — 54x46, comfortably past the 44px
   touch target — without moving the lines themselves. */
.site-nav__toggle::after {
  content: '';
  position: absolute;
  inset: -12px -10px;
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 12px var(--frame) 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: #000;
}
.site-footer a { color: #000; }

/* Footer text only appears on the About view. */
.site-footer { display: none; }
body.overlay-about .site-footer { display: block; }

/* Rule above the footer on detail pages only. */
.page--project .site-footer,
.page--object .site-footer {
  margin: 0 var(--frame);
  padding: 40px 0 32px;
  border-top: 1px solid #000;
}

/* Home shell (/, /projects, /objects, /about) pins the footer to the
   viewport bottom and lifts it above the overlay's blur. */
.is-home .site-footer {
  position: fixed;
  inset: auto 0 0 0;
  /* Above the overlay (z40) so the bar isn't hidden behind the blur. */
  z-index: 60;
  pointer-events: none;
}
.is-home .site-footer * { pointer-events: auto; }

/* Home and About fit in the viewport — no document scroll. /projects
   keeps its own overlay scrolling. */
body.is-home {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.contact-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 40px;
}

.contact-list li {
  display: inline-flex;
  gap: 6px;
}
.contact-list__key { color: inherit; }

/* ---------- Main ---------- */
.site-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (max-width: 720px) {
  .site-header { padding: 18px var(--frame-sm); }
  .site-logo { width: 40px; }

  .site-nav__list { display: none; }
  /* The burger menu keeps the toggles in line, in place of WORK. */
  body.overlay-index .site-nav__item--work { display: none; }
  body.overlay-index .site-nav__item--index { position: static; transform: none; }
  .site-nav__toggle { display: block; width: 34px; }
  .site-nav__toggle span { left: 0; right: 0; }

  body.is-nav-open .site-nav__list {
    display: flex;
    position: fixed;
    inset: 0;
    background: var(--bg);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    font-size: 18px;
    z-index: 40;
  }

  /* Keep the toggle above the open menu and morph it into an X so it
     stays available as a close / back-to-page control. */
  body.is-nav-open .site-nav__toggle { position: relative; z-index: 50; }
  body.is-nav-open .site-nav__toggle span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  body.is-nav-open .site-nav__toggle span:nth-child(2) {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }

  .contact-list { gap: 6px; flex-direction: column; align-items: center; }

  /* On a phone the About text is taller than the screen, so its contact
     lines ride at the end of the scroll (see about.css) rather than in
     this fixed bar on top of them. */
  body.overlay-about .site-footer { display: none; }
}