/* dayanmoore.com Tokens. One visual world: a deep blue studio wall with warm white type and a single Guanacaste-sun accent. The page does not follow the viewer's light/dark setting - the wall color is the design. The wall is chosen in data.json ("ground": deepblue | midnight | teal | sage) and lands on . Every ground defines the full token set so text always matches its surface. */ :root{ --ground:#11294B; /* deep blue wall */ --ground-2:#183560; --frame:#1D3D6B; /* empty frame */ --ink:#F4EFE6; /* warm white */ --ink-2:#B9C4D6; --sun:#FF7E4D; /* Guanacaste sun, marks */ --sun-ink:#FF9A73; /* sun, legible as text */ --estuary:#6FC5BC; --tannin:#D9B99A; /* wall labels: warm sand */ --line:rgba(244,239,230,.2); /* the Vanishing works band inverts the page */ --band-ground:#ECE6DA; --band-ground-2:#DDD5C6; --band-ink:#11294B; --band-ink-2:#3A4C66; --band-line:rgba(17,41,75,.2); --band-sun:#B53A16; --gut:clamp(16px,4vw,56px); --gap:clamp(16px,2vw,28px); --display:"Bricolage Grotesque","Hanken Grotesk","Helvetica Neue",Arial,sans-serif; --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif; --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace; } :root[data-ground="midnight"]{--ground:#0B1A30;--ground-2:#11233F;--frame:#172C4C;--band-ink:#0B1A30} :root[data-ground="teal"]{--ground:#0D3B40;--ground-2:#124A50;--frame:#185960;--band-ink:#0D3B40;--band-ink-2:#35575A;--band-line:rgba(13,59,64,.22)} :root[data-ground="sage"]{ --ground:#DCE5D6; --ground-2:#CDD8C7; --frame:#C2CEBB; --ink:#12302B; --ink-2:#3F5B55; --sun:#F0602F; --sun-ink:#AD3513; --estuary:#1E6E68; --tannin:#7A4632; --line:rgba(18,48,43,.18); --band-ground:#12302B; --band-ground-2:#1B403A; --band-ink:#F8E4DA; --band-ink-2:#D9BFB2; --band-line:rgba(248,228,218,.22); --band-sun:#FF8A5C; } /* Fonts are served from this site (SIL OFL, see /fonts/LICENSE.txt). Latin subset. */ @font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/bricolage-grotesque.woff2) format("woff2")} @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/hanken-grotesk.woff2) format("woff2")} @font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-mono-400.woff2) format("woff2")} @font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-mono-500.woff2) format("woff2")} /* Base */ :root{color-scheme:dark;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)} :root[data-ground="sage"]{color-scheme:light} html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);-webkit-text-size-adjust:100%} body{margin:0;padding:0} [hidden]:not([hidden=until-found i]){display:none!important} .skip{position:absolute;left:-999px;top:8px;z-index:30;background:var(--ink);color:var(--ground);padding:8px 14px;border-radius:999px;text-decoration:none;font-weight:600} .skip:focus{left:var(--gut)} *,*::before,*::after{box-sizing:border-box} body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{display:block;max-width:100%;height:auto} a{color:inherit} p{margin:0} h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;text-wrap:balance} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--sun-ink);outline-offset:3px} .wrap{padding-inline:var(--gut);max-width:1560px;margin-inline:auto} .mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase} /* Header */ .top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .top .wrap{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;padding-block:12px} .wordmark{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.03em;text-decoration:none} .top nav{display:flex;gap:4px 22px;overflow-x:auto;max-width:100%;scrollbar-width:none} .top nav::-webkit-scrollbar{display:none} .top nav a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;padding-block:4px;border-bottom:1px solid transparent} .top nav a:hover{border-bottom-color:var(--sun)} .top nav a.ig{color:var(--sun-ink)} /* Hero */ .hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-block:clamp(28px,5vw,80px) clamp(28px,4vw,56px);align-items:end} .hero-name{grid-column:1 / 8;grid-row:1;font-size:clamp(5rem,15.5vw,15.5rem);line-height:.84;letter-spacing:-.055em;font-weight:700;font-variation-settings:"opsz" 96;margin-left:-.04em} .hero-name span{display:block} .hero-meta{grid-column:1 / 7;grid-row:2;display:grid;gap:22px;align-self:start} .hero-thesis{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,2.3vw,2.1rem);line-height:1.18;letter-spacing:-.02em;max-width:22ch} .studios{display:flex;flex-wrap:wrap;gap:14px 36px;padding:0;margin:0;list-style:none} .studios li{display:grid;gap:2px} .studios .p{font-weight:600} .studios .c{font-family:var(--mono);font-size:12px;color:var(--tannin);letter-spacing:.04em;white-space:pre} .hero-fig{grid-column:8 / 13;grid-row:1 / span 2;margin:0;align-self:end} .hero-fig button{display:block;width:100%} /* Tide line */ .tide{display:block;width:100%;height:22px;overflow:hidden} .tide svg{display:block;width:200%;height:22px;animation:drift 48s linear infinite} .tide path{fill:none;stroke:var(--sun);stroke-width:1.5;vector-effect:non-scaling-stroke} @keyframes drift{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.tide svg{animation:none}} /* Wall label */ .label{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;padding-top:10px;font-size:14px;line-height:1.35} .label .t{font-weight:600} .label .m{font-family:var(--mono);font-size:12px;color:var(--tannin);letter-spacing:.02em} .label .s{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px} .label .s::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sun)} .label .s.col::before{background:var(--estuary)} /* Work tiles */ .work{margin:0;min-width:0} .work button{all:unset;display:block;width:100%;cursor:zoom-in} .work button:focus-visible{outline:2px solid var(--sun-ink);outline-offset:3px} .work img{width:100%;background:var(--frame)} .ph{width:100%;max-width:100%;background:var(--frame);display:grid;place-items:center;padding:12px;text-align:center} .ph span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} /* Sections */ .sec{padding-block:clamp(48px,7vw,112px)} .sec + .sec{border-top:1px solid var(--line)} .sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end;margin-bottom:clamp(24px,3.5vw,56px)} .sec-title{grid-column:1 / 8;font-size:clamp(3rem,9vw,8.5rem);line-height:.86;letter-spacing:-.05em;font-variation-settings:"opsz" 96} .sec-side{grid-column:8 / 13;display:grid;gap:10px;max-width:52ch} .sec-side .yrs{color:var(--sun-ink)} .sec-side .med{color:var(--tannin);font-family:var(--mono);font-size:12px;letter-spacing:.02em} /* To-scale rows */ .scale{display:flex;gap:var(--gap);align-items:flex-end} .scale .work{flex:var(--pw) 1 0} .scale-note{margin-top:18px;color:var(--ink-2)} /* Salon wall */ .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px} .chip{background:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer} .chip[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)} .wall{columns:4 240px;column-gap:var(--gap)} .wall .work{break-inside:avoid;margin-bottom:calc(var(--gap) + 6px)} /* Feed */ .feed{padding-block:clamp(36px,5vw,72px) clamp(48px,6vw,88px)} .feed-head{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;justify-content:space-between;margin-bottom:22px} .feed-head h2{font-size:clamp(1.9rem,4vw,3.4rem);letter-spacing:-.04em;line-height:1} .feed-head .who{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline} .feed-head a{color:var(--sun-ink);text-underline-offset:4px} .tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px dashed var(--tannin);color:var(--tannin);border-radius:999px;padding:2px 10px} .feed-row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding-inline:var(--gut);scroll-padding-inline:var(--gut);padding-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--line) transparent} .post{flex:0 0 clamp(210px,23vw,310px);scroll-snap-align:start;text-decoration:none;display:grid;gap:10px;align-content:start} .post .im{position:relative;aspect-ratio:4 / 5;background:var(--frame);overflow:hidden} .post .im img{width:100%;height:100%;object-fit:cover} .post .im .ph{height:100%} .post .kind{position:absolute;top:10px;right:10px;background:var(--ground);color:var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px} .post .cap{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .post .when{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--tannin);text-transform:uppercase} .post:hover .cap{text-decoration:underline;text-underline-offset:3px} /* Artivism band */ .band{background:var(--band-ground);color:var(--band-ink)} .band .sec-side .yrs,.band .label .m{color:var(--band-sun)} .band-quote{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.15;letter-spacing:-.025em;max-width:24ch;color:var(--band-ink)} .band p{color:var(--band-ink-2)} .band a{color:var(--band-sun);text-underline-offset:4px} .projects{display:grid;gap:clamp(36px,5vw,72px)} .project{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-top:clamp(20px,2.5vw,32px);border-top:1px solid var(--band-line)} .project .txt{grid-column:1 / 5;display:grid;gap:10px;align-content:start} .project h3{font-size:clamp(1.4rem,2.2vw,2rem);letter-spacing:-.03em;line-height:1.05;color:var(--band-ink)} .project .where{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--band-sun)} .project .pix{grid-column:5 / 13;display:flex;gap:var(--gap);align-items:flex-start} .project .pix .work{flex:var(--ar,1.33) 1 0;min-width:0} .project .pix.one .work{flex:0 1 64%} .project.solo .txt{grid-column:1 / 8} .project .pix .ph{background:var(--band-ground-2)} .project .pix .ph span{color:var(--band-ink-2)} /* About */ .about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)} .about .portrait{grid-column:1 / 6;margin:0;position:sticky;top:90px;align-self:start} .about .txt{grid-column:7 / 13;display:grid;gap:20px;max-width:64ch} .about .lead{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.4vw,4rem);line-height:.98;letter-spacing:-.045em;margin-bottom:8px} .about .lead em{font-style:normal;color:var(--sun-ink)} .giving{border-left:3px solid var(--estuary);padding-left:16px;color:var(--ink-2)} .affil{display:flex;flex-wrap:wrap;gap:6px 8px;padding:0;margin:0;list-style:none} .affil li{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:999px;padding:3px 11px} /* Exhibitions */ .high{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-bottom:clamp(32px,4vw,56px)} .high > div{border-top:2px solid var(--ink);padding-top:12px;display:grid;gap:6px;align-content:start} .high .y{font-family:var(--display);font-weight:700;font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.04em;line-height:1;color:var(--sun-ink)} .high .w{font-weight:600;line-height:1.3} .high .p{color:var(--ink-2);font-size:15px} .cv{display:grid;gap:0;margin:0} .cv .row{display:grid;grid-template-columns:minmax(90px,2fr) 10fr;gap:var(--gap);padding-block:14px;border-top:1px solid var(--line)} .cv dt{font-family:var(--mono);font-size:13px;color:var(--tannin);padding-top:3px;font-variant-numeric:tabular-nums} .cv dd{margin:0} .cv ul{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:15.5px} details.more summary{cursor:pointer;padding-block:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sun-ink)} /* Contact */ .mail{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,6.6vw,6.5rem);letter-spacing:-.05em;line-height:1;text-decoration:none;overflow-wrap:anywhere;display:inline-block;border-bottom:.06em solid var(--sun)} .mail:hover{color:var(--sun-ink)} .asks{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;padding:0;list-style:none} .asks a{display:inline-block;border:1px solid var(--ink);border-radius:999px;padding:9px 18px;text-decoration:none;font-weight:500} .asks a:hover{background:var(--ink);color:var(--ground)} .contact-foot{margin-top:28px;color:var(--ink-2);max-width:70ch} .contact-foot a{color:var(--sun-ink);text-underline-offset:4px} footer .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;padding-block:24px 40px;border-top:1px solid var(--line);color:var(--ink-2);font-family:var(--mono);font-size:12px} /* Lightbox */ dialog.lb{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:var(--ground);color:var(--ink)} dialog.lb::backdrop{background:var(--ground)} .lb-in{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;padding:16px var(--gut) 20px;gap:14px} .lb-bar{display:flex;justify-content:space-between;align-items:center;gap:12px} .lb-bar .nav{display:flex;gap:8px} .lb-bar button{background:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer} .lb-stage{display:grid;place-items:center;min-height:0} .lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .lb-stage .ph{width:min(100%,520px);aspect-ratio:1} .lb-foot{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:baseline} .lb-foot .label{padding-top:0;font-size:16px} .lb-foot a{color:var(--sun-ink);text-underline-offset:4px;font-weight:500} /* Narrow */ @media (max-width:860px){ .hero-name,.hero-meta,.hero-fig{grid-column:1 / -1;grid-row:auto} .hero-fig{max-width:520px} .sec-title,.sec-side{grid-column:1 / -1} .project .txt,.project .pix,.project.solo .txt{grid-column:1 / -1} .about .portrait,.about .txt{grid-column:1 / -1;position:static} .about .portrait{max-width:520px} .high{grid-template-columns:1fr} .scale{flex-wrap:wrap} .scale .work.lg{flex:1 1 100%} .scale .work.sm{flex:1 1 28%} .scale.paper .work{flex:1 1 40%} .wall{columns:2 150px} .project .pix{flex-wrap:wrap} .project .pix .work,.project .pix.one .work{flex:1 1 100%} .cv .row{grid-template-columns:1fr;gap:4px} } /* A work reached by address (#w-...) is marked on the wall, then the mark fades */ .work:target{outline:2px solid transparent;outline-offset:6px;animation:mark 6s ease-out 1} @keyframes mark{0%,60%{outline-color:var(--sun)}100%{outline-color:transparent}} @media (prefers-reduced-motion:reduce){.work:target{animation:none;outline-color:var(--sun)}} /* Feed fallback when Instagram cannot be reached */ .feed-row:empty{display:none} /* Not found */ .nf{min-height:70vh;display:grid;align-content:center;gap:24px;padding-block:clamp(48px,10vw,140px)} .nf h1{font-size:clamp(3rem,11vw,9rem);line-height:.86;letter-spacing:-.05em} .nf p{max-width:46ch;color:var(--ink-2)} .nf a{color:var(--sun-ink);text-underline-offset:4px}