/* --- tokens.css --- */
/* ==========================================================================
   Clockwork Drakkar — Design Tokens
   --------------------------------------------------------------------------
   Layer 1  primitives  raw values, never used directly by components
   Layer 2  semantic    what components consume (--cwd-surface, --cwd-text …)
   Layer 3  surfaces    "paper" / "ink" bands, re-resolved by theme

   Rule: components read layer 2 only. Adding a theme = re-resolving layer 2.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- palette
     Ink — from .bg-team (#202020) and the logo linework (#3A3A3C).      */
  --cwd-ink-950: #0b0b0b;
  --cwd-ink-900: #141414;
  --cwd-ink-800: #202020;
  --cwd-ink-700: #2e2e2e;
  --cwd-ink-600: #3a3a3c;
  --cwd-ink-500: #55555a;
  --cwd-ink-400: #74747b;

  /* Bone — warm paper. Replaces flat #fff, which reads clinical next to
     the woodcut logo. */
  --cwd-bone-50: #fbf9f5;
  --cwd-bone-100: #f4f0e8;
  --cwd-bone-200: #e6e0d4;
  --cwd-bone-300: #d2cabb;
  --cwd-bone-400: #a8a29a;

  /* Blood — lifted from the Gardariki mark. The brand's only chromatic
     accent; used sparingly, like ink stamped on paper. */
  --cwd-blood-700: #6e0110;
  --cwd-blood-600: #8c0111;
  --cwd-blood-500: #a81523;
  --cwd-blood-400: #c4303d;
  --cwd-blood-300: #e0505e;

  /* Ochre — the gold trim in the character concepts. Secondary accent. */
  --cwd-ochre-500: #c89b3c;
  --cwd-ochre-400: #ddb55e;

  /* Slate — the concept-art ground. Informational / neutral-cool. */
  --cwd-slate-600: #4a5563;
  --cwd-slate-500: #5d6b7c;

  --cwd-white: #ffffff;
  --cwd-black: #000000;

  /* ------------------------------------------------------------------ type
     Fluid scale in rem. The old stylesheet set `font-size: 16pt` on body,
     which is ~21px and opts the whole page out of rem-based scaling. */
  --cwd-font-body: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --cwd-font-display: "PT Serif", Georgia, "Times New Roman", serif;
  --cwd-font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;

  --cwd-text-xs: 0.75rem;
  --cwd-text-sm: 0.875rem;
  --cwd-text-base: 1.0625rem;
  --cwd-text-lg: 1.25rem;
  --cwd-text-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --cwd-text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --cwd-text-3xl: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
  --cwd-text-4xl: clamp(2.75rem, 2rem + 3.6vw, 4.5rem);

  --cwd-leading-tight: 1.15;
  --cwd-leading-snug: 1.35;
  --cwd-leading-normal: 1.6;
  --cwd-leading-loose: 1.75;

  /* Letterspacing carries hierarchy where weight can't — see base.css. */
  --cwd-tracking-tight: -0.02em;
  --cwd-tracking-normal: 0;
  --cwd-tracking-wide: 0.06em;
  --cwd-tracking-wider: 0.14em;

  /* ----------------------------------------------------------------- space
     4px base. Steps 6/9/10 map the existing 32 / 96 / 128px values. */
  --cwd-space-0: 0;
  --cwd-space-1: 0.25rem;
  --cwd-space-2: 0.5rem;
  --cwd-space-3: 0.75rem;
  --cwd-space-4: 1rem;
  --cwd-space-5: 1.5rem;
  --cwd-space-6: 2rem;
  --cwd-space-7: 3rem;
  --cwd-space-8: 4rem;
  --cwd-space-9: 6rem;
  --cwd-space-10: 8rem;

  /* --------------------------------------------------------------- measure */
  --cwd-measure: 68ch;
  --cwd-container: 1200px;
  --cwd-container-narrow: 860px;

  /* ---------------------------------------------------------------- shape
     Near-square. Woodcut prints don't have soft corners. */
  --cwd-radius-none: 0;
  --cwd-radius-sm: 2px;
  --cwd-radius-md: 3px;
  --cwd-radius-full: 9999px;

  --cwd-rule-width: 1px;
  --cwd-rule-width-thick: 3px;

  /* -------------------------------------------------------------- ornament
     The knotwork rail. Masked, not drawn, so it inherits `currentColor`
     and works on any surface. */
  --cwd-ornament-src: url("images/border.png");
  --cwd-ornament-width: 96px;

  /* The gutter the ornament lives in. Every band, the navbar and the
     footer reserve it, so the rail reads as one spine running the whole
     page and all content shares a single left edge. Set to the ornament
     width by layout.css once masking support is confirmed. */
  --cwd-gutter: 0px;

  /* ---------------------------------------------------------------- motion */
  --cwd-ease: cubic-bezier(0.2, 0, 0, 1);
  --cwd-duration-fast: 120ms;
  --cwd-duration-base: 200ms;
  --cwd-duration-slow: 320ms;

  --cwd-z-base: 0;
  --cwd-z-sticky: 100;
  --cwd-z-overlay: 200;
}

