/*
 Brand continuity layer.
 The site, print pieces and classroom materials use one visual system:
 Clash Display + Satoshi, navy outlines, hard brand-color offsets, quiet tints,
 approved photo frames and the existing paper/sticker assets.
*/
:root{
  --npw-ink:#142b46;
  --npw-blue:#124dec;
  --npw-gold:#ffdc52;
  --npw-pink:#c2185b;
  --npw-blue-tint:#eaf1ff;
  --npw-gold-tint:#fff4cf;
  --npw-pink-tint:#ffe9f1;
  --npw-quiet:#f4f7ff;

  /* Legacy aliases still used by older surfaces. Keep them mapped to the same
     identity instead of letting the retired neon/gradient palette leak through. */
  --ink:var(--npw-ink);
  --blue:var(--npw-blue);
  --violet:var(--npw-blue);
  --purple:var(--npw-blue);
  --lime:var(--npw-gold);
  --pink:var(--npw-pink);
  --line:#c9d4ea;
  --display:'Clash Display','Satoshi',system-ui,sans-serif;
  --headline:var(--display);
  --body:'Satoshi',system-ui,sans-serif;
}

/* Keep the illustrated Fort Greene neighborhood around the white reading surface.
   This repeats the identity backdrop at the end of the cascade so older mobile
   cleanup rules cannot flatten the world to a plain blue strip. */
body{
  background-color:#ffd34e!important;
  background-image:url('/assets/identity/neighborhood-mural.webp')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
  padding:clamp(10px,2.8vw,42px)!important;
}
@media(max-width:760px){
  body{
    background-color:#ffd34e!important;
    background-image:url('/assets/identity/neighborhood-mural.webp')!important;
    background-position:center top!important;
    background-size:auto 900px!important;
    background-repeat:repeat-y!important;
    background-attachment:scroll!important;
    padding:10px!important;
  }
}

/* Keep the current type system visible rather than letting page-specific CSS
   drift back to tightly tracked display type or secondary gray copy. */
#main#main .hm-band :is(h1,h2,h3),
#main#main .hm-season,
#main#main .hm-unit-meta,
#main#main .hm-lesson-list em{
  letter-spacing:0!important;
}
#main#main .hm-unit-meta,
#main#main .hm-lesson-list em{color:var(--npw-ink)!important}
#main>.hm-band>.wrap{
  width:min(1240px,calc(100% - 80px));
  max-width:1240px;
}

/* Primary action recipe from the shared kit. */
#main#main .hm-button{
  border:2px solid var(--npw-ink)!important;
  border-radius:14px!important;
  box-shadow:4px 5px 0 var(--npw-ink)!important;
}
#main#main .hm-button:hover{
  transform:translate(-1px,-1px)!important;
  box-shadow:5px 6px 0 var(--npw-ink)!important;
}

/* Hero media uses the same hero-frame treatment as the print and social kit. */
#main#main .hm-welcome .welcome-film{border-radius:28px!important}
#main#main .hm-welcome .mission-stage{
  border:10px solid #fff!important;
  border-radius:28px!important;
  box-shadow:0 0 0 2.5px var(--npw-ink),9px 10px 0 2.5px var(--npw-gold)!important;
}
#main#main .hm-welcome .mission-picture,
#main#main .hm-welcome .mission-picture img{border-radius:18px!important}
#main#main .hm-welcome .mission-controls button{
  border:2px solid var(--npw-ink)!important;
  border-radius:14px!important;
  color:var(--npw-ink)!important;
}
#main#main .hm-welcome .mission-controls [data-roll-play]{background:var(--npw-gold-tint)!important}

/* The audience/world picker is a real part of the brand, not a row of generic UI cards. */
#main>.hm-band:has(.hm-who){
  padding-top:clamp(44px,5vw,68px)!important;
  background:var(--npw-blue-tint)!important;
}
#main#main .hm-who{position:relative}
#main#main .hm-who::after{
  content:"";
  position:absolute;
  z-index:0;
  right:0;
  top:-42px;
  width:120px;
  height:72px;
  background:url('/assets/kit/elements/graphic-pieces/designer-set/paper-tape-pieces.svg') center/contain no-repeat;
  transform:rotate(5deg);
  pointer-events:none;
}
#main#main .hm-audience-heading,
#main#main .hm-picks{position:relative;z-index:1}
#main#main a.hm-pick{
  --card-shadow:var(--npw-blue);
  margin:0 6px 6px 0!important;
  border:2.5px solid var(--npw-ink)!important;
  border-radius:20px!important;
  box-shadow:6px 6px 0 var(--card-shadow)!important;
}
#main#main .hm-picks>a:nth-child(3n+2){--card-shadow:var(--npw-gold)}
#main#main .hm-picks>a:nth-child(3n+3){--card-shadow:var(--npw-pink)}
#main#main a.hm-pick:hover{
  transform:translate(-2px,-2px)!important;
  box-shadow:8px 8px 0 var(--card-shadow)!important;
}
#main#main .hm-pick-faces img{
  border:3px solid #fff!important;
  box-shadow:0 0 0 1.5px var(--npw-ink)!important;
}
#main#main .hm-pick-symbol{
  background:var(--npw-gold-tint)!important;
  border:2px solid var(--npw-ink)!important;
  border-radius:20px!important;
}
#main#main .hm-pick-cta{border-top:1.5px solid #c9d4ea!important}

/* Approved scene stills stay square to the page. The paper/sticker pieces can tilt;
   cards, photos and text do not. */
