/* =====================================================================
   Tyler Locke — Learning Experience Design Portfolio
   styles.css  ·  v2 "Quiet Authority"
   ---------------------------------------------------------------------
   Visual system: warm paper, book-serif headings + system sans body,
   one restrained deep-teal accent, generous whitespace, hairline rules.
   Editorial and document-like — built to read as credible, not flashy.
   No external fonts, no libraries, no CDN. System stacks only.
   ===================================================================== */

:root {
  /* Surfaces */
  --paper:      #e7eaea;   /* page background — light graphite, cool not cream */
  --card:       #f3f5f5;   /* cards / panels — a step up from the field */
  --card-2:     #eceff0;   /* alternate fill */
  --line:       #ccd2d3;   /* hairline borders */
  --line-soft:  #dbe0e1;   /* faint dividers */

  /* Ink */
  --ink:        #232a2e;   /* headings — graphite ink, 12.0 on the field */
  --body:       #3f484d;   /* body copy — 7.7 on the field */
  --muted:      #59646a;   /* secondary / captions — 5.02 on the field, passes AA */
  --faint:      #8a8f84;   /* very quiet labels */

  /* Accent — deep green. ONE accent across the whole portfolio. Blue belongs
     to Zareli and nowhere else, so the product reads as a separate place. */
  --accent:     #26654a;   /* green, deepened slightly for the cooler ground */
  --accent-deep:#1d5039;
  --accent-tint:#dfeae3;
  --accent-line:#b9d2c3;
  --accent-mid: #408363;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(20,32,38,.04), 0 10px 30px rgba(20,32,38,.05);
  --shadow-sm: 0 1px 2px rgba(20,32,38,.05);

  --maxw: 1580px;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
           Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- Base ----------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 600; line-height: 1.22; margin: 0 0 .5rem; letter-spacing: .002em; }
h1 { font-size: clamp(2rem, 4vw, 2.7rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; font-family: var(--sans); font-weight: 700; color: var(--ink); }
p { margin: 0 0 1rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.eyebrow {
  display: block; font-family: var(--sans);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 14px;
}
.lead { font-size: 1.16rem; line-height: 1.6; color: var(--body); max-width: 62ch; }
.muted { color: var(--muted); }
.section { padding: 8px 0 72px; }
.divider { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

/* ---- Masthead ------------------------------------------------------- */
.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.masthead-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 18px 28px 0;
}
/* center, not baseline: the business card is taller than the name block, and
   baseline alignment left ~62px of dead space under the role line. */
.identity { display: flex; align-items: center; justify-content: space-between; gap: 20px 24px; flex-wrap: wrap; }
.identity .name { font-family: var(--serif); font-size: 1.45rem; color: var(--ink); font-weight: 600; }
.identity .role { font-size: .92rem; color: var(--muted); }
.identity .contact-line { font-size: .88rem; color: var(--muted); }
.identity .contact-line a { color: var(--accent); }

/* ---- Quiet editorial nav ------------------------------------------- */
.nav {
  display: flex; gap: 26px; flex-wrap: wrap;
  margin-top: 18px;
}
.nav button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: .92rem; font-weight: 600;
  color: var(--muted); padding: 12px 0 14px; position: relative;
  white-space: nowrap; transition: color .15s;
}
.nav button:hover { color: var(--ink); }
.nav button.active { color: var(--ink); }
.nav button.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); border-radius: 2px;
}

/* ---- Panels --------------------------------------------------------- */
.panel { display: none; }
.panel.active { display: block; animation: rise .28s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.section-head { margin-bottom: 34px; }
.section-head h1 { margin-bottom: 10px; }

/* ---- Buttons / links ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: .9rem; font-weight: 600;
  padding: 10px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { text-decoration: none; border-color: var(--accent-line); background: var(--accent-tint); color: var(--accent-deep); }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.textlink {
  font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 6px;
}
/* .textlink was written for <a> and never reset the UA button chrome, so
   every one applied to a <button> rendered with a 2px outset border and a
   grey fill — "Tell me what you need", "Clear it", the tab jump links.
   Measured, not guessed: computed border was `2px outset rgb(0,0,0)`. */
button.textlink {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 600; cursor: pointer; text-align: left;
  color: var(--accent);
}
button.textlink:hover { color: var(--accent-deep); text-decoration: underline; }
button.textlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.textlink .arr { transition: transform .15s; }
.textlink:hover { text-decoration: none; color: var(--accent-deep); }
.textlink:hover .arr { transform: translateX(3px); }

/* ---- Home / hero ---------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1.55fr 1fr; gap: 56px; align-items: start; padding-top: 16px; }
.hero h1 { margin-bottom: 6px; }
.hero .role-line { font-size: 1.05rem; color: var(--muted); margin-bottom: 22px; }
.statement {
  font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.45; color: var(--ink); font-style: italic;
  border-left: 2px solid var(--accent); padding-left: 20px; margin: 0 0 22px;
}
.hero p { color: var(--body); }
.hero .btn-row { margin-top: 24px; }

.aside-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow);
}
.aside-card h3 { font-family: var(--sans); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 16px; }
.focus-list { list-style: none; margin: 0; padding: 0; }
.focus-list li { padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: .95rem; color: var(--ink); }
.focus-list li:last-child { border-bottom: 0; }
.focus-list li span { display: block; font-size: .82rem; color: var(--muted); font-weight: 400; }

/* approach row on home */
.approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.approach .item { }
.approach .item .k { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.approach .item h3 { margin-bottom: 6px; }
.approach .item p { font-size: .94rem; color: var(--body); margin: 0; }

/* ---- Case-study cards (Showcase) ----------------------------------- */
.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.case {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 30px 26px;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.case:hover { border-color: var(--accent-line); box-shadow: 0 2px 4px rgba(20,32,38,.05), 0 16px 40px rgba(20,32,38,.07); }
.case .cat {
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 10px;
}
.case h3 { font-size: 1.32rem; margin-bottom: 10px; }
.case .summary { color: var(--body); font-size: .96rem; margin-bottom: 18px; }
.case dl { margin: 0 0 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.case dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 6px 16px; padding: 7px 0; }
.case dl dt { font-family: var(--sans); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; padding-top: 2px; }
.case dl dd { margin: 0; font-size: .92rem; color: var(--ink); }
.case .case-foot { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.case .filetag {
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  background: var(--card-2); border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px;
}

/* ---- Templates: organized library ---------------------------------- */
.lib { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.lib-row {
  display: grid; grid-template-columns: 1.6fr 2fr .9fr auto; gap: 20px;
  align-items: center; padding: 20px 26px; border-bottom: 1px solid var(--line-soft);
}
.lib-row:last-child { border-bottom: 0; }
.lib-row:hover { background: var(--card-2); }
.lib-row.head { background: var(--card-2); }
.lib-row.head span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.lib-row .t-name { font-weight: 700; color: var(--ink); }
.lib-row .t-name small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; font-family: var(--mono); margin-top: 3px; }
.lib-row .t-use { font-size: .92rem; color: var(--body); }
.lib-row .t-fmt { font-size: .82rem; color: var(--muted); font-family: var(--mono); }
.lib-row .t-act { display: flex; gap: 14px; justify-content: flex-end; align-items: center; }

/* ---- Callout / note ------------------------------------------------- */
.note {
  border-left: 3px solid var(--accent); background: var(--accent-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 22px; margin: 22px 0; color: var(--ink);
}
.note strong { color: var(--accent-deep); }

/* ---- AI Lab --------------------------------------------------------- */
.workflow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.workflow .w {
  display: grid; grid-template-columns: 110px 1fr; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line-soft);
}
.workflow .w .wk { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; padding-top: 3px; }
.workflow .w h4 { margin-bottom: 3px; }
.workflow .w p { font-size: .9rem; color: var(--body); margin: 0; }

.prompts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.prompt-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.prompt-card h4 { margin-bottom: 10px; }
.prompt-card .stub {
  font-family: var(--mono); font-size: .82rem; line-height: 1.55; color: var(--body);
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; white-space: pre-wrap; margin: 0 0 12px;
}
.copy-btn { font-size: .82rem; padding: 7px 14px; }
.copy-btn.copied { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- How to Customize ---------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 40px; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 16px; }
.step .n {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--accent-line); background: var(--accent-tint);
  color: var(--accent-deep); font-weight: 700; font-size: .85rem; font-family: var(--sans);
}
.step h4 { margin-bottom: 4px; }
.step p { font-size: .92rem; margin: 0; color: var(--body); }

details.faq { border-bottom: 1px solid var(--line-soft); }
details.faq summary {
  cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--accent); font-size: 1.2rem; line-height: 1; }
details.faq[open] summary::after { content: "\2013"; }
details.faq .inner { padding: 0 0 18px; color: var(--body); font-size: .94rem; max-width: 72ch; }

code.inline { font-family: var(--mono); font-size: .85em; background: var(--card-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; color: var(--accent-deep); }

/* ---- Documents & Contact ------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px; box-shadow: var(--shadow-sm);
}
.card .label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 10px; display: block; }
.card h3 { font-size: 1.12rem; margin-bottom: 8px; }
.card p { font-size: .93rem; color: var(--body); margin-bottom: 16px; }
.card .btn-row { margin-bottom: 0; }

.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.factline { display: grid; grid-template-columns: 90px 1fr; gap: 6px 18px; margin: 4px 0 18px; font-size: .95rem; }
.factline dt { color: var(--muted); font-weight: 600; }
.factline dd { margin: 0; color: var(--ink); }
.interests { list-style: none; margin: 0; padding: 0; }
.interests li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: .95rem; color: var(--ink); }
.interests li:last-child { border-bottom: 0; }

/* ---- Footer --------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding: 26px 0 40px; margin-top: 20px; }
.site-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: .85rem; }

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 36px; }
  .approach { grid-template-columns: 1fr; gap: 22px; }
  .cases { grid-template-columns: 1fr; }
  .workflow { grid-template-columns: 1fr; }
  .prompts { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .lib-row { grid-template-columns: 1fr; gap: 8px; }
  .lib-row.head { display: none; }
  .lib-row .t-act { justify-content: flex-start; }
  .lib-row .t-fmt::before { content: "Format: "; color: var(--faint); }
}
@media (max-width: 520px) {
  .container, .masthead-inner { padding-left: 20px; padding-right: 20px; }
  .case dl > div { grid-template-columns: 1fr; gap: 2px; }
  .case dl dt { padding-top: 8px; }
}

/* ---- Accessibility -------------------------------------------------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ===== Case thumbnails ===== */
.case-thumb{
  display:block; width:100%; height:188px; object-fit:cover; object-position:top center;
  border-radius:10px; border:1px solid var(--line-soft); margin-bottom:18px; background:#ece9e2;
}
@media (max-width:720px){ .case-thumb{ height:160px; } }

/* ===== Impact line ===== */
.impact{
  font-family:var(--sans); font-size:.9rem; color:var(--ink);
  background:#eef3f1; border-left:3px solid var(--accent);
  padding:9px 13px; border-radius:0 7px 7px 0; margin:0 0 18px;
}
.impact strong{ color:var(--accent); }

/* ===== Screenshot gallery ===== */
.shot{ padding:0 !important; overflow:hidden; }
.shot a{ display:block; }
.shot-img{ display:block; width:100%; height:172px; object-fit:cover; object-position:top center; background:#ece9e2; }
.shot .shot-cap{ padding:14px 16px 16px; }
.shot .shot-cap h3{ font-size:1.02rem; margin:0 0 4px; }
.shot .shot-cap a{ font-family:var(--sans); font-size:.84rem; }

/* ===== Currently building (Zareli) ===== */
.building{
  margin-top:30px; border:1px solid var(--accent-line); border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,#f3f6f4 0%,#ffffff 60%);
}
.building .b-top{ display:flex; align-items:center; gap:12px; padding:20px 26px 0; flex-wrap:wrap; }
.building .b-badge{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--accent); padding:5px 11px; border-radius:20px;
}
.building .b-status{ font-family:var(--sans); font-size:.8rem; color:var(--muted); }
.building h3{ font-size:1.5rem; margin:14px 26px 4px; }
.building .b-tag{ color:var(--muted); margin:0 26px 14px; font-size:.96rem; }
.building .b-body{ padding:0 26px 8px; color:var(--body); max-width:74ch; }
.building .b-feats{ list-style:none; margin:14px 26px 24px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; }
.building .b-feats li{ position:relative; padding-left:18px; font-size:.92rem; color:var(--ink); }
.building .b-feats li::before{ content:"›"; position:absolute; left:2px; color:var(--accent); font-weight:700; }
@media (max-width:720px){ .building .b-feats{ grid-template-columns:1fr; } }

/* ===== About ===== */
.about{ display:grid; grid-template-columns:240px 1fr; gap:44px; align-items:start; }
.about-side{ position:sticky; top:24px; }
.avatar{
  width:128px; height:128px; border-radius:50%; background:var(--accent); color:#f7f6f2;
  font-family:var(--serif); font-size:3rem; font-weight:700; display:grid; place-items:center;
  letter-spacing:1px; overflow:hidden;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.stat-big{ margin-top:26px; }
.stat-big .num{ display:block; font-family:var(--serif); font-size:2.7rem; font-weight:700; color:var(--accent); line-height:1; }
.stat-big .lbl{ display:block; font-family:var(--sans); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:7px; }
.tribute{ margin-top:26px; border-left:3px solid var(--accent-line); padding:6px 0 6px 16px; font-style:italic; color:var(--body); font-size:.96rem; }
.tribute .who{ display:block; font-style:normal; font-size:.82rem; color:var(--muted); margin-top:8px; }
.about-body p{ font-size:1.02rem; color:var(--body); line-height:1.6; margin-bottom:18px; max-width:68ch; }
.about-body p:first-child{ font-size:1.12rem; color:var(--ink); }
@media (max-width:760px){ .about{ grid-template-columns:1fr; gap:28px; } .about-side{ position:static; } }

/* ===== AI Toolkit — comparison ===== */
.cmp{ border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:8px; background:var(--card); }
.cmp-row{ display:grid; grid-template-columns:240px 1fr; border-top:1px solid var(--line-soft); }
.cmp-row:first-child{ border-top:none; }
.cmp-row > div{ padding:14px 18px; }
.cmp-row > div:first-child{ font-weight:600; color:var(--ink); background:var(--accent-tint); border-right:1px solid var(--line-soft); }
.cmp-row > div:last-child{ color:var(--body); font-size:.95rem; line-height:1.5; }
.cmp-head > div{ font-family:var(--sans); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; background:var(--faint); }
.cmp-head > div:last-child{ color:var(--muted); }
.cmp-fair > div:first-child{ color:var(--accent-deep); }
.cmp-fair{ background:var(--accent-tint); }
.cmp-fair > div:last-child{ background:var(--accent-tint); }
@media (max-width:680px){
  .cmp-row{ grid-template-columns:1fr; }
  .cmp-row>div:first-child{ border-right:none; border-bottom:1px solid var(--line-soft); }
}

/* ===== Principle callout ===== */
.principle{ margin:26px 0 8px; background:var(--ink); border-radius:14px; padding:24px 28px; }
.principle h3{ font-family:var(--serif); font-size:1.5rem; color:#fff; margin-bottom:8px; }
.principle p{ color:#cdd6d2; max-width:80ch; font-size:1rem; line-height:1.6; }

/* ===== Featured prompt ===== */
.feature-prompt{ border-color:var(--accent-line); box-shadow:0 0 0 1px var(--accent-line) inset, var(--shadow-sm); }
.feature-prompt h4::after{ content:" ★"; color:var(--accent); font-size:.8em; }

/* =====================================================================
   ZARELI — light "marble & signal" reveal page
   ---------------------------------------------------------------------
   ★ EDIT THE ZARELI PALETTE HERE ★  — every colour below flows from
   these variables. Change a value, save, refresh. Nothing else to touch.
   ===================================================================== */
:root{
  /* ★ ZARELI PALETTE — "warm slate" ★
     Lifted out of near-black: a slate you can read comfortably rather than a
     void. Warm-neutral, not navy. ONE accent — cobalt. The secondary voice is
     carried by bone, weight, and hairlines instead of a second hue, which reads
     as considered rather than decorated. */
  --z-bg:        #24272b;   /* warm slate field                       */
  --z-bg-2:      #1d2023;   /* deeper falloff                         */
  --z-panel:     #2d3136;   /* cards / raised surfaces                */
  --z-panel-2:   #282c30;   /* secondary panel wash                   */
  --z-ink:       #f7f4ea;   /* headings — bone                        */
  --z-body:      #c8c3ba;   /* body copy                              */
  --z-muted:     #99938a;   /* labels, captions, meta                 */
  --z-line:      #3e444a;   /* hairlines / borders                    */
  --z-blue:      #6aa8ff;   /* THE accent                             */
  --z-blue-lit:  #9cc6ff;   /* lighter blue                           */
  --z-blue-deep: #3a7fd0;   /* deeper blue                            */
  --z-blue-wash: #24354a;   /* tinted fill                            */
  --z-live:      #7cc47f;   /* "live" status dot                      */
}

.visually-hidden{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

/* Nav marker for the Zareli tab */
.nav-zareli{ position:relative; }
.nav-zareli::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--z-blue); box-shadow:0 0 8px rgba(106,168,255,.75); margin-right:7px; vertical-align:middle; }

/* ---- Whole-page Zareli theme (toggled by JS when the tab is open) ---- */
body.theme-zareli{ background:var(--z-bg); }
body.theme-zareli .masthead,
body.theme-zareli .site-footer,
body.theme-zareli main,
body.theme-zareli .container{ position:relative; z-index:1; }
body.theme-zareli{ background:var(--z-bg); }
body.theme-zareli .masthead{ background:rgba(25,27,29,.90); border-bottom-color:var(--z-line);
  backdrop-filter:saturate(140%) blur(6px); }
body.theme-zareli .identity .name{ color:var(--z-ink); }body.theme-zareli .identity .role{ color:var(--z-muted); }
body.theme-zareli .nav button{ color:var(--z-muted); }
body.theme-zareli .nav button:hover,
body.theme-zareli .nav button.active{ color:var(--z-ink); }
body.theme-zareli .nav button.active::after{ background:var(--z-blue); box-shadow:0 0 10px rgba(106,168,255,.55); }
body.theme-zareli .site-footer{ border-top-color:var(--z-line); }
body.theme-zareli .site-footer .container{ color:var(--z-muted); }

/* ---- Zareli content ---- */
/* The container is glass. The studio render lives on the PAGE behind it
   (body.theme-zareli::before), so it shows in the margins either side and
   reads faintly through the panel itself. */
.zareli{ position:relative; color:var(--z-body); border-radius:20px; padding:26px 34px 44px; margin-top:8px;
  background:linear-gradient(178deg, var(--z-bg) 0%, var(--z-bg-2) 100%);
  border:1px solid var(--z-line); overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.34); }
.zareli > *{ position:relative; z-index:1; }

.z-hero{ position:relative; text-align:center; padding:16px 0 32px; }
/* No glow. A radial bloom behind the hero is the clearest signature of a
   generated dark theme; the field carries the page instead. */
.z-glow{ display:none; }

.z-eyebrow{ position:relative; z-index:1; display:inline-block; font-family:var(--sans);
  letter-spacing:.5em; text-transform:uppercase; font-size:1.1rem; font-weight:800;
  background:linear-gradient(100deg, var(--z-blue-deep) 0%, var(--z-blue) 45%, var(--z-blue-lit) 78%, var(--z-blue-deep) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter:drop-shadow(0 2px 10px rgba(106,168,255,.22));
  margin-bottom:18px; }
.z-mag{ color:var(--z-blue); }

.z-video-wrap{ position:relative; z-index:1; max-width:900px; margin:0 auto; }
.z-video{ width:100%; display:block; border-radius:18px; background:var(--z-panel-2);
  border:1px solid var(--z-line);
  box-shadow:0 26px 70px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.3); }
.z-replay{ position:absolute; right:14px; bottom:14px; appearance:none; cursor:pointer;
  font-family:var(--sans); font-size:.78rem; font-weight:600; color:var(--z-ink);
  background:rgba(17,29,49,.86); border:1px solid var(--z-line); border-radius:30px;
  padding:7px 14px; backdrop-filter:blur(5px); transition:background .15s, border-color .15s, color .15s;
  box-shadow:0 2px 10px rgba(15,28,49,.10); }
.z-replay:hover{ background:var(--z-blue); border-color:var(--z-blue); color:#fff; }

.z-tagline{ position:relative; z-index:1; max-width:62ch; margin:24px auto 16px;
  font-size:1.18rem; line-height:1.55; color:var(--z-body); }
.z-tagline em{ color:var(--z-ink); font-style:italic; }
.z-tagline strong{ color:var(--z-ink); font-weight:700; }

.z-status{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:.8rem; color:var(--z-body); background:var(--z-panel);
  border:1px solid var(--z-line); padding:7px 15px; border-radius:30px;
  box-shadow:0 2px 8px rgba(15,28,49,.06); }
.z-dot{ width:8px; height:8px; border-radius:50%; background:var(--z-live);
  box-shadow:0 0 0 3px rgba(15,157,88,.16); }

.z-block{ margin-top:46px; }
.z-h2{ font-family:var(--serif); font-size:1.72rem; color:var(--z-ink); margin-bottom:12px; }
.z-lead{ color:var(--z-body); max-width:76ch; font-size:1.05rem; line-height:1.68; }
.z-lead strong{ color:var(--z-ink); }
.z-lead em{ color:var(--z-blue-deep); font-style:italic; }

.z-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px; }
.z-card{ background:var(--z-panel-2); border:1px solid var(--z-line); border-radius:15px; padding:20px 22px;
  box-shadow:0 6px 20px rgba(0,0,0,.24); transition:transform .16s, box-shadow .16s, border-color .16s; }
.z-card:hover{ border-color:var(--z-blue-deep); }
.z-card:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.11); }
.z-card .k{ font-family:var(--sans); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--z-blue); font-weight:700; }
.z-card h4{ color:var(--z-ink); margin:6px 0 6px; font-size:1.06rem; }
.z-card p{ color:var(--z-body); font-size:.95rem; line-height:1.58; }

/* Stack chips */
.z-stack{ display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.z-chip{ font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--z-blue-lit);
  background:var(--z-blue-wash); border:1px solid var(--z-blue-deep); border-radius:30px; padding:7px 14px; }

.z-road{ display:grid; gap:12px; margin-top:20px; }
.z-step{ display:grid; grid-template-columns:130px 1fr; gap:20px; align-items:start;
  border-left:2px solid var(--z-blue); padding:10px 0 10px 22px; }
.z-step .when{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.07em; font-size:.74rem;
  color:var(--z-blue); font-weight:700; padding-top:3px; }
.z-step h4{ color:var(--z-ink); margin-bottom:4px; }
.z-step p{ color:var(--z-body); font-size:.96rem; line-height:1.58; }

.z-orchestra{ margin-top:46px; border-radius:20px; padding:32px 34px;
  background:linear-gradient(135deg, var(--z-panel) 0%, var(--z-blue-wash) 100%);
  border:1px solid var(--z-blue-deep); box-shadow:0 10px 34px rgba(0,0,0,.30); }
.z-orchestra .z-eyebrow{ margin-bottom:10px; font-size:.95rem; }

.z-ident{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
.z-ident figure{ margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--z-line); }
.z-ident img{ width:100%; display:block; }

/* Closing block: the studio render sits behind it as a faint wash rather than a
   third full-size photo. Light, so it belongs to the same field as the video. */
.z-close{ position:relative; text-align:center; margin:56px 0 14px;
  padding:52px 26px 44px; border-radius:20px; overflow:hidden;
  border:1px solid var(--z-line); background:var(--z-panel-2); }
.z-close::before{
  content:""; position:absolute; inset:-14% 0 -14% 0;
  background:url("../assets/zareli/zareli-studio.jpg") center 40% / cover no-repeat;
  opacity:.34; will-change:transform; pointer-events:none;
}
.z-close-line{ font-family:var(--serif); font-size:clamp(1.05rem,2vw,1.32rem);
  color:var(--z-ink); max-width:56ch; margin:0 auto 18px; line-height:1.42; }
.z-btn{ background:var(--z-blue); color:#fff; border:0; box-shadow:0 8px 26px rgba(106,168,255,.32); }
.z-btn:hover{ background:var(--z-blue-deep); color:#fff; }

/* ---------- Motion: staged entrances + parallax ---------- */
/* Content is visible by DEFAULT. The hidden state is only applied once JS has
   confirmed an IntersectionObserver exists to reveal it again (.z-anim on <html>).
   Hiding content in CSS and revealing it with JS means any script failure leaves
   the page permanently blank — which is exactly what a full-page screenshot
   caught: no scroll, no observer, no content. */
.z-anim .z-rise{ opacity:0; transform:translateY(22px); }
.z-anim .z-rise.z-in{ opacity:1; transform:none;
  transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1); }
.z-glow{ will-change:transform; }
@media (prefers-reduced-motion: reduce){
  .z-anim .z-rise{ opacity:1 !important; transform:none !important; }
  .z-glow{ transform:translateX(-50%) !important; }
}

/* =====================================================================
   THE REVEAL — the product itself, annotated like a cutaway
   ===================================================================== */
.z-reveal{ margin:56px 0 0; }
.z-reveal-head{ text-align:center; max-width:64ch; margin:0 auto 26px; }
.z-reveal-eyebrow{ display:inline-block; font-family:var(--sans); font-size:.7rem; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase; color:var(--z-blue); margin-bottom:10px; }
.z-reveal-head h2{ font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.1rem); color:var(--z-ink); margin:0 0 10px; }
.z-reveal-head p{ color:var(--z-body); font-size:1.02rem; line-height:1.6; margin:0; }
.z-reveal-hint{ appearance:none; border:0; background:none; cursor:default;
  font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--z-blue); padding:0; }