/* ==========================================================================
   Layer 2 + 3 — semantic tokens, resolved per surface.

   A surface is a band of the page. `paper` and `ink` alternate down the
   layout; that alternation *is* the brand, so the dark theme darkens both
   rather than inverting them into each other.
   ========================================================================== */

/* paper — the default surface */
:root,
[data-surface="paper"] {
  --cwd-bg: var(--cwd-bone-50);
  --cwd-bg-raised: var(--cwd-white);
  --cwd-bg-sunken: var(--cwd-bone-100);

  --cwd-text: var(--cwd-ink-900);
  --cwd-text-muted: var(--cwd-ink-500);
  --cwd-text-inverse: var(--cwd-bone-100);

  --cwd-rule: var(--cwd-bone-300);
  --cwd-rule-strong: var(--cwd-ink-900);

  /* accent — decorative / large type (>=24px, 3:1) */
  --cwd-accent: var(--cwd-blood-600);
  /* accent-ink — body-size text and links, holds 4.5:1 */
  --cwd-accent-ink: var(--cwd-blood-600);
  --cwd-accent-hover: var(--cwd-blood-500);
  --cwd-accent-contrast: var(--cwd-bone-50);

  --cwd-focus: var(--cwd-blood-600);
  --cwd-ornament-color: var(--cwd-ink-900);

  --cwd-shadow-sm: 0 1px 2px rgb(11 11 11 / 0.08);
  --cwd-shadow-md: 0 8px 16px -8px rgb(11 11 11 / 0.18);
  --cwd-shadow-lg: 0 0.5rem 1rem rgb(11 11 11 / 0.15);
}

/* ink — the inverse band */
[data-surface="ink"] {
  --cwd-bg: var(--cwd-ink-900);
  --cwd-bg-raised: var(--cwd-ink-800);
  --cwd-bg-sunken: var(--cwd-ink-950);

  --cwd-text: var(--cwd-bone-100);
  --cwd-text-muted: var(--cwd-bone-400);
  --cwd-text-inverse: var(--cwd-ink-900);

  --cwd-rule: var(--cwd-ink-600);
  --cwd-rule-strong: var(--cwd-bone-100);

  /* Blood at 4.5:1 on near-black is too pink to stay on-brand, so on ink
     the decorative red and the text-safe red are different steps. */
  --cwd-accent: var(--cwd-blood-400);
  --cwd-accent-ink: var(--cwd-blood-300);
  --cwd-accent-hover: var(--cwd-ochre-400);
  --cwd-accent-contrast: var(--cwd-bone-50);

  --cwd-focus: var(--cwd-ochre-400);
  --cwd-ornament-color: var(--cwd-bone-100);

  --cwd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --cwd-shadow-md: 0 8px 16px -8px rgb(0 0 0 / 0.7);
  --cwd-shadow-lg: 0 0.5rem 1rem rgb(0 0 0 / 0.6);
}