#main#main .hm-roll-photo{
  --photo-shadow:var(--npw-blue);
  margin:0 8px 8px 0!important;
  padding:6px 6px 0!important;
  border:0!important;
  border-radius:24px!important;
  box-shadow:0 0 0 2.5px var(--npw-ink),7px 7px 0 2.5px var(--photo-shadow)!important;
  transform:none!important;
  overflow:hidden;
}
#main#main .hm-roll-photo:nth-child(3n+2){--photo-shadow:var(--npw-gold);margin-top:0!important}
#main#main .hm-roll-photo:nth-child(3n){--photo-shadow:var(--npw-pink)}
#main#main .hm-roll-photo:nth-child(even){margin-top:0!important}
#main#main .hm-roll-photo img{border-radius:16px!important}
#main#main .hm-premise-photo{
  margin:12px 8px 8px 0!important;
  padding:6px 6px 0!important;
  border:0!important;
  border-radius:24px!important;
  box-shadow:0 0 0 2.5px var(--npw-ink),7px 8px 0 1px var(--npw-pink)!important;
  overflow:visible;
}
#main#main .hm-premise-photo>img:not(.hm-premise-tape){border-radius:16px!important}

/* Four-step learning loop. These intentionally echo the print card set. */
#main#main .hm-steps{gap:clamp(18px,2.4vw,28px)!important}
#main#main .hm-step{
  --step-shadow:var(--npw-blue);
  position:relative;
  margin:0 6px 6px 0!important;
  padding:22px!important;
  background:#fff!important;
  border:2.5px solid var(--npw-ink)!important;
  border-radius:20px!important;
  box-shadow:6px 6px 0 var(--step-shadow)!important;
}
#main#main .hm-step:nth-child(3n+2){--step-shadow:var(--npw-gold)}
#main#main .hm-step:nth-child(3n+3){--step-shadow:var(--npw-pink)}
#main#main .hm-step-no{
  top:22px!important;
  right:22px!important;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:999px;
  background:var(--npw-ink);
  color:#fff!important;
  font-weight:800!important;
}
#main#main .hm-step .npw-icon{width:44px!important;height:44px!important}

/* Curriculum cards keep the seasonal idea, but use the same card language. */
#main>.hm-band:has(.hm-path){background:var(--npw-gold-tint)!important}
#main#main .hm-unit--open{
  margin:0 8px 8px 0;
  padding:30px!important;
  background:#fff!important;
  border:2.5px solid var(--npw-ink)!important;
  border-radius:26px!important;
  box-shadow:8px 8px 0 var(--npw-blue)!important;
}
#main#main .hm-units{gap:22px!important}
#main#main .hm-units .hm-unit{
  --unit-shadow:var(--npw-blue);
  margin:0 6px 6px 0;
  padding:20px!important;
  background:#fff!important;
  border:2.5px solid var(--npw-ink)!important;
  border-radius:20px!important;
  box-shadow:6px 6px 0 var(--unit-shadow)!important;
}
#main#main .hm-units>.hm-unit:nth-child(3n+2){--unit-shadow:var(--npw-gold)}
#main#main .hm-units>.hm-unit:nth-child(3n+3){--unit-shadow:var(--npw-pink)}
#main#main .hm-units>.hm-unit::after{display:none!important}
#main#main .hm-season{
  border:1.5px solid var(--npw-ink)!important;
  background:var(--npw-quiet)!important;
  color:var(--npw-ink)!important;
  text-transform:none!important;
}
#main#main .hm-unit--open .hm-season{background:var(--npw-gold)!important}
#main#main .hm-units>.hm-unit:nth-child(n) .hm-season{background:var(--npw-quiet)!important;color:var(--npw-ink)!important}
#main#main .hm-lesson-list li{
  padding:12px!important;
  border:0!important;
  border-radius:14px;
  background:var(--npw-quiet);
}

/* Interactive claim: one strong card, familiar button shape. */
#main#main .hm-claim-card{
  background:#fff!important;
  border:2.5px solid var(--npw-ink)!important;
  border-radius:26px!important;
  box-shadow:8px 8px 0 var(--npw-gold)!important;
}
#main#main .hm-claim-sides button{
  border:2px solid var(--npw-ink)!important;
  border-radius:14px!important;
  font-weight:750!important;
}
#main#main .hm-claim-reveal{border-top:1.5px solid #c9d4ea!important}

/* Closing scene: no decorative gradients or soft card shadows. */
#main>.hm-band--closing{
  background:var(--npw-gold-tint)!important;
  border-top:2.5px solid var(--npw-ink)!important;
}
#main#main .hm-closing-copy h2{letter-spacing:0!important}
#main#main .hm-closing-sticker span,
#main#main .hm-closing-photo figcaption{
  font-family:var(--display)!important;
  letter-spacing:0!important;
}
#main#main .hm-closing-links a{
  --close-shadow:var(--npw-blue);
  border:2.5px solid var(--npw-ink)!important;
  border-radius:20px!important;
  box-shadow:6px 6px 0 var(--close-shadow)!important;
}
#main#main .hm-closing-links a:last-child{--close-shadow:var(--npw-pink)}
#main#main .hm-closing-photo{
  --close-photo-shadow:var(--npw-gold);
  padding:6px 6px 0!important;
  border:0!important;
  border-radius:24px!important;
  box-shadow:0 0 0 2.5px var(--npw-ink),7px 7px 0 2.5px var(--close-photo-shadow)!important;
  transform:none!important;
  overflow:hidden;
}
#main#main .hm-closing-photo--two{--close-photo-shadow:var(--npw-pink)}
#main#main .hm-closing-photo img{border-radius:16px!important}
#main#main .hm-closing-note{
  background:var(--npw-blue)!important;
  border:2.5px solid var(--npw-ink)!important;
  border-radius:26px!important;
  box-shadow:7px 7px 0 var(--npw-gold)!important;
  transform:none!important;
}

/* The detailed learning page already uses the right structure. Lock its four
   cards to the same exact kit recipe so the simple outline version cannot return. */