.z-shot{ position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--z-line);
  box-shadow:0 16px 44px rgba(0,0,0,.42); }
.z-shot img{ width:100%; display:block; }

/* Numbered pins. Pulse draws the eye without shouting. */
.z-pin{ position:absolute; transform:translate(-50%,-50%); appearance:none; cursor:pointer;
  width:30px; height:30px; border-radius:50%; padding:0;
  background:var(--z-blue); border:2px solid #191b1d; color:#0e1013;
  font-family:var(--sans); font-size:.82rem; font-weight:700; line-height:1;
  box-shadow:0 3px 12px rgba(9,20,44,.4); transition:transform .16s, background .16s; }
.z-pin span{ display:block; transform:translateY(.5px); }
.z-pin::after{ content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--z-blue); opacity:.45; animation:zpulse 2.6s ease-out infinite; }
.z-pin:hover{ transform:translate(-50%,-50%) scale(1.14); }
.z-pin.active{ background:var(--z-blue-deep); transform:translate(-50%,-50%) scale(1.14); }
.z-pin.active::after{ animation:none; opacity:.85; border-color:var(--z-blue-deep); }
/* Clicked = locked open. Orange, so it reads as "held" rather than "hovered". */
.z-pin.locked{ background:#e2760f; }
.z-pin.locked::after{ animation:none; opacity:.9; border-color:#e2760f; }
.z-pin.locked.active{ background:#e2760f; }
.z-pin:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
@keyframes zpulse{ 0%{transform:scale(.9);opacity:.55} 70%{transform:scale(1.5);opacity:0} 100%{opacity:0} }

/* Region outline — shows WHAT a pin is pointing at, since the pin sits beside it */
.z-region{ position:absolute; border:2px solid var(--z-blue); border-radius:5px;
  background:rgba(77,149,255,.14); box-shadow:0 0 0 9999px rgba(3,7,14,.62);
  opacity:0; pointer-events:none; transition:opacity .2s, left .2s, top .2s, width .2s, height .2s; }
.z-region.on{ opacity:1; }

/* Positional popover — appears beside the pin, flips to stay inside the image */
.z-pop{ position:absolute; width:min(320px,68%); z-index:5; pointer-events:none;
  background:var(--z-panel); border:1px solid var(--z-blue-deep); border-radius:13px;
  padding:15px 17px; box-shadow:0 16px 44px rgba(0,0,0,.55);
  opacity:0; transform:translateY(4px); transition:opacity .18s, transform .18s; }
.z-pop.on{ opacity:1; transform:none; }
.z-pop h4{ margin:0 0 6px; color:var(--z-ink); font-size:1rem; }
.z-pop p{ margin:0; color:var(--z-body); font-size:.9rem; line-height:1.58; }

/* Scope band — honest about today vs. the roadmap, right under the product shot */
.z-scope{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px 22px;
  margin:22px auto 0; max-width:74ch; padding:16px 22px;
  background:var(--z-blue-wash); border:1px solid var(--z-blue-deep); border-radius:14px; text-align:center; }
.z-scope > div{ display:flex; flex-direction:column; gap:3px; }
.z-scope-k{ font-family:var(--sans); font-size:.66rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--z-blue); }
.z-scope strong{ color:var(--z-blue-lit); font-size:1rem; font-weight:700; }
.z-scope-arrow{ color:var(--z-blue); font-size:1.2rem; }
@media (max-width:620px){ .z-scope-arrow{ transform:rotate(90deg); } }

.z-shot-note{ text-align:center; font-size:.84rem; color:var(--z-muted); margin:16px 0 0; }

@media (max-width:680px){
  .z-reveal{ margin-top:38px; }
  .z-pin{ width:26px; height:26px; font-size:.74rem; }
  /* No hover on touch: the popover is tap-driven and parks at the foot of the image
     so it never covers the region it is describing. */
  .z-pop{ width:calc(100% - 20px); left:10px !important; top:auto !important;
    bottom:10px; padding:13px 15px; }
  .z-pop h4{ font-size:.94rem; }
  .z-pop p{ font-size:.85rem; }
}
@media (prefers-reduced-motion: reduce){
  .z-pin::after{ animation:none; }
  .z-pin:hover, .z-pin.active{ transform:translate(-50%,-50%); }
}

/* ---------- Sheet-tab sub-navigation (the signature element) ----------
   Styled as workbook sheet tabs: the reader is inside a file, not on a page. */
.z-sheets{ display:flex; flex-wrap:wrap; gap:3px; margin:44px 0 0; padding:0 2px;
  border-bottom:2px solid var(--z-blue); }
/* margin-bottom:-2px pulls each tab down so its own bottom border lands exactly on the
   container rule. Inactive = transparent (rule shows through). Active = panel-white,
   which punches a hole in the rule so the tab merges into the pane below it. */
.z-sheet{ appearance:none; cursor:pointer; font-family:var(--sans); font-size:.88rem; font-weight:600;
  color:var(--z-body); background:transparent;
  border:2px solid transparent; border-radius:10px 10px 0 0;
  padding:11px 18px 10px; margin-bottom:-2px;
  transition:background .15s, color .15s; }
.z-sheet:hover{ background:rgba(77,149,255,.10); color:var(--z-ink); }
.z-sheet.active{ background:var(--z-panel); color:var(--z-blue-lit);
  border-color:var(--z-blue); border-bottom-color:var(--z-panel); }
.z-sheet:focus-visible{ outline:2px solid var(--z-blue); outline-offset:-4px; }

.z-panes{ background:var(--z-panel); border:1px solid var(--z-line); border-top:0;
  border-radius:0 0 18px 18px; padding:30px 32px 36px; margin-top:0;
  box-shadow:0 14px 40px rgba(0,0,0,.30); }
.z-pane{ display:none; }
.z-pane.active{ display:block; animation:zfade .28s ease both; }
@keyframes zfade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
.z-pane > .z-h2:first-child{ margin-top:0; }

/* ---------- "What it does" — sequenced, because the order is the claim ---------- */
.z-does{ display:grid; gap:4px; margin-top:22px; }
.z-do{ display:grid; grid-template-columns:26px 1fr; gap:16px; align-items:start;
  padding:18px 0 18px 4px; border-top:1px solid var(--z-line); }
.z-do:first-child{ border-top:0; }
.z-do-mark{ color:var(--z-blue); font-size:.7rem; line-height:1.9; }
.z-do h4{ color:var(--z-ink); font-size:1.08rem; margin-bottom:6px; }
.z-do p{ color:var(--z-body); font-size:.99rem; line-height:1.62; margin:0 0 8px; }
.z-note{ color:var(--z-muted); font-size:.9rem !important; border-left:2px solid var(--z-blue-wash);
  padding-left:12px; margin-bottom:0 !important; }

/* ---------- Pipeline: deterministic vs model ---------- */
.z-pipe{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.z-pipe li{ display:flex; align-items:center; gap:8px; }
.z-pipe li:not(:last-child)::after{ content:"\2192"; color:#b8c6dd; font-size:1rem; }
.z-node{ appearance:none; cursor:pointer; text-align:left; font-family:var(--sans);
  font-size:.9rem; font-weight:600; color:var(--z-ink); background:var(--z-panel-2);
  border:1px solid var(--z-line); border-radius:11px; padding:10px 14px; min-width:132px;
  transition:border-color .15s, background .15s, transform .12s, box-shadow .15s; }
.z-node:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.09); }
.z-node:focus-visible{ outline:2px solid var(--z-blue); outline-offset:2px; }
.z-node-k{ display:block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; margin-bottom:4px; }
.z-node.det .z-node-k{ color:var(--z-blue); }
.z-node.mod{ border-style:dashed; }
.z-node.mod .z-node-k{ color:var(--z-muted); }
.z-node.det.active{ background:var(--z-blue-wash); border-color:var(--z-blue); color:#fff; }
.z-node.mod.active{ background:var(--z-panel-2); border-color:var(--z-muted); border-style:solid; }
.z-stage{ margin-top:18px; background:var(--z-panel-2); border:1px solid var(--z-line);
  border-radius:14px; padding:20px 22px; min-height:96px;
  overflow:hidden; transition:height .18s ease; }
.z-stage h4{ color:var(--z-ink); margin-bottom:6px; }
.z-stage p{ color:var(--z-body); font-size:.98rem; line-height:1.62; margin:0 0 8px; }
.z-stage p:last-child{ margin-bottom:0; }
.z-stage .z-verdict{ display:inline-block; font-family:var(--sans); font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; font-weight:700; border-radius:20px;
  padding:4px 11px; margin-bottom:10px; }
.z-stage .z-verdict.det{ color:var(--z-blue-lit); background:var(--z-blue-wash); }
.z-stage .z-verdict.mod{ color:var(--z-ink); background:#3a3f36; }

/* ---------- Hero thesis: the argument, before the evidence ---------- */
.z-hero-thesis{ position:relative; z-index:1; margin:26px auto 6px; padding:0; max-width:62ch; border:0; }
.z-hero-thesis p{ font-family:var(--serif); font-size:clamp(1.24rem,2.5vw,1.72rem); line-height:1.3;
  color:var(--z-ink); margin:0; }
.z-hero-thesis p em{ color:var(--z-blue-deep); font-style:italic; }
@media (max-width:680px){ .z-hero-thesis{ margin-top:20px; } }

/* ---------- Thesis pull-quote ---------- */
.z-thesis{ margin:0 0 22px; padding:26px 0 26px 26px; border-left:3px solid var(--z-blue); }
.z-thesis p{ font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,1.75rem); line-height:1.34;
  color:var(--z-ink); margin:0; }
.z-thesis p em{ color:var(--z-blue-deep); font-style:italic; }

/* ---------- Roadmap accordion ---------- */
.z-step{ display:block; border-left:2px solid var(--z-line); padding:0; transition:border-color .18s; }
.z-step.z-open{ border-left-color:var(--z-blue); }
.z-step-head{ appearance:none; cursor:pointer; width:100%; text-align:left; background:none;
  border:0; padding:14px 0 14px 22px; display:flex; align-items:baseline; gap:18px; font-family:inherit; }
.z-step-head:focus-visible{ outline:2px solid var(--z-blue); outline-offset:2px; }
.z-step-head .when{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.07em;
  font-size:.72rem; font-weight:700; color:var(--z-blue); flex:0 0 96px; }
.z-step-head h4{ margin:0; color:var(--z-ink); font-size:1.04rem; }
.z-step-body{ max-height:0; overflow:hidden; transition:max-height .3s ease, opacity .25s;
  opacity:0; padding-left:136px; }
.z-step.z-open .z-step-body{ max-height:320px; opacity:1; padding-bottom:16px; }
.z-step-body p{ color:var(--z-body); font-size:.97rem; line-height:1.62; margin:0; }

/* ---------- Demo badge ---------- */
.z-demo-badge{ display:inline-block; font-family:var(--sans); font-size:.76rem; font-weight:600;
  color:var(--z-ink); background:var(--z-panel-2); border:1px solid #4a411f; border-radius:20px;
  padding:7px 14px; margin:0 0 18px; }

/* The single-row tab strip wraps at ~760px. Once it wraps, the punch-through rule
   is impossible — an active tab on row 1 cannot meet a rule sitting under row 2.
   So below 780px drop the tab-strip metaphor entirely and use pills over a
   detached pane. Measured, not guessed: the strip wraps at 760px. */
@media (max-width:780px){
  .z-sheets{ gap:6px; border-bottom:0; padding:0; }
  .z-sheet{ flex:1 1 auto; margin-bottom:0; padding:9px 13px;
    border-radius:9px; border:1px solid var(--z-line); background:#eceee5; }
  .z-sheet:hover{ background:#e3e6da; }
  .z-sheet.active{ border-color:var(--z-blue); border-bottom-color:var(--z-blue);
    background:var(--z-panel); box-shadow:0 2px 10px rgba(106,168,255,.16); }
  .z-panes{ border-top:1px solid var(--z-line); border-radius:16px; margin-top:12px; }
}

@media (prefers-reduced-motion: reduce){
  .z-pane.active{ animation:none; }
  .z-step-body{ transition:none; }
  .z-node:hover{ transform:none; }
}

@media (max-width:680px){
  .z-sheet{ font-size:.78rem; }
  .z-panes{ padding:22px 16px 28px; }
  .z-pipe{ flex-direction:column; align-items:stretch; }
  .z-pipe li{ flex-direction:column; align-items:stretch; }
  .z-pipe li:not(:last-child)::after{ content:"\2193"; text-align:center; padding:2px 0; }
  .z-node{ width:100%; }
  .z-step-body{ padding-left:22px; }
  .z-step.z-open .z-step-body{ max-height:420px; }
  .z-do{ grid-template-columns:16px 1fr; gap:10px; }
}

@media (max-width:680px){
  .zareli{ padding:20px 16px 34px; }
  .z-cards{ grid-template-columns:1fr; }
  .z-ident{ grid-template-columns:1fr; }
  .z-step{ grid-template-columns:1fr; gap:4px; }
  .z-eyebrow{ letter-spacing:.3em; font-size:.9rem; }
}

/* =====================================================================
   MOBILE / TABLET nav — collapsing menu (desktop view is unchanged)
   ===================================================================== */
.nav-toggle{ display:none; }   /* hidden on laptop/desktop */

@media (max-width:900px){
  .masthead-inner{ padding-top:18px; }
  /* tidy the contact block on small screens */
  .identity > div:last-child{ text-align:left !important; }

  .nav-toggle{
    display:inline-flex; align-items:center; gap:11px; margin-top:16px;
    appearance:none; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:.95rem;
    color:var(--ink); background:var(--card); border:1px solid var(--line);
    border-radius:10px; padding:11px 16px;
  }
  .nav-toggle-icon{ position:relative; display:inline-block; width:18px; height:2px; background:currentColor; border-radius:2px; transition:background .15s; }
  .nav-toggle-icon::before, .nav-toggle-icon::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease, top .2s ease; }
  .nav-toggle-icon::before{ top:-6px; }
  .nav-toggle-icon::after{ top:6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon{ background:transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before{ top:0; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after{ top:0; transform:rotate(-45deg); }

  .nav{
    display:none; flex-direction:column; gap:0; overflow:visible;
    margin-top:12px; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--card);
  }
  .nav.open{ display:flex; }
  .nav button{
    width:100%; text-align:left; white-space:normal;
    padding:13px 14px; border-radius:8px; font-size:1rem;
  }
  .nav button:hover{ color:var(--ink); background:var(--accent-tint); }
  .nav button.active{ color:var(--ink); background:var(--accent-tint); }
  .nav button.active::after{ display:none; }   /* no underline bar in the vertical menu */
  .nav-zareli::before{ vertical-align:baseline; }

  /* Dark (Zareli) theme — menu + toggle */
  body.theme-zareli .nav-toggle{ color:var(--z-ink); background:var(--z-panel); border-color:var(--z-line); }
  body.theme-zareli .nav{ background:var(--z-panel); border-color:var(--z-line); }
  body.theme-zareli .nav button:hover,
  body.theme-zareli .nav button.active{ color:var(--z-blue-lit); background:rgba(77,149,255,.14); }
}

/* ===== Templates accordion ===== */
.tmpl-list{ margin-top:6px; }
.tmpl{ border:1px solid var(--line); border-radius:12px; margin-bottom:12px; background:var(--card); overflow:hidden; }
.tmpl[open]{ box-shadow:var(--shadow-sm); border-color:var(--accent-line); }
.tmpl summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; }
.tmpl summary::-webkit-details-marker{ display:none; }
.tmpl summary:hover .tmpl-name{ color:var(--accent-deep); }
.tmpl-headwrap{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tmpl-name{ font-family:var(--serif); font-size:1.12rem; color:var(--ink); font-weight:600; transition:color .15s; }
.tmpl-file{ font-family:var(--mono); font-size:.74rem; color:var(--muted); }
.tmpl-meta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.tmpl-fmt{ font-family:var(--sans); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-deep); background:var(--accent-tint); padding:4px 10px; border-radius:20px; white-space:nowrap; }
.tmpl-chev{ width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s ease; }
.tmpl[open] .tmpl-chev{ transform:rotate(-135deg); }
.tmpl-body{ padding:4px 20px 20px; border-top:1px solid var(--line-soft); }
.tmpl-use{ color:var(--body); margin:14px 0; }
.tmpl-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.btn-sm{ padding:8px 15px; font-size:.85rem; }
.tmpl-edit h4{ font-size:.95rem; margin-bottom:8px; color:var(--ink); }
.tmpl-steps{ margin:0; padding-left:20px; color:var(--body); font-size:.94rem; line-height:1.55; }
.tmpl-steps li{ margin-bottom:7px; }
.tmpl-note{ color:var(--body); font-size:.94rem; line-height:1.6; max-width:76ch; margin:0; }
@media (max-width:520px){
  .tmpl summary{ padding:14px 16px; }
  .tmpl-body{ padding:4px 16px 18px; }
  .tmpl-actions .btn-sm{ flex:1 1 auto; text-align:center; }
}

/* ===== Selected Work — master/detail ===== */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px; }
.work-card{ text-align:left; cursor:pointer; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; padding:0; font:inherit; color:inherit; transition:transform .15s, box-shadow .15s, border-color .15s; }
.work-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--accent-line); }
.work-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.work-card-thumb{ width:100%; height:172px; object-fit:cover; object-position:top center; background:#ece9e2; border-bottom:1px solid var(--line-soft); }
.work-card-body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.work-card-cat{ font-family:var(--sans); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:6px; }
.work-card-title{ font-size:1.12rem; margin-bottom:8px; line-height:1.25; }
.work-card-blurb{ font-size:.9rem; color:var(--muted); line-height:1.5; margin-bottom:14px; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.work-card-cta{ font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--accent); }
.work-maint{ margin-top:26px; font-size:.92rem; }
@media (max-width:980px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .work-grid{ grid-template-columns:1fr; } }

/* detail */
.work-back{ appearance:none; cursor:pointer; background:none; border:0; font-family:var(--sans); font-weight:600; font-size:.9rem; color:var(--accent); padding:6px 0; margin-bottom:18px; }
.work-back:hover{ text-decoration:underline; }
.work-detail-head{ display:grid; grid-template-columns:minmax(0,440px) 1fr; gap:34px; align-items:start; margin-bottom:30px; }
.work-detail-thumb{ width:100%; border-radius:14px; border:1px solid var(--line-soft); display:block; }
.work-detail-title{ font-size:2rem; margin:6px 0 12px; line-height:1.12; }
.work-detail-blurb{ color:var(--body); font-size:1.02rem; line-height:1.6; margin-bottom:18px; max-width:60ch; }
.work-detail-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:36px; }
.work-detail-case dl{ margin:0; }
.work-detail-case dl > div{ display:grid; grid-template-columns:130px 1fr; gap:14px; padding:11px 0; border-top:1px solid var(--line-soft); }
.work-detail-case dl > div:first-child{ border-top:0; }
.work-detail-case dt{ font-family:var(--sans); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding-top:2px; }
.work-detail-case dd{ margin:0; color:var(--body); font-size:.96rem; line-height:1.55; }
.work-detail-edit{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px 24px; align-self:start; }
.work-detail-edit h4{ margin-bottom:12px; }
@media (max-width:820px){
  .work-detail-head{ grid-template-columns:1fr; gap:20px; }
  .work-detail-grid{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:520px){ .work-detail-case dl > div{ grid-template-columns:1fr; gap:3px; } }

/* ---- Business card (header right side) ---------------------------------- */
.biz-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 10px 14px 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
  min-width: 224px;
  transition: box-shadow .18s, transform .18s;
}
.biz-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.biz-top {
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}
.biz-top a { color: var(--accent); }
.biz-divider {
  height: 1px;
  background: var(--line-soft);
  margin: 7px 0 5px;
}
.biz-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 0 4px;
  text-decoration: none;
  border-radius: 7px;
  transition: background .14s;
}
.biz-row:hover { background: var(--bg-subtle, #f5f4f0); }
.biz-row-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}
.biz-sep {
  font-size: .72rem;
  color: var(--muted);
  opacity: .45;
  user-select: none;
}
.biz-email {
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: .01em;
}
.biz-email:hover { text-decoration: underline; }
.biz-contact-label {
  font-size: .72rem;
  color: var(--muted);
  opacity: .65;
  user-select: none;
}
.biz-tag {

  font-size: .72rem;
  font-style: italic;
  color: var(--muted);
  letter-spacing: .01em;
}
.biz-url {
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .01em;
}
body.theme-zareli .biz-card {
  background: var(--z-panel);
  border: 1px solid var(--z-line);
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
  position: relative;
  transition: box-shadow .22s, transform .18s;
}
body.theme-zareli .biz-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--z-blue-lit), var(--z-blue), var(--z-blue-deep), #93a8c4);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
body.theme-zareli .biz-card:hover::before { opacity: 1; }
body.theme-zareli .biz-card:hover {
  box-shadow: 0 0 26px rgba(106,168,255,.16), 0 10px 32px rgba(0,0,0,.14);
  transform: translateY(-1px);
}
body.theme-zareli .biz-top { color: var(--z-muted); }
body.theme-zareli .biz-card:hover { box-shadow:0 0 26px rgba(77,149,255,.22), 0 10px 32px rgba(0,0,0,.4); }
body.theme-zareli .biz-top a { color: var(--z-blue); }
body.theme-zareli .biz-divider { background: var(--z-line); }
body.theme-zareli .biz-tag { color: var(--z-body); }
body.theme-zareli .biz-url { color: var(--z-blue); }
body.theme-zareli .biz-email { color: var(--z-blue); }
body.theme-zareli .biz-sep { color: #a9b8cf; }
body.theme-zareli .biz-contact-label { color: var(--z-ink); opacity: 1; }
body.theme-zareli .biz-url, body.theme-zareli .biz-email, body.theme-zareli .biz-top a { color: var(--z-blue-lit); }
body.theme-zareli .biz-row:hover { background: rgba(77,149,255,.10); }
@media (max-width: 600px) {
  .biz-card { min-width: unset; width: 100%; }
  .biz-row { align-items: flex-start; }
  .biz-top { text-align: center; }
}


/* =====================================================================
   OVERVIEW — "currently shipping" feature band
   Puts the strongest asset on the landing tab instead of hiding it
   behind a nav click.
   ===================================================================== */
.home-feature{
  display:grid; grid-template-columns:1fr 1.05fr; gap:0; align-items:stretch;
  margin:48px 0 8px; border:1px solid var(--line, var(--line)); border-radius:18px;
  overflow:hidden; background:var(--card-2);
  box-shadow:0 12px 36px rgba(20,26,38,.07);
}
.home-feature-body{ padding:32px 34px; display:flex; flex-direction:column; justify-content:center; }
.home-feature-k{
  display:inline-block; width:fit-content; font-family:var(--sans);
  font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-tint); border:1px solid var(--accent-line);
  border-radius:20px; padding:5px 12px; margin-bottom:14px;
}
.home-feature-body h2{ margin:0 0 10px; font-size:1.42rem; line-height:1.26; }
.home-feature-body p{ margin:0 0 20px; color:var(--muted, var(--muted)); line-height:1.62; font-size:.98rem; }
.home-feature-body .btn{ width:fit-content; }
.home-feature-shot{ position:relative; overflow:hidden; background:#1e2a24; min-height:280px; }
.home-feature-shot img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:left top;
}
@media (max-width:820px){
  .home-feature{ grid-template-columns:1fr; }
  .home-feature-shot{ min-height:210px; order:-1; }
  .home-feature-body{ padding:26px 22px; }
  .home-feature-body h2{ font-size:1.22rem; }
}
@media (max-width:680px){ .z-close{ padding:40px 18px 34px; } }

/* Trace exhibit — evidence sitting directly under the claim it supports */
.z-trace{ margin:18px 0 0; max-width:520px; }
.z-trace img{
  width:100%; display:block; border-radius:13px;
  border:1px solid var(--z-line);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.z-trace figcaption{
  margin-top:11px; font-size:.87rem; line-height:1.55; color:var(--z-muted);
}
.z-trace figcaption strong{ color:var(--z-ink); }
@media (max-width:680px){ .z-trace{ max-width:100%; } }

/* =====================================================================
   SELECTED WORK — build & verification standard
   The engineering discipline behind the 21 files. Sits above the grid
   because for technical roles it matters more than any single tool.
   ===================================================================== */
.build-std{
  margin:0 0 46px; padding:28px 32px 26px;
  background:var(--card-2); border:1px solid var(--line, var(--line));
  border-left:3px solid var(--accent); border-radius:14px;
}
.build-std-head h2{ margin:0 0 8px; font-size:1.24rem; }
.build-std-k{
  display:inline-block; font-family:var(--sans); font-size:.65rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin-bottom:9px;
}
.build-std-head p{ margin:0 0 18px; color:var(--muted, var(--muted)); max-width:80ch; line-height:1.6; }
.build-std-list{ margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.build-std-list li{
  position:relative; padding-left:26px; line-height:1.6;
  color:var(--muted, var(--muted)); font-size:.96rem; max-width:88ch;
}
.build-std-list li::before{
  content:"\2713"; position:absolute; left:0; top:0;
  color:var(--accent); font-weight:700; font-size:.95rem;
}
.build-std-list strong{ color:var(--ink, var(--ink)); }
.build-std-note{
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line, var(--line));
  font-size:.94rem; color:var(--muted, var(--muted)); font-style:italic; max-width:80ch;
}
@media (max-width:640px){
  .build-std{ padding:22px 18px; }
  .build-std-head h2{ font-size:1.1rem; }
}

/* Constitution pull-quotes — the operative articles, on the Principle pane */
.z-creed{ display:grid; gap:14px; margin-top:20px; }
.z-creed blockquote{
  margin:0; padding:18px 22px; border-left:3px solid var(--z-blue);
  background:var(--z-panel-2); border-radius:0 13px 13px 0;
}
.z-creed blockquote p{
  margin:0 0 9px; font-family:var(--serif); font-size:1.06rem; line-height:1.5;
  color:var(--z-ink);
}
.z-creed cite{
  font-family:var(--sans); font-style:normal; font-size:.7rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--z-blue);
}
.z-creed-closer{
  margin:26px 0 0; padding-top:20px; border-top:1px solid var(--z-line);
  font-family:var(--serif); font-size:clamp(1.02rem,2vw,1.2rem); line-height:1.5;
  color:var(--z-blue-deep); text-align:center;
}
@media (max-width:680px){ .z-creed blockquote{ padding:15px 17px; } .z-creed blockquote p{ font-size:.99rem; } }
.z-trace-wide{ max-width:620px; margin-top:22px; }

/* =====================================================================
   OVERVIEW — "What's here" site map
   Answers "where is everything?" before a visitor has to hunt the nav.
   ===================================================================== */
.site-map{ margin:52px 0 8px; }
.site-map h2{ margin:0 0 4px; font-size:1.3rem; }
.site-map-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(258px,1fr));
  gap:16px; margin-top:20px;
}
.map-card{
  appearance:none; cursor:pointer; text-align:left; font-family:inherit;
  background:var(--card-2); border:1px solid var(--line,var(--line)); border-radius:15px;
  padding:22px 22px 18px; display:flex; flex-direction:column; gap:7px;
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.map-card:hover{
  transform:translateY(-2px); border-color:var(--accent-line);
  box-shadow:0 14px 34px rgba(20,26,38,.10);
}
.map-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.map-n{
  font-family:var(--sans); font-size:.7rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-tint);
  border:1px solid var(--accent-line); border-radius:20px; padding:3px 10px; width:fit-content;
}
.map-card h3{ margin:4px 0 0; font-size:1.08rem; }
.map-card p{ margin:0; font-size:.93rem; line-height:1.56; color:var(--muted,var(--muted)); flex:1; }
.map-go{
  font-family:var(--sans); font-size:.85rem; font-weight:700; color:var(--accent); margin-top:6px;
}
.map-card-feature{ background:linear-gradient(160deg,var(--card-2) 0%,var(--accent-tint) 100%); border-color:var(--accent-line); }

