/* nhufhu.com — page layer.
   Everything visual comes from the design system in ds/; this file only lays the one-page
   site out and adds the responsive rules a marketing page needs. No new colours, no new
   radii, no new type sizes that are not derived from the tokens. */

/* ── Page frame ─────────────────────────────────────────────────── */
:root {
  /* The gutter the whole page breathes on. `.theme-nhufhu` opens the holding-company
     surface up to 4rem; below md a phone cannot afford that, so it steps. */
  --gutter: 1.25rem;
  --section-y: 4rem;
  --header-h: var(--app-header-h);
}
@media (min-width: 768px) {
  :root { --gutter: 2rem; --section-y: 5.5rem; --header-h: 4rem; }
}
@media (min-width: 1024px) {
  :root { --gutter: var(--page-pad-md); --section-y: var(--section-gap); }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}
body { overflow-x: hidden; }

.site-container {
  width: 100%;
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Anchors have to clear the sticky header when they are jumped to. */
.site-section, .site-hero { scroll-margin-top: var(--header-h); }

.site-section { padding-block: var(--section-y); }
.site-section + .site-section { border-top: 1px solid var(--border); }
.site-section__head { display: flex; flex-direction: column; gap: var(--space-4); max-width: 44rem; }
.site-section__title {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.25rem);
  line-height: 1.15;
  font-weight: var(--font-weight-normal);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.site-section__lede {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--muted-foreground);
  max-width: 42rem;
}
.site-skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--card); color: var(--foreground);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4); font-size: var(--text-sm);
}
.site-skip:focus { left: var(--gutter); top: var(--space-2); text-decoration: none; }

/* ── Header ─────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  height: var(--header-h);
}
.site-brand {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  color: var(--foreground); font-size: var(--text-xl);
}
.site-brand:hover { text-decoration: none; color: var(--foreground); }
.site-brand .nh-wordmark > span { color: var(--brand); }
.site-brand__tag {
  display: none; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground);
}
@media (min-width: 1024px) { .site-brand__tag { display: inline; } }

.site-nav { display: none; }
.site-nav ul { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: flex; align-items: center; height: 2rem; padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--muted-foreground);
  transition: var(--transition-colors);
}
.site-nav a:hover { background: var(--secondary); color: var(--foreground); text-decoration: none; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.site-header__cta { display: none; }
@media (min-width: 900px) {
  .site-nav { display: block; }
  .site-header__cta { display: inline-flex; }
}

/* The menu button is a 44px tap target on a phone and disappears once the nav fits. */
.site-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-right: calc(var(--space-2) * -1);
  background: none; border: 0; border-radius: var(--radius-md);
  color: var(--foreground); cursor: pointer;
  transition: var(--transition-colors);
}
.site-menu-btn:hover { background: var(--secondary); }
.site-menu-btn svg { width: 1.25rem; height: 1.25rem; }
.site-menu-btn .site-icon--close,
.site-menu-btn[aria-expanded="true"] .site-icon--open { display: none; }
.site-menu-btn[aria-expanded="true"] .site-icon--close { display: block; }
@media (min-width: 900px) { .site-menu-btn { display: none; } }

.site-drawer { display: none; border-top: 1px solid var(--border); background: var(--background); }
.site-drawer[data-open="true"] { display: block; }
@media (min-width: 900px) { .site-drawer[data-open="true"] { display: none; } }
.site-drawer ul { list-style: none; margin: 0; padding: var(--space-2) 0 var(--space-4); }
.site-drawer a:not(.nh-cta) {
  display: flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-2);
  border-radius: var(--radius-md); color: var(--foreground); font-size: var(--text-base);
}
.site-drawer a:not(.nh-cta):hover { background: var(--secondary); text-decoration: none; }
.site-drawer .nh-cta { margin-top: var(--space-3); }

