/* Shared styles for the project subpages — matches index.html */
:root{
  --paper:#FBF6EC; --paper-dark:#F2E9D8; --ink:#21201D;
  --coral:#FF6B4A; --coral-text:#B23A1F;
  --teal:#1F8A82;  --teal-text:#17706A;
  --mustard:#F2B705; --pin-red:#E0432B;
  --muted:rgba(33,32,29,0.68);
  --line:rgba(33,32,29,0.14); --shadow:rgba(33,32,29,0.18);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Archivo', Arial, sans-serif;
  background:
    radial-gradient(circle at 1px 1px, rgba(33,32,29,0.07) 1px, transparent 0) 0 0/22px 22px,
    var(--paper);
  color:var(--ink);
  line-height:1.6;
  padding:24px 6vw 24px;
}
::selection{ background:var(--mustard); color:var(--ink); }
a{color:inherit;}
a:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; }
.page{max-width:900px; margin:0 auto;}
.page.wide{max-width:1000px;}

footer{
  text-align:center; padding:14px 26px;
  font-family:'Space Mono', monospace; font-size:0.8rem;
  color:var(--muted);
  border-top:2px solid var(--ink);
  margin-left:-6vw; margin-right:-6vw;
}

.back{
  display:inline-block; margin-bottom:24px;
  text-decoration:none; font-weight:700; color:var(--teal-text);
  border-bottom:2px solid var(--teal); padding-bottom:2px;
}
.back:hover{ color:var(--coral-text); border-color:var(--coral); }

.hero{margin-bottom:34px;}
.hero h1{font-size:clamp(2rem, 5vw, 3rem); font-weight:900; margin-bottom:10px; line-height:1.05;}
.hero p{color:var(--muted); max-width:560px;}

.card{
  background:var(--paper-dark);
  border:2px solid var(--ink);
  border-radius:6px;
  padding:26px;
  margin-bottom:28px;
  box-shadow:5px 5px 0 var(--shadow);
  transform:rotate(-0.3deg);
}
.card:nth-of-type(even){ transform:rotate(0.3deg); }
.card h1{font-size:clamp(1.8rem, 4vw, 2.4rem); font-weight:900; margin-bottom:10px; line-height:1.1;}
.card h2{font-size:1.35rem; font-weight:900; margin-bottom:10px;}
.card p{max-width:640px;}

.tag{
  display:inline-block; margin-bottom:12px;
  font-family:'Space Mono', monospace;
  font-size:0.78rem; letter-spacing:0.04em; font-weight:700;
  color:var(--coral-text);
}

.list{margin-top:14px; padding-left:20px;}
.list li{margin-bottom:4px;}

.meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.chip{
  font-family:'Space Mono', monospace; font-size:0.72rem;
  border:1.5px solid var(--ink); padding:2px 10px; border-radius:20px;
  background:var(--paper);
}

.gallery{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-top:18px;}
.box, .art, .video{
  background:
    repeating-linear-gradient(135deg, rgba(33,32,29,0.06) 0 10px, transparent 10px 20px),
    var(--paper);
  border:2px dashed var(--line);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Space Mono', monospace; font-size:0.8rem;
  color:var(--muted);
  padding:16px;
}
.box{
  display:block; align-self:start; overflow:hidden; padding:0;
  background:var(--paper); border:1px solid rgba(33,32,29,0.16);
  border-radius:8px; transform:translateY(0) rotateX(0) rotateY(0);
  box-shadow:4px 5px 0 rgba(33,32,29,0.14);
  transform-style:preserve-3d;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.box:hover{transform:translateY(-5px) rotateX(1deg) rotateY(-1deg); box-shadow:7px 10px 0 rgba(33,32,29,0.16);}
.box a{display:block;}
.box a, .video-card a{position:relative;}
.box img{display:block; width:100%; height:auto; object-fit:contain; transition:transform 0.25s ease;}
.box a:hover img{transform:scale(1.02);}
.watermark{
  position:absolute; right:10px; bottom:10px; z-index:1;
  color:rgba(255,255,255,0.78); font-family:'Space Mono', monospace;
  font-size:0.65rem; letter-spacing:0.04em; text-shadow:1px 1px 3px rgba(0,0,0,0.8);
  pointer-events:none; user-select:none;
}
.video-card > a > .watermark{display:none;}
.box > a > .watermark{display:none;}
.media-viewer{display:none; position:fixed; inset:0; z-index:100; align-items:center; justify-content:center; padding:30px; background:rgba(33,32,29,0.86);}
.media-viewer.is-open{display:flex;}
.media-viewer-content{max-width:min(1000px, 92vw); max-height:88vh;}
.viewer-media{position:relative; max-width:92vw; max-height:88vh;}
.media-viewer-content img, .media-viewer-content video{display:block; max-width:92vw; max-height:88vh; width:auto; height:auto; border:2px solid var(--paper); border-radius:4px;}
.viewer-media .watermark{right:10px; bottom:10px; font-size:0.8rem;}
.media-viewer-close{position:absolute; top:18px; right:24px; border:0; background:transparent; color:var(--paper); font-size:2rem; line-height:1; cursor:pointer;}
.media-viewer-fullscreen{position:absolute; top:20px; left:24px; z-index:1; padding:6px 10px; border:1px solid var(--paper); border-radius:4px; background:rgba(33,32,29,0.7); color:var(--paper); font:0.7rem 'Space Mono', monospace; cursor:pointer;}
.viewer-media:fullscreen{display:flex; align-items:center; justify-content:center; width:100vw; height:100vh; background:var(--ink);}
.viewer-media:fullscreen video{max-width:100vw; max-height:100vh;}
.caption:empty{display:none;}
.caption:not(:empty){padding:8px 10px; color:var(--muted); font-family:'Space Mono', monospace; font-size:0.72rem; line-height:1.4;}
.video-gallery{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); grid-auto-rows:8px; grid-auto-flow:dense; gap:16px; margin-top:18px;}
.video-card{
  align-self:start; overflow:hidden; margin:0; padding:0;
  background:var(--paper); border:1px solid rgba(33,32,29,0.16);
  border-radius:8px; transform:translateY(0) rotateX(0) rotateY(0);
  box-shadow:4px 5px 0 rgba(33,32,29,0.14);
  transform-style:preserve-3d;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.video-card:hover{transform:translateY(-5px) rotateX(1deg) rotateY(-1deg); box-shadow:7px 10px 0 rgba(33,32,29,0.16);}
.video-card.landscape{grid-column:1 / -1; width:100%;}
.video-card a{display:block; cursor:pointer;}
.video-card video{display:block; width:100%; height:auto; object-fit:contain; background:var(--paper-dark);}
.art, .video{margin-top:18px; aspect-ratio:16/9;}
.art img, .video video, .video iframe{width:100%; height:100%; object-fit:cover; border-radius:3px; border:0;}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} .box:hover, .video-card:hover{transform:none;} }