/* ==========================================================================
   about.html — the studio and the person behind it
   Loaded after seidr-v2.css; only page-specific rules live here.
   ========================================================================== */

.section-head .eyebrow + h2 { margin-top: 18px; }

/* the headline already breaks after "hands."; the shared 14ch cap split it into four ragged lines */
.page-hero h1 { max-width: none; }

/* ---------- the lab + profile ---------- */
.about-copy { display: grid; gap: clamp(36px, 5vw, 56px); min-width: 0; }
.about-h2, .prose .about-h2 { font-size: var(--t-h2); color: var(--bone); margin-top: 18px; }
.about-sub { margin-top: 0 !important; }
.about-lede { font-size: var(--t-lead); color: #c1cec9; line-height: 1.6; }

.about-figure { margin: 0; position: relative; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; background: var(--night-2); }
.about-figure img { width: 100%; height: 100%; object-fit: cover; opacity: .88; }
.about-figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(6, 11, 13, .7)); }

.profile { display: grid; gap: 14px; }
.profile-head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.avatar {
  flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-size: 1.6rem; font-weight: 600; color: var(--ink-on-sap);
  background: radial-gradient(circle at 35% 30%, #ffd79a, var(--sap) 55%, var(--sap-deep));
  box-shadow: 0 0 0 4px rgba(243, 183, 95, .12), 0 0 40px -6px rgba(243, 183, 95, .6);
}
.profile-name { font-size: 2rem; }
.profile-role { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); margin-top: 6px; }
.profile-label { font-family: var(--f-mono); font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sap); margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.profile-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* one shared label column, so the Education, Certifications and Stack values start on the same edge */
@media (min-width: 521px) { .profile .facts-list { grid-template-columns: 6.2rem minmax(0, 1fr); } }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ---------- practices ---------- */
/* bottom trimmed to match the gap between "How I work" and the principles */
.practices-section { padding-top: 0; padding-bottom: clamp(24px, 4vw, 60px); }
.practices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.practice {
  --c: var(--sap);
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-l); border: 1px solid var(--line);
  background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 60%), linear-gradient(180deg, var(--moss), var(--night-2));
  transition: border-color .35s;
}
.practice::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) 13%, transparent), transparent 60%); opacity: 0; transition: opacity .35s; }
.practice:hover { border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.practice:hover::after { opacity: 1; }
.practice > * { position: relative; z-index: 1; }
.practice-industrial { --c: var(--sap); }
.practice-embedded { --c: var(--ember); }
.practice-software { --c: var(--aurora); }
.practice-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.practice-top .rune { font-size: 2.6rem; color: var(--c); text-shadow: 0 0 24px color-mix(in srgb, var(--c) 60%, transparent); }
.practice-top .label { color: var(--c); }
.practice h3 { font-size: clamp(1.8rem, 2.4vw, 2.3rem); }
.practice p { color: var(--mist); font-size: .95rem; }
.practice a { color: var(--bone); text-decoration-color: color-mix(in srgb, var(--c) 60%, transparent); }
.practice a:hover { color: var(--c); }
.practice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: .95rem; color: var(--mist); }
.practice-list li { position: relative; padding-left: 20px; }
.practice-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.practice-list a { font-weight: 600; }
.practice .tags { margin-top: auto; padding-top: 6px; }
.practice-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--f-display); font-style: italic; font-size: 1.3rem !important; color: var(--bone) !important; }
@media (max-width: 1000px) { .practices { grid-template-columns: 1fr; } }

/* ---------- how I work ---------- */
.how-section { background: linear-gradient(180deg, transparent, var(--night-2) 18%, var(--night-2) 82%, transparent); }
.how-section .split { align-items: center; }
.pull { margin: 0; position: relative; padding: clamp(28px, 4vw, 52px); border-left: 2px solid var(--sap); }
.pull .rune { font-size: 2.2rem; color: var(--sap); opacity: .8; display: block; margin-bottom: 18px; }
.pull blockquote { margin: 0; }
.pull blockquote p { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 3.6vw, 3.3rem); line-height: 1.08; color: var(--bone); letter-spacing: -.01em; }
.pull figcaption { margin-top: 20px; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }

/* ---------- principles (spotlight cards) ---------- */
/* the "how I work" band already ends in its own padding; without this the two stack into a ~320px void */
.principles-section { padding-top: clamp(24px, 4vw, 60px); }
.principle { min-height: 0; gap: 14px; }
.principle .card-top { align-items: center; }
.principle .card-top .label { color: var(--mist-2); }
.principle p a { color: var(--c); }
.p-real { --c: var(--aurora); }
.p-privacy { --c: var(--frost); }
.p-maint { --c: var(--sap); }
.p-honest { --c: var(--violet); }

/* ---------- CTA ---------- */
.cta-rune { font-size: 2.6rem; color: var(--sap); }