/* About: the people, the plan and a history of the work. Shared site tokens. */

.about-page{padding-bottom:24px}
:where(.about-page) p{margin:0}
:where(.about-page) h2,:where(.about-page) h3{margin:0}
.about-lead{font-size:var(--text-lead);line-height:1.6;color:var(--text-muted);max-width:590px}
.about-lead+.about-lead{margin-top:18px}
.about-lead strong{color:var(--text);font-weight:500}
.about-label{font:10px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text);background:color-mix(in srgb,var(--surface-sunk) 85%,transparent);border:1px solid var(--rule);border-radius:4px;padding:4px 7px}
.about-label.inline{display:inline-block;margin-right:6px;vertical-align:1px}

/* The work film is deliberately started by the viewer. */
.about-hero{display:grid;grid-template-columns:1fr;gap:32px;padding:clamp(44px,7vw,88px) 0 var(--section-space)}
.about-hero>div{max-width:760px}
.about-hero .eyebrow{margin-bottom:16px}
.about-hero h1{margin:0 0 24px}
.about-hero .about-lead{max-width:650px}
.about-film{width:100%;margin:0}
.mark-page{max-width:760px;padding-top:56px;padding-bottom:80px}
.mark-page h1{margin:32px 0}
.mark-page .media{max-width:540px;margin:0 auto}

/* Sections */
.about-section{padding:var(--section-space) 0;border-top:1px solid var(--rule);scroll-margin-top:24px}
.about-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:44px}
.about-section-head>p{color:var(--text-muted);max-width:520px}

/* One home, one history */
.about-log{position:relative;list-style:none;margin:0;padding:0;max-width:980px}
.about-log::before{content:"";position:absolute;left:15px;top:14px;bottom:40px;width:2px;background:linear-gradient(var(--rule-strong) 88%,transparent);opacity:.6}
.about-entry{position:relative;display:grid;grid-template-columns:32px minmax(0,190px) minmax(0,1fr);gap:0 26px;padding:0 0 34px}
.about-entry[data-state=there]{--state:var(--text-muted)}.about-entry[data-state=proposed]{--state:var(--zendesign-ink)}.about-entry[data-state=agreed]{--state:var(--signal)}.about-entry[data-state=built]{--state:var(--zenlink-ink)}.about-entry[data-state=home]{--state:var(--zenhome-ink)}
.about-dot{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;background:var(--bg);border:2px solid var(--rule-strong);display:grid;place-items:center}
.about-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--state)}
.about-state{padding-top:5px}
.about-state b{display:block;font:500 10.5px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--state)}
.about-state span{font:12px/1.4 var(--font-mono);color:var(--text-faint)}
.about-entry-body{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:20px 22px}
.about-entry h3{font-size:20px;margin-bottom:8px}
.about-entry-body>p{color:var(--text-muted);font-size:15.5px;line-height:1.55}
.about-entry-body>p.about-meta{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--text-faint)}
.about-meta .product-mark{width:20px;height:20px;border-radius:5px}
.about-meta .product-mark img{width:70%;height:70%}
.about-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.about-option{position:relative;border:1px solid var(--rule);border-radius:var(--radius);padding:14px;font-size:14px;line-height:1.45;color:var(--text-muted)}
.about-option b{display:block;color:var(--text);font-weight:600;margin-bottom:2px}
.about-option svg{display:block;width:100%;height:auto;margin-bottom:10px;fill:none;stroke:var(--text-faint);stroke-width:1.5}
.about-option svg rect:first-child{stroke:var(--rule-strong);stroke-width:2}
.about-option svg .fill{fill:color-mix(in srgb,var(--zendesign) 45%,transparent);stroke:none}
.about-option.chosen{border-color:var(--signal);box-shadow:inset 0 0 0 1px var(--signal)}
.about-pick{position:absolute;right:12px;top:10px;font:10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.about-option.chosen svg{margin-top:14px}
.about-lines{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--rule);font-size:14px}
.about-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule);color:var(--text-muted)}
.about-lines em{font:normal 11px/1.6 var(--font-mono);color:var(--text);background:var(--surface-sunk);border:1px solid var(--rule);padding:1px 8px;border-radius:10px;white-space:nowrap}
.about-change{display:flex;gap:14px;align-items:center;margin-top:14px;padding:12px 14px;border:1px dashed var(--accent);border-radius:var(--radius);font-size:14px;line-height:1.45;color:var(--text-muted)}
.about-change svg{flex:none;width:64px;height:40px;fill:none;stroke:var(--text);stroke-width:2}
.about-change text{fill:var(--accent);stroke:none;font:10px var(--font-mono)}
.about-change b{color:var(--text);font-weight:500}
.about-log-note{margin:6px 0 0 58px;font-size:var(--text-small);line-height:1.55;color:var(--text-faint);max-width:740px}

