/* ============================================================
   Movendi — Reality Models
   Static marketing site. No JavaScript.
   Imported from Claude Design "Movendi Site.dc.html" and
   converted to multi-page static HTML + CSS.
   ============================================================ */

/* ---- Design tokens ---------------------------------------- */
:root{
  /* Brand */
  --accent:        #12674A;          /* Movendi green — Verdant Green */
  --accent-rgb:    18, 103, 74;
  --ink:           #1c1c1b;

  /* Background ------------------------------------------------
     Kept white for now. To switch to one of the design's
     CSS backgrounds later, replace --bg with one value below:
       Off-white          #f8f7f4
       Dot grid           radial-gradient(#00000012 1.3px, transparent 1.4px) 0 0 / 24px 24px, #ffffff
       Engineering grid   linear-gradient(#0000000d 1px,transparent 1px) 0 0/28px 28px,
                          linear-gradient(90deg,#0000000d 1px,transparent 1px) 0 0/28px 28px, #ffffff
       Ruled              repeating-linear-gradient(#fff 0,#fff 33px,#00000012 33px,#00000012 34px)
     ---------------------------------------------------------- */
  --bg:            #ffffff;

  /* Text scale */
  --text:          #33312e;
  --text-strong:   #2c2b29;
  --text-soft:     #56544f;
  --text-soft-2:   #52504d;
  --text-quote:    #46443f;
  --muted:         #807e7a;
  --muted-2:       #9b9a98;
  --muted-3:       #8a8985;
  --faint:         #aeada9;
  --faint-2:       #b0afac;
  --faint-3:       #a3a29f;
  --ghost:         #c4c3bf;
  --inactive:      #8e8c88;

  /* Lines & surfaces */
  --line:          #ebe9e6;
  --line-2:        #e7e5e3;
  --line-3:        #f0efec;
  --surface:       #f7f6f4;

  /* Type families */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout widths */
  --wide:    1040px;   /* header / footer */

  /* How much of the next section shows below the fold on the home page.
     At 0 each section is exactly its own screen: the hero stands alone, then
     the argument, then the notes — nothing bleeds across a boundary. Raise it
     (110px reads well) to let the next section peek and pull the reader down.
     One value drives both boundaries, so they always match. */
  --reveal:  0px;
}

/* ---- Reset / base ----------------------------------------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overscroll-behavior:none; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;          /* no rubber-band gap above the sticky header */
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}

/* ---- Animations ------------------------------------------- */
@keyframes glyphFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@keyframes dotBreath{  0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:1; transform:scale(1.5); } }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; } }

/* ---- Content transition (JS-driven, shell stays put) ------
   Only #view (the per-page content) animates. The header,
   footer and live background are never touched, so the
   background keeps moving and the menu stays fixed. New
   content slides in fast from the right (ease-out "quad").
   ----------------------------------------------------------- */
.view{
  transition:transform 280ms cubic-bezier(.22,.61,.36,1),
             opacity   280ms cubic-bezier(.22,.61,.36,1);
  will-change:transform, opacity;
}
.view.is-leaving{                 /* quick exit before the swap */
  opacity:0; transform:translateX(-20px);
  transition-duration:120ms;
}
.view.is-entering{                /* snap to the start position, no transition */
  opacity:0; transform:translateX(36px);
  transition:none;
}
@media (prefers-reduced-motion: reduce){
  .view, .view.is-leaving, .view.is-entering{ transition:none; transform:none; opacity:1; }
}

/* ---- Page scaffold ---------------------------------------- */
/* Height is 100vh (the LARGE, stable viewport), not 100% / inset:0: on phones the
   address bar shows/hides while scrolling, changing the live viewport height. A
   100%/inset box would resize with it and stretch the background; 100vh is fixed
   to the large viewport, so it stays put and just drifts. */
.bg-fixed{
  position:fixed; top:0; left:0; width:100%; height:100vh; z-index:0; pointer-events:none;
  /* The seed attractor image — crisp, instant first paint, and the fallback
     for no-JS / reduced-motion. The <canvas> (app.js) draws the same shape on
     top and slowly rotates it. */
  background:var(--bg) url("assets/bg-clifford.png") center / cover no-repeat;
}
#bg-canvas{ position:fixed; top:0; left:0; width:100%; height:100vh; z-index:0; pointer-events:none; }
.page-shell{
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; flex-direction:column;
}

