:root{
  --bg:#ffffff;
  --fg:#0a0a0a;
  --muted:#666;
  --line:#e7e7e7;
  --panel:#fafafa;
  --yellow:#FFD400;
  --pink:#FF2D95;
  --max:1160px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:var(--bg); color:var(--fg); line-height:1.35}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline; text-decoration-thickness:2px; text-decoration-color:var(--yellow)}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

/* REMOVE ROUNDING EVERYWHERE */
img, iframe, video, canvas, svg { border-radius: 0 !important; }
.embed, .release, .card, .modal, .modal-panel, .modal-backdrop { border-radius: 0 !important; }

/* Header */
.site-header{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); background:#fff; background-size:cover; background-position:center; background-repeat:no-repeat}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; min-height:64px}
.brand{display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.08em}
.brand img{max-height:40px; height:auto; width:auto; display:block}
.social{display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end}
.social a{font-size:12px; letter-spacing:.08em; font-weight:700}

/* Sections */
section{border-bottom:1px solid var(--line)}
.highlights{padding:0}
.catalog{padding:34px 0 40px}
.links{padding:34px 0 60px}

.kicker{font-size:12px; letter-spacing:.14em; font-weight:800; color:var(--muted)}
.h1{font-size:40px; line-height:1.05; font-weight:900; letter-spacing:-.02em; margin:12px 0 10px}
.h2{font-size:22px; line-height:1.1; font-weight:900; letter-spacing:-.01em; margin:0}
.sub{font-size:14px; font-weight:600; color:var(--muted)}
.body{font-size:15px; max-width:70ch; margin:16px 0 18px}

