/* ================================
   Phreaking Collective — Index CSS
   Fixed left sidebar + flowing right
   ================================ */

/* Theme tokens */
:root{
  --bg: #000;
  --ink: #fff;
  --muted: #cfcfcf;
  --rule: #fff;

  /* Spacing + layout */
  --pad: clamp(16px, 4vw, 36px);
  --g: clamp(14px, 3vw, 32px);

  /* Fixed sidebar width */
  --left: clamp(220px, 24vw, 360px);
}
:root{
  --left-collapsed: 69px; /* width when collapsed */
  --logo-w: clamp(160px, 28vw, 320px);  /* same as your left-rail logo */

}

/* smooth anims (optional) */
.left{ transition: width .25s ease, padding .25s ease; }
.right{ transition: margin-left .25s ease; }

/* collapsed layout */
.sidebar-collapsed .left{
  width: var(--left-collapsed);
  padding: 14px 10px;
}
.sidebar-collapsed .right{
  margin-left: calc(var(--left-collapsed) + var(--g));
}

/* shrink logo, hide long text when collapsed */
.sidebar-collapsed .logoImg{ width: 42px; margin: 0 auto 8px; }
.sidebar-collapsed .index,
.sidebar-collapsed .kicker,
.sidebar-collapsed .intro{ display: none; }

/* hamburger “X” animation */
.hamburger span{ transition: transform .2s ease, opacity .2s ease, width .2s ease; }
.sidebar-collapsed .hamburger span:nth-child(1){ transform: translateY(6px) rotate(45deg) ; }
.sidebar-collapsed .hamburger span:nth-child(2){ opacity: 0; width: 0; }
.sidebar-collapsed .hamburger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
/* Fixed brand that appears when sidebar is collapsed */
.brand-fixed{
  position: fixed;
  top: 16px;
  left: calc(14px + 40px + 10px);  /* hamburger left + button width + gap */
  z-index: 100001;
  display: none;                    /* hidden by default (expanded) */
}
.brand-fixed img{
  height: 28px;                     /* tweak to taste */
  width: auto;
  display: block;
}

/* When collapsed: show fixed brand, hide the small rail logo entirely */
.sidebar-collapsed .brand-fixed{ display: block; }
.sidebar-collapsed .logoImg{ display: none; }  /* instead of shrinking */

/* Optional: don’t show on small screens where the rail stacks anyway */
@media (max-width: 640px){
  .brand-fixed{ display: none !important; }
}

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
}

/* Links */
a { color: var(--ink); text-decoration: none; }
a:hover { opacity: .85; }

/* Layout root: no centering container—sidebar is fixed */
.layout{
  margin: 0;
  padding: 0;
  display: block;
}

.hamburger{
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 100000;        /* above the fixed sidebar */
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule, #fff);
  background: rgba(0,0,0,.25);
  display: grid;          /* ensures it renders */
  place-items: center;
  cursor: pointer;
}
.hamburger span{
  display:block;
  width: 18px;
  height: 2px;
  background: var(--ink, #fff);
  margin: 2px 0;
}
/* =======================
   LEFT — fixed sidebar
   ======================= */
.left{
  position: fixed;
  top: 0;
  left: 0;
  width: var(--left);
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--pad);
  background: var(--bg);
  border-right: 1px solid var(--rule); /* vertical bar pinned to left */
  z-index: 10;
}

/* Logo image */
.logoImg{
  display: block;
  width: clamp(160px, 28vw, 320px);
  max-width: 100%;
  height: auto;
  margin: 0 0 var(--g) 0;
  object-fit: contain;
}

/* Index list under logo */
.index { margin: 8px 0 var(--g); }
.index ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.index a{
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  color: var(--muted);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .01em;
  line-height: 1.35;
  transition: color .15s ease, transform .15s ease;
}
.index a::before{
  content: "↗";
  font-size: .9em;
  opacity: .7;
  transform: translateY(-1px);
}
.index a:hover{ color: var(--ink); }
.index a:hover::before{ transform: translate(2px,-1px); }
.index a[aria-current="page"], .index a.active { color: var(--ink); }

/* Sidebar text */
.kicker{
  margin: 6px 0 10px 0;
  font-weight: 700;
  font-size: 16px;
}
.intro{
  margin: 0;
  color: var(--muted);
  max-width: 44ch;
  font-size: 14px;
}

/* =======================
   RIGHT — main content
   ======================= */