/* ==========================================================================
   Dark theme — both bands darken. Paper stops being paper, but the
   light-band/dark-band rhythm survives, which is the part that reads as
   Clockwork Drakkar.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  :root:not([data-theme="light"]) [data-surface="paper"] {
    --cwd-bg: var(--cwd-ink-800);
    --cwd-bg-raised: var(--cwd-ink-700);
    --cwd-bg-sunken: var(--cwd-ink-900);

    --cwd-text: var(--cwd-bone-100);
    --cwd-text-muted: var(--cwd-bone-400);
    --cwd-text-inverse: var(--cwd-ink-900);

    --cwd-rule: var(--cwd-ink-600);
    --cwd-rule-strong: var(--cwd-bone-100);

    --cwd-accent: var(--cwd-blood-400);
    --cwd-accent-ink: var(--cwd-blood-300);
    --cwd-accent-hover: var(--cwd-ochre-400);

    --cwd-focus: var(--cwd-ochre-400);
    --cwd-ornament-color: var(--cwd-bone-100);

    --cwd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
    --cwd-shadow-md: 0 8px 16px -8px rgb(0 0 0 / 0.7);
    --cwd-shadow-lg: 0 0.5rem 1rem rgb(0 0 0 / 0.6);
  }

  :root:not([data-theme="light"]) [data-surface="ink"] {
    --cwd-bg: var(--cwd-ink-950);
    --cwd-bg-raised: var(--cwd-ink-900);
    --cwd-bg-sunken: var(--cwd-black);
    --cwd-rule: var(--cwd-ink-700);
  }
}

/* Explicit choice wins over the system preference, in both directions. */
:root[data-theme="dark"],
:root[data-theme="dark"] [data-surface="paper"] {
  --cwd-bg: var(--cwd-ink-800);
  --cwd-bg-raised: var(--cwd-ink-700);
  --cwd-bg-sunken: var(--cwd-ink-900);

  --cwd-text: var(--cwd-bone-100);
  --cwd-text-muted: var(--cwd-bone-400);
  --cwd-text-inverse: var(--cwd-ink-900);

  --cwd-rule: var(--cwd-ink-600);
  --cwd-rule-strong: var(--cwd-bone-100);

  --cwd-accent: var(--cwd-blood-400);
  --cwd-accent-ink: var(--cwd-blood-300);
  --cwd-accent-hover: var(--cwd-ochre-400);

  --cwd-focus: var(--cwd-ochre-400);
  --cwd-ornament-color: var(--cwd-bone-100);

  --cwd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --cwd-shadow-md: 0 8px 16px -8px rgb(0 0 0 / 0.7);
  --cwd-shadow-lg: 0 0.5rem 1rem rgb(0 0 0 / 0.6);
}

:root[data-theme="dark"] [data-surface="ink"] {
  --cwd-bg: var(--cwd-ink-950);
  --cwd-bg-raised: var(--cwd-ink-900);
  --cwd-bg-sunken: var(--cwd-black);
  --cwd-rule: var(--cwd-ink-700);
}

/* --- base.css --- */
/* ==========================================================================
   Clockwork Drakkar — Base
   Reset, web fonts, and element-level typography.
   Depends on: tokens.css
   ========================================================================== */

/* ------------------------------------------------------------------- fonts
   The repo ships Open Sans as .ttf only, at weight 400 + italic. There is
   no bold file, so any `font-weight: 700` here would render as *synthetic*
   bold — the browser smearing the regular outlines. The type system below
   therefore builds hierarchy from size, case and tracking instead.

   To add real weights: drop OpenSans-SemiBold.woff2 / OpenSans-Bold.woff2
   into /fonts, declare them below, and the display styles pick them up.
   Converting the existing .ttf files to subset .woff2 (latin + cyrillic)
   takes the font payload from ~1.1MB to roughly 50KB.                     */

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* PT Serif — the display face, for headings and the brand name. Chosen over
   a Latin-first serif because its Cyrillic is the original design (ParaType),
   not an appended script, and its stroke weight sits with the woodcut mark
   instead of fighting it.

   Split by unicode-range so a Latin-only page never downloads the Cyrillic
   file. 400 only: the type system builds hierarchy from scale and case, not
   weight, so there is deliberately no bold here either. */
@font-face {
  font-family: "PT Serif";
  src: url("fonts/PTSerif-Cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PT Serif";
  src: url("fonts/PTSerif-Latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------- reset */

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

* {
  margin: 0;
}

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

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--cwd-bg);
  color: var(--cwd-text);
  font-family: var(--cwd-font-body);
  font-size: var(--cwd-text-base);
  line-height: var(--cwd-leading-normal);
  /* No font-smoothing or text-rendering overrides here on purpose.
     `antialiased` drops subpixel rendering and thins the strokes, which
     this single 400 weight cannot afford; `optimizeLegibility` reorders
     kerning/ligatures and visibly misplaces glyphs in the small uppercase
     runs set with letter-spacing (the brand kicker and meta). Let the
     platform render text. */
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------- headings
   Scale + tracking + case do the work that weight normally would. */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--cwd-font-display);
  font-weight: 400;
  line-height: var(--cwd-leading-tight);
  text-wrap: balance;
  color: var(--cwd-text);
}

