:root{
      --bg:#0b0d10;         
      --panel:#0f1318;      
      --text:#e5e7eb;       
      --muted:#9aa0a6;      
      --accent:#7c3aed;     
      --radius:22px;        
      --shadow: 0 10px 30px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.35);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body{
      margin:0;
      background: radial-gradient(1200px 600px at 10% 50%, #0f1217 0%, transparent 60%),
                  radial-gradient(900px 500px at 100% 100%, #0a0c10 0%, transparent 60%),
                  var(--bg);
      color:var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      line-height:1.45;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .wrap{
      max-width: 2000px;
      margin: 0 auto;
      padding: clamp(16px, 2vw, 28px);
    }
 

    header{
      display:flex; align-items:center; justify-content:space-between;
      gap: 12px; padding: 8px 2px 18px;
    }

    .brand{ display:flex; align-items:baseline; gap:.75rem; }
    .brand__name{
        
        color:#ffffff;
        font-weight:800; 
        letter-spacing:.6px; 
        font-size: clamp(32px, 3vw, 45px); }
    
    .brand__tag{ font-style: italic; color:var(--muted); font-size: 2.3rem; letter-spacing:.2px; }

    .hint{ color:var(--muted); font-size:.9rem; }


    .tiles{
      display:grid; gap: clamp(5px, 1.4vw, 18px);
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 11rem;
    }

    @media (min-width: 700px){
      .tiles{ grid-template-columns: repeat(6, 1fr); grid-auto-rows: 12rem; }
    }


    .tile{
      position:relative; display:block; width:100%; height:100%;
      background: var(--panel);
      border-radius: var(--radius);
      /* subtle geometric cut corners */
      
      overflow:hidden; text-decoration:none; color:var(--text);
      box-shadow: var(--shadow);
      transform: translateZ(0);
      isolation:isolate;
    }

    .tile::before{ /* image layer */
      content:""; position:absolute; inset:0; z-index:0;
      background-image: var(--img), radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.25), transparent 60%);
      background-size: cover, auto;
      background-position: center;
      filter: saturate(0.9) contrast(1.05) brightness(.85);
      transition: transform .6s ease, filter .6s ease;
    }

    .tile::after{ 
      content:""; position:absolute; inset:0; z-index:1;
      background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.7) 100%);
      transition: opacity .5s ease;
    }

    .tile__label{
        text-shadow: 5 2px 18px rgba(0,0,0,.9);
        position:absolute; z-index:2; left:18px; right:18px; bottom:16px;
        font-weight:800; letter-spacing:.5px; text-transform:uppercase;
        font-size: clamp(18px, 2.8vw, 28px);
        line-height:1.1;
        display:flex; align-items:center; justify-content:space-between; gap:12px;

    }


    .tile__label > span:not(.arrow){
        display:inline-block;
        transform: scale(1) translateZ(0);
        transform-origin: left bottom;
        transition: transform .6s ease;
        will-change: transform;
    }

    .tile__label .arrow{
        width: 36px; height: 36px; border-radius: 12px;
        display:grid; place-items:center; flex: 0 0 auto;
        background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(124,58,237,.35));
        outline: 1px solid rgba(124,58,237,.35);
        backdrop-filter: blur(2px);
    }


    .tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
    .tile:hover::before{ transform: scale(1.06); filter: saturate(1.3) contrast(1.08) brightness(.95); }
    .tile:hover::after{ opacity:0.0; }
    .tile:hover .tile__label{ text-shadow: 0 2px 18px rgba(0,0,0,.5); }
    .tile:hover .tile__label > span:not(.arrow){ transform: scale(1.04); }
    .tile:focus-visible .tile__label > span:not(.arrow){ transform: scale(1.03); }



    .w-2 { grid-column: span 2; }
    .w-3 { grid-column: span 3; }
    .h-2 { grid-row: span 2; }
    .h-3 { grid-row: span 3; }

    /* Default: make all tiles reasonable on mobile */
    .tile { grid-column: span 2; grid-row: span 2; }

    @media (min-width:700px){
      /* On desktop, use intentional collage geometry */
      .artwork      { grid-column: span 2; grid-row: span 3; }
      .filmmaking   { grid-column: span 4; grid-row: span 3; }
      .games        { grid-column: span 4; grid-row: span 4; }
      .photography  { grid-column: span 2; grid-row: span 4; }
      .writing      { grid-column: span 4; grid-row: span 3; }
      .about      { grid-column: span 2; grid-row: span 3; }
    }

    /* Subtle floating animation for depth (reduced-motion safe) */
    @media (prefers-reduced-motion: no-preference){
      .tile{ transition: transform .5s cubic-bezier(.2,.8,.2,1); }
      .tile:hover{ transform: translateY(-4px); }
    }

    /* Placeholders — swap these URLs with your own artwork later */
    .artwork     { --img: url('media/artwork/ArtworkThumb.png'); }
    .filmmaking  { --img: url('media/filmmaking/FilmmakingThumb.png'); }
    .games       { --img: url('media/gamedesign/Gamedesign_Thumb.png'); }
    .photography { --img: url('media/photography/Photography_Thumb.png'); }
    .writing     { --img: url('media/writing/Writing_Thumb.png'); }
    .about     { --img: url('media/about/About_Thumb.png'); }

    /* Footer mini note */
    footer{ color:var(--muted); font-size:.85rem; margin-top: 18px; opacity:.8; }
    footer a{ color: var(--text); text-decoration: none; border-bottom: 1px dashed rgba(124,58,237,.5); }
    footer a:hover{ color: white; border-bottom-color: rgba(124,58,237,.9); }

    .nav{
      display:flex; align-items:center;
    }
    .nav__list{
      --pad: 6px;
      display:flex; gap: clamp(6px, 1vw, 12px);
      margin:0; padding: var(--pad);
      list-style:none;
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.35);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      overflow-x: auto; overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }
    .nav__link{
      display:block;
      
      padding: .55rem .9rem;
      border-radius: 10px;
      color: var(--text);
      text-decoration: none;
      white-space: nowrap;
      opacity: .92;
      transition: background .25s ease, transform .2s ease, opacity .2s ease;
    }
    .nav__link:hover{
      background: rgba(124,58,237,.14);
      opacity: 1;
      transform: translateY(-1px);
    }
    .nav__link:focus-visible{
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }


    @media (max-width: 699px){
      header{ flex-wrap: wrap; gap: 10px; }
      .nav{ width: 100%; }
      .nav__list{ justify-content: space-between; }
    }
