/* HermitcLab studio home. Colours come from the logo: shell, kelp, crab, ink.
   The Stop, You Jerk! panel keeps the game's own dark look, like a window into it. */
:root {
  --tide: #f1f5f8;     /* page ground, pale shell */
  --shell: #dfe7f0;    /* raised band */
  --line: #c5d1e2;     /* shell blue-grey */
  --ink: #1f2a55;      /* logo navy */
  --ink-2: #48557a;    /* quiet text */
  --kelp: #3f7f73;     /* logo teal */
  --claw: #c8352a;     /* crab red */
  --deep: #2f5fa8;     /* shell blue */

  --pit: #161c27;      /* the game's colours, for its panel */
  --bone: #f2eadb;
  --hazard: #f5c518;

  --head: "Baloo 2", "IBM Plex Sans KR", system-ui, sans-serif;
  --body: "IBM Plex Sans KR", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 34em;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--tide);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--claw); outline-offset: 3px; }

h2 { font: 800 clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem)/1 var(--head); }

/* ---------- bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px var(--gutter);
  background: rgb(241 245 248 / .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.bar-home { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 1.3rem/1 var(--head); }
.bar-home img { width: 46px; }
.bar nav { display: flex; gap: clamp(14px, 2.6vw, 30px); font-weight: 600; font-size: .95rem; }
.bar nav a { text-decoration: none; color: var(--ink-2); padding: 6px 0; }
.bar nav a:hover { color: var(--claw); }

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px); align-items: center;
  padding: clamp(48px, 9vh, 112px) var(--gutter) clamp(64px, 11vh, 128px);
  max-width: 1200px;
}
.hero-logo img { width: 100%; }
.lede { font: 600 clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem)/1.25 var(--head); max-width: 18em; }
.hero-now { margin-top: 20px; color: var(--ink-2); max-width: var(--measure); }
.hero-now a { color: var(--ink); font-weight: 600; text-underline-offset: 4px; }
.hero-now a:hover { color: var(--claw); }
.hero-mail {
  display: inline-block; margin-top: 28px;
  font-weight: 600; color: var(--claw);
  text-underline-offset: 5px; text-decoration-thickness: 2px;
}
.hero-mail:hover { color: var(--ink); }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero-logo { width: min(70vw, 300px); }
  .lede, .hero-now { margin-inline: auto; }
}

/* ---------- games ---------- */
.games { padding: 96px var(--gutter); background: var(--shell); }
.game {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  margin-top: 40px;
  background: var(--pit); color: var(--bone);
  border-radius: 18px; overflow: hidden;
}
.game-art img { width: 100%; height: 100%; object-fit: cover; }
.game-info { padding: clamp(24px, 3.5vw, 44px); align-self: center; }
.game-info h3 { font: 800 clamp(1.9rem, 1.3rem + 1.8vw, 2.75rem)/1 var(--head); }
.game-status { margin-top: 8px; font-weight: 600; color: var(--hazard); }
.game-info p:not(.game-status) { margin: 14px 0 26px; color: #d6d0c4; max-width: var(--measure); }
.game-link {
  display: inline-block; padding: 13px 22px;
  background: var(--hazard); color: var(--pit);
  font-weight: 600; text-decoration: none; line-height: 1;
}
.game-link:hover { background: var(--bone); }
.game-link:focus-visible { outline-color: var(--hazard); }
/* an empty slot: the next game hasn't been announced */
.game-next {
  margin-top: 28px; padding: 26px 28px;
  border: 2px dashed var(--line); border-radius: 18px;
  color: var(--ink-2);
}
@media (max-width: 860px) { .game { grid-template-columns: 1fr; } }

/* ---------- about ---------- */
.about { padding: 96px var(--gutter); }
.about-body { margin-top: 24px; max-width: var(--measure); color: var(--ink-2); }
.about-body p + p { margin-top: 14px; }
.roster { margin-top: 40px; max-width: 640px; border-top: 1px solid var(--line); }
.roster li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.name { font: 800 1.6rem/1.1 var(--head); }
.name-a { color: var(--claw); }
.name-b { color: var(--kelp); }
.name-c { color: var(--deep); }
.role { color: var(--ink-2); }

/* ---------- footer ---------- */
.foot { padding: 80px var(--gutter) 40px; background: var(--ink); color: var(--tide); }
.foot > p:first-child { color: #c5cde0; }
.foot-mail {
  display: inline-block; margin-top: 6px;
  font: 800 clamp(1.6rem, .7rem + 4.4vw, 3.75rem)/1.15 var(--head);
  text-decoration: none; overflow-wrap: anywhere;
}
.foot-mail:hover { color: #ff8a7a; }
.foot-mail:focus-visible { outline-color: #ff8a7a; }
.foot-small { margin-top: 56px; font-size: .85rem; color: #9aa6c4; }
.name-ko { margin-left: 8px; font: 400 1rem/1 var(--body); color: var(--ink-2); }