/* Parcival, LLC — the page layer.
   Direction 3a, "The Long Road, lit — v3", from the Claude Design deck
   `Parcival Brand Directions.dc.html`. Everything here builds on Nocturne's
   tokens; the only new values are the icon-tile grounds and the page's own
   measure/gutter, declared once below rather than scattered inline. */

:root {
  /* The unpainted-art hatch. Sits between --color-neutral-900 and the ground
     so a pending slot reads as deliberate rather than broken. */
  --hatch-fill: #1b1e2e;

  /* The page frame — one measure, one gutter, used by every band. */
  --page-max: 1120px;
  --page-gutter: clamp(20px, 5vw, 56px);
}

html { scroll-behavior: smooth; }

/* The lantern: light entering the page from the upper left, behind the
   header and hero. Same figure the 3a mock painted on its viewport — it is
   anchored to the top of the document and falls off well before the fold. */
body {
  color: var(--color-text);
  background:
    radial-gradient(980px 500px at 20% -8%, var(--color-accent-900), transparent 70%),
    var(--color-bg);
  background-repeat: no-repeat;
  background-attachment: scroll;
}

.wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* Freestanding rule — Nocturne's fade, at page width rather than the
   component 48px, so the ends dissolve in proportion to the measure. */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--color-neutral-800) 8%,
    var(--color-neutral-800) 92%, transparent);
}

.kicker {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}

.lede { color: var(--color-neutral-400); text-wrap: pretty; }

/* Present to a screen reader, absent to the eye. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--page-gutter);
  top: -100px;
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

/* ── the grail ────────────────────────────────────────────────────────── */
/* The cup, drawn from one circle: the bowl is the lower half of a 228-radius
   arc, the rim its diameter, and the stem and foot drop from its centre. It
   is the same geometry the opening bumper builds out of the eight-spoke
   rose, so the mark the page wears is literally the shape the intro draws —
   assets/js/intro.js flies that drawing into this box and hands over.

   It replaced a WebGL stone (assets/brand/grail.js, grail-still.webp,
   grail-halo.webp — kept on disk, no longer loaded).

   Stroke is 14 user units in a 476-unit box: at the header's 72px that is
   ~2.1px, which holds at every size the lockup steps down to. Named
   brand-grail, not grail: .grail is already the studio band below. */
.brand-grail {
  --grail-size: 72px;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--grail-size);
  height: var(--grail-size);
  /* the aureole the cup sits in, in place of the stone's baked halo */
  background: radial-gradient(circle at 50% 46%,
    color-mix(in srgb, var(--color-accent-500) 34%, transparent) 0%,
    transparent 62%);
}
.brand-chalice {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--color-accent-400);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-accent-500) 60%, transparent));
}
.brand-lockup:hover .brand-chalice { color: var(--color-accent-300); }

/* ── wordmark ─────────────────────────────────────────────────────────── */
/* Weight 300 at 0.32em tracking. The wide track is the mark; do not tighten
   it, and do not bolden it — the deck's wordmark tile is the reference. */
.wordmark {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 32px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
}
.wordmark:hover { color: var(--color-text); }

/* Mark and wordmark are one lockup and one link. The optical centre of the
   stone sits slightly above the tile's middle (the halo hangs below it), so
   the mark is nudged up rather than centred on the cap height. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
}
.brand-lockup .brand-grail { margin-top: -2px; }

/* The lockup is the biggest thing in the header, so it is the first thing
   that has to give. Below the nav's own breakpoint it steps back down. */
@media (max-width: 1100px) {
  .brand-grail { --grail-size: 56px; }
  .wordmark { font-size: 25px; }
  .brand-lockup { gap: 14px; }
}
@media (max-width: 640px) {
  .brand-grail { --grail-size: 46px; }
  .wordmark { font-size: 21px; }
  .brand-lockup { gap: 12px; }
}

/* ── header ───────────────────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: 26px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 13px;
}
.site-nav a {
  color: var(--color-neutral-400);
  text-decoration: none;
}
.site-nav a:hover { color: var(--color-accent-300); }
.site-nav .btn { font-size: 13px; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr 560px;
  gap: 48px;
  align-items: center;
  padding-block: 80px 60px;
}
.hero .kicker { display: block; margin-bottom: 24px; }
.hero h1 {
  font-weight: 300;
  font-size: clamp(38px, 5.2vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
}
.hero p {
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 32px;
  max-width: 470px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Art placeholders. The diagonal hatch marks a slot waiting on real art —
   replace the element wholesale, don't paint over it. */