.wrap-wide{
  max-width:var(--wide); margin:0 auto;
  padding-inline:clamp(28px,5vw,44px);
}

/* ---- Header / nav ----------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
/* Header/footer span the full page width — brand and nav flex to the edges. */
.site-header .wrap-wide,
.site-footer .wrap-wide{ max-width:none; }

.header-inner{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  padding-block:22px;
}
/* Tactile brand — grows slightly on hover to signal it's a link. */
.brand{
  display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit;
  transform-origin:left center;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover{ transform:scale(1.05); }
.brand__glyph{ font-family:var(--serif); font-size:30px; line-height:1; }
.brand__word{ font-family:var(--mono); font-size:15px; letter-spacing:.34em; color:var(--ink); }

.nav{ position:relative; display:flex; gap:clamp(22px,3vw,34px); }
.nav a{
  font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; opacity:.4;
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:opacity .2s;
}
.nav a:hover{ opacity:1; }
.nav a.is-active{ opacity:1; border-bottom-color:var(--ink); }
/* When the JS sliding underline is present, drop the static per-link border. */
.nav.has-slider a.is-active{ border-bottom-color:transparent; }

/* The sliding underline — "shoots" from one word to the next (ease-out-expo). */
.nav__underline{
  position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--ink); opacity:0; transform:translateX(0);
  pointer-events:none;
  transition:transform .55s cubic-bezier(.16,1,.3,1),
             width     .55s cubic-bezier(.16,1,.3,1),
             opacity   .3s  ease;
}

/* ---- Main reading column ---------------------------------- */
/* ONE column for the whole site — home, research, about and the notes
   all share it, so nothing shifts as you navigate. The header and footer
   stay full-bleed (.wrap-wide sets max-width:none) and this column sits
   centred beneath them.

   848px minus the 44px side padding gives a 760px measure: Source Serif 4
   at 19px averages 8.59px/char, so body copy lands at ~88 characters. That
   is past the classic 66-character ideal, chosen deliberately — the copy is
   technical and the 1.75 line-height carries the longer measure. Don't push
   it wider without raising the leading too.
   Below ~986px the 86% takes over and phones use nearly everything, since
   there's little width to spare. */
.site-main{
  flex:1; width:100%; max-width:min(86%, 848px); margin:0 auto;
  padding:clamp(48px,7vw,84px) clamp(28px,5vw,44px) 100px;
}
@media (max-width:600px){
  .site-main{ max-width:100%; }
}
.site-main:focus{ outline:none; }   /* programmatic focus on content swap */

/* ---- Shared typography ------------------------------------ */
.kicker{ font-family:var(--mono); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2); margin:0; }
.display{ font-family:var(--serif); font-weight:600; font-size:clamp(42px,8vw,62px); line-height:1.04; letter-spacing:-.02em; margin:20px 0 0; }
.page-title{ font-family:var(--serif); font-weight:600; font-size:clamp(36px,7vw,48px); line-height:1.05; letter-spacing:-.02em; margin:18px 0 0; }
.lede{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,4vw,25px); line-height:1.4; color:var(--text-soft-2); margin:18px 0 0; }

.rule{ height:1px; background:var(--line-2); border:0; margin:56px 0 0; }

/* Home intro — the program's argument, sitting between the hero and the notes.
   Same measure and serif voice as the About page's opening; the first line is
   set one step up so it reads as a statement, then settles into body size.
   The gap above is deliberately larger than the block's own rhythm: the lede
   directly above is a similar size, and without the extra air the two read as
   one crowded stack of subtitles rather than hero-then-argument. */
/* The argument takes a screen of its own, same as the hero, so the page reads
   as three deliberate sections rather than one scroll. Sized short of a full
   screen for the same reason the hero is: the RESEARCH NOTES label breaks the
   fold and invites the next scroll instead of ending on blank space.
   Top-aligned, not centred — a reader's eye should land on the first line at
   the same place every scroll, which centring would make float.
   No --reveal term here on purpose: this block already STARTS one reveal up
   from the fold, so making it exactly one screen tall carries that same offset
   down to the next boundary and both reveals match for free. The 133px is the
   trailing chrome: the rule's 96px margin, its hairline, .section-label's 36px. */
