/* Silent Architects – Collage-only page (square corners, no menu, flat text tiles) */
:root{
  --bg: #000000;   /* unified dark grey */
  --fg: #e7e7e7;
  --muted: #b0b0b0;
  --line: #1a1d21;
  --radius: 0; /* square corners */
  --gap: 12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
}

.wrap{max-width: 1220px; margin: 0 auto; padding: 0 16px}

.collage{padding: 20px 0}
.collage .wrap{ position: relative; }

/* Desktop / large screens */
.row-grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: var(--gap);
  margin-bottom: var(--gap);
}

/* Tablets */
@media (max-width: 1200px) {
  .row-grid {
    grid-template-columns: repeat(8, 1fr); /* reflow to 8 columns */
  }
}

/* Mobiles */
@media (max-width: 700px) {
  .row-grid {
    grid-template-columns: repeat(4, 1fr); /* 4-column grid on small screens */
    gap: 6px;
  }

  /* Shrink font a bit for text tiles */
  .tile.text p {
    font-size: 11.5px;
  }

  /* Logos row: stack vertically if space is tight */
  .logos-row .logos {
    justify-content: center;
    flex-wrap: wrap;
  }
}


[class*="start-"]{ grid-row: auto; }
.start-1{ grid-column-start: 1 } .start-2{ grid-column-start: 2 } .start-3{ grid-column-start: 3 }
.start-4{ grid-column-start: 4 } .start-5{ grid-column-start: 5 } .start-6{ grid-column-start: 6 }
.start-7{ grid-column-start: 7 } .start-8{ grid-column-start: 8 } .start-9{ grid-column-start: 9 }
.start-10{ grid-column-start: 10 } .start-11{ grid-column-start: 11 } .start-12{ grid-column-start: 12 }
.start-13{ grid-column-start: 13 } .start-14{ grid-column-start: 14 }
.span-1{ grid-column-end: span 1 } .span-2{ grid-column-end: span 2 } .span-3{ grid-column-end: span 3 }
.span-4{ grid-column-end: span 4 } .span-5{ grid-column-end: span 5 } .span-6{ grid-column-end: span 6 }
.span-7{ grid-column-end: span 7 } .span-8{ grid-column-end: span 8 } .span-9{ grid-column-end: span 9 }
.span-10{ grid-column-end: span 10 } .span-11{ grid-column-end: span 11 } .span-12{ grid-column-end: span 12 }
.span-13{ grid-column-end: span 13 } .span-14{ grid-column-end: span 14 }

.tile{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: none;          /* removed shadow */
  opacity:0; transform: translateY(6px);
  background: var(--bg);     /* match the page background */
}
.tile.show{opacity:1; transform: translateY(0); transition: opacity .7s ease, transform .7s ease}

.tile.img img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.95 }
.tile .veil {
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.25);
  mix-blend-mode: multiply;
}
.tile.text .card{
  padding:12px 14px;
  background: var(--bg);     /* same dark grey as background */
  border: none;              /* no outline */
  border-radius: var(--radius);
}
.tile.text p{margin:0; font-size:12.5px; color: var(--muted)}

.tile.text.align-right .card{ text-align: right }
.title-card h1{ margin:0 0 4px; font-weight:300; font-size: clamp(28px, 6vw, 56px) }
.title-card h2{ margin:0; font-weight:300; color: var(--muted); font-size: clamp(16px, 2.8vw, 22px) }

/* Centered text tile helper */
.tile.centered .card{ display:flex; align-items:center; justify-content:center; text-align:center; height:100% }

