:root { --ink:#08111f; --night:#050b15; --night2:#0c1c2d; --ice:#9deaff; --blue:#0872c5; --paper:#eff4f7; --body:"Avenir Next","Futura","Noto Sans SC Variable","PingFang SC",sans-serif; --display:"Bodoni 72","Iowan Old Style","Noto Sans SC Variable","Songti SC",serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:74px; } body { min-width:320px; margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); line-height:1.65; } img { display:block; max-width:100%; } a { color:inherit; } button,a { font:inherit; } button { cursor:pointer; } .artist-shell { width:min(1320px,calc(100% - 48px)); margin-inline:auto; }
.skip-link { position:fixed; z-index:200; top:8px; left:8px; padding:8px 12px; color:#fff; background:var(--ink); transform:translateY(-150%); } .skip-link:focus { transform:none; }
.artist-header { position:sticky; z-index:100; top:0; min-height:68px; color:#203244; background:rgba(255,255,255,.96); border-bottom:1px solid #d5e0e7; box-shadow:0 8px 24px rgba(4,24,42,.08); backdrop-filter:blur(16px); } .artist-header__inner { min-height:68px; display:flex; align-items:center; gap:24px; } .artist-brand { width:168px; height:48px; display:inline-flex; flex:0 0 auto; align-items:center; } .artist-brand img { width:100%; height:100%; object-fit:contain; object-position:left center; filter:invert(25%) sepia(48%) saturate(1114%) hue-rotate(169deg) brightness(86%); } .artist-nav { align-self:stretch; display:flex; margin-right:auto; } .artist-nav a { min-width:104px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px; color:#526372; text-decoration:none; font-size:12px; font-weight:900; } .artist-nav a[aria-current="page"],.artist-nav a:hover { color:var(--blue); border-bottom:3px solid var(--blue); } .artist-language { display:grid; grid-template-columns:repeat(3,36px); border:1px solid #a9bbc8; } .artist-language button { height:34px; padding:0; border:0; border-right:1px solid #a9bbc8; color:#526372; background:#fff; font-size:10px; font-weight:900; } .artist-language button:last-child { border:0; } .artist-language button[aria-pressed="true"] { color:#fff; background:var(--blue); }
.artist-hero { min-height:600px; position:relative; overflow:hidden; color:#fff; background:var(--night); } .artist-hero__art,.artist-hero__beam { position:absolute; inset:0; } .artist-hero__art { background:url("../assets/fracture-wide.jpg") center/cover no-repeat; opacity:.7; filter:saturate(1.08) contrast(1.08); } .artist-hero__beam { width:44vw; right:auto; left:31%; background:rgba(160,232,255,.14); transform:skewX(-22deg); mix-blend-mode:screen; animation:beam 8s ease-in-out infinite; } .artist-hero::after { position:absolute; inset:0; content:""; background:rgba(3,10,20,.64); box-shadow:inset 0 -260px 170px rgba(3,10,20,.9),inset 70vw 0 180px rgba(3,10,20,.65); } @keyframes beam { 50% { transform:translateX(17vw) skewX(-22deg); opacity:.15; } } .artist-hero__inner { min-height:600px; position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; } .artist-hero__copy { max-width:780px; padding:90px 0 70px; } .artist-kicker { display:block; color:var(--ice); font-size:11px; font-weight:900; letter-spacing:.08em; } .artist-kicker--blue { color:var(--blue); } .artist-hero h1 { margin:18px 0 22px; font-family:var(--display); font-size:clamp(58px,8vw,112px); line-height:.92; } .artist-hero p { max-width:650px; margin:0; color:#d4e1e9; font-size:17px; line-height:1.8; } .artist-button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; margin-top:34px; padding:10px 18px; border:1px solid #fff; border-radius:2px; color:var(--night); background:#fff; text-decoration:none; font-size:12px; font-weight:900; } .artist-button:hover { color:#fff; background:var(--blue); border-color:var(--blue); } .artist-hero__index { align-self:flex-end; padding-bottom:54px; color:#b5d2e2; text-align:right; } .artist-hero__index strong,.artist-hero__index span { display:block; } .artist-hero__index strong { color:#fff; font-family:var(--display); font-size:76px; line-height:.9; } .artist-hero__index span { margin-top:14px; font-size:10px; font-weight:900; letter-spacing:.16em; }
.artist-roster { padding:94px 0 108px; } .artist-section-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,490px); gap:70px; align-items:end; margin-bottom:36px; } .artist-section-head h2 { margin:8px 0 0; font-family:var(--display); font-size:clamp(42px,5vw,68px); line-height:1; } .artist-section-head p { margin:0; color:#536472; font-size:15px; } .artist-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; } .artist-card { min-width:0; overflow:hidden; color:#fff; background:var(--night2); box-shadow:0 14px 30px rgba(5,20,34,.12); } .artist-card:nth-child(-n+2) { grid-column:span 6; } .artist-card:nth-child(n+3) { grid-column:span 4; } .artist-card__media { min-height:320px; display:grid; grid-template-columns:1fr 1fr; background:#102537; } .artist-card figure { min-width:0; position:relative; overflow:hidden; margin:0; } .artist-card figure img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; } .artist-card:hover figure img { transform:scale(1.035); } .artist-portrait::after,.artist-work::after { position:absolute; inset:0; content:""; pointer-events:none; } .artist-portrait::after { background:rgba(4,13,24,.15); } .artist-work::after { background:linear-gradient(180deg,transparent 50%,rgba(4,13,24,.68)); } .artist-card figcaption { position:absolute; z-index:1; right:13px; bottom:11px; left:13px; color:#fff; font-size:10px; font-weight:900; line-height:1.25; text-shadow:0 1px 4px #000; } .artist-portrait figcaption { text-transform:uppercase; letter-spacing:.06em; } .artist-portrait--unavailable { display:grid; place-items:center; background:#19374d; } .artist-portrait--unavailable::after { background:repeating-linear-gradient(-45deg,rgba(157,234,255,.09) 0 1px,transparent 1px 14px); } .artist-portrait__monogram { width:96px; height:96px; z-index:1; display:grid; place-items:center; border:1px solid rgba(157,234,255,.72); color:var(--ice); font-family:var(--display); font-size:38px; } .artist-portrait--unavailable figcaption { color:#d5e8f1; text-transform:none; letter-spacing:0; text-shadow:none; } .artist-card__body { min-height:188px; position:relative; padding:30px 32px 28px; background:var(--night2); } .artist-card__number { color:var(--ice); font-size:11px; font-weight:900; letter-spacing:.08em; } .artist-card h3 { max-width:calc(100% - 154px); margin:7px 0 9px; font-family:var(--display); font-size:34px; line-height:1; } .artist-card h3 small { color:var(--ice); font-family:var(--body); font-size:12px; font-weight:800; white-space:nowrap; } .artist-card__body p { max-width:78%; margin:0; color:#c5d3dc; font-size:13px; line-height:1.6; } .artist-detail-button { min-width:138px; position:absolute; right:28px; bottom:28px; padding:9px 11px; border:1px solid rgba(157,234,255,.74); border-radius:1px; color:var(--ice); background:transparent; font-size:11px; font-weight:900; text-align:left; } .artist-detail-button::after { content:" +"; float:right; margin-left:10px; font-size:16px; line-height:.8; } .artist-detail-button:hover,.artist-detail-button:focus-visible { color:var(--night); background:var(--ice); outline:0; }
.artist-sources { padding:24px 0; color:#647582; background:#e5edf1; } .artist-sources p { max-width:1080px; margin:0; font-size:11px; line-height:1.7; } .artist-footer { color:#c8d6df; background:#02060b; } .artist-footer__inner { min-height:120px; display:flex; align-items:start; justify-content:space-between; gap:24px; padding-block:30px; } .artist-footer strong,.artist-footer span,.artist-footer a { display:block; } .artist-footer strong { color:#fff; font-size:14px; } .artist-footer span,.artist-footer a { margin-top:4px; font-size:11px; } .artist-footer a { color:var(--ice); text-decoration:none; }
.artist-dialog { width:min(650px,calc(100% - 32px)); max-height:min(720px,calc(100% - 32px)); padding:0; border:1px solid #4b718b; color:#dbe9f0; background:var(--night); box-shadow:0 25px 80px rgba(0,0,0,.55); } .artist-dialog::backdrop { background:rgba(2,7,13,.78); backdrop-filter:blur(4px); } .artist-dialog__topline { min-height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid rgba(157,234,255,.25); color:var(--ice); font-size:10px; font-weight:900; letter-spacing:.08em; } .artist-dialog__close { width:32px; height:32px; padding:0; border:1px solid rgba(157,234,255,.5); color:var(--ice); background:transparent; font-size:12px; font-weight:900; } .artist-dialog__close:hover { color:var(--night); background:var(--ice); } .artist-dialog__content { padding:30px; } .artist-dialog h2 { margin:0; color:#fff; font-family:var(--display); font-size:45px; line-height:1; } .artist-dialog__event { margin:14px 0 22px; color:#bbd4e1; font-size:14px; } .artist-record { margin:0; border-top:1px solid rgba(157,234,255,.2); } .artist-record div { padding:14px 0; border-bottom:1px solid rgba(157,234,255,.2); } .artist-record dt { color:var(--ice); font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; } .artist-record dd { margin:3px 0 0; color:#e3edf2; font-size:14px; line-height:1.6; } .artist-dialog__links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:24px; } .artist-dialog__links a { min-height:52px; display:flex; align-items:center; padding:9px; border:1px solid rgba(157,234,255,.5); color:var(--ice); font-size:10px; font-weight:900; line-height:1.35; text-decoration:none; } .artist-dialog__links a:hover { color:var(--night); background:var(--ice); }
@media (max-width:900px) { .artist-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .artist-card:nth-child(-n+2),.artist-card:nth-child(n+3) { grid-column:span 1; } .artist-card__media { min-height:270px; } .artist-card__body { min-height:212px; padding-inline:24px; } .artist-card h3 { max-width:100%; font-size:31px; } .artist-card__body p { max-width:100%; padding-bottom:44px; } .artist-detail-button { right:24px; bottom:24px; } }
@media (max-width:700px) { .artist-shell { width:min(100% - 30px,1320px); } .artist-header__inner { min-height:62px; gap:14px; } .artist-brand { width:132px; height:40px; } .artist-nav { display:none; } .artist-language { margin-left:auto; } .artist-hero,.artist-hero__inner { min-height:570px; } .artist-hero__copy { padding-top:74px; } .artist-hero h1 { font-size:55px; } .artist-hero p { font-size:16px; } .artist-hero__index { padding-bottom:32px; } .artist-section-head { grid-template-columns:1fr; gap:22px; } .artist-roster { padding:68px 0 76px; } .artist-grid { grid-template-columns:1fr; gap:14px; } .artist-card__media { min-height:290px; } .artist-card__body { min-height:194px; } .artist-dialog__links { grid-template-columns:1fr; } }
@media (max-width:430px) { .artist-hero__art { background-position:58% center; } .artist-hero__inner { align-items:flex-end; } .artist-hero__copy { padding-bottom:74px; } .artist-hero h1 { margin-top:15px; font-size:48px; } .artist-hero p { font-size:15px; line-height:1.72; } .artist-hero__index { position:absolute; top:30px; right:0; padding:0; } .artist-hero__index strong { font-size:58px; } .artist-section-head h2 { font-size:42px; } .artist-card__media { min-height:230px; } .artist-card__body { min-height:220px; } .artist-card h3 { font-size:30px; } .artist-footer__inner { display:block; } .artist-footer a { margin-top:18px; } .artist-dialog__content { padding:24px 20px; } .artist-dialog h2 { font-size:38px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }