/*!
Theme Name:   Cartel
Theme URI:    https://cartel.marketing/
Author:       Cartel
Description:  Total Eclipse — a basic starter theme for Cartel Marketing. A CSS eclipse hero over a clean editorial base. Deliberately minimal: one stylesheet, the core templates, no dependencies.
Version:      0.1.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  cartel
Tags:         agency, portfolio, one-column, custom-menu, featured-images
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:    #06060D;
  --void:   #0B0B16;
  --solar:  #FFB43A;   /* primary accent */
  --ember:  #FF6A3D;
  --indigo: #4B3FFF;
  --ivory:  #F2EDE3;
  --slate:  #8E8BA0;
  --hair:   rgba(242,237,227,.12);
  --ease:   cubic-bezier(.16,1,.3,1);

  --gutter: clamp(20px, 6vw, 88px);
  --maxw:   1440px;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

a{ color:var(--solar); text-decoration:none; }
a:hover{ color:var(--ivory); }
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ margin:0 0 .5em; font-weight:800; letter-spacing:-.01em; line-height:1.1; }
p{ margin:0 0 1em; }

/* ============================================================
   HELPERS
   ============================================================ */
.wrap{ max-width:var(--maxw); margin-inline:auto; }
.gutter{ padding-inline:var(--gutter); }
.mono{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--slate);
}
.mono b{ color:var(--solar); font-weight:500; }
.gold{ color:var(--solar); }
.lede{ font-size:clamp(17px,1.9vw,21px); line-height:1.5; color:var(--slate); }
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--solar); color:var(--ink);
  padding:12px 18px; font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.skip-link:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--solar); outline-offset:3px; }

/* ============================================================
   NAV
   ============================================================ */
.site-nav{
  position:fixed; inset:0 0 auto; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  transition:background .4s var(--ease), padding .4s var(--ease);
}
.site-nav.is-scrolled{
  background:linear-gradient(180deg, rgba(6,6,13,.92), rgba(6,6,13,0));
  backdrop-filter:blur(6px);
  padding-block:16px;
}
.brand{
  font-weight:900; font-stretch:122%;
  font-size:20px; letter-spacing:.02em; color:var(--ivory);
}
.brand sup{ color:var(--solar); font-size:.5em; }
.nav-menu{
  display:flex; gap:clamp(18px,3vw,38px);
  list-style:none; margin:0; padding:0;
}
.nav-menu a{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate);
}
.nav-menu a:hover,
.nav-menu .current-menu-item > a{ color:var(--ivory); }

/* ============================================================
   HERO  (CSS eclipse — no WebGL dependency)
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:120px var(--gutter) 90px;
  overflow:hidden;
}
/* solar corona + anamorphic streak behind the orb */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 42% at 50% 44%, rgba(255,180,58,.32), transparent 60%),
    radial-gradient(66% 60% at 50% 44%, rgba(255,106,61,.18), transparent 66%),
    linear-gradient(90deg, transparent 12%, rgba(255,208,140,.12) 50%, transparent 88%),
    radial-gradient(80% 80% at 12% 100%, rgba(75,63,255,.12), transparent 70%);
}
/* the obsidian orb */
.hero::after{
  content:""; position:absolute; z-index:1; pointer-events:none;
  top:44%; left:50%; transform:translate(-50%,-50%);
  width:min(58vw,520px); aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle at 38% 34%, rgba(75,63,255,.28), transparent 46%),
    radial-gradient(circle at 62% 66%, rgba(11,10,22,1), rgba(9,8,20,1) 70%);
  box-shadow:0 0 120px 20px rgba(255,180,58,.10), inset 0 0 60px rgba(0,0,0,.6);
}
.hero__inner{ position:relative; z-index:2; }
.hero__wordmark{
  margin:0;
  font-weight:900; font-stretch:124%;
  font-size:clamp(52px,15vw,190px); line-height:.9; letter-spacing:-.02em;
  color:var(--ivory);
}
.hero__tagline{
  margin:26px auto 0; max-width:34ch;
  font-size:clamp(18px,2.6vw,27px); font-weight:600; line-height:1.25;
}
.hero__tagline .muted{ color:var(--slate); font-weight:400; display:block; }
.hero__cta{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  margin-top:40px;
}
.hero__hud{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:34px;
  z-index:2; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--solar); color:var(--ink); }
.btn-primary:hover{ background:var(--ember); color:var(--ink); }
.btn-ghost{ border-color:rgba(242,237,227,.28); color:var(--ivory); }
.btn-ghost:hover{ border-color:var(--solar); color:var(--solar); }

/* ============================================================
   SECTIONS + PAGE HEADS
   ============================================================ */
