/* ===========================================================================
   good.design — home (v2)
   Spec: good_design_homepage_build_spec_v0.2
=========================================================================== */

/* ---------- 1.1 Color tokens ---------- */
:root {
  --bg-black: #161615;
  --text-white: #e2e2e0;
  --red: #cc444e;
  --yellow: #d8c05d;
  --blue: #4684b2;
  --gray-444: #444444;

  /* 1.5 Spacing */
  --page-pad-x-desktop: 40px;
  --page-pad-x-mobile: 15px;
  --page-pad-y-mobile: 12px;
  --hero-top-offset: 130px;
  --radius: 8px;

  /* 1.4 Type sizes (Parabolica) */
  --t-wordmark-m: 18pt;
  --t-wordmark-d: 30pt;
  --t-hnav-d: 22pt;
  --t-body-m: 17pt;
  --t-body-d: 22pt;
  --t-proj-name-m: 24pt;
  --t-proj-name-d: 24pt;
  --t-proj-tagline-m: 17pt;
  --t-proj-tagline-d: 16pt;
  --t-proj-links-m: 17pt;
  --t-proj-links-d: 16pt;
  --t-proj-desc-m: 13pt;
  --t-proj-desc-d: 13pt;
  --t-menu-link: 36pt;
  --t-small: 18pt;

  /* Animation */
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; }

body {
  background: var(--bg-black);
  color: var(--text-white);
  overflow-x: hidden;
  font-family: parabolica, "Cormorant Garamond", "Georgia", serif;
  font-weight: 400;
  font-size: var(--t-body-m);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
hr { border: 0; }

/* ---------- Animated underline (4.3) ---------- */
.animated-underline {
  position: relative;
  display: inline-block;
  /* No padding-bottom — keep the box height equal to font line-height so the
     nav rows align to the wordmark rows in the desktop header. */
}
.animated-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms var(--ease);
}
.animated-underline:hover::after,
.animated-underline:focus-visible::after {
  transform: scaleX(1);
}
/* Reverse on mouse-out: pin origin to right when leaving */
.animated-underline.leaving::after {
  transform-origin: right center;
}

/* ---------- Wordmark wiggle (4.4) ---------- */
@keyframes wm-wiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-2deg); }
  75%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}
.wiggle-target {
  display: inline-block;
  transform-origin: center;
  will-change: transform;
  /* Smooth ease-back to 0deg when the animation stops mid-cycle on mouse-out.
     The transition is overridden by the keyframes while .wiggling is active. */
  transition: transform 200ms var(--ease);
}
.wiggle-target.wiggling { animation: wm-wiggle 600ms linear infinite; }

/* ---------- Fade-in on scroll (4.2) ---------- */
.fade-in-target {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.fade-in-target.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================================================
   2.2 Initial header
   Mobile: structurally identical to sticky-nav (horizontal wordmark + Nav
   Button, 64px tall, black bg) but in normal flow — scrolls away with the
   page. Desktop overrides below switch back to the stacked vertical layout.
=========================================================================== */
.page-header {
  height: 64px;
  background: var(--bg-black);
  padding: 0;
}
.page-header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-pad-x-mobile) 8px;   /* matches .sticky-nav-inner */
  gap: 16px;
}
.wordmark {
  display: flex;
  flex-direction: row;        /* mobile: horizontal "Good Design Studio" */
  gap: 0.22em;
  font-size: var(--t-wordmark-m);
  line-height: 1.05;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.wordmark span { display: inline-block; }

.header-nav {
  display: none; /* mobile: hidden; hamburger shown */
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  font-size: var(--t-wordmark-m);
  line-height: 1.05;
}

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;         /* lock the click area against flex shrinking */
  width: 44px;            /* placement is identical for hamburger and X states */
  height: 44px;
  padding: 0;
}
/* Inline-SVG dot icon with 7 circles. Defaults render as 3 colored hamburger
   dots (left/center/right). 4 X-corner dots are parked at center with
   opacity 0. Open-state transitions are JS-driven via inline style so they
   reliably win against the SVG presentation attributes. */
