/* ==========================================================
   COUNFIELD — SHARED DESIGN SYSTEM
   Tokens + base + primitives used by every page.
   Derived from the canonical homepage baseline. One clean
   :root block only — the source baseline had duplicated/
   encoding-corrupted token declarations; this is the single
   normalized source of truth.
========================================================== */
:root{
  --bg:#0d0d0c;
  --bg-2:#141413;
  --text:#EDEDE8;
  --text-2:#a2a29c;
  --line:rgba(255,255,255,0.10);

  --sans:"Archivo",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;

  --wrap:1120px;
  --pad:clamp(20px,5vw,48px);

  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:40px;
  --space-5:64px;
}

/* ==========================================================
   BASE
========================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--text);color:var(--bg)}
:focus-visible{outline:1px solid var(--text);outline-offset:3px}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer}
img{max-width:100%;display:block}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

/* visually-hidden but available to assistive tech */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--pad);top:-48px;
  background:var(--text);color:var(--bg);
  padding:10px 16px;font-size:14px;font-weight:500;
  transition:top .2s ease;z-index:100;
}
.skip-link:focus{top:12px}

/* quiet underline for real links only */
.ulink{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;
  background-position:left calc(100% - 2px);
  transition:background-size .25s ease;
  padding-bottom:2px;
}
.ulink:hover,.ulink:focus-visible{background-size:100% 1px}

/* ==========================================================
   GLOBAL HEADER / SITE NAVIGATION
========================================================== */
.site-header{border-bottom:1px solid var(--line);position:relative;z-index:50}
.navIn{display:flex;align-items:center;gap:28px;padding-block:20px}
.brand{font-weight:600;font-size:15px;letter-spacing:.02em}

.navLinks{margin-left:auto;display:flex;align-items:center;gap:24px}
.navLinks a{font-size:14px;font-weight:500;color:var(--text-2);transition:color .2s}
.navLinks a:hover,.navLinks a:focus-visible,.navLinks a[aria-current="page"]{color:var(--text)}

.navLogin{
  font-size:14px;font-weight:500;color:var(--text);
  border:1px solid var(--line);padding:8px 16px;
  transition:border-color .2s,background-color .2s;
}
.navLogin:hover,.navLogin:focus-visible{border-color:var(--text-2)}

.navToggle{display:none;margin-left:auto;font-size:14px;font-weight:500;color:var(--text)}

@media (max-width:767px){
  .navLinks{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:var(--bg);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:8px var(--pad) 20px;
  }
  .navLinks[data-open="true"]{display:flex}
  .navLinks a{padding:12px 0;width:100%;font-size:15px}
  .navLinks .navLogin{margin-top:8px;width:100%;text-align:center}
  .navToggle{display:inline-block}
}

/* ==========================================================
   HERO
========================================================== */
.hero{padding:clamp(72px,14vh,150px) 0 clamp(64px,10vh,120px)}
.kicker{font-size:14px;font-weight:500;color:var(--text-2);margin-bottom:28px}
h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(42px,7.6vw,100px);
  line-height:1.04;
  letter-spacing:-.01em;
  max-width:14ch;
}
h1 em{font-style:italic}
.heroSub{
  margin-top:clamp(24px,4vh,40px);
  max-width:52ch;
  color:var(--text-2);
  font-size:clamp(16px,1.6vw,18px);
  line-height:1.7;
}
.heroLink{margin-top:clamp(28px,5vh,48px);display:inline-block;font-size:15px;font-weight:500}

/* ==========================================================
   PAGE INTRO — used by Research/Models/Apps/Blog/Pricing/etc.
   Same editorial voice as the homepage hero, sized for a
   secondary page rather than the homepage's full hero.
========================================================== */
.page-intro{padding:clamp(56px,11vh,120px) 0 clamp(40px,7vh,72px)}
.page-intro h1{font-size:clamp(36px,6vw,64px);max-width:16ch}
.page-intro p{
  margin-top:var(--space-3);
  max-width:56ch;color:var(--text-2);
  font-size:clamp(16px,1.4vw,18px);line-height:1.7;
}

/* ==========================================================
   SECTION LABEL — small italic serif eyebrow, matches
   .aboutLabel from the baseline, reused generically.
========================================================== */
.section-label{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--text-2)}

/* ==========================================================
   ABOUT (two-column editorial block — homepage + about page)
========================================================== */
.about{background:var(--bg-2);border-block:1px solid var(--line)}
.aboutIn{padding:clamp(72px,11vh,130px) var(--pad);display:grid;grid-template-columns:minmax(180px,320px) 1fr;gap:clamp(28px,5vw,80px)}
.prose h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(26px,3.2vw,40px);
  line-height:1.15;
  letter-spacing:-.01em;
  margin-bottom:28px;
  max-width:22ch;
}
.prose p{color:var(--text-2);max-width:58ch;margin-bottom:18px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--text);font-weight:500}

