/* Website identity across all three project pages.
   Home header is the source; project themes stay in page content. */
.case-body .case-header{
  height:81px;min-height:81px;padding:0 clamp(24px,3.6vw,64px);
  position:sticky;top:0;z-index:100;
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;
  gap:24px;
  background:#f2f0e9;color:#101010;
  border-bottom:1px solid rgba(0,0,0,.25);
}
.case-body .case-header .case-brand.identity{
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:12px;min-width:0;
  color:#101010;font-family:var(--cas-ui);font-weight:400;
  line-height:1;
}
.case-body .case-header .identity-main{
  display:block;color:#101010;
  font-family:var(--cas-ui);font-weight:900;
  font-size:20px;letter-spacing:-.035em;line-height:1;
  white-space:nowrap;
}
.case-body .case-header .identity-dot{color:#f05838}
.case-body .case-header .identity-small{
  display:block;color:#101010;font-family:var(--cas-ui);
  font-size:9px;line-height:1;font-weight:700;letter-spacing:.12em;
  white-space:nowrap;
}
.case-body .case-header .case-nav{
  display:flex;align-items:center;gap:clamp(18px,2.5vw,40px);
  width:auto;min-width:0;margin:0;
  color:#101010;font-family:var(--cas-ui);
  font-size:14px;font-weight:650;line-height:1.4;
}
.case-body .case-header .case-nav a{
  position:relative;display:inline-flex;align-items:center;
  padding:12px 0;border:0;text-decoration:none;
}
.case-body .case-header .case-nav a:after{
  content:"";position:absolute;bottom:4px;left:0;right:0;
  height:2px;background:currentColor;transform:scaleX(0);
  transform-origin:left;transition:transform .25s ease;
}
.case-body .case-header .case-nav a:is(:hover,:focus-visible):after{transform:scaleX(1)}
.case-body .case-header .case-menu-button{
  display:none;position:relative;flex:none;
  border:0;background:transparent;color:#101010;
  width:48px;height:44px;font-size:0;cursor:pointer
}
.case-body .case-header .case-menu-button:before,
.case-body .case-header .case-menu-button:after{
  content:"";position:absolute;left:10px;width:28px;height:2px;
  background:#101010;transform-origin:center;transition:transform .25s ease
}
.case-body .case-header .case-menu-button:before{top:18px}
.case-body .case-header .case-menu-button:after{top:26px}
.case-body .case-header .case-menu-button[aria-expanded="true"]:before{
  transform:translateY(4px) rotate(45deg)
}
.case-body .case-header .case-menu-button[aria-expanded="true"]:after{
  transform:translateY(-4px) rotate(-45deg)
}
.case-body .case-header :is(a,button):focus-visible{
  outline:3px solid #f05838;outline-offset:4px
}
@media(max-width:800px){
  .case-body .case-header{
    height:auto;min-height:70px;align-items:center;flex-wrap:wrap;gap:0 12px;
    padding:13px clamp(24px,3.6vw,64px)
  }
  .case-body .case-header .identity-main{font-size:17px}
  .case-body .case-header .identity-small{font-size:8px}
  .case-body .case-header .case-menu-button{display:block;margin-left:auto}
  .case-body .case-header .case-nav{
    display:none;order:3;flex:0 0 100%;width:100%;min-width:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:13px 0 7px;font-size:14px
  }
  .case-body .case-header .case-nav.is-open{display:flex}
  .case-body .case-header .case-nav a{
    width:100%;padding:14px 2px;
    border-top:1px solid rgba(0,0,0,.18)
  }
  .case-body .case-header .case-nav a:after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .case-body .case-header .case-nav a:after,
  .case-body .case-header .case-menu-button:before,
  .case-body .case-header .case-menu-button:after{transition:none!important}
}