/* ============================================================ FRANCK GÉRARD — franckgerard.art V42 — refonte complète de la feuille de styles. Un seul système. Monochrome absolu. Aucun !important. ============================================================ */ /* --- 1. Jetons ------------------------------------------- */ :root{ /* Valeurs dérivées, redéfinies par le thème sombre */ --body-text:#1c1c1c; --legal-text:#333333; --legal-text-soft:#444444; --veil:rgba(255,255,255,.82); --veil-solid:rgba(255,255,255,.94); --backdrop:rgba(255,255,255,.7); --dialog-shadow:0 40px 120px rgba(0,0,0,.18); /* Palette — six valeurs, aucune couleur d'accent. */ --paper:#ffffff; --ink:#0a0a0a; --graphite:#6e6e6e; --ash:#a3a3a3; --hairline:#e4e4e4; --wash:#f5f5f5; /* Familles — grotesque neutre + monospace utilitaire. */ --sans:"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Roboto Mono", monospace; /* Échelle typographique */ --t-display:clamp(2.4rem, 6.6vw, 6rem); --t-title:clamp(1.75rem, 3.2vw, 3.1rem); --t-lead:clamp(1.5rem, 2.5vw, 2.55rem); --t-body:clamp(1rem, .55vw + .82rem, 1.1rem); --t-label:.66rem; /* Trame */ --gutter:clamp(22px, 5vw, 76px); --measure:1320px; --index-col:clamp(104px, 11vw, 148px); --rhythm:clamp(96px, 12vw, 190px); --header-h:64px; /* Mouvement */ --ease:cubic-bezier(.16,1,.3,1); --slow:1.1s; } /* --- 1b. Thème sombre ------------------------------------ Activé par . Seuls les jetons sont redéfinis : la totalité des règles ci-dessous est partagée. */ html[data-theme="dark"]{ --paper:#0a0a0a; --ink:#f2f2f2; --graphite:#9a9a9a; --ash:#6b6b6b; --hairline:#282828; --wash:#131313; --body-text:#d8d8d8; --legal-text:#c4c4c4; --legal-text-soft:#a8a8a8; --veil:rgba(10,10,10,.82); --veil-solid:rgba(10,10,10,.94); --backdrop:rgba(0,0,0,.72); --dialog-shadow:0 0 0 1px #282828; } /* Le noir absolu creuse le gris typographique : on le compense. */ html[data-theme="dark"] body{ -webkit-font-smoothing:antialiased; font-weight:350; } /* L'œuvre est claire : sur fond noir elle est accrochée avec une marge, sans quoi elle recouvre l'en-tête. L'image quitte le flux absolu pour devenir un élément flex, afin que le padding du cadre la repousse réellement. */ html[data-theme="dark"] .hero-frame{ background:var(--paper); display:flex; align-items:center; justify-content:center; padding:calc(var(--header-h) + clamp(14px,2vw,30px)) clamp(30px,8vw,150px) clamp(38px,5vw,70px); } html[data-theme="dark"] .hero-image{ position:static; object-fit:contain; } @media (max-width: 760px){ /* En portrait, « contain » réduirait trop l'œuvre : cadrage plein, mais sous l'en-tête, qui conserve ainsi son fond noir. */ html[data-theme="dark"] .hero-frame{ padding:var(--header-h) 0 0; align-items:stretch; } html[data-theme="dark"] .hero-image{ object-fit:cover; width:100%; height:auto; align-self:stretch; } } /* --- 2. Base --------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 32px); -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:var(--t-body); line-height:1.72; letter-spacing:-.01em; font-synthesis:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden; } body.is-locked{overflow:hidden} a{color:inherit;text-decoration:none} img{display:block;max-width:100%;height:auto} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} h1,h2,h3,p,ul,ol,figure{margin:0} ul,ol{padding:0;list-style:none} strong{font-weight:600} ::selection{background:var(--ink);color:var(--paper)} :focus-visible{ outline:1px solid var(--ink); outline-offset:4px; } .visually-hidden{ position:absolute; width:1px;height:1px; margin:-1px;padding:0;border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap; } .skip-link{ position:fixed; top:-100px;left:var(--gutter); z-index:400; padding:12px 18px; background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:var(--t-label); letter-spacing:.18em; text-transform:uppercase; transition:top .3s var(--ease); } .skip-link:focus{top:16px} /* --- 3. Éléments typographiques récurrents --------------- */ .mono{ font-family:var(--mono); font-size:var(--t-label); font-weight:400; letter-spacing:.22em; text-transform:uppercase; font-variant-numeric:tabular-nums; } /* Lien à soulignement tracé */ .underline-link{ position:relative; display:inline-block; padding-bottom:2px; } .underline-link::after{ content:""; position:absolute; left:0;bottom:0; width:100%;height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .55s var(--ease); } .underline-link:hover::after, .underline-link:focus-visible::after{ transform:scaleX(1); transform-origin:left; } /* --- 4. En-tête ------------------------------------------ */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:200; height:var(--header-h); display:flex; align-items:center; gap:24px; padding:0 var(--gutter); transition:background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease); border-bottom:1px solid transparent; } .site-header.is-scrolled{ background:var(--veil); border-bottom-color:var(--hairline); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); } .site-header.is-hidden{transform:translateY(-100%)} .site-header.is-open{background:transparent;border-bottom-color:transparent;backdrop-filter:none} .brand{ display:flex; align-items:center; gap:12px; margin-right:auto; } .brand-square{ width:11px;height:11px; background:var(--ink); transition:transform .6s var(--ease); } .brand:hover .brand-square{transform:rotate(45deg)} .brand-name{ font-size:.9rem; font-weight:600; letter-spacing:.24em; line-height:1; white-space:nowrap; } .header-actions{display:flex;align-items:center;gap:20px} .language-switch{ display:flex; align-items:center; gap:6px; color:var(--ash); } .language-switch span{opacity:.5} .lang-option{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.16em; transition:color .3s var(--ease); } .lang-option[aria-pressed="true"]{color:var(--ink)} .lang-option:hover{color:var(--ink)} .menu-toggle{ width:34px;height:34px; display:grid; place-items:center; margin-right:-6px; } .menu-toggle span{ grid-area:1/1; width:20px;height:1px; background:var(--ink); transition:transform .5s var(--ease), opacity .3s var(--ease); } .menu-toggle span:nth-child(1){transform:translateY(-4px)} .menu-toggle span:nth-child(3){transform:translateY(4px)} .site-header.is-open .menu-toggle span:nth-child(1){transform:rotate(45deg)} .site-header.is-open .menu-toggle span:nth-child(2){opacity:0} .site-header.is-open .menu-toggle span:nth-child(3){transform:rotate(-45deg)} /* --- 5. Navigation plein écran --------------------------- */ .site-nav{ position:fixed; inset:0; z-index:150; display:flex; flex-direction:column; justify-content:center; padding:var(--header-h) var(--gutter) var(--gutter); background:var(--paper); opacity:0; visibility:hidden; transition:opacity .6s var(--ease), visibility .6s; } .site-nav.is-open{opacity:1;visibility:visible} .site-nav[hidden]{display:flex} .menu-list{ display:flex; flex-direction:column; gap:clamp(4px,1.4vw,14px); max-width:var(--measure); width:100%; margin:0 auto; } .menu-item{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .site-nav.is-open .menu-item{opacity:1;transform:none} .site-nav.is-open .menu-item:nth-child(1){transition-delay:.10s} .site-nav.is-open .menu-item:nth-child(2){transition-delay:.16s} .site-nav.is-open .menu-item:nth-child(3){transition-delay:.22s} .site-nav.is-open .menu-item:nth-child(4){transition-delay:.28s} .site-nav.is-open .menu-item:nth-child(5){transition-delay:.34s} .menu-link{ display:flex; align-items:baseline; gap:clamp(18px,4vw,52px); padding:clamp(8px,1.2vw,14px) 0; border-bottom:1px solid var(--hairline); font-size:var(--t-title); font-weight:500; letter-spacing:-.045em; line-height:1.14; text-wrap:balance; transition:padding-left .6s var(--ease), color .4s var(--ease); } .menu-link:hover, .menu-link:focus-visible{padding-left:clamp(10px,1.6vw,24px)} .menu-link .mono{color:var(--ash);flex:0 0 auto} .menu-foot{ max-width:var(--measure); width:100%; margin:clamp(40px,6vw,72px) auto 0; color:var(--graphite); } /* --- 6. Hero --------------------------------------------- */ .hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; } .hero-frame{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; background:var(--paper); } .hero-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 46%; filter:grayscale(1) contrast(1.02); transform:scale(1.05); opacity:0; transition:transform 1.8s var(--ease), opacity 1.4s var(--ease); } .is-ready .hero-image{transform:none;opacity:1} .image-shield{position:absolute;inset:0} /* Au-delà de 900px en paysage, l'œuvre est montrée entière plutôt que recadrée. */ @media (min-width: 900px) and (orientation: landscape){ .hero-image{object-fit:contain;object-position:center center} } /* Cartel — vocabulaire de mur d'exposition */ .hero-label{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px var(--gutter); border-top:1px solid var(--hairline); opacity:0; transform:translateY(10px); transition:opacity 1s var(--ease) .5s, transform 1s var(--ease) .5s; } .is-ready .hero-label{opacity:1;transform:none} .hero-label h1{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; font-size:var(--t-label); font-weight:400; } .hero-label h1 b{font-family:var(--mono);font-weight:400;letter-spacing:.22em} .hero-label h1 span{color:var(--graphite)} .hero-gallery{ display:flex; align-items:baseline; gap:8px; color:var(--graphite); white-space:nowrap; transition:color .3s var(--ease); } .hero-gallery:hover, .hero-gallery:focus-visible{color:var(--ink)} .hero-gallery i{font-style:normal} .scroll-cue{ display:flex; align-items:center; gap:12px; color:var(--ash); white-space:nowrap; } .scroll-cue i{ display:block; width:1px;height:20px; background:var(--ash); transform-origin:top; animation:drop 2.6s var(--ease) infinite; } @keyframes drop{ 0%,100%{transform:scaleY(.25)} 50%{transform:scaleY(1)} } /* --- 7. Sections ----------------------------------------- */ .section{ max-width:var(--measure); margin:0 auto; padding:var(--rhythm) var(--gutter); border-top:1px solid var(--hairline); display:grid; grid-template-columns:var(--index-col) minmax(0,1fr); column-gap:clamp(28px,4.5vw,72px); align-items:start; } .section-head{ position:sticky; top:calc(var(--header-h) + 40px); display:grid; gap:8px; align-content:start; } .section-hash{ color:var(--ash); font-family:var(--mono); font-size:var(--t-label); letter-spacing:.22em; font-variant-numeric:tabular-nums; } .section-name{ font-size:var(--t-label); font-weight:600; letter-spacing:.24em; text-transform:uppercase; line-height:1.7; text-wrap:balance; } .section-body{min-width:0} /* --- 8. Bio ---------------------------------------------- */ .about-body{ display:grid; grid-template-columns:minmax(0,1fr) clamp(150px,15vw,196px); column-gap:clamp(36px,4.5vw,68px); align-items:start; } .about-copy{max-width:62ch} .about-copy p{margin-bottom:1.55em;color:var(--body-text)} .about-copy p:last-child{margin-bottom:0} .about-lead{ font-size:var(--t-lead); line-height:1.24; letter-spacing:-.038em; font-weight:400; color:var(--ink); margin-bottom:1.4em; max-width:34ch; text-wrap:balance; } .about-lead strong{font-weight:600} .bio-portrait{position:relative} /* L'exergue passe à la première personne : il est détaché du corps biographique et occupe les deux colonnes. */ .statement{ grid-column:1 / -1; margin:clamp(56px,7vw,96px) 0 0; padding-top:clamp(26px,3vw,38px); border-top:1px solid var(--ink); } .statement p{ max-width:34ch; font-size:var(--t-lead); line-height:1.22; letter-spacing:-.038em; text-wrap:balance; } .bio-portrait img{ width:100%; filter:grayscale(1) contrast(1.03); } /* --- 8b. Aperçu de galerie ------------------------------- */ .teaser{display:block} .thumbs{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(10px,1.4vw,20px); } .thumb{ position:relative; display:block; overflow:hidden; background:var(--wash); aspect-ratio:3 / 4; } .thumb img{ width:100%; height:100%; display:block; object-fit:cover; transition:transform 1.4s var(--ease); } .teaser:hover .thumb img, .teaser:focus-visible .thumb img{transform:scale(1.04)} .teaser-line{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-top:20px; padding-bottom:14px; border-bottom:1px solid var(--ink); } .teaser-label{ font-size:clamp(1.15rem,1.8vw,1.5rem); font-weight:500; letter-spacing:-.035em; } .teaser-meta{color:var(--ash);transition:color .4s var(--ease)} .teaser:hover .teaser-meta, .teaser:focus-visible .teaser-meta{color:var(--ink)} /* --- 9. Instagram --------------------------------------- */ .audience{ display:grid; gap:clamp(40px,5vw,68px); } .audience-lead{ max-width:20ch; font-size:var(--t-lead); line-height:1.24; letter-spacing:-.038em; font-weight:400; } .instagram-link{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:clamp(22px,2.6vw,34px) 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); font-size:var(--t-title); font-weight:500; letter-spacing:-.045em; line-height:1.12; transition:padding-left .7s var(--ease); } .instagram-link:hover, .instagram-link:focus-visible{padding-left:12px} .instagram-link i{font-style:normal;font-size:.6em} /* --- 10. Expositions & publications --------------------------------------- */ .selected-body{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(48px,6vw,88px); } .records-title{ margin-bottom:22px; font-size:var(--t-label); font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--graphite); } .records{border-top:1px solid var(--ink)} .records li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 24px; padding:15px 0; border-bottom:1px solid var(--hairline); font-size:.94rem; line-height:1.4; transition:padding-left .6s var(--ease); } .records li:hover{padding-left:8px} .records li span:first-child{font-weight:500;letter-spacing:-.02em} .records li span:last-child{ color:var(--graphite); text-align:right; white-space:nowrap; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; font-variant-numeric:tabular-nums; } .records em{ font-style:normal; color:var(--ash); font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; margin-left:10px; } /* --- 11. Contact ----------------------------------------- */ .contact-body{display:grid;gap:clamp(40px,5vw,64px)} .contact-intro{ font-size:clamp(1.5rem,3.4vw,3.1rem); line-height:1.06; letter-spacing:-.05em; font-weight:500; max-width:23ch; text-wrap:balance; } .contact-links{ display:grid; gap:0; border-top:1px solid var(--ink); } .contact-links a{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:20px 0; border-bottom:1px solid var(--hairline); font-size:clamp(1rem,1.6vw,1.35rem); letter-spacing:-.02em; transition:padding-left .6s var(--ease); } .contact-links a:last-child{border-bottom:0} .contact-links a:hover, .contact-links a:focus-visible{padding-left:10px} .contact-links a span{color:var(--ash)} .protocol-link{ display:grid; gap:10px; padding:clamp(28px,3.2vw,40px) 0 clamp(26px,3vw,36px); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); transition:padding-left .7s var(--ease); } .protocol-link:hover, .protocol-link:focus-visible{padding-left:14px} .protocol-name{ display:flex; align-items:baseline; gap:.28em; font-size:clamp(1.75rem,3.2vw,3.1rem); font-weight:500; letter-spacing:-.015em; line-height:1; text-transform:uppercase; } .protocol-name i{font-style:normal;font-size:.42em;letter-spacing:0} .protocol-chain{ color:var(--graphite); font-size:clamp(.95rem,1.2vw,1.12rem); letter-spacing:-.01em; line-height:1.4; } .protocol-meta{color:var(--ash)} /* --- 12. Galerie (galerie.html, thème sombre) ------------ */ .gallery-head{ max-width:var(--measure); margin:0 auto; padding:calc(var(--header-h) + clamp(80px,12vw,150px)) var(--gutter) clamp(48px,6vw,80px); display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; } .gallery-title{ font-size:var(--t-lead); letter-spacing:-.038em; line-height:1.1; } .gallery-meta{color:var(--ash)} .plates{ max-width:var(--measure); margin:0 auto; padding:0 var(--gutter); display:grid; gap:clamp(80px,11vw,180px); } .plate{margin:0} .plate-frame{ position:relative; max-width:min(760px, 100%); margin:0 auto; } .plate-frame img{ width:100%; height:auto; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; pointer-events:none; } .plate-caption{ max-width:min(760px, 100%); margin:14px auto 0; color:var(--ash); } .gallery-foot{ max-width:var(--measure); margin:0 auto; padding:clamp(100px,13vw,190px) var(--gutter) clamp(70px,9vw,120px); display:grid; gap:20px; justify-items:start; } .gallery-note{ font-size:var(--t-lead); letter-spacing:-.038em; line-height:1.15; max-width:20ch; } .editions{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(36px,6vw,90px); width:100%; border-top:1px solid var(--hairline); padding-top:clamp(28px,3vw,40px); } .edition{display:grid;gap:16px;align-content:start} .gallery-specs{ display:grid; gap:5px; color:var(--graphite); font-size:.92rem; line-height:1.5; letter-spacing:-.005em; } .gallery-mail{margin-top:6px;color:var(--graphite)} .gallery-foot a:hover{color:var(--ink)} .back-link{color:var(--graphite);transition:color .3s var(--ease)} .back-link:hover{color:var(--ink)} /* --- 13. Pied de page ------------------------------------ */ .site-footer{ max-width:var(--measure); margin:0 auto; padding:44px var(--gutter) 56px; border-top:1px solid var(--hairline); color:var(--graphite); } .footer-top{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:20px 32px; } .legal-links{display:flex;flex-wrap:wrap;gap:12px 26px} .legal-links button{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.18em; text-transform:uppercase; color:var(--graphite); transition:color .3s var(--ease); } .legal-links button:hover{color:var(--ink)} /* --- 14. Dialogues légaux -------------------------------- */ .legal-dialog{ width:min(880px, calc(100% - 32px)); max-height:86svh; padding:0; border:0; background:var(--paper); color:var(--ink); box-shadow:var(--dialog-shadow); } .legal-dialog::backdrop{ background:var(--backdrop); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .dialog-head{ position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 28px; background:var(--veil-solid); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--hairline); font-family:var(--mono); font-size:var(--t-label); letter-spacing:.2em; text-transform:uppercase; } .dialog-head .close{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.2em; text-transform:uppercase; color:var(--graphite); transition:color .3s var(--ease); } .dialog-head .close:hover{color:var(--ink)} .legal-copy{padding:36px 28px 56px} .legal-copy h2{ margin-bottom:6px; font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:500; letter-spacing:-.045em; line-height:1.1; } .legal-copy .version{ margin-bottom:32px; color:var(--ash); font-family:var(--mono); font-size:var(--t-label); letter-spacing:.18em; text-transform:uppercase; } .legal-copy h3{ margin:34px 0 10px; font-size:var(--t-label); font-weight:600; letter-spacing:.2em; text-transform:uppercase; } .legal-copy p, .legal-copy li{ color:var(--legal-text); font-size:.9rem; line-height:1.7; } .legal-copy ol{counter-reset:legal;display:grid;gap:18px} .legal-copy ol > li{ position:relative; padding-left:34px; counter-increment:legal; } .legal-copy ol > li::before{ content:counter(legal,decimal-leading-zero); position:absolute; left:0;top:.32em; color:var(--ash); font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; } .legal-copy ul{display:grid;gap:8px;margin-top:8px} .legal-copy ul li{color:var(--legal-text-soft)} .legal-copy strong{display:block;margin-bottom:4px;font-weight:600;color:var(--ink)} .legal-copy ul strong{display:inline} .legal-copy a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } /* --- 15. Révélations au défilement ----------------------- */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease), transform 1s var(--ease); } .reveal.in-view{opacity:1;transform:none} .reveal.in-view .stagger > *{opacity:1;transform:none} .stagger > *{ opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease), transform .9s var(--ease); } .stagger > *:nth-child(1){transition-delay:.05s} .stagger > *:nth-child(2){transition-delay:.12s} .stagger > *:nth-child(3){transition-delay:.19s} .stagger > *:nth-child(4){transition-delay:.26s} .stagger > *:nth-child(5){transition-delay:.33s} .stagger > *:nth-child(6){transition-delay:.40s} .stagger > *:nth-child(7){transition-delay:.47s} .stagger > *:nth-child(8){transition-delay:.54s} /* --- 16. Adaptations ------------------------------------- */ @media (max-width: 960px){ .about-body{grid-template-columns:1fr;gap:44px} .bio-portrait{order:-1;max-width:200px} .selected-body{grid-template-columns:1fr;gap:56px} } @media (max-width: 760px){ :root{ /* Valeurs dérivées, redéfinies par le thème sombre */ --body-text:#1c1c1c; --legal-text:#333333; --legal-text-soft:#444444; --veil:rgba(255,255,255,.82); --veil-solid:rgba(255,255,255,.94); --backdrop:rgba(255,255,255,.7); --dialog-shadow:0 40px 120px rgba(0,0,0,.18); --header-h:58px} .section{ grid-template-columns:1fr; row-gap:40px; } .section-head{ position:static; display:flex; align-items:baseline; gap:16px; } .hero-label{ padding:16px var(--gutter) 20px; } .hero-gallery{ display:flex; align-items:baseline; gap:8px; color:var(--graphite); white-space:nowrap; transition:color .3s var(--ease); } .hero-gallery:hover, .hero-gallery:focus-visible{color:var(--ink)} .hero-gallery i{font-style:normal} .scroll-cue{display:none} .hero-label h1{gap:4px 12px} .records li{grid-template-columns:1fr} .editions{grid-template-columns:1fr;gap:44px} .records li span:last-child{text-align:left} .legal-copy{padding:28px 22px 44px} .dialog-head{padding:16px 22px} } @media (max-width: 460px){ .brand-name{font-size:.78rem;letter-spacing:.18em} .header-actions{gap:14px} } @media (max-width: 380px){ .brand-name{font-size:.68rem;letter-spacing:.13em} .brand-square{width:9px;height:9px} .brand{gap:9px} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms; animation-iteration-count:1; transition-duration:.01ms; } .reveal,.stagger > *,.menu-item,.hero-image,.hero-label{ opacity:1; transform:none; } } @media print{ .site-header,.site-nav,.hero,.scroll-cue,.legal-links{display:none} .section{border:0;padding:24px 0} body{font-size:11pt} }