/*
Theme Name: GSS Journal
Theme URI: https://greekscythiansociety.org
Author: Greek-Scythian Society CIC
Description: A field-journal theme for the Greek-Scythian Society CIC — parchment ground, EB Garamond and IBM Plex Mono, numbered sections, captioned plates and a ledger of events. Built for archaeology and living-history publishing.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: gss-journal
*/

/* ══ tokens ══ */
:root{
  --paper:#f6f1e6;
  --paper-2:#efe8d9;
  --paper-3:#e7dfcc;
  --ink:#1c1913;
  --ink-2:#4a443a;
  --ink-3:#7d7565;
  --bronze:#8a5a28;
  --gold:#b08423;
  --hair:#cfc4ac;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1360px;
  --gutter:clamp(18px,4vw,54px);
}

/* ══ reset / base ══ */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:19px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* faint laid-paper texture */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
#page{position:relative;z-index:2}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.label{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.hair{height:1px;background:var(--hair);border:0}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;z-index:999;background:var(--ink);color:var(--paper);padding:10px 16px;font-family:var(--mono);font-size:12px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ══ buttons ══ */
.btn{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:13px 26px;transition:background .3s,color .3s,border-color .3s;cursor:pointer;border:1px solid transparent}
.btn-solid{background:var(--bronze);color:var(--paper)}
.btn-solid:hover{background:var(--gold);color:var(--paper)}
.btn-line{border-color:var(--ink);color:var(--ink);background:none}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:#c9992f}

/* ══ masthead ══ */
.masthead{border-bottom:1px solid var(--ink);background:var(--paper);position:relative;z-index:20}
.mast-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--hair)}
.mast-mid{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0}
.mast-brand{display:flex;align-items:center;gap:16px;min-width:0}
.mast-brand img{width:52px;height:52px;object-fit:contain;mix-blend-mode:multiply;flex:none}
.mast-brand .name{font-weight:500;font-size:clamp(1.3rem,2.4vw,1.95rem);letter-spacing:.01em;line-height:1.05;display:block}
.mast-brand .sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}
.mast-nav-row{display:flex;align-items:center;gap:20px;border-top:1px solid var(--hair)}
.mast-menu{display:flex;gap:clamp(14px,2.2vw,32px);padding:6px 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;flex-wrap:wrap}
.mast-menu li{position:relative}
/* The type stays small — the hit area does not. At 11px these links were 18px
   tall, under the 24px minimum, which is a real nuisance on a touchscreen.
   Padding above the text keeps the hover underline exactly where it was. */
.mast-menu a{display:inline-block;color:var(--ink-2);padding:7px 0 4px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s;white-space:nowrap}
.mast-menu a:hover,.mast-menu .current-menu-item>a,.mast-menu .current_page_item>a{color:var(--bronze);border-color:var(--bronze)}
.mast-menu .sub-menu{
  position:absolute;top:100%;left:-14px;min-width:270px;background:var(--paper);
  border:1px solid var(--hair);padding:8px 0;display:block;opacity:0;visibility:hidden;
  transform:translateY(6px);transition:.25s ease;z-index:40;box-shadow:0 14px 34px rgba(28,25,19,.1);
}
.mast-menu li:hover>.sub-menu,.mast-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.mast-menu .sub-menu a{display:block;padding:9px 16px;border:0;white-space:normal;line-height:1.5;text-transform:none;font-size:11px;letter-spacing:.08em}
.mast-menu .sub-menu a:hover{background:var(--paper-2);color:var(--bronze)}
.mast-menu .menu-item-has-children>a::after{content:"▾";margin-left:6px;font-size:9px;opacity:.6}
.lang-slot{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-3);padding:12px 0;white-space:nowrap}

