/*
Theme Name: Tom Gilhespy
Theme URI: https://tomgilhespy.com
Author: built in the dadsite room
Description: A theme for a sculptor. The layout is lifted from the Bury Art Gallery + Museum
  leaflet for "Tom Gilhespy - Broken Promises": a narrow white column of type on the left, and
  the rest of the page given over to a single photograph with light type set across it. One
  accent colour, one typeface, no boxes, no shadows.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tomgilhespy
Tags: one-column, custom-menu, featured-images, portfolio
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* The leaflet's white panel, and the near-black it is printed in. */
  --paper:        #ffffff;
  --ink:          #111111;
  --ink-soft:     #5c5c5c;
  --rule:         #d9d9d4;

  /* The photographic field, and the type that sits on it. */
  --field:        #1a1a1c;   /* shown before the image loads, and if there is none */
  --field-text:   #eceae5;
  --field-soft:   #adaba5;

  /* The one accent: the pale yellow the exhibition title is printed in.
     ~13:1 against --field. It is ~1.2:1 against --paper, so it is NEVER used
     for text in the white column - only ever on the dark field. */
  --accent:       #efe98d;

  /* Width of the white column. Below --break it becomes a bar across the top. */
  --col:          clamp(15rem, 21vw, 20rem);
  --gutter:       clamp(1.25rem, 3.2vw, 3rem);

  /* How far the type is inset from the left of the field. On the leaflet the
     headline starts about half way across the page; that offset is the single
     most recognisable thing about the layout, so it is a token. */
  --inset:        min(38%, 26rem);

  /* The leaflet is set in a humanist grotesque. No webfont is loaded on
     purpose: it is one fewer request, and no third-party host sees a visitor's
     IP - which matters because the contact page has to make a privacy claim. */
  --sans: "Helvetica Neue", Helvetica, "Segoe UI", Arial, system-ui, sans-serif;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  background-color: var(--field);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background-color: transparent;
  font-family: var(--sans);
  font-size: 100%;
  line-height: 1.55;
  color: var(--field-text);
  -webkit-font-smoothing: antialiased;
}

/* The photograph. A fixed-position layer rather than background-attachment:
   fixed, which janks badly on mobile Safari. --bg-image is set per page by
   PHP: the page's own Featured Image, else the site-wide default. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  /* No global wallpaper: the photograph is a hero on the home page now, not a
     backdrop on every page. Left here (transparent) so the fixed layer and its
     stacking context stay put; --bg-image is still honoured if ever set inline. */
  background-image: var(--bg-image, none);
  background-size: cover;
  background-position: var(--bg-position, center center);
  background-repeat: no-repeat;
}

/* The scrim. Dad will swap the photograph himself, so legibility cannot depend
   on any particular image being dark in the right places - this guarantees it. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: none;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
}
.skip-link:focus { left: .5rem; top: .5rem; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ==========================================================================
   3. Frame - white column + field
   ========================================================================== */

.ledger {
  position: fixed;
  top: 0; left: 0;
  width: var(--col);
  height: 100dvh;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.25rem, 1.8vw, 1.75rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  color: var(--ink);
  font-size: .8125rem;
  line-height: 1.45;
}

.field {
  margin-left: var(--col);
  min-height: 100dvh;
  padding: 0 var(--gutter) clamp(3rem, 8vh, 6rem);
}

/* --- the name, set like the gallery's own name on the leaflet ------------- */

