/* Nadine Villabruna — Volume One
   The publication's typographic system. One source of truth for every page.
   Pages consume these as var(--t-body) etc. in their inline styles. */

:root {
  /* page grid */
  --pad: 72px;          /* page margin */
  --gutter: 24px;       /* image gutter */
  --w-text: 660px;      /* reading column — ~62 characters at 18px */
  --w-label: 220px;     /* margin label column */
  --gap-label: 76px;
  --gap-col: 92px;      /* between two content columns */
  --gap-nav: 46px;      /* between navigation items */

  /* reading */
  --t-body: 18px;
  --lh-body: 1.65;
  --t-intro: clamp(22px, 1.7vw, 24px);
  --lh-intro: 1.55;

  /* display */
  --t-h1: clamp(40px, 4.2vw, 58px);
  --t-h1-xl: clamp(52px, 5.6vw, 80px);
  --t-h2: clamp(28px, 2.4vw, 36px);
  --t-quote: clamp(24px, 2.05vw, 30px);
  --t-list: clamp(20px, 1.65vw, 24px);

  /* editorial marks */
  --t-label: 12.5px;
  --t-meta: 14px;
  --t-caption: 14px;
  --t-nav: 13.5px;
  --t-masthead: 12.5px;
  --t-wordmark: 16px;

  /* reading colour — enough separation from the paper */
  --ink: #1C1814;
  --ink-read: #332E27;      /* body copy on cream */
  --ink-read-dark: #D2CBBE; /* body copy on ink */
  --ink-quiet: #6E6558;     /* labels, metadata, captions */
  --ink-quiet-dark: #A9A093;

  /* vertical rhythm */
  --sp-chapter: 150px;   /* between chapters */
  --sp-block: 110px;     /* between blocks inside a chapter */
  --sp-tight: 70px;      /* text to its own image */
}

@media (max-width: 1440px) {
  :root { --w-text: 640px; --gap-col: 72px; }
}

@media (max-width: 1366px) {
  :root { --pad: 56px; --w-text: 620px; --gap-label: 56px; --gap-col: 64px; --gap-nav: 32px;
          --w-label: 190px; --sp-chapter: 130px; --sp-block: 96px; }
}

@media (max-width: 1100px) {
  :root { --pad: 40px; --w-text: min(100%, 640px); --w-label: 100%; --gap-label: 0px; --gap-col: 0px; --gap-nav: 24px;
          --sp-chapter: 104px; --sp-block: 76px; --sp-tight: 52px; }
  /* Below this width the spreads collapse, so the measure can no longer come from a
     grid track — cap the reading element itself. */
  p { max-width: var(--w-text); }
  /* One reading column: below this width a split spread crowds the line length. */
  div[style*="display: grid"], div[style*="display:grid"] { display: block !important; }
  /* Rows that are navigation rather than a reading spread keep their columns. */
  div[data-cols-keep][style] { display: grid !important; }
  /* Sticky side rails belong to the two-column spread. Once it collapses they
     would float over the reading column, so they return to the flow. */
  [style*="position:sticky"], [style*="position: sticky"] { position: static !important; }
  div[style*="display: grid"] > * + *, div[style*="display:grid"] > * + * { margin-top: 40px; }
  /* Home's lead project preview is an anchor, so the collapse rule above (divs only)
     does not reach it. Its metadata returns beneath the photograph. */
  a[data-preview-lead] { display: block !important; }
  a[data-preview-lead] > * + * { margin-top: 20px; }
  /* The masthead keeps its three columns on tablets. */
  div[data-masthead][style] { display: grid !important; }
  div[data-masthead][style] > * + * { margin-top: 0 !important; }
  /* The small half of the Home spread holds to the right edge while the large
     photograph bleeds left, so the asymmetry survives the stack. */
  [data-spread-b] { max-width: 60%; margin-left: auto; }
  /* A portrait photograph in a collapsed spread would otherwise become the
     largest frame on the page. It stays subordinate to the hero. */
  [data-portrait] { max-width: 520px; margin-left: auto; }
}

@media (max-width: 820px) {
  /* On a phone the masthead stacks into one centred column. */
  div[data-masthead][style] { row-gap: 8px; }
  /* On a phone one column is right, and authored scale offsets are released so no
     photograph becomes too small to read. */
  div[data-cols-keep][style] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-scale] { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  /* The landing hero is the one frame with per-image approval to crop: on
     desktop it fills the screen below the masthead, and on a phone it releases
     to 4:3 so the figure, the rock and the light stay legible. */
  [data-hero-frame] { height: auto !important; min-height: 0 !important; }
  [data-hero-crop] { aspect-ratio: 4 / 3; object-fit: cover; object-position: 45% 55%; }
  :root {
    --pad: 22px; --gutter: 14px; --gap-label: 0px; --gap-col: 0px; --gap-nav: 16px; --w-label: 100%;
    /* mobile typography — unchanged, held independently of the desktop scale */
    --t-body: 19px; --lh-body: 1.62;
    --t-intro: 22px; --lh-intro: 1.52;
    --t-h1: 42px;
    --t-h1-xl: clamp(52px, 7vw, 100px);
    --t-h2: clamp(32px, 3.05vw, 44px);
    --t-quote: clamp(28px, 2.78vw, 40px);
    --t-list: clamp(25px, 2.36vw, 34px);
    --t-label: 13px; --t-meta: 13.5px; --t-caption: 13.5px;
    --t-nav: 13px; --t-masthead: 11.5px; --t-wordmark: 13px;
    --sp-chapter: 76px; --sp-block: 56px; --sp-tight: 36px;
    /* a phone screen loses the fine end of the tonal range — carry the reading
       colour darker, and hold the weight rather than letting it go delicate */
    --ink-read: #2A251F;
    --ink-read-dark: #DCD6CA;
  }
  p { font-weight: 400; }
  [data-spread-b] { max-width: 76%; }
  div[style*="display: grid"] > * + *, div[style*="display:grid"] > * + * { margin-top: 34px; }
  /* Keep the nav and masthead rows wrapping rather than overflowing. */
  div[style*="display: flex"][style*="justify-content: space-between"], div[style*="display:flex"][style*="justify-content:space-between"] { flex-wrap: wrap; gap: 8px; }
  div[style*="display: flex"][style*="justify-content: center"], div[style*="display:flex"][style*="justify-content:center"] { flex-wrap: wrap; row-gap: 12px; }
}

/* The masthead is a three column row: the centre mark sits on the page centre
   whatever the width of the marks either side of it. Below the phone breakpoint
   the row stacks and every mark centres. */
[data-masthead] > *:first-child { justify-self: start; }
[data-masthead] > *:nth-child(2) { justify-self: center; text-align: center; }
[data-masthead] > *:last-child { justify-self: end; text-align: right; }
/* Below this width the three marks can no longer share one line without the
   longest of them breaking, so the row stacks and every mark centres. */
@media (max-width: 1000px) {
  div[data-masthead][style] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 8px; }
  [data-masthead] > * { justify-self: center !important; text-align: center !important; }
}

/* The masthead, wordmark and navigation keep their original quiet fade on hover.
   The underline treatment is for links in the body copy and on photographs. */
[data-header] a:hover, [data-header] a:focus-visible { opacity: 0.6; text-decoration: none; }

/* Sibling spacing above is for grids that COLLAPSE to block. A row that keeps its
   columns is spaced by its own gap, so the stacking margin must not apply. */
div[data-cols-keep][style] > * + * { margin-top: 0 !important; }