/* mobile nav */
.nav-toggle{display:none;background:none;border:1px solid var(--hair);padding:9px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
@media(max-width:900px){
  .mast-top span:nth-child(2){display:none}
  .nav-toggle{display:block}
  .mast-nav-row{flex-direction:column;align-items:stretch;gap:0}
  .mast-menu{display:none;flex-direction:column;gap:0;padding:6px 0 12px}
  .mast-menu.open{display:flex}
  .mast-menu a{display:block;padding:11px 0;border-bottom:1px solid var(--hair)}
  .mast-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;padding:0 0 0 18px;min-width:0;background:none}
  .lang-slot{margin:0;padding:10px 0 14px;border-top:1px solid var(--hair)}
}
@media(max-width:560px){
  .mast-mid{padding:16px 0}
  .mast-brand img{width:42px;height:42px}
  .mast-brand .name{font-size:1.15rem}
  /* At phone widths the brand, its sub-line and the CTA all wrapped, so the
     masthead grew to three ragged rows — the one thing the client asked us to
     stop doing. Tighter tracking and a compact CTA keep it to two clean lines. */
  .mast-brand{gap:12px}
  .mast-brand .sub{font-size:8.5px;letter-spacing:.13em;margin-top:4px}
  /* The CTA stays — the client asked for Support Us in the header — but it must
     not itself wrap, so it is compact and non-shrinking. */
  .mast-cta{flex:none}
  .mast-cta .btn{padding:11px 13px;font-size:9.5px;letter-spacing:.1em;white-space:nowrap}
}

/* ══ section rule ══ */
.sec-rule{display:flex;align-items:center;gap:20px;padding:0 0 clamp(26px,4vw,42px)}
.sec-rule .hair{flex:1}
.sec-rule .label{white-space:nowrap}
/* Trailing links such as "All events →" need a touchable height too. */
.sec-rule a.label{display:inline-block;padding:6px 0;transition:color .25s}
.sec-rule a.label:hover{color:var(--ink)}
/* Narrow screens can't fit label + rule + trailing link on one line. */
@media(max-width:680px){
  .sec-rule{flex-wrap:wrap;gap:10px 16px}
  .sec-rule .label{white-space:normal}
  .sec-rule .hair{flex:1 1 50px;min-width:40px}
}

/* ══ front: lede ══ */
.lede{padding:clamp(40px,5.5vw,72px) 0 clamp(34px,4.5vw,58px)}
.lede-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(30px,4vw,56px);align-items:center}
.lede h1{font-weight:400;font-size:clamp(2.4rem,6.2vw,5.4rem);line-height:1.02;letter-spacing:-.018em;margin:20px 0 0}
.lede h1 em{font-style:italic;color:var(--bronze)}
.lede .standfirst{font-size:clamp(1.02rem,1.6vw,1.3rem);color:var(--ink-2);max-width:46ch;margin-top:24px;padding-top:22px;border-top:1px solid var(--hair)}
.lede-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
@media(max-width:880px){.lede-grid{grid-template-columns:1fr;gap:32px}.lede-plate{order:-1}}

/* crossfading plate (the client's slideshow, in journal dress) */
.plate{position:relative}
/* Images fill the frame; what survives the crop is chosen per photograph in
   gss_focus() rather than defaulting to centre. */
.plate-stage{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--ink)}
.plate-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.3s ease-in-out}
.plate-slide.is-on{opacity:1}
.plate-img{width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.04)}
.plate-caption{display:flex;gap:12px;margin-top:11px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);line-height:1.55;min-height:2.6em}
.plate-caption b{color:var(--bronze);font-weight:500;flex:none}
.plate-caption span{transition:opacity .4s}
/* Seven-pixel dots read well and are impossible to hit. The button is 24px
   square for the finger; the dot itself is drawn inside it, unchanged. The
   negative margin keeps the first dot aligned with the text above it. */
.plate-dots{display:flex;gap:0;margin:6px 0 0 -8px}
.plate-dot{
  width:24px;height:24px;border:0;padding:0;background:none;cursor:pointer;
  display:grid;place-items:center;
}
.plate-dot::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--hair);
  transition:background .25s,transform .25s;
}
.plate-dot.is-on::before{background:var(--bronze);transform:scale(1.3)}

/* ══ front: essay ══ */
.essay{padding:clamp(42px,6.5vw,84px) 0;border-top:1px solid var(--ink)}
.essay-grid{display:grid;grid-template-columns:.42fr 1fr;gap:clamp(26px,5vw,72px)}
.essay h2{font-weight:400;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.12;letter-spacing:-.012em}
.essay h2 em{font-style:italic;color:var(--bronze)}
.marg{margin-top:26px;padding-left:16px;border-left:2px solid var(--gold);font-family:var(--mono);font-size:11.5px;line-height:1.75;color:var(--ink-3)}
.essay-body{color:var(--ink-2)}
.essay-body.cols{columns:2;column-gap:clamp(26px,3.4vw,52px)}
.essay-body p{margin-bottom:1.1em;break-inside:avoid}
.essay-body.cols>p:first-of-type::first-letter{font-size:3.5em;float:left;line-height:.82;padding:.05em .09em 0 0;color:var(--bronze);font-weight:500}
@media(max-width:880px){.essay-grid{grid-template-columns:1fr;gap:24px}.essay-body.cols{columns:1}}

