/* Oblique relief: a field guide in daylight. Cream paper, fine brown-black ink, one warm accent (the sun, the
   shared summit, numerals) and a second ink, slate blue, for the other person. The original Field guide voice:
   one book serif, italic for titles and voice, hairline and double rules, dotted leaders, small spaced capitals
   for labels, roman numerals for what you share. No boxes where a rule will do; the relief carries the page. */

:root[data-theme="oblique"] {
  --bone: #eee7d8; --bone-rgb: 238 231 216;
  --card: #f5f0e5; --card-rgb: 245 240 229;
  --ink: #211d18; --ink-rgb: 33 29 24;
  --ink-2: #463e34; --muted: #645a4d; --faint: #9b917f;
  --clay: #a8432a; --clay-rgb: 168 67 42; --deep: #7e3320;
  --sand: #e2d9c6; --tint: #e7dfcd;
  /* areas: one ink family, quiet; the relief is monochrome so the page stays monochrome */
  --values: #2f4a6b; --goals: #6a5320; --drives: #8e3a22; --tastes: #7a3d55; --life: #36553a; --world: #4f4470;
  --green-bg: transparent; --green: #34502c; --green-line: #34502c; --red-bg: transparent; --red: #7f2f1c; --danger: #a1301f;
  --stage-1: #e6dfcf; --stage-2: #cfc5b0;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sys: var(--serif);
  --label: var(--serif);
  --label-size: 10.5px; --label-track: .2em;

  --mark-ink: #211d18; --mark-ink-2: #3d5a7a; --mark-accent: #c0502f; --mark-paper: var(--bone); --mark-line: #fffdf7;

  --hair: rgb(var(--ink-rgb) / .22); --hair-2: rgb(var(--ink-rgb) / .11);
  --r-xl: 2px; --r-l: 2px; --r-m: 2px; --r-s: 2px; --r-btn: 2px;
  --sh-1: none; --sh-2: none; --sh-btn: none;
  --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="oblique"] {
    /* night reading: warm umber paper, cream ink, the same relief drawn in light lines */
    --bone: #1c1a16; --bone-rgb: 28 26 22;
    --card: #23201b; --card-rgb: 35 32 27;
    --ink: #ece4d2; --ink-rgb: 236 228 210;
    --ink-2: #cdc3ae; --muted: #a59b87; --faint: #6f685a;
    --clay: #e3916c; --clay-rgb: 227 145 108; --deep: #eaa98a;
    --sand: #2d2a23; --tint: #27241e;
    --values: #9fb6d3; --goals: #d5bd7c; --drives: #e39d82; --tastes: #d7a3b9; --life: #a9c49b; --world: #b6abd8;
    --green: #b8cf9f; --green-line: #b8cf9f; --red: #eba58b; --danger: #f08a74;
    --stage-1: #201e19; --stage-2: #0d0c0a;
    --mark-ink: #e9e1cf; --mark-ink-2: #9db8d8; --mark-accent: #d8653d; --mark-line: #1c1a16;
    --hair: rgb(var(--ink-rgb) / .22); --hair-2: rgb(var(--ink-rgb) / .11);
  }
}