/* Resume & Contact — single destination layout */
.contact-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:22px; align-items:start; }
.contact-card{
  background:var(--card-2); border:1px solid var(--line,var(--line));
  border-radius:15px; padding:26px 28px;
}
.contact-dl{ margin:0 0 18px; display:grid; gap:12px; }
.contact-dl > div{ display:grid; grid-template-columns:130px 1fr; gap:12px; align-items:baseline; }
.contact-dl dt{
  font-family:var(--sans); font-size:.68rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted,var(--muted)); margin:0;
}
.contact-dl dd{ margin:0; color:var(--ink,var(--ink)); font-size:1rem; }
.contact-note{
  margin:0 0 20px; padding-top:16px; border-top:1px solid var(--line,var(--line));
  color:var(--muted,var(--muted)); line-height:1.62; font-size:.96rem;
}
.contact-live{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line,var(--line));
  font-size:.92rem; color:var(--muted,var(--muted)); display:flex; gap:9px; flex-wrap:wrap;
}
.contact-live .sep{ opacity:.5 }
@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-dl > div{ grid-template-columns:110px 1fr; }
}

/* =====================================================================
   SELECTED WORK — filter + search
   Replaces stacked group sections, which tiled horizontally inside the
   grid container and could not scale past a couple of dozen items.
   ===================================================================== */
.work-controls{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin:22px 0 14px;
}
/* Flex/grid children default to min-width:auto, so any nowrap horizontal
   scroller inside one will push its parent wider than the viewport instead of
   scrolling. Every such scroller on this site needs this. */
.work-controls > *{ min-width:0; }
.work-filters{ min-width:0; max-width:100%; }
.work-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.work-filter{
  appearance:none; cursor:pointer; font-family:var(--sans); font-size:.87rem; font-weight:600;
  color:var(--muted,var(--muted)); background:transparent;
  border:1px solid var(--line,var(--line)); border-radius:30px; padding:8px 15px;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .15s, color .15s, border-color .15s;
}
.work-filter:hover{ background:var(--card-2); color:var(--ink,var(--ink)); }
.work-filter.active{ background:#1e2a24; border-color:#1e2a24; color:#fff; }
.work-filter:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.work-filter-n{
  font-size:.72rem; font-weight:700; padding:1px 7px; border-radius:20px;
  background:rgba(0,0,0,.07); color:var(--ink);
}
.work-filter.active .work-filter-n{ background:#3c4a41; color:#fff; }

.work-search{ position:relative; flex:0 1 268px; }
.work-search input{
  width:100%; font-family:var(--sans); font-size:.9rem; color:var(--ink,var(--ink));
  background:#fff; border:1px solid var(--line,var(--line)); border-radius:30px;
  padding:10px 34px 10px 16px; appearance:none;
}
.work-search input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.work-search-clear{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  appearance:none; border:0; background:none; cursor:pointer;
  font-size:1.15rem; line-height:1; color:var(--muted,var(--muted)); padding:5px 8px;
}
.work-count{
  margin:0 0 16px; font-family:var(--sans); font-size:.84rem; color:var(--muted,var(--muted));
}
.work-card[hidden]{ display:none !important; }
.work-none{
  margin:26px 0; padding:26px; text-align:center; color:var(--muted,var(--muted));
  background:var(--card-2); border:1px dashed var(--line,var(--line)); border-radius:14px;
}

/* Build standard — collapsed by default, below the work */
details.build-std{ margin:38px 0 0; padding:0; border-left-width:3px; }
details.build-std summary{
  cursor:pointer; list-style:none; padding:20px 26px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
details.build-std summary::-webkit-details-marker{ display:none; }
details.build-std summary strong{ font-family:var(--serif); font-size:1.12rem; color:var(--ink,var(--ink)); font-weight:600; }
.build-std-toggle{
  margin-left:auto; font-family:var(--sans); font-size:.82rem; font-weight:700; color:var(--accent);
}
details.build-std[open] .build-std-toggle::after{ content:" \2014 hide"; }
details.build-std .build-std-head,
details.build-std .build-std-list,
details.build-std .build-std-note{ padding-left:26px; padding-right:26px; }
details.build-std .build-std-note{ padding-bottom:24px; }
details.build-std .build-std-head p{ margin-top:0; }
@media (max-width:640px){
  .work-controls{ flex-direction:column; align-items:stretch; }
  .work-search{ flex:1 1 auto; }
  details.build-std summary{ padding:16px 18px; }
}

/* Detail view — back + pager bar */
.work-detail-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:22px;
}
.work-pager{ display:flex; align-items:center; gap:10px; }
.work-pagebtn{
  appearance:none; cursor:pointer; font-family:var(--sans); font-size:.85rem; font-weight:600;
  color:var(--ink,var(--ink)); background:#fff; border:1px solid var(--line,var(--line));
  border-radius:30px; padding:8px 15px; transition:background .15s, border-color .15s;
}
.work-pagebtn:hover{ background:var(--card-2); border-color:var(--line); }
.work-pagebtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.work-pos{
  font-family:var(--sans); font-size:.8rem; color:var(--muted,var(--muted));
  white-space:nowrap; min-width:64px; text-align:center;
}
@media (max-width:560px){
  .work-detail-bar{ flex-direction:column; align-items:stretch; }
  .work-pager{ justify-content:space-between; }
}

/* About — quick facts in the sidebar, headings in the narrative */
.about-facts{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:11px; }
.about-facts li{
  display:grid; gap:2px; font-size:.92rem; color:var(--ink,var(--ink)); line-height:1.45;
  padding-bottom:11px; border-bottom:1px solid var(--line-soft,#eceae4);
}
.about-facts li:last-child{ border-bottom:0; padding-bottom:0; }
.about-facts span{
  font-family:var(--sans); font-size:.65rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted,var(--muted));
}
.about-body h2{
  font-size:1.16rem; margin:34px 0 10px; padding-top:22px;
  border-top:1px solid var(--line-soft,#eceae4);
}
.about-body h2:first-of-type{ margin-top:30px; }

/* =====================================================================
   SECTION DIRECTORY — sticky left rail, generated from the section's own H2s
   ===================================================================== */
/* min-width:0 on both children: grid items default to min-width:auto, so the
   nowrap pill strip forced the column wider than the viewport (530px of
   horizontal overflow at 390px before this). */
.dir-layout{ display:grid; grid-template-columns:216px 1fr; gap:40px; align-items:start; }
.dir-layout > *{ min-width:0; }
.dir-rail, .dir-body{ min-width:0; }
.dir-rail{ position:sticky; top:92px; align-self:start; }
.dir-title{
  display:block; font-family:var(--sans); font-size:.64rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted,var(--muted));
  margin-bottom:12px; padding-left:14px;
}
.dir-rail ul{ list-style:none; margin:0; padding:0; border-left:2px solid var(--line,var(--line)); }
.dir-rail li{ margin:0; }
.dir-rail a{
  display:block; padding:9px 12px 9px 14px; margin-left:-2px;
  border-left:2px solid transparent;
  font-family:var(--sans); font-size:.87rem; line-height:1.4;
  color:var(--muted,var(--muted)); text-decoration:none;
  transition:color .15s, border-color .15s, background .15s;
}
.dir-rail a:hover{ color:var(--ink,var(--ink)); background:rgba(0,0,0,.03); }
.dir-rail a.active{ color:var(--accent); border-left-color:var(--accent); font-weight:700; }
.dir-rail a:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.dir-body > h2:first-child{ margin-top:0 !important; padding-top:0 !important; border-top:0 !important; }
.dir-body > h2{ scroll-margin-top:96px; }

@media (max-width:900px){
  /* Below 900 the rail becomes a horizontal strip that scrolls, so it never
     eats the width the content needs. */
  .dir-layout{ grid-template-columns:1fr; gap:0; }
  .dir-rail{
    position:sticky; top:0; z-index:5; margin:0 -4px 22px;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line,var(--line)); padding:8px 4px;
  }
  .dir-title{ display:none; }
  .dir-rail ul{
    display:flex; gap:6px; overflow-x:auto; border-left:0;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .dir-rail ul::-webkit-scrollbar{ display:none; }
  .dir-rail a{
    white-space:nowrap; padding:7px 13px; margin-left:0;
    border-left:0; border-radius:30px; font-size:.8rem;
    border:1px solid var(--line,var(--line));
  }
  .dir-rail a.active{ background:#1e2a24; border-color:#1e2a24; color:#fff; }
}

/* =====================================================================
   LIVE DEMO — the tool actually runs inside the case study
   The iframe is only created on click, so opening a project never costs
   a second page load nobody asked for.
   ===================================================================== */
.live-demo{
  margin:0 0 34px; border:1px solid var(--line,var(--line)); border-radius:15px;
  overflow:hidden; background:#1e2a24;
}
.live-head{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:12px 16px; background:#1e2a24; color:#eaf0ea;
}
.live-head strong{ font-family:var(--sans); font-size:.92rem; }
.live-dot{
  width:8px; height:8px; border-radius:50%; background:#5fbf85;
  box-shadow:0 0 0 3px rgba(61,220,132,.22);
}
.live-note{ font-family:var(--sans); font-size:.8rem; color:#8fa899; }
.live-full{
  margin-left:auto; background:rgba(255,255,255,.10); color:#fff;
  border:1px solid rgba(255,255,255,.22);
}
.live-full:hover{ background:rgba(255,255,255,.18); color:#fff; }
.live-frame{ position:relative; }
.live-start{
  appearance:none; border:0; padding:0; cursor:pointer; display:block; width:100%;
  position:relative; background:#1e2a24; line-height:0;
}
.live-start img{ width:100%; display:block; opacity:.42; transition:opacity .2s; }
.live-start:hover img{ opacity:.30; }
.live-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--sans); font-size:1rem; font-weight:700; color:#fff; line-height:1.3;
  text-shadow:0 2px 14px rgba(0,0,0,.55); padding:0 20px; text-align:center;
}
.live-play .tri{
  width:0; height:0; border-left:17px solid #fff;
  border-top:11px solid transparent; border-bottom:11px solid transparent;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5)); flex:0 0 auto;
}
.live-start:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; }
.live-iframe{
  width:100%; height:min(74vh,660px); border:0; display:block; background:#fff;
}
@media (max-width:640px){
  .live-iframe{ height:64vh; }
  .live-note{ display:none; }
  .live-play{ font-size:.88rem; }
}@media (max-width:600px){}


