/* MagnaChron Labs — site styles */
:root {
  --void: #080C18;
  --void-raised: #0D1322;
  --gold: #C9A84C;
  --parchment: #F0E8D0;
  --parchment-dim: #B9B19C;
  --rule: rgba(201, 168, 76, 0.22);
  --rule-soft: rgba(201, 168, 76, 0.12);
  --field-border: #6E6A5F;
  --hlela: #8F74F2;
  --lnf: #F39C12;
  --intergr8: #4FB3A5;
  --display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --header-h: 4.5rem;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --section-pad: clamp(4rem, 8vw, 7rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  scrollbar-color: rgba(201, 168, 76, 0.4) var(--void);
}

body {
  margin: 0;
  /* A fine grain keeps the large dark fields from looking flat. Inline SVG, no request. */
  background: var(--void) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .94 0 0 0 0 .91 0 0 0 0 .82 .04 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--parchment);
  font-family: var(--display);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--gold); color: var(--void); }

a { color: var(--gold); text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color 0.2s; }
a:hover { color: var(--parchment); }

/* One focus ring everywhere: gold, offset, with a dark gap so it reads on any surface */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }

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

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--gold); color: var(--void); padding: 0.6rem 1.1rem; font-family: var(--mono); font-size: 0.875rem;
  border-radius: 0 0 0.5rem 0; text-decoration: none;
}
.skip:focus { left: 0; z-index: 30; outline-offset: -4px; outline-color: var(--void); }

/* Header: sticky, translucent, with a scroll progress line */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(8, 12, 24, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rule-soft);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--hlela), var(--lnf), var(--intergr8));
  transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
}
@supports (animation-timeline: scroll()) {
  .site-header::after { animation: progress linear both; animation-timeline: scroll(root); }
}
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.brand { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--parchment); text-decoration: none; font-size: 1.5rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
.brand:hover { color: var(--parchment); }
.brand svg { width: 2rem; height: 2rem; flex: none; transition: transform 0.6s var(--ease-out); }
.brand:hover svg { transform: rotate(30deg); }
.site-nav { display: flex; gap: clamp(1rem, 3vw, 2.25rem); font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em; }
.site-nav a { position: relative; color: var(--parchment-dim); text-decoration: none; padding: 0.75rem 0; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.45rem; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.35s var(--ease-out);
}
.site-nav a:hover, .site-nav a[aria-current] { color: var(--parchment); }
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); }

/* Shared pill button shape */
.hero .cta, .open-form, .contact-form button, .panel .visit, .panel .status {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 2.875rem; padding: 0.7rem 1.5rem;
  border-radius: 999px;
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 400; line-height: 1.2; letter-spacing: 0.02em;
  text-decoration: none;
}
.hero .cta, .open-form, .contact-form button {
  border: 1px solid var(--gold); background: rgba(201, 168, 76, 0.04); color: var(--gold); cursor: pointer;
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.15s;
}
.hero .cta:hover, .open-form:hover, .open-form[aria-expanded="true"], .contact-form button:hover:not(:disabled) {
  background: var(--gold); color: var(--void); box-shadow: 0 10px 32px -12px rgba(201, 168, 76, 0.7);
}
.hero .cta:active, .open-form:active, .contact-form button:active:not(:disabled), .panel .visit:active { transform: translateY(1px); }

/* Hero */
.hero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 34rem 11rem at 50% 100%, rgba(201, 168, 76, 0.12), transparent 72%); }
.hero .stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
/* The horizon: a faint lit curve the hero rests on */
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; bottom: 0; width: max(150%, 110rem); height: 46rem;
  transform: translate(-50%, calc(100% - clamp(2rem, 4vw, 3.5rem)));
  border-radius: 50%;
  border-top: 1px solid rgba(201, 168, 76, 0.38);
  background: radial-gradient(ellipse 50% 22% at 50% 0, rgba(201, 168, 76, 0.13), transparent 70%), var(--void);
  -webkit-mask-image: linear-gradient(90deg, transparent 24%, #000 42%, #000 58%, transparent 76%);
  mask-image: linear-gradient(90deg, transparent 24%, #000 42%, #000 58%, transparent 76%);
}
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: min(calc(100svh - var(--header-h)), 52rem);
  padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(5rem, 9vw, 8rem);
}
.hero h1 {
  margin: 0 0 1.75rem;
  font-size: clamp(2.5rem, 6.2vw, 5.25rem);
  font-weight: 500; line-height: 1; letter-spacing: -0.015em;
}
.hero h1 .line { display: block; text-wrap: balance; }
.hero h1 .line-2 { font-style: italic; font-weight: 400; color: var(--gold); }
.hero h1 .w { display: inline-block; }
.hero p { max-width: var(--measure); margin: 0 0 1.25rem; color: var(--parchment-dim); text-wrap: pretty; }
.hero .cta { margin-top: 0.75rem; }
.hero .cta::after { content: "\2193"; content: "\2193" / ""; transition: transform 0.3s var(--ease-out); }
.hero .cta:hover::after { transform: translateY(3px); }
.hero .now { display: flex; align-items: baseline; gap: 0.7em; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6; color: var(--gold); margin: 2rem 0 0; min-height: 1.6em; }
.hero .now::before {
  content: ""; flex: none; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--gold);
  transform: translateY(-0.1em); box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.5);
}

