/* OutWrite Books: shared chrome for every page outside the home page.
   Swiss-Minimal direction (October 24, 2026): paper ground, cobalt type, one loud thing per screen.
   The covers carry the strong color; the site frames them. */

:root {
  --paper: #F4F2EE;
  --ink: #102F7A;
  --ink-soft: rgba(16,47,122,.72);
  --ink-mute: rgba(16,47,122,.56);
  --rule: rgba(16,47,122,.22);
  --yellow: #E8E85A;
  --coral: #8A2B3C;
  --coral-text: #8A2B3C;
  --serif: "Source Serif 4", Georgia, serif;
  --fell: "IM Fell DW Pica", Georgia, serif;
}
html { background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
a { color: var(--ink); }

/* Header */
.ow-site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 56px; background: rgba(244,242,238,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--ink);
}
.ow-site-header .ow-logo { display: flex; align-items: center; }
.ow-site-header .ow-logo img { height: 46px; width: auto; display: block; }
.ow-site-header nav { display: flex; align-items: center; gap: 36px; }
.ow-site-header nav a {
  position: relative; padding: 6px 0; text-decoration: none;
  font-size: .9rem; font-weight: 600; color: var(--ink);
}
.ow-site-header nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; background: var(--yellow);
  transition: right .25s ease;
}
.ow-site-header nav a:hover::after, .ow-site-header nav a[aria-current="page"]::after { right: 0; }

/* Footer: the one cobalt band on the light pages */
.ow-site-footer { padding: 64px 56px 52px; background: var(--ink); color: #f3f2f2; }
.ow-site-footer .ow-sf-inner { max-width: 1240px; margin: 0 auto; }
.ow-sf-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; }
.ow-sf-top img { height: 48px; width: auto; display: block; }
.ow-sf-top .ow-sf-about { margin: 22px 0 0; max-width: 40ch; font-size: .95rem; line-height: 1.65; color: #b9bfd3; }
.ow-sf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.ow-sf-cols div { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ow-sf-cols p { margin: 0 0 4px; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); }
.ow-sf-cols a { font-size: .9rem; color: #e4e6ee; text-decoration: none; }
.ow-sf-cols a:hover { color: var(--yellow); }
.ow-sf-base {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(243,242,242,.25);
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #b9bfd3;
}
.ow-sf-base p { margin: 0; }

@media (max-width: 900px) {
  .ow-site-header { padding: 14px 24px; }
  .ow-site-footer { padding: 52px 24px 44px; }
  .ow-sf-top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 620px) {
  .ow-site-header { flex-direction: column; gap: 10px; padding: 12px 20px 8px; }
  .ow-site-header .ow-logo img { height: 38px; }
  .ow-site-header nav { gap: 26px; }
  .ow-site-header nav a { font-size: .85rem; }
}