/* HOPE STREET-POSTER IDENTITY · 2026-08-27
   Shared presentation layer only. Crisis actions, data, privacy, language,
   Journey state, and application boundaries remain unchanged. */
:root{
  --street-navy:#08294d;
  --street-navy-deep:#06192f;
  --street-blue:#1285b5;
  --street-gold:#efb321;
  --street-paper:#f4efe4;
  --street-ink:#10263d;
  --street-shadow:7px 8px 0 rgba(18,133,181,.22);
}
.os-header,.public-header,.learning-header,#hdr,.topbar{
  border-bottom:4px solid var(--street-gold)!important;
  box-shadow:0 6px 0 rgba(8,41,77,.96),0 18px 42px rgba(0,0,0,.16);
}
.os-brand-mark,.learning-brand-mark,.public-brand-mark,.logo .mk,.topbar .brand i{
  filter:drop-shadow(2px 3px 0 rgba(239,179,33,.35));
}
.os-brand strong,.learning-brand strong,.public-brand strong,.logo b,.topbar .brand b{
  font-family:Impact,"Arial Black","Franklin Gothic Heavy",system-ui,sans-serif;
  letter-spacing:.07em;text-transform:uppercase;
}
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background-color:var(--street-paper);
  background-image:
    linear-gradient(97deg,transparent 0 68%,rgba(18,133,181,.08) 68% 72%,transparent 72%),
    repeating-linear-gradient(0deg,rgba(8,41,77,.025) 0 1px,transparent 1px 7px);
}
.hero::after,.learning-hero::after{
  content:"";position:absolute;z-index:-1;left:-4%;right:-4%;bottom:14px;height:18px;
  background:var(--street-blue);opacity:.72;transform:rotate(-.8deg);
  clip-path:polygon(0 35%,8% 11%,17% 33%,29% 5%,40% 39%,51% 12%,65% 35%,78% 8%,90% 31%,100% 13%,99% 78%,86% 61%,70% 91%,55% 66%,39% 93%,25% 65%,10% 92%,0 70%);
}
.hero h1,.learning-hero h1,.mast h1{
  font-family:Impact,"Arial Black","Franklin Gothic Heavy",system-ui,sans-serif;
  letter-spacing:.015em;text-transform:uppercase;
}
.hero h1 em,.learning-hero h1 em,.mast h1 b{
  display:inline;padding:.02em .16em .07em;background:var(--street-gold);color:var(--street-navy)!important;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  clip-path:polygon(1% 8%,99% 0,97% 91%,2% 100%);
  font-style:normal;
}
/* The home headline can wrap “useful step” across line fragments on narrow
   screens. Clipping an inline fragment can hide the final word, so keep the
   gold emphasis but do not clip the home-page headline text itself. */
.hero h1 em{clip-path:none}
.hero .eyebrow,.learning-hero .eyebrow,.mast .eyebrow{
  color:var(--street-navy);font-family:"Segoe Print","Bradley Hand",cursive;
  font-weight:900;letter-spacing:.02em;text-transform:none;
}
.street-pledge{
  display:inline-block;margin:1rem 0 0;padding:.35rem .7rem .3rem;
  background:var(--street-navy);color:#fff;font-size:.72rem;font-weight:950;
  letter-spacing:.14em;text-transform:uppercase;box-shadow:5px 5px 0 var(--street-gold);
  transform:rotate(-.7deg);
}
.search-stage,.intent,.system-card,.honesty,.continue-card,.helper-banner,
.feature-card,.manual-topic,.academy-card,.card,.urgent{
  border-radius:10px!important;
}
.search-stage{
  border:2px solid rgba(8,41,77,.18)!important;
  box-shadow:var(--street-shadow),0 22px 60px rgba(6,25,47,.16)!important;
}
.intent:hover,.system-card:hover,.feature-card:hover,.card:hover{
  box-shadow:5px 6px 0 rgba(239,179,33,.24),0 18px 42px rgba(6,25,47,.16)!important;
}
.section-kicker,.kicker,.intent-label{letter-spacing:.13em}
.button.primary,.support-hope-button,.home-search button{
  border-radius:6px!important;box-shadow:3px 4px 0 rgba(8,41,77,.20);
}
.os-footer,.support-hope{border-top-color:var(--street-gold)!important}
body:not(.low-data)::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hope-public .public-header,.hope-public .crisis-ribbon{border-radius:0}
@media(max-width:720px){
  .hero::after,.learning-hero::after{bottom:6px;height:13px}
  .street-pledge{font-size:.63rem}
  .os-brand-copy small{letter-spacing:.02em}
}
@media(prefers-reduced-motion:reduce){
  .street-pledge,.hero::after,.learning-hero::after{transform:none}
}
@media print{body::after,.hero::after,.learning-hero::after{display:none!important}}


/* Mature Survival Guide front door: blue harbor utility with the new
   street-poster typography and gold/blue hand-made emphasis. */
body > .wrap > header{
  border-bottom:4px solid var(--street-gold)!important;
  box-shadow:0 6px 0 rgba(18,133,181,.28),0 18px 42px rgba(0,0,0,.20)!important;
}
body > .wrap > header .brand h1{
  font-family:Impact,"Arial Black","Franklin Gothic Heavy",system-ui,sans-serif!important;
  letter-spacing:.08em!important;text-transform:uppercase;
}
body > .wrap > header .brand .tag{
  color:#d7e7f4!important;font-family:"Segoe Print","Bradley Hand",cursive;
  font-weight:800;letter-spacing:.04em!important;text-transform:none!important;
}
body > .wrap .ask h2{
  font-family:Impact,"Arial Black","Franklin Gothic Heavy",system-ui,sans-serif;
  letter-spacing:.025em;text-transform:uppercase;
}
body > .wrap .section-label{
  color:var(--street-gold)!important;letter-spacing:.14em!important;
}
body > .wrap .grid .card,
body > .wrap .home-card,
body > .wrap .gate-card{
  border-radius:10px!important;
}
body > .wrap .grid .card{
  border:2px solid rgba(18,133,181,.30)!important;
  box-shadow:4px 5px 0 rgba(18,133,181,.16),0 12px 30px rgba(0,0,0,.16)!important;
}
body > .wrap .grid .card:hover,
body > .wrap .grid .card:focus-visible{
  border-color:var(--street-gold)!important;
  box-shadow:5px 6px 0 rgba(239,179,33,.30),0 18px 42px rgba(0,0,0,.22)!important;
}
body > .wrap .ask::after{
  content:"REAL PEOPLE · REAL RESOURCES · REAL HOPE";
  display:inline-block;margin-top:8px;padding:.32rem .62rem .28rem;
  background:var(--street-gold);color:var(--street-navy-deep);
  font:950 .64rem/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.12em;transform:rotate(-.6deg);
  box-shadow:4px 4px 0 var(--street-blue);
}
@media(max-width:420px){
  body > .wrap .ask::after{font-size:.56rem;letter-spacing:.09em}
}
@media(prefers-reduced-motion:reduce){
  body > .wrap .ask::after{transform:none}
}