/* shared styles for brand pages (/work/<brand>/) */
:root {
  --navy:#1B3A6B; --cream:#F7F4EE; --black:#1a1a1a; --dark:#0e0e0e; --dim:#555; --light-line:#ddd;
  --pink:#FF2D87; --chartreuse:#DFFF00; --apt:#237A3C; --apt-tint:#EAF4EC;
  --walnut-deep:#262522; --board:#769656; --cgreen:#81B64C; --gold:#E3B341; --ccream:#EEEED2;
  --sans:'DM Sans','Helvetica Neue',sans-serif; --mono:'DM Mono',monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--sans); -webkit-font-smoothing:antialiased; background:var(--cream); color:var(--black); }
a { color:inherit; text-decoration:none; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:22px 48px; background:var(--cream); border-bottom:1px solid rgba(0,0,0,0.06); }
.topbar .name { font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; }
.topbar .crumb { font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--navy); }
.topbar .crumb:hover { color:var(--black); }
.brand-head { background:var(--brand); color:var(--brand-ink); padding:88px 48px 72px; }
.brand-head .inner { max-width:1040px; margin:0 auto; }
.bh-kicker { font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; opacity:.75; margin-bottom:18px; }
.brand-head h1 { font-size:clamp(40px,7vw,80px); font-weight:700; line-height:1; letter-spacing:-0.03em; }
.specs { max-width:1040px; margin:0 auto; padding:56px 48px 96px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid.one { grid-template-columns:1fr; }
.tile { display:block; border-radius:6px; overflow:hidden; background:#fff; border:1px solid var(--light-line); transition:transform .25s, box-shadow .25s; }
.tile:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,0.10); }
.tile-art { height:300px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.tile-meta { padding:22px 26px 26px; }
.tile-kind { font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:#999; margin-bottom:8px; }
.tile-title { font-size:26px; font-weight:600; line-height:1.2; margin-bottom:8px; }
.tile-desc { font-size:15px; line-height:1.55; color:#666; max-width:640px; }
.footer { padding:26px 48px; font-size:11px; letter-spacing:1px; color:#bbb; border-top:1px solid #e6e2da; }

/* tile: Battle of the Greats */
.art-botg { background:var(--walnut-deep); }
.art-botg::before { content:''; position:absolute; inset:0; opacity:.18;
  background-image:linear-gradient(45deg,var(--board) 25%,transparent 25%,transparent 75%,var(--board) 75%),linear-gradient(45deg,var(--board) 25%,transparent 25%,transparent 75%,var(--board) 75%);
  background-size:56px 56px; background-position:0 0,28px 28px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%); mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%); }
.botg-inner { position:relative; display:flex; align-items:center; gap:34px; }
.botg-inner img { width:118px; height:118px; border-radius:50%; object-fit:cover; border:4px solid #4A4642; }
.botg-inner img.c { border-color:var(--cgreen); }
.botg-vs { text-align:center; }
.botg-vs .vs { font-family:var(--mono); font-size:22px; color:var(--gold); letter-spacing:2px; }
.botg-vs .t { margin-top:8px; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--ccream); font-weight:700; }
.botg-vs .s { font-size:11px; color:#A8A49E; margin-top:2px; }

/* tile: Consistently Comfortable */
.art-cc { background:var(--dark); }
.art-cc::before,.art-cc::after { content:''; position:absolute; width:260px; height:260px; border-radius:50%; filter:blur(70px); opacity:.35; }
.art-cc::before { left:-70px; top:-70px; background:var(--pink); }
.art-cc::after { right:-70px; bottom:-70px; background:var(--chartreuse); }
.cc-inner { position:relative; text-align:center; line-height:1; }
.cc-inner .a { font-size:46px; font-weight:700; color:var(--pink); letter-spacing:-1px; }
.cc-inner .b { font-size:52px; font-weight:700; color:var(--chartreuse); letter-spacing:-1px; margin-top:2px; }
.cc-inner .s { margin-top:16px; font-size:10px; letter-spacing:4px; text-transform:uppercase; color:#777; }

/* tile: Last Renter Notes */
.art-lrn { background:var(--apt); padding:26px; }
.lrn-card { width:100%; max-width:430px; background:#fff; border-radius:4px; padding:22px 24px 20px; box-shadow:0 10px 30px rgba(0,0,0,.18); transform:rotate(-1.2deg); }
.lrn-chip { display:inline-block; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--apt); background:var(--apt-tint); padding:5px 9px; border-radius:3px; }
.lrn-quote { margin-top:14px; font-size:clamp(18px,2.2vw,23px); font-weight:600; line-height:1.35; letter-spacing:-0.01em; color:#1a1a1a; }
.lrn-by { margin-top:14px; font-size:12.5px; color:#8A9490; }

/* tile: Last Year's Bill */
.art-mint { background:#68C9A4; color:#1C2528; }
.mint-inner { position:relative; text-align:center; line-height:1; }
.mint-inner .n { font-size:clamp(64px,9vw,112px); font-weight:700; letter-spacing:-0.05em; }
.mint-inner .o { display:inline-block; margin-top:10px; font-size:14px; font-weight:700; letter-spacing:4px; text-transform:uppercase; border-top:2px solid #1C2528; padding-top:10px; }
.mint-inner .s { margin-top:14px; font-size:12px; color:#2E3B3F; }

/* tile: Fifty-Two Trips */
.art-amex { background:#006FCF; color:#fff; padding:0 18px; }
.amex-inner { position:relative; display:flex; align-items:center; gap:clamp(12px,1.8vw,30px); line-height:1; max-width:100%; }
.amex-inner .col { text-align:center; }
.amex-inner .n { font-size:clamp(30px,3.6vw,58px); font-weight:700; letter-spacing:-0.04em; }
.amex-inner .n.dim { color:rgba(255,255,255,0.45); }
.amex-inner .t { margin-top:10px; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.85); }
.amex-inner .arrow { font-family:var(--mono); font-size:22px; color:rgba(255,255,255,0.6); }

/* tile: Leverazopam */
.art-rx { background:#1b1f1e; }
.art-rx img { width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:760px) {
  .topbar { padding:18px 24px; } .brand-head { padding:64px 24px 52px; } .specs { padding:40px 24px 72px; }
  .grid { grid-template-columns:1fr; } .tile-art { height:220px; }
  .botg-inner { gap:18px; } .botg-inner img { width:84px; height:84px; }
}