/* ============================================================ BEAUTY IS ART — brand stylesheet Palette and type follow the exhibition identity exactly. ============================================================ */ /* ---------- Fonts ---------- Drop the licensed webfont files into /assets/fonts/ and these rules pick them up automatically. Until then the browser falls back to the closest free faces loaded in the . */ @font-face { font-family: 'TAN Pearl'; src: url('../fonts/TAN-Pearl.woff2') format('woff2'), url('../fonts/TAN-Pearl.woff') format('woff'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Lovelace Text'; src: url('../fonts/LovelaceText-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Lovelace Text'; src: url('../fonts/LovelaceText-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Lovelace Text'; src: url('../fonts/LovelaceText-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Lovelace Text'; src: url('../fonts/LovelaceText-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } /* ---------- Tokens ---------- */ :root { --red: #750608; --cream: #FFF9EF; --grey: #F1F1F1; --blue: #74A5BE; --ink: #1A1A1A; --ink-60: rgba(26, 26, 26, .62); --ink-30: rgba(26, 26, 26, .30); --hairline: rgba(26, 26, 26, .14); --display: 'TAN Pearl', 'Playfair Display', Georgia, serif; --body: 'Lovelace Text', 'EB Garamond', Georgia, serif; --gutter: clamp(20px, 5vw, 72px); --measure: 62ch; --header-h: 76px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--grey); color: var(--ink); font-family: var(--body); font-size: clamp(17px, 1.15vw, 19px); line-height: 1.62; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; font-weight: 400; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } .skip-link { position: absolute; left: -9999px; background: var(--red); color: var(--cream); padding: 12px 20px; z-index: 999; } .skip-link:focus { left: 12px; top: 12px; } /* ---------- Type roles ---------- */ .display { font-family: var(--display); text-transform: uppercase; line-height: .92; color: var(--red); letter-spacing: 0; } .eyebrow { font-family: var(--body); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--red); margin: 0 0 1.4rem; } .lede { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.5; max-width: 46ch; } .pull { font-style: italic; font-weight: 700; color: var(--red); } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(72px, 9vw, 140px); } .section--tight { padding-block: clamp(48px, 6vw, 88px); } .section--cream { background: var(--cream); } .section-head { margin-bottom: clamp(36px, 4vw, 60px); } .section-head .display { font-size: clamp(38px, 5.4vw, 76px); } .section-head p { margin-top: 1.1rem; max-width: var(--measure); color: var(--ink-60); } .rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; } /* ---------- Header ---------- */ .header { position: sticky; top: 0; z-index: 100; background: rgba(241, 241, 241, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); } .header__inner { height: var(--header-h); display: flex; align-items: center; gap: 28px; } .header__logo img { height: 30px; width: auto; } .header__nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); } .header__nav a { text-decoration: none; font-size: .95rem; padding-block: 6px; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; white-space: nowrap; } .header__nav a:hover { border-bottom-color: var(--red); color: var(--red); } .header__nav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); } .header__toggle { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; font-family: var(--body); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); padding: 10px 2px; } @media (max-width: 940px) { .header__toggle { display: block; } .header__nav { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--cream); border-bottom: 0 solid var(--hairline); flex-direction: column; align-items: flex-start; gap: 0; padding: 0 var(--gutter); max-height: 0; overflow: hidden; transition: max-height .32s ease, padding .32s ease; } .header__nav[data-open="true"] { max-height: 80vh; overflow-y: auto; padding: 10px var(--gutter) 26px; border-bottom-width: 1px; } .header__nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 1.15rem; } .header__nav .btn { margin-top: 18px; width: 100%; text-align: center; } } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--body); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 15px 30px; border: 1px solid var(--red); background: var(--red); color: var(--cream); transition: background .22s, color .22s; cursor: pointer; } .btn:hover { background: transparent; color: var(--red); } .btn--ghost { background: transparent; color: var(--red); } .btn--ghost:hover { background: var(--red); color: var(--cream); } .btn--onred { background: var(--cream); border-color: var(--cream); color: var(--red); } .btn--onred:hover { background: transparent; color: var(--cream); } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; padding-block: clamp(60px, 8vw, 120px); overflow: hidden; } .hero__inner { position: relative; z-index: 2; width: 100%; } .hero .display { font-size: clamp(52px, 12vw, 168px); } .hero__sub { font-size: clamp(19px, 2vw, 28px); font-style: italic; line-height: 1.28; max-width: 24ch; margin-top: clamp(20px, 2.4vw, 34px); } .hero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .hero__meta span { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; border: 1px solid var(--hairline); padding: 9px 16px; } .hero__scroll { position: absolute; left: var(--gutter); bottom: 34px; z-index: 2; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-60); } .hero__scroll::after { content: ""; display: block; width: 1px; height: 34px; background: var(--ink-30); margin-top: 12px; } /* Oversized ghost wordmark behind the hero — the identity's signature device, carried over from the printed carousels. */ .hero__ghost { position: absolute; z-index: 1; right: -12vw; bottom: -10vw; font-family: var(--display); font-size: clamp(220px, 42vw, 620px); line-height: .8; color: #fff; pointer-events: none; user-select: none; } /* ---------- Page header (inner pages) ---------- */ .page-head { padding-block: clamp(64px, 8vw, 120px) clamp(36px, 4vw, 64px); position: relative; overflow: hidden; } .page-head .display { font-size: clamp(44px, 8vw, 108px); } .page-head p { margin-top: 1.2rem; max-width: var(--measure); font-size: 1.1rem; } .page-head__status { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red); margin-bottom: 1.2rem; } /* ---------- Cream card on colour bleed ---------- The core carousel device, translated to the page. */ .bleed { background: var(--blue); padding: clamp(40px, 5vw, 84px) 0 clamp(52px, 6vw, 96px); } .bleed--red { background: var(--red); } .card { background: var(--cream); padding: clamp(32px, 4vw, 62px); box-shadow: 6px 12px 34px rgba(0, 0, 0, .16); position: relative; } .card__num { font-size: 1.4rem; color: var(--ink-60); margin-bottom: 1.6rem; } .card .display { font-size: clamp(34px, 4.4vw, 62px); } .card__body { margin-top: clamp(26px, 3vw, 44px); max-width: 54ch; } .card__body strong { font-weight: 700; } .bleed__foot { text-align: center; margin-top: clamp(30px, 3.4vw, 52px); } .bleed__foot img { height: 26px; margin-inline: auto; } .bleed--red .bleed__foot img { filter: invert(1) brightness(2); } /* ---------- Grids ---------- */ .grid { display: grid; gap: clamp(18px, 2vw, 30px); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* ---------- Tile (goals, disciplines, editions) ---------- */ .tile { background: var(--cream); padding: clamp(26px, 3vw, 42px); border: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 14px; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; } a.tile:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.10); } .tile .tile__label { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red); } .tile .tile__title { font-family: var(--display); text-transform: uppercase; font-size: clamp(24px, 2.6vw, 36px); color: var(--red); line-height: .96; } .tile .tile__title--ink { color: var(--ink); } .tile p { color: var(--ink-60); font-size: 1rem; } .tile .tile__more { margin-top: auto; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--red); } /* ---------- Figures / stats ---------- */ .figures { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); } .figures div { padding: clamp(26px, 3vw, 44px) 0; border-bottom: 1px solid var(--hairline); } .figures div + div { border-left: 1px solid var(--hairline); padding-left: clamp(18px, 2.4vw, 40px); } .figures b { display: block; font-family: var(--display); font-size: clamp(38px, 5.5vw, 76px); color: var(--red); font-weight: 400; line-height: 1; } .figures span { display: block; margin-top: 10px; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-60); } @media (max-width: 640px) { .figures { grid-template-columns: 1fr; } .figures div + div { border-left: 0; padding-left: 0; } } /* ---------- Countdown ---------- */ .countdown { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 46px); align-items: flex-end; } .countdown div { text-align: left; } .countdown b { display: block; font-family: var(--display); font-size: clamp(42px, 6vw, 84px); color: var(--red); font-weight: 400; line-height: 1; } .countdown span { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-60); } .countdown__closed { font-style: italic; font-size: 1.3rem; color: var(--red); } /* ---------- Lists ---------- */ .list { list-style: none; margin: 0; padding: 0; } .list li { padding: 18px 0; border-bottom: 1px solid var(--hairline); display: flex; gap: 18px; align-items: baseline; } .list li::before { content: "◈"; color: var(--red); font-size: .8rem; flex: none; } .list--plain li::before { content: ""; } .namelist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(24px, 4vw, 64px); } .namelist li { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--hairline); font-size: 1.08rem; } @media (max-width: 600px) { .namelist { columns: 1; } } /* ---------- Placeholder ---------- */ .placeholder { border: 1px dashed var(--ink-30); padding: clamp(40px, 6vw, 90px) var(--gutter); text-align: center; color: var(--ink-60); font-style: italic; } /* ---------- Logo strip ---------- */ .logostrip { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 60px); align-items: center; } .logostrip img { height: 42px; width: auto; opacity: .8; } /* ---------- Form ---------- */ .form { display: grid; gap: 22px; max-width: 640px; } .field label { display: block; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 8px; } .field input, .field textarea, .field select { width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink); background: var(--cream); border: 1px solid var(--hairline); padding: 14px 16px; } .field textarea { min-height: 150px; resize: vertical; } .checks { display: flex; flex-wrap: wrap; gap: 10px; } .checks label { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hairline); background: var(--cream); padding: 10px 16px; cursor: pointer; font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; } .checks input { accent-color: var(--red); } .form__note { font-size: .9rem; color: var(--ink-60); } /* ---------- Contact details ---------- */ .contactlist { list-style: none; margin: 0; padding: 0; } .contactlist li { padding: 16px 0; border-bottom: 1px solid var(--hairline); } .contactlist span { display: block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 6px; } .contactlist a { text-decoration: none; border-bottom: 1px solid var(--red); } /* ---------- CTA band ---------- */ .cta { background: var(--red); color: var(--cream); padding-block: clamp(64px, 8vw, 118px); text-align: center; } .cta h2 { font-family: var(--display); text-transform: uppercase; color: var(--cream); font-size: clamp(32px, 5vw, 72px); line-height: .96; max-width: 18ch; margin-inline: auto; } .cta p { margin: 1.5rem auto 0; max-width: 40ch; font-style: italic; font-size: 1.15rem; opacity: .9; } .cta .btn-row { justify-content: center; } /* ---------- Footer ---------- */ .footer { background: var(--cream); border-top: 1px solid var(--hairline); padding-block: clamp(48px, 6vw, 82px) 34px; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 4vw, 60px); } @media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr; } } .footer__logo img { height: 34px; margin-bottom: 18px; } .footer h3 { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 16px; } .footer ul { list-style: none; margin: 0; padding: 0; } .footer li { padding: 6px 0; } .footer a { text-decoration: none; } .footer a:hover { color: var(--red); } .footer__base { margin-top: clamp(36px, 4vw, 60px); padding-top: 22px; border-top: 1px solid var(--hairline); font-size: .84rem; color: var(--ink-60); display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; } /* ---------- Scroll reveal ---------- */ /* Reveal only runs when JavaScript is available, so a script failure can never leave the page blank. */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; } .js [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal] { opacity: 1; transform: none; transition: none; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ============================================================ 3D objects The identity's signature. Every object is cropped by an edge of its container, never floating fully inside it, and always sits opposite the text it shares a band with. ============================================================ */ .obj { position: absolute; z-index: 1; pointer-events: none; user-select: none; } .hero .obj--hero { right: -6%; top: 50%; transform: translateY(-50%); width: clamp(340px, 46vw, 720px); } .page-head .obj--head { right: -4%; bottom: -22%; width: clamp(220px, 28vw, 430px); } .page-head .obj--head-left { left: -6%; right: auto; top: -18%; bottom: auto; width: clamp(200px, 24vw, 360px); } .section, .bleed { position: relative; overflow: hidden; } .section > .wrap, .bleed > .wrap { position: relative; z-index: 2; } .obj--corner-right { right: -5%; bottom: -12%; width: clamp(180px, 24vw, 380px); } .obj--corner-left { left: -6%; top: -10%; width: clamp(180px, 24vw, 360px); } .cta { position: relative; overflow: hidden; } .cta .obj--cta { left: 50%; bottom: -34%; transform: translateX(-50%); width: clamp(300px, 40vw, 620px); opacity: .5; filter: brightness(1.7) contrast(.85); } /* On the small screen the objects turn into quiet atmosphere so they never fight the text for the little space there is. */ @media (max-width: 760px) { .obj { opacity: .42; } .hero .obj--hero { width: 78vw; right: -22%; } .obj--corner-right, .obj--corner-left, .page-head .obj--head { width: 52vw; } } /* Ambient drift, disabled for anyone who asked for less motion. */ @media (prefers-reduced-motion: no-preference) { .obj--float { animation: drift 16s ease-in-out infinite alternate; } @keyframes drift { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-22px) rotate(1.6deg); } } .hero .obj--hero.obj--float { animation-name: drift-centered; } @keyframes drift-centered { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(calc(-50% - 22px)) rotate(1.6deg); } } } /* ============================================================ ARTISTS — mini cards (edition page) and profile pages ============================================================ */ /* ---------- Mini cards ---------- */ .artistgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.8vw, 28px); margin-bottom: clamp(34px, 4vw, 60px); } @media (max-width: 1000px) { .artistgrid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .artistgrid { grid-template-columns: repeat(2, 1fr); } } .artistcard { display: flex; flex-direction: column; background: var(--cream); border: 1px solid var(--hairline); text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; } .artistcard:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.12); } .artistcard__photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--grey); } .artistcard__body { padding: clamp(16px, 1.6vw, 24px); display: flex; flex-direction: column; gap: 6px; flex: 1; } .artistcard__cat { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red); margin: 0; } .artistcard__name { font-family: var(--display); text-transform: uppercase; font-size: clamp(17px, 1.5vw, 22px); line-height: 1; color: var(--ink); margin: 0; } .artistcard__place { font-size: .84rem; color: var(--ink-60); margin: 0; } .artistcard__more { margin-top: auto; padding-top: 12px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--red); } /* Empty photo slot — keeps the grid honest until the file lands. */ .photo--empty { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient( 45deg, rgba(26,26,26,.03) 0 10px, rgba(26,26,26,.06) 10px 20px); border-bottom: 1px solid var(--hairline); } .photo--empty span { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-30); } /* ---------- Profile hero ---------- */ .artisthero { position: relative; overflow: hidden; padding-block: clamp(44px, 5vw, 84px) clamp(40px, 5vw, 76px); } .artisthero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 68px); align-items: start; } @media (max-width: 860px) { .artisthero__inner { grid-template-columns: 1fr; } } .artisthero__photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 6px 12px 34px rgba(0,0,0,.16); } .artisthero__media .photo--empty { aspect-ratio: 3/4; border: 1px solid var(--hairline); } .artisthero__text { padding-top: clamp(0px, 2vw, 26px); } .artisthero__name { font-size: clamp(38px, 5.6vw, 76px); margin-bottom: clamp(24px, 3vw, 40px); } /* Ghost discipline watermark, as in the printed catalog. */ .ghosttitle { position: absolute; z-index: 1; left: -.42em; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--display); text-transform: uppercase; font-size: clamp(78px, 9.5vw, 150px); line-height: 1; color: rgba(26,26,26,.06); white-space: nowrap; pointer-events: none; user-select: none; } @media (max-width: 860px) { .ghosttitle { display: none; } } .metalist { list-style: none; margin: 0 0 clamp(24px,3vw,36px); padding: 0; } .metalist li { padding: 13px 0; border-bottom: 1px solid var(--hairline); font-size: 1.02rem; } .metalist li:first-child { border-top: 1px solid var(--hairline); } .metalist span { display: block; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 4px; } .metalist a { text-decoration: none; border-bottom: 1px solid var(--red); } .artistquote { margin: 0 0 clamp(22px,3vw,34px); padding-left: 20px; border-left: 2px solid var(--red); font-style: italic; font-size: 1.12rem; line-height: 1.5; color: var(--ink); } .artistqr { display: flex; align-items: center; gap: 18px; } .artistqr img { width: auto; height: 120px; max-width: 130px; object-fit: contain; } .artistqr p { margin: 0; max-width: 20ch; font-size: .68rem; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; color: var(--ink-60); } .artistqr--link .btn { margin: 0; } .artistbio p { max-width: var(--measure); } .artistbio--empty p { color: var(--ink-30); font-style: italic; } /* ---------- Works ---------- */ .worklist { display: grid; gap: clamp(40px, 5vw, 84px); } .work { margin: 0; display: grid; gap: clamp(18px, 2vw, 30px); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } .work:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .work:nth-child(even) .work__photo, .work:nth-child(even) .photo--empty { order: 2; } @media (max-width: 800px) { .work, .work:nth-child(even) { grid-template-columns: 1fr; } .work:nth-child(even) .work__photo, .work:nth-child(even) .photo--empty { order: 0; } } .work__photo { width: 100%; background: var(--grey); } .work .photo--empty { aspect-ratio: 4/3; border: 1px solid var(--hairline); } .work__title { font-family: var(--body); font-weight: 700; font-size: clamp(20px, 2vw, 27px); line-height: 1.2; margin-bottom: .7rem; } .work figcaption p { color: var(--ink-60); max-width: 44ch; } .artistnav { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: clamp(48px, 6vw, 84px); padding-top: 24px; border-top: 1px solid var(--hairline); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; } .artistnav a { text-decoration: none; color: var(--red); } .artistnav a:hover { border-bottom: 1px solid var(--red); } /* ============================================================ PRESS — media strip, articles, award ============================================================ */ .pressstrip { background: var(--cream); border: 1px solid var(--hairline); padding: clamp(24px, 3.4vw, 48px); text-align: center; } .pressstrip img { width: 100%; max-width: 880px; height: auto; margin-inline: auto; } .presslist { list-style: none; margin: 0; padding: 0; } .presslist li { border-bottom: 1px solid var(--hairline); } .presslist li:first-child { border-top: 1px solid var(--hairline); } .presslist a { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr) auto; gap: clamp(14px, 2.4vw, 40px); align-items: baseline; padding: clamp(18px, 2vw, 28px) 0; text-decoration: none; transition: color .2s; } .presslist a:hover { color: var(--red); } .presslist .presslist__outlet { font-family: var(--display); text-transform: uppercase; font-size: clamp(19px, 1.8vw, 26px); line-height: 1; color: var(--red); } .presslist .presslist__title { font-size: 1rem; color: var(--ink-60); } .presslist .presslist__go { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--red); white-space: nowrap; } @media (max-width: 720px) { .presslist a { grid-template-columns: 1fr; gap: 8px; } .presslist .presslist__go { justify-self: start; } } .awardblock { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(26px, 4vw, 64px); align-items: center; } @media (max-width: 800px) { .awardblock { grid-template-columns: 1fr; } } .awardblock img { width: 100%; max-width: 380px; box-shadow: 6px 12px 34px rgba(0,0,0,.18); } /* ---------- Partner logo ---------- */ .partnerlogo { height: 86px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 6px; } .figures--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 640px) { .figures--2 { grid-template-columns: 1fr; } } /* Работа без названия и описания — одна крупная фотография по центру. */ .work--solo, .work:nth-child(even).work--solo { grid-template-columns: 1fr; justify-items: center; } .work--solo .work__photo { max-width: 900px; } /* Одна работа из нескольких изображений — ряд фото, подпись под ним. */ .work--series, .work:nth-child(even).work--series { grid-template-columns: 1fr; } .work--series .work__series { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 22px); } .work--series .work__series .work__photo, .work--series .work__series .photo--empty { aspect-ratio: 4 / 5; object-fit: cover; } .work--series figcaption { max-width: 62ch; } .work--series figcaption p { max-width: none; } @media (max-width: 700px) { .work--series .work__series { grid-template-columns: 1fr; } } /* ---------- Награды: текст + фото наградных статуэток ---------- */ .awardcard { max-width: none; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; } @media (max-width: 800px) { .awardcard { grid-template-columns: 1fr; } } .awardcard img { width: 100%; box-shadow: 4px 8px 24px rgba(0,0,0,.16); }