/* Folio: the "Folio, refined" mockup (round 2, i01). A private press edition: ivory paper, a light high-contrast
   display serif for names and titles, a clean sans for reading, small spaced capitals, an oxblood italic for the
   one voice line per screen, and gilt hairlines. The mark is the oblique relief struck as an engraved medal
   (fine horizontal lines inside a gilt double ring), which is how the mockup's coin was engraved. */

:root[data-theme="folio"] {
  --bone: #f3eee5; --bone-rgb: 243 238 229;
  --card: #f8f5ee; --card-rgb: 248 245 238;
  --ink: #1b1713; --ink-rgb: 27 23 19;
  --ink-2: #40372f; --muted: #675d53; --faint: #8e8378;
  --clay: #7b2d1e; --clay-rgb: 123 45 30; --deep: #7b2d1e;
  --gilt: #a3865a; --gilt-rgb: 163 134 90;
  --sand: #eae3d7; --tint: #ece6da;
  --values: #40372f; --goals: #40372f; --drives: #40372f; --tastes: #40372f; --life: #40372f; --world: #40372f;
  --green-bg: transparent; --green: #3b4a2a; --green-line: #3b4a2a; --red-bg: transparent; --red: #7b2d1e; --danger: #a1301f;
  --stage-1: #eae3d7; --stage-2: #d3c9b8;

  --serif: "Instrument Serif", "Cormorant Garamond", Didot, Georgia, serif;
  --sys: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --label: var(--sys);
  --label-size: 10.5px; --label-track: .2em;

  --mark-ink: #1b1713; --mark-ink-2: #6b5432; --mark-accent: #7b2d1e; --mark-paper: var(--bone); --mark-line: #fffdf7;

  --hair: rgb(var(--ink-rgb) / .13); --hair-2: rgb(var(--ink-rgb) / .08);
  --r-xl: 14px; --r-l: 12px; --r-m: 10px; --r-s: 8px; --r-btn: 12px;
  --sh-1: none; --sh-2: 0 1px 0 rgb(var(--ink-rgb) / .05), 0 18px 36px -24px rgb(var(--ink-rgb) / .3);
  --sh-btn: 0 1px 1px rgb(var(--ink-rgb) / .2), 0 10px 22px -12px rgb(var(--ink-rgb) / .5);
  --mat: var(--bone); --mat-card: var(--card);
  --grain: 0;
  --gut: 22px;
  --t-enter: .8s; --t-reveal: 1.2s;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="folio"] {
    --bone: #16130f; --bone-rgb: 22 19 15;
    --card: #1e1a15; --card-rgb: 30 26 21;
    --ink: #efe7d8; --ink-rgb: 239 231 216;
    --ink-2: #cfc4b2; --muted: #a59a88; --faint: #6d6557;
    --clay: #d98f74; --clay-rgb: 217 143 116; --deep: #d98f74;
    --gilt: #c3a676; --gilt-rgb: 195 166 118;
    --sand: #2a251e; --tint: #231f19;
    --values: #cfc4b2; --goals: #cfc4b2; --drives: #cfc4b2; --tastes: #cfc4b2; --life: #cfc4b2; --world: #cfc4b2;
    --green: #b8c79f; --green-line: #b8c79f; --red: #e3a58d; --danger: #f08a74;
    --stage-1: #1d1914; --stage-2: #090807;
    --mark-ink: #ebe2d0; --mark-ink-2: #c9ad7c; --mark-accent: #d98f74; --mark-line: #16130f;
    --sh-btn: none; --sh-2: none;
  }
}

/* ---------- type ---------- */
[data-theme="folio"] .lt { font-size: 44px; line-height: 1; letter-spacing: -.018em; }
[data-theme="folio"] .sub { color: var(--ink-2); font-size: 15.5px; }
[data-theme="folio"] .sec, [data-theme="folio"] .sec-row .sec, [data-theme="folio"] .ar, [data-theme="folio"] .ic .area,
[data-theme="folio"] .qcard .k, [data-theme="folio"] .could .k, [data-theme="folio"] .tag, [data-theme="folio"] .qz-n,
[data-theme="folio"] .also-h, [data-theme="folio"] .vr-note, [data-theme="folio"] .p-hero .fn {
  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="folio"] .sec { color: var(--muted); margin-top: 34px; }
