/* ══════════════════════════════════════════════════════════════════
   KATE ROSAMOND - EDITORIAL POST BLOCKS
   Shared layout system for blog posts. Link after the page's own base
   stylesheet (nav, footer, tokens). Relies on these tokens existing:
     --bg --surface --text --muted --accent --border --display-w

   Wrap the article body in <article id="ed"> and compose from blocks.

   Each block below is self-contained between its BEGIN/END markers -
   desktop rules, then its own mobile rules. Delete a block by cutting
   from BEGIN to END and nothing else breaks. Add a new one by copying
   the same shape.

   BLOCK INDEX
     01  .cap ......... small-caps label (used inside other blocks)
                      .cap.cap-accent - accent-coloured, for a second label in a pair
     02  .open ........ split header: type left, portrait right
                      .open.wide - landscape hero above centred type
     03  .sec ......... numbered body section (the workhorse)
                      .sec.with-figure - portrait photograph alongside
     04  .takeaways ... key-points panel, nests in .sec .c
     05  .atelier ..... aside with gold rule, nests in .sec .c
     06  .duo ......... portrait photograph beside body text
     07  .band ........ full-width pull quote
     08  .full ........ full-bleed captioned photograph
     09  .review ...... bride testimonial, portrait + quote
     10  .itw-cta ..... closing call to action

   HOUSE RULES
   · Post pages set --nav-h to their nav height; #ed clears it, so the
     nav is a solid block and nothing runs underneath it.
   · Photographs run in colour, as supplied. Nothing in this stylesheet
     desaturates an image.
   · Quote marks in .review q are generated by CSS - do not type them.
     Do type them into .band p, which is display type, not a citation.
   · One .band per two or three .sec blocks. More than that and they
     stop reading as pauses.
   · Image heights are set with aspect-ratio, never vh, so a crop looks
     the same on every handset. The only viewport-relative rule left is
     min-height on the .open split header.
   ══════════════════════════════════════════════════════════════════ */


/* ═══ 01 · CAP — BEGIN ══════════════════════════════════════════════
   <span class="cap">Kicker</span>
   ─────────────────────────────────────────────────────────────────── */
#ed .cap { font-family: 'Cormorant SC', serif; font-weight: 300; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cap-col, rgba(240,235,227,0.58)); }
/* Accent variant, for the second label in a pair (a read time beside a byline, an atelier
   note above its paragraph). --accent alone is 2.7:1 on the light journal pages, so it
   takes --accent-deep where that is defined and carries no opacity of its own. */
#ed .cap.cap-accent { color: var(--accent-deep, var(--accent)); }
/* ═══ 01 · CAP — END ════════════════════════════════════════════════ */


/* ═══ 02 · OPEN — BEGIN ═════════════════════════════════════════════
   <section class="open">
     <div class="txt">
       <span class="cap">Kicker</span>
       <h1>Title with <em>italic accent</em></h1>
       <p class="lede">One-line standfirst.</p>
       <div class="meta"><span class="cap">Words by …</span></div>
     </div>
     <figure>
       <img …>
       <figcaption class="cap">Photography by …</figcaption>
     </figure>
   </section>

   The figcaption is optional and sits over the bottom-right of the
   photograph - it is for a photographer credit, not a caption.

   MODIFIERS
     .wide .... landscape hero photograph across the top, type centred
                beneath it. Same markup - the figure is reordered by CSS,
                so keep .txt first in the source. 21:9 crop, 3:2 on mobile.
   ─────────────────────────────────────────────────────────────────── */
