:root { --barrel-amber: #d28a32; --barrel-cream: #f0dcc0; --barrel-brown: #6d3f20; }
.barrel-project-page { background: #080706; color: #f6f1e8; }
.barrel-project-hero { min-height: 66vh; display: grid; align-items: end; background: radial-gradient(circle at 76% 30%, rgba(210,138,50,.22), transparent 34%), linear-gradient(180deg, rgba(6,5,4,.2), #080706), url('/assets/barrel-pole-table/garage-wide.webp') center/cover; }
.barrel-project-hero > div { width: min(1180px, calc(100% - 2.4rem)); margin: 0 auto; padding: 8.5rem 0 4rem; }
.barrel-project-hero h1 { max-width: 900px; text-shadow: 0 4px 28px #000; }
.barrel-project-hero p:last-child { max-width: 720px; color: #f4e2c8; font-size: clamp(1rem, 2.1vw, 1.3rem); text-shadow: 0 2px 14px #000; }
.barrel-project-page .accent { color: var(--barrel-amber); }
.barrel-project-page .section { border-top: 1px solid rgba(240,220,192,.1); }
.barrel-feature, .origin-grid, .details-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.origin-grid { grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); }
.details-grid { grid-template-columns: minmax(0, 1fr) minmax(270px, .55fr); }
.barrel-copy p, .origin-grid p, .detail-copy p, .process-grid p { color: #c9c1b6; }
.build-photo { position: relative; display: block; width: 100%; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 1.1rem; overflow: hidden; background: #17120d; box-shadow: 0 22px 55px rgba(0,0,0,.45); cursor: zoom-in; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.build-photo::after { content: 'OPEN PHOTO'; position: absolute; right: .75rem; bottom: .75rem; padding: .42rem .55rem; border-radius: .35rem; color: #170f08; background: var(--barrel-amber); font: 800 .62rem/1 ui-monospace, monospace; letter-spacing: .08em; opacity: 0; transform: translateY(4px); transition: .18s ease; }
.build-photo:hover, .build-photo:focus-visible { border-color: var(--barrel-amber); box-shadow: 0 28px 70px rgba(0,0,0,.6), 0 0 28px rgba(210,138,50,.12); outline: none; }
.build-photo:hover::after, .build-photo:focus-visible::after { opacity: 1; transform: none; }
.build-photo img { display: block; width: 100%; height: auto; }
.build-photo-hero img { aspect-ratio: 4/3; object-fit: cover; }
.barrel-origin { background: radial-gradient(circle at 15% 40%, rgba(109,63,32,.18), transparent 35%), #0c0a08; }
.build-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 2rem 0 0; }
.build-specs div { padding: 1rem; border: 1px solid rgba(210,138,50,.24); border-radius: .8rem; background: rgba(255,255,255,.035); }
.build-specs dt { color: var(--barrel-amber); font: 800 .68rem/1.2 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.build-specs dd { margin: .5rem 0 0; color: var(--barrel-cream); font-weight: 700; }
.barrel-process { background: #080706; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.3vw, 2rem); margin-top: 2rem; }
.process-grid article { position: relative; padding: 0 0 1.2rem; }
.process-grid .build-photo img { aspect-ratio: 4/5; object-fit: cover; }
.process-number { display: inline-block; margin-top: 1rem; color: var(--barrel-amber); font: 900 1rem/1 ui-monospace, monospace; }
.process-grid h3 { margin: .45rem 0 .55rem; font-size: clamp(1.25rem, 2vw, 1.7rem); }
.barrel-details { background: linear-gradient(120deg, #100b07, #090806 58%, rgba(210,138,50,.1)); }
.details-grid .tall { max-width: 520px; justify-self: end; }
.barrel-finished { background: #0b0907; }
.finished-grid { display: grid; grid-template-columns: 1.15fr .55fr 1fr; gap: 1rem; margin-top: 2rem; align-items: stretch; }
.finished-grid .build-photo img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; }
.finished-grid .wide img { object-position: center; }
.build-lightbox { width: min(1100px, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); padding: 0; border: 1px solid rgba(210,138,50,.5); border-radius: 1.1rem; background: #0b0907; color: #fff; box-shadow: 0 35px 95px rgba(0,0,0,.82); overflow: hidden; }
.build-lightbox::backdrop { background: rgba(0,0,0,.88); backdrop-filter: blur(10px); }
.build-lightbox img { display: block; width: 100%; max-height: 78svh; object-fit: contain; background: #111; }
.build-lightbox p { margin: 0; padding: 1rem 4.5rem; color: var(--barrel-cream); text-align: center; }
.build-lightbox-close { position: absolute; z-index: 2; top: .75rem; right: .75rem; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; background: rgba(0,0,0,.78); font: 400 2rem/1 system-ui; cursor: pointer; }
.build-lightbox-close:hover { border-color: var(--barrel-amber); color: var(--barrel-amber); }
@media (max-width: 820px) {
  .barrel-feature, .origin-grid, .details-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid article { max-width: 620px; }
  .finished-grid { grid-template-columns: 1fr 1fr; }
  .finished-grid .wide { grid-column: 1 / -1; }
  .details-grid .tall { justify-self: start; }
}
@media (max-width: 560px) {
  .barrel-project-hero { min-height: 76svh; background-position: 60% center; }
  .build-specs, .finished-grid { grid-template-columns: 1fr; }
  .finished-grid .wide { grid-column: auto; }
  .finished-grid .build-photo img { min-height: 0; height: auto; }
}
@media (prefers-reduced-motion: reduce) { .build-photo { transition: none; } }