/* ───────────────────────────────────────────────────────────
   Offprint — marketing site shared styles
   Cream paper, deep forest brand, Newsreader display,
   Hanken Grotesk text. Footnote/print-shop editorial accents.
   ─────────────────────────────────────────────────────────── */

:root{
  --paper:      #F5F0E4;
  --paper-deep: #EFE8D7;
  --sheet:      #FCFAF4;
  --ink:        #20241E;
  --ink-soft:   #5A564A;
  --ink-faint:  #8B8474;
  --brand:      #23395B;
  --brand-deep: #16243A;
  --brand-wash: #DFE4EC;
  --orcid:      #A6CE39;
  --chip:       #DCE9BB;
  --line:       #E4DBC6;
  --line-strong:#CDC2A8;
  --display: "Newsreader", Georgia, serif;
  --text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:17px;
  line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--chip); }

.shell{ max-width:var(--maxw); margin:0 auto; padding:0 44px; }

h1,h2,h3{ font-family:var(--display); font-weight:500; letter-spacing:-.01em; margin:0; text-wrap:balance; }

/* ── Header ────────────────────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head .shell{
  display:flex; align-items:center; gap:32px;
  height:72px;
}
.wordmark{
  display:flex; align-items:flex-start; gap:.05em;
  font-family:var(--display); font-size:26px; font-weight:600;
  letter-spacing:-.01em; line-height:1;
}
.wordmark .dag{
  font-size:.7em; font-weight:500; line-height:1;
  transform:translateY(-.086em); color:var(--brand);
}
.site-nav{
  margin-left:auto;
  display:flex; align-items:center; gap:28px;
  font-size:15.5px; font-weight:500; color:var(--ink-soft);
}
.site-nav a:not(.btn):hover{ color:var(--ink); }
.site-nav a[aria-current="page"]{
  color:var(--ink);
  border-bottom:2px solid var(--brand);
  padding-bottom:2px;
}
.site-nav .nav-bubble{
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.04em;
  background:var(--brand-wash); color:var(--brand);
  border-radius:99px; padding:2px 7px 3px; margin-right:7px;
  transform:translateY(-1px);
}
.site-nav .nav-pro:has(.nav-bubble)::before{ content:none; margin:0; }
.site-nav .nav-pro::before{
  content:"✦"; display:inline-block;
  font-size:11px; color:var(--brand);
  margin-right:7px; transform:translateY(-1px);
}

/* ── Buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border-radius:99px; cursor:pointer; white-space:nowrap;
  font-family:var(--text); font-weight:600; font-size:15.5px;
  padding:13px 26px; line-height:1;
  border:1.5px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--brand); color:var(--sheet); }
.btn-primary:hover{ background:var(--brand-deep); }
.btn-ghost{ border-color:var(--brand); color:var(--brand); background:transparent; }
.btn-ghost:hover{ background:var(--brand-wash); }
.btn-paper{ background:var(--sheet); color:var(--brand); }
.btn-paper:hover{ background:#fff; }
.btn-sm{ padding:10px 20px; font-size:14.5px; }
.btn .orcid-dot{
  width:15px; height:15px; border-radius:50%;
  background:var(--orcid); color:#fff; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:800; font-style:normal;
}

/* ── Shared section furniture ──────────────────────────── */
.kicker{
  font-size:12.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brand); margin:0 0 18px;
}
.sec{ padding:96px 0; }
.sec-tight{ padding:72px 0; }
.sec-rule{ border-top:1px solid var(--line); }
.sec h2{ font-size:42px; line-height:1.12; }
.page-head h2{ font-size:52px; line-height:1.12; }
.sec .lede{
  font-size:19px; line-height:1.65; color:var(--ink-soft);
  max-width:34em; margin:18px 0 0; text-wrap:pretty;
}
.fineprint{
  font-size:14px; color:var(--ink-faint); font-style:italic;
}
.fineprint .dag{ font-family:var(--display); font-weight:500; color:var(--brand); font-style:normal; }

