/*
Theme Name: Multisensory XR
Theme URI: https://multisensory-xr.kcl.ac.uk
Author: XR & Attention Research Group, King's College London
Description: A classic WordPress theme for the Multisensory XR research project. Editorial dark/light aesthetic with Archivo, Libre Caslon and IBM Plex Mono. Announcements are standard posts; Outputs are a custom post type. Accessibility and Privacy pages are provided as templates.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: multisensory-xr
*/

/* ============================================================
   THEME VARIABLES
   ============================================================ */
:root {
  --red: #E2231A; --accent: #E8483F;
  --gutter: clamp(20px, 5vw, 56px);
  --maxw: 1080px; /* content column cap on large screens */
  /* Keep full-bleed hairlines/grid, but centre content within --maxw. */
  --px: max(var(--gutter), calc((100% - var(--maxw)) / 2));
}

html[data-theme="dark"] {
  --paper:#0E0E11; --grid:rgba(255,255,255,0.028);
  --ink:#ECEAE3; --ink-strong:#F4F2EC; --muted:#8B8A84; --faint:#808088; --body:#C8C6BE;
  --hair:#26262c; --card:#141418; --stripeA:#191920; --stripeB:#1f1f27;
  --btnInk:#0E0E11; --outline:#3a3a42; --phLabel:#4a4a52; --xrbg:#ffffff; --xrpad:5px; --accent:#E8483F;
}
html[data-theme="light"] {
  --paper:#F6F4EF; --grid:rgba(20,20,20,0.05);
  --ink:#16161A; --ink-strong:#101014; --muted:#6E6B64; --faint:#6A6A6A; --body:#2f2d28;
  --hair:#E2DFD7; --card:#ffffff; --stripeA:#ECEAE3; --stripeB:#F3F1EA;
  --btnInk:#F6F4EF; --outline:#C9C5BC; --phLabel:#B7B3AA; --xrbg:transparent; --xrpad:0px; --accent:#C8102E;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  font-family: 'Archivo', sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }

.mono { font-family: 'IBM Plex Mono', monospace; }
.serif { font-family: 'Libre Caslon Text', serif; }
.section { padding: 50px var(--px); }
.hair-b { border-bottom: 1px solid var(--hair); }
.hair-t { border-top: 1px solid var(--hair); }
.eyebrow { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--red); color:#fff; padding:10px 16px; z-index:100; font-family:'IBM Plex Mono',monospace; font-size:12px; }
.skip-link:focus { left:0; }

/* ============================================================
   MASTHEAD
   ============================================================ */
.site-header {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px 24px; padding:20px var(--px);
  border-bottom:1px solid var(--hair);
}
.brand { display:flex; align-items:center; gap:14px; }
.brand img { height:47px; width:auto; display:block; }
.brand-rule { width:1px; height:42px; background:var(--hair); }
.brand-name { font-family:'Archivo',sans-serif; font-weight:800; font-size:23px; letter-spacing:0.01em; color:var(--ink-strong); }
.brand-name .x { color:var(--red); }
.header-right { display:flex; align-items:center; flex-wrap:wrap; gap:14px 26px; }
.main-nav ul { display:flex; flex-wrap:wrap; gap:16px 24px; list-style:none; margin:0; padding:0; }
.main-nav a { font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); transition:color .15s ease; }
.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav .current_page_item > a, .main-nav .current-menu-parent > a { color:var(--accent); }

.theme-toggle { display:flex; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:11px; border:1px solid var(--outline); border-radius:3px; overflow:hidden; }
.theme-btn { padding:5px 11px; cursor:pointer; color:var(--muted); background:none; border:0; font:inherit; }
.theme-btn.is-active { background:var(--ink); color:var(--paper); }

/* ============================================================
   HOME
   ============================================================ */
.geo-strip { padding:16px var(--px) 8px; display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; color:var(--faint); text-transform:uppercase; }
.rule-row { display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.rule-row .tag { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.rule-row .line { height:1px; flex:1; background:var(--hair); }
.hero { padding:44px var(--px) 60px; border-bottom:1px solid var(--hair); }
.hero-title { font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(36px,9vw,66px); line-height:0.98; letter-spacing:-0.02em; color:var(--ink-strong); max-width:960px; text-transform:uppercase; margin:0 0 30px; }
.hero-title .x { color:var(--red); }
/* Content-driven front page (title pulled from the page) */
.hero-title--page { font-size:clamp(30px,5.5vw,54px); line-height:1.04; text-transform:none; max-width:16ch; }
.hero--page { padding-bottom:52px; }
.hero-prose { max-width:none; margin-top:26px; }
/* Text keeps a readable measure; images/figures fill the column so the hero
   doesn't hug the left on wide screens. */
.hero-prose > p, .hero-prose > ul, .hero-prose > ol, .hero-prose > blockquote { max-width:760px; }
.hero-prose > p:first-of-type { font-size:clamp(18px,2.4vw,21px); color:var(--ink-strong); }
.hero-lede { font-family:'Libre Caslon Text',serif; font-size:clamp(17px,2.4vw,20px); line-height:1.6; color:var(--body); max-width:660px; }
.hero-lede em { color:var(--ink-strong); }
.cta-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; }
.btn-primary { color:var(--btnInk); background:var(--red); padding:13px 24px; }
.btn-primary:hover { color:var(--btnInk); filter:brightness(1.08); }
.btn-ghost { color:var(--ink); border:1px solid var(--outline); padding:13px 24px; }
.btn-ghost:hover { color:var(--accent); border-color:var(--accent); }

.block-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin-bottom:24px; }
.block-title { font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.view-all { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); }

