:root{--paper:#eef4fa;--surface:#fbfdff;--text:#102a43;--dim:#52667a;--brand:#2563eb;--hi:#0ea5e9;--line:#d6e4f0;--radius:4px;--measure:1080px;--font-head:'Outfit',system-ui,sans-serif;--font-body:'Figtree',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem} body{margin:0;background:var(--paper);color:var(--text);font:16px/1.78 var(--font-body)}
img{max-width:100%;height:auto} a{color:var(--brand);text-underline-offset:3px}
input,select,textarea{max-width:100%;box-sizing:border-box}
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{min-width:0;max-width:100%}
@supports (-webkit-touch-callout:none){input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-height:2.75em} input::-webkit-date-and-time-value{text-align:left}}
h1,h2,h3{font-family:var(--font-head);line-height:1.2;letter-spacing:-.01em;color:var(--text)}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.2em 0 .35em} h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:2.75em 0 .6em} h3{font-size:1.15rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1.25em}
.de-wra{max-width:var(--measure);margin:0 auto;padding:0 1rem} .de-mai{max-width:var(--measure);margin:0 auto;padding:1.2rem 1rem 3rem}
.de-ski{position:absolute;left:-9999px} .de-ski:focus{left:1rem;top:1rem;background:var(--surface);padding:.5rem;z-index:99}
.de-heain{max-width:var(--measure);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.de-bra{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--font-head);color:var(--text);text-decoration:none}
.de-nav{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .de-nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem}
.de-hea{background:var(--paper);border-bottom:1px solid var(--line)} .de-heain{flex-direction:column;gap:.4rem;padding:.9rem 1rem}  .de-nav a{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.de-her{margin:1rem 0 1.4rem} .de-lea{font-size:1.12rem;max-width:46em;color:var(--dim)} .de-her{text-align:center} .de-her .de-lea{margin-left:auto;margin-right:auto}
.de-too{margin:1.4rem 0 2rem}
.de-not{margin:1.4em 0;padding:.9em 1.1em;background:var(--surface);border-left:4px solid var(--hi);border-radius:0 var(--radius) var(--radius) 0}
.de-for{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--surface);border:1px dashed var(--brand);border-radius:var(--radius);overflow-x:auto}
.de-tabwra{margin:1.2em 0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.de-tab{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .de-tab th,.de-tab td{padding:.5em .75em;border-bottom:1px solid var(--line);text-align:left}
.de-tab thead th{background:color-mix(in srgb,var(--line) 60%,var(--surface))}
ol.de-ste{padding-left:1.3em} ol.de-ste>li{margin:.5em 0}
.de-fig{margin:1.6em 0;text-align:center} .de-fig img{width:100%;max-width:720px;border-radius:var(--radius);border:1px solid var(--line);background:#fff} .de-fig figcaption{font-size:.9em;color:var(--dim)}
.de-car{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.de-card{display:block;padding:1.1rem;background:var(--surface);border-radius:var(--radius);border:1px solid var(--line);color:var(--text);text-decoration:none}
.de-card b{display:block;font-family:var(--font-head);margin-bottom:.35rem} .de-card span{color:var(--dim);font-size:.92rem} .de-card:hover{border-color:var(--brand)}
.de-card--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .de-card--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--text) 14%,transparent)}
.de-carimg{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .de-cartxt{display:block;padding:1rem 1.1rem 1.1rem} .de-cartxt>span{display:block}
.de-bli a,.de-bro,.de-poskic{background:none!important}
.de-carmet{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--brand)}
.de-car--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .de-car--feat>.de-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .de-car--feat>.de-card:first-child b{font-size:1.35rem}
.de-bli{display:grid;gap:1rem;margin:1.2em 0} .de-bro{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--text);text-decoration:none}
.de-bro .de-carimg{height:100%;aspect-ratio:auto;min-height:126px} .de-bro b{display:block;font-family:var(--font-head);font-size:1.12rem;margin-bottom:.3rem} .de-bro .de-cartxt>span{color:var(--dim);font-size:.93rem} .de-bro:hover{border-color:var(--brand)}
.de-bli--min{list-style:none;padding:0;counter-reset:bl;gap:0} .de-bli--min li{counter-increment:bl;border-top:1px solid var(--line)} .de-bli--min li:last-child{border-bottom:1px solid var(--line)}
.de-bli--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--text);text-decoration:none} .de-bli--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--font-head);color:var(--brand)}
.de-bli--min b{font-family:var(--font-head);font-size:1.15rem} .de-bli--min span{color:var(--dim);font-size:.93rem} .de-bli--min a:hover b{color:var(--brand)}
.de-poshea--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--radius);overflow:hidden} .de-poshea--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.de-posov{position:absolute;inset:auto 0 0 0;padding:4rem 1.6rem 1.4rem;background:linear-gradient(transparent,color-mix(in srgb,#000 72%,transparent))} .de-posov h1,.de-posov .de-posmet,.de-posov .de-poskic{color:#fff}
.de-poshea--band{background:var(--brand);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--radius)} .de-poshea--band h1,.de-poshea--band .de-posmet,.de-poshea--band .de-poskic{color:#fff}
.de-poshea--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .de-poshea--split .de-poscov{margin:0}
.de-toc--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .de-toc--chips li{margin:0} .de-toc--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);text-decoration:none;font-size:.88rem}
.de-toc--rail{background:none;border:0;border-left:3px solid var(--hi);border-radius:0;padding:.2rem 0 .2rem 1rem}
.de-lang--globe summary{display:flex;align-items:center;gap:.35rem} .de-lan{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .de-lan a{padding:.25rem .7rem;border:1px solid var(--line);border-radius:999px;text-decoration:none} .de-lan a[aria-current]{background:var(--brand);border-color:var(--brand);color:#fff}
@media (max-width:700px){.de-car--feat{grid-template-columns:1fr} .de-car--feat>.de-card:first-child{display:flex} .de-bro{grid-template-columns:1fr} .de-bro .de-carimg{min-height:0;aspect-ratio:1200/630} .de-poshea--split{grid-template-columns:1fr} .de-posov{position:static;background:var(--brand);padding:1.2rem} .de-poshea--overlay>img{min-height:0}}
.de-pos{max-width:48rem;margin:0 auto} .de-poshea{margin:.6rem 0 1.2rem} .de-poshea h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.de-poskic{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);text-decoration:none}
.de-upd{color:var(--dim);font-size:.9rem;margin:2rem 0 0} .de-sig{font-style:italic;color:var(--dim)} .de-posmet{color:var(--dim);font-size:.92rem;margin:0} .de-poscov{margin:0 0 1.6rem} .de-poscov img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.de-pos .de-lea{font-size:1.2rem;color:var(--text)} .de-pos .de-lea::first-letter{font-family:var(--font-head);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--brand)}
.de-pos .de-toc--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--radius);font-size:.95rem}
.de-toc--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .de-toc--post li{margin:.2rem 0}
.de-pos h3{color:var(--brand)} .de-pos blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--hi);font-size:1.1em}
.de-faq h3{font-size:1.05rem;margin-top:1.3em}
.de-cru{font-size:.88rem;color:var(--dim);margin:.4rem 0 1rem} .de-cru a{color:var(--dim)}
.de-cta{margin:2.4rem 0;padding:1.4rem;background:var(--surface);border-radius:var(--radius);border:1px solid var(--line);text-align:center}
.de-btn{display:inline-block;padding:.7em 1.4em;background:var(--brand);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.de-foo{border-top:1px solid var(--line);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--dim);background:var(--surface)}
.de-foo nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .de-foo a{color:var(--dim)} .de-foo{text-align:center} .de-foo nav{justify-content:center}
.de-sec>h2{border-top:2px solid var(--line);padding-top:1rem}
.de-lay{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:2.4rem;align-items:start} .de-toc{position:sticky;top:5rem;font-size:.9rem;border-left:2px solid var(--line);padding-left:1rem} .de-toc ol{list-style:none;padding:0;margin:.4rem 0 0} .de-toc li{margin:.35rem 0} .de-toc a{text-decoration:none;color:var(--dim)} .de-toc a:hover{color:var(--brand)} .de-lay>*{min-width:0} @media(max-width:900px){.de-lay{grid-template-columns:1fr} .de-toc:not(.de-toc--post){display:none}}
.de-lang{position:relative} .de-lang summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--line);border-radius:999px;font-size:.85rem}
.de-lanlis{position:absolute;right:0;top:120%;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.de-lanlis a{padding:.3rem .5rem;text-decoration:none;color:var(--text)} .de-lanlis a[aria-current]{font-weight:700;color:var(--brand)}
.de-cod{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .de-cod a{text-decoration:none;color:var(--dim);padding:.1rem .3rem;border-radius:4px} .de-cod a[aria-current]{color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent)}
[data-zone]{margin:1rem auto;text-align:center;overflow:hidden;max-width:100%} [data-zone]:empty{margin:0}
[data-zone="mobile_sticky"]{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--surface)}
[data-zone="sidebar_left"],[data-zone="sidebar_right"]{position:fixed;top:110px;width:160px;margin:0;z-index:20} [data-zone="sidebar_left"]{left:12px} [data-zone="sidebar_right"]{right:12px}
@media (max-width:1499px){[data-zone="sidebar_left"],[data-zone="sidebar_right"]{display:none}}
.de-adx{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--dim)}
.de-btn{border-radius:4px;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
.de-tabwra{border:0;border-top:3px solid var(--brand);border-radius:0;background:transparent} .de-tab thead th{background:transparent;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.de-sec a:not(.de-btn):not(.de-card){text-decoration-thickness:2px}
.de-her--art{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;text-align:left} .de-her--art .de-art{width:170px;height:170px;display:grid;place-items:center} .de-art svg{width:100%;height:100%;filter:drop-shadow(0 12px 24px color-mix(in srgb,var(--brand) 35%,transparent))} .de-art--ring{border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--hi) 30%,transparent) 0 38%,transparent 39% 52%,color-mix(in srgb,var(--brand) 18%,transparent) 53% 66%,transparent 67%)} .de-art--ring svg{width:56%;height:56%} @media(max-width:700px){.de-her--art{grid-template-columns:1fr} .de-her--art .de-art{display:none}}
@media (max-width:640px){.de-heain{justify-content:center} .de-nav{justify-content:center}}

