/* ============================================================ FORWARD MOTION - STREET AFTER PARTY Studio 338 - Sat 22 Aug 2026 - 23:00-04:00 Direction: the Street Party runs 14:00-23:00 in daylight; this is the same event after dark. The client's own hero photo (a mirrored monolith over an east-London skyline) has been night-graded rather than replaced, so the two pages read as one event in two chapters. Palette is sampled from that photo, not invented: the sky's #3277A2 taken down to night, the brick #8D6358 pushed up into street-light sodium. The monolith's lit edge #9FBFCE is the only cool light on the page. ============================================================ */ :root { --void: #0A0F14; /* night sky at the zenith */ --deep: #14212B; /* horizon haze */ --chrome: #9FBFCE; /* sampled from the monolith's lit edge */ --sodium: #F2A65A; /* street light - the single accent */ --bone: #EDEAE4; /* warm white, sits under sodium rather than glowing */ --muted: #7C8B96; --line: rgba(159, 191, 206, 0.20); --line-soft: rgba(159, 191, 206, 0.11); --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; --panel-w: 468px; --slant: 26px; /* the monolith's tilted top edge */ } /* Self-hosted (OFL). Bunny/Google CDN avoided: one less third party, and the preload in can then actually warm the file we use. */ @font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/martian-mono-latin-400.woff2?v=20260730-3") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/martian-mono-latin-700.woff2?v=20260730-3") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ BASE gotcha 16: html carries the base colour. body MUST stay transparent or it paints over the z-index:-2 fixed background layers. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--void); -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: transparent; font-family: var(--body); color: var(--bone); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } .bg { position: fixed; inset: 0; z-index: -2; background-image: image-set( url("/assets/images/bg-mobile.webp?v=20260730-3") type("image/webp"), url("/assets/images/bg-mobile.jpg?v=20260730-3") type("image/jpeg")); background-size: cover; background-position: 50% 42%; background-repeat: no-repeat; } /* Legibility wash. Warm at the foot so the panel's sodium glow reads as part of the same light rather than a sticker on top of a photo. */ .bg__wash { position: fixed; inset: 0; z-index: -1; background: radial-gradient(120% 68% at 50% 112%, rgba(242, 166, 90, 0.16), rgba(242, 166, 90, 0) 62%), linear-gradient(180deg, rgba(10, 15, 20, 0.72) 0%, rgba(10, 15, 20, 0.44) 34%, rgba(10, 15, 20, 0.80) 100%); } @media (min-width: 768px) { .bg { background-image: image-set( url("/assets/images/bg-desktop.webp?v=20260730-3") type("image/webp"), url("/assets/images/bg-desktop.jpg?v=20260730-3") type("image/jpeg")); background-position: 50% 46%; } } /* ============================================================ LAYOUT Default (portrait / narrow) is the stacked flow: lockup above, panel below. The two-column treatment is opted into further down, behind an aspect-ratio threshold rather than width alone (gotcha 20). ============================================================ */ .hero { flex: 1 0 auto; display: grid; grid-template-areas: "lockup" "panel"; grid-template-columns: minmax(0, var(--panel-w)); justify-content: center; align-content: center; justify-items: center; text-align: center; gap: clamp(18px, 4vw, 30px); width: 100%; min-height: 100svh; padding: clamp(26px, 6vw, 56px) clamp(16px, 5vw, 40px); } /* ============================================================ LOCKUP Wordmark, then the artwork's own outlined pill, then the facts. The order mirrors the client's supplied artwork exactly. ============================================================ */ .lockup { grid-area: lockup; display: flex; flex-direction: column; align-items: center; width: 100%; } .word img { width: min(100%, 420px); margin: 0 auto; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55)); } /* Straight from the artwork: outlined capsule, mono, wide tracking. */ .pill { margin: clamp(14px, 3vw, 20px) 0 0; padding: 0.62em 1.35em 0.56em; border: 1.5px solid var(--bone); border-radius: 999px; font-family: var(--mono); font-weight: 700; font-size: clamp(0.62rem, 2.6vw, 0.8rem); letter-spacing: 0.13em; text-transform: uppercase; color: var(--bone); line-height: 1; white-space: nowrap; } /* Facts as a definition list: the labels are real information, not decoration, and they give screen readers the field names. */ .meta { margin: clamp(16px, 3.4vw, 24px) 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 10px clamp(16px, 3.4vw, 28px); font-family: var(--mono); } .meta__item { display: flex; flex-direction: column; gap: 5px; position: relative; } /* Hairline between facts, drawn only between items. */ .meta__item + .meta__item::before { content: ""; position: absolute; left: calc(-1 * clamp(8px, 1.7vw, 14px)); top: 2px; bottom: 2px; width: 1px; background: var(--line-soft); } .meta dt { margin: 0; font-size: 0.56rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .meta dd { margin: 0; font-size: clamp(0.72rem, 2.5vw, 0.86rem); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bone); white-space: nowrap; } /* The one place sodium appears outside the panel: the hours are the whole point of an after party. */ .meta__item--time dd { color: var(--sodium); display: flex; align-items: center; gap: 7px; } /* Notch borrowed from the wordmark's own arrow cuts, rather than an en dash. */ .arw { width: 9px; height: 9px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%, 26% 50%); flex: none; } /* ============================================================ PANEL - the monolith No clip-path on .panel itself: the country dropdown has to escape it. The slanted glass is drawn by pseudo-elements underneath (gotcha 5), with isolation + explicit z-index so the flag dropdown stays clickable. ============================================================ */ .panel { grid-area: panel; position: relative; isolation: isolate; width: 100%; max-width: var(--panel-w); margin: 0 auto; /* gotcha 10: auto at every breakpoint */ padding: calc(var(--slant) + clamp(22px, 4vw, 30px)) clamp(20px, 4.6vw, 32px) clamp(24px, 4.6vw, 32px); } /* Chrome hairline: same polygon, 1px larger all round. */ .panel::before { content: ""; position: absolute; inset: -1px; z-index: 0; clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); background: linear-gradient(158deg, rgba(159, 191, 206, 0.55) 0%, rgba(159, 191, 206, 0.14) 38%, rgba(242, 166, 90, 0.34) 100%); } /* The glass, with the party glowing up through the bottom edge. */ .panel::after { content: ""; position: absolute; inset: 0; z-index: 0; clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); background: radial-gradient(126% 62% at 50% 119%, rgba(242, 166, 90, 0.30), rgba(242, 166, 90, 0) 68%), linear-gradient(180deg, rgba(20, 33, 43, 0.90) 0%, rgba(10, 15, 20, 0.95) 58%, rgba(14, 15, 16, 0.96) 100%); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); } /* Everything readable sits above both layers. */ .panel__state { position: relative; z-index: 1; } /* One state visible at a time. Each carries its own eyebrow + title + copy. */ .panel__idle, .panel__success { display: none; } .panel[data-form-state="idle"] .panel__idle { display: block; } .panel[data-form-state="success"] .panel__success { display: block; } .panel__eyebrow { margin: 0 0 12px; font-family: var(--mono); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sodium); } .panel__title { margin: 0 0 12px; font-family: var(--mono); font-weight: 700; font-size: clamp(1.06rem, 3.4vw, 1.42rem); line-height: 1.24; letter-spacing: -0.01em; /* mono runs wide; pull it back at display size */ color: var(--bone); text-wrap: balance; /* gotcha 8: never nowrap a display title */ } .panel__lede { margin: 0 0 20px; font-size: 0.9rem; line-height: 1.62; color: rgba(237, 234, 228, 0.80); } .panel__lede strong { color: var(--bone); font-weight: 600; } .panel__note { margin: 14px 0 0; font-size: 0.78rem; color: var(--muted); } /* ============================================================ FORM ============================================================ */ .form__row { margin-bottom: 13px; } /* sr-only, never display:none - the placeholder carries the meaning visually but the label has to survive for screen readers. */ .form__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .form__input { width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 8px; background: rgba(6, 10, 14, 0.62); color: var(--bone); font-family: var(--body); font-size: 16px; /* 16px minimum or iOS zooms the page on focus */ line-height: 1.3; transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease; } .form__input::placeholder { color: rgba(124, 139, 150, 0.85); } .form__input:hover { border-color: rgba(159, 191, 206, 0.34); } .form__input:focus { outline: none; border-color: var(--chrome); background: rgba(6, 10, 14, 0.82); box-shadow: 0 0 0 3px rgba(159, 191, 206, 0.16); } /* Honeypot. display:none ONLY (gotcha 2) - Chrome/Edge autofill off-screen fields, which silently blocked real signups on earlier builds. */ .hp-field { display: none; } .form__error { margin: 7px 0 0; font-size: 0.76rem; line-height: 1.45; color: #FF9C7A; } .form__error--global { margin-top: 12px; text-align: center; } /* --- Consent checkbox --- */ .form__row--check { margin: 16px 0 18px; } .form__check { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; cursor: pointer; font-size: 0.76rem; line-height: 1.55; color: rgba(237, 234, 228, 0.72); } /* The real input, styled directly - keeps native focus and checked semantics instead of proxying them through a decorative span. */ .form__check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 1px 0 0; flex: none; border: 1px solid var(--line); border-radius: 4px; background: rgba(6, 10, 14, 0.62); cursor: pointer; display: grid; place-content: center; transition: border-color 0.16s ease, background-color 0.16s ease; } .form__check input[type="checkbox"]::before { content: ""; width: 9px; height: 9px; transform: scale(0); transition: transform 0.14s cubic-bezier(0.3, 1.4, 0.6, 1); background: var(--void); clip-path: polygon(14% 46%, 0 62%, 38% 100%, 100% 22%, 86% 8%, 36% 70%); } .form__check input[type="checkbox"]:checked { background: var(--sodium); border-color: var(--sodium); } .form__check input[type="checkbox"]:checked::before { transform: scale(1); } .form__check input[type="checkbox"]:hover { border-color: rgba(159, 191, 206, 0.4); } .form__check-text a { color: var(--bone); text-decoration: underline; text-underline-offset: 2px; } .form__check-text a:hover { color: var(--sodium); } /* --- Submit --- */ .btn { width: 100%; padding: 14px 20px; border: 0; border-radius: 8px; background: var(--bone); color: var(--void); font-family: var(--mono); font-weight: 700; /* gotcha 26: shrink type before an uppercase mono label can ever wrap */ font-size: clamp(0.72rem, 3.4vw, 0.84rem); letter-spacing: clamp(0.06em, 0.5vw, 0.14em); text-transform: uppercase; white-space: nowrap; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.16s ease, transform 0.1s ease, box-shadow 0.16s ease; } .btn:hover:not(:disabled) { background: var(--sodium); box-shadow: 0 6px 22px rgba(242, 166, 90, 0.26); } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled { opacity: 0.55; cursor: not-allowed; } /* ============================================================ INTL-TEL-INPUT (v25) ============================================================ */ .iti { width: 100%; display: block; } /* Baseline padding; app.js re-measures on fonts.ready and re-applies, because v25 measures the trigger once before webfonts settle (gotcha 4/6). */ .iti input.form__input { padding-left: calc(52px + 0.7rem); } .iti__country-container { padding: 1px; } .iti__selected-country { border-radius: 8px 0 0 8px; background: transparent; transition: background-color 0.16s ease; } .iti__selected-country:hover { background: rgba(159, 191, 206, 0.09); } .iti__selected-country-primary { padding: 0 6px 0 11px; } .iti__selected-dial-code { color: var(--bone); font-size: 0.86rem; } .iti__arrow { border-top-color: var(--muted); } .iti__arrow--up { border-bottom-color: var(--muted); } /* gotcha 19: the hidden state lives in the vendor stylesheet, so until it loads the whole list + search box flash open on first paint. */ .iti__dropdown-content.iti__hide { display: none !important; } .iti__dropdown-content { border: 1px solid var(--line); border-radius: 10px; background: #0C141B; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.62); overflow: hidden; } /* Search box */ .iti__search-input { width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 10px 10px 0 0; background: rgba(159, 191, 206, 0.06); color: var(--bone); font-family: var(--body); font-size: 15px; } .iti__search-input::placeholder { color: var(--muted); } .iti__search-input:focus { outline: none; background: rgba(159, 191, 206, 0.11); } .iti__country-list { max-height: 232px; border: 0; background: transparent; scrollbar-width: thin; scrollbar-color: rgba(159, 191, 206, 0.28) transparent; } .iti__country-list::-webkit-scrollbar { width: 8px; } .iti__country-list::-webkit-scrollbar-thumb { background: rgba(159, 191, 206, 0.28); border-radius: 99px; } .iti__country { padding: 9px 14px; color: rgba(237, 234, 228, 0.86); font-size: 0.86rem; outline: none; } .iti__country:hover, .iti__country.iti__highlight { background: rgba(159, 191, 206, 0.13); } .iti__country-name { color: inherit; } .iti__dial-code { color: var(--muted); } .iti__divider { border-bottom: 1px solid var(--line-soft); margin: 4px 0; } /* ============================================================ FOOTER - full width, basslayerz pattern ============================================================ */ .foot { flex-shrink: 0; width: 100%; margin: 0; padding: 16px clamp(16px, 4vw, 40px) 22px; background: rgba(8, 12, 16, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .foot__left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .foot__legal { margin: 0; font-size: 12px; color: var(--muted); letter-spacing: 0.02em; } .foot__legal a { color: var(--muted); text-decoration: none; } .foot__legal a:hover { color: var(--sodium); } .site-built { margin: 0; } .site-built a { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 0.04em; color: var(--muted); text-decoration: none; padding: 5px 11px; border: 1px solid var(--line-soft); border-radius: 999px; transition: border-color 0.16s ease, color 0.16s ease; } .site-built a:hover { border-color: var(--sodium); color: var(--bone); } .site-built img { display: block; opacity: 0.9; } /* ============================================================ RESPONSIVE Two columns: lockup left, panel right. Threshold is an aspect ratio as well as a width (gotcha 20) so squarish desktop windows don't land in a gap where neither the phone nor the desktop treatment applies. Needs lockup(300) + gap(48) + panel(468) + padding(112) = ~928px. ============================================================ */ @media (min-width: 1000px) and (min-aspect-ratio: 7/10) { .hero { grid-template-areas: "lockup panel"; grid-template-columns: minmax(280px, 430px) minmax(0, var(--panel-w)); column-gap: clamp(36px, 5vw, 72px); align-items: center; justify-items: start; /* gotcha 17: two-column block ONLY */ text-align: left; } .lockup { align-items: flex-start; width: auto; } /* Centred against the wordmark, as the client's own artwork sets it. */ .lockup .pill { align-self: center; } .word img { width: min(100%, 430px); margin: 0; } .meta { justify-content: flex-start; } .panel { align-self: center; margin: 0; } } @media (min-width: 1240px) and (min-aspect-ratio: 7/10) { .hero { column-gap: clamp(56px, 6vw, 96px); } .word img { width: min(100%, 480px); } } /* Landscape phones (gotcha 27). Desktop-ish aspect, almost no height: a rotated iPhone is 844x390. Placed AFTER the desktop blocks so it wins at equal specificity - media queries add no specificity of their own. */ @media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 560px) { .hero { grid-template-areas: "lockup panel"; grid-template-columns: minmax(150px, 240px) minmax(0, 390px); column-gap: clamp(18px, 3vw, 34px); align-content: start; align-items: start; justify-items: start; text-align: left; min-height: 0; padding-top: 14px; padding-bottom: 14px; } .lockup { align-items: flex-start; width: auto; } .word img { width: min(100%, 240px); margin: 0; } .pill { margin-top: 10px; font-size: 0.58rem; padding: 0.55em 1.1em 0.5em; } .meta { justify-content: flex-start; margin-top: 11px; gap: 7px 13px; } .meta dt { font-size: 0.5rem; } .meta dd { font-size: 0.68rem; } .panel { align-self: start; margin: 0; padding: calc(var(--slant) + 15px) 17px 16px; } /* ~390px of height against a ~490px panel. The idle lede is the one genuinely redundant block - the lockup beside it already states venue, date and time. It stays in the success state, where it carries instructions rather than repetition. */ .panel__eyebrow { margin-bottom: 8px; font-size: 0.54rem; } .panel__title { font-size: 1.02rem; line-height: 1.16; margin-bottom: 9px; } .panel__idle .panel__lede { display: none; } .form__row { margin-bottom: 9px; } .form__input { padding: 10px 13px; } .form__row--check { margin: 11px 0 12px; } .form__check { font-size: 0.7rem; line-height: 1.45; } .btn { padding: 11px 18px; } .foot { padding-top: 11px; padding-bottom: 13px; } } /* Portrait phones */ @media (max-width: 560px) { .word img { width: min(100%, 340px); } .meta { gap: 9px 14px; } .foot { justify-content: center; text-align: center; } .foot__left { justify-content: center; } } /* Very narrow: the three facts stop fitting on one row with dividers. */ @media (max-width: 380px) { .meta { gap: 12px 16px; } .meta__item + .meta__item::before { display: none; } } /* ============================================================ ENTRY One short top-down reveal: the mark reads as the subject, the panel as the response. gotcha 23: these use `both`, so a plain headless capture that races them shows an empty page - screenshot with --virtual-time-budget. ============================================================ */ @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .word { animation: rise 0.62s cubic-bezier(0.22, 0.9, 0.3, 1) both; } .pill { animation: rise 0.62s cubic-bezier(0.22, 0.9, 0.3, 1) 0.10s both; } .meta { animation: rise 0.62s cubic-bezier(0.22, 0.9, 0.3, 1) 0.18s both; } .panel { animation: rise 0.68s cubic-bezier(0.22, 0.9, 0.3, 1) 0.26s both; } /* ============================================================ ACCESSIBILITY ============================================================ */ a:focus-visible, button:focus-visible, input:focus-visible, .iti__selected-country:focus-visible { outline: 2px solid var(--sodium); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0.001ms !important; transition-duration: 0.001ms !important; } html { scroll-behavior: auto; } } /* ============================================================ LEGAL PAGE (privacy.html) Same structure as the Birmingham page, recoloured to this palette. No background photo: it is a reading page, so it gets a flat ground and a comfortable measure. ============================================================ */ body.legal-wrap { display: block; min-height: 0; background: var(--void); color: var(--bone); font-family: var(--body); line-height: 1.62; margin: 0; padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem) 4rem; } .legal { max-width: 740px; margin: 0 auto; } .legal__back { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 2.5rem; padding: 0.4rem 1.05rem 0.4rem 0.4rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(159, 191, 206, 0.05); text-decoration: none; white-space: nowrap; transition: border-color 0.18s ease, background-color 0.18s ease; } .legal__back:hover { border-color: var(--sodium); background: rgba(242, 166, 90, 0.08); } .legal__back-arrow { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--sodium); color: var(--void); transition: transform 0.18s ease; } .legal__back:hover .legal__back-arrow { transform: translateX(-3px); } .legal__back-arrow svg { width: 13px; height: 13px; display: block; } .legal__back-label { display: inline-flex; flex-direction: column; line-height: 1.12; } .legal__back-text { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .legal__back-brand { font-family: var(--mono); font-weight: 700; font-size: 12.5px; letter-spacing: 0.01em; color: var(--bone); } .legal h1 { font-family: var(--mono); font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 1.95rem); line-height: 1.14; letter-spacing: -0.01em; text-transform: uppercase; margin: 0 0 2rem; color: var(--bone); text-wrap: balance; } .legal h1::after { content: "."; color: var(--sodium); } .legal h2 { font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sodium); margin: 2.2rem 0 0.7rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line-soft); } .legal h3 { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--chrome); margin: 1.8rem 0 0.4rem; } .legal p, .legal li { font-size: 14.5px; color: rgba(237, 234, 228, 0.76); } .legal ul { padding-left: 1.1rem; margin: 0.5rem 0 1rem; } .legal li { margin-bottom: 0.45rem; } .legal a:not(.legal__back) { color: var(--chrome); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(159, 191, 206, 0.45); } .legal a:not(.legal__back):hover { text-decoration-color: var(--chrome); } .legal strong { color: var(--bone); font-weight: 600; } .legal__meta { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }