/* rokuro.studio — built from the Figma file "Rokuro — Brand & Site".
   Flat colour, square corners, hairline rules, one 12-column grid. */

@font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
/* only the Japanese characters the site sets: ろくろ カチ クラックド */
@font-face { font-family: 'Shippori Mincho'; src: url('/fonts/shippori-mincho-500-subset.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --bone: #EEE9E0;
  --ink: #16140F;
  --clay: #A9471F;
  --slip: #D6CEBF;
  --ash: #6E675D;
  --ink-rule: #2E2B25;
  --ash-dark: #9C958A;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --jp: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --m: 64px;       /* page margin */
  --gap: 24px;     /* column gutter */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bone); color: var(--ink); font: 400 18px/1.55 var(--sans); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
[lang="ja"] { font-family: var(--jp); font-weight: 500; }

.wrap { max-width: 1440px; margin: 0 auto; padding-left: var(--m); padding-right: var(--m); }
.label, .top nav a, .facts dt, .links, .num, .gloss, .foot { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.label { color: var(--ash); margin: 0; }

/* ---- header */
.top { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--slip); }
.brand img { height: 36px; width: auto; }
.top nav { display: flex; gap: 40px; }
.top nav a { text-decoration: none; }
.top nav a:hover { color: var(--clay); }

/* ---- hero */
.hero { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding-top: 120px; padding-bottom: 96px; }
.hero-text { grid-column: 1 / span 10; }
.hero h1.label { margin: 0 0 28px; }
/* the 404 page keeps a plain display headline */
h1:not(.label) { font: 500 clamp(52px, 8.6vw, 124px)/0.96 var(--serif); letter-spacing: -0.025em; margin: 0 0 40px; }
.lead { font-size: 22px; max-width: 34em; margin: 0; }
.name { grid-column: 11 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.tategaki { writing-mode: vertical-rl; font-size: 64px; line-height: 1; letter-spacing: 0.08em; color: var(--clay); }
.gloss { color: var(--ash); font-weight: 400; font-size: 11px; text-align: right; line-height: 1.6; }

/* ---- index of games */
.index { display: block; }
.index-row { display: grid; grid-template-columns: 1fr 6fr 2fr 3fr auto; column-gap: var(--gap); align-items: baseline; padding: 26px 0; border-top: 1px solid var(--ink); text-decoration: none; }
.index-row:last-child { border-bottom: 1px solid var(--ink); }
.index-row .num { color: var(--ash); font-weight: 400; font-size: 15px; }
.index-row .title { font: 500 clamp(56px, 8vw, 112px)/1 var(--serif); letter-spacing: -0.025em; }
.index-row .kana { color: var(--ash); font-size: 18px; }
.index-row .what { font-size: 18px; }
.index-row .arrow { justify-self: end; font-family: var(--mono); }
.index-row:hover .title { color: var(--clay); }

/* ---- game sections */
.game { padding: 120px 0; }
.game.dark { background: var(--ink); color: var(--bone); }
.game-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
.meta { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 28px; }
.media { grid-column: 5 / span 8; display: flex; flex-direction: column; gap: var(--gap); }
.flip .meta { grid-column: 9 / span 4; grid-row: 1; }
.flip .media { grid-column: 1 / span 8; grid-row: 1; }
.meta p { margin: 0; font-size: 19px; }
h2 { font: 500 96px/1 var(--serif); letter-spacing: -0.025em; margin: 0; display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
h2 .kana { font-size: 22px; letter-spacing: 0.05em; color: var(--ash); }
.dark .label, .dark h2 .kana { color: var(--ash-dark); }
video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.shots img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--slip); }
.dark .shots img { background: var(--ink-rule); }

/* facts: a two-column table with hairlines */
.facts { margin: 0; border-bottom: 1px solid var(--slip); }
.facts > div { display: grid; grid-template-columns: 9em 1fr; gap: var(--gap); padding: 12px 0; border-top: 1px solid var(--slip); }
.facts dt { color: var(--ash); padding-top: 3px; }
.facts dd { margin: 0; font-size: 16px; }
.dark .facts, .dark .facts > div { border-color: var(--ink-rule); }
.dark .facts dt { color: var(--ash-dark); }

.links { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 14px; letter-spacing: 0.06em; }
.links a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.links a:hover { color: var(--clay); }
.links span { color: var(--ash); }
.dark .links span { color: var(--ash-dark); }

/* ---- studio */
.studio { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding-top: 120px; padding-bottom: 120px; }
.studio > .label { grid-column: 1 / span 4; padding-top: 12px; }
.studio-body { grid-column: 5 / span 8; display: flex; flex-direction: column; gap: 40px; }
.statement { font: 400 44px/1.2 var(--serif); letter-spacing: -0.01em; margin: 0; }
.statement [lang="ja"] { color: var(--clay); }
.studio .facts > div { grid-template-columns: 12em 1fr; padding: 14px 0; }
.studio .facts dd { font-size: 18px; }
.studio .facts a { color: var(--clay); }
.press { display: flex; flex-direction: column; gap: 6px; }

/* ---- footer */
.foot { background: var(--ink); color: var(--ash-dark); font-weight: 400; }
.foot .wrap { display: flex; justify-content: space-between; gap: 24px; padding-top: 28px; padding-bottom: 28px; }

/* ---- narrow screens: one column */
@media (max-width: 1000px) {
  :root { --m: 20px; --gap: 16px; }
  .top nav { gap: 20px; }
  .brand img { height: 28px; }
  .hero { padding-top: 64px; padding-bottom: 56px; }
  .hero-text { grid-column: 1 / -1; }
  .name { grid-column: 1 / -1; flex-direction: row; align-items: center; margin-top: 40px; justify-content: flex-start; }
  .tategaki { writing-mode: horizontal-tb; font-size: 40px; }
  .gloss { text-align: left; }
  .index-row { grid-template-columns: 2.5em 1fr auto; row-gap: 4px; }
  .index-row .num { grid-column: 1; }
  .index-row .title { grid-column: 2; font-size: 48px; }
  .index-row .arrow { grid-column: 3; }
  .index-row .kana, .index-row .what { grid-column: 2 / -1; font-size: 15px; }
  .game { padding: 64px 0; }
  .meta, .media, .flip .meta, .flip .media { grid-column: 1 / -1; grid-row: auto; }
  .flip .media { grid-row: 2; }
  .meta { margin-bottom: 40px; }
  h2 { font-size: 64px; }
  .shots { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .studio { padding-top: 64px; padding-bottom: 64px; }
  .studio > .label, .studio-body { grid-column: 1 / -1; }
  .studio > .label { margin-bottom: 24px; }
  .statement { font-size: 30px; }
  .facts > div, .studio .facts > div { grid-template-columns: 7.5em 1fr; }
  .foot .wrap { flex-direction: column; gap: 8px; }
}