@font-face { font-family: Sysfont; src: url(../assets/fonts/sysfont.otf) format('opentype'); font-display: swap; }

:root {
  --pixel: Sysfont, ui-monospace, monospace;
  --serif: "Libre Caslon Text", Georgia, serif;
  --news: "Playfair Display", Georgia, serif;
  --sans: "Bricolage Grotesque", system-ui, sans-serif;
  --ink: #2b1d14;          /* by day: dark brown on the sky */
  --ink-soft: #4a3526;
  --glow: rgba(255, 238, 205, .55);
  --halo: rgba(255, 240, 214, .75);
  --paper: #efe4cb; --paper-ink: #1f1813;
  --ribbon: #c8382e; --ribbon-dark: #8d2018;
  --gutter: clamp(16px, 4vw, 48px);
}
body.night { --ink: #f6ead2; --ink-soft: #d8c7a6; --glow: rgba(10, 10, 30, .6); --halo: rgba(14, 12, 30, .8); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #2b2340; font: 400 19px/1.6 var(--serif); overflow-x: hidden; transition: color .6s; }
body.no-sky { background: linear-gradient(#8fa3c8, #f3c99a 60%, #6b4a32); }
img { max-width: 100%; display: block; }
a { color: inherit; }

#sky { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; z-index: -1; display: block; }

/* The CORP/OS menu bar, as in the game */
.menubar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 24px;
  height: 36px; padding: 0 var(--gutter); background: #1f1813; color: #efe4cb; font: 16px/1 var(--pixel);
  box-shadow: 0 2px 0 #0b0806; }
.menubar a { text-decoration: none; }
.menu-brand { display: flex; align-items: center; gap: 8px; }
.menu-brand img { width: 20px; image-rendering: pixelated; }
.menubar nav { display: flex; gap: 20px; color: #cdbb98; }
.menubar nav a:hover { color: #fff; }
.menu-right { margin-left: auto; display: flex; gap: 20px; align-items: center; }
.menu-right a { color: #f0b34d; }
.music { font: 16px var(--pixel); color: #cdbb98; background: none; border: 0; padding: 0; cursor: pointer; }
.music[aria-pressed="true"] { color: #7ccf6a; }
@media (max-width: 480px) { .music span { display: none; } }
#clock { min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .menubar nav { display: none; } }

/* Shared */
section { position: relative; padding: 0 var(--gutter); }
.say { font: 650 clamp(26px, 3.4vw, 46px)/1.18 var(--sans); font-optical-sizing: auto; letter-spacing: -.01em;
  margin: 0 auto; max-width: 22em; text-align: center;
  /* A thin outline in the light's colour, so a line still reads where it crosses the buildings */
  -webkit-text-stroke: 5px var(--halo); paint-order: stroke fill; text-shadow: 0 0 24px var(--glow); }
.premise { font: 500 clamp(18px, 1.5vw, 21px)/1.5 var(--sans); max-width: 32em; margin: 16px auto 0; text-align: center;
  -webkit-text-stroke: 4px var(--halo); paint-order: stroke fill; }
.hour { display: table; font: clamp(34px, 5vw, 60px)/1 var(--pixel); margin: 0 auto 22px; letter-spacing: .06em;
  color: #f0b34d; background: #1f1813; padding: 10px 18px 12px; border: 3px solid #3a2e22;
  box-shadow: 5px 5px 0 rgba(31, 24, 19, .45); text-shadow: 0 0 12px rgba(240, 179, 77, .55); }
.small { display: table; font: 15px/1.4 var(--pixel); text-align: center; color: #efe4cb; background: rgba(31, 24, 19, .82);
  padding: 5px 12px; margin: 18px auto 0; letter-spacing: .03em; }

/* A ribbon, cut for a grand opening */
.ribbon { position: relative; display: inline-block; margin: 34px auto 0; padding: 16px 54px; text-decoration: none;
  font: 22px/1 var(--pixel); color: #fff3df; background: var(--ribbon); letter-spacing: .04em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%);
  box-shadow: inset 0 -6px 0 var(--ribbon-dark), inset 0 4px 0 #e2574b; transition: transform .25s steps(3); }
.ribbon span { position: relative; top: -2px; }
.ribbon:hover { transform: translateY(-3px) rotate(-1deg); }
.open .ribbon, .night-end .ribbon { display: table; }

/* 06:00 */
.open { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: max(11vh, 64px); text-align: center; }
.open h1 { margin: 0 0 26px; }
.logo { width: min(86vw, 736px); height: auto; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(43, 29, 20, .25));
  animation: settle 1.2s steps(6) both; }
@keyframes settle { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.cue { margin-top: auto; padding-bottom: 28px; font: 15px var(--pixel); color: var(--ink-soft); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* 09:00 — the café */
.morning { padding-top: 22vh; padding-bottom: 12vh; }
.cafe { position: relative; margin: 48px auto 0; width: min(100%, 1280px); }
.cafe canvas { width: 100%; height: auto; image-rendering: pixelated; display: block;
  filter: drop-shadow(0 26px 22px rgba(31, 24, 19, .45)); }
.tag { position: absolute; transform: translate(-50%, -100%); font: 15px/1.15 var(--pixel); color: #1f1813; white-space: nowrap;
  background: #efe4cb; border: 2px solid #1f1813; padding: 5px 8px 6px; box-shadow: 3px 3px 0 #1f1813; }
.tag::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 22px; background: #1f1813; }
.tag i { display: block; font-style: normal; font-size: 12px; color: #6b5440; margin-top: 2px; }
.tag { margin-top: -22px; }
@media (max-width: 760px) { .tag i { display: none; } .tag { font-size: 11px; padding: 3px 5px; } }
/* The game's dialog box */
.dialog { max-width: 620px; margin: 40px auto 0; background: #efe4cb; color: #1f1813; border: 3px solid #1f1813;
  box-shadow: 6px 6px 0 #1f1813; }
.dialog-title { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; background: #1f1813; color: #efe4cb; font: 15px var(--pixel); letter-spacing: .06em; }
.dialog-title img { width: 22px; image-rendering: pixelated; }
.dialog p:not(.dialog-title) { margin: 0; padding: 16px 20px 18px; font-size: 18px; line-height: 1.55; }

/* 13:00 — postcards */
.noon { padding-top: 18vh; padding-bottom: 16vh; }
.postcards { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 20px; margin: 56px auto 0; max-width: 1260px; }
.card { width: min(280px, 44vw); margin: 0; background: #f7eedb; padding: 10px 10px 14px; transform: rotate(var(--r));
  box-shadow: 0 2px 0 #cbb994, 0 16px 30px rgba(31, 24, 19, .35); transition: transform .35s; }
.card:hover { transform: rotate(0) translateY(-8px) scale(1.04); z-index: 2; }
.card img { aspect-ratio: 3 / 2; object-fit: cover; image-rendering: auto; }
.card figcaption { font: 20px/1.1 var(--pixel); color: #2b1d14; margin-top: 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card figcaption b { font: italic 400 13px var(--serif); color: #6b5440; text-align: right; }

/* 18:00 — the newspaper */
.evening { padding-top: 18vh; padding-bottom: 16vh; }
.paper { max-width: 1040px; margin: 56px auto 0; background: var(--paper); color: var(--paper-ink); padding: clamp(18px, 4vw, 44px);
  transform: rotate(-1deg); box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
  background-image: radial-gradient(rgba(60, 40, 20, .06) 1px, transparent 1px); background-size: 3px 3px; }
.masthead { text-align: center; border-bottom: 4px double var(--paper-ink); padding-bottom: 10px; margin-bottom: 22px; }
.masthead h3 { font: 900 clamp(46px, 8vw, 104px)/.95 var(--news); margin: 6px 0 10px; letter-spacing: -.01em; }
.edition { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; font: 13px var(--pixel); letter-spacing: .06em; text-transform: uppercase; }
.edition.rule { border-top: 1px solid var(--paper-ink); padding-top: 8px; }
.lead h4 { font: 800 clamp(30px, 4.6vw, 54px)/1.02 var(--news); margin: 0 0 10px; text-align: center; }
.lead-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: start; margin-bottom: 20px; border-bottom: 1px solid rgba(31,24,19,.35); padding-bottom: 18px; }
.dek { font: italic 400 21px/1.35 var(--serif); margin: 0 0 12px; }
.story { margin: 0; font-size: 16px; line-height: 1.55; text-align: justify; hyphens: auto; }
.story::first-letter { float: left; font: 900 52px/.8 var(--news); padding: 6px 6px 0 0; }
@media (max-width: 720px) { .lead-grid { grid-template-columns: 1fr; } }
.photo { margin: 0; }
.photo img { width: 100%; filter: grayscale(1) contrast(1.25) brightness(1.05); mix-blend-mode: multiply; }
.photo { position: relative; }
.photo::after { content: ""; position: absolute; inset: 0 0 26px; pointer-events: none;
  background: radial-gradient(rgba(31, 24, 19, .35) 35%, transparent 36%); background-size: 4px 4px; mix-blend-mode: multiply; }
.photo figcaption { font: italic 14px var(--serif); margin-top: 6px; }
.columns { columns: 3 220px; column-gap: 28px; column-rule: 1px solid rgba(31, 24, 19, .35); }
.columns section { break-inside: avoid; padding: 0 0 16px; }
.columns h5 { font: 800 21px/1.15 var(--news); margin: 0 0 6px; }
.columns p { margin: 0; font-size: 16px; line-height: 1.5; text-align: justify; hyphens: auto; }
.columns .ad p { border: 2px solid var(--paper-ink); padding: 12px; text-align: center; font: 14px/1.5 var(--pixel); }
.columns .ad b { font: 900 26px var(--news); }

/* 22:00 */
.night-end { min-height: 100svh; padding-top: 22vh; padding-bottom: 14vh; text-align: center; }

/* Footer, on the street at night */
.foot { padding: 28px var(--gutter) 34px; background: #14101c; color: #a99c86; font: 15px/1.5 var(--pixel); display: grid; gap: 8px; }
.foot p { margin: 0; display: flex; align-items: center; gap: 10px; }
.foot img { width: 20px; image-rendering: pixelated; }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot a { color: #e9c78a; }
.foot .credit { font: 13px var(--serif); color: #7e7363; }

/* Reveal: things settle into place in a few steps, the way pixels move */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s steps(5); }
.reveal.in { opacity: 1; transform: none; }
.card.reveal { transform: rotate(var(--r)) translateY(40px); }
.card.reveal.in { transform: rotate(var(--r)); }
.paper.reveal { transform: rotate(-1deg) translateY(40px); }
.paper.reveal.in { transform: rotate(-1deg); }
.postcards .card:nth-child(2n) { transition-delay: .08s; } .postcards .card:nth-child(3n) { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .card.reveal, .paper.reveal { opacity: 1; }
  .card.reveal { transform: rotate(var(--r)); } .paper.reveal { transform: rotate(-1deg); }
}

/* Plain pages: privacy, support */
body.plain { background: #1f1813; color: #efe4cb; }
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; height: 36px;
  padding: 0 var(--gutter); background: #14100c; font: 16px/1 var(--pixel); box-shadow: 0 2px 0 #0b0806; }
.bar a { text-decoration: none; color: #efe4cb; }
.bar nav { display: flex; gap: 18px; } .bar .pill { color: #f0b34d; }
.brand { display: flex; align-items: center; gap: 8px; } .brand img { width: 20px; image-rendering: pixelated; } .brand span { color: #a99c86; }
.doc { max-width: 720px; margin: 0 auto; padding: 70px var(--gutter) 80px; }
.doc h1 { font: clamp(40px, 6vw, 60px)/1 var(--pixel); margin: 0 0 12px; }
.doc h2 { font: 26px/1.1 var(--pixel); margin: 38px 0 10px; color: #f0b34d; }
.doc .meta { font: 15px var(--pixel); color: #a99c86; margin: 0 0 26px; }
.doc p, .doc li { color: #ddd0b6; }
.doc strong { color: #fff3df; }
.doc a { color: #f0b34d; }
@media (max-width: 600px) { .tag { display: none; } }

/* 15:00 — the screens: an iPad in landscape with an iPhone leaning on it */
.afternoon { padding-top: 18vh; padding-bottom: 14vh; }
.devices { position: relative; max-width: 1080px; margin: 56px auto 0; padding-right: 9%; }
.ipad { margin: 0; padding: 2.2%; background: #1c1a1e; border-radius: 3.2% / 4.3%;
  box-shadow: 0 0 0 2px #3a3640, 0 40px 70px rgba(20, 14, 10, .5); }
.ipad-screen { position: relative; aspect-ratio: 2752 / 2064; overflow: hidden; border-radius: 1.2% / 1.6%; background: #1f1813; }
.ipad-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s steps(4); }
.ipad-screen img.on { opacity: 1; }
.iphone { position: absolute; right: 0; bottom: -6%; width: 24%; margin: 0; padding: 1.2%; background: #1c1a1e; border-radius: 16% / 7.4%;
  box-shadow: 0 0 0 2px #3a3640, 0 30px 50px rgba(20, 14, 10, .55); transform: rotate(4deg); }
.iphone img { border-radius: 13% / 6%; }
.screen-names { list-style: none; display: flex; justify-content: center; gap: 22px; padding: 0; margin: 46px 0 0; font: 15px var(--pixel); }
.screen-names { gap: 10px; }
.screen-names li { cursor: pointer; color: #cdbb98; background: #1f1813; border: 2px solid #1f1813; padding: 7px 12px 8px; box-shadow: 3px 3px 0 rgba(31, 24, 19, .5); }
.screen-names li.on { color: #1f1813; background: #f0b34d; }
@media (max-width: 640px) { .devices { padding-right: 0; } .iphone { width: 30%; bottom: -14%; } }

/* 20:00 — the trailer on the company computer */
.trailer { padding-top: 18vh; padding-bottom: 12vh; }
.monitor { max-width: 900px; margin: 56px auto 0; background: #d9cdb2; padding: 34px 34px 0; border-radius: 22px 22px 10px 10px;
  box-shadow: inset 0 -8px 0 #b9ab8d, inset 0 6px 0 #ece3cf, 0 40px 70px rgba(0, 0, 0, .5); }
.crt { position: relative; background: #0d0b09; padding: 14px; border-radius: 26px / 30px; box-shadow: inset 0 0 0 6px #a89a7c, inset 0 0 40px #000; }
.crt video { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 18px / 22px; background: #1f1813; }
.crt::after { content: ""; position: absolute; inset: 14px; border-radius: 18px / 22px; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
              radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0, 0, 0, .45)); }
.play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; cursor: pointer;
  font: 24px var(--pixel); color: #1f1813; background: #f0b34d; border: 3px solid #1f1813; padding: 12px 22px; box-shadow: 5px 5px 0 #1f1813; }
.play[hidden] { display: none; }
.monitor-chin { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 8px; font: 15px var(--pixel); color: #6b5d45; }
.monitor-chin i { width: 14px; height: 14px; border-radius: 50%; background: #7ccf6a; box-shadow: 0 0 8px #7ccf6a; }