/* ============================================================
   ANNOUNCEMENTS
   ============================================================ */
.page-head { padding:52px var(--px) 30px; }
.page-head h1 { font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(30px,7vw,52px); letter-spacing:-0.02em; text-transform:uppercase; color:var(--ink-strong); margin:16px 0 14px; }
.page-head p { font-family:'Libre Caslon Text',serif; font-size:18px; line-height:1.55; color:var(--body); max-width:600px; }
.filter-row { display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em; }
.chip { color:var(--ink); border:1px solid var(--outline); padding:7px 14px; }
.chip.is-active, .chip:hover { color:var(--btnInk); background:var(--red); border-color:var(--accent); }

.ann-list { border-bottom:1px solid var(--hair); }
/* compact rows (homepage) */
.ann-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 20px; padding:20px 0; border-top:1px solid var(--hair); }
.ann-row .date { flex:0 0 104px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--faint); }
.ann-row .cat { flex:0 0 auto; min-width:80px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.ann-row .cat.is-cfp { color:var(--accent); }
.ann-row .title { flex:1 1 260px; min-width:0; font-family:'Libre Caslon Text',serif; font-size:23px; line-height:1.25; color:var(--ink); }
.ann-row:hover .title { color:var(--accent); }
/* full rows (archive) */
.ann-full { display:flex; flex-wrap:wrap; gap:16px 28px; padding:26px 0; border-top:1px solid var(--hair); }
.ann-full .meta { flex:0 0 150px; }
.ann-full .date { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--faint); margin-bottom:10px; }
.ann-full .cat { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.ann-full .cat.is-cfp { color:var(--accent); }
.ann-full .body { flex:1 1 320px; min-width:0; }
.ann-full h3 { font-family:'Libre Caslon Text',serif; font-weight:700; font-size:26px; line-height:1.2; color:var(--ink); margin:0 0 8px; }
.ann-full:hover h3 { color:var(--accent); }
.ann-full p { font-family:'Libre Caslon Text',serif; font-size:15px; line-height:1.55; color:var(--muted); max-width:640px; margin:0 0 10px; }
.read-more { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em; color:var(--accent); }

.pager { display:flex; gap:8px; margin-top:34px; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:13px; }
.pager .page-numbers { color:var(--ink); border:1px solid var(--outline); min-width:34px; height:34px; padding:0 10px; display:flex; align-items:center; justify-content:center; }
.pager .page-numbers.current { color:var(--btnInk); background:var(--red); border-color:var(--accent); }
.pager .page-numbers:hover { color:var(--accent); }

/* ============================================================
   OUTPUTS
   ============================================================ */
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,240px),1fr)); gap:22px; }
.output-card { border:1px solid var(--hair); background:var(--card); overflow:hidden; display:block; }
.output-thumb { height:160px; background:repeating-linear-gradient(45deg,var(--stripeA),var(--stripeA) 10px,var(--stripeB) 10px,var(--stripeB) 20px); display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; }
.output-card.compact .output-thumb { height:140px; }
.output-thumb span { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--phLabel); }
.output-body { padding:22px; }
.output-type { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); }
.output-title { font-family:'Libre Caslon Text',serif; font-weight:700; font-size:20px; line-height:1.25; color:var(--ink); margin:10px 0 12px; }
.output-card.compact .output-title { font-size:19px; line-height:1.3; }
.output-meta { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--faint); }
.output-card:hover .output-title { color:var(--accent); }

/* ============================================================
   SINGLE POST / PROSE
   ============================================================ */
.post-head { padding:48px var(--px) 8px; }
.post-head .wrap, .post-body .wrap { max-width:720px; margin:0 auto; }
.crumbs { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--faint); }
.crumbs .here { color:var(--accent); }
.post-head h1 { font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(30px,7vw,52px); line-height:1.02; letter-spacing:-0.02em; text-transform:uppercase; color:var(--ink-strong); margin:18px 0 20px; }
.post-meta { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--faint); }
.post-hero { padding:26px var(--px) 40px; }
.post-hero .frame { max-width:960px; margin:0 auto; height:clamp(200px,40vw,340px); background:repeating-linear-gradient(45deg,var(--stripeA),var(--stripeA) 12px,var(--stripeB) 12px,var(--stripeB) 24px); border:1px solid var(--hair); display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; }
.post-hero .frame span { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--phLabel); }
.post-body { padding:0 var(--px) 48px; }

