/* ---------- the lit sign ---------- */
.nm .lsign{font-family:inherit;text-transform:none;margin:0;line-height:.9;display:flex;flex-wrap:wrap;justify-content:center;
  column-gap:.26em;row-gap:.06em;font-weight:900;
  font-size:clamp(4.4rem,23vw,8rem);letter-spacing:.02em}
@media (min-width:760px){ .nm .lsign{font-size:min(8rem,10.4vw)} }
.word{display:inline-flex;white-space:nowrap}
.l{position:relative;display:inline-block;filter:brightness(.38) saturate(.7)}
.bulbs{font-family:"Big Shoulders Display",Impact,sans-serif;color:transparent;
  background:radial-gradient(circle,#f3eee4 0 30%,#f3eee4 46%,rgba(243,238,228,.5) 70%) 0 0/.045em .045em;
  -webkit-background-clip:text;background-clip:text;opacity:.25}
.paint{position:absolute;inset:0;
  font-family:"Big Shoulders Inline Display","Big Shoulders Inline",Impact,sans-serif;
  color:var(--p);-webkit-text-stroke:.008em var(--p)}
.blue .l{--p:var(--blue);--glow:brightness(1.05) drop-shadow(0 0 .03em rgba(243,238,228,.9)) drop-shadow(0 0 .22em rgba(65,182,230,.55))}
.red .l{--p:var(--red);--glow:brightness(1.05) drop-shadow(0 0 .03em rgba(243,238,228,.9)) drop-shadow(0 0 .22em rgba(228,0,43,.55))}
.cream .l{--p:var(--paper);--glow:brightness(1.05) drop-shadow(0 0 .03em rgba(243,238,228,.9)) drop-shadow(0 0 .25em rgba(243,238,228,.45))}

.lit .l{animation:on .9s steps(1,end) var(--d,0s) forwards}
.lit .l .bulbs{animation:bon .9s steps(1,end) var(--d,0s) forwards}
@keyframes on{0%{filter:brightness(.38) saturate(.7)}18%{filter:var(--glow)}26%{filter:brightness(.38) saturate(.7)}
  40%{filter:var(--glow)}48%{filter:brightness(.38) saturate(.7)}62%,100%{filter:var(--glow)}}
@keyframes bon{0%{opacity:.25}18%{opacity:1}26%{opacity:.25}40%{opacity:1}48%{opacity:.25}62%,100%{opacity:1}}
.l.buzz{animation:buzz .7s steps(1,end) forwards !important}
.l.buzz .bulbs{animation:bbuzz .7s steps(1,end) forwards !important}
@keyframes buzz{0%{filter:var(--glow)}12%{filter:brightness(.38) saturate(.7)}22%{filter:var(--glow)}
  30%{filter:brightness(.38) saturate(.7)}44%{filter:var(--glow)}52%{filter:brightness(.5) saturate(.7)}66%,100%{filter:var(--glow)}}
@keyframes bbuzz{0%{opacity:1}12%{opacity:.2}22%{opacity:1}30%{opacity:.15}44%{opacity:1}52%{opacity:.3}66%,100%{opacity:1}}

.star svg{display:block}

/* ---------- one, ring it up ---------- */
.reg{position:relative;width:min(100%,30rem);margin:clamp(1.6rem,5vw,2.2rem) auto 0}
.reg .star{position:absolute;left:50%;top:0;transform:translate(-50%,-88%);z-index:2}
.reg .star svg{width:1.7rem;height:1.7rem}
.win{border:3px solid var(--paper);border-bottom:0;border-radius:8px 8px 0 0;
  padding:1.1rem .7rem 0;display:flex;gap:.3rem;justify-content:center;overflow:hidden}
.nm .tab{font-family:"Big Shoulders Display",sans-serif;white-space:nowrap;background:var(--paper);color:var(--ink);font-weight:900;letter-spacing:.03em;
  font-size:clamp(.95rem,4vw,1.45rem);line-height:1;padding:.4em .45em .55em;border-radius:3px 3px 0 0;
  transform:translateY(115%)}
.nm .tab.g{background:var(--red);color:var(--paper)}
.rung .tab{animation:pop .5s cubic-bezier(.2,1.7,.4,1) var(--d,0s) forwards}
@keyframes pop{to{transform:translateY(0)}}
.tab.g.again{animation:rering 1.1s cubic-bezier(.2,1.7,.4,1) forwards !important;transform:translateY(0)}
@keyframes rering{0%{transform:translateY(0)}28%{transform:translateY(120%);animation-timing-function:ease-in}
  55%{transform:translateY(120%);animation-timing-function:cubic-bezier(.2,1.7,.4,1)}100%{transform:translateY(0)}}
.ledge{height:7px;background:var(--paper);border-radius:3px;margin:0 -.6rem}


.nm{--paper:#f3eee4;--red:#E4002B;--blue:#41B6E6;--ink:#0b111c;padding:clamp(1.4rem,5vw,2.4rem) 0 clamp(1.4rem,4vw,1.8rem);
  border-bottom:3px solid var(--red);margin-bottom:1.2rem;text-align:center}
.nm .lsign a,.nm a.lhome{color:inherit;text-decoration:none}
/* trimmed size, one line */
.nm.trim .lsign{font-size:clamp(2.6rem,11.6vw,5rem)}
.nm.trim .reg{width:fit-content;max-width:100%;margin-top:1.3rem}
.nm.trim .tab{font-size:clamp(.85rem,3.5vw,1.1rem)}
.trim .reg .star svg{width:1.35rem;height:1.35rem}

/* ring it up, light version: words rise out of one thin line */
.nm .reg{position:relative;width:fit-content;max-width:100%;margin:clamp(1.3rem,4vw,1.8rem) auto 0}
.nm .win{border:0;border-radius:0;padding:.2rem .4rem 0;display:flex;gap:.7em;justify-content:center;overflow:hidden}
.nm .tab{font-family:"Big Shoulders Display",sans-serif;white-space:nowrap;background:none;color:var(--paper);
  font-weight:800;letter-spacing:.06em;font-size:clamp(1.05rem,4.6vw,1.6rem);line-height:1;padding:0 0 .35em;border-radius:0;
  transform:translateY(120%)}
.nm .tab.g{background:none;color:var(--red)}
.nm .ledge{position:relative;height:1.5px;background:var(--paper);opacity:1;margin:0 -.6rem;border-radius:0}
.nm .ledge .star{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--ink);padding:0 .45rem;line-height:0}
.nm .ledge .star svg{width:1.15rem;height:1.15rem}
.nm.trim .tab{font-size:clamp(.9rem,3.7vw,1.2rem)}
.nm.trim .reg{margin-top:1.1rem}
.nm.trim .ledge .star svg{width:1rem;height:1rem}
/* preview switch, not part of the site */
.pv{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);transform:translateX(-50%);z-index:99;
  display:flex;gap:0;border:2px solid #f3eee4;border-radius:99px;overflow:hidden;background:#0b111c;box-shadow:0 4px 18px rgba(0,0,0,.5)}