/* ---------- type: one book serif, italic for voice, small spaced capitals for labels ---------- */
[data-theme="oblique"] body { letter-spacing: 0; font-feature-settings: "kern", "liga", "onum"; }
[data-theme="oblique"] .lt { font-size: 32px; line-height: 1.1; font-style: italic; letter-spacing: -.012em; }
[data-theme="oblique"] .sub { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
[data-theme="oblique"] .hint, [data-theme="oblique"] .pg-time, [data-theme="oblique"] .readline { font-style: italic; }
[data-theme="oblique"] .sec, [data-theme="oblique"] .sec-row .sec, [data-theme="oblique"] .ar, [data-theme="oblique"] .ic .area,
[data-theme="oblique"] .qcard .k, [data-theme="oblique"] .could .k, [data-theme="oblique"] .demo, [data-theme="oblique"] .tag,
[data-theme="oblique"] .wl-brand, [data-theme="oblique"] .count, [data-theme="oblique"] .qz-n, [data-theme="oblique"] .vr-note,
[data-theme="oblique"] .also-h, [data-theme="oblique"] .p-hero .fn {
  font-family: var(--label); font-size: var(--label-size); font-weight: 400; font-style: normal; letter-spacing: var(--label-track); text-transform: uppercase;
}
[data-theme="oblique"] .sec { color: var(--muted); margin-top: 34px; margin-bottom: 12px; }
[data-theme="oblique"] .sec-row { align-items: baseline; }
[data-theme="oblique"] .sec-row button { font: italic 400 15px var(--serif); color: var(--deep); }
/* area markers: no colored dots; a small open ring in ink */
[data-theme="oblique"] .ar i, [data-theme="oblique"] .ic .area i, [data-theme="oblique"] .area-b i, [data-theme="oblique"] .qcard .qm i {
  width: 6px; height: 6px; background: transparent; box-shadow: inset 0 0 0 1px var(--ink-2); border-radius: 50%;
}
[data-theme="oblique"] .ar, [data-theme="oblique"] .ic .area { color: var(--muted); }

/* ---------- controls ---------- */
[data-theme="oblique"] .btn { height: 54px; font: 600 17px/1 var(--serif); letter-spacing: .01em; }
[data-theme="oblique"] .btn2 { font: 600 15.5px var(--serif); border: .5px solid rgb(var(--ink-rgb) / .45); }
[data-theme="oblique"] .pill { font-family: var(--serif); font-weight: 600; }
[data-theme="oblique"] .lnk, [data-theme="oblique"] .foot .later, [data-theme="oblique"] .qz-back { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--deep); }
[data-theme="oblique"] .nav-b { color: var(--ink); }
[data-theme="oblique"] .tab { font: italic 400 11px var(--serif); }
[data-theme="oblique"] .card, [data-theme="oblique"] .group { background: transparent; border: .5px solid var(--hair); }
[data-theme="oblique"] .field input, [data-theme="oblique"] .jfield input, [data-theme="oblique"] textarea { font-family: var(--serif); }
[data-theme="oblique"] .field { border: 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .55); border-radius: 0; padding-left: 2px; }
[data-theme="oblique"] .field .add { background: transparent; color: var(--deep); font-style: italic; font-weight: 400; }
[data-theme="oblique"] .jfield input { border: 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .55); border-radius: 0; padding: 0 2px; }
[data-theme="oblique"] .jfield label { font: italic 400 14px var(--serif); color: var(--muted); padding-left: 2px; }
[data-theme="oblique"] textarea { border-radius: 2px; }
[data-theme="oblique"] .hints button { font-style: italic; color: var(--ink-2); text-decoration-color: rgb(var(--ink-rgb) / .3); }
[data-theme="oblique"] .frow { background: transparent; border: 0; border-bottom: .5px solid var(--hair); border-radius: 0; padding: 10px 2px; }
[data-theme="oblique"] .frow .t b { font-weight: 600; }
[data-theme="oblique"] .sg { border-radius: 2px; }
[data-theme="oblique"] .steps i { height: 1.5px; border-radius: 0; }
[data-theme="oblique"] .steps i.cur { background: var(--clay); }
[data-theme="oblique"] .consent { font-style: italic; font-size: 13px; }

/* quiz: a statement in the book serif, answers as ruled lines rather than boxes */
[data-theme="oblique"] .qz-s { font-size: 28px; line-height: 1.2; }

/* tell us */
[data-theme="oblique"] .tq-q { font-size: 20px; }
[data-theme="oblique"] .vr-go { border-radius: 2px; }
[data-theme="oblique"] .vr-meter i { width: 1.5px; background: var(--ink); }
[data-theme="oblique"] .vr-time { font-style: italic; }
[data-theme="oblique"] .vr-done { background: var(--clay); }

