/* ===================================================================== Æ/RA Studio — styles Design tokens live in :root. Type pairing follows the copy doc's note: a serif for the mark (Georgia → Gelasio online), a clean humanist sans for everything else (Gill Sans → Cabin online). Swap them here. ===================================================================== */ /* ---- NIGHT (default) — after the pink/cyan field-line render Æther liked: near-black ground, coral-pink + electric-cyan glows, pale pink-white ink ---- */ :root{ --paper:#08070b; --paper-rgb:8,7,11; --ink:#f4edf1; --ink-2:rgba(244,237,241,.68); --ink-3:rgba(244,237,241,.44); --line:rgba(244,237,241,.14); --fill:rgba(244,237,241,.05); --accent:#ff7a9c; /* coral-pink */ --accent-2:#7fe2ff; /* electric cyan */ /* weather = the background colour fields (read by script.js) */ --weather-blend:screen; --weather-1:255,110,150; /* pink */ --weather-2:110,225,255; /* cyan */ --weather-3:240,80,110; /* coral */ --weather-4:140,160,255; /* periwinkle */ --weather-5:255,170,200; /* pale pink */ --weather-alpha:.38; /* overall intensity */ --grain-blend:overlay; --grain-opacity:.35; --serif:Georgia,'Gelasio','Times New Roman',serif; --sans:'Gill Sans','Gill Sans MT','Cabin',system-ui,-apple-system,sans-serif; --wrap:1240px; --gutter:clamp(1.25rem,6vw,5rem); } /* ---- PAPER — the earlier airy version. Switch with ---- */ html[data-theme="paper"]{ --paper:#f3efe7; --paper-rgb:243,239,231; --ink:#17161a; --ink-2:rgba(23,22,26,.68); --ink-3:rgba(23,22,26,.44); --line:rgba(23,22,26,.14); --fill:rgba(23,22,26,.05); --accent:#b9583f; --accent-2:#3a8fa8; --weather-blend:multiply; --weather-1:205,221,230; --weather-2:236,214,196; --weather-3:214,222,205; --weather-4:224,213,226; --weather-5:240,228,208; --weather-alpha:.58; --grain-blend:multiply; --grain-opacity:.42; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--paper);color:var(--ink); font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.55; overflow-x:hidden;-webkit-font-smoothing:antialiased; } ::selection{background:var(--accent);color:var(--paper)} a{color:inherit} img{display:block;max-width:100%} /* ---------- weather (background canvas) ---------- */ #weather{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block} .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E")} /* ---------- seed tag (bottom-left): tells visitors the background is generative ---------- */ #seedTag{position:fixed;left:var(--gutter);bottom:1.2rem;z-index:40;display:flex;align-items:center;gap:.9em; font-family:var(--sans);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3); background:none;border:none;padding:.4em 0;cursor:pointer;transition:color .3s} #seedTag .st-seed em{font-style:normal;color:var(--ink-2);font-variant-numeric:tabular-nums} #seedTag .st-action{color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:.15em;transition:color .3s,border-color .3s} #seedTag:hover{color:var(--ink-2)} #seedTag:hover .st-action{color:var(--accent-2);border-color:var(--accent-2)} #seedTag:focus-visible{outline:1px solid var(--accent-2);outline-offset:4px} @media (max-width:600px){#seedTag .st-label{display:none}#seedTag{bottom:.9rem;gap:.7em}} /* ---------- chrome ---------- */ header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:baseline; padding:1.1rem var(--gutter) 1.9rem;pointer-events:none; /* soft paper fade + blur so the nav stays legible over content */ background:linear-gradient(to bottom,rgba(var(--paper-rgb),.92),rgba(var(--paper-rgb),.55) 55%,rgba(var(--paper-rgb),0)); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); -webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)} header a{pointer-events:auto} .brand{text-decoration:none;display:inline-flex;align-items:baseline;gap:.55em} .brand-mark{font-family:var(--serif);font-size:1.15rem;letter-spacing:.01em} .brand-word{font-family:var(--sans);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)} nav{display:flex;gap:1.6rem} nav a{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;transition:color .25s} nav a:hover,nav a.active{color:var(--ink)} main{position:relative;z-index:10} .wrap{max-width:var(--wrap);margin:0 auto;padding:7rem var(--gutter)} /* ---------- section label ---------- */ .sec-label{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3); display:flex;align-items:center;gap:1rem;margin-bottom:3.2rem} .sec-label::after{content:"";flex:1;height:1px;background:var(--line)} /* ---------- landing ---------- */ #landing{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative} #landing .wrap{width:100%;padding-top:9rem;padding-bottom:7rem} .wordmark{font-weight:400;line-height:.9;letter-spacing:-.02em;display:flex;flex-direction:column;gap:.35em} .wordmark .mark{font-family:var(--serif);font-size:clamp(5.2rem,19vw,15rem);display:inline-flex;align-items:baseline} .wordmark .slash{font-weight:300;margin:0 .01em;font-style:italic;transform:translateY(-.02em); background:linear-gradient(160deg,var(--accent-2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent} .wordmark .word{font-family:var(--sans);font-size:clamp(.95rem,2.2vw,1.45rem);letter-spacing:.42em;text-transform:uppercase; color:var(--ink-2);padding-left:.25em} /* the mark breathes very slightly — invisible-weather */ @media (prefers-reduced-motion:no-preference){ .wordmark .ae,.wordmark .ra{display:inline-block;animation:breathe 9s ease-in-out infinite} .wordmark .ra{animation-delay:-4.5s} @keyframes breathe{0%,100%{letter-spacing:-.02em}50%{letter-spacing:.015em}} } .tagline{margin-top:3.4rem;font-family:var(--serif);font-size:clamp(1.45rem,2.9vw,2.3rem);line-height:1.25;max-width:22ch;letter-spacing:-.005em} .subline{margin-top:1rem;font-size:clamp(.95rem,1.4vw,1.1rem);color:var(--ink-2);max-width:60ch} .scroll-hint{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);text-decoration:none;color:var(--ink-3);font-size:.95rem; animation:bob 2.8s ease-in-out infinite} @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}} /* ---------- about ---------- */ .about-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:4rem 6rem;align-items:start} .statement p{font-family:var(--serif);font-size:1.22rem;line-height:1.55;max-width:58ch;margin-bottom:1.5rem} .statement p:first-child{font-size:clamp(1.45rem,2.2vw,1.85rem);line-height:1.35;letter-spacing:-.005em;margin-bottom:2.2rem} .statement p:last-child{margin-bottom:0} .facts{position:sticky;top:6rem;border-top:1px solid var(--line)} .facts dl{display:grid;grid-template-columns:auto 1fr;gap:0} .facts dt,.facts dd{padding:.9rem 0;border-bottom:1px solid var(--line)} .facts dt{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding-right:1.6rem;padding-top:1.05rem;white-space:nowrap} .facts dd{font-size:.98rem;color:var(--ink-2)} /* ---------- projects ---------- */ .projects{display:flex;flex-direction:column;gap:7rem} .project{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:2.5rem 5rem;align-items:start} .project-head{position:sticky;top:6rem} .project-year{font-size:.7rem;letter-spacing:.22em;color:var(--ink-3);margin-bottom:1rem;display:flex;gap:1rem;align-items:center} .project-year .tag{border:1px solid var(--line);border-radius:999px;padding:.15em .7em;letter-spacing:.16em;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)} .project-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4vw,3.3rem);line-height:1.02;letter-spacing:-.015em;margin-bottom:1.2rem} .project-lede{font-family:var(--serif);font-style:italic;font-size:1.18rem;line-height:1.45;color:var(--ink-2);max-width:34ch} .project-body{display:flex;flex-direction:column;gap:1.9rem} .project-text{display:flex;flex-direction:column;gap:1.9rem;min-width:0} /* split: text column on the left, a tall image standing on the right */ .project.split{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)} .project-body.split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem 2.5rem;align-items:start} .project-meta{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);line-height:1.9; display:flex;flex-direction:column;gap:.1rem;padding-top:.6rem;border-top:1px solid var(--line)} .project-meta span{display:block} .project-meta .project-context{color:var(--ink);font-weight:600;letter-spacing:.16em} .project-overview{font-size:1.05rem;line-height:1.62;max-width:62ch} .project-media{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .project-media img{width:100%;height:auto;border-radius:3px;background:var(--fill)} .project-body.split .project-media{display:block} .project-media img.portrait{width:auto;height:min(520px,66vh);max-width:100%} .project-links{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem} .project-links a{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink); border-bottom:1px solid var(--ink);padding-bottom:.2em;transition:color .25s,border-color .25s} .project-links a:hover{color:var(--accent-2);border-color:var(--accent-2)} .project-links a::after{content:" ↗";color:var(--ink-3)} /* ---------- contact ---------- */ .contact-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:3rem 6rem;align-items:start} .contact-lead{font-family:var(--serif);font-size:clamp(1.45rem,2.4vw,2rem);line-height:1.3;max-width:24ch} .contact-lead a{text-decoration:none;border-bottom:1px solid var(--ink-3);transition:border-color .25s} .contact-lead a:hover{border-color:var(--accent);color:var(--accent)} .contact-people{display:flex;flex-direction:column;border-top:1px solid var(--line)} .contact-row{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:1rem 0;border-bottom:1px solid var(--line)} .contact-name{font-size:.98rem;color:var(--ink)} .contact-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem 1.4rem} .contact-links a{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink-2); border-bottom:1px solid transparent;padding-bottom:.15em;transition:color .25s,border-color .25s} .contact-links a:hover{color:var(--accent-2);border-color:var(--accent-2)} .contact-links a::after{content:" ↗";color:var(--ink-3)} /* ---------- footer ---------- */ footer{position:relative;z-index:10;display:flex;justify-content:space-between;gap:1rem;padding:2rem var(--gutter) 3.6rem; font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);border-top:1px solid var(--line); max-width:var(--wrap);margin:0 auto} /* ---------- reveal ---------- */ .rv{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease} .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rv{opacity:1;transform:none;transition:none} .scroll-hint{animation:none} } /* ---------- responsive ---------- */ @media (max-width:900px){ .about-grid,.project,.project.split,.contact-grid{grid-template-columns:1fr;gap:2.2rem} .facts,.project-head{position:static} .projects{gap:5rem} .wrap{padding:4.5rem var(--gutter)} #landing .wrap{padding-top:8rem} } @media (max-width:600px){ body{font-size:16px} header{padding:.9rem var(--gutter)} nav{gap:1rem} nav a{font-size:.64rem;letter-spacing:.12em} .brand-word{display:none} .project-media{grid-template-columns:1fr 1fr} .project-body.split{grid-template-columns:1fr} .project-media img.portrait{height:auto;max-height:70vh} footer{flex-direction:column;gap:.5rem} }