/* ==========================================================================
   Page-specific layouts
   ========================================================================== */

/* ---------- HOME ---------- */
.hero {
  position: relative;
  border: var(--border-w) solid var(--primary);
  min-height: 46vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--void);
  padding: 40px 20px;
}
.hero__title {
  font-size: clamp(2.6rem, 9vw, 8.5rem);
  line-height: 1;
  text-align: center;
  color: var(--primary);
  position: relative;
  z-index: 2;
}
.hero__title .line1,
.hero__title .line2 { display: block; }
.hero__title .line1 { margin-bottom: 0.22em; }
.hero__subtitle {
  margin: 1.2rem 0 0;
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 1.2vw, 0.8rem);
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--muted);
}
.hero__noise {
  position: absolute; inset: -20%;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: hero-static 0.2s steps(1, end) infinite;
}
@keyframes hero-static {
  0%    { transform: translate(0, 0); }
  12.5% { transform: translate(-3%, 2%); }
  25%   { transform: translate(2%, -3%); }
  37.5% { transform: translate(-2%, -2%); }
  50%   { transform: translate(3%, 1%); }
  62.5% { transform: translate(-1%, 3%); }
  75%   { transform: translate(2%, 2%); }
  87.5% { transform: translate(-3%, -1%); }
  100%  { transform: translate(0, 0); }
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}
@media (min-width: 900px) {
  .home-grid { grid-template-columns: repeat(12, 1fr); align-items: stretch; }
  .home-grid__image { grid-column: span 8; }
  .home-grid__side { grid-column: span 4; display: flex; flex-direction: column; gap: var(--gutter); }
}

.frame {
  border: var(--border-w) solid var(--primary);
  position: relative;
  overflow: hidden;
  background: var(--void);
  min-height: 340px;
}
.frame img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.frame__tag {
  position: absolute; left: 0; bottom: 0;
  background: var(--surface);
  border-top: var(--border-w) solid var(--primary);
  border-right: var(--border-w) solid var(--primary);
  padding: 8px 12px;
  font-family: var(--font-label); font-size: 11px; letter-spacing: .1em;
}

.panel {
  border: var(--border-w) solid var(--primary);
  padding: 24px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.panel h3 {
  font-size: 22px;
  border-bottom: var(--border-w) solid var(--primary);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.panel p { line-height: 1.6; }
.panel .accent { font-weight: 700; }

.strip-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-bottom: var(--border-w) solid var(--primary);
  padding-bottom: 12px;
}
.strip-head h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); min-width: 0; }
.strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: var(--border-w) solid var(--primary);
  background: var(--primary);
}
@media (min-width: 700px) { .strip { grid-template-columns: repeat(4, 1fr); } }
.strip a {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--void);
  border: var(--hairline) solid var(--surface);
}
.strip img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.strip__label {
  position: absolute; left: 0; bottom: 0; right: 0;
  background: rgba(19,19,19,.9);
  color: var(--primary);
  font-family: var(--font-label); font-size: 10px; letter-spacing: .08em;
  padding: 6px 8px;
  border-top: var(--hairline) solid var(--primary);
  transition: background .12s steps(1), color .12s steps(1);
}
.strip a:hover .strip__label { background: var(--primary); color: var(--on-primary); }