.menu-icon {
  display: block;
  width: 38px;
  height: 38px;
  pointer-events: none;
}
.menu-icon .dot {
  transition:
    transform 280ms cubic-bezier(.6, .05, .3, .95),
    fill 280ms ease,
    opacity 200ms ease;
}

/* Nav item colors (1.3) */
.nav-work     { color: var(--text-white); }
.nav-about    { color: var(--red); }
.nav-articles { color: var(--yellow); }
.nav-contact  { color: var(--blue); }

/* ===========================================================================
   2.3 Hero
=========================================================================== */
.hero {
  padding: 0 var(--page-pad-x-mobile);
  margin-top: 32px;               /* gap below the bar on mobile (12 + 20 added) */
}
.hero-box {
  position: relative;
  width: 100%;
  height: 470px;                  /* mobile: fixed height */
  background: var(--gray-444);
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--gray-444);
}

/* ---------- 1.6 Play / pause buttons ---------- */
.play-btn {
  position: absolute;
  width: 32px; height: 32px;
  left: 12px; bottom: 12px;
  border-radius: 4px;
  background-image: url('assets/pause.svg'); /* default state = playing */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 2;
}
.play-btn[data-state="paused"] {
  background-image: url('assets/play.svg');
}
.play-btn-item {
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.carousel-item:hover .play-btn-item,
.play-btn-item:focus-visible {
  opacity: 1;
}

/* ===========================================================================
   2.4 Description
=========================================================================== */
.description {
  padding: 0 var(--page-pad-x-mobile) 165px;   /* mobile: 165px below the description text */
  margin-top: 50px;                            /* mobile gap below hero */
}
.description p { margin: 0; max-width: 100%; }

/* ===========================================================================
   2.5 Divider
=========================================================================== */
.divider {
  height: 1px;
  background: var(--gray-444);
  width: calc(100% - (var(--page-pad-x-mobile) * 2));
  margin: 56px var(--page-pad-x-mobile);
}

/* ===========================================================================
   2.6 Project row
=========================================================================== */
.project-row {
  margin: 56px 0;
}
.project-row-inner {
  padding: 0 var(--page-pad-x-mobile);
}
.project-row-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
.project-meta { display: flex; flex-direction: column; gap: 8px; }
.project-name {
  display: inline-block;
  align-self: flex-start;     /* shrink underline to text width */
  font-size: var(--t-proj-name-m);
}
.project-tagline { margin: 0; padding-top: 20px; font-size: var(--t-proj-tagline-m); }
.project-description p { margin: 0; font-size: var(--t-proj-desc-m); line-height: 1.44; }
.project-links {
  margin: 0;
  margin-top: 22px;            /* + 8px meta gap = 30px from tagline */
  padding-bottom: 30px;        /* mobile-only spacing below the links row */
  font-size: var(--t-proj-links-m);
  line-height: 1;
}
.project-description { padding-bottom: 28px; }   /* mobile-only spacing below the description */
.project-link-sep {
  display: inline-block;
  margin: 0 8px;        /* 8px on each side of the | */
  opacity: 0.5;
}

/* ===========================================================================
   3 Carousel
=========================================================================== */
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* full-bleed: extends to viewport edges, breaks page padding (2.6) */
}
.carousel-track {
  display: flex;
  gap: 16px;
  align-items: stretch;
  will-change: transform;
}
.carousel-item {
  position: relative;
  flex: 0 0 auto;
  height: 375px;                 /* mobile carousel height */
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gray-444);
}
.carousel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===========================================================================
   2.7 Footer
