/* A reading style for an Obsidian vault. Colours are taken from the vault's
   own publish.css, with its display-p3 values converted to sRGB.
   Kept deliberately dense; `deno fmt` is excluded so it stays under 100 lines. */
:root {
  --paper: #fcfbf9;            /* --background-primary */
  --ink: #2e1c05;              /* --h1-color */
  --text: #222; --muted: #6e6a60;
  --tan: 233, 210, 175;        /* --table-color / --callout-quote */
  --divider: rgba(71, 209, 140, .8);   /* --divider-color */
  --subtle: rgba(254, 188, 99, .45);   /* --subtle-divider-color */
  --link: #1a8fcf; --link-hover: #11608b; --link-new: #567d93;
  --display: Superclarendon, "Bookman Old Style", "URW Bookman", Georgia, serif;
  --body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }

body {
  display: grid; grid-template-columns: 14rem minmax(0, 40rem); gap: 0 3rem; justify-content: center;
  margin: 0; padding: 3.5rem 1.5rem 6rem; background: var(--paper); color: var(--text); font: 1.06rem/1.7 var(--body);
}

main { min-width: 0; } nav { align-self: start; font-size: .9rem; line-height: 1.5; }
nav a.site { display: block; margin-bottom: .9rem; font: 700 1.3rem/1.2 var(--display); color: var(--ink); }
#search { width: 100%; margin-bottom: .7rem; padding: .3rem .45rem; font: inherit; font-size: .85rem; color: var(--text); background: var(--paper); border: 1px solid var(--subtle); }
#results { margin: 0 0 .5rem; padding: 0; list-style: none; }
#results li { margin: .4rem 0; }
#results span { display: block; color: var(--muted); font-size: .78rem; line-height: 1.35; }
nav ul { margin: 0; padding-left: .8rem; list-style: none; } nav > ul { padding-left: 0; }
nav li { margin: .1rem 0; } nav a { color: var(--text); text-decoration: none; }
nav a:hover { color: var(--link); text-decoration: underline; }
nav a.folder { font-family: var(--display); font-variant: small-caps; letter-spacing: .03em; color: var(--ink); }
nav a.folder::before { content: "\25B8"; margin-right: .35em; font-size: .75em; color: var(--muted); }
nav a.open::before { content: "\25BE"; } nav [aria-current="page"] { color: var(--link); font-weight: 700; }

h1, h2, h3, h4, h5, h6 { margin: 2.5rem 0 .6rem; font-family: var(--display); line-height: 1.15; color: var(--ink); }
h1 { margin: 0 0 1.75rem; padding-bottom: .35rem; font-size: 2.1rem; border-bottom: 3px solid var(--divider); }
h2, h3 { font-variant: small-caps; letter-spacing: .04em; } h3 { font-size: 1.1rem; }
h2 { padding-bottom: .15rem; font-size: 1.35rem; border-bottom: 1px solid var(--subtle); }
h4, h5, h6 { margin-top: 1.75rem; font: italic 600 1.02rem/1.3 var(--body); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); } a.new { color: var(--link-new); text-decoration-style: dashed; }

/* Never let a map swallow the page. */
img { display: block; max-width: 100%; max-height: 68vh; height: auto; margin: 1.75rem auto; border: 1px solid rgba(var(--tan), .8); }

blockquote { margin: 1.75rem 0; padding-left: 1.25rem; border-left: 2px solid var(--divider); color: var(--ink); }
hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--subtle); } li { margin: .2rem 0; } .contains-task-list { padding-left: .2rem; list-style: none; }

table { width: 100%; margin: 1.75rem 0; border-collapse: collapse; font-size: .95rem; background: rgba(var(--tan), .2); }
th, td { padding: .45rem .7rem; border: 1px solid rgba(var(--tan), .8); text-align: left; }
thead th { font-family: var(--display); font-variant: small-caps; background: rgba(var(--tan), .05); }
tbody tr:nth-child(even) { background: rgba(var(--tan), .4); }
/* GFM emits alignment as an attribute; the rule above must not win. */
[align="center"] { text-align: center; } [align="right"] { text-align: right; } td img, th img { margin: .5rem auto; border: 0; }

code, pre { font-family: ui-monospace, Menlo, monospace; font-size: .88em; }
pre { padding: .9rem 1.1rem; overflow-x: auto; background: rgba(var(--tan), .25); border-left: 2px solid rgba(var(--tan), .8); }

/* Callouts are boxed text; flow-root stops a float overlapping them. */
[data-callout] { display: flow-root; margin: 1.75rem 0; padding: .85rem 1.1rem; background: rgba(var(--tan), .2); border: 1px solid var(--subtle); }
[data-callout-title] { font-family: var(--display); font-weight: 700; font-variant: small-caps; letter-spacing: .04em; color: var(--ink); } summary[data-callout-title] { cursor: pointer; }
[data-callout-body] > :first-child { margin-top: .45rem; } [data-callout-body] > :last-child { margin-bottom: 0; }

/* Conversation quotes: the line is the title, the speaker is the body. */
[data-callout-type="quote"] { padding: .1rem 0 .1rem 1.25rem; background: none; border: 0; border-left: 3px solid rgba(var(--tan), .9); }
[data-callout-type="quote"] [data-callout-title] { font: italic 400 1.06rem/1.7 var(--body); color: var(--ink); }
[data-callout-type="quote"] [data-callout-body] { font-size: .88rem; color: var(--muted); }
[data-callout-type="quote"] [data-callout-body] p::before { content: "— "; }

/* Figures sit beside the prose, captioned. */
[data-callout-type="figure"] { float: right; width: 300px; max-width: 45%; margin: .3rem 0 1rem 1.6rem; padding: 0; background: none; border: 0; }
[data-callout-type="figure"] [data-callout-title] { display: none; } [data-callout-type="figure"] img { width: 100%; margin: 0; }
[data-callout-type="figure"] [data-callout-body] > p + p { margin-top: .4rem; font-size: .84rem; font-style: italic; text-align: center; color: var(--muted); }

footer { grid-column: 2; clear: both; margin-top: 4rem; padding-top: .6rem; border-top: 3px solid var(--divider); font-size: .92rem; }
footer h2 { margin: .4rem 0; font-size: .95rem; border: 0; } footer ul { margin: 0; padding: 0; list-style: none; }

/* One column once the sidebar no longer fits beside the text. */
@media (max-width: 60rem) {
  body { grid-template-columns: minmax(0, 40rem); }
  nav { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--subtle); }
  footer { grid-column: 1; }
}
/* Too narrow to wrap prose beside a figure. */
@media (max-width: 34rem) {
  [data-callout-type="figure"] { float: none; width: auto; max-width: none; margin: 1.5rem 0; }
}

/* Wide gamut. P3 is real here, not a downconvert; rec2100-* is unsupported, so
   there is no true HDR in CSS. Only colours already at the sRGB edge gain. */
@media (color-gamut: p3) {
  :root {
    --link: color(display-p3 0 .5513 .8878);
    --link-hover: color(display-p3 0 .3705 .6004);
    --subtle: color(display-p3 1 .7292 .3124 / .45);
  }
}