/* ---------- welcome, reveal, invite: the plate alone, captioned ---------- */
[data-theme="oblique"] .wl-art { width: 270px; max-width: 74%; margin-top: 7vh; }
[data-theme="oblique"] .wl-brand { color: var(--ink-2); margin-bottom: 18px; letter-spacing: .34em; font-size: 11px; }
[data-theme="oblique"] .wl-h { font-size: 31px; line-height: 1.16; }
[data-theme="oblique"] .wl-h em { font-style: italic; color: var(--ink-2); }
[data-theme="oblique"] .rv-mark { width: 300px; max-width: 80vw; }
[data-theme="oblique"] .rv-name { font-size: 46px; font-style: italic; margin-top: 18px; letter-spacing: -.015em; }
[data-theme="oblique"] .rv-name::after, [data-theme="oblique"] .p-hero h1::after {
  content: ""; display: block; height: 3px; margin: 14px auto 0; width: 100%; max-width: 320px; border-top: .5px solid var(--ink); border-bottom: .5px solid var(--ink);
}
[data-theme="oblique"] .inv h1 { font-size: 31px; line-height: 1.16; }
[data-theme="oblique"] .inv .inv-sub { font-style: italic; font-size: 16px; }
[data-theme="oblique"] .inv .inv-mark { width: 240px; }
[data-theme="oblique"] .wv-t { font-size: 27px; font-style: italic; }
[data-theme="oblique"] .notice p { font-size: 18px; }
[data-theme="oblique"] .pg-t { font-size: 29px; font-style: italic; }
[data-theme="oblique"] .pg-mark { width: 168px; }
[data-theme="oblique"] .pg-s > i { width: 7px; height: 7px; }
[data-theme="oblique"] .pg-s span { font-size: 17px; }
[data-theme="oblique"] .pg-s em { font-style: italic; }
[data-theme="oblique"] .ghost { border-radius: 2px; }

/* ---------- cards: a page from the field guide ---------- */
[data-theme="oblique"] .ic {
  background: var(--card); border: .5px solid var(--hair); border-radius: 2px; box-shadow: 0 1px 0 rgb(var(--ink-rgb) / .06);
  padding: 26px 24px 22px;
}
[data-theme="oblique"] .ic h3 { font-size: 34px; line-height: 1.08; font-style: italic; padding-bottom: 14px; border-bottom: .5px solid var(--hair); }
[data-theme="oblique"] .ic p { font-size: 17.5px; line-height: 1.55; color: var(--ink-2); }
[data-theme="oblique"] .ic .src { font-style: italic; font-size: 14px; }
[data-theme="oblique"] .ic .src span { font-style: normal; font-size: 12.5px; border-radius: 2px; }
[data-theme="oblique"] .stamp { font: italic 400 22px/1 var(--serif); border-width: 1px; }
[data-theme="oblique"] .mini-ic { background: transparent; border: .5px solid var(--hair); border-radius: 2px; }
[data-theme="oblique"] .mini-ic h4 { font-size: 20px; line-height: 1.16; font-style: italic; }
[data-theme="oblique"] .area-b { background: transparent; border: .5px solid var(--hair); }
[data-theme="oblique"] .area-b b { font-size: 16px; }

/* ---------- home ---------- */
[data-theme="oblique"] .h-top .who b, [data-theme="oblique"] .who b { font-size: 27px; font-style: italic; }
[data-theme="oblique"] .h-cmp { border: 0; border-top: .5px solid var(--ink); border-bottom: .5px solid var(--hair); background: transparent; }
[data-theme="oblique"] .h-cmp h3 { font-style: italic; }
[data-theme="oblique"] .qcard { border-top: 1.5px solid var(--clay); }
[data-theme="oblique"] .qcard .qq { font-size: 23px; line-height: 1.2; font-style: italic; }
[data-theme="oblique"] .fin { background: transparent; border: 0; border-top: .5px solid var(--ink); border-radius: 0; padding: 14px 0; }
[data-theme="oblique"] .fin-h b { font-style: italic; }
[data-theme="oblique"] .prow .t b { font-style: italic; font-weight: 400; font-size: 20px; }
[data-theme="oblique"] .avatar { font-family: var(--serif); font-style: italic; }

