/* jedwilson.com — univocity palette, spectral setting */ :root{ --paper:#FBF7EC; /* univocity --ground */ --paper-lift:#F5F0E0; --ink:#2B2740; /* univocity --ink */ --ink-soft:#706C82; /* univocity --ink-soft */ --ink-faint:#9A96A6; --issue:#574E6B; /* one hue for the whole site; change it and the site changes */ --rule:rgba(43,39,64,.16); --measure:34rem; --gutter:clamp(1.5rem,5vw,4.5rem); color-scheme:light; /* --- label treatment. Change these five, or set data-labels on . --- */ --label-face:'Jost','Avenir Next',system-ui,sans-serif; --label-style:normal; --label-caps:none; --label-track:0.03em; --label-weight:400; --label-size:0.93rem; --standfirst-size:clamp(1.1rem,1rem + .35vw,1.3rem); } .label,.standfirst,nav.sections,.mode,.page-when,.back,.byline, .caption,.figure,.plate,.keep h3,.keep small,.keep button, .keep input::placeholder,.about h3,footer{ font-family:var(--label-face); font-style:var(--label-style); text-transform:var(--label-caps); letter-spacing:var(--label-track); font-weight:var(--label-weight); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)} body{ margin:0; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); background:var(--paper); color:var(--ink); font-family:Spectral,Georgia,'Times New Roman',serif; font-weight:300; font-size:clamp(1rem,0.95rem + 0.2vw,1.0625rem); line-height:1.62; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible{outline:1px solid var(--issue);outline-offset:4px} img{max-width:100%;display:block} /* ---------- light leak ---------- The only ornament on the site: one fixed layer, no images, no javascript. pointer-events:none, so it can never intercept a click, and multiply-blended so it can only ever tint the paper, never lighten it. Every hue is sampled from Jed's own photographs. Turn it down, or off, with --leak-strength. */ :root{--leak-strength:.85} .leak{ position:fixed;inset:0;pointer-events:none;z-index:9; opacity:var(--leak-strength); mix-blend-mode:multiply; background: /* the diagonal streak, lower right to centre */ linear-gradient(330deg, rgba(196,74,70,.30) 0%, rgba(233,136,122,.18) 18%, transparent 44%), /* the ember itself */ radial-gradient(34rem 28rem at 101% 99%, rgba(255,186,150,.52), transparent 64%), /* warmth seeping up the left margin, and a smaller pocket above it */ radial-gradient(15rem 40rem at -5% 62%, rgba(255,190,150,.44), transparent 68%), radial-gradient(9rem 15rem at 1% 21%, rgba(240,178,96,.30), transparent 66%), /* the wash carried across the masthead */ radial-gradient(76rem 20rem at 34% -7%, rgba(240,178,96,.32), transparent 74%), radial-gradient(24rem 15rem at 0% 0%, rgba(255,198,158,.30), transparent 68%); } @media print{.leak{display:none}} .wrap{max-width:60rem;margin:0 auto;padding:0 var(--gutter)} /* ---------- masthead ---------- */ header.top{padding:clamp(2.5rem,7vw,5rem) 0 0} .wordmark{ font-weight:200; font-size:clamp(1.9rem,5.5vw,3.2rem); line-height:0.95; letter-spacing:-0.03em; margin:0; } .standfirst{ font-size:var(--standfirst-size); color:var(--ink-soft); max-width:26rem; margin:0.95rem 0 0; } nav.sections{ display:flex; gap:1.75rem; flex-wrap:wrap; margin:2.75rem 0 0; padding:0 0 1rem; border-bottom:1px solid var(--rule); font-size:var(--label-size); color:var(--ink-soft); } nav.sections a[aria-current="page"]{color:var(--ink)} nav.sections a:hover{color:var(--ink)} /* ---------- register ---------- */ .page-line{ display:flex;flex-wrap:wrap;align-items:baseline;gap:0.9rem; margin:clamp(1.5rem,3vw,2.2rem) 0 clamp(1.5rem,3.5vw,2.2rem); } .page-no{ font-size:clamp(1.6rem,4vw,2.1rem); font-weight:200;color:var(--issue);letter-spacing:-0.02em; } .page-when{font-size:var(--label-size);color:var(--ink-faint)} .register{margin:0;padding:0;list-style:none} .entry{ display:grid;grid-template-columns:7.5rem 1fr;gap:0 1.5rem; padding:1.5rem 0;border-top:1px solid var(--rule); } .entry:last-child{border-bottom:1px solid var(--rule)} .mode{font-size:var(--label-size);color:var(--ink-faint);padding-top:0.38rem} .entry--plain{grid-template-columns:1fr} .entry h3{margin:0;font-weight:400;font-size:1.3rem;line-height:1.28;letter-spacing:-0.01em} .entry h3 a:hover{color:var(--issue)} .byline{margin:0.4rem 0 0;color:var(--ink-soft);font-size:var(--label-size)} .note{margin:0.6rem 0 0;color:var(--ink-soft);max-width:var(--measure)} .note a{border-bottom:1px solid var(--rule)} .note a:hover{color:var(--issue);border-color:var(--issue)} /* ---------- reading view ---------- */ .reading{padding:clamp(1.5rem,3vw,2.2rem) 0 0} .back{font-size:var(--label-size);color:var(--ink-faint)} .back:hover{color:var(--ink)} .reading h2{ font-weight:300;font-size:clamp(1.9rem,5vw,2.9rem); line-height:1.14;letter-spacing:-0.025em;margin:1.75rem 0 0;max-width:22ch; } .reading .byline{margin-top:1rem} .article{max-width:var(--measure);margin:1.6rem 0 0} .article p{margin:0 0 1.35rem} .article a{border-bottom:1px solid var(--rule)} .article a:hover{color:var(--issue);border-color:var(--issue)} .article blockquote{ margin:2rem 0;padding-left:1.4rem;border-left:1px solid var(--issue); font-style:italic;color:var(--ink-soft); } .article h4{font-weight:400;font-style:italic;margin:2.5rem 0 1rem} /* prose emphasis, stays italic */ .figure{ max-width:none;margin:2.75rem 0;background:var(--paper-lift); aspect-ratio:3/2;display:grid;place-items:center; color:var(--ink-faint);font-size:var(--label-size); } .figure--portrait{aspect-ratio:4/5;max-width:22rem} .gallery{margin:clamp(3rem,7vw,4.5rem) 0 0;padding-top:1.6rem;border-top:1px solid var(--rule)} .gallery-head{color:var(--ink-faint);margin:0 0 1.4rem} .covers{ display:grid;gap:1.4rem 1.2rem; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr)); } .cover{display:block} .cover img{ display:block;width:100%;aspect-ratio:1/1;object-fit:cover; background:var(--paper-lift);border:1px solid var(--rule); } .cover--nolink{display:block;cursor:default} .cover .ct{display:block;margin-top:0.6rem;font-size:1.02rem;line-height:1.25} .cover .cm{ display:block;margin-top:0.15rem;color:var(--ink-faint); font-family:var(--label-face);font-size:0.85rem;letter-spacing:var(--label-track); } .cover:hover .ct{color:var(--issue)} .entry--note{align-items:center} .thumb{display:block} .thumb img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--paper-lift)} .lead-image{margin:0 0 2.2rem} .article .credit{color:var(--ink-faint);font-size:0.95rem;margin:0 0 1.6rem} .article .seam{text-align:center;color:var(--ink-faint);margin:2.2rem 0} /* footnotes: squarespace had bare [n] markers and an unlinked list */ .fnref{font-size:0.62em;line-height:0;vertical-align:super} .fnref a{color:var(--issue);padding:0 .08em} .fnback{color:var(--issue);text-decoration:none;margin-left:.35rem} .notes{margin:2.8rem 0 0;padding-top:1.4rem;border-top:1px solid var(--rule)} .notes h4{margin:0 0 1rem;font-style:normal;font-family:var(--label-face); font-size:var(--label-size);letter-spacing:var(--label-track);color:var(--ink-faint)} .notes ol{margin:0;padding-left:1.5rem;color:var(--ink-soft);font-size:0.95rem;line-height:1.55} .notes li{margin:0 0 .7rem} .notes li:target{color:var(--ink)} .article .inline-figure{margin:2.4rem 0} .article .inline-figure img{width:100%;height:auto} .article .inline-figure figcaption{ color:var(--ink-faint);font-family:var(--label-face); font-size:0.88rem;letter-spacing:var(--label-track);margin-top:.6rem} .lead-image img{width:100%;height:auto;display:block} /* the home page register carries sentences rather than titles */ .register--nav h3{font-size:1.1rem;line-height:1.42;font-weight:300} /* one-line descriptions sit level with their label; longer ones centre on it */ .register--nav .entry{align-items:center} .register--nav .mode{padding-top:0;line-height:1.42} .shot{margin:2rem 0} .shot img{width:100%;height:auto} .shot--portrait{max-width:20rem} .shot--small{max-width:26rem;margin:2.2rem 0 0} .shot--contact{max-width:34rem;margin:2.6rem 0 0} .shot--wide{max-width:none} .caption{color:var(--ink-faint);font-size:0.9rem;margin:0.7rem 0 0;max-width:var(--measure)} /* ---------- plain sections ---------- */ .about{padding:clamp(1.5rem,3vw,2.2rem) 0 0;max-width:var(--measure)} .about h2{font-weight:300;font-size:1.9rem;letter-spacing:-0.02em;margin:0 0 1.25rem} .about h3{font-size:1.05rem;margin:2.5rem 0 0.75rem} .about p{margin:0 0 1.2rem} .about a{border-bottom:1px solid var(--issue)} .icons{ display:flex;gap:1.9rem;flex-wrap:wrap;list-style:none; margin:1.6rem 0 0;padding:0; } .icons a{ display:flex;flex-direction:column;align-items:center;gap:0.45rem; text-decoration:none; } .icons svg{width:1.7rem;height:1.7rem;display:block} .icons span{ font-family:var(--label-face);font-size:0.78rem; letter-spacing:var(--label-track);color:var(--ink-faint); white-space:nowrap; } .icons a:hover span{color:var(--ink)} .icons a:hover svg{opacity:.8} .plates{ display:grid;gap:1.5rem;margin:2.5rem 0 0; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); } .plate{background:var(--paper-lift);aspect-ratio:1/1;display:grid;place-items:center; color:var(--ink-faint);font-size:var(--label-size)} /* ---------- keep in touch ---------- */ .keep{ margin:clamp(3rem,6vw,4.5rem) 0 clamp(3rem,6vw,4.5rem); padding:2.25rem 0 0; border-top:1px solid var(--rule);max-width:var(--measure); } .empty{color:var(--ink-soft);margin:0;padding:1.5rem 0; border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .keep h3{font-size:1.05rem;margin:0 0 0.6rem} .keep p{margin:0 0 1.3rem;color:var(--ink-soft)} .keep .fields{display:flex;flex-wrap:wrap;gap:1rem} .keep input{ font:inherit;color:var(--ink);background:none; border:0;border-bottom:1px solid var(--rule); padding:0.35rem 0;flex:1 1 9rem;min-width:0; } .keep input::placeholder{color:var(--ink-faint);font-size:0.92rem} .keep input:focus{outline:0;border-bottom-color:var(--issue)} .keep input.full{flex-basis:100%} .keep button{ font-size:var(--label-size);margin-top:1.5rem;cursor:pointer; background:none;border:1px solid var(--issue);color:var(--issue); padding:0.4rem 1.6rem; } .keep button:hover{background:var(--issue);color:var(--paper)} .keep small{display:block;margin-top:1.1rem;color:var(--ink-faint);font-size:0.88rem} footer{ margin:clamp(4rem,10vw,7rem) 0 0; padding:2rem 0 3.5rem; border-top:1px solid var(--rule); color:var(--ink-faint); font-size:var(--label-size); display:flex;flex-wrap:wrap;gap:0.5rem 2rem; } footer a:hover{color:var(--ink)} [hidden]{display:none !important} @media (max-width:34rem){ .entry{grid-template-columns:1fr;gap:0.35rem} .mode{padding-top:0} nav.sections{gap:1.25rem} }