/* Oryx Design Studio — Minimal Dark Theme */
:root{
  --site-max: min(1400px, 92vw);
  --bg:#474341;
  --panel:#33302E;
  --muted:#FAFAFA;
  --accent:#8AA58E;
  --text:#E8E8E8;
  --text-dim:#B7B7B7;
  --line:#242424;
  --card:#292625;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 'Century Gothic', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;}
a{color:var(--muted);text-decoration:none}
a:hover{opacity:.9}
img{max-width:100%;display:block}
.center{text-align:center}
.mt-32{margin-top:32px}
.site-header{position:sticky;top:0;background:rgba(17,17,17,.9);backdrop-filter:saturate(120%) blur(6px);display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--line);z-index:50}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.brand img{height:34px;width:auto;filter:grayscale(0) brightness(.9)}
.main-nav{display:flex;gap:22px;align-items:center}
.main-nav a{padding:8px 6px;border-radius:0px;transition:background .2s ease}
.main-nav a:hover{background:var(--panel)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:#ccc;margin:4px 0}
.site-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:18px 20px;color:var(--text-dim)}
.site-footer a{color:var(--text-dim)}
.page{padding:24px 20px;max-width: var(--site-max);margin:0 auto}

/* ---------- Puzzle Hero ---------- */
.puzzle-hero{position:relative;margin:0 auto;max-width:1320px;padding:10px 0 28px 0}
.puzzle-grid{display:grid;grid-template-columns:repeat(6, 1fr);grid-auto-rows:90px;gap:10px}
.piece{position:relative;background-size:cover;background-position:center;border-radius:0px;border:1px solid var(--line);overflow:hidden;transform:translateZ(0);transition:transform .35s ease, box-shadow .35s ease, filter .35s ease;opacity:0;transform:translateY(12px)}
.piece:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));opacity:.0;transition:opacity .3s ease}
.piece span{position:absolute;left:10px;bottom:10px;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#e7e7e7;text-shadow:0 1px 0 rgba(0,0,0,.4);opacity:0;transform:translateY(6px);transition:all .25s ease}
.piece:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 30px rgba(0,0,0,.35);filter:brightness(1.05)}
.piece:hover:before{opacity:1}
.piece:hover span{opacity:1;transform:none}
.piece.reveal.in{opacity:1;transform:none}

/* Spans */
.w2{grid-column:span 2}.w1{grid-column:span 1}
.h2{grid-row:span 2}.h1{grid-row:span 1}

/* Clip-path puzzle edges */
.p1{clip-path:path('M10,0 H100% V100% H0 V10 C0,4 4,0 10,0 Z')}
.p2{clip-path:path('M0,0 H100% V90 C100%,96 96,100 90,100 H0 Z')}
.p3{clip-path:path('M0,10 C0,4 4,0 10,0 H100% V100% H10 C4,100 0,96 0,90 Z')}
.p4{clip-path:path('M0,0 H90 C96,0 100,4 100,10 V100% H0 Z')}
.p5{clip-path:path('M10,0 H100% V90 C100%,96 96,100 90,100 H0 V10 C0,4 4,0 10,0 Z')}
.p6{clip-path:path('M0,10 C0,4 4,0 10,0 H90 C96,0 100,4 100,10 V90 C100,96 96,100 90,100 H10 C4,100 0,96 0,90 Z')}

/* Caption */
.puzzle-caption{position:absolute;left:24px;bottom:20px;padding:14px 16px;border-radius:0px;background:rgba(0,0,0,.25);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.06)}
.puzzle-caption h1{margin:0 0 4px 0;font-size:28px}
.puzzle-caption .cta{display:flex;gap:10px;margin-top:10px}
.btn{display:inline-block;background:var(--muted);color:#111;padding:10px 16px;border-radius:0px;border:0;font-weight:700;cursor:pointer}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--muted)}
.btn.ghost:hover{background:var(--muted);color:#111}
.section-title h2{margin:8px 0 14px 0}
.cards,.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:0px;background:var(--card);overflow:hidden;transform:translateZ(0);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.35);border-color:#2a2a2a}
.card-img{padding-top:125%;background-size:cover;background-position:center}
.card-body{padding:10px 10px 10px 10px}
.eyebrow{font-size:12px;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase}
.card h3{margin:6px 0 0 0;font-size:18px}

/* Project */
.project-hero{position:relative;min-height:300px;padding:10px 0 28px 0;background-size:cover;background-position:center;border-radius:0px;overflow:hidden;border:1px solid var(--line);margin-top:8px}
.project-hero .shade{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.6))}
.ph-text{position:absolute;left:30px;bottom:10px}
.project-body{margin-top:24px}
.gallery{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 9 * 5px)/5); /* 10 items per visible row, keeping 5px gap */
  gap:5px;
  overflow-x:auto;
}
.gallery .g-item{
  display:block;
  margin:0; /* avoid second row spacing */
  border-radius:0px;overflow:hidden;border:1px solid var(--line);
}
.gallery img{width:100%;height:auto;display:block;transition:transform .3s ease
  aspect-ratio: 4/5;
  object-fit: cover;
}
.gallery a:hover img{transform:scale(1.02)}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:100}
.lightbox.open{opacity:1;pointer-events:all}
.lightbox img{max-height:88vh;max-width:88vw}

