/* ============================================================
   Shared grid + lightbox system for Contentious Inc color pages.
   Each page sets --accent before this loads (or inline) to theme
   the rearrange button, hovers, and lightbox checkbox.
   ============================================================ */

:root{
  --black:#0A0A0A;
  --white:#FFFFFF;
  --gray:#7d7d7d;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  /* --bg is the page's dark base color — defaults to --black, but each
     color page can override it in its own inline :root to get a custom
     tinted background instead of plain black. */
  --bg:var(--black);
}
*{box-sizing:border-box;}
a{color:inherit; text-decoration:none;}
/* Safety net so no white ever shows — page background matches --bg
   (the same dark tone as the header/board/footer) even if content is
   shorter than the viewport or a browser reveals overscroll. */
html,body{background:var(--bg);}

/* ---- header (shared shell) ---- */
header{
  position:sticky; top:0; z-index:200;
  background:var(--bg); color:#fff;
  display:grid;
  grid-template-columns: 1.3fr 2fr 1fr;
  align-items:center;
  padding:16px 28px;
  font-family:var(--mono);
  font-weight:600;
  font-size:14px;
  letter-spacing:0.02em;
}
header .brand{display:flex; align-items:center; gap:12px; font-size:14px; font-weight:700; letter-spacing:0.04em;}
header .brand img{height:20px; width:auto; display:block;}
header nav{display:flex; gap:13px; justify-content:center; flex-wrap:wrap; font-size:15px; font-family:var(--serif);}
header nav a{color:var(--accent); opacity:0.7; transition:opacity .15s ease, color .15s ease;}
header nav a:hover{opacity:1; color:var(--accent);}
header nav .current{opacity:1; color:var(--accent); font-weight:700;}
header nav .nav-disabled{color:var(--accent); opacity:0.28; cursor:default;}

/* Each nav link rolls over to that color's own hex, not the current
   page's accent — e.g. hovering "Blue" always turns blue, on every
   page, matching the homepage row-hover behavior. */
