/* Journal (/notes/ and the three notes) and the past event page
   (/return-to-the-inner-temple/). Shared components live in /v2.css. */

/* == PAGE HEAD WITH LINE ART ==========================================
   The gold drawing belongs to the heading block: x from the block's edge,
   y from its top (art-placement rule 1). Phones: in the open space on the
   right of the centred heading, running just past the screen edge.
   Tablet and desktop: in the open space right of the heading block. */
.j-head{overflow-x:clip}
.j-head__block{position:relative;max-width:760px;margin-inline:auto}
.j-head__block>*+*{margin-top:14px}
.j-head__block>.lotus-rule{margin-block:18px 0}
.j-head__lede{max-width:34em;margin-inline:auto}
.j-head__art{position:absolute;z-index:0;height:auto;pointer-events:none;margin:0!important}
.j-head__block>:not(.j-head__art){position:relative;z-index:1}

@media (max-width:720px){
  /* the heading lines stop short of the drawing on both sides, so the text stays centred */
  .j-head h1,.j-head .sub{padding-inline:clamp(46px,14vw,64px)}
  .j-head__art{right:calc(var(--gutter) * -1 - 6px)}
  .j-head__art--feather{width:62px;top:-6px;rotate:10deg}
  /* list page has no kicker: a smaller feather that ends beside the sub line, clear of the lede */
  .j-head__block--list .j-head__art--feather{width:50px;top:-16px}
  .j-head__art--lotus{width:74px;top:-14px;rotate:6deg;opacity:.95}
  .j-head__art--moon{width:66px;top:-2px;rotate:-8deg}
}
@media (min-width:721px){
  .j-head__block{--aw:clamp(96px,11vw,150px);max-width:min(760px,100% - var(--aw) * 2 - 40px)}
  .j-head__art{left:calc(100% + 28px);top:-4px;width:var(--aw)}
  .j-head__art--feather{rotate:10deg;width:calc(var(--aw) * .72)}
  .j-head__art--lotus{top:-18px}
  .j-head__art--moon{width:calc(var(--aw) * .82);rotate:-8deg}
}

/* desktop hero with a photo (/notes/, 1021px+): the photo fills the right side, so the feather moves into the
   text column, a small mark centred above the heading, and the column takes the full hero width like the other heroes */
@media (min-width:1021px){
  .page-head--photo .j-head__block{display:flex;flex-direction:column;max-width:760px}
  .page-head--photo .j-head__art{position:relative;left:auto;top:auto;align-self:center;order:-1;width:46px;margin:0 0 4px!important}
}

/* == NOTE CARDS (index and "More from the Journal") ===================== */
.j-cards{list-style:none;padding:0}
.j-cards>li{display:flex;min-width:0}
.j-card{width:100%;gap:12px}
.j-card .card__title{font-size:clamp(1.5rem,2.2vw,1.75rem);line-height:1.15}
.j-card .card__sub{color:var(--plum-ink)}
.j-card__art{display:flex;align-items:flex-end;justify-content:center;height:104px}
.j-card__art img{height:104px;width:auto;max-width:none;opacity:.92}
.j-card__art--feather img{rotate:10deg;height:100px}
.j-card__art--moon img{height:96px}
@media (min-width:721px){.j-cards--two{max-width:52rem;margin-inline:auto}
  /* side-by-side cards: reserve two title lines so every subtitle starts level */
  .j-card .card__title{min-height:2lh;display:grid;align-content:end;text-wrap:balance}}
.j-past,.j-back{margin-top:var(--stack);text-align:center}
/* phones 2026-11-10: smaller line art so the note cards (and the letters form) come up sooner */
@media (max-width:720px){
  .j-card__art{height:76px}
  .j-card__art img{height:76px}
  .j-card__art--feather img{height:72px}
  .j-card__art--moon img{height:70px}
}

/* == THE NOTE ============================================================ */
.j-note-sec{padding-top:0}
.j-note{max-width:42rem}
.j-note p{line-height:1.75}
.j-note h2{font-size:clamp(1.65rem,2.6vw,2.1rem);line-height:1.15;margin-top:1.5em}
.j-quote{margin-block:1.6em!important;padding:20px 4px;text-align:center;border-block:1px solid var(--gold-soft)}
.j-quote p{font:italic 500 clamp(1.4rem,2.4vw,1.75rem)/1.3 var(--serif);color:var(--plum)}
@media (max-width:720px){.j-note{padding:26px 20px}}

.j-cta__text{max-width:34em;margin-inline:auto}
/* 2026-11-11 layout pass. The line drawings (head and note cards, data-draw in the HTML) draw themselves
   upward as they arrive: v2.js arms them like the lotus dividers (.draw), this swaps in the ink reveal.
   Once, 1.6s, off under reduced motion (v2.css switches .draw off). */