/* Sections & forms */
.page-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0 10px 0}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filters a{padding:8px 12px;border-radius:0px;border:1px solid var(--line);background:var(--panel);color:#ddd}
.filters a.active{background:var(--muted);color:#111;font-weight:bold;border-color:transparent}
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
input,select,textarea{background:#181818;color:#eaeaea;border:1px solid #2a2a2a;border-radius:0px;padding:10px 12px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:#3b3b3b}
.btn.small{padding:6px 10px;font-size:13px}
.btn.danger{background:#b35d5d}
.alert{background:#212121;border:1px solid #333;padding:12px;border-radius:0px;margin:10px 0}
.hp{display:none}
.admin .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.table{display:grid;border:1px solid var(--line);border-radius:0px;overflow:hidden}
.table .thead,.table .trow{display:grid;grid-template-columns:180px 1fr 1fr 1fr 1fr;gap:10px;padding:10px;border-bottom:1px solid var(--line)}
.table .thead{background:#141414;font-weight:700}
.admin .thumbs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.admin .thumbs img{height:64px;width:auto;border-radius:0px;border:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.reveal{opacity:0;transform:translateY(12px);}
.reveal.in{opacity:1;transform:none;transition:all .6s cubic-bezier(.2,.6,.2,1)}
@media (max-width:900px){
  .main-nav{display:none}
  .main-nav.open{display:flex;position:absolute;top:56px;right:10px;flex-direction:column;background:#111;border:1px solid var(--line);padding:8px;border-radius:0px}
  .nav-toggle{display:block}
  .contact-grid{grid-template-columns:1fr}
  .admin .grid-2{grid-template-columns:1fr}
  .table .thead,.table .trow{grid-template-columns:140px 1fr 1fr 1fr}
}


/* ==== New Puzzle Tiles (14 tiles, animated) ==== */
.puzzle-viewport{height:100vh;display:grid;place-items:center;padding:0;margin:0}
.puzzle-grid14{
  width: min(1400px, 92vw);
  height: min(80vh, 72vw);
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}
.tile{
  position:relative; overflow:hidden; border-radius:0px;
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.tile .img{
  position:absolute; inset:0; opacity:0; transition: opacity .5s ease;
}
.tile .img.active{ opacity:1; }
.tile .img img{
  position:absolute; inset:0; width:110%; height:110%; object-fit:cover;
  transform: translate(0,0) scale(1.02);
  transition: transform 6s ease;
}
/* Pan directions (applied to .img img via data-dir attr) */
.tile .img img[data-dir="up"]{ transform: translateY(6%) scale(1.06); }
.tile .img img[data-dir="down"]{ transform: translateY(-6%) scale(1.06); }
.tile .img img[data-dir="left"]{ transform: translateX(6%) scale(1.06); }
.tile .img img[data-dir="right"]{ transform: translateX(-6%) scale(1.06); }

/* Blank color palette */
:root{
  --site-max: min(1400px, 92vw);
  --p1:#d9d9d9; --p2:#c8c8c8; --p3:#bdbdbd; --p4:#a9a9a9; --p5:#e5e5e5; --p6:#bbbbbb;
}
.tile.blank{ background: var(--panel); }
.tile.blank::after{
  content:""; position:absolute; inset:0; border-radius:0px;
  background: var(--rand, var(--p1));
  transition: background .4s ease;
  filter: saturate(.9);
}

/* Small hover lift on large screens */
@media (hover:hover){
  .tile:hover{ transform: translateY(-3px); transition: transform .2s ease; }
}

/* Responsive: keep 14 tiles but adjust grid footprint */
@media (max-width: 1100px){
  .puzzle-grid14{ width: 96vw; height: 66vh; }
}
@media (max-width: 780px){
  .puzzle-grid14{ width: 96vw; height: 64vh; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); }
  /* We still render 14 tiles; two cells will be empty space visually due to gap; acceptable on small screens */
}

.tile .img img[data-dir="none"]{ transform: translate(0,0) scale(1.02); }


/* --- Align header with puzzle grid width --- */
.site-header .header-inner{max-width:var(--site-max);margin:0 auto;display:flex;gap:18px;align-items:center;justify-content:space-between;padding:12px 0;}
/* Admin topbar (inside admin pages) */
.admin-topbar{background:#101010;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 20px;text-align:left}
.admin-topbar a{color:var(--text);font-weight:700}

/* Mobile hamburger as bottom sheet */
@media (max-width: 780px){
  .nav-toggle{display:block;position:fixed;right:16px;bottom:16px;z-index:100;background:var(--muted);color:#111;border-radius:0px;padding:10px 12px}
  .nav-toggle span{background:#111}
  .main-nav{position:fixed;left:0;right:0;bottom:0;background:rgba(18,18,18,.98);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:4px;padding:14px;border-top:1px solid var(--line);transform:translateY(105%);transition:transform .28s ease;z-index:99}
  .main-nav.open{transform:translateY(0)}
  .main-nav a{padding:12px 10px;border-radius:0px}
}

/* Smaller gallery thumbnails */
.gallery img{max-width:100%;height:auto;display:block
  aspect-ratio: 4/5;
  object-fit: cover;
}

.filters select{background:var(--panel);color:var(--text);border:1px solid var(--line);padding:8px 10px;border-radius:0px}


/* ==== Mobile menu hardening: overlay bottom sheet without changing desktop UI ==== */
@media (max-width: 900px){
  .nav-toggle{display:block}
  .main-nav{display:none}
  .main-nav.open{display:flex}
}
@media (max-width: 780px){
  .main-nav{position:fixed;left:0;right:0;bottom:0;transform:translateY(105%);transition:transform .28s ease;z-index:2147483647}
  .main-nav.open{transform:translateY(0);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:10px 14px;background:var(--panel);backdrop-filter:blur(4px);max-height:70vh;overflow-y:auto}
  .main-nav.open a{display:block;padding:12px 8px}
}