/* Dark-theme carry-over for shared chrome on the Zareli tab */
body.theme-zareli .site-footer .container{ color:var(--z-muted); }
body.theme-zareli .z-btn{ background:var(--z-blue); color:#12161a; font-weight:700; }
body.theme-zareli .z-btn:hover{ background:var(--z-blue-lit); color:#12161a; }
body.theme-zareli .btn{ color:var(--z-body); background:var(--z-panel); border-color:var(--z-line); }
body.theme-zareli .btn:hover{ color:var(--z-ink); border-color:var(--z-blue-deep); }
.z-do h4, .z-step-head h4, .z-stage h4{ color:var(--z-ink); }
.z-note{ border-left-color:var(--z-blue-deep); }
.z-trace figcaption{ color:var(--z-muted); }
.z-trace figcaption strong{ color:var(--z-ink); }
.z-reveal-head p, .z-shot-note{ color:var(--z-muted); }
.z-thesis p, .z-hero-thesis p{ color:var(--z-ink); }
.z-thesis p em, .z-hero-thesis p em{ color:var(--z-blue-lit); }
.z-creed-closer{ color:var(--z-blue-lit); border-top-color:var(--z-line); }
.z-lead em{ color:var(--z-blue-lit); }
/* Flat: no drop-shadow bloom on the wordmark either. */
.z-eyebrow{ filter:none; }


/* =====================================================================
   MOBILE — 360-540px. Everything below is inside a max-width query, so
   the desktop layout is untouched by construction, not by care.
   ===================================================================== */
@media (max-width:540px){
  :root{ --pad: 16px; }

  /* Masthead: name, role, search, then nav. Card drops below. */
  .masthead-inner{ padding:14px var(--pad) 0; }
  .identity{ gap:12px; }
  .identity .name{ font-size:1.24rem; }
  .identity .role{ font-size:.84rem; line-height:1.45; }
  .biz-card{ width:100%; order:3; }/* Section chrome */
  .panel.section{ padding-left:var(--pad); padding-right:var(--pad); }
  .section-head h1{ font-size:1.6rem; line-height:1.2; }
  .section-head .lead{ font-size:.96rem; }
  .eyebrow{ font-size:.62rem; }

  /* Overview */
  .statement{ font-size:1.1rem; line-height:1.42; }
  .site-map-grid{ grid-template-columns:1fr; gap:12px; }
  .map-card{ padding:18px; }
  .aside-card{ padding:20px 18px; }

  /* Selected Work */
  .work-controls{ gap:12px; margin:16px 0 10px; }
  .work-filters{ gap:6px; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px;
    scrollbar-width:none; -ms-overflow-style:none; }
  .work-filters::-webkit-scrollbar{ display:none; }
  .work-filter{ flex:0 0 auto; font-size:.8rem; padding:7px 12px; }
  .work-grid{ gap:16px; }
  .work-card-body{ padding:16px 16px 18px; }
  .work-detail-head{ grid-template-columns:1fr; gap:14px; }
  .work-detail-thumb{ width:100%; }
  .work-detail-title{ font-size:1.34rem; }
  .tmpl-actions{ gap:7px; }
  .tmpl-actions .btn{ flex:1 1 auto; justify-content:center; }

  /* About */
  .about{ grid-template-columns:1fr; gap:22px; }
  .about-side{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
  .about-side .avatar{ margin:0; }
  .about-facts{ grid-column:1 / -1; }
  .about-body h2{ font-size:1.06rem; margin-top:26px; padding-top:18px; }

  /* Contact */
  .contact-grid{ grid-template-columns:1fr; }
  .contact-card{ padding:20px 18px; }
  .contact-dl > div{ grid-template-columns:1fr; gap:2px; }

  /* Zareli */
  .zareli{ padding:18px 14px 32px; border-radius:16px; }
  .z-eyebrow{ font-size:.82rem; letter-spacing:.26em; }
  .z-tagline{ font-size:1rem; }
  .z-hero-thesis p{ font-size:1.08rem; }
  .z-reveal-head h2{ font-size:1.24rem; }
  .z-h2{ font-size:1.24rem; }

  /* Type scale — stop long words breaking layout */
  h1,h2,h3{ overflow-wrap:anywhere; }
  pre, code{ overflow-x:auto; max-width:100%; }
  table{ display:block; overflow-x:auto; }
}

/* Tap targets: 44px minimum on any touch device, at any width. */
@media (hover:none) and (pointer:coarse){
  .nav button, .work-filter, .z-sheet, .dir-rail a, .btn, .work-pagebtn{ min-height:44px; }
  .z-pin{ width:34px; height:34px; }
}

/* =====================================================================
   WORKING WITH AI — the teaching area
   Written outward. The two-column split IS the argument, so it carries
   the visual weight rather than a decorative header.
   ===================================================================== */
.two-ways{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:8px 0 0; }
.tw-card{ padding:26px 28px; border-radius:15px; border:1px solid var(--line,var(--line)); background:var(--card-2); }
.tw-with{ border-left:3px solid var(--accent); }
.tw-for{ border-left:3px solid #0d8a54; }
.tw-k{
  display:inline-block; font-family:var(--sans); font-size:.65rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; margin-bottom:10px;
}
.tw-with .tw-k{ color:var(--accent-deep); }
.tw-for .tw-k{ color:#0a6b41; }
.tw-card h2{ font-size:1.2rem; margin:0 0 10px; padding:0; border:0; }
.tw-card p{ margin:0 0 12px; font-size:.97rem; line-height:1.62; color:var(--muted,var(--muted)); }
.tw-note{ padding-top:12px; border-top:1px solid var(--line,var(--line)); margin-bottom:0 !important; }
.tw-note strong{ color:var(--ink,var(--ink)); }
.tw-thesis{
  margin:22px 0 8px; padding:18px 22px; border-radius:13px; background:var(--accent-tint);
  border:1px solid var(--accent-line); font-family:var(--serif); font-size:1.06rem;
  line-height:1.5; color:var(--ink,var(--ink)); text-align:center;
}

/* Packs */
.pack-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:16px; margin-bottom:8px; }
.pack{
  display:flex; flex-direction:column; gap:9px; padding:22px;
  border:1px solid var(--line,var(--line)); border-radius:14px; background:var(--surface,#fff);
}
.pack-n{
  font-family:var(--sans); font-size:.64rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-tint);
  border:1px solid var(--accent-line); border-radius:20px; padding:3px 10px; width:fit-content;
}
.pack h3{ margin:2px 0 0; font-size:1.06rem; }
.pack p{ margin:0; font-size:.9rem; line-height:1.58; color:var(--muted,var(--muted)); flex:1; }
.pack .btn{ width:fit-content; margin-top:4px; }
.pack-key{ border-color:#9dd4bb; background:#f4fbf7; }
.pack-key .pack-n{ color:#0d8a54; background:#e4f5ed; border-color:#9dd4bb; }
.pack-all{ background:linear-gradient(160deg,var(--card-2) 0%,var(--accent-tint) 100%); border-color:var(--accent-line); }

/* Starter cards */
.starter{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px; }
.start-card{
  padding:24px 26px; border:1px solid var(--line,var(--line)); border-radius:15px; background:var(--card-2);
}
.start-card-key{ background:#f4fbf7; border-color:#9dd4bb; }
.start-n{
  display:inline-block; font-family:var(--sans); font-size:.64rem; font-weight:800;
  letter-spacing:.14em; color:var(--muted,var(--muted)); margin-bottom:8px;
}
.start-card h3{ margin:0 0 10px; font-size:1.1rem; }
.start-why{ margin:0 0 14px; font-size:.94rem; line-height:1.6; color:var(--muted,var(--muted)); }
.start-prompt{
  margin:0 0 12px; padding:16px 18px; background:#fff; border:1px solid var(--line,var(--line));
  border-radius:11px; font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
  font-size:.82rem; line-height:1.62; color:var(--ink,var(--ink));
  white-space:pre-wrap; overflow-wrap:anywhere; max-height:250px; overflow-y:auto;
}
.defend{ background:#fff; border:1px solid #9dd4bb; border-radius:11px; padding:18px 20px; }
.defend p{ margin:0 0 10px; font-size:.93rem; line-height:1.6; color:var(--muted,var(--muted)); }
.defend p:last-child{ margin-bottom:0; }
.defend-q{
  font-family:var(--serif); font-size:1.08rem !important; color:var(--ink,var(--ink)) !important;
  line-height:1.4 !important; padding-bottom:12px; border-bottom:1px solid #cdead9;
}
.defend strong{ color:var(--ink,var(--ink)); }

/* The signed note — the only first-person block in the section */
.signed{
  margin:34px 0 8px; padding:22px 26px; border-left:3px solid var(--line,var(--line));
  background:var(--card-2); border-radius:0 13px 13px 0;
}
.signed-k{
  display:block; font-family:var(--sans); font-size:.64rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted,var(--muted)); margin-bottom:9px;
}
.signed p{ margin:0 0 10px; font-size:.95rem; line-height:1.65; color:var(--muted,var(--muted)); }
.signed-name{ font-family:var(--serif); font-style:italic; color:var(--ink,var(--ink)); margin-bottom:0 !important; }

@media (max-width:820px){
  .two-ways, .starter{ grid-template-columns:1fr; }
  .tw-card{ padding:20px; }
  .tw-thesis{ font-size:.98rem; padding:15px 17px; text-align:left; }
}


/* =====================================================================
   THE REVEAL — the product itself, annotated like a cutaway
   ===================================================================== */
.z-reveal{ margin:56px 0 0; }
.z-reveal-head{ text-align:center; max-width:64ch; margin:0 auto 26px; }
.z-reveal-eyebrow{ display:inline-block; font-family:var(--sans); font-size:.7rem; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase; color:var(--z-blue); margin-bottom:10px; }
.z-reveal-head h2{ font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.1rem); color:var(--z-ink); margin:0 0 10px; }
.z-reveal-head p{ color:var(--z-body); font-size:1.02rem; line-height:1.6; margin:0; }
.z-reveal-hint{ appearance:none; border:0; background:none; cursor:default;
  font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--z-blue); padding:0; }

.z-shot{ position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--z-line);
  box-shadow:0 16px 44px rgba(0,0,0,.42); }
.z-shot img{ width:100%; display:block; }

/* Numbered pins. Pulse draws the eye without shouting. */
.z-pin{ position:absolute; transform:translate(-50%,-50%); appearance:none; cursor:pointer;
  width:30px; height:30px; border-radius:50%; padding:0;
  background:var(--z-blue); border:2px solid #191b1d; color:#0e1013;
  font-family:var(--sans); font-size:.82rem; font-weight:700; line-height:1;
  box-shadow:0 3px 12px rgba(9,20,44,.4); transition:transform .16s, background .16s; }
.z-pin span{ display:block; transform:translateY(.5px); }
.z-pin::after{ content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--z-blue); opacity:.45; animation:zpulse 2.6s ease-out infinite; }
.z-pin:hover{ transform:translate(-50%,-50%) scale(1.14); }
.z-pin.active{ background:var(--z-blue-deep); transform:translate(-50%,-50%) scale(1.14); }
.z-pin.active::after{ animation:none; opacity:.85; border-color:var(--z-blue-deep); }
/* Clicked = locked open. Orange, so it reads as "held" rather than "hovered". */
.z-pin.locked{ background:#e2760f; }
.z-pin.locked::after{ animation:none; opacity:.9; border-color:#e2760f; }
.z-pin.locked.active{ background:#e2760f; }
.z-pin:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
@keyframes zpulse{ 0%{transform:scale(.9);opacity:.55} 70%{transform:scale(1.5);opacity:0} 100%{opacity:0} }

/* Region outline — shows WHAT a pin is pointing at, since the pin sits beside it */
.z-region{ position:absolute; border:2px solid var(--z-blue); border-radius:5px;
  background:rgba(77,149,255,.14); box-shadow:0 0 0 9999px rgba(3,7,14,.62);
  opacity:0; pointer-events:none; transition:opacity .2s, left .2s, top .2s, width .2s, height .2s; }
.z-region.on{ opacity:1; }

/* Positional popover — appears beside the pin, flips to stay inside the image */
.z-pop{ position:absolute; width:min(320px,68%); z-index:5; pointer-events:none;
  background:var(--z-panel); border:1px solid var(--z-blue-deep); border-radius:13px;
  padding:15px 17px; box-shadow:0 16px 44px rgba(0,0,0,.55);
  opacity:0; transform:translateY(4px); transition:opacity .18s, transform .18s; }
.z-pop.on{ opacity:1; transform:none; }
.z-pop h4{ margin:0 0 6px; color:var(--z-ink); font-size:1rem; }
.z-pop p{ margin:0; color:var(--z-body); font-size:.9rem; line-height:1.58; }

/* Scope band — honest about today vs. the roadmap, right under the product shot */
.z-scope{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px 22px;
  margin:22px auto 0; max-width:74ch; padding:16px 22px;
  background:var(--z-blue-wash); border:1px solid var(--z-blue-deep); border-radius:14px; text-align:center; }
.z-scope > div{ display:flex; flex-direction:column; gap:3px; }
.z-scope-k{ font-family:var(--sans); font-size:.66rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--z-blue); }
.z-scope strong{ color:var(--z-blue-lit); font-size:1rem; font-weight:700; }
.z-scope-arrow{ color:var(--z-blue); font-size:1.2rem; }
@media (max-width:620px){ .z-scope-arrow{ transform:rotate(90deg); } }

.z-shot-note{ text-align:center; font-size:.84rem; color:var(--z-muted); margin:16px 0 0; }

@media (max-width:680px){
  .z-reveal{ margin-top:38px; }
  .z-pin{ width:26px; height:26px; font-size:.74rem; }
  /* No hover on touch: the popover is tap-driven and parks at the foot of the image
     so it never covers the region it is describing. */
  .z-pop{ width:calc(100% - 20px); left:10px !important; top:auto !important;
    bottom:10px; padding:13px 15px; }
  .z-pop h4{ font-size:.94rem; }
  .z-pop p{ font-size:.85rem; }
}
@media (prefers-reduced-motion: reduce){
  .z-pin::after{ animation:none; }
  .z-pin:hover, .z-pin.active{ transform:translate(-50%,-50%); }
}

/* ---------- Sheet-tab sub-navigation (the signature element) ----------
   Styled as workbook sheet tabs: the reader is inside a file, not on a page. */
.z-sheets{ display:flex; flex-wrap:wrap; gap:3px; margin:44px 0 0; padding:0 2px;
  border-bottom:2px solid var(--z-blue); }
/* margin-bottom:-2px pulls each tab down so its own bottom border lands exactly on the
   container rule. Inactive = transparent (rule shows through). Active = panel-white,
   which punches a hole in the rule so the tab merges into the pane below it. */
.z-sheet{ appearance:none; cursor:pointer; font-family:var(--sans); font-size:.88rem; font-weight:600;
  color:var(--z-body); background:transparent;
  border:2px solid transparent; border-radius:10px 10px 0 0;
  padding:11px 18px 10px; margin-bottom:-2px;
  transition:background .15s, color .15s; }
.z-sheet:hover{ background:rgba(77,149,255,.10); color:var(--z-ink); }
.z-sheet.active{ background:var(--z-panel); color:var(--z-blue-lit);
  border-color:var(--z-blue); border-bottom-color:var(--z-panel); }
.z-sheet:focus-visible{ outline:2px solid var(--z-blue); outline-offset:-4px; }

.z-panes{ background:var(--z-panel); border:1px solid var(--z-line); border-top:0;
  border-radius:0 0 18px 18px; padding:30px 32px 36px; margin-top:0;
  box-shadow:0 14px 40px rgba(0,0,0,.30); }
.z-pane{ display:none; }
.z-pane.active{ display:block; animation:zfade .28s ease both; }
@keyframes zfade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
.z-pane > .z-h2:first-child{ margin-top:0; }

/* ---------- "What it does" — sequenced, because the order is the claim ---------- */
.z-does{ display:grid; gap:4px; margin-top:22px; }
.z-do{ display:grid; grid-template-columns:26px 1fr; gap:16px; align-items:start;
  padding:18px 0 18px 4px; border-top:1px solid var(--z-line); }
.z-do:first-child{ border-top:0; }
.z-do-mark{ color:var(--z-blue); font-size:.7rem; line-height:1.9; }
.z-do h4{ color:var(--z-ink); font-size:1.08rem; margin-bottom:6px; }
.z-do p{ color:var(--z-body); font-size:.99rem; line-height:1.62; margin:0 0 8px; }
.z-note{ color:var(--z-muted); font-size:.9rem !important; border-left:2px solid var(--z-blue-wash);
  padding-left:12px; margin-bottom:0 !important; }

/* ---------- Pipeline: deterministic vs model ---------- */
.z-pipe{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.z-pipe li{ display:flex; align-items:center; gap:8px; }
.z-pipe li:not(:last-child)::after{ content:"\2192"; color:#b8c6dd; font-size:1rem; }
.z-node{ appearance:none; cursor:pointer; text-align:left; font-family:var(--sans);
  font-size:.9rem; font-weight:600; color:var(--z-ink); background:var(--z-panel-2);
  border:1px solid var(--z-line); border-radius:11px; padding:10px 14px; min-width:132px;
  transition:border-color .15s, background .15s, transform .12s, box-shadow .15s; }
.z-node:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.09); }
.z-node:focus-visible{ outline:2px solid var(--z-blue); outline-offset:2px; }
.z-node-k{ display:block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; margin-bottom:4px; }
.z-node.det .z-node-k{ color:var(--z-blue); }
.z-node.mod{ border-style:dashed; }
.z-node.mod .z-node-k{ color:var(--z-muted); }
.z-node.det.active{ background:var(--z-blue-wash); border-color:var(--z-blue); color:#fff; }
.z-node.mod.active{ background:var(--z-panel-2); border-color:var(--z-muted); border-style:solid; }
.z-stage{ margin-top:18px; background:var(--z-panel-2); border:1px solid var(--z-line);
  border-radius:14px; padding:20px 22px; min-height:96px;
  overflow:hidden; transition:height .18s ease; }
.z-stage h4{ color:var(--z-ink); margin-bottom:6px; }
.z-stage p{ color:var(--z-body); font-size:.98rem; line-height:1.62; margin:0 0 8px; }
.z-stage p:last-child{ margin-bottom:0; }
.z-stage .z-verdict{ display:inline-block; font-family:var(--sans); font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; font-weight:700; border-radius:20px;
  padding:4px 11px; margin-bottom:10px; }
.z-stage .z-verdict.det{ color:var(--z-blue-lit); background:var(--z-blue-wash); }
.z-stage .z-verdict.mod{ color:var(--z-ink); background:#3a3f36; }

/* ---------- Hero thesis: the argument, before the evidence ---------- */
.z-hero-thesis{ position:relative; z-index:1; margin:26px auto 6px; padding:0; max-width:62ch; border:0; }
.z-hero-thesis p{ font-family:var(--serif); font-size:clamp(1.24rem,2.5vw,1.72rem); line-height:1.3;
  color:var(--z-ink); margin:0; }
.z-hero-thesis p em{ color:var(--z-blue-deep); font-style:italic; }
@media (max-width:680px){ .z-hero-thesis{ margin-top:20px; } }

/* ---------- Thesis pull-quote ---------- */
.z-thesis{ margin:0 0 22px; padding:26px 0 26px 26px; border-left:3px solid var(--z-blue); }
.z-thesis p{ font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,1.75rem); line-height:1.34;
  color:var(--z-ink); margin:0; }
.z-thesis p em{ color:var(--z-blue-deep); font-style:italic; }

/* ---------- Roadmap accordion ---------- */
.z-step{ display:block; border-left:2px solid var(--z-line); padding:0; transition:border-color .18s; }
.z-step.z-open{ border-left-color:var(--z-blue); }
.z-step-head{ appearance:none; cursor:pointer; width:100%; text-align:left; background:none;
  border:0; padding:14px 0 14px 22px; display:flex; align-items:baseline; gap:18px; font-family:inherit; }
.z-step-head:focus-visible{ outline:2px solid var(--z-blue); outline-offset:2px; }
.z-step-head .when{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.07em;
  font-size:.72rem; font-weight:700; color:var(--z-blue); flex:0 0 96px; }
.z-step-head h4{ margin:0; color:var(--z-ink); font-size:1.04rem; }
.z-step-body{ max-height:0; overflow:hidden; transition:max-height .3s ease, opacity .25s;
  opacity:0; padding-left:136px; }
.z-step.z-open .z-step-body{ max-height:320px; opacity:1; padding-bottom:16px; }
.z-step-body p{ color:var(--z-body); font-size:.97rem; line-height:1.62; margin:0; }

/* ---------- Demo badge ---------- */
.z-demo-badge{ display:inline-block; font-family:var(--sans); font-size:.76rem; font-weight:600;
  color:var(--z-ink); background:var(--z-panel-2); border:1px solid #4a411f; border-radius:20px;
  padding:7px 14px; margin:0 0 18px; }

/* The single-row tab strip wraps at ~760px. Once it wraps, the punch-through rule
   is impossible — an active tab on row 1 cannot meet a rule sitting under row 2.
   So below 780px drop the tab-strip metaphor entirely and use pills over a
   detached pane. Measured, not guessed: the strip wraps at 760px. */
@media (max-width:780px){
  .z-sheets{ gap:6px; border-bottom:0; padding:0; }
  .z-sheet{ flex:1 1 auto; margin-bottom:0; padding:9px 13px;
    border-radius:9px; border:1px solid var(--z-line); background:#eceee5; }
  .z-sheet:hover{ background:#e3e6da; }
  .z-sheet.active{ border-color:var(--z-blue); border-bottom-color:var(--z-blue);
    background:var(--z-panel); box-shadow:0 2px 10px rgba(106,168,255,.16); }
  .z-panes{ border-top:1px solid var(--z-line); border-radius:16px; margin-top:12px; }
}

@media (prefers-reduced-motion: reduce){
  .z-pane.active{ animation:none; }
  .z-step-body{ transition:none; }
  .z-node:hover{ transform:none; }
}

@media (max-width:680px){
  .z-sheet{ font-size:.78rem; }
  .z-panes{ padding:22px 16px 28px; }
  .z-pipe{ flex-direction:column; align-items:stretch; }
  .z-pipe li{ flex-direction:column; align-items:stretch; }
  .z-pipe li:not(:last-child)::after{ content:"\2193"; text-align:center; padding:2px 0; }
  .z-node{ width:100%; }
  .z-step-body{ padding-left:22px; }
  .z-step.z-open .z-step-body{ max-height:420px; }
  .z-do{ grid-template-columns:16px 1fr; gap:10px; }
}

@media (max-width:680px){
  .zareli{ padding:20px 16px 34px; }
  .z-cards{ grid-template-columns:1fr; }
  .z-ident{ grid-template-columns:1fr; }
  .z-step{ grid-template-columns:1fr; gap:4px; }
  .z-eyebrow{ letter-spacing:.3em; font-size:.9rem; }
}

/* =====================================================================
   MOBILE / TABLET nav — collapsing menu (desktop view is unchanged)
   ===================================================================== */
.nav-toggle{ display:none; }   /* hidden on laptop/desktop */

@media (max-width:900px){
  .masthead-inner{ padding-top:18px; }
  /* tidy the contact block on small screens */
  .identity > div:last-child{ text-align:left !important; }

  .nav-toggle{
    display:inline-flex; align-items:center; gap:11px; margin-top:16px;
    appearance:none; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:.95rem;
    color:var(--ink); background:var(--card); border:1px solid var(--line);
    border-radius:10px; padding:11px 16px;
  }
  .nav-toggle-icon{ position:relative; display:inline-block; width:18px; height:2px; background:currentColor; border-radius:2px; transition:background .15s; }
  .nav-toggle-icon::before, .nav-toggle-icon::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease, top .2s ease; }
  .nav-toggle-icon::before{ top:-6px; }
  .nav-toggle-icon::after{ top:6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon{ background:transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before{ top:0; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after{ top:0; transform:rotate(-45deg); }

  .nav{
    display:none; flex-direction:column; gap:0; overflow:visible;
    margin-top:12px; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--card);
  }
  .nav.open{ display:flex; }
  .nav button{
    width:100%; text-align:left; white-space:normal;
    padding:13px 14px; border-radius:8px; font-size:1rem;
  }
  .nav button:hover{ color:var(--ink); background:var(--accent-tint); }
  .nav button.active{ color:var(--ink); background:var(--accent-tint); }
  .nav button.active::after{ display:none; }   /* no underline bar in the vertical menu */
  .nav-zareli::before{ vertical-align:baseline; }

  /* Dark (Zareli) theme — menu + toggle */
  body.theme-zareli .nav-toggle{ color:var(--z-ink); background:var(--z-panel); border-color:var(--z-line); }
  body.theme-zareli .nav{ background:var(--z-panel); border-color:var(--z-line); }
  body.theme-zareli .nav button:hover,
  body.theme-zareli .nav button.active{ color:var(--z-blue-lit); background:rgba(77,149,255,.14); }
}

/* ===== Templates accordion ===== */
.tmpl-list{ margin-top:6px; }
.tmpl{ border:1px solid var(--line); border-radius:12px; margin-bottom:12px; background:var(--card); overflow:hidden; }
.tmpl[open]{ box-shadow:var(--shadow-sm); border-color:var(--accent-line); }
.tmpl summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; }
.tmpl summary::-webkit-details-marker{ display:none; }
.tmpl summary:hover .tmpl-name{ color:var(--accent-deep); }
.tmpl-headwrap{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tmpl-name{ font-family:var(--serif); font-size:1.12rem; color:var(--ink); font-weight:600; transition:color .15s; }
.tmpl-file{ font-family:var(--mono); font-size:.74rem; color:var(--muted); }
.tmpl-meta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.tmpl-fmt{ font-family:var(--sans); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-deep); background:var(--accent-tint); padding:4px 10px; border-radius:20px; white-space:nowrap; }
.tmpl-chev{ width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s ease; }
.tmpl[open] .tmpl-chev{ transform:rotate(-135deg); }
.tmpl-body{ padding:4px 20px 20px; border-top:1px solid var(--line-soft); }
.tmpl-use{ color:var(--body); margin:14px 0; }
.tmpl-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.btn-sm{ padding:8px 15px; font-size:.85rem; }
.tmpl-edit h4{ font-size:.95rem; margin-bottom:8px; color:var(--ink); }
.tmpl-steps{ margin:0; padding-left:20px; color:var(--body); font-size:.94rem; line-height:1.55; }
.tmpl-steps li{ margin-bottom:7px; }
.tmpl-note{ color:var(--body); font-size:.94rem; line-height:1.6; max-width:76ch; margin:0; }
@media (max-width:520px){
  .tmpl summary{ padding:14px 16px; }
  .tmpl-body{ padding:4px 16px 18px; }
  .tmpl-actions .btn-sm{ flex:1 1 auto; text-align:center; }
}

/* ===== Selected Work — master/detail ===== */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px; }
.work-card{ text-align:left; cursor:pointer; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; padding:0; font:inherit; color:inherit; transition:transform .15s, box-shadow .15s, border-color .15s; }
.work-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--accent-line); }
.work-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.work-card-thumb{ width:100%; height:172px; object-fit:cover; object-position:top center; background:#ece9e2; border-bottom:1px solid var(--line-soft); }
.work-card-body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.work-card-cat{ font-family:var(--sans); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:6px; }
.work-card-title{ font-size:1.12rem; margin-bottom:8px; line-height:1.25; }
.work-card-blurb{ font-size:.9rem; color:var(--muted); line-height:1.5; margin-bottom:14px; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.work-card-cta{ font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--accent); }
.work-maint{ margin-top:26px; font-size:.92rem; }
@media (max-width:980px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .work-grid{ grid-template-columns:1fr; } }

/* detail */
.work-back{ appearance:none; cursor:pointer; background:none; border:0; font-family:var(--sans); font-weight:600; font-size:.9rem; color:var(--accent); padding:6px 0; margin-bottom:18px; }
.work-back:hover{ text-decoration:underline; }
.work-detail-head{ display:grid; grid-template-columns:minmax(0,440px) 1fr; gap:34px; align-items:start; margin-bottom:30px; }
.work-detail-thumb{ width:100%; border-radius:14px; border:1px solid var(--line-soft); display:block; }
.work-detail-title{ font-size:2rem; margin:6px 0 12px; line-height:1.12; }
.work-detail-blurb{ color:var(--body); font-size:1.02rem; line-height:1.6; margin-bottom:18px; max-width:60ch; }
.work-detail-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:36px; }
.work-detail-case dl{ margin:0; }
.work-detail-case dl > div{ display:grid; grid-template-columns:130px 1fr; gap:14px; padding:11px 0; border-top:1px solid var(--line-soft); }
.work-detail-case dl > div:first-child{ border-top:0; }
.work-detail-case dt{ font-family:var(--sans); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding-top:2px; }
.work-detail-case dd{ margin:0; color:var(--body); font-size:.96rem; line-height:1.55; }
.work-detail-edit{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px 24px; align-self:start; }
.work-detail-edit h4{ margin-bottom:12px; }
@media (max-width:820px){
  .work-detail-head{ grid-template-columns:1fr; gap:20px; }
  .work-detail-grid{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:520px){ .work-detail-case dl > div{ grid-template-columns:1fr; gap:3px; } }

/* ---- Business card (header right side) ---------------------------------- */
.biz-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 10px 14px 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
  min-width: 224px;
  transition: box-shadow .18s, transform .18s;
}
.biz-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.biz-top {
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}
.biz-top a { color: var(--accent); }
.biz-divider {
  height: 1px;
  background: var(--line-soft);
  margin: 7px 0 5px;
}
.biz-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 0 4px;
  text-decoration: none;
  border-radius: 7px;
  transition: background .14s;
}
.biz-row:hover { background: var(--bg-subtle, #f5f4f0); }
.biz-row-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}
.biz-sep {
  font-size: .72rem;
  color: var(--muted);
  opacity: .45;
  user-select: none;
}
.biz-email {
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: .01em;
}
.biz-email:hover { text-decoration: underline; }
.biz-contact-label {
  font-size: .72rem;
  color: var(--muted);
  opacity: .65;
  user-select: none;
}
.biz-tag {

  font-size: .72rem;
  font-style: italic;
  color: var(--muted);
  letter-spacing: .01em;
}
.biz-url {
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .01em;
}
body.theme-zareli .biz-card {
  background: var(--z-panel);
  border: 1px solid var(--z-line);
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
  position: relative;
  transition: box-shadow .22s, transform .18s;
}
body.theme-zareli .biz-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--z-blue-lit), var(--z-blue), var(--z-blue-deep), #93a8c4);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
body.theme-zareli .biz-card:hover::before { opacity: 1; }
body.theme-zareli .biz-card:hover {
  box-shadow: 0 0 26px rgba(106,168,255,.16), 0 10px 32px rgba(0,0,0,.14);
  transform: translateY(-1px);
}
body.theme-zareli .biz-top { color: var(--z-muted); }
body.theme-zareli .biz-card:hover { box-shadow:0 0 26px rgba(77,149,255,.22), 0 10px 32px rgba(0,0,0,.4); }
body.theme-zareli .biz-top a { color: var(--z-blue); }
body.theme-zareli .biz-divider { background: var(--z-line); }
body.theme-zareli .biz-tag { color: var(--z-body); }
body.theme-zareli .biz-url { color: var(--z-blue); }
body.theme-zareli .biz-email { color: var(--z-blue); }
body.theme-zareli .biz-sep { color: #a9b8cf; }
body.theme-zareli .biz-contact-label { color: var(--z-ink); opacity: 1; }
body.theme-zareli .biz-url, body.theme-zareli .biz-email, body.theme-zareli .biz-top a { color: var(--z-blue-lit); }
body.theme-zareli .biz-row:hover { background: rgba(77,149,255,.10); }
@media (max-width: 600px) {
  .biz-card { min-width: unset; width: 100%; }
  .biz-row { align-items: flex-start; }
  .biz-top { text-align: center; }
}


/* =====================================================================
   OVERVIEW — "currently shipping" feature band
   Puts the strongest asset on the landing tab instead of hiding it
   behind a nav click.
   ===================================================================== */
.home-feature{
  display:grid; grid-template-columns:1fr 1.05fr; gap:0; align-items:stretch;
  margin:48px 0 8px; border:1px solid var(--line, var(--line)); border-radius:18px;
  overflow:hidden; background:var(--card-2);
  box-shadow:0 12px 36px rgba(20,26,38,.07);
}
.home-feature-body{ padding:32px 34px; display:flex; flex-direction:column; justify-content:center; }
.home-feature-k{
  display:inline-block; width:fit-content; font-family:var(--sans);
  font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-tint); border:1px solid var(--accent-line);
  border-radius:20px; padding:5px 12px; margin-bottom:14px;
}
.home-feature-body h2{ margin:0 0 10px; font-size:1.42rem; line-height:1.26; }
.home-feature-body p{ margin:0 0 20px; color:var(--muted, var(--muted)); line-height:1.62; font-size:.98rem; }
.home-feature-body .btn{ width:fit-content; }
.home-feature-shot{ position:relative; overflow:hidden; background:#1e2a24; min-height:280px; }
.home-feature-shot img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:left top;
}
@media (max-width:820px){
  .home-feature{ grid-template-columns:1fr; }
  .home-feature-shot{ min-height:210px; order:-1; }
  .home-feature-body{ padding:26px 22px; }
  .home-feature-body h2{ font-size:1.22rem; }
}
@media (max-width:680px){ .z-close{ padding:40px 18px 34px; } }

/* Trace exhibit — evidence sitting directly under the claim it supports */
.z-trace{ margin:18px 0 0; max-width:520px; }
.z-trace img{
  width:100%; display:block; border-radius:13px;
  border:1px solid var(--z-line);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.z-trace figcaption{
  margin-top:11px; font-size:.87rem; line-height:1.55; color:var(--z-muted);
}
.z-trace figcaption strong{ color:var(--z-ink); }
@media (max-width:680px){ .z-trace{ max-width:100%; } }

/* =====================================================================
   SELECTED WORK — build & verification standard
   The engineering discipline behind the 21 files. Sits above the grid
   because for technical roles it matters more than any single tool.
   ===================================================================== */
.build-std{
  margin:0 0 46px; padding:28px 32px 26px;
  background:var(--card-2); border:1px solid var(--line, var(--line));
  border-left:3px solid var(--accent); border-radius:14px;
}
.build-std-head h2{ margin:0 0 8px; font-size:1.24rem; }
.build-std-k{
  display:inline-block; font-family:var(--sans); font-size:.65rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin-bottom:9px;
}
.build-std-head p{ margin:0 0 18px; color:var(--muted, var(--muted)); max-width:80ch; line-height:1.6; }
.build-std-list{ margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.build-std-list li{
  position:relative; padding-left:26px; line-height:1.6;
  color:var(--muted, var(--muted)); font-size:.96rem; max-width:88ch;
}
.build-std-list li::before{
  content:"\2713"; position:absolute; left:0; top:0;
  color:var(--accent); font-weight:700; font-size:.95rem;
}
.build-std-list strong{ color:var(--ink, var(--ink)); }
.build-std-note{
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line, var(--line));
  font-size:.94rem; color:var(--muted, var(--muted)); font-style:italic; max-width:80ch;
}
@media (max-width:640px){
  .build-std{ padding:22px 18px; }
  .build-std-head h2{ font-size:1.1rem; }
}

/* Constitution pull-quotes — the operative articles, on the Principle pane */
.z-creed{ display:grid; gap:14px; margin-top:20px; }
.z-creed blockquote{
  margin:0; padding:18px 22px; border-left:3px solid var(--z-blue);
  background:var(--z-panel-2); border-radius:0 13px 13px 0;
}
.z-creed blockquote p{
  margin:0 0 9px; font-family:var(--serif); font-size:1.06rem; line-height:1.5;
  color:var(--z-ink);
}
.z-creed cite{
  font-family:var(--sans); font-style:normal; font-size:.7rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--z-blue);
}
.z-creed-closer{
  margin:26px 0 0; padding-top:20px; border-top:1px solid var(--z-line);
  font-family:var(--serif); font-size:clamp(1.02rem,2vw,1.2rem); line-height:1.5;
  color:var(--z-blue-deep); text-align:center;
}
@media (max-width:680px){ .z-creed blockquote{ padding:15px 17px; } .z-creed blockquote p{ font-size:.99rem; } }
.z-trace-wide{ max-width:620px; margin-top:22px; }

/* =====================================================================
   OVERVIEW — "What's here" site map
   Answers "where is everything?" before a visitor has to hunt the nav.
   ===================================================================== */
.site-map{ margin:52px 0 8px; }
.site-map h2{ margin:0 0 4px; font-size:1.3rem; }
.site-map-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(258px,1fr));
  gap:16px; margin-top:20px;
}
.map-card{
  appearance:none; cursor:pointer; text-align:left; font-family:inherit;
  background:var(--card-2); border:1px solid var(--line,var(--line)); border-radius:15px;
  padding:22px 22px 18px; display:flex; flex-direction:column; gap:7px;
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.map-card:hover{
  transform:translateY(-2px); border-color:var(--accent-line);
  box-shadow:0 14px 34px rgba(20,26,38,.10);
}
.map-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.map-n{
  font-family:var(--sans); font-size:.7rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-tint);
  border:1px solid var(--accent-line); border-radius:20px; padding:3px 10px; width:fit-content;
}
.map-card h3{ margin:4px 0 0; font-size:1.08rem; }
.map-card p{ margin:0; font-size:.93rem; line-height:1.56; color:var(--muted,var(--muted)); flex:1; }
.map-go{
  font-family:var(--sans); font-size:.85rem; font-weight:700; color:var(--accent); margin-top:6px;
}
.map-card-feature{ background:linear-gradient(160deg,var(--card-2) 0%,var(--accent-tint) 100%); border-color:var(--accent-line); }

/* Resume & Contact — single destination layout */
.contact-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:22px; align-items:start; }
.contact-card{
  background:var(--card-2); border:1px solid var(--line,var(--line));
  border-radius:15px; padding:26px 28px;
}
.contact-dl{ margin:0 0 18px; display:grid; gap:12px; }
.contact-dl > div{ display:grid; grid-template-columns:130px 1fr; gap:12px; align-items:baseline; }
.contact-dl dt{
  font-family:var(--sans); font-size:.68rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted,var(--muted)); margin:0;
}
.contact-dl dd{ margin:0; color:var(--ink,var(--ink)); font-size:1rem; }
.contact-note{
  margin:0 0 20px; padding-top:16px; border-top:1px solid var(--line,var(--line));
  color:var(--muted,var(--muted)); line-height:1.62; font-size:.96rem;
}
.contact-live{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line,var(--line));
  font-size:.92rem; color:var(--muted,var(--muted)); display:flex; gap:9px; flex-wrap:wrap;
}
.contact-live .sep{ opacity:.5 }
@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-dl > div{ grid-template-columns:110px 1fr; }
}

