/* ConserValue — one stylesheet, no build step.
   Direction "Panels", chosen 2026-09-20: a warm ivory page, and the flagship
   green as a block. Header and footer are ivory; between them the panels
   alternate, green first: a panel carrying the class "green" takes the
   flagship as its ground and remaps the type tokens so everything on it is
   ivory. Ivory type only ever sits on the green. Light only. */

:root {
  --page:    #FAF8F3;                    /* warm ivory paper */
  --ink:     #2C2C2C;                    /* headings, titles, numerals */
  --ink-2:   #5E635C;                    /* body text, 5.8:1 on the page */
  --muted:   #6F746C;                    /* meta lines, fine print, 4.5:1 */
  --line:    #DEDFD7;                    /* hairlines, card borders */
  --line-2:  #A9B5AC;                    /* card hover, link underlines, dashed placeholders */
  --accent:  #526258;                    /* the Pallantia flagship green */
  --accent-2: #3F4742;                   /* the flagship, pressed: hover on filled buttons */
  --panel:       #526258;                /* the ground of every .green panel */
  --panel-ink:   #FAF8F3;
  --panel-ink-2: #E4E8E3;
  --panel-muted: #D2DAD4;
  --panel-line:  rgba(250, 248, 243, .2);
  --panel-line-2: rgba(250, 248, 243, .5);   /* inputs and buttons on the green */
  --title:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;  /* the hero name on Home, and nothing else — loaded by index.html alone */
  --display: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --body:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--page); }

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.75;
  /* Tuned in documentation/type-tuning.html. A monospace gives the word space a
     full 0.6em cell like every other glyph, which is what reads as airy; pulling
     it back to ~0.3em is what a proportional face would have given it. */
  letter-spacing: -.022em;
  word-spacing: -.3em;
}

a { color: inherit; text-decoration: none; }
h1, h2, .where, .intro { text-wrap: balance; }
p { text-wrap: pretty; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: rgba(82, 98, 88, .22); }
em { font-style: italic; }

/* ── Green panels: the flagship as ground, every token turned to ivory ── */
.green {
  background: var(--panel);
  color: var(--panel-ink);
  --page:   var(--panel);                /* so hover fills invert */
  --ink:    var(--panel-ink);
  --ink-2:  var(--panel-ink-2);
  --muted:  var(--panel-muted);
  --accent: var(--panel-ink);
  --line:   var(--panel-line);
  --line-2: var(--panel-line-2);
}

/* ── Header: ivory, above the green panel — Home left, sections centred ── */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
  padding: 0 2.5rem;
  background: var(--page);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.top .home { justify-self: start; }

.top nav { justify-self: center; }

.brand {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.02em;
}

.nav { display: flex; gap: 2.5rem; list-style: none; }

.nav a,
.top .home {
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s;
}

.nav a:hover,
.nav a[aria-current],
.top .home:hover,
.top .home[aria-current] { color: var(--accent); }

/* Negative word-spacing is for reading text only: on a tracked uppercase label
   it would pull the words tighter than the letters and lose the word breaks. */
.nav a, .top .home, .eyebrow, .meta, .hero .where, .stat span, .trio h3, .card .ticker,
.btn, .soon, .subscribe button, .subscribe .fine, .foot .fine,
.featured-first .row:first-child h3::before { word-spacing: normal; }

/* ── The tracked labels used everywhere ── */
.eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

.meta {
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Hero (Home) and page heads (the other four) ── */
.hero,
.page-head {
  position: relative;
  text-align: center;
  padding: 4rem 1.5rem;
}

.hero::before,
.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(250, 248, 243, .07) 0%, transparent 70%);
  pointer-events: none;
}

.hero > *,
.page-head > * { position: relative; }


