/* HowFucked shared navigation. Project-owned roles; no foreign brand assets. */
:root{
  --hf-nav-height:44px;
  --hf-nav-gap:24px;
  --hf-brand-gap:48px;
  --hf-brand-mark:44px;
  --hf-brand-label:12px;
  --hf-nav-row-gap:16px;
  --hf-nav-padding:16px;
  --hf-nav-font-size:11px;
  --hf-nav-tracking:.08em;
  --hf-nav-led-height:2px;
  --hf-nav-led-inset:5px;
  --hf-nav-led-segment:7px;
  --hf-nav-led-gap:3px;
  --hf-nav-led-rest:rgb(79 193 220 / .32);
  --hf-nav-led-active:var(--hf-signal);
  --hf-nav-boundary:var(--hf-line-strong);
}
.hf-header{display:flex;align-items:center;flex-wrap:wrap;column-gap:var(--hf-brand-gap);row-gap:var(--hf-nav-row-gap);padding-block:var(--sp-6)}
.hf-nav-row{display:flex;align-items:center;justify-content:space-between;gap:var(--hf-nav-gap);width:100%}
.hf-page-nav,.hf-account-nav{display:flex;align-items:center;gap:var(--hf-nav-gap);flex-wrap:wrap}
.hf-page-nav a,.hf-account-nav a,.hf-account-nav button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--hf-nav-height);font-family:var(--hf-hud);font-size:var(--hf-nav-font-size);letter-spacing:var(--hf-nav-tracking);text-transform:uppercase;color:var(--hf-muted);transition:color var(--t-fast),border-color var(--t-fast)}
.hf-page-nav a:hover,.hf-page-nav a:focus-visible,.hf-account-nav a:hover,.hf-account-nav a:focus-visible{color:var(--hf-ink)}
.hf-page-nav a[aria-current=page]{color:var(--hf-signal)}
.hf-account-nav{gap:var(--sp-2);flex-wrap:nowrap;margin-left:auto}
.hf-account-link{position:relative;border:var(--bw) solid var(--hf-nav-boundary);padding:var(--sp-2) var(--hf-nav-padding);padding-bottom:var(--sp-3);background:var(--hf-surface);isolation:isolate}
.hf-account-link::after{content:'';position:absolute;left:var(--hf-nav-led-inset);right:var(--hf-nav-led-inset);bottom:var(--hf-nav-led-inset);height:var(--hf-nav-led-height);background:repeating-linear-gradient(90deg,var(--hf-nav-led-rest) 0 var(--hf-nav-led-segment),transparent var(--hf-nav-led-segment) calc(var(--hf-nav-led-segment) + var(--hf-nav-led-gap)));pointer-events:none}
.hf-account-link:hover,.hf-account-link:focus-visible{border-color:var(--hf-signal)}
.hf-account-link:hover::after,.hf-account-link:focus-visible::after{--hf-nav-led-rest:var(--hf-nav-led-active)}
.hf-account-nav form{margin:0}
.hf-unavailable{padding-block:var(--sp-section-lg);max-width:680px;min-height:50svh}
.hf-unavailable h1{font-size:clamp(32px,5vw,56px);max-width:none}
.hf-unavailable p{color:var(--hf-muted)}
@media(min-width:1200px){.hf-header{flex-wrap:nowrap}.hf-nav-row{width:auto;flex:1}.hf-page-nav{margin-left:0}.hf-account-nav{margin-left:auto}}
@media(max-width:767px){:root{--hf-nav-font-size:12px;--hf-nav-gap:16px}.hf-nav-row{align-items:flex-start;flex-wrap:wrap}.hf-page-nav{gap:0 var(--hf-nav-gap)}.hf-account-nav{margin-left:0}.hf-header{padding-block:var(--sp-4)}}
@media(max-width:639px){.hf-page-nav{width:100%;justify-content:space-between;column-gap:var(--sp-2)}.hf-page-nav a{font-size:10px}.hf-account-nav{width:100%}.hf-account-link{flex:1}.hf-header .wordmark{font-size:11px}}

/* Protected symbol paths unchanged; compact label is outside the artwork. */
.hf-header .brand{flex-direction:column;justify-content:center;gap:var(--sp-1);flex:none}
.hf-header .mark{width:var(--hf-brand-mark);height:var(--hf-brand-mark)}
.hf-header .wordmark{font-size:var(--hf-brand-label);text-transform:none;letter-spacing:var(--ls-label);white-space:nowrap}
.hf-try{padding-block:var(--sp-section);max-width:840px}
.hf-try h1{font-size:clamp(36px,6vw,64px)}
.hf-try .intake{margin-block:var(--sp-6)}
.hf-try .try-result{border-left:var(--bw) solid var(--hf-signal);padding:var(--sp-5);background:var(--hf-surface);margin-block:var(--sp-6)}
.hf-try .try-links{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.hf-try .try-links a{min-height:var(--hf-target);display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:.25em}
html.no-js .hf-try form{display:none}