/* ============================================================================
   PORTFOLIO — the chapter layer
   ----------------------------------------------------------------------------
   The page is the composition. There are no cards, no borders, no hover lifts,
   no shadows on frames: a photograph is an object and the page is its mount.

   The visual language is architectural documentation — a measured drawing and a
   museum label. A rule is a set-out line. A caption is a plate label. The
   specification block is a drawing's title block. Nothing decorative exists
   without a reason.

   Layout is never chosen by the template. Every plate carries ROLES, and the
   roles decide the presentation — so re-ordering or re-tagging the data
   re-edits the chapter with no change here.
   ========================================================================== */

.chapter {
  --plate-gutter: clamp(28px, 4.5vw, 84px);
  --rule: rgba(138, 109, 43, .34);
  --label: var(--color-text-muted, #6E5A3C);
  background: var(--color-bg, #FDFBF6);
}

/* ---- the museum label ---------------------------------------------------- */
.plate-label {
  font-family: var(--font-text);
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--label);
  line-height: 1.75;
  display: block;
}
.plate-label .num { color: var(--color-heading-gold, #8A5E20); margin-inline-end: 1.1em; }
.plate-label .craft { display: block; text-transform: none; letter-spacing: .04em; font-size: .74rem; opacity: .78; }

/* ---- I · the opening plate ------------------------------------------------ */
.chapter-opening { padding-block-start: clamp(28px, 5vw, 72px); }
.chapter-opening .plate { margin: 0; }
/* A plate is never trimmed by its frame. No object-fit, no height cap: the
   photograph runs whole and the page makes room for it. */
.chapter-opening .plate img { display: block; inline-size: 100%; block-size: auto; }
.chapter-title {
  margin-block-start: clamp(18px, 2.4vw, 34px);
  display: grid; gap: clamp(10px, 1.6vw, 22px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .chapter-title { grid-template-columns: minmax(0, 1fr) 26ch; align-items: end; } }
.chapter-title h1 {
  font-family: var(--font-display-ar);
  font-weight: 400; line-height: 1.08;
  font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.6rem);
  color: var(--color-heading-gold, #8A5E20);
  margin: 0;
}
.chapter-title .where {
  font-family: var(--font-text); font-size: .95rem;
  color: var(--color-text-muted); letter-spacing: .02em;
}

/* ---- II · the commission, and its title block ----------------------------- */
.chapter-commission {
  margin-block-start: clamp(46px, 6vw, 104px);
  display: grid; gap: clamp(26px, 3.4vw, 64px);
  grid-template-columns: minmax(0, 1fr);
}
/* Both columns set from the same baseline. The prose is shorter than the title
   block, and without this the leftover height falls as a void beneath the text.
   With it, the space falls at the foot of the section, where it becomes a rest
   before the work begins. */
@media (min-width: 900px) { .chapter-commission { grid-template-columns: minmax(0, 1fr) minmax(230px, 27ch); align-items: start; } }
.chapter-commission p {
  font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem);
  line-height: 1.66; max-inline-size: 64ch; margin: 0 0 1.1em;
}
.chapter-commission .constraint {
  color: var(--color-text-muted); border-inline-start: 1px solid var(--rule);
  padding-inline-start: 1.4em; margin-block-start: 1.7em;
}

/* the title block — a drawing's, not a card's */
.title-block { border-block-start: 1px solid var(--rule); padding-block-start: 1.1em; }
.title-block dl { margin: 0; display: grid; grid-template-columns: 9ch 1fr; gap: .5em 1.2em; }
.title-block dt {
  font-family: var(--font-text); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--label); padding-block-start: .25em;
}
.title-block dd { margin: 0; font-family: var(--font-text); font-size: .86rem; line-height: 1.55; }
.title-block .craft-list { display: flex; flex-wrap: wrap; gap: .3em .9em; }
.title-block .craft-list span { white-space: nowrap; }

/* ---- III · the work ------------------------------------------------------- */
.chapter-work { margin-block-start: clamp(54px, 7vw, 128px); }
.chapter-work .plate { margin: 0 0 var(--plate-gutter); }
.chapter-work .plate img { display: block; inline-size: 100%; block-size: auto; }
.chapter-work .plate figcaption { margin-block-start: .85em; }

/* full — a ceiling or a dome earns the whole measure, uncropped */
.plate.is-full img { inline-size: 100%; block-size: auto; }

/* portrait — a tall plate keeps every millimetre of its architecture. It takes a
   narrower measure instead, and the margin absorbs the difference. Whitespace is
   preferable to losing architecture. */
.plate.is-portrait img { max-inline-size: min(100%, 58%); margin-inline: auto; }
.chapter-opening .plate.is-portrait img { max-inline-size: min(100%, 62%); }
@media (max-width: 760px) { .plate.is-portrait img { max-inline-size: 100%; } }

/* pair — only where two frames argue with each other */
.plate-pair {
  display: grid; gap: var(--plate-gutter); margin-block-end: var(--plate-gutter);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .plate-pair { grid-template-columns: 1fr 1fr; align-items: start; } }
.plate-pair .plate { margin-block-end: 0; }

/* aside — the workhorse: photograph with its label in the margin */
.plate.is-aside { display: grid; gap: clamp(14px, 2vw, 34px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .plate.is-aside { grid-template-columns: minmax(0, 1fr) 22ch; align-items: end; }
  .plate.is-aside.flip { grid-template-columns: 22ch minmax(0, 1fr); }
  .plate.is-aside.flip img { order: 2; }
}

/* tall — white space beside it, never a neighbour */
.plate.is-tall { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .plate.is-tall { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 56px); align-items: end; }
}

/* ---- IV · the detail ------------------------------------------------------ */
.chapter-detail {
  margin-block-start: clamp(40px, 5vw, 96px);
  padding-block: clamp(38px, 5vw, 88px);
  border-block: 1px solid var(--rule);
}
.chapter-detail .plate img { display: block; inline-size: 100%; block-size: auto; }
.chapter-detail .craft-line {
  margin-block-start: clamp(16px, 2vw, 28px);
  font-family: var(--font-display-ar); font-weight: 400;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.7rem);
  line-height: 1.4; color: var(--color-text); max-inline-size: 34ch;
}

/* ---- V · the neighbours --------------------------------------------------- */
.chapter-neighbours { margin-block-start: clamp(54px, 7vw, 120px); padding-block-end: clamp(46px, 6vw, 100px); }
.chapter-neighbours .caption { margin-block-end: 1.4em; }
.neighbour-list { display: grid; gap: clamp(20px, 3vw, 48px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .neighbour-list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.neighbour {
  display: block; text-decoration: none; color: inherit;
  border-block-start: 1px solid var(--rule); padding-block-start: 1em;
}
.neighbour h3 {
  font-family: var(--font-display-ar); font-weight: 400; margin: .1em 0 .15em;
  font-size: clamp(1.1rem, 1rem + .45vw, 1.45rem); color: var(--color-heading-gold, #8A5E20);
}
.neighbour .shared { font-family: var(--font-text); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--label); }
.neighbour:hover h3 { color: var(--color-text); }

/* ---- the one signature device: a set-out line that draws itself ----------- */
.setout { display: block; block-size: 1px; background: var(--rule); inline-size: 100%; transform-origin: inline-start; }
.reveal .setout { transform: scaleX(0); transition: transform .85s cubic-bezier(.22, 1, .36, 1); }
.reveal.is-in .setout { transform: scaleX(1); }

/* ---- motion: a page turning ----------------------------------------------- */
.chapter .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.chapter .reveal.is-in { opacity: 1; transform: none; }
.chapter .reveal figcaption, .chapter .reveal .plate-label { transition-delay: .09s; }

@media (prefers-reduced-motion: reduce) {
  .chapter .reveal, .chapter .reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal .setout, .reveal.is-in .setout { transform: none !important; transition: none !important; }
}

/* ---- lightbox: the second reading ---------------------------------------- */
.pl-lb[hidden] { display: none !important; }
.pl-lb {
  position: fixed; inset: 0; z-index: 90; background: #241A0E;
  display: grid; grid-template-rows: 1fr auto; padding: clamp(14px, 3vw, 46px);
}
.pl-lb img { max-inline-size: 100%; max-block-size: 100%; margin: auto; display: block; object-fit: contain; }
.pl-lb figcaption { color: #E4B65E; padding-block-start: 1em; }
.pl-lb .close {
  position: absolute; inset-block-start: clamp(10px,2vw,26px); inset-inline-end: clamp(10px,2vw,26px);
  background: none; border: 0; color: #E4B65E; font-family: var(--font-text);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; padding: .6em;
}
.pl-lb .close:hover { color:#F8F5EF; }


/* ---- the quiet plate ------------------------------------------------------
   Not every plate competes. A quiet plate takes a smaller measure and a great
   deal of space, and it sits immediately before the craft passage so the reader
   arrives at the making with an empty breath behind them. Silence is editorial. */
.plate.is-quiet { margin-block: calc(var(--plate-gutter) * 1.9) calc(var(--plate-gutter) * 2.1); }
.plate.is-quiet img { max-inline-size: min(100%, 46%); margin-inline: auto; }
@media (max-width: 760px) { .plate.is-quiet img { max-inline-size: 78%; } }

/* ---- the closing page -----------------------------------------------------
   The last page of a printed chapter: the reader is given permission to leave
   before the next one begins. A rule, the chapter's name set small, and space.
   Nothing else — it is rhythm, not decoration. */
.chapter-close {
  margin-block-start: clamp(60px, 8vw, 150px);
  padding-block: clamp(64px, 9vw, 170px);
  text-align: center;
}
.chapter-close .rule {
  display: block; inline-size: clamp(60px, 8vw, 120px); block-size: 1px;
  background: var(--rule); margin: 0 auto clamp(22px, 3vw, 44px);
}
/* These inherit the chapter's prose measure (~834px), which leaves the box hard
   against the start edge while its text centres inside itself. The box must be
   centred — and the margin must be set with margin-block/margin-inline, never a
   `margin` shorthand, which would silently reset the inline auto. */
.chapter-close .name {
  font-family: var(--font-display-ar); font-weight: 400;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.45rem);
  color: var(--color-heading-gold, #8A5E20); line-height: 1.5;
  margin-block: 0; margin-inline: auto;
}
.chapter-close .where {
  font-family: var(--font-text); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--label);
  margin-block: .9em 0; margin-inline: auto;
}
.chapter-close .end {
  display: block; margin-block-start: clamp(26px, 3.5vw, 52px);
  font-family: var(--font-text); font-size: .6rem; letter-spacing: .34em;
  text-transform: uppercase; color: var(--label); opacity: .62;
}

/* ---- chapter temperament ---------------------------------------------------
   Read off the photography by the generator, never chosen by hand. Three
   chapters must not breathe alike: a craft-heavy chapter is packed and quick, a
   portrait-heavy one is slow and large, a chapter of wide rooms is given air.
   Only spacing and measure change — no new visual language. */
[data-tempo="dense"]    { --plate-gutter: clamp(20px, 2.4vw, 44px); }
[data-tempo="slow"]     { --plate-gutter: clamp(38px, 5vw, 96px); }
[data-tempo="spacious"] { --plate-gutter: clamp(52px, 6.6vw, 130px); }

/* a slow chapter holds each frame longer; a dense one lets them run wider */
[data-tempo="slow"] .plate.is-portrait img { max-inline-size: min(100%, 66%); }
[data-tempo="dense"] .plate.is-portrait img { max-inline-size: min(100%, 52%); }
[data-tempo="dense"] .plate.is-quiet img { max-inline-size: min(100%, 40%); }
[data-tempo="spacious"] .plate.is-quiet img { max-inline-size: min(100%, 50%); }

/* stately — a chapter of rooms and little else. Uniform material becomes calm
   rather than repetitive when it is given the most air and the rarest crescendo. */
[data-tempo="stately"] { --plate-gutter: clamp(60px, 7.4vw, 148px); }
[data-tempo="stately"] .plate.is-quiet img { max-inline-size: min(100%, 44%); }

/* A quiet plate must stay quieter than its chapter's portrait measure. Without
   this, a quiet plate that is ALSO portrait was caught by the tempo's portrait
   rule (higher specificity) and came out WIDER than the chapter's median — the
   pause was louder than the passage it was meant to interrupt. */
[data-tempo="dense"]    { --quiet-measure: 38%; }
[data-tempo="slow"]     { --quiet-measure: 42%; }
[data-tempo="spacious"] { --quiet-measure: 48%; }
[data-tempo="stately"]  { --quiet-measure: 44%; }
[data-tempo] .plate.is-quiet img,
[data-tempo] .plate.is-quiet.is-portrait img { max-inline-size: min(100%, var(--quiet-measure, 46%)); }
@media (max-width: 760px) { [data-tempo] .plate.is-quiet img { max-inline-size: 78%; } }

/* ---- the way in: the contents page -----------------------------------------
   The book's front door. A list in reading order and nothing else — no gallery,
   no filters, no cards. The same museum-label language as the chapters. */
.book-contents .contents-head { padding-block: clamp(40px, 6vw, 110px) clamp(26px, 3.4vw, 52px); }
.book-contents .contents-head h1 {
  font-family: var(--font-display-ar); font-weight: 400; margin: 0;
  font-size: clamp(2rem, 1.3rem + 3vw, 4rem); color: var(--color-heading-gold, #8A5E20);
}
.book-contents .contents-head .lead {
  font-family: var(--font-text); font-size: .68rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--label); margin: 1em 0 0;
}
.contents-list { list-style: none; margin: 0; padding: 0; }
.contents-item { border-block-start: 1px solid var(--rule); }
.contents-item:last-child { border-block-end: 1px solid var(--rule); }
.contents-item a {
  display: grid; gap: clamp(16px, 2.4vw, 40px); align-items: center;
  grid-template-columns: minmax(0, 92px) minmax(0, 1fr);
  padding-block: clamp(16px, 2.2vw, 30px); text-decoration: none; color: inherit;
}
@media (min-width: 760px) { .contents-item a { grid-template-columns: minmax(0, 132px) minmax(0, 1fr); } }
.contents-item .thumb { display: block; overflow: hidden; }
.contents-item .thumb img { display: block; inline-size: 100%; block-size: auto; }
.contents-item .text { display: block; }
.contents-item .no {
  display: block; font-family: var(--font-text); font-size: .6rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--label);
}
.contents-item .name {
  display: block; font-family: var(--font-display-ar); font-weight: 400;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.9rem); line-height: 1.25;
  color: var(--color-heading-gold, #8A5E20); margin-block-start: .18em;
}
.contents-item .where {
  display: block; font-family: var(--font-text); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--label); margin-block-start: .35em;
}
.contents-item a:hover .name { color: var(--color-text); }

/* ---- forward: the next chapter ---------------------------------------------
   One link, not three. The book has an order and the page follows it. */
.chapter-next {
  display: block; text-decoration: none; color: inherit; text-align: center;
  border-block-start: 1px solid var(--rule);
  margin-block-start: clamp(30px, 4vw, 70px);
  padding-block: clamp(34px, 4.6vw, 84px) clamp(46px, 6vw, 104px);
}
.chapter-next .lead {
  display: block; font-family: var(--font-text); font-size: .62rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--label);
}
.chapter-next h3 {
  font-family: var(--font-display-ar); font-weight: 400; margin: .5em 0 0;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.4rem); color: var(--color-heading-gold, #8A5E20);
}
.chapter-next .where {
  display: block; font-family: var(--font-text); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--label); margin-block-start: .5em;
}
.chapter-next:hover h3 { color: var(--color-text); }

/* ---- the end of the book ---------------------------------------------------
   No call to action, no contact, no recommendations. The reader is simply let go. */
.book-end {
  text-align: center;
  padding-block: clamp(80px, 11vw, 210px) clamp(60px, 8vw, 150px);
}
.book-end .rule {
  display: block; inline-size: clamp(48px, 6vw, 92px); block-size: 1px;
  background: var(--rule); margin: 0 auto clamp(26px, 3.4vw, 50px);
}
.book-end .line {
  font-family: var(--font-display-ar); font-weight: 400;
  font-size: clamp(1.1rem, .98rem + .6vw, 1.6rem);
  color: var(--color-heading-gold, #8A5E20);
  margin-block: 0; margin-inline: auto;
}
.book-end .imprint {
  font-family: var(--font-text); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--label); opacity: .72;
  margin-block: clamp(20px, 2.6vw, 40px) 0; margin-inline: auto;
}