/* BC Media: shared by every page. Design tokens, reset, header and the full-screen menu.
   Page files (home.css, portfolio.css) load after this one and override where a page differs. */

:root{
  --ink:#0c0c0e;
  --black:#0a0a0a;
  --paper:#edebe4;
  --acid:#6cc4ff;     /* sky blue accent; the white contact section uses #2f9fe8 */
  --cond:'Oswald','Arial Narrow',sans-serif;
  --serif:'Playfair Display',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* overflow-x:clip must stay: without it phones get sideways scroll */
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;}
html.menu-lock{overflow:hidden;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}

/* ===== HEADER ===== */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(16px + env(safe-area-inset-top)) 20px 0;
  color:#fff;mix-blend-mode:difference;pointer-events:none;
}
.site-head > *{pointer-events:auto;}
.head-logo svg{display:block;height:34px;width:auto;fill:currentColor;}
.menu-btn{
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.55);
  background:none;color:inherit;cursor:pointer;position:relative;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.menu-btn:hover{transform:scale(1.07);}
.menu-btn i{
  position:absolute;left:15px;right:15px;height:1.5px;background:currentColor;
  transition:transform .4s cubic-bezier(.76,0,.24,1), top .4s cubic-bezier(.76,0,.24,1);
}
.menu-btn i:first-child{top:20px;}
.menu-btn i:last-child{top:26px;}
html.menu-lock .menu-btn i:first-child{top:23px;transform:rotate(45deg);}
html.menu-lock .menu-btn i:last-child{top:23px;transform:rotate(-45deg);}

/* ===== MENU OVERLAY ===== */
#menu{
  position:fixed;inset:0;z-index:150;background:var(--ink);color:#fff;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:110px 20px calc(28px + env(safe-area-inset-bottom));
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .7s cubic-bezier(.76,0,.24,1), visibility 0s linear .7s;
}
html.menu-lock #menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .7s cubic-bezier(.76,0,.24,1);}
#menu ul{margin-bottom:auto;padding-top:var(--menu-top,2vh);}   /* home sets --menu-top:4vh */
#menu li{overflow:hidden;border-bottom:1px solid rgba(255,255,255,.12);}
#menu li a{
  display:flex;align-items:baseline;gap:14px;padding:12px 0;
  font:600 clamp(44px,14.5vw,104px)/1 var(--cond);text-transform:uppercase;letter-spacing:-.01em;
  transform:translateY(105%);transition:transform .7s cubic-bezier(.22,1,.36,1) calc(.12s + var(--i) * 70ms), color .3s ease;
}
#menu li a small{white-space:nowrap;font:italic 400 18px/1 var(--serif);text-transform:none;letter-spacing:0;color:var(--acid);}
#menu li a:hover{color:var(--acid);}
html.menu-lock #menu li a{transform:none;}
.menu-foot{display:flex;flex-direction:column;gap:10px;}
.menu-foot span{font:500 10px/1 var(--cond);letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.45);}
.menu-foot a{font:italic 400 24px/1.2 var(--serif);}

@media(min-width:900px){
  .site-head{padding:26px 40px 0;}
  .head-logo svg{height:44px;}
  .menu-btn{width:58px;height:58px;}
  .menu-btn i{left:19px;right:19px;}
  .menu-btn i:first-child{top:25px;}
  .menu-btn i:last-child{top:32px;}
  html.menu-lock .menu-btn i:first-child,html.menu-lock .menu-btn i:last-child{top:28px;}
  #menu{padding:120px 40px 40px;flex-direction:row;align-items:flex-end;justify-content:space-between;}
  #menu ul{margin:0;padding:0;flex:1;max-width:760px;}
  .menu-foot{text-align:right;padding-bottom:18px;}
}