/* ─────────────────────────────────────────────────────────────
   Portfolio — editorial, restrained. Fraunces (display) + Inter (body).
   Ink-on-paper with a single warm accent. Deliberately not a
   template default: the personality is in the type and the numbering.
   ───────────────────────────────────────────────────────────── */

:root {
  --paper: #faf8f4;
  --ink: #1b1a17;
  --ink-soft: #55524b;
  --line: #e2ddd3;
  --accent: #b8452f;      /* warm brick — used sparingly */
  --accent-soft: #f0e6e0;
  --display: "Fraunces", Georgia, serif;
  --body: "Inter", system-ui, sans-serif;
  --wrap: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .floaties { display: none; }
}

main { position: relative; z-index: 1; }

body {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ── ambient floaties ────────────────────────────────────────
   Faint motes — pigment drifting on paper, bouncing off the page
   edges. Positioned absolutely against the page (not the viewport)
   so they scroll with the content instead of showing through text
   as it moves past; floaties.js drives their motion via transform.
   nav/main/footer get position+z-index so the stacking order holds. */
.floaties { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.floaties span {
  position: absolute; top: 0; left: 0; will-change: transform;
  /* four-point sparkle — a printer's asterism/dinkus mark, not a generic dot */
  clip-path: polygon(50% 0%, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0% 50%, 39% 35%);
}

/* ── nav ─────────────────────────────────────────────────── */
.nav {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  max-width: var(--wrap); margin: 0 auto;
  padding: 28px 24px;
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 900; font-size: 20px; letter-spacing: -0.01em;
}
/* The mark ships with its own paper-coloured margin baked in, so the gap above
   is tighter than it looks. Sized a touch above the name's cap height. */
.nav-mark { display: block; height: 28px; width: auto; }
.nav-right { display: flex; align-items: center; gap: 26px; }
.nav-links { display: flex; gap: 26px; font-size: 14px; font-weight: 500; }
.nav-links a { color: var(--ink-soft); transition: color 0.15s; }
.nav-links a:hover { color: var(--accent); }
.lang-switch { display: flex; gap: 8px; font-size: 13px; font-weight: 600; padding-inline-start: 20px; border-inline-start: 1px solid var(--line); }
.lang-switch a { color: var(--ink-soft); transition: color 0.15s; }
.lang-switch a:hover { color: var(--accent); }
.lang-current { color: var(--accent); }

/* ── hero ────────────────────────────────────────────────── */
.hero { max-width: var(--wrap); margin: 0 auto; padding: 80px 24px 90px; }
.hero-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em;
  color: var(--accent); margin-bottom: 22px;
}
.hero-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(38px, 7vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-bottom: 26px;
}
.hero-sub { font-size: clamp(16px, 2vw, 19px); color: var(--ink-soft); max-width: 52ch; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  font-weight: 600; font-size: 15px;
  padding: 13px 24px;
  background: var(--ink); color: var(--paper);
  border-radius: 2px;
  transition: transform 0.12s, background 0.15s;
}
.btn:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); }

/* ── section heads ───────────────────────────────────────── */
.section-head { max-width: var(--wrap); margin: 0 auto; padding: 0 24px 40px; }
.section-num {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: 15px; color: var(--accent);
}
.section-head h2 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(26px, 4vw, 40px); letter-spacing: -0.02em;
  margin: 6px 0 10px;
}
.section-head p { color: var(--ink-soft); max-width: 46ch; }

/* ── work grid ───────────────────────────────────────────── */
.work { padding: 70px 0; border-top: 1px solid var(--line); }
.cards {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.card {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  display: flex; flex-direction: column;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(27,26,23,0.06);
}
.card-thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--accent-soft); }
.card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.3s;
}
.card:hover .card-thumb img { transform: scale(1.04); }
.card-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.card-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 16px;
}
.card-title { font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: -0.01em; margin-bottom: 10px; }
.card-blurb { color: var(--ink-soft); font-size: 15px; flex: 1; margin-bottom: 22px; }
.card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-soft); }
.card-arrow { font-size: 18px; color: var(--accent); transition: transform 0.15s; }
.card:hover .card-arrow { transform: translateX(4px); }

/* ── about ───────────────────────────────────────────────── */
.about { padding: 70px 0 40px; border-top: 1px solid var(--line); }
.about-body { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.about-body p { max-width: 58ch; font-size: 18px; margin-bottom: 20px; }
.about-body em { font-style: italic; color: var(--ink); }

/* ── case study ──────────────────────────────────────────── */
.case { max-width: 760px; margin: 0 auto; padding: 20px 24px 80px; }
.case-back { font-size: 14px; color: var(--ink-soft); }
.case-back:hover { color: var(--accent); }
.case-head { padding: 40px 0 30px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.case-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
}
.case-head h1 { font-family: var(--display); font-weight: 900; font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 16px; }
.case-summary { font-size: 20px; color: var(--ink-soft); max-width: 50ch; }
.case-demo-btn { margin-top: 28px; }
.case-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 30px; margin-top: 30px; }
.case-facts dt { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px; }
.case-facts dd { font-size: 15px; font-weight: 500; }
.case-facts a { color: var(--accent); }

.case-hero { margin: 0 0 40px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.case-hero img { width: 100%; display: block; }

/* ── playable embed ──────────────────────────────────────────
   The case column (~712px) is narrower than the game's own 720px
   breakpoint, so it always renders in stacked mode (hud/stage/board) —
   a fixed height fits that reliably, no aspect-ratio math needed. */
.case-embed { margin: 36px 0 44px; }
.case-embed iframe {
  display: block;
  width: 100%;
  height: 900px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #05060a;
}
.case-embed-cta { text-align: center; margin-top: 10px; }
.case-embed-cta a { font-size: 13px; font-weight: 600; color: var(--accent); }
.case-embed-cta a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .case-embed iframe { height: 760px; }
}

