:root{
  --bg1:#ff18a9; --bg2:#ff4ccf; --ink:#baff00; --ink-soft:#cfff52;
  --shadow: rgba(0,0,0,.25); --maxw: 1200px; --gutter: clamp(18px,3.2vw,36px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family: "Archivo Black","Bebas Neue","Impact","Arial Black",system-ui,sans-serif;
  text-transform: uppercase; letter-spacing:.02em;
  background: radial-gradient(120% 120% at 80% 0%, var(--bg2) 0%, var(--bg1) 35%, #ff0a9a 65%, var(--bg2) 100%) no-repeat fixed;
  background-size: 100% 100%;
  color:var(--ink); overflow-x:hidden;
}

/* visual extras (not currently used in markup, kept for parity) */
.grain{position:fixed; inset:0; pointer-events:none; z-index:0; mix-blend-mode:soft-light; opacity:.06;}
.grain svg{width:100%;height:100%;display:block}
.orb{position:fixed; z-index:0; filter:blur(10px) saturate(140%); opacity:.22; mix-blend-mode:screen; pointer-events:none; transform:translateZ(0); animation: drift 22s ease-in-out infinite alternate;}
.orb--1{ top:8vh; left:-10vw; width:55vmin; height:55vmin; --dx: 8vw; --dy: -6vh; --rot: 16deg; }
.orb--2{ bottom:-10vh; right:-12vw; width:70vmin; height:70vmin; animation-duration:28s; --dx: 10vw; --dy: -8vh; --rot: 20deg; }
.orb--3{ top:35vh; right:25vw; width:35vmin; height:35vmin; animation-duration:18s; --dx: 7vw; --dy: -5vh; --rot: 14deg; }
@keyframes drift{0%{transform: translate3d(0,0,0) rotate(100deg);}100%{transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot));}}

/* NAVBAR */
header{position:sticky; top:0; z-index:10}
.nav{
  max-width:var(--maxw); margin:0 auto; padding:18px var(--gutter);
  display:flex; align-items:center; gap:14px;
  background:var(--ink); color:#081102; border-bottom:2px solid #081102;
  transition:opacity .35s ease, transform .35s ease;
}
.nav.nav--hidden{opacity:0; transform:translateY(-12px); pointer-events:none}
.brand{font-size:clamp(20px,3.6vw,34px); letter-spacing:.5px; color:#081102}
.spacer{flex:1}
.nav a{padding:10px 16px; border:2px solid #081102; background:transparent; color:#081102; text-decoration:none}

/* MAIN */
main{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:56px var(--gutter) 100px}
h1{font-size:clamp(44px, 9vw, 78px); color: var(--ink); text-shadow: 0 0 0.35em rgba(186,255,0,.3), 0 .04em .02em rgba(0,0,0,.35); margin: 0 0 12px 0}

/* GRID */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3.5vw,44px)}
@media(max-width:900px){ .grid{grid-template-columns:1fr} }

.tile{
  min-height: 52vmin; border:2px solid var(--ink);
  padding: clamp(18px,3vw,34px);
  display:flex; flex-direction:column; justify-content:flex-end;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  outline: none; cursor:pointer;
}
.tile.is-active{transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.45)}
.tile h2{margin:0 0 8px; font-size: clamp(22px,2.6vw,36px)}
.tile .year{font-size: clamp(48px,10vw,160px); line-height:.85; margin:0 0 16px; letter-spacing:.02em}
.tile .sub{font-size: clamp(12px,1.1vw,16px); margin: 0 0 10px; text-transform:none; opacity:.95}
.tile .desc{font-size: clamp(14px,1.2vw,18px); line-height:1.35; text-transform:none; max-width: 65ch}

/* video tile fills entirely */
.tile.video{padding:0; overflow:hidden}
.tile.video .frame{position:relative; width:100%; height:100%}
.tile.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* generous text padding */
.tile.text{padding: clamp(26px,4.2vw,60px)}