/* =====================================================================
   SELECTED WORK — filter + search
   Replaces stacked group sections, which tiled horizontally inside the
   grid container and could not scale past a couple of dozen items.
   ===================================================================== */
.work-controls{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin:22px 0 14px;
}
/* Flex/grid children default to min-width:auto, so any nowrap horizontal
   scroller inside one will push its parent wider than the viewport instead of
   scrolling. Every such scroller on this site needs this. */
.work-controls > *{ min-width:0; }
.work-filters{ min-width:0; max-width:100%; }
.work-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.work-filter{
  appearance:none; cursor:pointer; font-family:var(--sans); font-size:.87rem; font-weight:600;
  color:var(--muted,var(--muted)); background:transparent;
  border:1px solid var(--line,var(--line)); border-radius:30px; padding:8px 15px;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .15s, color .15s, border-color .15s;
}
.work-filter:hover{ background:var(--card-2); color:var(--ink,var(--ink)); }
.work-filter.active{ background:#1e2a24; border-color:#1e2a24; color:#fff; }
.work-filter:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.work-filter-n{
  font-size:.72rem; font-weight:700; padding:1px 7px; border-radius:20px;
  background:rgba(0,0,0,.07); color:var(--ink);
}
.work-filter.active .work-filter-n{ background:#3c4a41; color:#fff; }

.work-search{ position:relative; flex:0 1 268px; }
.work-search input{
  width:100%; font-family:var(--sans); font-size:.9rem; color:var(--ink,var(--ink));
  background:#fff; border:1px solid var(--line,var(--line)); border-radius:30px;
  padding:10px 34px 10px 16px; appearance:none;
}
.work-search input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.work-search-clear{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  appearance:none; border:0; background:none; cursor:pointer;
  font-size:1.15rem; line-height:1; color:var(--muted,var(--muted)); padding:5px 8px;
}
.work-count{
  margin:0 0 16px; font-family:var(--sans); font-size:.84rem; color:var(--muted,var(--muted));
}
.work-card[hidden]{ display:none !important; }
.work-none{
  margin:26px 0; padding:26px; text-align:center; color:var(--muted,var(--muted));
  background:var(--card-2); border:1px dashed var(--line,var(--line)); border-radius:14px;
}

/* Build standard — collapsed by default, below the work */
details.build-std{ margin:38px 0 0; padding:0; border-left-width:3px; }
details.build-std summary{
  cursor:pointer; list-style:none; padding:20px 26px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
details.build-std summary::-webkit-details-marker{ display:none; }
details.build-std summary strong{ font-family:var(--serif); font-size:1.12rem; color:var(--ink,var(--ink)); font-weight:600; }
.build-std-toggle{
  margin-left:auto; font-family:var(--sans); font-size:.82rem; font-weight:700; color:var(--accent);
}
details.build-std[open] .build-std-toggle::after{ content:" \2014 hide"; }
details.build-std .build-std-head,
details.build-std .build-std-list,
details.build-std .build-std-note{ padding-left:26px; padding-right:26px; }
details.build-std .build-std-note{ padding-bottom:24px; }
details.build-std .build-std-head p{ margin-top:0; }
@media (max-width:640px){
  .work-controls{ flex-direction:column; align-items:stretch; }
  .work-search{ flex:1 1 auto; }
  details.build-std summary{ padding:16px 18px; }
}

/* Detail view — back + pager bar */
.work-detail-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:22px;
}
.work-pager{ display:flex; align-items:center; gap:10px; }
.work-pagebtn{
  appearance:none; cursor:pointer; font-family:var(--sans); font-size:.85rem; font-weight:600;
  color:var(--ink,var(--ink)); background:#fff; border:1px solid var(--line,var(--line));
  border-radius:30px; padding:8px 15px; transition:background .15s, border-color .15s;
}
.work-pagebtn:hover{ background:var(--card-2); border-color:var(--line); }
.work-pagebtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.work-pos{
  font-family:var(--sans); font-size:.8rem; color:var(--muted,var(--muted));
  white-space:nowrap; min-width:64px; text-align:center;
}
@media (max-width:560px){
  .work-detail-bar{ flex-direction:column; align-items:stretch; }
  .work-pager{ justify-content:space-between; }
}

/* About — quick facts in the sidebar, headings in the narrative */
.about-facts{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:11px; }
.about-facts li{
  display:grid; gap:2px; font-size:.92rem; color:var(--ink,var(--ink)); line-height:1.45;
  padding-bottom:11px; border-bottom:1px solid var(--line-soft,#eceae4);
}
.about-facts li:last-child{ border-bottom:0; padding-bottom:0; }
.about-facts span{
  font-family:var(--sans); font-size:.65rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted,var(--muted));
}
.about-body h2{
  font-size:1.16rem; margin:34px 0 10px; padding-top:22px;
  border-top:1px solid var(--line-soft,#eceae4);
}
.about-body h2:first-of-type{ margin-top:30px; }

/* =====================================================================
   SECTION DIRECTORY — sticky left rail, generated from the section's own H2s
   ===================================================================== */
/* min-width:0 on both children: grid items default to min-width:auto, so the
   nowrap pill strip forced the column wider than the viewport (530px of
   horizontal overflow at 390px before this). */
.dir-layout{ display:grid; grid-template-columns:216px 1fr; gap:40px; align-items:start; }
.dir-layout > *{ min-width:0; }
.dir-rail, .dir-body{ min-width:0; }
.dir-rail{ position:sticky; top:92px; align-self:start; }
.dir-title{
  display:block; font-family:var(--sans); font-size:.64rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted,var(--muted));
  margin-bottom:12px; padding-left:14px;
}
.dir-rail ul{ list-style:none; margin:0; padding:0; border-left:2px solid var(--line,var(--line)); }
.dir-rail li{ margin:0; }
.dir-rail a{
  display:block; padding:9px 12px 9px 14px; margin-left:-2px;
  border-left:2px solid transparent;
  font-family:var(--sans); font-size:.87rem; line-height:1.4;
  color:var(--muted,var(--muted)); text-decoration:none;
  transition:color .15s, border-color .15s, background .15s;
}
.dir-rail a:hover{ color:var(--ink,var(--ink)); background:rgba(0,0,0,.03); }
.dir-rail a.active{ color:var(--accent); border-left-color:var(--accent); font-weight:700; }
.dir-rail a:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.dir-body > h2:first-child{ margin-top:0 !important; padding-top:0 !important; border-top:0 !important; }
.dir-body > h2{ scroll-margin-top:96px; }

@media (max-width:900px){
  /* Below 900 the rail becomes a horizontal strip that scrolls, so it never
     eats the width the content needs. */
  .dir-layout{ grid-template-columns:1fr; gap:0; }
  .dir-rail{
    position:sticky; top:0; z-index:5; margin:0 -4px 22px;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line,var(--line)); padding:8px 4px;
  }
  .dir-title{ display:none; }
  .dir-rail ul{
    display:flex; gap:6px; overflow-x:auto; border-left:0;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .dir-rail ul::-webkit-scrollbar{ display:none; }
  .dir-rail a{
    white-space:nowrap; padding:7px 13px; margin-left:0;
    border-left:0; border-radius:30px; font-size:.8rem;
    border:1px solid var(--line,var(--line));
  }
  .dir-rail a.active{ background:#1e2a24; border-color:#1e2a24; color:#fff; }
}

/* =====================================================================
   LIVE DEMO — the tool actually runs inside the case study
   The iframe is only created on click, so opening a project never costs
   a second page load nobody asked for.
   ===================================================================== */
.live-demo{
  margin:0 0 34px; border:1px solid var(--line,var(--line)); border-radius:15px;
  overflow:hidden; background:#1e2a24;
}
.live-head{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:12px 16px; background:#1e2a24; color:#eaf0ea;
}
.live-head strong{ font-family:var(--sans); font-size:.92rem; }
.live-dot{
  width:8px; height:8px; border-radius:50%; background:#5fbf85;
  box-shadow:0 0 0 3px rgba(61,220,132,.22);
}
.live-note{ font-family:var(--sans); font-size:.8rem; color:#8fa899; }
.live-full{
  margin-left:auto; background:rgba(255,255,255,.10); color:#fff;
  border:1px solid rgba(255,255,255,.22);
}
.live-full:hover{ background:rgba(255,255,255,.18); color:#fff; }
.live-frame{ position:relative; }
.live-start{
  appearance:none; border:0; padding:0; cursor:pointer; display:block; width:100%;
  position:relative; background:#1e2a24; line-height:0;
}
.live-start img{ width:100%; display:block; opacity:.42; transition:opacity .2s; }
.live-start:hover img{ opacity:.30; }
.live-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--sans); font-size:1rem; font-weight:700; color:#fff; line-height:1.3;
  text-shadow:0 2px 14px rgba(0,0,0,.55); padding:0 20px; text-align:center;
}
.live-play .tri{
  width:0; height:0; border-left:17px solid #fff;
  border-top:11px solid transparent; border-bottom:11px solid transparent;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5)); flex:0 0 auto;
}
.live-start:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; }
.live-iframe{
  width:100%; height:min(74vh,660px); border:0; display:block; background:#fff;
}
@media (max-width:640px){
  .live-iframe{ height:64vh; }
  .live-note{ display:none; }
  .live-play{ font-size:.88rem; }
}@media (max-width:600px){}


