/* ODDPOMEGRANATE STYLES
   The site is a "board": a 12-column grid of quiet panels with thin grey edges.
   To change the look, start with the tokens below. */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/work-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/work-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  /* Colours */
  --ink: #000;        /* page background */
  --panel: #1a1a1a;   /* default block */
  --deep: #242424;    /* slightly brighter block */
  --garnet: #7a1f2b;  /* the main red */
  --seed: #d6455a;    /* buttons */
  --white: #fff;      /* main text */
  --muted: #a8a8a8;   /* secondary text */
  --edge: rgba(255, 255, 255, .12);
  /* Type */
  --head: "Fraunces", Georgia, serif;
  --body: "Work Sans", "Segoe UI", sans-serif;
  /* Spacing */
  --gap: 14px;        /* space between blocks */
  --pad: clamp(20px, 2.6vw, 36px);
  --round: 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font: 400 1.06rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img, canvas { display: block; max-width: 100%; }

/* The animated line background. js/site.js adds this canvas to every page. */
.lines { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; pointer-events: none; }
a { color: inherit; }
p { margin: 0; max-width: 62ch; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* ---------- Top bar (built by js/site.js) ---------- */
.topbar {
  position: sticky;
  z-index: 20;
  top: env(safe-area-inset-top, 0px);
  background: rgba(0, 0, 0, .85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--edge);
}
.topbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1400px;
  margin-inline: auto;
  padding: 14px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px));
}
.brand { display: flex; align-items: center; gap: 10px; font: 600 1.2rem/1 var(--head); text-decoration: none; }
.brand img { width: 24px; height: auto; }
.links { display: flex; gap: clamp(16px, 2.4vw, 34px); }
.links a { padding-bottom: 3px; color: var(--muted); font-size: .94rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid transparent; }
.links a:hover { color: var(--white); }
.links a[aria-current="page"] { color: var(--white); border-bottom-color: var(--white); }

/* The home page has the big logo, so its bar drops the small one and centres the links. */
body[data-page="home"] .brand { display: none; }
body[data-page="home"] .topbar-in { justify-content: center; }

/* ---------- The board ---------- */
.board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  max-width: 1400px;
  margin-inline: auto;
  padding: var(--gap) max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px));
}

/* ---------- Blocks: pick a width (w3 to w12) and a colour ---------- */
.block {
  min-width: 0;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  border-radius: var(--round);
  border: 1px solid var(--edge);
  background: var(--panel);
}
.w3 { grid-column: span 3; }
.w4 { grid-column: span 4; }
.w5 { grid-column: span 5; }
.w6 { grid-column: span 6; }
.w7 { grid-column: span 7; }
.w8 { grid-column: span 8; }
.w9 { grid-column: span 9; }
.w12 { grid-column: span 12; }

