:root{
  --bg:#141311;
  --paper:#ECE7DC;
  --accent:#C1272D;
  --grey:#8B887E;
  --line:#38352E;
  --line-light:#43403A;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--paper);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}
::selection{background:var(--accent); color:var(--paper);}

.mono{font-family:'JetBrains Mono',monospace;}
.display{font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.01em;}

a{color:inherit; text-decoration:none;}

/* ---------- FILMSTRIP NAV ---------- */
.filmstrip{
  position:sticky; top:0; z-index:100;
  background:#0E0D0B;
  border-bottom:1px solid var(--line);
  display:flex; align-items:stretch;
  height:64px;
}
.sprockets{
  display:flex; align-items:center; gap:14px;
  padding:0 16px; flex-shrink:0;
  border-right:1px solid var(--line);
}
.sprockets span{
  width:8px; height:8px; border-radius:1px;
  background:var(--line-light);
}
.frames-nav{
  display:flex; overflow-x:auto; flex:1;
  scrollbar-width:none;
}
.frames-nav::-webkit-scrollbar{display:none;}
.frame-tab{
  flex-shrink:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 22px;
  border-right:1px solid var(--line);
  cursor:pointer;
  position:relative;
  transition:background .2s ease;
}
.frame-tab:hover{background:#1C1A16;}
.frame-tab .fn{
  font-size:11px; color:var(--grey); letter-spacing:.05em;
}
.frame-tab .ft{
  font-size:17px; font-weight:600; letter-spacing:.03em;
}
.frame-tab.active .ft{color:var(--accent);}
.frame-tab .bar{
  position:absolute; bottom:0; left:0; height:2px; width:0%;
  background:var(--accent); transition:width .25s ease;
}
.frame-tab.active .bar{width:100%;}
.brandmark{
  display:flex; align-items:center; gap:10px;
  padding:0 20px; flex-shrink:0;
  border-left:1px solid var(--line);
}
.brandmark .dot{width:9px; height:9px; border-radius:50%; background:var(--accent);}
.brandmark span{font-size:15px; letter-spacing:.08em; font-weight:600;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:120px 6vw 80px;
  border-bottom:1px solid var(--line);
}
.hero-top{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:36px; gap:24px; flex-wrap:wrap;
}
.roll-label{
  font-size:13px; color:var(--grey); letter-spacing:.12em;
}
.roll-label .accent-dot{color:var(--accent);}
.hero h1{
  font-size:clamp(52px,9vw,132px);
  line-height:.92;
  font-weight:600;
  max-width:14ch;
  white-space: pre-line;
}
.hero-sub{
  max-width:420px; text-align:right;
  color:var(--grey); font-size:15px; line-height:1.6;
}
.hero-strip{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:1px; background:var(--line);
  margin-top:56px; border:1px solid var(--line);
}
.hero-strip .cell{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:#000;
}
.hero-strip img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transition:filter .5s ease, transform .6s ease;
  display:block;
}
.hero-strip .cell:hover img{filter:grayscale(0); transform:scale(1.04);}
.hero-strip .cell:first-child{grid-column:span 2; grid-row:span 2;}
.hero-strip .fno{
  position:absolute; top:8px; left:10px;
  font-size:11px; color:var(--paper); opacity:.75;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}

/* ---------- SECTION HEADERS ---------- */
.section{padding:90px 6vw; border-bottom:1px solid var(--line);}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:44px; flex-wrap:wrap; gap:16px;
}
.section-head .num{color:var(--grey); font-size:13px; letter-spacing:.1em;}
.section-head h2{font-size:clamp(30px,4vw,52px); font-weight:600;}
.section-head p{color:var(--grey); font-size:14px; max-width:320px;}