/* Destiny Matrix Chart tool: only site tokens (--t-*) for colour, radius and fonts.
   Arcana accents: --dmc-p (0–100 %) blends primary into accent, so the 22 numbers read as calm tints of the site palette. */

.dmc-container {
  --dmc-soft: color-mix(in srgb, var(--brand) 8%, var(--surface));
  --dmc-line: var(--line);
  color-scheme: inherit;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  max-width: 100%;
  position: relative;
  container-type: inline-size;
}
.dmc-container *, .dmc-container *::before, .dmc-container *::after { box-sizing: border-box; }
.dmc-container [hidden] { display: none !important; }
.dmc-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dmc-num, .dmc-node, .dmc-lg, .dmc-tl-pt, .dmc-age {
  --dmc-mix: color-mix(in srgb, var(--hi) var(--dmc-p, 0%), var(--brand));
  --dmc-fill: color-mix(in srgb, var(--dmc-mix) 74%, var(--text));
}
.dmc-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- tabs ---------- */
.dmc-tabs {
  display: flex; gap: .4rem; padding: .3rem; margin: 0 0 1rem;
  background: var(--dmc-soft); border: 1px solid var(--line); border-radius: 999px; width: max-content; max-width: 100%;
}
.dmc-tab {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem 1.1rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--dim);
  font: 600 .95rem/1.2 var(--font-head); cursor: pointer;
}
.dmc-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 0 var(--line), 0 0 0 1px var(--line); }
.dmc-tab[aria-selected="true"] .dmc-ico { color: var(--brand); }
.dmc-tab:hover { color: var(--text); }

