/* ============================================================
   theme.css — final baked dark theme for kail-patruck.com
   (loaded after the inline kp-gallery styles on every page)
   ============================================================ */
:root{
  --tw-bg:#171717;
  --tw-tint:#212121;
  --tw-tint-op:1;
  --tw-bg-image:url("/images/bg-s.webp");
  --tw-bg-size:cover;
  --tw-bg-blur:0px;
  --tw-bg-scale:1;
  --tw-nav-scale:1.4;
  --tw-tint-w:54rem;
  --tw-tint-radius:18px;
  --tw-heading:#ffffff;
  --tw-text:#e9e9ea;
  --tw-muted:#9a9aa0;
  --tw-link:#ffffff;
  --tw-h-tracking:-0.05em;
  --tw-h-size:3rem;
  --tw-body-tracking:-0.005em;
  --tw-body-leading:1.45;
  --tw-avatar:5.5rem;
  --tw-book-h:280px;
  --tw-fav-h:200px;
  --tw-proj-w:208px;
  --tw-icon-scale:1.35;
  --tw-section-gap:3.5rem;
}

/* ---- page + fixed background image layer ---- */
body{ background-color:var(--tw-bg)!important; padding-top:5rem; }
body::before{
  content:"";position:fixed;inset:calc(-1 * (var(--tw-bg-blur) + 6px));z-index:-1;
  background-image:var(--tw-bg-image);background-size:var(--tw-bg-size);
  background-position:center center;background-repeat:no-repeat;
  filter:blur(var(--tw-bg-blur));pointer-events:none;
  transform:scale(var(--tw-bg-scale));transform-origin:center center;will-change:transform;
}

/* ---- tinted panel behind the sections ----
   outer gap (page->panel) symmetric 5rem via body padding;
   inner gap (panel->content) uniform ~2rem (matches section px). */
main{
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 260px),color-mix(in srgb,var(--tw-tint) calc(var(--tw-tint-op) * 100%),transparent);
  width:100%;
  max-width:var(--tw-tint-w);
  margin-inline:auto;
  border-radius:var(--tw-tint-radius);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.85),0 2px 0 rgba(255,255,255,.02) inset;
  gap:var(--tw-section-gap)!important;
  padding-block:2rem!important;
  justify-content:flex-start!important;
}
@media(max-width:639px){ main{padding-block:1.25rem!important} }

/* ---- text colours ---- */
main section>h2,.kp-pagehead h2{color:var(--tw-heading)!important}
.book-cap .bt,.fcard__n,#proj-grid .pcover-cap .pt{color:var(--tw-heading)!important}
.book-cap .ba,.fcard__c,#proj-grid .pcover-cap .ps,.kp-pagehead p,.stack-cat-label{color:var(--tw-muted)!important}
.prose,.prose p{color:var(--tw-text)!important}
.prose a{color:var(--tw-link)!important;text-decoration-color:color-mix(in srgb,var(--tw-link) 55%,transparent)!important}