h1 {
  font-size: var(--cwd-text-3xl);
  letter-spacing: var(--cwd-tracking-tight);
}

h2 {
  font-size: var(--cwd-text-2xl);
  letter-spacing: var(--cwd-tracking-tight);
}

h3 {
  font-size: var(--cwd-text-xl);
}

h4 {
  font-size: var(--cwd-text-lg);
}

h5,
h6 {
  font-size: var(--cwd-text-base);
  letter-spacing: var(--cwd-tracking-wide);
  text-transform: uppercase;
}

p {
  text-wrap: pretty;
}

p + p {
  margin-top: var(--cwd-space-4);
}

/* ---------------------------------------------------------------- inline */

a {
  color: var(--cwd-accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--cwd-duration-fast) var(--cwd-ease);
}

a:hover {
  color: var(--cwd-accent-hover);
}

strong,
b {
  /* No bold file exists; emphasise with colour rather than faux weight. */
  font-weight: 400;
  color: var(--cwd-text);
}

em,
i {
  font-style: italic;
}

hr {
  height: var(--cwd-rule-width);
  border: 0;
  background-color: var(--cwd-rule);
}

code,
kbd,
samp {
  font-family: var(--cwd-font-mono);
  font-size: 0.9em;
}

/* ------------------------------------------------------------------ focus
   One visible ring everywhere. The old stylesheet had no focus styles at
   all, which made the site unusable by keyboard. */

:focus-visible {
  outline: 2px solid var(--cwd-focus);
  outline-offset: 3px;
  border-radius: var(--cwd-radius-sm);
}

::selection {
  background-color: var(--cwd-accent);
  color: var(--cwd-accent-contrast);
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

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

.cwd-skip-link {
  position: absolute;
  top: var(--cwd-space-2);
  left: var(--cwd-space-2);
  z-index: var(--cwd-z-overlay);
  padding: var(--cwd-space-2) var(--cwd-space-4);
  background-color: var(--cwd-accent);
  color: var(--cwd-accent-contrast);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--cwd-duration-fast) var(--cwd-ease);
}

.cwd-skip-link:focus-visible {
  transform: translateY(0);
  color: var(--cwd-accent-contrast);
}

/* --- layout.css --- */
/* ==========================================================================
   Clockwork Drakkar — Layout
   Containers, bands, and the intrinsic grids that replace the old
   hand-split .row / .col markup.
   Depends on: tokens.css
   ========================================================================== */

/* ---------------------------------------------------------------- container */

.cwd-container {
  width: 100%;
  max-width: var(--cwd-container);
  margin-inline: auto;
  padding-inline: var(--cwd-space-5);
}

.cwd-container--narrow {
  max-width: var(--cwd-container-narrow);
}

.cwd-container--wide {
  max-width: none;
}

/* ------------------------------------------------------------------- band
   A full-bleed horizontal band. Sets its own surface, so everything
   nested inside resolves the right semantic tokens automatically. */

.cwd-band {
  background-color: var(--cwd-bg);
  color: var(--cwd-text);
  padding-block: var(--cwd-space-8);
  padding-inline-start: var(--cwd-gutter);
}

.cwd-band--tight {
  padding-block: var(--cwd-space-6);
}

.cwd-band--tall {
  padding-block: var(--cwd-space-9);
}

/* ---------------------------------------------------------------- ornament
   The knotwork rail from images/border.png.

   The old rule painted the PNG as a background-image, which locked it to
   white-on-black and needed an @supports hack for iOS. Masking it instead
   means the artwork is untouched but takes `currentColor`, so the same
   asset works on paper and on ink, in both themes. */

/* Progressive enhancement: no rail unless luminance masking is available.

   border.png is white knotwork on an opaque black field with no alpha
   channel. `mask-mode` defaults to `match-source`, which for a raster
   image means *alpha* masking — and since every pixel is opaque, that
   masks nothing and paints a solid 96px bar. Luminance masking is what
   reads the black field as transparent and the white line as solid. */

.cwd-band--ornamented {
  position: relative;
}

