/* Shared base: fonts, tokens, layout and footer. */
/* ============ FONTS (self-hosted, latin subset) ============ */
@font-face {
  font-family: 'YasiHand';
  src: url('../assets/fonts/YasiHand-Regular.woff2') format('woff2'),
       url('../assets/fonts/YasiHand-Regular.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
/* The Fell types: Dutch-cut faces bought for Oxford in the 1670s, in Vermeer's own decade. */
@font-face {
  font-family: 'IM Fell Double Pica';
  src: url('../assets/fonts/im-fell-double-pica.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IM Fell DW Pica';
  src: url('../assets/fonts/im-fell-dw-pica.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IM Fell DW Pica';
  src: url('../assets/fonts/im-fell-dw-pica-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ============ VARIABLES ============ */
:root {
  /* The wall: whitewashed plaster. With the shutters open it's lit from a window at upper left,
     bright by the window and falling off hard into shade, as behind the Milkmaid, with a soft
     shaft of light slanting down through it. Shut, the room goes dusky: only a little light
     leaks round the leaves, so the far side sinks into shadow. */
  --plaster: #D4D1C8;
  --daylight:
    conic-gradient(from 112deg at 0 0, rgba(255,253,242,0) 0deg, rgba(255,253,242,0.18) 10deg,
      rgba(255,253,242,0.28) 17deg, rgba(255,253,242,0.18) 24deg, rgba(255,253,242,0) 36deg),
    radial-gradient(140% 115% at 0 0, #FFFEF9 0%, #EEECE5 18%, #D3D0C7 48%, #B9B5AA 78%, #ACA89C 100%);
  --dusk: radial-gradient(130% 110% at 0 0, #B3B0A7 0%, #A4A198 45%, #928F86 100%);
  --wall-ink: #1F2024;   /* text written straight on the wall: bone black */
  --wall-ink-2: #403D38; /* secondary text on the wall */
  --wall-rule: rgba(31, 32, 36, 0.18);
  --paper: #E7DEC8;      /* objects on the wall: the map sheet, wall labels */
  --gall: #35281E;       /* iron-gall ink */
  --umber: #6E5A45;      /* secondary text */
  --lead-tin: #BF931F;   /* the one accent, and the mark of "seen" */
  --gall-soft: rgba(53, 40, 30, 0.18);
  --wash: rgba(53, 40, 30, 0.1);
  --hand: 'YasiHand', cursive;
  --display: 'IM Fell Double Pica', Georgia, serif;
  --body: 'IM Fell DW Pica', Georgia, serif;
}

/* Shutters closed: the paper dims with the wall, and secondary text darkens to stay legible on the dusk. */
[data-light="off"] { --paper: #CDC4AE; --wall-ink-2: #2A2824; }

/* ============ RESET & BASE ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 17px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--body); color: var(--wall-ink);
  background: var(--plaster); min-height: 100vh; overflow-x: hidden;
  font-variant-numeric: oldstyle-nums;
}
::selection { background: rgba(191, 147, 31, 0.4); }
/* Daylight on the plaster, fixed to the screen like the window it comes from.
   Closing the shutters (html[data-light="off"]) fades it out and the dusk in. */
body::before, body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  transition: opacity 0.9s ease;
}
body::before { background: var(--daylight); }
body::after { background: var(--dusk); opacity: 0; }
[data-light="off"] body::before { opacity: 0; }
[data-light="off"] body::after { opacity: 1; }

/* ============ CONTENT PAGE LAYOUT ============ */
.content-body {
  max-width: 640px; margin: 0 auto; padding: 4.5rem 2rem 6rem;
}
.content-body h1, .content-body h2 { font-family: var(--display); font-weight: 400; color: var(--wall-ink); }
.content-body h2 { font-size: 1.6rem; margin: 2.8rem 0 1rem; line-height: 1.2; }
.content-body p {
  font-size: 1.1rem; line-height: 1.8;
  color: var(--wall-ink); margin-bottom: 1rem;
}
.content-body a {
  color: var(--lead-tin); text-decoration: underline;
  text-decoration-color: rgba(191, 147, 31, 0.45);
  text-underline-offset: 3px;
}
.content-body a:hover { text-decoration-color: var(--lead-tin); }

/* ============ SITE FOOTER ============ */
.site-footer {
  text-align: center;
  font-family: var(--body); font-style: italic;
  font-size: 0.86rem;
  color: var(--wall-ink-2);
  padding: 2rem 1rem 2.6rem;
}
.site-footer a {
  color: var(--wall-ink-2);
  text-decoration: underline;
  text-decoration-color: rgba(76, 73, 67, 0.4);
  text-underline-offset: 2px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 480px) {
  .content-body { padding: 2.4rem 1rem 3rem; }
  .content-body h2 { font-size: 1.35rem; }
  .content-body p { font-size: 1.04rem; line-height: 1.72; }
}