:root { --black:#050505; --steel:#c9c7c2; --muted:#8b8985; --ember:#d9601d; --ember-bright:#ef7a2c; --line:#272421; --mark-source:url('tribute-assets/service-and-team-marks.png'); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:var(--steel); font-family:var(--font-body),Arial,sans-serif; }
a { color:inherit; text-decoration:none; }

.site-header { height:82px; padding:0 7vw; display:flex; align-items:center; justify-content:space-between; position:absolute; z-index:20; width:100%; border-bottom:1px solid rgba(255,255,255,.08); }
.brand { display:flex; align-items:center; gap:13px; color:#fff; font-size:15px; font-weight:900; letter-spacing:.22em; }
.brand-mark { display:grid; place-items:center; width:34px; height:28px; color:var(--ember-bright); font-size:25px; line-height:1; }
nav { display:flex; gap:42px; }
nav a { color:#a8a6a3; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
nav a:hover { color:var(--ember-bright); }
.header-cta { padding:14px 20px; border:1px solid #a94516; background:linear-gradient(#8b3510,#491706); color:#fff; font-size:10px; font-weight:900; letter-spacing:.18em; }

.hero { min-height:100svh; position:relative; display:grid; grid-template-columns:52% 48%; overflow:hidden; border-bottom:1px solid var(--line); background:radial-gradient(circle at 34% 55%,#1d1009 0,#080605 33%,#030303 72%); }
.hero::before { content:""; position:absolute; inset:0; opacity:.2; background-image:linear-gradient(90deg,transparent 49.9%,#31261e 50%,transparent 50.1%),repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.018) 6px); pointer-events:none; }
.hero-glow { position:absolute; left:-15%; bottom:-35%; width:75%; aspect-ratio:1; border:1px solid rgba(215,86,20,.2); border-radius:50%; box-shadow:0 0 130px rgba(191,61,9,.12) inset; }
.hero-portrait-wrap { position:relative; align-self:end; height:calc(100% - 82px); margin-top:82px; }
.portrait-frame { position:absolute; inset:7% 3% 0 9%; overflow:hidden; clip-path:polygon(13% 0,90% 0,100% 16%,94% 100%,0 100%,0 12%); filter:saturate(.65) contrast(1.08); }
.portrait-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,3,3,.25),transparent 45%,rgba(3,3,3,.72)),linear-gradient(0deg,#050505 0,transparent 32%); }
.hero-portrait { object-fit:cover; object-position:center top; }
.portrait-number { position:absolute; left:4%; bottom:-5%; font:400 clamp(170px,23vw,340px)/.8 var(--font-display); color:rgba(255,255,255,.025); }
.hero-copy { position:relative; z-index:3; align-self:center; padding:130px 11% 70px 8%; }
.eyebrow { display:flex; align-items:center; gap:14px; color:var(--ember-bright); font-size:11px; font-weight:800; letter-spacing:.32em; text-transform:uppercase; }
.eyebrow span { width:45px; height:1px; background:var(--ember); }
h1 { margin:22px 0 0; font:400 clamp(64px,7vw,112px)/.76 var(--font-display); letter-spacing:.025em; color:#f0efec; text-shadow:0 3px 0 #282624,0 10px 28px #000; }
h1 span { color:transparent; -webkit-text-stroke:1px #a19c96; }
.hero-rule { margin:30px 0 25px; height:1px; background:linear-gradient(90deg,var(--ember),var(--line) 70%,transparent); position:relative; }
.hero-rule i { position:absolute; left:0; top:-2px; width:38%; height:5px; background:var(--ember); clip-path:polygon(0 40%,97% 40%,100% 50%,97% 60%,0 60%); }
.hero-tagline { margin:0; font:400 clamp(24px,2.3vw,37px)/1 var(--font-display); letter-spacing:.12em; color:#c8c5c0; }
.hero-tagline b { color:var(--ember-bright); font-weight:inherit; }
.hero-intro { max-width:550px; color:#8d8985; line-height:1.75; font-size:14px; margin:22px 0 30px; }
.dates { display:flex; align-items:center; gap:22px; }
.dates div { display:grid; gap:3px; }
.dates strong { font-size:10px; color:var(--ember-bright); letter-spacing:.2em; }
.dates span { font:400 30px/1 var(--font-display); letter-spacing:.08em; color:#e1ded9; }
.dates i { color:#58301d; font-style:normal; }
.scroll-cue { position:absolute; z-index:4; right:7vw; bottom:28px; display:flex; align-items:center; gap:16px; color:#77736f; font-size:9px; letter-spacing:.22em; writing-mode:vertical-rl; }
.scroll-cue i { font-style:normal; color:var(--ember); font-size:18px; }

.section { padding:120px 8vw; }
.section-kicker { color:var(--ember-bright); font-size:10px; font-weight:900; letter-spacing:.28em; margin-bottom:46px; }
.legacy { background:#080808; position:relative; overflow:hidden; }
.legacy::after { content:"LEGACY"; position:absolute; right:-2vw; top:22px; font:400 19vw/1 var(--font-display); color:rgba(255,255,255,.018); }
.legacy-grid { display:grid; grid-template-columns:1fr 1fr; gap:10vw; position:relative; z-index:2; }
h2 { margin:0; font:400 clamp(58px,7vw,108px)/.82 var(--font-display); letter-spacing:.03em; color:#ddd9d3; }
h2 em { color:var(--ember-bright); font-style:normal; }
.legacy-copy { padding-top:3px; }
.legacy-copy p { color:#85817c; font-size:14px; line-height:1.85; max-width:620px; }
.legacy-copy .lead { margin-top:0; color:#cbc7c1; font-size:20px; line-height:1.5; }
.roles { position:relative; z-index:2; display:grid; grid-template-columns:repeat(6,1fr); margin-top:85px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.role { min-height:125px; padding:22px 18px; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; }
.role:last-child { border-right:0; }
.role span { font-size:9px; color:var(--ember); letter-spacing:.2em; }
.role strong { font:400 22px/1 var(--font-display); color:#c8c5c0; letter-spacing:.08em; text-transform:uppercase; }

.quote-section { min-height:560px; padding:110px 8vw; display:grid; place-items:center; align-content:center; text-align:center; position:relative; overflow:hidden; background:radial-gradient(circle at 50% 40%,#2a1207,#0b0705 45%,#030303 75%); border-block:1px solid #241b16; }
.quote-section::before { content:""; position:absolute; inset:0; opacity:.2; background:repeating-radial-gradient(circle at 50% 100%,transparent 0 79px,#6a2a0d 80px 81px); }
.anvil { color:var(--ember); margin-bottom:26px; position:relative; }
blockquote { position:relative; margin:0; font:400 clamp(44px,6vw,88px)/.9 var(--font-display); letter-spacing:.025em; color:#d8d4ce; }
blockquote span { color:var(--ember-bright); }
.quote-section p { position:relative; margin-top:35px; color:#77726d; font-size:9px; letter-spacing:.3em; }

.artwork { background:#070707; }
.artwork-heading { display:grid; grid-template-columns:1fr 1.2fr; column-gap:8vw; align-items:end; }
.artwork-heading .section-kicker { grid-column:1/-1; }
.artwork-heading p { color:#85817c; font-size:14px; line-height:1.8; max-width:500px; margin:0 0 8px; }
.gallery { display:grid; grid-template-columns:1.05fr .95fr; grid-template-rows:390px 390px; gap:16px; margin-top:70px; }
.gallery-item { margin:0; position:relative; overflow:hidden; background:#111; border:1px solid #29231f; }
.gallery-item img { object-fit:cover; object-position:top; filter:saturate(.85) contrast(1.05); transition:transform .6s ease,filter .6s ease; }
.gallery-item:hover img { transform:scale(1.025); filter:saturate(1) contrast(1.03); }
.gallery-item::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 35%); }
.item-1 { grid-row:1/3; }
.gallery-item figcaption { position:absolute; z-index:2; left:24px; right:24px; bottom:21px; display:flex; justify-content:space-between; color:#b4b0aa; font-size:9px; font-weight:800; letter-spacing:.22em; }
.gallery-item figcaption b { color:var(--ember-bright); }

.honors { position:relative; overflow:hidden; background:radial-gradient(circle at 50% 0,#1b0c05 0,#090807 38%,#050505 75%); border-top:1px solid #241b16; }
.honors::before { content:""; position:absolute; inset:0; opacity:.14; background:repeating-linear-gradient(135deg,transparent 0 28px,rgba(255,255,255,.025) 29px 30px); pointer-events:none; }
.honors-heading { position:relative; display:grid; grid-template-columns:1fr 1.1fr; column-gap:8vw; align-items:end; }
.honors-heading .section-kicker { grid-column:1/-1; }
.honors-heading p { max-width:540px; margin:0 0 8px; color:#918d87; font-size:14px; line-height:1.8; }
.emblem-grid { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:72px; padding:1px; background:var(--line); }
.emblem-card { min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:linear-gradient(145deg,#0d0c0b,#070707); transition:background .25s ease; }
.emblem-card:hover { background:linear-gradient(145deg,#17100c,#090807); }
.mark-window { width:170px; height:145px; margin-bottom:18px; background-image:var(--mark-source); background-repeat:no-repeat; background-size:1024px 1536px; filter:saturate(.82) contrast(1.08); }
.badge-sheriff { background-position:-112px -548px; }
.badge-detention { background-position:-307px -548px; }
.badge-da { background-position:-462px -548px; }
.team-logo-wrap { width:190px; height:145px; margin-bottom:18px; display:grid; place-items:center; }
.actual-team-logo { display:block; width:170px; height:135px; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(0,0,0,.55)); }
.emblem-card>span { color:var(--ember-bright); font-size:8px; font-weight:900; letter-spacing:.28em; }
.emblem-card h3 { margin:10px 0 0; color:#d3d0ca; font:400 24px/1.05 var(--font-display); letter-spacing:.08em; text-transform:uppercase; }

footer { min-height:500px; padding:100px 8vw 40px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#030303; border-top:1px solid var(--line); }
.footer-mark { color:var(--ember); font-size:46px; }
footer h2 { margin-top:15px; font-size:clamp(58px,8vw,108px); }
footer>p { margin:12px 0; color:#817c76; font-size:10px; letter-spacing:.28em; }
.footer-rule { width:160px; height:1px; background:var(--ember); margin:28px 0; }
footer>strong { color:var(--ember-bright); font:400 24px/1 var(--font-display); letter-spacing:.15em; }
footer .copyright { margin-top:70px; color:#4d4945; font-size:8px; }

@media (max-width:900px) {
  nav { display:none; }
  .site-header { padding:0 5vw; }
  .hero { min-height:auto; display:block; padding-top:82px; }
  .hero-portrait-wrap { height:68vh; min-height:500px; margin:0; }
  .portrait-frame { inset:5% 5% 0; }
  .hero-copy { padding:55px 8vw 110px; }
  .scroll-cue { display:none; }
  .legacy-grid,.artwork-heading,.honors-heading { grid-template-columns:1fr; gap:45px; }
  .roles { grid-template-columns:repeat(3,1fr); }
  .role:nth-child(3) { border-right:0; }
  .role:nth-child(-n+3) { border-bottom:1px solid var(--line); }
  .gallery { grid-template-columns:1fr 1fr; grid-template-rows:600px 360px; }
  .item-1 { grid-column:1/-1; grid-row:auto; }
  .emblem-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:560px) {
  .header-cta { display:none; }
  .site-header { justify-content:center; }
  .hero-portrait-wrap { height:56vh; min-height:430px; }
  .portrait-frame { inset:8% 0 0; clip-path:polygon(8% 0,92% 0,100% 10%,96% 100%,0 100%,0 8%); }
  .hero-copy { padding-inline:7vw; }
  h1 { font-size:clamp(64px,22vw,92px); }
  .section { padding:90px 7vw; }
  .roles { grid-template-columns:repeat(2,1fr); }
  .role:nth-child(3) { border-right:1px solid var(--line); }
  .role:nth-child(even) { border-right:0; }
  .role:nth-child(-n+4) { border-bottom:1px solid var(--line); }
  .quote-section { min-height:480px; padding-inline:7vw; }
  .quote-section p { line-height:2; }
  .gallery { display:flex; flex-direction:column; }
  .gallery-item { height:520px; }
  .emblem-grid { grid-template-columns:1fr; }
  .emblem-card { min-height:310px; }
  footer { min-height:440px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .gallery-item img { transition:none; } }