/* Event pages (events/<id>/): one timeline row, unfolded. scripts/pages/events.py.
   The year stands in the left gutter in the timeline's year face; the event's state rail (--c) runs down the record,
   the note and the sources. The record (h1) keeps the display serif at reading size; the note is set in the serif too,
   the labels and source lists in the body face. Tokens only; both themes come from base.css. */

.evp{padding-block:clamp(20px,1rem + 2vw,48px) 0}
.evp-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:8px}
.evp .crumbs{margin:0}
.evp-when{margin:6px 0 0;font-family:var(--display);line-height:1}
.evp-when time{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.evp-y{font-size:clamp(3rem,2.2rem + 3.4vw,5.25rem);font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.evp-d{font-size:var(--t-lg);color:var(--dim)}
.evp-col{min-width:0;border-left:3px solid var(--c,var(--national));padding:6px 0 8px clamp(16px,1rem + 1vw,32px);margin-top:12px}
.evp-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;min-height:24px;font-size:var(--t-xs);color:var(--dim)}
.evp-title{font:400 clamp(1.5rem,1.15rem + 1.5vw,2.25rem)/1.22 var(--display);letter-spacing:-.008em;max-width:34ch;margin:12px 0 0;text-wrap:pretty}

/* the note: a block of chart paper on the rail, the serif voice of the historians */
.evp-note{margin:clamp(24px,1rem + 1.6vw,40px) 0 0;max-width:64ch}
.evp-h{font:600 var(--t-h3)/1.2 var(--display);margin:0 0 .4em}
.evp-h + .evp-ctx{margin-top:0}
.evp-ctx{font:400 var(--t-lg)/1.6 var(--display);color:var(--ink);margin:0 0 1.2em}
.evp-why{font-size:var(--t-read);line-height:1.62;margin:0}
.evp-note .evp-h:not(:first-child){margin-top:1.4em;font-size:var(--t-lg)}

/* [media round 2] photographs: the event's own photo stands under the record as it is (no tint), its caption and
   credit beneath; further photos and related images are smaller plates after the note. The shared plate, stand-in and
   Photos switch styles are in base.css. */
.evp-fig{margin:clamp(20px,1rem + 1vw,32px) 0 0;max-width:44rem}
.evp-fig.sm{margin:0;max-width:none}
.evp-figs{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:720px){
  .evp-figs{grid-template-columns:repeat(2,minmax(0,22rem));gap:32px}
  /* a single plate: the caption stands beside it, level with its foot */
  .evp-figs:has(> .ph:only-child){grid-template-columns:minmax(0,1fr)}
  .evp-figs > .ph:only-child{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,26rem);column-gap:28px;align-items:end}
  .evp-figs > .ph:only-child figcaption{margin:0}
}
.evp-more,.evp-relimg{margin:clamp(28px,1rem + 1.6vw,40px) 0 0;padding-top:20px;border-top:1px solid var(--line);max-width:64rem}
.evp-ri-note{margin:-2px 0 14px;font-size:var(--t-sm);color:var(--dim)}
.evp-more .evp-h2{margin-bottom:14px}

/* [UX: Who's who] people the record names: a small portrait (or initials), the name to the People entry, the role */
.ww{margin:clamp(28px,1rem + 1.6vw,40px) 0 0;padding-top:20px;border-top:1px solid var(--line);max-width:64rem}
.ww-l{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px 32px}
@media (min-width:720px){.ww-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ww-i{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start}
.ww-pt .pt{width:48px}
.ww-pt .pt-mono{padding:4px}
.ww-pt .pt-ini{font-size:1.0625rem}
.ww-pt .pt-stars{width:100%}
.ww-t{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:2px}
.ww-t a{font:400 var(--t-lg)/1.2 var(--display);color:var(--ink);text-decoration-color:var(--line-strong);text-underline-offset:.18em;align-self:flex-start;padding-block:2px}
.ww-t a:hover{color:var(--blue);text-decoration-color:currentColor}
.ww-r{font-size:var(--t-sm);line-height:1.45;color:var(--dim)}

.evp-acts{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(24px,1rem + 1.4vw,36px) 0 0}
.evp-acts .btn{font-size:var(--t-sm);min-height:44px;padding:8px 18px}
.evp-acts svg{width:18px;height:18px;flex:none}

.evp-srcs{display:grid;grid-template-columns:minmax(0,1fr);gap:20px 40px;margin:clamp(28px,1rem + 2vw,48px) 0 0;padding-top:20px;border-top:1px solid var(--line);max-width:64rem}
@media (min-width:720px){.evp-srcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.evp-h2{font:700 var(--t-sm)/1.3 var(--body);color:var(--ink);margin:0 0 6px}
.evp-srcs ul,.evp-rel ul{list-style:none;margin:0;padding:0}
.evp-srcs li{font-size:var(--t-sm);line-height:1.45;padding-block:4px}
.evp-srcs li + li{border-top:1px solid var(--line)}
.evp-srcs a{display:inline-block;padding-block:4px;color:var(--ink);text-decoration-color:var(--line-strong)}
.evp-srcs a:hover{text-decoration-color:currentColor}

.evp-rel{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.evp-rel ul{display:flex;flex-wrap:wrap;gap:10px}
.evp-rel a{display:inline-flex;flex-direction:column;gap:2px;min-height:44px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r-s);color:var(--ink);text-decoration:none;font-size:var(--t-sm);max-width:44ch}
.evp-rel a:hover{border-color:var(--blue)}
.evp-rk{font-size:var(--t-xs);font-weight:700;color:var(--dim)}

/* earlier / later: two halves of a ruled strip; the text is complete in the DOM and clamped to two lines on screen */
.evp-pn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:clamp(32px,1rem + 3vw,64px);padding-block:20px;border-top:1px solid var(--line)}
.evp-nb{display:flex;flex-direction:column;gap:4px;min-height:44px;padding:10px 0;color:var(--ink);text-decoration:none;min-width:0}
.evp-nb.next{text-align:right;align-items:flex-end}
.evp-nb-k{font-size:var(--t-xs);font-weight:700;color:var(--dim)}
.evp-nb-w{font-size:var(--t-lg);font-weight:600;color:var(--blue)}
.evp-nb-t{font-size:var(--t-sm);line-height:1.45;color:var(--dim);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;max-width:46ch}
.evp-nb:hover .evp-nb-t{color:var(--ink)}
.evp-nb:hover .evp-nb-w{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
@media (max-width:560px){.evp-pn{grid-template-columns:1fr}.evp-nb.next{text-align:left;align-items:flex-start;border-top:1px solid var(--line)}}

/* wide screens: the year in the gutter, as under the timeline's year headings */
@media (min-width:900px){
  .evp-grid{grid-template-columns:9.5rem minmax(0,1fr);column-gap:28px}
  .evp .crumbs{grid-column:2}
  .evp-when{grid-column:1;grid-row:2;margin:16px 0 0;position:sticky;top:calc(var(--head-h) + 24px);align-self:start}
  .evp-when time{flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
  .evp-y{font-size:clamp(3rem,1.6rem + 2.4vw,4.5rem)}
  .evp-col{grid-column:2;grid-row:2;margin-top:0}
  .evp-pn{margin-left:calc(9.5rem + 28px)}
}
@media (pointer:coarse){.evp-srcs a{display:inline-flex;align-items:center;min-height:44px;padding-block:0}.evp .crumbs a{min-height:44px;display:inline-flex;align-items:center}}
@media print{.evp-acts,.evp-pn{display:none}.evp-col{border-left-width:2px}}