/* Idalia Labs — black and white only. Archivo 900 display, JetBrains Mono labels. */

:root {
  --ink: #ffffff;
  --ground: #000000;
  --dim-1: rgba(255, 255, 255, 0.65);
  --dim-2: rgba(255, 255, 255, 0.55);
  --dim-3: rgba(255, 255, 255, 0.58);
  --dim-4: rgba(255, 255, 255, 0.48);
  --rule: rgba(255, 255, 255, 0.14);
  --rule-soft: rgba(255, 255, 255, 0.22);
  --display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: 72px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--dim-1); }
a:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.band { border-top: 1px solid var(--rule); }

/* ---- masthead ---- */

.masthead { border-bottom: 1px solid var(--rule); }

.masthead .wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 26px;
  padding-bottom: 26px;
}

.lockup { display: flex; flex-direction: row; align-items: center; gap: 13px; }
.lockup svg { display: block; }

.wordmark {
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.19em;
  white-space: nowrap;
}

.nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 34px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.13em;
}


/* ---- status strip ---- */

.status { border-bottom: 1px solid var(--rule); }

.status .wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 11px;
  padding-bottom: 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--dim-4);
}

/* ---- shared type ---- */

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  color: var(--dim-3);
}

.label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--dim-3);
}

.statement {
  margin: -0.1em 0;
  padding: 0.1em 0;
  font-weight: 900;
  font-size: clamp(38px, 7.2vw, 78px);
  line-height: 0.94;
  letter-spacing: -0.028em;
  max-width: 15ch;
  text-wrap: pretty;
}


.body { margin: 0; font-size: 16px; max-width: 56ch; color: var(--dim-2); }

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---- button ---- */

.button {
  display: inline-block;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  padding: 15px 30px;
}

.button:hover { background: var(--ink); color: var(--ground); }


/* ---- hero ---- */

.hero .wrap {
  padding-top: 150px;
  padding-bottom: 130px;
  gap: 34px;
}

/* ---- section rhythm ---- */

.section .wrap { padding-top: 96px; padding-bottom: 96px; }
.section--tight .wrap { padding-bottom: 34px; }
.section--close .wrap { padding-top: 76px; padding-bottom: 76px; }

/* ---- product entries ---- */

.entries { padding-bottom: 96px; }

.entry {
  border-top: 1px solid var(--rule);
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.entry__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.entry__index {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--dim-3);
}

.entry__name {
  font-weight: 900;
  font-size: clamp(34px, 5vw, 46px);
  letter-spacing: -0.025em;
  line-height: 1;
}


.chip {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  color: var(--dim-3);
  border: 1px solid var(--rule-soft);
  padding: 5px 10px;
  white-space: nowrap;
}


/* ---- posture grid ---- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 52px;
  width: 100%;
}

.cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 13px;
}

.cell p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--dim-2); }


/* ---- footer ---- */

.footer .wrap {
  padding-top: 60px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.footer__links {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  color: var(--dim-1);
}

.footer__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 28px;
  width: 100%;
}

.footer__legal p { margin: 0; font-size: 11.5px; line-height: 1.6; max-width: 62ch; color: var(--dim-4); }

.footer__copy {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--dim-4);
}

/* ---- modifiers (replacing inline styles, so the CSP needs no unsafe-inline) ---- */

.button--spaced { margin-top: 8px; }
.closing { margin: 0; font-size: 16px; color: var(--dim-2); }
.closing a { border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 2px; }
.closing a:hover { border-bottom-color: var(--ink); }
.body--tight { max-width: 46ch; }
.stack--wide { gap: 52px; }
.wordmark--small { font-size: 12.5px; }

/* ---- responsive ---- */

@media (max-width: 900px) {
  :root { --gutter: 40px; }
  .hero .wrap { padding-top: 96px; padding-bottom: 84px; }
  .section .wrap { padding-top: 68px; padding-bottom: 68px; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .statement { max-width: 18ch; }
}

@media (max-width: 620px) {
  :root { --gutter: 24px; }
  .masthead .wrap { flex-direction: column; align-items: flex-start; gap: 18px; }
  .nav { gap: 22px; flex-wrap: wrap; }
  .status .wrap { font-size: 9.5px; letter-spacing: 0.14em; }
  .hero .wrap { padding-top: 72px; padding-bottom: 64px; gap: 26px; }
  .body { font-size: 15.5px; }
  .entry__head { gap: 12px; }
  .footer__links { gap: 20px; }
}

/* ---- motion -------------------------------------------------------------
   Three gestures only, each tied to something structural:
   the mark drawing its own geometry, the hero settling once, and the
   section rules extending as they come into view. No scroll effects,
   no parallax, nothing that repeats. Everything is opt-in via .js so the
   page renders complete when scripting is unavailable. */

.mark path { stroke-dasharray: 99; }

@keyframes draw-mark {
  from { stroke-dashoffset: 99; }
  to   { stroke-dashoffset: 0; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* The statement is the one piece of type large enough to deserve its own
   entrance: it rises through a mask rather than fading, which reads as
   typesetting rather than as an effect. */
@keyframes statement-in {
  from { clip-path: inset(100% 0 0 0); transform: translateY(16px); }
  to   { clip-path: inset(0 0 0 0); transform: none; }
}

.js .mark path {
  stroke-dashoffset: 99;
  animation: draw-mark 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 80ms forwards;
}

.js .footer .mark path { animation-delay: 200ms; }

.js .hero .stack > * {
  opacity: 0;
  animation: rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.js .hero .statement {
  opacity: 1;
  animation: statement-in 1000ms cubic-bezier(0.22, 0.61, 0.36, 1) 240ms backwards;
}

.js .hero .stack > *:nth-child(1) { animation-delay: 160ms; }
.js .hero .stack > *:nth-child(2) { animation-delay: 220ms; }
.js .hero .stack > *:nth-child(3) { animation-delay: 300ms; }
.js .hero .stack > *:nth-child(4) { animation-delay: 360ms; }
.js .hero .stack > *:nth-child(5) { animation-delay: 420ms; }

.band { position: relative; }

.js .band { border-top-color: transparent; }

.js .band::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 640ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js .band.is-in::before { transform: scaleX(1); }

.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 760ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js .is-in .reveal { opacity: 1; transform: none; }

.js .is-in .reveal:nth-child(2) { transition-delay: 90ms; }
.js .is-in .reveal:nth-child(3) { transition-delay: 180ms; }
.js .is-in .reveal:nth-child(4) { transition-delay: 270ms; }

.button, .nav a, .footer__links a, .lockup { transition: color 140ms linear, background-color 140ms linear, border-color 140ms linear; }

.nav a, .footer__links a { position: relative; }

.nav a::after,
.footer__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav a:hover::after,
.footer__links a:hover::after { transform: scaleX(1); transform-origin: left center; }

.button:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .js .mark path { stroke-dashoffset: 0; animation: none; }
  .js .hero .stack > * { opacity: 1; animation: none; }
  .js .band { border-top-color: var(--rule); }
  .js .band::before { display: none; }
  .js .hero .statement { animation: none; clip-path: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .nav a::after, .footer__links a::after { display: none; }
  .button, .nav a, .footer__links a, .lockup { transition: none; }
  .button:active { transform: none; }
}