.prose { font-family:'Libre Caslon Text',serif; font-size:19px; line-height:1.7; color:var(--body); }
.prose p { margin:0 0 22px; }
.prose em { color:var(--ink-strong); }
.prose h2 { font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin:40px 0 14px; }
.prose h3 { font-family:'Libre Caslon Display',serif; font-size:24px; color:var(--ink-strong); margin:32px 0 12px; }
.prose ul, .prose ol { padding-left:22px; margin:0 0 22px; }
.prose li { margin-bottom:6px; }
.prose a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.prose blockquote { border-left:3px solid var(--red); padding:6px 0 6px 26px; margin:34px 0; }
.prose blockquote p { font-family:'Libre Caslon Display',serif; font-size:clamp(22px,4vw,26px); line-height:1.35; color:var(--ink-strong); margin:0; }
.prose img { border:1px solid var(--hair); }
.pull { border-left:3px solid var(--red); padding:6px 0 6px 26px; margin:34px 0; }
.pull .lead { font-family:'Libre Caslon Display',serif; font-size:clamp(20px,3.4vw,24px); line-height:1.4; color:var(--ink-strong); margin:0 0 10px; }
.pull p { font-family:'Libre Caslon Text',serif; font-size:16px; line-height:1.6; color:var(--muted); margin:0; }
.pull .lead + p, .pull p { font-size:16px; }
.pull .red { color:var(--accent); }

.post-foot { display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; justify-content:space-between; margin-top:40px; padding-top:24px; border-top:1px solid var(--hair); font-family:'IBM Plex Mono',monospace; }
.tags { display:flex; gap:10px; flex-wrap:wrap; font-size:11px; letter-spacing:0.04em; color:var(--muted); }
.tags a { border:1px solid var(--outline); padding:5px 11px; }
.tags a:hover { color:var(--accent); border-color:var(--accent); }
.back-link { font-size:12px; color:var(--accent); }

/* ============================================================
   ABOUT / LEGAL
   ============================================================ */
.doc-head { padding:56px var(--px) 44px; border-bottom:1px solid var(--hair); }
.doc-head .wrap { max-width:760px; }
.doc-head h1 { font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(30px,7vw,50px); line-height:1.02; letter-spacing:-0.02em; text-transform:uppercase; color:var(--ink-strong); margin:16px 0 20px; }
.doc-head .updated { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em; color:var(--faint); }
.doc-body { padding:48px var(--px) 56px; }
.doc-body.about { padding:52px var(--px) 56px; }
.doc-body .wrap { max-width:720px; }
.doc-lede { font-family:'Libre Caslon Text',serif; font-size:19px; line-height:1.7; color:var(--body); margin:0 0 22px; }
.doc-lede em { color:var(--ink-strong); }

.team-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,150px),1fr)); gap:20px; }
.team-member { display:flex; flex-direction:column; gap:12px; }
.team-photo { height:200px; background:repeating-linear-gradient(45deg,var(--stripeA),var(--stripeA) 9px,var(--stripeB) 9px,var(--stripeB) 18px); border:1px solid var(--hair); background-size:cover; background-position:center; }
.team-role { display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.team-name { font-family:'Libre Caslon Text',serif; font-weight:700; font-size:17px; line-height:1.25; color:var(--ink); margin:0 0 4px; }
.team-dept { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); }
.about-foot { margin:34px 0 0; font-family:'Libre Caslon Text',serif; font-size:15px; line-height:1.6; color:var(--muted); max-width:760px; }
.red { color:var(--accent); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { padding:40px var(--px); border-top:1px solid var(--hair); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.footer-logos { display:flex; align-items:center; gap:20px; }
.footer-logos .kcl { height:44px; width:auto; }
.footer-logos .xr { height:50px; width:auto; background:var(--xrbg); padding:var(--xrpad); border-radius:2px; }
.footer-right { display:flex; flex-direction:column; align-items:flex-end; gap:16px; }
.footer-nav ul { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 22px; list-style:none; margin:0; padding:0; }
.footer-nav a { font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); transition:color .15s ease; }
.footer-nav a:hover, .footer-nav .current-menu-item > a, .footer-nav .current_page_item > a { color:var(--accent); }
.footer-meta { font-family:'IBM Plex Mono',monospace; font-size:11px; line-height:1.7; letter-spacing:0.04em; color:var(--faint); text-align:right; }

@media (max-width:640px) {
  .footer-right { align-items:flex-start; }
  .footer-nav ul { justify-content:flex-start; }
  .footer-meta { text-align:left; }
}

/* ============================================================
   ACCESSIBILITY — visible keyboard focus (WCAG 2.4.7 / 2.4.11)
   ============================================================ */
a:focus-visible,
button:focus-visible,
.theme-btn:focus-visible,
input:focus-visible,
[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.skip-link:focus { left:0; outline:2px solid #ffffff; outline-offset:2px; }