#main .ab-step{
  border:2.5px solid var(--npw-ink)!important;
  border-radius:20px!important;
  box-shadow:6px 6px 0 var(--npw-blue)!important;
}
#main .ab-step:nth-child(2){box-shadow:6px 6px 0 var(--npw-gold)!important}
#main .ab-step:nth-child(3){box-shadow:6px 6px 0 var(--npw-pink)!important}
#main .ab-step:nth-child(4){box-shadow:6px 6px 0 var(--npw-blue)!important}
#main .ab-example{
  background:var(--npw-quiet)!important;
  border:0!important;
  border-radius:14px!important;
}

/* The footer stays calm and dark, with a deliberate boundary from the page. */
.npw-footer{border-top:2.5px solid var(--npw-ink)!important}

@media(max-width:800px){
  #main>.hm-band>.wrap{width:min(1240px,calc(100% - 64px))}
  #main#main .hm-who::after{width:92px;height:56px;top:-34px}
}
@media(max-width:560px){
  #main>.hm-band>.wrap{width:calc(100% - 32px)}
  #main#main .hm-welcome .mission-stage{
    border-width:7px!important;
    box-shadow:0 0 0 2px var(--npw-ink),6px 7px 0 2px var(--npw-gold)!important;
  }
  #main#main .hm-who::after{display:none}
  #main#main .hm-step,
  #main#main .hm-units .hm-unit,
  #main#main a.hm-pick{margin-right:5px!important}
}
@media(prefers-reduced-motion:reduce){
  #main#main :is(.hm-button,a.hm-pick){transition:none!important}
}




/* --------------------------------------------------------------------------
   Homepage experience
   These are not generic dashboard cards. They reuse the same group-chat,
   source-receipt, sticker, photo-frame and hard-offset language as the books,
   social kit and classroom pieces.
   -------------------------------------------------------------------------- */
#main>.hm-band--sun{background:var(--npw-gold-tint)!important}
#main>.hm-band--rose{background:var(--npw-pink-tint)!important}

/* Case preview: one story object, one receipt. */
#main#main .hm-case-preview{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(420px,1.14fr);
  gap:clamp(36px,6vw,82px);
  align-items:center;
}
#main#main .hm-case-preview-copy h2{
  margin:0!important;
  font-size:clamp(2.3rem,4.2vw,4.45rem)!important;
  line-height:.98!important;
  max-width:12ch!important;
}
#main#main .hm-case-preview-copy>p:not(.hm-case-kicker):not(.hm-case-prompt){
  margin:22px 0 0!important;
  max-width:46ch;
  font-size:1.04rem;
  line-height:1.62!important;
}
#main#main .hm-case-preview .hm-case-kicker{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  margin:0 0 16px!important;
  padding:5px 12px;
  border:2px solid var(--npw-ink);
  border-radius:999px;
  background:#fff;
  color:var(--npw-blue);
  font-weight:800;
}
#main#main .hm-case-prompt{
  margin:22px 0 0!important;
  padding:15px 17px;
  max-width:44ch;
  background:#fff;
  border-left:5px solid var(--npw-blue);
  border-radius:0 14px 14px 0;
  font-weight:700;
  line-height:1.48!important;
}
#main#main .hm-case-preview-copy .hm-button{margin-top:24px}
#main#main .hm-case-stack{
  position:relative;
  min-height:520px;
  padding:18px 22px 42px 0;
  isolation:isolate;
}
#main#main .hm-case-receipts{
  position:absolute;
  z-index:-1;
  right:-34px;
  top:-14px;
  width:190px;
  opacity:.7;
  pointer-events:none;
}
#main#main .hm-mini-chat{
  position:relative;
  z-index:2;
  margin:0 12px 0 0;
  padding:0 22px 24px;
  background:#ffeef5;
  border:2.5px solid var(--npw-ink);
  border-radius:20px;
  box-shadow:6px 7px 0 #f3a9c8;
}
#main#main .hm-mini-chat>header{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:76px;
  margin:0 -22px 22px;
  padding:12px 20px;
  border-bottom:2.5px solid var(--npw-ink);
  background:#fff;
  border-radius:17px 17px 0 0;
}
#main#main .hm-mini-chat>header>span:last-child{display:grid;gap:2px}
#main#main .hm-mini-chat>header b{
  font-family:var(--display)!important;
  font-size:1.08rem;
}
#main#main .hm-mini-chat>header small{
  color:var(--npw-ink)!important;
  font-size:.78rem;
}
#main#main .hm-mini-faces{display:flex;padding-left:2px}
#main#main .hm-mini-faces img{
  width:40px;
  height:40px;
  object-fit:cover;
  border:3px solid #fff;
  border-radius:50%;
  box-shadow:0 0 0 1.5px var(--npw-ink);
}
#main#main .hm-mini-faces img+img{margin-left:-9px}
#main#main .hm-mini-message{
  display:flex;
  align-items:end;
  gap:10px;
  margin:0 0 14px;
}
#main#main .hm-mini-message>img{
  flex:none;
  width:40px;
  height:40px;
  object-fit:cover;
  border:1.5px solid var(--npw-ink);
  border-radius:50%;
  background:#fff;
}
#main#main .hm-mini-message p{
  margin:0!important;
  padding:11px 14px;
  max-width:34ch;
  background:#fff;
  border:1.5px solid var(--npw-ink);
  border-radius:18px 18px 18px 4px;
  font-size:.95rem;
  line-height:1.42!important;
}
#main#main .hm-mini-message p b{
  display:block;
  margin-bottom:3px;
  color:var(--npw-pink);
  font-size:.82rem;
}
#main#main .hm-mini-message--out{justify-content:flex-end}
#main#main .hm-mini-message--out p{
  background:var(--npw-blue-tint);
  border-radius:18px 18px 4px 18px;
}
#main#main .hm-mini-message--out p b{color:var(--npw-blue)}
#main#main .hm-source-card{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  gap:14px;
  width:min(390px,78%);
  margin:-18px 0 0 auto;
  padding:18px 20px 18px 12px;
  background:var(--npw-gold);
  border:2.5px solid var(--npw-ink);
  border-radius:20px;
  box-shadow:6px 7px 0 var(--npw-pink);
}
#main#main .hm-source-sticker{
  width:82px;
  height:82px;
  object-fit:contain;
  align-self:start;
  filter:drop-shadow(3px 4px 0 rgba(20,43,70,.24));
  transform:rotate(-4deg);
}
#main#main .hm-source-card>div{min-width:0}
#main#main .hm-source-label{
  margin:0 0 4px!important;
  font-size:.78rem!important;
  font-weight:800;
}
#main#main .hm-source-card strong{
  display:block;
  font-family:var(--display)!important;
  font-size:1.2rem;
  line-height:1.15;
}
#main#main .hm-source-card p:not(.hm-source-label){
  margin:7px 0 10px!important;
  font-size:.9rem;
  line-height:1.4!important;
}
#main#main .hm-source-card a{
  color:var(--npw-ink)!important;
  font-size:.84rem;
  font-weight:800;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}

