/* THE EMADKO HOUSE, emadko.org
   Design notes:
   - Gold and black, committed to rather than hinted at: gold carries the
     display accent, the primary button, the rules and the micro-labels. What
     keeps it from turning gaudy is that gold never sits on gold, and large
     areas stay black. Two golds are defined, a body gold and a brighter one
     used only as the top stop of a gradient, which is what reads as metal
     rather than as yellow paint.
   - Type is an infrastructure pairing, not an editorial one: Space Grotesk for
     display (engineered, slightly mechanical), Inter for reading, and
     JetBrains Mono for every small label, index and status. Mono microtype is
     the signature of technical products and does most of the work here.
   - Every motion is behind prefers-reduced-motion. */

:root {
  --bg: #050505;
  --bg-2: #0b0a08;
  --bg-3: #11100d;
  --line: rgba(227, 184, 76, 0.13);
  --line-strong: rgba(227, 184, 76, 0.30);
  --text: #f6f4ef;
  --muted: rgba(246, 244, 239, 0.56);
  --muted-2: rgba(246, 244, 239, 0.36);
  --accent: #e3b84c;
  --accent-bright: #f7dc95;
  --accent-dim: rgba(227, 184, 76, 0.34);

  --display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --page: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(88px, 12vw, 168px);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--accent); color: #0a0800; }

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

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #0a0800;
  padding: 12px 18px; z-index: 200; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* ── shared type ─────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--accent-dim);
  flex: none;
}

h1, h2, h3 { font-weight: 400; margin: 0; }

/* A grotesk sets much wider and heavier than the serif it replaced, so the
   display sizes come down and the tracking goes negative. At 74px, -0.03em is
   what stops the headline reading as a row of separate words. */
h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(38px, 6.1vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.032em;
}

h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3.9vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.026em;
}

h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.016em;
}

/* Space Grotesk ships no italic, so the old italic accent would have been a
   browser-synthesised slant. The weight and a metallic gradient carry the
   emphasis instead. background-clip:text needs an explicit transparent fill,
   and the solid `color` above it is what a browser without the clip still
   shows. */
em.accent {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 62%, #b98f2e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lede {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.62;
  color: var(--muted);
  max-width: 58ch;
}

/* ── buttons ─────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1px solid var(--line-strong);
  transition: background .35s ease, border-color .35s ease, color .35s ease, transform .35s ease;
  white-space: nowrap;
}
.btn .arw { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.btn:hover .arw { transform: translateX(4px); }

/* The primary button is the largest area of gold on the page and the only
   place black type sits on it. Keeping the label black rather than white is
   what keeps the gold reading as metal rather than as a warning colour. */
.btn-primary {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: #0a0800;
  border-color: var(--accent);
  font-weight: 600;
}
.btn-primary:hover {
  background: linear-gradient(180deg, #ffeab4, var(--accent-bright));
  border-color: var(--accent-bright);
}

.btn-ghost { color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── nav ─────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(5, 5, 5, 0.74);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
}
.mark {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex: none;
}
.mark-glyph {
  width: 30px; height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  background: rgba(227, 184, 76, 0.07);
  flex: none;
}
.mark-text {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 13.5px;
}
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color .3s ease;
}
.nav-links a:hover { color: var(--text); }
.nav .btn { padding: 10px 20px; font-size: 13px; }

@media (max-width: 860px) {
  .nav-links { display: none; }
}

/* ── hero ────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding-top: clamp(150px, 20vh, 210px);
  padding-bottom: var(--section-y);
  overflow: hidden;
}

/* Two slow, very low-opacity radial washes. They read as depth rather than as
   a gradient, which is the difference between "premium" and "2014 hero". */
.aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.aura-1 {
  width: 620px; height: 620px;
  top: -220px; left: -120px;
  background: radial-gradient(circle, rgba(227,184,76,.15), transparent 68%);
  animation: drift1 22s ease-in-out infinite alternate;
}
/* Was a cool blue wash, which is the single thing that would have kept this
   from reading as gold and black. Now a deeper, dimmer gold so the two washes
   differ in temperature and depth rather than in hue. */
.aura-2 {
  width: 540px; height: 540px;
  top: 40px; right: -180px;
  background: radial-gradient(circle, rgba(184,140,44,.11), transparent 68%);
  animation: drift2 27s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate3d(70px, 50px, 0) scale(1.1); } }
@keyframes drift2 { to { transform: translate3d(-60px, 70px, 0) scale(1.08); } }

.grid-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 3) 100%;
  max-width: var(--page);
  margin-inline: auto;
  opacity: .5;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent);
}

/* The rotating dotted earth (assets/globe.js). It fills the hero and draws
   its own globe low and to the right; the mask fades the bottom fifth to
   nothing so the planet runs on into the section below rather than stopping
   at an edge. It fades in only once the land data has loaded, so a failed
   fetch leaves the hero exactly as it was. */
.hero-globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}
.hero-globe.is-ready { opacity: 1; }
@media (max-width: 759px) { .hero-globe.is-ready { opacity: .6; } }

/* No hairline between the hero and the first band: the globe fades across
   that boundary, and a gold rule there would cut it off. */
.hero + .band { border-top-color: transparent; }

.hero-inner { position: relative; z-index: 1; }