.case-body { font-size: 17px; }
.case-body h2 { font-family: var(--display); font-weight: 900; font-size: 27px; letter-spacing: -0.01em; margin: 42px 0 14px; }
.case-body h3 { font-weight: 600; font-size: 19px; margin: 30px 0 10px; }
.case-body p { margin-bottom: 18px; color: #2c2a26; }
.case-body ul, .case-body ol { margin: 0 0 18px 22px; }
.case-body li { margin-bottom: 8px; }
.case-body strong { font-weight: 600; }
.case-body code { background: var(--accent-soft); padding: 2px 6px; border-radius: 3px; font-size: 0.9em; }
.case-body blockquote { border-inline-start: 3px solid var(--accent); padding-inline-start: 18px; margin: 24px 0; color: var(--ink-soft); font-style: italic; }

/* ── case-study figures ─────────────────────────────────────
   Screenshots inside the body, styled off .case-hero so they match.
   Phone views arrive already composited into one wide image, so there
   is no grid here — and nothing to flip for RTL either. */
.case-figure { margin: 34px 0; }
.case-figure img { width: 100%; display: block; border: 1px solid var(--line); border-radius: 4px; }
.case-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-soft); }

.case-nav { display: flex; justify-content: space-between; margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 500; }
.case-nav a:hover { color: var(--accent); }

/* ── contact page ────────────────────────────────────────── */
.contact-page { max-width: 640px; margin: 0 auto; padding: 20px 24px 90px; }
.contact-head { padding: 40px 0 36px; }
.contact-head h1 { font-family: var(--display); font-weight: 900; font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 16px; }
.contact-head p { font-size: 17px; color: var(--ink-soft); max-width: 50ch; }
.contact-head a { color: var(--accent); }
.contact-head a:hover { text-decoration: underline; }

.contact-form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.field input, .field textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 3px;
  padding: 12px 14px; resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.contact-form .btn { align-self: flex-start; border: none; cursor: pointer; }
.contact-form .btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.form-status { font-size: 14px; min-height: 1.2em; }
.form-status-ok { color: #2f6b3a; }
.form-status-error { color: var(--accent); }

/* ── footer ──────────────────────────────────────────────── */
.footer { position: relative; z-index: 1; border-top: 1px solid var(--line); margin-top: 60px; padding: 60px 24px; }
.footer-inner { max-width: var(--wrap); margin: 0 auto; }
.footer-cta { font-family: var(--display); font-weight: 900; font-size: clamp(24px, 4vw, 36px); letter-spacing: -0.02em; margin-bottom: 18px; }
.footer-cta-btn { margin-bottom: 30px; }
.footer-fine { font-size: 13px; color: var(--ink-soft); }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; }
  .case-facts { grid-template-columns: 1fr; }
  .nav { padding: 20px 24px; flex-wrap: wrap; gap: 12px; }
  .nav-links { gap: 18px; }
  .nav-right { gap: 18px; }
  .nav-mark { height: 24px; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Arabic / RTL ─────────────────────────────────────────────
   Amiri (display) + Noto Sans Arabic (body) — an Arabic pairing
   with real character, mirroring the Fraunces/Inter relationship
   rather than defaulting to a generic sans. Letter-spacing and
   uppercase tracking are Latin-only conventions: tracking breaks
   Arabic letter-joining, so both are reset wholesale for the
   language rather than patched rule-by-rule. Flexbox layouts
   (nav, cards, hero-actions) mirror automatically from the `dir`
   attribute; only the hand-drawn arrow glyphs need a language
   check, done at the template level. */
:root[lang="ar"] {
  --display: "Amiri", "Traditional Arabic", serif;
  --body: "Noto Sans Arabic", "Segoe UI", sans-serif;
}
:root[lang="ar"] * {
  letter-spacing: normal;
  text-transform: none;
}
:root[lang="ar"] .card:hover .card-arrow { transform: translateX(-4px); }

/* Amiri's hamza/shadda marks sit taller than Fraunces' ascenders — the
   tight line-height and small label-to-heading gaps tuned for Latin
   collide with them in Arabic, so both get extra room here. */
:root[lang="ar"] .hero-title,
:root[lang="ar"] .case-head h1,
:root[lang="ar"] .contact-head h1,
:root[lang="ar"] .card-title,
:root[lang="ar"] .footer-cta,
:root[lang="ar"] .section-head h2,
:root[lang="ar"] .case-body h2 {
  line-height: 1.4;
}
:root[lang="ar"] .hero-eyebrow { margin-bottom: 30px; }
:root[lang="ar"] .case-tag,
:root[lang="ar"] .card-tag { margin-bottom: 22px; }

/* Paths and filenames are LTR runs inside RTL prose, and their punctuation
   is bidi-neutral, so `/tarjeta` renders as `tarjeta/` and a query string
   gets reordered around the line break. isolate makes each span its own
   bidi run so it reads in the order it was written; nowrap keeps a filename
   whole. Applies to the <code> the markdown produces, so Arabic pages can
   use plain backticks like the English ones. */
:root[lang="ar"] .case-body code,
:root[lang="ar"] .about-body code {
  unicode-bidi: isolate;
  direction: ltr;
  white-space: nowrap;
}