/* ─── Typography ────────────────────────────────────────────────────── */
@font-face{font-family:'Neue Haas Grotesk Display';src:url('fonts/NeueHaasDisplayRoman.ttf') format('truetype');font-weight:400}
@font-face{font-family:'Neue Haas Grotesk Display';src:url('fonts/NeueHaasDisplayBold.ttf') format('truetype');font-weight:700}
@font-face{font-family:'Neue Haas Grotesk Text';src:url('fonts/NeueHaasGrotText-55Roman-Trial.otf') format('opentype');font-weight:400}
@font-face{font-family:'Neue Haas Grotesk Text';src:url('fonts/NeueHaasGrotText-75Bold-Trial.otf') format('opentype');font-weight:700}

:root{
  --font-logo:"Sprat",sans-serif;
  --font-display:"Neue Haas Grotesk Display","Helvetica Neue",sans-serif;
  --font-text:"Neue Haas Grotesk Text","Helvetica Neue",sans-serif;
  --font-caption:"Linux Libertine O","Georgia","Times New Roman",serif
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:ui-monospace,"SF Mono","Fira Code",monospace;
  background:#e1e1e1;color:#111;
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center
}

/* ─── Header ───────────────────────────────────────────────────────── */
header{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:1rem 1rem .5rem;mix-blend-mode:difference
}
header a{text-decoration:none;color:#fff}
.logo{
  font-family:var(--font-logo);
  font-size:clamp(3rem,7vw,4.5rem);font-weight:700;letter-spacing:-.01em;
  filter:drop-shadow(.1rem .1rem .1rem rgba(0,255,0,.95))
}
.about{
  font-family:"Linux Biolinum Keyboard O","Georgia",serif;
  font-size:clamp(1.4rem,3vw,1.8rem);color:#fff;
  filter:drop-shadow(.05rem .05rem .05rem rgba(255,0,255,.85))
}
.logo:hover{text-decoration:underline}
.about:hover{text-decoration:underline}

/* ─── Heart grid ───────────────────────────────────────────────────── */
.heart-wrap{width:100%;max-width:var(--grid-w,100vw);margin:0 auto;padding:clamp(.25rem,2vw,1.5rem);box-sizing:border-box}
.heart{position:relative;width:100%}
.cell{position:absolute;overflow:hidden;cursor:pointer;outline:2px solid #000;outline-offset:-1px}
.cell img,.cell video{width:100%;height:100%;object-fit:cover;display:block}
.cell.project{background:#d8d8d8}
.cell.project:hover{box-shadow:0 0 8px rgba(0,0,0,.5);z-index:2;transform:scale(1.08)}
.cell.spacer{background:#cdcdcd;cursor:default;box-shadow:inset 0 0 10px rgba(0,0,0,.5)}
.cell.spacer::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom right,transparent calc(50% - .5px),#111 calc(50% - .5px),#111 calc(50% + .5px),transparent calc(50% + .5px)),
             linear-gradient(to bottom left,transparent calc(50% - .5px),#111 calc(50% - .5px),#111 calc(50% + .5px),transparent calc(50% + .5px))
}
.preview{
  display:none;position:fixed;top:0;left:0;z-index:49;
  padding:.5rem;max-width:80vw;
  mix-blend-mode:difference;
  pointer-events:none
}

/* ─── About ────────────────────────────────────────────────────────── */
.about-page{
  position:fixed;inset:0;z-index:44;
  background:rgba(225,225,225,.92);
  display:none;overflow:auto;-webkit-overflow-scrolling:touch
}
.about-page.on{display:block}
.about-content{padding:1rem;mix-blend-mode:difference}
.about-content h2{
  font-family:"Linux Biolinum Keyboard O","Georgia",serif;
  font-size:min(calc(100vw/18),4rem);font-weight:400;white-space:nowrap;
  color:#fff;
  filter:drop-shadow(.1rem .1rem .1rem rgba(0,255,0,.95));
  margin:0 0 .8rem
}
.about-content p{
  font-family:var(--font-text);
  font-size:clamp(.9rem,1.5vw,1.1rem);
  color:#fff;margin:0 0 .5rem
}
.about-content a{color:#fff}

/* ─── Loading ─────────────────────────────────────────────────────── */
.heart.loading{opacity:.4;animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.7}}

.marquee{
  position:fixed;top:50%;left:0;right:0;z-index:40;
  overflow:hidden;white-space:nowrap;mix-blend-mode:difference;
  pointer-events:none;transform:translateY(-50%);
  will-change:transform;isolation:isolate
}
.marquee span{
  display:inline-block;font-size:1.1rem;color:#aaa;
  font-family:"Arial Black","Impact",sans-serif;font-weight:900;
  animation:marquee 30s linear infinite;padding-right:120vw;
  will-change:transform
}
@keyframes marquee{0%{transform:translateX(100vw)}100%{transform:translateX(-100%)}}

/* ─── Project page ─────────────────────────────────────────────────── */
.project-page{
  position:fixed;inset:0;z-index:44;background:#e1e1e1;
  display:none;overflow-y:scroll;-webkit-overflow-scrolling:touch
}
.project-page.on{display:block}

.project-media figure > .project-media.stack{min-height:100%}
.project-media.stack > figure:first-child{margin-top:0}

/* ── Media container ───────────────────────────────────────────────── */
.project-media{padding:0}
.project-media figure{margin:0;padding:0;position:relative;overflow:hidden}
.project-media img,.project-media video{display:block;padding:0;margin:0}

/* Stack */
.project-media.stack figure{margin-bottom:0}
.project-media.stack figure:has(figcaption){margin-bottom:2rem}
.project-media.stack figure:last-child{margin-bottom:0}
.project-media.stack img,.project-media.stack video{
  display:block;max-width:100%;max-height:85vh;height:auto
}
.project-media.stack figcaption{
  position:static;background:none;padding:.5rem;
  font-family:var(--font-text);font-size:.7rem;line-height:1.3
}
.project-media.stack figcaption a{color:#111;text-decoration:underline}
@media(max-width:768px){.project-media.stack img,.project-media.stack video{max-height:none;max-width:100%}}

/* Grid */
.project-media.grid{display:grid;gap:0}

/* Columns (flex panels) */
.project-media.columns{display:flex;flex-direction:row;gap:0}
.project-media.columns > .column{display:flex;flex-direction:column;flex:1;gap:0}
.project-media.columns > .column > figure{margin:0;overflow:hidden}
.project-media.columns > .column > figure img,
.project-media.columns > .column > figure video{display:block;width:100%;height:auto}
.project-media.columns > .column > figure figcaption{
  position:absolute;bottom:0;left:0;right:0;padding:.5rem;
  background:linear-gradient(transparent,rgba(0,0,0,.5));color:#fff;
  font-family:var(--font-text);font-size:.65rem;line-height:1.3;
  text-shadow:0 1px 2px rgba(0,0,0,.5)
}
@media(max-width:768px){.project-media.columns{flex-direction:column}}
.project-media.grid .grid-item{aspect-ratio:1}
.project-media.grid .grid-item img,
.project-media.grid .grid-item video{width:100%;height:100%;object-fit:cover}
.project-media.grid .grid-item[style*="1 / -1"]{aspect-ratio:auto}
.project-media.grid .grid-item[style*="1 / -1"] img,
.project-media.grid .grid-item[style*="1 / -1"] video{width:100%;height:auto}
.project-media.grid .grid-item figcaption{
  position:absolute;bottom:0;left:0;right:0;padding:.5rem;
  background:linear-gradient(transparent,rgba(0,0,0,.5));color:#fff;
  font-family:var(--font-text);font-size:.65rem;line-height:1.3;
  text-shadow:0 1px 2px rgba(0,0,0,.5)
}
.project-media.grid figure:not(.grid-item) figcaption{
  padding:.5rem;color:#fff;
  font-family:var(--font-text);font-size:.75rem;line-height:1.3;
  text-shadow:0 1px 2px rgba(0,0,0,.5)
}
.project-media.grid figure:not(.grid-item) figcaption a{
  color:#0ff;text-decoration:underline
}
.project-media.grid figcaption a{color:#0ff;text-decoration:none}
.project-media.grid figcaption a:hover{text-decoration:underline}

/* Natural grid (no square crop) */
.project-media.grid figure:not(.grid-item) img,
.project-media.grid figure:not(.grid-item) video{width:100%;height:auto;object-fit:contain}

/* ── Text block ────────────────────────────────────────────────────── */
.project-media .grid-text{padding:.5rem;mix-blend-mode:difference}
.project-media figure.has-text .grid-text{
  position:absolute;top:0;left:0;right:0;padding:.5rem;z-index:2
}
.project-media.grid .grid-item.has-text .grid-text{
  inset:0;bottom:auto
}
.project-media.grid .grid-item[style*="1 / -1"] .grid-text{position:static}
.project-media figure.has-text img,
.project-media figure.has-text video{position:relative;z-index:1}

.grid-text h1{
  font-family:var(--font-display);
  font-size:clamp(1.1rem,2.5vw,1.8rem);font-weight:400;
  margin:0;letter-spacing:-.02em;line-height:1;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.6)
}
.grid-text p{
  font-family:var(--font-text);font-weight:400;
  font-size:.8rem;line-height:1.2;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.5)
}
.grid-prologue{
  font-family:var(--font-caption);
  font-size:.8rem;line-height:1.3;font-style:italic;
  color:rgba(255,255,255,.85);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  margin-bottom:.5rem
}
.grid-date{
  font-family:var(--font-text);
  font-size:.7rem;color:rgba(255,255,255,.7);
  margin-bottom:.3rem
}
.grid-text .project-tags{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}
.grid-text .project-tags span{
  font-family:var(--font-text);font-size:.65rem;font-weight:400;
  color:rgba(255,255,255,.85);letter-spacing:.05em;
  text-shadow:0 1px 2px rgba(0,0,0,.5)
}
.grid-link{
  display:inline-block;margin-top:.4rem;
  font-family:var(--font-text);font-size:.65rem;
  color:rgba(255,255,255,.7);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  word-break:break-all
}
.grid-link:hover{color:rgba(0,255,0,.85)}

/* ── Decorations ───────────────────────────────────────────────────── */
.decoration{
  position:absolute;z-index:46;cursor:grab;user-select:none;
  transition:filter .15s
}
.decoration.dragging{cursor:grabbing;z-index:47}
.decoration:hover{filter:drop-shadow(0 0 8px rgba(0,0,0,.4))}
.decoration img{display:block;max-width:200px;max-height:200px}
.decoration video{display:block;border-radius:4px}