/* Underground Skate: a photocopied skate zine stapled to a camcorder viewfinder, from the game's own brand
   file and title screen. Asphalt-slate ground, newsprint-chalk ink, sodium gold held to actions and the
   SKATE sticker, the REC red only for the recording mark, 1px rules with viewfinder corner brackets.
   Libre Franklin is what the build renders for display and text; JetBrains Mono is for timecodes only. */
@font-face{font-family:"Libre Franklin";src:url("/games/underground-skate/fonts/libre-franklin-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url("/games/underground-skate/fonts/libre-franklin-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/games/underground-skate/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

.sk-site{
  --ground:#14161b;--panel:#1c1f26;--panel-2:#252932;--rule:#2d323e;--ink:#eceae4;--slate:#a0a5b1;--gold:#ffd100;--rec:#ff2a54;
  --sans:"Libre Franklin",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--display:var(--sans)}
body.sk-site{background:var(--ground)}
.sk-site main{position:relative;background:var(--ground);box-shadow:0 0 0 100vmax var(--ground);clip-path:inset(0 -100vmax);color:var(--ink);font-family:var(--sans);font-weight:600}
.sk-site main h2,.sk-site main h3{font-family:var(--sans);font-weight:700;text-transform:none;letter-spacing:-.01em;color:var(--ink)}
.sk-site main p{line-height:1.6}
.sk-site main :focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.sk-site main a:hover{color:inherit}
.sk-site main section{scroll-margin-top:96px}

/* Actions */
.sk-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sk-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px;border:1px solid var(--ink);color:var(--ink);font-weight:700;font-size:16px;text-decoration:none;transition:background .15s,color .15s,transform .15s}
.sk-btn:hover{background:var(--panel-2)}
.sk-btn:active{transform:translateY(1px)}
.sk-btn.primary{background:var(--gold);border-color:var(--gold);color:var(--ground)}
.sk-site .sk-btn.primary:hover{background:var(--ink);border-color:var(--ink);color:var(--ground)}

/* Viewfinder frame: a 1px rule with 12px corner brackets, the way the game frames its title screen */
.sk-frame{position:relative;display:block;border:1px solid var(--rule)}
.sk-frame::before,.sk-frame::after{content:"";position:absolute;width:12px;height:12px;pointer-events:none;z-index:1}
.sk-frame::before{top:-5px;left:-5px;border-top:2px solid var(--ink);border-left:2px solid var(--ink)}
.sk-frame::after{bottom:-5px;right:-5px;border-bottom:2px solid var(--ink);border-right:2px solid var(--ink)}

/* Hero: the title-screen lockup beside a frame from the game */
.sk-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center;padding:64px 0 40px}
.sk-tag{margin:0;font-size:15px;color:var(--slate)}
.sk-site .sk-title{margin:18px 0 0;font-family:var(--sans);font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:0}
.sk-under{display:block;font-size:clamp(40px,4.5vw,72px);letter-spacing:.02em;color:var(--ink)}
/* SKATE on a tilted gold sticker with a halftone wash and an offset shadow block, as on the title screen */
.sk-sticker{position:relative;display:inline-block;margin:8px 0 0 -6px;padding:.02em .16em .06em;font-size:clamp(76px,8.6vw,136px);color:var(--ground);
  background:radial-gradient(rgba(20,22,27,.1) 28%,transparent 31%) 0 0/9px 9px,var(--gold);box-shadow:10px 10px 0 rgba(20,22,27,.75),10px 10px 0 1px var(--rule);transform:rotate(-5deg);transform-origin:left bottom}
.sk-sticker::after{content:"";position:absolute;right:-26px;top:-14px;width:84px;height:24px;background:rgba(236,234,228,.6);transform:rotate(28deg)}
.sk-lead{max-width:42ch;margin:40px 0 0;font-size:20px;color:var(--ink)}
.sk-hero-art img{display:block;width:100%;height:auto}
.sk-rec{position:absolute;top:14px;right:16px;display:flex;align-items:center;gap:8px;padding:4px 10px 4px 8px;background:rgba(20,22,27,.78);font:500 14px var(--mono);color:var(--ink)}
.sk-rec::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--rec)}
.sk-status{grid-column:1/-1;max-width:78ch;margin:0;padding:12px 16px;border-left:3px solid var(--gold);background:var(--panel);font-size:15px;color:var(--slate)}
.sk-status b{color:var(--ink)}
.sk-site .sk-subnav{border-bottom:1px solid var(--rule);font-weight:700;color:var(--ink)}
.sk-site .sk-subnav a[aria-current]{text-decoration-color:var(--gold)}

/* Sections */
.sk-footage,.sk-tricks,.sk-detroit,.sk-tour{padding:88px 0 0}
.sk-head{max-width:760px;margin-bottom:32px}
.sk-tour .sk-head{max-width:920px}
.sk-head h2,.sk-close h2{margin:0;font-size:clamp(36px,4.2vw,56px);line-height:1.02;text-transform:uppercase}
.sk-head p{margin:14px 0 0;font-size:18px;color:var(--slate)}

