/*
Theme Name: Neura Collective
Theme URI: https://neuracollective.com/
Author: Neura Collective
Author URI: https://neuracollective.com/
Description: A black-and-white editorial theme for the Neura Collective blog and newsletter hub. Archivo for display type, Spectral for text, a sweeping wordmark, and a footer widget area for the signup form.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
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: neura-collective
*/

:root {
  --ink: #000;
  --paper: #fff;
  --quiet: #6f6f6f;
  --rule: #000;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 60ch;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Spectral", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, video, iframe { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1rem;
  font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 700; font-weight: 700;
}
.skip:focus { left: 0; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) 0;
}

/* ---------- masthead ---------- */

.masthead { padding-bottom: clamp(1.25rem, 3vw, 2rem); }

.wordmark {
  display: block;
  font-family: var(--display);
  font-variation-settings: "wdth" 72, "wght" 900;
  font-weight: 900;
  font-size: clamp(2.75rem, 9vw, 6.5rem);
  line-height: 0.86;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
  text-decoration: none;
}

.site-nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  margin: clamp(1rem, 2.5vw, 1.5rem) 0 0; padding: 0; list-style: none;
  font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 600; font-weight: 600;
  font-size: 1rem;
}
.site-nav a { text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav .current-menu-item > a, .site-nav [aria-current="page"] { text-decoration: underline; }

/* ---------- page and post headings ---------- */

.work { border-top: 2px solid var(--rule); margin-top: clamp(1rem, 3vw, 2rem); }

.page-title, .entry-title-single {
  font-family: var(--display);
  font-variation-settings: "wdth" 76, "wght" 800;
  font-weight: 800;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.008em;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  max-width: 20ch;
}

.kicker {
  font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 600; font-weight: 600;
  font-size: 1rem; letter-spacing: 0.01em; color: var(--quiet);
  margin: 1.1rem 0 0;
}

.meta {
  font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 500; font-weight: 500;
  font-size: 0.9375rem; line-height: 1.6; color: var(--quiet);
  margin: 1rem 0 0;
}

/* ---------- post list ---------- */

.entry {
  display: block;
  padding: clamp(1.5rem, 3.5vw, 2.25rem) 0;
  border-top: 1px solid var(--rule);
}
.entry:first-of-type { border-top: none; }

.entry-link { display: block; text-decoration: none; color: inherit; }
.entry-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }

.entry-title {
  font-family: var(--display);
  font-variation-settings: "wdth" 76, "wght" 800;
  font-weight: 800;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.008em;
  margin: 0;
  display: inline;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 5px;
  transition: background-size 160ms ease-out;
}
.entry-link:hover .entry-title, .entry-link:focus-visible .entry-title { background-size: 100% 5px; }

.entry-excerpt { margin: 0.9rem 0 0; max-width: 52ch; }
.entry-excerpt p { margin: 0; }

/* ---------- article body ---------- */

.article { padding-bottom: clamp(2rem, 5vw, 3.5rem); }

.prose { max-width: var(--measure); margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.prose > * { margin-top: 0; margin-bottom: 1.15em; }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--display); font-variation-settings: "wdth" 80, "wght" 800; font-weight: 800;
  line-height: 1.1; margin-top: 2em; margin-bottom: 0.6em;
}
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.prose h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); }
.prose h4 { font-size: 1.125rem; }
.prose blockquote { margin-left: 0; padding-left: 1.25rem; border-left: 4px solid var(--ink); font-style: italic; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.35em; }
.prose hr { border: 0; border-top: 2px solid var(--rule); margin: 2.5rem 0; }
.prose pre, .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
.prose pre { overflow-x: auto; padding: 1rem; border: 1px solid var(--rule); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.prose th, .prose td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rule); }
.prose figure { margin-left: 0; margin-right: 0; }
.prose figcaption, .wp-caption-text { font-family: var(--display); font-size: 0.875rem; color: var(--quiet); margin-top: 0.5rem; }
.prose .alignwide { max-width: min(1000px, 100vw - 2 * var(--gutter)); }
.prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.post-thumb { margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; }
.post-thumb img { display: block; width: 100%; }