/* Colours. Plain "panel" is the default, so most blocks need none of these. */
.deep   { background: var(--deep); }
.garnet { background: var(--garnet); border-color: transparent; }
.ink    { background: #000; }

/* ---------- Section headings ---------- */
.head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  padding: 42px 2px 8px;
}
.head span { color: var(--white); text-shadow: 0 0 6px #000; font-size: .94rem; font-weight: 500; }
.head h2, .titlebox h1 { text-shadow: 0 0 14px #000, 0 0 5px #000, 0 0 2px #000; }

/* The line of text under the home page logo. */
.tagline { color: #d0d0d0; text-align: center; font-size: clamp(1rem, 1.3vw, 1.15rem); }

/* A heading and its block, side by side with another pair. */
.stack { min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.stack .head { padding-bottom: 0; }
.stack .block { flex: 1; }

/* ---------- Type ---------- */
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h2 { font: 600 clamp(1.9rem, 2.8vw, 2.6rem)/1.1 var(--head); }
h3 { font: 600 clamp(1.3rem, 1.7vw, 1.55rem)/1.2 var(--head); }
.muted { color: var(--muted); }
.tag {
  padding: 2px 10px;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 500;
}
.spacer { margin-top: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 3px;
  background: var(--seed);
  color: #fff;
  font-size: .96rem;
  font-weight: 500;
  text-decoration: none;
}
.btn:hover { background: #e25a6e; }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.btn.ghost:hover { background: rgba(255, 255, 255, .1); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Hero ---------- */
.titlebox { container-type: inline-size; justify-content: center; gap: 20px; padding-block: clamp(36px, 5vw, 70px); padding-left: 2px; background: transparent; border-color: transparent; }
.titlebox h1 { width: 100%; font: 600 min(12.4cqw, 5.2rem)/1.05 var(--head); }
.lede { color: var(--white); font-weight: 500; text-shadow: 0 0 10px #000, 0 0 4px #000, 0 0 2px #000, 0 0 1px #000; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; }
.logobox { align-items: center; justify-content: center; padding-block: clamp(20px, 3vw, 44px); background: transparent; border-color: transparent; }
.logobox img { width: min(62%, 300px); }

/* The full logo on the home page. The barcode sits over the blank space beside "Odd". */
.lockupbox {
  --solid: 24%;   /* where the fade ends: lower is a wider solid area */
  justify-self: stretch;
  align-items: center;
  gap: 12px;
  padding: clamp(18px, 2.4vw, 28px) 16px;
  margin-top: clamp(4px, 1vw, 12px);
  background: linear-gradient(90deg, transparent, #000 var(--solid), #000 calc(100% - var(--solid)), transparent);
  border-width: 1px 0;
  border-style: solid;
  border-radius: 0;
  border-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55) var(--solid), rgba(255, 255, 255, .55) calc(100% - var(--solid)), transparent) 1;
}
.lockup { position: relative; width: min(100%, 640px); margin: 0; user-select: none; -webkit-user-select: none; }
.lockup img { width: 100%; height: auto; -webkit-user-drag: none; }
.lockup .barcode { position: absolute; left: 53.3%; top: 39.9%; width: 41.6%; height: 13%; background: #000; }

/* ---------- Game slots ---------- */
.cover {
  width: 100%;
  flex: 1 1 auto;      /* grows so blocks in a row finish level */
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--garnet), #000);
  overflow: hidden;
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover img.mark { width: 20%; height: auto; opacity: .45; }

/* Project cards: the whole card is a link, with a white glow on hover. */
.project { color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
@media (hover: hover) {
  .project:hover { border-color: #fff; box-shadow: 0 0 0 1px #fff, 0 0 16px rgba(255, 255, 255, .6), 0 0 42px rgba(255, 255, 255, .22); }
}
.project:focus-visible { outline: none; border-color: #fff; box-shadow: 0 0 0 1px #fff, 0 0 16px rgba(255, 255, 255, .6), 0 0 42px rgba(255, 255, 255, .22); }

/* The title at the top of inner pages. */
.pagehead { grid-column: 1 / -1; display: grid; gap: 8px; padding: 32px 2px 10px; }
.pagehead h1 { font: 600 clamp(2.6rem, 6vw, 4.4rem)/1 var(--head); text-shadow: 0 0 14px #000, 0 0 5px #000, 0 0 2px #000; }
.pagehead p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); text-shadow: 0 0 10px #000, 0 0 4px #000, 0 0 2px #000; }

/* ---------- Sketch thumbnails ---------- */
.thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.thumbs a { display: block; aspect-ratio: 1 / 1; border-radius: 3px; overflow: hidden; background: #000; }
.thumbs img, .shot img { width: 100%; height: 100%; object-fit: cover; }
.thumbs a:hover img, .shot:hover img { filter: contrast(1.15) saturate(1.3); }
.shot { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden; background: #000; }

/* ---------- Sketch player ---------- */
.stage { overflow-x: auto; padding: 12px; align-items: center; background: #000; }
.stage canvas { max-width: none; outline: none; }
.keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.keys kbd { display: inline-block; min-width: 2.1em; margin-right: 8px; padding: 0 6px; border-radius: 3px; background: var(--ink); color: var(--white); font: 500 .9rem/1.8 var(--body); text-align: center; }
.warn { padding: 10px 12px; border-radius: 3px; background: var(--white); color: #000; font-size: .92rem; line-height: 1.4; }

/* ---------- Full-screen menu, used on small screens ---------- */
.menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--white);
  border-radius: 3px;
  background: transparent;
  color: var(--white);
  font: 500 .96rem/1.2 var(--body);
  cursor: pointer;
}
.overlay {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto 0;
  height: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, .96);
  visibility: hidden;
  transition: height .35s ease, visibility 0s linear .35s;
}
.overlay.open { height: 100%; visibility: visible; transition: height .35s ease; overflow-y: auto; }
.overlay nav {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 72px 16px 32px;
}
.overlay nav a {
  padding: 6px 28px;
  border-radius: 3px;
  color: var(--white);
  font: 600 clamp(1.8rem, 5.6vh, 2.8rem)/1.25 var(--head);
  text-decoration: none;
}
.overlay nav a:hover, .overlay nav a:focus-visible { background: var(--garnet); color: #fff; }
.overlay nav a[aria-current="page"] { text-decoration: underline; }
.menu-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: max(16px, env(safe-area-inset-right, 0px));
  padding: 6px 12px;
  border: 1px solid var(--white);
  border-radius: 3px;
  background: transparent;
  color: var(--white);
  font: 500 .96rem/1.2 var(--body);
  cursor: pointer;
}

/* ---------- Footer ---------- */
footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 28px;
  padding: 20px 2px 0;
  border-top: 1px solid var(--edge);
  color: var(--white);
  text-shadow: 0 0 6px #000;
  font-size: .9rem;
}

/* ---------- Tablet: 6 columns ---------- */
@media (max-width: 960px) {
  .lockupbox { --solid: 8%; }
  .board { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .w3, .w4, .w5 { grid-column: span 3; }
  .w6, .w7, .w8, .w9, .w12 { grid-column: span 6; }
  .wide-on-tablet { grid-column: span 6; }
  .links { display: none; }
  .menu-btn { display: flex; }
}

/* ---------- Phone: 1 column ---------- */
@media (max-width: 600px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .w3, .w4, .w5, .w6, .w7, .w8, .w9, .w12, .wide-on-tablet { grid-column: auto; }
  .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logobox { order: -1; padding-block: 22px 0; }
  .logobox img { width: min(46%, 190px); }
  .titlebox { padding-block: 24px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .overlay, .overlay.open, .project { transition: none; }
}