/* Shared studio shell. The Harbor identity and the interior page layouts stay intact. */
@font-face { font-family:Manrope; src:url('../assets/fonts/manrope.ttf') format('truetype'); font-weight:200 800; font-display:swap; }
.brand-wordmark { font-family:Manrope, 'DM Sans', sans-serif; font-weight:650; letter-spacing:-.027em; }
.brand-wordmark small { font-family:'DM Sans', sans-serif; font-weight:400; letter-spacing:.33em; margin-top:7px; }
:root { --studio-header-height:104px; --studio-gutter:clamp(24px, 4.5vw, 80px); }
html { scroll-padding-top:calc(var(--studio-header-height) + 20px); }
body:not([data-page="home"]) { padding-top:var(--studio-header-height); }
/* The root scroll padding already accounts for the fixed header. */
.services-page section[id], .guides-page .guide-section { scroll-margin-top:0; }
body.studio-menu-open { overflow:hidden; }
.site-header.wrap {
  position:fixed; top:0; left:0; z-index:50; width:100%; max-width:none;
  min-height:var(--studio-header-height); padding:20px var(--studio-gutter); margin:0;
  border-bottom:1px solid transparent; transition:background .25s, border-color .25s;
}
.site-header.is-scrolled,
body:not([data-page="home"]) .site-header { background:var(--paper); border-bottom-color:var(--line); }
.site-header .brand { flex-shrink:0; }
.site-header .brand-symbol { width:40px; height:44px; }
.site-header .brand-wordmark { font-size:26px; }
.studio-header-actions { display:flex; align-items:center; gap:36px; }
.studio-quick-nav { display:flex; align-items:center; gap:30px; }
.studio-quick-nav > a {
  display:inline-flex; align-items:center; gap:12px; min-height:44px;
  font-size:13px; line-height:1.3; text-decoration:none;
}
.studio-quick-nav > a[aria-current="page"] { text-decoration:underline; text-underline-offset:7px; }
.studio-quick-nav > a:hover { color:var(--brand); }
.studio-quick-nav > a > span { font-size:19px; }
.site-header .menu-toggle {
  display:inline-flex; flex-shrink:0; gap:14px; min-width:76px; min-height:44px;
  padding:8px 0 8px 18px; border:0; border-left:1px solid var(--line); font-size:12px;
}
.site-header .menu-toggle[hidden] { display:none; }
.studio-shell-ready .studio-no-js-book { display:none; }
.site-header .menu-toggle:hover .menu-icon { transform:scaleX(.78); }
.site-header .menu-icon { transition:transform .2s; }
.skip { z-index:70; }