.post-tags { margin-top: 2rem; font-family: var(--display); font-size: 0.9375rem; color: var(--quiet); }
.post-nav {
  display: flex; justify-content: space-between; gap: 1.5rem; margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 700; font-weight: 700;
}
.post-nav a { text-decoration: none; }
.post-nav a:hover { text-decoration: underline; }

/* ---------- pagination and search ---------- */

.pagination { margin: 2rem 0 0; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pagination .page-numbers {
  font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 700; font-weight: 700;
  font-size: 0.9375rem; text-decoration: none; padding: 0.7rem 1rem; border: 2px solid var(--ink);
}
.pagination .page-numbers.current, .pagination a.page-numbers:hover { background: var(--ink); color: var(--paper); }

.search-form { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.search-form input[type="search"] {
  flex: 1 1 16rem; font: inherit; font-size: 1rem; padding: 0.8rem 1rem; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 0;
}

/* ---------- buttons (theme and FluentCRM / Fluent Forms) ---------- */

.btn, .search-form button, .signup button, .signup input[type="submit"], .signup .ff-btn-submit {
  font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 700; font-weight: 700;
  font-size: 0.9375rem; line-height: 1; letter-spacing: 0.01em; text-decoration: none;
  color: var(--paper) !important; background: var(--ink) !important; border: 2px solid var(--ink) !important;
  padding: 0.85rem 1.25rem; border-radius: 0; cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.btn:hover, .btn:focus-visible, .search-form button:hover, .signup button:hover, .signup input[type="submit"]:hover, .signup .ff-btn-submit:hover {
  background: var(--paper) !important; color: var(--ink) !important;
}

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

.site-footer { margin-top: clamp(3.5rem, 8vw, 6rem); border-top: 2px solid var(--rule); padding: 1.5rem 0 clamp(2.5rem, 6vw, 4rem); }

.signup { max-width: 40rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.signup h2, .signup .widget-title {
  font-family: var(--display); font-variation-settings: "wdth" 76, "wght" 800; font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.05; margin: 0 0 0.75rem;
}
.signup p { margin: 0 0 1rem; }
.signup input[type="email"], .signup input[type="text"] {
  font: inherit; font-size: 1rem; width: 100%; padding: 0.8rem 1rem; border: 2px solid var(--ink) !important;
  border-radius: 0 !important; background: var(--paper); color: var(--ink);
}
.signup label { font-family: var(--display); font-size: 0.9375rem; }

.network {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0 0 1.5rem; padding: 0;
  font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 600; font-weight: 600; font-size: 0.9375rem;
}
.network a { text-decoration: none; }
.network a:hover, .network a:focus-visible { text-decoration: underline; }

.site-footer .legal {
  margin: 0; font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 400;
  font-size: 0.875rem; line-height: 1.6; color: var(--quiet);
}

@media (prefers-reduced-motion: no-preference) {
  .wordmark.sweep { clip-path: inset(0 100% 0 0); animation: sweep 900ms cubic-bezier(.2, .7, .2, 1) 120ms forwards; }
  @keyframes sweep { to { clip-path: inset(0 0 0 0); } }
}

@media (max-width: 420px) {
  .btn, .search-form button { flex: 1 1 100%; text-align: center; }
}

/* ---------- home page: hero wordmark and statement ---------- */

.wordmark--hero {
  font-size: clamp(3.25rem, 12.2vw, 10.5rem);
  white-space: nowrap;
}
.wordmark--hero span { display: inline-block; }
.masthead:has(.wordmark--hero) { padding-bottom: clamp(1.75rem, 4vw, 3rem); }

.statement {
  margin: clamp(1.5rem, 3.5vw, 2.5rem) 0 0;
  max-width: none;
  font-size: clamp(1.1875rem, 1.05rem + 0.68vw, 1.5rem);
  line-height: 1.55;
}

@media (max-width: 520px) {
  .wordmark--hero { white-space: normal; font-variation-settings: "wdth" 78, "wght" 900; }
  .wordmark--hero span { display: block; }
}

.section-label {
  font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 600; font-weight: 600;
  font-size: 1rem; letter-spacing: 0.01em; color: var(--quiet);
  margin: 1.1rem 0 clamp(1.5rem, 4vw, 2.5rem);
}

/* ---------- project grid ---------- */

.projects {
  list-style: none; margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
}
.section-label + .projects { margin-top: 0; }

.project-tile { margin: 0; padding: 0; }

.tile-link { display: block; text-decoration: none; color: inherit; }
.tile-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }

.tile-logo {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2; padding: clamp(1rem, 3vw, 2rem);
  border: 2px solid var(--ink); background: var(--paper);
  overflow: hidden;
}
.tile-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.tile-initial {
  font-family: var(--display); font-variation-settings: "wdth" 72, "wght" 900; font-weight: 900;
  font-size: clamp(4rem, 10vw, 7rem); line-height: 1;
}

.tile-title {
  display: block; margin-top: 1.1rem;
  font-family: var(--display); font-variation-settings: "wdth" 76, "wght" 800; font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.05; letter-spacing: -0.008em;
}
.tile-blurb { display: block; margin-top: 0.6rem; max-width: 40ch; }
.tile-cta {
  display: inline-block; margin-top: 0.9rem;
  font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 700; font-weight: 700; font-size: 0.9375rem;
  background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 0 3px; transition: background-size 160ms ease-out;
}
.tile-link:hover .tile-cta, .tile-link:focus-visible .tile-cta { background-size: 100% 3px; }
.tile-link:hover .tile-logo, .tile-link:focus-visible .tile-logo { background: var(--ink); }
.tile-link:hover .tile-initial, .tile-link:focus-visible .tile-initial { color: var(--paper); }

@media (max-width: 660px) {
  .projects { grid-template-columns: 1fr; }
}

/* ---------- project page ---------- */

.project-page .kicker a { text-decoration: none; }
.project-page .kicker a:hover, .project-page .kicker a:focus-visible { text-decoration: underline; }
.lede {
  margin: 1.25rem 0 0; max-width: var(--measure);
  font-size: clamp(1.1875rem, 1.05rem + 0.68vw, 1.5rem); line-height: 1.5;
}
.project-body {
  display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem); align-items: start;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.project-body .prose { margin-top: 0; }
.project-logo {
  margin: 0; padding: clamp(1rem, 3vw, 2rem); border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.project-logo img { display: block; max-width: 100%; height: auto; }
@media (max-width: 760px) {
  .project-body { grid-template-columns: 1fr; }
  .project-logo { max-width: 20rem; }
}

/* Block editor buttons match the theme buttons */
.wp-block-button__link {
  display: inline-block;
  font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 700; font-weight: 700;
  font-size: 0.9375rem; line-height: 1; letter-spacing: 0.01em; text-decoration: none;
  color: var(--paper); background: var(--ink); border: 2px solid var(--ink); border-radius: 0;
  padding: 0.85rem 1.25rem;
}
.wp-block-button__link:hover, .wp-block-button__link:focus-visible { background: var(--paper); color: var(--ink); }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Screenshot thumbnails (used when a project has no logo) */
.tile-logo:has(.tile-shot), .project-logo--shot { padding: 0; align-items: flex-start; }
.tile-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.project-logo--shot img { display: block; width: 100%; height: auto; }

/* ---------- logo mark beside the wordmark ---------- */

.wordmark__mark {
  display: inline-block;
  height: 0.8em;
  width: 0.793em;
  margin-right: 0.17em;
  vertical-align: -0.04em;
  fill: currentColor;
}
@media (max-width: 520px) {
  .wordmark--hero .wordmark__mark { display: block; height: 0.95em; width: 0.94em; margin: 0 0 0.2em; }
}