/* ── Hero ───────────────────────────────────────────────────────── */
.site-hero {
  position: relative;
  display: flex; align-items: center;
  min-height: 34rem;
  /* svh keeps a phone's collapsing address bar from cropping the line. */
  min-height: min(46rem, calc(100svh - var(--header-h)));
  padding-block: var(--space-10);
  background: #0b0f1a;
  overflow: hidden;
}
.site-hero__media { position: absolute; inset: 0; }
.site-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Phones crop to the right of the frame, where the sunset and the figures are. */
  object-position: 68% center;
}
@media (min-width: 768px) { .site-hero__media img { object-position: center; } }
.site-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 9, 18, 0.86) 0%, rgba(6, 9, 18, 0.6) 45%, rgba(6, 9, 18, 0.92) 100%);
}
@media (min-width: 768px) {
  .site-hero__scrim {
    background: linear-gradient(90deg, rgba(6, 9, 18, 0.9) 0%, rgba(6, 9, 18, 0.66) 45%, rgba(6, 9, 18, 0.15) 100%);
  }
}
.site-hero__inner { position: relative; }
.site-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); max-width: 44rem; }
.site-hero__wordmark {
  font-size: clamp(2.75rem, 1.5rem + 6vw, 4rem);
  line-height: 1; color: var(--brand);
  text-rendering: geometricPrecision;
}
.site-hero__wordmark > span { color: var(--brand-green); }
.site-hero__lines { display: flex; flex-direction: column; gap: var(--space-6); }
.site-hero__eyebrow {
  font-size: var(--text-sm); line-height: 1.4; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
}
.site-hero__display {
  max-width: 30rem;
  font-size: clamp(1.75rem, 1.05rem + 3.1vw, 2.25rem);
  font-weight: var(--font-weight-normal);
  line-height: 1.3; letter-spacing: -0.03em;
  color: #fff;
}
.site-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* ── Statement ──────────────────────────────────────────────────── */
.site-statement { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .site-statement { grid-template-columns: 18rem 1fr; gap: var(--space-10); } }
.site-statement__body { display: flex; flex-direction: column; gap: var(--space-6); }
.site-statement__body p { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); line-height: 1.55; letter-spacing: -0.01em; }
.site-statement__body p + p { font-size: var(--text-base); line-height: 1.7; color: var(--muted-foreground); letter-spacing: 0; }

/* ── Card grids ─────────────────────────────────────────────────── */
.site-grid { display: grid; gap: var(--space-4); margin-top: var(--space-10); }
@media (min-width: 640px) { .site-grid { gap: var(--space-6); } }
@media (min-width: 768px) { .site-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .site-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.site-card { height: 100%; }
.site-card .nh-card__header { gap: var(--space-3); }
.site-card__index { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--brand); }
.site-card__title { font-size: var(--text-lg); line-height: 1.3; letter-spacing: var(--tracking-tight); }
.site-card .nh-card__content p { font-size: var(--text-sm); line-height: 1.7; color: var(--muted-foreground); }

/* ── Portfolio ──────────────────────────────────────────────────── */
.site-portfolio .nh-card { gap: var(--space-4); }
.site-portfolio__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.site-portfolio__name { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
/* One column on a phone, two once there is room, so both cards read the same way. */
.site-portfolio__meta {
  display: grid; gap: var(--space-4);
  padding-top: var(--space-4); margin-top: var(--space-2);
  border-top: 1px solid var(--border);
}
@media (min-width: 480px) { .site-portfolio__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-portfolio__meta div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.site-portfolio .site-link { margin-top: var(--space-4); }

/* ── Principles ─────────────────────────────────────────────────── */
.site-principles { display: grid; gap: var(--space-8); margin-top: var(--space-10); }
@media (min-width: 640px) { .site-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-10); } }
@media (min-width: 1024px) { .site-principles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-principle { display: flex; flex-direction: column; gap: var(--space-3); }
.site-principle h3 { font-size: var(--text-base); letter-spacing: var(--tracking-tight); }
.site-principle p { font-size: var(--text-sm); line-height: 1.7; color: var(--muted-foreground); }

/* ── Contact ────────────────────────────────────────────────────── */
.site-contact { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) { .site-contact { grid-template-columns: 1fr auto; gap: var(--space-10); align-items: center; } }
.site-contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border); padding-block: var(--space-8); }
.site-footer__row {
  display: flex; flex-direction: column; gap: var(--space-6);
  justify-content: space-between; align-items: flex-start;
}
@media (min-width: 768px) { .site-footer__row { flex-direction: row; align-items: center; } }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; margin: 0; padding: 0; }
.site-footer__links a { font-size: var(--text-sm); color: var(--muted-foreground); }
.site-footer__links a:hover { color: var(--foreground); text-decoration: none; }
.site-footer__legal { font-size: var(--text-xs); color: var(--muted-foreground); }

/* ── Shared bits ────────────────────────────────────────────────── */
.site-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--foreground);
  transition: var(--transition-colors);
}
.site-link svg { width: 0.875rem; height: 0.875rem; }
.site-link:hover { color: var(--brand); text-decoration: none; }
.site-hero__actions .site-link { color: #fff; }
.site-hero__actions .site-link:hover { color: var(--brand); }
.site-rule { margin: 0; }
/* `.nh-cta` is a button in the system; as a link it must not pick up the base underline. */
a.nh-cta:hover { text-decoration: none; color: var(--primary-foreground); }
a.nh-cta > i > svg { width: 1rem; height: 1rem; }