/* ==========================================================================
   aclace.labs — editorial stylesheet (SIGNAL / Hypebeast black system)
   Pure black, bold condensed display type, sharp rectangular UI (no rounding).
   Rebrand the whole site from the tokens in :root.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@500;600;700;800;900&display=swap');

/* ---------- Design tokens ---------- */
:root{
  --paper:    #000000;   /* page background — true black */
  --ink:      #FFFFFF;   /* primary text — white */
  --paper-2:  #141414;   /* raised surface */
  --panel:    #0A0A0A;   /* footer / cards */
  --grey:     #8C8C8C;   /* muted label text */
  --hairline: rgba(255,255,255,.16);
  --accent:   #FFFFFF;   /* monochrome — no color; active = inverted */

  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;      /* giant caps */
  --font-head:    "Archivo", "Helvetica Neue", Arial, sans-serif;   /* headings/labels */
  --font-body:    "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-serif:   Georgia, "Times New Roman", serif;
  --font-mono:    "Archivo", "Helvetica Neue", Arial, sans-serif;   /* spaced caps labels */

  --maxw: 1320px;
  --gutter: clamp(18px, 4vw, 56px);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:100%; width:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.mono{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey); font-weight:600;
}
.accent{ color:var(--ink); }

/* ---------- Header (three-tier, centered — Hypebeast layout) ---------- */
.topbar{ position:sticky; top:0; z-index:60; background:var(--paper); border-bottom:1px solid var(--ink); }
.util-row{ display:flex; align-items:center; gap:20px; padding-block:13px; }
.util-left{ display:flex; align-items:center; gap:16px; flex:1; min-width:0; }
.util-right{ display:flex; align-items:center; gap:14px; flex:1; justify-content:flex-end; }
.socials{ display:flex; align-items:center; gap:14px; }
.socials a{ display:inline-flex; color:var(--ink); opacity:.78; transition:opacity .15s ease; }
.socials a:hover{ opacity:1; }
.socials svg{ width:18px; height:18px; display:block; }
.search{ flex:0 1 560px; }
.search input{
  width:100%; background:transparent; color:var(--ink);
  border:1px solid var(--hairline); border-radius:0; padding:10px 14px;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
}
.search input::placeholder{ color:var(--grey); }
.search input:focus{ border-color:var(--ink); outline:none; }
.subscribe{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  border:1px solid var(--ink); padding:9px 16px; border-radius:0; transition:background .16s ease, color .16s ease;
}
.subscribe:hover{ background:var(--ink); color:var(--paper); }
.brand-center{ display:flex; justify-content:center; align-items:center; gap:13px; padding-block:6px 14px; }
.brand-center__logo{ width:32px; height:32px; display:block; border-radius:0; }
.brand-center__name{
  font-family:var(--font-head); font-weight:900; text-transform:uppercase;
  letter-spacing:.2em; font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1;
}
.brand-center__name b{ color:var(--ink); font-weight:900; }
.mainnav{
  display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(18px,3.2vw,38px);
  padding-block:14px; border-top:1px solid var(--hairline);
}
.mainnav a{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); font-weight:600; position:relative; padding-block:4px;
}
.mainnav a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--ink); transition:width .18s ease; }
.mainnav a:hover::after, .mainnav a[aria-current="page"]::after{ width:100%; }
.nav-toggle{
  display:none; background:none; border:1px solid var(--ink); cursor:pointer; border-radius:0;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); padding:8px 12px; font-weight:700;
}
@media (max-width:860px){
  .util-right{ display:none; }
  .socials{ display:none; }
  .util-left{ flex:none; }
  .search{ flex:1; }
  .brand-center__name{ font-size:1.5rem; letter-spacing:.16em; }
  .mainnav{ display:none; flex-direction:column; gap:0; padding-block:0; }
  .mainnav[data-open="true"]{ display:flex; }
  .mainnav a{ padding:15px var(--gutter); border-top:1px solid var(--hairline); font-size:.9rem; }
  .mainnav a::after{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; }
}

/* ---------- Issue strip ---------- */
.issuestrip{
  border-bottom:1px solid var(--hairline); display:flex; justify-content:space-between;
  align-items:center; padding-block:12px; flex-wrap:wrap; gap:8px;
}

