/* Sigil: a personal emblem. Quiet and ceremonial: stone paper by day, deep night by dark, one vermilion
   accent, fine hairlines, a high-contrast Didone for names and titles, a clean sans for reading and a small
   monospace for labels, like the engraved legend on a seal or a chart. Lots of empty space; the mark carries
   the screen. T1: brought back to the round 2 "Sigil" mockup (i04): softer radii, sentence-case sans buttons,
   pill chips, Didot names, the mockup's paper and vermilion. */

:root[data-theme="sigil"] {
  --bone: #f1eee7; --bone-rgb: 241 238 231;
  --card: #f8f6f1; --card-rgb: 248 246 241;
  --ink: #16161a; --ink-rgb: 22 22 26;
  --ink-2: #34363d; --muted: #5f616a; --faint: #9a9ba2;
  --clay: #b0391e; --clay-rgb: 176 57 30; --deep: #16161a;
  --sand: #dcd9d1; --tint: #e5e2db;
  /* the areas share one ink: the mark tells them apart, not a palette */
  --values: #45454b; --goals: #45454b; --drives: #45454b; --tastes: #45454b; --life: #45454b; --world: #45454b;
  --green-bg: transparent; --green: #16161a; --green-line: #16161a; --red-bg: transparent; --red: #8d3523; --danger: #a8301f;
  --stage-1: #e6e4de; --stage-2: #cfccc4;

  --serif: Didot, "Bodoni 72", "Bodoni Moda", "Instrument Serif", Georgia, serif;
  --sys: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --label: ui-monospace, "SF Mono", "Geist Mono", Menlo, monospace;
  --label-size: 10.5px; --label-track: .16em;

  --mark-ink: var(--ink); --mark-accent: var(--clay); --mark-paper: var(--bone);

  --hair: rgb(var(--ink-rgb) / .16); --hair-2: rgb(var(--ink-rgb) / .08);
  --r-xl: 22px; --r-l: 18px; --r-m: 16px; --r-s: 12px; --r-btn: 16px;
  --sh-1: none; --sh-2: none; --sh-btn: none;
  --mat: var(--bone); --mat-card: var(--card);
  --grain: 0;
  --gut: 24px;
  --t-enter: .9s; --t-reveal: 1.4s;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="sigil"] {
    --bone: #0e0f12; --bone-rgb: 14 15 18;
    --card: #15161a; --card-rgb: 21 22 26;
    --ink: #ebe7de; --ink-rgb: 235 231 222;
    --ink-2: #bdb9b0; --muted: #94918a; --faint: #66645f;
    --clay: #e2815f; --clay-rgb: 226 129 95; --deep: #ebe7de;
    --sand: #24252a; --tint: #1b1c21;
    --values: #bdb9b0; --goals: #bdb9b0; --drives: #bdb9b0; --tastes: #bdb9b0; --life: #bdb9b0; --world: #bdb9b0;
    --green: #ebe7de; --green-line: #ebe7de; --red: #eaa088; --danger: #f08a74;
    --stage-1: #16171b; --stage-2: #060708;
    --hair: rgb(var(--ink-rgb) / .17); --hair-2: rgb(var(--ink-rgb) / .09);
  }
}

/* ---------- type ---------- */
[data-theme="sigil"] body { letter-spacing: -.005em; }
[data-theme="sigil"] .lt { font-size: 40px; line-height: 1.04; letter-spacing: -.01em; }
[data-theme="sigil"] .sub { color: var(--ink-2); }
[data-theme="sigil"] .sec, [data-theme="sigil"] .sec-row .sec, [data-theme="sigil"] .ar, [data-theme="sigil"] .ic .area,
[data-theme="sigil"] .qcard .k, [data-theme="sigil"] .could .k, [data-theme="sigil"] .demo, [data-theme="sigil"] .count,
[data-theme="sigil"] .p-hero .fn, [data-theme="sigil"] .tag, [data-theme="sigil"] .wv-count, [data-theme="sigil"] .nav-c {
  font-family: var(--label); font-size: var(--label-size); font-weight: 500; font-style: normal; letter-spacing: var(--label-track); text-transform: uppercase;
}
[data-theme="sigil"] .sec { color: var(--muted); margin-top: 36px; }
[data-theme="sigil"] .sec-row button { font-family: var(--label); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: 500; color: var(--ink); }
/* area markers: a small lozenge, the same in every area */
[data-theme="sigil"] .ar i, [data-theme="sigil"] .ic .area i, [data-theme="sigil"] .area-b i, [data-theme="sigil"] .qcard .qm i { width: 5px; height: 5px; border-radius: 0; transform: rotate(45deg); background: var(--ink-2); }