/* The crew reads like a social rail, not another directory grid. */
#main#main .hm-crew-strip .hm-head h2{max-width:19ch}
#main#main .hm-crew-strip .hm-head p{
  margin-top:14px!important;
  max-width:58ch;
}
#main#main .hm-crew-rail{
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:14px;
  align-items:start;
  margin-top:30px;
}
#main#main .hm-crew-person{
  --crew-shadow:var(--npw-blue);
  display:grid;
  justify-items:center;
  gap:10px;
  min-width:0;
  color:var(--npw-ink)!important;
  text-decoration:none!important;
  font-weight:800;
  font-size:.9rem;
}
#main#main .hm-crew-person:nth-child(3n+2){--crew-shadow:var(--npw-gold)}
#main#main .hm-crew-person:nth-child(3n+3){--crew-shadow:var(--npw-pink)}
#main#main .hm-crew-person img{
  width:100%;
  max-width:92px;
  aspect-ratio:1;
  object-fit:cover;
  border:5px solid #fff;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 2.5px var(--npw-ink),5px 6px 0 1px var(--crew-shadow);
  transition:transform .14s,box-shadow .14s;
}
#main#main .hm-crew-person:hover img{
  transform:translate(-2px,-2px);
  box-shadow:0 0 0 2.5px var(--npw-ink),7px 8px 0 1px var(--crew-shadow);
}
#main#main .hm-crew-person span{font-family:var(--body)!important}

/* Adult support appears once, near the end, and is visually distinct from the
   three student worlds. */
#main#main .hm-support .hm-head{margin-bottom:30px}
#main#main .hm-support .hm-head h2{max-width:19ch}
#main#main .hm-support-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;
}
#main#main .hm-support-card{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:22px;
  align-items:center;
  min-height:260px;
  padding:28px 30px 28px 22px;
  border:2.5px solid var(--npw-ink);
  border-radius:26px;
  text-decoration:none!important;
  color:var(--npw-ink)!important;
}
#main#main .hm-support-card--educators{
  background:var(--npw-blue);
  color:#fff!important;
  box-shadow:8px 8px 0 var(--npw-gold);
}
#main#main .hm-support-card--families{
  background:var(--npw-gold);
  box-shadow:8px 8px 0 var(--npw-pink);
}
#main#main .hm-support-card img{
  width:116px;
  height:116px;
  object-fit:contain;
  filter:drop-shadow(4px 5px 0 rgba(20,43,70,.22));
  transform:rotate(-4deg);
}
#main#main .hm-support-card--families img{transform:rotate(4deg)}
#main#main .hm-support-card div{min-width:0}
#main#main .hm-support-k{
  margin:0 0 8px!important;
  font-size:.82rem!important;
  font-weight:800;
}
#main#main .hm-support-card h3{
  margin:0 0 12px!important;
  font-size:clamp(1.55rem,2.4vw,2.2rem)!important;
  line-height:1.06!important;
}
#main#main .hm-support-card p:not(.hm-support-k){
  margin:0 0 18px!important;
  font-size:.96rem;
  line-height:1.5!important;
}
#main#main .hm-support-card span{
  display:inline-block;
  font-weight:800;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:4px;
}
#main#main .hm-support-card--educators :is(h3,p,span){color:#fff!important}

@media(max-width:950px){
  #main#main .hm-case-preview{grid-template-columns:1fr}
  #main#main .hm-case-preview-copy h2{max-width:17ch!important}
  #main#main .hm-case-stack{width:min(680px,100%);margin:0 auto}
  #main#main .hm-crew-rail{grid-template-columns:repeat(5,minmax(0,1fr))}
  #main#main .hm-support-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  #main#main .hm-case-stack{min-height:0;padding:10px 5px 26px 0}
  #main#main .hm-case-receipts{width:130px;right:-10px;top:-8px}
  #main#main .hm-mini-chat{margin-right:6px;padding:0 16px 18px}
  #main#main .hm-mini-chat>header{margin:0 -16px 18px;padding-inline:16px}
  #main#main .hm-source-card{
    grid-template-columns:66px 1fr;
    width:92%;
    margin:-6px 0 0 auto;
    padding:15px 16px 15px 10px;
  }
  #main#main .hm-source-sticker{width:66px;height:66px}
  #main#main .hm-crew-rail{
    display:flex;
    gap:18px;
    margin-inline:-16px;
    padding:4px 16px 14px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  #main#main .hm-crew-rail::-webkit-scrollbar{display:none}
  #main#main .hm-crew-person{flex:0 0 82px;scroll-snap-align:start}
  #main#main .hm-support-card{
    grid-template-columns:84px minmax(0,1fr);
    min-height:0;
    padding:22px 20px 22px 16px;
  }
  #main#main .hm-support-card img{width:82px;height:82px}
}