.ledger__mark {
  display: block;
  text-decoration: none;
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.ledger__mark .ledger__name { display: block; }
.ledger__mark .ledger__desc {
  display: block;
  font-weight: 400;
  color: var(--ink-soft);
}
.ledger__mark img { width: auto; max-height: 4.5rem; }

/* On the front page the name is already set huge across the field, so the small
   wordmark here would just say it twice. Hidden on home; it stays on every
   interior page, where it is the site's only identity and its link back home. */
.home .ledger__mark { display: none; }

/* On interior pages the wordmark "Tom Gilhespy" (top of the column) IS the link
   home, so the "Home" nav item would just say it twice - hide it there. On the
   home page the wordmark is hidden, so "Home" stays as the nav's first item. */
body:not(.home) .nav__item--home { display: none; }

/* --- navigation ---------------------------------------------------------- */

.ledger__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ledger__nav li + li { margin-top: .1rem; }
.ledger__nav a {
  display: inline-block;
  padding: .3rem 0;
  font-weight: 700;
  font-size: .9375rem;
  text-decoration: none;
  text-underline-offset: .28em;
  text-decoration-thickness: 2px;
}
.ledger__nav a:hover,
.ledger__nav a:focus-visible { text-decoration: underline; }
.ledger__nav .current-menu-item > a,
.ledger__nav .current_page_item > a,
.ledger__nav .current-menu-ancestor > a,
.ledger__nav .current_page_parent > a {
  text-decoration: underline;
}

/* --- the details block, set like "Admission Free / Opening hours" --------- */

/* --- the image credit, set like the leaflet's tiny "Right / (detail)" ---- */

.ledger__credit {
  font-size: .6875rem;
  line-height: 1.35;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  padding-top: .75rem;
}
.ledger__credit em { font-style: italic; }

/* --- the mobile toggle. Hidden until JS says the nav can be collapsed. ---- */

.ledger__toggle { display: none; }

/* ==========================================================================
   4. Type on the field
   ========================================================================== */

.masthead {
  padding-top: clamp(2rem, 7vh, 5.5rem);
  padding-bottom: clamp(1.5rem, 5vh, 3.5rem);
  margin-left: var(--inset);
}

/* The three-line block off the front of the leaflet: name in white, the thing
   it is in yellow, the dates in white under it. */
.masthead h1,
.masthead .masthead__line {
  margin: 0;
  /* The lines are spans inside one <h1> so the whole block is a single heading
     to a screen reader. Inline by default, they would set as one running line. */
  display: block;
  font-weight: 300;
  font-size: clamp(2.15rem, 5.6vw, 5.25rem);
  line-height: .98;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.masthead__line--accent,
.masthead h1 .accent { color: var(--accent); }
.masthead__line--soft { color: var(--field-text); }

.masthead__standfirst {
  margin: 1.25rem 0 0;
  max-width: 44ch;
  font-size: clamp(1rem, 1.25vw, 1.1875rem);
  font-weight: 300;
  color: var(--field-soft);
}

/* Interior pages get the same geometry at a smaller size, so every page is
   recognisably off the same leaflet. */
.page-head { margin-left: var(--inset); padding-top: clamp(1.75rem, 6vh, 4.5rem); }
.page-head h1 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.page-head .page-head__kicker {
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--field-soft);
}

/* ==========================================================================
   5. Reading matter
   ========================================================================== */

/* Long text over a photograph is unreadable, so it gets a panel. The panel is
   translucent rather than solid so the photograph is still the page. */
.sheet {
  margin: clamp(1.5rem, 5vh, 3rem) 0 0 var(--inset);
  max-width: 64ch;
  padding: clamp(1.4rem, 3vw, 2.75rem);
  background: rgba(10,10,12,.72);
  border-top: 3px solid var(--accent);
}
@supports (backdrop-filter: blur(1px)) {
  .sheet { background: rgba(10,10,12,.58); backdrop-filter: blur(10px) saturate(.85); }
}

.sheet > :first-child { margin-top: 0; }
.sheet > :last-child { margin-bottom: 0; }

.sheet p, .sheet li { font-size: 1.0625rem; font-weight: 300; }
.sheet p { margin: 0 0 1.2em; max-width: 60ch; }

.sheet h2, .sheet h3, .sheet h4 {
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 2em 0 .6em;
}
.sheet h2 { font-size: clamp(1.3rem, 2vw, 1.75rem); }
.sheet h3 { font-size: 1.1875rem; }

.sheet a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .22em; }

.sheet blockquote {
  margin: 1.8em 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--accent);
  font-size: 1.1875rem;
  font-weight: 300;
  font-style: italic;
  color: var(--field-text);
}

.sheet figure { margin: 1.8em 0; }
.sheet figcaption,
.wp-caption-text {
  margin-top: .5rem;
  font-size: .8125rem;
  color: var(--field-soft);
}

.sheet hr { border: 0; border-top: 1px solid rgba(236,234,229,.22); margin: 2.4em 0; }

.alignleft  { float: left;  margin: .3em 1.4em 1.2em 0; }
.alignright { float: right; margin: .3em 0 1.2em 1.4em; }
.aligncenter { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   6. History - the portfolio
   ========================================================================== */

.works {
  margin: clamp(1.75rem, 5vh, 3.25rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}

.work { margin: 0; }
.work a { text-decoration: none; display: block; }
.work__frame {
  background: rgba(10,10,12,.35);
  overflow: hidden;
}
.work__frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.6,.2,1), filter .5s;
}
.work a:hover .work__frame img,
.work a:focus-visible .work__frame img { transform: scale(1.03); filter: brightness(1.06); }