.intro{ max-width:600px; margin:0; min-height:calc(100svh - 133px); }

/* Home hero — owns the first screen so the page reads as three movements
   (hero, argument, notes) rather than one continuous document. Sized just
   SHORT of a full screen on purpose: the opening line of the argument breaks
   the fold, which pulls the reader down far better than an empty panel would.
   svh rather than vh so a phone's collapsing address bar doesn't shift it.
   The subtracted value approximates header + main's top padding + the reveal. */
/* Centred within its screen rather than sitting under the header: three short
   lines pinned to the top of a tall box read as an accident, centred they read
   as composition, and the attractor occupies the space either side.
   Centred vertically: the negative top margin cancels .site-main's top padding
   so the box spans header-bottom to the fold, and the content lands at the true
   optical centre of the screen. Without it the padding pushes the block low —
   and because that padding is a clamp, how low changed with window width, which
   is worse than being consistently off. Horizontal alignment is left, same as
   every other block on the site. */
.hero{
  display:flex; flex-direction:column; justify-content:center;
  margin-top:calc(-1 * clamp(48px,7vw,84px));
  min-height:calc(100svh - var(--reveal) - 78px);
}
.intro p{ font-family:var(--serif); font-size:19px; line-height:1.62; color:var(--text-soft); margin:18px 0 0; }
.intro .intro-lead{ font-size:clamp(20px,4vw,23px); line-height:1.5; color:var(--text-strong); margin:0; }
.section-label{ font-family:var(--mono); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2); margin:36px 0 26px; }
.micro-label{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint-2); margin:30px 0 14px; }

.dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--accent); margin-left:13px; vertical-align:middle;
  animation:dotBreath 3.4s ease-in-out infinite;
}

/* Underlined mono call-to-action (e.g. "Read the note →") */
.read-link{
  display:inline-block; margin-top:16px;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--accent);
  text-decoration:none; padding-bottom:3px;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:0 100%; background-size:100% 1px;
}

/* ---- Home: featured research note ------------------------- */
.note-card{ display:block; text-decoration:none; color:inherit; }
.note-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px;
  font-family:var(--mono); font-size:13px; color:var(--muted-3);
}
.note-meta .code{ color:var(--accent); font-weight:500; }
.note-meta .sep{ color:var(--ghost); }
.note-card h2{
  font-family:var(--serif); font-weight:600; font-size:clamp(26px,5vw,31px);
  line-height:1.14; letter-spacing:-.01em; margin:14px 0 0;
}
.note-card p{ font-family:var(--serif); font-size:18px; line-height:1.62; color:var(--text-soft); margin:14px 0 0; }
/* Stacked notes need air and a hairline between them — same separator
   vocabulary as .pub-row / .prep-row, so the home page reads as one system. */
.note-card + .note-card{ margin-top:40px; padding-top:40px; border-top:1px solid var(--line-3); }

/* ---- Home: "In preparation" list -------------------------- */
.prep-row{
  display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:baseline;
  padding:13px 0; border-top:1px solid var(--line-3);
}
.prep-row .code{ font-family:var(--mono); font-size:13px; color:var(--faint-3); }
.prep-row .title{ font-family:var(--serif); font-size:18px; color:var(--muted); }

/* ---- Research: callout + legend --------------------------- */
.note-callout{ border-left:2px solid var(--accent); padding:4px 0 4px 22px; margin:34px 0 0; }
.note-callout p{ font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.62; color:var(--text-quote); margin:0; }

.legend{
  display:flex; flex-wrap:wrap; gap:8px 26px; margin:36px 0 0;
  font-family:var(--mono); font-size:12.5px; color:var(--muted);
}
.legend .key{ color:var(--accent); }

/* ---- Research: publications list -------------------------- */
.pub-row{
  display:grid; grid-template-columns:108px 1fr 116px; gap:18px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--line-3);
}
.pub-row .code{ font-family:var(--mono); font-size:14px; }
.code--live{ color:var(--accent); }
.code--prep{ color:var(--faint-3); }

