/* ==========================================================================
   Guilds Interactive — site styles
   Hand-authored, no build step. Two visual registers:
     .register-studio  (default)  restrained, dark, typographic, one accent
     .register-game    (DrpDrv)   the game's space gradient + neon palette
   The split is deliberate: a second title shouldn't need a redesign.
   ========================================================================== */

/* Xirod — public domain (CC0). Display face only: headings, nav, the logo
   wordmark. Never body copy; it has lowercase but the forms are alternate
   caps and it reads poorly below ~18px. */
@font-face {
	font-family: "Xirod";
	src: url("../font/xirod.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

:root {
	--bg:      #0A0A0F;
	--bg-2:    #101018;
	--panel:   #14141E;
	--panel-2: #191926;
	--line:    rgba(241, 239, 232, 0.10);
	--line-2:  rgba(241, 239, 232, 0.18);

	--ink:     #F1EFE8;
	--ink-2:   #B9B6AB;
	--muted:   #7E7B70;

	/* Gold is the primary accent — links, eyebrows, current-nav underline,
	   primary button, callout rule. It is NOT in the logo artwork; it was
	   tried against the logo's orange (#FC6000) and gold won on preference,
	   and it happens to be the more legible of the two as well.
	   The three below ARE sampled from the logo and are used for decoration.
	   Contrast against --bg:
	     gold 11.70:1  teal 6.39:1   -> safe for text at any size
	     red   3.62:1  purple 3.56:1 -> decoration ONLY, never body copy or
	                                    the 13px eyebrow. */
	--accent:  #E2C56C;
	--teal:    #549CB4;
	--red:     #CC2424;
	--purple:  #A818D8;

	--display: "Xirod", "Arial Narrow", sans-serif;
	--body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	        "Helvetica Neue", Arial, sans-serif;

	--wrap: 1080px;
	--gut: clamp(20px, 5vw, 48px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* Skip link — keyboard users shouldn't tab the nav on every page. */
.skip {
	position: absolute; left: -9999px; top: 0;
	background: var(--accent); color: #12121A;
	padding: 10px 16px; z-index: 100; font-weight: 600;
}
.skip:focus { left: 8px; top: 8px; }

/* -- Typography ---------------------------------------------------------- */

h1, h2, h3 {
	font-family: var(--display);
	color: var(--ink);
	text-transform: uppercase;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.06em;
	margin: 0 0 0.6em;
}
h1 { font-size: clamp(30px, 5.5vw, 54px); letter-spacing: 0.04em; }
h2 { font-size: clamp(22px, 3vw, 30px); }
h3 { font-size: clamp(17px, 2vw, 21px); letter-spacing: 0.08em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.55; color: var(--ink); }
.small { font-size: 15px; color: var(--muted); }

.eyebrow {
	font-family: var(--display);
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 14px;
}

/* -- Header -------------------------------------------------------------- */

.site-head {
	border-bottom: 1px solid var(--line);
	background: rgba(10, 10, 15, 0.85);
	backdrop-filter: blur(10px);
	position: sticky; top: 0; z-index: 50;
}
.site-head .wrap {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; min-height: 72px;
	/* Wrap unconditionally. Brand + four nav items is ~775px of content, so
	   between roughly 620px and 880px the row would otherwise push the whole
	   page sideways. Wrapping makes that impossible at any width. */
	flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* Raster mark, so size by HEIGHT and let width follow — the artwork is 679x770,
   not square, and fixing both axes would squash it. A PNG cannot recolour on
   hover the way the old currentColor SVG did, so hover shifts opacity instead. */
.brand img { height: 32px; width: auto; flex: none; display: block; }
.brand-name {
	font-family: var(--display);
	font-size: 15px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
}
.brand:hover img { opacity: .82; }

.site-nav { display: flex; gap: clamp(14px, 3vw, 30px); }
.site-nav a {
	font-family: var(--display);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-2);
	text-decoration: none;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* Xirod is a wide face and 0.14em tracking widens it further: at 13px the
   four nav items measure 413px on their own. Tighten the type below tablet
   width, and let the nav itself wrap so it degrades to two lines rather than
   overflowing. */
@media (max-width: 900px) {
	.site-nav { flex-wrap: wrap; gap: 8px 14px; }
	.site-nav a { font-size: 11px; letter-spacing: 0.08em; }
}

/* Below 620px the brand wordmark drops away and the logo mark alone links
   home, so the header still fits without losing the way back. */
@media (max-width: 620px) {
	.site-head .wrap { gap: 10px 16px; padding-top: 12px; padding-bottom: 12px; min-height: 0; }
	.brand-name { display: none; }
	.site-nav { flex: 1 1 auto; justify-content: flex-end; }
}

/* -- Sections ------------------------------------------------------------ */

section { padding: clamp(52px, 9vw, 96px) 0; }
section + section { border-top: 1px solid var(--line); }

.hero { padding: clamp(64px, 12vw, 128px) 0 clamp(52px, 9vw, 96px); }
/* Mark and name sit side by side. "GUILDS INTERACTIVE" set in Xirod at hero
   size is far wider than the space left beside the mark, so it wraps to two
   lines on its own — which is the point: it reads as a stacked wordmark
   locked to the mark, not as a heading that ran out of room. */
.hero-lockup {
	display: flex; align-items: center;
	gap: clamp(18px, 3vw, 34px);
	margin-bottom: 26px;
}
.hero-mark { height: clamp(84px, 13vw, 128px); width: auto; flex: none; }
.hero-lockup h1 { margin: 0; }

/* Below the header's own breakpoint the pair would be squeezed into a column
   too narrow for the name, so stack them again. */
@media (max-width: 620px) {
	.hero-lockup { flex-direction: column; align-items: flex-start; gap: 18px; }
}
.hero h1 { max-width: 16ch; }
.hero .lede { max-width: 56ch; }

/* -- Buttons ------------------------------------------------------------- */

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.btn {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--display);
	font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
	padding: 14px 24px;
	border: 1px solid var(--line-2);
	color: var(--ink);
	text-decoration: none;
	background: transparent;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--panel-2); border-color: var(--ink-2); color: var(--ink); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #14141E; font-weight: 600; }
.btn-primary:hover { background: #F0D989; border-color: #F0D989; color: #14141E; }

/* -- Cards / grids ------------------------------------------------------- */

.grid { display: grid; gap: clamp(18px, 3vw, 28px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
	background: var(--panel);
	border: 1px solid var(--line);
	padding: clamp(22px, 3vw, 32px);
}
.card h3 { margin-bottom: 0.5em; }
.card p { font-size: 16px; }

/* Email addresses are single unbreakable tokens — browsers will not break at
   "@" or "." on their own, so a long address overflows a narrow card instead
   of wrapping. `anywhere` (not `break-word`) is required here: it also lets
   the grid track shrink below the token's width, which is what stops the
   overflow at the narrowest column sizes. */
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Title card — the DrpDrv promo block on the homepage. */
.title-card {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 44px);
	align-items: center;
	background:
		radial-gradient(120% 140% at 15% 0%, #241B3A 0%, #14141E 55%, #0F0F16 100%);
	border: 1px solid var(--line);
	padding: clamp(24px, 4vw, 44px);
}
.title-card-art { border: 1px solid var(--line); overflow: hidden; }
.title-card-art img { width: 100%; }
@media (max-width: 720px) {
	.title-card { grid-template-columns: 1fr; }
}

/* Fact list — used for the studio facts and the DrpDrv spec block. */
.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
	display: flex; gap: 16px; align-items: baseline;
	padding: 11px 0; border-bottom: 1px solid var(--line);
	font-size: 16px;
}
.facts li:last-child { border-bottom: 0; }
.facts dt, .facts .k {
	font-family: var(--display); font-size: 12px; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--muted);
	flex: 0 0 clamp(96px, 22%, 148px);
}
.facts .v { color: var(--ink); }

/* -- Game register (DrpDrv page) ---------------------------------------- */

.register-game {
	background:
		radial-gradient(90% 60% at 20% 0%, rgba(120, 60, 190, 0.30) 0%, rgba(10,10,15,0) 60%),
		radial-gradient(80% 60% at 90% 20%, rgba(40, 90, 190, 0.22) 0%, rgba(10,10,15,0) 55%),
		var(--bg);
}
.register-game .eyebrow { color: var(--teal); }

.game-hero { padding: clamp(48px, 8vw, 88px) 0 clamp(36px, 6vw, 64px); }
.game-hero img.wordmark { max-width: min(620px, 100%); margin-bottom: 30px; }

/* Explicit 2-up rather than auto-fit: with four screenshots an auto-fit
   grid lands on three columns and leaves a lone orphan on the second row. */
.video-frame { border: 1px solid var(--line); background: #000; margin-top: 30px; }
.video-frame iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; border: 0; }

.shots { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .shots { grid-template-columns: 1fr; } }
.shots img { width: 100%; display: block; border: 1px solid var(--line); background: #000; }

/* -- Press asset previews ------------------------------------------------ */

.assets { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 24px; }
.asset { border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; }
.asset-art {
	/* Checker plate so transparency in an asset reads as transparency rather
	   than "this image has a dark background". */
	background-color: #0E0E15;
	background-image:
		linear-gradient(45deg, rgba(241,239,232,.05) 25%, transparent 25%, transparent 75%, rgba(241,239,232,.05) 75%),
		linear-gradient(45deg, rgba(241,239,232,.05) 25%, transparent 25%, transparent 75%, rgba(241,239,232,.05) 75%);
	background-size: 18px 18px;
	background-position: 0 0, 9px 9px;
	display: flex; align-items: center; justify-content: center;
	padding: 18px; min-height: 132px;
}
.asset-art img { max-height: 96px; width: auto; max-width: 100%; }
.asset-meta { padding: 14px 16px; border-top: 1px solid var(--line); }
.asset-meta strong { display: block; color: var(--ink); font-size: 15px; }
.asset-meta span { display: block; color: var(--muted); font-size: 13px; margin: 2px 0 8px; }
.asset-meta a { font-family: var(--display); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; }

/* -- Prose (privacy / support) ------------------------------------------ */

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.5em; }
.prose code {
	background: var(--panel-2); padding: 2px 6px;
	font-size: 0.9em; border: 1px solid var(--line);
	/* Save-file paths are long single tokens with no spaces — same overflow
	   problem as the email addresses, same fix. */
	overflow-wrap: anywhere;
}

.callout {
	border-left: 3px solid var(--accent);
	background: var(--panel);
	padding: 20px 24px;
	margin: 28px 0;
}
.callout p { font-size: 16px; }

/* -- Footer -------------------------------------------------------------- */

.site-foot {
	border-top: 1px solid var(--line);
	background: var(--bg-2);
	padding: clamp(40px, 6vw, 64px) 0 clamp(32px, 5vw, 48px);
	font-size: 15px;
	color: var(--muted);
}
.foot-top {
	display: flex; flex-wrap: wrap; gap: 32px;
	justify-content: space-between; align-items: flex-start;
	padding-bottom: 30px; margin-bottom: 26px;
	border-bottom: 1px solid var(--line);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a {
	font-family: var(--display); font-size: 12px; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--ink-2); text-decoration: none;
}
.foot-links a:hover { color: var(--accent); }
.legal { max-width: 62ch; }
.legal p { margin-bottom: 0.6em; }

/* -- Motion ------------------------------------------------------------- */

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