@import url('https://fonts.googleapis.com/css2?family=Rye&display=swap');


/* DSC responsive prototype — original source preserved in _prototype_originals/ */
:root {
  --dsc-yellow:#ffff66;
  --dsc-orange:#ff9900;
  --dsc-red:#be0000;
  --dsc-white:#fff;
  --dsc-max: 980px;
}
html { scroll-behavior:smooth; }
body {
  margin:0;
  min-width:0;
  background:#be0000 url(images/background_w_style.jpg) repeat-y fixed center top;
  background-size:auto;
  color:#000;
}
img { max-width:100%; height:auto; }
.prototype-shell { width:min(100% - 24px, var(--dsc-max)); margin:0 auto; padding:24px 0 56px; }
.site-header { text-align:center; }
.site-logo { width:min(450px, 100%); height:auto; }
.original-copy { max-width:750px; margin-inline:auto; }
.original-copy > * { max-width:100%; }
.original-copy table { width:100% !important; max-width:100% !important; }
.original-copy td { width:auto !important; }
.original-copy p, .original-copy blockquote { overflow-wrap:anywhere; }
.original-copy p img { margin-top:.35rem; }
.original-copy p.sequence-step { text-align:center !important; margin:1.5rem auto 2rem; }
.original-copy p.sequence-step img { display:block; margin:.4rem auto; width:auto; max-width:100%; }
.original-copy blockquote { margin-inline:clamp(.25rem, 4vw, 2.5rem); }
.original-copy .BM_callout { color:var(--dsc-yellow); }
.original-copy hr, .home-shell hr { border:0; border-top:1px solid rgba(255,255,255,.5); opacity:1; }

.dsc-main-grid, .tod-grid {
  display:grid;
  gap:clamp(18px, 2.5vw, 32px) clamp(14px, 2vw, 26px);
  align-items:start;
}
.dsc-main-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin:26px auto 36px; }
.tod-grid { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:900px; margin:18px auto 30px; }
.dsc-tile { display:block; text-align:center; text-decoration:none !important; color:#fff !important; min-width:0; }
.dsc-frame-stage { position:relative; display:block; width:100%; aspect-ratio:620/800; overflow:hidden; }
.dsc-tile-photo {
  position:absolute;
  left:50%; top:50%;
  width:87.0968%; /* 540px within a 620px frame */
  height:90%;     /* 720px within an 800px frame */
  object-fit:cover;
  object-position:center;
  transform:translate(-50%,-50%);
}
.dsc-frame-overlay { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.dsc-tile-label {
  display:block; margin-top:.45rem; color:#fff; text-align:center;
  font-family:'Rye', 'Rockwell Extra Bold', Rockwell, Georgia, serif;
  font-weight:700;
  font-size:clamp(.95rem, 1.45vw, 1.35rem); line-height:1.12; letter-spacing:.005em;
  text-shadow:0 2px 2px rgba(0,0,0,.85);
}
.dsc-tile:hover .dsc-frame-stage, .dsc-tile:focus-visible .dsc-frame-stage { transform:translateY(-2px); filter:brightness(1.08); }
.dsc-tile:focus-visible { outline:3px solid var(--dsc-yellow); outline-offset:5px; }
.dsc-tile.active .dsc-tile-label { color:var(--dsc-yellow); }
.tod-nav { margin:18px auto 30px; }

.home-shell { width:min(100% - 24px, 980px); margin:0 auto; text-align:center; padding:28px 0 55px; }
.home-shell .justice-logo { width:min(450px,100%); height:auto; }
.home-shell .dsc-main-grid { text-align:left; }
.home-shell .dsc-tile-label { text-align:center; }
.home-copy { max-width:900px; margin-inline:auto; }
.home-copy p { text-align:center; }

@media (max-width: 900px) {
  .dsc-main-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tod-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:620px; }
}
@media (max-width: 600px) {
  body { background-attachment:scroll; }
  .prototype-shell, .home-shell { width:min(100% - 18px, var(--dsc-max)); padding-top:16px; }
  .dsc-main-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
  .tod-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; }
  .dsc-tile-label { font-size:clamp(.95rem, 5vw, 1.3rem); }
  .original-copy { font-size:1rem; line-height:1.5; }
  .original-copy blockquote { margin-inline:.1rem; }
}
@media (max-width: 360px) {
  .dsc-main-grid { gap:14px 8px; }
  .dsc-tile-label { font-size:.9rem; }
}