/* Print stays paper-white even though the browser canvas is flat brand blue. */
@media print{
  html,body{background:#fff!important}
}

/* === NPW editorial homepage: owner font references + developed visual cadence === */
:root{
  --npw-brand-display:'Pero Display','Clash Display','Satoshi',sans-serif;
  --npw-condensed:'Anton','Archivo','Barlow',sans-serif;
  --npw-story:'Fraunces Accent','Fraunces','Instrument Serif',serif;
  --npw-editorial:'Instrument Serif',Georgia,serif;
  --npw-hand:'Yellowtail','Caveat',cursive;
  --npw-paper:#fffdf7;
  --npw-cream:#fff7e8;
  --npw-sky:#eaf1ff;
  --npw-rose:#ffe9f1;
}

/* The home page should read like an edited spread, not a product dashboard. */
body[data-page="."] #main{background:var(--npw-paper)!important}
#main>.hm-band{background:var(--npw-paper)!important}
#main>.hm-band--roll{background:#fff!important}
#main>.hm-band--sun{background:var(--npw-gold)!important}
#main>.hm-band--rose{background:var(--npw-rose)!important}
#main>.hm-band:has(.hm-path){background:var(--npw-sky)!important}
#main>.hm-band--night{background:var(--npw-ink)!important}
#main>.hm-band--closing{background:#fff2bf!important}

/* Hero: the reference composition is typography + copy + one chat object.
   The camera roll is its own visual beat below the identity picker. */
#main#main .hm-welcome{
  display:block!important;
  width:min(1240px,calc(100% - 80px))!important;
  max-width:1240px!important;
  margin:0 auto!important;
  padding:clamp(58px,7vw,96px) 0 clamp(52px,6vw,78px)!important;
  position:relative;
  overflow:visible!important;
}
#main#main .hm-hero-main{
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(360px,.77fr);
  gap:clamp(54px,8vw,112px);
  align-items:end;
}
#main#main .hm-hero-copy{min-width:0}
#main#main .hm-welcome h1{
  display:grid!important;
  gap:0!important;
  margin:0!important;
  max-width:none!important;
  color:var(--npw-ink)!important;
  font-weight:400!important;
  line-height:.84!important;
  letter-spacing:0!important;
  text-wrap:balance;
}

/* The hero wording follows the owner reference: dark "Hold up." over the blue
   bilingual question, using the house display face rather than a generic app font. */
#main#main .hm-hero-hold,
#main#main .hm-hero-question{
  display:block;
  font-family:var(--npw-brand-display)!important;
  font-weight:400!important;
  letter-spacing:-.01em!important;
}
#main#main .hm-hero-hold{
  font-size:clamp(4.5rem,8vw,7.8rem)!important;
  line-height:.86!important;
  color:var(--npw-ink)!important;
}
#main#main .hm-hero-question{
  position:relative;
  width:max-content;
  max-width:100%;
  margin-top:.08em;
  font-size:clamp(4.35rem,8.2vw,8rem)!important;
  line-height:.88!important;
  color:var(--npw-blue)!important;
}
#main#main .hm-hero-question::after{
  content:"";
  position:absolute;
  left:2%;
  right:-3%;
  bottom:-.13em;
  height:.12em;
  background:url('/assets/kit/elements/graphic-pieces/designer-set/marker-underlines-set.svg') 50% 45%/100% 650% no-repeat;
  pointer-events:none;
}
#main#main .hm-hero-intro .hm-hero-lead{
  font-family:var(--body)!important;
  font-style:normal!important;
  font-size:clamp(1.25rem,1.8vw,1.55rem)!important;
  font-weight:650!important;
  line-height:1.45!important;
  max-width:27ch;
}

#main#main .hm-hero-no{
  display:block;
  font-family:var(--npw-brand-display)!important;
  font-size:clamp(4.7rem,9.2vw,8.8rem)!important;
  font-weight:400!important;
  line-height:.82!important;
  letter-spacing:-.015em!important;
  color:var(--npw-ink)!important;
}
#main#main .hm-hero-why{
  position:relative;
  display:block;
  width:max-content;
  max-width:100%;
  margin-top:.08em;
  font-family:var(--npw-condensed)!important;
  font-size:clamp(5.5rem,11vw,10.8rem)!important;
  font-weight:400!important;
  line-height:.78!important;
  letter-spacing:-.025em!important;
  color:var(--npw-blue)!important;
  text-transform:none!important;
}
#main#main .hm-hero-why::after{
  content:"";
  position:absolute;
  left:1%;
  right:-4%;
  bottom:-.08em;
  height:.12em;
  background:url('/assets/kit/elements/graphic-pieces/designer-set/marker-underlines-set.svg') 50% 45%/100% 650% no-repeat;
  pointer-events:none;
}
#main#main .hm-hero-intro{
  align-self:center;
  padding-top:10px;
}
#main#main .hm-hero-intro .hm-hero-lead{
  margin:0!important;
  max-width:32ch;
  font-family:var(--npw-editorial)!important;
  font-size:clamp(1.55rem,2.4vw,2.25rem)!important;
  font-style:italic;
  font-weight:400!important;
  line-height:1.18!important;
  color:var(--npw-ink)!important;
}
#main#main .hm-hero-intro>p:not(.hm-hero-lead){
  margin:22px 0 0!important;
  max-width:42ch;
  font-size:1.05rem!important;
  line-height:1.6!important;
}
#main#main .hm-hero-actions{
  display:flex!important;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 24px;
  margin-top:30px!important;
}
#main#main .hm-hero-path{
  color:var(--npw-ink)!important;
  font-weight:800;
  text-decoration:underline!important;
  text-decoration-thickness:2px!important;
  text-underline-offset:5px!important;
}
#main#main .hm-button{
  min-height:50px;
  padding:12px 22px!important;
  border:2.5px solid var(--npw-ink)!important;
  border-radius:16px!important;
  background:var(--npw-blue)!important;
  color:#fff!important;
  box-shadow:5px 5px 0 var(--npw-ink)!important;
}
#main#main .hm-button:hover{
  background:var(--npw-blue)!important;
  transform:translate(-2px,-2px)!important;
  box-shadow:7px 7px 0 var(--npw-ink)!important;
}
#main#main .hm-hero-chat{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  margin:clamp(48px,6vw,72px) 8px 8px 0;
  padding:20px 22px;
  background:var(--npw-rose);
  border:2.5px solid var(--npw-ink);
  border-radius:22px;
  box-shadow:8px 8px 0 var(--npw-pink);
  position:relative;
  z-index:2;
}
#main#main .hm-hero-chat-who{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:max-content;
  color:var(--npw-blue);
}
#main#main .hm-hero-chat-who img{
  width:42px;
  height:42px;
  object-fit:cover;
  border:2px solid var(--npw-ink);
  border-radius:50%;
  background:#fff;
}
#main#main .hm-hero-chat-who strong{
  font-family:var(--body)!important;
  font-size:1.05rem;
  font-weight:800;
}
#main#main .hm-hero-chat p{
  margin:0!important;
  max-width:none!important;
  font-size:1.04rem!important;
  line-height:1.45!important;
}
#main#main .hm-hero-chat>a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 18px;
  border:2px solid var(--npw-ink);
  border-radius:999px;
  background:var(--npw-gold);
  color:var(--npw-ink)!important;
  font-weight:800;
  text-decoration:none!important;
  box-shadow:3px 3px 0 var(--npw-ink);
  white-space:nowrap;
}
#main#main .hm-hero-note{
  position:absolute;
  z-index:0;
  width:112px;
  right:-32px;
  top:36px;
  transform:rotate(5deg);
  opacity:.7;
  pointer-events:none;
}

