/* =========================================================
   eitandarwish.com — clean styles.css (minimal + CMS tiles)
   ========================================================= */

/* -------------------------
   Theme tokens
-------------------------- */
:root{
  --bg: #0b0c10;
  --bg2:#0f1118;
  --text:#eef1ff;
  --muted:#a9b0d0;
  --line: rgba(255,255,255,.12);
  --shadow: 0 18px 70px rgba(0,0,0,.45);

  --radius: 18px;
  --radius2: 26px;
  --max: 1200px;

  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

[data-theme="light"]{
  --bg: #fbfbfd;
  --bg2:#f3f4f8;
  --text:#0b0c10;
  --muted:#4b5168;
  --line: rgba(10,10,18,.12);
  --shadow: 0 18px 70px rgba(10,10,18,.12);
}

/* -------------------------
   Base
-------------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font-family:var(--font);
  background:
    radial-gradient(1200px 800px at 70% -20%, rgba(135,168,255,.28), transparent 55%),
    radial-gradient(1000px 700px at 0% 10%, rgba(139,247,196,.22), transparent 52%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.bg-noise{
  position:fixed; inset:0; pointer-events:none; opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

a{ color: inherit; }
.muted{ color:var(--muted); }

/* -------------------------
   Buttons + nav links
-------------------------- */
.btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding:10px 12px;
  border-radius: 14px;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
}
.btn--ghost{ background: rgba(255,255,255,.02); }
.btn:hover{ filter:brightness(1.03); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.nav__link{
  color: rgba(255,255,255,0.70);
  text-decoration:none;
  font-size: 13px;
  padding:8px 10px;
  border-radius: 12px;
}
.nav__link:hover{ color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.06); }
.nav__link.is-active{ color: rgba(255,255,255,0.95); font-weight: 650; }

/* -------------------------
   Minimal landing layout (shared)
-------------------------- */
body.landing{
  min-height: 100vh;
}

.landing__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding: 28px 36px;
  max-width: var(--max);
  margin: 0 auto;
  gap: 18px;
}

.landing__name{
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.landing__home{
  text-decoration: none;
  color: inherit;
}

.landing__tagline{
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}

.landing__nav{
  display:flex;
  gap: 18px;
  align-items:center;
  flex-wrap: wrap;
}

.landing__main{
  max-width: var(--max);
  margin: 0 auto;
  padding: 36px 36px 10px;
}

.landing__footer{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 36px 34px;
}

.landing__footerInner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 18px;
  flex-wrap: wrap;
}

.landingLinks{
  display:flex;
  gap: 16px;
  align-items:center;
  flex-wrap: wrap;
}