@supports ((mask-mode: luminance) or (-webkit-mask-mode: luminance)) {
  @media (min-width: 48.0625rem) {
    :root {
      --cwd-gutter: var(--cwd-ornament-width);
    }

    .cwd-band--ornamented::before {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-start: 0;
      width: var(--cwd-ornament-width);
      background-color: var(--cwd-ornament-color);
      -webkit-mask-image: var(--cwd-ornament-src);
      mask-image: var(--cwd-ornament-src);
      -webkit-mask-mode: luminance;
      mask-mode: luminance;
      -webkit-mask-repeat: repeat-y;
      mask-repeat: repeat-y;
      -webkit-mask-size: var(--cwd-ornament-width) auto;
      mask-size: var(--cwd-ornament-width) auto;
      pointer-events: none;
    }
  }
}

/* ------------------------------------------------------------------ stack
   Vertical rhythm via the owl selector — spacing lives on the parent,
   so children stay position-agnostic. */

.cwd-stack {
  display: flex;
  flex-direction: column;
}

.cwd-stack > * + * {
  margin-block-start: var(--cwd-stack-gap, var(--cwd-space-4));
}

.cwd-stack--sm { --cwd-stack-gap: var(--cwd-space-2); }
.cwd-stack--lg { --cwd-stack-gap: var(--cwd-space-6); }
.cwd-stack--xl { --cwd-stack-gap: var(--cwd-space-7); }

/* ------------------------------------------------------------------- grid
   Intrinsic: columns are declared by minimum width, not by count. The old
   markup split four service cards into two hardcoded rows of two and
   eleven tech entries into three rows — those breaks disappear here. */

.cwd-grid {
  display: grid;
  gap: var(--cwd-grid-gap, var(--cwd-space-6));
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--cwd-grid-min, 16rem), 100%), 1fr)
  );
}

.cwd-grid--wide { --cwd-grid-min: 22rem; }
.cwd-grid--narrow { --cwd-grid-min: 12rem; }

/* Fixed-count grid for the rare case where the count is the design. */
.cwd-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 40rem) {
  .cwd-grid--2 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- cluster
   Horizontal group that wraps — nav items, social links, button rows. */

.cwd-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cwd-cluster-gap, var(--cwd-space-4));
}

.cwd-cluster--sm { --cwd-cluster-gap: var(--cwd-space-2); }
.cwd-cluster--between { justify-content: space-between; }
.cwd-cluster--center { justify-content: center; }

/* ----------------------------------------------------------------- prose
   Constrains measure. Body copy past ~68ch is measurably harder to read,
   and the current lead paragraphs run the full 1200px container. */

.cwd-prose {
  max-width: var(--cwd-measure);
}

.cwd-prose--center {
  margin-inline: auto;
}

/* ------------------------------------------------------------------ media */

.cwd-frame {
  position: relative;
  aspect-ratio: var(--cwd-frame-ratio, 16 / 9);
  overflow: hidden;
  background-color: var(--cwd-bg-sunken);
  border: var(--cwd-rule-width) solid var(--cwd-rule);
}

.cwd-frame > iframe,
.cwd-frame > img,
.cwd-frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.cwd-frame--square { --cwd-frame-ratio: 1; }
.cwd-frame--portrait { --cwd-frame-ratio: 3 / 4; }

/* --- components.css --- */
/* ==========================================================================
   Clockwork Drakkar — Components
   Depends on: tokens.css, base.css, layout.css
   ========================================================================== */

/* ==========================================================================
   Section heading — an eyebrow, a display line, and a rule.
   The rule is the system's smallest piece of ornament.
   ========================================================================== */

.cwd-heading {
  display: flex;
  flex-direction: column;
  gap: var(--cwd-space-3);
  margin-block-end: var(--cwd-space-6);
}

.cwd-heading__eyebrow {
  font-size: var(--cwd-text-sm);
  letter-spacing: var(--cwd-tracking-wider);
  text-transform: uppercase;
  color: var(--cwd-accent-ink);
}

.cwd-heading__title {
  font-size: var(--cwd-text-3xl);
  letter-spacing: var(--cwd-tracking-tight);
  line-height: var(--cwd-leading-tight);
}

.cwd-heading__title--sm {
  font-size: var(--cwd-text-2xl);
}

.cwd-heading__rule {
  width: var(--cwd-space-8);
  height: var(--cwd-rule-width-thick);
  background-color: var(--cwd-accent);
}