/* ---------- controls ---------- */
[data-theme="sigil"] .btn { height: 56px; font: 500 17px/1 var(--sys); letter-spacing: 0; }
[data-theme="sigil"] .btn2 { font: 500 15px/1 var(--sys); border-radius: 999px; }
[data-theme="sigil"] .lnk, [data-theme="sigil"] .foot .later { font: 500 15px/1 var(--sys); color: var(--ink-2); }
[data-theme="sigil"] .pill { font: 500 15px/1 var(--sys); border-radius: 999px; }
[data-theme="sigil"] .field, [data-theme="sigil"] .jfield input { background: var(--card) !important; border: .5px solid rgb(var(--ink-rgb) / .22); }
[data-theme="sigil"] .field .add { border-radius: 999px; }
[data-theme="sigil"] .hints button, [data-theme="sigil"] .sg { border-radius: 999px; }
[data-theme="sigil"] .qz-s, [data-theme="sigil"] .tq-q { letter-spacing: -.01em; }
[data-theme="sigil"] .nav-b { color: var(--ink); }
[data-theme="sigil"] .card, [data-theme="sigil"] .group { background: var(--card); border: .5px solid var(--hair); }

/* ---------- welcome, reveal, invite: the emblem alone on the page ---------- */
[data-theme="sigil"] .wl-art { width: 236px; margin-top: 12vh; }
[data-theme="sigil"] .wl-brand { font: 400 30px/1 var(--serif); letter-spacing: 0; color: var(--ink); margin-bottom: 18px; }
[data-theme="sigil"] .wl-h { font-size: 38px; }
[data-theme="sigil"] .wl-h em { color: var(--ink-2); }
[data-theme="sigil"] .rv-mark { width: 280px; }
[data-theme="sigil"] .rv-name { margin-top: 28px; font-size: 56px; letter-spacing: -.015em; }
[data-theme="sigil"] .rv-name::after, [data-theme="sigil"] .p-hero h1::after {
  content: ""; display: block; width: 7px; height: 7px; margin: 18px auto 0; transform: rotate(45deg); border: .5px solid var(--clay);
}
[data-theme="sigil"] .inv h1 { font-size: 36px; }
[data-theme="sigil"] .wv-t { font-size: 30px; }
[data-theme="sigil"] .notice p { font-size: 19px; color: var(--ink-2); }