/* ---------- Filter row (sharp rectangular buttons, SIGNAL-style) ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; padding-block:clamp(20px,3vw,32px); border-bottom:1px solid var(--hairline); }
.filter{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--ink); background:transparent; border:1px solid var(--hairline); border-radius:0;
  padding:11px 20px; cursor:pointer; transition:.15s;
}
.filter:hover{ border-color:var(--ink); }
.filter[aria-current="true"], .filter.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- Hero banner (full-width feature art) ---------- */
.hero-banner{ position:relative; width:100%; background:#000; border-bottom:1px solid var(--ink); }
.hero-banner > img{ display:block; width:100%; height:auto; }
.hero-banner__overlay{
  position:absolute; inset:auto 0 0 0; padding:clamp(20px,4vw,54px);
  background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.25) 55%, transparent);
}
.hero-banner__title{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  letter-spacing:.01em; line-height:.92; font-size:clamp(1.9rem,5.2vw,4.2rem);
  max-width:18ch; margin:.35em 0 .55em;
}
.hero-cta{
  display:inline-block; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; border:1px solid var(--ink); padding:11px 20px;
  background:rgba(0,0,0,.35); transition:background .16s ease, color .16s ease;
}
.hero-cta:hover{ background:var(--ink); color:var(--paper); }
@media (max-width:640px){
  .hero-banner__overlay{ position:static; background:#000; padding-inline:var(--gutter); }
}

/* ---------- Hero feature ---------- */
.hero{ padding-block:clamp(28px,5vw,64px); border-bottom:1px solid var(--ink); }
.hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px,4vw,52px); align-items:end; }
.hero__photo{ aspect-ratio:4/3; }
.kicker{
  display:inline-block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; font-weight:700;
  text-transform:uppercase; color:var(--paper); background:var(--ink); padding:6px 12px; margin-bottom:18px;
}
.hero__title{
  font-family:var(--font-display); font-weight:400; letter-spacing:.005em; line-height:.9;
  font-size:clamp(2.8rem, 7.2vw, 6rem); text-transform:uppercase; text-wrap:balance;
}
.hero__deck{
  font-family:var(--font-body); font-size:clamp(1rem, 1.5vw, 1.25rem);
  line-height:1.5; color:var(--grey); max-width:46ch; margin-top:22px;
}
.hero__byline{ margin-top:22px; display:flex; gap:18px; flex-wrap:wrap; }
@media (max-width:860px){
  .hero__grid{ grid-template-columns:1fr; align-items:stretch; }
  .hero__photo{ order:-1; aspect-ratio:16/10; }
}

/* ---------- Section header ---------- */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:2px solid var(--ink); padding-block:16px 12px; margin-top:clamp(36px,5vw,64px);
}
.section-head h2{
  font-family:var(--font-head); font-weight:900; text-transform:uppercase;
  letter-spacing:.02em; font-size:clamp(1.15rem,2vw,1.6rem);
}
.section-head a{ color:var(--ink); }

/* ---------- Article grid + cards ---------- */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,2.4vw,34px); padding-block:clamp(24px,3vw,40px); }
.card{ display:flex; flex-direction:column; gap:12px; }
.card a{ display:flex; flex-direction:column; gap:12px; height:100%; }
.card__photo{ aspect-ratio:3/2; overflow:hidden; border:1px solid var(--hairline); }
.card__photo .photo, .card__photo img{ transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.card a:hover .photo, .card a:hover img{ transform:scale(1.04); }
.card__tags{ display:flex; gap:10px; align-items:center; }
.tag{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); font-weight:700; }
.tag--cyan, .tag--violet{ color:var(--grey); }
.card h3{ font-family:var(--font-head); font-weight:800; letter-spacing:-.005em; line-height:1.12; }
.card a:hover h3{ text-decoration:underline; text-underline-offset:3px; }
.card__meta{ margin-top:auto; }
.col-6{ grid-column:span 6; } .col-4{ grid-column:span 4; } .col-3{ grid-column:span 3; }
.col-6 h3{ font-size:clamp(1.4rem,2.4vw,1.95rem); }
.col-4 h3{ font-size:clamp(1.1rem,1.7vw,1.35rem); }
.col-3 h3{ font-size:1.02rem; }
.col-6 .card__photo{ aspect-ratio:16/10; }
@media (max-width:900px){ .col-6{ grid-column:span 12; } .col-4{ grid-column:span 6; } .col-3{ grid-column:span 6; } }
@media (max-width:560px){ .col-4, .col-3{ grid-column:span 12; } }

/* ---------- Photo placeholder (dark) ----------
   Replace <span class="photo photo--x"></span> with <img src="..." alt="..."> */