/* A native modal supplies focus containment and makes the page behind it inert. */
.studio-menu {
  position:fixed; inset:0; width:100%; max-width:none; height:100vh; height:100dvh;
  max-height:none; margin:0; padding:0; border:0; background:var(--paper); color:var(--ink);
  overflow-y:auto; overscroll-behavior:contain;
}
.studio-menu:not([open]) { display:none; }
.studio-menu::backdrop { background:var(--paper); }
.studio-menu-frame {
  min-height:100%; display:flex; flex-direction:column; padding-inline:var(--studio-gutter);
  background-image:linear-gradient(to right, transparent calc(66.666% - .5px), var(--line) calc(66.666% - .5px), var(--line) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}
.studio-menu-top {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:var(--studio-header-height); border-bottom:1px solid var(--line);
}
.studio-menu-top .brand-symbol { width:40px; height:44px; }
.studio-menu-top .brand-wordmark { font-size:26px; }
.studio-menu-close {
  display:inline-flex; align-items:center; justify-content:center; gap:16px; flex:none;
  min-width:86px; min-height:44px; padding:8px 0 8px 8px; border:0; background:transparent;
  font-size:12px;
}
.studio-menu-close svg { transition:transform .25s; }
.studio-menu-close:hover svg { transform:rotate(90deg); }
.studio-menu-body {
  display:grid; grid-template-columns:2fr 1fr; align-items:center; gap:6vw;
  flex:1; padding:clamp(30px, 6vh, 70px) 0;
}
.studio-menu .site-nav {
  display:flex; flex-direction:column; align-items:stretch; gap:0; position:static;
  margin:0; padding:0; border:0; background:transparent; box-shadow:none;
}
.studio-menu .site-nav > a {
  display:grid; grid-template-columns:28px minmax(0, 1fr) 36px; align-items:baseline;
  column-gap:25px; min-height:70px; padding:9px 10px 11px 0; overflow:visible;
  border-bottom:1px solid var(--line); text-decoration:none;
}
.studio-menu .site-nav > a:first-child { border-top:1px solid var(--line); }
.studio-menu .site-nav > a[aria-current="page"] { color:var(--brand); text-decoration:none; }
.studio-menu-number { font-size:12px; line-height:1; letter-spacing:.04em; }
.studio-menu-label {
  display:block; font-family:inherit; font-weight:400;
  font-size:clamp(56px, 7.3vw, 106px); line-height:1.03; letter-spacing:-.06em;
  transition:transform .25s;
}
.studio-menu-arrow { align-self:center; font-size:33px; line-height:1; transition:transform .25s; }
.studio-menu .site-nav > a:hover .studio-menu-label { transform:translateX(8px); }
.studio-menu .site-nav > a:hover .studio-menu-arrow { transform:translate(3px, -3px); }
.studio-menu .site-nav > a:focus-visible { outline-offset:3px; }
.studio-menu-aside { padding:30px 0 30px 20px; }
.studio-menu-note { display:block; margin-bottom:32px; font-size:12px; }
.studio-menu-aside > p:not(.studio-menu-detail) {
  font-size:clamp(26px, 2.75vw, 40px); letter-spacing:-.035em; line-height:1.25;
}
.studio-menu-aside em { display:inline-block; }
.studio-menu-book {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:54px; max-width:340px; margin-top:34px; padding:12px 0;
  border-bottom:1px solid var(--ink); font-size:14px; text-decoration:none;
}
.studio-menu-book > span { font-size:24px; }
.studio-menu-book:hover { color:var(--brand); }
.studio-menu-aside .studio-menu-detail { margin:20px 0 0; font-size:13px; line-height:1.65; color:var(--muted); }
.studio-menu-bottom {
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  min-height:78px; padding:16px 0; border-top:1px solid var(--line); font-size:12px;
}
.studio-menu-bottom > a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.studio-menu-bottom > a:hover { text-decoration:underline; }

/* The wipe never intercepts input unless a real document navigation is underway. */
.studio-route-wipe {
  position:fixed; inset:0; z-index:90; display:grid; grid-template-columns:repeat(5,1fr);
  pointer-events:none; visibility:hidden; overflow:hidden;
}
.studio-route-wipe.is-active { visibility:visible; pointer-events:auto; }
.route-strip { display:block; height:100%; background:var(--paper); border-right:1px solid var(--line); transform:translateY(100%); }
.site-footer { padding-block:48px 24px; }
.site-footer .brand-symbol { width:40px; height:44px; }
.site-footer .brand-wordmark { font-size:26px; }
.site-footer .footer-links { gap:12px 30px; }
.site-footer .footer-links > a { text-decoration:none; }
.site-footer .footer-links > a:hover { text-decoration:underline; }
.site-footer .footer-bottom { margin-top:36px; }

@media (min-width:1600px) {
  .studio-menu-body { grid-template-columns:2fr 1fr; gap:10vw; }
}
@media (min-width:801px) {
  .guides-page .guide-toc {
    top:calc(var(--studio-header-height) + 24px);
    max-height:calc(100dvh - var(--studio-header-height) - 48px); overflow-y:auto;
  }
}
@media (max-width:1000px) {
  .studio-header-actions { gap:24px; }
  .studio-quick-nav { gap:22px; }
  .studio-menu-body { gap:4vw; }
  .studio-menu .site-nav > a { grid-template-columns:24px minmax(0, 1fr) 28px; column-gap:16px; }
  .studio-menu-aside { padding-left:5px; }
  .studio-menu-aside > p:not(.studio-menu-detail) { font-size:28px; }
  .studio-menu-book { font-size:13px; }
}
@media (max-width:720px) {
  :root { --studio-header-height:82px; --studio-gutter:22px; }
  .site-header.wrap { padding-block:14px; gap:14px; }
  .site-header .brand, .studio-menu-top .brand { gap:9px; }
  .site-header .brand-symbol, .studio-menu-top .brand-symbol { width:34px; height:38px; }
  .site-header .brand-wordmark, .studio-menu-top .brand-wordmark { font-size:23px; }
  .site-header .brand-wordmark small, .studio-menu-top .brand-wordmark small { font-size:8px; margin-top:7px; }
  .studio-header-actions { gap:0; }
  .studio-shell-ready .studio-quick-nav { display:none; }
  .site-header .menu-toggle { min-width:72px; gap:11px; padding-left:12px; }
  .studio-menu-frame { background-image:none; }
  .studio-menu-close { gap:10px; min-width:72px; }
  .studio-menu-body { grid-template-columns:1fr; align-content:center; gap:28px; padding-block:34px 24px; }
  .studio-menu .site-nav > a { grid-template-columns:24px minmax(0, 1fr) 28px; padding:12px 4px 14px 0; gap:13px; }
  .studio-menu-label { font-size:clamp(46px, 13.5vw, 80px); line-height:1.08; }
  .studio-menu-arrow { font-size:27px; }
  .studio-menu-aside { padding:0 0 0 37px; }
  .studio-menu-note, .studio-menu-aside > p { display:none; }
  .studio-menu-book { margin:0; max-width:none; min-height:50px; font-size:14px; }
  .studio-menu-bottom { flex-wrap:wrap; min-height:76px; padding-block:14px; gap:0 16px; font-size:12px; }
  .studio-menu-bottom > span { flex-basis:100%; }
  .studio-menu-bottom > a { min-height:40px; }
  .site-footer .footer-links { gap:8px 24px; }
  .site-footer .footer-bottom { flex-direction:row; flex-wrap:wrap; gap:8px 22px; }
  /* Ordinary anchors stay visible if JavaScript is unavailable. */
  html:not(.studio-shell-ready) .site-header { position:relative; flex-wrap:wrap; background:var(--paper); }
  html:not(.studio-shell-ready) .studio-header-actions { width:100%; }
  html:not(.studio-shell-ready) .studio-quick-nav { flex-wrap:wrap; gap:0 22px; }
  html:not(.studio-shell-ready) body:not([data-page="home"]) { padding-top:0; }
}
@media (max-height:620px) and (min-width:721px) {
  .studio-menu-body { padding-block:24px; }
  .studio-menu-label { font-size:58px; }
  .studio-menu .site-nav > a { padding-block:8px; }
  .studio-menu-note { margin-bottom:18px; }
  .studio-menu-book { margin-top:20px; }
}
@media (prefers-reduced-motion:reduce) {
  .studio-route-wipe { display:none; }
  .studio-menu-label, .studio-menu-arrow, .site-header .menu-icon, .studio-menu-close svg { transition:none; }
  .studio-menu .site-nav > a:hover .studio-menu-label,
  .studio-menu .site-nav > a:hover .studio-menu-arrow { transform:none; }
}