/* Responsive header/footer */
@media (max-width: 860px){
  .landing__header{
    flex-direction:column;
    align-items:flex-start;
    gap: 14px;
  }
  .landing__main{
    padding: 22px 18px 10px;
  }
  .landing__footer{
    padding: 18px 18px 28px;
  }
  .landing__footerInner{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* -------------------------
   Landing “objects” (index page)
   (kept because your current landing uses these styles)
-------------------------- */
.tileStage{
  max-width: var(--max);
  margin: 0 auto;
  min-height: calc(100vh - 220px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 36px;
  padding: 0 36px;
}

.tileDivider{
  width: 1px;
  height: 360px;
  background: rgba(255,255,255,0.10);
}

[data-theme="light"] .tileDivider{
  background: rgba(0,0,0,0.10);
}

.tileLink{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  outline: none;
}

.tileObject{
  width: min(520px, 40vw);
  height: min(360px, 32vw);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 26px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 22px 90px rgba(0,0,0,0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

[data-theme="light"] .tileObject{
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 22px 90px rgba(0,0,0,0.10);
}

.tileLink:hover .tileObject{
  transform: translateY(-3px);
  border-color: rgba(125, 238, 214, 0.35);
  box-shadow: 0 26px 110px rgba(0,0,0,0.20);
}

.tileCaption{
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.72);
}
[data-theme="light"] .tileCaption{ color: rgba(0,0,0,0.62); }

/* ---------------- Landing split layout (left / divider / right) ---------------- */

:root{
  --landing-card-h: clamp(260px, 28vw, 360px);
  --landing-divider: rgba(15, 23, 42, 0.12);
}

.landingSplit{
  width: min(1120px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 88px);
  align-items: center;
  position: relative;
  padding: clamp(28px, 6vw, 64px) 0;
}

/* middle divider */
.landingSplit::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: var(--landing-divider);
  transform: translateX(-0.5px);
}

.landingCard{
  display: block;
  height: var(--landing-card-h);
}

/* make whatever is inside each link fill the same height */
/* Only force the Creative side to fill its lane */
.landingCard--creative > *{
  height: 100%;
}


/* Creative side: center the pebble and prevent stretching */
.landingCard--creative{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* If your pebble uses an img/svg, this usually helps */
.landingCard--creative img,
.landingCard--creative svg{
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
}

/* Center + visually shrink business card inside its lane */
.landingCard--business{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make the card smaller than the lane and keep realistic business-card proportions */
.landingCard--business .bizCard{
  height: 60%;              /* tweak 74–82% until it matches pebble visually */
  aspect-ratio: 3.5 / 2;    /* real business card ratio */
  width: auto;
  max-width: 100%;
}


/* Mobile: stack and remove divider */
@media (max-width: 900px){
  .landingSplit{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .landingSplit::before{ display: none; }
}

/* ---------------- Business card (Bateman-ish) ---------------- */

.bizCard{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  /* sharp corners */
  border-radius: 0;

  /* whiter stock + subtle tonal shift */
  background: linear-gradient(180deg, #ffffff 0%, #f6f7f8 100%);
  border: 1px solid rgba(15, 23, 42, 0.10);

  /* realistic shadow */
  box-shadow:
    0 34px 52px rgba(0,0,0,0.16),
    0 1px 0 rgba(255,255,255,0.65) inset;

  /* layout */
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 22px 24px;
}

/* subtle paper grain (very light, not yellow) */
.bizCard::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(0,0,0,0.035), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(0,0,0,0.025), transparent 60%),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.012) 0px,
      rgba(0,0,0,0.012) 1px,
      transparent 1px,
      transparent 6px
    ),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.010) 0px,
      rgba(0,0,0,0.010) 1px,
      transparent 1px,
      transparent 7px
    );
  opacity: 0.35;
  pointer-events: none;
}

/* top-left email */
.bizCard__email{
  position: relative;
  z-index: 1;

  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 12px;

  /* force Bateman-ish small-caps feel */
  text-transform: uppercase;
  letter-spacing: 0.01em;

  color: rgba(0,0,0,0.58);

  /* light emboss */
  text-shadow:
    -0.8px -0.8px 0 rgba(255,255,255,0.75),
    0.9px 0.9px 0 rgba(0,0,0,0.10);
}

/* centered BUSINESS */
.bizCard__center{
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;

  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  font-weight: 600;

  /* big, airy type like the film card */
  font-size: clamp(20px, 4.2vw, 20px);  /* smaller base size */
  text-transform: uppercase;
  letter-spacing: 0.01em;

  color: rgba(0,0,0,0.8);

  /* stronger emboss */
  text-shadow:
    -1.3px -1.3px 0 rgba(255,255,255,0.78),
    1.7px 1.7px 0 rgba(0,0,0,0.12);
}

.bizCard__center::first-letter{
  font-size: 1.18em;         /* makes the B larger than USINESS */
  letter-spacing: 0.01em;    /* helps the first letter not feel cramped */
}


/* Creative pebble image (kept minimal) */
.pearlStone--img{
  position: relative;
  width: 420px;
  max-width: 44vw;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  perspective: 1200px;
  will-change: transform;
  background: transparent !important;
  box-shadow: none !important;
}

.pearlStone__img{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 26px 22px rgba(0,0,0,0.14));
}

.pearlStone__text{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  transform: translateZ(18px);
}

.pearlStone__title{
  font-weight: 800;
  letter-spacing: 0.22em;
  font-size: 14px;
  color: rgba(0,0,0,0.55);
}

.pearlStone__sub{
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 9px;
  color: rgba(0,0,0,0.34);
}

