/*
Theme Name: AXX Data
Theme URI: https://www.axxdata.com/
Description: Self-contained theme for AXX Data — a bare, typographic site. Provides the landing page (front-page.php) plus a clean reading template for other pages such as Site Terms and Privacy Policy. No parent theme required.
Author: AXX Data
Version: 1.0.0
Requires at least: 6.0
License: GPL-2.0-or-later
Text Domain: axx-data
*/

:root{
  color-scheme: dark;
  --ink:        #0B1220;
  --ink-deep:   #080D17;
  --paper:      #ECE8E0;
  --paper-dim:  #BCC3CE;
  --muted:      #8A93A4;
  --line:       rgba(236,232,224,0.10);
  --line-2:     rgba(236,232,224,0.15);
  --brass:      #C7A257;
  --brass-soft: rgba(199,162,87,0.55);

  --f-display: "Newsreader", Georgia, "Times New Roman", serif;
  --f-sans:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*{ box-sizing: border-box; }

html{ background: var(--ink-deep); }

body{
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-sans);
  color: var(--paper);
  background:
    radial-gradient(1100px 640px at 74% 14%, #111B2E 0%, var(--ink) 46%, var(--ink-deep) 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page{
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.5rem, 5vw, 4rem);
}

/* Masthead (shared) */
.masthead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brandmark{
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.brandmark img{
  height: clamp(34px, 4.4vw, 42px);
  width: auto;
  display: block;
  /* If the logo is dark and hard to see on the deep background,
     uncomment the next line to render it solid white:
     filter: brightness(0) invert(1); */
}
.eyebrow{
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Hero (front page) */
.hero{
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 9vh, 7rem) 0;
}
.field{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.92;
}
.field svg{ width: 100%; height: 100%; display: block; }

.hero-content{
  position: relative;
  z-index: 1;
  max-width: 42rem;
}
.headline{
  margin: 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 6.2vw, 5.15rem);
  line-height: 1.03;
  letter-spacing: -0.016em;
  color: var(--paper);
  text-wrap: balance;
}
.wide-break{ display: none; }
.subhead{
  margin: clamp(1.35rem, 2.4vw, 1.9rem) 0 0;
  max-width: 40rem;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.62;
  color: var(--paper-dim);
  text-wrap: pretty;
}

/* Reading template (Site Terms, Privacy, etc.) */
.content{
  flex: 1 1 auto;
  padding: clamp(2.5rem, 7vh, 5rem) 0;
}
.prose{ max-width: 68ch; margin: 0; }
.prose-title{
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--paper);
}
.prose p,
.prose li{
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--paper-dim);
}
.prose p{ margin: 0 0 1.2rem; }
.prose h2{
  margin: 2.4rem 0 0.9rem;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.prose h3{
  margin: 2rem 0 0.8rem;
  font-family: var(--f-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  color: var(--muted);
}
.prose a{
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--brass-soft);
  transition: border-color .2s ease;
}
.prose a:hover{ border-bottom-color: var(--brass); }
.prose ul,
.prose ol{ margin: 0 0 1.2rem; padding-left: 1.25rem; }
.prose li{ margin: 0.35rem 0; }
.prose strong{ color: var(--paper); font-weight: 500; }
.prose hr{ border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }

/* Footer (shared) */
.footer{
  border-top: 1px solid var(--line);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.foot-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}
.foot-brand{
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--paper-dim);
}
.foot-links{ display: flex; gap: 1.5rem; }
.foot-links a{
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.foot-links a:hover{ color: var(--paper); border-bottom-color: var(--brass-soft); }
.foot-legal{
  display: flex;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

a:focus-visible{ outline: 1px solid var(--brass); outline-offset: 4px; border-radius: 2px; }

/* Data-signature (front page) */
.axis line{ stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.series{ fill: none; stroke: rgba(236,232,224,0.32); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.guide{ stroke: var(--brass-soft); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.node{ fill: var(--brass); }
.node-ring{ fill: none; stroke: var(--brass); stroke-width: 1; opacity: 0.5; vector-effect: non-scaling-stroke; }

@media (min-width: 720px){
  .wide-break{ display: inline; }
}
@media (max-width: 620px){
  .field{ opacity: 0.5; }
  .foot-legal{ font-size: 0.68rem; }
}

/* Motion — a single, quiet page-load sequence on the front page */
@media (prefers-reduced-motion: no-preference){
  .axis{ opacity: 0; animation: fade 1.2s ease .1s forwards; }
  .series{ stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.1s cubic-bezier(.4,0,.15,1) .3s forwards; }
  .marker{ opacity: 0; animation: fade .9s ease 2.0s forwards; }
  .headline{ opacity: 0; transform: translateY(9px); animation: rise 1s ease .15s forwards; }
  .subhead{ opacity: 0; transform: translateY(9px); animation: rise 1s ease .42s forwards; }
}
@keyframes draw{ to{ stroke-dashoffset: 0; } }
@keyframes fade{ to{ opacity: 1; } }
@keyframes rise{ to{ opacity: 1; transform: none; } }