.j-head__art.draw.is-in,.j-card__art img.draw.is-in{animation-name:ink;animation-duration:1.6s}
@keyframes ink{0%{opacity:0;clip-path:inset(100% -10% -10% -10%)}18%{opacity:1}100%{clip-path:inset(-10% -10% -10% -10%)}}
/* the note itself: a drop cap, and larger text on desktop */
.j-note>p:first-child::first-letter{float:left;margin:.06em .1em 0 0;font:600 3.3em/.8 var(--serif);color:var(--plum)}
@media (min-width:1021px){.j-note{max-width:44rem;font-size:1.1875rem}.j-note>p:first-child::first-letter{font-size:3.6em}}

/* deep dusk band (2026-11-11): Letters from Rachel sits straight on the band, no panel */
.band-deep .letters{background:none;box-shadow:none;padding-block:0}

/* == PAST EVENT ========================================================= */
.ev-passed{display:block;width:fit-content;max-width:34rem;margin:0 auto var(--stack);padding:12px 20px;border-radius:18px;text-align:center;font-size:1rem;line-height:1.45;color:var(--plum-ink);background:var(--ivory);box-shadow:inset 0 0 0 1px var(--gold),0 10px 24px -18px rgba(74,16,41,.45)}
.ev-passed span{font-weight:600;color:var(--plum)}
.ev-passed a{display:inline-block;padding-block:11px;margin-block:-11px;font-weight:600}
.ev-facts{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:34rem;margin-inline:auto}
.ev-facts li{padding:6px 14px;border-radius:999px;font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--plum);background:var(--ivory);box-shadow:inset 0 0 0 1px var(--gold-soft)}

.ev-invite__top{display:grid;justify-items:center;gap:var(--group);max-width:44rem;margin:0 auto var(--stack);text-align:center}
.ev-invite__art{width:76px;height:auto;opacity:.92}
.ev-invite__lead{font:italic 500 clamp(1.35rem,2.4vw,1.75rem)/1.35 var(--serif);color:var(--plum)}
@media (min-width:721px){
  .ev-invite__top{grid-template-columns:auto minmax(0,1fr);align-items:center;text-align:left;gap:28px}
  .ev-invite__art{width:104px;rotate:-6deg}
}
.ev-lists{max-width:58rem;margin-inline:auto}
.ev-list{align-items:stretch}
.ev-list ul{list-style:none;padding:0;text-align:left;display:grid;gap:10px}
.ev-list li{position:relative;padding-left:22px}
.ev-list li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(243,226,180,.7)}

.ev-photo{width:min(100% - 14px,300px);justify-self:center}
.ev-photo img{filter:sepia(.07) saturate(1.05)}
/* the tall smoke photo is cropped to 4:5 from the top so the blown-out sky goes */
.ev-photo img{aspect-ratio:4/5;height:auto;object-fit:cover;object-position:50% 100%}
.ev-copy{min-width:0}
.ev-copy>*+*{margin-top:1em}
.ev-copy h2{font-size:clamp(1.85rem,2.9vw,2.5rem);text-align:center}
.ev-forwho{list-style:none;padding:4px 0 4px 18px;display:grid;gap:8px;border-left:2px solid var(--gold-soft);font:italic 500 1.25rem/1.35 var(--serif);color:var(--plum)}
@media (min-width:861px){
  .ev-ceremony .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .ev-photo{width:min(100% - 24px,400px)}
  .ev-copy h2{text-align:left}
}

.ev-details__grid{display:grid;gap:var(--stack) var(--gap);align-items:start}
.ev-poster{width:min(100%,320px);justify-self:center}
.ev-poster img{width:100%;border-radius:var(--r-card);box-shadow:0 0 0 1px rgba(201,162,76,.5),var(--shadow-card)}
.ev-poster figcaption{margin-top:14px;text-align:center;font-size:.9375rem;color:var(--plum-ink)}
.ev-poster figcaption a{display:inline-block;padding-block:11px;margin-block:-11px;font-weight:600}
.ev-details__body{min-width:0}
.ev-details__body h2{text-align:center}
.ev-dl{display:grid;gap:14px;margin-top:var(--group)}
.ev-dl>div{padding:14px 18px;border-radius:18px;background:var(--panel-bg);box-shadow:inset 0 0 0 1px var(--panel-line)}
.ev-dl dt{font:500 .875rem/1.4 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--plum-ink)}
.ev-dl dd{margin-top:2px;font:600 1.3rem/1.25 var(--serif);color:var(--plum)}
.ev-dl dd a{text-decoration:none;display:inline-block;padding-block:11px;margin-block:-11px}
.ev-dl small{display:block;margin-top:4px;font:400 .9375rem/1.45 var(--body);color:var(--plum-ink)}
.ev-steps{list-style:none;padding:0;display:grid;gap:14px}
.ev-steps li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start}
.ev-steps b{display:block;color:var(--plum)}
.ev-seatline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding-top:12px;border-top:1px solid var(--gold-soft);font-weight:600;color:var(--plum)}
@media (min-width:861px){
  .ev-details__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .ev-poster{width:min(100%,400px)}
  .ev-details__body h2{text-align:left}
}

/* design QA sweep 2026-11-09: phone head drawing was cut off by the screen edge */
@media (max-width:720px){.j-head__art{right:calc(var(--gutter) * -1 + 10px)}}
@media (max-width:374px){.j-head__art--lotus{width:58px}}