@media (prefers-reduced-motion: no-preference){
  .pearlStone--img{
    animation: pearlFloatRock3D 10.5s ease-in-out infinite;
    transform-origin: 50% 55%;
  }
}
@keyframes pearlFloatRock3D{
  0%, 100% { transform: translateY(0px) rotateX(0.55deg) rotateY(-0.75deg); }
  50%      { transform: translateY(-4px) rotateX(0.95deg) rotateY(0.85deg); }
}
@media (prefers-reduced-motion: reduce){
  .pearlStone--img{ animation: none !important; transform: none !important; }
}

/* Mobile landing objects */
@media (max-width: 860px){
  .tileStage{
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 18px 18px 10px;
    gap: 18px;
  }
  .tileDivider{ display:none; }
  .tileObject{
    width: min(620px, 92vw);
    height: 280px;
  }
  .pearlStone--img{
    width: 340px;
    max-width: 86vw;
  }
}

/* =========================================================
   TILES PAGES (Business + Creative)
   - light background
   - uniform grid
   - horizontal “card” tiles (wider than tall)
   ========================================================= */

/* Always light for tiles pages (independent of theme toggle) */
body.tilesPage{
  background: #f6f7fb !important;
  color: #0f172a !important;
}
body.tilesPage .bg-noise{ opacity: 0.06; mix-blend-mode: multiply; }

body.tilesPage .landing__tagline{ color: rgba(15, 23, 42, 0.60); }
body.tilesPage .nav__link{
  color: rgba(15, 23, 42, 0.70);
}
body.tilesPage .nav__link:hover{
  color: rgba(15, 23, 42, 0.95);
  background: rgba(15, 23, 42, 0.06);
}
body.tilesPage .nav__link.is-active{
  color: #0f172a;
  background: rgba(15, 23, 42, 0.06);
}

.tilesWrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 36px 56px;
}

.tilesHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin: 6px 0 14px;
}

.tilesTitle{
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  margin: 0;
  color: #0f172a;
}

.tilesSub{
  margin: 6px 0 0;
  color: rgba(15, 23, 42, 0.68);
  font-size: 14px;
  line-height: 1.45;
  max-width: 70ch;
}

.tilesFilters{
  margin: 10px 0 16px;
  padding: 0;
}

.tilesSearch{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #ffffff;
  color: #0f172a;
  outline: none;
}
.tilesSearch::placeholder{ color: rgba(15, 23, 42, 0.45); }
.tilesSearch:focus{ border-color: rgba(15, 23, 42, 0.26); }

.tilesFilterRow{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.tagChips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.chipBtn{
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(15, 23, 42, 0.04);
  color: rgba(15, 23, 42, 0.86);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
}
.chipBtn:hover{ background: rgba(15, 23, 42, 0.06); }
.chipBtn.is-active{
  border-color: rgba(15, 23, 42, 0.26);
  background: rgba(15, 23, 42, 0.10);
  color: rgba(15, 23, 42, 0.95);
}

.resultsMeta{
  margin-top: 10px;
  color: rgba(15, 23, 42, 0.62);
  font-size: 12px;
}

@media (max-width: 700px) {
  .tilesWrap{ padding: 18px 18px 52px; }
  .tilesFilterRow{ flex-direction: column; align-items: stretch; }
  .tilesClear{ align-self: flex-start; }
}

/* --- Uniform tile grid: 2 / 3 / 4 / 5 columns --- */
body.tilesPage #tilesRoot{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 760px)  { body.tilesPage #tilesRoot{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px)  { body.tilesPage #tilesRoot{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1260px) { body.tilesPage #tilesRoot{ grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Flatten CMS wrappers so everything participates in the same grid */
body.tilesPage #tilesRoot .tilesGrid{ display: contents; }
body.tilesPage #tilesRoot .tileGroup{ display: contents; }
body.tilesPage #tilesRoot .tileGroup__children{ display: contents; }

/* Ignore S/M/L sizing */
body.tilesPage #tilesRoot .tile--small,
body.tilesPage #tilesRoot .tile--medium,
body.tilesPage #tilesRoot .tile--large{
  grid-column: auto !important;
}

/* --- Tile = horizontal card (wider than tall) --- */
body.tilesPage .tile{
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: center;

  padding: 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);

  color: #0f172a;
  text-decoration: none;

  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

