:root { --black:#070707; --panel:#111214; --cream:#f4f1e8; --muted:#a5a5a2; --yellow:#f2c300; --line:#292929; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:var(--cream); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1380px, calc(100% - 96px)); margin:0 auto; }
.hero { min-height:900px; position:relative; overflow:hidden; background:#050505; }
.site-header { height:112px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; border-bottom:1px solid rgba(255,255,255,.07); }
.brand { display:flex; align-items:center; gap:22px; text-transform:uppercase; }
.brand-mark { color:var(--yellow); font:900 italic 32px/1 Arial,sans-serif; letter-spacing:-5px; transform:skew(-8deg); }
.brand-name { border-left:1px solid #555; padding-left:22px; font-size:20px; font-weight:800; letter-spacing:.25em; }
nav { display:flex; gap:56px; }
nav a { padding:43px 0 39px; color:#e8e5df; font-size:14px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; border-bottom:3px solid transparent; }
nav a:hover, nav a:focus-visible, nav .active { color:var(--yellow); border-color:var(--yellow); }
.hero-car { position:absolute; inset:82px 0 0 44%; background-image:url("/punto/albums/bumpers_new/normal_day10_01.jpg"); background-size:cover; background-position:42% center; filter:saturate(1.12) contrast(1.06); }
.hero-car:after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(242,195,0,.05),transparent 45%),radial-gradient(circle at 65% 45%,transparent 0,rgba(0,0,0,.1) 35%,rgba(0,0,0,.78) 100%); }
.hero-scrim { position:absolute; inset:0; background:linear-gradient(90deg,#050505 0%,#050505 43%,rgba(5,5,5,.9) 52%,rgba(5,5,5,.08) 78%),linear-gradient(0deg,#050505 0%,transparent 26%); }
.hero-grid { min-height:788px; position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; padding:70px 0 92px; }
.hero-copy { align-self:center; }
.kicker,.section-kicker { margin:0 0 18px; color:var(--yellow); text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.22em; }
h1 { margin:0; max-width:760px; font-family:"Arial Narrow",Impact,sans-serif; font-size:clamp(64px,6.5vw,106px); line-height:.87; letter-spacing:-.045em; text-transform:uppercase; }
h1 em { color:var(--yellow); font-style:normal; }
.intro { margin:28px 0 0; color:#b4b3af; font-size:19px; line-height:1.55; }
.hero-actions { display:flex; gap:16px; margin-top:30px; }
.button { min-height:60px; padding:0 27px; display:inline-flex; align-items:center; justify-content:center; gap:26px; border:1px solid var(--yellow); font-weight:800; }
.button.primary { background:var(--yellow); color:#080808; }
.button.secondary { background:rgba(8,8,8,.72); }
.button:hover,.button:focus-visible { transform:translateY(-2px); box-shadow:0 8px 22px rgba(242,195,0,.14); }
.quick-socials { display:flex; gap:0; margin-top:28px; }
.quick-socials a { display:flex; align-items:center; gap:9px; color:#aaa9a5; padding:4px 19px; border-left:1px solid #444; font-size:13px; }
.quick-socials a:first-child { padding-left:0; border:0; }
.quick-socials span { color:#e6e3dc; font-size:11px; font-weight:900; }
.quick-socials a:hover { color:var(--yellow); }
.status-card { justify-self:end; align-self:end; margin-bottom:42px; width:min(430px,90%); padding:26px 28px; display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; background:rgba(15,16,17,.92); border:1px solid #765f00; box-shadow:0 15px 50px rgba(0,0,0,.45); }
.status-icon { width:62px; height:62px; display:grid; place-items:center; border:1px solid var(--yellow); border-radius:50%; color:var(--yellow); font-size:38px; font-weight:200; }
.status-card strong,.status-card small { display:block; }
.status-card strong { color:var(--yellow); font-family:Impact,"Arial Narrow",sans-serif; font-size:28px; letter-spacing:.08em; text-transform:uppercase; }
.status-card small { margin-top:6px; color:#bbb; font-size:14px; }
.section { padding:112px 0; }
.section-heading { display:grid; grid-template-columns:1fr 440px; gap:60px; align-items:end; margin-bottom:48px; }
h2 { margin:0; font-family:Impact,"Arial Narrow",sans-serif; font-size:54px; line-height:.96; letter-spacing:.01em; text-transform:uppercase; }
.section-heading>p { margin:0; color:var(--muted); font-size:16px; line-height:1.7; }
.streams { border-bottom:1px solid var(--line); }
.social-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); }
.social-card { min-height:150px; padding:28px; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; border-right:1px solid var(--line); background:#0d0e0f; }
.social-card:last-child { border-right:0; }
.social-card:hover { background:#151515; box-shadow:inset 0 -3px var(--yellow); }
.social-mark { width:44px; height:44px; display:grid; place-items:center; border:1px solid #414141; color:var(--yellow); font-weight:900; }
.social-card strong,.social-card small { display:block; }
.social-card small { margin-top:7px; color:#888; }
.about { background:var(--yellow); color:#080808; }
.about-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:110px; }
.about .section-kicker { color:#080808; opacity:.65; }
.about-copy { display:grid; grid-template-columns:1fr 1fr; gap:38px; }
.about-copy p { margin:0; font-size:18px; line-height:1.65; }
.archive-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.archive-card { min-height:470px; position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line); }
.archive-image { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .45s ease; }
.archive-card:hover .archive-image { transform:scale(1.035); }
.archive-content { position:absolute; inset:auto 0 0; padding:32px; }
.archive-content small { color:var(--yellow); font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.archive-content h3 { margin:10px 0 9px; font-family:Impact,"Arial Narrow",sans-serif; font-size:38px; text-transform:uppercase; }
.archive-content p { margin:0 0 20px; color:#bbb; line-height:1.55; }
.archive-content span { color:var(--yellow); font-weight:800; }
footer { border-top:1px solid var(--line); padding:42px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; color:#858585; font-size:13px; }
.footer-inner>a:last-child { color:var(--cream); }

@media (max-width:950px) {
  .shell { width:min(100% - 40px,1380px); }
  .site-header { height:90px; }
  nav { gap:22px; }
  nav a { padding:34px 0 31px; font-size:11px; }
  .hero { min-height:auto; }
  .hero-car { inset:90px 0 0 25%; opacity:.55; }
  .hero-scrim { background:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.94) 55%,rgba(5,5,5,.25)),linear-gradient(0deg,#050505 0%,transparent 30%); }
  .hero-grid { min-height:760px; grid-template-columns:1fr; }
  .status-card { justify-self:start; width:430px; margin:30px 0 0; }
  .social-grid { grid-template-columns:1fr 1fr; }
  .social-card:nth-child(2) { border-right:0; }
  .social-card:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .section-heading { grid-template-columns:1fr; gap:22px; }
  .about-grid { gap:50px; }
  .archive-grid { grid-template-columns:1fr; }
  .archive-card { min-height:400px; }
}

@media (max-width:640px) {
  .shell { width:calc(100% - 32px); }
  .site-header { align-items:center; }
  .brand-name { font-size:14px; }
  .site-header nav { display:none; }
  .hero-grid { min-height:740px; padding:58px 0 70px; }
  .hero-car { left:10%; background-position:55% center; }
  h1 { font-size:55px; }
  .intro br { display:none; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .quick-socials { display:grid; grid-template-columns:1fr 1fr; row-gap:14px; }
  .quick-socials a:nth-child(3) { border:0; padding-left:0; }
  .status-card { width:100%; margin-bottom:0; padding:20px; }
  .section { padding:78px 0; }
  h2 { font-size:43px; }
  .social-grid { grid-template-columns:1fr; }
  .social-card { border-right:0; border-bottom:1px solid var(--line); }
  .social-card:last-child { border-bottom:0; }
  .about-grid,.about-copy { grid-template-columns:1fr; gap:32px; }
  .archive-card { min-height:430px; }
  .footer-inner { flex-direction:column; gap:26px; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }

.story-page { background:#080808; min-height:100vh; }
.story-nav { height:104px; display:flex; align-items:center; justify-content:space-between; }
.back-link { color:#c4c2bc; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.back-link:hover { color:var(--yellow); }
.story-hero { min-height:720px; display:flex; align-items:center; background-size:cover; background-position:center; position:relative; }
.story-hero:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.93) 38%,rgba(5,5,5,.14) 76%),linear-gradient(0deg,#080808,transparent 38%); }
.story-hero>div { position:relative; z-index:1; }
.story-hero p:last-child { max-width:560px; color:#c0bfbb; font-size:18px; line-height:1.6; }
.punto-story { background-image:url("/punto/albums/bumpers_new/normal_day10_03.jpg"); }
.modball-story { background-image:url("/images/modballroute.jpg"); }
.story-body { display:grid; grid-template-columns:.8fr 1.2fr; gap:120px; padding-top:120px; padding-bottom:120px; }
.story-copy { max-width:720px; }
.story-copy p { margin:0 0 28px; color:#bbb9b3; font-size:18px; line-height:1.75; }
.gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; padding-bottom:120px; }
.gallery img { width:100%; height:330px; object-fit:cover; filter:saturate(.92); }
.gallery img:nth-child(1),.gallery img:nth-child(4) { grid-column:span 7; }
.gallery img:nth-child(2),.gallery img:nth-child(3) { grid-column:span 5; }
.gallery img:nth-child(5),.gallery img:nth-child(6) { grid-column:span 6; }
.spec-section,.route-section { background:#111214; padding:120px 0; }
.spec-list { margin-top:56px; border-top:1px solid #343434; }
.spec-list article { display:grid; grid-template-columns:260px 1fr; gap:50px; padding:30px 0; border-bottom:1px solid #343434; }
.spec-list h3 { margin:0; color:var(--yellow); font:34px/1 Impact,"Arial Narrow",sans-serif; text-transform:uppercase; }
.spec-list p { margin:0; max-width:850px; color:#bbb; line-height:1.7; }
.manual-link { margin-top:42px; }
.route-grid { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:100px; }
.route-grid img { width:100%; max-height:680px; object-fit:cover; border:1px solid #363636; }
.route-grid ol { list-style:none; padding:0; margin:48px 0 0; border-top:1px solid #343434; }
.route-grid li { display:flex; gap:24px; padding:17px 0; border-bottom:1px solid #343434; font-weight:700; }
.route-grid li span { color:var(--yellow); }
@media (max-width:850px) {
  .story-hero { min-height:620px; }
  .story-body,.route-grid { grid-template-columns:1fr; gap:48px; }
  .gallery { grid-template-columns:1fr 1fr; }
  .gallery img { grid-column:auto!important; height:260px; }
  .spec-list article { grid-template-columns:1fr; gap:12px; }
}
@media (max-width:560px) {
  .story-nav .brand-name { display:none; }
  .story-hero { min-height:570px; }
  .story-body { padding-top:80px; padding-bottom:80px; }
  .gallery { grid-template-columns:1fr; padding-bottom:80px; }
  .gallery img { height:270px; }
  .spec-section,.route-section { padding:80px 0; }
}

.gallery-page { min-height:100vh; background:#080808; }
.gallery-intro { padding:92px 0 82px; border-bottom:1px solid var(--line); }
.gallery-intro h1 { font-size:clamp(72px,9vw,142px); }
.gallery-summary { display:grid; grid-template-columns:1fr auto auto; align-items:end; gap:60px; margin-top:55px; }
.gallery-summary>p { max-width:600px; margin:0; color:#aaa; font-size:18px; line-height:1.65; }
.gallery-summary strong { color:var(--yellow); font:52px/1 Impact,"Arial Narrow",sans-serif; }
.gallery-summary small { display:block; margin-top:8px; color:#8d8d8a; font:700 11px/1 Arial,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.album-browser { padding:55px 0 120px; }
.gallery-filters { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:40px; }
.gallery-filters button { padding:13px 18px; border:1px solid #343434; background:#101112; color:#aaa; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; cursor:pointer; }
.gallery-filters button:hover,.gallery-filters .selected { background:var(--yellow); border-color:var(--yellow); color:#080808; }
.album-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.album-card { padding:0; overflow:hidden; border:1px solid #292929; background:#101112; color:var(--cream); text-align:left; cursor:pointer; }
.album-cover { display:block; height:280px; overflow:hidden; background:#161616; }
.album-cover img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.album-card:hover .album-cover img { transform:scale(1.035); }
.album-meta { display:block; min-height:168px; padding:24px; position:relative; }
.album-meta small { display:block; color:var(--yellow); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.album-meta strong { display:block; margin-top:9px; font-family:Impact,"Arial Narrow",sans-serif; font-size:28px; line-height:1.05; text-transform:uppercase; }
.album-meta>span { position:absolute; inset:auto 24px 22px; display:flex; justify-content:space-between; color:#868686; font-size:12px; font-weight:700; }
.album-meta b { color:var(--yellow); }
.album-title { padding:82px 0 60px; }
.album-title h1 { max-width:1100px; font-size:clamp(55px,8vw,112px); line-height:.9; }
.album-title>p:last-child { color:#999; font-size:14px; text-transform:uppercase; letter-spacing:.12em; }
.photo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding-bottom:120px; }
.photo-grid button { aspect-ratio:1; padding:0; overflow:hidden; border:0; background:#171717; cursor:zoom-in; }
.photo-grid img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease,filter .3s ease; }
.photo-grid button:hover img { transform:scale(1.04); filter:brightness(1.12); }
.lightbox { position:fixed; inset:0; z-index:100; display:grid; grid-template-columns:80px 1fr 80px; align-items:center; background:rgba(0,0,0,.96); }
.lightbox figure { height:100vh; margin:0; padding:50px 20px 30px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.lightbox figure img { max-width:100%; max-height:calc(100vh - 125px); object-fit:contain; }
.lightbox figcaption { width:min(100%,1000px); display:flex; gap:30px; justify-content:center; padding-top:16px; color:#8d8d8d; font-size:12px; }
.lightbox figcaption p { margin:0; color:#d7d4cd; }
.lightbox button { border:0; background:transparent; color:#eee; cursor:pointer; }
.lightbox-close { position:absolute; top:22px; right:28px; z-index:2; font-size:40px; }
.lightbox-prev,.lightbox-next { height:100%; font-size:60px; }
.lightbox button:hover { color:var(--yellow); }
@media (max-width:900px) {
  .album-grid { grid-template-columns:repeat(2,1fr); }
  .photo-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:600px) {
  .gallery-intro { padding:62px 0; }
  .gallery-summary { grid-template-columns:1fr 1fr; gap:32px; }
  .gallery-summary>p { grid-column:1/-1; }
  .album-grid { grid-template-columns:1fr; }
  .album-cover { height:250px; }
  .photo-grid { grid-template-columns:repeat(2,1fr); gap:5px; padding-bottom:80px; }
  .lightbox { grid-template-columns:44px 1fr 44px; }
  .lightbox figure { padding-left:0; padding-right:0; }
}