/* Aspect ratios */
.aspect-thin-vert { aspect-ratio: 1 / 6; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-21-9 { aspect-ratio: 21 / 9; }
.aspect-strip { aspect-ratio: 7 / 1; }
.aspect-ultra-strip { aspect-ratio: 12 / 1; }
.aspect-mega-strip { aspect-ratio: 20 / 1; }
.aspect-32-9 { aspect-ratio: 32 / 9; }
.aspect-square{ aspect-ratio: 1 / 1; }
.aspect-mini  { aspect-ratio: 4 / 3; }

.micro{ min-height: 36px }

.nano{ min-height: 26px }

.large{ min-height: 56px }

/* Video tile */
.tile.video iframe{ width:100%; height:100%; display:block; border:0; background:#000 }

/* Link styles within text tiles */
.tile.text a{
  color: #cdd6e0;            /* subtle colour difference */
  text-decoration: underline;
  transition: color .2s ease, text-decoration-color .2s ease;
  text-underline-offset: 2px;
}
.tile.text a:hover{
  color: #e7ecf1;            /* slightly brighter on hover */
  text-decoration: none;     /* underline disappears on rollover */
}

.quote{color:#92979c; font-size:11.5px; text-align:center; margin:14px auto 2px}

/* Responsive collapse */
@media (max-width: 900px){
  .row-grid{ grid-template-columns: repeat(6, 1fr); }
  .start-7, .start-8, .start-9, .start-10, .start-11, .start-12, .start-13, .start-14{ grid-column-start: auto; }
  .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14{ grid-column-end: span 6 }
}

/* Logos row */
.logos-row .logos{
  display:flex; gap: 14px; align-items:center; justify-content:flex-end;
}
.logos-row .logos img{
  width: 90px; height: 50px; object-fit: contain; background:#000;
}

/* Floating tiny fragments that don't affect layout height */
.frag-float{
  position: absolute;
  z-index: 5;
  pointer-events: none;      /* avoid stealing clicks */
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
.frag-float img{ display:block; width:100%; height:100%; object-fit:cover; }
.frag-xxs{ width: 70px; aspect-ratio: 16 / 9; }
.frag-xxs-square{ width: 56px; aspect-ratio: 1 / 1; }

/* Extra small grid images */
.pico{ min-height: 14px }


/* ========== Global tightening (desktop too) ========== */

/* slightly smaller default row gap/margin */
:root {
  --gap: 10px; /* was 12px */
}

/* reduce spacing between rows a touch */
.row-grid {
  gap: var(--gap);
  margin-bottom: calc(var(--gap) - 2px);
  align-items: start;
}

/* trim title spacing and text padding a bit */
.title-card h1 { margin: 0 0 2px; }
.title-card h2 { margin: 0; }
.tile.text .card {
  padding: 10px 12px;           /* was 12px 14px */
}
.tile.text p {
  line-height: 1.5;             /* slightly tighter */
  margin: 0;
}

/* eliminate any stray extra space that might come from images */
.tile.img img { display: block; }

/* (keep) correct veil property name */
.tile .veil {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
  mix-blend-mode: multiply;     /* was mix-blend (typo) */
}

/* Ensure text tiles never force tall rows */
.tile { align-self: start; }
.tile.text { overflow: visible; height: auto; }
.tile.text .card { overflow: visible; }

/* If a text tile accidentally has an aspect-* class, neutralize it */
.tile.text[class*="aspect-"] { aspect-ratio: auto !important; }

/* Slightly tighter “micro/pico” tiles so image rows end shorter */
.micro { min-height: 32px; }    /* was 36px */
.pico  { min-height: 12px; }    /* was 14px */


/* ========== Tablet tightening (portrait-ish tablets) ========== */
/* Tune these ranges if needed */
@media (min-width: 700px) and (max-width: 1180px) {

  /* reduce gaps and row margins on tablets */
  :root { --gap: 8px; }

  .row-grid {
    gap: var(--gap);
    margin-bottom: 6px;         /* was var(--gap) */
  }

  /* slightly tighter text for tablets */
  .tile.text .card { padding: 8px 10px; }
  .tile.text p     { font-size: 12px; line-height: 1.45; }

  /* title block spacing on tablet */
  .title-card h1 { margin-bottom: 1px; }
  .title-card h2 { opacity: .95; }

  /* tighten ultra-wide strips a touch to avoid tall rows created by them */
  .tile.img.aspect-ultra-strip { aspect-ratio: 11 / 1; } /* was 12/1 */

  /* optional: shave the long 21:9 a bit on tablet so rows end sooner */
  .tile.img.aspect-21-9 { aspect-ratio: 20 / 9; }        /* subtle */
}


/* ========== Phone (already fairly tight, but a last nudge) ========== */
@media (max-width: 700px) {
  :root { --gap: 6px; }

  .row-grid {
    gap: var(--gap);
    margin-bottom: 6px;
  }

  .tile.text .card { padding: 8px 9px; }
  .tile.text p { font-size: 11.5px; line-height: 1.45; }

  .logos-row .logos {
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }
}
/* --- HARD FIX: text tiles must never be fixed-height --- */

/* 0) Guard rows to size to content across items */
/* .row-grid { grid-auto-rows: auto; } */

/* 1) Neutralise any aspect locks that may have leaked onto text tiles */
.tile.text[class*="aspect-"] {
  aspect-ratio: auto !important;
}

/* 2) Remove any fixed heights and clipping from text tiles */
.tile.text {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  position: relative;
}

/* 3) Ensure text wrapper itself can grow naturally */
.tile.text .card {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* 4) If any global rule set children to 100% height, undo that for text */
.tile.text > * {
  height: auto !important;
  position: static;    /* avoid absolute positioning inside text tiles */
}

/* 5) Centered quote box should not force 100% height */
.tile.text.centered .card {
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 6) At tablet/phone sizes, re-assert the above (belt & braces for iOS) */
@media (max-width: 1180px) {
  .tile.text,
  .tile.text .card,
  .tile.text > * {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .tile.text[class*="aspect-"] { aspect-ratio: auto !important; }
}

/* iPad/tablet portrait readability fix: make text tiles full row */
@media (min-width: 834px) and (max-width: 1180px) {
  .row-grid {
    grid-template-columns: repeat(12, 1fr); /* slightly fewer, wider columns */
  }
  /* Let every text tile take the full row (wide, readable) */
  .row-grid .tile.text {
    grid-column: 1 / -1 !important;
  }
}

/* iPad Pro portrait fix: final "Art installation" paragraph full width */
@media (min-width: 834px) and (max-width: 1180px) {
  .row-grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .row-grid .tile.text.ipad-full {
    grid-column: 1 / -1 !important;
  }
}

.tile.img img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* 1) Use shrinkable tracks so items can't bully columns wider */
.row-grid { grid-template-columns: repeat(14, minmax(0, 1fr)); }

/* Tablet-wide layouts */
@media (max-width: 1200px) {
  .row-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }

  /* Any tile trying to start beyond col 8 must auto-place instead */
  .start-9, .start-10, .start-11, .start-12, .start-13, .start-14 {
    grid-column-start: auto !important;
  }
}

/* iPad portrait range (you use 12 cols here) */
@media (min-width: 834px) and (max-width: 1180px) {
  .row-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  /* Clamp invalid start positions for a 12-col grid */
  .start-13, .start-14 {
    grid-column-start: auto !important;
  }
}

/* Small laptops / large phones (you already had a 900px rule, keep consistency) */
@media (max-width: 900px) {
  .row-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .start-7, .start-8, .start-9, .start-10, .start-11, .start-12, .start-13, .start-14 {
    grid-column-start: auto !important;
  }
}

/* 2) Let grid children shrink within their columns instead of forcing expansion */
.row-grid > * { min-width: 0; min-height: 0; }

/* 3) Re-assert image tile sizing (in case any earlier rule weakened it) */
.tile.img.aspect-16-9        { aspect-ratio: 16 / 9; }
.tile.img.aspect-21-9        { aspect-ratio: 21 / 9; }
.tile.img.aspect-square      { aspect-ratio: 1 / 1; }
.tile.img.aspect-mini        { aspect-ratio: 4 / 3; }
.tile.img.aspect-strip       { aspect-ratio: 7 / 1; }
.tile.img.aspect-ultra-strip { aspect-ratio: 12 / 1; }
.tile.img.aspect-thin-vert   { aspect-ratio: 1 / 6; }

.tile.img img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.tile.text a { color:#cfd7df; text-decoration:underline; text-underline-offset:2px; }
.tile.text a:hover { color:#e8edf2; text-decoration:none; }

/* Subtler title rhythm */
.title-card h1 { letter-spacing: 0.2px; }
.title-card h2 { letter-spacing: 0.15px; opacity:.96; }

/* Improve paragraph measure a touch on desktop */
@media (min-width: 1180px){
  .tile.text p { font-size: 13px; line-height: 1.55; }
}

/* Accessible focus style for links */
.tile.text a:focus-visible {
  outline: 2px dashed #cfd7df;
  outline-offset: 2px;
  text-decoration: none;
}

.tile.text.meditation p,
.quote {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 2px;     /* ← stretched look */
  text-transform: uppercase;
  color: #cfcfcf;
  text-align: center;
}