/* ── Footer ────────────────────────────────────────────── */
.site-foot{
  border-top:1px solid var(--line-strong);
  background:var(--paper-deep);
  padding:56px 0 48px;
  margin-top:0;
}
.site-foot .cols{
  display:flex; flex-wrap:wrap; gap:48px; justify-content:space-between;
  align-items:flex-start;
}
.site-foot .brandcol{ max-width:320px; }
.site-foot .brandcol p{
  margin:14px 0 0; font-size:14.5px; color:var(--ink-soft); line-height:1.6;
}
.site-foot nav{ display:flex; gap:64px; }
.site-foot nav .col{ display:flex; flex-direction:column; gap:10px; font-size:14.5px; }
.site-foot nav .col strong{
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:4px;
}
.site-foot nav .col a{ color:var(--ink-soft); }
.site-foot nav .col a:hover{ color:var(--ink); }
.site-foot .legal{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line-strong);
  font-size:13px; font-style:italic; color:var(--ink-faint);
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
}
.site-foot .legal a{ border-bottom:1px solid var(--line-strong); }
.site-foot .legal a:hover{ color:var(--ink); border-color:var(--ink-faint); }

/* ── Layout thumbnails (micro-mockups) ─────────────────── */
.lt{
  position:relative;
  aspect-ratio:4/4.2;
  border-radius:7px;
  border:1px solid var(--line-strong);
  box-shadow:0 1px 2px rgba(32,36,30,.06), 0 10px 26px -18px rgba(32,36,30,.28);
  overflow:hidden;
  container-type:inline-size;
}
.lt *{ pointer-events:none; }
.lt .b{ display:block; border-radius:2px; }
.lt .pad{ position:absolute; inset:0; padding:9% 10%; }

