/* highvibe.studio — one stylesheet for every page. */

:root {
  --ink: #000;
  --paper: #fff;
  --rule: rgba(0, 0, 0, 0.35);
  --mono: "Courier New", Courier, monospace;
  --page: 950px;
  --header: 100px;
}

* { box-sizing: border-box; }

html { scroll-padding-top: var(--header); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.25 var(--mono);
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }

img { display: block; max-width: 100%; height: auto; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 4px var(--rule);
}

.site-header nav {
  position: relative;
  max-width: var(--page);
  height: 50px;
  margin: 0 auto;
  font-size: 15px;
  text-transform: uppercase;
}

.site-header nav > a,
.site-header .legal {
  position: absolute;
  top: 0;
  height: 50px;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-header .home { left: 361px; }
.site-header .products { left: 460px; }
.site-header .legal { left: 596px; }
.site-header [aria-current="page"] { text-decoration: underline; }
.site-header .mail { right: 12px; }
.site-header .mail svg { width: 22px; height: 22px; fill: #0b0b3b; }

.legal > button {
  font: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.legal ul {
  display: none;
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 0;
  list-style: none;
  white-space: nowrap;
  text-transform: none;
  background: var(--paper);
  box-shadow: 0 1px 4px var(--rule);
}

.legal:hover ul,
.legal:focus-within ul { display: block; }

.legal li a {
  display: block;
  padding: 8px 18px;
  text-decoration: none;
}

.legal li a:hover,
.legal li a:focus { text-decoration: underline; }

/* ---------- home ---------- */

/* Desktop mirrors the original absolute layout; coordinates are page px. */
.home-page {
  position: relative;
  max-width: var(--page);
  height: 1420px;
  margin: 0 auto;
}

.home-page > * { position: absolute; margin: 0; }

.logo      { left: 380px; top: 25px;   width: 182px; }
.title     { left: 655px; top: 172px;  width: 293px; font-size: 42px; line-height: 1.25; text-align: right; }
.tagline   { left: 494px; top: 280px;  width: 429px; font-size: 16px; font-weight: bold; text-align: right; }
.intro     { left: 0;     top: 238px;  width: 370px; white-space: pre; line-height: 20.5px; }
.personal  { left: 414px; top: 360px;  width: 503px; }
.societal  { left: 0;     top: 681px;  width: 640px; }
.motto     { left: 0;     top: 1196px; padding: 6px 7px; border: 3px solid var(--ink); white-space: pre; line-height: 20px; }

.figure h2 {
  margin: 0 0 12px;
  font-size: 22px;
  text-align: center;
}

.personal h2 { width: 293px; margin-left: 105px; }
.societal h2 { width: 293px; margin-left: 170px; }

/* ---------- products ---------- */

.products-page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 48px 20px 80px;
}

.products-page h1 { font-size: 42px; line-height: 1.25; margin: 0 0 40px; }

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  text-decoration: none;
}

.product-list img { width: 160px; margin-bottom: 4px; }
.product-list b { font-size: 22px; }
.product-list a:hover b,
.product-list a:focus b { text-decoration: underline; }

@media (max-width: 979px) {
  :root { --header: 56px; }

  .site-header nav { height: var(--header); display: flex; justify-content: center; align-items: center; gap: clamp(20px, 6vw, 48px); }
  .site-header nav > a,
  .site-header .legal { position: static; height: auto; }
  .legal ul { top: 36px; }

  .home-page { height: auto; padding: 32px 20px 48px; display: flex; flex-direction: column; gap: 32px; }
  .home-page > * { position: static; width: auto; }

  .logo { width: 120px; align-self: center; }
  .title { text-align: center; font-size: 34px; }
  .tagline { text-align: center; margin-top: -24px; }
  .intro { white-space: pre-wrap; font-size: 15px; }
  .figure h2 { width: auto !important; margin-left: 0 !important; }
  .products-page h1 { font-size: 34px; text-align: center; }
  .motto { align-self: flex-start; font-size: 14px; }
}

/* ---------- legal ---------- */

.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px 80px;
  line-height: 1.55;
}

.legal-page h1 { font-size: 30px; line-height: 1.25; margin: 0 0 28px; }
.legal-page h2 { font-size: 20px; margin: 34px 0 8px; }
.legal-page p,
.legal-page ul { margin: 0 0 14px; }
.legal-page ul { padding-left: 1.4em; }

.not-found { text-align: center; padding-top: 120px; }