header nav a.nav-black:hover{color:#8A8A8A;}
header nav a.nav-blue:hover{color:#3B9EFF;}
header nav a.nav-brown:hover{color:#C08552;}
header nav a.nav-green:hover{color:#3ECF6E;}
header nav a.nav-orange:hover{color:#F84C0A;}
header nav a.nav-purple:hover{color:#B266FF;}
header nav a.nav-red:hover{color:#FF3B30;}
header nav a.nav-white:hover{color:#FFFFFF;}
header nav a.nav-yellow:hover{color:#FFD400;}
header .contact{text-align:right; font-family:var(--serif); font-size:15px;}
header .contact a{color:var(--accent);}

/* ---- section wrapper ----
   No max-width, no side padding, ever — the grid must fill the full
   browser width edge-to-edge with no white margin on either side. Only
   the text bits (intro copy, section label) get their own small inset
   so type isn't glued to the browser edge; the .board itself stays
   completely unpadded and unconstrained. */
.section{padding:0 0 60px;}
.section:last-of-type{padding-bottom:0;}
.section-label{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--accent);
  background:var(--bg);
  padding:0 32px 14px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
}
.rearrange-btn{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  background:var(--bg); color:#fff;
  border:none; padding:9px 16px; cursor:pointer;
  transition:background .15s ease;
}
.rearrange-btn:hover{background:var(--accent); color:var(--bg);}

/* ---- intro band (static, not randomized) ----
   Single line of copy, dark band directly under the sticky header (same
   dark as the header, so it reads as one continuous top zone), white
   Playfair Display text matching the homepage's intro-copy size/style.
   The highlighted phrase picks up the page's accent color, echoing the
   homepage's randomized "color" word treatment. */
.intro-tile{background:var(--bg); padding:22px 32px 30px;}
.intro-tile p{
  font-family:var(--serif); font-size:20px; line-height:1.7; font-weight:400;
  color:var(--accent); max-width:1100px; margin:0;
}
.intro-tile p .accent{color:var(--accent); font-weight:700;}

/* ---- interlocking grid board ---- */
.board{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:0;
  background:var(--bg);
}
.tile{
  position:relative;
  background:var(--bg);
  overflow:hidden;
}
.tile img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  opacity:0; transition:opacity .5s ease, filter .2s ease;
}
.tile img.loaded{opacity:1;}
.tile img{cursor:zoom-in;}
.tile img:hover{filter:brightness(0.92);}

/* ---- masonry board (7 CSS columns, no cropping) ----
   Each image renders at its own natural aspect ratio; columns are
   allowed to end at different heights — that's expected, not a bug. */
.board.masonry-7col{
  display:block;
  column-count:7;
  column-gap:0;
}
.board.masonry-7col .tile{
  break-inside:avoid;
  margin:0;
}
.board.masonry-7col .tile img{
  width:100%;
  height:auto;
  object-fit:unset;
}
@media (max-width:1400px){ .board.masonry-7col{column-count:5;} }
@media (max-width:1000px){ .board.masonry-7col{column-count:3;} }
@media (max-width:600px){ .board.masonry-7col{column-count:2;} }

/* ---- justified board (rows sized to fill the full site width, max 7
   images per row, no cropping) ----
   Row/tile dimensions are computed in JS (grid-engine.js) and applied as
   inline pixel widths/heights — each tile's box exactly matches its
   image's own aspect ratio, so nothing is cropped. Rows are allowed to
   fall short of full width only when there aren't enough images left to
   justify without stretching too far (typically just the final row). */
.board.justified{ display:block; }
.jrow{ display:flex; gap:0; }
.jrow .tile{ flex:0 0 auto; }
.jrow .tile img{ width:100%; height:100%; object-fit:cover; display:block; }

.play-arrow{
  position:absolute; bottom:14px; right:14px;
  width:38px; height:38px; border-radius:50%;
  background:rgba(10,10,10,.72);
  color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  transition:background .15s ease, transform .15s ease;
}
.play-arrow:hover{background:var(--accent); color:var(--black); transform:scale(1.08);}

/* ---- lightbox ---- */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,10,10,.96);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  padding:5vh 6vw;
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox-stage{
  max-width:100%; max-height:74vh;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-stage img, .lightbox-stage video{
  max-width:100%; max-height:74vh;
  object-fit:contain;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.lightbox .close{
  position:absolute; top:24px; right:32px;
  font-family:var(--mono); color:#fff; font-size:13px;
  letter-spacing:.12em; cursor:pointer;
  padding:8px 12px;
}
.lightbox .close:hover{color:var(--accent);}

.related-toggle{
  display:none;
  align-items:center; gap:10px;
  margin-top:22px;
  font-family:var(--mono); font-size:13px; color:#fff;
}
.related-toggle input{accent-color:var(--accent); width:16px; height:16px; cursor:pointer;}
.related-toggle label{cursor:pointer;}

.related-strip{
  display:none;
  gap:10px;
  margin-top:18px;
  max-width:90vw;
  overflow-x:auto;
  padding-bottom:6px;
}
.related-thumb{
  height:88px; width:88px; object-fit:cover;
  flex:none; cursor:pointer; opacity:.6;
  transition:opacity .15s ease, outline .15s ease;
  outline:2px solid transparent;
}
.related-thumb:hover{opacity:1;}
.related-thumb.active{opacity:1; outline:2px solid var(--accent);}

/* ---- clients section — "Current and Past Brands", ported from the
   homepage. Sits directly above the footer as one continuous dark band,
   full site width to match the board/footer (no max-width cap). ---- */
.clients-section{
  background:var(--bg);
  padding:40px 32px 0;
}
.clients-section .section-title{
  font-family:var(--serif);
  font-size:20px;
  font-weight:400;
  line-height:1.7;
  color:var(--accent);
  margin-bottom:30px;
}
.clients-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
  padding-bottom:36px;
}
.clients-label{
  font-family:var(--serif);
  font-size:16.25px;
  letter-spacing:.02em;
  color:var(--accent);
  font-weight:400;
  margin-bottom:14px;
}
.clients-col ul{list-style:none;}
.clients-col li{
  font-family:var(--serif);
  font-size:16.25px;
  font-weight:400;
  line-height:1.85;
  color:var(--accent);
  opacity:.85;
}
@media (max-width:900px){
  .clients-section{padding:28px 16px 0;}
  .clients-grid{grid-template-columns:1fr; gap:24px; padding-bottom:24px;}
}

/* ---- footer — identical to the homepage footer (same markup, ported
   styles) so it reads as the same site element on every page. Only
   difference from the homepage: background is set explicitly (color
   pages have a white page body, not the homepage's dark photo bg), and
   the hover accent is each page's own --accent instead of homepage orange. */
footer{
  background:var(--bg);
  color:var(--accent);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:18px 32px;
  padding:28px 40px 50px;
  font-family:var(--serif);
  font-size:14px;
  border-top:1px solid rgba(255,255,255,.14);
}
footer .foot-left{color:var(--accent);}
footer .foot-social{display:flex; align-items:center; gap:20px;}
footer .foot-social a{
  color:var(--accent); opacity:.8;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .15s ease, color .15s ease;
}
footer .foot-social a:hover{opacity:1; color:var(--accent);}
footer .foot-social svg{width:18px; height:18px; display:block; fill:currentColor;}
footer .foot-email{color:var(--accent); font-size:14px; transition:opacity .2s ease;}
footer .foot-email:hover{opacity:.7;}
footer #clock{color:var(--accent); font-family:var(--serif);}

@media (max-width: 900px){
  header{grid-template-columns:1fr; gap:8px; text-align:center;}
  header .brand{justify-content:center;}
  header nav{order:3; gap:14px;}
  header .contact{display:none;}
  .section{padding:0 0 40px;}
  .intro-tile{padding:20px 16px 26px;}
  .intro-tile p{font-size:17px;}
  .section-label{padding:0 16px 14px;}
  footer{flex-direction:column; text-align:center; padding:24px 20px 36px;}
  footer .foot-social{justify-content:center;}
}