/* ---------- forms ---------- */
.dmc-form {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.1rem .9rem;
}
.dmc-date { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; min-width: 0; }
.dmc-date legend {
  font: 600 .8rem/1.2 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
  padding: 0; margin: 0 0 .5rem;
}
.dmc-field { display: flex; flex-direction: column; gap: .3rem; width: 5.2rem; }
.dmc-field--y { width: 7rem; }
.dmc-field label { font-size: .85rem; color: var(--dim); }
.dmc-input {
  width: 100%; min-height: 48px; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: calc(var(--radius) * .6);
  background: var(--paper); color: var(--text); color-scheme: inherit;
  font: 600 1.15rem/1.2 var(--font-head); letter-spacing: .04em; text-align: center;
}
.dmc-input::placeholder { color: color-mix(in srgb, var(--dim) 55%, transparent); font-weight: 400; }
.dmc-input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.dmc-input--bad { border-color: var(--hi); outline: 2px solid color-mix(in srgb, var(--hi) 60%, transparent); }
.dmc-pair { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.dmc-plus { font: 700 1.6rem/1 var(--font-head); color: var(--hi); padding-top: 1.2rem; }
.dmc-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.dmc-hint { margin: .8rem 0 0; font-size: .88rem; color: var(--dim); }

.dmc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px;
  padding: .55rem 1.15rem; border-radius: calc(var(--radius) * .7); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font: 600 .95rem/1.2 var(--font-head); cursor: pointer; text-decoration: none;
}
.dmc-btn:hover { border-color: var(--brand); }
.dmc-btn:focus-visible, .dmc-tab:focus-visible, .dmc-chip:focus-visible, .dmc-key:focus-visible, .dmc-lg:focus-visible,
.dmc-tl-pt:focus-visible, .dmc-famous summary:focus-visible, .dmc-all summary:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.dmc-btn--prim { background: var(--brand); border-color: var(--brand); color: var(--surface); }
.dmc-btn--prim:hover { background: color-mix(in srgb, var(--brand) 86%, var(--text)); }
.dmc-btn--ghost { background: transparent; }
.dmc-btn--tool { min-height: 40px; padding: .4rem .8rem; font-size: .88rem; }

.dmc-famous { margin-top: .8rem; }
.dmc-famous summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: .92rem; min-height: 32px; display: inline-flex; align-items: center; }
.dmc-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.dmc-chip {
  min-height: 40px; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper); color: var(--text); font: 500 .88rem/1.2 var(--font-body); cursor: pointer;
}
.dmc-chip:hover { border-color: var(--brand); color: var(--brand); }

.dmc-error { margin: .7rem 0 0; color: var(--text); font-weight: 600; }
.dmc-error:empty { display: none; }
.dmc-error:not(:empty) {
  padding: .6rem .85rem; border-radius: calc(var(--radius) * .6);
  background: color-mix(in srgb, var(--hi) 14%, var(--surface)); border-left: 4px solid var(--hi);
}

/* ---------- empty state ---------- */
.dmc-empty {
  display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem 1.1rem;
  border: 1px dashed var(--line); border-radius: var(--radius); color: var(--dim);
}
.dmc-empty p { margin: 0; font-size: .95rem; }
.dmc-empty-art { width: 72px; height: 72px; flex: none; fill: none; stroke: var(--brand); stroke-width: 1.6; opacity: .7; }
.dmc-empty-art circle { fill: var(--hi); stroke: none; }

/* ---------- result ---------- */
.dmc-result { margin-top: 1.2rem; }
.dmc-res-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .8rem; margin-bottom: .9rem; }
.dmc-res-title { margin: 0; font: 700 1.35rem/1.25 var(--font-head); color: var(--text); }
.dmc-res-title:focus { outline: none; }
.dmc-res-sub { margin: .2rem 0 0; color: var(--dim); font-size: .92rem; }
.dmc-tools { display: flex; flex-wrap: wrap; gap: .4rem; }

.dmc-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.dmc-key {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-height: 44px; padding: .6rem .75rem;
  border: 1px solid var(--line); border-radius: calc(var(--radius) * .8); background: var(--surface); color: var(--text);
  text-align: left; cursor: pointer; font: inherit;
}
.dmc-key:hover { border-color: var(--brand); }
.dmc-key-l { font-size: .78rem; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.dmc-key-v { display: inline-flex; align-items: center; gap: .25rem; }
.dmc-dot { color: var(--dim); }

.dmc-num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 .35rem;
  border-radius: 999px; background: var(--dmc-fill); color: var(--surface); font: 700 .92rem/1 var(--font-head);
}
.dmc-num--lg { min-width: 2.6rem; height: 2.6rem; font-size: 1.1rem; }
.dmc-num--xl { min-width: 3.6rem; height: 3.6rem; font-size: 1.6rem; box-shadow: 0 0 0 4px color-mix(in srgb, var(--dmc-mix) 25%, transparent); }

