/* XR Jags pages (file name kept from the CAAV site): brand-page pieces on top of site.css (same 14islands-style system). */

/* brand: logo tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{border-radius:var(--r);padding:32px;display:flex;flex-direction:column;gap:18px;justify-content:space-between;align-items:flex-start;min-height:200px;background:var(--panel)}
.tile.ink{background:var(--invert);color:var(--panel)}
.tile.ink small{color:rgba(255,255,255,.66)}
.tile.gray{background:var(--bg);border:1px solid var(--line)}
section.panel .tile{background:var(--bg)}
section.panel .tile.ink{background:var(--invert)}
section.panel .tile.gray{background:var(--panel)}
.tile img{max-width:100%;height:auto}
.tile small{color:var(--ink-2)}

/* brand: do and do not */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.do,.dont{border-radius:var(--r);padding:28px;background:var(--panel)}
section.panel .do,section.panel .dont{background:var(--bg)}
.do>b,.dont>b{display:block;font:400 .75rem/1.4 var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.dont>b{color:var(--ink)}

/* brand: application mock-ups */
.mocks{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mock{border-radius:var(--r);padding:20px;background:var(--panel)}
section.panel .mock{background:var(--bg)}
.mock h4{margin:0 0 14px;color:var(--ink-2)}
.card-biz{background:var(--invert);color:var(--panel);border-radius:10px;aspect-ratio:7/4;padding:16px;display:flex;flex-direction:column;justify-content:space-between}
.card-biz img{height:30px;width:auto;align-self:flex-start}
.card-biz b{font:400 1.05rem var(--font-display);letter-spacing:-.02em}.card-biz span{font-size:.78rem;opacity:.75}
.post{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:10px;aspect-ratio:1/1;padding:18px;display:flex;flex-direction:column;justify-content:space-between}
.post b{font:400 clamp(1.4rem,2.2vw,1.9rem)/1.02 var(--font-display);letter-spacing:-.04em}
.post img{height:34px;width:auto;align-self:flex-start}
.letter{background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px;aspect-ratio:8.5/11;display:flex;flex-direction:column;gap:8px;font-size:.62rem;color:var(--ink-2)}
.letter img{height:26px;width:auto;align-self:flex-start}
.letter hr{border:0;border-top:1px solid var(--ink);width:100%;margin:2px 0}
pre.sig{background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px;font:400 .78rem/1.5 var(--font-body);white-space:pre-wrap;margin:0}

/* brand: swatches */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.sw{border-radius:var(--r);overflow:hidden;background:var(--panel)}
section.panel .sw{background:var(--bg)}
.sw i{display:block;height:110px;border-bottom:1px solid var(--line)}
.sw div{padding:14px 16px;font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.sw b{display:block;font:400 1.1rem var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.sw code{font:500 .75rem var(--font-body);letter-spacing:.04em;color:var(--ink)}

/* brand: type specimens */
.specimen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px 32px;padding:28px 0;border-bottom:1px solid var(--line);align-items:end}
.specimen:first-of-type{border-top:1px solid var(--line)}
.specimen .big{font:300 clamp(3rem,7vw,6rem)/1 var(--font-display);letter-spacing:-.04em}
.specimen .ui{font:400 1rem/1.4 var(--font-body);text-transform:uppercase;letter-spacing:.06em}
.specimen p{margin:0;color:var(--ink-2)}

@media (max-width:900px){
  .tiles,.mocks{grid-template-columns:1fr 1fr}
  .rules{grid-template-columns:1fr}
  .specimen{grid-template-columns:1fr}
}
@media (max-width:640px){
  .tiles,.mocks{grid-template-columns:1fr}
}