.justice-block { margin-top:4px; margin-bottom:28px; }
.justice-block hr { margin-bottom:24px; }


/* v4: long-build back-to-top control */
.back-to-top {
  position:fixed;
  right:clamp(14px, 2.5vw, 30px);
  bottom:clamp(14px, 2.5vw, 30px);
  z-index:1050;
  width:52px;
  height:52px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.9);
  background:rgba(0,0,0,.82);
  color:#fff;
  font:700 1.65rem/1 Arial, sans-serif;
  display:grid;
  place-items:center;
  padding:0 0 .1em;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease, background-color .18s ease;
  box-shadow:0 3px 12px rgba(0,0,0,.35);
}
.back-to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover, .back-to-top:focus-visible { background:#000; color:var(--dsc-yellow); }
.back-to-top:focus-visible { outline:3px solid var(--dsc-yellow); outline-offset:3px; }
@media (max-width:600px) {
  .back-to-top { width:48px; height:48px; right:12px; bottom:12px; font-size:1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .back-to-top { transition:none; }
}

/* approved: keep BERSERKER navigation four-across at every width */
@media (max-width: 900px) {
  .tod-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    max-width:900px;
    gap:clamp(6px, 1.5vw, 14px);
  }
}
@media (max-width: 600px) {
  .tod-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px 4px;
  }
  .tod-grid .dsc-tile-label {
    font-size:clamp(.62rem, 2.8vw, .9rem);
    line-height:1.08;
  }
}