/* ══ plates row ══ */
.plates{padding:clamp(42px,6.5vw,84px) 0;border-top:1px solid var(--ink)}
/* auto-fit rather than a fixed three, so the owner can curate three plates or
   six without the row breaking. */
.plates-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(18px,2.6vw,38px)}
/* Background belongs behind the image only — on the figure it also sat behind
   the caption, leaving dark text on a near-black ground. */
.plates figure{margin:0}
.plates figure img{background:var(--ink)}
/* Artefacts fill their plate — gold should read as gold, not sit shrunken
   on a mat behind a sepia wash. */
.plates figure img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  filter:saturate(1.06) contrast(1.05);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.plates figure:hover img{transform:scale(1.04)}
.plates figcaption{margin-top:11px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);line-height:1.6}
.plates figcaption b{display:block;color:var(--bronze);font-weight:500;margin-bottom:3px}
@media(max-width:760px){.plates-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.plates-grid{grid-template-columns:1fr}}

/* ══ ledger (events list) ══ */
.ledger{padding:clamp(42px,6.5vw,84px) 0;border-top:1px solid var(--ink)}
.entry-row{
  display:grid;grid-template-columns:132px 1fr 1.05fr 118px;gap:clamp(14px,2.6vw,40px);
  align-items:center;padding:22px 0;border-bottom:1px solid var(--hair);
  transition:background .35s,padding-left .35s;
}
.entry-row:hover{background:var(--paper-2);padding-left:12px}
.entry-row .d{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}
.entry-row h3{font-weight:500;font-size:clamp(1.12rem,1.9vw,1.5rem);line-height:1.2}
.entry-row p{font-size:16px;color:var(--ink-3);line-height:1.55}
.entry-row .go{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);text-align:right;transition:color .3s}
.entry-row:hover .go{color:var(--bronze)}
@media(max-width:880px){.entry-row{grid-template-columns:1fr;gap:7px;padding:20px 0}.entry-row .go{text-align:left}}

/* ══ dark band ══ */
/* The preceding section already supplies bottom padding — a margin here
   doubled the gap. */