/* ---------- GALLERY ---------- */
.archive-head {
  border: var(--border-w) solid var(--primary);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.archive-head h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
.archive-head p { max-width: 60ch; color: var(--on-surface-dim); }
.chiprow { display: flex; gap: 10px; flex-wrap: wrap; }

.gallery-layout {
  display: flex;
  gap: var(--gutter);
  align-items: flex-start;
}
.gallery-layout__side {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}
@media (max-width: 1179px) {
  .gallery-layout { flex-direction: column; }
  .gallery-layout__side { width: 100%; flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 1180px) {
  .gallery-layout__side { position: sticky; top: var(--gutter); height: calc(100vh - 2 * var(--gutter)); }
  .gallery-layout__side .syslog { flex: 1; min-height: 0; }
}
.gallery-layout__side .syslog { display: none; }
@media (min-width: 1180px) { .gallery-layout__side .syslog { display: flex; } }

.pagesize {
  border: var(--border-w) solid var(--primary);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-width: 200px;
}
@media (max-width: 1179px) { .pagesize { flex: 1; } }
.pagesize__head {
  padding: 10px 14px;
  border-bottom: var(--border-w) solid var(--primary);
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: .1em;
}
.pagesize__group { display: flex; }
.pagesize__group button {
  flex: 1;
  padding: 10px 0;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: .05em;
  background: transparent;
  color: var(--primary);
  border: none;
  border-right: var(--hairline) solid var(--outline-variant);
  cursor: pointer;
  transition: background .1s steps(1), color .1s steps(1);
}
.pagesize__group button:last-child { border-right: none; }
.pagesize__group button:hover { background: var(--primary); color: var(--on-primary); }
.pagesize__group button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }

.grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
  gap: 0;
  border: var(--border-w) solid var(--primary);
  background: var(--primary);
}
@media (min-width: 760px) {
  .grid { grid-template-columns: repeat(12, 1fr); }
}
.tile {
  position: relative;
  background: var(--surface);
  border: var(--hairline) solid var(--surface);
  overflow: hidden;
  cursor: pointer;
  display: block;
}
@media (min-width: 760px) {
  .tile[data-span="wide"] { grid-column: span 7; }
  .tile[data-span="a"]    { grid-column: span 5; }
  .tile[data-span="b"]    { grid-column: span 6; }
  .tile[data-span="tall"] { grid-column: span 6; }
}
.tile__frame { aspect-ratio: 4 / 3; overflow: hidden; background: var(--void); }
.tile[data-span="tall"] .tile__frame,
.tile[data-span="a"] .tile__frame { aspect-ratio: 3 / 4; }
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.tile__meta {
  position: absolute; left: 0; bottom: 0; right: 0;
  background: var(--surface);
  border-top: var(--border-w) solid var(--primary);
  padding: 8px 10px;
  display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--font-label); font-size: 10px; letter-spacing: .08em;
  transition: background .12s steps(1), color .12s steps(1);
}
.tile__meta .dim { color: var(--on-surface-dim); }
.tile__idx {
  position: absolute; top: 0; right: 0;
  background: var(--primary); color: var(--on-primary);
  padding: 4px 8px;
  font-family: var(--font-label); font-size: 10px;
  transition: background .12s steps(1), color .12s steps(1);
}
/* hover/focus affordance lives on the chrome, never the photo itself */
.tile:hover .tile__meta, .tile:focus-visible .tile__meta { background: var(--primary); color: var(--on-primary); }
.tile:hover .tile__meta .dim, .tile:focus-visible .tile__meta .dim { color: var(--on-primary); }
.tile:hover .tile__idx, .tile:focus-visible .tile__idx { background: var(--surface); color: var(--primary); }
.tile.hide, .tile.page-hide { display: none; }

.pager { display: flex; justify-content: flex-end; }
.pager__group { border: var(--border-w) solid var(--primary); display: flex; }
.pager__group span, .pager__group button {
  padding: 12px 20px; font-family: var(--font-label); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  border-right: var(--border-w) solid var(--primary);
  background: transparent; color: var(--primary);
  cursor: pointer;
  transition: background .1s steps(1), color .1s steps(1);
  display: flex; align-items: center; justify-content: center;
}
.pager__group span:last-child, .pager__group button:last-child { border-right: none; }
.pager__group button:hover:not(:disabled) { background: var(--primary); color: var(--on-primary); }
.pager__group button[aria-current="page"] { background: var(--primary); color: var(--on-primary); cursor: default; }
.pager__group button:disabled { color: var(--on-surface-dim); cursor: not-allowed; }