=========================================================================== */
.page-footer { padding: 0 0 48px; }
.page-footer-inner {
  padding: 48px var(--page-pad-x-mobile) 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.footer-col p { margin: 0 0 6px; }
.footer-label { color: var(--gray-444); font-size: var(--t-small); }
.footer-links { display: flex; flex-direction: column; gap: 4px; }

/* Socials list — two-column grid. Col 1 is sized to its widest label
   ("YT:") plus a 5px column gap; col 2 holds the @handle, left-aligned. */
.footer-socials {
  display: grid;
  grid-template-columns: max-content auto;
  column-gap: 5px;
  row-gap: 4px;
  align-items: baseline;
}
.footer-socials li { display: contents; }
.footer-social-label { text-align: right; }

/* ===========================================================================
   4.1 Sticky nav
=========================================================================== */
.sticky-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--bg-black);
  height: 64px;                 /* mobile — fits 28pt wordmark + hamburger */
  transform: translateY(-100%);
  transition: transform 240ms var(--ease);
}
.sticky-nav.is-visible { transform: translateY(0); }
.sticky-nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-pad-x-mobile) 8px;   /* extra 8px below the text */
  gap: 16px;
}
/* Sticky-bar context: keep .wordmark a single horizontal line at all widths
   (the initial header wordmark stacks vertically at desktop; the sticky one
   never should). Same .wordmark class so size/font/hover changes apply once. */
.sticky-nav .wordmark {
  flex-direction: row;
  gap: 0.22em;
  line-height: 1;
  white-space: nowrap;
}

.sticky-nav-links {
  display: none;                /* mobile: hidden */
  align-items: center;
  gap: 32px;
  font-size: var(--t-hnav-d);   /* mobile-hidden anyway; desktop @media keeps this in sync */
  line-height: 1;               /* match .sticky-wordmark so flex-center works visually */
}
.sticky-nav-links li,
.sticky-nav-links a { line-height: inherit; }

/* ===========================================================================
   Per-page color schemes (About / Articles / Contact).
   - Body bg = the page's nav color.
   - Active-page nav item flips to white; "Work" flips to black so both stay
     legible against the colored bar.
   - Sticky-nav stays black with a white wordmark across all pages.
=========================================================================== */
body.page-about    { background: var(--red);    color: var(--text-white); }
body.page-articles { background: var(--yellow); color: var(--bg-black); }
body.page-contact  { background: var(--blue);   color: var(--text-white); }

/* Page-header bar inherits body bg on colored pages (overrides the default
   black-bar styling so the page reads as one color). */
body.page-about    .page-header,
body.page-articles .page-header,
body.page-contact  .page-header { background: transparent; }

/* Active-page highlight + Work-flip in the initial-header nav */
body.page-about    .page-header .nav-about    { color: var(--text-white); }
body.page-articles .page-header .nav-articles { color: var(--text-white); }
body.page-contact  .page-header .nav-contact  { color: var(--text-white); }

body.page-about    .page-header .nav-work,
body.page-articles .page-header .nav-work,
body.page-contact  .page-header .nav-work { color: var(--bg-black); }

/* Mobile menu drawer matches the page color, with the same nav rules */
body.page-about    .mobile-menu-links { background: var(--red); }
body.page-articles .mobile-menu-links { background: var(--yellow); }
body.page-contact  .mobile-menu-links { background: var(--blue); }

body.page-about    .mobile-menu-links .nav-about    { color: var(--text-white); }
body.page-articles .mobile-menu-links .nav-articles { color: var(--text-white); }
body.page-contact  .mobile-menu-links .nav-contact  { color: var(--text-white); }

body.page-about    .mobile-menu-links .nav-work,
body.page-articles .mobile-menu-links .nav-work,
body.page-contact  .mobile-menu-links .nav-work { color: var(--bg-black); }

/* Sticky-nav stays black-bar with white wordmark on every page (otherwise
   the body-color inheritance turns the wordmark invisible on Articles). */
.sticky-nav .wordmark { color: var(--text-white); }