.dmc-stage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.dmc-chart {
  margin: 0; padding: .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.dmc-svg { width: 100%; max-width: 620px; margin: 0 auto; }
.dmc-svgel { display: block; width: 100%; height: auto; overflow: visible; }
.dmc-cap { margin: .3rem .3rem 0; font-size: .82rem; color: var(--dim); text-align: center; }

/* chart lines */
.dmc-l-halo { fill: color-mix(in srgb, var(--brand) 5%, transparent); stroke: none; }
.dmc-l-oct { fill: none; stroke: color-mix(in srgb, var(--dim) 40%, transparent); stroke-width: 1; stroke-dasharray: 3 5; }
.dmc-l-sq { fill: color-mix(in srgb, var(--brand) 4%, transparent); stroke: color-mix(in srgb, var(--brand) 55%, var(--line)); stroke-width: 1.6; }
.dmc-l-sq2 { stroke: color-mix(in srgb, var(--hi) 55%, var(--line)); }
.dmc-l-spoke { stroke: var(--line); stroke-width: 1.2; }
.dmc-l-money, .dmc-l-love { stroke-width: 2.4; stroke-linecap: round; }
.dmc-l-money { stroke: var(--brand); }
.dmc-l-love { stroke: var(--hi); }
.dmc-glyph { font: 700 20px/1 var(--font-head); text-anchor: middle; dominant-baseline: central; }
.dmc-glyph--money { fill: var(--brand); }
.dmc-glyph--love { fill: var(--hi); }

/* age ring */
.dmc-age circle { fill: var(--surface); stroke: color-mix(in srgb, var(--dmc-mix) 70%, var(--line)); stroke-width: 1.2; }
.dmc-age text { fill: var(--dim); font: 600 9px/1 var(--font-body); text-anchor: middle; dominant-baseline: central; }
.dmc-age--now circle { fill: var(--hi); stroke: var(--text); stroke-width: 2; }
.dmc-age--now text { fill: var(--surface); font-size: 11px; font-weight: 700; }
.dmc-age-lab { fill: var(--dim); font: 600 13px/1 var(--font-head); text-anchor: middle; dominant-baseline: central; }
.dmc-age-lab.dmc-age--now { fill: var(--hi); font-size: 15px; font-weight: 800; }

/* nodes */
.dmc-node { cursor: pointer; outline: none; }
.dmc-node circle { fill: var(--dmc-fill); stroke: var(--surface); stroke-width: 3; }
.dmc-node text { fill: var(--surface); font: 700 13px/1 var(--font-head); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.dmc-node--big text { font-size: 17px; }
.dmc-node--centre text { font-size: 20px; }
.dmc-node--corner text { font-size: 15px; }
.dmc-node--small text, .dmc-node--tiny text { font-size: 12px; }
.dmc-node--centre circle { stroke: var(--hi); stroke-width: 4; }
.dmc-node:hover circle { stroke: var(--text); }
.dmc-node:focus-visible circle { stroke: var(--brand); stroke-width: 4; }
.dmc-node--sel circle { stroke: var(--text); stroke-width: 4; }
.dmc-svg--hl .dmc-node { opacity: .22; }
.dmc-svg--hl .dmc-node--hit { opacity: 1; }
.dmc-svg--hl .dmc-node--hit circle { stroke: var(--hi); stroke-width: 5; }

/* detail panel */
.dmc-detail {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem;
  position: sticky; top: 1rem;
}
.dmc-d-kicker { margin: 0 0 .7rem; font: 600 .8rem/1.3 var(--font-head); color: var(--brand); text-transform: uppercase; letter-spacing: .06em; }
.dmc-d-main { display: flex; align-items: center; gap: .9rem; }
.dmc-d-txt { min-width: 0; }
.dmc-d-name { margin: 0; font: 700 1.25rem/1.2 var(--font-head); }
.dmc-d-kw { margin: .25rem 0 0; color: var(--dim); font-size: .92rem; }
.dmc-d-lab { margin: 1rem 0 .3rem; font-size: .78rem; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.dmc-d-work, .dmc-purp-work, .dmc-all-list code {
  display: block; padding: .5rem .65rem; border-radius: calc(var(--radius) * .5);
  background: var(--dmc-soft); border: 1px solid var(--line); color: var(--text);
  font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: .88rem; overflow-wrap: anywhere;
}
.dmc-d-also { margin: .7rem 0 0; font-size: .88rem; color: var(--dim); }

/* blocks */
.dmc-block {
  margin-top: 1rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.dmc-h { margin: 0 0 .25rem; font: 700 1.08rem/1.3 var(--font-head); }
.dmc-sub { margin: 0 0 .8rem; font-size: .88rem; color: var(--dim); }
.dmc-note { margin: .8rem 0 0; font-size: .85rem; color: var(--dim); }
.dmc-disclaimer { padding: .7rem .9rem; border-left: 3px solid var(--line); }

/* legend */
.dmc-legend { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: .35rem; }
.dmc-lg {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px;
  padding: .25rem 0; border-radius: calc(var(--radius) * .6); border: 1px solid transparent;
  background: var(--dmc-fill); color: var(--surface); font: 700 .95rem/1 var(--font-head); cursor: pointer;
}
.dmc-lg-c { font-size: .66rem; font-weight: 600; opacity: .85; margin-top: .15rem; }
.dmc-lg--absent { background: transparent; color: var(--dim); border-color: var(--line); font-weight: 500; }
.dmc-lg[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--hi); }
.dmc-legend-out { margin: .7rem 0 0; font-size: .92rem; }
.dmc-legend-out:empty { display: none; }

/* timeline */
.dmc-age-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.dmc-age-ctl label { font-weight: 600; }
.dmc-age-in { width: 6rem; }
.dmc-age-now { color: var(--dim); font-size: .9rem; }
.dmc-age-out { margin: 0 0 .8rem; padding: .55rem .8rem; border-radius: calc(var(--radius) * .6); background: color-mix(in srgb, var(--hi) 12%, var(--surface)); }
.dmc-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.dmc-tl-h { margin: 0 0 .3rem; font: 600 .85rem/1.3 var(--font-head); color: var(--dim); }
.dmc-tl-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .3rem; }
.dmc-tl-pt {
  display: flex; flex-direction: column; align-items: center; gap: .15rem; min-height: 48px; padding: .3rem .1rem;
  border: 1px solid var(--line); border-radius: calc(var(--radius) * .5); background: var(--paper); color: var(--text);
  font: inherit; cursor: pointer; min-width: 0;
}
.dmc-tl-pt:hover { border-color: var(--brand); }
.dmc-tl-age { font-size: .68rem; color: var(--dim); white-space: nowrap; }
.dmc-tl-v { font: 700 .98rem/1 var(--font-head); color: color-mix(in srgb, var(--dmc-mix) 65%, var(--text)); }
.dmc-tl--now { background: var(--hi); border-color: var(--hi); box-shadow: 0 0 0 2px var(--text); }
.dmc-tl--now .dmc-tl-age, .dmc-tl--now .dmc-tl-v { color: var(--surface); }

/* purposes */
.dmc-purposes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.dmc-purp { padding: .75rem .8rem; border: 1px solid var(--line); border-radius: calc(var(--radius) * .8); background: var(--paper); outline: none; }
.dmc-purp--main { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--dmc-soft); }
.dmc-purp:focus { box-shadow: 0 0 0 2px var(--brand); }
.dmc-purp-top { display: flex; align-items: center; gap: .65rem; }
.dmc-purp-name { margin: 0; font: 700 .98rem/1.25 var(--font-head); }
.dmc-purp-arc { margin: 0; font-size: .86rem; color: var(--dim); }
.dmc-purp-role { margin: .45rem 0 .4rem; font-size: .84rem; color: var(--dim); }
.dmc-purp-work { font-size: .8rem; }

/* tables */
.dmc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dmc-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 320px; }
.dmc-table th, .dmc-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.dmc-table thead th { font: 600 .78rem/1.2 var(--font-head); text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.dmc-table tbody th, .dmc-table tfoot th { text-align: left; font-weight: 600; }
.dmc-table tfoot th, .dmc-table tfoot td { border-bottom: 0; border-top: 2px solid var(--line); }
.dmc-table td .dmc-num { min-width: 1.9rem; height: 1.9rem; font-size: .88rem; }
.dmc-ch-name { display: block; }
.dmc-ch-sk { display: block; font-size: .75rem; color: var(--dim); font-weight: 400; }
.dmc-src { display: block; font-size: .7rem; color: var(--dim); margin-top: .15rem; }
.dmc-chakra tbody tr { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 7%, transparent), transparent 40%); }