/* One exact five-way picker, visually closer to the owner reference: five
   clean identity cards, not five mini landing pages. */
#main>.hm-band:has(.hm-who){
  background:var(--npw-cream)!important;
  padding:clamp(54px,6vw,82px) 0!important;
}
#main#main .hm-who::after{display:none!important}
#main#main .hm-who>h2{
  margin:0 0 30px!important;
  font-family:var(--npw-brand-display)!important;
  font-size:clamp(3rem,5.4vw,5.2rem)!important;
  font-weight:400!important;
  line-height:.92!important;
  letter-spacing:0!important;
}
#main#main .hm-picks{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:18px!important;
}
#main#main .hm-pick--student,
#main#main .hm-pick--audience{grid-column:auto!important}
#main#main a.hm-pick{
  --card-shadow:var(--npw-blue);
  display:flex!important;
  flex-direction:column;
  justify-content:flex-start;
  min-height:238px;
  padding:24px!important;
  margin:0 6px 6px 0!important;
  border:2.5px solid var(--npw-ink)!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:6px 6px 0 var(--card-shadow)!important;
}
#main#main .hm-picks>a:nth-child(5n+2){--card-shadow:var(--npw-gold)}
#main#main .hm-picks>a:nth-child(5n+3){--card-shadow:var(--npw-pink)}
#main#main .hm-picks>a:nth-child(5n+4){--card-shadow:var(--npw-blue)}
#main#main .hm-picks>a:nth-child(5n){--card-shadow:var(--npw-gold)}
#main#main a.hm-pick:hover{
  transform:translate(-2px,-2px)!important;
  box-shadow:8px 8px 0 var(--card-shadow)!important;
}
#main#main .hm-pick-faces{
  display:flex;
  min-height:70px;
  align-items:center;
  margin-bottom:20px;
}
#main#main .hm-pick-faces img{
  width:64px!important;
  height:64px!important;
  object-fit:cover;
  border:4px solid #fff!important;
  border-radius:50%!important;
  box-shadow:0 0 0 1.5px var(--npw-ink)!important;
}
#main#main .hm-pick-faces img+img{margin-left:-13px}
#main#main .hm-pick-symbol{
  display:grid;
  place-items:center;
  width:70px!important;
  height:70px!important;
  margin-bottom:20px;
  background:var(--npw-gold)!important;
  border:2px solid var(--npw-ink)!important;
  border-radius:50%!important;
}
#main#main .hm-pick-symbol img{width:60px!important;height:60px!important;object-fit:contain}
#main#main .hm-pick-grades{
  display:block;
  margin-top:auto;
  padding-top:12px;
  border-top:1.5px solid #cad4e6;
  color:var(--npw-blue)!important;
  font-size:.82rem!important;
  font-weight:800!important;
}
#main#main .hm-pick h3{
  order:2;
  margin:0 0 18px!important;
  font-family:var(--npw-brand-display)!important;
  font-size:clamp(1.55rem,2vw,2.05rem)!important;
  font-weight:400!important;
  line-height:1!important;
}
#main#main .hm-pick-faces + .hm-pick-grades,
#main#main .hm-pick-symbol + .hm-pick-grades{order:3}
#main#main .hm-pick-faces{order:1}
#main#main .hm-pick-symbol{order:1}

/* Camera-roll beat: approved stills, no slideshow chrome, no giant hero video.
   It feels like somebody handed you their camera roll. */
#main>.hm-band--roll{
  padding:clamp(38px,5vw,62px) 0!important;
  overflow:hidden;
  border-top:0!important;
}
#main#main .hm-roll-grid{
  display:grid!important;
  grid-template-columns:1.08fr .92fr 1fr!important;
  gap:22px!important;
  align-items:start!important;
}
#main#main .hm-roll-photo{
  --photo-shadow:var(--npw-blue);
  padding:7px 7px 0!important;
  margin:0 8px 8px 0!important;
  background:#fff!important;
  border:0!important;
  border-radius:4px!important;
  box-shadow:0 0 0 2px var(--npw-ink),7px 7px 0 2px var(--photo-shadow)!important;
  overflow:hidden;
  transform:none!important;
}
#main#main .hm-roll-photo:nth-child(3n+2){--photo-shadow:var(--npw-gold)!important}
#main#main .hm-roll-photo:nth-child(3n){--photo-shadow:var(--npw-pink)!important}
#main#main .hm-roll-photo img{border-radius:0!important}
#main#main .hm-roll-photo figcaption{
  padding:10px 5px 12px;
  font-family:var(--npw-hand)!important;
  font-size:1.1rem!important;
  line-height:1!important;
  color:var(--npw-ink)!important;
}

