/* ===========================================================
   Starlink Video Guides — Italiano
   Design language: black/white, thin rules, dashed schematic
   lines, blueprint-style corner marks. Inspired by starlink.com
   =========================================================== */

:root{
  --bg:        #050505;
  --bg-alt:    #0d0d0d;
  --fg:        #f4f4f4;
  --fg-dim:    #9a9a9a;
  --fg-faint:  #5c5c5c;
  --line:      #2a2a2a;
  --line-strong: #444;
  --accent:    #eaeaea;
  --accent-line: #3fa9f5;
  --radius:    2px;
  --maxw:      1180px;
  --gap:       24px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

svg{ width:16px; height:16px; display:block; }

html{ background:var(--bg); }

body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Roboto', -apple-system, Segoe UI, Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Oswald', 'Arial Narrow', sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--fg);
}

a{ color:inherit; text-decoration:none; }

img{ max-width:100%; display:block; }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- dashed / schematic helpers ---------- */

.dashed{
  border-top:1px dashed var(--line-strong);
}

.corner-frame{
  position:relative;
  border:1px solid var(--line);
}
.corner-frame::before,
.corner-frame::after,
.corner-frame > .cf-tr,
.corner-frame > .cf-br{
  content:"";
  position:absolute;
  width:14px; height:14px;
  border:1px solid var(--fg);
  pointer-events:none;
}
.corner-frame::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.corner-frame::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Oswald', sans-serif;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.tag::before{
  content:"";
  width:6px; height:6px;
  border:1px solid var(--fg-dim);
  transform:rotate(45deg);
}

.crosshair{
  width:16px; height:16px;
  position:relative;
  flex:none;
}
.crosshair::before, .crosshair::after{
  content:"";
  position:absolute;
  background:var(--fg-faint);
}
.crosshair::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-.5px); }
.crosshair::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-.5px); }

/* ---------- header ---------- */

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(5,5,5,.86);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo{
  font-family:'Oswald', sans-serif;
  font-weight:700;
  font-size:19px;
  letter-spacing:.08em;
  display:flex; align-items:center; gap:10px;
}
.logo .dot{ width:7px; height:7px; background:var(--accent-line); border-radius:50%; }
.logo small{
  display:block;
  font-family:'Roboto', sans-serif;
  font-weight:400;
  font-size:10px;
  letter-spacing:.14em;
  color:var(--fg-dim);
  text-transform:uppercase;
}

.nav{ display:flex; gap:32px; align-items:center; }
.nav a{
  font-family:'Oswald', sans-serif;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg-dim);
  position:relative;
  padding-bottom:4px;
}
.nav a:hover, .nav a.active{ color:var(--fg); }
.nav a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--accent-line);
}

/* ---------- hero ---------- */

.hero{
  padding:88px 0 64px;
  border-bottom:1px dashed var(--line);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.12;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.hero .wrap{ position:relative; }
.hero .eyebrow{
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(34px,5vw,58px);
  line-height:1.05;
  max-width:16ch;
}
.hero p{
  margin-top:20px;
  max-width:56ch;
  color:var(--fg-dim);
  font-size:16px;
}

/* ---------- catalog grid ---------- */

.catalog{ padding:64px 0 96px; }
.catalog-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:32px;
  padding-bottom:16px;
  border-bottom:1px dashed var(--line);
}
.catalog-head h2{ font-size:22px; }
.catalog-count{ font-family:'Oswald',sans-serif; font-size:12px; color:var(--fg-dim); letter-spacing:.1em; }

.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
}
@media (max-width:920px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid{ grid-template-columns:1fr; } }

.card{
  background:var(--bg-alt);
  display:flex; flex-direction:column;
  transition:border-color .15s ease, transform .15s ease;
}
.card:hover{ border-color:var(--fg-dim); transform:translateY(-2px); }

.card .thumb{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#111;
  border-bottom:1px solid var(--line);
}
.card .thumb img{ width:100%; height:100%; object-fit:cover; filter:grayscale(45%) contrast(1.05); }
.card .thumb .idx{
  position:absolute; top:10px; left:10px;
  font-family:'Oswald',sans-serif;
  font-size:11px; letter-spacing:.1em;
  color:var(--fg-dim);
  background:rgba(5,5,5,.7);
  border:1px solid var(--line);
  padding:3px 7px;
}
.card .thumb .play{
  position:absolute; right:10px; bottom:10px;
  width:30px; height:30px;
  border:1px solid var(--fg);
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,5,5,.55);
}
.card .thumb .play svg{ width:10px; height:10px; }