/* all calculations */
.dmc-all summary { cursor: pointer; font: 700 1.02rem/1.3 var(--font-head); min-height: 32px; display: flex; align-items: center; }
.dmc-all-list { margin: .8rem 0 0; padding-left: 1.4rem; display: grid; gap: .35rem; }
.dmc-all-list li { padding-left: .2rem; }
.dmc-all-list code { display: inline-block; padding: .2rem .45rem; font-size: .82rem; }
.dmc-all-arc { margin-left: .45rem; font-size: .82rem; color: var(--dim); }

/* toast */
.dmc-toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translate(-50%, 140%); z-index: 50; max-width: calc(100vw - 2rem);
  padding: .65rem 1rem; border-radius: calc(var(--radius) * .7); background: var(--text); color: var(--surface);
  font-size: .92rem; opacity: 0; pointer-events: none;
}
.dmc-toast--on { transform: translate(-50%, 0); opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .dmc-toast { transition: transform .25s ease, opacity .25s ease; }
  .dmc-node { animation: dmc-pop .45s ease both; animation-delay: calc(var(--dmc-i, 0) * 22ms); transform-box: fill-box; transform-origin: center; }
  .dmc-node circle { transition: stroke .15s ease, stroke-width .15s ease; }
  .dmc-svg--hl .dmc-node, .dmc-node { transition: opacity .2s ease; }
  .dmc-tl-pt, .dmc-key, .dmc-btn, .dmc-lg { transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
  @keyframes dmc-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .dmc-stage { grid-template-columns: minmax(0, 1fr); }
  .dmc-detail { position: static; }
}
@container (max-width: 700px) {
  .dmc-stage { grid-template-columns: minmax(0, 1fr); }
  .dmc-detail { position: static; }
  .dmc-legend { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .dmc-tabs { width: 100%; }
  .dmc-tab { flex: 1 1 0; justify-content: center; padding: .5rem .6rem; font-size: .9rem; }
  .dmc-form { padding: .9rem .8rem; }
  .dmc-date { flex-wrap: nowrap; gap: .5rem; }
  .dmc-field { width: auto; flex: 1 1 0; min-width: 0; }
  .dmc-field--y { flex: 1.4 1 0; }
  .dmc-pair { flex-direction: column; align-items: stretch; }
  .dmc-plus { padding-top: 0; text-align: center; }
  .dmc-actions .dmc-btn { flex: 1 1 auto; }
  .dmc-chart { padding: .2rem; }
  .dmc-block { padding: .85rem .75rem; }
  .dmc-legend { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dmc-tl-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dmc-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dmc-tools { width: 100%; }
  .dmc-tools .dmc-btn { flex: 1 1 auto; }
  .dmc-res-title { font-size: 1.18rem; }
}

/* ---------- print: one reading sheet ---------- */
@media print {
  .dmc-tabs, .dmc-form, .dmc-tools, .dmc-empty, .dmc-error, .dmc-toast, .dmc-cap, .dmc-legend-block, .dmc-age-ctl, .dmc-keys { display: none !important; }
  .dmc-container { color: var(--text); }
  .dmc-stage { grid-template-columns: 1fr 1fr; }
  .dmc-block, .dmc-chart, .dmc-detail { break-inside: avoid; border-color: var(--line); }
  .dmc-detail { position: static; }
  .dmc-svg { max-width: 360px; }
  .dmc-node { animation: none !important; opacity: 1 !important; }
  .dmc-all-list code, .dmc-d-work, .dmc-purp-work { background: transparent; }
  .dmc-timeline { gap: .25rem; }
  .dmc-tl-pt { min-height: 0; padding: .1rem; }
}

/* design: sites/<d>/design/site.css */
/* destiny-matrix-chart.net — "Cobalt azulejo panel in a quiet cloister"
   page = white tin glaze with faint grout joints and a pale octagram at each tile crossing;
   header/footer = hand-painted cobalt star tiles closed by a rope-border frieze;
   hero = a framed tile panel with the octagram rosette; headings ride a cobalt rule led by a star tile;
   notes, FAQ, contents = single glazed tiles with cobalt corner ornaments; ochre only as small accents. */

:root{
  --m-cob:color-mix(in srgb,var(--brand) 70%,var(--text));
  --m-deep:color-mix(in srgb,var(--brand) 52%,var(--text));
  --m-night:color-mix(in srgb,var(--brand) 34%,var(--text));
  --m-glaze:color-mix(in srgb,var(--surface) 62%,var(--paper));
  --m-grout:color-mix(in srgb,var(--m-cob) 16%,var(--line));
  --m-wash:color-mix(in srgb,var(--brand) 7%,var(--surface));
  --m-pale:color-mix(in srgb,var(--surface) 86%,var(--brand));
  --m-ochre:color-mix(in srgb,#c08a2a 88%,var(--text));
}
::selection{background:color-mix(in srgb,var(--brand) 22%,transparent);color:var(--text)}
body{background:var(--m-glaze) url(/assets/img/d-tile-faint.svg) 0 0/160px 160px}

/* ---------- header: band of cobalt star tiles + rope frieze ---------- */
.de-hea{position:relative;border:0;padding:0 0 16px;color:#fff;
  background:url(/assets/img/d-tile-dark.svg) center 0/96px 96px,linear-gradient(180deg,var(--m-cob),var(--m-deep))}
.de-hea::after{content:'';position:absolute;left:0;right:0;bottom:0;height:16px;pointer-events:none;
  background:url(/assets/img/d-frieze.svg) repeat-x 0 0/48px 16px}
.de-hea .de-heain{padding:1.15rem 1rem .9rem;gap:.6rem}
.de-hea .de-bra{color:#fff;font:700 1.3rem/1.1 var(--font-head);letter-spacing:.05em;gap:.7rem}
.de-bra svg{flex:none;background:var(--surface);border-radius:4px;padding:3px;
  box-shadow:0 0 0 1px color-mix(in srgb,#fff 50%,transparent),0 0 0 4px var(--m-night),0 0 0 5px color-mix(in srgb,#e2b34f 70%,transparent)}
.de-hea .de-nav{gap:.35rem 1.8rem;justify-content:center}
.de-hea .de-nav>a{color:var(--m-pale);font:600 .78rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;padding:.45rem .1rem .4rem;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.de-hea .de-nav>a:hover{color:#fff;border-bottom-color:color-mix(in srgb,#e2b34f 70%,transparent)}
.de-hea .de-nav>a[aria-current]{color:#fff;border-bottom-color:#e2b34f}
.de-hea a:focus-visible,.de-hea summary:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* language globe = one glazed tile set into the band */
.de-hea .de-lang summary{background:var(--surface);color:var(--m-deep);border:0;border-radius:3px;
  font:700 .78rem/1 var(--font-body);letter-spacing:.1em;padding:.42rem .62rem;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m-cob) 30%,transparent),0 0 0 2px color-mix(in srgb,#fff 25%,transparent)}
.de-hea .de-lang summary::-webkit-details-marker{display:none}
.de-hea .de-lang[open] summary{background:var(--m-pale)}
.de-lanlis{border-radius:4px;border:1px solid var(--m-grout);border-top:4px solid var(--m-cob);padding:.35rem;
  box-shadow:0 10px 24px color-mix(in srgb,var(--text) 18%,transparent)}
.de-lanlis a{border-radius:3px;font-size:.92rem}
.de-lanlis a:hover{background:var(--m-wash)}
.de-lanlis a[aria-current]{color:var(--m-cob);background:var(--m-wash)}

/* ---------- first screen: centred tile panel with the octagram rosette ---------- */
.de-her{position:relative;margin:1.6rem 0 1.8rem;padding:2.2rem 2rem 2.3rem;text-align:center;
  background:url(/assets/img/d-corner-tl.svg) 7px 7px/44px no-repeat,url(/assets/img/d-corner-tr.svg) calc(100% - 7px) 7px/44px no-repeat,
    url(/assets/img/d-corner-bl.svg) 7px calc(100% - 7px)/44px no-repeat,url(/assets/img/d-corner-br.svg) calc(100% - 7px) calc(100% - 7px)/44px no-repeat,var(--surface);
  border:1px solid color-mix(in srgb,var(--m-cob) 55%,transparent);border-radius:4px;
  box-shadow:inset 0 0 0 6px var(--surface),inset 0 0 0 7px color-mix(in srgb,var(--m-cob) 22%,transparent)}
.de-her.de-her--art{display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center}
.de-her--art .de-art{order:-1}
.de-her h1{max-width:20em;margin:0 auto .45em;color:var(--m-night);letter-spacing:0}
.de-her .de-lea{max-width:40em;margin-left:auto;margin-right:auto;color:var(--dim)}
.de-her--art .de-art,.de-art--ring{width:132px;height:132px;border-radius:0;
  background:url(/assets/img/d-rosette.svg) center/contain no-repeat}
.de-art svg,.de-art--ring svg{width:36%;height:36%;filter:none}

/* ---------- tool frame: outer glazed frame only ---------- */
.de-too{margin:1.6rem 0 2rem;padding:12px;background:var(--surface);border:1px solid color-mix(in srgb,var(--m-cob) 40%,transparent);
  border-radius:6px;box-shadow:inset 0 0 0 4px var(--surface),inset 0 0 0 5px color-mix(in srgb,var(--m-cob) 14%,transparent)}

/* ---------- prose ---------- */
.de-mai{line-height:1.68}
.de-sec{margin-top:2.6rem}
.de-sec>h2,.de-sec h2{border-top:0;padding-top:2.1rem;margin-top:0;color:var(--m-night);
  background:url(/assets/img/d-star-tile.svg) 0 0/22px 22px no-repeat,
    linear-gradient(var(--m-cob),var(--m-cob)) 32px 10px/calc(100% - 32px) 1px no-repeat,
    linear-gradient(color-mix(in srgb,#c08a2a 55%,transparent),color-mix(in srgb,#c08a2a 55%,transparent)) 32px 14px/72px 1px no-repeat}
.de-sec h3,.de-pos h3{color:var(--m-cob)}
.de-mai a:not(.de-btn):not(.de-card){color:var(--m-cob);text-decoration-color:color-mix(in srgb,var(--m-cob) 45%,transparent);text-underline-offset:.18em}
.de-mai a:not(.de-btn):not(.de-card):hover{text-decoration-color:var(--m-ochre)}
.de-lea{color:var(--text)}
.de-cru{font-size:.84rem;letter-spacing:.03em;margin:1.2rem 0 1rem}
.de-cru a{color:var(--m-cob)!important}

.de-not{position:relative;margin:1.6em 0;padding:1.1em 1.3em 1.1em 1.5em;background:url(/assets/img/d-corner-tl.svg) 0 0/34px no-repeat,
  url(/assets/img/d-corner-br.svg) 100% 100%/34px no-repeat,var(--surface);
  border:1px solid var(--m-grout);border-left:1px solid var(--m-grout);border-radius:4px}
.de-not strong{color:var(--m-night)}

.de-for{background:var(--m-wash);border:1px solid color-mix(in srgb,var(--m-cob) 30%,transparent);
  border-left:6px solid var(--m-cob);border-radius:3px;color:var(--m-night)}

ol.de-ste{padding-left:1.6em}
ol.de-ste>li{padding:.15em 0 .55em .35em;border-bottom:1px dashed var(--m-grout)}
ol.de-ste>li:last-child{border-bottom:0}
ol.de-ste>li::marker{color:var(--m-cob);font-family:var(--font-head);font-weight:800}
.de-mai ul{padding-left:1.3em}
.de-mai ul>li::marker{color:var(--m-ochre)}

/* tables: cobalt head row, grout-line rules */
/* wrapper selected via :has — the builder's CSS renaming does not reach hyphenated .de-tabwra */
div:has(>.de-tab){margin:1.2em 0;border:1px solid var(--m-grout);border-radius:4px;background:var(--surface);overflow-x:auto}
.de-tab{margin:0;line-height:1.45}
.de-tab caption{caption-side:top;text-align:left;padding:.2em .2em .5em;font-size:.88rem;color:var(--dim);font-weight:600}
.de-tab thead th{background:var(--m-cob)!important;color:#fff;font:700 .76rem/1.3 var(--font-body);letter-spacing:.08em;text-transform:uppercase;border-bottom:3px solid color-mix(in srgb,#c08a2a 70%,var(--m-cob))}
.de-tab th,.de-tab td{border-bottom:1px solid var(--m-grout)}
.de-tab tbody tr:nth-child(even){background:color-mix(in srgb,var(--brand) 3%,transparent)}
.de-tab tbody tr:hover{background:var(--m-wash)}

.de-fig img{border:1px solid var(--m-grout);padding:6px;background:#fff;box-shadow:0 0 0 4px var(--surface),0 0 0 5px color-mix(in srgb,var(--m-cob) 18%,transparent)}
.de-fig figcaption{margin-top:.7rem;font-style:italic}
blockquote{border-left:4px solid var(--m-cob);background:var(--surface);border-radius:0 4px 4px 0}

/* ---------- home side contents: a column of glazed border tiles ---------- */
.de-lay .de-toc:not(.de-toc--post){border:1px solid var(--m-grout);border-radius:4px;background:var(--surface);
  padding:22px .9rem .8rem;background-image:url(/assets/img/d-frieze.svg);background-repeat:repeat-x;background-size:36px 12px}
.de-lay .de-toc:not(.de-toc--post)>*:first-child{font-family:var(--font-head);color:var(--m-night);letter-spacing:.04em}
.de-lay .de-toc li{margin:0;border-bottom:1px solid var(--m-grout)}
.de-lay .de-toc li:last-child{border-bottom:0}
.de-lay .de-toc a{display:block;padding:.38rem 0 .38rem 1.2rem;color:var(--dim);line-height:1.35;
  background:url(/assets/img/d-star.svg) 0 .62rem/10px 10px no-repeat;transition:color .2s}
.de-lay .de-toc a:hover{color:var(--m-cob)}

/* ---------- guides: square tiles in a grid ---------- */
.de-car{gap:1.2rem}
.de-card{border:1px solid var(--m-grout);border-radius:4px;background:var(--surface)}
.de-card--img{border-top:6px solid var(--m-cob);box-shadow:inset 0 0 0 0 transparent}
.de-card--img:hover{border-color:var(--m-cob);transform:translateY(-2px);box-shadow:0 8px 18px color-mix(in srgb,var(--m-night) 14%,transparent)}
.de-carimg{border-bottom:1px solid var(--m-grout)}
.de-card b{color:var(--m-night);line-height:1.3}
.de-cartxt{background:url(/assets/img/d-corner-br.svg) 100% 100%/30px no-repeat}
.de-carmet{color:var(--m-cob)!important;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}

/* ---------- FAQ: glazed tiles with a turning star ---------- */
.de-faq details{margin:.6rem 0;background:var(--surface);border:1px solid var(--m-grout);border-radius:4px;padding:0 1.1rem}
.de-faq summary{cursor:pointer;list-style:none;padding:.85rem 0 .85rem 1.8rem;font-weight:700;color:var(--m-night);
  background:url(/assets/img/d-star.svg) 0 1.05rem/14px 14px no-repeat}
.de-faq summary::-webkit-details-marker{display:none}
.de-faq details[open]{border-color:color-mix(in srgb,var(--m-cob) 45%,transparent);box-shadow:inset 4px 0 0 var(--m-cob)}
.de-faq details[open] summary{border-bottom:1px dashed var(--m-grout)}
.de-faq details>p{margin:.7rem 0 .9rem}
.de-faq summary:hover{color:var(--m-cob)}

/* ---------- call to action: a framed tile ---------- */
.de-cta{background:url(/assets/img/d-corner-tl.svg) 0 0/36px no-repeat,url(/assets/img/d-corner-tr.svg) 100% 0/36px no-repeat,
  url(/assets/img/d-corner-bl.svg) 0 100%/36px no-repeat,url(/assets/img/d-corner-br.svg) 100% 100%/36px no-repeat,var(--surface);
  border:1px solid color-mix(in srgb,var(--m-cob) 40%,transparent);border-radius:4px;padding:1.8rem 1.4rem}
.de-btn{background:var(--m-cob);color:#fff!important;border-radius:3px;box-shadow:inset 0 -3px 0 var(--m-night);transition:background .2s}
.de-btn:hover{background:var(--m-deep)}

/* ---------- articles: cobalt tile band, star-tile drop cap ---------- */
.de-poshea--band{position:relative;padding:2.2rem 1.7rem 2.9rem;border-radius:4px 4px 0 0;
  background:url(/assets/img/d-tile-dark.svg) 0 0/96px 96px,linear-gradient(160deg,var(--m-cob),var(--m-night))}
.de-poshea--band::after{content:'';position:absolute;left:0;right:0;bottom:0;height:16px;background:url(/assets/img/d-frieze.svg) repeat-x 0 0/48px 16px}
.de-poshea--band h1{letter-spacing:0}
.de-poshea--band .de-poskic{color:#f1d58f!important;letter-spacing:.18em}
.de-poshea--band .de-posmet{color:var(--m-pale)!important}
.de-pos .de-lea::first-letter{color:#fff;background:var(--m-cob);padding:.08em .16em .02em;margin:.1em .14em 0 0;
  border-radius:3px;border-bottom:3px solid var(--m-ochre);font-size:2.7em}
.de-pos .de-toc--post{position:static;background:url(/assets/img/d-corner-br.svg) 100% 100%/34px no-repeat,var(--surface);
  border:1px solid var(--m-grout);border-top:5px solid var(--m-cob);border-left:1px solid var(--m-grout);border-radius:4px}
.de-toc--post strong{font-family:var(--font-head);color:var(--m-night)}
.de-toc--post ol{padding-left:1.5rem}
.de-toc--post li::marker{color:var(--m-ochre);font-weight:700}
.de-toc--post a{color:var(--m-cob)}
.de-pos p,.de-pos li{max-width:42em}

/* ---------- footer: the dado — frieze over a cobalt skirting panel ---------- */
.de-foo{position:relative;margin-top:3.4rem;border-top:0;padding:2.6rem 0 2.4rem;color:var(--m-pale);
  background:url(/assets/img/d-tile-dark.svg) center 16px/96px 96px,linear-gradient(180deg,var(--m-deep),var(--m-night))}
.de-foo::before{content:'';position:absolute;left:0;right:0;top:0;height:16px;background:url(/assets/img/d-frieze.svg) repeat-x 0 0/48px 16px}
.de-foo p{color:var(--m-pale)}
.de-foo a{color:var(--m-pale)!important;text-decoration-color:color-mix(in srgb,#fff 40%,transparent)}
.de-foo a:hover{color:#fff!important;text-decoration-color:#e2b34f}
.de-foo a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.de-fooin{gap:.9rem}

@media (max-width:700px){
  .de-hea .de-heain{padding:.9rem 1rem .75rem}
  .de-hea .de-nav{gap:.3rem 1.2rem}
  .de-her{padding:1.6rem 1.1rem 1.7rem}
  .de-her--art .de-art{display:grid;place-items:center;width:92px;height:92px}
  .de-too{padding:6px;margin-left:-4px;margin-right:-4px}
  .de-poshea--band{padding:1.6rem 1.1rem 2.5rem}
}
@media (prefers-reduced-motion:reduce){
  .de-card--img,.de-card--img:hover{transition:none;transform:none}
  .de-hea .de-nav>a,.de-btn,.de-lay .de-toc a{transition:none}
}
@media print{
  body{background:#fff}
  .de-hea,.de-foo{background:#fff;color:var(--text)}
  .de-hea .de-bra,.de-hea .de-nav>a,.de-foo p,.de-foo a{color:var(--text)!important}
  .de-hea::after,.de-foo::before{display:none}
}