/* The first case gets an editorial headline and a social object, not another
   generic white card with a kicker. */
#main>.hm-band--sun{padding:clamp(62px,7vw,96px) 0!important}
#main#main .hm-case-preview-copy h2{
  font-family:var(--npw-story)!important;
  font-size:clamp(2.9rem,5.1vw,5.35rem)!important;
  font-weight:800!important;
  line-height:.92!important;
  letter-spacing:-.02em!important;
  max-width:10.5ch!important;
}
#main#main .hm-case-preview-copy>p:not(.hm-case-prompt){
  font-size:1.05rem!important;
  line-height:1.6!important;
}
#main#main .hm-case-prompt{
  margin:24px 0 0!important;
  padding:0!important;
  max-width:40ch;
  background:none!important;
  border:0!important;
  border-radius:0!important;
  font-family:var(--npw-editorial)!important;
  font-size:1.35rem!important;
  font-style:italic;
  font-weight:400!important;
  line-height:1.3!important;
}
#main#main .hm-case-preview .hm-case-kicker{display:none!important}
#main#main .hm-mini-chat{
  background:var(--npw-rose)!important;
  box-shadow:7px 8px 0 var(--npw-pink)!important;
}
#main#main .hm-mini-chat>header b{
  font-family:var(--npw-brand-display)!important;
  font-weight:400!important;
}
#main#main .hm-source-card{
  background:#fff!important;
  box-shadow:6px 7px 0 var(--npw-blue)!important;
}
#main#main .hm-source-label{
  font-family:var(--npw-condensed)!important;
  font-size:1rem!important;
  letter-spacing:.02em!important;
  color:var(--npw-blue)!important;
}
#main#main .hm-source-card strong{
  font-family:var(--npw-editorial)!important;
  font-style:italic;
  font-size:1.25rem!important;
  font-weight:400!important;
}

/* Story/origin section: editorial, quieter, photo-led. */
#main#main .hm-premise-copy h2{
  font-family:var(--npw-editorial)!important;
  font-size:clamp(2.8rem,4.9vw,4.9rem)!important;
  font-style:italic;
  font-weight:400!important;
  line-height:.95!important;
}
#main#main .hm-premise-copy p{font-size:1.03rem!important}
#main#main .hm-premise-photo figcaption{
  font-family:var(--npw-hand)!important;
  font-size:1.1rem!important;
}

/* Crew rail is intentionally not another card grid. */
#main#main .hm-crew-strip .hm-head h2{
  font-family:var(--npw-brand-display)!important;
  font-size:clamp(2.8rem,4.7vw,4.6rem)!important;
  font-weight:400!important;
  line-height:.95!important;
  max-width:14ch!important;
}
#main#main .hm-crew-strip .hm-head p{max-width:54ch}

/* The process and units borrow the classroom/print typography explicitly. */
#main#main .hm-how .hm-head h2{
  font-family:var(--npw-brand-display)!important;
  font-size:clamp(2.7rem,4.8vw,4.8rem)!important;
  font-weight:400!important;
  line-height:.92!important;
}
#main#main .hm-how .hm-head p{max-width:56ch;margin-top:14px!important}
#main#main .hm-step-no,
#main#main .hm-season,
#main#main .hm-unit-no{
  font-family:var(--npw-condensed)!important;
  letter-spacing:.01em!important;
}
#main#main .hm-step{
  min-height:250px;
  padding:24px!important;
  border-radius:22px!important;
}
#main#main .hm-step h3{
  font-family:var(--npw-brand-display)!important;
  font-size:1.55rem!important;
  font-weight:400!important;
}
#main#main .hm-path .hm-head h2{
  font-family:var(--npw-story)!important;
  font-size:clamp(2.7rem,4.8vw,4.9rem)!important;
  font-weight:800!important;
  line-height:.95!important;
  max-width:15ch!important;
}
#main#main .hm-unit--open h3,
#main#main .hm-units h3{
  font-family:var(--npw-brand-display)!important;
  font-weight:400!important;
}
#main#main .hm-unit--open{box-shadow:9px 9px 0 var(--npw-blue)!important}
#main#main .hm-units .hm-unit{
  border-radius:18px!important;
  box-shadow:5px 5px 0 var(--unit-shadow)!important;
}

/* Interactive and closing beats get their own type voice. */
#main#main .hm-claim-intro h2{
  font-family:var(--npw-condensed)!important;
  font-size:clamp(3.1rem,5.8vw,6rem)!important;
  font-weight:400!important;
  line-height:.9!important;
  letter-spacing:-.02em!important;
}
#main#main .hm-claim-card h3{
  font-family:var(--npw-story)!important;
  font-weight:800!important;
}
#main#main .hm-closing-copy h2{
  font-family:var(--npw-story)!important;
  font-weight:800!important;
  line-height:.95!important;
}
#main#main .hm-closing-sticker span,
#main#main .hm-closing-photo figcaption{
  font-family:var(--npw-hand)!important;
  font-weight:400!important;
}
#main#main .hm-closing-note p{
  font-family:var(--npw-editorial)!important;
  font-style:italic;
}

/* Carry the reference-inspired type accents beyond home without replacing the
   readable Satoshi base. One accent role per component. */