.art-slot {
  border-radius: 20px;
  background: repeating-linear-gradient(135deg,
    var(--color-neutral-900) 0 16px, var(--hatch-fill) 16px 32px);
  box-shadow: var(--shadow-lg);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 2;
  color: var(--color-neutral-400);
}
.art-slot-hero { height: 440px; }
.art-slot-capsule {
  height: 150px;
  border-radius: 0;
  box-shadow: none;
  font-size: 11px;
  line-height: 1.55;
}
/* The lead game's capsule takes an accent-tinted hatch — it is the one
   product the page is currently pushing. */
.art-slot-lead {
  background: repeating-linear-gradient(135deg,
    var(--color-accent-900) 0 16px, var(--color-neutral-900) 16px 32px);
}

/* ── section headings ─────────────────────────────────────────────────── */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.section-head h2 {
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0;
}
.section-head .note { font-size: 13px; color: var(--color-neutral-500); }

.band { padding-block: 52px; }
.band-tight { padding-block-start: 0; }
/* The band the grail follows: the grail brings its own 56px of lead-in, so
   this one ends flush. Without it the two stack to 108px and the page opens
   a hole between the last app card and the band. */
.band-flush { padding-block-end: 0; }

/* ── product name & platform ──────────────────────────────────────────── */
/* The card shell these began life in came off with the Games section; the
   bench card below still uses the name and the platform tag. */
.game-name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
}
/* The platform line every product carries — v3's rule. Live releases take
   the accent; unreleased ones stay neutral so the page never oversells. */
.platform {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  white-space: nowrap;
}
.platform-pending { color: var(--color-neutral-500); }
.app-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-neutral-400);
  margin: 0;
}

/* ── app cards ────────────────────────────────────────────────────────── */
.app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.app-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}
a.app-card:hover { box-shadow: var(--shadow-md); }
a.app-card:hover .app-name { color: var(--color-accent-300); }
.app-name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin-bottom: 5px;
}
.app-card .eyebrow { margin-top: auto; }

/* ── app marks ────────────────────────────────────────────────────────── */
/* The shipped family, icon deck `6a` — "the set I'd ship". Six marks, one
   per product, each carrying its own colour world (Rota fairway green, Flint
   amber over a cyan strike, Prana a dusk mandala, Cirque an alpine range,
   Lapse a dawn sky behind the calendar, Impulse coral urge held by a teal
   timer). The family reads as siblings structurally rather than tonally:
   one dark ground, one lit subject, one accent event per icon.

   Each file carries its own ground, so the tile only supplies the squircle
   and the elevation. Radius tracks the deck's 30/132 = 22.7% ratio. */
.mark {
  display: block;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  /* An outline rather than an inset shadow: inset shadows paint beneath a
     replaced element's own content, so on an <img> they never show. */
  outline: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent);
  outline-offset: -1px;
}
/* On a game card the mark sits beside the title as a store listing would
   show it, one step down in size. */
.mark-sm { width: 38px; height: 38px; border-radius: 9px; }

/* ── grail band — A · Lit fade ────────────────────────────────────────── */
/* accent-900 dissolving into the page under a hairline. The one saturated
   field on the page: presence at page scale, per the system's own carve-out
   for the landing band. Grounds B (ledger) and C (lantern glow) were the
   alternates; v3 chose A. */
.grail {
  margin-top: 56px;
  padding-block: 56px;
  background: linear-gradient(180deg, var(--color-accent-900), var(--color-bg));
  border-top: 1px solid var(--color-accent-700);
}
.grail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.grail h2 {
  font-weight: 400;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.grail p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-neutral-300);
  margin: 0;
}
.services { display: flex; flex-direction: column; gap: 14px; }
.services .kicker { color: var(--color-accent-200); }
.services ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 2;
  color: var(--color-neutral-200);
}
.services .btn { align-self: flex-start; margin-top: 8px; }

/* A button-shaped statement of fact, not a control: same footprint as the
   CTA it stands in for, muted and inert until there is a link to give it. */
.btn-soon {
  cursor: default;
  color: var(--color-neutral-400);
  border-color: var(--color-neutral-800);
  background: none;
}
/* .note is only typeset inside .section-head; in the hero it needs its own
   size and colour or it renders as full-weight body text beside the chip. */
.hero-actions .note {
  align-self: center;
  font-size: 13px;
  color: var(--color-neutral-500);
}

/* ── newsletter ───────────────────────────────────────────────────────── */
.signup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-block: 36px 48px;
}
.signup h2 {
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.signup p { font-size: 14px; color: var(--color-neutral-500); margin: 0; }
.signup form { display: flex; gap: 10px; align-items: center; }
.signup .input { min-width: 240px; }

/* ── footer ───────────────────────────────────────────────────────────── */
.site-footer { padding-block: 32px 48px; }
.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding-top: 28px;
  font-size: 13px;
  color: var(--color-neutral-500);
}
.site-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer a { color: var(--color-neutral-500); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent-300); }
.colophon {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}

