@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500&family=Geist+Mono:wght@400&display=swap");

/* Algamol 3 components. Plain CSS on the tokens: no shadows, no gradients, no borders, no backdrop blur.
   Every motion reads the motion tokens. Without the script or with reduced motion, every component shows its finished state. */

body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.55; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.al-on-graphite :focus-visible, .al-on-culture :focus-visible { outline-color: var(--ground); }

/* Wordmark: the logo SVG (Urbanist 600 with the network o). Set its height; width follows. */
.al-wordmark { display: block; height: 32px; width: auto; }

/* Button: flat. The mark docks on reach: free node arrives, ring closes, held while pressed. */
.al-button { font-family: var(--font-sans); font-size: 15px; font-weight: 500; line-height: 1; padding: 14px var(--space-2); min-height: 44px; box-sizing: border-box; border: 0; border-radius: var(--radius-1); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); text-decoration: none; transition: background-color var(--dur-snap, 280ms) var(--ease-dock, cubic-bezier(.3,0,.2,1)), color var(--dur-snap, 280ms) var(--ease-dock, cubic-bezier(.3,0,.2,1)); }
.al-button--primary { background: var(--accent-action); color: var(--ground); }
.al-button--primary:hover { background: var(--ink); color: var(--ground); }
.al-button--secondary { background: var(--field-glass); color: var(--ink); }
.al-button--secondary:hover { background: var(--ink); color: var(--ground); }
.al-button:disabled, .al-button[aria-disabled="true"] { background: var(--surface); color: var(--muted); cursor: not-allowed; }
.al-button__mark { width: 24px; height: 24px; flex: none; overflow: visible; }
.al-button__mark .r { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 0; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); transition: stroke-dashoffset var(--dur-snap, 280ms) var(--ease-dock, cubic-bezier(.3,0,.2,1)); }
.al-button__mark .f { fill: currentColor; transform: none; transition: transform var(--dur-snap, 280ms) var(--ease-dock, cubic-bezier(.3,0,.2,1)); }
html.al-motion .al-button:not(:hover):not(:focus-visible):not([aria-pressed="true"]) .al-button__mark .r { stroke-dashoffset: 15; }
html.al-motion .al-button:not(:hover):not(:focus-visible):not([aria-pressed="true"]) .al-button__mark .f { transform: translate(11px, -9px); }
.al-button:disabled .al-button__mark, .al-button[aria-disabled="true"] .al-button__mark { opacity: .5; }

/* Navigation: a plain bar on ground. */
.al-nav { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) max(16px, var(--space-3)); background: var(--ground); }
.al-nav .al-wordmark { height: 24px; margin-right: auto; }
.al-nav__links { display: flex; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.al-nav__links a { font-size: 15px; color: var(--ink); text-decoration: none; }
.al-nav__links a:hover, .al-nav__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
@media (max-width: 640px) { .al-nav__links { display: none; } }

/* Stat tile: figure, label, source line. The figure counts up; the source line ties on when it lands. */
.al-stat { background: var(--surface); border-radius: var(--radius-2); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.al-stat__figure { font-size: 64px; line-height: 1; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); margin-bottom: var(--space-1); }
.al-stat__label { font-size: 17px; line-height: 1.4; color: var(--ink); }
.al-stat__source { font-size: 13px; line-height: 1.45; color: var(--muted); display: flex; align-items: flex-start; gap: var(--space-1); }
.al-tie { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--ink); }
.al-tie .r { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 38; stroke-dashoffset: 0; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); transition: stroke-dashoffset var(--dur-reveal, 600ms) var(--ease-dock, cubic-bezier(.3,0,.2,1)); }
html.al-motion .al-stat:not(.is-held) .al-tie .r { stroke-dashoffset: 38; }
.al-stat__kind { align-self: flex-start; font-size: 13px; font-weight: 500; line-height: 1; padding: 6px var(--space-1); border-radius: var(--radius-1); background: var(--field-glass); color: var(--ink); }