body.tilesPage .tile:hover{
  transform: translateY(-2px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 14px 40px rgba(2, 6, 23, 0.10);
}

body.tilesPage .tile:focus-visible{
  outline: 2px solid rgba(15, 23, 42, 0.35);
  outline-offset: 3px;
}

/* Media thumbnail */
body.tilesPage .tile__media{
  width: 96px;
  height: 96px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
body.tilesPage .tile__media.hasImage{
  background-size: cover;
  background-position: center;
}

/* Content */
body.tilesPage .tile__kicker{
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}

body.tilesPage .tile__title{
  margin: 0;
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.tilesPage .tile__subtitle{
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(15, 23, 42, 0.70);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.tilesPage .tile__dates{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.60);
}

body.tilesPage .tile__metaRow{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

body.tilesPage .pill{
  display:inline-flex;
  align-items:center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  color: rgba(15, 23, 42, 0.80);
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(15, 23, 42, 0.05);
}

/* Mobile: stack tile vertically */
@media (max-width: 520px){
  body.tilesPage .tile{
    grid-template-columns: 1fr;
    align-items: start;
  }
  body.tilesPage .tile__media{
    width: 100%;
    height: 110px;
  }
}

/* =========================================================
   FORCE WIDE HORIZONTAL CARDS (override)
   ========================================================= */

/* 1 col mobile, 2 col tablet, 3 col desktop */
body.tilesPage #tilesRoot{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 720px){
  body.tilesPage #tilesRoot{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px){
  body.tilesPage #tilesRoot{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Flatten CMS wrappers so everything participates in same grid */
body.tilesPage #tilesRoot .tilesGrid{ display: contents; }
body.tilesPage #tilesRoot .tileGroup{ display: contents; }
body.tilesPage #tilesRoot .tileGroup__children{ display: contents; }

/* Ignore S/M/L sizing */
body.tilesPage #tilesRoot .tile--small,
body.tilesPage #tilesRoot .tile--medium,
body.tilesPage #tilesRoot .tile--large{
  grid-column: auto !important;
}

/* Force tiles to be WIDE cards */
body.tilesPage #tilesRoot .tile{
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 14px;
  align-items: stretch;

  /* This is the key: enforce “wider than tall” */
  aspect-ratio: 5 / 2;
  overflow: hidden;
}

/* Make the media fill the card height */
body.tilesPage #tilesRoot .tile__media{
  width: 112px;
  height: 100%;
  border-radius: 12px;
}

/* Keep content from stretching the card taller */
body.tilesPage #tilesRoot .tile__content{
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Clamp text so it doesn’t make cards taller */
body.tilesPage #tilesRoot .tile__title{
  -webkit-line-clamp: 2;
}
body.tilesPage #tilesRoot .tile__subtitle{
  -webkit-line-clamp: 1;
}

/* Keep tags to one line (no wrapping that increases height) */
body.tilesPage #tilesRoot .tile__metaRow{
  flex-wrap: nowrap;
  overflow: hidden;
}

/* On very small screens, let it stack (still looks like a card) */
@media (max-width: 520px){
  body.tilesPage #tilesRoot .tile{
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }
  body.tilesPage #tilesRoot .tile__media{
    width: 100%;
    height: 120px;
  }
}

/* If a tile has no media, make it a single-column card */
body.tilesPage #tilesRoot .tile--noMedia{
  grid-template-columns: 1fr !important;
}

/* =========================================================
   TILE MODAL (blur background + centered dialog)
   ========================================================= */

body.modal-open{
  overflow: hidden;
}

/* Blur the page behind the modal (works with your layout) */
body.modal-open .landing__header,
body.modal-open .landing__main,
body.modal-open .landing__footer{
  filter: blur(8px);
}

/* Overlay */
.tileModalOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  padding: 28px 16px;
  background: rgba(15, 23, 42, 0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
}

.tileModalOverlay[aria-hidden="false"]{
  display: flex;
}

/* Modal shell */
.tileModal{
  width: min(860px, 94vw);
  max-height: 86vh;
  overflow: auto;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.22);
  position: relative;
}

.tileModal__inner{
  padding: 16px 16px 18px;
}