/* ===== Artwork page ===== */
.artwork { 
  margin-top: 20px; 
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}

/* CSS Custom Properties for piece-specific dimensions */
#acetyl-fear {
  --acetyl-fear-main-ratio: 3/4; 

}

#buy-the-ticket {
  --buy-the-ticket-main-ratio: 3/4; 

}

#the-creation {
  --the-creation-main-ratio: 10/8; 

}


/* Individual artwork piece container */
.piece {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border: 1px solid rgba(124,58,237,.15);
  border-radius: var(--radius);
  padding: clamp(18px, 2.5vw, 28px);
  box-shadow: var(--shadow);
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: 1fr;
  transition: transform .3s ease, box-shadow .3s ease;
}

.piece:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow), 0 0 0 1px rgba(124,58,237,.25);
}

/* Piece header */
.piece__header {
  text-align: center;
  margin-bottom: 8px;
}

.piece__title {
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 800;
  letter-spacing: .4px;
  margin: 0;
  background: linear-gradient(135deg, #ffffff, #e5e7eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.piece__subtitle {
  color: var(--muted);
  margin: 4px 0 0 0;
  font-size: .95rem;
  font-style: italic;
}

/* Image gallery grid */
.piece__gallery {
  
  display: grid;
  gap: clamp(12px, 1.5vw, 18px);
  grid-template-columns: 1fr;
}

/* Main image takes full width */
.piece__media {
  
  grid-column: 1 / -1;
  background: var(--panel);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,.4);
  position: relative;

}

#acetyl-fear .piece__gallery{
  width: 80%;
  height: 80%;
}

#buy-the-ticket .piece__gallery{
  width: 80%;
  height: 80%;
}



/* Custom aspect ratios for specific pieces */
#acetyl-fear .piece__media {
  aspect-ratio: var(--acetyl-fear-main-ratio, 3/4);

}
#buy-the-ticket .piece__media {
  aspect-ratio: var(--buy-the-ticket-main-ratio, 3/4);
}
#the-creation .piece__media {
  aspect-ratio: var(--buy-the-ticket-main-ratio, 20/12);
}

#sisyphus .piece__media {
  aspect-ratio: var(--sisyphus-main-ratio, 10/7);
}

.piece__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s ease, filter .6s ease;
  filter: saturate(.95) contrast(1.02) brightness(.96);
}

.piece__media:hover img {
  transform: scale(1.03);
  filter: saturate(1.1) contrast(1.05) brightness(1.02);
}

/* Detail images in a row */
.piece__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}

.piece__detail {
  background: var(--panel);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,.25);
  aspect-ratio: 4/3;
  position: relative;
}

.piece__detail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .5s ease, filter .5s ease;
  filter: saturate(.92) contrast(1.01) brightness(.94);
}

.piece__detail:hover img {
  transform: scale(1.05);
  filter: saturate(1.05) contrast(1.04) brightness(1);
}

/* Description section */


.piece__desc {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(124,58,237,.2);
  border-radius: 14px;
  padding: clamp(16px, 2.2vw, 24px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.piece__desc h2 { 
  margin: 0 0 8px 0; 
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
}

.piece__desc .muted { 
  color: var(--muted); 
  font-size: .9rem;
  margin-bottom: 16px;
  display: block;
}

/* Facts grid */
.facts {
  margin: 16px 0 20px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.facts__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: rgba(15,19,24,.6);
  border-radius: 8px;
  border: 1px solid rgba(124,58,237,.1);
}

.facts__row dt {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.facts__row dd {
  margin: 0;
  color: var(--text);
  font-weight: 500;
}

/* Copy section with better typography */
.copy p {
  margin: 0 0 12px 0;
  line-height: 1.6;
}

.copy p:last-child {
  margin-bottom: 0;
}

.copy strong {
  color: var(--accent);
  font-weight: 600;
}

/* Responsive layouts */
@media (min-width: 600px) {
  .piece__gallery {
    grid-template-columns: 1fr;
  }
  
  .piece__details {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .piece {
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "header header"
      "gallery desc";
    align-items: start;
  }
  
  .piece__header {
    grid-area: header;
    text-align: left;
  }
  
  .piece__gallery {
    grid-area: gallery;
  }
  
  .piece__desc {
    grid-area: desc;
    position: sticky;
    top: clamp(16px, 2vw, 28px);
    height: fit-content;
  }
  
  .piece__details {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .piece__details {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Multiple pieces layout */
.artwork .piece + .piece {
  margin-top: clamp(32px, 4vw, 48px);
}

/* Loading states and image optimization */
.piece__media img[loading="lazy"],
.piece__detail img[loading="lazy"] {
  opacity: 0;
  transition: opacity .4s ease;
}

.piece__media img[loading="lazy"].loaded,
.piece__detail img[loading="lazy"].loaded {
  opacity: 1;
}

/* Visually hidden utility */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}