/* Baronia de Finestrat · quadern d'arxiu. Una sola columna de lectura, papers i lacre. Tema clar fix, escollit. */
:root {
  --paper: #F3EBDC;
  --paper-2: #EADFCB;
  --ink: #2E2219;
  --ink-soft: #5B4C3F;
  --rule: #CDBFA8;
  --wax: #7E2A1C;
  --wax-dark: #5C1E14;
  --band: #2E2219;
  --band-ink: #E8D9C0;
  --band-ink-strong: #FFFAF1;
  --gold: #D9B871;
  --gold-soft: #B08A46;
  --display: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --text: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.75;
}
img { max-width: 100%; display: block; }
a { color: var(--wax); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--wax-dark); }
a:focus-visible { outline: 2px solid var(--wax); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; font-weight: 400; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* Capçalera amb el Puig Campana */
.hero {
  background-color: #3A4E6E;
  background-image:
    linear-gradient(100deg, rgba(14,30,58,.45) 0%, rgba(14,30,58,.18) 38%, rgba(14,30,58,0) 55%),
    linear-gradient(180deg, rgba(30,20,12,0) 82%, rgba(30,20,12,.35) 100%),
    url(img/capcalera.jpg);
  background-size: cover;
  background-position: left bottom;
  color: var(--band-ink-strong);
}
.hero .wrap {
  min-height: clamp(380px, 52vw, 600px);
  padding-block: clamp(36px, 6vw, 64px) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.hero-title {
  font-family: var(--display);
  font-size: clamp(48px, 8.4vw, 84px);
  line-height: 0.98;
  color: var(--band-ink-strong);
  text-decoration: none;
  text-shadow: 0 2px 22px rgba(0,0,0,.4);
}
.hero-title:hover { color: var(--band-ink-strong); }
.hero-rule { width: 110px; border-top: 1px solid var(--gold); margin: 8px 0 4px; }
.hero-sub {
  font-size: clamp(16px, 2vw, 19px);
  font-style: italic;
  color: #F4E9D4;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.hero.small .wrap { min-height: clamp(220px, 28vw, 320px); padding-block: 32px 0; }
.hero.small .hero-title { font-size: clamp(36px, 5vw, 52px); }

/* Menú */
.menu { background: var(--band); border-top: 1px solid var(--gold); }
.menu .wrap {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(20px, 4vw, 40px);
  font-size: 16px; letter-spacing: 0.08em; font-variant: small-caps;
}
.menu a { color: var(--band-ink); text-decoration: none; padding: 14px 0; border-bottom: 2px solid transparent; }
.menu a:hover { color: var(--band-ink-strong); }
.menu a[aria-current="page"] { color: var(--band-ink-strong); border-bottom-color: var(--gold); }

/* Portada */
.home { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; padding-block: 64px 72px; }
.home-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 44px; }
.eyebrow { font-size: 14px; letter-spacing: 0.1em; font-variant: small-caps; color: var(--wax); }
.entry { display: flex; flex-direction: column; gap: 16px; }
.entry h2 { margin: 0; font-family: var(--display); font-size: clamp(38px, 5vw, 52px); line-height: 1.04; }
.entry h2 a { color: var(--ink); text-decoration: none; }
.entry h2 a:hover { color: var(--wax); }
.entry p { margin: 0; }
.entry figure { margin: 6px 0 0; display: flex; flex-direction: column; gap: 10px; }
.entry figure a { display: block; box-shadow: 0 1px 0 var(--rule), 0 14px 30px -18px rgba(46,34,25,.6); }
.entry figure img { width: 100%; height: clamp(220px, 32vw, 340px); object-fit: cover; object-position: center 40%; }
.entry figure img.strip, .article figure img.strip { height: auto; object-fit: initial; }
.article figure.detail { margin: 6px 0; }
.article figure.detail img { box-shadow: 0 1px 0 var(--rule), 0 10px 24px -16px rgba(46,34,25,.55); }
figcaption { font-size: 14px; font-style: italic; color: var(--ink-soft); line-height: 1.55; }
.fleuron { margin: 0; text-align: center; font-size: 22px; color: var(--gold-soft); }

.side { flex: 1 1 280px; display: flex; flex-direction: column; gap: 38px; font-size: 16px; line-height: 1.65; }
.side section { display: flex; flex-direction: column; gap: 12px; }
.side h2 {
  margin: 0; font-family: var(--text); font-size: 16px; letter-spacing: 0.08em; font-variant: small-caps;
  color: var(--wax); border-bottom: 1px solid var(--rule); padding-bottom: 6px;
}
.side p { margin: 0; }
.side img { width: 100%; height: 170px; object-fit: cover; object-position: center 30%; }
.side ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }

/* Article */
.article { max-width: 700px; margin: 0 auto; padding-block: 56px 72px; display: flex; flex-direction: column; gap: 22px; }
.article-head { display: flex; flex-direction: column; gap: 12px; text-align: center; margin-bottom: 18px; }
.article-head h1 { margin: 0; font-family: var(--display); font-size: clamp(40px, 6vw, 60px); line-height: 1.04; }
.lede { font-style: italic; font-size: 20px; line-height: 1.6; color: var(--ink-soft); text-align: center; margin: 0; }
.article p { margin: 0; hyphens: auto; }
.article h2 {
  margin: 28px 0 0; font-family: var(--display); font-size: clamp(26px, 3.4vw, 32px); line-height: 1.15;
}
.article .first::first-letter {
  float: left; font-family: var(--display); font-size: 74px; line-height: 0.82; padding: 6px 10px 0 0; color: var(--wax);
}
.article figure { margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.article figure img { width: 100%; height: auto; box-shadow: 0 14px 30px -18px rgba(46,34,25,.6); }
sup { font-size: 0.62em; line-height: 0; }
sup a { text-decoration: none; padding: 0 1px; }
.notes {
  margin-top: 26px; border-top: 1px solid var(--rule); padding-top: 18px;
  display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-soft);
}
.notes p { margin: 0; }
.notes a.back { text-decoration: none; margin-left: 4px; }
.back-home { text-align: center; font-size: 16px; margin-top: 14px; }

/* Pàgines fixes */
.page { max-width: 700px; margin: 0 auto; padding-block: 56px 72px; display: flex; flex-direction: column; gap: 20px; }
.page h1 { margin: 0 0 8px; font-family: var(--display); font-size: clamp(38px, 5.6vw, 52px); line-height: 1.05; text-align: center; }
.page h2 { margin: 18px 0 0; font-family: var(--display); font-size: 30px; }
.page p { margin: 0; }
.page figure { margin: 4px 0 10px; display: flex; flex-direction: column; gap: 10px; }
.placeholder { color: #8A7B6C; }
.portrait-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.portrait { flex: 0 0 150px; aspect-ratio: 4 / 5; max-width: 100%; background: var(--paper-2); display: flex; align-items: center; justify-content: center; font-size: 14px; font-style: italic; color: #6E5E4F; }
.portrait-row > div { flex: 999 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* Peu */
.foot { background: var(--band); color: var(--band-ink); border-top: 1px solid var(--gold); }
.foot .wrap { padding-block: 40px 28px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 14px; line-height: 1.6; }
.foot .name { font-family: var(--display); font-size: 28px; color: var(--band-ink-strong); }
.foot a { color: #E3C48A; }
.foot .credits { margin-top: 12px; font-size: 12px; color: #B9A88E; max-width: 720px; }

@media (max-width: 560px) {
  body { font-size: 17px; }
  .home { padding-block: 44px 56px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
img.portrait { object-fit: cover; width: 150px; height: auto; aspect-ratio: 4 / 5; box-shadow: 0 1px 0 var(--rule), 0 12px 26px -16px rgba(46,34,25,.55); }