.tileModal__close{
  position: sticky;
  top: 0;
  margin-left: auto;
  display: block;
  border: 0;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  padding: 14px 16px 0;
  color: rgba(15, 23, 42, 0.55);
}
.tileModal__close:hover{ color: rgba(15, 23, 42, 0.85); }

/* Hero media */
.tileModal__media{
  height: 220px;
  border-radius: 14px;
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background-size: cover;
  background-position: center;
  margin-bottom: 12px;
}

/* Head */
.tileModal__title{
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.tileModal__sub{
  margin-top: 6px;
  color: rgba(15, 23, 42, 0.70);
  font-size: 14px;
  line-height: 1.45;
}
.tileModal__meta{
  margin-top: 10px;
  color: rgba(15, 23, 42, 0.55);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Tags row */
.tileModal__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

/* Body markdown */
.tileModal__body{
  margin-top: 14px;
  color: rgba(15, 23, 42, 0.82);
  line-height: 1.6;
  font-size: 14px;
}
.tileModal__body h2{ font-size: 18px; margin: 18px 0 10px; }
.tileModal__body h3{ font-size: 16px; margin: 16px 0 10px; }
.tileModal__body h4{ font-size: 14px; margin: 14px 0 8px; }
.tileModal__body p{ margin: 10px 0; }
.tileModal__body ul{ margin: 10px 0 10px 18px; }
.tileModal__body li{ margin: 6px 0; }
.tileModal__body a{ color: rgba(15, 23, 42, 0.92); text-decoration: underline; }

/* Actions */
.tileModal__actions{
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Children inside modal (for large tiles) */
.tileModal__childrenWrap{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.10);
}

.tileModal__childrenLabel{
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.60);
  margin-bottom: 10px;
}

/* Modal children WRAPPER should NOT be a 2-col grid */
.tileModal__children,
#tileModalChildren {
  width: 100%;
  max-width: none;
  display: block;   /* key fix */
}

@media (max-width: 640px){
  .tileModal__children{ grid-template-columns: 1fr; }
}

/* Modal children GRID is what should be 2 columns */
.tilesGrid--modal {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  justify-items: stretch;
}

/* Mobile: stack */
@media (max-width: 700px) {
  .tilesGrid--modal {
    grid-template-columns: 1fr;
  }
}


/* Mini child tiles */
.miniTile{
  width: 100%;
  text-align: left;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(15, 23, 42, 0.03);
  border-radius: 14px;
  padding: 10px;
  cursor: pointer;

  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: center;
}
.miniTile:hover{ background: rgba(15, 23, 42, 0.05); }

.miniTile__media{
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(15, 23, 42, 0.10);
}

.miniTile--noMedia{
  grid-template-columns: 1fr;
}

.miniTile__title{
  font-weight: 650;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
}
.miniTile__sub{
  margin-top: 4px;
  color: rgba(15, 23, 42, 0.70);
  font-size: 12px;
  line-height: 1.35;
}

body.tilesPage #tilesRoot .tile--noMedia{
  grid-template-columns: 1fr !important;
}

/* Children as real tiles inside modal */
.tilesGrid--modal{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 720px){
  .tilesGrid--modal{
    grid-template-columns: 1fr !important;
  }
}

/* slightly tighten tiles when they appear inside modal */
.tile--inModal{
  transform: none !important;
}

/* Left-align all tile card content (grid + modal children) */
.tile,
.tile *{
  text-align: left;
}

.tile__content{
  align-items: flex-start;
}

.tile__title,
.tile__subtitle{
  text-align: left;
}

.tile__metaRow{
  justify-content: flex-start;
}

/* --- Modal: children should look like normal wide cards --- */

/* Make the children area a real grid like the main pages */
.tileModal__children .tilesGrid,
.tilesGrid--modal{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  align-items: stretch;
}

/* Ensure child tiles fill the grid cell */
.tileModal__children .tile,
.tile--inModal{
  width: 100%;
}

/* Force wide-card layout for child tiles inside modal */
.tileModal__children .tile,
.tile--inModal{
  display: grid;
  grid-template-columns: 160px 1fr;   /* media column + content column */
  align-items: stretch;
  text-align: left;
}

/* If a child has no media, make it single-column (still wide) */
.tileModal__children .tile.tile--noMedia,
.tile--inModal.tile--noMedia{
  grid-template-columns: 1fr;
}

