/* =====================================================================
   ART DIRECTION LAYER  —  "Editorial Atelier"
   Loads AFTER the base stylesheet and overrides the look only.
   Brief: Readymag Websites-of-the-Year energy → bold editorial + hand-drawn,
   with the same palette and subtle techy-agency hints.
   Fonts: Seatren (display) · Satoshi (body, kept) · Instrument Serif (accents,
   kept) · system mono (technical labels).
   Nothing here renames the JS/DOM hooks.
   ===================================================================== */

/* ---------- Seatren (self-hosted) ---------- */
@font-face {
  font-family: "Seatren";
  src: url("./fonts/seatren.woff2") format("woff2"),
       url("./fonts/seatren.woff") format("woff");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Seatren";
  src: url("./fonts/seatren-italic.woff2") format("woff2"),
       url("./fonts/seatren-italic.woff") format("woff");
  font-weight: 400 700; font-style: italic; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --font-display: "Seatren", "Clash Display", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "DejaVu Sans Mono", monospace;
  --line-strong: rgba(21, 20, 26, .30);
  --paper-line: rgba(21, 20, 26, .045);

  /* hand-drawn assets (turbulence-displaced strokes) */
  --sketch-ink: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' preserveAspectRatio='none'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.009 0.013' numOctaves='2' seed='7' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='7'/></filter><rect x='9' y='9' width='282' height='282' fill='none' stroke='%2315141a' stroke-width='2.2' filter='url(%23w)'/></svg>");
  --sketch-accent: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' preserveAspectRatio='none'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.009 0.013' numOctaves='2' seed='4' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='7'/></filter><rect x='9' y='9' width='282' height='282' fill='none' stroke='%23e6007e' stroke-width='2.6' filter='url(%23w)'/></svg>");
}

/* ---------- Clean editorial background ---------- */
/* No animated aurora — flat paper with a fine, even blueprint grid. */
.bg-fx { display: none !important; }        /* remove the moving colour orbs */

body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 40px 40px;
}
/* flatten the soft colour glow on the dark editorial bands too */
.strengths.band--dark::before,
.feature.band--dark::before { display: none; }

/* ============================================================
   TYPOGRAPHY — bring Seatren + editorial voice
   ============================================================ */
.hero__title,
.section-title,
.outro__title,
.feature__title,
.footer__big { text-transform: uppercase; }

.hero__title { letter-spacing: -.02em; line-height: .82; font-weight: 600; }
.section-title { letter-spacing: -.01em; font-weight: 600; line-height: .92; }
.outro__title,
.feature__title { letter-spacing: -.01em; font-weight: 600; }
.footer__big { letter-spacing: -.02em; font-weight: 600; }

/* serif italic accents stay serif even inside uppercased display type */
.hero__title em,
.section-title em,
.outro__title em,
.feature__title em,
.intro__lead em,
.footer__big em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* intro lead keeps sentence case but gets the display face */
.intro__lead { font-weight: 400; letter-spacing: 0; word-spacing: .06em; line-height: 1.12; }

/* ---------- Technical labels → monospace (techy-agency hint) ---------- */
.section-index,
.kicker,
.fact__k, .fact__v,
.hcard__num, .hcard__type, .hcard__tags li,
.hwork__hint,
.skills__head, .skill__pct,
.lkind,
.brand__num, .brand__kind,
.tl-phase,
.feature__kicker,
.about__services li,
.preloader__label,
.footer__row,
.strengths__head .accent {
  font-family: var(--font-mono);
}
.section-index { font-weight: 400; letter-spacing: .06em; }
.kicker, .tl-phase, .feature__kicker, .preloader__label,
.lkind, .brand__kind, .skills__head { letter-spacing: .1em; }
.fact__v { font-weight: 500; letter-spacing: -.01em; }
.hcard__num, .brand__num, .skill__pct { letter-spacing: 0; }

/* ============================================================
   HAND-DRAWN DECORATION LAYER
   ============================================================ */

/* section index gets a little hand-drawn asterisk/sparkle */
.section-index { display: inline-flex; align-items: center; gap: .6rem; }
.section-index::before {
  content: "";
  width: 15px; height: 15px; flex: 0 0 auto;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23e6007e' stroke-width='2.2' stroke-linecap='round'><path d='M12 2.5v19M2.5 12h19M5.2 5.2l13.6 13.6M18.8 5.2 5.2 18.8'/></g></svg>") center/contain no-repeat;
}

/* hand-drawn frame utility (drawn OUTSIDE the box, like a sketch mount) */
.about__photo, .hcard__media, .feature__media, .imgband,
.brand__visual, .logos__grid, .strengths__col {
  position: relative;
}
.about__photo::after,
.hcard__media::after,
.feature__media::after,
.strengths__col::after {
  content: "";
  position: absolute; inset: -7px;
  background: var(--sketch-ink) center/100% 100% no-repeat;
  pointer-events: none;
  z-index: 3;
  opacity: .8;
}
.band--dark .strengths__col::after {
  /* light ink frame on dark bands */
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' preserveAspectRatio='none'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.009 0.013' numOctaves='2' seed='4' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='7'/></filter><rect x='9' y='9' width='282' height='282' fill='none' stroke='%23f3efe7' stroke-width='2' filter='url(%23w)'/></svg>") center/100% 100% no-repeat;
  opacity: .5;
}
/* accent frame on the two hero project cards */
.hcard:nth-child(1) .hcard__media::after { background-image: var(--sketch-accent); opacity: .9; }