/* ---------- LIGHTBOX ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 250;
  background: rgba(6,6,6,.94);
  display: none;
  padding: var(--gutter);
}
.lightbox.open { display: flex; }
.lightbox__wrap {
  margin: auto;
  width: 100%;
  max-width: 1200px;
  border: var(--border-w) solid var(--primary);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}
@media (min-width: 900px) { .lightbox__wrap { flex-direction: row; } }
.lightbox__stage {
  flex: 1;
  background: var(--void);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.lightbox__stage img { max-width: 100%; max-height: 70vh; object-fit: contain; }
@media (min-width: 900px) { .lightbox__stage img { max-height: 88vh; } }
.lightbox__nav {
  position: absolute; top: 0; bottom: 0;
  width: 60px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--primary);
  cursor: pointer; font-family: var(--font-label); font-size: 20px;
}
.lightbox__nav:hover { background: rgba(198,198,198,.12); }
.lightbox__nav--prev { left: 0; }
.lightbox__nav--next { right: 0; }
.lightbox__panel {
  width: 100%;
  border-top: var(--border-w) solid var(--primary);
  padding: 20px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
@media (min-width: 900px) {
  .lightbox__panel { width: 340px; flex-shrink: 0; border-top: none; border-left: var(--border-w) solid var(--primary); }
}
.lightbox__panel h2 { font-size: 20px; border-bottom: var(--border-w) solid var(--primary); padding-bottom: 10px; }
.lightbox__row { display: flex; flex-direction: column; gap: 4px; border-bottom: var(--hairline) solid var(--outline-variant); padding-bottom: 10px; }
.lightbox__row .k { font-family: var(--font-label); font-size: 10px; color: var(--on-surface-dim); letter-spacing: .1em; }
.lightbox__row .v { font-size: 14px; }
.lightbox__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lightbox__grid2 div { border: var(--hairline) solid var(--primary); padding: 8px; display: flex; justify-content: space-between; font-size: 12px; }
.lightbox__close {
  position: absolute; top: -3px; right: 0;
  transform: translateY(-100%);
  border: var(--border-w) solid var(--primary); border-bottom: none;
  background: var(--surface); color: var(--primary);
  width: 46px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
}
.lightbox__close:hover { background: var(--primary); color: var(--on-primary); }
@media (max-width: 899px) {
  /* the desktop close button hangs above the box via translateY(-100%),
     which gets clipped off-screen when there isn't room above the
     centered lightbox — pin it inside the viewport instead */
  .lightbox__close {
    position: fixed; top: 14px; right: 14px;
    transform: none;
    border: var(--border-w) solid var(--primary);
    z-index: 260;
  }
}

