/* all.bo: dark parchment by default; light parchment is opt-in.
   Keep this file after styles.css. All light-theme selectors are scoped. */

/* Revision 02: matte reading surfaces; ageing expressed by edge shading. */
.spread {
  --ink: #ece3cd;
  --muted: #c7c2ae;
  --copper: #dbb781;
  --jade: #acd0b8;
  --line: #c6a46d45;
  --paper: #2d281f;
  color: var(--ink);
  background: var(--paper);
  color-scheme: dark;
}

.page-edges {
  background: repeating-linear-gradient(0deg, #9f855b 0 1px, #493b28 1px 2px, #b89b68 2px 3px);
}

.page {
  background:
    radial-gradient(ellipse at 24% 15%, #95784a0f, transparent 61%),
    linear-gradient(90deg, #0e0b073d, transparent 15px calc(100% - 15px), #130d084d),
    #2d281f;
  box-shadow: inset 0 0 16px #130d083d, inset 0 1px #c9ab7140;
}

.directory {
  background:
    radial-gradient(ellipse at 76% 10%, #95784a0f, transparent 60%),
    linear-gradient(90deg, #130d084d, transparent 15px calc(100% - 15px), #0e0b073d),
    #29261f;
}

.spread::after {
  background: linear-gradient(90deg, transparent, #100b0873 34%, #0b0807b3 47%, #d8ba7e40 54%, #1c120c45 65%, transparent);
}

.identity h1 { color: var(--ink); }
.identity h1 em { color: #e3d9bd; }
.bio { color: #e2ddca; }
.bio strong { color: #f4ead3; }
.dont-die { border-color: #d0ad7480; }
.portrait { box-shadow: 0 6px 13px #100b0880, 0 1px 3px #0c090666; }
.heading-flourish,
.social-icon,
.social-arrow { color: #c9ad7c; }
.project-code,
.folio { color: var(--muted); }
.colophon p { color: #dacbad; }
.colophon em { color: #d8d8b5; }
.colophon-line { background: #bfa16b66; }
.compass { color: #bca16c; opacity: .9; }
.compass .needle { fill: #a6c3a71a; stroke: #b4cdb4; }
.terminal-caret { color: var(--jade); }
.spread a:hover small,
.spread a:hover .handle { color: var(--jade); }
.spread a:focus-visible { outline-color: var(--jade); }

@media (max-width: 700px) {
  .directory {
    border-top-color: #211a12;
    box-shadow: inset 0 2px #998155, inset 0 4px #1d170f, inset 0 18px 25px -22px #0c0906;
  }
}

/* Light parchment: only the book interior changes. */
html[data-theme="light"] .spread {
  --ink: #302719;
  --muted: #382e20;
  --copper: #432810;
  --jade: #123524;
  --line: #70563355;
  --paper: #c7ab79;
  color: var(--ink);
  background: var(--paper);
  color-scheme: light;
}

html[data-theme="light"] .page-edges {
  background: repeating-linear-gradient(0deg, #ad8f5c 0 1px, #75603e 1px 2px, #cab080 2px 3px);
}

html[data-theme="light"] .page {
  background:
    radial-gradient(ellipse at 99% 12%, #7b451824, transparent 43%),
    radial-gradient(ellipse at 12% 83%, #90612421, transparent 45%),
    radial-gradient(ellipse at 28% 28%, #f0ddb43b, transparent 60%),
    linear-gradient(90deg, #80502a24, transparent 6% 90%, #65441f29),
    url("assets/parchment-grain.svg"),
    #c7ab79;
  box-shadow: inset 0 0 27px #6b431d24, inset 0 1px #efdbb373;
}

html[data-theme="light"] .directory {
  background:
    radial-gradient(ellipse at 78% 8%, #f0ddb430, transparent 58%),
    radial-gradient(ellipse at 99% 75%, #8b53242c, transparent 40%),
    radial-gradient(ellipse at 25% 65%, #a5763421, transparent 55%),
    linear-gradient(90deg, #70512638, transparent 9% 94%, #80502a26),
    url("assets/parchment-grain.svg"),
    #c3a573;
}

html[data-theme="light"] .spread::after {
  background: linear-gradient(90deg, transparent, #472f1461 34%, #301e1196 47%, #f6dfaf55 54%, #66462138 65%, transparent);
}

html[data-theme="light"] .identity h1 { color: #33291b; }
html[data-theme="light"] .identity h1 em { color: #3d4933; }
html[data-theme="light"] .bio { color: #382c1c; }
html[data-theme="light"] .bio strong { color: #281e12; }
html[data-theme="light"] .dont-die { border-color: #76502599; }

html[data-theme="light"] .portrait {
  background: #9d8358;
  border-color: #79613d80;
  box-shadow: 0 5px 10px #4b321a4d, 0 1px 3px #3b2a1755;
}
html[data-theme="light"] .portrait figcaption { color: #161c13; }
html[data-theme="light"] .photo-corner {
  background: linear-gradient(135deg, #dec9a0, #b6a078 46%, transparent 48%);
  filter: drop-shadow(1px 1px 1px #39291880);
}

html[data-theme="light"] .heading-flourish,
html[data-theme="light"] .social-icon,
html[data-theme="light"] .social-arrow { color: #66502d; }
html[data-theme="light"] .colophon p { color: var(--muted); }
html[data-theme="light"] .colophon em { color: #3c452d; }
html[data-theme="light"] .colophon-line { background: #78613f73; }
html[data-theme="light"] .compass { color: #75603a; opacity: 1; }
html[data-theme="light"] .compass .needle { fill: #354f3826; stroke: #3c5035; }
html[data-theme="light"] .folio,
html[data-theme="light"] .project-code { color: #382e20; }
html[data-theme="light"] .terminal-caret { color: #123524; }
html[data-theme="light"] .spread a:hover small,
html[data-theme="light"] .spread a:hover .handle { color: #123524; }
html[data-theme="light"] .spread a:focus-visible { outline-color: #123524; }

@media (max-width: 700px) {
  html[data-theme="light"] .directory {
    border-top-color: #4b3923;
    box-shadow: inset 0 2px #d1b27d, inset 0 4px #6e522f, inset 0 18px 25px -22px #503516;
  }
}

/* Printing uses dark ink on white for either screen theme. */
@media print {
  .spread,
  html[data-theme="light"] .spread {
    --ink: #111;
    --muted: #333;
    --copper: #333;
    --jade: #333;
    --line: #777;
    --paper: #fff;
    color-scheme: light;
    background: #fff;
  }

  .spread,
  .spread * {
    color: #111 !important;
  }

  .page-edges,
  .page,
  .directory,
  .portrait,
  html[data-theme="light"] .page-edges,
  html[data-theme="light"] .page,
  html[data-theme="light"] .directory,
  html[data-theme="light"] .portrait {
    background: #fff;
    box-shadow: none;
    border-color: #777;
  }

  .compass .needle,
  html[data-theme="light"] .compass .needle {
    fill: none;
    stroke: #333;
  }
}