/* Portfolio header: the same layout and sizes as the hausofmjd.com header, in the portfolio's dark colours.
   Loaded into the built /portfolio/ page at build time. Martha's file is never edited. */
:root{--hm-gutter:clamp(1.15rem,3.4vw,3.25rem)}
@media (min-width:1536px){:root{--hm-gutter:clamp(3.25rem,5vw,6rem)}}
@media (min-width:1920px){:root{--hm-gutter:96px}}

header.top nav:not([data-hm-nav]){visibility:hidden}
header.top .top-in > *{min-width:0}
header.top .top-in{max-width:1560px;margin-left:auto;margin-right:auto;padding:0 var(--hm-gutter);display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:2rem;height:clamp(62px,6vw,74px)}
header.top .top-in .wordmark{font-family:"Archivo","Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;font-stretch:125%;font-size:clamp(13px,3.9vw,17px);letter-spacing:.01em;line-height:1.6;text-transform:uppercase;white-space:nowrap;text-decoration:none;color:var(--ink);margin:0}
header.top .top-in nav[data-hm-nav]{display:flex;gap:clamp(.9rem,1.5vw,1.75rem);margin-left:auto}
header.top .top-in nav[data-hm-nav] a{position:relative;font-family:"Roboto Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-weight:400;font-size:.6875rem;line-height:1.6;letter-spacing:.16em;text-transform:uppercase;color:rgba(236,236,232,.7);padding:.4rem 0;text-decoration:none}
header.top .top-in nav[data-hm-nav] a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.19,1,.22,1)}
header.top .top-in nav[data-hm-nav] a:hover,header.top .top-in nav[data-hm-nav] a[aria-current=page]{color:var(--ink)}
header.top .top-in nav[data-hm-nav] a:hover::after,header.top .top-in nav[data-hm-nav] a[aria-current=page]::after{transform:scaleX(1)}
header.top .top-in .hm-book{margin-left:clamp(.75rem,2vw,2rem);background:var(--ink);color:var(--paper);font-family:"Roboto Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-weight:400;font-size:.6875rem;line-height:1.6;letter-spacing:.18em;text-transform:uppercase;padding:1rem 1.5rem;white-space:nowrap;text-decoration:none;border:0}
header.top .top-in .hm-toggle{display:none;position:relative;width:48px;height:48px;padding:0;margin:0;border:1px solid rgba(236,236,232,.4);background:transparent;cursor:pointer;flex:0 0 auto;border-radius:0}
header.top .top-in .hm-toggle span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--ink)}
header.top .top-in .hm-toggle span:nth-child(1){top:17px}
header.top .top-in .hm-toggle span:nth-child(2){top:23px}
header.top .top-in .hm-toggle span:nth-child(3){top:29px}
@media (hover:none){header.top .top-in nav[data-hm-nav] a{display:inline-flex;align-items:center;min-height:44px}}
@media (max-width:1080px){
  header.top .top-in nav[data-hm-nav]{display:none}
  header.top .top-in .hm-book{margin-left:auto}
  header.top .top-in .hm-toggle{display:block}
}
@media (max-width:1000px){
  header.top .top-in .wordmark{display:inline-flex;align-items:center;min-height:44px}
  header.top .top-in .hm-book{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:480px){
  header.top .top-in{gap:.7rem}
  header.top .top-in .hm-book{padding:.85rem .8rem;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){header.top .top-in nav[data-hm-nav] a::after{transition:none}}

/* Mobile menu, mirroring the site's menu in dark */
.hm-menu{position:fixed;inset:0;z-index:100;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;background:var(--paper);color:var(--ink);padding:16px 20px calc(20px + env(safe-area-inset-bottom,0px));flex-direction:column;overflow-y:auto}
.hm-menu[open]{display:flex}
.hm-menu::backdrop{background:transparent}
.hm-menu-top{display:flex;justify-content:space-between;align-items:center;height:56px;flex:none}
.hm-menu-logo{font-family:"Archivo","Arial Black",sans-serif;font-weight:900;font-stretch:125%;font-size:18px;text-transform:uppercase;text-decoration:none;color:inherit}
.hm-close{position:relative;width:48px;height:48px;padding:0;border:1px solid rgba(236,236,232,.4);background:transparent;cursor:pointer;border-radius:0}
.hm-close span{position:absolute;left:13px;right:13px;top:23px;height:1.5px;background:var(--ink)}
.hm-close span:nth-child(1){transform:rotate(45deg)}
.hm-close span:nth-child(2){transform:rotate(-45deg)}
.hm-menu nav{margin-block:auto}
.hm-menu ul{list-style:none;margin:0;padding:0;border-bottom:1px solid rgba(236,236,232,.2)}
.hm-menu li{border-top:1px solid rgba(236,236,232,.2)}
.hm-menu nav a{display:block;font-family:"Archivo","Arial Black",sans-serif;font-weight:900;font-stretch:100%;font-size:clamp(2rem,10vw,3rem);line-height:1;letter-spacing:-.03em;word-spacing:.12em;text-transform:uppercase;padding:.39em 0;color:inherit;text-decoration:none}
.hm-menu-foot{display:grid;gap:14px;flex:none;padding-top:24px}
.hm-menu-cta{display:flex;justify-content:space-between;align-items:center;height:52px;padding:0 20px;background:var(--ink);color:var(--paper);font-family:"Roboto Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.hm-menu-mail{font-family:"Roboto Mono",ui-monospace,monospace;font-size:12px;text-transform:uppercase;color:rgba(236,236,232,.72);text-decoration:none}