.card .body{
  padding:16px 18px 20px;
  display:flex; flex-direction:column; gap:8px; flex:1;
}
.card .cat{
  font-family:'Oswald',sans-serif;
  font-size:10.5px; letter-spacing:.14em;
  color:var(--fg-faint);
  text-transform:uppercase;
}
.card h3{ font-size:16px; letter-spacing:.02em; line-height:1.3; }
.card p{
  font-size:13.5px; color:var(--fg-dim);
  flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card .more{
  margin-top:6px;
  font-family:'Oswald',sans-serif;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg);
  display:flex; align-items:center; gap:6px;
}
.card .more svg{ width:11px; height:11px; }

/* ---------- video page ---------- */

.video-hero{
  padding:40px 0 0;
}
.crumbs{
  display:flex; align-items:center; gap:8px;
  font-family:'Oswald',sans-serif;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-faint);
  margin-bottom:22px;
}
.crumbs a:hover{ color:var(--fg-dim); }

.video-title-row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  flex-wrap:wrap;
  padding-bottom:26px;
  border-bottom:1px dashed var(--line);
  margin-bottom:32px;
}
.video-title-row h1{ font-size:clamp(26px,4vw,42px); max-width:22ch; }
.meta-strip{
  display:flex; gap:22px; flex-wrap:wrap;
}
.meta-item{ text-align:left; }
.meta-item .k{
  font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.14em;
  color:var(--fg-faint); text-transform:uppercase; display:block; margin-bottom:4px;
}
.meta-item .v{ font-size:13.5px; color:var(--fg-dim); }

.player-frame{
  position:relative;
  margin-bottom:40px;
}
.player-frame video{
  width:100%; display:block; background:#000;
  aspect-ratio:16/9;
}

.content-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:56px;
  padding-bottom:80px;
}
@media (max-width:860px){ .content-grid{ grid-template-columns:1fr; gap:36px; } }

.desc h2{ font-size:14px; margin-bottom:16px; color:var(--fg-dim); letter-spacing:.12em; }
.desc p{ margin-bottom:16px; color:#d8d8d8; font-size:15.5px; }
.desc p:last-child{ margin-bottom:0; }

.spec-box{
  border:1px solid var(--line);
  padding:22px;
  position:relative;
}
.spec-box h3{
  font-size:12px; letter-spacing:.14em; color:var(--fg-dim); margin-bottom:16px;
}
.spec-list{ list-style:none; }
.spec-list li{
  display:flex; justify-content:space-between; gap:12px;
  padding:10px 0;
  border-top:1px dashed var(--line);
  font-size:13.5px;
}
.spec-list li:first-child{ border-top:none; }
.spec-list .k{ color:var(--fg-faint); }
.spec-list .v{ color:var(--fg); text-align:right; }

.back-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:24px;
  font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-dim);
}
.back-link:hover{ color:var(--fg); }
.back-link svg{ width:12px; height:12px; flex:none; }

/* ---------- related ---------- */

.related{ padding:0 0 96px; }
.related h2{
  font-size:14px; letter-spacing:.12em; color:var(--fg-dim);
  padding-bottom:16px; border-bottom:1px dashed var(--line); margin-bottom:28px;
}

/* ---------- footer ---------- */

.site-footer{
  border-top:1px solid var(--line);
  padding:48px 0 40px;
  background:var(--bg-alt);
}
.footer-grid{
  display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
  padding-bottom:32px;
}
.footer-col h4{
  font-size:11px; letter-spacing:.14em; color:var(--fg-dim); margin-bottom:14px;
}
.footer-col a, .footer-col p{
  display:block; font-size:13.5px; color:var(--fg-dim); margin-bottom:8px;
}
.footer-col a:hover{ color:var(--fg); }
.contact-row{ display:flex; align-items:center; gap:8px; }
.contact-row svg{ width:14px; height:14px; flex:none; color:var(--fg-faint); }

.footer-bottom{
  padding-top:22px;
  border-top:1px dashed var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:11.5px; color:var(--fg-faint);
  font-family:'Oswald',sans-serif; letter-spacing:.06em;
}

/* ---------- misc ---------- */

.eyebrow{ margin-bottom:10px; }
::selection{ background:var(--fg); color:var(--bg); }