/* Miss Claire v2. Tokens match BRAND-DNA.md exactly. Do not add colors or fonts outside these. */ /* Fonts are linked from each page's (no @import: it costs an extra round trip before text can render). */ :root { --paper: #F6F4EF; --ink: #151311; --ink-soft: #6E675C; --brass: #A6875A; --hairline: #DDD6C8; --surface: #ECE8DF; --scrim: rgba(12, 10, 8, 0.92); /* Contrast colour for the "MS" in the wordmark only, pulled from the red-floral shoot. Never a fill. */ --oxblood: #8B1E2D; --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; --sans: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, sans-serif; --ease: cubic-bezier(.16,.7,.24,1); --t-slide: 0.55s; --t-reveal: 0.8s; --t-reactive: 0.6s; --t-nav: 0.3s; --nav-h: 64px; --gutter: clamp(18px, 4vw, 56px); /* Masthead size: width-driven, capped by viewport height so short laptop windows still fit the cover. app.js shrinks it further if "MISS CLAIRE" would overflow the available width. */ --mast: clamp(2.6rem, min(13.2vw, 22svh), 14.5rem); /* Filmstrip frame height: what is left of the viewport after nav, masthead, dateline and footer row. */ --strip-h: clamp(360px, calc(100svh - var(--nav-h) - (var(--mast) * 0.82) - 250px), 720px); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.5; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } .skip { position: absolute; left: -999px; top: 0; z-index: 300; background: var(--ink); color: var(--paper); padding: 12px 20px; } .skip:focus { left: var(--gutter); top: 12px; } h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; } .label { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: var(--paper); border-bottom: 1px solid transparent; transition: border-color var(--t-nav) var(--ease); } .nav.is-solid { border-bottom-color: var(--hairline); } @media (prefers-reduced-motion: reduce) { .nav { transition: none; } } .nav-inner { height: 100%; max-width: 1500px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; } .nav-brand { font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0.22em; font-weight: 500; text-transform: uppercase; } .ms { color: var(--oxblood); } /* Shimmer on every wordmark: a soft champagne highlight sweeps through the letters once every 7s. The gradient is clipped to the glyphs and built from currentColor, so "MS" shines in oxblood and "CLAIRE" in ink without a second rule. */ .shine { background-image: linear-gradient(105deg, currentColor 0%, currentColor 42%, #F0E4C8 50%, currentColor 58%, currentColor 100%); background-size: 300% 100%; background-position: 120% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shine 7s var(--ease) infinite; } @keyframes shine { 0%, 74% { background-position: 120% 0; } 100% { background-position: -120% 0; } } @media (prefers-reduced-motion: reduce) { .shine { animation: none; } } .nav-links { display: flex; align-items: center; gap: clamp(22px, 3vw, 44px); } .nav-link, .nav-item > a { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); padding: 6px 0; position: relative; } .nav-link::after, .nav-item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform var(--t-reactive) var(--ease); } .nav-link:hover::after, .nav-item > a:hover::after, .nav-link[aria-current="page"]::after, .nav-item > a[aria-current="page"]::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .nav-link::after, .nav-item > a::after { transition: none; } } /* The whole nav height is the hover zone, and the submenu carries an invisible bridge over the gap above it, so the pointer never leaves the hover area on its way down to the links. Hiding is delayed a beat so a diagonal path does not close it. */ .nav-item { position: relative; height: var(--nav-h); display: flex; align-items: center; } .nav-submenu { position: absolute; top: calc(100% - 8px); left: 50%; transform: translateX(-50%); padding: 16px 24px; min-width: 150px; background: var(--paper); border: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 12px; opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), visibility 0s linear 0.35s; } .nav-submenu::before { content: ""; position: absolute; left: -12px; right: -12px; top: -16px; height: 16px; } .nav-item:hover .nav-submenu, .nav-item:focus-within .nav-submenu { opacity: 1; visibility: visible; transition-delay: 0s; } .nav-submenu a { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; } .nav-submenu a:hover { color: var(--brass); } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px 0 10px 12px; } .nav-toggle span { display: block; width: 24px; height: 1px; background: currentColor; margin: 6px 0; transition: transform 0.3s var(--ease); } .nav-toggle.is-open span:first-child { transform: translateY(6.5px) rotate(45deg); } .nav-toggle.is-open span:last-child { transform: translateY(-6.5px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } } .nav-mobile-panel { position: fixed; inset: 0; z-index: 99; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease); } .nav-mobile-panel.is-open { opacity: 1; visibility: visible; } .nav-mobile-panel > a { font-family: var(--serif); font-size: 2rem; letter-spacing: 0.04em; } .nav-mobile-sub { display: flex; gap: 22px; margin-top: -8px; } .nav-mobile-sub a { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); } @media (max-width: 860px) { .nav-links { display: none; } .nav-toggle { display: block; } } /* ---------- Cover (home hero): nameplate + filmstrip ---------- */ .cover { position: relative; padding: 0 0 36px; overflow: hidden; } .masthead { font-size: var(--mast); line-height: 0.82; letter-spacing: 0.06em; font-weight: 500; text-transform: uppercase; text-align: center; white-space: nowrap; padding: 0.12em var(--gutter) 0; opacity: 0; animation: fade-up 1s var(--ease) 0.1s forwards; } .masthead span { display: inline; } @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .cover-dateline { text-align: center; margin: 16px var(--gutter) 0; opacity: 0; animation: fade-up 1s var(--ease) 0.35s forwards; } .cover-dateline em { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 1.1; } .cover-dateline span { display: block; margin-top: 8px; font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); } /* The strip: the active photo sits centred at full strength; its neighbours are visible but translucent (the one next in the queue a little brighter), and the edges fade into the paper. */ .strip { position: relative; margin-top: clamp(18px, 3vh, 34px); padding: 14px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); opacity: 0; animation: fade-up 1.2s var(--ease) 0.25s forwards; } .strip-track { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 22px); padding: 0 9%; will-change: transform; transition: transform var(--t-slide) var(--ease); } .strip-track.no-anim { transition: none; } .strip-item { flex: 0 0 auto; height: var(--strip-h); aspect-ratio: 2 / 3; padding: 0; border: 0; background: var(--surface); overflow: hidden; cursor: pointer; opacity: 0.28; transform: scale(0.9); transition: opacity var(--t-slide) var(--ease), transform var(--t-slide) var(--ease); } .strip-item.is-near { opacity: 0.55; } .strip-item.is-active { opacity: 1; transform: none; cursor: zoom-in; } .strip-item img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; } .strip-item:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; } .cover-foot { max-width: 1500px; margin: 0 auto; padding: 14px var(--gutter) 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; opacity: 0; animation: fade-up 1s var(--ease) 0.5s forwards; } .cover-ui { display: flex; align-items: center; gap: 22px; } .cover-ui button { background: none; border: 0; cursor: pointer; padding: 8px 4px; font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); } .cover-ui button:hover { color: var(--brass); } .cover-count { font-family: var(--serif); font-size: 1rem; letter-spacing: 0.1em; min-width: 76px; text-align: center; } /* Gesture hint: a thin two-way hairline arrow that breathes sideways until the visitor moves the strip. */ .strip-hint { display: inline-flex; align-items: center; margin-left: 16px; padding: 6px 4px; transition: opacity 0.5s var(--ease); } .strip-hint i { position: relative; display: block; width: 58px; height: 1px; background: var(--brass); animation: hint-beckon 2.4s ease-in-out infinite alternate; } .strip-hint i::before, .strip-hint i::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-top: 1px solid var(--brass); border-right: 1px solid var(--brass); } .strip-hint i::after { right: 1px; transform: translateY(-50%) rotate(45deg); } .strip-hint i::before { left: 1px; transform: translateY(-50%) rotate(-135deg); } @keyframes hint-beckon { from { transform: translateX(-5px); } to { transform: translateX(5px); } } .strip-hint.is-quiet { opacity: 0; } @media (prefers-reduced-motion: reduce) { .strip-hint i { animation: none; } } .strip { cursor: grab; } .strip:active { cursor: grabbing; } .cover-links { list-style: none; margin: 0; padding: 0; display: flex; align-items: baseline; gap: clamp(14px, 1.6vw, 26px); } .cover-links a { font-family: var(--serif); font-size: clamp(1.1rem, 1.5vw, 1.4rem); position: relative; display: inline-block; padding-bottom: 2px; } .cover-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform var(--t-reactive) var(--ease); } .cover-links a:hover::after { transform: scaleX(1); } @media (max-width: 980px) { .masthead { letter-spacing: 0.05em; } .strip-item { height: auto; width: 74vw; } .strip-track { padding: 0 6%; } .strip-hint { display: none; } .strip { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .cover-foot { flex-direction: column; gap: 14px; } } @media (prefers-reduced-motion: reduce) { .masthead, .cover-dateline, .strip, .cover-foot { animation: none; opacity: 1; transform: none; } .strip-track, .strip-item { transition: none; } } /* ---------- Signature moment: the MC monogram collapses into the nameplate, over a collage ---------- Plays in full on entry (html.has-loader + .play-full), compressed on every page click (.play-quick), and the arriving page shows it settled (.is-settled) before lifting. Timings live in the two .play-* blocks; app.js only adds and removes classes. */ .loader { position: fixed; inset: 0; z-index: 400; background: var(--paper); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s; } .loader.is-on, html.has-loader .loader { opacity: 1; visibility: visible; transition-delay: 0s; } html.has-loader .loader { transition: none; } .loader-collage { position: absolute; inset: -6%; pointer-events: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(84px, 11vw, 150px), 1fr)); gap: 8px; align-content: center; opacity: 0; transform: scale(1.04); transition: opacity 1.1s var(--ease), transform 1.4s var(--ease); } .loader.is-on .loader-collage, html.has-loader .loader-collage { opacity: 0.22; transform: none; } .loader.is-settled .loader-collage { transition: none; } .loader-collage img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 15%; } .loader-stage { position: relative; display: grid; grid-template-rows: auto 22px; justify-items: center; align-items: center; row-gap: 18px; } .loader-mono { grid-area: 1 / 1; width: clamp(64px, 7vw, 84px); aspect-ratio: 1; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: 0.04em; line-height: 1; transform-origin: center; opacity: 0; } .loader-mark { grid-area: 1 / 1; font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 6.5vw, 5.4rem); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; white-space: nowrap; opacity: 0; clip-path: inset(0 50% 0 50%); } .loader-line { grid-area: 2 / 1; position: relative; width: clamp(120px, 18vw, 220px); height: 1px; background: var(--hairline); overflow: hidden; } .loader-line i { position: absolute; inset: 0; background: var(--brass); transform: scaleX(0); transform-origin: center; } @keyframes mono-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } } @keyframes mono-collapse { 0% { transform: scaleX(1); opacity: 1; } 80% { transform: scaleX(0.02); opacity: 1; } 100% { transform: scaleX(0.02); opacity: 0; } } @keyframes loader-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes mark-open { from { opacity: 0; clip-path: inset(0 50% 0 50%); } to { opacity: 1; clip-path: inset(0 0 0 0); } } /* Full play, on entry: about 2.3s before the lift. */ .loader.play-full .loader-mono { animation: mono-in 0.45s var(--ease) 0.1s both, mono-collapse 0.32s var(--ease) 0.85s forwards; } .loader.play-full .loader-line i { animation: loader-draw 0.6s var(--ease) 1.1s forwards; } .loader.play-full .loader-mark { animation: mark-open 0.7s var(--ease) 1.15s forwards; } /* Quick cut, on a click or a repeat load: about 0.95s. */ .loader.play-quick .loader-mono { animation: mono-in 0.2s var(--ease) 0s both, mono-collapse 0.2s var(--ease) 0.3s forwards; } .loader.play-quick .loader-line i { animation: loader-draw 0.35s var(--ease) 0.5s forwards; } .loader.play-quick .loader-mark { animation: mark-open 0.4s var(--ease) 0.52s forwards; } /* Settled, on arrival after a click: the end state, no animation, then the page lifts it. */ .loader.is-settled .loader-mono { opacity: 0; } .loader.is-settled .loader-line i { transform: scaleX(1); } .loader.is-settled .loader-mark { opacity: 1; clip-path: inset(0 0 0 0); } @media (prefers-reduced-motion: reduce) { .loader { display: none; } } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--ink); margin-top: 40px; } .footer-inner { border-top: 1px solid var(--hairline); margin-top: 3px; padding: 44px var(--gutter) 36px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .footer-brand { font-family: var(--serif); font-size: 1rem; letter-spacing: 0.22em; font-weight: 500; text-transform: uppercase; } .footer-links, .footer-social { display: flex; gap: 26px; } .footer-links a, .footer-social a { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); } .footer-links a:hover, .footer-social a:hover { color: var(--brass); } .footer-copy { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-soft); margin: 0; } /* ---------- Page shell ---------- */ .page-head { padding: 56px var(--gutter) 8px; max-width: 1500px; margin: 0 auto; } .page-head h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 0.95; letter-spacing: 0.01em; } .page-head .kicker { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-soft); margin: 10px 0 0; } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { transition: none; opacity: 1; transform: none; } } /* ---------- Portfolio ---------- */ .portfolio-tabs { display: flex; gap: clamp(22px, 3vw, 40px); margin: 30px 0 0; border-bottom: 1px solid var(--hairline); } .tab { background: none; border: 0; cursor: pointer; padding: 0 0 14px; position: relative; font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: baseline; gap: 8px; } .tab .tab-count { font-family: var(--serif); font-size: 0.8rem; letter-spacing: 0; color: var(--ink-soft); } .tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transition: transform var(--t-reactive) var(--ease); } .tab[aria-selected="true"] { color: var(--ink); } .tab[aria-selected="true"]::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .tab::after { transition: none; } } .portfolio-grid { max-width: 1500px; margin: 0 auto; padding: 28px var(--gutter) 40px; column-count: 3; column-gap: 14px; transition: opacity 0.35s var(--ease); } .portfolio-grid.is-switching { opacity: 0; } @media (max-width: 980px) { .portfolio-grid { column-count: 2; column-gap: 10px; } } @media (prefers-reduced-motion: reduce) { .portfolio-grid { transition: none; } } .grid-item { break-inside: avoid; margin: 0 0 14px; position: relative; overflow: hidden; cursor: pointer; background: var(--surface); } @media (max-width: 980px) { .grid-item { margin-bottom: 10px; } } .grid-item img { width: 100%; height: auto; transition: transform var(--t-reactive) var(--ease); } .grid-item:hover img, .grid-item:focus-visible img { transform: scale(1.03); } .grid-item:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .grid-item img { transition: none; } } /* ---------- Lightbox ---------- */ .lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: opacity 0.45s var(--ease); } .lightbox.is-open { visibility: visible; opacity: 1; } .lightbox-scrim { position: absolute; inset: 0; background: var(--scrim); } .lightbox-figure { position: relative; margin: 0; max-width: min(92vw, 1200px); max-height: calc(100svh - 140px); opacity: 0; transform: scale(0.98); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); } .lightbox-figure.is-shown { opacity: 1; transform: none; } .lightbox-img { max-width: min(92vw, 1200px); max-height: calc(100svh - 140px); width: auto; height: auto; } .lightbox-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 201; display: flex; align-items: center; justify-content: center; gap: 28px; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); color: var(--paper); } .lightbox-bar button, .lightbox-close { background: none; border: 0; cursor: pointer; padding: 10px 6px; font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper); } .lightbox-count { font-family: var(--serif); font-size: 0.95rem; letter-spacing: 0.1em; min-width: 90px; text-align: center; } .lightbox-close { position: fixed; z-index: 201; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); } @media (prefers-reduced-motion: reduce) { .lightbox, .lightbox-figure { transition: none; } } /* ---------- Stats ---------- */ .stats-page { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter) 80px; } .stats-toggle { display: none; margin: 30px 0 0; border: 1px solid var(--ink); width: fit-content; } .stats-toggle button { background: none; border: 0; cursor: pointer; padding: 11px 20px; font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); } .stats-toggle button[aria-selected="true"] { background: var(--ink); color: var(--paper); } .stats-panels { display: grid; grid-template-columns: 1fr 1px 1fr; gap: clamp(24px, 4vw, 64px); margin-top: 40px; } .stats-divider { background: var(--hairline); } .stats-panel-head { margin-bottom: 14px; } .stat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hairline); } .stat-row dt { margin: 0; font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); } .stat-row dd { margin: 0; font-family: var(--serif); font-size: 1.35rem; text-align: right; } .stats-extra { margin-top: 56px; } @media (max-width: 760px) { .stats-toggle { display: inline-flex; } .stats-panels { grid-template-columns: 1fr; gap: 0; margin-top: 28px; } .stats-divider { display: none; } .stats-panel[data-unit] { display: none; } .stats-panel[data-unit].is-active { display: block; } } /* ---------- About ---------- */ .about { max-width: 1100px; margin: 0 auto; padding: 8px var(--gutter) 24px; } .about-lead { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.25; max-width: 32ch; margin: 18px 0 40px; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 5vw, 72px); } .about-block { border-top: 1px solid var(--hairline); padding: 24px 0 34px; } .about-block h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.05; margin: 10px 0 14px; } .about-block p { margin: 0; font-size: 0.98rem; line-height: 1.65; } .about-block p + p { margin-top: 10px; } .about-block a { border-bottom: 1px solid var(--brass); padding-bottom: 1px; } .about-block a:hover { color: var(--brass); } .about-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; } .about-list li { font-family: var(--serif); font-size: 1.15rem; } .about-cta { font-family: var(--serif); font-size: 1.1rem; overflow-wrap: anywhere; } .about-strip { padding: 10px 0 30px; } .about-strip .strip-item { height: clamp(320px, 50vh, 560px); } .strip-foot { display: flex; justify-content: center; padding: 14px var(--gutter) 0; } @media (max-width: 980px) { .about-grid { grid-template-columns: 1fr; } .about-strip .strip-item { height: auto; width: 74vw; } } /* ---------- Contact ---------- */ .contact-page { max-width: 680px; margin: 0 auto; padding: 24px var(--gutter) 100px; text-align: center; } .contact-name { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.8rem); margin: 0; line-height: 1.05; } .contact-role { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin: 12px 0 44px; } .contact-block { padding: 34px 0; border-top: 1px solid var(--hairline); } .contact-block:last-of-type { border-bottom: 1px solid var(--hairline); } .contact-block .label { display: block; margin-bottom: 12px; } .contact-email { font-family: var(--serif); font-size: clamp(1rem, 4.4vw, 1.7rem); position: relative; padding-bottom: 4px; overflow-wrap: anywhere; } .contact-email::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform var(--t-reactive) var(--ease); } .contact-email:hover::after { transform: scaleX(1); } .contact-social { display: flex; flex-direction: column; align-items: center; gap: 14px; } .contact-social a { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); } .contact-social a:hover { color: var(--brass); }