/* Each publication title is an <h2> so the index has a real heading outline for
   search engines. The heading carries no styling of its own — the <a> inside it
   does — so this strips the browser's default margin, size and weight. */
.pub-title{ margin:0; font-size:inherit; font-weight:inherit; line-height:inherit; }

.pub-title-live{
  font-family:var(--serif); font-size:21px; color:var(--ink); text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px;
  transition:background-size .35s ease; padding-bottom:2px;
}
.pub-title-live:hover{ background-size:100% 1px; }
.pub-title-prep{ font-family:var(--serif); font-size:21px; color:var(--inactive); }
.pub-note{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--faint); margin-top:6px; }
.pub-status{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--faint); text-align:right; }

/* ---- Research: "Elsewhere" -------------------------------- */
.elsewhere-row{ display:flex; align-items:baseline; gap:16px; padding:12px 0; border-top:1px solid var(--line-3); }
.elsewhere-row .arrow{ font-family:var(--mono); font-size:12px; color:var(--ghost); }
.elsewhere-row .text{ font-family:var(--serif); font-style:italic; font-size:17px; color:var(--inactive); }

/* ---- About ------------------------------------------------ */
.about-body{ max-width:600px; margin:30px 0 0; }
.about-lead{ font-family:var(--serif); font-size:clamp(20px,4vw,23px); line-height:1.55; color:var(--text-strong); margin:0; }
.about-body p{ font-family:var(--serif); font-size:19px; line-height:1.62; color:var(--text-soft); }
.about-body p + p{ margin:18px 0 0; }
.about-body .gap-lg{ margin-top:28px; }
.contact{ font-family:var(--mono); font-size:13px; line-height:1.8; color:var(--faint); margin:22px 0 0; }
.contact a{ color:var(--muted); }

/* Locations — two quiet address blocks, each linking out to Maps.
   Same mono meta voice as .contact; the street line carries the weight
   and the region line recedes, so the pair reads as one unit. */
.locations{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px 40px; max-width:600px; margin:0; padding:0; list-style:none;
}
.location{
  display:block; font-family:var(--mono); font-size:13px; line-height:1.75;
  text-decoration:none;
}
.location__street{ display:block; color:var(--muted); }
.location__region{ display:block; color:var(--faint); }
.location:hover .location__street{ color:var(--ink); }
.location:hover .location__region{ color:var(--muted); }

/* ---- Article ---------------------------------------------- */
/* The reading measure lives on .site-main so every page shares it —
   see the note there. The article just fills the column. */
.back-link{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--muted-3); text-decoration:none; }
.article-eyebrow{ font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:38px 0 0; }
.article-title{ font-family:var(--serif); font-weight:600; font-size:clamp(34px,6.5vw,46px); line-height:1.12; letter-spacing:-.02em; margin:16px 0 0; }
.article-meta{
  display:flex; flex-wrap:wrap; gap:6px 22px; margin:24px 0 0;
  font-family:var(--mono); font-size:13px; color:var(--muted);
}
.article-meta .sep{ color:var(--ghost); }

/* Its own component, but airy — a hairline band (same vocabulary as
   .pull-quote), no background, tied into the title cluster. */
.hypothesis{
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  padding:16px 0 18px; margin:34px 0 0;
}
.hypothesis .label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.hypothesis p{ font-family:var(--serif); font-style:italic; font-size:21px; line-height:1.45; color:var(--ink); margin:8px 0 0; }

.article h3{ font-family:var(--mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); margin:48px 0 0; font-weight:500; }
.article h3.tight{ margin-top:44px; }
.article h3.first{ margin-top:0; }
.article p{ font-family:var(--serif); font-size:19px; line-height:1.75; color:var(--text); margin:16px 0 0; }
.article p.abstract{ line-height:1.7; margin-top:14px; }
.article .divider{ height:1px; background:var(--line-2); margin:44px 0; border:0; }

/* Third heading level — sits under the uppercase mono h3. Deliberately
   quiet (sentence case, muted) so it reads as a subdivision of the
   section above rather than competing with it. */
.article h4{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.08em;
  color:var(--muted); font-weight:500; margin:34px 0 0;
}
/* A subhead opening its section belongs to the h3 above it — pull it
   close, or the pair reads as two unrelated headings. */
.article h3 + h4{ margin-top:20px; }

