/* 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);
  /* Marco, 2026-08-26: "Notes from the workshop" filled the screen. It is a
     page title, not a hero, so it now tops out below the display scale. */
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem);
  line-height: 1.06;
  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); }


/* ---------- breadcrumb: a way back, at the top of every entry ---------- */
/* The only route out of an article used to be the foot of the page or the
   browser's back button. */
.j-crumb {
  padding: clamp(6rem, 5rem + 4vw, 8.5rem) var(--gutter, 6vw) 0;
  display: flex;
  gap: 1.8rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.j-crumb a {
  color: color-mix(in srgb, var(--blanco) 60%, transparent);
  text-decoration: none;
  transition: color 0.3s ease;
}

.j-crumb a:hover,
.j-crumb a:focus-visible { color: var(--oro); }

.j-crumb + .j-head { padding-top: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); }


/* =========================================================================
   The journal on a computer, 2026-09-27.
   Bryan: "on computer they all look like they were meant for a Phone". Every
   entry was a 60ch column pinned to the left edge with a 46rem photograph, so
   at 1440 two thirds of the screen were empty, and the index was a text list.
   Scoped to the journal's own pages (page-journal--index, page-journal--post):
   privacy, terms, the 404, booked and the gallery share this file and keep
   their look. Below 720px nothing here applies, so the phone is unchanged.
   ========================================================================= */

/* Phone: the list is the text row it always was. The photograph belongs to
   the grid, and a display:none lazy image is never downloaded. */
.j-entry__img { display: none; }

/* Phone: the photograph now sits inside the opener instead of the article,
   so it takes the article's side margins with it. Same spacing as before. */
.j-opener > .j-figure { margin: 3rem var(--gutter, 6vw); }

/* The breadcrumb rule above keys on .j-crumb + .j-head; on an entry the head
   now sits one level down, inside the opener. */
.j-crumb + .j-opener > .j-head { padding-top: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); }

/* The list at the foot of an entry. */
.j-more {
  padding: 0 var(--gutter, 6vw) var(--space-section);
}
.j-more > .j-head__kicker {
  padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-top: 1px solid rgba(199, 167, 118, 0.22);
  margin: 0;
}
.j-more .j-list { padding: 0; }
.page-journal--post .j-article { padding-bottom: clamp(3.5rem, 3rem + 3vw, 6rem); }
.j-more .j-entry__title { font-size: clamp(1.2rem, 1rem + 1vw, 1.9rem); }

/* ------------------------------------------------ tablet and up: the grid */
@media (min-width: 720px) {
  .page-journal .j-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 1.5rem + 2.5vw, 4.5rem) clamp(1.5rem, 1rem + 1.6vw, 2.6rem);
    padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  }
  .j-more .j-list { padding-top: clamp(1.8rem, 1.4rem + 1.4vw, 2.8rem); }

  .page-journal .j-entry {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 1.6rem;
  }
  .page-journal .j-entry:focus-visible { outline-offset: 0.5rem; }

  /* Even frames, one crop for every card: 3:4 like the wardrobe grid. */
  .j-entry__img {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: #141416;
  }
  .j-entry__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.82);
    transition: transform 1100ms var(--ease-lux), filter 1100ms var(--ease-lux);
  }
  .j-entry:hover .j-entry__img img,
  .j-entry:focus-visible .j-entry__img img { transform: scale(1.03); filter: saturate(1); }

  .page-journal .j-entry__date { padding-top: 0; margin-bottom: 0.8rem; }
  .page-journal .j-entry__title { font-size: clamp(1.3rem, 0.9rem + 1vw, 1.85rem); }
  .page-journal .j-entry__standfirst { margin-top: 0.8rem; }
}

@media (min-width: 1024px) {
  .page-journal .j-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .j-entry__img img { transition: none; }
  .j-entry:hover .j-entry__img img { transform: none; }
}

/* ------------------------------------------- desktop: the house measure */
/* The same shell as every section of the home page: the gutter grows until
   the content reaches --shell, then the extra goes to the margins. */
@media (min-width: 900px) {
  .page-journal--index .j-crumb,
  .page-journal--index .j-head,
  .page-journal--index .j-list,
  .page-journal--post .j-crumb,
  .page-journal--post .j-opener,
  .page-journal--post .j-article,
  .page-journal--post .j-more {
    padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2));
  }

  /* The index opener: title left, the line about the journal beside it. */
  .page-journal--index .j-head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2rem, 4vw, 5rem);
    align-items: end;
  }
  .page-journal--index .j-head__kicker { grid-column: 1 / -1; }
  .page-journal--index .j-head__standfirst { margin: 0; max-width: 40ch; justify-self: end; }

  /* The entry opener: title beside the photograph, like a magazine spread.
     The rule under the title moves under the whole opener. */
  .page-journal--post .j-opener {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 5vw, 6rem);
    align-items: center;
    padding-top: clamp(1.6rem, 1rem + 1.6vw, 2.6rem);
    padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
    border-bottom: 1px solid rgba(199, 167, 118, 0.22);
  }
  .page-journal--post .j-opener .j-head {
    padding: 0;
    border-bottom: 0;
  }
  .page-journal--post .j-head__title { font-size: clamp(2.2rem, 1.2rem + 2.2vw, 3.4rem); max-width: 18ch; }
  .page-journal--post .j-head__standfirst { font-size: 1.05rem; max-width: 42ch; }
  .page-journal--post .j-opener > .j-figure {
    margin: 0;
    max-width: none;
  }
  .page-journal--post .j-opener > .j-figure img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    max-height: 78vh;
  }

  /* A landscape frame runs the full measure under the title instead. */
  .page-journal--post .j-opener--wide { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2.5rem, 2rem + 2vw, 4rem); }
  .page-journal--post .j-opener--wide > .j-figure img { aspect-ratio: auto; max-height: none; }

  /* Reading: one centred column at a book's measure, a size up from the phone. */
  .page-journal--post .j-article__body {
    max-width: 66ch;
    margin: clamp(3.5rem, 3rem + 2vw, 5.5rem) auto 0;
  }
  .page-journal--post .j-article__body p { font-size: 1.075rem; line-height: 1.9; }
  .page-journal--post .j-article__body h2 { font-size: clamp(1.5rem, 1rem + 1vw, 2.1rem); }
  .page-journal--post .j-pull {
    max-width: 24ch;
    margin: 2.4em 0 2.4em -3.5rem;
    font-size: clamp(1.6rem, 1rem + 1.4vw, 2.4rem);
  }
  .page-journal--post .j-end { max-width: 66ch; margin-inline: auto; }
}

@media (min-width: 900px) and (max-width: 1180px) {
  .page-journal--post .j-pull { margin-left: 0; }
}