.work__caption { padding-top: .7rem; }
.work__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--field-text);
}
.work a:hover .work__title { color: var(--accent); }
.work__meta {
  margin: .2rem 0 0;
  font-size: .8125rem;
  color: var(--field-soft);
}
.work__meta em { font-style: italic; }

/* Single work: the photograph is the point, so it gets the width. */
.work-single__image { margin: clamp(1.5rem,4vh,2.5rem) 0 0; }
.work-single__image img { width: 100%; max-height: 78dvh; object-fit: contain; object-position: left top; }
.work-single__facts {
  margin: 1.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 2rem;
  font-size: .875rem;
  color: var(--field-soft);
}
.work-single__facts div { min-width: 0; }
.work-single__facts dt {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.work-single__facts dd { margin: 0; }

/* ==========================================================================
   7. Thoughts - the blog
   ========================================================================== */

.posts { margin: 0; padding: 0; list-style: none; }
.posts > li + li {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  padding-top: clamp(1.5rem, 4vh, 2.5rem);
  border-top: 1px solid rgba(236,234,229,.2);
}

.post-date,
.entry-date {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
}

.post-teaser h2 {
  margin: .35rem 0 .4rem;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.018em;
}
.post-teaser h2 a { text-decoration: none; }
.post-teaser h2 a:hover { color: var(--accent); }
.post-teaser p { margin: 0; color: var(--field-soft); font-weight: 300; }

.more-link {
  display: inline-block;
  margin-top: .6rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* --- pagination ---------------------------------------------------------- */

.pagination {
  margin: clamp(2rem, 6vh, 3.5rem) 0 0 var(--inset);
  font-size: .875rem;
}
.pagination .page-numbers {
  display: inline-block;
  padding: .3rem .55rem;
  text-decoration: none;
  color: var(--field-soft);
}
.pagination .page-numbers:hover { color: var(--accent); }
.pagination .current { color: var(--accent); font-weight: 700; }

/* ==========================================================================
   8. Footer
   ========================================================================== */

.field-foot {
  margin: clamp(3rem, 10vh, 7rem) 0 0 var(--inset);
  padding-top: 1rem;
  border-top: 1px solid rgba(236,234,229,.2);
  font-size: .75rem;
  color: var(--field-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
}
.field-foot a { text-decoration: none; border-bottom: 1px solid rgba(236,234,229,.3); }
.field-foot a:hover { color: var(--accent); }

/* ==========================================================================
   9. Narrow screens - the column becomes a bar
   ========================================================================== */

@media (max-width: 54rem) {
  :root { --inset: 0px; }

  .ledger {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding: 1rem var(--gutter);
    overflow: visible;
  }

  .field { margin-left: 0; padding-top: 0; }

  /* Only collapse the menu when JS is there to open it again. */
  .js .ledger__toggle {
    display: block;
    order: 2;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: .35rem .7rem;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font: 700 .8125rem/1 var(--sans);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .ledger__mark { order: 1; }
  .ledger__nav { order: 3; flex-basis: 100%; }
  .js .ledger__nav[hidden] { display: none; }
  .ledger__nav ul { padding: .4rem 0 .2rem; }
  .ledger__nav a { font-size: 1.0625rem; padding: .4rem 0; }

  /* The details and the credit collapse WITH the menu rather than sitting
     permanently under the name, where they would push the photograph off the
     screen. On a phone this column is the only place the contact address
     appears, so they must open with the menu, not be hidden outright. */
  .ledger__notes,
  .ledger__foot { flex-basis: 100%; order: 4; margin-top: 0; }

  .masthead { padding-top: clamp(1.5rem, 5vh, 3rem); }
  .sheet { max-width: none; }
}

/* --- the search form, which only appears on 404 and empty results -------- */

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.4rem;
}
.search-form__field {
  flex: 1 1 12rem;
  min-width: 0;
  padding: .55rem .7rem;
  border: 1px solid rgba(236,234,229,.35);
  background: rgba(10,10,12,.4);
  color: var(--field-text);
  font: 300 1rem/1.3 var(--sans);
}
.search-form__field::placeholder { color: var(--field-soft); }
.search-form__submit {
  padding: .55rem 1.1rem;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font: 700 .8125rem/1.3 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.search-form__submit:hover { background: var(--accent); color: #14141a; }

/* ==========================================================================
   10. Print - the leaflet, back where it came from
   ========================================================================== */

@media print {
  html { background: #fff; }
  body { color: #000; }
  body::before, body::after { display: none; }
  .ledger { position: static; width: auto; height: auto; }
  .ledger__toggle, .ledger__nav, .pagination { display: none; }
  .field { margin: 0; }
  .masthead, .page-head, .sheet, .field-foot, .pagination { margin-left: 0; }
  .sheet { background: none; backdrop-filter: none; border-top: 2px solid #000; padding: 0; }
  .masthead h1, .page-head h1, .sheet a, .post-date { color: #000; }
}

/* ==========================================================================
   11. Redesign — expanding nav, notes, icons, hero, showcase
   ========================================================================== */

/* --- the nav, now with expanding groups ---------------------------------- */

.nav { list-style: none; margin: 0; padding: 0; }
.nav__item > a,
.nav__toggle {
  display: block;
  width: 100%;
  padding: .32rem 0;
  font: 700 .9375rem/1.25 var(--sans);
  color: var(--ink);
  text-decoration: none;
  text-align: left;
}
.nav__item > a:hover,
.nav__toggle:hover { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 2px; }
.nav__item.is-current > a { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 2px; }

.nav__toggle {
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.nav__group.is-current > .nav__toggle { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 2px; }
.nav__chevron { flex: none; transition: transform .35s cubic-bezier(.2,.6,.2,1); color: var(--ink-soft); }
.nav__group.is-open > .nav__toggle .nav__chevron { transform: rotate(180deg); }

/* The slide: a grid whose single row animates from 0fr to 1fr. No measuring, no
   fixed max-height guess, and it collapses cleanly to nothing. */
.nav__panel { display: block; }
.js .nav__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .38s cubic-bezier(.2,.6,.2,1);
}
.js .nav__group:not(.is-open) .nav__panel { grid-template-rows: 0fr; }
@media (hover: hover) {
  /* Unfurl on hover, and on keyboard focus landing inside the group. */
  .js .nav__group:hover .nav__panel,
  .js .nav__group:focus-within .nav__panel { grid-template-rows: 1fr; }
  .js .nav__group:hover > .nav__toggle .nav__chevron,
  .js .nav__group:focus-within > .nav__toggle .nav__chevron { transform: rotate(180deg); }
}
.nav__panel-inner { min-height: 0; overflow: hidden; }

.nav__sub { list-style: none; margin: 0; padding: .15rem 0 .5rem; }
.nav__sub a {
  display: block;
  padding: .22rem 0 .22rem .1rem;
  font: 400 .8125rem/1.3 var(--sans);
  color: var(--ink-soft);
  text-decoration: none;
}
.nav__sub a:hover { color: var(--ink); }
.nav__all a, .nav__empty a { font-style: italic; color: var(--ink-soft); }
.nav__all { margin-top: .15rem; }

/* --- the notes block ----------------------------------------------------- */

.ledger__notes {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ink);
}
.ledger__notes p { margin: 0 0 .7rem; }
.ledger__notes p:first-of-type { color: var(--ink); font-weight: 400; }

/* --- the foot of the column: icons, then any credit ---------------------- */

.ledger__foot { margin-top: auto; display: flex; flex-direction: column; gap: 1rem; }

.icons { list-style: none; margin: 0; padding: 0; display: flex; gap: .85rem; align-items: center; }
.icons a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  color: var(--ink-soft);
  border: 1px solid transparent;
  transition: color .2s, transform .2s;
}
.icons a:hover { color: var(--ink); transform: translateY(-2px); }

/* ==========================================================================
   Home — the hero
   ========================================================================== */

.hero {
  position: relative;
  height: 100dvh;
  min-height: 32rem;
  overflow: hidden;
  background: var(--field);
}
.hero__image {
  position: absolute;
  inset: -8% 0 -8% 0;         /* headroom so the parallax translate never shows an edge */
  background-size: cover;
  background-position: center 42%;
  will-change: transform;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(12,12,14,.30) 0%, rgba(12,12,14,0) 32%),
    linear-gradient(to right,  rgba(12,12,14,.10) 30%, rgba(12,12,14,.60) 78%, rgba(12,12,14,.72) 100%);
}
.hero__type {
  position: absolute;
  left: clamp(1.5rem, 4vw, 4.5rem);
  bottom: clamp(3rem, 12vh, 8rem);
  z-index: 2;
}
.hero__name { margin: 0; }
.hero__name .masthead__line {
  display: block;
  margin: 0;
  font-weight: 300;
  font-size: clamp(2.6rem, 8vw, 8rem);
  line-height: .92;
  letter-spacing: -0.025em;
  color: var(--field-text);
}
.hero__name .masthead__line--accent { color: var(--accent); }
.hero__standfirst {
  margin: 1.4rem 0 0;
  max-width: 40ch;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  font-weight: 300;
  color: var(--field-soft);
}

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.6rem; z-index: 2;
  width: 26px; height: 42px; margin-left: -13px;
  border: 1px solid rgba(236,234,229,.5); border-radius: 13px;
}
.hero__scroll span {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px;
  background: rgba(236,234,229,.8); border-radius: 2px;
  animation: tg-scroll 1.8s ease-in-out infinite;
}
@keyframes tg-scroll { 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 100%{opacity:0;transform:translateY(14px)} }

/* ==========================================================================
   Home — statement and showcase
   ========================================================================== */

/* The home field carries no gutter of its own - the hero fills it edge to edge,
   the way the photograph did as a background. The sections below bring their own
   horizontal padding. */
body.home .field { padding: 0; }
.home { background: var(--field); position: relative; z-index: 1; }

/* The About, beneath the hero - readable prose, not a headline. */
.home-about {
  padding: clamp(3.5rem, 12vh, 8rem) var(--gutter) clamp(2rem, 6vh, 4rem);
  max-width: 52rem;
}
.home-about__kicker {
  margin: 0 0 1.1rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--field-soft);
}
.home-about__inner { font-size: clamp(1.05rem, 1.35vw, 1.25rem); font-weight: 300; line-height: 1.62; color: var(--field-text); }
.home-about__inner > :first-child { margin-top: 0; }
.home-about__inner p { margin: 0 0 1.1em; }
.home-about__inner p:last-child { margin-bottom: 0; }
.home-about__inner a { color: var(--accent); }
.home-about__inner h2, .home-about__inner h3 { font-weight: 400; letter-spacing: -0.01em; margin: 1.8em 0 .5em; }

.showcase { padding: 0 var(--gutter) clamp(4rem, 12vh, 8rem); }
.showcase__label {
  margin: 0 0 clamp(1.5rem, 4vh, 3rem);
  font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--field-soft);
}
.showcase__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}
.showcase__item:nth-child(3n) { grid-column: 1 / -1; }   /* every third work runs full width */
.showcase__item a { display: block; text-decoration: none; }
.showcase__frame { position: relative; overflow: hidden; background: #0d0d0f; aspect-ratio: 4 / 3; }
.showcase__item:nth-child(3n) .showcase__frame { aspect-ratio: 16 / 7; }
.showcase__frame img {
  position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover; will-change: transform;
  transition: filter .5s;
}
.showcase__item a:hover .showcase__frame img { filter: brightness(1.08); }
.showcase__caption { padding-top: .8rem; }
.showcase__title { margin: 0; font-size: 1.15rem; font-weight: 400; letter-spacing: -0.01em; color: var(--field-text); }
.showcase__item a:hover .showcase__title { color: var(--accent); }
.showcase__meta { margin: .2rem 0 0; font-size: .8125rem; color: var(--field-soft); }
.showcase__all {
  display: inline-block; margin-top: clamp(1.5rem, 4vh, 2.5rem);
  font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor;
}

/* --- the reveal-on-scroll primitive -------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__image, .showcase__frame img { transform: none !important; }
  .hero__scroll span { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 54rem) {
  .hero { height: 78dvh; }
  .hero__type { left: var(--gutter); right: var(--gutter); }
  .showcase__grid { grid-template-columns: 1fr; }
  .showcase__item:nth-child(3n) { grid-column: auto; }
  .showcase__item:nth-child(3n) .showcase__frame { aspect-ratio: 4 / 3; }
  .ledger__foot { margin-top: 1.5rem; }
  .js .ledger__notes[hidden], .js .ledger__foot[hidden] { display: none; }
}

/* ==========================================================================
   12. Inner pages — clean & light
   The home page is the dark, cinematic hero; every other page is white and
   gallery-quiet. Keyed off `body:not(.home)`, which WordPress gives every page
   except the static front page.
   ========================================================================== */

body:not(.home) { background: #ffffff; }

/* A hairline between the white column and the white field, so the column still
   reads as a column now that the field is white too. */
body:not(.home) .ledger { border-right: 1px solid #cbcac4; }
/* On the home page the column meets the dark hero; a faint dark seam defines the
   edge without a stark line. */
body.home .ledger { border-right: 1px solid rgba(0,0,0,.35); }

body:not(.home) .field {
  background: #ffffff;
  color: #1a1a1a;
}

/* The big --inset offset belongs to the dark hero look; inner pages sit quietly
   against the column instead, using the field's own gutter. */
body:not(.home) .page-head,
body:not(.home) .sheet,
body:not(.home) .works,
body:not(.home) .posts,
body:not(.home) .pagination,
body:not(.home) .field-foot { margin-left: 0; }

/* --- headings ------------------------------------------------------------ */
body:not(.home) .page-head { padding-top: clamp(2rem, 7vh, 5rem); }
body:not(.home) .page-head h1 { color: #111; }
body:not(.home) .page-head__kicker { color: #8a8a86; }
body:not(.home) .page-head__kicker a { color: #333; }

/* --- reading matter: no dark panel, just type on white ------------------- */
body:not(.home) .sheet {
  max-width: 40rem;
  padding: 0;
  background: none;
  backdrop-filter: none;
  border-top: 0;
  color: #1a1a1a;
}
body:not(.home) .sheet p,
body:not(.home) .sheet li { color: #262626; font-weight: 400; }
body:not(.home) .sheet h2,
body:not(.home) .sheet h3,
body:not(.home) .sheet h4 { color: #111; }
/* yellow is illegible on white - links go to ink with a rule */
body:not(.home) .sheet a { color: #111; text-decoration-thickness: 1px; text-underline-offset: .2em; }
body:not(.home) .sheet blockquote { border-left-color: #111; color: #333; font-style: italic; }
body:not(.home) .sheet figcaption,
body:not(.home) .wp-caption-text { color: #7a7a76; }
body:not(.home) .sheet hr { border-top-color: rgba(0,0,0,.12); }

/* --- History: the works, as a light gallery grid ------------------------- */
body:not(.home) .work__frame { background: #f1f0ec; }
body:not(.home) .work__title { color: #111; }
body:not(.home) .work a:hover .work__title { color: #111; text-decoration: underline; text-underline-offset: .18em; }
body:not(.home) .work__meta { color: #8a8a86; }

/* --- Thoughts: the post list -------------------------------------------- */
body:not(.home) .posts > li + li { border-top-color: rgba(0,0,0,.1); }
body:not(.home) .post-date,
body:not(.home) .entry-date { color: #8a8a86; }
body:not(.home) .post-teaser h2 a { color: #111; }
body:not(.home) .post-teaser h2 a:hover { color: #111; text-decoration: underline; }
body:not(.home) .post-teaser p { color: #555; }
body:not(.home) .more-link { color: #111; }

/* --- single work: facts on light ---------------------------------------- */
body:not(.home) .work-single__facts { color: #7a7a76; }
body:not(.home) .work-single__facts dt { color: #111; }

/* --- pagination, footer, search ----------------------------------------- */
body:not(.home) .pagination .page-numbers { color: #7a7a76; }
body:not(.home) .pagination .page-numbers:hover,
body:not(.home) .pagination .current { color: #111; }
body:not(.home) .field-foot { border-top-color: rgba(0,0,0,.1); color: #8a8a86; }
body:not(.home) .field-foot a { border-bottom-color: rgba(0,0,0,.25); }
body:not(.home) .field-foot a:hover { color: #111; }
body:not(.home) .search-form__field { background: #f4f3f0; border-color: #dcdbd6; color: #1a1a1a; }
body:not(.home) .search-form__field::placeholder { color: #9a9a95; }
body:not(.home) .search-form__submit { border-color: #111; color: #111; }
body:not(.home) .search-form__submit:hover { background: #111; color: #fff; }

/* On a phone the column is a white bar on top; drop the vertical rule. */
@media (max-width: 54rem) {
  body:not(.home) .ledger { border-right: 0; border-bottom: 1px solid #cbcac4; }
  body.home .ledger { border-right: 0; }
}

/* --- a Work's photo gallery (single work page, light) ------------------- */
.work-gallery {
  margin: clamp(1.5rem, 4vh, 2.75rem) 0 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.work-gallery__item { margin: 0; }
.work-gallery__item img { width: 100%; height: auto; display: block; }