/* ==========================================================================
   HOUSE OF PRACHAR: inner pages. Case study, journal, contact, errata.
   Built on the home page's parts (home.css); this file adds only what's new.
   ========================================================================== */

/* ---------- page head: the inner-page version of a section head ---------- */
.page-head { display: grid; gap: var(--s-5); padding-block: var(--s-9) 0; }
.page-head__h { font-size: var(--fs-h1); }
.page-head .t-lead { max-width: 40ch; color: var(--text-soft); }
.journal--index { padding-top: var(--s-8); }

/* ---------- prose: long reading, EB Garamond at 19-21px, 62ch ---------- */
.prose { --prose-w: 62ch; font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem); }
.prose > * { max-width: var(--prose-w); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; font: 500 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1.1 var(--f-sans); letter-spacing: -.03em; }
.prose h2 + p { margin-top: .7em; }
.prose strong { font-weight: 600; }
.prose a { text-decoration-color: var(--press); }
.prose__stand { font: italic 400 var(--fs-lead)/1.4 var(--f-serif); color: var(--text-soft); }
.prose__drop::first-letter { float: left; margin: .06em .1em 0 0; font: 700 4.4em/.78 var(--f-serif); color: var(--press); }
.pull { margin-block: 1.8em; padding-block: var(--s-5); border-block: 3px double var(--ink); max-width: none; }
.pull p { font: italic 400 clamp(1.7rem, 1.2rem + 1.8vw, 2.75rem)/1.15 var(--f-serif); letter-spacing: -.02em; max-width: 24ch; }
.editor-note { padding: var(--s-4) var(--s-5); border: 1px dashed var(--ink-soft); font: 400 1.0625rem/1.5 var(--f-sans); color: var(--text-soft); }
.editor-note .t-label { display: block; margin-bottom: var(--s-2); color: var(--ink); }

/* ---------- case study ---------- */
.case__head { display: grid; gap: var(--s-5); padding-block: var(--s-9) var(--s-7); }
.case__h { font: 400 var(--fs-h1)/1.02 var(--f-serif); letter-spacing: var(--track-head); max-width: 18ch; }
.case__h em { color: var(--press); }
.case__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--s-4) 0 0; border-block: 1px solid var(--rule); }
.case__meta > div { display: grid; gap: var(--s-2); padding: var(--s-4) var(--gutter) var(--s-4) 0; }
.case__meta > div + div { padding-left: var(--gutter); border-left: 1px solid var(--rule); }
.case__meta dd { margin: 0; font: 400 1.25rem/1.2 var(--f-serif); }
.case__meta dt { color: var(--text-soft); }
.case__head .tag-placeholder { justify-self: start; }

.case__hero { margin-bottom: var(--s-9); }
.case__frame { aspect-ratio: 16 / 9; }
.case__frame.t-shape--arch { aspect-ratio: 4 / 5; width: min(100%, 34rem); margin-inline: auto; }
.case__frame.t-shape--block::before { left: auto; right: -2%; width: 30%; }

.case__body { align-items: start; }
.case__side { position: sticky; top: calc(60px + var(--s-6)); display: grid; gap: var(--s-3); align-content: start;
              padding-top: var(--s-3); border-top: 3px double var(--ink); }
.case__roles { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.case__roles li { padding: .4em .95em; border: 1px solid var(--rule); border-radius: var(--r-pill); font: 400 var(--fs-small)/1.3 var(--f-sans); }
.case__by { font: italic 400 1.125rem/1.4 var(--f-serif); }

.case__gallery { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); align-items: end; padding-block: var(--s-10) var(--s-9); }
.case__shot--arch { aspect-ratio: 4 / 5; width: 82%; }
.case__shot--block { aspect-ratio: 4 / 3; }

.case__next { padding-bottom: var(--section-y); }
.case__next-link { display: grid; gap: var(--s-4); padding-top: var(--s-5); border-top: 3px double var(--ink); text-decoration: none; }
.case__next-h { font: 400 var(--fs-h2)/1.04 var(--f-serif); letter-spacing: var(--track-head); max-width: 20ch;
                background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size var(--d-slow) var(--ease-out); }
.case__next-h em { color: var(--press); }
.case__next-link:hover .case__next-h, .case__next-link:focus-visible .case__next-h { background-size: 100% 2px; }

