/* Sketchbook Ops: the field notebook the game is built around. Cream paper, graphite ink, red pencil for
   headings and actions, a red margin rule down each page, the charcoal desk for the header and footer, as on
   the game's own menu and briefing pages. Footage sits on the page like prints with a white border. Kalam
   stands in for the game's hand lettering; Barlow, the site face, carries the reading text. */
@font-face{font-family:"Kalam";src:url("/games/sketchbook-ops/fonts/kalam-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Kalam";src:url("/games/sketchbook-ops/fonts/kalam-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

.sb-site{
  --paper:#efe8d6;--paper-2:#e5dcc5;--print:#fbf8f0;--ink:#26252b;--lead:#4b4851;--rule:rgba(38,37,43,.2);--red:#a32d27;--margin:rgba(163,45,39,.5);
  --desk:#1f1e24;--desk-2:#2a2930;--chalk:#ece5d3;--dim:#b8b1a3;
  --hand:"Kalam","Segoe Print",cursive;--sans:Barlow,Arial,sans-serif;--display:var(--hand)}
body.sb-site{background:var(--paper)}
.sb-site main{position:relative;background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax);color:var(--ink);font-family:var(--sans);font-weight:500}
.sb-site main h2,.sb-site main h3,.sb-site main h4{font-family:var(--hand);font-weight:700;text-transform:none;letter-spacing:0;color:var(--ink)}
.sb-site main p{line-height:1.6}
.sb-site main :focus-visible{outline:3px solid var(--red);outline-offset:3px}
.sb-site main a:hover{color:inherit}
.sb-site main section{scroll-margin-top:96px}

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

/* A print laid on the page: white border, soft shadow */
.sb-print{display:block;padding:8px;background:var(--print);box-shadow:0 1px 2px rgba(38,37,43,.18),0 10px 24px -8px rgba(38,37,43,.35)}

/* Hero: the cover, title hand-lettered with a red pencil rule under it, and a print of the firefight */
.sb-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center;padding:64px 0 40px}
.sb-tag{margin:0;font-size:15px;font-weight:600;color:var(--lead)}
.sb-site .sb-title{position:relative;margin:14px 0 0;padding-bottom:18px;font-family:var(--hand);font-weight:700;font-size:clamp(60px,7.2vw,116px);line-height:.95;letter-spacing:0;text-transform:none;color:var(--ink)}
.sb-title::after{content:"";position:absolute;left:4px;bottom:0;width:min(88%,560px);height:6px;border-radius:3px;background:var(--red);transform:rotate(-1deg)}
.sb-lead{max-width:44ch;margin:28px 0 0;font-size:20px;color:var(--ink)}
.sb-hero-art{transform:rotate(1.2deg);transition:transform .2s}
.sb-hero-art:hover{transform:rotate(0)}
.sb-hero-art img,.sb-shot img{display:block;width:100%;height:auto}
.sb-status{grid-column:1/-1;max-width:78ch;margin:0;padding:12px 16px;border-left:3px solid var(--red);background:var(--paper-2);font-size:15px;color:var(--lead)}
.sb-status b{color:var(--ink)}
.sb-site .sb-subnav{border-bottom:1px solid var(--rule);font-weight:700;color:var(--ink)}
.sb-site .sb-subnav a[aria-current]{text-decoration-color:var(--red)}

/* Pages: each section ruled down the left like the notebook's margin */
.sb-page{margin-top:88px;padding-left:clamp(20px,3vw,40px);border-left:2px solid var(--margin)}
.sb-head{max-width:760px;margin-bottom:32px}
.sb-site .sb-head h2,.sb-site .sb-close h2{margin:0;font-size:clamp(40px,4.6vw,64px);line-height:1;color:var(--red)}
.sb-head p{margin:14px 0 0;font-size:18px;color:var(--lead)}
.sb-head p.sb-aside,.sb-aside{font-family:var(--hand);font-size:19px;line-height:1.4;color:var(--ink)}

/* Footage: the mission in full, three clips under it */
.sb-clip{margin:0}
.sb-clip video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--desk)}
.sb-clip figcaption{display:flex;flex-direction:column;gap:2px;padding:12px 0 0;font-size:15px;color:var(--lead)}
.sb-clip figcaption b{font-family:var(--hand);font-size:22px;line-height:1.2;color:var(--ink)}
.sb-clip.lead figcaption b{font-size:26px}
.sb-clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:32px}

/* The story beside the briefing */
.sb-briefing{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px 56px;align-items:start}
.sb-story p{max-width:56ch;margin:0 0 16px;font-size:18px;color:var(--ink)}
.sb-story .sb-aside{margin-top:24px;padding-left:16px;border-left:3px solid var(--red)}
.sb-story .sb-head{margin-bottom:24px}