@media (prefers-reduced-motion: no-preference) {
  .hero h1 .w { animation: word-in 0.9s var(--ease-out) both; animation-delay: calc(var(--i) * 110ms + 150ms); }
  .hero .after-title { animation: rise-in 0.9s var(--ease-out) both; animation-delay: 900ms; }
  .hero .orrery { animation: orrery-in 1.4s var(--ease-out) both; animation-delay: 250ms; }
  .hero .now::before { animation: pulse 2.4s ease-out infinite; }
}
@keyframes word-in { from { opacity: 0; transform: translateY(0.5em) rotate(2deg); filter: blur(6px); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(0.75rem); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes orrery-in { from { opacity: 0; transform: scale(0.94) rotate(-8deg); } }
@keyframes pulse { 70%, 100% { box-shadow: 0 0 0 0.55em rgba(201, 168, 76, 0); } }

/* Orrery */
.orrery {
  width: 100%; max-width: 32rem; justify-self: end; height: auto; display: block; overflow: visible;
  background: radial-gradient(circle closest-side, rgba(201, 168, 76, 0.1), rgba(201, 168, 76, 0.03) 45%, transparent 82%);
  border-radius: 50%;
}
.orrery .orbit-line { fill: none; stroke: rgba(201, 168, 76, 0.3); stroke-width: 1; transition: stroke 0.3s; }
.orrery .tick { stroke: var(--gold); stroke-width: 1; opacity: 0.55; }
.orrery .tick-major { stroke-width: 2; opacity: 0.9; }
.orrery .hand { stroke: var(--gold); stroke-linecap: round; }
.orrery .hand-second { stroke: var(--parchment); opacity: 0.6; }
.orrery .planet { cursor: pointer; text-decoration: none; }
.orrery .planet circle.dot { transition: r 0.25s ease; }
/* The halo doubles as a soft glow at rest and a ring on hover or focus */
.orrery .planet circle.halo { fill: currentColor; fill-opacity: 0.14; stroke: currentColor; stroke-width: 1; stroke-opacity: 0; transition: stroke-opacity 0.25s, fill-opacity 0.25s; }
.orrery .planet text { font-family: var(--mono); font-size: 12px; fill: var(--parchment-dim); text-anchor: middle; transition: fill 0.25s; }
.orrery .planet:hover circle.halo { stroke-opacity: 0.85; fill-opacity: 0.22; }
.orrery .planet:hover text, .orrery .planet:focus-visible text { fill: var(--parchment); }
.orrery .planet:focus-visible { outline: none; }
.orrery .planet:focus-visible circle.halo { stroke: var(--parchment); stroke-width: 2; stroke-opacity: 1; fill-opacity: 0.22; }
.orrery .orbit-forming { stroke-dasharray: 3 7; }
.orrery .planet.forming .dot { fill: var(--void); stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 3 3; }
.orrery .p-hlela { color: var(--hlela); }
.orrery .p-lnf { color: var(--lnf); }
.orrery .p-intergr8 { color: var(--intergr8); }

/* Sections */
.section { position: relative; padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
/* Divider: a hairline that fades at both ends, with a small gold lozenge at its centre */
.section + .section::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px;
  max-width: 66rem; margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--rule) 18%, rgba(201, 168, 76, 0.5) 50%, var(--rule) 82%, transparent);
}
.section + .section::after {
  content: ""; position: absolute; top: 0; left: 50%; width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--void); border: 1px solid var(--gold);
}
.section h2 { margin: 0 0 1rem; font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
.section .lede { max-width: var(--measure); margin: 0 0 clamp(2.25rem, 4.5vw, 3.75rem); color: var(--parchment-dim); text-wrap: pretty; }

/* Product panels */
.panels { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.panel {
  --mx: 50%; --my: 0%;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  --pad: clamp(1.75rem, 4vw, 3.5rem);
  padding: var(--pad);
  border-radius: 1.5rem;
  background: linear-gradient(180deg, #0F1627, var(--void-raised) 42%, #0B101D);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  box-shadow: inset 0 1px 0 rgba(240, 232, 208, 0.05), 0 2rem 4rem -2.5rem rgba(0, 0, 0, 0.9);
  transition: border-color 0.35s, box-shadow 0.35s;
}
.panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(34rem circle at var(--mx) var(--my), color-mix(in srgb, var(--c) 20%, transparent), transparent 62%);
  opacity: 0.55; transition: opacity 0.35s;
}
.panel:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: inset 0 1px 0 rgba(240, 232, 208, 0.07), 0 2.5rem 5rem -2.5rem color-mix(in srgb, var(--c) 35%, rgba(0, 0, 0, 0.9)); }
.panel:hover::before { opacity: 1; }
.panel > * { position: relative; }
.panel-flip .panel-art { order: -1; }
.panel .domain { margin: 0 0 0.75rem; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--c); }
.panel h3 { margin: 0 0 0.9rem; font-size: clamp(2.25rem, 4.6vw, 3.5rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.01em; }
.panel h3.logo-title { margin: 0.25rem 0 1.25rem; line-height: 0; }
.panel h3.logo-title img { display: block; width: auto; max-width: 100%; }
.panel .logo-hlela { height: clamp(3.5rem, 7vw, 5rem); margin-left: -0.35rem; }
.panel .logo-lnf { height: clamp(4rem, 8vw, 5.75rem); margin-left: -0.25rem; }
.panel .pitch { margin: 0 0 0.6rem; font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: var(--parchment); max-width: 26rem; text-wrap: balance; }
.panel p { margin: 0; max-width: 30rem; color: var(--parchment-dim); text-wrap: pretty; }
.panel .tagline { margin-top: 1rem; font-size: 1.5rem; font-style: italic; line-height: 1.3; color: var(--c); }
.panel .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.75rem; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em; }
.panel .platforms { color: var(--parchment-dim); }
.panel .visit { background: var(--c); color: var(--void); transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, filter 0.25s; }
.panel .visit::after { content: "\2197"; content: "\2197" / ""; transition: transform 0.3s var(--ease-out); }
.panel .visit:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px var(--c); color: var(--void); filter: brightness(1.08); }
.panel .visit:hover::after { transform: translate(2px, -2px); }
.panel .visit:focus-visible { outline-color: var(--parchment); }
.panel-banner img { display: block; width: 100%; max-width: 34rem; height: auto; margin: 0 auto; border-radius: 1rem; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--c) 70%, transparent); }
.panel-art svg { width: 100%; height: auto; display: block; max-width: 26rem; margin: 0 auto; }
.panel-video video { display: block; width: 100%; max-width: 21rem; height: auto; aspect-ratio: 4 / 5; margin: 0 auto; border-radius: 1.25rem; background: #1d1560; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--c) 70%, transparent); }
/* Hlela teaser on wide screens: large, reaching toward the top and right edges of the card */
.panel-video video { width: calc(100% + 1.75rem); max-width: 28rem; margin: -1.75rem -1.75rem -1.75rem auto; }
.panel-video video:focus-visible { outline-color: var(--parchment); border-radius: 1.25rem; }
.panel-hlela .panel-head, .panel-hlela .features, .panel-hlela .meta { position: relative; }
.panel .features { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.02em; }
.panel .features li { padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 7%, transparent); color: var(--parchment); }
.panel-art .ink { stroke: var(--c); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.panel-art .ink-dim { stroke: color-mix(in srgb, var(--c) 40%, transparent); fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.panel-art .fill { fill: var(--c); }
.panel-art .fill-soft { fill: color-mix(in srgb, var(--c) 22%, transparent); }
.panel-art .fill-gold { fill: var(--gold); }
.panel-art .fill-coral { fill: #FF7A66; }

.panel-soon { border-style: dashed; border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.panel-soon .panel-art { opacity: 0.7; }
.panel .status { border: 1px dashed var(--c); color: var(--c); }
.panel-next {
  grid-template-columns: 1fr; text-align: center; border-style: dashed; --c: var(--gold);
  border-color: rgba(201, 168, 76, 0.34); background: transparent; box-shadow: none;
  padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* The reserved orbit itself: a dashed arc passing behind the line of text */
.panel-next::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(120%, 62rem); aspect-ratio: 1;
  transform: translate(-50%, -12%); border-radius: 50%;
  border: 1px dashed rgba(201, 168, 76, 0.22); pointer-events: none;
}
.panel-next p { margin: 0 auto; font-style: italic; max-width: 26rem; text-wrap: balance; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .panel-art svg, .panel-video video { animation: art-in linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}
@keyframes art-in { from { opacity: 0; transform: translateY(2rem) scale(0.96); } to { opacity: 1; transform: none; } }

/* Principles: three columns that share their rows, so headings and text line up
   even when one heading wraps onto a second line */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: clamp(1.5rem, 4vw, 3.5rem); row-gap: 0.6rem; margin: 0; }
.principles > div { position: relative; display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.principles > div::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 1px; background: var(--gold); transition: width 0.5s var(--ease-out); }
.principles > div:hover::before { width: 100%; }
.principles dt { font-size: 1.75rem; font-weight: 600; line-height: 1.2; color: var(--gold); align-self: start; }
.principles dd { margin: 0; color: var(--parchment-dim); text-wrap: pretty; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.contact-grid h3 { margin: 0 0 0.5rem; font-family: var(--mono); font-size: 0.8125rem; font-weight: 400; color: var(--gold); }
.contact-grid p, .contact-grid address { margin: 0; font-style: normal; }
.contact-grid .email { font-size: clamp(1.5rem, 3.4vw, 2.25rem); font-weight: 600; overflow-wrap: anywhere; }

/* The opener carries a small plus that turns into a close mark while the form is open */
.open-form::after {
  content: ""; width: 0.7em; height: 0.7em; flex: none;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  transition: transform 0.35s var(--ease-out);
}
.open-form[aria-expanded="true"]::after { transform: rotate(135deg); }
.contact-form {
  margin-top: 1.5rem; display: grid; gap: 1.1rem; max-width: 34rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--rule); border-radius: 1.25rem;
  background: linear-gradient(180deg, #0F1627, var(--void-raised) 50%, #0B101D);
  box-shadow: inset 0 1px 0 rgba(240, 232, 208, 0.05), 0 2rem 4rem -2.5rem rgba(0, 0, 0, 0.9);
}
.contact-form label { display: grid; gap: 0.45rem; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--parchment-dim); }
.contact-form input, .contact-form textarea {
  font: inherit; font-family: inherit; font-size: 1.0625rem; letter-spacing: 0; color: var(--parchment);
  background: rgba(8, 12, 24, 0.7); border: 1px solid var(--field-border); border-radius: 0.625rem;
  padding: 0.75rem 0.9rem; width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.contact-form textarea { resize: vertical; min-height: 8rem; display: block; }
.contact-form input:hover, .contact-form textarea:hover { border-color: var(--parchment-dim); }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); border-radius: 0.625rem; box-shadow: 0 0 0 6px rgba(201, 168, 76, 0.14); background: var(--void); }
.contact-form input:-webkit-autofill, .contact-form textarea:-webkit-autofill { -webkit-text-fill-color: var(--parchment); box-shadow: 0 0 0 100px var(--void-raised) inset; caret-color: var(--parchment); }
.contact-form[hidden] { display: none; }
.contact-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form #ts-widget:empty { display: none; }
.contact-form button { justify-self: start; margin-top: 0.4rem; background: var(--gold); color: var(--void); }
.contact-form button:hover:not(:disabled) { background: var(--parchment); border-color: var(--parchment); box-shadow: 0 10px 32px -12px rgba(240, 232, 208, 0.6); }
.contact-form button:focus-visible, .open-form[aria-expanded="true"]:focus-visible { outline-color: var(--parchment); }
.contact-form button:disabled { opacity: 0.6; cursor: wait; }
.contact-form .form-status { margin: 0; font-size: 1rem; color: var(--parchment-dim); }
.contact-form .form-status:empty { display: none; }
.contact-form .form-status.ok { color: var(--gold); }
.contact-form .form-status.err { color: #e9a08f; }

@media (prefers-reduced-motion: no-preference) {
  .contact-form { transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); }
  @starting-style { .contact-form { opacity: 0; transform: translateY(-0.6rem); } }
}

/* Footer */
.site-footer { position: relative; border-top: 1px solid var(--rule-soft); background: linear-gradient(180deg, rgba(13, 19, 34, 0.55), transparent 70%); }
.site-footer .wrap { padding-top: 1.5rem; padding-bottom: 3rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.02em; line-height: 1.8; color: var(--parchment-dim); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 2rem; }
.site-footer .wrap:first-child { padding-top: 2.75rem; }
.site-footer p { margin: 0; }
.site-footer a { display: inline-block; padding: 0.4rem 0; }
.site-footer .company { padding-bottom: 0; display: block; }
.site-footer address { font-style: normal; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule-soft); }
.site-footer address::first-line { color: var(--parchment); }

/* Plain text pages */
.prose { max-width: 40rem; padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.prose h1 { margin: 0 0 0.5rem; font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 500; line-height: 1.05; }
.prose h2 { margin: 2.5rem 0 0.5rem; font-size: 1.75rem; font-weight: 600; color: var(--gold); }
.prose p, .prose li { color: var(--parchment-dim); text-wrap: pretty; }
.prose .updated { font-family: var(--mono); font-size: 0.8125rem; color: var(--gold); }

/* Reveal on scroll. script.js adds .reveal only to elements still below the fold,
   and only when motion is welcome, so without it everything is simply visible. */
.reveal { opacity: 0; transform: translateY(1.5rem); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-out) var(--reveal-delay, 0ms), transform 0.9s var(--ease-out) var(--reveal-delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .site-header::after { animation-duration: auto !important; }
  .reveal { opacity: 1; transform: none; }
}
@media print { .reveal { opacity: 1; transform: none; } }

@media (max-width: 56rem) {
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; gap: clamp(1.5rem, 5vw, 2.5rem); padding-top: clamp(1.5rem, 5vw, 3rem); }
  .orrery { justify-self: center; max-width: min(22rem, 78vw); order: -1; }
  .orrery .planet text { font-size: 13px; }
  .panel { grid-template-columns: 1fr; }
  .panel-flip .panel-art { order: 0; }
  .panel-art svg { max-width: 18rem; }
  .panel-video video { width: 100%; max-width: 22rem; margin: 0 auto; }
  .principles, .contact-grid { grid-template-columns: 1fr; }
  .principles { grid-template-rows: none; row-gap: clamp(1.75rem, 5vw, 2.5rem); }
  .principles > div { grid-row: auto; grid-template-rows: none; row-gap: 0.5rem; }
}
/* Hlela card on medium widths: the intro runs full width, then the pills and the Visit
   button share the left column while the teaser sits to their right, its top level
   with the first row of pills and its foot level with the button. */
@media (min-width: 36.0625rem) and (max-width: 56rem) {
  .panel-hlela { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); grid-template-areas: "head head" "feat video" "meta video"; grid-template-rows: auto auto 1fr; align-items: start; column-gap: clamp(1.5rem, 4vw, 2.5rem); row-gap: 0; }
  .panel-hlela .panel-text { display: contents; }
  .panel-hlela .panel-head { grid-area: head; }
  .panel-hlela .features { grid-area: feat; }
  .panel-hlela .meta { grid-area: meta; align-self: end; }
  .panel-hlela .panel-video { grid-area: video; margin-top: 1.5rem; }
  .panel-hlela .panel-video video { width: 100%; max-width: 19rem; margin: 0 0 0 auto; }
}
@media (max-width: 30rem) {
  body { font-size: 1.1875rem; }
  :root { --header-h: 5.5rem; }
  .site-header .wrap { flex-direction: column; align-items: stretch; justify-content: center; gap: 0; }
  .brand { font-size: 1.3125rem; }
  .brand svg { width: 1.75rem; height: 1.75rem; }
  .site-nav { gap: 1.5rem; margin-top: -0.15rem; }
  .site-nav a { padding: 0.55rem 0; }
  .site-nav a::after { bottom: 0.3rem; }
  .orrery { max-width: min(18.5rem, 76vw); }
  .orrery .planet text { font-size: 14px; }
  .panel .meta { margin-top: 1.5rem; }
  /* No card chrome on phones: the bot check needs the full column width */
  .contact-form { padding: 0; border: 0; background: none; box-shadow: none; }
}