/* 1. FONTS
   Pick fonts at fonts.google.com → "Get embed code" → copy the @import
   line and paste it here in place of the one below.
   Then put the font names in --font-display / --font-body.
   (Self-hosted fonts: put the files in a /fonts folder and use @font-face.) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap');

:root{
  --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;  /* giant words, titles */
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;  /* nav, labels, text */
  --weight-display: 900;
  --weight-body: 400;

  /* 2. COLORS */
  --ground: #1B1718;   /* background */
  --ink:    #eaf3ed;   /* main text, giant words, rules */
  --accent: #eaf3ed;   /* featured text, highlighted labels, current page */

  /* 3. SIZES (vw = % of window width) */
  --word-1-size: 19vw;      /* UJIMA */
  --word-2-size: 23vw;      /* PRESS */
  --word-tracking: -0.03em; /* letter spacing of giant words */
  --page-title-size: 13vw;  /* PUBLICATIONS, EVENTS… on inner pages */
  --nav-size: clamp(14px, 1.6vw, 22px);
  --label-size: clamp(13px, 1.4vw, 20px);
  --body-size: 15px;

  /* 4. SPACING */
  --gutter: 2vw;            /* page edge margin */
  --rule: 2px;              /* nav / section line thickness */

  /* 5. MOTION */
  --slide-time: 0.2s;       /* how long the words take to slide */
}

/* =====================================================================
   LAYOUT — you usually won't need to edit below here
   ===================================================================== */
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink)}
body{font-family:var(--font-body);font-weight:var(--weight-body);font-size:var(--body-size);min-height:100vh;display:flex;flex-direction:column;padding:24px var(--gutter) 20px;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
p,h1,h2,h3{margin:0}
.accent{color:var(--accent)}
.label{font-size:var(--label-size);line-height:1.15;text-transform:uppercase}

/* nav */
.nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;border:var(--rule) solid var(--ink);border-top:0;padding:6px 4vw 8px;font-size:var(--nav-size);letter-spacing:.02em;text-transform:uppercase}
.nav a[aria-current="page"]{color:var(--accent)}

main{flex:1;display:flex;flex-direction:column;padding-top:2.5vw}

/* footer */
.footer{margin-top:2vw;border-top:1px solid var(--ink);padding-top:6px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;font-size:11px;letter-spacing:.04em;text-transform:uppercase}

/* giant type */
.giant{font-family:var(--font-display);font-weight:var(--weight-display);line-height:.78;letter-spacing:var(--word-tracking);white-space:nowrap}

/* ---------- home ---------- */
.home{justify-content:space-between;gap:2vw}
.row{position:relative}
.row-1{min-height:calc(var(--word-1-size) * .8)}
.row-2{min-height:calc(var(--word-2-size) * .8)}
.word{position:relative;display:inline-block;transition:left var(--slide-time) cubic-bezier(.75,0,.2,1),transform var(--slide-time) cubic-bezier(.75,0,.2,1)}
.word-1{font-size:var(--word-1-size)}
.word-2{font-size:var(--word-2-size)}
.at-left{left:0;transform:translateX(0)}
.at-right{left:100%;transform:translateX(-100%)}

.panel{position:absolute;top:0;height:100%;opacity:0;pointer-events:none;transition:opacity .45s ease 0s}
.panel.on{opacity:1;pointer-events:auto;transition-delay:calc(var(--slide-time) * .8)}
.panel-left{left:0}
.panel-right{right:0}

.feature{width:29vw;display:flex;gap:1.5vw;align-items:flex-start;color:var(--accent)}
.feature-text{flex:1;height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:12px;text-align:center;text-transform:uppercase}
.feature-title,.feature-date{font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(22px,2.6vw,40px);line-height:1}
.info{width:29vw;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4vw 2vw;align-content:start}
.labels{width:17vw;display:flex;flex-direction:column;justify-content:space-between}
.labels.panel-right{align-items:flex-end;text-align:right}