/* Dark-theme carry-over for shared chrome on the Zareli tab */
body.theme-zareli .site-footer .container{ color:var(--z-muted); }
body.theme-zareli .z-btn{ background:var(--z-blue); color:#12161a; font-weight:700; }
body.theme-zareli .z-btn:hover{ background:var(--z-blue-lit); color:#12161a; }
body.theme-zareli .btn{ color:var(--z-body); background:var(--z-panel); border-color:var(--z-line); }
body.theme-zareli .btn:hover{ color:var(--z-ink); border-color:var(--z-blue-deep); }
.z-do h4, .z-step-head h4, .z-stage h4{ color:var(--z-ink); }
.z-note{ border-left-color:var(--z-blue-deep); }
.z-trace figcaption{ color:var(--z-muted); }
.z-trace figcaption strong{ color:var(--z-ink); }
.z-reveal-head p, .z-shot-note{ color:var(--z-muted); }
.z-thesis p, .z-hero-thesis p{ color:var(--z-ink); }
.z-thesis p em, .z-hero-thesis p em{ color:var(--z-blue-lit); }
.z-creed-closer{ color:var(--z-blue-lit); border-top-color:var(--z-line); }
.z-lead em{ color:var(--z-blue-lit); }
/* Flat: no drop-shadow bloom on the wordmark either. */
.z-eyebrow{ filter:none; }


/* =====================================================================
   MOBILE — 360-540px. Everything below is inside a max-width query, so
   the desktop layout is untouched by construction, not by care.
   ===================================================================== */
@media (max-width:540px){
  :root{ --pad: 16px; }

  /* Masthead: name, role, search, then nav. Card drops below. */
  .masthead-inner{ padding:14px var(--pad) 0; }
  .identity{ gap:12px; }
  .identity .name{ font-size:1.24rem; }
  .identity .role{ font-size:.84rem; line-height:1.45; }
  .biz-card{ width:100%; order:3; }/* Section chrome */
  .panel.section{ padding-left:var(--pad); padding-right:var(--pad); }
  .section-head h1{ font-size:1.6rem; line-height:1.2; }
  .section-head .lead{ font-size:.96rem; }
  .eyebrow{ font-size:.62rem; }

  /* Overview */
  .statement{ font-size:1.1rem; line-height:1.42; }
  .site-map-grid{ grid-template-columns:1fr; gap:12px; }
  .map-card{ padding:18px; }
  .aside-card{ padding:20px 18px; }

  /* Selected Work */
  .work-controls{ gap:12px; margin:16px 0 10px; }
  .work-filters{ gap:6px; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px;
    scrollbar-width:none; -ms-overflow-style:none; }
  .work-filters::-webkit-scrollbar{ display:none; }
  .work-filter{ flex:0 0 auto; font-size:.8rem; padding:7px 12px; }
  .work-grid{ gap:16px; }
  .work-card-body{ padding:16px 16px 18px; }
  .work-detail-head{ grid-template-columns:1fr; gap:14px; }
  .work-detail-thumb{ width:100%; }
  .work-detail-title{ font-size:1.34rem; }
  .tmpl-actions{ gap:7px; }
  .tmpl-actions .btn{ flex:1 1 auto; justify-content:center; }

  /* About */
  .about{ grid-template-columns:1fr; gap:22px; }
  .about-side{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
  .about-side .avatar{ margin:0; }
  .about-facts{ grid-column:1 / -1; }
  .about-body h2{ font-size:1.06rem; margin-top:26px; padding-top:18px; }

  /* Contact */
  .contact-grid{ grid-template-columns:1fr; }
  .contact-card{ padding:20px 18px; }
  .contact-dl > div{ grid-template-columns:1fr; gap:2px; }

  /* Zareli */
  .zareli{ padding:18px 14px 32px; border-radius:16px; }
  .z-eyebrow{ font-size:.82rem; letter-spacing:.26em; }
  .z-tagline{ font-size:1rem; }
  .z-hero-thesis p{ font-size:1.08rem; }
  .z-reveal-head h2{ font-size:1.24rem; }
  .z-h2{ font-size:1.24rem; }

  /* Type scale — stop long words breaking layout */
  h1,h2,h3{ overflow-wrap:anywhere; }
  pre, code{ overflow-x:auto; max-width:100%; }
  table{ display:block; overflow-x:auto; }
}

/* Tap targets: 44px minimum on any touch device, at any width. */
@media (hover:none) and (pointer:coarse){
  .nav button, .work-filter, .z-sheet, .dir-rail a, .btn, .work-pagebtn{ min-height:44px; }
  .z-pin{ width:34px; height:34px; }
}

/* =====================================================================
   WORKING WITH AI — the teaching area
   Written outward. The two-column split IS the argument, so it carries
   the visual weight rather than a decorative header.
   ===================================================================== */
.two-ways{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:8px 0 0; }
.tw-card{ padding:26px 28px; border-radius:15px; border:1px solid var(--line,var(--line)); background:var(--card-2); }
.tw-with{ border-left:3px solid var(--accent); }
.tw-for{ border-left:3px solid #0d8a54; }
.tw-k{
  display:inline-block; font-family:var(--sans); font-size:.65rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; margin-bottom:10px;
}
.tw-with .tw-k{ color:var(--accent-deep); }
.tw-for .tw-k{ color:#0a6b41; }
.tw-card h2{ font-size:1.2rem; margin:0 0 10px; padding:0; border:0; }
.tw-card p{ margin:0 0 12px; font-size:.97rem; line-height:1.62; color:var(--muted,var(--muted)); }
.tw-note{ padding-top:12px; border-top:1px solid var(--line,var(--line)); margin-bottom:0 !important; }
.tw-note strong{ color:var(--ink,var(--ink)); }
.tw-thesis{
  margin:22px 0 8px; padding:18px 22px; border-radius:13px; background:var(--accent-tint);
  border:1px solid var(--accent-line); font-family:var(--serif); font-size:1.06rem;
  line-height:1.5; color:var(--ink,var(--ink)); text-align:center;
}

/* Packs */
.pack-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:16px; margin-bottom:8px; }
.pack{
  display:flex; flex-direction:column; gap:9px; padding:22px;
  border:1px solid var(--line,var(--line)); border-radius:14px; background:var(--surface,#fff);
}
.pack-n{
  font-family:var(--sans); font-size:.64rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-tint);
  border:1px solid var(--accent-line); border-radius:20px; padding:3px 10px; width:fit-content;
}
.pack h3{ margin:2px 0 0; font-size:1.06rem; }
.pack p{ margin:0; font-size:.9rem; line-height:1.58; color:var(--muted,var(--muted)); flex:1; }
.pack .btn{ width:fit-content; margin-top:4px; }
.pack-key{ border-color:#9dd4bb; background:#f4fbf7; }
.pack-key .pack-n{ color:#0d8a54; background:#e4f5ed; border-color:#9dd4bb; }
.pack-all{ background:linear-gradient(160deg,var(--card-2) 0%,var(--accent-tint) 100%); border-color:var(--accent-line); }

/* Starter cards */
.starter{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px; }
.start-card{
  padding:24px 26px; border:1px solid var(--line,var(--line)); border-radius:15px; background:var(--card-2);
}
.start-card-key{ background:#f4fbf7; border-color:#9dd4bb; }
.start-n{
  display:inline-block; font-family:var(--sans); font-size:.64rem; font-weight:800;
  letter-spacing:.14em; color:var(--muted,var(--muted)); margin-bottom:8px;
}
.start-card h3{ margin:0 0 10px; font-size:1.1rem; }
.start-why{ margin:0 0 14px; font-size:.94rem; line-height:1.6; color:var(--muted,var(--muted)); }
.start-prompt{
  margin:0 0 12px; padding:16px 18px; background:#fff; border:1px solid var(--line,var(--line));
  border-radius:11px; font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
  font-size:.82rem; line-height:1.62; color:var(--ink,var(--ink));
  white-space:pre-wrap; overflow-wrap:anywhere; max-height:250px; overflow-y:auto;
}
.defend{ background:#fff; border:1px solid #9dd4bb; border-radius:11px; padding:18px 20px; }
.defend p{ margin:0 0 10px; font-size:.93rem; line-height:1.6; color:var(--muted,var(--muted)); }
.defend p:last-child{ margin-bottom:0; }
.defend-q{
  font-family:var(--serif); font-size:1.08rem !important; color:var(--ink,var(--ink)) !important;
  line-height:1.4 !important; padding-bottom:12px; border-bottom:1px solid #cdead9;
}
.defend strong{ color:var(--ink,var(--ink)); }

/* The signed note — the only first-person block in the section */
.signed{
  margin:34px 0 8px; padding:22px 26px; border-left:3px solid var(--line,var(--line));
  background:var(--card-2); border-radius:0 13px 13px 0;
}
.signed-k{
  display:block; font-family:var(--sans); font-size:.64rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted,var(--muted)); margin-bottom:9px;
}
.signed p{ margin:0 0 10px; font-size:.95rem; line-height:1.65; color:var(--muted,var(--muted)); }
.signed-name{ font-family:var(--serif); font-style:italic; color:var(--ink,var(--ink)); margin-bottom:0 !important; }

@media (max-width:820px){
  .two-ways, .starter{ grid-template-columns:1fr; }
  .tw-card{ padding:20px; }
  .tw-thesis{ font-size:.98rem; padding:15px 17px; text-align:left; }
}


/* =====================================================================
   ZARELI — editorial structure
   The centred-stack hero is the other half of the generated look. These
   rules add the things a designed page has and a generated one doesn't:
   a visible measure, hairline rules that mean something, a second accent
   that earns its place, and asymmetry.
   ===================================================================== */

/* Wordmark sits on a rule, with the brass as a deliberate second voice */
.z-hero{ padding-top:8px; }
.z-eyebrow{
  position:relative; display:inline-block; padding-bottom:14px; margin-bottom:26px;
  background:none; -webkit-text-fill-color:currentColor; color:var(--z-ink);
  letter-spacing:.62em; font-size:1rem; text-indent:.62em;
}
.z-eyebrow::after{
  content:""; position:absolute; left:0; bottom:0;
  width:56px; height:2px; background:var(--z-blue);
}

/* Tagline gets a real measure and a hanging label instead of a centred blob */
.z-tagline{
  position:relative; text-align:left; max-width:56ch; margin:26px auto 20px;
  padding-left:22px; border-left:2px solid var(--z-line);
}
.z-hero-thesis{ text-align:left; max-width:56ch; padding-left:22px; }
.z-hero-thesis p{ font-size:clamp(1.3rem,2.6vw,1.86rem); }
.z-status{ margin-left:22px; }
.z-hero{ text-align:left; }
.z-video-wrap{ margin:0; }

/* Section headings carry a numeral in the margin — editorial, not decorative */
.z-pane > .z-h2{
  position:relative; padding-left:0;
}
.z-block{ position:relative; }

/* Hairline rules that separate rather than glow */
.z-panes{ box-shadow:none; }
.z-card{ box-shadow:none; }
.z-card:hover{ border-color:var(--z-blue-deep); }
.z-stage{ box-shadow:none; }

/* The brass appears wherever something is human-decided rather than computed */
.z-note{ border-left-color:var(--z-muted); }
.z-creed blockquote{ border-left-color:var(--z-muted); }
.z-creed-closer{ color:var(--z-ink); }
.z-scope{ border-color:var(--z-line); background:var(--z-panel-2); }
.z-scope-k{ color:var(--z-muted); }
.z-scope-arrow{ color:var(--z-muted); }
.z-reveal-eyebrow{ color:var(--z-muted); }
.z-do-mark{ color:var(--z-muted); }
.z-thesis{ border-left-color:var(--z-muted); }

@media (max-width:680px){
  .z-hero{ text-align:center; }
  .z-eyebrow{ letter-spacing:.3em; text-indent:.3em; }
  .z-tagline, .z-hero-thesis{ text-align:left; padding-left:16px; max-width:none; }
  .z-status{ margin-left:16px; }
}

/* Everything in the hero hangs off one left edge. The video, the thesis, the
   tagline and the status pill share a single alignment line — which is the
   whole point of going editorial rather than centred. */
.z-hero .z-video-wrap{ margin-left:0; margin-right:auto; max-width:900px; }
.z-hero-thesis{ margin-left:0 !important; margin-right:auto; }
.z-tagline{ margin-left:0 !important; margin-right:auto; }
.z-hero-thesis, .z-tagline{ padding-left:0; border-left:0; }
.z-tagline{ padding-left:20px; border-left:2px solid var(--z-line); }
.z-status{ margin-left:0; }
.z-reveal-head{ text-align:left; margin-left:0; }
.z-reveal-head h2{ max-width:24ch; }
@media (max-width:680px){
  .z-hero .z-video-wrap{ max-width:none; }
  .z-reveal-head{ text-align:left; }
}

/* =====================================================================
   PROMPT LIBRARY — topic previews and topic pages
   The landing view shows a few per topic and never grows; the topic
   pages carry the volume. Built to read the same at 26 or 260.
   ===================================================================== */
.topic{ margin:0 0 34px; padding-bottom:30px; border-bottom:1px solid var(--line,var(--line)); }
.topic:last-child{ border-bottom:0; padding-bottom:6px; }
.topic-h{ display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; margin-bottom:16px; }
.topic-h > div:first-child{ flex:1 1 320px; min-width:0; }
.topic-h h3{ margin:0 0 5px; font-size:1.18rem; display:flex; align-items:center; gap:10px; }
.topic-n{
  font-family:var(--sans); font-size:.66rem; font-weight:800; letter-spacing:.1em;
  color:var(--accent); background:var(--accent-tint); border:1px solid var(--accent-line);
  border-radius:20px; padding:2px 9px;
}
.topic-h p{ margin:0; font-size:.94rem; line-height:1.58; color:var(--muted,var(--muted)); max-width:70ch; }
.topic-acts{ display:flex; gap:8px; flex-wrap:wrap; }

.pr-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.pr-grid-full{ grid-template-columns:1fr; gap:16px; max-width:78ch; }
.pr{
  display:flex; flex-direction:column; gap:8px; padding:18px 20px;
  border:1px solid var(--line,var(--line)); border-radius:13px; background:var(--card-2);
}
.pr h4{ margin:0; font-size:1rem; line-height:1.35; }
.pr-use{ margin:0; font-size:.88rem; line-height:1.55; color:var(--muted,var(--muted)); flex:1; }
.pr-use span, .pr-why span{
  font-family:var(--sans); font-size:.62rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); margin-right:6px;
}
.pr-open{ width:fit-content; margin-top:2px; }
.pr-full{ background:var(--surface,#fff); scroll-margin-top:100px; }
.pr-body{
  margin:6px 0 0; padding:16px 18px; background:var(--card-2);
  border:1px solid var(--line,var(--line)); border-radius:10px;
  font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
  font-size:.82rem; line-height:1.62; color:var(--ink,var(--ink));
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.pr-actions{ display:flex; gap:8px; }
.pr-why{
  margin:4px 0 0; padding-top:12px; border-top:1px solid var(--line,var(--line));
  font-size:.88rem; line-height:1.58; color:var(--muted,var(--muted));
}
.pr-why span{ color:#0d8a54; }
.pr-flash{ animation:prflash 1.4s ease-out; }
@keyframes prflash{ 0%{ box-shadow:0 0 0 3px var(--accent-line); } 100%{ box-shadow:0 0 0 0 transparent; } }

.topic-more{
  appearance:none; cursor:pointer; margin-top:14px; width:100%;
  background:transparent; border:1px dashed var(--line,var(--line)); border-radius:11px;
  padding:13px; font-family:var(--sans); font-size:.88rem; font-weight:600; color:var(--accent);
  transition:background .14s, border-color .14s;
}
.topic-more:hover{ background:var(--accent-tint); border-color:var(--accent-line); }

.pack-all-row{
  display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  margin:8px 0 0; padding:20px 24px; border-radius:14px;
  background:linear-gradient(160deg,var(--card-2) 0%,var(--accent-tint) 100%); border:1px solid var(--accent-line);
}
.pack-all-row strong{ color:var(--ink,var(--ink)); }

/* Topic page */
.topic-back{ margin-bottom:20px; }
.topic-head{ margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--line,var(--line)); }
.topic-head h2{ margin:6px 0 8px; font-size:1.6rem; }
.topic-head p{ margin:0 0 16px; color:var(--muted,var(--muted)); max-width:74ch; line-height:1.6; }
.kicker-b{
  font-family:var(--sans); font-size:.64rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
@media (max-width:640px){
  .pr-grid{ grid-template-columns:1fr; }
  .topic-acts{ width:100%; }
  .topic-acts .btn{ flex:1 1 auto; justify-content:center; }
  .pack-all-row{ padding:18px; }
  .pack-all-row .btn{ width:100%; justify-content:center; }
}

/* Access block — the honest note about invite-only, and the route out */
.z-access{
  display:grid; grid-template-columns:1.5fr auto; grid-template-areas:"k k" "h h" "body btns";
  gap:6px 28px; align-items:center;
  margin:44px 0 0; padding:30px 32px; border-radius:16px;
  background:var(--z-panel-2); border:1px solid var(--z-line);
  border-left:3px solid var(--z-blue);
}
.z-access-k{ grid-area:k;
  display:block; font-family:var(--sans); font-size:.64rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; color:var(--z-blue); margin-bottom:9px;
}
.z-access .btn-row{ flex-direction:column; align-items:stretch; gap:9px; min-width:210px; }
@media (max-width:820px){
  .z-access{ grid-template-columns:1fr; padding:24px 22px; }
  .z-access .btn-row{ min-width:0; }
}

.z-access > .z-h2{ grid-area:h; margin-bottom:6px; }
.z-access-body{ grid-area:body; }
.z-access .btn-row{ grid-area:btns; }
@media (max-width:820px){
  .z-access{ grid-template-columns:1fr; grid-template-areas:"k" "h" "body" "btns"; }
}

/* Directory rail on the dark Zareli tab — it was inheriting light-theme colors
   and failing contrast at 2.95. */
body.theme-zareli .dir-title{ color:var(--z-muted); }
body.theme-zareli .dir-rail ul{ border-left-color:var(--z-line); }
body.theme-zareli .dir-rail a{ color:var(--z-body); }
body.theme-zareli .dir-rail a:hover{ color:var(--z-ink); background:rgba(255,255,255,.05); }
body.theme-zareli .dir-rail a.active{ color:var(--z-blue); border-left-color:var(--z-blue); }
@media (max-width:900px){
  body.theme-zareli .dir-rail{
    background:rgba(36,39,43,.94); border-bottom-color:var(--z-line);
  }
  body.theme-zareli .dir-rail a{ border-color:var(--z-line); }
  body.theme-zareli .dir-rail a.active{ background:var(--z-blue); border-color:var(--z-blue); color:#12161a; }
}

/* Inline links inside the dark Zareli tab — the light-theme .textlink colour
   fails contrast on slate. */
body.theme-zareli .textlink{ color:var(--z-blue-lit); }
body.theme-zareli .textlink:hover{ color:var(--z-ink); }

/* =====================================================================
   ZARELI — centred hero, numbered section dividers, one clean ending
   ===================================================================== */

/* ---- Hero: centred ---- */
.z-hero{ text-align:center; padding:14px 0 30px; }
.z-eyebrow{
  position:relative; display:inline-block; padding-bottom:14px; margin-bottom:26px;
  background:none; -webkit-text-fill-color:currentColor; color:var(--z-ink);
  letter-spacing:.6em; font-size:1rem; text-indent:.6em; filter:none;
}
.z-eyebrow::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:56px; height:2px; background:var(--z-blue);
}
.z-hero .z-video-wrap{ margin:0 auto; max-width:900px; }
.z-hero-thesis{
  text-align:center; max-width:60ch; margin:26px auto 18px !important;
  padding-left:0; border-left:0;
}
.z-hero-thesis p{ font-size:clamp(1.28rem,2.6vw,1.8rem); }
.z-tagline{
  text-align:center; max-width:62ch; margin:0 auto 20px !important;
  padding-left:0; border-left:0;
}
.z-status{ margin:0 auto; }

/* ---- Section dividers: a rule, a numeral, room to breathe ---- */
.z-block[data-sec], .z-access[data-sec]{
  position:relative; margin-top:64px; padding-top:34px;
  border-top:1px solid var(--z-line);
}
.z-block[data-sec]::before, .z-access[data-sec]::before{
  content:attr(data-sec);
  position:absolute; top:-9px; left:0;
  background:var(--z-bg); padding-right:14px;
  font-family:var(--sans); font-size:.68rem; font-weight:800;
  letter-spacing:.2em; color:var(--z-blue);
}
.z-block[data-sec] > .z-h2{ margin-top:0; }

/* ---- The ending: one block, actions in a row ---- */
.z-access{
  display:block; margin:64px 0 8px; padding:34px 0 8px;
  background:none; border:0; border-top:1px solid var(--z-line); border-radius:0;
}
.z-access-k{
  display:block; font-family:var(--sans); font-size:.64rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; color:var(--z-blue); margin-bottom:9px;
}
.z-access > .z-h2{ margin-bottom:12px; }
.z-access .z-lead{ max-width:74ch; }
.z-access-note{
  margin-top:16px !important; padding-top:16px;
  border-top:1px solid var(--z-line); color:var(--z-muted) !important;
}
.z-access-note strong{ color:var(--z-ink); }
.z-actions{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:26px;
}
.z-actions .btn{ justify-content:center; }

/* the close block is gone; keep any stragglers tidy */
.z-close{ display:none; }

@media (max-width:680px){
  .z-eyebrow{ letter-spacing:.3em; text-indent:.3em; font-size:.9rem; }
  .z-block[data-sec], .z-access[data-sec]{ margin-top:46px; padding-top:28px; }
  .z-actions{ flex-direction:column; }
  .z-actions .btn{ width:100%; }
}


/* The primary action must win against the generic dark-theme .btn rule, which has
   the same specificity and appears later in the file. Stated explicitly so source
   order can't decide it. */
body.theme-zareli .z-actions .z-btn,
body.theme-zareli a.z-btn,
body.theme-zareli button.z-btn{
  background:var(--z-blue); color:#12161a; border:1px solid var(--z-blue);
  font-weight:700; box-shadow:none;
}
body.theme-zareli .z-actions .z-btn:hover,
body.theme-zareli a.z-btn:hover,
body.theme-zareli button.z-btn:hover{
  background:var(--z-blue-lit); border-color:var(--z-blue-lit); color:#12161a;
}

/* =====================================================================
   OVERVIEW — Zareli banner beneath the four cards
   Full width, its own weight, so the product reads as a destination
   rather than a peer of the portfolio sections.
   ===================================================================== */
.zbanner{
  appearance:none; cursor:pointer; text-align:left; font-family:inherit;
  display:grid; grid-template-columns:260px 1fr auto; align-items:center; gap:26px;
  width:100%; margin-top:16px; padding:0 28px 0 0;
  background:#191b1d; border:1px solid #2c2f33; border-radius:15px;
  overflow:hidden; color:#c8c3ba;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.zbanner:hover{
  border-color:#6aa8ff; transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(20,26,38,.18);
}
.zbanner:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.zbanner-img{
  display:block; align-self:stretch; min-height:150px;
  background:url("../assets/zareli/zareli-wall.jpg") center 42% / cover no-repeat;
}
.zbanner-body{ display:block; padding:24px 0; }
.zbanner-k{
  display:block; font-family:var(--sans); font-size:.64rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:#6aa8ff; margin-bottom:8px;
}
.zbanner-h{
  display:block; font-family:var(--serif); font-size:1.5rem; font-weight:600;
  color:#f2ece1; letter-spacing:.02em; margin-bottom:7px;
}
.zbanner-p{
  display:block; font-size:.94rem; line-height:1.58; color:#a9a49a; max-width:64ch;
}
.zbanner-cta{
  font-family:var(--sans); font-size:.9rem; font-weight:700; color:#6aa8ff; white-space:nowrap;
}
@media (max-width:820px){
  .zbanner{ grid-template-columns:1fr; padding:0 0 22px; gap:0; }
  .zbanner-img{ min-height:120px; }
  .zbanner-body{ padding:20px 22px 12px; }
  .zbanner-cta{ padding:0 22px; }
}

/* =====================================================================
   ZARELI — a true break between the reveal and the reference sections
   The hero and product shot are the pitch; everything below is detail.
   Containing the second half makes that read as a separate place rather
   than more scroll.
   ===================================================================== */
.z-break{
  display:flex; align-items:center; gap:18px;
  margin:64px 0 0; padding:0;
}
.z-break-rule{ flex:1 1 auto; height:1px; background:var(--line); }
.z-break-label{
  flex:0 0 auto; font-family:var(--sans); font-size:.66rem; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
/* Inside the Zareli theme the break uses that tab's own tokens instead. */
body.theme-zareli .z-break-rule{ background:var(--z-line); }
body.theme-zareli .z-break-label{ color:var(--z-muted); }

/* The reference half sits in its own well */
.zareli .dir-layout{
  margin-top:30px; padding:36px 34px 40px;
  background:var(--z-bg-2); border:1px solid var(--z-line); border-radius:18px;
}
/* section numerals knock out of the well's background, not the page's */
.zareli .z-block[data-sec]::before,
.zareli .z-access[data-sec]::before{ background:var(--z-bg-2); }
.zareli .dir-rail{ top:100px; }
.zareli .z-block[data-sec]:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.zareli .z-block[data-sec]:first-of-type::before{ display:none; }

@media (max-width:900px){
  .zareli .dir-layout{ padding:24px 18px 30px; }
}
@media (max-width:680px){
  .z-break{ margin-top:46px; }
  .z-break-label{ letter-spacing:.14em; font-size:.6rem; }
}

/* =====================================================================
   LIBRARY — hub, doors, collections, catalog, facets
   The hub is fixed-size; only the catalog grows. That's what lets this
   scale from 21 resources to 300 without a redesign.
   ===================================================================== */
.lib-search{ position:relative; max-width:520px; margin:0 0 26px; }
.lib-search input{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:30px;
  padding:14px 40px 14px 20px; appearance:none;
}
.lib-search input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.lib-q-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  appearance:none; border:0; background:none; cursor:pointer;
  font-size:1.3rem; line-height:1; color:var(--muted); padding:5px 10px;
}
.lib-search-inline{ margin:0; max-width:340px; }
.lib-search-inline input{ padding:10px 16px; font-size:.92rem; }

.lib-doors{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:44px; }
.lib-door{
  appearance:none; cursor:pointer; text-align:left; font-family:inherit;
  display:flex; flex-direction:column; gap:9px; padding:26px 28px;
  background:var(--card-2); border:1px solid var(--line); border-radius:16px;
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.lib-door:hover{ transform:translateY(-2px); border-color:var(--accent-line);
  box-shadow:0 14px 34px rgba(34,48,42,.09); }
.lib-door:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lib-door-n{
  font-family:var(--sans); font-size:1.9rem; font-weight:800; line-height:1;
  color:var(--accent);
}
.lib-door h3{ margin:0; font-size:1.12rem; }
.lib-door p{ margin:0; font-size:.94rem; line-height:1.58; color:var(--muted); flex:1; }
.lib-door-go{ font-family:var(--sans); font-size:.88rem; font-weight:700; color:var(--accent); }

.lib-h2{ margin:0 0 4px; font-size:1.2rem; }
.lib-sub{ margin:0 0 18px; font-size:.94rem; }
.lib-colls{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin-bottom:44px; }
.lib-coll{
  appearance:none; cursor:pointer; text-align:left; font-family:inherit;
  display:grid; gap:5px; padding:17px 19px; background:#fff;
  border:1px solid var(--line); border-radius:13px;
  transition:border-color .15s, background .15s;
}
.lib-coll:hover{ border-color:var(--accent); background:var(--accent-tint); }
.lib-coll:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lib-coll-n{
  font-family:var(--sans); font-size:.64rem; font-weight:800; letter-spacing:.1em;
  color:var(--accent); background:var(--accent-tint); border:1px solid var(--accent-line);
  border-radius:20px; padding:2px 9px; width:fit-content;
}
.lib-coll strong{ color:var(--ink); font-size:.99rem; line-height:1.35; }
.lib-coll-note{ font-size:.85rem; color:var(--muted); line-height:1.5; }

.lib-recent{ margin-bottom:38px; }

/* Catalog */
.lib-back{ margin-bottom:18px; }
.lib-cat-head{ margin-bottom:18px; }
.lib-controls{ margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.lib-facets{ display:grid; gap:10px; margin-top:14px; }
.lib-facet{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.lib-facet-k{
  flex:0 0 108px; font-family:var(--sans); font-size:.66rem; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
}
.lib-chip{
  appearance:none; cursor:pointer; font-family:var(--sans); font-size:.79rem; font-weight:600;
  color:var(--muted); background:#fff; border:1px solid var(--line);
  border-radius:30px; padding:5px 12px; transition:background .14s, color .14s, border-color .14s;
}
.lib-chip:hover{ background:var(--accent-tint); color:var(--ink); }
.lib-chip.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.lib-chip:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.lib-clear{ margin-top:14px; }

.lib-type{
  display:inline-block; font-family:var(--sans); font-size:.6rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border-radius:20px;
  margin-bottom:7px; color:var(--accent); background:var(--accent-tint); border:1px solid var(--accent-line);
}
.lib-type-tool, .lib-type-builder, .lib-type-tracker{ color:#6a4a16; background:#efe7d8; border-color:#d9cbb2; }
.lib-type-template, .lib-type-resource{ color:#3f4a86; background:#eceefb; border-color:#c9cfef; }
.lib-meta{
  list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:5px;
}
.lib-meta li{
  font-family:var(--sans); font-size:.72rem; color:var(--muted);
  background:var(--card-2); border-radius:20px; padding:2px 9px;
}

@media (max-width:760px){
  .lib-doors{ grid-template-columns:1fr; }
  .lib-facet-k{ flex:1 1 100%; }
  .lib-search input{ font-size:.95rem; }
}

/* =====================================================================
   REQUEST FLOW — two entrances, one form
   ===================================================================== */
.lib-req-line{ margin:-12px 0 26px; font-size:.92rem; color:var(--muted); }
.lib-empty{
  text-align:center; padding:44px 26px; margin-top:8px;
  background:var(--card-2); border:1px dashed var(--line); border-radius:16px;
}
.lib-empty h3{ margin:0 0 8px; font-size:1.14rem; }
.lib-empty p{ margin:0 auto 18px; max-width:56ch; color:var(--muted); line-height:1.6; }
.lib-empty .btn-row{ justify-content:center; }

.req{ position:fixed; inset:0; z-index:300; display:flex; align-items:flex-start; justify-content:center; }
.req[hidden]{ display:none; }
.req-scrim{ position:absolute; inset:0; background:rgba(20,26,22,.5); backdrop-filter:blur(3px); }
.req-box{
  position:relative; margin:6vh auto; width:min(640px,calc(100vw - 28px));
  max-height:88vh; overflow-y:auto; padding:32px 34px 30px;
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 30px 80px rgba(20,26,22,.34);
}
.req-x{
  position:absolute; top:14px; right:16px; appearance:none; border:0; background:none;
  font-size:1.6rem; line-height:1; cursor:pointer; color:var(--muted); padding:2px 6px;
}
.req-x:hover{ color:var(--ink); }
.req-box h2{ margin:6px 0 8px; font-size:1.36rem; line-height:1.25; }
.req-lead{ margin:0 0 20px; color:var(--muted); line-height:1.6; }
.req-eg{
  margin:0 0 22px; padding:14px 17px; background:var(--accent-tint);
  border:1px solid var(--accent-line); border-radius:11px; display:grid; gap:6px;
}
.req-eg span{
  font-family:var(--sans); font-size:.63rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent-deep);
}
.req-eg em{ font-size:.9rem; color:var(--ink); line-height:1.5; }
.req-field{ margin-bottom:18px; }
.req-field label{
  display:block; margin-bottom:6px; font-family:var(--sans); font-size:.72rem;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.req-field textarea, .req-field input[type=email]{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  font:inherit; font-size:.95rem; color:var(--ink); background:#fff; resize:vertical;
}
.req-field textarea:focus, .req-field input:focus{
  outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);
}
.req-help{ margin:6px 0 0; font-size:.82rem; color:var(--muted); line-height:1.5; }
.req-chips{ display:flex; gap:7px; flex-wrap:wrap; }
.req-chip{
  appearance:none; cursor:pointer; font-family:var(--sans); font-size:.85rem; font-weight:600;
  color:var(--muted); background:#fff; border:1px solid var(--line);
  border-radius:30px; padding:8px 15px; transition:background .14s, color .14s, border-color .14s;
}
.req-chip:hover{ background:var(--accent-tint); color:var(--ink); }
.req-chip.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.req-chip:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.req-optional{
  padding:16px 18px; margin-bottom:18px; background:var(--card-2);
  border:1px solid var(--line); border-radius:11px;
}
.req-optional .req-field:last-child{ margin-bottom:0; }
.req-promise{
  margin:0 0 20px; padding:14px 17px; background:#fff; border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0; font-size:.9rem; line-height:1.6; color:var(--muted);
}
.req-promise strong{ color:var(--ink); }
.req-actions{ display:flex; gap:9px; flex-wrap:wrap; }
.req-err{
  margin:12px 0 0; padding:10px 13px; background:#f7e6e4; border:1px solid #e5b8b3;
  border-radius:9px; font-size:.88rem; color:#8f2018;
}
@media (max-width:560px){
  .req-box{ margin:0; width:100vw; max-height:100vh; border-radius:0; padding:26px 18px; }
  .req-actions .btn{ flex:1 1 auto; justify-content:center; }
}

/* =====================================================================
   TOOL LIBRARY — hub
   The tools are the design. Twenty-three of them, each built with its own
   palette, so the front door shows the collection rather than describing
   it. Everything here is scoped to .lib- so it cannot leak into the other
   tabs or fight the Zareli theme.
   ===================================================================== */
.lib-hero{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:52px; align-items:start; padding:6px 0 34px;
}
.lib-hero-copy{ min-width:0; }
.lib-kicker{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--sans);
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:30px; padding:6px 14px; margin-bottom:24px;
  background:var(--card);
}
.lib-kicker i{ width:7px; height:7px; border-radius:50%; background:var(--accent); font-style:normal; }
.lib-h1{
  font-size:clamp(2.1rem,4.6vw,3.3rem); line-height:1.07; letter-spacing:-.02em;
  margin-bottom:18px; max-width:26ch;
}
/* "today" is the point of the sentence, so it should read as emphasis rather
   than as an afterthought. Muted grey on its own line made it look orphaned;
   the accent underline puts the weight where the meaning is. */
.lib-h1 em{
  font-style:normal; color:var(--ink);
  box-shadow:inset 0 -.14em 0 var(--accent-line);
}
.lib-lead{ font-size:1.04rem; line-height:1.62; color:var(--body); max-width:56ch; margin-bottom:28px; }
.lib-lead strong{ color:var(--ink); }

.lib-find{ display:flex; gap:9px; max-width:600px; margin-bottom:12px; position:relative; }
.lib-find input{
  flex:1; background:var(--card); border:1px solid var(--line); border-radius:11px;
  padding:15px 17px; color:var(--ink); font:inherit; font-size:1rem;
}
.lib-find input::placeholder{ color:var(--muted); }
.lib-find input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.lib-sugg{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; box-shadow:0 18px 44px rgba(35,42,46,.16);
}
.lib-sugg[hidden]{ display:none; }
.lib-sugg button{
  display:flex; width:100%; gap:12px; align-items:center; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--line-soft);
  padding:10px 13px; color:var(--ink); font:inherit; cursor:pointer;
}
.lib-sugg button:last-child{ border-bottom:0; }
.lib-sugg button:hover{ background:var(--card-2); }
.lib-sugg img{ width:56px; height:35px; object-fit:cover; border-radius:4px; border:1px solid var(--line); flex:0 0 auto; }
.lib-sugg .t{ font-size:.92rem; }
.lib-sugg .m{ margin-left:auto; font-family:var(--sans); font-size:.68rem; color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.lib-sugg .none{ padding:14px; color:var(--body); font-size:.9rem; }
.lib-sugg .none strong{ color:var(--ink); }
.lib-ask{ font-size:.9rem; color:var(--muted); }

/* featured tool */
.lib-feat{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.lib-feat img{ width:100%; display:block; border-bottom:1px solid var(--line); }
.lib-feat .b{ padding:19px 21px 21px; }
.lib-feat .k{ font-family:var(--sans); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:8px; }
.lib-feat h3{ font-size:1.06rem; margin-bottom:6px; }
.lib-feat p{ color:var(--body); font-size:.9rem; line-height:1.55; margin-bottom:13px; }
.lib-feat .go{ font-size:.88rem; font-weight:700; color:var(--accent); }

/* the drifting wall */
.lib-wall{ display:grid; gap:22px; padding:14px 0 44px;
  /* clip-path on the strips controls painting; this controls layout, so
     off-screen tiles cannot widen the document */
  overflow-x:clip;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
/* Clip sideways only. `overflow:hidden` clips both axes, which cut the top of a
   hovered tile and swallowed its shadow; clip-path lets the tile grow upward and
   downward while still hiding the recycling at the edges. */
.lib-strip{ position:relative; height:161px; overflow:visible;
  clip-path:inset(-26px 0 -26px 0); }
.lib-tile{ position:absolute; top:0; left:0; width:196px; will-change:transform;
  cursor:pointer; text-align:left; padding:0; font:inherit; color:inherit;
  background:none; border:0; }
/* No transition on the outer element — it is repositioned instantly when a tile
   wraps around, and any transition on transform turns that jump into a visible
   flight across the screen. */
.lib-tile-in{ display:block; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); background:var(--card);
  transition:transform .22s ease, border-color .22s, box-shadow .22s; }
.lib-tile img{ width:100%; height:108px; object-fit:cover; display:block;
  filter:saturate(.9) brightness(.98); transition:filter .25s; }
.lib-tile .cap{ padding:8px 10px 9px; display:block; }
.lib-tile .nm{ display:block; font-size:.78rem; line-height:1.25; color:var(--ink); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-left:3px solid var(--tint,transparent); padding-left:7px; }
.lib-tile .ty{ display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-top:3px; padding-left:10px; }
.lib-tile:hover, .lib-tile:focus-visible{ z-index:5; }
.lib-tile:hover .lib-tile-in{ transform:translateY(-5px) scale(1.05); border-color:var(--accent);
  box-shadow:0 14px 30px rgba(35,42,46,.22); }
.lib-tile:hover img{ filter:none; }
.lib-tile-in img{ display:block; }
.lib-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lib-tile.said .lib-tile-in{ display:flex; align-items:center; justify-content:center; height:154px;
  background:var(--card-2); border-style:dashed; padding:14px; text-align:center; cursor:default; }
.lib-tile.said .lib-tile-in > span{ font-size:.85rem; line-height:1.45; color:var(--body); }
.lib-tile.said .lib-tile-in b{ display:block; font-size:.93rem; color:var(--accent); margin-bottom:6px; font-weight:700; }

/* doors */
.lib-doors{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line);
  border:1px solid var(--line); border-radius:16px; overflow:hidden; margin:0 0 60px; }
.lib-door{ background:var(--card); padding:30px 30px 28px; cursor:pointer; text-align:left;
  border:0; color:inherit; font:inherit; display:block; transition:background .18s; }
.lib-door:hover{ background:var(--card-2); }
.lib-door:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.lib-dk{ font-family:var(--sans); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  display:block; margin-bottom:11px; }
.lib-door.g .lib-dk{ color:var(--accent); }
.lib-door.t .lib-dk{ color:#8a6524; }
.lib-door h3{ font-size:1.2rem; margin-bottom:7px; }
.lib-door p{ color:var(--body); font-size:.94rem; line-height:1.6; margin-bottom:16px; max-width:44ch; }
.lib-go{ font-size:.9rem; font-weight:700; color:var(--accent); display:inline-block; transition:transform .2s; }
.lib-door:hover .lib-go{ transform:translateX(4px); }

/* sections */
.lib-sec{ margin-bottom:58px; }
.lib-sec-h{ display:flex; align-items:baseline; gap:15px; flex-wrap:wrap;
  padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.lib-sec-h h2{ font-size:1.24rem; }
.lib-sec-h span{ font-family:var(--sans); font-size:.74rem; color:var(--muted);
  letter-spacing:.1em; text-transform:uppercase; }
.lib-sec-h .r{ margin-left:auto; font-size:.86rem; text-transform:none; letter-spacing:0; }

.lib-shelf{ display:flex; gap:12px; overflow-x:auto; padding-bottom:10px; }
.lib-coll2{ flex:0 0 auto; min-width:230px; max-width:262px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:19px; cursor:pointer;
  text-align:left; color:inherit; font:inherit;
  transition:border-color .16s, background .16s, transform .16s; }
.lib-coll2:hover{ border-color:var(--accent); background:var(--card-2); transform:translateY(-2px); }
.lib-coll2:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lib-coll2 .c{ font-family:var(--sans); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:8px; }
.lib-coll2 strong{ display:block; font-size:.99rem; line-height:1.35; margin-bottom:6px; }
.lib-coll2 span:last-child{ font-size:.85rem; color:var(--muted); line-height:1.5; }

.lib-recent{ display:grid; gap:13px; }
.lib-row{ display:grid; grid-template-columns:262px 1fr auto; gap:22px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:13px; padding:13px;
  cursor:pointer; text-align:left; color:inherit; font:inherit;
  transition:border-color .16s, background .16s; }
.lib-row:hover{ border-color:var(--accent); background:var(--card-2); }
.lib-row:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lib-row img{ width:100%; height:152px; object-fit:cover; border-radius:8px; display:block; border:1px solid var(--line); }
.lib-row h3{ font-size:1.1rem; margin-bottom:6px; }
.lib-row p{ color:var(--body); font-size:.92rem; line-height:1.56; max-width:62ch; margin-bottom:11px; }
.lib-row .arrow{ font-size:1.3rem; color:var(--muted); padding-right:8px; transition:transform .2s; }
.lib-row:hover .arrow{ transform:translateX(5px); color:var(--accent); }

/* the menu — text only */
.lib-grp{ margin-bottom:28px; }
.lib-grp h3{ font-size:.96rem; font-weight:700; margin-bottom:3px; }
.lib-grp .lead2{ font-size:.86rem; color:var(--muted); margin-bottom:12px; }
.lib-item{ display:grid; grid-template-columns:1fr auto; gap:18px; align-items:baseline;
  width:100%; text-align:left; background:none; border:0; border-top:1px solid var(--line-soft);
  padding:12px 4px; color:inherit; font:inherit; cursor:pointer; transition:background .14s; }
.lib-item:last-child{ border-bottom:1px solid var(--line-soft); }
.lib-item:hover{ background:var(--card); }
.lib-item:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.lib-item .nm2{ display:block; font-size:.98rem; font-weight:600; margin-bottom:3px; }
.lib-item .ds{ display:block; font-size:.87rem; color:var(--body); line-height:1.5; }
.lib-item .r2{ font-family:var(--sans); font-size:.72rem; color:var(--muted); white-space:nowrap; letter-spacing:.03em; }

}

@media (max-width:960px){ .lib-hero{ grid-template-columns:1fr; gap:32px; } }
/* On a narrow screen the headline wraps to two lines with "today" alone on the
   second — which reads as an orphan. Shrink it just enough to fit one line
   rather than forcing a non-breaking space, which overflows a 360px screen. */
@media (max-width:430px){
  .lib-h1{ font-size:clamp(1.55rem,7.4vw,2.1rem); letter-spacing:-.025em; }
}
@media (max-width:820px){
  .lib-doors{ grid-template-columns:1fr; }
  .lib-row{ grid-template-columns:1fr; gap:13px; }
  .lib-row img{ height:180px; }
  .lib-row .arrow{ display:none; }
}
@media (max-width:700px){ .lib-item{ grid-template-columns:1fr; gap:5px; } .lib-item .r2{ white-space:normal; } }
@media (prefers-reduced-motion:reduce){ .lib-tile-in{ transition:none; } }

/* =====================================================================
   READING WIDTH
   The container was widened to fill a 1080p screen, which is right for
   grids and the tool wall — but body prose inherited it and ran to ~193
   characters a line. Anything past ~80 is hard to track back to the start
   of the next line. Cap the prose; leave the layout wide.
   ===================================================================== */
#tab-about p,
#tab-about li,
#tab-home p,
#tab-showcase p,
#tab-showcase li,
#tab-library .lib-sec p:not(.lead2){
  max-width:72ch;
}
/* Cards and grids set their own width; only free-running prose is capped. */
#tab-showcase .work-card p,
#tab-showcase .work-detail-grid p,
#tab-showcase .tmpl-note p{ max-width:none; }
/* Elements that are deliberately full-width keep their own constraint */
#tab-about .card p,
#tab-about .prompt-card p,
#tab-home .map-card p,
#tab-home .zbanner-p{ max-width:none; }

/* On a phone the search field and its button do not fit side by side —
   the button was pushing past the right edge. Stack them. */
@media (max-width:430px){
  .lib-find{ flex-wrap:wrap; }
  .lib-find input{ flex:1 1 100%; }
  .lib-find .btn{ flex:1 1 100%; }
  /* The collection shelf is a horizontal scroller, so its children are meant to
     sit past the edge — but it must not widen the page itself. */
  .lib-shelf{ margin-inline:-18px; padding-inline:18px; }
}

/* Proof strip under the hero headline — three counted facts, no prose. */
.proof{ list-style:none; display:flex; flex-wrap:wrap; gap:34px; margin:26px 0 28px; padding:0; }
.proof li{ display:block; }
.proof b{ display:block; font-size:2.1rem; font-weight:800; line-height:1;
  letter-spacing:-.02em; color:var(--accent); margin-bottom:5px; }
.proof span{ display:block; font-size:.88rem; color:var(--muted); line-height:1.45; max-width:22ch; }
.story{ margin:0 0 46px; }
.story p{ color:var(--body); line-height:1.68; max-width:72ch; }
@media (max-width:600px){ .proof{ gap:22px; } .proof b{ font-size:1.7rem; } }

/* About: the AI lessons read better as a list than as six sub-headings. */
.ai-lessons{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:13px; }
.ai-lessons li{ padding-left:16px; border-left:2px solid var(--accent-line);
  color:var(--body); line-height:1.62; max-width:72ch; }
.ai-lessons strong{ color:var(--ink); }

/* About: the left rail carries identity and the two things a hiring manager
   wants — email and the resume — so neither is buried under 1,400 words.
   Sticky, so they stay reachable the whole way down. */
@media (min-width:900px){
  .about-side{ position:sticky; top:96px; align-self:start; }
}
.side-reach{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
  display:grid; gap:9px; }
.side-reach .btn{ justify-content:center; width:100%; }
.side-note{ margin-top:4px; font-size:.84rem; line-height:1.55; color:var(--muted); }
/* The break is inside the text column now, so it should not span the rail. */
.about-body .z-break{ margin-left:0; margin-right:0; }

/* The circle frame stays; the initials become the photo. A ring in the accent
   keeps it reading as a deliberate frame rather than a cropped snapshot. */
.avatar{
  width:140px; height:140px;
  box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--accent-line);
}
.avatar img{ display:block; }
@media (max-width:900px){ .avatar{ width:112px; height:112px; } }

/* =====================================================================
   FREE TOOLS — separation and intent

   The tab had grown into one undifferentiated stack: two doors, a shelf of
   collections, three recent cards and a 31-row text list, all at the same
   visual weight, one after another. Tyler: "break up this cluster a little
   it's confusing." Each block is now a NUMBERED STEP with real air between
   them, and the flat list is gone — the full list lives in the catalogue,
   which is where filtering already works.
   ===================================================================== */
.lib-step{ margin-bottom:74px; }
.lib-step:last-of-type{ margin-bottom:56px; }
.lib-step .lib-sec-h{ align-items:baseline; }
.lib-step-n{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; align-self:center;
  background:var(--accent-tint); border:1px solid var(--accent-line);
  color:var(--accent-deep); font-family:var(--sans); font-size:.76rem; font-weight:700;
}
.lib-skip{ font-family:var(--sans); font-size:.84rem; font-weight:600; }
.lib-skip span{ font-size:inherit; letter-spacing:0; text-transform:none; color:inherit; }

/* The closer. A light gradient panel rather than another bordered card, so
   the page ends on something that reads as a destination instead of one more
   item in the stack. */
.lib-closer{
  display:block; width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit;
  border:1px solid var(--accent-line); border-radius:18px;
  padding:44px 46px 40px;
  background:linear-gradient(165deg, #ffffff 0%, var(--card) 34%, var(--accent-tint) 100%);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.lib-closer:hover{ border-color:var(--accent-mid); box-shadow:var(--shadow); transform:translateY(-2px); }
.lib-closer:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.lib-closer-k{
  display:block; font-family:var(--sans); font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent-deep); margin-bottom:10px;
}
.lib-closer-h{
  display:block; font-family:var(--serif); font-size:clamp(1.7rem,3.2vw,2.4rem);
  font-weight:700; color:var(--ink); line-height:1.15; margin-bottom:12px;
}
.lib-closer-p{
  display:block; font-family:var(--sans); font-size:.98rem; line-height:1.62;
  color:var(--body); max-width:62ch; margin-bottom:20px;
}
.lib-closer-g{
  display:inline-block; font-family:var(--sans); font-size:.9rem; font-weight:700;
  color:var(--accent-deep);
}
@media (max-width:720px){
  .lib-closer{ padding:30px 24px 28px; border-radius:14px; }
  .lib-step{ margin-bottom:52px; }
}
@media (prefers-reduced-motion:reduce){
  .lib-closer{ transition:none; }
  .lib-closer:hover{ transform:none; }
}

/* =====================================================================
   CATALOGUE — a directory on the left, results on the right

   Five stacked rows of filter pills above a 3-across grid meant the
   controls pushed the results down and the cards were 493px wide. The rail
   holds search, the directory and the facets in one column; the grid runs
   four across at a size you can actually scan.
   ===================================================================== */
.lib-layout{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:34px; align-items:start; }
.lib-rail{ position:sticky; top:18px; display:flex; flex-direction:column; gap:20px; }
.lib-rail .lib-search-inline input{ width:100%; }

.lib-dir{ display:flex; flex-direction:column; gap:2px; }
.lib-dir-b{
  appearance:none; cursor:pointer; text-align:left; font:inherit; color:inherit;
  background:none; border:0; border-left:2px solid transparent;
  padding:9px 12px; border-radius:0 8px 8px 0; transition:background .15s, border-color .15s;
}
.lib-dir-b:hover{ background:var(--card-2); }
.lib-dir-b.on{ background:var(--accent-tint); border-left-color:var(--accent); }
.lib-dir-b:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.lib-dir-t{ display:block; font-family:var(--sans); font-size:.95rem; font-weight:700; color:var(--ink); }
.lib-dir-d{ display:block; font-family:var(--sans); font-size:.78rem; color:var(--muted); margin-top:1px; }

.lib-layout .lib-facets{ display:flex; flex-direction:column; gap:15px; margin:0;
  padding-top:18px; border-top:1px solid var(--line); }
.lib-layout .lib-facet{ display:block; }
.lib-layout .lib-facet-k{ display:block; margin-bottom:7px; }
.lib-facet-o{ display:flex; flex-wrap:wrap; gap:5px; }
.lib-layout .lib-chip{ font-size:.76rem; padding:4px 9px; }

.lib-results{ min-width:0; }
.lib-grid4{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:18px !important; }
.lib-grid4 .work-card h3, .lib-grid4 .card h3{ font-size:1rem; }
.lib-grid4 .work-card p,  .lib-grid4 .card p{ font-size:.86rem; line-height:1.5; }

@media (max-width:1400px){ .lib-grid4{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; } }
@media (max-width:1080px){
  .lib-layout{ grid-template-columns:1fr; gap:22px; }
  .lib-rail{ position:static; }
  .lib-grid4{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:640px){ .lib-grid4{ grid-template-columns:1fr !important; } }

/* =====================================================================
   LIVE CONFIGURATOR — preview left, options right

   Modelled on how product configurators actually work: the preview is the
   hero, the options sit beside it, and every pick lands in the preview
   instantly rather than after a reload. The rail only appears once the tool
   has answered with what it offers, so it can never advertise a setting a
   tool does not have.
   ===================================================================== */
.live-stage{ display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:0; align-items:stretch; }
.live-demo:not(.has-rail) .live-stage{ grid-template-columns:minmax(0,1fr); }

.live-rail{
  border-left:1px solid var(--line); background:var(--card-2);
  padding:20px 18px; display:flex; flex-direction:column; gap:18px;
  animation:live-rail-in .35s ease both;
}
@keyframes live-rail-in{ from{opacity:0; transform:translateX(10px)} to{opacity:1; transform:none} }
.live-rail-k{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-deep);
}
.live-rail-note{ font-family:var(--sans); font-size:.82rem; line-height:1.5;
  color:var(--muted); margin:-10px 0 0; }
.live-rail-foot{ font-family:var(--sans); font-size:.76rem; color:var(--muted);
  margin:auto 0 0; padding-top:14px; border-top:1px solid var(--line); }
.live-opt-k{ display:block; font-family:var(--sans); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.live-opt-row{ display:flex; flex-wrap:wrap; gap:6px; }
.live-chip{
  appearance:none; cursor:pointer; font-family:var(--sans); font-size:.8rem;
  background:var(--card); color:var(--body); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; transition:border-color .16s,color .16s,background .16s;
}
.live-chip:hover{ border-color:var(--accent-mid); color:var(--ink); }
.live-chip.on{ background:var(--accent-tint); border-color:var(--accent); color:var(--accent-deep); font-weight:700; }
.live-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (max-width:900px){
  .live-stage{ grid-template-columns:minmax(0,1fr); }
  .live-rail{ border-left:0; border-top:1px solid var(--line); }
  .live-rail-foot{ margin-top:6px; }
}
@media (prefers-reduced-motion:reduce){ .live-rail{ animation:none; } }

/* The support line. Deliberately quiet and deliberately last — it sits
   under the way into the library, not above it, because the tools being free
   is the point and the tip jar is an afterthought. */
.lib-support{
  font-family:var(--sans); font-size:.86rem; line-height:1.6;
  color:var(--muted); margin:18px 0 0; max-width:60ch;
}
.lib-support a{ color:var(--accent-deep); font-weight:600; }
.lib-support a:hover{ text-decoration:underline; }

/* ── The offline / live split on Free Tools ───────────────────────────────
   Two panels, deliberately unequal in weight: the downloadable side is the
   promise this library runs on and it leads, while the live side is the one
   exception and is marked as one rather than blended in. Every live entry
   carries its offline stand-in directly underneath it, because the person
   who needs that link is standing in a room with no wifi. */
.lib-split{
  display:grid; grid-template-columns:1.15fr .85fr; gap:18px;
  margin:34px 0 6px;
}
@media (max-width:840px){ .lib-split{ grid-template-columns:1fr; } }

.lib-side{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px 24px;
  display:flex; flex-direction:column; align-items:flex-start;
}
.lib-side-off{ border-top:3px solid var(--accent); }
.lib-side-live{ border-top:3px solid #8a5a12; background:var(--card-2); }

.lib-side-k{
  font-family:var(--sans); font-size:.7rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--accent);
}
.lib-side-k-live{ color:#8a5a12; }

.lib-side-h{
  font-family:var(--serif); font-size:1.9rem; font-weight:600;
  color:var(--ink); margin:6px 0 8px; line-height:1.1;
}
.lib-side-h b{ font-weight:700; }

.lib-side-p{
  font-family:var(--sans); font-size:.93rem; line-height:1.6;
  color:var(--body); margin:0 0 10px; max-width:52ch;
}
.lib-side-p strong{ color:var(--ink); }
.lib-side-sub{
  font-family:var(--sans); font-size:.84rem; line-height:1.55;
  color:var(--muted); margin:0 0 14px;
}
.lib-side-go{ margin-top:auto; }

/* ── a live tool, with its fallback attached ──────────────────────────── */
.lib-live-item{ width:100%; margin-top:4px; }
.lib-live-item + .lib-live-item{ margin-top:14px; }

.lib-live-open{
  display:flex; align-items:center; gap:13px; width:100%;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px 12px;
  cursor:pointer; text-align:left; font:inherit; color:inherit;
}
.lib-live-open:hover{ border-color:var(--accent-line); }
.lib-live-open img{
  width:96px; height:60px; object-fit:cover; border-radius:5px;
  border:1px solid var(--line-soft); flex:none;
}
.lib-live-t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.lib-live-t strong{
  font-family:var(--sans); font-size:.98rem; font-weight:650; color:var(--ink);
}
.lib-live-t em{
  font-style:normal; font-family:var(--sans); font-size:.78rem; color:var(--muted);
}

.lib-live-fb{
  font-family:var(--sans); font-size:.85rem; line-height:1.55;
  color:var(--body); margin:8px 0 0; padding-left:12px;
  border-left:2px solid #8a5a12;
}
.lib-live-fbk{ font-weight:700; color:#8a5a12; }

/* ── the live marker on a detail page ─────────────────────────────────── */
.live-needs{
  font-family:var(--sans); font-size:.88rem; line-height:1.6;
  color:var(--body); margin:12px 0 0; padding:10px 14px;
  background:var(--card-2); border:1px solid var(--line);
  border-left:3px solid #8a5a12; border-radius:var(--radius-sm);
  max-width:64ch;
}
.live-needs strong{ color:#8a5a12; }
.filetag-live{ color:#8a5a12; font-weight:700; }