/* Operations: the file of fourteen, three declassified and the rest blacked out in graphite */
.sb-file{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.sb-file li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;min-height:96px;padding:16px 0;border-bottom:1px solid var(--rule)}
.sb-num{font-family:var(--hand);font-weight:700;font-size:22px;line-height:1.1;color:var(--red)}
.sb-site .sb-file h3{margin:0;font-family:var(--sans);font-size:17px;font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:.02em}
.sb-file p{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--ink)}
.sb-file p.sb-place{margin-top:2px;font-size:14px;font-weight:600;color:var(--lead)}
.sb-redacted .sb-num{color:var(--lead)}
.sb-bar{display:block;width:72%;height:16px;margin:2px 0 10px;border-radius:2px;background:var(--ink);opacity:.86;transform:rotate(-.4deg)}
.sb-bar.short{width:44%;transform:rotate(.3deg)}
.sb-file li:nth-child(3n) .sb-bar:not(.short){width:61%}.sb-file li:nth-child(4n) .sb-bar:not(.short){width:80%}.sb-file li:nth-child(5n) .sb-bar.short{width:55%}.sb-file li:nth-child(4n+1) .sb-bar.short{width:36%}

/* The look: prints of five operations */
.sb-shots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px}
.sb-shot{grid-column:span 2;color:var(--ink);text-decoration:none;transition:transform .15s}
.sb-shot.wide{grid-column:span 3}
.sb-shot span{display:block;padding:10px 4px 4px;font-size:14px;line-height:1.45;color:var(--lead)}
.sb-shot b{display:block;font-family:var(--hand);font-size:20px;line-height:1.2;color:var(--ink)}
.sb-shot:hover{transform:translateY(-3px) rotate(-.4deg)}
.sb-shot{padding:8px;background:var(--print);box-shadow:0 1px 2px rgba(38,37,43,.18),0 10px 24px -8px rgba(38,37,43,.35)}

/* Multiplayer */
.sb-mp{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px 56px;align-items:center}
.sb-mp .sb-head{margin:0}
.sb-shot.mp{grid-column:auto}

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

@media (max-width:1100px){
  .sb-hero{grid-template-columns:minmax(0,1fr);gap:40px}
  .sb-briefing,.sb-mp{grid-template-columns:minmax(0,1fr)}
  .sb-shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-shot,.sb-shot.wide{grid-column:auto}
  .sb-shot.wide:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  .sb-hero{padding:36px 0 32px;gap:32px}
  .sb-site .sb-title{font-size:min(17vw,76px)}
  .sb-lead{font-size:18px}
  .sb-hero-art{transform:none}
  .sb-page{margin-top:60px;padding-left:14px}
  .sb-head p{font-size:17px}
  .sb-clips{grid-template-columns:minmax(0,1fr);gap:24px}
  .sb-file{grid-template-columns:minmax(0,1fr)}
  .sb-file li{min-height:0}
  .sb-file .sb-redacted{padding:12px 0}
  .sb-bar{height:13px;margin-bottom:8px}
  .sb-shots{grid-template-columns:minmax(0,1fr);gap:20px}
  .sb-close{grid-template-columns:1fr;gap:20px;margin-top:64px}
}
@media (prefers-reduced-motion:reduce){.sb-shot,.sb-btn,.sb-hero-art{transition:none}.sb-shot:hover,.sb-btn:active,.sb-hero-art:hover{transform:none}}

/* Header and footer on the charcoal desk, edge to edge, with a red pencil rule */
.sb-site .site-nav,.sb-site footer{background-image:none}
.sb-site .site-nav::after{display:none}
.sb-site .nav-links{font-family:var(--sans);font-weight:700;text-transform:uppercase;font-size:14px;color:var(--chalk)}
.sb-site .nav-links a::after{background:#e0645b}
.sb-site .brand-subtitle{color:#e9877f!important}
.sb-site .site-nav{background:var(--desk);border-bottom:0;box-shadow:0 0 0 100vmax var(--desk);clip-path:inset(0 -100vmax -1px)}
.sb-site .site-nav::before{content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);bottom:-1px;height:2px;background:var(--red);pointer-events:none}
.sb-site footer{background:var(--desk);border-top:0;overflow:visible;color:var(--dim);box-shadow:0 0 0 100vmax var(--desk);clip-path:inset(-10px -100vmax 0)}
.sb-site footer::before{display:block!important;content:"";position:absolute;inset:-1px calc(50% - 50vw) auto;width:auto;height:2px;opacity:1;background:var(--red)}
.sb-site footer::after{color:var(--chalk);font-family:var(--hand);font-weight:700}
.sb-site footer .footer-row{border-top-color:rgba(236,229,211,.18)}