/* How we got here, as a loop */
.about-origin{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.about-ring{position:relative;aspect-ratio:1;width:100%;max-width:420px;margin:auto}
.about-track{position:absolute;inset:0;width:100%;height:100%;fill:none}
.about-track circle{stroke:var(--rule-strong);stroke-width:2;stroke-dasharray:3 7}
.about-track g path{stroke:var(--text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.about-track .about-house{stroke:var(--text);stroke-width:2.5;stroke-linejoin:round}
.about-node{position:absolute;transform:translate(-50%,-22px);display:grid;justify-items:center;gap:8px;text-align:center;font-size:13px;line-height:1.35;color:var(--text-muted)}
.about-node b{display:block;color:var(--text);font:600 15px/1.2 var(--font-head)}
.about-node .product-mark{box-shadow:0 0 0 8px var(--bg),inset 0 0 0 1px rgb(255 255 255 / .09)}
.about-node.n1{left:50%;top:18.75%}.about-node.n2{left:80.3%;top:71.25%}.about-node.n3{left:19.7%;top:71.25%}
.about-origin h2{margin-bottom:24px}
.about-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.about-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:22px 0;border-bottom:1px solid var(--rule)}
.about-steps li:last-child{border-bottom:0}
.about-steps p{color:var(--text-muted);line-height:1.55}
.about-steps .about-q{color:var(--text);font:500 19px/1.4 var(--font-body);margin-bottom:6px}
.about-steps a{color:var(--text);font-weight:600}

/* What we hold to */
.about-values{list-style:none;margin:0;padding:0;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface)}
.about-values li{display:grid;grid-template-columns:60px minmax(0,240px) minmax(0,1fr);gap:24px;align-items:center;padding:22px 26px}
.about-values li+li{border-top:1px solid var(--rule)}
.about-values svg{width:36px;height:36px;fill:none;stroke:var(--text);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;opacity:.85}
.about-values p{color:var(--text-muted)}

/* Close */
.about-close{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end}
.about-close h2{margin-bottom:16px}
.about-paths{display:grid;border-top:1px solid var(--rule)}
.about-paths a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;padding:14px 0;border-bottom:1px solid var(--rule);text-decoration:none;font-size:16px}
.about-paths a span{color:var(--text-muted);font-size:var(--text-small);transition:color var(--quick) var(--ease)}
.about-paths a:hover span{color:var(--text)}

@media (max-width:1000px){
  .about-hero{grid-template-columns:1fr;gap:28px}
  .about-film{justify-self:center}
  .about-origin{grid-template-columns:1fr;gap:36px}
  .about-entry{grid-template-columns:32px minmax(0,1fr);gap:8px 18px}
  .about-state,.about-entry-body{grid-column:2}
  .about-state{padding-top:6px}
}
@media (max-width:700px){
  .about-section-head{grid-template-columns:1fr;gap:14px;margin-bottom:30px}
  .about-options{grid-template-columns:1fr}
  .about-change{flex-direction:column;align-items:flex-start}
  .about-log-note{margin-left:0}
  .about-node{font-size:12px}
  .about-node b{font-size:13.5px}
  .about-values li{grid-template-columns:48px minmax(0,1fr);gap:6px 16px;padding:20px}
  .about-values p{grid-column:2}
  .about-close{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .about-paths a span{transition:none}
}