#ed { padding-top: var(--nav-h, 0px); }
#ed .open { display: grid; grid-template-columns: 1.12fr 0.88fr; min-height: calc(100vh - var(--nav-h, 0px)); overflow: hidden; }
#ed .open .txt { padding: 5rem 4.5rem 5rem 5rem; display: flex; flex-direction: column; justify-content: center; }
#ed .open h1 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: var(--display-w); font-size: clamp(54px, 6.6vw, 104px); line-height: 0.94; letter-spacing: 0.01em; margin: 2rem 0 2.4rem; }
#ed .open .lede { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(23px, 2.4vw, 32px); line-height: 1.46; color: var(--muted); max-width: 26ch; }
#ed .open .meta { display: flex; gap: 1.6rem; margin-top: 3rem; align-items: center; flex-wrap: wrap; }
#ed .open figure { position: relative; overflow: hidden; }
#ed .open img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
#ed .open figcaption { position: absolute; right: 1.1rem; bottom: 0.95rem; color: rgba(255,255,255,0.86); text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
@media (max-width: 768px) {
  #ed .open { grid-template-columns: 1fr; min-height: 0; }
  #ed .open .txt { padding: 3rem 1.5rem 3rem; }
  #ed .open .lede { max-width: none; }
  #ed .open img { height: auto; aspect-ratio: 4 / 5; object-position: center 12%; }
}
/* .wide: landscape hero. One column, figure hoisted above the type. */
#ed .open.wide { grid-template-columns: 1fr; min-height: 0; }
#ed .open.wide figure { order: -1; }
#ed .open.wide img { width: 100%; height: auto; aspect-ratio: 21 / 9; max-height: 660px; object-position: center center; }
#ed .open.wide .txt { padding: 4.5rem 5rem 1rem; max-width: 82ch; margin: 0 auto; text-align: center; }
#ed .open.wide h1 { margin: 1.6rem 0 2rem; }
#ed .open.wide .lede { max-width: 40ch; margin: 0 auto; }
#ed .open.wide .meta { justify-content: center; }
@media (max-width: 768px) {
  #ed .open.wide img { aspect-ratio: 3 / 2; max-height: none; }
  #ed .open.wide .txt { padding: 2.5rem 1.5rem 0.5rem; }
}
/* ═══ 02 · OPEN — END ═══════════════════════════════════════════════ */


/* ═══ 03 · SEC — BEGIN ══════════════════════════════════════════════
   <div class="sec">
     <span class="n">01</span>          ← leave empty for unnumbered
     <div class="c"><h2>…</h2><p>…</p></div>
   </div>
   MODIFIERS
     .intro ......... drop cap on the first paragraph
     .with-figure ... portrait photograph in the third column, beside the
                      measure. Put the <figure> after .c in the source;
                      below 1100px it drops beneath the text at 3:2.
                      The photograph caps at 420px wide (~15 lines tall) and
                      text and image centre against each other, whichever
                      of the two is shorter.
   ─────────────────────────────────────────────────────────────────── */
#ed .sec { display: grid; grid-template-columns: 150px minmax(0, 64ch) 1fr; gap: 0 3rem; padding: 0 5rem; margin-top: 4.5rem; }
#ed .sec .n { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 76px; line-height: 0.78; color: var(--num-col, rgba(197,169,122,0.62)); text-align: right; }
#ed .sec .c { grid-column: 2; }
#ed .sec h2 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: var(--display-w); font-size: clamp(30px, 3vw, 40px); line-height: 1.1; margin-bottom: 1.4rem; }
#ed .sec h3 { font-family: 'Cormorant SC', serif; font-weight: 300; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-deep); margin: 2.4rem 0 0.9rem; }
#ed .sec p { font-family: 'Jost', sans-serif; font-weight: 200; font-size: 18px; line-height: 1.95; color: var(--text); text-wrap: pretty; }
#ed .sec p + p { margin-top: 1.4rem; }
#ed .intro .c > p:first-of-type::first-letter { float: left; font-family: 'Cormorant Garamond', serif; font-style: normal; font-weight: 300; font-size: 86px; line-height: 0.74; padding: 0.08em 0.16em 0 0; color: var(--accent-deep); }
#ed .sec.with-figure { grid-template-columns: 150px minmax(0, 42ch) minmax(0, 420px); align-items: center; }
#ed .sec.with-figure .n { align-self: start; }
#ed .sec.with-figure figure { grid-column: 3; grid-row: 1; margin: 0; min-width: 0; }
#ed .sec.with-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; display: block; }
#ed .sec.with-figure figcaption { padding-top: 0.8rem; }
@media (max-width: 1100px) {
  #ed .sec { grid-template-columns: 110px minmax(0, 1fr); gap: 0 2rem; }
  #ed .sec .n { font-size: 58px; }
  #ed .sec.with-figure { grid-template-columns: 110px minmax(0, 1fr); }
  #ed .sec.with-figure figure { grid-column: 2; grid-row: 2; margin-top: 2.2rem; }
  #ed .sec.with-figure img { aspect-ratio: 3 / 2; object-position: center 20%; }
}
@media (max-width: 768px) {
  #ed .sec { grid-template-columns: 1fr; padding: 0 1.5rem; margin-top: 3rem; }
  #ed .sec .n { text-align: left; font-size: 46px; margin-bottom: 0.8rem; }
  #ed .sec .c { grid-column: 1; }
  #ed .sec.with-figure { grid-template-columns: 1fr; }
  #ed .sec.with-figure figure { grid-column: 1; grid-row: auto; margin-top: 1.8rem; }
  #ed .sec.with-figure img { aspect-ratio: 4 / 5; }
}
/* ═══ 03 · SEC — END ════════════════════════════════════════════════ */