/* duotone-ish hover wash on imagery (nods to the tinted photo grid) */
.about__photo img, .hcard__media, .feature__media, .imgband__img { transition: filter .5s var(--ease); }
.about__photo:hover img,
.feature__media:hover,
.imgband:hover .imgband__img { filter: saturate(1.05) contrast(1.03); }

/* --- dot leaders on the fact list (editorial + techy) --- */
/* dotted line spans the row; label + value sit on solid paper that masks it */
.fact { position: relative; align-items: baseline; }
.fact::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 1.15rem;
  border-bottom: 2px dotted var(--line-strong);
  z-index: 0;
}
.fact__k, .fact__v { position: relative; z-index: 1; background: var(--bg); }
.fact__k { padding-right: .7rem; }
.fact__v { padding-left: .7rem; }
/* on the paper2 band (about section facts, if any) match its ground */
.band--paper2 .fact__k, .band--paper2 .fact__v { background: var(--bg-2); }

/* --- service + tag chips get a sketched outline --- */
.about__services li, .hcard__tags li {
  border-color: transparent !important;
  position: relative;
  background: transparent;
}
.about__services li::before, .hcard__tags li::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--sketch-ink) center/100% 100% no-repeat;
  opacity: .55;
  pointer-events: none;
}
.about__services li:nth-child(odd)::before { background-image: var(--sketch-accent); opacity: .6; }

/* --- horizontal-work hint: hand-drawn arrow --- */
.hwork__hint { gap: .9rem; }
.hwork__hint::after {
  content: "";
  width: 74px; height: 26px; flex: 0 0 auto;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 34' fill='none' stroke='%23e6007e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 19 C24 8 50 8 71 17'/><path d='M60 8 L74 17 L60 26'/></svg>") left center/contain no-repeat;
}

/* --- quote: big hand-drawn quotation mark as a faint watermark behind --- */
.quote { position: relative; overflow: hidden; }
.quote__text, .quote__cite { position: relative; z-index: 1; }
.quote::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  width: clamp(190px, 34vw, 380px); height: clamp(140px, 24vw, 280px);
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' fill='none' stroke='%23e6007e' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 78 C 6 50 12 20 40 12 C 22 26 20 42 28 50 C 44 46 52 60 46 72 C 42 82 22 86 12 78 Z'/><path d='M72 78 C 66 50 72 20 100 12 C 82 26 80 42 88 50 C 104 46 112 60 106 72 C 102 82 82 86 72 78 Z'/></svg>") center/contain no-repeat;
  opacity: .13; z-index: 0; pointer-events: none;
}

/* --- footer flourish: hand-drawn underline under "Bedankt, Pixelsz." --- */
.footer__big { position: relative; display: inline-block; }
.footer__big::after {
  content: "";
  position: absolute; left: 0; right: 6%; bottom: -.12em; height: .18em;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none' fill='none' stroke='%23e6007e' stroke-width='4' stroke-linecap='round'><path d='M4 12 C 90 4 150 16 210 9 C 280 1 340 15 396 8'/></svg>") center/100% 100% no-repeat;
}

/* ---------- hand-drawn ornament divider (placed in HTML) ---------- */
.ornament {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  padding: clamp(2rem, 5vh, 4rem) var(--gutter);
  color: var(--accent);
}
.ornament svg { width: clamp(120px, 30vw, 300px); height: auto; display: block; }
.ornament .ornament__star { width: clamp(22px, 3.2vw, 30px); height: auto; flex: 0 0 auto; }

/* ---------- hero: sparkle + hand-underline under the emphasised word ---------- */
.hero { }
.hero__spark {
  position: absolute; top: clamp(7rem, 20vh, 12rem); right: var(--gutter);
  width: clamp(34px, 5vw, 60px); height: auto; color: var(--accent);
  pointer-events: none; z-index: 2;
}
@media (max-width: 640px){ .hero__spark { display: none; } }

/* ============================================================
   Small refinements
   ============================================================ */
/* marquee: mono dots + display words feel like a ticker */
.marquee { border-top-width: 2px; border-bottom-width: 2px; }
.marquee__track { letter-spacing: -.01em; font-weight: 600; text-transform: uppercase; }
.marquee__track .dot { font-family: var(--font-mono); }

/* section index colour already accent; give header brand mark a hand-rotated feel */
.header__mark { border-radius: 1px; }

/* strengths boxes: kill the clean border (sketch frame handles it) */
.strengths__col { border-color: transparent !important; background: transparent !important; }
.band--dark .strengths__col { background: rgba(255,255,255,.02) !important; }

/* logos grid: keep the technical ledger feel but heavier rules */
.logos__grid { border-top-width: 2px; border-left-width: 2px; }

/* reduce motion respects base already; keep decorations static */
@media (prefers-reduced-motion: reduce) {
  .orb { animation: none !important; }
}