/* Youth Bold-Light: shared design system for youth.firebird.nyc.
   Cream page, Playfair headings, League Spartan poster labels, Bricolage body,
   ink bands, fire/sun accents, sticker shadows, slightly tilted photo cards.
   Shell (nav, footer, buttons, hero, quote strip) is shared by every page.
   Legacy-class mapping at the bottom restyles the older content blocks. */
:root {
  --ink:#0a0807; --ink-2:#131010; --bone:#f5ecdc; --bone-dim:rgba(245,236,220,.74); --bone-faint:rgba(245,236,220,.16);
  --cream:#fdf8f2; --cream-mid:#f5ebe0; --cream-border:#e0cbb5; --text:#1c0f05; --text-mid:#5a3a20; --text-muted:#8a6a4a;
  --fire:#e84d00; --fire-soft:#ff6b28; --sun:#ffc700; --accent:var(--fire);
  --f-poster:'League Spartan','Arial Black',system-ui,sans-serif; --f-serif:'Playfair Display',Georgia,serif; --f-body:'Bricolage Grotesque',system-ui,sans-serif;
  --nav-h:72px; --gutter:clamp(1.1rem,4.5vw,3rem); --max-w:1120px; --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
body { background:var(--cream); color:var(--text); font-family:var(--f-body); font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
:focus-visible { outline:3px solid var(--fire); outline-offset:3px; }
.wrap { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter); }
h1,h2,h3 { text-wrap:balance; }
p { text-wrap:pretty; }
.display { font-family:var(--f-serif); font-weight:800; line-height:1.04; letter-spacing:-.01em; }
.label { font:800 .72rem/1 var(--f-poster); letter-spacing:.22em; text-transform:uppercase; color:var(--fire); }
.btn { display:inline-flex; align-items:center; gap:.6em; font:800 .9rem/1 var(--f-poster); letter-spacing:.07em; text-transform:uppercase; background:var(--fire); color:#fff; padding:1.05em 1.5em; border:0; border-radius:3px; box-shadow:4px 4px 0 var(--ink); cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.hero .btn { box-shadow:4px 4px 0 var(--bone); } .hero .btn:hover { box-shadow:6px 6px 0 var(--bone); }
.btn--ghost { background:transparent; color:var(--bone); box-shadow:inset 0 0 0 2px var(--bone); }
.hero .btn--ghost:hover { background:var(--bone); color:var(--ink); box-shadow:inset 0 0 0 2px var(--bone); transform:none; }
.nav { position:fixed; inset:0 0 auto 0; z-index:200; height:var(--nav-h); background:rgba(10,8,7,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--bone-faint); color:var(--bone); }
.nav .wrap { height:100%; max-width:1280px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:center; gap:.7rem; }
.brand img { height:42px; width:auto; transition:transform .4s var(--ease); }
.brand:hover img { transform:rotate(-10deg) scale(1.08); }
.brand b { display:block; font:900 1.15rem/.9 var(--f-poster); text-transform:uppercase; }
.brand b i { font-style:normal; display:block; font-size:.5rem; letter-spacing:.24em; color:var(--sun); margin-bottom:4px; }
.brand b em { font-style:normal; color:var(--fire-soft); }
.nav-links { display:flex; align-items:center; gap:clamp(.9rem,2.2vw,2rem); }
.nav-links a:not(.btn) { font:800 .78rem/1 var(--f-poster); letter-spacing:.14em; text-transform:uppercase; padding:.5rem 0; position:relative; }
.nav-links a:not(.btn)::after { content:''; position:absolute; left:0; right:100%; bottom:0; height:3px; background:var(--fire-soft); transition:right .25s var(--ease); }
.nav-links a:not(.btn):hover::after { right:0; }
.nav .btn { padding:.8em 1.1em; font-size:.76rem; box-shadow:3px 3px 0 var(--bone); }
.sec { padding-block:clamp(3rem,6vw,5rem); }
.sec-head { margin-bottom:clamp(1.4rem,3vw,2.2rem); }
.sec-head h2 { font-size:clamp(2rem,4.2vw,3.2rem); }
.sec-head p { color:var(--text-mid); max-width:60ch; margin-top:.8rem; }
.tint { background:var(--cream-mid); border-block:1px solid var(--cream-border); }
.footer { background:var(--ink); color:var(--bone); padding-top:clamp(2.5rem,5vw,4rem); }
.footer-grid { display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:2rem; }
.footer h4 { font:800 .7rem/1 var(--f-poster); letter-spacing:.22em; text-transform:uppercase; color:var(--sun); margin-bottom:1rem; }
.footer li + li { margin-top:.5rem; }
.footer li a { color:var(--bone-dim); transition:color .15s; }
.footer li a:hover { color:var(--fire-soft); }
.footer .big-bird { display:flex; align-items:center; gap:1rem; }
.footer .big-bird img { height:64px; width:auto; }
.footer .big-bird p { font:900 1.3rem/.9 var(--f-poster); text-transform:uppercase; }
.footer .tagline { color:var(--bone-dim); margin-top:1rem; max-width:26ch; font-size:.95rem; }
.footer-bottom { border-top:1px solid var(--bone-faint); margin-top:clamp(2rem,4vw,3rem); padding-block:1.1rem; font-size:.85rem; color:var(--bone-dim); }
.oh { min-height:100svh; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding-top:var(--nav-h); background:#0e0704; color:var(--bone); }
.oh__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%; opacity:.70; filter:saturate(.7) contrast(1.05); }
.oh__overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(14,7,4,.96) 0%,rgba(14,7,4,.65) 45%,rgba(14,7,4,.25) 100%); }
.oh__content { position:relative; z-index:1; width:100%; max-width:calc(var(--max-w) + 2 * var(--gutter)); padding:0 max(var(--gutter),calc((100vw - var(--max-w)) / 2 + var(--gutter))) clamp(3.5rem,7vw,5.5rem); }
.oh__eyebrow { font:800 .72rem/1 var(--f-poster); letter-spacing:.2em; text-transform:uppercase; color:var(--sun); margin:0 0 1.5rem; }
.oh__title { font:700 clamp(2.5rem,5vw,4.5rem)/1 var(--f-serif); letter-spacing:-.015em; margin:0; color:#fdf8f2; }
.oh__title em { font-style:italic; font-weight:700; color:var(--fire-soft); }
.oh__tagline { font-size:clamp(.95rem,1.5vw,1.15rem); color:rgba(253,248,242,.78); line-height:1.7; max-width:520px; margin:1.5rem 0 2rem; }
.oh__ctas { display:flex; gap:1rem 1.2rem; flex-wrap:wrap; align-items:center; }
.oh__ghost { display:inline-flex; align-items:center; min-height:48px; padding:0 1.4em; font:800 .9rem/1 var(--f-poster); letter-spacing:.07em; text-transform:uppercase; color:#fdf8f2; border:2px solid rgba(253,248,242,.4); border-radius:3px; text-decoration:none; }
.oh__ghost:hover { border-color:#fdf8f2; background:rgba(253,248,242,.08); }
.oh__meta { display:flex; gap:1.75rem; margin-top:2rem; flex-wrap:wrap; font-size:.8rem; color:rgba(253,248,242,.58); }
.oh__meta strong { color:rgba(253,248,242,.9); font-weight:700; }
.oq { background:var(--fire); color:#fff; overflow:hidden; }
.oq__inner { display:grid; grid-template-columns:1fr 50%; align-items:center; }
.oq__content { padding:3rem 3rem 3rem max(var(--gutter),calc((100vw - var(--max-w)) / 2 + var(--gutter))); }
.oq__text { font:italic 400 clamp(1.1rem,2.4vw,1.75rem)/1.5 var(--f-serif); max-width:560px; margin:0 0 1rem; }
.oq__source { font:800 .78rem/1 var(--f-poster); letter-spacing:.1em; text-transform:uppercase; opacity:.85; margin:0; }
.oq__photo-wrap { position:relative; height:280px; overflow:hidden; }
.oq__photo-wrap::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to right,var(--fire) 0%,rgba(232,77,0,0) 40%); }
.oq__photo { width:100%; height:100%; object-fit:cover; object-position:center 12%; display:block; }
@media (max-width:768px) { .oh__img { object-position:40% 25%; } }
@media (max-width:700px) {
  .oq__inner { display:flex; flex-direction:column; }
  .oq__photo-wrap { order:-1; height:210px; width:100%; }
  .oq__photo-wrap::before { background:linear-gradient(to top,var(--fire) 0%,rgba(232,77,0,0) 40%); }
  .oq__content { padding:1.5rem var(--gutter) 2.5rem; text-align:center; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }
/* ---- Mobile shell ---- */
@media (max-width:860px){
  .nav .btn{min-height:40px}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-grid>:first-child{grid-column:1/-1}
  .footer li a{display:inline-block;padding-block:.4rem}.footer li+li{margin-top:0}
  .footer-bottom a{display:inline-block;padding-block:.35rem}
}
@media (max-width:768px){.oh__img{object-position:40% 25%}}
@media (max-width:700px){
  .oq__inner{display:flex;flex-direction:column}
  .oq__photo-wrap{order:-1;height:210px;width:100%}
  .oq__content{padding:1.5rem var(--gutter) 2.5rem;text-align:center}
}
.nav-links a[aria-current="page"]:not(.btn)::after{right:0}
.nav-links a[aria-current="page"]:not(.btn){color:var(--sun)}
.oh--short{min-height:min(72svh,620px)}
.oh--short .oh__img{opacity:1;filter:none;object-position:50% 16%}
.oh--short .oh__overlay{background:linear-gradient(90deg,rgba(14,7,4,.88) 0%,rgba(14,7,4,.6) 42%,rgba(14,7,4,.1) 100%)}
@media (max-width:768px){.oh--short .oh__img{object-position:55% 14%}.oh--short .oh__overlay{background:linear-gradient(to top,rgba(14,7,4,.94) 0%,rgba(14,7,4,.7) 55%,rgba(14,7,4,.2) 100%)}}

/* Mobile menu */
.nav-right,.only-m{display:none}
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;color:var(--bone)}
.nav-toggle span{display:block;width:24px;height:2.5px;background:currentColor;border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media (max-width:860px){
  .nav-right{display:flex;align-items:center;gap:.4rem}
  .nav-links .nav-reg-d{display:flex;justify-content:center;width:100%;margin-top:1.2rem;padding:1.15em 1.5em;font-size:.9rem}
  .only-m{display:block}
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;z-index:199;flex-direction:column;align-items:stretch;gap:0;padding:.4rem var(--gutter) 1.4rem;background:rgba(10,8,7,.98);border-bottom:1px solid var(--bone-faint);max-height:calc(100svh - var(--nav-h));overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s,transform .25s var(--ease),visibility .2s}
  .nav-links.open{opacity:1;visibility:visible;transform:none}
  .nav-links a:not(.btn){display:block;font-size:1rem;letter-spacing:.12em;padding:1.05rem 0;border-bottom:1px solid var(--bone-faint)}
  .nav-links a:not(.btn)::after{display:none}
  .nav-links a[aria-current="page"]:not(.btn){color:var(--sun)}
}
@media (max-width:420px){.brand b{font-size:1rem}.brand b i{letter-spacing:.16em}.brand img{height:36px}}

/* Contact as an envelope on desktop, plain text link in the mobile menu */
.nav-links a.nav-contact{display:inline-flex;align-items:center;padding:.5rem .35rem;color:var(--bone)}
.nav-contact svg{display:block;width:22px;height:22px;transition:transform .2s var(--ease)}
.nav-contact:hover svg{transform:translateY(-2px) rotate(-6deg)}
.nav-contact span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav-links a.nav-contact[aria-current="page"]{color:var(--sun)}
@media (max-width:860px){
  .nav-links a.nav-contact{display:block}
  .nav-contact svg{display:none}
  .nav-contact span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}