/* ============================================================ byjacklloyd — site styles This is the entire visual identity, in one owned file. Edit a value here and it changes everywhere. This is the "design defined once" promise made concrete. ============================================================ */ /* --- Garamond fallback --- EB Garamond is loaded from Google Fonts in base.njk (a in the ), exactly like JetBrains Mono. This means the site works in the correct typeface the moment it deploys — no missing font files. The font stack below tries Adobe Garamond first (if its project ID is set in site.js) and falls to this EB Garamond, then to system serifs. If you later want to self-host EB Garamond for full independence from Google, see HANDOVER.md — it's an optional upgrade, not a requirement. */ :root { --paper:#f4f1ea; --paper-2:#ece8df; --ink:#21201b; --ink-soft:#74716a; --line:#ccc7ba; /* THE FONT STACK = the Adobe-primary / EB-fallback strategy. "adobe-garamond-pro" is the name Adobe Fonts serves Adobe Garamond Premier under. If the Adobe project isn't loaded, the browser skips it and uses EB Garamond. One line, both fonts, no fragility. */ --serif:"adobe-garamond-pro","EB Garamond",Garamond,Georgia,serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace; --s--1:clamp(0.72rem,0.7rem + 0.1vw,0.78rem); --s-0:clamp(1rem,0.96rem + 0.18vw,1.1rem); --s-1:clamp(1.4rem,1.15rem + 1vw,2rem); --s-2:clamp(2.2rem,1.6rem + 2.6vw,3.8rem); --s-3:clamp(3rem,2rem + 4.5vw,6.5rem); --edge:clamp(1.25rem,0.6rem + 3.2vw,4rem); --gut:clamp(1rem,0.6rem + 1.8vw,2.25rem); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;} body{ background:var(--paper);color:var(--ink); font-family:var(--serif);font-size:var(--s-0);line-height:1.68; position:relative; } /* The grain — the brand's signature texture, site-wide. */ body::before{ content:"";position:fixed;inset:0;z-index:1;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E"); mix-blend-mode:multiply; } .frame{position:relative;z-index:2;max-width:84rem;margin:0 auto;padding:0 var(--edge);} img{display:block;width:100%;height:auto;} a{color:inherit;text-decoration:none;} .mono{font-family:var(--mono);font-size:var(--s--1);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);} header.site{display:flex;align-items:flex-start;justify-content:space-between;padding:clamp(1.75rem,4.5vh,3rem) 0 clamp(3rem,8vh,5.5rem);} .brand{display:flex;align-items:center;gap:.85rem;} .mark{width:40px;height:40px;flex:none;transform:rotate(-2.5deg);} .mark text{font-family:var(--serif);font-style:italic;font-size:30px;fill:var(--ink);} .wordmark{font-family:var(--serif);font-size:var(--s-1);} .wordmark .by{color:var(--ink-soft);} nav.site{display:flex;gap:clamp(1rem,2.4vw,2rem);align-items:center;padding-top:.5rem;} nav.site a{font-family:var(--mono);font-size:var(--s--1);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);transition:color .3s;} nav.site a:hover,nav.site a[aria-current="page"]{color:var(--ink);} .reveal{opacity:0;transform:translateY(16px);transition:opacity 1.1s cubic-bezier(.2,.6,.2,1),transform 1.1s cubic-bezier(.2,.6,.2,1);} .reveal.in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}} /* HOME — clean structure (misalignment dropped, as agreed) */ .lede{font-family:var(--serif);font-size:var(--s-2);line-height:1.08;max-width:16ch;letter-spacing:-.015em;padding-bottom:clamp(3rem,9vh,6rem);} .lede em{font-style:italic;} .index{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,7vh,5rem) var(--gut);padding-bottom:clamp(4rem,12vh,8rem);} .proj{cursor:pointer;} .proj .cap{display:flex;justify-content:space-between;align-items:baseline;margin-top:.85rem;gap:1rem;} .proj .name{font-family:var(--serif);font-size:var(--s-1);} .proj img{transition:opacity .6s ease;background:var(--paper-2);aspect-ratio:4/3;object-fit:cover;} .proj:hover img{opacity:.84;} .bio{display:grid;grid-template-columns:max-content 1fr;gap:clamp(1.5rem,4vw,4rem);max-width:52rem;padding:clamp(2rem,6vh,4rem) 0 clamp(4rem,11vh,7rem);border-top:1px solid var(--line);} .bio .k{padding-top:.4rem;} .bio p{font-size:var(--s-1);line-height:1.4;} .bio a{border-bottom:1px solid var(--ink);} .bio a:hover{opacity:.6;} /* PROJECT — two clean columns, natural height */ .ph{padding-bottom:clamp(2rem,6vh,4rem);} .ph .row1{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:.6rem;} .ph h1{font-family:var(--serif);font-weight:400;font-size:var(--s-2);letter-spacing:-.015em;} .ph p{max-width:40rem;color:var(--ink-soft);margin-top:1.5rem;} .plates{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-items:start;padding-bottom:clamp(4rem,12vh,8rem);} .plates .col{display:grid;gap:clamp(2rem,5vh,3.5rem);align-content:start;} .plate figcaption{display:flex;justify-content:space-between;margin-top:.65rem;} /* ABOUT / CONTACT */ .about{display:grid;gap:clamp(2rem,6vh,4rem);padding-bottom:clamp(4rem,12vh,8rem);} .about .big{font-family:var(--serif);font-size:var(--s-3);line-height:1.02;letter-spacing:-.02em;max-width:14ch;} .about .big em{font-style:italic;} .about .col2{max-width:36rem;} .about .col2 p{margin-bottom:1.4rem;} .about .col2 p:first-child{font-size:var(--s-1);} .about .col2 a{border-bottom:1px solid var(--ink);} /* BLOG */ .journal{padding-bottom:clamp(4rem,12vh,8rem);} .journal h1{font-family:var(--serif);font-weight:400;font-size:var(--s-2);letter-spacing:-.015em;margin-bottom:clamp(2rem,6vh,3.5rem);} .pl{display:grid;grid-template-columns:8rem 1fr;gap:clamp(1rem,4vw,3rem);max-width:46rem;padding:1.6rem 0;border-top:1px solid var(--line);cursor:pointer;transition:opacity .3s;} .pl:last-of-type{border-bottom:1px solid var(--line);} .pl:hover{opacity:.5;} .pl .pt{padding-top:.35rem;} .pl h2{font-family:var(--serif);font-weight:400;font-size:var(--s-1);} article.entry{max-width:38rem;padding-bottom:clamp(4rem,12vh,8rem);} article.entry h1{font-family:var(--serif);font-weight:400;font-size:var(--s-2);line-height:1.08;letter-spacing:-.015em;margin:1rem 0 clamp(2rem,6vh,3rem);} article.entry p{margin-bottom:1.4rem;} article.entry h2{font-family:var(--serif);font-weight:500;font-size:var(--s-1);margin:2.5rem 0 1rem;} article.entry blockquote{border-left:2px solid var(--ink);padding-left:1.5rem;margin:2rem 0;font-style:italic;color:var(--ink-soft);} article.entry figure{margin:2.5rem 0;} article.entry figcaption{margin-top:.6rem;} article.entry img{background:var(--paper-2);} footer.site{border-top:1px solid var(--line);padding:clamp(2.5rem,7vh,4rem) 0;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;} footer.site span,footer.site a{font-family:var(--mono);font-size:var(--s--1);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);} footer.site a:hover{color:var(--ink);} @media (max-width:760px){ header.site{flex-direction:column;gap:1.5rem;} .index{grid-template-columns:1fr;} .plates{grid-template-columns:1fr;} .bio{grid-template-columns:1fr;gap:1rem;} .pl{grid-template-columns:1fr;gap:.4rem;} }