.hero {
  min-height: calc(100vh - 64px);
  min-height: calc(100svh - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero h1 {
  font-family: var(--title);
  font-size: clamp(3.4rem, 9vw, 6.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 1.5rem 0 .5rem;
}

.rule {
  width: 60px;
  height: 1px;
  margin: 2rem auto;
  background: var(--accent);
  opacity: .5;
}

/* The hero's two small lines are one style, so they cannot drift apart:
   light weight, muted, letting the name carry all the weight. */
.hero .eyebrow,
.hero .where {
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-head { padding: 5rem 1.5rem 5.5rem; }

.page-head h1 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.03em;
  margin: 1rem 0 1.25rem;
}

.page-head .intro {
  font-family: var(--display);
  font-size: .9rem;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 62rem;                /* one line on a desktop; balances into two only when it must */
  margin: 0 auto;
}

/* ── The archive at a glance, in the hero ── */
.stats { display: flex; margin-top: 4.5rem; }

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  padding: 0 1.75rem;
}

.stat + .stat { border-left: 1px solid var(--line); }

.stat b {
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 500;
  line-height: 1;
  min-width: 2ch;
}

.stat span {
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Sections: full-bleed panels, with a reading column inside ── */
.section { padding: 5rem 1.5rem; }

.wrap { max-width: 720px; margin: 0 auto; }
.wrap-wide { max-width: 1040px; margin: 0 auto; }

.section-head { text-align: center; margin-bottom: 2.5rem; }

.section h2 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 1.95rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.03em;
  margin-top: .75rem;
}

.prose p { color: var(--ink-2); margin-bottom: 1.1rem; }
.prose p:last-child { margin-bottom: 0; }

.prose .lead,
.card h3,
.list:not(.featured-first) .row h3 {   /* an item's title is set like a lead paragraph:
                                          cards, and the rows of any list that does not
                                          single out a latest item */
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink);
}

/* ...except in a list that singles nobody out, where the titles carry the
   same setting at body weight: emphasis would be claiming a hierarchy the
   list does not have. */
.list:not(.featured-first) .row h3 { font-weight: 400; }

.prose h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 2.25rem 0 .6rem;
}

.prose a { color: var(--accent); border-bottom: 1px solid var(--line-2); transition: border-color .2s; }
.prose a:hover { border-color: var(--accent); }

/* Three short statements, side by side */
.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
  text-align: center;
}

.trio h3 {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .6rem;
}

.trio p { font-size: .875rem; color: var(--ink-2); }

.trio + .prose { margin-top: 3.5rem; }

/* The numbered conditions of the investment approach */
/* The four conditions stand on one line, so the set breaks out past the 1040px
   used elsewhere — at 1200px each column runs ~34 characters, which is as narrow
   as this monospace takes. Two abreast below 1040, one on a phone. */
.conditions {
  list-style: none;
  max-width: 1200px;
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.75rem 2rem;
}

/* The four hold one line down to a tablet, since that is the point of them;
   the gap tightens first to buy the columns width before they give way. */
@media (max-width: 1200px) { .conditions { gap: 2.25rem 1.25rem; } }
@media (max-width: 860px)  { .conditions { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; } }
@media (max-width: 560px)  { .conditions { grid-template-columns: 1fr; } }

/* Prose that follows the column set sits back in the reading measure. */
.conditions + .wrap { margin-top: 3rem; }

strong { font-weight: 600; }

.conditions li {
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.conditions .num {
  display: block;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  margin-bottom: .7rem;
  color: var(--accent);
}

.conditions h3 {
  font-family: var(--display);
  font-size: 1.0rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.02em;
  margin-bottom: .6rem;
}

.conditions p { color: var(--ink-2); }


/* ── Lists of items (Letters, Memoranda) ──
   In a .featured-first list the first row — the latest item, since lists run
   newest first — stands over the rest: a bordered card, a "Latest" label, a
   larger title and a filled button. Nothing to mark up when a new item is
   added at the top; it inherits the treatment. */
.featured-first .row:first-child {
  margin-bottom: 1.5rem;
  padding: 2rem 2.25rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
}

.featured-first .row:first-child h3 { font-size: 1.6rem; }

/* Only the latest item is titled. The rest of a featured list read as plain
   text and sit closer together, so the eye goes to the one at the top. */
.featured-first .row:not(:first-child) { padding: .9rem 0; }

/* The older rows take a smaller button too. Kept above 24px tall so it stays
   a usable target on a touch screen. */
.featured-first .row:not(:first-child) .btn {
  padding: .4rem .85rem;
  font-size: .65rem;
  line-height: 1;                  /* the body's 1.75 was setting the height, not the padding */
}

.featured-first .row:not(:first-child) .btn svg { width: .72rem; height: .72rem; }

.featured-first .row:not(:first-child) h3 {
  font-size: inherit;
  font-weight: 400;
  letter-spacing: normal;
}

.featured-first .row:first-child h3::before {
  content: 'Latest';
  display: block;
  margin-bottom: .6rem;
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

.featured-first .row:first-child .btn { background: var(--accent); color: var(--page); }
.featured-first .row:first-child .btn:hover { background: var(--accent-2); border-color: var(--accent-2); }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
}

.list .row:last-child { border-bottom: 1px solid var(--line); }

.row h3 {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.02em;
}

.row .meta { display: block; margin-top: .35rem; }

/* ── Cards (Research): the research object ──
   Slots: .cover (picture — a photograph is cropped to 16:9, a .logo is
   fitted inside the frame; .cover-empty until there is one), h3 (name),
   .desc (short description), then .card-foot with the .meta date on the left
   and the download button on the right. The grid centres a lone card and
   fits up to three across. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 460px));
  justify-content: center;
  gap: 1.5rem;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color .2s;
}

.card:hover { border-color: var(--line-2); }

.card .cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 3px;
  margin-bottom: 1.5rem;
}

.card .cover.logo {
  object-fit: contain;
  padding: 1.75rem 2rem;           /* no wash: a transparent wordmark sits straight on the card */
}

