/* Design terms: Intersection Observer for scroll-triggered reveals. Threshold: 0.15. Playfair Display (400 Playfair Display (weight 900 Playfair Display headline Playfair Display numerals. As the user scrolls past each dialectic cycle. Playfair Display" (Google Fonts Source Sans 3 (400 Source Sans 3 body text. The illustration is positioned as a 40% width float (left in thesis cells. Source Sans 3 gives the philosophical content room to breathe without competing with the display type. Source Sans 3" (Google Fonts */
:root{--paper:#f2ebe1;--linen:#e8dfd3;--ink:#2d2a26;--walnut:#6b6259;--amber:#c2883e;--slate:#6b7f8a;--bronze:#8a7e6d;--sienna:#b85c3a;--gold:#a89462}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Source Sans 3",Inter,sans-serif;font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.8;overflow-x:hidden;background-image:linear-gradient(135deg,rgba(138,126,109,.08) 12.5%,transparent 12.5%,transparent 50%,rgba(138,126,109,.08) 50%,rgba(138,126,109,.08) 62.5%,transparent 62.5%,transparent);background-size:16px 16px}#particle-canvas{position:fixed;inset:0;z-index:6;pointer-events:none}.counter{position:fixed;top:20px;right:20px;z-index:20;display:flex;gap:6px;align-items:center;padding:8px 16px;border-radius:20px;border:1px solid rgba(138,126,109,.35);background:rgba(242,235,225,.78);color:var(--walnut);font-family:"Playfair Display",serif;font-weight:700;backdrop-filter:blur(8px)}.counter-window{height:1.55em;min-width:2ch;overflow:hidden;position:relative}.counter-window span{display:block;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s cubic-bezier(.4,0,.2,1)}.counter-window.roll span{transform:translateY(-100%);opacity:0}.hero{min-height:100vh;position:relative;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:16px solid transparent;background:var(--linen)}.hero:after{content:"";position:absolute;inset:16px;border:2px solid var(--bronze);border-radius:8px;pointer-events:none}.hero-half{position:relative;display:flex;align-items:center;justify-content:center}.hero-left{background:linear-gradient(135deg,var(--paper),var(--linen))}.hero-right{background:linear-gradient(225deg,var(--linen),var(--paper))}.watermark{font-family:"Playfair Display",serif;font-size:30vw;font-weight:900;line-height:1;opacity:.2}.hero-left .watermark{color:var(--amber)}.hero-right .watermark{color:var(--slate)}.divider{position:absolute;top:16px;bottom:16px;left:50%;width:1px;background:var(--bronze);z-index:3;animation:oscillate 6s ease-in-out infinite}.hero-content{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.domain{font-family:"Playfair Display",serif;font-weight:900;font-size:clamp(4rem,12vw,12rem);letter-spacing:-.06em;margin:0;line-height:.9}.domain span{transition:color .4s ease}.domain span:nth-child(odd){color:var(--amber)}.domain span:nth-child(even){color:var(--slate)}.domain:hover span{color:var(--gold)}.hero-content p{font-family:Caveat,cursive;font-size:clamp(1.45rem,3vw,3rem);color:var(--walnut);margin:.6rem 0 0}.mobius{color:var(--bronze)}.hero-mobius{position:absolute;z-index:4;width:min(28vw,260px);bottom:10vh;left:50%;transform:translateX(-50%);opacity:.34}.dialectic-garden{max-width:1320px;margin:0 auto;padding:clamp(2rem,5vw,6rem) 24px}.cycle{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-bottom:16px}.bento-cell{position:relative;min-height:430px;border:2px solid var(--bronze);border-radius:8px;background:rgba(242,235,225,.94);padding:clamp(1.4rem,3vw,3rem);overflow:hidden;box-shadow:0 22px 60px rgba(45,42,38,.08);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),border-color .4s ease}.thesis{grid-column:span 8;border-color:var(--bronze)}.antithesis{grid-column:span 4;text-align:right}.synthesis{grid-column:1/-1;min-height:220px;text-align:center;border-top:5px solid var(--gold);display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,rgba(194,136,62,.11),rgba(107,127,138,.11)),var(--linen)}.synthesis:before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120'%3E%3Cpath d='M23 64C51 8 114 13 137 52c24 39 71 43 61 2-8-36-63-47-103-11C55 79 21 108 18 78c-3-27 31-44 76-32 45 12 81 45 101 17' fill='none' stroke='%23a89462' stroke-width='3' opacity='.14'/%3E%3C/svg%3E") center/260px no-repeat;opacity:.7}.label{position:relative;z-index:2;display:inline-block;font-family:Caveat,cursive;font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--walnut);margin-bottom:1rem}.thesis .label{color:var(--amber)}.antithesis .label{color:var(--slate)}h2,h3{position:relative;z-index:2;font-family:"Playfair Display",serif;font-weight:900;letter-spacing:-.03em;line-height:1.03;margin:0 0 1rem}h2{font-size:clamp(2.5rem,6vw,5.5rem)}h3{max-width:1000px;font-size:clamp(2rem,4vw,4.4rem);color:var(--gold)}p{position:relative;z-index:2;margin:0 0 1rem;color:var(--walnut)}.creature{position:relative;z-index:1;width:40%;min-width:180px;margin-bottom:1rem;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.creature-left{float:left;margin-right:1.5rem}.creature-right{float:right;margin-left:1.5rem}.wash{stroke:none;opacity:.25}.wash.warm{fill:var(--amber)}.wash.cool{fill:var(--slate)}.reveal-left{transform:translateX(-40px)}.reveal-right{transform:translateX(40px)}.reveal-up{transform:translateY(40px)}.is-visible{opacity:1;transform:translate(0,0)}.dissolving .bento-cell{border-style:dotted}.dissolving.fade-borders .bento-cell{border-color:transparent}.dissolution-footer{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8rem 24px;background:radial-gradient(circle at center,rgba(168,148,98,.18),transparent 55%),var(--paper)}.dissolution-footer p{font-family:"Playfair Display",serif;font-style:italic;font-size:1.5rem;max-width:760px;color:var(--walnut)}.footer-mobius{width:200px;margin-top:2rem;animation:rotate 30s linear infinite}@keyframes oscillate{0%,100%{transform:translateX(-8px)}50%{transform:translateX(8px)}}@keyframes rotate{to{transform:rotate(360deg)}}@media (max-width:900px){.cycle{display:block}.bento-cell{margin-bottom:16px;min-height:auto}.antithesis{text-align:left}.creature,.creature-left,.creature-right{float:none;width:70%;margin:0 0 1rem}.counter{top:12px;right:12px;font-size:.9rem}.hero{border-width:8px}.hero:after{inset:8px}.divider{top:8px;bottom:8px}}