/* ============================================================================
   Fluxus Museum — shared design system
   Extracted verbatim from index.html so generated pages (artists, features)
   reuse the SAME visual language. Uses root-absolute /assets/ paths so it
   works from any subdirectory (/artists/…, /features/…).
   ========================================================================= */

/* ---------- Suisse Intl ---------- */
@font-face { font-family:"Suisse Intl"; font-weight:300; font-style:normal; font-display:swap;
  src: url("/assets/fonts/SuisseIntl-Light.woff2") format("woff2"); }
@font-face { font-family:"Suisse Intl"; font-weight:400; font-style:normal; font-display:swap;
  src: url("/assets/fonts/SuisseIntl-Regular.woff2") format("woff2"); }
@font-face { font-family:"Suisse Intl"; font-weight:500; font-style:normal; font-display:swap;
  src: url("/assets/fonts/SuisseIntl-Medium.woff2") format("woff2"); }

/* ---------- tokens ---------- */
:root {
  --ink:#111; --dim:#777; --rule:#e6e6e6; --bg:#fff; --soft:#f6f6f4;
  --text2:#333; --bar-bg:rgba(255,255,255,.92); --logo-filter:none; --maxw:1120px;
}
html[data-theme="dark"] {
  --ink:#f1f1ef; --dim:#9a9a96; --rule:#2b2b2b; --bg:#121212; --soft:#1c1c1c;
  --text2:#c9c9c6; --bar-bg:rgba(18,18,18,.9); --logo-filter:invert(1);
}
html, body { transition:background-color .25s ease, color .25s ease; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Suisse Intl", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-weight:400; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a { color:var(--ink); text-decoration:none; }
a.u { border-bottom:1px solid var(--rule); transition:border-color .15s; }
a.u:hover { border-color:var(--ink); }
img { max-width:100%; display:block; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap { padding:0 20px; } }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- top bar ---------- */
header.bar { position:sticky; top:0; z-index:50; background:var(--bar-bg);
  backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--rule); }
.bar .row { display:flex; align-items:center; justify-content:space-between; height:68px; }
.bar .logo { display:flex; align-items:center; gap:12px; }
.bar .logo img { height:34px; width:auto; filter:var(--logo-filter); transition:filter .25s; }
.bar nav { display:flex; align-items:center; gap:28px; }
.bar nav a { font-size:14px; letter-spacing:.01em; color:var(--ink); }
.bar nav a:hover { color:var(--dim); }
.bar nav a.current { color:var(--dim); }
.bar .visitbtn { border:1px solid var(--ink); border-radius:999px; padding:7px 16px; font-size:14px; }
.bar .visitbtn:hover { background:var(--ink); color:var(--bg); }
.bar .icons { display:flex; align-items:center; gap:12px; }
.iconbtn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:999px; border:1px solid var(--rule); color:var(--ink); background:transparent;
  cursor:pointer; padding:0; transition:border-color .15s, color .15s; }
.iconbtn:hover { border-color:var(--ink); color:var(--ink); }
.iconbtn svg { width:17px; height:17px; display:block; }
.theme-toggle .sun { display:none; } .theme-toggle .moon { display:block; }
html[data-theme="dark"] .theme-toggle .sun { display:block; }
html[data-theme="dark"] .theme-toggle .moon { display:none; }
.langbtn { width:auto; padding:0 11px; gap:5px; font:inherit; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; line-height:1; }
.langbtn .lg { color:var(--dim); transition:color .15s; }
.langbtn .lg.on { color:var(--ink); }
.langbtn .sep { color:var(--rule); }
.langbtn:hover .lg { color:var(--ink); }
html:not([data-lang="el"]) .t-el { display:none !important; }
html[data-lang="el"] .t-en { display:none !important; }
@media (max-width:820px){ .bar nav .hide-sm { display:none; } }
@media (max-width:520px){ .bar nav { gap:16px; } .bar .visitbtn { display:none; } }
@media (max-width:640px){ .bar nav > a { display:none; } }

/* ---------- generic typography helpers ---------- */
.muted { color:var(--dim); }
.small { font-size:14px; }
.eyebrow { font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:0 0 22px; }
.btnlink { display:inline-block; border:1px solid var(--ink); border-radius:999px; padding:8px 18px; font-size:14px; }
.btnlink:hover { background:var(--ink); color:var(--bg); }

/* ============================================================================
   Article layout — shared by artist pages and feature pages
   ========================================================================= */
.article { max-width:760px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .article { padding:0 20px; } }

.art-head { padding:56px 0 8px; }
.art-crumb { font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin:0 0 22px;
  display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline; }
