/* ============================================================
   ATTIC SALT — PERSPECTIVES
   Shared stylesheet for all pages
   ============================================================ */

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

:root {
  /* Consumes assets/css/as-tokens.css — this file no longer defines brand
     values of its own. Perspectives is dark-only, so the dark values are
     inlined where a contextual token would resolve light at :root. */
  --bg:       var(--as-ink-deep);
  --bg-card:  #171B20;
  --bg-hover: #1C2127;
  --border:   rgba(255,255,255,.07);
  --white:    #ffffff;
  --grey:     var(--as-grey-on-dark);   /* was #7A7A7A — 4.30:1 on #111418, under AA */
  --accent:   var(--as-green);
  --accent-dim: rgba(185,200,150,.1);
  --font:     var(--as-font);
  --radius-btn: var(--as-r-pill);
}



html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-btn);
  padding: 12px 28px;
  border: none;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
  text-decoration: none;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
}

/* ── NAV ── */
/* ── SECTION LABEL ── */
.section-label {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-label::after {
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: var(--accent);
  opacity: .5;
}

/* ── POST META ── */
.post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.post-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.meta-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  flex-shrink: 0;
}

.post-date, .read-time {
  font-size: 12px;
  color: var(--grey);
  font-weight: 300;
}

/* ── POST CARD ── */
.post-card {
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 32px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color .25s, background .25s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.post-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}

.post-card:hover { border-color: rgba(255,255,255,.12); background: var(--bg-hover); }
.post-card:hover::after { transform: scaleX(1); }
.post-card:hover .arrow-circle { background: var(--accent); border-color: var(--accent); }
.post-card:hover .arrow-circle svg { stroke: var(--bg); }

/* Media block — matches .as-article-card__media in as-components.css. */
.post-card .as-article-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-hover);
  margin: -32px -32px 4px;      /* bleed to the card edge past its 32px padding */
}

.post-card .as-article-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--as-ease, ease);
}

.post-card:hover .as-article-card__media img { transform: scale(1.03); }

.post-card h3 {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-transform: uppercase;
  flex: 1;
}

.post-card > p {
  font-size: 14px;
  color: var(--grey);
  line-height: 1.65;
  font-weight: 300;
}

.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ── ARROW CIRCLE ── */
.arrow-circle {
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s;
  flex-shrink: 0;
}

.arrow-circle svg {
  width: 14px; height: 14px;
  stroke: var(--white); fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── CTA STRIP ── */
.cta-strip {
  border: 1px solid var(--border);
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--bg-card);
  margin-top: 40px !important;
}

.cta-strip h3 {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.cta-strip p {
  font-size: 14px;
  color: var(--grey);
  font-weight: 300;
}

/* ── FOOTER ── */
.footer-subscribe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer-subscribe-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--grey);
  text-align: center;
}

.footer-subscribe-row {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 320px;
}

.footer-subscribe-row input {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-btn);
  padding: 10px 18px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 300;
  color: var(--white);
  outline: none;
  transition: border-color .25s;
  cursor: pointer;
}

.footer-subscribe-row input::placeholder { color: rgba(255,255,255,.2); }
.footer-subscribe-row input:focus { border-color: rgba(185,200,150,.35); }

.footer-subscribe-note {
  font-size: 11px;
  color: rgba(255,255,255,.2);
  text-align: center;
  font-weight: 300;
  transition: color .3s;
}

/* Honeypot — invisible to humans, accessible to bots */
.subscribe-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  z-index: -1;
  pointer-events: none;
  tab-index: -1;
}

/* Subscribe button states */
.subscribe-btn.loading {
  opacity: .65;
  pointer-events: none;
}

.subscribe-btn:disabled {
  cursor: default;
}

/* Success state for subscribe note */
.footer-subscribe-note.success {
  color: var(--accent);
}

/* Error state for email input */
.footer-subscribe-row input[style*="border-color: rgb(192, 57, 43)"] {
  background: rgba(192,57,43,.05);
}

/* The Strategy Call modal uses the shared .as-modal styles in as-header.css. */

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  z-index: 99999;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── REVEAL ANIMATION ── */
/* Scroll reveal now comes from as-components.css (.as-reveal) and
   as-motion.js. The .rd1/.rd2/.rd3 delay classes are gone — stagger is
   derived from layout position, so it no longer has to be hand-authored. */

/* ── RESPONSIVE ── */
@media (max-width: 960px) {

  .footer-subscribe { align-items: flex-start; }
  .cta-strip { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
}


/* ── AUTHOR BYLINE + SIGN-OFF (theme-aware) ── */
.post-byline {
  font-size: 13px;
  font-weight: 400;
  color: var(--grey);
  letter-spacing: .02em;
}

.author-signoff {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.author-signoff .signoff-line {
  font-size: 17px;
  line-height: 1.7;
  font-weight: 300;
  font-style: italic;
  color: var(--white);
  margin-bottom: 22px;
}

.author-signoff .signoff-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: .01em;
}

.author-signoff .signoff-title {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 4px;
}

/* Article H1: no negative tracking. Centralized override — the -.025em lives in
   each article's inline <style>, which loads after this file, so !important is
   required to win the cascade. Applies to every article, including future ones. */
.article-hero h1 { letter-spacing: normal !important; }


/* breadcrumb-under-header fix */
/* The shared site header is fixed (105px; 72px at 1024px and below), and the
   breadcrumb is the first element on every article and category page, so it
   rendered underneath the bar where nobody could see or click it. Clear the
   header, then give back the top padding the heroes carried for the old in-flow
   micro-site nav so the page does not gain a gap.
   `body` prefix: each page's inline <style> loads after this file and sets
   .article-hero / .category-hero padding at the same specificity. */
body .breadcrumb { margin-top: var(--as-header-h); }
body .article-hero,
body .category-hero { padding-top: 72px; }

@media (max-width: 1024px) {
  body .breadcrumb { margin-top: var(--as-header-h-sm); }
}
@media (max-width: 768px) {
  body .article-hero,
  body .category-hero { padding-top: 48px; }
}