/* ============================================================
   ARQORA STUDIO — Design Tokens
   ------------------------------------------------------------
   Palette: warm architectural stone + ink, one brass accent.
   Type:    Fraunces (display serif) / Inter (body) /
            IBM Plex Mono (coordinates, numerals, labels).
   ============================================================ */

:root {
  /* ---- color ---- */
  --stone:        #EDEAE3;   /* primary light background */
  --paper:        #F7F5F1;   /* card / raised surface on light */
  --ink:          #14120F;   /* primary dark background */
  --ink-soft:     #1E1B17;   /* secondary dark surface */
  --text-on-light: #17140F;
  --text-on-light-soft: #5B5548;
  --text-on-dark:  #F3F0E9;
  --text-on-dark-soft: #A79E8D;
  --brass:        #9C7A46;   /* signature accent */
  --brass-light:  #C7A876;
  --line-on-light: rgba(23, 20, 15, 0.14);
  --line-on-dark:  rgba(243, 240, 233, 0.16);

  /* ---- type ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ---- scale ---- */
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3rem);
  --step-4:  clamp(2.8rem, 2.1rem + 3.4vw, 4.6rem);
  --step-5:  clamp(3.4rem, 2.3rem + 5.4vw, 6.4rem);

  /* ---- layout ---- */
  --container: 1360px;
  --gutter: clamp(20px, 4vw, 64px);
  --radius: 2px; /* architectural — near-zero radius, on purpose */
  --ease-arch: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-soft: cubic-bezier(0.42, 0, 0.2, 1);
  --dur-fast: 0.3s;
  --dur-mid: 0.6s;
  --dur-slow: 1.1s;
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

html, body { margin: 0; padding: 0; }
body {
  background: var(--stone);
  color: var(--text-on-light);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

::selection { background: var(--brass); color: var(--ink); }

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

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

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--brass);
  display: inline-block;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
.display-1 { font-size: var(--step-5); line-height: 0.98; }
.display-2 { font-size: var(--step-4); line-height: 1.02; }
.display-3 { font-size: var(--step-3); line-height: 1.06; }
.heading-1 { font-size: var(--step-2); line-height: 1.15; }

.section-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-light-soft);
}
.section-label.on-dark { color: var(--text-on-dark-soft); }

.lede { font-size: var(--step-1); color: var(--text-on-light-soft); line-height: 1.5; max-width: 46ch; }
.lede.on-dark { color: var(--text-on-dark-soft); }

.hairline { border: none; border-top: 1px solid var(--line-on-light); }
.hairline.on-dark { border-top-color: var(--line-on-dark); }

section.dark, .section-dark {
  background: var(--ink);
  color: var(--text-on-dark);
}

/* ---- buttons ---- */
.btn {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
  white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-soft); }
.btn:hover svg { transform: translateX(4px); }

.btn-solid {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--text-on-dark);
}
.btn-solid:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }

.btn-outline:hover { background: var(--text-on-light); color: var(--stone); }
.on-dark .btn-outline:hover,
.section-dark .btn-outline:hover,
.btn-outline.on-dark:hover { background: var(--text-on-dark); color: var(--ink); }

.btn-brass { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.btn-brass:hover { background: var(--brass-light); border-color: var(--brass-light); }

/* ---- coordinate / blueprint motif (signature element) ---- */
.coord {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--text-on-light-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.coord.on-dark { color: var(--text-on-dark-soft); }
.coord::before { content: "+"; color: var(--brass); }

.plan-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line-on-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-on-light) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
}
.section-dark .plan-grid, .dark .plan-grid {
  background-image:
    linear-gradient(var(--line-on-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-on-dark) 1px, transparent 1px);
}

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -60px; left: 12px; background: var(--ink); color: var(--text-on-dark);
  padding: 12px 18px; z-index: 9999; transition: top .2s;
  font-family: var(--font-mono); font-size: 0.8rem;
}
.skip-link:focus { top: 12px; }