.art-crumb a { color:var(--dim); border-bottom:1px solid var(--rule); }
.art-crumb a:hover { color:var(--ink); border-color:var(--ink); }
.art-kicker { font-size:15px; letter-spacing:.02em; color:var(--dim); margin:0 0 10px; }
.art-head h1 { font-weight:300; letter-spacing:-0.025em; line-height:1.03;
  font-size:clamp(40px,6.4vw,72px); margin:0 0 8px; }
.art-meta { font-size:15px; color:var(--dim); margin:0; }
.art-meta .dot { margin:0 8px; opacity:.5; }

/* lead + inline figures */
figure.fig { margin:40px 0; }
figure.fig .frame { border:1px solid var(--rule); border-radius:8px; overflow:hidden; background:var(--soft); }
figure.fig .frame img { width:100%; height:auto; display:block; }
figure.fig figcaption { font-size:13px; color:var(--dim); margin-top:10px; }
/* neutral, intentional placeholder when an image is not yet available */
.fig-placeholder { border:1px solid var(--rule); border-radius:8px; background:var(--soft);
  aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--dim); font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:24px; }

/* body prose */
.prose { font-size:18px; line-height:1.7; color:var(--text2); }
.prose > p { margin:0 0 20px; max-width:66ch; }
.prose > p.lead { font-weight:300; font-size:clamp(20px,2.4vw,24px); line-height:1.5; color:var(--ink); }
.prose h2 { font-weight:500; font-size:22px; letter-spacing:-0.01em; color:var(--ink); margin:40px 0 14px; }
.prose h3 { font-weight:500; font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); margin:32px 0 10px; }
.prose blockquote { border-left:2px solid var(--ink); margin:26px 0; padding:2px 0 2px 22px;
  font-style:italic; font-weight:300; font-size:clamp(20px,2.4vw,26px); line-height:1.4; color:var(--ink); max-width:none; }
.prose a { border-bottom:1px solid var(--rule); }
.prose a:hover { border-color:var(--ink); }
.art-rule { border:0; border-top:1px solid var(--rule); margin:44px 0; }
/* faithful link lists carried over from the WordPress bios */
.prose .linklist { list-style:none; margin:6px 0 22px; padding:0; }
.prose .linklist li { margin:0 0 9px; font-size:16px; line-height:1.5; }
.prose .linklist a { word-break:break-word; }

/* categorised links (Biographies / Works / Interviews / Further resources) */
.linkset { margin:8px 0 0; }
.linkset .lg-group { margin:0 0 26px; }
.linkset h3 { font-weight:500; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin:0 0 10px; }
.linkset ul { list-style:none; margin:0; padding:0; }
.linkset li { margin:0 0 8px; font-size:16px; line-height:1.5; }
.linkset li a { border-bottom:1px solid var(--rule); word-break:break-word; }
.linkset li a:hover { border-color:var(--ink); }

/* upcoming / café-oto style callout */
.callout { border:1px solid var(--ink); border-radius:8px; padding:16px 20px; margin:28px 0; }
.callout .co-label { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin:0 0 8px; }
.callout p { margin:0; font-size:16px; line-height:1.55; }
.callout a { border-bottom:1px solid var(--ink); }

/* gallery */
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:28px 0; }
@media (max-width:560px){ .gallery { grid-template-columns:repeat(2,1fr); } }
.gallery button { padding:0; border:1px solid var(--rule); border-radius:6px; overflow:hidden; background:var(--soft);
  cursor:zoom-in; aspect-ratio:4/3; }
.gallery img { width:100%; height:100%; object-fit:cover; display:block; }

/* back / footer nav within article */
.art-back { margin:52px 0 0; padding:26px 0; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.art-back .b-lead { font-size:15px; color:var(--dim); }

/* related items */
.related { margin:44px 0 0; padding-top:26px; border-top:1px solid var(--rule); }
.related h2 { font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin:0 0 16px; font-weight:500; }
.related .r-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:640px){ .related .r-grid { grid-template-columns:1fr; } }
.related a { display:block; }
.related .r-name { font-size:16px; font-weight:500; margin:0; }
.related .r-sub { font-size:13px; color:var(--dim); margin:2px 0 0; }

/* ============================================================================
   Site footer (shared)
   ========================================================================= */
footer.site { padding:56px 0 64px; margin-top:20px; border-top:1px solid var(--rule); }
footer.site .foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
@media (max-width:640px){ footer.site .foot-grid { grid-template-columns:1fr; gap:28px; } }
footer.site .foot-brand img { height:40px; width:auto; filter:var(--logo-filter); margin-bottom:14px; }
footer.site h4 { font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin:0 0 12px; font-weight:500; }
footer.site .col > div, footer.site .col > a { display:block; margin-bottom:8px; font-size:15px; }
footer.site .muted { color:var(--dim); } footer.site .small { font-size:14px; }
.foot-btm { margin-top:44px; padding-top:20px; border-top:1px solid var(--rule); font-size:13px; color:var(--dim);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ============================================================================
   Features landing (editorial index)
   ========================================================================= */
.feat-hero { padding:56px 0 0; }
.feat-hero h1 { font-weight:300; letter-spacing:-0.025em; line-height:1.02; font-size:clamp(40px,6vw,68px); margin:0 0 14px; }
.feat-hero .intro { font-size:19px; color:var(--text2); max-width:60ch; margin:0; }

.feat-tag { display:inline-block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim);
  border:1px solid var(--rule); border-radius:999px; padding:3px 10px; margin:0 6px 6px 0; }