/* ── narrower ─────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 56px 48px; }
  .art-slot-hero { height: 320px; }
  .app-grid { grid-template-columns: repeat(2, 1fr); }
  .grail-inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  .site-header { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .site-nav { flex-wrap: wrap; gap: 18px; }
  .app-grid { grid-template-columns: 1fr; }
  .signup form { width: 100%; }
  .signup .input { min-width: 0; flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* grail.js draws a single frame and never starts its loop. */
}

/* ── interior pages ───────────────────────────────────────────────────── */
.page-head { padding-block: 56px 40px; }
.page-head .kicker { display: block; margin-bottom: 20px; }
.page-head h1 {
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
}

/* ── tabs ─────────────────────────────────────────────────────────────── */
/* Same tracking as the section heads, so a tab reads as a section label that
   happens to be clickable. The current tab is marked by the accent underline
   rather than a filled pill — nothing else on the page is a pill. */
.tabs { padding-block: 36px 72px; }
.tablist {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-neutral-800);
}
.tab {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 0 14px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  cursor: pointer;
}
.tab:hover { color: var(--color-accent-300); }
.tab[aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent-500);
}
.tabpanel { padding-top: 36px; max-width: 720px; }
.tabpanel:focus-visible { outline: none; }
.prose-lede {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-wrap: pretty;
  margin: 0 0 22px;
}
.prose {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-neutral-400);
  text-wrap: pretty;
  margin: 0;
}
/* Panels run to several paragraphs now, so the rhythm is set on the panel
   rather than on each block — margins collapse against the lede's own 22px. */
.tabpanel > * + * { margin-top: 20px; }
.prose strong { color: var(--color-neutral-200); font-weight: 500; }
.prose em { color: var(--color-neutral-300); }
/* Links in body copy: underlined at a distance from the baseline so the
   accent reads as a line under the words, not through their descenders. */
.prose a {
  color: var(--color-accent-300);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-700);
  text-underline-offset: 3px;
}
.prose a:hover { text-decoration-color: var(--color-accent-400); }

/* Definition list — the term carries the accent rule that a tab would, so
   a list of habits reads as a set of small section heads. */
/* Its own top margin, a touch wider than the paragraph rhythm, since a
   run of terms reads as a new block rather than as the next paragraph. */
.prose-defs { margin: 30px 0 0; }
.prose-defs dt {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-200);
  margin-top: 26px;
}
.prose-defs dt:first-child { margin-top: 0; }
.prose-defs dd {
  margin: 8px 0 0;
  padding-left: 16px;
  border-left: 1px solid var(--color-neutral-800);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-neutral-400);
  text-wrap: pretty;
}


/* ── shipped stills ───────────────────────────────────────────────────── */
/* Real screenshots, where .art-slot's hatch used to stand. Every one is
   16:9 and declared so — the box holds its shape before the bytes land, so
   nothing on the page jumps as the images decode. */
.shot { display: block; }
.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shot-hero {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 9;
}
/* ── the bench ────────────────────────────────────────────────────────── */
/* Announced but unshowable. One quiet row, deliberately not a card: a card
   in the games grid implies there is art behind it. */
.bench-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
}
a.bench-card:hover { box-shadow: var(--shadow-md); }
a.bench-card:hover .game-name { color: var(--color-accent-300); }
.bench-card .game-name { font-size: 17px; display: block; margin-bottom: 3px; }
.bench-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-neutral-500);
  margin: 0;
}
.bench-card .platform { margin-left: auto; }

/* ── narrower, for the sections declared above this file's media blocks ── */
@media (max-width: 640px) {
  /* the platform tag drops under the blurb rather than squeezing it */
  .bench-card { flex-wrap: wrap; }
  .bench-card .platform { margin-left: 54px; }
}

@media (max-width: 640px) {
  /* Five tabs wrap to three rows on a phone, pushing the panel under the fold
     before a word of it is read. Tighter tracking settles them into two. */
  .tablist { gap: 10px 18px; }
  .tab { font-size: 12px; letter-spacing: 0.08em; }
}

/* Touch devices only. The nav, tab and footer links are 13px text sitting in a
   20px box — well under the 44px a fingertip needs. Padding them out costs the
   mouse-driven layout nothing, because this query never matches there. */
@media (pointer: coarse) {
  .site-nav a, .site-footer a { padding-block: 12px; }
  .tab { padding-top: 10px; }
}

.nowrap { white-space: nowrap; }