/* v10 gallery prototype — Fire Fall 2007 */
.gallery-shell {
  width:min(100% - 18px, 1100px);
  margin:0 auto;
  padding:20px 0 60px;
  text-align:center;
}
.gallery-site-header { max-width:900px; margin-inline:auto; }
.gallery-site-logo { width:min(360px, 76vw); height:auto; }
.gallery-project-grid {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:clamp(10px,1.5vw,20px) clamp(6px,1vw,14px) !important;
  max-width:980px;
  margin:18px auto 28px;
}
.gallery-project-grid .dsc-tile-label {
  font-size:clamp(.7rem,1.45vw,1.05rem);
  line-height:1.08;
}
.gallery-content { scroll-margin-top:8px; outline:none; }
.gallery-content h1 {
  margin:1.2rem 0 .6rem;
  font-family:'Rye','Rockwell Extra Bold',Rockwell,Georgia,serif;
  font-size:clamp(1.45rem,3vw,2.4rem);
  color:#fff;
  text-shadow:0 2px 2px rgba(0,0,0,.8);
}
.gallery-meta, .gallery-hint { max-width:850px; margin-inline:auto; }
.gallery-hint { color:#fff; margin-bottom:1rem; }
.photo-mosaic {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:7px;
  align-items:start;
  width:80%;
  max-width:900px;
  margin:18px auto 30px;
}
.gallery-item {
  position:relative;
  border:0;
  padding:0;
  background:#000;
  cursor:zoom-in;
  min-width:0;
  aspect-ratio:1/1;
  overflow:hidden;
  box-shadow:0 1px 5px rgba(0,0,0,.35);
}
.gallery-item > img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.gallery-item:hover > img, .gallery-item:focus-visible > img { filter:brightness(1.08); }
.gallery-item:focus-visible { outline:3px solid var(--dsc-yellow); outline-offset:3px; }
.gallery-item.is-expanded {
  grid-column:1 / -1;
  width:100%;
  max-width:none;
  justify-self:stretch;
  aspect-ratio:auto;
  overflow:visible;
  background:transparent;
  cursor:default;
  box-shadow:none;
  padding:20px 0 54px;
}
.gallery-item.is-expanded > img {
  display:block;
  width:auto;
  height:auto;
  max-width:80vw;
  max-height:none;
  object-fit:contain;
  margin:0 auto;
  box-shadow:0 3px 14px rgba(0,0,0,.5);
}
.gallery-expanded-controls { position:absolute; pointer-events:none; }
.gallery-arrow {
  pointer-events:auto;
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  transform:none;
  padding:0 8px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.70);
  box-shadow:none;
  text-shadow:0 1px 4px rgba(0,0,0,.85);
  font:700 2.35rem/1 Arial,sans-serif;
  border-radius:0;
  display:flex;
  align-items:center;
}
.gallery-arrow:hover, .gallery-arrow:focus-visible {
  background:transparent;
  color:#fff;
  outline:0;
}
.gallery-arrow-prev { left:0; justify-content:flex-start; }
.gallery-arrow-next { right:0; justify-content:flex-end; }
.gallery-show-me {
  pointer-events:auto;
  position:absolute;
  left:50%;
  bottom:-42px;
  transform:translateX(-50%);
  padding:5px 14px 4px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:16px;
  background:rgba(0,0,0,.78);
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.55);
  font:700 .78rem/1.3 Arial,sans-serif;
  letter-spacing:.08em;
  white-space:nowrap;
}
.gallery-show-me:hover, .gallery-show-me:focus-visible { background:#000; color:var(--dsc-yellow); }
.gallery-meta-bottom { margin-top:22px; }
@media (max-width:1100px) and (min-width:701px) {
  .photo-mosaic { grid-template-columns:repeat(6,minmax(0,1fr)); width:84%; }
}
@media (max-width:900px) {
  .gallery-project-grid .dsc-tile-label { font-size:clamp(.62rem,2.25vw,.9rem); }
}
@media (max-width:700px) {
  .gallery-shell { width:min(100% - 10px,1100px); padding-top:12px; }
  .gallery-project-grid { gap:8px 3px !important; }
  .gallery-project-grid .dsc-tile-label { font-size:clamp(.53rem,2.65vw,.75rem); }
  /* Keep the phone thumbnails at the approved four-across size. */
  .photo-mosaic { grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:4px; }
  .gallery-item.is-expanded {
    width:100vw;
    max-width:100vw;
    justify-self:center;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:20px 0 54px;
  }
  .gallery-item.is-expanded > img { width:100vw; max-width:100vw; height:auto; }
  .gallery-arrow { font-size:2.05rem; padding:0 6px; }
}

/* Fire Fall 2006 recovered category landing */
.ff-category-grid{width:80%;max-width:900px;margin:24px auto 34px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.ff-category{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:#fff;font-family:'Rye',Georgia,serif}.ff-category img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid rgba(255,255,255,.25)}.ff-category small{font-family:Arial,sans-serif;color:#ccc}.ff-category:hover{color:var(--dsc-yellow)}@media(max-width:700px){.ff-category-grid{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}


/* v14 cleanup */
.tod-intro-width { width:80%; max-width:900px; margin:0 auto; }
@media (max-width:700px) { .tod-intro-width { width:80%; } }

/* Fire Fall 2006 category landing: six across, three across on phones */
.ff-category-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
@media (max-width:700px) { .ff-category-grid { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } }


/* final deploy: responsive wrappers for remaining hand-built legacy pages */
.legacy-responsive {
  overflow-x:hidden;
}
.legacy-responsive > table {
  width:min(80%, 900px) !important;
  max-width:80vw !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.legacy-responsive td, .legacy-responsive th {
  max-width:100%;
}
.legacy-responsive img {
  max-width:100%;
  height:auto;
}
@media (max-width:600px) {
  .legacy-responsive > table { width:88% !important; max-width:88vw !important; }
}


/* v17: unified caption width */
.original-copy p.sequence-step,
body.legacy-responsive p:has(img),
.gallery-caption {
  width:80%;
  max-width:900px;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}
@media (max-width:700px) {
  .original-copy p.sequence-step,
  body.legacy-responsive p:has(img),
  .gallery-caption { width:90%; }
}

/* v19: BERSERKER Steering text/caption width correction */
.tod-copy-width {
  width:80%;
  max-width:900px;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
  overflow-wrap:anywhere;
}
@media (max-width:700px) {
  .tod-copy-width { width:90%; }
}