/* SquidStudios portfolio + cross-promo redesign */
:root {
  --studio-deep: #031b35;
  --studio-blue: #07516e;
  --studio-teal: #09a7b6;
  --studio-aqua: #67e6ed;
  --studio-gold: #ffd260;
}

.studio-hero { padding: 36px 0 48px; }
.studio-hero-grid { display:grid; grid-template-columns:minmax(0,.78fr) minmax(460px,1.22fr); gap:42px; align-items:center; }
.studio-kicker { display:inline-flex; align-items:center; gap:10px; color:var(--teal-dark); font-size:14px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.studio-kicker::before { content:""; width:36px; height:4px; border-radius:999px; background:var(--aqua); }
.studio-hero h1 { margin-top:16px; color:var(--navy); font-size:clamp(52px,7.4vw,104px); font-weight:800; line-height:.86; text-transform:uppercase; max-width:680px; }
.studio-hero h1 span { display:block; color:var(--teal-dark); }
.studio-hero .hero-lede { max-width:590px; margin:22px 0 26px; color:var(--navy-soft); font-size:clamp(18px,1.9vw,23px); line-height:1.35; }
.studio-hero-art img { width:100%; height:auto; border-radius:28px; box-shadow:var(--shadow-strong); }
.studio-proof { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.studio-proof span { padding:8px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--navy-soft); font-size:13px; font-weight:800; }

.collection-section { padding:62px 0; }
.collection-head { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:22px; }
.collection-head h2, .finder h2, .instant h2, .latest h2 { color:var(--navy); font-size:clamp(34px,4vw,56px); line-height:.95; text-transform:uppercase; }
.collection-head p, .section-copy { max-width:560px; color:var(--navy-soft); font-size:17px; line-height:1.45; }
.portfolio-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.portfolio-card { min-width:0; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease; }
.portfolio-card:hover, .portfolio-card:focus-within { transform:translateY(-5px); box-shadow:0 22px 50px rgba(5,55,93,.18); }
.portfolio-card > a:first-child { display:block; aspect-ratio:4/5; overflow:hidden; background:linear-gradient(180deg,#e8fbff,#caedf5); }
.portfolio-card > a:first-child img { width:100%; height:100%; object-fit:cover; }
.portfolio-card-body { padding:14px; }
.portfolio-app-row { display:flex; align-items:center; gap:10px; }
.portfolio-icon { width:46px; height:46px; border-radius:12px; object-fit:cover; box-shadow:0 6px 16px rgba(5,55,93,.16); }
.portfolio-card h3 { color:var(--navy); font-size:18px; line-height:1; text-transform:uppercase; }
.portfolio-card p { min-height:38px; margin:8px 0 12px; color:var(--navy-soft); font-size:14px; line-height:1.3; }
.portfolio-actions { display:flex; gap:8px; }
.mini-cta { flex:1; min-height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border-radius:12px; background:var(--navy); color:#fff; font-size:12px; font-weight:800; text-transform:uppercase; }
.mini-cta.secondary { background:var(--sky); color:var(--teal-dark); }

.featured-launch { padding:8px 0 66px; }
.featured-launch-shell { display:grid; grid-template-columns:minmax(0,.72fr) minmax(480px,1.28fr); align-items:center; gap:34px; padding:28px; border-radius:30px; color:#fff; background:linear-gradient(135deg,#053457,#087b91); box-shadow:var(--shadow-strong); }
.featured-launch h2 { margin-top:12px; font-size:clamp(42px,5vw,72px); line-height:.9; text-transform:uppercase; }
.featured-launch p { margin:16px 0 22px; max-width:520px; color:rgba(255,255,255,.86); font-size:18px; line-height:1.4; }
.featured-launch-art img { width:100%; height:auto; border-radius:22px; display:block; }
.featured-badge { display:inline-flex; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:#c9fbff; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }

.finder { padding:62px 0; background:linear-gradient(180deg,rgba(223,248,255,.64),rgba(255,255,255,.15)); }
.finder-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:24px; }
.finder-card { display:block; padding:22px; border-radius:22px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.finder-card strong { display:block; color:var(--teal-dark); font-size:14px; text-transform:uppercase; letter-spacing:.08em; }
.finder-card h3 { margin-top:10px; color:var(--navy); font-size:24px; text-transform:uppercase; }
.finder-card p { margin-top:8px; color:var(--navy-soft); font-size:15px; line-height:1.4; }
.finder-card span { display:inline-block; margin-top:14px; color:var(--teal-dark); font-weight:800; }

.instant { padding:64px 0; }
.instant-shell { display:grid; grid-template-columns:minmax(0,.92fr) minmax(430px,1.08fr); gap:36px; align-items:center; }
.instant-art { padding:18px; border-radius:26px; background:linear-gradient(135deg,#2f1520,#6d2031); box-shadow:var(--shadow-strong); }
.instant-art img { width:100%; border-radius:18px; display:block; }
.instant .button-row { margin-top:22px; }

.latest { padding:62px 0; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
.blog-card { display:block; padding:22px; border-radius:20px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.blog-card small { color:var(--teal-dark); font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.blog-card h3 { margin-top:10px; color:var(--navy); font-size:23px; line-height:1.05; }
.blog-card p { margin-top:10px; color:var(--navy-soft); font-size:15px; line-height:1.4; }

/* Server-rendered and runtime cross-promotion */
.crosspromo { padding:54px 0 62px; }
.crosspromo-shell { padding:26px; border-radius:28px; background:linear-gradient(135deg,#052f4f,#08768e); color:#fff; box-shadow:var(--shadow-strong); }
.crosspromo-head { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:20px; }
.crosspromo-head h2 { font-size:clamp(30px,3.6vw,48px); line-height:.95; text-transform:uppercase; }
.crosspromo-head p { max-width:470px; color:rgba(255,255,255,.78); }
.crosspromo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.crosspromo-card { display:flex; align-items:center; gap:12px; padding:13px; border-radius:18px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:#fff; transition:background .16s ease, transform .16s ease; }
.crosspromo-card:hover { background:rgba(255,255,255,.16); transform:translateY(-2px); }
.crosspromo-card img { width:68px; height:68px; border-radius:16px; object-fit:cover; background:#fff; }
.crosspromo-card strong { display:block; font-size:18px; text-transform:uppercase; line-height:1; }
.crosspromo-card span { display:block; margin-top:6px; color:#ccecf2; font-size:13px; line-height:1.25; }
.crosspromo-card b { display:inline-block; margin-top:8px; color:#ffd568; font-size:12px; text-transform:uppercase; }

.app-page-dice-harbor .app-hero-copy .eyebrow { color:#8f5327; }
.app-page-dice-harbor .app-hero-copy .eyebrow::before { background:#f3b24e; }
.app-page-dice-harbor .app-hero h1 span { color:#0b7892 !important; }
.app-page-dice-harbor .tag { background:#fff0cf; color:#8a5428; }

@media (max-width:1100px) {
  .portfolio-grid { grid-template-columns:repeat(3,1fr); }
  .studio-hero-grid, .featured-launch-shell, .instant-shell { grid-template-columns:1fr; }
  .studio-hero-art { order:-1; }
  .finder-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  .studio-hero { padding-top:18px; }
  .studio-hero h1 { font-size:clamp(46px,15vw,72px); }
  .collection-head, .crosspromo-head { display:block; }
  .collection-head p, .crosspromo-head p { margin-top:10px; }
  .portfolio-grid { grid-template-columns:1fr 1fr; }
  .finder-grid, .blog-grid { grid-template-columns:1fr; }
  .crosspromo-grid { grid-template-columns:1fr; }
  .featured-launch-shell { padding:20px; }
}
@media (max-width:520px) {
  .portfolio-grid { grid-template-columns:1fr; }
  .portfolio-card > a:first-child { aspect-ratio:16/10; }
  .portfolio-card p { min-height:0; }
}