/* =========================================================================
   Di Lecce Studio, secondary pages: the inside pages of the same printed feature.
   Loaded AFTER editorial.css (tokens, type, intertitles, folio, index, colophon) on
   every page except the home. Adds only what the home does not have: a static
   masthead line at the top of page I, an always-on folio, a site list in the index
   panel, and the prose measure. Nothing here can reach the home (it never loads it).
   Behaviour: assets/editorial/pages.js.
   ========================================================================= */

/* ------------------------------------------------------------------ masthead line (top of page, not fixed) */
.pgMast { position: relative; z-index: 5; }
.pgMast__in {
  max-width: calc(1320px + var(--rail) + 2 * var(--g));
  margin: 0 auto;
  padding: 24px var(--g) 0 calc(var(--rail) + var(--g));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
}
.pgMast__brand { display: inline-block; padding: 4px 0; }
.pgMast__nav { display: flex; gap: clamp(18px, 2.2vw, 34px); padding-top: 4px; }
.pgMast__nav a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  padding: 6px 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.6em;
  transition: text-decoration-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.pgMast__nav a[aria-current="page"] { text-decoration-color: var(--hair); }
.pgMast__nav .pgMast__contact { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .pgMast__nav a:hover { text-decoration-color: currentColor; }
}
.pgMast--paper { background: var(--paper); }
.pgMast--ink { background: var(--ink); }
@media (max-width: 900px) {
  .pgMast__in { padding: 18px var(--g) 0; }
  .pgMast__nav { gap: var(--s5); }
}

/* the first chapter sits under the masthead line: less air above its intertitle */
.pgFirst { padding-top: clamp(40px, 7vh, 80px); }

/* ------------------------------------------------------------------ folio: always on (no hero to clear) */
.edFolio.pgFolio { opacity: 1; visibility: visible; transition: none; }
.pgFolio .edIndex { overflow-y: auto; overscroll-behavior: contain; }   /* long indexes (privacy) scroll inside the panel */
.edIndex__list a[aria-current="true"] .edIndex__t { color: var(--text); }
.pgIndex__site {
  list-style: none;
  margin: var(--s6) 0 0;
  padding: var(--s4) 0 0;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
}
.pgIndex__site a {
  display: inline-block;
  padding: 6px 0;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--soft);
  transition: color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pgIndex__site a:hover { color: var(--accent); }
}

/* phones: the folio is a bottom bar, so every page needs room under its last line */
@media (max-width: 900px) {
  .pgBody { padding-bottom: 0; }
  .pgBody .edColophon { padding-bottom: calc(var(--chap) * 0.6 + 52px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------------ chapter heads used on inside pages */
.pgHead { grid-column: 1 / span 8; margin-bottom: clamp(36px, 6vh, 64px); }
.pgHead .edLead { margin-top: var(--s4); }
@media (max-width: 900px) { .pgHead { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------ prose measure (long reading) */
.pgProse { max-width: 68ch; font-size: 17px; line-height: 1.7; color: var(--text); }
.pgProse p, .pgProse ul, .pgProse ol { margin: 0 0 1.05em; }
.pgProse ul, .pgProse ol { padding-left: 1.2em; }
.pgProse li { margin-bottom: 0.4em; }
.pgProse a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.28em; }
.pgProse strong { font-weight: 650; }
@media (hover: hover) and (pointer: fine) {
  .pgProse a:hover { color: var(--accent); }
}

/* ------------------------------------------------------------------ mobile: first screen, headings, touch, keyboard */
/* the first chapter keeps its 14px rise but never starts invisible: the title paints without waiting for JS (LCP) */
html.edm .pgFirst [data-in], html.edp .pgFirst [data-in] { opacity: 1; }

/* no one-word last lines in inside-page subheads (contact plate name, privacy section heads, ledger rows) */
/* (.edH3 balance is site-wide in editorial.css) */
@media (max-width: 640px) {
  .pgBody h2, .pgBody h3 { text-wrap: balance; }   /* phones: prose and page-scoped subheads too */
}

/* touch: 44px hit areas around the masthead and index-panel links, nothing moves (coarse pointers only) */
@media (pointer: coarse) {
  .pgMast__brand, .pgMast__nav a, .pgIndex__site a { position: relative; }
  .pgMast__brand::before, .pgMast__nav a::before, .pgIndex__site a::before {
    content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%);
  }
}

/* safe areas (viewport-fit=cover): the masthead line clears the notch in landscape and the status bar,
   same values as the home's masthead; .edWrap / .edFolio / --rail already come from editorial.css */
@media (max-width: 900px) {
  .pgMast__in {
    padding-top: max(18px, env(safe-area-inset-top, 0px));
    padding-left: max(var(--g), env(safe-area-inset-left, 0px));
    padding-right: max(var(--g), env(safe-area-inset-right, 0px));
  }
}
@media (min-width: 901px) {
  .pgMast__in { padding-right: max(var(--g), env(safe-area-inset-right, 0px)); }
}

/* phones: while a field has focus (keyboard up) the bottom bar steps aside; pages.js sets html.pgKbd */
@media (max-width: 900px) {
  html.pgKbd .edFolio.pgFolio { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .edIndex.is-open { animation: none; }
}