/* Barkley showcase page. Copyright (c) 2026 OptimaTech Labs, LLC */
:root{
  --paper:#f4f1ea; --surface:#fbfaf6; --ink:#161b20; --muted:#5b6269; --rule:#d9d3c7;
  --accent:#1f4f8f; --pine:#2c6b45; --honey:#e09a3e; --honey-soft:#fbead2;
  --night:#14191e; --night-2:#1d242b; --night-ink:#ece7dc; --night-muted:#a3a9ae;
  --shadow:0 24px 60px -28px rgba(22,27,32,.45);
  --display:'Zilla Slab',Georgia,serif; --body:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img,video{max-width:100%; display:block}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.01em; line-height:1.05; text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px; margin-inline:auto; padding-inline:clamp(16px,4vw,40px)}
section{padding-block:clamp(56px,8vw,104px); border-top:1px solid var(--rule)}
.eyebrow{font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.section-head{display:flex; flex-direction:column; gap:12px; margin-bottom:clamp(28px,4vw,48px); max-width:64ch}
.section-head h2{font-size:clamp(2rem,3.8vw,3rem)}
.stamps{display:flex; flex-wrap:wrap; gap:8px}
.stamp{font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); border:1.5px solid currentColor; border-radius:3px; padding:3px 8px; white-space:nowrap}
.stamp.lit{color:var(--pine)}
.dark{background:var(--night); color:var(--night-ink); border-top-color:var(--night)}
.dark .eyebrow{color:var(--honey)}
.dark .stamp{color:var(--night-ink)}


/* Hero: dark stage, warm glow behind the player */
.hero{background:radial-gradient(900px 500px at 78% 40%, rgba(224,154,62,.28), transparent 60%), radial-gradient(700px 400px at 10% 100%, rgba(44,107,69,.35), transparent 60%), var(--night); color:var(--night-ink); padding-block:clamp(56px,8vw,112px)}
.hero-grid{display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(28px,5vw,64px); align-items:center}
.hero .eyebrow{color:var(--honey)}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.6rem); margin:14px 0 20px}
.hero h1 em{font-style:italic; font-weight:500; color:var(--honey)}
.lede{font-size:1.15rem; color:var(--night-muted); max-width:46ch; margin-bottom:24px}
.hero .stamp{color:var(--night-ink)}
.hero .stamp.lit{color:#7fd19b}
.player{position:relative}
.player video{width:100%; aspect-ratio:16/9; border-radius:14px; background:#000; box-shadow:0 40px 90px -30px rgba(224,154,62,.45), 0 0 0 1px rgba(255,255,255,.08); transform:rotate(-.6deg)}
.player-note{font-family:var(--mono); font-size:.72rem; color:var(--night-muted); margin-top:14px; letter-spacing:.04em}

/* Stats */
.stats{padding-block:0; background:var(--honey-soft); border-top:0}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr)}
.stat-row div{padding:28px 20px; border-left:1px solid rgba(22,27,32,.12); display:flex; flex-direction:column; gap:6px}
.stat-row div:first-child{border-left:0}
.stat-row b{font-family:var(--display); font-size:clamp(2.2rem,4vw,3.2rem); line-height:1; color:var(--pine)}
.stat-row span{font-size:.9rem; color:var(--muted)}

/* Chapters */
.chapters{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.chapters button{all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"n t ts" "n d d"; gap:2px 16px; padding:18px 20px; background:var(--surface); border:1px solid var(--rule); border-radius:10px; transition:transform .15s, box-shadow .15s, border-color .15s}
.chapters button:hover,.chapters button:focus-visible{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--honey)}
.chapters .n{grid-area:n; font-family:var(--display); font-size:1.8rem; font-weight:700; color:var(--honey); line-height:1}
.chapters .t{grid-area:t; font-weight:600}
.chapters .d{grid-area:d; font-size:.92rem; color:var(--muted)}
.chapters .ts{grid-area:ts; font-family:var(--mono); font-size:.75rem; color:var(--pine)}
.chapters .ts::before{content:"▶ "}

/* Gallery */
.gallery-band{padding-top:0; border-top:0}
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.gallery figure{margin:0; background:var(--surface); padding:10px 10px 14px; border-radius:6px; box-shadow:var(--shadow); transition:transform .2s}
.gallery figure:nth-child(odd){transform:rotate(-1.4deg)}
.gallery figure:nth-child(even){transform:rotate(1.2deg) translateY(10px)}
.gallery figure:hover{transform:rotate(0) scale(1.04); z-index:2; position:relative}
.gallery img{border-radius:3px; aspect-ratio:16/10; object-fit:cover; width:100%}
.gallery figcaption{font-family:var(--display); font-style:italic; font-size:1rem; margin-top:10px; text-align:center}

/* Under the hood */
.hood-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:10px; overflow:hidden}
.hood-grid article{background:var(--night-2); padding:26px 24px}
.hood-grid article:first-child{background:linear-gradient(135deg, rgba(224,154,62,.22), var(--night-2) 70%)}
.hood-grid h3{font-size:1.35rem; margin-bottom:10px}
.hood-grid p{color:var(--night-muted); font-size:.95rem}

/* Why */
.why-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(24px,5vw,64px); align-items:start}
.why-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px}
.why-list li{padding-left:22px; border-left:3px solid var(--honey); color:var(--muted)}
.why-list b{color:var(--ink); display:block; font-size:1.1rem}

/* CTA */
.cta{background:radial-gradient(700px 300px at 50% 0%, rgba(224,154,62,.3), transparent 70%), var(--night)}
.cta-inner{text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px}
.cta h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.cta p{color:var(--night-muted); font-size:1.1rem}
.btn{margin-top:8px; display:inline-block; background:var(--honey); color:var(--ink); text-decoration:none; font-weight:600; padding:14px 26px; border-radius:6px}
.btn:hover{background:#eeb062}

/* Top bar and footer */
.topbar{background:var(--night); border-bottom:1px solid rgba(255,255,255,.08)}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:14px}
.wordmark{display:inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--night-ink); text-decoration:none}
.topbar-link{font-size:.9rem; color:var(--night-muted); text-decoration:none}
.topbar-link:hover{color:var(--night-ink)}
.foot{padding-block:28px; font-size:.85rem; color:var(--muted); border-top:1px solid var(--rule)}
.foot a{color:var(--accent)}
.chapters li:last-child:nth-child(odd){grid-column:1 / -1}

@media (max-width:860px){
  .hero-grid,.why-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .stat-row div:nth-child(3){border-left:0}
  .chapters{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .hood-grid{grid-template-columns:1fr}
}