#main :is(.ab-band,.un-page,.eh-sec,.cs-page) h1{
  font-family:var(--npw-brand-display)!important;
  font-weight:400!important;
  letter-spacing:0!important;
}
#main :is(.ab-quote-line,.cs-pullquote,.un-big-number,.eh-case-no){
  font-family:var(--npw-condensed)!important;
}
#main :is(.ab-quote-line,.cs-quote blockquote){
  font-family:var(--npw-editorial)!important;
  font-style:italic;
}
.npw-invite h2,
.npw-foot-group h2{
  font-family:var(--npw-brand-display)!important;
  font-weight:400!important;
}

/* Responsive cadence: keep the hierarchy, stack before anything becomes tiny. */
@media(max-width:1080px){
  #main#main .hm-picks{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #main#main .hm-pick--audience{grid-column:auto!important}
}
@media(max-width:860px){
  #main#main .hm-welcome{width:calc(100% - 64px)!important;padding-top:46px!important}
  #main#main .hm-hero-main{grid-template-columns:1fr;gap:34px}
  #main#main .hm-hero-intro{max-width:620px}
  #main#main .hm-hero-chat{grid-template-columns:1fr;gap:12px}
  #main#main .hm-hero-chat>a{justify-self:start}
  #main#main .hm-hero-note{display:none}
  #main#main .hm-roll-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
  #main#main .hm-welcome{width:calc(100% - 32px)!important;padding:36px 0 46px!important}
  #main#main .hm-hero-hold{font-size:clamp(3.35rem,15.5vw,5.2rem)!important}
  #main#main .hm-hero-question{font-size:clamp(3.25rem,14.8vw,5rem)!important}
  #main#main .hm-hero-intro .hm-hero-lead{font-size:1.45rem!important}
  #main#main .hm-hero-chat{margin-top:38px;padding:17px;box-shadow:6px 6px 0 var(--npw-pink)}
  #main#main .hm-picks{grid-template-columns:1fr!important}
  #main#main a.hm-pick{min-height:0}
  #main#main .hm-roll-grid{grid-template-columns:1fr!important;gap:20px!important}
  #main#main .hm-roll-photo{max-width:94%;margin-inline:auto!important}
}


/* === NPW cross-site type roles from the owner's reference set === */
/* Story pages use the softer editorial face; curriculum navigation stays graphic. */
#main .cs-page h1{
  font-family:var(--npw-story)!important;
  font-weight:800!important;
  letter-spacing:-.015em!important;
}
#main .cs-page h2{
  font-family:'Bricolage Grotesque',var(--npw-brand-display)!important;
  font-weight:750!important;
  letter-spacing:0!important;
}
#main .cs-page :is(.cs-step-no,.cs-case-no,.cs-beat-no){
  font-family:var(--npw-condensed)!important;
}

/* About/editorial pages get a printed-magazine hierarchy instead of using the
   same display face at every level. */
#main .ab-band h2{
  font-family:var(--npw-story)!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
}
#main .ab-band h3{font-family:'Bricolage Grotesque',var(--npw-brand-display)!important}
#main .ab-table :is(th,caption),
#main .eh-table th,
#main .tg-table th{
  font-family:'Archivo',var(--body)!important;
  font-weight:800!important;
  letter-spacing:0!important;
}

/* Educator pages use the expressive geometric face from the approved type
   inspiration, while long teaching copy remains Satoshi. */
#main .eh-sec h2,
#main .eh-sec h3{
  font-family:'Bricolage Grotesque',var(--npw-brand-display)!important;
  font-weight:750!important;
  letter-spacing:0!important;
}
#main .eh-case-no{font-family:var(--npw-condensed)!important}

/* Field guides: Fraunces opener, Bricolage sections, Archivo tables, and only
   one handwritten cue at a time. */
#main .field-guide h1,
#main .tg-page .tg-head h1,
#main .tg-page .tg-pack-head h1{
  font-family:var(--npw-story)!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
}
#main .field-guide :is(h2,h3),
#main .tg-page :is(.tg-sec,.tg-main) h2{
  font-family:'Bricolage Grotesque',var(--npw-brand-display)!important;
  font-weight:750!important;
  letter-spacing:0!important;
}
#main .field-guide .gd-kicker{display:none!important}
#main :is(.ab-by,.ep-byline,.tg-note-who){
  font-family:'Caveat',var(--npw-hand)!important;
  font-weight:700!important;
  font-size:1.05em!important;
}


/* Hero span specificity lock: beat the older homepage span rule. */
#main#main .hm-welcome h1 span.hm-hero-hold,
#main#main .hm-welcome h1 span.hm-hero-question{
  font:400 1em/1 var(--npw-brand-display)!important;
  letter-spacing:-.01em!important;
}
#main#main .hm-welcome h1 span.hm-hero-hold{
  display:block!important;
  font-size:clamp(4.5rem,8vw,7.8rem)!important;
  line-height:.86!important;
  color:var(--npw-ink)!important;
}
#main#main .hm-welcome h1 span.hm-hero-question{
  display:block!important;
  font-size:clamp(4.35rem,8.2vw,8rem)!important;
  line-height:.88!important;
  color:var(--npw-blue)!important;
}
#main#main .hm-welcome h1 span.hm-hero-hold::after{
  content:none!important;
  display:none!important;
  background:none!important;
}
#main#main .hm-welcome h1 span.hm-hero-question::after{content:none!important;display:none!important;background:none!important}
@media(max-width:620px){
  #main#main .hm-welcome h1 span.hm-hero-hold{font-size:clamp(3.35rem,15.5vw,5.2rem)!important}
  #main#main .hm-welcome h1 span.hm-hero-question{font-size:clamp(3.25rem,14.8vw,5rem)!important}
}

/* The screen-only editorial layer must not print the neighborhood mural. */
@media print{
  html,body{background:#fff!important;background-image:none!important;padding:0!important}
}