[data-theme="folio"] .sec-row button { font: italic 400 17px var(--serif); color: var(--clay); letter-spacing: 0; }
/* area markers: a small open lozenge in gilt */
[data-theme="folio"] .ar i, [data-theme="folio"] .ic .area i, [data-theme="folio"] .area-b i, [data-theme="folio"] .qcard .qm i {
  width: 5px; height: 5px; border-radius: 0; transform: rotate(45deg); background: transparent; box-shadow: inset 0 0 0 1px var(--gilt);
}
/* the one voice line: oxblood italic in the display serif */
[data-theme="folio"] .wl-h em, [data-theme="folio"] .inv .inv-sub, [data-theme="folio"] .who .sharp { font: italic 400 21px/1.25 var(--serif); color: var(--clay); }

/* ---------- controls ---------- */
[data-theme="folio"] .btn { height: 54px; font: 500 16px/1 var(--sys); letter-spacing: .01em; box-shadow: var(--sh-btn) !important; }
[data-theme="folio"] .btn2 { font-weight: 500; border: .5px solid rgb(var(--ink-rgb) / .3); }
[data-theme="folio"] .lnk, [data-theme="folio"] .foot .later, [data-theme="folio"] .qz-back { font: italic 400 17px var(--serif); color: var(--ink-2); }
[data-theme="folio"] .nav-b { color: var(--ink); }
[data-theme="folio"] .card, [data-theme="folio"] .group { background: transparent; border: .5px solid var(--hair); }
[data-theme="folio"] .field { border: .5px solid rgb(var(--ink-rgb) / .2); background: transparent; }
[data-theme="folio"] .field .add { background: transparent; color: var(--clay); font: italic 400 18px var(--serif); }
[data-theme="folio"] .jfield input { border: .5px solid rgb(var(--ink-rgb) / .2); }
[data-theme="folio"] .jfield label { font: italic 400 16px var(--serif); color: var(--muted); }
[data-theme="folio"] .frow { background: transparent; border: 0; border-bottom: .5px solid var(--hair); border-radius: 0; padding: 10px 2px; }
[data-theme="folio"] .steps i { height: 1px; }
[data-theme="folio"] .steps i.cur { background: var(--gilt); height: 1.5px; }
[data-theme="folio"] .qz-s { font-size: 34px; line-height: 1.08; letter-spacing: -.014em; }
[data-theme="folio"] .tq-q { font-size: 24px; letter-spacing: -.012em; }
[data-theme="folio"] .vr-time { font-size: 30px; }
[data-theme="folio"] .vr-meter i { width: 1.5px; background: var(--ink); }
[data-theme="folio"] .vr-done { background: var(--clay); }
[data-theme="folio"] .pg-s > i { border-radius: 0; transform: rotate(45deg); width: 6px; height: 6px; }
[data-theme="folio"] .pg-steps, [data-theme="folio"] .tqs { border-top: .5px solid var(--ink); }

/* ---------- the medal: the relief in a gilt double ring ---------- */
[data-theme="folio"] .wl-art .jm, [data-theme="folio"] .rv-mark .jm, [data-theme="folio"] .inv-mark .jm, [data-theme="folio"] .pg-mark .jm, [data-theme="folio"] .wv-art .jm {
  border-radius: 50%; box-shadow: 0 0 0 1px var(--ink), 0 0 0 7px var(--bone), 0 0 0 7.75px var(--gilt);
}
[data-theme="folio"] .who .jm, [data-theme="folio"] .pmark .jm, [data-theme="folio"] .row .jm, [data-theme="folio"] .meds .jm {
  border-radius: 50%; box-shadow: 0 0 0 .75px var(--gilt);
}
[data-theme="folio"] .wl-art { width: 230px; margin-top: 10vh; }
[data-theme="folio"] .wl-brand { display: block; text-align: center; font: 400 64px/1 var(--serif); letter-spacing: -.01em; margin: 28px 0 0; }
[data-theme="folio"] .wl-brand::after { content: ""; display: block; width: 180px; height: 9px; margin: 16px auto 18px;
  background: linear-gradient(90deg, transparent, var(--gilt) 30%, var(--gilt) 44%, transparent 44%, transparent 56%, var(--gilt) 56%, var(--gilt) 70%, transparent) center / 100% 1px no-repeat; }