.band{background:var(--ink);color:var(--paper)}
.band-grid{display:grid;grid-template-columns:1fr 1fr;min-height:440px}
.band-txt{padding:clamp(34px,5vw,74px);display:flex;flex-direction:column;justify-content:center}
.band .label{color:var(--gold)}
.band h2{font-weight:400;font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.08;margin:16px 0 12px}
.band .tag{font-style:italic;color:var(--gold);font-size:clamp(1.02rem,1.7vw,1.28rem);margin-bottom:1em}
.band p{color:#c7bfae;max-width:46ch;margin-bottom:1.6em}
.band-img{position:relative;overflow:hidden;min-height:280px;background:#241f18}
.band-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
@media(max-width:880px){.band-grid{grid-template-columns:1fr}}

/* ══ page / article ══ */
.page-head{padding:clamp(40px,6vw,76px) 0 clamp(22px,3.4vw,38px)}
.page-head h1{font-weight:400;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.06;letter-spacing:-.016em;max-width:22ch}
.page-head h1 em{font-style:italic;color:var(--bronze)}
.page-head .dek{margin-top:16px;color:var(--ink-2);max-width:56ch;font-size:1.05rem}
.page-head .meta{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.page-body{padding-bottom:clamp(50px,8vw,110px);border-top:1px solid var(--ink);padding-top:clamp(28px,4vw,48px)}
.measure{max-width:74ch}

/* Measure the paragraphs, not the container.
   A single max-width on .entry-content also caged the wide blocks inside it,
   so a two-column portrait or a gallery was squeezed into text width. Here the
   reading measure is applied per child and the wide blocks opt out — the
   About Us and partner-profile pages need both in the same flow. */
.entry-content.measured>*{max-width:74ch}
.entry-content.measured>.alignwide,
.entry-content.measured>.alignfull,
.entry-content.measured>.wp-block-columns,
.entry-content.measured>.wp-block-gallery,
.entry-content.measured>.wp-block-separator,
.entry-content.measured>hr{max-width:none}
/* Featured image keeps its own proportions — forcing it into a wide banner
   cropped portrait photographs down to a third of the picture. */
.featured-plate{margin-bottom:clamp(26px,4vw,44px);text-align:center}
.featured-plate img{
  width:auto;max-width:100%;max-height:64vh;margin-inline:auto;
  filter:saturate(1.03) contrast(1.03);
}

/* ══ block content (journal dress) ══ */
.entry-content>*{margin-bottom:1.15em}
.entry-content>*:last-child{margin-bottom:0}
/* The body already sits below a rule and its own padding; a leading heading's
   1.5em top margin on top of that opened an unintended gap. */
.entry-content>*:first-child{margin-top:0}
.entry-content h2{font-weight:500;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.16;margin:1.5em 0 .5em;letter-spacing:-.01em}
.entry-content h3{font-weight:500;font-size:clamp(1.25rem,2.1vw,1.65rem);line-height:1.22;margin:1.4em 0 .45em}
.entry-content h4{font-weight:500;font-size:1.2rem;margin:1.3em 0 .4em}
.entry-content p{color:var(--ink-2)}
.entry-content a:not(.btn):not(.wp-block-button__link){color:var(--bronze);border-bottom:1px solid var(--hair);transition:border-color .25s}
.entry-content a:not(.btn):not(.wp-block-button__link):hover{border-color:var(--bronze)}
.entry-content ul,.entry-content ol{padding-left:1.3em;color:var(--ink-2)}
.entry-content li{margin-bottom:.4em}
.entry-content ul{list-style:none;padding-left:0}
.entry-content ul li{padding-left:1.3em;position:relative}
.entry-content ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--gold)}
.entry-content blockquote{border-left:2px solid var(--gold);padding-left:22px;font-style:italic;font-size:1.15em;color:var(--ink)}
.entry-content blockquote p{color:inherit}
.entry-content figure{margin:0}
.entry-content figcaption,.wp-element-caption{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:9px;line-height:1.6;text-align:left}
.entry-content img{filter:saturate(1.02)}
.entry-content hr,.wp-block-separator{border:0;height:1px;background:var(--hair);margin:2.2em 0}
.entry-content table{width:100%;border-collapse:collapse;font-size:17px}
.entry-content th,.entry-content td{border-bottom:1px solid var(--hair);padding:10px 12px;text-align:left}
.entry-content th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);font-weight:500}
.entry-content code,.entry-content kbd{font-family:var(--mono);font-size:.88em;background:var(--paper-2);padding:2px 6px}
.entry-content pre{font-family:var(--mono);font-size:14px;background:var(--paper-2);padding:18px;overflow:auto}

/* Partner profile: portrait column beside the biography. */
.profile{display:grid;grid-template-columns:minmax(170px,.28fr) 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.profile .pplate{
  aspect-ratio:1;border:1px solid var(--hair);background:var(--paper-3);overflow:hidden;
}
.profile .pplate img{width:100%;height:100%;object-fit:contain;filter:saturate(1.02) contrast(1.03)}
@media(max-width:780px){
  .profile{grid-template-columns:1fr;gap:26px}
  .profile .pplate{max-width:240px}
}

/* ══ people ══
   Portrait plus biography, built from a core Columns block so the owner edits
   it like any other content. Portraits are square plates rather than circles:
   this theme's vocabulary is hairline-framed plates throughout, and squaring a
   1:1 photograph keeps every one of them whole. */
.gss-person{gap:clamp(22px,3.2vw,46px)!important;align-items:flex-start!important}
/* Keep the biography to a readable measure — the escape rule below lets the
   block out of the text column, and unchecked it would run to 95 characters. */
.entry-content.measured>.gss-person{max-width:1020px}
.gss-person .wp-block-column{align-self:flex-start}
.gss-person .wp-block-image{margin:0}
.gss-person .wp-block-image img{
  width:100%;aspect-ratio:1;object-fit:contain;
  border:1px solid var(--hair);background:var(--paper-3);
  filter:saturate(1.02) contrast(1.03);
}
/* .entry-content>* only margins direct children, and everything here is nested
   one column deeper, so the block flow needs its own rhythm. */
.gss-person .wp-block-column>*{margin-bottom:1.05em}
.gss-person .wp-block-column>*:last-child{margin-bottom:0}
.gss-person .wp-block-column>*:first-child{margin-top:0}
.gss-person h2,.gss-person h3{margin-top:0}
/* Role sits tight under the name, as a standfirst rather than a paragraph. */
.gss-role{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);margin-top:-.3em;
}
/* Contact and identifier rows — mono, so an ORCID reads as a reference. */
.gss-contact{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;line-height:1.95;color:var(--ink-3);
  border-top:1px solid var(--hair);padding-top:14px;
}
.gss-contact strong{color:var(--ink-2);font-weight:500}
.entry-content .gss-contact a{border-bottom-color:var(--hair)}
@media(max-width:781px){
  /* Core stacks columns here; cap the portrait so it stops short of a
     full-width blow-up of a 200px source. */
  .gss-person .wp-block-image img{max-width:260px}
}