/* primary featured article */
.feat-lead { margin:44px 0; display:grid; grid-template-columns:1.35fr 1fr; gap:40px; align-items:center;
  padding-bottom:44px; border-bottom:1px solid var(--rule); }
@media (max-width:820px){ .feat-lead { grid-template-columns:1fr; gap:24px; } }
.feat-lead .thumb, .feat-card .thumb { border:1px solid var(--rule); border-radius:8px; overflow:hidden; background:var(--soft);
  display:flex; align-items:center; justify-content:center; }
.feat-lead .thumb { aspect-ratio:16/10; }
.feat-lead .thumb img, .feat-card .thumb img { width:100%; height:100%; object-fit:cover; }
.feat-lead .thumb .ph, .feat-card .thumb .ph { color:var(--dim); font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:0 16px; text-align:center; }
.feat-lead .f-meta, .feat-card .f-meta { font-size:13px; color:var(--dim); margin:0 0 10px; }
.feat-lead h2 { font-weight:300; letter-spacing:-0.02em; font-size:clamp(28px,3.4vw,40px); line-height:1.1; margin:0 0 12px; }
.feat-lead .excerpt { font-size:17px; color:var(--text2); line-height:1.55; margin:0 0 14px; max-width:52ch; }

/* two recent */
.feat-recent { display:grid; grid-template-columns:1fr 1fr; gap:36px; margin:0 0 44px; padding-bottom:44px; border-bottom:1px solid var(--rule); }
@media (max-width:640px){ .feat-recent { grid-template-columns:1fr; gap:30px; } }
.feat-card .thumb { aspect-ratio:16/10; margin-bottom:14px; }
.feat-card h3 { font-weight:500; font-size:20px; letter-spacing:-0.01em; line-height:1.15; margin:0 0 8px; }
.feat-card .excerpt { font-size:15px; color:var(--text2); line-height:1.5; margin:0 0 10px; }
.feat-card:hover .thumb img { transform:scale(1.03); }
.feat-card .thumb img { transition:transform .4s ease; }

/* archive list */
.feat-archive { margin:0 0 40px; }
.feat-archive h2 { font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin:0 0 8px; font-weight:500;
  padding-bottom:10px; border-bottom:1px solid var(--rule); }
.feat-row { display:grid; grid-template-columns:88px 1fr auto; gap:18px; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--rule); }
@media (max-width:560px){ .feat-row { grid-template-columns:64px 1fr; } .feat-row .f-date { display:none; } }
.feat-row .thumb { aspect-ratio:1/1; border:1px solid var(--rule); border-radius:6px; overflow:hidden; background:var(--soft);
  display:flex; align-items:center; justify-content:center; }
.feat-row .thumb img { width:100%; height:100%; object-fit:cover; }
.feat-row .thumb .ph { font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.feat-row .f-title { font-size:18px; font-weight:500; letter-spacing:-0.01em; margin:0; }
.feat-row .f-sub { font-size:13px; color:var(--dim); margin:3px 0 0; }
.feat-row .f-date { font-size:13px; color:var(--dim); white-space:nowrap; }

.feat-empty { color:var(--dim); font-size:15px; padding:20px 0; }

/* ============================================================================
   Feature (interview) article specifics
   ========================================================================= */
.art-tags { margin:14px 0 0; }
.art-quote { margin:38px 0 4px; }
.art-quote p { font-weight:300; font-style:italic; letter-spacing:-0.01em;
  font-size:clamp(23px,3.3vw,33px); line-height:1.3; margin:0; max-width:24ch; color:var(--ink); }
.prose .q { font-weight:500; font-size:19px; line-height:1.4; letter-spacing:-0.01em; color:var(--ink); margin:34px 0 12px; }
.prose .q:first-child { margin-top:0; }
.prose .a { font-size:17px; line-height:1.72; color:var(--text2); margin:0 0 14px; }
.prose .a .who { font-weight:500; color:var(--ink); }
.art-bio { margin:40px 0 0; padding-top:26px; border-top:1px solid var(--rule); }
.art-bio p { font-style:italic; color:var(--text2); font-size:16px; line-height:1.6; margin:0 0 10px; }
.art-bio a { border-bottom:1px solid var(--rule); }
.art-bio a:hover { border-color:var(--ink); }
.art-missing { font-size:13px; color:var(--dim); font-style:italic; }