.lt-card{ display:block; }
.lt-card .lt{ transition:transform .18s ease, box-shadow .18s ease; }
.lt-card:hover .lt{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(32,36,30,.07), 0 18px 34px -16px rgba(32,36,30,.32);
}
.lt-meta{
  display:flex; align-items:baseline; gap:10px; margin-top:13px;
}
.lt-meta .nm{ font-family:var(--display); font-size:19px; font-weight:600; }
.lt-meta .tag{
  margin-left:auto;
  font-family:var(--text); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; border-radius:99px; padding:3px 9px;
}
.tag-free{ background:var(--chip); color:#3D5212; }
.tag-pro{ background:var(--ink); color:var(--sheet); }
.lt-desc{
  margin:5px 0 0; font-size:14px; line-height:1.5; color:var(--ink-soft);
  text-wrap:pretty;
}

/* ── Pricing cards ─────────────────────────────────────── */
.plans{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  align-items:stretch;
}
.plan{
  background:var(--sheet); border:1px solid var(--line-strong);
  border-radius:14px; padding:34px 34px 38px;
  display:flex; flex-direction:column;
}
.plan-pro{ border:1.5px solid var(--brand); }
.plan .plan-name{
  display:flex; align-items:center; gap:12px;
  font-family:var(--text); font-size:17px; font-weight:700;
}
.plan .plan-badge{
  font-size:12px; font-weight:600; background:var(--chip); color:#3D5212;
  border-radius:99px; padding:4px 12px;
}
.plan .price{
  font-family:var(--display); font-size:56px; font-weight:500; line-height:1;
  margin:22px 0 6px;
}
.plan .price small{
  font-size:20px; color:var(--ink-faint); font-weight:400;
}
.plan .price-note{ font-size:14px; color:var(--ink-faint); margin:0 0 10px; }
.plan ul{
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-direction:column; gap:11px;
  font-size:15.5px; color:var(--ink-soft);
}
.plan ul li{ display:flex; gap:11px; align-items:baseline; }
.plan ul li::before{
  content:"·"; font-family:var(--display); font-weight:700; font-size:22px;
  line-height:.8; color:var(--brand); flex:0 0 auto;
}
.plan .plan-cta{ margin-top:auto; padding-top:28px; }

/* ── Researchers table ─────────────────────────────────── */
.dir{ width:100%; border-collapse:collapse; }
.dir th{
  text-align:left; font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint);
  padding:0 16px 12px 0; border-bottom:1px solid var(--line-strong);
}
.dir td{
  padding:16px 16px 16px 0; border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.dir .who{ display:flex; align-items:center; gap:16px; }
.dir .mono-disc{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:16px; font-weight:500; color:var(--sheet);
}
.dir .nm{ font-size:17px; font-weight:600; }
.dir .nm a{ border-bottom:1px solid var(--line-strong); }
.dir .nm a:hover{ color:var(--brand); border-color:var(--brand); }
.dir .ttl{ font-size:14.5px; color:var(--ink-soft); margin-top:1px; }
.dir .oid{
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:14px; color:var(--ink-soft); white-space:nowrap;
}
.dir .oid::before{
  content:""; display:inline-block; width:11px; height:11px; border-radius:50%;
  background:var(--orcid); margin-right:9px; vertical-align:-1px;
}

/* ── CTA band ──────────────────────────────────────────── */
.cta-band{
  background:var(--brand-deep);
  color:var(--sheet);
}
.cta-band .inner{
  padding:88px 0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.cta-band h2{ font-size:46px; line-height:1.1; max-width:18em; }
.cta-band p{
  margin:16px 0 32px; font-size:17px; color:color-mix(in oklab, var(--sheet) 72%, var(--brand));
  max-width:36em; text-wrap:pretty;
}

/* ── FAQ ───────────────────────────────────────────────── */
.faq{ max-width:720px; }
.faq details{ border-bottom:1px solid var(--line-strong); }
.faq summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:22px 0; font-size:18px; font-weight:600; font-family:var(--text);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:var(--display); font-size:24px; font-weight:400;
  color:var(--brand); flex:0 0 auto; line-height:1;
}
.faq details[open] summary::after{ content:"−"; }
.faq .a{
  padding:0 0 24px; margin:-6px 0 0; max-width:60ch;
  color:var(--ink-soft); font-size:16px; line-height:1.65; text-wrap:pretty;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width:880px){
  .shell{ padding:0 24px; }
  .site-head .shell{ height:64px; gap:18px; }
  .site-nav{ gap:18px; font-size:14.5px; }
  .site-nav .nav-sec{ display:none; }
  .sec{ padding:64px 0; }
  .sec h2{ font-size:33px; }
  .page-head h2{ font-size:36px; }
  .plans{ grid-template-columns:1fr; }
  .cta-band h2{ font-size:34px; }
  .site-foot nav{ gap:36px; flex-wrap:wrap; }
}

/* ── Newsletter FAB + modal ───────────────────────────── */
.news-fab{
  position:fixed; right:28px; bottom:28px; z-index:60;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--brand-deep); color:var(--sheet);
  font-family:var(--text); font-size:15px; font-weight:600; line-height:1;
  padding:14px 22px; border-radius:99px; cursor:pointer;
  border:1.5px solid color-mix(in oklab, var(--sheet) 22%, var(--brand-deep));
  box-shadow:0 10px 30px -10px rgba(22,36,58,.55), 0 2px 6px rgba(22,36,58,.25);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.news-fab:hover{
  transform:translateY(-2px); background:var(--brand);
  box-shadow:0 14px 34px -10px rgba(22,36,58,.6), 0 2px 6px rgba(22,36,58,.25);
}
.news-fab:active{ transform:translateY(0); }
.news-fab .fab-dag{
  font-family:var(--display); font-weight:500; font-size:17px;
  color:var(--orcid); transform:translateY(-1px);
}
.news-modal{
  border:1.5px solid var(--brand); border-radius:16px; background:var(--sheet);
  color:var(--ink); padding:0; max-width:480px; width:calc(100% - 48px);
  box-shadow:0 30px 80px -30px rgba(22,36,58,.5);
}
.news-modal::backdrop{ background:rgba(32,36,30,.45); }
.news-modal .nm-inner{ padding:38px 40px 34px; position:relative; }
.news-modal .kicker{ margin-bottom:12px; }
.news-modal h3{
  font-family:var(--display); font-size:30px; font-weight:500;
  letter-spacing:-.01em; line-height:1.15; margin:0;
}
.news-modal p{
  margin:14px 0 0; font-size:15.5px; line-height:1.65; color:var(--ink-soft); text-wrap:pretty;
}
.news-modal form{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; }
.news-modal input[type="email"]{
  flex:1 1 200px; min-width:0;
  font-family:var(--text); font-size:15.5px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line-strong); border-radius:99px;
  padding:12px 18px; outline:none;
}
.news-modal input[type="email"]:focus{ border-color:var(--brand); }
.news-modal .fineprint{ margin:16px 0 0; }
.news-modal .nm-close{
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-strong); background:transparent;
  font-family:var(--display); font-size:19px; line-height:1; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.news-modal .nm-close:hover{ background:var(--brand-wash); color:var(--ink); }