.section{ position:relative; z-index:5; padding:clamp(60px,10vh,120px) var(--gutter); background:var(--ink); }
.eyebrow{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-bottom:26px; margin-bottom:clamp(30px,5vh,54px);
  border-bottom:1px solid var(--hair);
}
.page-head{ padding:clamp(130px,18vh,200px) var(--gutter) clamp(30px,6vh,60px); }
.page-head__title{
  font-weight:900; font-stretch:114%;
  font-size:clamp(36px,6vw,80px); line-height:1; max-width:20ch;
}
.page-head__meta{ margin-top:18px; }

/* ============================================================
   CARD GRID
   ============================================================ */
.grid{
  display:grid; gap:clamp(26px,3vw,46px);
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
}
.card{ color:inherit; display:block; }
.card__media{
  position:relative; overflow:hidden;
  aspect-ratio:3/2; background:var(--void); border:1px solid var(--hair);
}
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.card:hover .card__media img{ transform:scale(1.04); }
.card__media--empty{
  display:grid; place-items:center; color:var(--solar); font-size:34px;
  background:radial-gradient(60% 60% at 50% 40%, rgba(255,180,58,.14), transparent 60%), var(--void);
}
.card__body{ padding-top:18px; }
.card__title{ font-size:clamp(19px,2vw,25px); margin:0 0 8px; transition:color .3s var(--ease); }
.card:hover .card__title{ color:var(--solar); }
.card__meta{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.card__excerpt{ color:var(--slate); font-size:15px; margin:0; }

/* work list on the front page */
.op{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,3vw,40px);
  align-items:baseline;
  padding:clamp(22px,3vh,34px) 0; border-top:1px solid var(--hair);
  color:var(--ivory); transition:padding-left .4s var(--ease);
}
.op:hover{ padding-left:12px; }
.op:last-child{ border-bottom:1px solid var(--hair); }
.op__idx{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--solar); }
.op__name{ font-weight:800; font-stretch:108%; font-size:clamp(22px,3.2vw,40px); letter-spacing:-.01em; }
.op__meta{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); text-align:right; }

/* ============================================================
   ARTICLE
   ============================================================ */
.article{ position:relative; z-index:5; background:var(--ink); }
.article__media{ margin:0 0 clamp(30px,6vh,60px); }
.article__media img{ width:100%; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--hair); }
.prose{ max-width:720px; margin-inline:auto; font-size:clamp(16px,1.15vw,18px); line-height:1.75; color:rgba(242,237,227,.86); }
.prose > * + *{ margin-top:1.2em; }
.prose h2{ color:var(--ivory); font-size:clamp(24px,3vw,34px); margin-top:1.8em; }
.prose h3{ color:var(--ivory); font-size:clamp(19px,2vw,24px); margin-top:1.6em; }
.prose a{ text-decoration:underline; text-underline-offset:3px; }
.prose blockquote{
  margin:1.6em 0; padding-left:24px; border-left:1px solid var(--solar);
  font-weight:600; font-size:clamp(20px,2.4vw,26px); color:var(--ivory);
}
.prose img{ border:1px solid var(--hair); }
.prose code{ font-family:'IBM Plex Mono',monospace; background:rgba(242,237,227,.06); padding:2px 6px; font-size:.88em; }
.prose pre{ background:var(--void); border:1px solid var(--hair); padding:20px; overflow-x:auto; }
.prose pre code{ background:none; padding:0; }

.post-nav{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  max-width:720px; margin:clamp(50px,8vh,90px) auto 0;
  padding-top:30px; border-top:1px solid var(--hair);
}
.post-nav a{ color:var(--ivory); }
.post-nav a:hover{ color:var(--solar); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination{ margin-top:clamp(44px,7vh,80px); }
.pagination .nav-links{ display:flex; gap:8px; flex-wrap:wrap; }
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 12px;
  border:1px solid var(--hair);
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--slate);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.pagination a.page-numbers:hover{ border-color:var(--solar); color:var(--solar); }
.pagination .page-numbers.current{ background:var(--solar); color:var(--ink); border-color:var(--solar); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  position:relative; z-index:5; background:var(--ink);
  padding:clamp(50px,8vh,90px) var(--gutter) clamp(28px,4vh,44px);
}
.site-footer__row{
  display:flex; justify-content:space-between; gap:16px 30px; flex-wrap:wrap;
  align-items:center;
  padding-top:26px; border-top:1px solid var(--hair);
}
.site-footer__row .mono{ margin:0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:720px){
  .nav-menu{ gap:16px; }
  .nav-menu li:not(:first-child):not(:last-child){ display:none; }
  .op{ grid-template-columns:auto 1fr; }
  .op__meta{ grid-column:2; text-align:left; }
}