.photo{
  position:relative; width:100%; height:100%; display:grid; place-items:center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
    linear-gradient(135deg, #191919, #0B0B0B);
}
.photo::after{ content:"IMAGE"; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.28em; color:var(--grey); opacity:.7; }
.photo--a{ background:linear-gradient(135deg,#232323,#0d0d0d); }
.photo--b{ background:linear-gradient(135deg,#1d1f22,#0a0b0d); }
.photo--c{ background:linear-gradient(160deg,#262320,#0e0d0b); }
.photo--d{ background:linear-gradient(200deg,#1f2422,#0b0d0c); }

/* ---------- Pull-quote banner ---------- */
.banner{ border-block:1px solid var(--ink); margin-top:clamp(40px,6vw,72px); padding-block:clamp(40px,7vw,88px); }
.banner p{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:clamp(1.7rem,4.4vw,3.2rem); line-height:1.02; letter-spacing:.01em; text-wrap:balance; max-width:20ch; }
.banner cite{ display:block; margin-top:18px; font-style:normal; }

/* ---------- Page header (category / about) ---------- */
.pagehead{ border-bottom:1px solid var(--ink); padding-block:clamp(32px,6vw,72px); }
.pagehead h1{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  letter-spacing:.005em; line-height:.92; font-size:clamp(2.6rem,8vw,5.6rem); text-wrap:balance;
}
.pagehead p{ font-family:var(--font-body); color:var(--grey); font-size:clamp(1rem,1.5vw,1.25rem); max-width:56ch; margin-top:18px; line-height:1.5; }

/* ---------- Article page ---------- */
.article{ padding-block:clamp(28px,4vw,56px); }
.article__head{ max-width:64ch; margin-inline:auto; text-align:center; }
.article__title{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  letter-spacing:.005em; line-height:.95; font-size:clamp(2.4rem,6vw,4.4rem);
  text-wrap:balance; margin-block:14px 20px;
}
.article__deck{ font-family:var(--font-body); font-size:clamp(1.1rem,1.9vw,1.4rem); color:var(--grey); line-height:1.5; }
.article__meta{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.article__hero{ aspect-ratio:16/9; margin-block:clamp(28px,4vw,48px); border:1px solid var(--hairline); }
.article__hero figcaption{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; color:var(--grey); padding-top:10px; text-transform:uppercase; }
.prose{ max-width:66ch; margin-inline:auto; font-size:1.125rem; line-height:1.75; }
.prose > * + *{ margin-top:1.35em; }
.prose h2{ font-family:var(--font-head); font-weight:900; text-transform:uppercase; letter-spacing:.01em; font-size:1.7rem; margin-top:2em; line-height:1.1; }
.prose p:first-of-type::first-letter{
  font-family:var(--font-display); font-weight:400; float:left; font-size:4.4rem;
  line-height:.7; padding:8px 14px 0 0; color:var(--ink);
}
.prose blockquote{ border-left:3px solid var(--ink); padding-left:22px; font-family:var(--font-body); font-style:italic; font-size:1.4rem; line-height:1.4; color:var(--ink); }
.prose a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.prose figure{ margin-block:2em; }
.prose figure .card__photo{ aspect-ratio:3/2; }
.prose figcaption{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); padding-top:10px; }

/* ---------- Pagination ---------- */
.pager{ display:flex; justify-content:center; gap:8px; padding-block:clamp(28px,4vw,48px); }
.pager a, .pager span{
  font-family:var(--font-mono); font-size:.8rem; font-weight:700; min-width:44px; height:44px; padding-inline:14px;
  display:grid; place-items:center; border:1px solid var(--hairline); border-radius:0; text-transform:uppercase; letter-spacing:.08em;
}
.pager a:hover{ border-color:var(--ink); }
.pager [aria-current="page"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- Footer ---------- */
footer{ background:var(--panel); color:var(--ink); margin-top:clamp(48px,7vw,90px); border-top:1px solid var(--ink); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-block:clamp(48px,6vw,80px); }
footer h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:16px; font-weight:700; }
.foot-name{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(2.2rem,5vw,3.6rem); line-height:.95; }
.foot-name b{ color:var(--ink); }
.foot-desc{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--grey); margin-top:14px; max-width:40ch; text-transform:uppercase; }
.signup{ display:flex; border:1px solid var(--hairline); margin-top:18px; max-width:360px; }
.signup input{ flex:1; background:transparent; border:0; color:var(--ink); font-family:var(--font-mono); font-size:.8rem; padding:12px 14px; letter-spacing:.06em; text-transform:uppercase; }
.signup input::placeholder{ color:var(--grey); }
.signup button{ background:var(--ink); border:0; color:var(--paper); cursor:pointer; font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; padding:0 18px; }
.footcols ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.footcols a{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--grey); }
.footcols a:hover{ color:var(--ink); }
.footer__bar{ border-top:1px solid var(--hairline); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-block:20px; }
.footer__bar .mono{ color:var(--grey); }
@media (max-width:760px){ .footer__grid{ grid-template-columns:1fr; gap:34px; } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}