/* Wil DeBoer portfolio — clean, neutral, image-led */
:root{--ink:#ece7db;--muted:#a8a094;--line:#3d3a44;--bg:#27252d;--soft:#322f3a;--accent:#ece7db}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
main{max-width:1120px;margin:0 auto;padding:0 24px 80px}
h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;margin:.4em 0 .5em;letter-spacing:-.01em}
h2{font-size:1.35rem;margin:2em 0 .6em}
p{margin:0 0 1em}
.site-header{position:sticky;top:0;z-index:50;background:#9bbb59;border-bottom:1px solid #8aa84e;color:#27252d}
.site-header a{color:#27252d}
.dropdown a{color:var(--ink)}
.header-inner{max-width:1120px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-weight:700;font-size:1.15rem;text-decoration:none;letter-spacing:-.01em}
.nav-list{list-style:none;display:flex;gap:26px;margin:0;padding:0}
.nav-list a{text-decoration:none;font-size:.95rem}
.nav-list a:hover{text-decoration:underline}
.has-drop{position:relative}
.dropdown{display:none;position:absolute;right:0;top:100%;background:#2e2b34;border:1px solid var(--line);list-style:none;margin:0;padding:8px 0;min-width:260px;box-shadow:0 12px 32px rgba(0,0,0,.12)}
.has-drop:hover .dropdown,.has-drop:focus-within .dropdown{display:block}
.dropdown a{display:block;padding:8px 18px}
.intro h1{margin-top:28px;font-size:clamp(1.4rem,2.8vw,1.9rem);font-weight:500}
.intro p{max-width:760px}
.hero{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;padding:24px 0 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hero::-webkit-scrollbar{display:none}
.hero-wrap{position:relative}
.hero-slide{position:relative;flex:0 0 100%;scroll-snap-align:start;text-decoration:none;border-radius:6px;overflow:hidden;background:var(--soft)}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;border:none;background:rgba(39,37,45,.55);color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hero-arrow:hover{background:rgba(39,37,45,.85)}
.hero-arrow:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hero-prev{left:14px}
.hero-next{right:14px}
.hero-slide img{width:100%;height:clamp(440px,72vh,780px);object-fit:cover}
.hero-slide img.pos-left{object-position:15% 50%}
.hero-caption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 18px;color:#9bbb59;background:rgba(39,37,45,.7);font-size:1.05rem}
.hero-caption em{font-style:normal;font-size:.85rem;opacity:.9}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px}
.tile{display:block;text-decoration:none}
.tile-img{display:block;overflow:hidden;border-radius:6px;background:var(--bg);aspect-ratio:4/3}
section.featured .tile-img{background:#080808}
section.featured .tile-img.bg-mint{background:#7cba9a}
.tile-img img{width:calc(100% + 2px);height:calc(100% + 2px);margin:-1px;object-fit:cover;transition:transform .35s ease}
.tile:hover .tile-img img{transform:scale(1.03)}
section.featured .tile-img img{transform:scale(var(--zoom,1.5))}
section.featured .tile:hover .tile-img img{transform:scale(calc(var(--zoom,1.5)*1.08))}
section.featured .tile.tz-flat{--zoom:1}
section.featured .tile.zoom-out{--zoom:.7}
section.featured .tile.zoom-in{--zoom:1.08}
section.featured .tile.pos-top .tile-img img{object-position:50% 0%}
section.featured .tile.pos-left .tile-img img{object-position:0% 50%}
section.featured .tile.pos-down .tile-img img{object-position:50% 25%}
.feat-wrap{position:relative}
.feat-strip{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.feat-strip::-webkit-scrollbar{display:none}
.feat-strip .tile{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start}
.feat-arrow{position:absolute;top:36%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;border:none;background:rgba(39,37,45,.55);color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.feat-arrow:hover{background:rgba(39,37,45,.85)}
.feat-arrow:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.feat-prev{left:6px}
.feat-next{right:6px}
@media (max-width:860px){.feat-strip .tile{flex-basis:76%}}
.tile-title{display:block;font-weight:600;margin-top:10px}
.tile-cat{display:block;color:var(--muted);font-size:.85rem}
.featured{color:#9bbb59}
.cat-links{font-size:1.05rem}
.cat-links a{color:var(--muted);text-decoration:none}
.cat-links a:visited{color:#7e7769}
.cat-links a:hover,.cat-links a:active{color:var(--ink);text-decoration:none}
.page-head{padding:28px 0 8px}
.crumb{color:var(--muted);font-size:.9rem;margin-bottom:6px}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.prose{max-width:760px}
.prose h2{margin-top:1.6em}
.gallery{display:flex;flex-direction:column;gap:28px;margin-top:32px}
.gallery img{width:100%;border-radius:4px;background:var(--soft)}
/* One-at-a-time deck carousel (concept decks, theme guides) */
.deck-wrap{position:relative}
.deck-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:6px}
.deck-track::-webkit-scrollbar{display:none}
.deck-track img{flex:0 0 100%;scroll-snap-align:start;width:100%;border-radius:6px;background:var(--soft)}
.deck-prev,.deck-next{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;border:none;background:rgba(39,37,45,.55);color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.deck-prev:hover,.deck-next:hover{background:rgba(39,37,45,.85)}
.deck-prev{left:14px}
.deck-next{right:14px}
.deck-count{position:absolute;bottom:12px;right:16px;background:rgba(39,37,45,.7);color:var(--ink);font-size:.85rem;padding:4px 10px;border-radius:20px}
.gallery img.banner-sm{max-width:840px;align-self:center}
/* Lightbox gallery: grid of thumbs, click for full viewer with arrows */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery-grid img{aspect-ratio:4/3;object-fit:cover}
.gallery-grid img.lb-thumb{cursor:zoom-in;transition:transform .3s ease}
.gallery-grid img.lb-thumb:hover{transform:scale(1.03)}
.lightbox{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(39,37,45,.7)}
.lightbox.open{display:flex}
.lightbox>img{max-width:90vw;max-height:84vh;border-radius:6px;object-fit:contain}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:none;background:rgba(39,37,45,.7);color:var(--ink);font-size:1.8rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-prev:hover,.lb-next:hover{background:rgba(39,37,45,.95)}
.lb-prev{left:18px}
.lb-next{right:18px}
.lb-close{position:absolute;top:14px;right:20px;background:none;border:none;color:var(--ink);font-size:2.2rem;line-height:1;cursor:pointer}
.lb-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:.9rem}
@media (max-width:860px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:12px}.lb-prev{left:8px}.lb-next{right:8px}}
.gallery-h{margin-top:2.2em}
.note{color:var(--muted);font-style:italic}
.prevnext{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:56px;padding-top:20px}
.prevnext a{text-decoration:none;font-weight:600}
.prevnext a:hover{text-decoration:underline}
.site-footer{border-top:1px solid var(--line);padding:28px 24px 40px;text-align:center;color:var(--muted);font-size:.92rem}
.site-footer p{margin:.2em 0}
.site-footer .fine{font-size:.8rem}
a:focus-visible,.tile:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}.hero-slide{flex-basis:100%}.hero-slide img{height:clamp(300px,54vh,520px)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}body{font-size:16px}.nav-list{gap:16px}.dropdown{min-width:210px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tile-img img{transition:none}}