.card .cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(82, 98, 88, .07);
  border: 1px dashed var(--line-2);
}

.card .cover-empty::before {
  content: 'C';
  font-family: var(--display);
  font-size: 2rem;
  color: var(--accent);
  opacity: .35;
}

.card .desc {
  margin-top: .4rem;
  font-size: .875rem;
  color: var(--ink-2);
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.5rem;
}

/* ── Buttons ── */
.btn,
.soon {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;
  padding: .55rem 1.1rem;
  border-radius: 3px;
  font-family: var(--body);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.btn {
  color: var(--accent);
  border: 1px solid var(--accent);
  transition: background .2s, color .2s;
}

.btn:hover { background: var(--accent); color: var(--page); }
.btn svg { width: .8rem; height: .8rem; }

.soon {
  color: var(--muted);
  border: 1px dashed var(--line-2);
}

/* ── Subscribe: the last panel before the footer, slim ── */
.subscribe {
  text-align: center;
  padding: 3.5rem 1.5rem;
}

.subscribe .eyebrow { margin-bottom: 1.5rem; }

.subscribe form {
  display: flex;
  gap: .75rem;
  max-width: 520px;
  margin: 0 auto 1.1rem;
}

.subscribe input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .7rem 1rem;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--ink);
  font: inherit;
  font-size: .875rem;
}

.subscribe input::placeholder { color: var(--muted); }
.subscribe input:focus { outline: none; border-color: var(--accent); }

.subscribe button {
  flex: 0 0 auto;
  padding: .7rem 1.4rem;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
  font-family: var(--body);
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.subscribe button:hover { background: var(--accent); color: var(--page); }

.subscribe .fine {
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Footer: ivory, like the header ── */
.foot {
  background: var(--page);
  color: var(--ink);
  border-top: 1px solid var(--line);
  text-align: center;
  padding: 3rem 1.5rem 2.25rem;
}

.social {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}

.social a {
  display: inline-flex;
  color: var(--muted);
  transition: color .2s;
}

.social a:hover { color: var(--accent); }
.social svg { width: 18px; height: 18px; display: block; }


.foot .fine {
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Reveal on scroll ──
   Content rises and fades as its panel comes into view. Two things matter here:
   the hidden state is scoped to `html.js` (set by an inline script in the head)
   so the page is never blank if the script does not run; and the targets sit
   inside :where(), which contributes no specificity — otherwise a selector like
   `.conditions li` outranks `.shown` and the item never reappears.
   The same list is in style/reveal.js — keep the two in step. */
.js :where(.hero > *:not(.rule), .page-head > *, .section-head, .prose,
           .trio > div, .conditions li, .row, .card, .subscribe > *) {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}

.js .shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js :where(.hero > *:not(.rule), .page-head > *, .section-head, .prose,
             .trio > div, .conditions li, .row, .card, .subscribe > *) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Small screens ── */
@media (max-width: 720px) {
  .top {
    position: static;
    display: flex;
    flex-direction: column;
    height: auto;
    gap: .6rem;
    padding: 1rem 1.25rem .85rem;
  }
  .nav { gap: 1.4rem; }
  .nav a { font-size: .7rem; }
  .hero { min-height: 0; padding: 5rem 1.25rem 4.5rem; }
  .page-head { padding: 4rem 1.25rem 4.5rem; }
  .stats { margin-top: 3.5rem; }
  .stat { padding: 0 1rem; }
  .section { padding: 4rem 1.25rem; }
  .trio { grid-template-columns: 1fr; gap: 2rem; }

  .row { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .featured-first .row:first-child { padding: 1.5rem 1.25rem; }
  .featured-first .row:first-child h3 { font-size: 1.35rem; }
  .subscribe { padding: 3rem 1.25rem; }
  .subscribe form { flex-direction: column; }
  .subscribe button { padding: .8rem 1.4rem; }
  .grid { grid-template-columns: 1fr; }
  .card-foot { flex-wrap: wrap; }
}