/* Step sequence: order by position and scale. */
.al-steps { display: grid; grid-template-columns: repeat(var(--al-steps, 3), minmax(0, 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.al-step { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.al-step__n { font-size: 48px; line-height: 1; font-weight: 500; letter-spacing: -0.025em; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: var(--space-2); }
.al-step__bar { height: 8px; background: var(--ink); border-radius: var(--radius-0); margin-bottom: var(--space-2); }
.al-step__title { font-size: 24px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; margin: 0; display: flex; align-items: center; gap: var(--space-1); }
.al-step__text { font-size: 17px; line-height: 1.55; color: var(--muted); margin: 0; }
.al-living { width: 10px; height: 10px; border-radius: 50%; background: var(--data-living); flex: none; }
@media (max-width: 640px) { .al-steps { grid-template-columns: minmax(0, 1fr); } }

/* Comparison table: tone-stepped rows, no rules. */
.al-compare-wrap { overflow-x: auto; }
.al-compare { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.al-compare th, .al-compare td { text-align: left; vertical-align: top; padding: var(--space-2); border: 0; }
.al-compare thead th { font-size: 13px; font-weight: 500; color: var(--muted); padding-bottom: var(--space-1); }
.al-compare tbody tr:nth-child(odd) { background: var(--surface); }
.al-compare tbody tr.al-compare__us { background: var(--field-glass); }
.al-compare tbody th { font-weight: 500; color: var(--ink); }
.al-compare td { color: var(--ink); }
.al-compare .al-num { font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }

/* Photo frame: one shared treatment, no colour wash. */
.al-photo { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.al-photo__img { aspect-ratio: 3 / 2; max-width: 100%; width: 100%; object-fit: cover; border-radius: var(--radius-2); background: var(--surface); display: block; }
.al-photo__caption { font-size: 13px; line-height: 1.45; color: var(--muted); }

/* Fields */
.al-field-graphite { background: var(--field-graphite); color: var(--ground); }
.al-field-glass { background: var(--field-glass); color: var(--ink); }
.al-field-verdigris { background: var(--field-verdigris); color: var(--ink); }
.al-field-culture { background: var(--field-culture); color: var(--ground); }
/* Soft colour shift: only between field-graphite and field-culture, culture time. */
.al-field-drift { background: var(--field-graphite); color: var(--ground); animation: al-drift var(--dur-drift, 14s) ease-in-out infinite; }
@keyframes al-drift { 0%, 100% { background-color: var(--field-graphite); } 50% { background-color: var(--field-culture); } }

/* Capture: the mark in motion. Geometry is the small mark's: a ring and three stick-and-node bonds.
   Default is the held state. Add --loop for a loop, --once for one arrival, --instrument for the fast tempo, --dof for a focus pull. */
.al-capture { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink); --al-d: var(--dur-culture, 12s); --al-blur: 80px; }
.al-on-graphite .al-capture, .al-on-culture .al-capture { color: var(--ground); }
.al-capture--instrument { --al-d: var(--dur-instrument, 2.6s); }
.al-cap-ring { fill: currentColor; }
.al-cap-stick { fill: none; stroke: currentColor; stroke-width: 111.7; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.al-cap-node { fill: currentColor; }
.al-cap-n1 { --dx: -791px; --dy: -765px; }
.al-cap-n2 { --dx: 334px; --dy: -1048px; }
.al-cap-n3 { --dx: 134px; --dy: 1092px; }
.al-capture--loop .al-cap-node { animation: al-cap-arrive var(--al-d) infinite; }
.al-capture--loop .al-cap-stick { animation: al-cap-bond var(--al-d) infinite; }
.al-capture--once .al-cap-node { animation: al-cap-in calc(var(--dur-snap, 280ms) * 8) var(--ease-arrive, cubic-bezier(.2,.7,.1,1)) both; }
.al-capture--once .al-cap-stick { animation: al-cap-bond-once calc(var(--dur-snap, 280ms) * 8) var(--ease-dock, cubic-bezier(.3,0,.2,1)) both; }
.al-capture--dof.al-capture--loop .al-cap-node { animation-name: al-cap-arrive-dof; }
.al-capture--dof.al-capture--once .al-cap-node { animation-name: al-cap-in-dof; }
.al-capture--loop .al-cap-n2 > *, .al-capture--once .al-cap-n2 > * { animation-delay: calc(var(--al-d) * .04); }
.al-capture--loop .al-cap-n3 > *, .al-capture--once .al-cap-n3 > * { animation-delay: calc(var(--al-d) * .08); }
.al-capture--once .al-cap-n2 > * { animation-delay: calc(var(--stagger, 120ms)); }
.al-capture--once .al-cap-n3 > * { animation-delay: calc(var(--stagger, 120ms) * 2); }
@keyframes al-cap-arrive {
  0% { transform: translate(var(--dx), var(--dy)); opacity: 0; animation-timing-function: var(--ease-arrive, cubic-bezier(.2,.7,.1,1)); }
  8% { opacity: 1; }
  48% { transform: translate(0, 0); opacity: 1; }
  90% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes al-cap-arrive-dof {
  0% { transform: translate(var(--dx), var(--dy)); opacity: 0; filter: blur(var(--al-blur)); animation-timing-function: var(--ease-arrive, cubic-bezier(.2,.7,.1,1)); }
  10% { opacity: .9; }
  50% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
  90% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
  100% { transform: translate(0, 0); opacity: 0; filter: blur(0); }
}
@keyframes al-cap-bond {
  0%, 46% { stroke-dashoffset: 1; }
  58% { stroke-dashoffset: 0; animation-timing-function: var(--ease-dock, cubic-bezier(.3,0,.2,1)); }
  90% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1; }
}
@keyframes al-cap-in { from { transform: translate(var(--dx), var(--dy)); opacity: 0; } to { transform: translate(0, 0); opacity: 1; } }
@keyframes al-cap-in-dof { from { transform: translate(var(--dx), var(--dy)); opacity: 0; filter: blur(var(--al-blur)); } to { transform: translate(0, 0); opacity: 1; filter: blur(0); } }
@keyframes al-cap-bond-once { 0%, 55% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }

/* Scroll-driven capture: the script sets --al-e (arrival), --al-c (bonds) and --al-o (opacity). Defaults are the held state. */
.al-scrollcap { position: relative; height: var(--al-track, 240vh); }
.al-scrollcap__stage { position: sticky; top: 0; height: var(--al-stage, 100vh); display: grid; place-items: center; }
.al-scrollcap .al-capture { width: min(60%, 420px); }
.al-scrollcap .al-cap-node { transform: translate(calc(var(--dx) * (1 - var(--al-e, 1))), calc(var(--dy) * (1 - var(--al-e, 1)))); opacity: var(--al-o, 1); }
.al-scrollcap .al-cap-stick { stroke-dashoffset: calc(1 - var(--al-c, 1)); }

/* Rise: fade and rise, once. Hidden only when the script runs and motion is allowed. */
html.al-motion [data-al-rise] { opacity: 0; transform: translateY(var(--rise-distance, 24px)); transition: opacity var(--dur-reveal, 600ms) var(--ease-arrive, cubic-bezier(.2,.7,.1,1)), transform var(--dur-reveal, 600ms) var(--ease-arrive, cubic-bezier(.2,.7,.1,1)); transition-delay: calc(var(--al-i, 0) * var(--stagger, 120ms)); }
html.al-motion [data-al-rise].is-in { opacity: 1; transform: none; }

/* Parallax: the script sets the transform. Photography layers only. */
.al-parallax { position: relative; overflow: hidden; border-radius: var(--radius-2); }
[data-al-depth] { will-change: transform; }

/* Dock: layout blocks arrive and dock to their anchor on the 12-column grid. */
.al-dock { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); }
.al-dock__block { position: relative; background: var(--surface); border-radius: var(--radius-2); padding: var(--space-3); min-width: 0; }
.al-dock__block::before { content: ""; position: absolute; left: calc(var(--space-1) * -1); top: calc(var(--space-1) * -1); width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; box-sizing: border-box; opacity: 0; }
html.al-motion .al-dock__block { opacity: 0; transform: translate(var(--dx, -48px), var(--dy, 0)); transition: opacity var(--dur-reveal, 600ms) var(--ease-arrive, cubic-bezier(.2,.7,.1,1)), transform var(--dur-reveal, 600ms) var(--ease-dock, cubic-bezier(.3,0,.2,1)); transition-delay: calc(var(--al-i, 0) * var(--stagger, 120ms)); }
html.al-motion .al-dock__block.is-in { opacity: 1; transform: none; }
html.al-motion .al-dock__block.is-in::before { animation: al-anchor calc(var(--dur-reveal, 600ms) * 3) var(--ease-dock, cubic-bezier(.3,0,.2,1)) both; animation-delay: calc(var(--al-i, 0) * var(--stagger, 120ms)); }
@keyframes al-anchor { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .al-capture *, .al-field-drift, .al-dock__block::before { animation: none !important; }
  .al-field-drift { background-color: var(--field-graphite); }
  .al-button, .al-button__mark .r, .al-button__mark .f, .al-tie .r { transition: none; }
}