/* ---------- GALLERY (masonry via columns) ---------- */
.gallery{
  column-count:3; column-gap:1px;
}
@media (max-width:900px){ .gallery{column-count:2;} }
@media (max-width:560px){ .gallery{column-count:1;} }
.frame{
  break-inside:avoid; margin-bottom:1px;
  position:relative; overflow:hidden; cursor:pointer;
  background:#000;
  border:1px solid var(--line);
}
.frame img{
  width:100%; display:block;
  filter:grayscale(1) contrast(1.05) brightness(.96);
  transition:filter .5s ease, transform .7s ease;
}
.frame:hover img{filter:grayscale(0); transform:scale(1.03);}
.frame-meta{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px;
  display:flex; justify-content:space-between; align-items:flex-end;
  background:linear-gradient(to top, rgba(10,9,7,.85), transparent);
  opacity:0; transition:opacity .3s ease;
}
.frame:hover .frame-meta{opacity:1;}
.frame-meta .title{font-size:14px; font-weight:500;}
.frame-meta .exif{font-size:10px; color:var(--grey); text-align:right; line-height:1.5;}
.frame-index{
  position:absolute; top:10px; left:12px;
  font-size:11px; color:var(--paper);
  background:rgba(10,9,7,.55); padding:2px 7px; border-radius:2px;
}

/* ---------- ABOUT STRIP ---------- */
.about{
  display:grid; grid-template-columns:1fr 1.4fr; gap:60px;
  align-items:start;
}
@media (max-width:800px){ .about{grid-template-columns:1fr;} }
.about-photo{aspect-ratio:3/4; overflow:hidden; border:1px solid var(--line);}
.about-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.about-text p{font-size:19px; line-height:1.65; color:#D9D4C7; margin-bottom:20px; max-width:60ch;}
.about-facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-top:36px; padding-top:24px; border-top:1px solid var(--line);
}
.about-facts div .n{font-size:13px; color:var(--grey);}
.about-facts div .v{font-size:24px; font-weight:600; font-family:'Barlow Condensed',sans-serif;}

/* ---------- FOOTER ---------- */
footer{padding:70px 6vw 40px;}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:24px; margin-bottom:50px;
}
.footer-top h3{font-size:clamp(30px,5vw,56px); font-weight:600; max-width:16ch; white-space:pre-line;}
.footer-links{display:flex; gap:28px; flex-wrap:wrap;}
.footer-links a{font-size:14px; color:var(--grey); border-bottom:1px solid transparent; padding-bottom:2px; transition:.2s;}
.footer-links a:hover{color:var(--paper); border-color:var(--accent);}
.footer-bottom{
  display:flex; justify-content:space-between; color:var(--grey);
  font-size:12px; padding-top:20px; border-top:1px solid var(--line);
  flex-wrap:wrap; gap:10px;
}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; background:rgba(8,7,6,.96);
  display:none; align-items:center; justify-content:center;
  z-index:1000; flex-direction:column; padding:5vh 4vw;
}
.lightbox.open{display:flex;}
.lightbox img{
  max-width:min(84vw, 900px); max-height:68vh; object-fit:contain;
  border:1px solid var(--line-light);
}
.lightbox-info{
  display:flex; justify-content:space-between; width:100%; max-width:900px;
  margin-top:18px; font-size:13px; color:var(--grey);
}
.lightbox-info .lt{color:var(--paper); font-size:16px; font-weight:500;}
.lb-close, .lb-prev, .lb-next{
  position:absolute; background:none; border:1px solid var(--line-light);
  color:var(--paper); width:42px; height:42px; border-radius:50%;
  cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:.2s;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{border-color:var(--accent); color:var(--accent);}
.lb-close{top:26px; right:6vw;}
.lb-prev{left:20px; top:50%; transform:translateY(-50%);}
.lb-next{right:20px; top:50%; transform:translateY(-50%);}
@media (max-width:640px){ .lb-prev,.lb-next{width:34px; height:34px;} }

/* ---------- ADMIN STYLES ---------- */
.admin-layout {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
}
.admin-sidebar {
  width: 250px;
  background: #0E0D0B;
  border-right: 1px solid var(--line);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-sidebar a {
  padding: 10px 15px;
  border-radius: 4px;
  transition: background 0.2s;
  display: block;
}
.admin-sidebar a:hover {
  background: #1C1A16;
  color: var(--accent);
}
.admin-content {
  flex: 1;
  padding: 40px;
  overflow-y: auto;
}
.admin-card {
  background: #0E0D0B;
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}
.admin-input, .admin-textarea {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--paper);
  margin-bottom: 15px;
  font-family: inherit;
}
.admin-textarea {
  min-height: 100px;
  resize: vertical;
}
.admin-btn {
  background: var(--accent);
  color: var(--paper);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.2s;
}
.admin-btn:hover {
  opacity: 0.8;
}
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table th, .admin-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.admin-table th {
  color: var(--grey);
  font-size: 12px;
  font-weight: normal;
}