/* ---------- pair: field notes ---------- */
[data-theme="oblique"] .p-marks { margin: 0 -6px 10px; }
[data-theme="oblique"] .p-marks .jm { width: 100%; max-width: 360px; height: auto; }
[data-theme="oblique"] .p-hero { text-align: left; }
[data-theme="oblique"] .p-hero h1 { font-size: 40px; font-style: italic; letter-spacing: -.015em; }
[data-theme="oblique"] .p-hero h1::after { margin-left: 0; max-width: none; }
/* what you share: roman numerals in the accent, like the plates */
[data-theme="oblique"] .notes { counter-reset: ob; }
[data-theme="oblique"] .note { font-size: 18.5px; line-height: 1.4; gap: 12px; }
[data-theme="oblique"] .note b { counter-increment: ob; font-size: 0; width: 34px; flex: none; }
[data-theme="oblique"] .note b::before { content: counter(ob, upper-roman) "."; font: italic 400 18px/1.4 var(--serif); color: var(--clay); }
[data-theme="oblique"] .pa { border-left: 0; padding: 16px 0; margin: 0; border-top: .5px solid var(--hair); }
[data-theme="oblique"] .pa + .pa { margin-top: 0; }
/* area by area: label, dotted leader, verdict */
[data-theme="oblique"] .pa .top { display: flex; align-items: baseline; gap: 8px; }
[data-theme="oblique"] .pa .top::after { content: ""; order: 1; flex: 1; min-width: 12px; border-bottom: 1px dotted rgb(var(--ink-rgb) / .4); transform: translateY(-3px); }
[data-theme="oblique"] .pa .top .tag { order: 2; }
[data-theme="oblique"] .pa .top .ar { color: var(--ink); }
[data-theme="oblique"] .pa p { font-size: 17px; line-height: 1.5; color: var(--ink-2); }
[data-theme="oblique"] .pa.ls h4 { font-style: italic; }
[data-theme="oblique"] .tag { font-size: 10px; background: transparent !important; box-shadow: none !important; padding: 0; }
[data-theme="oblique"] .tag.s { color: var(--ink); }
[data-theme="oblique"] .tag.e { color: var(--muted); font-style: normal; }
[data-theme="oblique"] .could { border: 0; border-top: 1.5px solid var(--clay); background: transparent; padding-left: 0; padding-right: 0; }
[data-theme="oblique"] .could p { font-size: 23px; line-height: 1.22; font-style: italic; }
[data-theme="oblique"] .could .ask p { font-size: 19px; }
[data-theme="oblique"] .l-intro { font-style: italic; }
[data-theme="oblique"] .qs li { border-left: 0; padding-left: 0; }
[data-theme="oblique"] .qs li::before { content: "\2014\2002"; color: var(--faint); font-style: normal; }
[data-theme="oblique"] .thin { border-radius: 2px; }
[data-theme="oblique"] .more-b .btn2 { border-radius: 2px; }

/* ---------- compare, share ---------- */
[data-theme="oblique"] .inv-card { background: transparent; border: 0; border-top: .5px solid var(--hair); }
[data-theme="oblique"] .inv-card h3 { font-size: 26px; font-style: italic; }
[data-theme="oblique"] .inv-card .meds .q, [data-theme="oblique"] .meds .q { border-radius: 2px; font-style: italic; border-width: 1px; }
[data-theme="oblique"] .linkbox { border-radius: 2px; }
[data-theme="oblique"] .linkbox button { border-radius: 2px; font-family: var(--serif); }
[data-theme="oblique"] .reclink { border-radius: 2px; }
/* quiz dots: ink, the chosen one in clay */
[data-theme="oblique"] .qz-dots { --qz-dot: var(--ink); --qz-ring: var(--hair); --qz-on: var(--clay); }
[data-theme="oblique"] .qz-ends { font-style: italic; }