/* ============================================================
   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:        #2f6b4b;          /* green — the design's green theme option */
  --accent-rgb:    47, 107, 75;
  --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 */
}

/* ---- 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 ---------------------------------------- */
.bg-fixed{
  position:fixed; inset:0; 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; inset:0; width:100%; height:100%; 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(20px,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 ---------------------------------- */
/* Content spans ~85% of wide screens (not full width); phones use
   nearly everything since there's little width to spare. */
.site-main{
  flex:1; width:100%; max-width:86%; margin:0 auto;
  padding:clamp(48px,7vw,84px) clamp(20px,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; }
.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:58px 0 16px; }

.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; }

/* ---- 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); }

.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:40px 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:28px 0 0; }
.contact a{ color:var(--muted); }

/* ---- Article ---------------------------------------------- */
.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; }

.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; }
.references{ font-family:var(--mono); font-size:13.5px; line-height:1.9; color:var(--faint); margin:14px 0 0; }

/* ---- 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; }
}

@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; }
}