/* =========================================================================
   Mame Productions - site styles

   The palette is sampled from the studio logo: cream paper, the bean's own
   maroon for edges and small type, the wordmark's dark red for anything you
   can click, and the coral of the brush swoosh for hover and highlights.
   Headings are set in a serif to sit beside the "mamepro." lockup. Corners
   are cut at 45 degrees throughout - the one thing kept from the first pass.
   ========================================================================= */

:root {
  --bg:          #fbf6ef;
  --bg-raised:   #f4ebe0;
  --bg-card:     #ffffff;
  --bg-card-2:   #fffdf9;
  --line:        #e3d3c8;
  --line-soft:   #ede2d8;
  --edge:        #c9a9a4;
  --ink:         #2d1b1d;
  --ink-dim:     #6b5352;
  --ink-faint:   #9a8280;
  --accent:      #992211;
  --accent-hover:#7a1a0d;
  --accent-soft: rgba(153, 34, 17, .07);
  --accent-line: rgba(153, 34, 17, .35);
  --accent-ink:  #ffffff;
  --coral:       #ee6655;
  --coral-soft:  rgba(238, 102, 85, .12);
  --maroon:      #885555;
  --chamfer:     12px;
  --maxw:        1120px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--serif); font-weight: 500;
  line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.005em;
  color: var(--ink);
}
h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.3rem; }
p  { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

/* The cut corner. */
.chamfer, .plate, .plate-in, .headshot, .headshot-in {
  clip-path: polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
    var(--chamfer) 100%, 0 calc(100% - var(--chamfer)), 0 var(--chamfer)
  );
}

/* A plate is a chamfered card. clip-path would shear a normal border off at
   the diagonals, so the edge is a 1px parent behind a slightly tighter inner
   panel. */
.plate {
  --chamfer: 13px;
  display: flex; padding: 1px;
  background: var(--edge);
  transition: background .18s ease, transform .18s ease;
}
.plate > .plate-in {
  --chamfer: 12px;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--bg-card);
  transition: background .18s ease;
}
.plate:hover { background: var(--coral); transform: translateY(-2px); }
.plate:hover > .plate-in { background: var(--bg-card-2); }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 246, 239, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 78px; }

/* The lockup is 2:1, so height is what sets how big the wordmark reads. */
.brand { display: flex; align-items: center; }
.brand img { height: 60px; width: auto; }
@media (max-width: 760px) { .brand img { height: 52px; } }

.nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav a {
  color: var(--ink-dim); font-size: .94rem; font-weight: 500;
  padding: 4px 0; border-bottom: 1.5px solid transparent;
}
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--coral); }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink); padding: 7px 10px; cursor: pointer; line-height: 0;
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 74px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px 24px 16px;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
}

/* ------------------------------------------------------------------ hero */

.hero { position: relative; padding: clamp(44px, 7vw, 80px) 0 clamp(48px, 8vw, 84px); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 30%, var(--coral-soft), transparent 70%);
}
.hero > .wrap { position: relative; }

.hero-banner {
  width: min(100%, 880px); margin: 0 auto clamp(28px, 5vw, 48px);
}
.hero-banner img { width: 100%; height: auto; }