/* Footage */
.sk-clips{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px}
.sk-clip{margin:0}
.sk-clip.lead{grid-row:span 2}
.sk-clip video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--panel)}
.sk-clip figcaption{display:flex;flex-direction:column;gap:2px;padding:12px 0 0;font-size:14px;color:var(--slate)}
.sk-clip figcaption b{font-size:16px;color:var(--ink)}

/* Tricks */
.sk-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0 0 40px;padding:0;list-style:none}
.sk-steps li{padding-top:14px;border-top:3px solid var(--gold);font-size:16px;line-height:1.55;color:var(--slate)}
.sk-steps b{display:block;margin-bottom:6px;font-size:22px;line-height:1.15;color:var(--ink);text-transform:uppercase}
.sk-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sk-shots.one{grid-template-columns:1fr;margin-top:28px}
.sk-shot{display:block;background:var(--panel);color:var(--ink);text-decoration:none;border:1px solid var(--rule);transition:transform .15s,border-color .15s}
.sk-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.sk-shot span{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 14px 11px}
.sk-shot b{font-size:15px;white-space:nowrap}
.sk-shot small{font-size:13px;color:var(--slate);text-align:right}
.sk-shot:hover{transform:translateY(-2px);border-color:var(--gold)}

/* Detroit: the story and its goal givers */
.sk-detroit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 56px;align-items:start}
.sk-note{margin:0;padding-left:16px;border-left:3px solid var(--gold);font-weight:700;color:var(--ink)}
.sk-givers{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.sk-givers li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:2px 20px;padding:14px 0;border-bottom:1px solid var(--rule)}
.sk-givers b{grid-row:span 2;font-size:20px;line-height:1.2;text-transform:uppercase}
.sk-givers .sk-role{font-size:14px;color:var(--gold)}
.sk-givers span:last-child{font-size:15.5px;color:var(--slate)}

.sk-more{margin:16px 0 0;font-size:16px;color:var(--gold)}

/* The tour: one stop shown, a tape label with the counter, the rest left for the player */
.sk-stop{display:inline-flex;flex-direction:column;gap:6px;margin:0;padding:20px 28px 22px;background:var(--panel);border:1px solid var(--rule);border-left:4px solid var(--gold)}
.sk-stop span:first-child{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.sk-stop b{font-size:clamp(40px,5vw,64px);line-height:1;text-transform:uppercase}
.sk-stop span:last-child{font-size:16px;color:var(--slate)}

.sk-close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin-top:96px;padding:56px 0 72px;border-top:1px solid var(--rule)}
.sk-close p{margin:0;font-size:18px;color:var(--slate)}

@media (max-width:1100px){
  .sk-hero{grid-template-columns:minmax(0,1fr);gap:40px}
  .sk-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sk-detroit{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .sk-hero{padding:36px 0 32px;gap:32px}
  .sk-under{font-size:min(11vw,58px)}
  .sk-sticker{font-size:min(24vw,108px);box-shadow:6px 6px 0 rgba(20,22,27,.75),6px 6px 0 1px var(--rule)}
  .sk-sticker::after{right:-6px;top:-10px;width:48px;height:16px}
  .sk-lead{margin-top:32px;font-size:18px}
  .sk-footage,.sk-tricks,.sk-detroit,.sk-tour{padding-top:60px}
  .sk-head p{font-size:17px}
  .sk-clips{grid-template-columns:minmax(0,1fr)}
  .sk-clip.lead{grid-row:auto}
  .sk-steps{grid-template-columns:1fr;gap:18px}
  .sk-shots{grid-template-columns:1fr}
  .sk-shot span{flex-direction:column;gap:2px}
  .sk-shot small{text-align:left}
  .sk-givers li{grid-template-columns:1fr}
  .sk-givers b{grid-row:auto}
  .sk-close{grid-template-columns:1fr;gap:20px;margin-top:64px}
}
@media (prefers-reduced-motion:reduce){.sk-shot,.sk-btn{transition:none}.sk-shot:hover,.sk-btn:active{transform:none}}

/* Header and footer on the asphalt, edge to edge, with a gold rule */
.sk-site .site-nav,.sk-site footer{background-image:none}
.sk-site .site-nav::after{display:none}
.sk-site .nav-links{font-family:var(--sans);font-weight:700;text-transform:uppercase;font-size:14px;color:var(--ink)}
.sk-site .nav-links a::after{background:var(--gold)}
.sk-site .brand-subtitle{color:var(--gold)!important}
.sk-site .site-nav{background:var(--ground);border-bottom:0;box-shadow:0 0 0 100vmax var(--ground);clip-path:inset(0 -100vmax -1px)}
.sk-site .site-nav::before{content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);bottom:-1px;height:1px;background:var(--rule);pointer-events:none}
.sk-site footer{background:var(--panel);border-top:0;overflow:visible;color:var(--slate);box-shadow:0 0 0 100vmax var(--panel);clip-path:inset(-10px -100vmax 0)}
.sk-site footer::before{display:block!important;content:"";position:absolute;inset:-1px calc(50% - 50vw) auto;width:auto;height:2px;opacity:1;background:var(--gold)}
.sk-site footer::after{color:var(--ink);font-family:var(--sans);font-weight:700;text-transform:uppercase}
.sk-site footer .footer-row{border-top-color:var(--rule)}