:root {
  --l1c-black: #111111; --l1c-cream: #F3EFE7; --l1c-navtext: #DDD6C8; --l1c-soon: #E58A73; --l1c-tag: #5E5B54;
  --wm-h: clamp(15px, 3.35vw, 42px);          
  --wm-w: calc(var(--wm-h) * var(--wm-ratio, 17.86));
  --tag-gap: calc(var(--wm-h) * .42);
  --tag-h: calc(var(--wm-w) / var(--tag-ratio, 53.37));   
  --mark-h: calc((var(--wm-h) + var(--tag-gap) + var(--tag-h)) * 1.18);   
  --nav-h: 52px; --header-h: var(--nav-h);    
}
.skip { left: -999px; top: .5rem; background: var(--l1c-black); color: var(--l1c-cream); font: 600 .8rem/1 var(--sans);
  letter-spacing: .06em; padding: .8rem 1rem; text-decoration: none; border-radius: 2px; }
.skip:focus { left: .5rem; outline: 2px solid var(--accent); outline-offset: 2px; }
.l1c-masthead { background: var(--paper); }
.l1c-band { display: flex; justify-content: space-between; align-items: center; gap: clamp(16px, 3vw, 48px);
  padding-top: clamp(16px, 2.2vw, 30px); padding-bottom: clamp(16px, 2.2vw, 30px); }
.l1c-brand { min-width: 0; }
.l1c-h1 { margin: 0; font-size: inherit; line-height: 0; }
.l1c-title { display: inline-block; color: var(--ink); line-height: 0; border-radius: 2px; }
.l1c-title:hover { color: var(--ink); }
.l1c-title:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.l1c-wm { display: block; height: var(--wm-h); width: var(--wm-w); }
.l1c-tagline { margin: var(--tag-gap) 0 0; line-height: 0; color: var(--l1c-tag); --l1c-acc: var(--accent); }
.l1c-tagsvg { display: block; width: var(--wm-w); height: var(--tag-h); }
.l1c-mark { flex: none; line-height: 0; }
.l1c-mark img { display: block; height: var(--mark-h); width: var(--mark-h); }
.l1c-nav { position: sticky; top: 0; z-index: 30; background: var(--l1c-black); color: var(--l1c-navtext); }
.l1c-navin { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--nav-h); }
.l1c-links, .l1c-social, .l1c-panel ul { list-style: none; margin: 0; padding: 0; }
.l1c-links { display: flex; gap: clamp(1rem, 2.1vw, 2rem); }
.l1c-links a, .l1c-sub, .l1c-nav .menu summary { font-family: var(--sans); font-size: var(--ui); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; text-decoration: none; line-height: 1; }
.l1c-links a { display: inline-block; white-space: nowrap; color: var(--l1c-navtext); padding: 1.15rem 0 1.05rem; box-shadow: inset 0 -3px 0 transparent; }
.l1c-links a:hover { color: #fff; box-shadow: inset 0 -3px 0 #5a5852; }
.l1c-links a[aria-current="page"] { color: var(--l1c-cream); box-shadow: inset 0 -3px 0 var(--accent); }
.l1c-nav .soon { font-size: .58rem; letter-spacing: .1em; color: var(--l1c-soon); vertical-align: super; margin-left: .3em; }
.l1c-right { display: flex; align-items: center; gap: .9rem; flex: none; }
.l1c-social { display: flex; gap: 2px; }
.l1c-social a { display: grid; place-items: center; width: 38px; height: 38px; color: var(--l1c-navtext); border-radius: 3px; }
.l1c-social a:hover { color: #fff; background: rgba(243, 239, 231, .1); }
.l1c-social svg { width: 17px; height: 17px; fill: currentColor; }
.l1c-sub { background: var(--accent); color: var(--l1c-cream); padding: .72rem 1rem; border-radius: 2px; white-space: nowrap; }
.l1c-sub:hover { background: var(--accent-dark); color: #fff; }
.l1c-nav a:focus-visible, .l1c-nav summary:focus-visible { outline: 2px solid var(--l1c-cream); outline-offset: 2px; border-radius: 2px; }
.l1c-sub:focus-visible { outline-offset: 3px; }
.l1c-nav .l1c-menu { display: none; position: static; }
.l1c-nav .menu summary { color: var(--l1c-cream); padding: .75rem .25rem .75rem 0; gap: .55rem; }
.l1c-nav .menu summary .bars, .l1c-nav .menu summary .bars::after { border-color: var(--l1c-cream); }
.l1c-nav .menu[open] summary .bars { border-color: transparent; }
.l1c-nav .menu[open] summary .bars::after { border-top-color: var(--l1c-cream); }
.l1c-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--l1c-black); border-top: 1px solid #2c2b28;
  padding: .25rem var(--margin) 1.25rem; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.l1c-panel a { display: flex; justify-content: space-between; align-items: baseline; padding: .85rem 0; border-bottom: 1px solid #2c2b28;
  color: var(--l1c-cream); text-decoration: none; font-family: var(--display); font-size: 1.35rem; line-height: 1.2; }
.l1c-panel a[aria-current="page"] { color: var(--l1c-soon); }
.l1c-panel .soon { font-family: var(--sans); vertical-align: baseline; }
.home main > .wrap:first-child > .sec:first-child { padding-top: clamp(2rem, 4vw, 3rem); }
.l1c-note { font: 400 var(--ui-sm)/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--grey); margin-top: 2.5rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .l1c-links { gap: 1.05rem; } .l1c-right { gap: .5rem; } .l1c-social a { width: 34px; } .l1c-navin { gap: 1rem; } }
@media (max-width: 820px) {   
  .l1c-links { display: none; }
  .l1c-nav .l1c-menu { display: block; }
}
@media (max-width: 640px) {
  :root { --nav-h: 48px; --wm-h: clamp(13px, 4.1vw, 22px); --mark-h: calc(var(--wm-h) * 2.15); }   
  .l1c-band { padding-top: 16px; padding-bottom: 16px; gap: 12px; }
  .l1c-tagline { display: none; }   
  .l1c-social a { width: 32px; height: 36px; }
  .l1c-social svg { width: 16px; height: 16px; }
  .l1c-sub { padding: .65rem .7rem; }
  .l1c-right { gap: .35rem; }
}
@media (max-width: 359px) { .l1c-social li:nth-child(n+3) { display: none; } }