/* ---------- journal article ---------- */
.article__head { display: grid; gap: var(--s-5); justify-items: center; padding-block: var(--s-9) var(--s-8); text-align: center; }
.article__head .kicker { justify-self: stretch; }
.article__h { font: 400 var(--fs-h1)/1.02 var(--f-serif); letter-spacing: var(--track-head); max-width: 20ch; }
.article__h em { color: var(--press); }
.article__stand { max-width: 36ch; font: italic 400 var(--fs-lead)/1.35 var(--f-serif); color: var(--text-soft); }
.article__head .byline { justify-content: center; flex-wrap: wrap; padding-top: var(--s-3); }
.article__body { position: relative; padding-bottom: var(--s-9); }
.prose--article { margin-inline: auto; max-width: 62ch; }
.article__pen { position: absolute; right: var(--margin); max-width: 9em; white-space: normal; text-align: center; transform: rotate(-6deg) translateY(-8rem); }
.article__end { text-align: center; font: 500 var(--fs-label)/1 var(--f-sans); letter-spacing: .3em; color: var(--text-soft); max-width: none; margin-top: 3em !important; }
.article__more { padding-bottom: var(--section-y); }
.article__more .kicker { margin-bottom: var(--s-5); }
.article__list { list-style: none; padding: 0; margin: 0; }
.article__list li { border-bottom: 1px solid var(--rule); }
.article__list a { display: grid; grid-template-columns: 10rem 1fr auto; gap: var(--gutter); align-items: baseline; padding-block: var(--s-4); text-decoration: none; }
.article__list a:hover .article__list-h, .article__list a:focus-visible .article__list-h { text-decoration: underline 1px; text-underline-offset: .15em; }
.article__list .t-label { color: var(--text-soft); }
.article__list-h { font: 400 clamp(1.3rem, 1.1rem + .7vw, 1.75rem)/1.2 var(--f-serif); }

/* ---------- contact page ---------- */
.letters--page { padding-top: var(--s-9); }
.letters__addr { font: normal 400 var(--fs-ui)/1.5 var(--f-sans); color: var(--text-soft); }
/* No-JS replies from /api/letter land on #sent or #unsent */
.notice { display: none; padding: var(--s-4) var(--s-5); border: 3px double var(--ink); background: var(--sheet); font: 400 1.0625rem/1.5 var(--f-sans); }
.notice b { display: block; margin-bottom: var(--s-1); font: 700 var(--fs-label)/1.3 var(--f-sans); letter-spacing: var(--track-label); text-transform: uppercase; }
.notice:target { display: block; }
.notice--unsent b { color: var(--press); }

/* ---------- errata (404) ---------- */
.errata { position: relative; display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-6) var(--gutter); align-content: center;
          min-height: calc(100svh - 62px); padding-block: var(--s-8); }
.errata .kicker { grid-column: 1 / -1; }
.errata__h { grid-column: 1 / -1; }
.errata__h .t-hero { color: var(--accent-type); }
.errata__body { grid-column: 2; display: grid; gap: var(--s-5); align-content: start; }
.errata__note { font: 400 var(--fs-ui)/1.55 var(--f-sans); color: var(--text-soft); }
.errata__path { padding: .1em .4em; background: var(--paper-deep); font: 500 .9em/1 var(--f-sans); word-break: break-all; }
.errata__stamp { grid-column: 1; grid-row: 3; align-self: center; justify-self: center; scale: 1.4; }
.errata__pen { right: 6%; top: 18%; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .case__meta { grid-template-columns: 1fr 1fr; }
  .case__meta > div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .case__meta > div:nth-child(4) { border-top: 1px solid var(--rule); }
  .case__side { position: static; }
  .case__gallery { grid-template-columns: 1fr; gap: var(--s-8); }
  .article__pen { position: static; display: block; margin: 0 auto; transform: rotate(-4deg); }
  .article__list a { grid-template-columns: 1fr; gap: var(--s-2); }
  .errata { grid-template-columns: 1fr; }
  .errata__body, .errata__stamp { grid-column: 1; grid-row: auto; }
  .errata__stamp { justify-self: start; scale: 1; }
}
@media (max-width: 640px) {
  .errata__h .t-hero { font-size: 21vw; }
  .errata__pen { top: 8%; }
}