/* ---- dark fixes for hardcoded light values ---- */
.book__c::after{background:linear-gradient(#34383b,#202326)!important}
.prose .hl{background:color-mix(in srgb,#fff 8%,transparent);color:var(--tw-heading);border:1px solid color-mix(in srgb,#fff 14%,transparent);border-radius:999px;padding:2px 11px;font-size:.9em;line-height:1;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.3)}
.fcard{background:#26282b!important;border-color:rgba(255,255,255,.08)!important}
.seeall-row{border-bottom-color:rgba(255,255,255,.1)!important}
.seeall-row:hover{color:#fafafa!important}
.kp-switch{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.08)!important}
.kp-switch-pill{background:#f4f4f5!important}
.kp-switch-tab{color:var(--tw-muted)!important}
.kp-switch-tab.active{color:#171717!important}

/* ---- typography (Didot headings) ---- */
main section>h2{
  font-family:Didot,"Bodoni 72","Bodoni MT","Didot LT STD",Georgia,serif!important;
  font-weight:500!important;font-size:var(--tw-h-size)!important;letter-spacing:var(--tw-h-tracking)!important;
}
.kp-pagehead{align-items:center!important;text-align:center!important;margin:1.5rem 0 2.75rem!important}
.kp-pagehead h2{
  font-family:Didot,"Bodoni 72","Bodoni MT","Didot LT STD",Georgia,serif!important;
  font-weight:500!important;font-size:var(--tw-h-size)!important;letter-spacing:var(--tw-h-tracking)!important;
}
.prose,.prose p{letter-spacing:var(--tw-body-tracking)!important;line-height:var(--tw-body-leading)!important}

/* ---- element sizing ---- */

.book__c img{height:var(--tw-book-h)!important}
.books-cols .book-item{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important}
.books-cols .book__c img{height:220px!important;width:auto!important;max-width:100%!important;margin:0 auto!important}
.books-cols .fav-item{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important}
.books-cols .fav-item .prod__c{height:150px!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.books-cols .fav-item .prod__c img{max-height:100%!important;max-width:100%!important;width:auto!important;height:auto!important;object-fit:contain!important}
.home-grid .fav-item{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important}
.home-grid .fav-item .prod__c{height:158px!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.home-grid .fav-item .prod__c img{max-height:100%!important;max-width:100%!important;width:auto!important;object-fit:contain!important}
.fav-item .prod__c img{max-height:var(--tw-fav-h)!important}
#proj-grid{flex-wrap:wrap;justify-content:center}
#proj-grid .pcover{flex:0 0 var(--tw-proj-w);max-width:var(--tw-proj-w)}
.dock-scroll [data-magnify]{
  zoom:var(--tw-icon-scale);
  background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.08)!important;
  box-shadow:0 14px 38px -12px rgba(0,0,0,.6)!important;
}
#dock{zoom:var(--tw-nav-scale)}
#dock a,#dock div,.dock-scroll [data-magnify] a{will-change:auto!important}

/* ============================================================
   Identity card — V2 Editorial Masthead (name as hero)
   ============================================================ */
.id-mast{text-align:center;padding:1rem .5rem}
.id-mast .mast-ava{width:66px!important;height:66px!important;border-radius:999px;object-fit:cover;display:block;margin:0 auto 1rem;box-shadow:0 0 0 1px color-mix(in srgb,var(--tw-heading) 16%,transparent),0 18px 40px -22px rgba(0,0,0,.9)}
.id-mast .mast-kick{font-family:ui-monospace,"Geist Mono","SF Mono",Menlo,monospace;font-size:.66rem;letter-spacing:.36em;text-transform:uppercase;color:var(--tw-muted);display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.1rem}
.id-mast .mast-kick::before,.id-mast .mast-kick::after{content:"";height:1px;width:44px;background:color-mix(in srgb,var(--tw-heading) 20%,transparent)}
.id-mast .mast-name{font-family:Didot,"Bodoni 72","Bodoni MT","Didot LT STD",Georgia,serif;font-weight:500;font-size:3.5rem;line-height:.96;letter-spacing:-.04em;color:var(--tw-heading);margin:0}
.id-mast .mast-name span{display:block}
.id-mast .mast-title{font-family:ui-monospace,"Geist Mono","SF Mono",Menlo,monospace;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--tw-muted);margin:1.1rem 0 0}
.id-mast .mast-socs{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem;font-family:ui-monospace,"Geist Mono","SF Mono",Menlo,monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.id-mast .mast-socs a{color:var(--tw-text);display:inline-flex;align-items:center;gap:.45rem;transition:color .2s;text-decoration:none}
.id-mast .mast-socs a:hover{color:var(--tw-heading)}
.id-mast .mast-socs svg{width:14px;height:14px}
.id-mast .mast-socs i{width:3px;height:3px;border-radius:999px;background:color-mix(in srgb,var(--tw-heading) 32%,transparent)}
@media(max-width:640px){.id-mast .mast-name{font-size:2.7rem}}

/* stack docks: show shadow + group labels with their row */
.dock-scroll{overflow:visible!important}
.kp-dock-panel + .stack-cat-label{margin-top:2.25rem!important}
.dock-tip-host a{border:none!important;background:transparent!important}

main section>h2{margin-bottom:.5rem!important}

/* align masonry columns (books + favorites): no stagger */
/* subpage books/favorites: flat responsive grid (3-up desktop) */
.books-cols{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2.4rem 1.4rem!important;align-items:start!important;background:none!important;padding:0!important}
.books-cols .book-item,.books-cols .fav-item{padding:0 .25rem}
/* home preview grids (books + favorites): 4-up desktop / 2-up mobile */
.home-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1.3rem 1rem!important;align-items:start!important}
.home-grid>div{flex:none!important;min-width:0!important}
/* home About: tighten gap under masthead */
main section.home-about{margin-top:-2.25rem!important}
/* home stack preview: 5 icons spread across full width */
.dock-scroll .home-stack{justify-content:center!important;gap:.55rem!important}

.fav-item img[src*="vitruvian"]{max-height:155px!important}


/* ===== mobile (<=640px) ===== */
@media(max-width:640px){
  html,body{overflow-x:hidden!important}
  #dock{zoom:1!important}
  .dock-scroll{overflow:visible!important;padding:.5rem 0!important}
  .dock-scroll [data-magnify]{zoom:1!important}
  /* kill dock magnify hover/zoom on touch (JS also skips init <=640px) */
  [data-magnify] a{transform:none!important}
  [data-magnify] *{will-change:auto!important}
  .dock-tip{display:none!important}

  /* home preview + subpage grids -> 2 columns */
  .home-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .books-cols{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1.8rem 1.1rem!important}
  .books-cols .book__c img{height:165px!important}
  .books-cols .fav-item .prod__c{height:122px!important}

  /* stack SUBPAGE: exactly 3 icons per row */
  .kp-dock-panel [data-magnify]{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:.6rem!important;width:100%!important;max-width:300px!important;margin:0 auto!important;align-items:center!important;justify-items:center!important;padding:.9rem!important}
  .kp-dock-panel .dock-tip-host{width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .kp-dock-panel .dock-tip-host a{width:100%!important;max-width:70px!important;height:auto!important;aspect-ratio:1/1!important;margin:0!important}
  .kp-dock-panel .dock-tip-host a img{width:100%!important;height:100%!important;object-fit:cover!important}

  /* masthead name + home stack preview row of 5 */
  .id-mast .mast-name{font-size:2.7rem}
  .dock-scroll .home-stack{width:100%!important;max-width:100%!important;justify-content:space-between!important;gap:.4rem!important;padding:.7rem .7rem!important}
  .home-stack .dock-tip-host{flex:1 1 0!important;min-width:0!important}
  .home-stack .dock-tip-host a{width:100%!important;height:auto!important;max-width:58px!important;aspect-ratio:1/1!important;margin:0 auto!important}
  .home-stack .dock-tip-host a img{width:100%!important;height:100%!important;object-fit:cover!important}
  .home-grid .fav-item .prod__c{height:118px!important}
}