/* OUTSIDER — black & white, artistic minimal */
:root { --ink:#000; --paper:#fff; }
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background:var(--paper); color:var(--ink);
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height:1.6; min-height:100vh; display:flex; flex-direction:column;
}
a { color:inherit; text-decoration:none; }

/* nav */
header { border-bottom:2px solid var(--ink); }
nav {
  max-width:1100px; margin:0 auto; padding:1.2rem 1.5rem;
  display:flex; justify-content:space-between; align-items:center;
}
.logo { font-weight:800; letter-spacing:0.35em; font-size:1rem; }
.links a {
  margin-left:1.5rem; font-size:0.8rem; letter-spacing:0.2em;
  text-transform:uppercase; opacity:0.6;
}
.links a.active, .links a:hover { opacity:1; border-bottom:2px solid var(--ink); }

main { flex:1; max-width:1100px; margin:0 auto; width:100%; padding:2rem 1.5rem 4rem; }

/* hero */
.hero { padding:6rem 0 4rem; }
.hero h1 {
  font-size:clamp(3rem, 12vw, 9rem); font-weight:900; letter-spacing:0.05em;
  line-height:1;
}
.stroke { color:var(--paper); -webkit-text-stroke:2px var(--ink); }
.tag { margin-top:1rem; font-size:1.1rem; letter-spacing:0.15em; text-transform:uppercase; }
.sub { margin-top:1.5rem; max-width:34rem; opacity:0.75; }

/* strip */
.strip { display:grid; grid-template-columns:repeat(4,1fr); border:2px solid var(--ink); margin:2rem 0; }
.cell {
  padding:1.5rem 0.5rem; text-align:center; font-weight:800;
  letter-spacing:0.3em; font-size:0.9rem;
}
.cell + .cell { border-left:2px solid var(--ink); }
.invert { background:var(--ink); color:var(--paper); }

/* intro columns */
.intro { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2.5rem; }
.intro h2 { font-size:1.1rem; text-transform:uppercase; letter-spacing:0.25em; margin-bottom:0.8rem; }
.arrow { display:inline-block; margin-top:0.8rem; font-weight:700; border-bottom:2px solid var(--ink); }

/* page head */
.page-head { padding:4rem 0 2.5rem; }
.page-head h1 { font-size:clamp(2.2rem, 8vw, 5rem); font-weight:900; line-height:1; }
.page-head .sub { margin-top:1rem; }

/* videos */
.video-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:3rem; }
.video-frame {
  position:relative; aspect-ratio:16/9; border:2px solid var(--ink);
  background:#111; overflow:hidden;
}
.video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-frame video { display:block; width:100%; height:100%; object-fit:contain; }
.placeholder {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; font-weight:800; letter-spacing:0.4em;
  font-size:0.9rem; line-height:2;
}
.video-item h2 { margin-top:1rem; font-size:1.2rem; }
.meta { font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; opacity:0.55; margin-top:0.2rem; }
.desc { margin-top:0.6rem; font-size:0.9rem; opacity:0.8; max-width:32rem; }

/* calendar */
.events { border-top:2px solid var(--ink); }
.event { display:flex; gap:2rem; padding:2rem 0.5rem; border-bottom:2px solid var(--ink); align-items:flex-start; }
.event.invert { background:var(--ink); color:var(--paper); }
.date { text-align:center; min-width:4.5rem; }
.day { display:block; font-size:2.2rem; font-weight:900; line-height:1; }
.mon { font-size:0.75rem; letter-spacing:0.3em; }
.event h2 { font-size:1.2rem; }
.event .body p { margin-top:0.3rem; font-size:0.9rem; opacity:0.8; }
.event.invert .meta { opacity:0.7; }

/* footer */
footer {
  border-top:2px solid var(--ink); padding:1.2rem 1.5rem;
  display:flex; justify-content:space-between; font-size:0.75rem;
  letter-spacing:0.2em; text-transform:uppercase;
}

@media (max-width:640px){
  .strip { grid-template-columns:repeat(2,1fr); }
  .cell:nth-child(3) { border-left:0; border-top:2px solid var(--ink); }
  .cell:nth-child(4) { border-top:2px solid var(--ink); }
  footer { flex-direction:column; gap:0.3rem; text-align:center; }
}