/* /assets/paper.css  shared look for the rebuilt pages (index, discography): paper texture, fonts, colors */
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap");

@font-face { font-family: "Federo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/federo-latin-400-normal.woff2") format("woff2"), url("fonts/federo-latin-400-normal.woff") format("woff"); }

:root {
  --ink: #060e57;        /* navy used for menu and body text */
  --brand: #203492;      /* MADmuse blue */
  --crimson: #a3203f;
  --paper: #f6f4ef;
  --frame-line: rgba(6,14,87,.6);   /* the thin rules framing the page on wide screens */
  --frame-tint: rgba(6,14,87,.07);  /* the faint shade beyond them */
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.paper {
  background: var(--paper) url("../images/paper2.jpg") repeat;
  color: var(--ink);
  font-family: "Josefin Sans", "Trebuchet MS", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* artwork cut from the original portal: white = transparent, so the paper shows through */
.art { mix-blend-mode: multiply; display: block; height: auto; max-width: 100%; }

/* ---------- shared page shell for the inner pages (music, photo, video, words, education) ---------- */
.paper-wrap, .home { background: var(--paper) url("../images/paper2.jpg") repeat; isolation: isolate; min-height: 100vh; }

/* wide screens: a thin rule on each side of the 1500px page, with a faint shade beyond it */
@media (min-width: 1560px) {
  body.paper, .paper-wrap, .home {
    background:
      linear-gradient(var(--frame-line), var(--frame-line)) calc(50vw - 752px) 0 / 2px 100% no-repeat fixed,
      linear-gradient(var(--frame-line), var(--frame-line)) calc(50vw + 750px) 0 / 2px 100% no-repeat fixed,
      linear-gradient(var(--frame-tint), var(--frame-tint)) left 0 / calc(50vw - 750px) 100% no-repeat fixed,
      linear-gradient(var(--frame-tint), var(--frame-tint)) right 0 / calc(50vw - 750px) 100% no-repeat fixed,
      var(--paper) url("../images/paper2.jpg") repeat;
  }
}
.site { max-width: 1500px; margin: 0 auto; min-height: 100vh; padding: 0 30px; display: grid; grid-template-columns: 255px minmax(0, 1fr); column-gap: 36px; }
/* the left margin fills the screen height like the home page: brand at top, menu spread evenly, book art at the bottom */
.site-side { display: flex; flex-direction: column; position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; padding: 28px 0 24px; }
.brand-link { text-decoration: none; display: block; }
.brand-text { margin: 0; color: var(--brand); font-family: "Federo", "Josefin Sans", sans-serif; letter-spacing: .01em; font-size: 1.32rem; line-height: 1.25; font-weight: 400; }
.site-nav { flex: 1; display: flex; min-height: 0; }
.site-nav ul { list-style: none; margin: 0; padding: 40px 0 20px; display: flex; flex-direction: column; justify-content: space-around; width: 100%; }
.site-nav a { display: inline-block; padding: 8px 0; text-decoration: none; text-transform: uppercase; letter-spacing: .05em; font-size: 1.05rem; }
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] { color: #d6232a; font-weight: 600; }
.book-art { width: 116px; margin-top: 0; flex: none; }
.site-main { min-width: 0; padding-top: 34px; padding-bottom: 40px; position: relative; overflow: clip; }
@media (max-width: 860px) {
  .site { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 20px 36px; min-height: 0; }
  .site-side { display: contents; }
  .site-main { padding-top: 0; }
  .brand-link { order: 1; }
  .site-nav { order: 3; flex: none; width: 100%; max-width: 360px; margin: 14px 0 22px; }
  .site-nav ul { padding: 0; gap: 0; }
  .site-nav li { border-top: 1px solid rgba(6,14,87,.18); }
  .site-nav li:last-child { border-bottom: 1px solid rgba(6,14,87,.18); }
  .site-nav a { display: block; padding: 14px 0; font-size: 1.15rem; }
  .site-main { order: 4; width: 100%; }
  .book-art { order: 5; margin: 30px auto 0; }
}