/*
Theme Name: phoph journal
Theme URI: https://phoph.works
Author: phoph
Description: The phoph journal theme — a story-led build log with a technical interior. Paper is the reading surface, night is the edges, graphite is the bench sheet. Tokens sampled from the machine itself; see PALETTE.md.
Version: 1.1.1
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: phoph-journal
Tags: full-site-editing, block-patterns, blog, one-column, journal
*/

/* ============================================================================
   phoph journal — the device layer.
   Only what block supports cannot express. Tokens live in theme.json.

   Measured contrast, so the rules are not a matter of taste:
     ink        #1a1917 on paper    13.71:1   body text
     ink-soft   #4d4a43 on paper     6.90:1   secondary prose
     copper-dk  #8a4f2b on paper     5.07:1   small labels on paper
     copper     #b5673a on paper     3.30:1   RULES AND LARGE TEXT ONLY
     copper-lt  #c98a5c on graphite  6.02:1   labels on the bench sheet
     copper-lt  #c98a5c on night     6.34:1   labels on the masthead
     steel      #8f8a86 on graphite  5.09:1   quiet labels on dark
     cream      #f0ece4 on night    15.53:1   headings on dark
     lamp       #e8c98f on graphite 10.91:1   state
   ========================================================================== */

/* --- the masthead and the footer: outside, and cool --------------------- */
.phoph-night {
  background-color: var(--wp--preset--color--night);
  color: var(--wp--preset--color--cream);
}
.phoph-night .wp-block-site-title a { color: var(--wp--preset--color--cream); }
.phoph-night .wp-block-navigation a,
.phoph-night .wp-block-navigation-item__content { color: var(--wp--preset--color--cream); }
.phoph-night .wp-block-navigation a:hover { color: var(--wp--preset--color--copper-light); }
.phoph-night .phoph-label,
.phoph-night .wp-block-post-date { color: var(--wp--preset--color--copper-light); }
.phoph-night .phoph-label--quiet,
.phoph-night .phoph-meta { color: var(--wp--preset--color--steel); }
.phoph-night figcaption { color: var(--wp--preset--color--steel); }
.phoph-masthead { border-bottom: 1px solid var(--wp--preset--color--copper); }
.phoph-edge { border-top: 1px solid var(--wp--preset--color--copper); }
/* the wordmark is lowercase whatever the site title says — BRAND §1.3 */
.phoph-masthead .wp-block-site-title a { text-transform: lowercase; letter-spacing: -0.02em; }

/* --- labels and meta ---------------------------------------------------- */
.phoph-label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--copper-dark);
  line-height: 1.6;
  margin: 0;
}
.phoph-label--quiet { color: var(--wp--preset--color--ink-soft); }
.phoph-meta {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--ink-soft);
}

/* --- light communicates state, and nothing else ------------------------- */
.phoph-lamp {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wp--preset--color--lamp);
  box-shadow: 0 0 9px rgba(232,201,143,.55);
  display: inline-block; flex: none;
}

/* --- the byline plate: a name and a function, the machine's own grammar -- */
.phoph-byline {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline;
  border-top: 1px solid var(--wp--preset--color--rule);
  border-bottom: 1px solid var(--wp--preset--color--rule);
  padding: 14px 0;
}
.phoph-byline .phoph-who {
  font-family: var(--wp--preset--font-family--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wp--preset--color--copper-dark);
}

