/* Site chrome, shared by every page.
 *
 * Extracted from the homepage stylesheet so the inner pages get the same ruler
 * spine, masthead and footer without inheriting its base typography — that
 * would fight style.css, which still owns all the content classes on those
 * pages. Every selector here is namespaced (.ruler-spine, .site-header,
 * .brand-*, .course-backdrop, .site-footer), so the two stylesheets cannot
 * collide.
 *
 * Generated from kit.css. Change it there and re-extract, not here.
 */



.measure {
  width: min(100%, var(--measure));
  margin-inline: auto;
  padding-inline: var(--gutter);
}



.ruler-spine {
  position: fixed;
  z-index: 10;
  inset: 0 auto 0 0;
  width: var(--spine);
  overflow: hidden;
  border-right: 1px solid rgba(47, 40, 29, 0.17);
  background-color: var(--paper-deep);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(47, 40, 29, 0.25) 7px 8px),
    repeating-linear-gradient(to bottom, transparent 0 39px, rgba(47, 40, 29, 0.35) 39px 40px);
  background-size: 13px 8px, 23px 40px;
  background-repeat: repeat-y;
  background-position: right top;
}



.ruler-spine__unit {
  position: absolute;
  top: 18px;
  left: 11px;
  color: var(--graphite);
  font: 10px var(--mono);
}



.ruler-spine__labels {
  display: grid;
  gap: 26px;
  padding: 48px 18px 0 10px;
  color: var(--graphite);
  font: 11px var(--mono);
}



.site-header {
  position: sticky;
  z-index: 8;
  top: 0;
  border-bottom: 1px solid var(--rule);
  background: rgba(247, 243, 227, 0.93);
  backdrop-filter: blur(12px);
}



.site-header__inner {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}



.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}



.brand__logo {
  width: clamp(158px, 18vw, 214px);
  height: auto;
}



.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(13px, 2.2vw, 32px);
}



.site-nav__link,
.mono-label {
  font-family: var(--mono);
  font-size: clamp(10px, 1vw, 11.5px);
  font-weight: 400;
  letter-spacing: 0.115em;
  text-transform: uppercase;
}



.site-nav__link {
  color: var(--graphite);
  text-decoration: none;
  transition: color 160ms ease;
}



.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link[aria-current="location"] {
  color: var(--marker);
}



.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 32px 50px;
  color: var(--graphite);
  font-size: 15px;
}



.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}



.site-footer__links a {
  text-decoration: none;
}

@media (max-width: 640px) {
  
  
    .ruler-spine__unit {
      left: 5px;
    }
  
  
    .ruler-spine__labels {
      padding-left: 5px;
    }
  
  
    .site-header__inner {
      min-height: 73px;
    }
  
  
    .brand__logo {
      width: 157px;
    }
  
  
    .site-nav__link:not(.site-nav__link--priority) {
      display: none;
    }
  
  
    .site-footer {
      display: grid;
      gap: 12px;
    }
}




/* ---------------------------------------------------------------------------
   Course backdrop
   ---------------------------------------------------------------------------
   Carried over from the live site. The real course render sits fixed behind
   everything and is washed back until it reads as texture, so scrolling feels
   like moving over the course instead of past a decorative panel. */
.course-backdrop {
  position: fixed;
  inset: 0 0 0 var(--spine);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}



.course-backdrop__art {
  position: absolute;
  top: 50%;
  right: -6%;
  width: min(60vw, 900px);
  transform: translateY(-50%) rotate(-4deg);
  opacity: 0.13;
}



.course-backdrop__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--paper) 0%,
    rgba(247, 243, 227, 0.94) 46%,
    rgba(247, 243, 227, 0.6) 100%
  );
}




/* The maker's mark, sitting under the wordmark rather than beside the headline:
   it is attribution for the name above it, and it links to the parent brand's
   own shop. Quiet at rest, underlined on hover, so it reads as a credit rather
   than as navigation. */
.brand-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}



.brand-byline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--graphite);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}



.brand-byline__mark {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}



.brand-byline a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}



.brand-byline a:hover,
.brand-byline a:focus-visible {
  border-bottom-color: var(--ink);
}