/* Meddle social tiles. Every value comes from brand/visual/tokens.css.
   --u is one unit on a 1080px-wide tile (set by tiles.js), so layouts scale to any format. */

.tile {
  position: relative; overflow: hidden; box-sizing: border-box;
  background: var(--m-bg); color: var(--m-fg);
  font-family: var(--m-font-sans); letter-spacing: var(--m-tracking-brand);
  -webkit-font-smoothing: antialiased; font-feature-settings: 'liga' 1, 'calt' 1;
  display: flex; flex-direction: column;
  padding: calc(var(--u) * 36);
}
.tile *, .tile *::before, .tile *::after { box-sizing: border-box; }
.tile em { font-family: var(--m-font-serif); font-style: italic; font-weight: 400; letter-spacing: var(--m-tracking-italic); padding-left: .04em; }
.tile p { margin: 0; }

/* Header: wordmark in the corner, mono meta, page number */
.t-head { display: flex; align-items: flex-start; gap: calc(var(--u) * 28); flex: none; }
.t-wm { width: calc(var(--u) * 260); flex: none; color: var(--m-fg); line-height: 0; }
.t-wm svg { width: 100%; height: auto; display: block; fill: currentColor; }
.t-wm.ghost { color: var(--m-wordmark-ghost); mix-blend-mode: var(--m-wordmark-ghost-blend); }
.t-meta { font-family: var(--m-font-mono); font-size: calc(var(--u) * 18); line-height: 1.3; text-transform: uppercase; letter-spacing: 0; color: var(--m-muted-small); padding-top: calc(var(--u) * 4); }
.t-pg { margin-left: auto; text-align: right; }

/* The fitting box: tiles.js sizes the text inside to fill it without overflowing */
.t-fit { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.t-fit.bottom { justify-content: flex-end; }
.t-fit.center { justify-content: center; }

/* Descender room: italic Baskerville (g, y, f) hangs below the line box, and .t-fit clips overflow.
   The padding sits inside each fitted block, so the auto-fit measures it and exports keep it. */
.t-statement, .t-case, .t-quote, .t-signoff { padding-bottom: .22em; }
.t-display { padding-bottom: .28em; }

/* Statement: medium weight, anchored bottom-left, beside a title rule */
.layout-statement .t-main { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: calc(var(--u) * 40); padding-left: calc(var(--u) * 22); border-left: 1px solid var(--m-rule); }
.t-statement { font-weight: 500; line-height: 1.12; letter-spacing: var(--m-tracking-brand); text-wrap: pretty; }
.t-support { flex: none; margin-top: calc(var(--u) * 28) !important; font-size: calc(var(--u) * 28); font-weight: 500; line-height: 1.35; color: var(--m-fg-secondary); max-width: 34em; }

/* Display: heavy, between rules (the deck cover) */
.layout-display .t-main { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: calc(var(--u) * 36); border-top: 1px solid var(--m-rule); border-bottom: 1px solid var(--m-rule); padding: calc(var(--u) * 28) 0; }
.t-display { font-weight: 900; line-height: .95; letter-spacing: var(--m-tracking-display); }
.t-display em { font-size: 87%; }

/* Quote: Baskerville italic at brand tracking, bold roman mark, Inter cite */
.layout-quote .t-main { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: calc(var(--u) * 40); }
.t-mark { font-family: var(--m-font-serif); font-weight: 700; font-style: normal; font-size: calc(var(--u) * 150); line-height: .7; flex: none; height: calc(var(--u) * 80); }
.t-quote { font-family: var(--m-font-serif); font-style: italic; font-weight: 400; line-height: 1.32; letter-spacing: var(--m-tracking-brand); }
.t-quote em { font-style: normal; }
.t-cite { flex: none; margin-top: calc(var(--u) * 32) !important; font-size: calc(var(--u) * 24); font-weight: 500; }
.t-cite .role { display: block; color: var(--m-muted); font-weight: 500; }

/* Case study: square image frame + label + headline */
.layout-case .t-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 28); margin-top: calc(var(--u) * 36); }
.layout-case.is-wide .t-main { flex-direction: row-reverse; }
.t-frame { flex: 1.25; min-height: 0; border: 1px solid var(--m-rule); background: var(--m-hairline); overflow: hidden; position: relative; }
.layout-case.is-wide .t-frame { flex: 1; }
.t-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-frame .t-empty, .t-hero-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--m-font-mono); font-size: calc(var(--u) * 18); text-transform: uppercase; letter-spacing: 0; color: var(--m-muted-small); }
.layout-case .t-copy { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.t-label { font-family: var(--m-font-mono); font-size: calc(var(--u) * 18); text-transform: uppercase; letter-spacing: 0; color: var(--m-muted-small); flex: none; margin-bottom: calc(var(--u) * 14) !important; }
.t-case { font-weight: 500; line-height: 1.12; letter-spacing: var(--m-tracking-brand); }

/* Hero: full-bleed image, wordmark edge to edge with the difference blend */
.layout-hero { padding: 0; background: var(--m-color-ink); }
.t-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-hero-kicker { position: absolute; left: calc(var(--u) * 36); top: calc(var(--u) * 36); font-family: var(--m-font-mono); font-size: calc(var(--u) * 20); text-transform: uppercase; letter-spacing: 0; color: var(--m-color-paper); mix-blend-mode: difference; }
.t-hero-pg { left: auto; right: calc(var(--u) * 36); }
.t-bleed { position: absolute; left: calc(var(--u) * 24); right: calc(var(--u) * 24); bottom: calc(var(--u) * 24); color: var(--m-color-paper); mix-blend-mode: difference; line-height: 0; }
.t-bleed svg { width: 100%; height: auto; display: block; fill: currentColor; }

/* Sign-off: italic line, contact, wordmark edge to edge */
.layout-signoff .t-main { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: calc(var(--u) * 40); }
.t-signoff { font-family: var(--m-font-serif); font-style: italic; font-weight: 400; line-height: 1.15; letter-spacing: var(--m-tracking-italic); }
.t-url { flex: none; font-family: var(--m-font-mono); font-size: calc(var(--u) * 22); text-transform: uppercase; letter-spacing: 0; color: var(--m-muted-small); margin: calc(var(--u) * 24) 0 calc(var(--u) * 28) !important; }
.layout-signoff .t-bleed { position: static; mix-blend-mode: normal; color: var(--m-fg); flex: none; }