@import url('./ui-tweaks-20260818.css?v=20260819-1');

/* NINEWORKS navigation / archive refinement — 2026-08-17 */

/* Shared selector strips align with the same 1440px content rhythm instead of spanning the viewport. */
.category-nav{width:min(calc(100% - 48px),var(--container,1440px))!important;max-width:var(--container,1440px)!important;margin-left:auto!important;margin-right:auto!important;border-left:1px solid var(--line)!important;border-right:1px solid var(--line)!important}
.category-nav>button,.category-nav>a{min-width:0}

/* Keep page controls in the document flow so titles and cards are never covered. */
.page-project main,
.portfolio-page main{overflow:visible!important}
.page-project .project-category-nav{position:relative!important;top:auto!important;z-index:2!important}
body.portfolio-page .category-nav.portfolio-filter{position:relative!important;top:auto!important;z-index:2!important;display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;width:min(calc(100% - 48px),var(--container,1440px))!important;max-width:var(--container,1440px)!important;margin:0 auto!important;padding:0!important;overflow:visible!important;background:#fff!important;backdrop-filter:none!important;box-shadow:none!important}
body.portfolio-page .category-nav.portfolio-filter button{flex:none!important;width:100%!important;min-width:0!important;min-height:50px!important;padding:0 10px!important;border:0!important;border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;background:#fff!important;white-space:nowrap!important}
body.portfolio-page .category-nav.portfolio-filter button:first-child{border-left:0!important}
body.portfolio-page .category-nav.portfolio-filter button.is-active{color:#111!important;background:#f2f2ef!important}
body.portfolio-page .portfolio-index-head{position:relative!important;z-index:1!important}

/* Desktop information architecture */
.site-header{overflow:visible!important}
html body .site-header>a.site-logo,
html body .site-header .site-logo{
  display:inline-flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  background:none!important;
  color:#111!important;
  font-size:32px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:-.055em!important;
  text-indent:0!important;
  white-space:nowrap!important;
  transform:none!important;
}
.site-primary-nav{overflow:visible!important;gap:clamp(14px,1.35vw,23px)!important}
.site-primary-nav>.site-nav-item{position:relative;display:flex;height:var(--header-h);align-items:center}
.site-primary-nav>.site-nav-item>a,
.site-primary-nav>a{display:inline-flex;align-items:center;gap:6px}
.site-nav-caret{font-size:9px;font-weight:500;transform:translateY(-1px)}
.site-nav-dropdown{position:absolute;z-index:420;top:calc(100% - 9px);left:50%;min-width:238px;padding:8px;border:1px solid #deded9;background:rgba(255,255,255,.985);box-shadow:0 18px 44px rgba(0,0,0,.08);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,8px);transition:opacity .18s ease,transform .22s var(--ease),visibility 0s linear .22s}
.site-nav-item:hover>.site-nav-dropdown,
.site-nav-item:focus-within>.site-nav-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}
.site-nav-dropdown a{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;min-height:38px!important;padding:8px 10px!important;border-bottom:1px solid #eeeeea!important;color:#555!important;font-size:10.5px!important;font-weight:500!important;letter-spacing:.025em!important;line-height:1.35!important;white-space:nowrap!important}
.site-nav-dropdown a:last-child{border-bottom:0!important}
.site-nav-dropdown a:hover,
.site-nav-dropdown a:focus-visible{color:#111!important;background:#f5f5f2!important}
.site-nav-dropdown small{color:#999;font-size:8.5px;font-weight:500;letter-spacing:.04em}
.site-primary-nav .is-current{color:#111!important}
.site-primary-nav .is-current::after{content:'';position:absolute;right:0;bottom:-7px;left:0;height:1px;background:#111}
.site-primary-nav>.site-nav-item>a{position:relative}

/* Portfolio cards: consistent two-column editorial rhythm. */
.portfolio-page .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(42px,4vw,64px) clamp(18px,1.8vw,28px)!important}
.portfolio-page .portfolio-card__media{aspect-ratio:16/10!important}
.home-clarity .nw-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:42px 22px!important}

/* Branding projects also stay on a strict two-column rhythm. */
.page-project .project-grid{grid-template-columns:repeat(12,minmax(0,1fr))!important}
.page-project .project-card,
.page-project .project-card--wide,
.page-project .project-card--third{grid-column:span 6!important}
.page-project .project-random-head{margin-top:0}

/* Mobile overlay gets grouped submenus instead of forcing every link to headline size. */
.menu-nav__group{margin:0 0 18px}
.menu-nav__main{display:block!important}
.menu-nav__sub{display:grid;gap:0;margin:10px 0 18px;padding-left:2px}
.menu-nav__sub a{margin:0!important;padding:5px 0!important;color:#9d9d9d!important;font-size:14px!important;font-weight:400!important;line-height:1.45!important;letter-spacing:-.02em!important}
.menu-nav__sub a:hover,.menu-nav__sub a:focus-visible{color:#fff!important;transform:translateX(6px)!important}

@media(max-width:1180px){
  html body .site-header>a.site-logo,
  html body .site-header .site-logo{font-size:30px!important}
  .site-primary-nav{gap:13px!important}
  .site-primary-nav a{font-size:10.7px!important}
  .site-nav-dropdown a{font-size:10px!important}
}

@media(max-width:1100px){
  body.portfolio-page .category-nav.portfolio-filter{display:flex!important;grid-template-columns:none!important;width:min(calc(100% - 40px),var(--container,1440px))!important;overflow-x:auto!important;scrollbar-width:none!important}
  body.portfolio-page .category-nav.portfolio-filter::-webkit-scrollbar{display:none!important}
  body.portfolio-page .category-nav.portfolio-filter button{flex:0 0 auto!important;width:auto!important;min-width:118px!important;padding:0 16px!important}
}

@media(max-width:980px){
  html body .site-header>a.site-logo,
  html body .site-header .site-logo{font-size:28px!important}
  .category-nav{width:min(calc(100% - 40px),var(--container,1440px))!important}
  .portfolio-page .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .home-clarity .nw-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:680px){
  html body .site-header>a.site-logo,
  html body .site-header .site-logo{font-size:26px!important}
  .category-nav{width:calc(100% - 36px)!important;overflow-x:auto!important;scrollbar-width:none!important}
  .category-nav::-webkit-scrollbar{display:none!important}
  .portfolio-page .portfolio-grid,
  .home-clarity .nw-work-grid{grid-template-columns:1fr!important;gap:38px!important}
  .page-project .project-card,
  .page-project .project-card--wide,
  .page-project .project-card--third{grid-column:1/-1!important}
  body.portfolio-page .category-nav.portfolio-filter{width:calc(100% - 36px)!important}
  body.portfolio-page .category-nav.portfolio-filter button{min-width:auto!important;padding:0 15px!important}
  .menu-nav__group{margin-bottom:14px}
  .menu-nav__sub{margin-top:7px;margin-bottom:15px}
  .menu-nav__sub a{font-size:13px!important}
}

/* Proposal pages are standalone client documents: hide the generic site footer/navigation block. */
body.proposal-page .site-footer,
body.proposal-page footer.site-footer{display:none!important}