/* ==========================================================
   EDITORIAL INDEX — chronological list used by Research,
   Blog, Models, Apps. No cards, no grid, no icons.
========================================================== */
.editorial-index{border-top:1px solid var(--line)}
.editorial-item{
  border-bottom:1px solid var(--line);
  padding:var(--space-4) 0;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:var(--space-2);
}
.editorial-item h3{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(20px,2.4vw,26px);
  line-height:1.25;letter-spacing:-.005em;
}
.editorial-item p{
  grid-column:1 / -1;
  color:var(--text-2);
  max-width:62ch;
  margin-top:8px;
  font-size:15px;line-height:1.65;
}
.editorial-meta{
  display:flex;align-items:baseline;gap:var(--space-3);
  grid-column:1 / -1;margin-top:14px;
  font-size:13px;color:var(--text-2);
}
.editorial-meta .ulink{font-size:13px;font-weight:500;color:var(--text)}
.editorial-year{
  font-size:14px;color:var(--text-2);
  white-space:nowrap;justify-self:end;
}

/* ==========================================================
   EMPTY STATE — honest, restrained. Never looks broken,
   never invents content to fill the space.
========================================================== */
.empty-state{
  border-top:1px solid var(--line);
  padding:clamp(56px,10vh,96px) 0;
  max-width:52ch;
}
.empty-state p{color:var(--text-2);font-size:15px;line-height:1.7}
.empty-state p + p{margin-top:12px}

/* ==========================================================
   LEGAL PLACEHOLDER
========================================================== */
.legal-body{padding:clamp(40px,7vh,72px) 0 clamp(72px,11vh,120px);max-width:62ch}
.legal-body p{color:var(--text-2);font-size:15px;line-height:1.75}
.legal-body p + p{margin-top:16px}

/* ==========================================================
   CONTACT
========================================================== */
.contactIn{padding:clamp(72px,11vh,130px) var(--pad)}
.contactIn h1,.contactIn h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(26px,3.4vw,44px);
  line-height:1.15;
  letter-spacing:-.01em;
  max-width:24ch;
}
.contactIn p{margin-top:20px;color:var(--text-2);max-width:52ch}
.contactIn a.mail{color:var(--text)}

/* ==========================================================
   FOOTER
========================================================== */
.site-footer{border-top:1px solid var(--line)}
.footIn{
  padding:26px var(--pad);
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--text-2);
}
.footLinks{display:flex;gap:22px;flex-wrap:wrap}
.footLinks a,.footLinks button{font-size:13px;color:var(--text-2);transition:color .2s;padding:2px 0}
.footLinks a:hover,.footLinks button:hover{color:var(--text)}

/* ==========================================================
   LOGIN SHELL
========================================================== */
.login-shell{
  padding:clamp(72px,14vh,140px) 0 clamp(72px,11vh,120px);
  max-width:400px;
  margin-inline:auto;
}
.login-shell h1{font-size:clamp(32px,5vw,44px);max-width:none;text-align:center}
.login-shell p{margin-top:var(--space-2);color:var(--text-2);font-size:15px;line-height:1.7;text-align:center}
.login-notice{
  margin-top:var(--space-4);
  border:1px solid var(--line);
  padding:var(--space-3);
  font-size:14px;color:var(--text-2);line-height:1.65;
}
.login-field{margin-top:var(--space-3)}
.login-field label{display:block;font-size:13px;font-weight:500;color:var(--text-2);margin-bottom:8px}
.login-field input{
  width:100%;background:var(--bg-2);border:1px solid var(--line);
  color:var(--text);font-family:inherit;font-size:15px;
  padding:12px 14px;
}
.login-field input:disabled{opacity:.5;cursor:not-allowed}
/* These were placeholders while the auth core had no browser surface. They are
   real controls now, so they get real affordances: pointer, hover, a visible
   focus ring, and a disabled state that reads as "working", not as "broken". */
.login-submit,
.login-secondary{
  display:block;margin-top:var(--space-3);width:100%;
  background:var(--bg-2);border:1px solid var(--line);padding:12px 14px;
  font-family:inherit;font-size:14px;font-weight:500;text-align:center;
  color:var(--text);cursor:pointer;
}
.login-secondary{color:var(--text-2)}
.login-submit:hover:not(:disabled),
.login-secondary:hover:not(:disabled){border-color:var(--text-2)}
.login-submit:focus-visible,
.login-secondary:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.login-submit:disabled,
.login-secondary:disabled{opacity:.55;cursor:progress}

.login-panel{
  margin-top:var(--space-4);
  border:1px solid var(--line);
  padding:var(--space-3);
  text-align:left;
}
.login-panel h2{
  font-size:16px;font-weight:600;margin:0;
  color:var(--text);text-align:left;
}
.login-panel p{
  margin-top:var(--space-2);text-align:left;
  font-size:14px;color:var(--text-2);line-height:1.65;
}
.login-actions{margin-top:var(--space-2)}

/* Announced assertively and given its own weight: a cancelled passkey prompt
   must not read like decoration. */
.login-error{
  margin-top:var(--space-3);
  border:1px solid var(--text-2);
  padding:var(--space-3);
  font-size:14px;color:var(--text);line-height:1.65;
  text-align:left;
}

/* ==========================================================
   RESPONSIVE
========================================================== */
@media (max-width:767px){
  .aboutIn{grid-template-columns:1fr;gap:20px}
  .section-label{font-size:18px}
  .navIn{gap:18px}
  .hero{padding-top:64px}
  .editorial-item{grid-template-columns:1fr}
  .editorial-year{justify-self:start}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ulink,.navLinks a,.footLinks a,.footLinks button,.navLogin{transition:none}
}