@media (max-width:880px){
  .news-fab{ right:16px; bottom:16px; padding:13px 18px; }
}

/* ── Small screens ─────────────────────────────────────── */
@media (max-width:520px){
  .shell{ padding:0 18px; }
  .site-head .shell{ gap:12px; }
  .site-nav{ gap:12px; }
  .site-nav a:not(.btn){ display:none; }
  .wordmark{ font-size:21px; }
  .site-nav .btn-sm{ padding:9px 14px; font-size:13px; }
  .sync-chip{ right:6px; top:-14px; }
  .mock-back{ inset:6% 6% -5% 6%; }
}

/* ── News index (ledger) ───────────────────────────────── */
.news-head{ padding:84px 0 0; }
.news-head h2{ font-size:52px; }
.ledger{ margin:56px 0 0; border-top:1px solid var(--line-strong); }
.ledger .row{
  display:grid; grid-template-columns:168px 1fr; gap:36px;
  padding:30px 0; border-bottom:1px solid var(--line);
  align-items:baseline;
}
.ledger .row .date{
  font-size:14.5px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.ledger .row h3{ font-size:25px; line-height:1.2; font-weight:500; }
.ledger .row h3 a{ transition:color .15s ease; }
.ledger .row:hover h3 a{ color:var(--brand); }
.ledger .row .ex{
  margin:7px 0 0; font-size:15.5px; line-height:1.6;
  color:var(--ink-soft); max-width:58ch; text-wrap:pretty;
}

/* ── News post ─────────────────────────────────────────── */
.article{ max-width:720px; margin:0 auto; padding:72px 0 96px; }
.crumb{ font-size:15px; font-weight:600; color:var(--brand); }
.crumb:hover{ color:var(--brand-deep); }
.art-meta{ margin:40px 0 18px; }
.article h1{
  font-size:clamp(36px, 4vw, 48px); line-height:1.1; font-weight:500;
}
.standfirst{
  margin:20px 0 0; font-size:19.5px; line-height:1.6;
  color:var(--ink-soft); text-wrap:pretty;
}
.art-body{ margin-top:36px; padding-top:36px; border-top:1px solid var(--line-strong); }
.art-body p{
  margin:0 0 22px; font-size:17px; line-height:1.75;
  color:var(--ink); text-wrap:pretty;
}
.art-body p strong{ font-weight:700; }
.art-body .fineprint{ margin-top:30px; display:block; }
.art-fig{ margin:42px 0; padding:0; }
.art-fig .pair{
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
  max-width:540px; margin:0 auto;
}
.art-fig figcaption{
  margin-top:18px; text-align:center;
  font-size:14px; font-style:italic; color:var(--ink-faint);
}
.art-end{ margin-top:18px; padding-top:30px; border-top:1px solid var(--line); }

@media (max-width:880px){
  .news-head{ padding:56px 0 0; }
  .news-head h2{ font-size:40px; }
  .ledger .row{ grid-template-columns:1fr; gap:6px; padding:24px 0; }
  .article{ padding:48px 0 72px; }
  .art-fig .pair{ gap:18px; }
}