/* Buttons */
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border:1px solid var(--fg); font-weight:800; font-size:12px; letter-spacing:.08em; background:#fff}
.btn.primary{background:var(--fg); color:#fff; border-color:var(--fg)}
.btn.ghost{background:transparent}
.btn.link{border-color:transparent; padding:10px 0; cursor:pointer}

/* Highlight rows */
.highlight-row{width:100%}
.highlight-row .wrap{padding:0 20px}
.highlight-inner{display:flex; gap:22px; padding:64px 0; align-items:flex-start; flex-wrap:nowrap}
.highlight-inner.center{flex-direction:column; align-items:center; text-align:center}
.highlight-inner.left{flex-direction:row}
.highlight-inner.right{flex-direction:row-reverse}
@media(max-width:980px){.highlight-inner.left,.highlight-inner.right{flex-direction:column; flex-wrap:initial}}

.hl-content{flex:1 1 0; min-width:0}

/* Highlight image */
.hl-image{margin:14px 0 0; display:block}
.hl-image img{display:block; max-width:520px; width:100%; height:auto; border:0; background:transparent}

/* Side image column */
.hl-media{width:100%; flex:0 0 420px; max-width:420px}
.hl-media img{display:block; width:100%; height:auto; border:0; background:transparent}
@media(max-width:980px){.hl-media{flex:1 1 auto; max-width:none}}

/* Embed grid 16:9 */
.embed-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
@media(max-width:980px){.embed-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media(max-width:520px){.embed-grid{grid-template-columns:1fr; justify-items:center}.embed{width:min(92vw,360px)}}
.embed{border:1px solid var(--line); background:var(--panel); overflow:hidden}
.ratio{position:relative; width:100%; padding-top:56.25%}
.ratio iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.embed-cap{padding:10px 12px; font-size:12px; color:var(--muted); font-weight:600}

/* Reviews */
.reviews{margin-top:14px; border-top:1px solid var(--line); padding-top:14px}
.quote{margin:0 0 12px; padding-left:14px; border-left:3px solid var(--pink)}
.quote p{margin:0 0 6px; font-size:14px}
.quote .src{font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.06em}


.quote .src a{
  color: inherit;
  text-decoration: none;
}

.quote .src a:hover{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--yellow);
}

/* Catalog grid */
.catalog-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media(max-width:600px){
  .grid{display:flex; flex-direction:column; gap:10px}
  .release a{display:grid; grid-template-columns:88px 1fr; gap:12px; align-items:start}
  .release .meta{padding:10px 10px 12px}
  .release .title{font-size:13px}
  .release .type,.release .line{font-size:11px}
}
.release{border:1px solid var(--line); overflow:hidden; background:#fff}
.release a{display:block}
.release .img{aspect-ratio:1/1; background:var(--panel); display:flex; align-items:center; justify-content:center}
.release .img img{width:100%; height:100%; object-fit:cover}
.release .meta{padding:12px 12px 14px}
.release .title{font-weight:900; font-size:14px; letter-spacing:.04em}
.release .type{font-size:12px; color:var(--muted); margin-top:6px; font-weight:800; letter-spacing:.08em}
.release .line{font-size:12px; color:var(--muted); margin-top:6px; font-weight:700}

/* Catalog highlight styling (release-owned) */
.release.is-highlight-yellow{box-shadow:0 0 0 1px var(--yellow), 0 0 18px rgba(255,212,0,.22)}
.release.is-highlight-pink{box-shadow:0 0 0 1px var(--pink), 0 0 18px rgba(255,45,149,.18)}

/* Links section */
.links-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
@media(max-width:980px){.links-grid{grid-template-columns:1fr}}
.links-list a{display:block; padding:8px 0; font-weight:800; letter-spacing:.06em}
.links-image img{width:100%; height:auto; display:block}

/* Footer */
.site-footer{padding:22px 0}
.footer-inner{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center}
.footer-meta{font-size:12px; color:var(--muted); font-weight:700}

/* Modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1000}
.modal-panel{position:fixed; inset:8vh 10vw; background:#fff; border:1px solid var(--line); z-index:1001; display:flex; flex-direction:column}
@media(max-width:980px){.modal-panel{inset:6vh 6vw}}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line)}
.modal-title{font-weight:900; letter-spacing:.06em}
.modal-body{padding:16px; overflow:auto}
.modal-close{border:1px solid var(--fg); background:#fff; font-weight:900; padding:8px 10px; cursor:pointer}

/* ---------- EMBEDS (videos) ---------- */

/* Tablet: keep 2 columns */
@media (max-width: 980px) {
  .embed-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Small phones: 1 column but NOT full-width giant */
@media (max-width: 520px) {
  .embed-grid {
	grid-template-columns: 1fr !important;
	justify-items: center;       	/* center the card */
  }
  .embed {
	width: min(92vw, 360px);     	/* cap size so it doesn't feel huge */
  }
}

/* ---------- RELEASES (catalog) ---------- */

/* Tablet: 4-column grid keeps “table” feel */
@media (max-width: 980px) {
  .grid {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Phones: switch to compact list rows (thumbnail + text) */
@media (max-width: 600px) {
  .grid {
	display: flex !important;
	flex-direction: column;
	gap: 10px;
  }

  .release a {
	display: grid;
	grid-template-columns: 88px 1fr; /* compact thumbnail + text */
	gap: 12px;
	align-items: start;
  }

  .release .img {
	aspect-ratio: 1 / 1;
  }

  .release .meta {
	padding: 10px 10px 12px;
  }

  .release .title {
	font-size: 13px;             	/* slightly smaller for density */
  }

  .release .type,
  .release .line {
	font-size: 11px;             	/* tighter table-like readability */
  }
}

/* Header responsive: stack socials below brand on smaller screens */
@media (max-width: 820px){
  .header-inner{
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
  }

  .social{
	width: 100%;
	justify-content: flex-start;
	gap: 10px 14px;
	padding: 14px;
  }
}

/* Reviews: make View All Reviews button look like CTA buttons */
.reviews .btn.link{
  padding: 10px 14px;      	/* CTA-like horizontal padding */
  border: 1px solid var(--fg); /* CTA-like border */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.reviews .btn.link:hover{
  text-decoration: none;   	/* keep button look */
}

/* Catalog filter UI */
.catalog-filter{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.catalog-filter select{
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
}