/* r7.5 (Moreno 19 Oct): a custom nav bar, a door-frame button with a sill, and one continuous underline on the hero text link */

/* ---- 1 · nav: the menu reads as a dimension chain (like the section drawing), Contact as a small door frame ---- */
.site-head nav,.hero header nav{position:relative;align-items:center;gap:calc(34*var(--hu))}
.site-head nav a,.hero header nav a{position:relative;letter-spacing:.06em;padding:calc(6*var(--hu)) 0}
.site-head nav .pl,.hero header nav .pl{display:none}                      /* the pencil loop stays on text links, not in the menu */
/* each room on the chain: a hairline with end ticks spanning the link and half the gap on both sides */
.site-head nav a:not(.nav-cta)::after,.hero header nav a:not(.nav-cta)::after{content:"";position:absolute;left:calc(-17*var(--hu));right:calc(-17*var(--hu));bottom:calc(-10*var(--hu));height:calc(9*var(--hu));pointer-events:none;
  background:linear-gradient(var(--brass),var(--brass)) 0 50%/100% 1px no-repeat,linear-gradient(var(--brass),var(--brass)) 0 0/1px 100% no-repeat,linear-gradient(var(--brass),var(--brass)) 100% 0/1px 100% no-repeat;
  opacity:.55;transition:opacity .25s ease}
/* the measured room: the current page (and hover/focus) gets a heavier line under the word only */
.site-head nav a:not(.nav-cta)::before,.hero header nav a:not(.nav-cta)::before{content:"";position:absolute;left:0;right:0;bottom:calc(-6*var(--hu));height:2px;background:var(--brass);transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.site-head nav a:not(.nav-cta):is(:hover,:focus-visible,[aria-current])::before,.hero header nav a:not(.nav-cta):is(:hover,:focus-visible)::before{transform:scaleX(1)}
.site-head nav a:not(.nav-cta):is(:hover,:focus-visible,[aria-current])::after,.hero header nav a:not(.nav-cta):is(:hover,:focus-visible)::after{opacity:.9}
.site-head nav a[aria-current]{color:var(--ink)}
.site-head nav a:focus-visible,.hero header nav a:focus-visible{outline:none}
/* Contact: a small door frame (jambs + lintel) standing on a sill */
.site-head nav a.nav-cta,.hero header nav a.nav-cta{margin-left:calc(10*var(--hu));padding:calc(11*var(--hu)) calc(18*var(--hu)) calc(10*var(--hu));border:1px solid var(--brass);border-bottom:0;color:var(--ink)}
.site-head nav a.nav-cta::after,.hero header nav a.nav-cta::after{content:"";position:absolute;left:calc(-7*var(--hu));right:calc(-7*var(--hu));bottom:-3px;height:3px;background:var(--brass);transition:left .3s ease,right .3s ease}
.site-head nav a.nav-cta:is(:hover,:focus-visible,[aria-current])::after,.hero header nav a.nav-cta:is(:hover,:focus-visible)::after{left:calc(-11*var(--hu));right:calc(-11*var(--hu))}
.site-head nav a.nav-cta:focus-visible,.hero header nav a.nav-cta:focus-visible{outline:1px solid var(--brass);outline-offset:4px}

/* ---- 2 · the solid button: a door frame with a sill (dorpel) that stands out below it ---- */
.btn.solid{position:relative;border-color:transparent;--frame:rgba(201,164,106,.7);--sill:#c9a46a;margin-bottom:4px}
.btn.solid::before{content:"";position:absolute;inset:5px 5px 0;border:1px solid var(--frame);border-bottom:0;pointer-events:none;transition:inset .3s ease}
.btn.solid::after{content:"";position:absolute;left:-8px;right:-8px;bottom:-4px;height:4px;background:var(--sill);pointer-events:none;transition:left .3s ease,right .3s ease}
.btn.solid:is(:hover,:focus-visible)::after{left:-12px;right:-12px}
.btn.solid:is(:hover,:focus-visible)::before{inset:4px 4px 0}
.hero .btn.solid{--frame:rgba(125,95,49,.6);--sill:#c9a46a;border-color:transparent}
.hero .btn.solid:hover{background:#fff;border-color:transparent;color:#231f1b}   /* site.css turned the cream hero button dark brown under its dark text on hover */
.on-oak .btn.solid{--frame:rgba(125,95,49,.6)}

/* ---- 3 · hero text link: one continuous underline under the words and the arrow (the arrow broke the text-decoration) ---- */
.hero .u-tl{text-decoration:none;background:linear-gradient(var(--brass),var(--brass)) no-repeat 0 calc(50% + .95em)/100% 1px;transition:background-size .25s ease}
.hero .u-tl::after{text-decoration:none}
.hero .u-tl:hover{background-image:linear-gradient(var(--ink),var(--ink))}

/* ---- 4 · a ground behind the hero nav (tools/navstrip.mjs 19 Oct: with the cloth film the light linen passes behind the links at
   2.4-2.7 s, 4.29:1 for 14 px text); held dark through the nav band, then fading. n1 has its own copy, n2 has the solid lintel. ---- */
:root:not(.opt-n2) .hero header::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(170*var(--hu));z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(20,17,14,.5) 0,rgba(20,17,14,.5) calc(96*var(--hu)),rgba(20,17,14,0) calc(170*var(--hu)))}