/* ===========================================================================
   Sub-page content (About, Articles, Contact) — minimal shared styling.
=========================================================================== */
.page-section {
  padding: 48px var(--page-pad-x-mobile) 96px;
  max-width: 800px;
}
.page-section h1 {
  font-size: 36pt;
  font-weight: 400;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.page-section p {
  margin: 0 0 24px;
  font-size: var(--t-body-m);
  line-height: 1.4;
}

/* Articles list */
.articles-list { list-style: none; margin: 32px 0 0; padding: 0; }
.article-item {
  padding: 32px 0;
  border-top: 1px solid var(--gray-444);
}
.article-item:last-child { border-bottom: 1px solid var(--gray-444); }
.article-title {
  font-size: 24pt;
  font-weight: 400;
  margin: 0 0 8px;
}
.article-title a { color: inherit; }
.article-meta {
  font-size: var(--t-small);
  color: var(--gray-444);
  margin: 0 0 12px;
}
.article-excerpt {
  margin: 0;
  font-size: var(--t-body-m);
  line-height: 1.4;
  max-width: 720px;
}

@media (min-width: 1024px) {
  .page-section {
    padding: 80px var(--page-pad-x-desktop) 128px;
  }
  .page-section h1 { font-size: 48pt; }
  .page-section p,
  .article-excerpt { font-size: var(--t-body-d); }
}

/* ===========================================================================
   Mobile menu drawer (4.5) — slides down from top, sits BELOW the sticky-nav.
   The sticky-nav is force-shown while the menu is open, so its wordmark + the
   X-morphed hamburger sit in the same place as the initial header's.
=========================================================================== */
/* Mobile menu drawer — overflow clipper anchored just below the bar
   (page-header at top of page, or sticky-nav when scrolled). Both bars are
   64px tall, so the drawer sits flush at top: 64px in either case.
   Links wrapper inside translates from -100% to 0, emerging from below the bar. */
.mobile-menu {
  position: fixed;
  top: 64px;                /* page-header / sticky-nav height */
  left: 0;
  right: 0;
  height: calc(100vh - 64px);
  z-index: 90;              /* below the sticky-nav so its X stays clickable */
  overflow: hidden;
  pointer-events: none;
}
.is-menu-open .mobile-menu {
  pointer-events: auto;
}

/* Lock page scroll while the menu is open. */
body.is-menu-open {
  overflow: hidden;
  touch-action: none;
}
.mobile-menu-links {
  position: absolute;       /* fill the drawer fully so translateY(-100%) hides it */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-black);
  padding: 32px var(--page-pad-x-mobile);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-sizing: border-box;
  transform: translateY(-100%);
  transition: transform 320ms cubic-bezier(.2, .7, .2, 1);
}
.is-menu-open .mobile-menu-links {
  transform: translateY(0);
}
.mobile-menu-link {
  font-size: var(--t-menu-link);
  line-height: 1.1;
}

/* Hide the menu drawer + hamburger entirely on desktop — the desktop header's
   inline nav handles navigation there. */
@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}