/* Media should fill its column and crop nicely */
.tileModal__children .tile__media{
  height: 100%;
  min-height: 120px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
}

/* Keep content nicely padded */
.tileModal__children .tile__content{
  padding: 16px;
}

/* Force 2-up layout for child tiles inside the modal (desktop) */
#tileModalChildren .tilesGrid,
.tileModal__children .tilesGrid,
.tilesGrid--modal{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
}

/* Make sure child tiles are allowed to shrink into 2 columns */
#tileModalChildren .tile,
.tile--inModal{
  min-width: 0 !important;
  max-width: none !important;
  justify-self: stretch !important;
  grid-column: auto !important;
}

/* Mobile / narrow screens: 1 column */
@media (max-width: 860px){
  #tileModalChildren .tilesGrid,
  .tileModal__children .tilesGrid,
  .tilesGrid--modal{
    grid-template-columns: 1fr !important;
  }
}

/* Modal children: make the section span full modal width */
.tileModal__childrenWrap,
#tileModalChildrenWrap,
.tileModal__children,
#tileModalChildren{
  width: 100% !important;
  max-width: none !important;
}

/* Ensure the grid inside children uses full width */
#tileModalChildren .tilesGrid,
.tileModal__children .tilesGrid,
.tilesGrid--modal{
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

/* On smaller screens, drop to 1 column */
@media (max-width: 860px){
  #tileModalChildren .tilesGrid,
  .tileModal__children .tilesGrid,
  .tilesGrid--modal{
    grid-template-columns: 1fr !important;
  }
}

/* =========================
   MODAL: Included Work should span full modal width (2-up)
   ========================= */

/* Make the children container a simple 2-col fluid grid */
.modal .tileGroup__children{
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

/* Force each child tile to actually fill its grid column */
.modal .tileGroup__children .tile{
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}

/* If any old “span X columns” rules exist, neutralize them */
.modal .tileGroup__children .tile--small,
.modal .tileGroup__children .tile--medium,
.modal .tileGroup__children .tile--large{
  grid-column: auto !important;
}

/* Mobile: stack */
@media (max-width: 720px){
  .modal .tileGroup__children{
    grid-template-columns: 1fr !important;
  }
}

/* =========================
   PATCH: Modal children width
   ========================= */

/* Make sure any "included work" wrapper can span full modal width */
#modalOverlay .modal,
#modalOverlay .modal__body,
#modalOverlay .modal__bottom,
#modalOverlay .modalContent,
#modalOverlay .modalCard,
#modalOverlay .includedWork,
#modalOverlay .tileGroup__children,
#modalOverlay .tilesGrid,
.modal-overlay .modal,
.modal-overlay .modal__body,
.modal-overlay .tileGroup__children,
.modal-overlay .tilesGrid {
  width: 100%;
  max-width: none !important;
}

/* Force the children area into a real 2-column grid on desktop */
@media (min-width: 900px) {
  #modalOverlay .tileGroup__children,
  #modalOverlay .tilesGrid,
  .modal-overlay .tileGroup__children,
  .modal-overlay .tilesGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch;
  }
}

/* On smaller screens, stack */
@media (max-width: 899px) {
  #modalOverlay .tileGroup__children,
  #modalOverlay .tilesGrid,
  .modal-overlay .tileGroup__children,
  .modal-overlay .tilesGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* Ensure the actual child tiles stretch to fill their grid column */
#modalOverlay .tileGroup__children .tile,
#modalOverlay .tilesGrid .tile,
.modal-overlay .tileGroup__children .tile,
.modal-overlay .tilesGrid .tile {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch;
}

/* If any parent container is centering + shrinking the grid, kill it */
#modalOverlay .tileGroup__children,
#modalOverlay .tilesGrid,
.modal-overlay .tileGroup__children,
.modal-overlay .tilesGrid {
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: stretch !important;
}

/* =========================
   PATCH: Light-only + remove theme toggle
   ========================= */

#themeToggle { display: none !important; }

/* Force light visuals everywhere */
html, body {
  background: #f6f7fb !important;
  color: #0f172a;
}

/* Remove link underlines that make the landing page look "broken" */
a { text-decoration: none; }
a:hover { text-decoration: none; }