.cover{flex:none;width:11vw;min-width:110px;aspect-ratio:1;border:3px solid currentColor;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;letter-spacing:.08em;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- inner pages ---------- */
.page-title{font-size:var(--page-title-size);margin-bottom:3vw}
.section-head{font-size:var(--nav-size);text-transform:uppercase;border-bottom:var(--rule) solid var(--ink);padding-bottom:6px;margin:0 0 4px}

.pub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:40px var(--gutter);margin-bottom:5vw}
.pub .cover{width:100%;min-width:0;margin-bottom:0px}
.pub-title{font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(20px,1.8vw,28px);line-height:1.05;text-transform:uppercase;margin-bottom:6px}
.pub-meta,.pub-desc{line-height:1.35}
.pub-desc{margin-top:6px}
.tag{display:inline-block;margin-top:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ink);padding:3px 7px}

.event-list{display:flex;flex-direction:column;margin-bottom:5vw}
.event{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,3fr);gap:var(--gutter);padding:18px 0;border-bottom:1px solid var(--ink);align-items:start}
.event-date{font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(26px,3.2vw,52px);line-height:.95;text-transform:uppercase}
.event-title{font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(20px,2vw,32px);line-height:1.05;text-transform:uppercase;margin-bottom:6px}
.event-desc{line-height:1.4}
.empty{padding:18px 0}

.prose{max-width:46rem;font-size:clamp(18px,1.6vw,24px);line-height:1.4;white-space:pre-line}

/* ---------- accessibility / phone ---------- */
@media (prefers-reduced-motion:reduce){.word,.panel{transition:none}}
/* ---------- home: about ---------- */
.home-about{display:none;flex-direction:column;gap:12px;max-width:42rem}
.home-about-text{font-size:clamp(17px,1.6vw,24px);line-height:1.4;white-space:pre-line}

/* =====================================================================
   PHONE (screens 760px wide and under)
   ===================================================================== */
@media (max-width:760px){
  body{padding:16px 16px 20px}
  main{padding-top:28px}

  /* nav: 3 x 2 ruled grid */
  .nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0;border:0;border-top:var(--rule) solid var(--ink);border-left:var(--rule) solid var(--ink);font-size:12px;letter-spacing:.04em}
  .nav a{display:flex;align-items:center;min-height:44px;padding:0 10px;border-right:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink)}
  .nav a[aria-current="page"]{background:var(--ink);color:var(--ground)}

  /* home: everything stacks; UJIMA / PRESS fill the width (sized by app.js) */
  .home{gap:28px;justify-content:flex-start}
  .row-1{order:1}
  .home-about{order:2;margin-top:0}
  .row-2{order:3}
  .row-1{min-height:0;display:flex;flex-direction:column;gap:28px}
  .word{display:block;width:fit-content;left:0 !important;transform:none !important;font-size:24vw;letter-spacing:-0.04em}
  .panel{position:static;width:auto !important;height:auto;opacity:1 !important;pointer-events:auto;transition:none}
  .label{font-size:13px;line-height:1.25}

  /* featured: cover beside the text */
  .feature{gap:14px;align-items:stretch}
  .feature .cover{width:150px;min-width:0;height:150px}
  .feature-text{text-align:left;justify-content:space-between}
  .feature-title,.feature-date{font-size:24px;line-height:.95}

  /* next event / open call: ruled rows */
  .info{grid-template-columns:108px minmax(0,1fr);gap:0;border-top:var(--rule) solid var(--ink)}
  .info > p{padding:12px 12px 12px 0;border-bottom:1px solid var(--ink)}
  .info > p:nth-child(odd) br{display:none}

  /* PRESS, then imprint left / links right */
  .row-2{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .row-2 .word{grid-column:1 / -1}
  .labels{gap:14px;justify-content:flex-start}
  .labels.panel-right{gap:0}
  .labels.panel-right a{display:inline-block;min-height:28px}

  .home-about{order:2;display:hidden}

  /* footer stacked */
  .footer{flex-direction:column;gap:4px;font-size:10px}

  /* inner pages */
  .event{grid-template-columns:1fr}
  .page-title{font-size:13vw}
}