.hero-copy { text-align: center; max-width: 62ch; margin-inline: auto; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.hero .lede { font-size: clamp(1.05rem, 2.2vw, 1.26rem); color: var(--ink-dim); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* Sub-page heroes have no banner: left-aligned like the rest, and without the
   glow, which only makes sense sitting behind the artwork. */
.hero.is-plain .hero-copy { text-align: left; margin-inline: 0; }
.hero.is-plain .hero-actions { justify-content: flex-start; }
.hero.is-plain { padding-top: clamp(56px, 10vw, 104px); }
.hero.is-plain::before { display: none; }

/* small bean, drawn rather than loaded */
.bean { width: 12px; height: 12px; flex: none; fill: currentColor; }

/* --------------------------------------------------------------- buttons */

.btn {
  --chamfer: 10px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 24px;
  font-size: .92rem; font-weight: 580; letter-spacing: -.005em;
  border: 1px solid var(--edge); color: var(--ink);
  background: var(--bg-card);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover { text-decoration: none; color: var(--ink); border-color: var(--coral); background: var(--bg-card-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }

/* -------------------------------------------------------------- sections */

.section { padding: clamp(48px, 8vw, 82px) 0; border-top: 1px solid var(--line-soft); }
.section-head { margin-bottom: 34px; max-width: 64ch; }
.section-head .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px;
}
.section-head .kicker .bean { color: var(--coral); }
.section-head p { color: var(--ink-dim); margin-bottom: 0; }

.prose { max-width: 66ch; color: var(--ink-dim); }
.prose strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------ game cards */

.game-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }

/* Every cover is a cream placard with the title's initials on it. Real art,
   when there is any, simply sits on top; if the file is missing the img removes
   itself and the placard is what you see. */
.game-cover {
  aspect-ratio: 16 / 9; overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse 80% 95% at 28% 18%, var(--coral-soft), transparent 62%),
    linear-gradient(145deg, #f7ecdf 0%, #f1e4d6 58%, #f5e9dc 100%);
}
.game-cover > * { grid-area: 1 / 1; }
.game-cover img { width: 100%; height: 100%; object-fit: cover; }
.game-cover .placard {
  font-family: var(--serif); font-size: 2.1rem; font-weight: 500;
  color: rgba(136, 85, 85, .55); letter-spacing: .1em;
}

.game-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.game-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px;
}
.game-meta .dot { opacity: .45; }
.status {
  padding: 2px 10px; border: 1px solid var(--line);
  color: var(--ink-dim); background: var(--bg-raised);
}
.status[data-status="Released"],
.status[data-status="Steam"] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

.game-body h3 { margin-bottom: 9px; }
.game-blurb { color: var(--ink-dim); font-size: .95rem; margin-bottom: 13px; }
.game-detail { color: var(--ink-faint); font-size: .89rem; margin-bottom: 14px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tag {
  font-size: .74rem; padding: 3px 10px;
  background: var(--bg-raised); border: 1px solid var(--line-soft); color: var(--ink-dim);
}

.game-credits { font-size: .82rem; color: var(--ink-faint); margin-bottom: 14px; }
.game-links { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.game-links a { font-size: .85rem; font-weight: 550; display: inline-flex; align-items: center; gap: 6px; }
.game-links a::after { content: "\2192"; transition: transform .16s ease; }
.game-links a:hover::after { transform: translateX(3px); }
.game-links a + a { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); }

/* ------------------------------------------------------------ team cards */

.team-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.member-body { padding: 26px 24px; display: flex; flex-direction: column; flex: 1; }

.member-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }

.headshot {
  --size: 72px; --chamfer: 10px;
  width: var(--size); height: var(--size); flex: none;
  padding: 1px; display: flex;
  background: var(--edge);
}
.headshot-in {
  --chamfer: 9px;
  flex: 1; overflow: hidden;
  background: var(--bg-raised);
  display: grid; place-items: center;
}
/* badge and photo share one grid cell: the photo simply covers the initials */
.headshot-in > * { grid-area: 1 / 1; }
.headshot img { width: 100%; height: 100%; object-fit: cover; }
.headshot .initials {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 500;
  color: var(--maroon); letter-spacing: .04em;
}

.member-head h3 { margin: 0 0 3px; font-size: 1.2rem; }
.member-role { font-size: .84rem; color: var(--ink-faint); line-height: 1.45; }
.member-bio { font-size: .93rem; color: var(--ink-dim); margin-bottom: 14px; }

.member-links { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 8px; }
.member-links a {
  --chamfer: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line); background: var(--bg-raised); color: var(--ink-dim);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.member-links a:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.member-links a svg { width: 17px; height: 17px; }

/* the empty plate holding a place for whoever comes next */
.plate.is-slot { background: var(--line); }
.plate.is-slot:hover { transform: none; background: var(--line); }
.plate.is-slot > .plate-in { background: transparent; }
.plate.is-slot:hover > .plate-in { background: transparent; }
.plate.is-slot .member-body { justify-content: center; color: var(--ink-faint); min-height: 196px; }
.plate.is-slot h3 { color: var(--ink-dim); }
.plate.is-slot p { font-size: .9rem; margin: 0; }
.plate.is-slot code { font-family: var(--mono); font-size: .84rem; color: var(--accent); }

/* the linked variant: same quiet plate at rest, unmistakably a button on hover */
.plate.is-link { text-decoration: none; cursor: pointer; }
.plate.is-link > .plate-in { background: var(--bg-card); }   /* cream like its neighbours, not the flooded slot fill */
.plate.is-link:hover { transform: translateY(-2px); background: var(--coral); }
.plate.is-link:hover > .plate-in { background: var(--bg-card-2); }
.plate.is-link h3 { color: var(--ink); display: inline-flex; align-items: center; gap: .4em; }
.plate.is-link .arrow { color: var(--accent); transition: transform .16s ease; }
.plate.is-link:hover .arrow { transform: translateX(4px); }
.plate.is-link p { color: var(--ink-faint); }
.plate.is-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --------------------------------------------------------------- callout */

.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--coral);
  background: var(--bg-card);
  padding: 20px 24px; color: var(--ink-dim); font-size: .94rem;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--line-soft); padding: 40px 0; margin-top: 24px; background: var(--bg-raised); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.site-footer p { margin: 0; color: var(--ink-faint); font-size: .87rem; }
.footer-links { display: flex; gap: 18px; font-size: .87rem; }
.footer-links a { color: var(--ink-dim); }

/* -------------------------------------------------------------- a11y etc */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: 10px 16px;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}