.right{
  margin-left: calc(var(--left) + var(--g));
  padding: var(--pad);
  min-width: 0; /* prevent flex/grid overflow */
}

/* Section titles (Cargo-ish weight) */
.section-title{
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.2;
  margin: 0 0 .6rem 0;
  letter-spacing: .01em;
}

/* Small link line under a section title */
.eyebrow{
  margin: .2rem 0 .9rem 0;
  font-size: 13px;
  color: var(--muted);
}
.exhibitions-link{
  border-bottom: 1px solid var(--rule);
}
.exhibitions-link:hover{ opacity: .8; }

/* Hero media (BitRot poster) */
.hero-media{ margin: 0 0 1rem 0; }
.hero-media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16/9;     /* keeps a calm window; remove if you want raw image ratio */
  object-fit: cover;
  background:#111;        /* fallback */
  border: 1px solid var(--rule);
}

/* Two placeholders, justified grid */
.exhibitions-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--g);
  margin: 0 0 1rem 0;
}
.tile{ margin: 0; }
.tile img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;                /* adjust if you prefer 16/9 */
  object-fit: cover;
  background: #111;
  border: 1px solid var(--rule);
}

/* Note line */
.note{
  color: var(--muted);
  font-size: 14px;
  margin: .25rem 0 1.25rem 0;
}

/* Horizontal rule that bleeds to the right column edges */
.rule{
  border: 0;
  height: 1px;
  background: color-mix(in oklab, var(--ink) 50%, transparent);
  margin: 1.2rem calc(-1 * var(--pad)) 1.4rem; /* bleed beyond .right padding */
}

/* Body copy blocks */
.copy{
  color: var(--muted);
  font-size: 14px;
  max-width: 60ch;
}
.copy p{ margin: 0 0 1rem 0; }
.copy a{
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.copy a:hover{ opacity: .85; }

/* Actions in footer/header if used */
.actions{ display: flex; gap: 12px; margin-top: var(--g); }
.button{
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 10px 14px;
  font-weight: 700;
  font-size: 14px;
}
.button.ghost{ background: transparent; }

/* Footer aligns with right content */
.site-footer{
  border-top: 1px solid var(--rule);
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin-left: calc(var(--left) + var(--g));
  padding: 20px var(--pad) 36px;
}

/* =======================
   RESPONSIVE
   ======================= */
@media (max-width: 640px){
  .left{
    position: static;
    width: auto;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: var(--pad);
  }
  .right{
    margin-left: 0;
    padding: var(--pad);
  }
  .site-footer{
    margin-left: 0;
    padding: 20px var(--pad) 36px;
  }
  .index ul{
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem 1rem;
  }
}

/* Narrow phones: stack placeholders */
@media (max-width: 560px){
  .exhibitions-grid{
    grid-template-columns: 1fr;
  }
}

/* Optional: nicer thin scrollbar on desktop */
@media (hover: hover){
  .left::-webkit-scrollbar{ width: 10px; }
  .left::-webkit-scrollbar-track{ background: #0a0a0a; }
  .left::-webkit-scrollbar-thumb{ background: #222; }
  .left::-webkit-scrollbar-thumb:hover{ background: #2d2d2d; }
}
/* inline logo that appears when the sidebar is collapsed */
.right-header{
  display: none;         /* hidden by default */
  position: static;      /* NOT sticky/fixed */
  z-index: auto;
  margin: 0 0 var(--g) 0;
}
.brand-inline{ display:inline-block; }
.brand-inline img{
  width: var(--logo-w);  /* same size as the left-rail logo */
  height: auto;
  display: block;
}

/* collapse behavior */
.sidebar-collapsed .right-header{ display:block; }
.sidebar-collapsed .logoImg{ display:none; }  /* hide rail logo when collapsed */

.sidebar-collapsed .right-header{
  position: static !important;
  top: auto !important;
}


/* Don’t shrink—just hide the big logo inside the collapsed rail */
.sidebar-collapsed .logoImg{ display: none; }

/* On small screens the rail stacks, so we don't need this header */
@media (max-width: 640px){
  .right-header{ display: none !important; }
}

/* Hide the hamburger on mobile */
@media (max-width: 640px){
  #sidebarToggle.hamburger{
    display: none !important;
  }

  /* Guard rails so layout doesn’t jump if the collapsed class is present */
  :root.sidebar-collapsed .left{ width: auto !important; padding: var(--pad) !important; }
  :root.sidebar-collapsed .right{ margin-left: 0 !important; }
}