.cwd-heading--center {
  align-items: center;
  text-align: center;
}

/* ==========================================================================
   Lead — the opening paragraph of a band.
   ========================================================================== */

.cwd-lead {
  font-size: var(--cwd-text-lg);
  line-height: var(--cwd-leading-loose);
  color: var(--cwd-text);
}

.cwd-text-muted {
  color: var(--cwd-text-muted);
}

/* ==========================================================================
   Button
   The site had none — a four-service sales pitch with nowhere to click.
   ========================================================================== */

.cwd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cwd-space-2);
  padding: var(--cwd-space-3) var(--cwd-space-6);
  border: var(--cwd-rule-width) solid transparent;
  border-radius: var(--cwd-radius-sm);
  font-size: var(--cwd-text-sm);
  letter-spacing: var(--cwd-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--cwd-duration-fast) var(--cwd-ease),
    color var(--cwd-duration-fast) var(--cwd-ease),
    border-color var(--cwd-duration-fast) var(--cwd-ease),
    transform var(--cwd-duration-fast) var(--cwd-ease);
}

.cwd-btn:active {
  transform: translateY(1px);
}

/* The React API exposes a disabled prop, so the CSS has to show it —
   otherwise an inert button still reads as clickable. */
.cwd-btn:disabled,
.cwd-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.cwd-btn:disabled:active,
.cwd-btn[aria-disabled="true"]:active {
  transform: none;
}

.cwd-btn--primary {
  background-color: var(--cwd-accent);
  border-color: var(--cwd-accent);
  color: var(--cwd-accent-contrast);
}

.cwd-btn--primary:hover {
  background-color: var(--cwd-accent-hover);
  border-color: var(--cwd-accent-hover);
  color: var(--cwd-accent-contrast);
}

.cwd-btn--outline {
  background-color: transparent;
  border-color: var(--cwd-rule-strong);
  color: var(--cwd-text);
}

.cwd-btn--outline:hover {
  background-color: var(--cwd-rule-strong);
  color: var(--cwd-bg);
}

.cwd-btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--cwd-text);
}

.cwd-btn--ghost:hover {
  background-color: var(--cwd-bg-sunken);
  color: var(--cwd-text);
}

/* ==========================================================================
   Brand lockup — mark + wordmark + registration line.
   ========================================================================== */

.cwd-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--cwd-space-4);
  text-decoration: none;
  color: var(--cwd-text);
}

.cwd-brand:hover {
  color: var(--cwd-text);
}

/* The asset is the emblem alone, and it is wider than it is tall (~1.39:1),
   so inside a square box `contain` fits it by WIDTH and leaves transparent
   bands above and below. 72px is what makes the emblem read at the same
   visual weight as the three-line text block beside it. */
.cwd-brand__mark {
  flex: none;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

/* Same asset problem as .cwd-card__icon: the mark is black line art on
   transparent, so on ink surfaces it sinks into the background. Invert it
   so one file serves both bands. */
[data-surface="ink"] .cwd-brand__mark {
  filter: invert(1);
}

:root[data-theme="dark"] .cwd-brand__mark {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cwd-brand__mark {
    filter: invert(1);
  }
}

.cwd-brand__text {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}

.cwd-brand__kicker,
.cwd-brand__meta {
  font-size: var(--cwd-text-xs);
  letter-spacing: var(--cwd-tracking-wide);
  text-transform: uppercase;
  color: var(--cwd-text-muted);
}

/* Sentence case, not uppercase. Cyrillic loses more to all-caps than Latin
   does: its capitals are mostly uniform rectangles (К Л О В Р Д Н П И), so a
   name like «КЛОКВОРК ДРАККАР» reads as one undifferentiated block, while the
   lowercase carries the shapes that make it legible at a glance. The kicker
   and meta lines stay uppercase — they are labels, and the contrast between
   their caps and the name's sentence case is what gives the lockup its
   hierarchy. */
.cwd-brand__name {
  font-family: var(--cwd-font-display);
  font-size: var(--cwd-text-xl);
  font-weight: 400;
  line-height: var(--cwd-leading-tight);
}

@media (max-width: 30rem) {
  .cwd-brand__mark { width: 44px; height: 44px; }
  .cwd-brand__name { font-size: var(--cwd-text-base); }
  .cwd-brand__meta { display: none; }
}

/* ==========================================================================
   Navbar
   Replaces Bootstrap's navbar + collapse. Toggle logic in js/site.js.
   ========================================================================== */

.cwd-navbar {
  position: sticky;
  top: 0;
  z-index: var(--cwd-z-sticky);
  background-color: var(--cwd-bg);
  border-block-end: var(--cwd-rule-width) solid var(--cwd-rule);
  box-shadow: var(--cwd-shadow-sm);
  padding-inline-start: var(--cwd-gutter);
}

.cwd-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cwd-space-4);
  padding-block: var(--cwd-space-3);
}