/* ═══ 04 · TAKEAWAYS — BEGIN ════════════════════════════════════════
   Nests inside .sec .c
   <div class="takeaways">
     <span class="cap">Key takeaways</span><ul><li>…</li></ul>
   </div>
   ─────────────────────────────────────────────────────────────────── */
#ed .takeaways { margin-top: 2.6rem; padding: 2rem 2.2rem; background: var(--surface); }
#ed .takeaways ul { list-style: none; margin-top: 1rem; }
#ed .takeaways li { font-size: 16px; line-height: 1.75; color: var(--text); padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
#ed .takeaways li:last-child { border-bottom: none; }
/* ═══ 04 · TAKEAWAYS — END ══════════════════════════════════════════ */


/* ═══ 05 · ATELIER — BEGIN ══════════════════════════════════════════
   Nests inside .sec .c
   <div class="atelier"><span class="cap">…</span><p>…</p></div>
   ─────────────────────────────────────────────────────────────────── */
#ed .atelier { margin: 2.8rem 0; padding: 2.2rem 2.4rem; border-left: 1px solid var(--accent); background: var(--surface); }
#ed .atelier p { font-size: 17px; line-height: 1.85; color: var(--text); margin-top: 0.8rem; }
/* ═══ 05 · ATELIER — END ════════════════════════════════════════════ */


/* ═══ 06 · DUO — BEGIN ══════════════════════════════════════════════
   Portrait photograph beside body text. Top-level child of #ed.

   <div class="duo">
     <figure><img …><figcaption class="cap">Optional caption</figcaption></figure>
     <div class="c">
       <h2>…</h2>
       <p>…</p>
     </div>
   </div>

   Modifiers
     .duo.flip ...... photograph on the right instead of the left
     .duo.tall ...... 3:4 portrait crop (default is 4:5)

   Stacks below 900px: photograph first, then text, full width.
   ─────────────────────────────────────────────────────────────────── */
#ed .duo { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; padding: 0 5rem; margin-top: 5rem; }
#ed .duo figure { margin: 0; }
#ed .duo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; display: block; }
#ed .duo.tall img { aspect-ratio: 3 / 4; }
#ed .duo figcaption { padding-top: 0.9rem; }
#ed .duo.flip figure { order: 2; }
#ed .duo h2 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: var(--display-w); font-size: clamp(28px, 2.8vw, 38px); line-height: 1.12; margin-bottom: 1.3rem; }
#ed .duo h3 { font-family: 'Cormorant SC', serif; font-weight: 300; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-deep); margin: 2.2rem 0 0.9rem; }
#ed .duo p { font-family: 'Jost', sans-serif; font-weight: 200; font-size: 18px; line-height: 1.95; color: var(--text); text-wrap: pretty; max-width: 58ch; }
#ed .duo p + p { margin-top: 1.4rem; }
@media (max-width: 900px) {
  #ed .duo { grid-template-columns: 1fr; gap: 2rem; margin-top: 3.5rem; }
  #ed .duo.flip figure { order: 0; }
  #ed .duo img { aspect-ratio: 3 / 2; object-position: center 22%; }
  #ed .duo.tall img { aspect-ratio: 4 / 5; }
}
@media (max-width: 768px) {
  #ed .duo { padding: 0 1.5rem; }
}
/* ═══ 06 · DUO — END ════════════════════════════════════════════════ */


/* ═══ 07 · BAND — BEGIN ═════════════════════════════════════════════
   <div class="band"><p>"…"</p><span class="cap">Attribution</span></div>
   ─────────────────────────────────────────────────────────────────── */