.hero h1 { max-width: 15ch; margin-bottom: 30px; }
.hero .lede { margin-bottom: 40px; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-meta {
  margin-top: clamp(64px, 9vw, 104px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.hero-meta div { min-width: 0; }
/* The globe's beams rise behind this row, so the labels get a soft dark
   shadow to stay legible over lit land. */
.hero-meta dt, .hero-meta dd { text-shadow: 0 0 12px #050505, 0 0 3px #050505; }
.hero-meta dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 7px;
}
.hero-meta dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--text);
}
@media (max-width: 720px) {
  .hero-meta { grid-template-columns: 1fr; gap: 22px; }
}

/* ── section shell ───────────────────────────────────────────────── */

section { position: relative; }

.band {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
}

.band-head { max-width: 62ch; margin-bottom: clamp(48px, 6vw, 76px); }
.band-head h2 { margin-bottom: 22px; }

/* ── what we do ──────────────────────────────────────────────────── */

.cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.col {
  background: var(--bg);
  padding: clamp(28px, 3.4vw, 42px);
  transition: background .45s ease;
}
.col:hover { background: var(--bg-2); }
.col-n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 26px;
}
.col h3 { margin-bottom: 12px; }
.col p { margin: 0; color: var(--muted); font-size: 15px; }

@media (max-width: 880px) { .cols { grid-template-columns: 1fr; } }

/* ── lordkay feature ─────────────────────────────────────────────── */

.feature {
  border: 1px solid var(--line);
  background:
    radial-gradient(1000px 340px at 82% 0%, rgba(227,184,76,.09), transparent 62%),
    var(--bg-2);
  padding: clamp(30px, 4.4vw, 62px);
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: clamp(34px, 5vw, 70px);
  align-items: start;
}
@media (max-width: 940px) { .feature { grid-template-columns: 1fr; } }

.flag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  padding: 6px 13px;
  margin-bottom: 26px;
}
.flag .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.feature-name {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.026em;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.08;
  margin: 0 0 20px;
}
.feature p { color: var(--muted); margin: 0 0 30px; font-size: 15.5px; }

.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.svc-list li {
  border-bottom: 1px solid var(--line);
  padding: 15px 4px;
  font-size: 14.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: padding-left .35s ease, color .35s ease;
}
.svc-list li:hover { padding-left: 12px; color: var(--accent); }
.svc-list .idx {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted-2);
  flex: none;
  width: 22px;
}

/* ── portfolio in development ────────────────────────────────────── */

/* Four tiles, laid out 2x2 rather than 4-across. Four across at this page
   width gives each tile about 290px, which crowds the two-word categories and
   reads as a row that ran out of items. A 2x2 block of generous tiles reads as
   the chosen number. */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 620px) { .tiles { grid-template-columns: 1fr; } }

.tile {
  background: var(--bg);
  padding: clamp(24px, 2.8vw, 34px);
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: background .45s ease;
}
.tile:hover { background: var(--bg-2); }
.tile::after {
  content: "";
  position: absolute;
  inset: auto auto -40% -20%;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(227,184,76,.12), transparent 70%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.tile:hover::after { opacity: 1; }

.tile-mark {
  width: 40px; height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  position: relative;
}
/* A deliberate "withheld" glyph: three dots, not a blurred logo. Blurring a
   fake logo would be inventing a product; three dots say "not yet named". */
.tile-mark span {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
  box-shadow: 7px 0 0 var(--accent), -7px 0 0 var(--accent);
}
.tile-cat {
  font-size: 14.5px;
  color: var(--text);
  margin: 0 0 6px;
  font-weight: 500;
}
.tile-status {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0;
}

.withheld-note {
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.withheld-note::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--line-strong);
  flex: none;
}

/* ── principles ──────────────────────────────────────────────────── */

.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(30px, 4vw, 56px);
}
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; } }

.principle { border-top: 1px solid var(--line); padding-top: 24px; }
.principle h3 { margin-bottom: 10px; }
.principle p { margin: 0; color: var(--muted); font-size: 15px; }

/* ── contact ─────────────────────────────────────────────────────── */

.contact { text-align: center; }
.contact h2 { margin-bottom: 22px; }
.contact .lede { margin-inline: auto; margin-bottom: 42px; }

.mail-link {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: clamp(19px, 3.4vw, 36px);
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--accent-dim);
  padding-bottom: 8px;
  transition: color .35s ease, border-color .35s ease;
  word-break: break-word;
}
.mail-link:hover { color: var(--accent); border-color: var(--accent); }

.contact-alt {
  margin-top: 34px;
  font-size: 14px;
  color: var(--muted-2);
}
.contact-alt a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.contact-alt a:hover { color: var(--accent); }

/* ── footer ──────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--line);
  padding-block: 44px 52px;
}
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  justify-content: space-between;
}
.foot-legal {
  font-size: 12.5px;
  color: var(--muted-2);
  line-height: 1.7;
  max-width: 62ch;
}
.foot-legal strong { color: var(--muted); font-weight: 500; }
.foot-links { display: flex; gap: 26px; font-size: 13px; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--accent); }

/* ── scroll reveal ───────────────────────────────────────────────── */

.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .aura-1, .aura-2, .flag .dot { animation: none; }
  .hero-globe { transition: none; }
  .btn, .col, .tile, .svc-list li { transition: none; }
}