.cwd-navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--cwd-space-5);
}

.cwd-navbar__links {
  display: flex;
  align-items: center;
  gap: var(--cwd-space-5);
}

.cwd-navbar__link {
  position: relative;
  padding-block: var(--cwd-space-2);
  font-size: var(--cwd-text-sm);
  letter-spacing: var(--cwd-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cwd-text);
}

.cwd-navbar__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--cwd-rule-width-thick);
  background-color: var(--cwd-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--cwd-duration-base) var(--cwd-ease);
}

.cwd-navbar__link:hover,
.cwd-navbar__link[aria-current="page"] {
  color: var(--cwd-text);
}

.cwd-navbar__link:hover::after,
.cwd-navbar__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.cwd-navbar__toggle {
  display: none;
  padding: var(--cwd-space-2);
  background: none;
  border: var(--cwd-rule-width) solid var(--cwd-rule);
  border-radius: var(--cwd-radius-sm);
  cursor: pointer;
  color: var(--cwd-text);
}

@media (max-width: 52rem) {
  .cwd-navbar__toggle {
    display: inline-flex;
  }

  .cwd-navbar__menu {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--cwd-space-4);
    padding: var(--cwd-space-5);
    background-color: var(--cwd-bg);
    border-block-end: var(--cwd-rule-width) solid var(--cwd-rule);
    box-shadow: var(--cwd-shadow-md);
  }

  .cwd-navbar__menu[hidden] {
    display: none;
  }

  .cwd-navbar__links {
    flex-direction: column;
    align-items: stretch;
    gap: var(--cwd-space-3);
  }
}

@media (min-width: 52.0625rem) {
  /* The menu is always shown on desktop, even when JS left it hidden. */
  .cwd-navbar__menu[hidden] {
    display: flex;
  }
}

/* ==========================================================================
   Icon button — social links, theme toggle.
   ========================================================================== */

.cwd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: var(--cwd-space-2);
  background: none;
  border: var(--cwd-rule-width) solid transparent;
  border-radius: var(--cwd-radius-sm);
  color: var(--cwd-text);
  cursor: pointer;
  transition:
    color var(--cwd-duration-fast) var(--cwd-ease),
    border-color var(--cwd-duration-fast) var(--cwd-ease);
}

.cwd-icon-btn:hover {
  color: var(--cwd-accent-ink);
  border-color: var(--cwd-rule);
}

.cwd-icon-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.cwd-icon-btn--lg {
  width: 3.5rem;
  height: 3.5rem;
}

.cwd-icon-btn--lg svg {
  width: 32px;
  height: 32px;
}

/* ==========================================================================
   Service card
   ========================================================================== */

.cwd-card {
  display: flex;
  flex-direction: column;
  gap: var(--cwd-space-4);
  padding: var(--cwd-space-6);
  background-color: var(--cwd-bg-raised);
  border: var(--cwd-rule-width) solid var(--cwd-rule);
  border-radius: var(--cwd-radius-sm);
  transition:
    border-color var(--cwd-duration-base) var(--cwd-ease),
    transform var(--cwd-duration-base) var(--cwd-ease);
}

.cwd-card:hover {
  border-color: var(--cwd-accent);
  transform: translateY(-2px);
}

.cwd-card__icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

/* The service icons are black line art on transparent. On ink surfaces
   they vanish; invert them so one asset serves both bands. */
[data-surface="ink"] .cwd-card__icon {
  filter: invert(1);
}

:root[data-theme="dark"] .cwd-card__icon {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cwd-card__icon {
    filter: invert(1);
  }
}

.cwd-card__title {
  font-size: var(--cwd-text-base);
  letter-spacing: var(--cwd-tracking-wide);
  text-transform: uppercase;
}