/* ---------- cards: an engraved plate with corner marks ---------- */
[data-theme="sigil"] .ic {
  --cm: rgb(var(--ink-rgb) / .55);
  background:
    linear-gradient(var(--cm), var(--cm)) 10px 10px / 12px 1px no-repeat, linear-gradient(var(--cm), var(--cm)) 10px 10px / 1px 12px no-repeat,
    linear-gradient(var(--cm), var(--cm)) right 10px top 10px / 12px 1px no-repeat, linear-gradient(var(--cm), var(--cm)) right 10px top 10px / 1px 12px no-repeat,
    linear-gradient(var(--cm), var(--cm)) left 10px bottom 10px / 12px 1px no-repeat, linear-gradient(var(--cm), var(--cm)) left 10px bottom 10px / 1px 12px no-repeat,
    linear-gradient(var(--cm), var(--cm)) right 10px bottom 10px / 12px 1px no-repeat, linear-gradient(var(--cm), var(--cm)) right 10px bottom 10px / 1px 12px no-repeat,
    var(--card);
  border: .5px solid var(--hair); border-radius: 22px; padding: 34px 28px 28px;
}
[data-theme="sigil"] .ic h3 { font-size: 40px; }
[data-theme="sigil"] .ic p { font-size: 16px; }
[data-theme="sigil"] .ic .src { font-family: var(--label); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
[data-theme="sigil"] .ic .src span { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
[data-theme="sigil"] .stamp { font: 500 12px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; padding: 8px 12px; border-width: 1px; }
[data-theme="sigil"] .mini-ic, [data-theme="sigil"] .area-b { background: transparent; border: .5px solid var(--hair); }
[data-theme="sigil"] .area-b b { font-size: 19px; }

/* ---------- home ---------- */
[data-theme="sigil"] .qcard .qq { font-size: 28px; }
[data-theme="sigil"] .ed-mini .r b { font-size: 19px; }

/* ---------- pair ---------- */
[data-theme="sigil"] .p-hero { padding-top: 14px; }
[data-theme="sigil"] .p-hero h1 { font-size: 44px; }
[data-theme="sigil"] .p-hero .fn { color: var(--muted); margin-top: 12px; }
[data-theme="sigil"] .note { font-size: 22px; }
[data-theme="sigil"] .note b { font: 500 10.5px/2.6 var(--label); letter-spacing: .1em; color: var(--clay); width: 22px; }
[data-theme="sigil"] .pa { border-left: 0; padding: 18px 0; margin: 0; border-top: .5px solid var(--hair); }
[data-theme="sigil"] .pa + .pa { margin-top: 0; }
[data-theme="sigil"] .pa .top .ar { color: var(--ink); }
[data-theme="sigil"] .pa p { color: var(--ink-2); }
[data-theme="sigil"] .could { padding: 26px 22px; margin-top: 28px; }
[data-theme="sigil"] .could p { font-size: 28px; }
[data-theme="sigil"] .could .k { color: var(--clay); }

/* ---------- compare ---------- */
[data-theme="sigil"] .inv-card { background: transparent; border: 0; padding-top: 28px; }
[data-theme="sigil"] .inv-card .meds .q { border: .5px dashed rgb(var(--ink-rgb) / .4); }

/* ---------- P1: Home, Compare, the code, the pair ---------- */
[data-theme="sigil"] .hm-hero { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; text-align: left; padding-top: 30px; }
[data-theme="sigil"] .hm-mark { width: 120px; }
[data-theme="sigil"] .hm-k, [data-theme="sigil"] .hc-n, [data-theme="sigil"] .ic-n, [data-theme="sigil"] .sec-n, [data-theme="sigil"] .p-names, [data-theme="sigil"] .qr-k, [data-theme="sigil"] .qr-who small, [data-theme="sigil"] .rv-fh { font-family: var(--label); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
[data-theme="sigil"] .hm-k { margin-top: 0; }
[data-theme="sigil"] .hm-name { font-size: 42px; }
[data-theme="sigil"] .hm-line { font-size: 17px; }
[data-theme="sigil"] .hm-q, [data-theme="sigil"] .hm-grow, [data-theme="sigil"] .hm-start, [data-theme="sigil"] .hm .ed-mini, [data-theme="sigil"] .cmp-hero, [data-theme="sigil"] .qr-card, [data-theme="sigil"] .hc, [data-theme="sigil"] .rv-front, [data-theme="sigil"] .rv-back { background: var(--card); box-shadow: inset 0 0 0 .5px var(--hair); border: 0; }
[data-theme="sigil"] .hc { position: relative; }
[data-theme="sigil"] .hc::before, [data-theme="sigil"] .hc::after { content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none; }
[data-theme="sigil"] .hc::before { left: 7px; top: 7px; border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); }
[data-theme="sigil"] .hc::after { right: 7px; bottom: 7px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
[data-theme="sigil"] .hc b, [data-theme="sigil"] .rv-front b { font-size: 25px; line-height: 1.08; }
[data-theme="sigil"] .h-dots i.on { background: var(--clay); }
[data-theme="sigil"] .cmp-them i { border: .75px dashed rgb(var(--ink-rgb) / .45); inset: 4%; }
[data-theme="sigil"] .cmp-me svg { width: 112px; }
[data-theme="sigil"] .qr-card { position: relative; }
[data-theme="sigil"] .qr-card::before, [data-theme="sigil"] .qr-card::after { content: ""; position: absolute; width: 12px; height: 12px; }
[data-theme="sigil"] .qr-card::before { left: 8px; top: 8px; border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); }
[data-theme="sigil"] .qr-card::after { right: 8px; bottom: 8px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
[data-theme="sigil"] .qr-mk svg { width: 120px; }
[data-theme="sigil"] .hl-c { border-radius: 12px; }
/* quiz dots: the sigil accent */
[data-theme="sigil"] .qz-dots { --qz-dot: var(--ink); --qz-ring: var(--hair); --qz-on: var(--clay); }

/* the laptop layout reads this token (web/desk.css): the dial sits beside the name */
:root[data-theme="sigil"] { --d-hero-mark: 132px; }

/* ---------- A1 (12 Nov): the engraved scene on every reflection (web/scenes.js), its caption, its draw-in ---------- */
[data-theme="sigil"] .ic-vig { display: block; width: 100%; max-width: 300px; margin: 6px auto 0; color: var(--ink); }
[data-theme="sigil"] .hc-vig { display: block; width: 100%; max-width: 200px; margin: 2px 0 0; color: var(--ink); }
[data-theme="sigil"] .ic-vig svg, [data-theme="sigil"] .hc-vig svg { display: block; width: 100%; height: auto; }
[data-theme="sigil"] .vig-note { margin: 6px 0 0; font: 500 10px/1.35 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; }
[data-theme="sigil"] .hc .vig-note { margin: 2px 0 0; text-align: left; }
[data-theme="sigil"] .ic h3 { margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
  [data-theme="sigil"] svg.tp-on .sg-o { stroke-dasharray: 1; animation: sg-draw .9s cubic-bezier(.5,0,.2,1) .05s both; }
  [data-theme="sigil"] svg.tp-on .sg-h { animation: sg-fade .7s ease-out .55s both; }
  [data-theme="sigil"] svg.tp-on .tp-a { animation: sg-fade .45s ease-out 1.05s both; }
}
@keyframes sg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sg-fade { from { opacity: 0; } }
/* small sizes: hairlines a touch heavier so the engraving reads at 130 px; the featured card's plate fills its width */
[data-theme="sigil"] .hc-vig .sg-h { stroke-width: .5px; }
[data-theme="sigil"] .hc-vig .sg-o { stroke-width: 1px; }
[data-theme="sigil"] .hm-best .ic-vig { max-width: none; }