/* ============================================================ SURROGATE ENTREPRENEUR — foundation Two worlds: STAGE — the public startup narrative. Backlit. Dark. Screen. PAPER — the company that still has to be built. Printed. Warm. ============================================================ */ :root{ /* --- paper world --- */ --paper: #F4F1EA; --paper-2: #EDE8DE; --paper-3: #E3DCCF; --ink: #16130F; --graphite: #423C33; --muted: #6B6459; --faint: #665F52; --rule: rgba(22,19,15,.14); --rule-soft: rgba(22,19,15,.07); /* --- stage world --- */ --stage: #0D0C0B; --stage-2: #161513; --stage-3: #201E1A; --stage-line: rgba(244,241,234,.13); --on-stage: #F4F1EA; --on-stage-dim: #8C8578; /* --- the one accent, taken from the book cover --- */ --accent: #E06030; /* display / graphic use only */ --accent-deep: #AC401A; /* small text on paper — AA */ --accent-solid: #C64E1B; /* solid fills carrying white text — AA */ --accent-lift: #FF7A44; /* small text on stage — AA */ /* --- type --- */ --serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif; --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* fluid scale — clamp(min, preferred, max) */ --t-mega: clamp(2.75rem, 1.2rem + 7.6vw, 8.5rem); --t-xl: clamp(2.1rem, 1.2rem + 4.4vw, 5rem); --t-lg: clamp(1.6rem, 1.1rem + 2.4vw, 3rem); --t-md: clamp(1.24rem, 1.06rem + .85vw, 1.75rem); --t-body: clamp(1rem, .96rem + .2vw, 1.125rem); --t-sm: .875rem; --t-label: .6875rem; /* spacing — 4/8 rhythm, fluid at the section level */ --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem; --gutter: clamp(1.25rem, 5vw, 5rem); --measure: 34rem; --bay: clamp(3rem, 7.5vh, 7rem); /* vertical section rhythm */ --ease-out: cubic-bezier(.16,.84,.44,1); --ease-io: cubic-bezier(.62,.05,.24,1); --masthead-h:61px; /* two-row on small screens — see the media query below */ --z-base:0; --z-raise:10; --z-sticky:40; --z-nav:100; --z-top:1000; } /* two exact 44px rows + the 1px rule between chrome and page */ @media (max-width:47.99rem){ :root{ --masthead-h:90px } } /* ---------- fonts ---------- */ @font-face{ font-family:"Archivo"; src:url("../fonts/archivo-wght.woff2") format("woff2"); font-weight:400 900; font-display:swap; font-style:normal; unicode-range:U+0000-00FF,U+2000-206F,U+20B9,U+2192,U+2013,U+2014,U+2018-201D; size-adjust:100%; ascent-override:92%; descent-override:24%; line-gap-override:0%; } @font-face{ font-family:"Newsreader"; src:url("../fonts/newsreader-400.woff2") format("woff2"); font-weight:400; font-display:swap; font-style:normal; unicode-range:U+0000-00FF,U+2000-206F,U+20B9,U+2192,U+2013,U+2014,U+2018-201D; } @font-face{ font-family:"IBM Plex Mono"; src:url("../fonts/plexmono-400.woff2") format("woff2"); font-weight:400; font-display:swap; font-style:normal; unicode-range:U+0000-00FF,U+2000-206F,U+20B9,U+2192; } @font-face{ font-family:"IBM Plex Mono"; src:url("../fonts/plexmono-500.woff2") format("woff2"); font-weight:500; font-display:swap; font-style:normal; unicode-range:U+0000-00FF,U+2000-206F,U+20B9,U+2192; } /* ---------- selection ---------- */ ::selection{ background:var(--accent); color:#fff } .hero ::selection, .masthead--onstage ::selection{ background:var(--accent); color:#fff } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;color-scheme:light} /* Smooth scroll-behavior only where nothing is already easing the scroll. On the homepage the damped engine provides the smoothness; stacking the browser's own easing under it turned keyboard and anchor jumps to mush. */ html:not(:has([data-seq])){scroll-behavior:smooth} body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0} ul[class],ol[class]{list-style:none;padding:0} img,picture,svg{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;padding:0;cursor:pointer} body{ background:var(--paper); color:var(--ink); font-family:var(--serif); font-size:var(--t-body); line-height:1.6; font-synthesis-weight:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; overflow-x:clip; } /* ---------- type primitives ---------- */ .u-mono{ font-family:var(--mono); font-size:var(--t-label); font-weight:500; letter-spacing:.16em; text-transform:uppercase; font-variant-numeric:tabular-nums; } .u-num{font-variant-numeric:tabular-nums} .display{ font-family:var(--sans); font-weight:800; font-stretch:105%; line-height:.94; letter-spacing:-.028em; text-wrap:balance; } .quiet{ font-family:var(--serif); font-weight:400; line-height:1.22; letter-spacing:-.012em; text-wrap:balance; } /* ---------- layout ---------- */ .shell{width:100%;margin-inline:auto;padding-inline:var(--gutter);max-width:88rem} .bay{padding-block:var(--bay)} /* section eyebrow: mono label + hairline */ .eyebrow{ display:flex;align-items:center;gap:var(--s-4); color:var(--muted);margin-bottom:var(--s-6); } .eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)} .stage .eyebrow{color:var(--on-stage-dim)} .stage .eyebrow::after{background:var(--stage-line)} /* ---------- a11y ---------- */ .skip{ position:absolute;left:var(--s-4);top:var(--s-4);z-index:var(--z-top); transform:translateY(-160%); background:var(--ink);color:var(--paper);padding:.7rem 1.1rem; font-family:var(--mono);font-size:var(--t-sm);border-radius:2px; transition:transform .18s var(--ease-out); } .skip:focus{transform:none} :where(a,button,[tabindex]):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; } .stage :where(a,button,[tabindex]):focus-visible{outline-color:var(--accent-lift)} .vh{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } /* ---------- links & actions ---------- */ .link{ color:var(--ink);text-decoration:none; background-image:linear-gradient(var(--accent),var(--accent)); background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%; padding-bottom:2px;transition:background-size .3s var(--ease-out); } .link:hover{background-size:100% 2px} .cta{ display:inline-flex;align-items:center;gap:.75rem; min-height:52px;padding:.9rem 1.6rem; font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:.01em; text-decoration:none;border-radius:2px; background:var(--ink);color:var(--paper); transition:background-color .22s var(--ease-out), transform .22s var(--ease-out); } .cta:hover{background:var(--accent-deep)} .cta:active{transform:translateY(1px)} .cta__arrow{transition:transform .28s var(--ease-out)} .cta:hover .cta__arrow{transform:translateX(4px)} .cta--accent{background:var(--accent-solid);color:#fff} .cta--accent:hover{background:var(--accent-deep)} .cta--ghost{ background:none;color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule); } .cta--ghost:hover{background:var(--paper-2);color:var(--ink)} .stage .cta--ghost{color:var(--on-stage);box-shadow:inset 0 0 0 1px var(--stage-line)} .stage .cta--ghost:hover{background:var(--stage-3)} /* ---------- the book as an object (shared by every page that shows it) ---------- */ /* a portrait: a small circle of ink-on-paper duotone, always beside a name */ .face{ display:block; width:var(--face, 4.5rem); aspect-ratio:1; flex:none; border-radius:50%; overflow:hidden; background:var(--paper-3); box-shadow:inset 0 0 0 1px rgba(22,19,15,.08); } .face img{ display:block; width:100%; height:100%; object-fit:cover } .faces{ display:flex; align-items:center } .faces .face{ --face:3rem; box-shadow:0 0 0 2px var(--paper-2), inset 0 0 0 1px rgba(22,19,15,.08) } .faces .face + .face{ margin-left:-.7rem } .bookart{ width:100%; height:auto; box-shadow: 0 1px 1px rgba(22,19,15,.10), 0 3px 6px -2px rgba(22,19,15,.12), 0 34px 66px -30px rgba(22,19,15,.58), 0 70px 100px -60px rgba(22,19,15,.42); transform:rotate(-1.1deg); } /* ---------- stage surface ---------- */ /* ---------- scroll properties ---------- Every scroll-driven value is a REGISTERED, NON-INHERITING custom property. A change on one element therefore invalidates that element alone, not its entire subtree. Without this, one --p write per frame would recalculate style on every figure, chip and word beneath it. */ @property --p { syntax:""; inherits:false; initial-value:0 } @property --swell { syntax:""; inherits:false; initial-value:0 } @property --peak { syntax:""; inherits:false; initial-value:0 } @property --letgo { syntax:""; inherits:false; initial-value:0 } @property --file { syntax:""; inherits:false; initial-value:0 } @property --quiet { syntax:""; inherits:false; initial-value:0 } @property --near { syntax:""; inherits:false; initial-value:0 } @property --on { syntax:""; inherits:false; initial-value:0 } @property --vol { syntax:""; inherits:false; initial-value:0 } /* ---------- motion contract ---------- Every animated module reads --p (0..1 progress) or a [data-state]. Reduced motion collapses the same modules to discrete, complete states. */ @media (prefers-reduced-motion:reduce){ html:not(:has([data-seq])){scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } } /* print — the site is about a printed thing; let it print well */ @media print{ .stage{background:#fff;color:#000} [data-motion]{opacity:1!important;transform:none!important} }