/* ══ legal drafts ══
   Deliberately loud. These pages carry unapproved text and unfilled gaps, and
   the one genuinely bad outcome is somebody launching without noticing. */
.entry-content .legal-draft{
  background:var(--paper-2);border:1px solid var(--gold);border-left:3px solid var(--gold);
  padding:18px 22px;font-size:16.5px;line-height:1.65;color:var(--ink-2);
  max-width:none;margin-bottom:2em;
}
.entry-content .legal-draft strong{color:var(--bronze)}
.legal-todo{
  background:#f6e3c2;color:#6b4410;padding:2px 7px;
  font-family:var(--mono);font-size:.82em;letter-spacing:.02em;
  border-bottom:1px solid #d8b471;
}
@media print{
  .legal-todo{background:none;border-bottom:1px solid #000}
}

/* wide/full alignment */
.alignwide{width:min(1180px,100%);margin-left:auto;margin-right:auto}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.alignleft{float:left;margin:.3em 1.6em .8em 0;max-width:48%}
.alignright{float:right;margin:.3em 0 .8em 1.6em;max-width:48%}
.aligncenter{margin-left:auto;margin-right:auto}

/* Gallery: WordPress's "cropped" mode forces every thumbnail to a common
   height, which shears landscape and portrait photographs alike. The
   Society's galleries mix both, so images keep their own proportions and
   the row simply ragged-aligns — a contact sheet, not a cropped grid. */
/* Uncropped images in core's flex rows leave ragged gaps, so the gallery is
   laid out in columns instead: a masonry contact sheet that packs mixed
   portrait and landscape photographs without trimming any of them. */
.wp-block-gallery.has-nested-images{
  display:block;
  columns:3;
  column-gap:clamp(10px,1.4vw,18px);
}
.wp-block-gallery.has-nested-images figure.wp-block-image{
  width:100%!important;
  margin:0 0 clamp(10px,1.4vw,18px);
  break-inside:avoid;
  display:block;
  overflow:hidden;
}
@media(max-width:900px){.wp-block-gallery.has-nested-images{columns:2}}
@media(max-width:560px){.wp-block-gallery.has-nested-images{columns:1}}
/* Core's crop rule is `…:not(#individual-image) img`, whose :not(#id) gives it
   ID-level specificity — this selector must match it to win. */
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img,
.wp-block-gallery.has-nested-images figure.wp-block-image img{
  width:100%;height:auto;object-fit:contain;
  filter:saturate(1.02) contrast(1.02);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.wp-block-gallery.has-nested-images figure.wp-block-image:hover img{filter:none;transform:scale(1.03)}

/* buttons in content */
.wp-block-button__link{
  background:var(--bronze);color:var(--paper);border-radius:0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:14px 28px;
}
.wp-block-button__link:hover{background:var(--gold)}
.is-style-outline .wp-block-button__link{background:none;color:var(--ink);border:1px solid var(--ink)}
.is-style-outline .wp-block-button__link:hover{background:var(--ink);color:var(--paper)}

/* file / video / embed */
.wp-block-file{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--paper-2);padding:16px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.wp-block-file__button{background:var(--bronze);color:var(--paper);border-radius:0;padding:9px 18px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.wp-block-video video,.wp-block-embed iframe{width:100%}

/* forms (Contact Form 7) */
.wpcf7 label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);margin-bottom:20px}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 textarea,.wpcf7 select{
  display:block;width:100%;margin-top:8px;background:var(--paper);border:1px solid var(--hair);
  padding:13px 14px;font-family:var(--serif);font-size:17px;color:var(--ink);transition:border-color .25s;
}
.wpcf7 input:focus,.wpcf7 textarea:focus{border-color:var(--bronze);outline:none}
.wpcf7 textarea{min-height:170px;resize:vertical}
.wpcf7 input[type=submit]{
  background:var(--bronze);color:var(--paper);border:0;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:15px 34px;transition:background .3s;
}
.wpcf7 input[type=submit]:hover{background:var(--gold)}
.wpcf7-response-output{border:1px solid var(--hair)!important;font-family:var(--mono);font-size:12px;padding:14px 16px!important;margin:18px 0 0!important}
.wpcf7 .gss-form-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:26px}
/* Spam-check sum. The question keeps the mono label treatment of the other
   fields, but the answer box is sized for a single digit rather than running
   the full width of the form. */
