/* The journal. Editorial pages, no scroll machinery, same house tokens.
   Loaded after styles.css, which supplies :root, header, footer, grain. */

.page-journal {
  background: var(--negro);
  color: #e9e6e1;
  min-height: 100vh;
}

/* -------------------------------------------------------------- page header */
.j-head {
  padding: clamp(7rem, 6rem + 6vw, 11rem) var(--gutter, 6vw) clamp(2.5rem, 2rem + 2vw, 4rem);
  border-bottom: 1px solid rgba(199, 167, 118, 0.22);
}
.j-head__kicker {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 1.4rem;
}
.j-head__title {
  font-family: var(--font-headline);
  font-size: var(--text-display);
  line-height: 1.02;
  font-weight: 400;
  margin: 0;
  color: var(--blanco);
}
.j-head__standfirst {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-body);
  line-height: 1.75;
  color: rgba(233, 230, 225, 0.72);
  max-width: 46ch;
  margin: 1.6rem 0 0;
}

/* --------------------------------------------------------------- index list */
.j-list { padding: 0 var(--gutter, 6vw) var(--space-section); }

.j-entry {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: clamp(1rem, 0.5rem + 2vw, 3rem);
  align-items: start;
  padding: clamp(2.2rem, 1.6rem + 2vw, 3.6rem) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: inherit;
  transition: border-color 480ms var(--ease-lux);
}
.j-entry:hover,
.j-entry:focus-visible { border-bottom-color: var(--oro); }
.j-entry:focus-visible { outline: 1px solid var(--oro); outline-offset: 0.6rem; }

.j-entry__date {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(199, 167, 118, 0.85);
  padding-top: 0.5rem;
  white-space: nowrap;
}
.j-entry__title {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: clamp(1.35rem, 1rem + 1.7vw, 2.5rem);
  line-height: 1.16;
  margin: 0;
  color: var(--blanco);
  transition: color 480ms var(--ease-lux);
}
.j-entry:hover .j-entry__title { color: var(--oro); }
.j-entry__standfirst {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-body);
  line-height: 1.7;
  color: rgba(233, 230, 225, 0.62);
  max-width: 60ch;
  margin: 0.9rem 0 0;
}

@media (max-width: 640px) {
  .j-entry { grid-template-columns: 1fr; gap: 0.7rem; }
  .j-entry__date { padding-top: 0; }
}

/* ------------------------------------------------------------------ article */
.j-article {
  padding: 0 var(--gutter, 6vw) var(--space-section);
}
.j-article__body {
  max-width: 60ch;
  margin: clamp(2.5rem, 2rem + 2vw, 4.5rem) 0 0;
}
.j-article__body p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-body);
  line-height: 1.85;
  color: rgba(233, 230, 225, 0.82);
  margin: 0 0 1.6em;
}
.j-article__body h2 {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  line-height: 1.25;
  color: var(--blanco);
  margin: 2.8em 0 0.9em;
}
.j-article__body h2:first-child { margin-top: 0; }
.j-article__body strong { font-weight: 500; color: var(--blanco); }
.j-article__body a { color: var(--oro); text-decoration: none; border-bottom: 1px solid rgba(199,167,118,0.4); }
.j-article__body a:hover { border-bottom-color: var(--oro); }

.j-pull {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2.1rem);
  line-height: 1.35;
  color: var(--blanco);
  border-left: 1px solid var(--oro);
  padding: 0.2em 0 0.2em 1.4rem;
  margin: 2.6em 0;
  max-width: 26ch;
}
.j-script {
  font-family: var(--font-script);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  line-height: 1;
  color: var(--oro);
  margin: 0 0 0.4em;
}

/* Wider than the text column on purpose, but not edge to edge. */
.j-figure { margin: 3rem 0; max-width: min(100%, 46rem); }
.j-figure img { width: 100%; height: auto; display: block; }
.j-figure figcaption {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(233, 230, 225, 0.5);
  margin-top: 0.9rem;
}

/* ------------------------------------------------------------------- footer */
.j-end {
  max-width: 60ch;
  margin: clamp(3.5rem, 3rem + 3vw, 6rem) 0 0;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(199, 167, 118, 0.22);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
  align-items: center;
}
.j-end__note {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-body);
  color: rgba(233, 230, 225, 0.7);
  margin: 0;
  flex: 1 1 18ch;
}
.j-back {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--oro);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.3rem;
  transition: border-color 380ms var(--ease-lux);
}
.j-back:hover, .j-back:focus-visible { border-bottom-color: var(--oro); }

/* ------------------------------------------------------------- 404 specific */
.j-lost {
  min-height: 78vh;
  /* No flex centering here: content taller than the content box overflows
     upward under the fixed header, which is what hid the script line. */
  padding: clamp(7rem, 6rem + 5vw, 10rem) var(--gutter, 6vw) var(--space-section);
  max-width: 34rem;
}

/* The display size belongs to a full-bleed page, not to this narrow column. */
.j-lost .j-head__title { font-size: var(--text-headline); }
.j-lost .j-head__standfirst { max-width: 34ch; }
.j-lost .j-end { border-top-color: rgba(199, 167, 118, 0.22); }

/* ------------------------------------------------------------ legal pages */
/* Privacy and Terms reuse the journal's editorial column. What they need on
   top of it: lists, a third heading level, a definition-style table, the
   effective-date line and a small sibling-page link. Nothing decorative. */

.j-article__body h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--oro);
  margin: 2.4em 0 0.9em;
}
.j-article__body ul,
.j-article__body ol {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-body);
  line-height: 1.85;
  color: rgba(233, 230, 225, 0.82);
  margin: 0 0 1.6em;
  padding-left: 1.2rem;
}
.j-article__body li { margin: 0 0 0.6em; }
.j-article__body li::marker { color: rgba(199, 167, 118, 0.65); }

.j-legal-meta {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(233, 230, 225, 0.5);
  margin: 1.8rem 0 0;
}

/* The contents list at the top of a long policy. Two columns where there is
   room, one where there is not. */
.j-toc {
  max-width: 60ch;
  margin: clamp(2rem, 1.6rem + 1.5vw, 3rem) 0 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  columns: 2;
  column-gap: 2.4rem;
  list-style: none;
}
.j-toc li { break-inside: avoid; margin: 0 0 0.7em; }
.j-toc a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(233, 230, 225, 0.66);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 380ms var(--ease-lux), border-color 380ms var(--ease-lux);
}
.j-toc a:hover, .j-toc a:focus-visible { color: var(--oro); border-bottom-color: rgba(199,167,118,0.5); }
@media (max-width: 640px) { .j-toc { columns: 1; } }

/* Anchored sections sit under a fixed header, so give the browser somewhere
   to stop that is not behind it. */
.j-article__body h2[id] { scroll-margin-top: 6rem; }

/* Who we share with, and why. A table reads faster than six paragraphs. */
.j-table { margin: 0 0 2em; width: 100%; border-collapse: collapse; }
.j-table th, .j-table td {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.86rem;
  line-height: 1.65;
  color: rgba(233, 230, 225, 0.8);
  text-align: left;
  vertical-align: top;
  padding: 0.9rem 1.2rem 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.j-table th {
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--oro);
  border-bottom-color: rgba(199, 167, 118, 0.3);
}
.j-table a { color: var(--oro); text-decoration: none; border-bottom: 1px solid rgba(199,167,118,0.4); }