/* ===========================================================================
   1.7 Breakpoint — desktop (≥ 1024px)
=========================================================================== */
@media (min-width: 1024px) {
  body { font-size: var(--t-body-d); }

  .page-header {
    height: auto;            /* override mobile fixed 64px */
    padding: 40px var(--page-pad-x-desktop);
    background: transparent; /* desktop has no bar look */
  }
  .page-header-inner {
    height: auto;
    align-items: flex-start;  /* stacked content */
    padding: 0;
  }
  .wordmark {
    font-size: var(--t-wordmark-d);
    flex-direction: column;        /* desktop: stacked Good / Design / Studio */
    gap: 0;
    white-space: normal;
  }
  .header-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: var(--t-wordmark-d);
    line-height: 1.05;        /* match .wordmark so rows align baseline-for-baseline */
    gap: 0;
  }
  .header-nav li,
  .header-nav .nav-link { line-height: inherit; }
  .hamburger { display: none; }

  /* ----- Nav layout variants (initial header only; sticky nav unchanged) ----- */

  /* Nav_Style_Right — default. Nav block sits at the right edge,
     text right-justified within the column. */
  [data-nav-style="right"] .header-nav { align-items: flex-end; }

  /* Nav_Style_Middle — nav column starts 345px from the screen's left edge,
     text left-justified within the column. Matches Matt's mockup. */
  [data-nav-style="middle"] .page-header {
    position: relative;
    /* Reserve room for the nav's 4 rows + top/bottom padding (the absolutely
       positioned nav doesn't contribute to the parent's intrinsic height). */
    min-height: calc(40px + (30pt * 1.05 * 4) + 40px);
  }
  [data-nav-style="middle"] .page-header-inner { display: block; }
  [data-nav-style="middle"] .header-nav {
    position: absolute;
    top: 40px;        /* match page-header padding-top */
    left: 345px;      /* from screen left, per mockup */
    align-items: flex-start;
  }

  /* Hero — 16:9 desktop, full content width */
  .hero {
    padding: 0 var(--page-pad-x-desktop);
    margin-top: 32px;
  }
  .hero-box { height: auto; aspect-ratio: 16 / 9; }
  .play-btn {
    width: 48px; height: 48px;
    left: 16px; bottom: 16px;
    border-radius: 6px;
  }

  .description {
    padding: 0 var(--page-pad-x-desktop);
    margin-top: 32px;
  }
  .description p { max-width: 66%; }

  .divider {
    width: calc(100% - (var(--page-pad-x-desktop) * 2));
    margin: 80px var(--page-pad-x-desktop);
  }

  /* Project row 2-col */
  .project-row { margin: 80px 0; }
  .project-row-inner { padding: 0 var(--page-pad-x-desktop); }
  /* Two equal-width columns at 45% each. Gap between them is variable —
     fills whatever is left after both columns claim 45% (≈ 10% of the row,
     so the gap grows/shrinks with viewport width). */
  .project-row-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    grid-template-columns: none;
    gap: 32px;                   /* safety minimum if viewport ever shrinks below 90% headroom */
    margin-bottom: 40px;
  }
  .project-meta { flex: 0 0 40%; max-width: 40%; min-width: 0; }
  .project-description { flex: 0 0 40%; max-width: 40%; }
  /* Switch project text to desktop tokens. */
  .project-name { font-size: var(--t-proj-name-d); }
  .project-tagline {
    font-size: var(--t-proj-tagline-d);
    padding-top: 10px;       /* desktop: tagline sits 10px closer to project name */
  }
  .project-description p { font-size: var(--t-proj-desc-d); }
  .project-links { font-size: var(--t-proj-links-d); padding-bottom: 0; }
  .project-description { padding-bottom: 0; }

  .carousel-item { height: 512px; }

  /* Footer 3-col */
  .page-footer { padding-bottom: 64px; }
  .page-footer-inner {
    padding: 64px var(--page-pad-x-desktop) 0;
    flex-direction: row;
    gap: 64px;
    align-items: flex-start;
  }
  .footer-col { flex: 1; }
  .footer-links { flex-direction: column; gap: 4px; }

  /* Sticky nav desktop */
  .sticky-nav { height: 60px; }
  .sticky-nav-inner { padding: 0 var(--page-pad-x-desktop) 8px; }
  .sticky-nav .wordmark { font-size: var(--t-hnav-d); }
  .sticky-nav-links {
    display: flex;
    font-size: var(--t-hnav-d);
  }
  .sticky-nav .hamburger { display: none; }
}

/* ===========================================================================
   4.6 Reduced motion
=========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sticky-nav { transition: none; }
  .fade-in-target { opacity: 1; transform: none; transition: none; }
  .animated-underline::after { transition: none; }
  .wiggle-target.wiggling { animation: none; }
  .mobile-menu, .mobile-menu-link { transition: none; }
  .carousel-track { animation: none !important; }
}