/* --- the state plate: the machine's data, four cells -------------------- */
.phoph-plate {
  border-top: 1px solid var(--wp--preset--color--rule);
  border-bottom: 1px solid var(--wp--preset--color--rule);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.phoph-plate > * {
  padding: 20px 24px;
  border-left: 1px solid var(--wp--preset--color--rule);
}
.phoph-plate > *:first-child { border-left: 0; padding-left: 0; }
.phoph-plate dt {
  font-family: var(--wp--preset--font-family--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wp--preset--color--ink-soft); margin: 0 0 6px;
}
.phoph-plate dd {
  font-family: var(--wp--preset--font-family--mono); font-size: 13px; margin: 0;
}

/* --- the journal list: label / title / date ----------------------------- */
.phoph-row {
  display: grid; grid-template-columns: 120px 150px minmax(0, 1fr) 170px;
  gap: 36px; align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--wp--preset--color--rule);
  transition: background .15s;
}
.phoph-row:hover { background: var(--wp--preset--color--paper-deep); }
.phoph-row .wp-block-post-title { margin: 0; }
.phoph-row .wp-block-post-title a { color: inherit; }
.phoph-row .wp-block-post-title a:hover { color: var(--wp--preset--color--copper); }
.phoph-row .wp-block-post-date { text-align: right; }
.phoph-row .phoph-row-note { color: var(--wp--preset--color--ink-soft); font-size: 0.9375rem; margin: 8px 0 0; max-width: 60ch; }

/* --- the row's header image -------------------------------------------------
   The featured image at the head of the row, 120 x 80. `contain`, not `cover`:
   a drawing is never cropped here, so a schematic is shown whole and a
   photograph letterboxes onto the paper tone. A post without one loses the
   column entirely rather than leaving a hole. */
.phoph-row:not(:has(.phoph-row-thumb)) { grid-template-columns: 150px minmax(0, 1fr) 170px; }
.phoph-row-thumb { margin: 0; align-self: center; }
.phoph-row-thumb a, .phoph-row-thumb img { display: block; }
.phoph-row-thumb img {
  width: 120px; height: 80px; object-fit: contain; border-radius: 2px;
  background: var(--wp--preset--color--paper-shade);
}

/* --- the bench sheet: the interior, on warm graphite -------------------- */
.phoph-bench {
  background-color: var(--wp--preset--color--graphite);
  color: var(--wp--preset--color--cream);
  border-top: 2px solid var(--wp--preset--color--copper);
}
.phoph-bench .phoph-label { color: var(--wp--preset--color--copper-light); }
.phoph-bench h2, .phoph-bench h3 {
  font-family: var(--wp--preset--font-family--mono); font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wp--preset--color--cream);
}
.phoph-bench h2 { font-size: 14px; }
.phoph-bench h3 { font-size: 11px; }
.phoph-bench dt {
  font-family: var(--wp--preset--font-family--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wp--preset--color--steel);
  border-top: 1px solid var(--wp--preset--color--graphite-600);
  padding: 14px 0 2px; margin: 0;
}
.phoph-bench dd {
  font-family: var(--wp--preset--font-family--mono); font-size: 12.5px; line-height: 1.75;
  border-bottom: 1px solid var(--wp--preset--color--graphite-600);
  padding: 2px 0 14px; margin: 0;
}
.phoph-bench table { width: 100%; border-collapse: collapse; font-family: var(--wp--preset--font-family--mono); font-size: 12.5px; }
.phoph-bench th {
  text-align: left; font-weight: 400; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--wp--preset--color--steel);
  border-bottom: 1px solid var(--wp--preset--color--graphite-600); padding: 0 16px 8px 0;
}
.phoph-bench td { border-bottom: 1px solid var(--wp--preset--color--graphite-600); padding: 10px 16px 10px 0; }
.phoph-bench .phoph-drafting {
  font-family: var(--wp--preset--font-family--mono); font-size: 10px; line-height: 1.9;
  color: var(--wp--preset--color--steel);
}
.phoph-bench a { color: var(--wp--preset--color--copper-light); }

/* --- figures: photographs crop, drawings never do ----------------------- */
.phoph-figure img { width: 100%; height: auto; display: block; }
.phoph-figure.is-photo img { height: 520px; object-fit: cover; object-position: center; }
.phoph-figure.is-drawing img { object-fit: contain; max-height: 560px; }
.phoph-hero img { background: var(--wp--preset--color--paper-shade); }

/* --- the pull quote ----------------------------------------------------- */
.phoph-entry blockquote {
  border-left: 2px solid var(--wp--preset--color--copper);
  padding-left: 24px; margin: 40px 0;
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.75rem; line-height: 1.4;
}