.cwd-card__body {
  font-size: var(--cwd-text-sm);
  line-height: var(--cwd-leading-normal);
  color: var(--cwd-text-muted);
}

.cwd-card--center {
  align-items: center;
  text-align: center;
}

/* ==========================================================================
   Spec — a labelled entry. Used for the tech stack.
   ========================================================================== */

.cwd-spec {
  display: flex;
  flex-direction: column;
  gap: var(--cwd-space-2);
  padding-block-start: var(--cwd-space-4);
  border-block-start: var(--cwd-rule-width-thick) solid var(--cwd-rule-strong);
}

.cwd-spec__label {
  font-size: var(--cwd-text-xs);
  letter-spacing: var(--cwd-tracking-wider);
  text-transform: uppercase;
  color: var(--cwd-text-muted);
}

.cwd-spec__value {
  font-size: var(--cwd-text-base);
  line-height: var(--cwd-leading-snug);
}

/* ==========================================================================
   Divider — the ornament, rotated into a horizontal rule.
   ========================================================================== */

.cwd-divider {
  display: flex;
  align-items: center;
  gap: var(--cwd-space-4);
  color: var(--cwd-rule);
}

.cwd-divider::before,
.cwd-divider::after {
  content: "";
  flex: 1;
  height: var(--cwd-rule-width);
  background-color: currentColor;
}

.cwd-divider--plain {
  gap: 0;
}

.cwd-divider__mark {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  background-color: var(--cwd-accent);
  transform: rotate(45deg);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.cwd-footer {
  padding-block: var(--cwd-space-8) var(--cwd-space-6);
  padding-inline-start: var(--cwd-gutter);
  background-color: var(--cwd-bg);
  color: var(--cwd-text);
  border-block-start: var(--cwd-rule-width) solid var(--cwd-rule);
}

.cwd-footer__grid {
  display: grid;
  gap: var(--cwd-space-7);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  margin-block-end: var(--cwd-space-7);
}

.cwd-footer__title {
  font-size: var(--cwd-text-sm);
  letter-spacing: var(--cwd-tracking-wider);
  text-transform: uppercase;
  color: var(--cwd-text-muted);
  margin-block-end: var(--cwd-space-4);
}

.cwd-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--cwd-space-2);
  font-size: var(--cwd-text-base);
}

.cwd-footer__legal {
  padding-block-start: var(--cwd-space-5);
  border-block-start: var(--cwd-rule-width) solid var(--cwd-rule);
  font-size: var(--cwd-text-sm);
  color: var(--cwd-text-muted);
}

/* ==========================================================================
   Gallery
   ========================================================================== */

.cwd-gallery {
  display: grid;
  gap: var(--cwd-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.cwd-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--cwd-rule-width) solid var(--cwd-rule);
  cursor: zoom-in;
  transition: border-color var(--cwd-duration-base) var(--cwd-ease);
}

.cwd-gallery img:hover {
  border-color: var(--cwd-accent);
}

/* --- utilities.css --- */
/* ==========================================================================
   Clockwork Drakkar — Utilities
   A deliberately small set. Anything reached for more than a few times
   should graduate into components.css instead.
   Depends on: tokens.css
   ========================================================================== */

/* ------------------------------------------------------------------- text */

.cwd-text-center { text-align: center; }
.cwd-text-start { text-align: start; }

.cwd-text-xs { font-size: var(--cwd-text-xs); }
.cwd-text-sm { font-size: var(--cwd-text-sm); }
.cwd-text-lg { font-size: var(--cwd-text-lg); }

.cwd-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--cwd-tracking-wide);
}

.cwd-accent { color: var(--cwd-accent-ink); }

/* ------------------------------------------------------------------ space */

.cwd-mt-4 { margin-block-start: var(--cwd-space-4); }
.cwd-mt-6 { margin-block-start: var(--cwd-space-6); }
.cwd-mt-7 { margin-block-start: var(--cwd-space-7); }

.cwd-mb-4 { margin-block-end: var(--cwd-space-4); }
.cwd-mb-6 { margin-block-end: var(--cwd-space-6); }

.cwd-mx-auto { margin-inline: auto; }

/* ----------------------------------------------------------------- layout */

.cwd-flow > * + * { margin-block-start: var(--cwd-space-4); }
.cwd-full { width: 100%; }