/* COLOURWAYS */
.lime-on-pink{ background: var(--bg1); color: var(--ink); border-color: var(--ink)}
.lime-on-black{ background: #0a0c12; color: var(--ink); border-color: var(--ink)}
.pink-on-lime{ background: var(--ink); color: var(--bg1); border-color: var(--bg1)}
.pink-on-lime a{ color: #081102 }

/* hover invert */
.tile:focus-visible{outline:3px solid var(--ink-soft); outline-offset:2px}
.tile.lime-on-black:hover{ background: var(--ink); color:#0a0c12; border-color:#0a0c12; transition: background .5s ease; }
.tile.lime-on-pink:hover{ background: var(--ink); color:var(--bg1); border-color:var(--bg1); transition: background .5s ease; }
.tile.pink-on-lime:hover{ background: #0a0c12; color:var(--ink); border-color:var(--ink); transition: background .5s ease; }

/* EXPANDERS */
.expander{
  grid-column: 1 / -1;
  border: 0 solid var(--ink);
  background:#fff;
  padding: 0;
  overflow: hidden;
  max-height: 0; opacity: 0; transform: translateY(-6px);
  transition: max-height .45s ease, opacity .35s ease, transform .35s ease, padding .25s ease;
  margin: 0;
}
.expander.is-open {
  border-width: 2px;
  padding: clamp(20px,3.5vw,60px);
  max-height: 1600px;
  opacity: 1;
  transform: translateY(0);
  margin: 0 0 75px;
}
.expander h3{ margin:0 0 8px; font-size: clamp(20px,2.2vw,30px) }
.expander p{ margin:0 0 16px; text-transform:none; font-size: clamp(14px,1.2vw,18px) }
.expander h1, .expander h3, .expander p { color: #333; }

/* gallery */
.gallery{ display:grid; gap:12px; grid-template-columns: repeat(5, 1fr); }
@media (max-width:1100px){ .gallery{ grid-template-columns: repeat(3, 1fr) } }
@media (max-width:700px){ .gallery{ grid-template-columns: repeat(2, 1fr) } }

.thumb{
  display:block; width:100%;
  aspect-ratio: 12 / 10;
  object-fit: cover; object-position: center;
  border:2px solid var(--ink);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.thumb:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.35) }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:999;
  background: rgba(0,0,0,.8);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition: opacity .25s ease;
}
.lightbox.is-open{ opacity:1; pointer-events:auto }
.lightbox img{
  max-width: 92vw; max-height: 92vh; border:2px solid var(--ink);
  box-shadow: 0 20px 60px rgba(0,0,0,.6)
}
.lightbox__close{
  position:fixed; top:14px; right:18px; font: inherit;
  background:var(--ink); color:#081102; border:2px solid #081102;
  padding:8px 12px; cursor:pointer; text-transform:uppercase;
  z-index: 100;
}

/* writing + chips */
#writing { margin: 172px 0 56px; }
#everything { margin: 172px 0 56px; }
#writing h2 { margin: 0 0 12px; font-size: clamp(26px,3vw,40px); }
.writing-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 28px;
}
@media (max-width:900px){ .writing-list{ grid-template-columns:1fr; } }

.writing-item{ padding:14px 0; border-top:2px solid var(--ink); }
.writing-item:first-child{ border-top:0; }

.writing-title{
  display:inline-block;
  font-size: clamp(18px,1.8vw,24px);
  text-decoration:none; color:var(--ink);
  text-shadow: 0 .04em .02em var(--shadow);
}
.writing-title:hover{ text-decoration:underline; }

.writing-desc{
  margin:6px 0 0;
  font-size: clamp(13px,1.1vw,16px);
  opacity:.95; text-transform:none; max-width: 70ch;
}

.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip {
  padding: 17px 18px;
  border: 2px solid var(--ink);
  background: rgba(0,0,0,.08);
  color: var(--ink);
  border-radius: 0;
  transition: background .4s ease;
}
.chip:hover {background:#000;}
.bigchip {
  /* padding: 30px; */
  background: var(--ink);
  color: var(--bg1);
}

/* footer */
footer{max-width:var(--maxw); margin:0 auto; padding:60px var(--gutter) 90px; color:var(--ink)}


/* when lightbox is open */
body.lb-open { overflow: hidden; }
body.lb-open header,
body.lb-open main,
body.lb-open footer { pointer-events: none; }

/* allow interaction inside the lightbox itself */
body.lb-open #lightbox { pointer-events: auto; }

/* Keep navbar invisible and inert whenever the lightbox is active */
body.lb-open .nav{
  opacity: 0 !important;
  transform: translateY(-12px) !important;
  pointer-events: none !important;
}
/* space the gallery from text above/below */
.expander .gallery{ margin-top:12px; margin-bottom:20px; }

/* summary paragraph (optional) */
.expander .expander-summary{ text-transform:none; color:#333; }

/* long-form section uses a non-display font and comfortable reading rhythm */
.expander .full-text{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.6;
  font-size: clamp(14px,1.2vw,18px);
  color: #222;
  max-width: 70ch;
}
.expander .full-text p{ margin: 0 0 1em; }
.expander .full-text h4,
.expander .full-text h5{ margin: 1.2em 0 .4em; font-weight:700; font-size:1.05em; }
.expander .full-text a{ color:#0a0c12; text-decoration:underline; text-underline-offset:.15em; }
.expander .full-text ul,
.expander .full-text ol{ margin:.6em 0 .8em 1.4em; }
.expander .full-text li{ margin:.25em 0; }
.expander .full-text blockquote{
  margin:1em 0; padding:.5em 1em; border-left:3px solid #ccc; color:#444; background:#f7f7f7;
}
.expander .full-text code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:.95em; background:#f0f0f0; padding:.1em .3em; border-radius:3px;
}
/* dim video tiles by default; undim on hover or while playing */
.tile.video .frame { position: relative; }
.tile.video .frame::after{
  content:"";
  position:absolute; inset:0;
  background:#000;
  opacity:.82;                 /* “very dull” */
  transition: opacity .25s ease;
  pointer-events:none;         /* don’t block clicks into the iframe */
}
.tile.video:hover .frame::after,
.tile.video:focus-within .frame::after,
.tile.video.is-playing .frame::after{
  opacity:0;                   /* off on hover or when playing */
}
  .nav__toggle{
    display: none;
  }
/* ===== Mobile nav (<=900px) ===== */
@media (max-width:1000px){
  .nav{
    flex-wrap: wrap;
    gap: 10px;
  }
  .spacer{ display:none; }

  .nav__toggle{
    display:inline-block;
    margin-left:auto;
    font: inherit;
    line-height:1;
    padding:10px 12px;
    border:2px solid #081102;
    background:transparent;
    color:#081102;
    cursor:pointer;
  }

  .nav__links{
    width:100%;
    display:none;          /* collapsed by default */
    flex-direction:column;
    gap:10px;
    margin-top:6px;
  }
  .nav__links a{
    display:block;
    text-align:left;
    width:100%;
  }

  /* when opened via JS toggle */
  .nav.nav--open .nav__links{ display:flex; }
}
@media (max-width:1000px){
  h1{
    /* Allow very long single words to wrap */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;

    /* Slightly smaller floor on phones so it always fits */
    font-size: clamp(28px, 8.5vw, 44px);
    letter-spacing: .01em; /* tighten subtly at small sizes */
  }
}
.tile {
  position: relative;
  cursor: pointer;
}

.tile__icon {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 1.4rem;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.tile:hover .tile__icon {
  opacity: 1;
  transform: translateY(2px); /* a tiny nudge for hover feedback */
}