.pv button{font:700 1rem "Big Shoulders Display",sans-serif;letter-spacing:.05em;background:none;color:#f3eee4;border:0;padding:.55rem 1rem;cursor:pointer}
.pv button.on{background:#E4002B}
.pv button:focus-visible{outline:3px solid #41B6E6;outline-offset:-3px}
@media (prefers-reduced-motion: reduce){
  .lit .l{animation:none;filter:var(--glow)} .lit .l .bulbs{animation:none;opacity:1}
  .l.buzz,.l.buzz .bulbs{animation:none !important}
  .tab{transform:none} .rung .tab{animation:none} .tab.g.again{animation:none !important}
}
/* ---------- 1 Oct 2026 proof fixes ---------- */
/* glow lives on the paint only, so the bulbs never fill a box behind the sign */
.l,.lit .l,.l.buzz{filter:none!important;animation:none!important}
.paint{filter:brightness(.38) saturate(.7)}
.blue .paint,.red .paint{will-change:filter}
.lit .l .paint{animation:on .9s steps(1,end) var(--d,0s) forwards}
.l.buzz .paint{animation:buzz .7s steps(1,end) forwards!important}
/* the red rule is gone, the name signs the four words instead */
.nm{border-bottom:0;margin-bottom:.4rem}
.nm .ledge{margin:0 -.6rem}
.nm .ledge .star{background:none;padding:0;width:1.25rem;height:1.25rem;top:50%;left:50%;transform:translate(-50%,-50%);display:block}
.nm .ledge .star svg{width:100%;height:100%;display:block}
.nm.trim .ledge .star{width:1.05rem;height:1.05rem}
.sig{margin-top:1rem;font-family:"Big Shoulders Display",sans-serif;font-weight:600;font-size:clamp(1rem,4vw,1.15rem);letter-spacing:.08em;line-height:1}
.sig a{color:var(--paper);text-decoration:none}
.sig a:hover{color:var(--blue)}
/* sections, all on view, The Record alone underneath */
.pills{display:block;margin-top:1rem}
.pills .row{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.pills .row+.row{margin-top:.6rem}
@media (max-width:640px){
.pills{margin:1rem 0 0;padding:0;overflow:visible}
.pills .row{gap:.45rem}
.pills .row{gap:.35rem;flex-wrap:nowrap}
.pills a{font-size:clamp(.66rem,3.3vw,.78rem);letter-spacing:.1em;padding:.5rem clamp(.5rem,2.4vw,.85rem) .45rem}
}
.nm{padding-bottom:.6rem}
main{padding-top:1.8rem}
/* ---------- 1 Oct 2026 palette pass ---------- */
body{font-family:"Big Shoulders Display",Helvetica,Arial,sans-serif;font-weight:500}
/* small words in cream, heavier, a touch bigger */
.stamp{color:var(--paper);font-weight:700;font-size:.84rem;letter-spacing:.16em;margin-bottom:.7rem}
.stamp span + span:before{color:var(--red)}
article{border-bottom:1px solid var(--blue);padding-bottom:2.2rem;margin-bottom:2.2rem}
article h2{margin-bottom:.7rem}
article .dek{color:var(--paper);font-weight:500;font-size:1.25rem;line-height:1.38;letter-spacing:.01em}
/* buttons, blue outline, cream words, red when you're on it */
.pills a{color:var(--paper);border:1.5px solid var(--blue);font-weight:700}
.pills a:hover{color:var(--blue);border-color:var(--blue)}
.pills a.on{background:var(--red);border-color:var(--red);color:var(--paper)}
/* Guilty belongs to the sign, same red glow */
.nm .tab.g{color:var(--red);filter:brightness(1.05) drop-shadow(0 0 .03em rgba(243,238,228,.9)) drop-shadow(0 0 .22em rgba(228,0,43,.55))}
.nm .tab{font-weight:800}
.sig a{color:var(--paper);font-weight:700}
/* footer in the same voice */
.colophon a{color:var(--paper)}
.colophon a:hover,.social a:hover{color:var(--blue)}
footer{border-top:1px solid var(--blue)}
/* Guilty glow that holds while it moves */
.nm .tab.g{filter:none!important;color:var(--red);
  text-shadow:0 0 1px #f3eee4,0 0 .06em rgba(243,238,228,.7),0 0 .3em rgba(228,0,43,.85),0 0 .7em rgba(228,0,43,.55)}
.nm .win{padding-top:.8rem;margin-top:-.6rem}
/* four words, one color, no glow */
/* ---------- line, star, doors ---------- */
.nm .reg{width:fit-content;max-width:100%}
.nm .tab{margin-right:-.06em}
.nm .win{padding-left:0;padding-right:0}
.nm .ledge{display:grid!important;grid-template-columns:1fr 2.4rem 1fr;align-items:center;height:auto!important;background:none!important;margin:0}
.nm .ledge .seg{display:block;height:1px;background:var(--paper)}
.nm .ledge .star{position:static!important;transform:none!important;justify-self:center;width:1.1rem!important;height:1.1rem!important}
.nm.trim .ledge{grid-template-columns:1fr 2rem 1fr}
.nm.trim .ledge .star{width:.95rem!important;height:.95rem!important}
.doors{display:grid;grid-template-columns:1fr 2.4rem 1fr;margin-top:.85rem}
.nm.trim .doors{grid-template-columns:1fr 2rem 1fr}
.doors a{font-family:"Big Shoulders Display",sans-serif;font-weight:700;font-size:clamp(.95rem,3.9vw,1.1rem);letter-spacing:.08em;line-height:1;color:var(--paper);text-decoration:none;text-align:center;padding:.3rem 0}
.doors a:hover,.doors a:focus-visible{color:var(--blue)}
.nm{margin-bottom:0}
main{padding-top:2.4rem}
.archive{text-align:center;margin:2.4rem 0 0}
.archive a{display:inline-block;font-family:"Big Shoulders Display",sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:.08em;color:var(--paper);text-decoration:none;border-bottom:1px solid var(--blue);padding-bottom:.25rem}
.archive a:hover{color:var(--blue)}
/* ---------- the seal, one center line ---------- */
.nm .reg{width:min(100%,22rem);margin:0 auto}
.seal{display:flex;flex-direction:column;align-items:center;margin-top:.6rem}
.seal .ledge{width:100%;margin:.65rem 0}
.seal a{font-family:"Big Shoulders Display",sans-serif;font-weight:700;color:var(--paper);text-decoration:none;line-height:1;padding:.2rem .4rem}
.seal a:hover,.seal a:focus-visible{color:var(--blue)}
.seal .est{font-size:clamp(.82rem,3.4vw,.95rem);letter-spacing:.2em;text-transform:uppercase}
.seal .rec{font-size:clamp(1.15rem,4.8vw,1.4rem);letter-spacing:.1em;text-transform:uppercase}


.nm .tab,.nm .tab.g{color:var(--paper)!important;text-shadow:none!important;filter:none!important}



@media (prefers-reduced-motion: reduce){ .lit .l .paint{animation:none;filter:var(--glow)} .l.buzz .paint{animation:none!important} }

/* ---------- site-wide, 1 Oct 2026 ---------- */
:root{--soft:#f3eee4;--rule:#41B6E6}
body,p,li,td,th,blockquote,figcaption,input,button{font-family:"Big Shoulders Display",Helvetica,Arial,sans-serif}
.archive-h{font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:clamp(2rem,9vw,3rem);letter-spacing:.02em;text-transform:uppercase;margin:0 0 1.6rem;line-height:1}
.month{font-family:"Big Shoulders Display",sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin:2.6rem 0 1.4rem;padding-bottom:.5rem;border-bottom:1px solid var(--blue)}
.month:first-of-type{margin-top:0}
main .label,main .dateline{font-family:"Big Shoulders Display",sans-serif;color:var(--paper);font-weight:700;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.5}
main .label{margin-bottom:.8rem}
main h1{text-wrap:pretty}

/* masthead, 2 Oct 2026: same as the X and LinkedIn banner. Sign, Est. 2026, then one thin line with the star on it. */
header.masthead .nm .reg{width:min(62%,15rem);margin-left:auto;margin-right:auto}
header.masthead .seal .est{margin-right:-.2em}
header.masthead .seal .ledge{margin:.7rem 0 .2rem}
/* standing pages, in line with the Archive at the foot of every page */
.archive{display:flex;justify-content:center;flex-wrap:wrap;gap:.9rem 1.8rem;margin:2.8rem 0 0}

/* Est. 2026 is a door. Same thin blue line the foot row uses. */
header.masthead .seal .est{padding:.2rem 0 .38rem;background:linear-gradient(var(--blue),var(--blue)) left bottom/calc(100% - .2em) 1px no-repeat}
header.masthead .seal .ledge{margin-top:.75rem}