#ed .band { margin: 5rem 0; padding: 4.5rem 5rem; background: var(--surface); text-align: center; }
#ed .band p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: var(--display-w); font-size: clamp(42px, 4.8vw, 64px); line-height: 1.18; max-width: 24ch; margin: 0 auto; text-wrap: balance; color: var(--text); }
#ed .band .cap { display: block; margin-top: 2rem; }
@media (max-width: 768px) {
  #ed .band { margin: 3.5rem 0; padding: 3.4rem 1.5rem; }
  #ed .band p { font-size: 42px; line-height: 1.14; max-width: 18ch; }
}
/* ═══ 07 · BAND — END ═══════════════════════════════════════════════ */


/* ═══ 08 · FULL — BEGIN ═════════════════════════════════════════════
   <figure class="full"><img …><figcaption class="cap">…</figcaption></figure>
   ─────────────────────────────────────────────────────────────────── */
#ed .full { margin: 4.6rem 0 0; overflow: hidden; }
#ed .full img { height: 540px; object-fit: cover; object-position: center 38%; }
#ed .full figcaption { padding: 1rem 5rem 0; text-align: right; }
@media (max-width: 768px) {
  #ed .full img { height: 300px; }
  #ed .full figcaption { padding: 0.9rem 1.5rem 0; }
}
/* ═══ 08 · FULL — END ═══════════════════════════════════════════════ */


/* ═══ 09 · REVIEW — BEGIN ═══════════════════════════════════════════
   <div class="review">
     <img …>
     <div>
       <q>…</q>
       <div class="who"><b>Name</b><span class="cap">Gown detail</span></div>
     </div>
   </div>

   Modifier
     .review.no-photo ... omit the <img>, quote runs single column

   Sits on the surface colour with a fine woven texture, so it reads as
   a pause in the page in the same way .band does. Below 768px the
   portrait moves above the quote and crops to landscape - the block
   keeps its ink on paper rather than reversing out over the photograph.
   ─────────────────────────────────────────────────────────────────── */
#ed .review { display: grid; grid-template-columns: 230px 1fr; gap: 3rem; align-items: center; margin: 5rem 0 0; padding: 3.5rem 5rem; background-color: var(--surface); background-image: repeating-linear-gradient(90deg, var(--tex, rgba(0,0,0,0.035)) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, var(--tex, rgba(0,0,0,0.035)) 0 1px, transparent 1px 4px); }
#ed .review img { aspect-ratio: 3 / 4; object-fit: cover; }
#ed .review q { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: var(--display-w); font-size: clamp(28px, 3.1vw, 40px); line-height: 1.28; quotes: '\201C' '\201D'; text-wrap: pretty; color: var(--text); }
#ed .review q::before, #ed .review q::after { color: var(--accent); font-style: normal; }
#ed .review .who { margin-top: 1.6rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
#ed .review .who b { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: 24px; }
#ed .review.no-photo { grid-template-columns: 1fr; }
#ed .review.no-photo q { max-width: 24ch; }
@media (max-width: 768px) {
  #ed .review { grid-template-columns: 1fr; gap: 1.8rem; padding: 2.6rem 1.5rem; }
  #ed .review img { aspect-ratio: 4 / 5; object-position: center 18%; }
  #ed .review q { font-size: 25px; line-height: 1.32; }
  #ed .review .who { margin-top: 1.3rem; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
}
/* ═══ 09 · REVIEW — END ═════════════════════════════════════════════ */


/* ═══ 10 · CTA — BEGIN ══════════════════════════════════════════════
   <div class="itw-cta">
     <h2 class="itw-cta-head">…</h2>
     <p class="itw-cta-body">…</p>
     <a href="…" class="cta-btn">…</a>
   </div>
   Side gutters are padding, not margin, so the block stays centred
   inside its 1360px measure.
   ─────────────────────────────────────────────────────────────────── */
#ed .itw-cta { padding-left: 5rem; padding-right: 5rem; padding-bottom: 8rem; }
@media (max-width: 768px) {
  #ed .itw-cta { padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 5rem; }
}
/* ═══ 10 · CTA — END ════════════════════════════════════════════════ */