:root{ --bg:#fafaf8; --panel:#ffffff; --ink:#1c1c1a; --muted:#8a8a85; --line:#e6e6e1; --accent:#3f3f3b; --accent-faint:rgba(63,63,59,.10); --sage:#9aa39b; --shadow:0 1px 2px rgba(28,28,26,.04), 0 8px 24px rgba(28,28,26,.06); } /* dark mode overrides via [data-theme=dark] on */ html[data-theme=dark]{ --bg:#0f0f0e; --panel:#171715; --ink:#eaeae4; --muted:#8f8f88; --line:#2a2a27; --accent:#d8d8d0; --accent-faint:rgba(216,216,208,.12); --sage:#7f8a82; --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45); } html[data-theme=dark] body{background:var(--bg)} html[data-theme=dark] .ph-item img, html[data-theme=dark] .ex-card .cover, html[data-theme=dark] .tl-thumb, html[data-theme=dark] .photo-stage img{background:#22221f} html[data-theme=dark] .cover-placeholder{background:#1c1c19;color:var(--muted)} /* dark-mode theme toggle */ .theme-toggle{ background:none;border:none;color:var(--muted);cursor:pointer; font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:0 6px; display:inline-flex;align-items:center;justify-content:center;line-height:0; } .theme-toggle:hover{color:var(--ink)} .theme-toggle svg{display:block;vertical-align:middle} .theme-toggle:focus-visible{outline:none} /* inverted: dark shows SUN, light shows MOON */ html[data-theme=dark] .theme-toggle .ic-moon, html[data-theme=light] .theme-toggle .ic-sun{display:none} /* ---------- hamburger menu ---------- */ .hamburger-wrap{position:relative;display:inline-flex;margin-left:6px} .hamburger{ display:inline-flex;flex-direction:column;justify-content:center;gap:4px; background:none;border:none;cursor:pointer;padding:8px 6px;color:var(--muted); } .hamburger span{display:block;width:18px;height:2px;background:currentColor;transition:transform .25s ease,opacity .25s ease} .hamburger:hover{color:var(--ink)} .hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .hamburger-menu{ position:absolute;top:calc(100% + 10px);right:0;min-width:200px; background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow); padding:8px 0;display:flex;flex-direction:column;z-index:60; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .25s ease,transform .25s ease,visibility .25s; } .hamburger-menu.show{opacity:1;visibility:visible;transform:translateY(0)} .hamburger-menu a{ padding:10px 18px;text-transform:none;letter-spacing:.03em;color:var(--ink);font-size:14px; } .hamburger-menu a:hover{background:var(--bg);color:var(--accent)} .hamburger-menu .hm-sep{height:1px;background:var(--line);margin:6px 12px} .hamburger-menu .hm-foot{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 18px 2px} /* ---------- artist nav dropdown ---------- */ .artist-nav{position:relative;display:inline-flex} .artist-nav-btn{ background:none;border:none;color:var(--muted);cursor:pointer; font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:0;line-height:1; } .artist-nav-btn:hover{color:var(--ink)} .artist-nav-menu{ position:absolute;top:calc(100% + 10px);left:0;min-width:170px; background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow); padding:8px 0;display:flex;flex-direction:column;z-index:60; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .25s ease,transform .25s ease,visibility .25s; } .artist-nav-menu.show{opacity:1;visibility:visible;transform:translateY(0)} .artist-nav-menu a{ padding:10px 18px;text-transform:none;letter-spacing:.03em;color:var(--ink);font-size:14px; } .artist-nav-menu a:hover{background:var(--bg);color:var(--accent)} .artist-nav-menu a.active{color:var(--accent)} *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--ink); font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; -webkit-font-smoothing:antialiased; font-size:16px;line-height:1.55; } .wrap{max-width:1240px;margin:0 auto;padding:32px 40px} a{color:inherit;text-decoration:none} /* ---------- header ---------- */ .site-head{ display:flex;align-items:baseline;justify-content:space-between; flex-wrap:wrap;gap:16px; padding:34px 0 28px;border-bottom:1px solid var(--line); } .brand{font-size:21px;letter-spacing:.24em;font-weight:500;text-transform:uppercase;color:var(--ink)} .tagline{color:var(--muted);letter-spacing:.1em;font-size:12px;text-transform:uppercase;margin-top:6px} .nav{display:flex;gap:28px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);align-items:center} .nav a{position:relative;line-height:1} .nav a:hover,.nav a.active{color:var(--ink)} .nav a.active::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:var(--ink)} /* ---------- type ---------- */ h1,h2,h3{font-weight:400;letter-spacing:.02em;margin:0 0 12px} h1{font-size:clamp(30px,4vw,44px)} h2{font-size:26px} h3{font-size:20px} .lede{color:var(--muted);font-size:15px;max-width:60ch} .eyebrow{color:var(--muted);font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px} .section{margin:72px 0} .section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px;border-bottom:1px solid var(--line);padding-bottom:14px} /* ---------- exhibition cards (home) ---------- */ .ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:32px} .ex-card{background:var(--panel);border:1px solid var(--line);padding:0;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease} .ex-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .ex-card .cover{position:relative;aspect-ratio:4/3;background:#ecece7;overflow:hidden} .ex-card .cover img{width:100%;height:100%;object-fit:cover;display:block} .cover-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);letter-spacing:.3em;font-size:13px;text-transform:uppercase} .ex-body{padding:22px 22px 20px} .ex-body h3{margin:0 0 6px} .ex-body p{color:var(--muted);font-size:14px;margin:0 0 14px;min-height:1.2em} .count{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase} /* ---------- photo masonry ---------- */ .photo-grid{columns:3;column-gap:22px} @media(max-width:900px){.photo-grid{columns:2}} @media(max-width:560px){.photo-grid{columns:1}} .ph-item{break-inside:avoid;margin:0 0 22px;display:block;position:relative} .ph-item img{width:100%;height:auto;display:block;background:#ecece7;transition:opacity .3s;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} .ph-item figcaption{ position:absolute;left:0;right:0;bottom:0;padding:16px;color:#fff; background:linear-gradient(to top,rgba(20,20,18,.55),transparent); opacity:0;transition:opacity .3s;font-size:13px; } .ph-item:hover figcaption{opacity:1} /* ---------- single photo ---------- */ .photo-stage{background:var(--panel);border:1px solid var(--line);padding:28px;margin-bottom:32px} .photo-stage img{width:100%;height:auto;display:block;background:#f0f0eb} .photo-meta{max-width:72ch} .photo-meta h1{margin-top:8px} .photo-meta .date{color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase} .photo-meta .caption{color:#555;font-size:15px;margin-top:14px;white-space:pre-line} /* ---------- timeline ---------- */ .tl{position:relative;padding-left:34px;margin-left:6px} .tl::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:1px;background:var(--line)} .tl-year{position:relative;margin:44px 0 22px;font-size:22px;letter-spacing:.12em;color:var(--accent)} .tl-year::before{content:"";position:absolute;left:-34px;top:50%;transform:translateY(-50%);width:17px;height:17px;border-radius:50%;background:var(--bg);border:1px solid var(--line);box-shadow:0 0 0 5px var(--bg)} .tl-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-bottom:8px} .tl-thumb{position:relative;background:#ecece7;overflow:hidden} .tl-thumb img{width:100%;height:auto;display:block} .tl-thumb .tl-date{position:absolute;left:0;bottom:0;padding:8px 12px;color:#fff;background:rgba(20,20,18,.5);font-size:12px;letter-spacing:.06em;text-transform:uppercase} .tl-year-head{font-size:clamp(26px,3.4vw,36px);margin:72px 0 8px} .tl-year-head span{color:var(--muted);font-size:14px;letter-spacing:.1em;margin-left:10px} /* ---------- footer ---------- */ footer{border-top:1px solid var(--line);margin-top:88px;padding:28px 0 44px;text-align:center;color:var(--muted);font-size:13px;letter-spacing:.06em} /* ---------- admin ---------- */ .admin{max-width:1080px} .card{background:var(--panel);border:1px solid var(--line);padding:24px;margin-bottom:26px;box-shadow:var(--shadow)} .card h3{margin-top:0} .card h3 small{color:var(--muted);font-weight:400;letter-spacing:.05em} input[type=text],input[type=password],input[type=date],input[type=number],textarea{ width:100%;padding:11px 13px;border:1px solid var(--line);background:var(--panel); font-size:14px;color:var(--ink);margin:4px 0 14px;border-radius:0; } input:focus,textarea:focus{outline:none;border-color:var(--accent)} label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block} .btn{ display:inline-block;background:var(--ink);color:var(--bg);border:none;padding:12px 22px; font-size:13px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border-radius:0; } .btn:hover{background:var(--accent)} .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)} .btn.ghost:hover{border-color:var(--ink)} .btn.danger{background:#b5482f}.btn.danger:hover{background:#93391f} /* timeline controls: readable in both light + dark themes */ .tl-controls .btn{background:var(--accent);color:var(--bg)} .tl-controls .btn:hover{background:var(--ink);color:var(--bg)} .row{display:flex;gap:18px;flex-wrap:wrap} .col{flex:1;min-width:220px} .admin-items{list-style:none;margin:0;padding:0} .admin-items li{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);padding:12px 0} .admin-items li:first-child{border-top:none} .admin-items img{width:64px;height:56px;object-fit:cover;background:#ecece7} .admin-items .meta{flex:1} .admin-items .meta strong{display:block;font-size:14px} .admin-items .meta span{color:var(--muted);font-size:12px} .admin-item.is-cover{background:var(--accent-faint)}.admin-item.is-cover{border-left:3px solid var(--accent);padding-left:13px} .b-cover.is-cover{color:var(--accent);border-color:var(--accent)} .b-cover.is-cover:hover{background:var(--accent-faint);border-color:var(--accent)} .login-box{max-width:380px;margin:9vh auto;background:var(--panel);border:1px solid var(--line);padding:40px;box-shadow:var(--shadow)} .login-box h1{font-size:20px;text-align:center;letter-spacing:.1em} .login-box .err{color:#b5482f;font-size:13px;text-align:center;margin-top:10px} .upload-drop{border:2px dashed var(--line);padding:36px;text-align:center;color:var(--muted);cursor:pointer;transition:border-color .2s,background .2s} .upload-drop.drag{border-color:var(--accent);background:#f4f4f0} .upload-drop small{display:block;margin-top:8px} .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 24px;font-size:14px;letter-spacing:.04em;z-index:50;box-shadow:var(--shadow)} /* ---------- FAQ / legal ---------- */ .faq-q{font-size:19px;font-weight:500;margin:34px 0 6px} .faq-a{color:var(--muted);max-width:72ch;margin:0 0 4px;line-height:1.7} .faq-a strong{color:var(--ink)} .legal-list{color:var(--muted);line-height:1.85;max-width:76ch;padding-left:20px} .legal-list strong{color:var(--ink)} :root .photo-stage img, :root .tl-thumb img, :root .tl-stage img, :root .ex-card .cover img, :root .lightbox-stage img{ -webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none; } /* ---------- lightbox ---------- */ body.lb-open{overflow:hidden} .lightbox{ position:fixed;inset:0;z-index:100;background:rgba(8,8,6,.92); display:flex;align-items:center;justify-content:center;flex-direction:column; padding:24px; } .lightbox[hidden]{display:none} .lightbox-stage{max-width:92vw;max-height:82vh;display:flex;flex-direction:column;align-items:center;justify-content:center} .lightbox-stage img{max-width:92vw;max-height:78vh;object-fit:contain;box-shadow:var(--shadow);background:transparent} #lightbox-caption{ margin-top:14px;color:#eaeae4;font-size:14px;letter-spacing:.04em;text-align:center;max-width:80vw; } .lightbox-counter{color:#9a9a94;font-size:12px;letter-spacing:.15em;margin-top:6px} .lightbox-close{ position:absolute;top:18px;right:22px;background:none;border:none;color:#cfcfc8; font-size:26px;cursor:pointer;line-height:1; } .lightbox-close:hover{color:#fff} .lightbox-nav{ position:absolute;top:50%;transform:translateY(-50%);background:none;border:none; color:#cfcfc8;font-size:48px;cursor:pointer;padding:10px 16px;line-height:1;z-index:101; } .lightbox-nav:hover{color:#fff} .lightbox-nav.prev{left:14px} .lightbox-nav.next{right:14px} @media(max-width:640px){.lightbox-nav{font-size:36px}.lightbox-close{font-size:22px}} /* ---------- timeline (horizontal scrubber) ---------- */ .tl-stage{ height:min(60vh,560px);background:var(--panel);border:1px solid var(--line); margin-bottom:20px;display:flex;align-items:center;justify-content:center; position:relative;overflow:hidden;box-shadow:var(--shadow); } .tl-stage img{max-width:100%;max-height:100%;width:auto;height:auto;display:block} .tl-stage-empty{ color:var(--muted);text-align:center;font-size:14px;letter-spacing:.06em;line-height:1.9; } .tl-stage-empty span{display:block;font-size:12px} .tl-caption{ position:absolute;left:0;right:0;bottom:0;padding:18px;color:#fff;font-size:14px;letter-spacing:.04em; background:linear-gradient(to top,rgba(15,15,12,.72),transparent); } .tl-controls{ display:flex;align-items:center;gap:14px;margin:18px 0 10px;flex-wrap:wrap; } .tl-position{color:var(--muted);font-size:12px;letter-spacing:.15em} .tl-track{position:relative;height:64px;margin:10px 0 0} .tl-track-line{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line);transform:translateY(-50%)} .tl-progress{ position:absolute;left:0;top:50%;transform:translateY(-50%);height:2px;width:0%; background:var(--accent);transition:width .45s ease; } .tl-dots{position:relative;width:100%;height:64px} .tl-dot{ position:absolute;top:50%;transform:translate(-50%,-50%); width:16px;height:16px;border-radius:50%;background:var(--panel); border:2px solid var(--accent);cursor:pointer;padding:0;transition:transform .15s ease,background .15s ease; z-index:2; } .tl-dot:hover{transform:translate(-50%,-50%) scale(1.35);background:var(--accent)} .tl-dot.active{background:var(--accent);box-shadow:0 0 0 5px var(--sage)} .tl-year-label{ position:absolute;top:-2px;transform:translateX(-50%);font-size:12px;color:var(--muted); letter-spacing:.08em;white-space:nowrap;pointer-events:none; } /* dots colored faintly by proximity to a year is omitted; keep simple */ @media(max-width:640px){.tl-dot{width:14px;height:14px}.tl-year-label{font-size:11px}} /* ---------- voyage loader (home) ---------- */ .voyage-loader{ position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center; background:var(--bg);color:var(--accent); transition:opacity .7s ease; } .voyage-loader.done{opacity:0;pointer-events:none} .voyage-stage{position:relative;width:min(560px,94vw);height:150px} .ship-wrap{position:absolute;left:50%;top:0;width:min(440px,86vw);height:auto;margin-left:-50%} .ship-svg{width:100%;height:auto;display:block} .ship-wrap{animation:sail 2.6s cubic-bezier(.22,.61,.36,1) forwards} @keyframes sail{ 0%{transform:translateX(-150px)} 100%{transform:translateX(150px)} } .ship-svg{animation:ship-bob 2.6s ease-in-out} @keyframes ship-bob{ 0%,100%{transform:translateY(0) rotate(0deg)} 25%{transform:translateY(-3px) rotate(-.7deg)} 75%{transform:translateY(2px) rotate(.7deg)} } .sea-svg-wrap{position:absolute;bottom:6px;left:50%;width:min(480px,90vw);transform:translateX(-50%)} .sea-svg{width:100%;height:30px;display:block} .wave{stroke:var(--sage);stroke-width:1.5} .wave-a{animation:wave-drift 2s linear infinite} .wave-b{animation:wave-drift 2s linear infinite reverse} @keyframes wave-drift{to{transform:translateX(-40px)}} .voyage-word{ position:absolute;inset:auto 0 -4px 0;text-align:center;width:100%; font-size:15px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink); opacity:0;animation:word-in .9s ease forwards;animation-delay:2.35s; } @keyframes word-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ---------- artist selector (home) ---------- */ .artist-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .artist-card{ display:block;text-decoration:none;color:inherit; background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden; box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease; } .artist-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(28,28,26,.05),0 14px 36px rgba(28,28,26,.12)} .artist-cover{aspect-ratio:16/10;overflow:hidden} .artist-cover img{width:100%;height:100%;object-fit:cover;display:block} .artist-body{padding:16px 18px 18px} .artist-body h3{margin:0 0 6px;font-size:19px;letter-spacing:.02em} .artist-body p{margin:0;font-size:13px;color:var(--muted);letter-spacing:.02em} /* ---------- modal dialog (admin) ---------- */ .modal{position:fixed;inset:0;z-index:10000;display:none;align-items:flex-start;justify-content:center;padding:6vh 5vw} .modal.open{display:flex} .modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)} .modal-box{position:relative;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);max-width:480px;width:100%;border-radius:10px;z-index:2;max-height:80vh;display:flex;flex-direction:column} .modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)} .modal-head h3{margin:0;font-size:18px;letter-spacing:.02em} .modal-x{background:none;border:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px} .modal-x:hover{color:var(--ink)} .modal-body{padding:20px;overflow:auto} .dlg-msg{margin:0 0 12px;font-size:14px;color:var(--muted);line-height:1.5} .dlg-field{margin:0 0 6px} .dlg-field label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px} .dlg-field input,.dlg-field textarea,.dlg-field select{width:100%;padding:11px 13px;border:1px solid var(--line);background:var(--panel);font-size:14px;color:var(--ink);margin:4px 0 12px;box-sizing:border-box} .dlg-field input.invalid,.dlg-field textarea.invalid{border-color:#b5482f} .modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line)} .modal-foot .btn{margin:0} /* captions on exhibition grid + lightbox */ .ph-year,.ph-cap{display:inline;font-size:11px;letter-spacing:.05em;font-weight:400;color:var(--muted)} #lightbox-caption{letter-spacing:.02em} .lb-title{letter-spacing:.05em} .lb-cap{display:block;margin-top:6px;font-size:13px;color:var(--muted);font-weight:400}