/* DragonPine Games — October 2026 brand architecture.
   Display/body: Aktiv Grotesk Medium (licensed webfont to be added separately);
   annotations: Roboto Mono Regular; fallback: Helvetica Neue/system sans.
   The current package intentionally does NOT redistribute proprietary font files.
   When licensed webfonts are available, use @font-face and self-host .woff2 files.
*/
:root {
  color-scheme: dark;
  --black:#000000; --white:#FFFFFF;
  --gray:#808285; --silver:#BCBEC0;
  --enterprise:#92A4FF; --consulting:#FBB62F; --games:#808285;
  --ink:#FFFFFF; --muted:#CACBCD; --muted2:#A5A8AB; --line:#414246;
  --font-sans:"Aktiv Grotesk", "Aktiv Grotesk Medium", "Helvetica Neue", Arial, sans-serif;
  --font-mono:"Roboto Mono", "Roboto Mono Regular", ui-monospace, Consolas, monospace;
  --logo-width:clamp(245px,32vw,435px);
  /* The D begins at about 20.4% of the approved original wordmark asset. */
  --d-anchor:clamp(50px,6.528vw,88.74px);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:var(--ink); font-family:var(--font-sans); font-weight:500; line-height:1.54; }
img { max-width:100%; display:block; height:auto; }
a { color:inherit; }
a:hover { text-decoration-color:currentColor; }
a:focus-visible, button:focus-visible { outline:3px solid var(--enterprise); outline-offset:5px; }
button { font:inherit; }
.sr-only { clip-path:inset(50%); height:1px; width:1px; overflow:hidden; position:absolute; white-space:nowrap; }
.skip-link { position:fixed; z-index:300; top:-100px; left:15px; padding:12px 18px; color:#000; background:#fff; }
.skip-link:focus { top:15px; }
.shell { width:min(1240px,calc(100% - 52px)); margin-inline:auto; }
.site-header { border-bottom:1px solid var(--line); }
.header-grid { display:flex; justify-content:space-between; align-items:center; gap:28px; padding-block:25px; }
.logo-link { flex:0 0 auto; display:block; width:var(--logo-width); }
.logo-link img { width:100%; }
.main-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:13px 20px; }
.main-nav a { text-decoration:none; color:var(--muted); font-size:.82rem; }
.main-nav a[aria-current="page"] { color:#fff; text-decoration:underline; text-underline-offset:7px; }
.main-nav a:hover { color:#fff; }
/* The editorial column starts beneath the D rather than the flame. */
.editorial { margin-left:var(--d-anchor); }
.mono,.eyebrow,.meta,.status,.project-note,.footnote,.nav-kicker { font-family:var(--font-mono); font-weight:400; letter-spacing:.075em; }
.eyebrow { color:var(--silver); font-size:.7rem; text-transform:uppercase; }
.hero { padding-block:clamp(90px,12vw,160px) clamp(100px,14vw,175px); }
.hero h1 { font-size:clamp(3rem,7.3vw,7.7rem); letter-spacing:-.06em; font-weight:700; line-height:.99; margin:.25em 0 .29em; max-width:1050px; }
.hero .lede { max-width:790px; font-size:clamp(1.22rem,2.2vw,1.75rem); line-height:1.42; margin:0 0 1.4rem; }
.hero .support { color:var(--muted); max-width:700px; font-size:clamp(.98rem,1.3vw,1.14rem); margin:0 0 2rem; }
.text-link { display:inline-block; border-bottom:2px solid #fff; padding-bottom:5px; font-size:.95rem; text-decoration:none; }
.section { padding-block:clamp(66px,8vw,108px); border-top:1px solid var(--line); }
.section-title { font-size:clamp(2rem,4.6vw,4.5rem); line-height:1.05; font-weight:700; letter-spacing:-.055em; max-width:960px; margin:.24em 0 .48em; }
.section-lede { color:var(--muted); max-width:770px; font-size:1.1rem; }
.three-up { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:48px; }
.unit { border-top:5px solid var(--gray); padding-top:20px; min-width:0; }
.unit.enterprise { border-color:var(--enterprise); }
.unit.consulting { border-color:var(--consulting); }
.unit.games { border-color:var(--games); }
.unit .num { font-size:.76rem; color:var(--silver); }
.unit h3 { font-size:clamp(1.55rem,2.3vw,2.4rem); line-height:1.1; letter-spacing:-.04em; margin:17px 0; }
.unit p { color:var(--muted); margin:0 0 19px; }
.unit a { display:inline-block; text-decoration:underline; text-underline-offset:5px; }
.two-up { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:40px; }
.project { border:1px solid var(--line); padding:clamp(22px,3vw,42px); }
.project h3 { font-size:clamp(1.4rem,2.4vw,2.2rem); line-height:1.12; font-weight:700; letter-spacing:-.03em; margin:20px 0 18px; }
.project p { color:var(--muted); }
.status { font-size:.7rem; color:#E7E7E7; text-transform:uppercase; }
.philosophy { font-size:clamp(1.4rem,2.8vw,2.5rem); max-width:950px; line-height:1.34; }
.section-pagehero { padding-block:90px 100px; }
.section-pagehero h1 { font-size:clamp(3.4rem,7vw,7.3rem); line-height:1; letter-spacing:-.055em; margin:22px 0 24px; font-weight:700; }
.page-enterprise .accent { color:var(--enterprise); }
.page-consulting .accent { color:var(--consulting); }
.page-games .accent { color:var(--silver); }
.top-rule { width:min(170px,100%); height:5px; margin:24px 0 34px; background:var(--gray); }
.page-enterprise .top-rule { background:var(--enterprise); }
.page-consulting .top-rule { background:var(--consulting); }
.page-games .top-rule { background:var(--games); }
.page-lede { max-width:750px; font-size:clamp(1.25rem,2.2vw,1.7rem); }
.prose { max-width:770px; font-size:1.08rem; color:var(--muted); }
.prose strong { color:#fff; }
.facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; margin-top:36px; }
.fact { border-top:1px solid var(--line); padding-top:20px; }
.fact h3 { margin:0 0 12px; font-size:1.5rem; }
.fact p { margin:0; color:var(--muted); }
.footnote { color:var(--muted2); font-size:.75rem; }
.footer { border-top:1px solid var(--line); padding:32px 0 40px; }
.footer-inner { display:flex; justify-content:space-between; align-items:end; gap:24px; }
.footer-logo { width:245px; }
.footer-meta { font-family:var(--font-mono); font-size:.73rem; color:var(--muted2); text-align:right; }
/* CSS-only entrance works with no JavaScript and is automatically static for reduced-motion users. */
@media (prefers-reduced-motion:no-preference) {
  .enter { animation:quiet-entrance .65s ease-out both; }
  .enter:nth-child(2) { animation-delay:.08s; }
  @keyframes quiet-entrance { from {opacity:.6; transform:translateY(12px)} to {opacity:1; transform:none} }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {animation:none !important; transition:none !important; scroll-behavior:auto !important}
}
/* The authentic DragonPine GIF is used only as a first-visit, skippable overlay. */
body.dp-intro-playing { overflow:hidden; }
.intro-overlay { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#000; opacity:1; transition:opacity 260ms ease; }
.intro-overlay.intro-exiting { opacity:0; pointer-events:none; }
.intro-overlay .intro-art { display:block; flex:0 1 auto; width:min(100%,960px); max-width:100%; height:auto; max-height:100svh; object-fit:contain; object-position:center; }
.intro-overlay .intro-skip { position:absolute; z-index:201; top:max(22px,env(safe-area-inset-top)); right:max(24px,env(safe-area-inset-right)); border:1px solid #aaa; border-radius:0; background:#000; color:#fff; padding:9px 17px; cursor:pointer; }
.intro-overlay .intro-skip:hover { border-color:#fff; }
@media (max-width:600px) {
  .intro-overlay .intro-art { width:100%; max-width:100%; }
  .intro-overlay .intro-skip { top:max(14px,env(safe-area-inset-top)); right:max(15px,env(safe-area-inset-right)); }
}
@media (prefers-reduced-motion:reduce) { .intro-overlay { transition:none; } }
@media (max-width:850px) {
  .header-grid { flex-direction:column; align-items:flex-start; gap:21px; }
  .main-nav { justify-content:flex-start; gap:13px 17px; }
  .three-up, .two-up, .facts { grid-template-columns:1fr; }
  .hero { padding-block:78px 94px; }
  .section-pagehero { padding-block:70px 80px; }
}
@media (max-width:430px) {
  .shell { width:calc(100% - 30px); }
  :root { --logo-width:min(295px,100%); --d-anchor:60px; }
  .hero h1 { font-size:clamp(2.45rem,11vw,3.2rem); }
  .footer-inner { display:block; }
  .footer-meta { text-align:left; margin-top:18px; }
  .footer-logo { width:220px; }
}