/* ---------- MANIFESTO ---------- */
.doc-head {
  border-bottom: var(--border-w) solid var(--primary);
  padding-bottom: 28px;
  display: flex; flex-direction: column; gap: 20px;
}
@media (min-width: 800px) { .doc-head { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.doc-head__id {
  display: inline-block;
  background: var(--primary); color: var(--on-primary);
  padding: 4px 10px;
  font-family: var(--font-label); font-size: 11px; letter-spacing: .1em;
  width: fit-content;
}
.doc-head h1 { font-size: clamp(2.2rem, 7vw, 5rem); line-height: 1; margin-top: 10px; }
.doc-head h1 .line1 { display: block; margin-bottom: 0.16em; }
.doc-head__status {
  border: var(--border-w) solid var(--primary);
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px;
  color: var(--on-surface-dim);
  text-align: right;
  flex-shrink: 0;
}
.doc-head__status span b { color: var(--primary); font-weight: 400; }

.doc-body { display: flex; flex-direction: column; gap: 32px; max-width: 78ch; }
.doc-body > p.lede { font-size: 1.15rem; line-height: 1.7; }
.clause { border: var(--border-w) solid var(--primary); padding: 22px; position: relative; }
.clause h2 { font-size: clamp(1.4rem, 3vw, 2rem); border-bottom: var(--border-w) solid var(--primary); padding-bottom: 10px; margin-bottom: 14px; }
.clause p { line-height: 1.7; }
.clause__tags { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.clause__tags span { border: var(--hairline) solid var(--primary); padding: 3px 8px; font-family: var(--font-label); font-size: 10px; letter-spacing: .1em; }

.rule { border: none; border-top: var(--border-w) dashed var(--primary); margin: 0; }

.doc-figure {
  border: var(--border-w) solid var(--primary);
  position: relative;
  overflow: hidden;
  height: 320px;
}
.doc-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-figure figcaption {
  position: absolute; left: 0; bottom: 0;
  background: var(--surface);
  border-top: var(--border-w) solid var(--primary);
  border-right: var(--border-w) solid var(--primary);
  padding: 8px 12px;
  font-family: var(--font-label); font-size: 11px;
}

.callout {
  background: var(--primary); color: var(--on-primary);
  border: var(--border-w) solid var(--primary);
  padding: 26px;
  position: relative;
}
.callout h2 { font-size: 1.4rem; margin-bottom: 12px; }
.callout p { font-family: var(--font-label); font-size: 13px; letter-spacing: .05em; line-height: 2; text-transform: uppercase; }

.doc-close { font-size: 1.05rem; line-height: 1.7; }

.corner-log {
  position: fixed; right: 18px; bottom: 75px;
  width: 220px;
  border: var(--border-w) solid var(--primary);
  background: rgba(19,19,19,.92);
  padding: 8px 10px;
  font-family: var(--font-label); font-size: 10px;
  z-index: 60;
  display: none;
}
@media (min-width: 900px) { .corner-log { display: block; } }
.corner-log__head { border-bottom: var(--hairline) solid var(--primary); padding-bottom: 6px; margin-bottom: 6px; letter-spacing: .1em; }
.corner-log ul { list-style: none; margin: 0; padding: 0; height: 84px; overflow: hidden; display: flex; flex-direction: column-reverse; gap: 3px; }
.corner-log li { color: var(--on-surface-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- BREACH_LOG (color.html): the page itself reads as the anomaly ---------- */
.page--breach::before {
  content: '';
  position: fixed; inset: 0; z-index: 199;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,40,90,.14), rgba(40,220,180,.1) 45%, rgba(90,80,255,.14));
  mix-blend-mode: screen;
  animation: breach-wash 4.5s ease-in-out infinite;
}
@keyframes breach-wash {
  0%, 100% { opacity: .6; filter: hue-rotate(0deg); }
  50%      { opacity: 1;  filter: hue-rotate(140deg); }
}
@media (prefers-reduced-motion: reduce) {
  .page--breach::before { animation: none; }
}
.page--breach .grain { filter: sepia(1) hue-rotate(280deg) saturate(5); opacity: .1; }
.page--breach .scanline { filter: hue-rotate(280deg) saturate(3); }
.page--breach .archive-head,
.page--breach .sidenav,
.page--breach .topbar,
.page--breach .mobilenav,
.page--breach .grid,
.page--breach .pager__group,
.page--breach .lightbox__wrap,
.page--breach .sitefoot,
.page--breach .sidenav__head,
.page--breach .sidenav__links a,
.page--breach .sidenav__foot { border-color: #ff3b5c; }
.page--breach .archive-head h1,
.page--breach .topbar__title {
  color: #ff3b5c;
  animation: breach-chroma 1.8s steps(2) infinite;
}
@keyframes breach-chroma {
  0%   { text-shadow: -2px 0 #22e6d6, 2px 0 #6a5bff; }
  20%  { text-shadow: 2px 1px #22e6d6, -2px -1px #6a5bff; }
  40%  { text-shadow: -1px -2px #22e6d6, 1px 2px #6a5bff; }
  60%  { text-shadow: 3px 0 #22e6d6, -3px 0 #6a5bff; }
  80%  { text-shadow: -2px 1px #22e6d6, 2px -1px #6a5bff; }
  100% { text-shadow: -2px 0 #22e6d6, 2px 0 #6a5bff; }
}
@media (prefers-reduced-motion: reduce) {
  .page--breach .archive-head h1,
  .page--breach .topbar__title { animation: none; text-shadow: -1px 0 #22e6d6, 1px 0 #6a5bff; }
}
.page--breach .tile { border-color: rgba(255,59,92,.5); }
.page--breach .tile__idx { background: #ff3b5c; color: #0e0e0e; }
.page--breach .tile:hover .tile__idx, .page--breach .tile:focus-visible .tile__idx { background: #0e0e0e; color: #22e6d6; }
.page--breach .tile:hover .tile__meta, .page--breach .tile:focus-visible .tile__meta { background: #ff3b5c; color: #0e0e0e; }
.page--breach .pager__group button:hover:not(:disabled),
.page--breach .pager__group button[aria-current="page"] { background: #ff3b5c; color: #0e0e0e; }
.page--breach .redacted { background: #ff3b5c; color: #ff3b5c; }
.page--breach .redacted:hover, .page--breach .redacted:focus-visible { color: #0e0e0e; }