/* Honeypot: moved off-screen rather than display:none, because a bot worth
   worrying about checks for display:none and leaves the field alone. If the
   stylesheet ever fails to load, the field and its label simply appear, and a
   person can read "Leave this field blank" and do so. */
.wpcf7 .gss-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.wpcf7 .gss-quiz{margin:30px 0 4px}
.wpcf7 .gss-quiz-note{font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink-3);margin-bottom:16px;max-width:52ch;text-transform:none;letter-spacing:0}
.wpcf7 .gss-quiz p{margin:0}
.wpcf7 .gss-quiz label{margin-bottom:0}
.wpcf7 .gss-quiz input[type=text]{max-width:130px}
/* The consent sentence is prose with a link in it, so it has to escape the
   mono uppercase treatment the field labels use. */
.wpcf7 .gss-consent{margin:26px 0 24px}
.wpcf7 .gss-consent .wpcf7-list-item{margin:0}
.wpcf7 .gss-consent label{
  display:flex;gap:12px;align-items:flex-start;margin-bottom:0;cursor:pointer;
  font-family:var(--serif);font-size:16.5px;line-height:1.6;letter-spacing:0;
  text-transform:none;color:var(--ink-2);max-width:62ch;
}
.wpcf7 .gss-consent input[type=checkbox]{
  flex:none;width:18px;height:18px;margin-top:.2em;accent-color:var(--bronze);cursor:pointer;
}
.wpcf7 .gss-consent a{color:var(--bronze);border-bottom:1px solid var(--hair);transition:border-color .25s}
.wpcf7 .gss-consent a:hover{border-color:var(--bronze)}
.wpcf7 .wpcf7-not-valid-tip{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:none;color:#a3341f;margin-top:6px}

/* ══ archives ══ */
.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.8vw,40px)}
.arch-card{display:block;overflow:hidden}
/* 4:3 matches the majority of the Society's featured photographs; a
   portrait card frame was discarding half of every landscape image. */
.arch-card .frame{overflow:hidden;aspect-ratio:4/3;background:var(--paper-3)}
.arch-card .frame img{width:100%;height:100%;object-fit:cover;filter:saturate(1.03) contrast(1.03);transition:transform 1s cubic-bezier(.16,1,.3,1),filter .6s}
.arch-card:hover .frame img{transform:scale(1.05);filter:none}
.arch-card .d{display:block;margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.arch-card h2{font-weight:500;font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.24;margin-top:7px}
.arch-card p{font-size:16px;color:var(--ink-3);margin-top:7px;line-height:1.55}
@media(max-width:880px){.arch-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.arch-grid{grid-template-columns:1fr}}

/* Partners & collaborators.
   Was a four-up logo grid, which suited placeholder logos but not the real
   entries: a partner organisation represented by its chairman's photograph and
   an individual academic consultant. These are rows in the ledger idiom, and
   they carry the four things the client asked a partner card to show — image,
   name, description and a link through. */
.partner-list{border-top:1px solid var(--hair)}
/* Same four-column rhythm as the events ledger, so the two indexes read as one
   family: plate, name, description, way through. */
.partner-row{
  display:grid;grid-template-columns:164px 1fr 1.05fr 118px;gap:clamp(20px,3vw,44px);
  align-items:start;padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--hair);
  transition:background .35s,padding-left .35s;
}
.partner-row:hover{background:var(--paper-2);padding-left:12px}
/* contain, not cover: identical for the square portraits supplied, and it
   letterboxes a wide logo instead of cropping it when one is added later. */
