/* ============================================================
   Home (front-page) — page-local styles.
   Ported verbatim from the Home.html prototype <style> block
   (Direction C · Plotted). Loaded on the front page only.
   ============================================================ */

.phero { position: relative; min-height: clamp(620px, 92vh, 1000px); display:grid; place-items:center; overflow:hidden; text-align:center; }
#plot { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.phero::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(58% 52% at 50% 47%, rgba(var(--paper-rgb)/0.86) 0%, rgba(var(--paper-rgb)/0.45) 46%, rgba(var(--paper-rgb)/0) 74%); }
.phero .pcontent { position:relative; z-index:2; padding: 40px var(--gut); max-width: 960px; }
.phero-h1 { font-family: var(--serif); font-weight:300; font-size: clamp(42px, 6.8vw, 96px); line-height:1.04; letter-spacing:-0.03em; }
.phero-h1 em { font-style:italic; color: var(--accent); }
.plot-cap { position:absolute; left: var(--gut); bottom: 22px; z-index:2; font-family:var(--mono); font-size:12px; color:var(--ink-mute); letter-spacing:0.02em; }
.plot-cap b { color: var(--accent); font-weight:500; }
.hero-chips { display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.hchip { display:inline-flex; align-items:center; gap:9px; padding:10px 17px; border-radius:100px; border:1px solid color-mix(in oklch, var(--accent) 22%, var(--rule)); background: color-mix(in oklch, var(--accent) 9%, rgba(var(--paper-rgb)/0.82)); backdrop-filter: blur(8px); font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:0.03em; color:var(--ink); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.hchip:hover { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 16%, rgba(var(--paper-rgb)/0.82)); transform: translateY(-1px); }
.hchip::before { content:''; width:7px;height:7px;border-radius:100px;background:var(--accent); }

/* Plotted divider */
.divider { width:100%; height: 64px; display:block; }
.divider path { fill:none; stroke: var(--accent); stroke-width:1; opacity:.5; vector-effect:non-scaling-stroke; }

/* Product spec sheet */
.spec { padding-block: clamp(56px,7vw,104px); }
.spec-head { display:flex; align-items:baseline; gap:18px; }
.spec-idx { font-family:var(--mono); font-size: clamp(22px,3vw,34px); color: var(--accent); font-weight:500; }
.spec-name { font-family:var(--mono); font-size:13px; letter-spacing:0.18em; text-transform:uppercase; color: var(--ink-mute); }
.spec-tag { font-family:var(--serif); font-weight:300; font-size: clamp(34px,4.6vw,64px); line-height:1.04; letter-spacing:-0.025em; margin-top:18px; max-width: 18ch; }
.spec-tag em { font-style:italic; color:var(--accent); }
.spec-body { display:grid; grid-template-columns: 1.25fr 0.9fr; gap: clamp(28px,4vw,56px); margin-top: 40px; align-items:start; }
.spec-list { display:grid; gap:0; border-top:1px solid var(--rule); }
.spec-row { display:grid; grid-template-columns: 38% 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--rule); }
.spec-row dt { font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-mute); }
.spec-row dd { margin:0; font-size:15px; color:var(--ink); }
.spec-cta { display:flex; align-items:center; gap:20px; margin-top:32px; flex-wrap:wrap; }
.arrow-link { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--accent); }
.arrow-link svg { width:16px;height:16px; transition:transform .2s ease; }
.arrow-link:hover svg { transform:translateX(4px); }

/* Product featured image (square, owner-editable) — replaces the composed
   art grid / device showcase when an image is set on the Home page. */
.spec-img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:20px; border:1px solid var(--rule); display:block; }

/* MathPaint art grid */
.artgrid { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
.artgrid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid var(--rule); }
.artgrid .wide { grid-column: span 2; aspect-ratio: 2/1; }

/* Lexolotl device showcase */
.lx-show { position:relative; border-radius:20px; padding: clamp(28px,4vw,44px); aspect-ratio: 1/0.86; overflow:hidden;
  background: radial-gradient(120% 110% at 30% 8%, color-mix(in oklch, var(--teal) 24%, var(--paper)) 0%, var(--paper) 60%); border:1px solid var(--rule);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; }
.lx-show .appicon { width: clamp(110px,16vw,168px); border-radius:23%; filter: drop-shadow(0 20px 44px rgba(40,90,110,.42)); }
.lx-devs { display:flex; gap:18px; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal-ink); }

@media (max-width: 900px){ .spec-body { grid-template-columns:1fr; } .artgrid { grid-template-columns: repeat(2,1fr);} .artgrid .wide{grid-column:span 2;} }