/* --- links -------------------------------------------------------------- */
a { text-decoration: none; }
a:hover { color: var(--wp--preset--color--copper); }

/* --- narrow ------------------------------------------------------------- */
@media (max-width: 781px) {
  .phoph-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .phoph-row-thumb { align-self: start; }
  .phoph-row-thumb img { width: 120px; height: 80px; }
  .phoph-row .wp-block-post-date { text-align: left; }
  .phoph-row .phoph-row-note { max-width: none; }
  .phoph-plate { grid-template-columns: 1fr 1fr; }
  .phoph-plate > * { padding: 16px 16px; }
  .phoph-plate > *:nth-child(odd) { border-left: 0; padding-left: 0; }
  .phoph-figure.is-photo img { height: 260px; }
  .phoph-byline { gap: 8px; }
}

/* --- additions after the first cut -------------------------------------- */

/* The band heights have to outrank core, and they have to match both block types.
   Core ships `.wp-block-image img{height:auto}` and, for wide/full images,
   `.wp-block-image.alignfull img{height:auto;width:100%}` — specificity up to (0,2,1), loaded *after*
   this file. A single-class rule of ours loses the cascade silently: measured on the live site before
   this fix, the band rendered 1080 px tall (135% of an 800 px viewport) with the stylesheet loaded and
   the rule present.
   AND: the featured image is NOT `.wp-block-image` — it renders as `.wp-block-post-featured-image`
   (whose own core rule uses :where(img), so it carries almost no specificity). Rules that require
   `.wp-block-image` therefore never match an entry's photograph at all. Both cases are covered below. */
figure.phoph-band img,
.wp-block-image.alignfull.phoph-band img,
.wp-block-image.phoph-band img {
  width: 100%;
  height: clamp(280px, 42vh, 460px);
  object-fit: cover;
  object-position: center 42%;
  display: block;
}

/* the machine band sits on night; the crop is of a warm, dark render, so the letterbox edges show */
.phoph-band-wrap { background-color: var(--wp--preset--color--night); }

/* a photograph in an entry — featured image block or image block, cropped to a band */
figure.phoph-figure.is-photo img,
.wp-block-post-featured-image.phoph-figure.is-photo img,
.wp-block-image.alignfull.phoph-figure.is-photo img,
.wp-block-image.alignwide.phoph-figure.is-photo img,
.wp-block-image.phoph-figure.is-photo img {
  width: 100%;
  height: clamp(260px, 38vh, 420px);
  object-fit: cover;
  object-position: center;
}

/* a drawing: never cropped, never stretched, and never capped by core's height:auto */
figure.phoph-figure.is-drawing img,
.wp-block-image.phoph-figure.is-drawing img {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
}

/* the plate built from a columns block (editable) rather than a definition list */
.wp-block-columns.phoph-plate { align-items: stretch; }
.wp-block-columns.phoph-plate > .wp-block-column { margin: 0; }
.wp-block-columns.phoph-plate p { margin: 0 0 6px; }

/* the byline: name and function left, the state right */
.phoph-byline p { margin: 0; }
.phoph-byline > p:last-child { margin-left: auto; text-align: right; }

/* tables and drafting inside the bench sheet */
.phoph-bench .wp-block-table { margin: 0 0 40px; }
.phoph-bench .wp-block-heading { margin: 40px 0 14px; }
.phoph-bench th { width: 30%; }

@media (max-width: 781px) {
  .wp-block-image.alignfull.phoph-band img,
  .wp-block-image.phoph-band img { height: clamp(200px, 34vh, 300px); }
  .wp-block-image.alignfull.phoph-figure.is-photo img,
  .wp-block-image.alignwide.phoph-figure.is-photo img,
  .wp-block-image.phoph-figure.is-photo img { height: clamp(200px, 32vh, 280px); }
  .phoph-byline > p:last-child { margin-left: 0; text-align: left; }
  .phoph-bench th { width: auto; }
}