/* ========================================================================= The Laingian Institute — design system A shared, dependency-free token + component layer for the institute site. Register: academic claim-and-evidence. Risk budget spent on gravitas. This file is the design system; /design-sync can later import it into Claude Design. Fonts are linked per-page in . ========================================================================= */ /* ---------- tokens ---------- */ :root { /* colour — mapped to the 4th-edition cover: warm cream ground, warm-charcoal ink, and the cover's terracotta as the single accent. */ --paper: #F3EEE5; /* warm cream — the cover ground */ --paper-depth: #ECE5D9; /* deeper warm ground — mechanism altitude */ --paper-edge: #E7E0D2; /* section seams, insets */ --ink: #201C18; /* warm near-black — the cover charcoal */ --ink-soft: #3A332D; --muted: #6A6155; /* secondary text (AA on cream) */ --faint: #8E8578; /* tertiary / decorative */ --surface-text: #6E6557; /* "the many" condition list — receding but AA-legible */ --rule: #DED6C8; /* hairlines */ --rule-strong: #CBC2B1; --accent: #9E5A43; /* terracotta — the cover figure; structure + citations */ --accent-soft: #B27259; --on-dark: #EDE6D8; /* cream text on the single dark inversion */ --on-dark-mut: #C8BCA9; /* type — brand fonts (4th-edition / Conditions for Allowing): Playfair Display + Inter */ --display: "Playfair Display", Georgia, "Times New Roman", serif; /* headings + thesis */ --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --label: "Inter", system-ui, sans-serif; /* eyebrows / data — restrained, no monospace */ /* type scale (modular ~1.22, tuned for reading) */ --t-xs: 12px; --t-sm: 14px; --t-cap: 16px; --t-body: 19px; --t-lede: 23px; --t-h3: 20px; --t-h2: clamp(26px, 3.4vw, 36px); --t-hero: clamp(34px, 6.2vw, 66px); /* spacing (8px base) */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 80px; --s-8: 112px; /* measure / frame */ --measure: 660px; /* reading column ~ 66 chars */ --frame: 1080px; } /* ---------- reset / base ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--t-body); line-height: 1.6; font-weight: 400; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.14; letter-spacing: -0.01em; margin: 0; } p { margin: 0 0 var(--s-3); } p:last-child { margin-bottom: 0; } strong { font-weight: 600; } .term { font-style: italic; } /* italic reserved for defined framework terms */ a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; } /* skip link — a11y */ .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 100; } .skip:focus { left: 8px; top: 8px; } /* ---------- layout ---------- */ .wrap { max-width: var(--frame); margin: 0 auto; padding: 0 32px; } .measure { max-width: var(--measure); } section { padding: var(--s-7) 0; border-bottom: 1px solid var(--rule); } .lede { font-size: var(--t-lede); line-height: 1.5; letter-spacing: -0.005em; } .sec-head { margin-bottom: var(--s-4); } .sec-head h2 { font-size: var(--t-h2); } /* ---------- mono label / eyebrow ---------- */ .mono { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; font-size: var(--t-xs); line-height: 1.4; font-variant-numeric: tabular-nums; } .eyebrow { color: var(--accent); display: inline-block; margin-bottom: var(--s-3); } /* ---------- masthead ---------- */ .masthead { border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(120%) blur(8px); } .masthead .wrap { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; justify-content: space-between; padding: 18px 32px; } .wordmark { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; } .wordmark .li { color: var(--accent); } .nav { display: flex; flex-wrap: wrap; gap: 14px 26px; } .nav a { text-decoration: none; color: var(--muted); font-size: 15px; } .nav a:hover, .nav a[aria-current="page"] { color: var(--ink); } .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--accent); } @media (max-width: 720px) { .nav { gap: 18px; } .nav a { font-size: 13px; } } /* ---------- the descent hero (signature) ---------- */ .hero { padding: var(--s-8) 0 var(--s-7); border-bottom: 1px solid var(--rule); } .surface { /* "the many" — dense, muted, small */ color: var(--surface-text); font-size: 15px; line-height: 2.0; letter-spacing: 0.01em; max-width: 880px; margin: 18px 0 0; } .surface .sep { color: var(--rule-strong); padding: 0 4px; } .descent-hinge { /* the hinge: surface → depth */ display: flex; align-items: center; gap: 16px; color: var(--accent); margin: 30px 0 26px; } .descent-hinge .rule { height: 1px; background: var(--accent); width: 46px; opacity: 0.5; } .descent-hinge .down { font-size: 13px; letter-spacing: 0.18em; } .thesis { /* "the one" — large, calm, high-contrast */ font-family: var(--display); font-size: var(--t-hero); line-height: 1.05; letter-spacing: -0.015em; font-weight: 500; max-width: 16ch; } .thesis em { font-style: italic; color: var(--accent); } .hero-sub { margin-top: 30px; font-size: 21px; color: var(--muted); max-width: 46ch; line-height: 1.5; } /* page-header (interior pages) */ .page-head { padding: var(--s-7) 0 var(--s-5); border-bottom: 1px solid var(--rule); background: var(--paper); } .page-head h1 { font-size: clamp(30px, 5vw, 52px); letter-spacing: -0.02em; max-width: 18ch; } .page-head .standfirst { margin-top: 22px; font-size: var(--t-lede); color: var(--muted); max-width: 52ch; line-height: 1.5; } /* ---------- the mechanism chain (a true sequence — numbering earned) ---------- */ .chain { margin: var(--s-4) 0 var(--s-1); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 26px 0; display: grid; gap: 14px; } .chain .step { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: baseline; } .chain .n { color: var(--accent); font-size: var(--t-xs); } .chain .t { font-size: 17px; line-height: 1.5; } .chain .t b { font-weight: 600; } /* ---------- ground shift: mechanism-altitude sections sit on deeper paper ---------- */ .deep { background: var(--paper-depth); } /* ---------- the single dark inversion: flagship falsifiable hypothesis ---------- */ .flagship { background: var(--ink); color: var(--on-dark); border-radius: 2px; } .flagship .wrap { padding: var(--s-7) 32px; } .flagship .eyebrow { color: #CBA088; } .flagship h2 { color: var(--paper); font-size: clamp(26px, 3.6vw, 40px); max-width: 18ch; } .flagship p { color: var(--on-dark-mut); } .flagship .hypo { font-family: var(--display); font-style: italic; font-size: clamp(22px, 3vw, 30px); line-height: 1.34; color: var(--paper); margin: 26px 0; max-width: 28ch; border-left: 2px solid var(--accent-soft); padding-left: 24px; } /* ---------- evidence ledger ---------- */ .ledger { display: grid; gap: 0; margin-top: 18px; } .ledger .row { display: grid; grid-template-columns: 200px 1fr; gap: 28px; padding: 20px 0; border-top: 1px solid var(--rule); align-items: baseline; } .ledger .row:last-child { border-bottom: 1px solid var(--rule); } .ledger .k { color: var(--accent); } .ledger .v { font-size: 17px; line-height: 1.5; color: var(--ink); } @media (max-width: 640px) { .ledger .row { grid-template-columns: 1fr; gap: 6px; } } /* ---------- convergence list (one event, many names) ---------- */ .conv { margin-top: var(--s-3); border-top: 1px solid var(--rule); } .conv .row { padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.55; color: var(--muted); } .conv .row b { color: var(--ink); font-weight: 600; } /* ---------- contributor roles ---------- */ .roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 24px; border-top: 1px solid var(--rule); } .roles .role { padding: 26px 26px 30px; border-right: 1px solid var(--rule); } .roles .role:last-child { border-right: none; } .roles .role h3 { font-size: var(--t-h3); margin-bottom: 8px; } .roles .role .tag { color: var(--muted); font-size: 12px; display: block; margin-bottom: 14px; } .roles .role p { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 0; } @media (max-width: 760px) { .roles { grid-template-columns: 1fr; } .roles .role { border-right: none; border-bottom: 1px solid var(--rule); } .roles .role:last-child { border-bottom: none; } } /* ---------- note / disclosure inset ---------- */ .note { margin-top: 30px; padding: 18px 22px; background: var(--paper-edge); border-left: 2px solid var(--accent); font-size: 16px; line-height: 1.55; color: var(--muted); } /* ---------- citations + references (the credibility apparatus) ---------- */ .cite { font-family: var(--label); font-size: 0.66em; font-weight: 600; vertical-align: super; line-height: 0; color: var(--accent); text-decoration: none; padding: 0 1px; font-variant-numeric: tabular-nums; } .cite:hover { color: var(--ink); } .references { margin-top: var(--s-4); border-top: 1px solid var(--rule); padding-top: var(--s-3); } .references ol { margin: 0; padding: 0; counter-reset: ref; list-style: none; } .references li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); padding: 8px 0; } .references li::before { counter-increment: ref; content: counter(ref); font-family: var(--label); font-weight: 600; font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; } .references cite { font-style: normal; color: var(--ink); } /* ---------- publications ---------- */ .pub { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 8px; } .pub .item { padding: 28px 0; border-top: 1px solid var(--rule); } .pub .item:last-child { border-bottom: 1px solid var(--rule); } .pub .item.has-cover { display: grid; grid-template-columns: 168px 1fr; gap: var(--s-4); align-items: start; } .pub-cover { width: 150px; height: auto; display: block; } @media (max-width: 560px) { .pub .item.has-cover { grid-template-columns: 1fr; } .pub-cover { width: 150px; } } .pub .status { color: var(--muted); } .pub h3 { font-size: 24px; margin: 6px 0 10px; } .pub p { font-size: 16px; color: var(--muted); line-height: 1.55; max-width: 60ch; } .pub .meta { margin-top: 12px; } /* ---------- founder portrait ---------- */ .founder { display: grid; gap: var(--s-3); margin-top: var(--s-2); } .founder .portrait { width: 232px; height: auto; display: block; border-radius: 2px; border: 1px solid var(--rule); } @media (min-width: 700px) { .founder { grid-template-columns: 232px 1fr; gap: var(--s-4); align-items: start; } } /* ---------- prose (interior reading pages) ---------- */ .prose h2 { font-size: var(--t-h2); margin: var(--s-6) 0 var(--s-3); } .prose h3 { font-size: var(--t-h3); margin: var(--s-4) 0 var(--s-2); } .prose ul { padding-left: 1.1em; margin: 0 0 var(--s-3); } .prose li { margin-bottom: 10px; } /* status flag for unbuilt/gated content (never deployed visible) */ .gated { margin: var(--s-3) 0; padding: 14px 18px; border: 1px dashed var(--rule-strong); background: var(--paper-edge); color: var(--muted); font-size: 15px; line-height: 1.5; } /* ---------- footer ---------- */ footer.site { padding: var(--s-6) 0 var(--s-7); border-bottom: none; background: var(--paper); } footer.site .disclaim { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 60ch; } footer.site .applied { margin-top: 20px; font-size: 15px; color: var(--muted); } /* one-way disclosure → consumer */ footer.site .legal { margin-top: 24px; color: var(--faint); font-size: 13px; } .contact { margin-top: 8px; font-size: 19px; } /* ---------- motion: a single quiet settle, reduced-motion respected ---------- */ .reveal { opacity: 0; transform: translateY(10px); animation: settle 0.8s cubic-bezier(.2,.7,.2,1) forwards; } .reveal.d1 { animation-delay: .04s; } .reveal.d2 { animation-delay: .14s; } .reveal.d3 { animation-delay: .26s; } .reveal.d4 { animation-delay: .38s; } @keyframes settle { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } } /* ---------- responsive ---------- */ @media (max-width: 520px) { .wrap { padding: 0 22px; } .masthead .wrap { padding-left: 22px; padding-right: 22px; } body { font-size: 18px; } section { padding: var(--s-6) 0; } .hero { padding: var(--s-6) 0 var(--s-5); } }