:root{
  --paper:#f5eee2;
  --paper-deep:#e8dcc9;
  --ink:#382922;
  --muted:#7c6759;
  --red:#982f27;
  --red-dark:#6f211c;
  --plaid:#b96458;
  --line:rgba(92,57,41,.24);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-width:320px;
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 16% 7%,rgba(255,255,255,.72),transparent 25%),
    repeating-linear-gradient(0deg,rgba(111,75,50,.025) 0 1px,transparent 1px 5px),
    var(--paper);
  font-family:"PingFang SC","Noto Serif SC",Georgia,serif;
}
.thread-line{
  position:fixed;
  top:0;
  bottom:0;
  left:clamp(14px,2.2vw,38px);
  width:2px;
  background:var(--red);
  box-shadow:0 0 0 1px rgba(255,255,255,.45);
  z-index:10;
  pointer-events:none;
}
.thread-line::before,.thread-line::after{
  content:"";
  position:absolute;
  left:50%;
  width:10px;
  height:10px;
  border:2px solid var(--red);
  border-radius:50%;
  background:var(--paper);
  transform:translateX(-50%);
}
.thread-line::before{top:28px}.thread-line::after{bottom:28px}
.archive-header,.stills-archive,.archive-footer{
  width:min(1440px,calc(100% - clamp(52px,8vw,126px)));
  margin-inline:auto;
}
.archive-header{padding:30px 0 58px}
.archive-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font:600 11px/1.2 ui-monospace,"SFMono-Regular",Menlo,monospace;
  letter-spacing:.13em;
}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:inherit;
  text-decoration:none;
  transition:color .2s ease,transform .2s ease;
}
.back-link span{font:24px/1 Georgia,serif}
.back-link:hover,.back-link:focus-visible{color:var(--red);transform:translateX(-3px);outline:none}
.title-card{
  position:relative;
  max-width:940px;
  margin:clamp(55px,9vw,118px) auto 0;
  padding:clamp(34px,6vw,72px);
  text-align:center;
  background:
    linear-gradient(115deg,rgba(255,255,255,.42),transparent 38%),
    #eadcc7;
  border:1px solid rgba(111,64,42,.35);
  box-shadow:0 18px 50px rgba(75,43,27,.10),inset 0 0 0 6px rgba(255,249,238,.33);
  transform:rotate(-.35deg);
}
.title-card::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px dashed rgba(152,47,39,.55);
  pointer-events:none;
}
.archive-kicker{
  margin:0 0 20px;
  color:var(--red);
  font:700 11px/1.2 ui-monospace,"SFMono-Regular",Menlo,monospace;
  letter-spacing:.18em;
}
h1{
  margin:0;
  font:500 clamp(42px,7.4vw,96px)/1.04 Georgia,"Noto Serif SC",serif;
  letter-spacing:-.055em;
}
.archive-intro{
  margin:23px 0 0;
  color:var(--muted);
  font:500 clamp(11px,1.2vw,14px)/1.7 ui-monospace,"SFMono-Regular",Menlo,monospace;
  letter-spacing:.13em;
}
.stitch-mark{
  position:absolute;
  right:33px;
  bottom:25px;
  width:48px;
  height:12px;
  border-top:2px solid var(--red);
  border-bottom:2px solid var(--red);
  transform:rotate(-7deg);
}
.project-section{margin:0 0 clamp(80px,12vw,160px)}
.project-heading{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  margin:0 0 22px;
}
.project-index{
  display:grid;
  place-items:center;
  width:48px;
  height:34px;
  color:#fff9ef;
  background:var(--red);
  font:700 12px/1 ui-monospace,"SFMono-Regular",Menlo,monospace;
  transform:rotate(-2deg);
}
.project-heading h2{
  margin:0;
  font:500 clamp(24px,3.4vw,46px)/1.12 Georgia,"Noto Serif SC",serif;
  letter-spacing:-.035em;
}
.project-meta{
  color:var(--muted);
  font:600 10px/1.2 ui-monospace,"SFMono-Regular",Menlo,monospace;
  letter-spacing:.15em;
}
.project-board{
  position:relative;
  padding:clamp(18px,2.2vw,32px);
  border:10px solid #846f5e;
  background:
    repeating-linear-gradient(0deg,transparent 0 35px,rgba(132,40,33,.19) 35px 39px,transparent 39px 75px),
    repeating-linear-gradient(90deg,transparent 0 46px,rgba(132,40,33,.18) 46px 50px,transparent 50px 96px),
    #d6bca4;
  box-shadow:0 24px 60px rgba(68,42,29,.16),inset 0 0 0 1px rgba(255,255,255,.34);
}
.project-board::after{
  content:"";
  position:absolute;
  inset:7px;
  border:1px dashed rgba(255,247,230,.46);
  pointer-events:none;
}
.frame-grid{position:relative;z-index:1;display:grid;gap:clamp(13px,1.8vw,25px)}
.frame-grid.landscape{grid-template-columns:repeat(2,minmax(0,1fr))}
.frame-grid.landscape .frame-card:first-child{grid-column:1/-1}
.frame-grid.portrait{grid-template-columns:repeat(5,minmax(0,1fr))}
.frame-card{
  position:relative;
  min-width:0;
  padding:clamp(7px,.8vw,11px);
  color:inherit;
  background:#fbf5ea;
  border:0;
  box-shadow:0 9px 24px rgba(68,39,25,.20);
  cursor:zoom-in;
  transform:rotate(var(--frame-rotate,0deg));
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .22s ease,filter .22s ease;
}
.frame-card:nth-child(3n+1){--frame-rotate:-.35deg}
.frame-card:nth-child(3n+2){--frame-rotate:.3deg}
.frame-card:nth-child(3n){--frame-rotate:-.15deg}
.frame-card:hover,.frame-card:focus-visible{
  z-index:4;
  outline:none;
  transform:rotate(0deg) translateY(-7px) scale(1.018);
  box-shadow:0 18px 34px rgba(65,35,22,.28),0 0 0 4px #fff;
}
.frame-card img{
  display:block;
  width:100%;
  height:auto;
  background:#241a18;
}
.frame-index{
  display:block;
  padding:8px 3px 1px;
  color:var(--muted);
  text-align:right;
  font:600 9px/1 ui-monospace,"SFMono-Regular",Menlo,monospace;
  letter-spacing:.12em;
}
.archive-footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:0 0 46px;
  color:var(--muted);
  font:600 10px/1.4 ui-monospace,"SFMono-Regular",Menlo,monospace;
  letter-spacing:.14em;
}
.archive-footer a{color:var(--red);text-decoration:none}
.lightbox{
  width:100vw;
  max-width:none;
  height:100vh;
  max-height:none;
  margin:0;
  padding:0;
  color:#fff9ef;
  background:rgba(34,21,18,.96);
  border:0;
}
.lightbox::backdrop{background:rgba(28,17,14,.88);backdrop-filter:blur(8px)}
.lightbox-shell{
  position:relative;
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 64px;
  align-items:center;
  width:100%;
  height:100%;
  padding:clamp(18px,3vw,46px);
}
.lightbox figure{display:grid;place-items:center;gap:16px;min-width:0;margin:0}
.lightbox figure img{
  display:block;
  max-width:min(82vw,1500px);
  max-height:82vh;
  object-fit:contain;
  border:8px solid #f7eee2;
  box-shadow:0 22px 70px rgba(0,0,0,.45);
}
.lightbox figcaption{
  display:flex;
  justify-content:space-between;
  width:min(82vw,1500px);
  color:#e8d8c6;
  font:600 11px/1.4 ui-monospace,"SFMono-Regular",Menlo,monospace;
  letter-spacing:.12em;
}
.lightbox-close,.lightbox-arrow{
  color:#fff9ef;
  background:transparent;
  border:1px solid rgba(255,255,255,.38);
  cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.lightbox-close:hover,.lightbox-arrow:hover,.lightbox-close:focus-visible,.lightbox-arrow:focus-visible{background:var(--red);outline:none}
.lightbox-close{
  position:absolute;
  top:24px;
  right:26px;
  z-index:3;
  width:44px;
  height:44px;
  border-radius:50%;
  font:30px/1 Georgia,serif;
}
.lightbox-arrow{width:48px;height:48px;border-radius:50%;font:24px/1 Georgia,serif}
@media (max-width:760px){
  .archive-count{display:none}
  .archive-header{padding-top:24px}
  .title-card{margin-top:44px;padding:42px 24px}
  .project-heading{grid-template-columns:auto 1fr}
  .project-meta{grid-column:2}
  .project-board{border-width:7px}
  .frame-grid.landscape{grid-template-columns:1fr}
  .frame-grid.landscape .frame-card:first-child{grid-column:auto}
  .frame-grid.portrait{
    display:flex;
    gap:15px;
    overflow-x:auto;
    padding:3px 3px 18px;
    scroll-snap-type:x mandatory;
  }
  .frame-grid.portrait .frame-card{flex:0 0 min(66vw,280px);scroll-snap-align:center}
  .archive-footer{flex-direction:column}
  .lightbox-shell{grid-template-columns:46px minmax(0,1fr) 46px;padding:14px 8px}
  .lightbox figure img{max-width:calc(100vw - 112px);max-height:78vh;border-width:5px}
  .lightbox figcaption{width:calc(100vw - 112px);font-size:8px;gap:12px}
  .lightbox-arrow{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .frame-card,.back-link,.lightbox-close,.lightbox-arrow{transition:none}
}