[data-theme="folio"] .wl-h { font: 400 18px/1.4 var(--sys); color: var(--ink-2); letter-spacing: 0; }
[data-theme="folio"] .wl-h em { display: block; margin-top: 4px; }
[data-theme="folio"] .rv-mark { width: 270px; }
[data-theme="folio"] .rv-name { font-size: 64px; letter-spacing: -.02em; margin-top: 30px; }
[data-theme="folio"] .rv-name::after, [data-theme="folio"] .p-hero h1::after {
  content: ""; display: block; width: 7px; height: 7px; margin: 16px auto 0; transform: rotate(45deg); border: .75px solid var(--gilt);
}
[data-theme="folio"] .inv .inv-mark { width: 220px; }
[data-theme="folio"] .inv h1 { font-size: 40px; line-height: 1.04; letter-spacing: -.016em; }
[data-theme="folio"] .pg-mark { width: 150px; }
[data-theme="folio"] .pg-t { font-size: 38px; line-height: 1.02; }

/* ---------- cards: a tipped-in plate ---------- */
[data-theme="folio"] .ic { background: var(--card); border: .5px solid var(--hair); border-radius: 14px; box-shadow: var(--sh-2); padding: 26px 24px 22px; }
[data-theme="folio"] .ic h3 { font-size: 42px; font-style: italic; line-height: 1.02; }
[data-theme="folio"] .ic p { font-size: 16px; line-height: 1.55; }
[data-theme="folio"] .ic .src span { background: transparent; box-shadow: inset 0 0 0 .5px var(--hair); }
[data-theme="folio"] .mini-ic h4 { font-size: 22px; font-style: italic; }
[data-theme="folio"] .stamp { font: italic 400 22px/1 var(--serif); }

/* ---------- home ---------- */
[data-theme="folio"] .h-top .who b { font-size: 32px; }
[data-theme="folio"] .h-cmp { background: transparent; border: 0; border-top: .5px solid var(--ink); border-radius: 0; }
[data-theme="folio"] .h-cmp h3 { font-size: 32px; }
[data-theme="folio"] .fin { background: transparent; border: 0; border-top: .5px solid var(--ink); border-radius: 0; padding: 14px 0; }
[data-theme="folio"] .fin-h b { font-size: 26px; }
[data-theme="folio"] .prow .t b { font: 400 24px/1.1 var(--serif); }
[data-theme="folio"] .avatar { font-family: var(--sys); font-size: 12px; letter-spacing: .06em; }

/* ---------- pair ---------- */
[data-theme="folio"] .p-marks .jm { width: 100%; max-width: 352px; height: auto; }
[data-theme="folio"] .p-hero h1 { font-size: 46px; letter-spacing: -.02em; }
[data-theme="folio"] .notes { counter-reset: fo; border-top: .5px solid var(--ink); }
[data-theme="folio"] .note { font: 400 19px/1.35 var(--sys); gap: 12px; padding: 12px 0; border-bottom: .5px solid var(--hair); }
[data-theme="folio"] .note b { counter-increment: fo; font-size: 0; width: 26px; flex: none; }
[data-theme="folio"] .note b::before { content: counter(fo, lower-roman); font: italic 400 19px/1.35 var(--serif); color: var(--muted); }
[data-theme="folio"] .pa { border-left: 0; padding: 16px 0; margin: 0; border-top: .5px solid var(--hair); }
[data-theme="folio"] .pa + .pa { margin-top: 0; }
[data-theme="folio"] .pa .top .ar { color: var(--ink); }
[data-theme="folio"] .pa p { color: var(--ink-2); }
[data-theme="folio"] .pa.ls h4 { font-size: 24px; font-style: italic; }
[data-theme="folio"] .could { border-top: .5px solid var(--gilt); }
[data-theme="folio"] .could p { font-size: 28px; font-style: italic; }
[data-theme="folio"] .could .k { color: var(--clay); }
[data-theme="folio"] .l-intro { font-size: 24px; }
[data-theme="folio"] .qs li { border-left-color: var(--gilt); }

/* ---------- compare ---------- */
[data-theme="folio"] .inv-card { background: transparent; border: .5px solid var(--hair); }
[data-theme="folio"] .inv-card h3 { font-size: 32px; }
/* quiz dots: hairline rings, the chosen one in gilt */
[data-theme="folio"] .qz-dots { --qz-dot: var(--ink); --qz-ring: var(--hair); --qz-on: var(--gilt); }
[data-theme="folio"] .qz-ends { font: italic 400 15px var(--serif); }