/* Lists — same serif measure as body copy. Markers are set in the mono
   face so they read as apparatus, not prose: a hairline dash for
   unordered items, accent numerals for a sequence that has an order. */
.article ul, .article ol{ list-style:none; padding:0; margin:18px 0 0; }
.article ol{ counter-reset:step; }
.article li{
  position:relative; font-family:var(--serif); font-size:19px;
  line-height:1.75; color:var(--text); padding-left:26px;
}
.article li + li{ margin-top:8px; }
.article ul li::before{
  content:"–"; position:absolute; left:0;
  font-family:var(--mono); font-size:15px; color:var(--ghost);
}
.article ol li{ counter-increment:step; padding-left:34px; }
.article ol li::before{
  content:counter(step); position:absolute; left:0; top:3px;
  font-family:var(--mono); font-size:13px; color:var(--accent);
}

.figure{ margin:40px 0 0; }
.figure__frame{
  height:230px; border:1px solid var(--line-2);
  background-image:repeating-linear-gradient(135deg,#f4f3f1 0,#f4f3f1 11px,#fbfbfa 11px,#fbfbfa 22px);
  display:flex; align-items:center; justify-content:center;
}
.figure__tag{
  font-family:var(--mono); font-size:13px; color:var(--faint-3);
  background:#fff; padding:6px 12px; border:1px solid var(--line); text-align:center;
}
.figure figcaption{ font-family:var(--mono); font-size:12.5px; color:var(--muted-2); margin:12px 0 0; }

.pull-quote{
  font-family:var(--serif); font-style:italic; font-size:clamp(22px,5vw,27px); line-height:1.42; color:var(--ink);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  padding:30px 0; margin:30px 0 0;
}
.equation{ text-align:center; margin:40px 0 0; padding:30px 0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.equation__expr{ font-family:var(--serif); font-style:italic; font-size:clamp(21px,4.5vw,25px); color:var(--ink); }
.equation__expr sub{ font-size:.6em; }
.equation__caption{ font-family:var(--mono); font-size:12px; color:var(--muted-2); margin-top:14px; }
/* Numbered reference list at the foot of a research note. It reuses the article's
   ordered-list treatment above — accent mono numerals in a ::before, hanging
   indent — and only dials the type back, since a citation is apparatus rather
   than prose. Journal names stay in the body serif so titles still read as titles. */
.references{ margin:14px 0 0; }
.article .references li{
  font-family:var(--mono); font-size:13.5px; line-height:1.8; color:var(--faint);
}
.article .references li + li{ margin-top:10px; }
.references cite{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--muted); }
.references a{
  color:var(--accent); text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:0 100%; background-size:100% 1px;
}
.references a:hover{ color:var(--ink); }

/* ---- Footer ----------------------------------------------- */
/* No separator rule — the brand and meta just float, flexed to the edges. */
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  padding-block:28px 44px;   /* side padding comes from .wrap-wide so it never hits the edge */
}
.brand--footer{ gap:11px; }
.brand--footer .brand__glyph{ font-size:18px; animation:none; }
.brand--footer .brand__word{ font-size:12px; letter-spacing:.24em; color:var(--muted); }
.footer-meta{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--faint); }
.footer-meta a{ color:var(--muted); text-decoration:none; }
.footer-meta a:hover{ color:var(--ink); }

/* ---- Responsive ------------------------------------------- */
/* On phones the brand collapses to just the 𝕄 glyph, nav sits beside it. */
@media (max-width:600px){
  .header-inner{ align-items:center; flex-wrap:nowrap; }
  .brand__word{ display:none; }
  .brand__glyph{ font-size:26px; }
  .nav{ gap:18px; }
  .nav a{ font-size:12px; letter-spacing:.1em; }
  .locations{ grid-template-columns:1fr; gap:20px; }
}

@media (max-width:560px){
  .pub-row{ grid-template-columns:1fr auto; column-gap:14px; row-gap:6px; }
  .pub-row .code{ grid-column:1; grid-row:1; }
  .pub-status{ grid-column:2; grid-row:1; }
  .pub-body{ grid-column:1 / -1; grid-row:2; }
}

@media (prefers-reduced-motion: reduce){
  .brand, .nav__underline{ transition:none; }
}