.partner-row .pf{
  width:164px;aspect-ratio:1;border:1px solid var(--hair);background:var(--paper-3);overflow:hidden;
}
.partner-row .pf img{
  width:100%;height:100%;object-fit:contain;
  filter:saturate(1.02) contrast(1.03);transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.partner-row:hover .pf img{transform:scale(1.03)}
.partner-row .role{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.partner-row h2{font-weight:500;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.24;margin-top:8px}
.partner-row .desc{font-size:16.5px;color:var(--ink-3);line-height:1.6}
.partner-row .go{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);text-align:right;transition:color .3s;
}
.partner-row:hover .go{color:var(--bronze)}
/* Below the widest layout the description folds under the name rather than
   holding its own column, which would otherwise squeeze both to nothing. */
@media(max-width:1100px){
  .partner-row{grid-template-columns:164px 1fr 118px}
  .partner-row .desc{grid-column:2;margin-top:9px}
}
@media(max-width:880px){
  .partner-row{grid-template-columns:112px 1fr;gap:20px}
  .partner-row .pf{width:112px}
  .partner-row .go{grid-column:2;text-align:left;margin-top:4px}
}
@media(max-width:480px){
  .partner-row{grid-template-columns:1fr}
  .partner-row .desc,.partner-row .go{grid-column:1}
}

/* ══ venue panel (Events index) ══
   Park in the Past is a partner site, not the Society's own — the panel says so
   plainly, which is exactly why the client wanted it off the home page. */
.venue{
  display:grid;grid-template-columns:minmax(190px,.4fr) 1fr;gap:clamp(18px,3.2vw,48px);
  background:var(--paper-2);border:1px solid var(--hair);border-left:2px solid var(--gold);
  padding:clamp(22px,3vw,34px);margin-bottom:clamp(30px,4.6vw,56px);
}
.venue .addr{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;line-height:1.9;color:var(--ink-2);margin-top:10px}
.venue p{color:var(--ink-2);font-size:17px}
@media(max-width:680px){.venue{grid-template-columns:1fr;gap:16px}}

/* pagination */
.pagination{display:flex;gap:9px;flex-wrap:wrap;margin-top:44px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.pagination .page-numbers{padding:10px 15px;border:1px solid var(--hair);color:var(--ink-2);transition:.25s}
.pagination .page-numbers:hover,.pagination .current{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* post nav */
.post-nav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(36px,5vw,64px);padding-top:18px;border-top:1px solid var(--hair);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.post-nav a{display:inline-block;padding:6px 0;color:var(--ink-2);transition:color .25s}
.post-nav a:hover{color:var(--bronze)}

/* ══ colophon ══ */
.colophon{padding:clamp(46px,7vw,84px) 0 38px;border-top:1px solid var(--ink);margin-top:clamp(44px,6.5vw,84px)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(26px,4vw,60px)}
.f-grid h2{font-weight:500;font-size:1.32rem;margin-bottom:12px}
.f-grid p{font-size:16px;color:var(--ink-3);max-width:38ch}
.f-grid .reg{font-family:var(--mono);font-size:11px;letter-spacing:.08em;margin-top:12px;line-height:1.7}
.f-col h3{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze);margin-bottom:14px;font-weight:400}
.f-col a{display:block;font-size:16.5px;color:var(--ink-2);padding:4px 0;transition:color .25s}
.f-col a:hover{color:var(--bronze)}
.f-bot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:42px;padding-top:14px;border-top:1px solid var(--hair);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.f-bot ul{display:flex;gap:18px;flex-wrap:wrap}
/* Legal links were 14px tall — the smallest targets on the site. */
.f-bot a{display:inline-block;padding:6px 0}
.f-bot a:hover{color:var(--bronze)}
@media(max-width:820px){.f-grid{grid-template-columns:1fr;gap:32px}}

/* ══ reveals ══
   Scoped to .js so content is never hidden unless JavaScript is actually
   running to reveal it again — without this, a script error, an old browser
   or a print/screenshot pass leaves whole sections blank. */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
@media print{.js .rv{opacity:1!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1!important;transform:none!important;transition:none!important}
  .plate-slide{transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}