/* =============================================================================
   HLCT Games — the studio page

   The material is a board-game set: ivory counters on a green baize, brass
   rules, a warm brown bevel where the light doesn't reach. Deliberately not
   Quadsy's own identity — Quadsy is a near-black violet ink with four
   saturated tile colours, and this page shares none of them. A studio is not
   its game.

   One light source, from above. Every shadow on this page falls downward and
   every highlight sits on a top edge; that consistency is what makes the
   counters read as objects rather than rounded rectangles.
   ========================================================================== */

:root {
  color-scheme: dark;

  --baize:      #10261E;  /* the field */
  --baize-deep: #091712;  /* under the counters, and the vignette edge */
  --bone:       #EFE7D6;  /* counter faces, primary type */
  --bone-dim:   #ADB6A6;  /* body copy — ~7:1 on the baize */
  --brass:      #D4B24A;  /* rules, eyebrows, the link underline */
  --edge:       #8C3A32;  /* oxblood. Its only job is the counter bevel. */

  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;

  /* One spacing scale, used everywhere. Section rhythm is set in exactly one
     place (.page > * + *) so no two rules can fight over the same gap. */
  --step-1: 0.5rem;
  --step-2: 1rem;
  --step-3: 1.75rem;
  --step-4: 2.75rem;

  /* Settling counters overshoot slightly, then stop dead. */
  --ease-settle: cubic-bezier(0.16, 0.9, 0.28, 1);
}

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

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 2rem);
  padding-left: max(clamp(1.25rem, 5vw, 2rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.25rem, 5vw, 2rem), env(safe-area-inset-right));

  background-color: var(--baize);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Baize: a soft overhead light and a fine grain. Both are fixed and
   pointer-events-none so they sit behind the content and never catch a click.
   The noise is an inline SVG so the page still has no external assets. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%,
      rgba(255, 246, 225, 0.10) 0%,
      rgba(255, 246, 225, 0) 55%),
    radial-gradient(140% 110% at 50% 50%,
      rgba(9, 23, 18, 0) 45%,
      var(--baize-deep) 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------------
   Page
   -------------------------------------------------------------------------- */

/* The column is 30rem because that is the width at which four counters read as
   a confident wordmark rather than four small squares. Everything else on the
   page measures itself against that: the wordmark sets the column, not the
   other way round. */
.page {
  position: relative;   /* above body::before / ::after */
  width: 100%;
  max-width: 30rem;
  min-width: 0;   /* a flex item must be allowed to shrink below min-content */

  /* Flex column with a gap rather than sibling margins: the section rhythm is
     then set in exactly one place and nothing can collapse it away. */
  display: flex;
  flex-direction: column;
  gap: var(--step-4);
}

/* -----------------------------------------------------------------------------
   Wordmark — four counters spelling HLCT, GAMES locked beneath
   -------------------------------------------------------------------------- */

/* The query container is the wordmark, not the counter row: its inline size is
   set from the outside by the column, so the counters can size their letters
   from it without the row's own width depending on them. The wordmark then
   holds its proportions identically at every screen size.

   The extra bottom margin is the one exception to the page rhythm — GAMES is
   part of this lockup, and without it the line reads as an eyebrow belonging
   to the tagline below. */
.wordmark {
  margin: 0 0 0.85rem;
  font-weight: 400;   /* the weight lives on the counters, not the heading */
  container-type: inline-size;
}

.counters {
  display: flex;
  gap: clamp(0.4rem, 1.8vw, 0.7rem);
}

.counter {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;

  border-radius: clamp(9px, 2.6cqw, 15px);
  background:
    linear-gradient(178deg, #FBF5E7 0%, var(--bone) 42%, #DFD4BC 100%);
  color: var(--baize);

  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-weight: 800;
  font-size: clamp(2rem, 14vw, 4.6rem);   /* fallback if cqw is unsupported */
  font-size: 15cqw;
  line-height: 1;
  /* Fraunces sits slightly high in the em box at this weight; nudge the cap
     back onto the optical centre of the plate. */
  padding-top: 0.06em;

  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),      /* lit top edge */
    inset 0 -3px 0 rgba(140, 58, 50, 0.32),       /* oxblood bevel, in shade */
    inset 0 0 0 1px rgba(140, 58, 50, 0.14),      /* aged rim */
    0 3px 4px rgba(5, 16, 12, 0.4),
    0 14px 22px -8px rgba(5, 16, 12, 0.7);        /* cast shadow, downward */

  animation: settle 0.72s var(--ease-settle) backwards;
  animation-delay: calc(var(--i) * 90ms + 120ms);
  transition: transform 0.22s var(--ease-settle);
  will-change: transform;
}

/* Picked up, not hovered. Pointer devices only — a touch device would keep
   the lift stuck after a tap, which is what the click flick in counters.js
   is for instead. */
@media (hover: hover) and (pointer: fine) {
  .counter:hover { transform: translateY(-5px) rotate(-1.2deg); }
}

@keyframes settle {
  0%   { opacity: 0; transform: translateY(-56px) rotate(var(--tilt)) scale(1.05); }
  55%  { opacity: 1; transform: translateY(4px) rotate(calc(var(--tilt) * 0.22)) scale(1); }
  78%  { transform: translateY(-3px) rotate(0deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* Sits close to the counters and far from the tagline: it belongs to the
   wordmark, not to the sentence below it. Tracked rather than justified across
   the full column — five letters stretched over 30rem stop reading as a word.
   The negative right margin cancels the trailing space letter-spacing adds
   after the S, so the word still measures from the plate's left edge. */
.wordmark__games {
  display: block;
  margin-top: clamp(0.6rem, 2vw, 0.85rem);
  margin-right: -0.42em;
  padding-left: 0.22em;

  font-family: var(--font-body);
  font-size: clamp(0.72rem, 2.6vw, 0.84rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brass);

  animation: fade-up 0.6s var(--ease-settle) 520ms backwards;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -----------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */

.tagline {
  margin: 0;
  max-width: 22ch;

  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 60;
  font-weight: 500;
  font-size: clamp(1.5rem, 5.4vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.prose {
  max-width: 44ch;
  color: var(--bone-dim);
  font-size: 1.0625rem;
}

.prose p { margin: 0; }
.prose p + p { margin-top: var(--step-2); }

/* width/margin are explicit because the UA sheet gives hr `margin-inline: auto`,
   which in a flex column is an auto margin that eats all the free space and
   leaves the rule zero pixels wide. */
.rule {
  width: 100%;
  margin: 0;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg,
    rgba(212, 178, 74, 0.55) 0%,
    rgba(212, 178, 74, 0.16) 70%,
    rgba(212, 178, 74, 0) 100%);
}

/* -----------------------------------------------------------------------------
   Blocks — the game, and (once there is an address) enquiries
   -------------------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 var(--step-1);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
}

.block__title {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 90;
  font-weight: 700;
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  line-height: 1.1;
}

.block__title--sm { font-size: clamp(1.25rem, 4.4vw, 1.6rem); }

.block__note {
  margin: var(--step-2) 0 0;
  max-width: 40ch;
  color: var(--bone-dim);
  font-size: 0.95rem;
}

.link {
  color: var(--bone);
  text-decoration: none;
}

/* The rule underlines the word only. Running it under the arrow as well made
   the arrow look like part of the word rather than a direction. */
.link__text {
  background-image: linear-gradient(var(--brass), var(--brass));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  transition: background-size 0.2s ease;
}

.link:hover .link__text,
.link:focus-visible .link__text {
  background-size: 100% 0.42em;   /* the brass rule swells into a highlight */
}

.link:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
  border-radius: 2px;
}

.link__arrow {
  display: inline-block;
  margin-left: 0.14em;
  font-size: 0.44em;
  vertical-align: 0.9em;
  color: var(--brass);
  transition: transform 0.2s var(--ease-settle);
}

.link:hover .link__arrow { transform: translate(2px, -2px); }

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

.footer {
  color: var(--bone-dim);
  font-size: 0.78rem;
  opacity: 0.7;
}

.footer p { margin: 0; }

/* -----------------------------------------------------------------------------
   Reduced motion — the counters are already on the table
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .counter,
  .wordmark__games {
    animation: none;
  }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }
}