/* ============================================================================= The Artemist — Site stylesheet Mirrors colors_and_type.css tokens from the design system, plus all site components. Class names are stable so the Webflow build can map 1:1. ============================================================================= */ /* ---------- Fonts (served from local /fonts) ---------- */ @font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/LibreCaslonText-Regular.ttf") format("truetype"); } @font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/LibreCaslonText-Italic.ttf") format("truetype"); } @font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/LibreCaslonText-Bold.ttf") format("truetype"); } @font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/PTSerif-Regular.ttf") format("truetype"); } @font-face { font-family: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/PTSerif-Italic.ttf") format("truetype"); } @font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/PTSerif-Bold.ttf") format("truetype"); } /* ---------- Tokens ---------- */ :root { /* Primaries */ --artemist-red: #8B3331; --charcoal: #3A3A3A; --cream: #F4ECE2; /* Secondaries */ --antique-brass: #B08D57; --ink-indigo: #2C3E50; /* Tints */ --cream-2: #EFE6D9; --cream-3: #E8DDCC; --charcoal-70: #5C5C5C; --charcoal-50: #8A8A8A; --indigo-deep: #1F2D3D; --red-deep: #6E2826; --brass-soft: #C4A878; /* Semantic */ --bg: var(--cream); --bg-elevated: #FBF6EE; --bg-inverse: var(--ink-indigo); --fg: var(--charcoal); --fg-muted: var(--charcoal-70); --fg-faint: var(--charcoal-50); --fg-inverse: var(--cream); --accent: var(--artemist-red); --accent-hover: var(--red-deep); --rule: var(--cream-3); --rule-strong: var(--charcoal); --metallic: var(--antique-brass); /* Type families */ --font-display: "Libre Caslon Text", "Caslon", "Times New Roman", Georgia, serif; --font-body: "PT Serif", Georgia, "Times New Roman", serif; /* Type scale */ --h1-size: clamp(40px, 5.4vw, 68px); --h1-leading: 1.08; --h1-tracking: -0.012em; --h2-size: clamp(26px, 2.9vw, 38px); --h2-leading: 1.15; --h2-tracking: -0.005em; --h3-size: 18px; --h3-leading: 1.3; --h3-tracking: 0.005em; --pullquote-size: clamp(22px, 2.2vw, 30px); --pullquote-leading: 1.35; --body-size: 17px; --body-leading: 1.6; --caption-size: 13px; --caption-leading: 1.5; --label-size: 11px; --label-tracking: 0.18em; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Layout */ --measure: 62ch; --rule-width: 1px; --rule-width-thick: 2px; --container: 1320px; --container-narrow: 920px; /* Corners */ --radius-0: 0; --radius-1: 2px; --radius-2: 4px; --radius-pill: 999px; /* Shadows */ --shadow-soft: 0 1px 2px rgba(58,58,58,0.06), 0 4px 14px rgba(58,58,58,0.06); --shadow-paper: 0 1px 0 rgba(58,58,58,0.08); --shadow-press: inset 0 1px 0 rgba(58,58,58,0.08); /* Motion */ --ease-quiet: cubic-bezier(0.2, 0.0, 0.0, 1.0); --ease-stand: cubic-bezier(0.4, 0.0, 0.2, 1.0); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; } /* Studio Artemist context — apply class="studio" on */ .studio { --bg: var(--ink-indigo); --bg-elevated: #34465A; --bg-inverse: var(--cream); --fg: var(--cream); --fg-muted: #BFC9D3; --fg-faint: #8A98A6; --fg-inverse: var(--charcoal); --rule: rgba(244, 236, 226, 0.14); --rule-strong: rgba(244, 236, 226, 0.6); --accent: var(--metallic); --accent-hover: var(--metallic); } /* ============================================================================= Reset + base ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-leading); font-weight: 400; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--dur-base) var(--ease-quiet), color var(--dur-base) var(--ease-quiet); } img { max-width: 100%; height: auto; display: block; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; color: var(--fg); margin: 0; text-wrap: pretty; } .h1, h1 { font-size: var(--h1-size); line-height: var(--h1-leading); letter-spacing: var(--h1-tracking); } .h2, h2 { font-size: var(--h2-size); line-height: var(--h2-leading); letter-spacing: var(--h2-tracking); } .h3, h3 { font-size: var(--h3-size); line-height: var(--h3-leading); letter-spacing: var(--h3-tracking); } p { margin: 0 0 var(--space-4); max-width: var(--measure); } p.wide { max-width: 78ch; } p.narrow { max-width: 48ch; } a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: rgba(139, 51, 49, 0.4); transition: color var(--dur-base) var(--ease-quiet), text-decoration-color var(--dur-base) var(--ease-quiet); } a:hover { color: var(--accent-hover); text-decoration-color: var(--accent-hover); } .studio a { color: var(--cream); text-decoration-color: rgba(244,236,226,0.4); } .studio a:hover { color: var(--cream); text-decoration-color: var(--cream); } em, .italic, cite, i { font-style: italic; } strong, b { font-weight: 700; } /* Caption / label */ .caption, figcaption { font-family: var(--font-body); font-size: var(--caption-size); line-height: var(--caption-leading); color: var(--fg-muted); max-width: 50ch; } .label { font-family: var(--font-body); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; font-weight: 400; color: var(--fg-muted); display: inline-block; } /* Hairlines */ hr { border: 0; border-top: var(--rule-width) solid var(--rule); margin: var(--space-7) 0; } hr.red { border: 0; border-top: var(--rule-width-thick) solid var(--accent); width: 64px; margin: var(--space-5) 0; } hr.brass { border: 0; border-top: var(--rule-width-thick) solid var(--metallic); width: 64px; margin: var(--space-5) 0; } hr.full { width: 100%; margin: 0; border-top: var(--rule-width) solid var(--rule); } /* Pull-quote */ .pullquote, blockquote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--pullquote-size); line-height: var(--pullquote-leading); color: var(--fg); margin: 0; max-width: 28ch; padding: 0; } .pullquote--wide { max-width: 38ch; } .attribution { display: block; margin-top: var(--space-4); font-family: var(--font-body); font-style: normal; font-size: var(--caption-size); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--fg-muted); } /* ============================================================================= Layout primitives ============================================================================= */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-7); } .container-narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-7); } .section { padding: var(--space-9) 0; } .section--tight { padding: var(--space-8) 0; } .section--loose { padding: var(--space-10) 0; } .section--cream-2 { background: var(--cream-2); } .section--indigo { background: var(--ink-indigo); color: var(--cream); } .section--charcoal { background: var(--charcoal); color: var(--cream); } .section--charcoal h1, .section--charcoal h2, .section--charcoal h3, .section--indigo h1, .section--indigo h2, .section--indigo h3 { color: var(--cream); } .section--charcoal .caption, .section--indigo .caption { color: rgba(244,236,226,0.7); } .section--charcoal hr, .section--indigo hr { border-top-color: rgba(244,236,226,0.14); } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-body); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-5); } .eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--accent); } .eyebrow--centered { justify-content: center; } .section-header { margin-bottom: var(--space-8); } .section-header h2 { max-width: 24ch; } /* Two-column rhythm */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; } .split--wide { gap: var(--space-9); } .split--inset { grid-template-columns: 1fr 1.4fr; } .split--inset-rev { grid-template-columns: 1.4fr 1fr; } @media (max-width: 880px) { .split, .split--wide, .split--inset, .split--inset-rev { grid-template-columns: 1fr; gap: var(--space-7); } } /* ============================================================================= Buttons ============================================================================= */ .btn { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); font-family: var(--font-body); font-size: 15px; letter-spacing: 0.02em; border-radius: var(--radius-0); border: 1px solid transparent; text-decoration: none; transition: background-color var(--dur-base) var(--ease-quiet), color var(--dur-base) var(--ease-quiet), border-color var(--dur-base) var(--ease-quiet), box-shadow var(--dur-base) var(--ease-quiet); } .btn--primary { background: var(--accent); color: var(--cream); border-color: var(--accent); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--cream); } .btn--primary:active { box-shadow: var(--shadow-press); } .btn--ghost { background: transparent; color: var(--fg); border-color: var(--charcoal); } .btn--ghost:hover { background: var(--charcoal); color: var(--cream); } .studio .btn--ghost { color: var(--cream); border-color: rgba(244,236,226,0.4); } .studio .btn--ghost:hover { background: var(--cream); color: var(--ink-indigo); border-color: var(--cream); } /* Inline arrow text-link */ .linkout { display: inline-flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-body); font-size: 15px; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; transition: color var(--dur-base) var(--ease-quiet), border-color var(--dur-base) var(--ease-quiet); } .linkout:hover { color: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; } .linkout::after { content: "→"; font-size: 14px; } .studio .linkout { color: var(--cream); border-color: var(--cream); } .studio .linkout:hover { color: var(--cream); border-color: var(--cream); } /* ============================================================================= Navbar ============================================================================= */ .nav-wrapper { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color var(--dur-base) var(--ease-quiet), background-color var(--dur-base) var(--ease-quiet); } .nav-wrapper.is-scrolled { border-bottom-color: var(--rule); } .studio .nav-wrapper { background: var(--ink-indigo); } .studio .nav-wrapper.is-scrolled { border-bottom-color: rgba(244,236,226,0.14); } .nav-inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); padding: var(--space-4) var(--space-7); } .nav-logo { display: inline-flex; align-items: center; text-decoration: none; } .nav-logo img { height: 56px; width: auto; } .studio .nav-logo img { filter: brightness(0) invert(0.94) sepia(0.15); } .nav-links { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; } .nav-links a { font-family: var(--font-body); font-size: 15px; color: var(--fg); text-decoration: none; letter-spacing: 0.005em; padding: var(--space-2) 0; border-bottom: 1px solid transparent; transition: color var(--dur-base) var(--ease-quiet), border-color var(--dur-base) var(--ease-quiet); } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); } .studio .nav-links a { color: var(--cream); } .studio .nav-links a:hover, .studio .nav-links a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--cream); } /* Dropdown */ .nav-item { position: relative; } .nav-dropdown { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); min-width: 200px; background: var(--bg); border: 1px solid var(--rule); padding: var(--space-3) 0; list-style: none; margin: 0; opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-quiet), visibility var(--dur-base) var(--ease-quiet); box-shadow: var(--shadow-soft); } .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; } .nav-dropdown a { display: block; padding: var(--space-3) var(--space-5); border: 0; white-space: nowrap; } .nav-dropdown a:hover { background: var(--cream-2); border-bottom-color: transparent; } .studio .nav-dropdown { background: var(--indigo-deep); border-color: rgba(244,236,226,0.14); } .studio .nav-dropdown a:hover { background: rgba(244,236,226,0.06); } /* Mobile nav toggle */ .nav-toggle { display: none; background: transparent; border: 0; padding: var(--space-2); color: var(--fg); } @media (max-width: 960px) { .nav-toggle { display: inline-flex; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--bg); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--space-3) var(--space-7); display: none; } .nav-links.is-open { display: flex; } .nav-links > li { width: 100%; border-top: 1px solid var(--rule); } .nav-links > li:first-child { border-top: 0; } .nav-links a { display: block; padding: var(--space-4) 0; } .nav-dropdown { position: static; transform: none; box-shadow: none; border: 0; opacity: 1; visibility: visible; padding: 0 0 var(--space-3) var(--space-5); background: transparent; } .nav-dropdown a { padding: var(--space-2) 0; } } /* ============================================================================= Hero ============================================================================= */ .hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch; min-height: 78vh; border-bottom: 1px solid var(--rule); } .hero__text { display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-9) var(--space-8) var(--space-9) var(--space-9); background: var(--bg); } .hero__text .label { margin-bottom: var(--space-6); } .hero__text h1 { margin-bottom: var(--space-5); max-width: 14ch; } .hero__text .lede { font-family: var(--font-body); font-size: 19px; line-height: 1.55; color: var(--fg); max-width: 36ch; } .hero__image { position: relative; background: var(--cream-2); overflow: hidden; } .hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } @media (max-width: 960px) { .hero { grid-template-columns: 1fr; min-height: auto; } .hero__image { aspect-ratio: 4/5; } .hero__text { padding: var(--space-8) var(--space-7); } } /* Type-led hero (no image) */ .hero--type { display: block; min-height: auto; border-bottom: 1px solid var(--rule); } .hero--type .hero__text { padding: var(--space-10) var(--space-7); max-width: var(--container); margin: 0 auto; } .hero--type h1 { max-width: 18ch; font-size: clamp(48px, 7vw, 96px); } /* Indigo hero variant */ .studio .hero { background: var(--ink-indigo); border-bottom-color: rgba(244,236,226,0.14); } .studio .hero__text { background: var(--ink-indigo); color: var(--cream); } .studio .hero__text .lede { color: var(--cream); } .studio .hero__image { background: var(--indigo-deep); } /* ============================================================================= Four-section grid (home centrepiece) ============================================================================= */ .four-sections { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .four-sections .section-card { display: flex; flex-direction: column; padding: var(--space-7) var(--space-6) var(--space-7); border-right: 1px solid var(--rule); background: var(--bg); text-decoration: none; color: var(--fg); transition: background-color var(--dur-base) var(--ease-quiet); position: relative; } .four-sections .section-card:last-child { border-right: 0; } .four-sections .section-card:hover { background: var(--cream-2); } .four-sections .section-card__num { font-family: var(--font-body); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-5); } .four-sections .section-card__image { aspect-ratio: 4/5; overflow: hidden; margin-bottom: var(--space-5); background: var(--cream-2); } .four-sections .section-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-quiet); } .four-sections .section-card:hover .section-card__image img { transform: scale(1.02); } .four-sections .section-card h3 { font-family: var(--font-display); font-style: italic; font-size: 28px; letter-spacing: -0.01em; margin-bottom: var(--space-3); color: var(--fg); } .four-sections .section-card p { font-size: 15px; color: var(--fg-muted); margin: 0; max-width: none; } .four-sections .section-card__arrow { margin-top: auto; padding-top: var(--space-5); font-family: var(--font-body); font-size: 14px; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; } @media (max-width: 1100px) { .four-sections { grid-template-columns: repeat(2, 1fr); } .four-sections .section-card:nth-child(2) { border-right: 0; } .four-sections .section-card:nth-child(1), .four-sections .section-card:nth-child(2) { border-bottom: 1px solid var(--rule); } } @media (max-width: 560px) { .four-sections { grid-template-columns: 1fr; } .four-sections .section-card { border-right: 0; border-bottom: 1px solid var(--rule); } .four-sections .section-card:last-child { border-bottom: 0; } } /* ============================================================================= Project card grid + press ============================================================================= */ .project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7) var(--space-6); } .project-grid--2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-7); } .project-grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-6) var(--space-5); } @media (max-width: 960px) { .project-grid, .project-grid--2, .project-grid--4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-4); } } @media (max-width: 560px) { .project-grid, .project-grid--2, .project-grid--4 { grid-template-columns: 1fr; } } .project-card { display: flex; flex-direction: column; text-decoration: none; color: var(--fg); } .project-card__image { aspect-ratio: 4/5; background: var(--cream-2); overflow: hidden; margin-bottom: var(--space-4); } .project-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-quiet); } .project-card:hover .project-card__image img { transform: scale(1.02); } .project-card__meta { font-family: var(--font-body); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-2); } .project-card__title { font-family: var(--font-display); font-style: italic; font-size: 22px; letter-spacing: -0.005em; margin-bottom: var(--space-2); color: var(--fg); } .project-card__desc { font-family: var(--font-body); font-size: 14px; color: var(--fg-muted); margin: 0; max-width: none; } /* Wide / landscape variant */ .project-card--wide .project-card__image { aspect-ratio: 16/10; } .project-card--square .project-card__image { aspect-ratio: 1/1; } /* ============================================================================= Press strip ============================================================================= */ .press-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); flex-wrap: wrap; padding-block: var(--space-5); } .press-strip__item { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--fg); letter-spacing: -0.005em; } .press-strip__item.label { font-style: normal; font-family: var(--font-body); font-size: var(--label-size); letter-spacing: var(--label-tracking); color: var(--fg-muted); text-transform: uppercase; } /* Press row (the archive) */ .press-row { display: grid; grid-template-columns: 200px 1fr auto; gap: var(--space-6); padding: var(--space-5) 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .press-row:last-child { border-bottom: 0; } .press-row__pub { font-family: var(--font-body); font-size: 15px; color: var(--fg); } .press-row__title { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--fg); letter-spacing: -0.005em; } .press-row__date { font-family: var(--font-body); font-size: 13px; color: var(--fg-muted); letter-spacing: 0.02em; white-space: nowrap; } @media (max-width: 720px) { .press-row { grid-template-columns: 1fr; gap: var(--space-2); } } /* ============================================================================= Five-stage flow (Consultancy) ============================================================================= */ .flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--rule-strong); } .flow__step { padding: var(--space-6) var(--space-5) var(--space-6) 0; border-right: 1px solid var(--rule); position: relative; } .flow__step:last-child { border-right: 0; } .flow__num { font-family: var(--font-body); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-4); } .flow__title { font-family: var(--font-display); font-size: 20px; font-style: italic; margin-bottom: var(--space-3); color: var(--fg); letter-spacing: -0.005em; } .flow__body { font-size: 14px; color: var(--fg-muted); margin: 0; max-width: none; } @media (max-width: 960px) { .flow { grid-template-columns: 1fr 1fr; } .flow__step { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--space-5) var(--space-4); } .flow__step:nth-child(even) { border-right: 0; } .flow__step:last-child { border-bottom: 0; } } @media (max-width: 560px) { .flow { grid-template-columns: 1fr; } .flow__step { border-right: 0; } } /* Six-step variant (Edit) — same component, 3 columns */ .flow--6 { grid-template-columns: repeat(3, 1fr); } .flow--6 .flow__step:nth-child(3n) { border-right: 0; } .flow--6 .flow__step:nth-child(-n+3) { border-bottom: 1px solid var(--rule); } @media (max-width: 960px) { .flow--6 { grid-template-columns: 1fr 1fr; } } /* ============================================================================= Three-cards (Consultancy verticals, Bespoke tracks) ============================================================================= */ .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .cards-3--4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-7); } .card { display: flex; flex-direction: column; background: var(--bg); border-top: 2px solid var(--accent); padding: var(--space-6) 0; text-decoration: none; color: var(--fg); } .card--image-top { border-top: 0; padding: 0; } .card__image { aspect-ratio: 4/3; overflow: hidden; background: var(--cream-2); margin-bottom: var(--space-5); } .card__image img { width: 100%; height: 100%; object-fit: cover; } .card__title { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.005em; margin-bottom: var(--space-3); color: var(--fg); } .card__title em { font-style: italic; } .card__body { font-size: 15px; color: var(--fg-muted); margin: 0 0 var(--space-5); max-width: none; } .card__link { margin-top: auto; font-family: var(--font-body); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; align-self: flex-start; } @media (max-width: 880px) { .cards-3, .cards-3--4 { grid-template-columns: 1fr; } } /* ============================================================================= Bespoke gallery (image grid, no captions) ============================================================================= */ .bespoke-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } .bespoke-gallery a { aspect-ratio: 4/5; overflow: hidden; background: var(--cream-2); display: block; } .bespoke-gallery a img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-quiet); } .bespoke-gallery a:hover img { transform: scale(1.03); } .bespoke-gallery a:nth-child(3n) { aspect-ratio: 1/1; } .bespoke-gallery a:nth-child(5n) { aspect-ratio: 3/4; } @media (max-width: 960px) { .bespoke-gallery { grid-template-columns: repeat(2, 1fr); } } /* ============================================================================= Values strip (About) ============================================================================= */ .values { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-7); border-top: 1px solid var(--rule); padding-top: var(--space-7); } .values__item h3 { font-family: var(--font-display); font-style: italic; font-size: 26px; margin-bottom: var(--space-4); color: var(--accent); letter-spacing: -0.005em; } .values__item p { font-size: 15px; color: var(--fg); margin: 0; max-width: none; } @media (max-width: 960px) { .values { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .values { grid-template-columns: 1fr; } } /* ============================================================================= Tag list / "A few things worth knowing" ============================================================================= */ .taglist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-8); border-top: 1px solid var(--rule); padding-top: var(--space-6); } .taglist__item { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-5); align-items: baseline; } .taglist__item dt { font-family: var(--font-body); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--fg-muted); margin: 0; } .taglist__item dd { margin: 0; font-size: 15px; color: var(--fg); max-width: none; } @media (max-width: 880px) { .taglist { grid-template-columns: 1fr; } } @media (max-width: 560px) { .taglist__item { grid-template-columns: 1fr; gap: var(--space-1); } } /* ============================================================================= Form embed placeholder ============================================================================= */ .form-embed { background: var(--bg-elevated); border: 1px solid var(--rule); padding: var(--space-7); max-width: 720px; } .form-embed__note { font-family: var(--font-body); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-4); } .form-embed__placeholder { border: 1px dashed var(--charcoal-50); padding: var(--space-7) var(--space-6); text-align: center; font-size: 14px; color: var(--fg-muted); background: var(--bg); } /* ============================================================================= Footer ============================================================================= */ .site-footer { background: var(--ink-indigo); color: var(--cream); padding: var(--space-9) 0 var(--space-7); } body[data-footer="charcoal"] .site-footer { background: var(--charcoal); } body[data-footer="cream"] .site-footer { background: var(--cream); color: var(--charcoal); border-top: 1px solid var(--cream-3); } /* SYSTEM FLAG: the brand guide says Artemist Red is for accents only, never a full field. This data-footer variant exists for the user to compare; default remains charcoal. */ body[data-footer="red"] .site-footer { background: var(--red-deep); } body[data-footer="red"] .site-footer__sections .sep { color: rgba(244,236,226,0.45); } .site-footer__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-7); } .site-footer__lede { font-family: var(--font-body); font-size: 15px; font-style: italic; color: rgba(244,236,226,0.7); margin-bottom: var(--space-5); letter-spacing: 0.005em; } body[data-footer="cream"] .site-footer__lede { color: var(--charcoal-70); } .site-footer__sections { display: flex; flex-wrap: wrap; gap: var(--space-7); align-items: baseline; margin-bottom: var(--space-8); padding-bottom: var(--space-7); border-bottom: 1px solid rgba(244,236,226,0.14); } body[data-footer="cream"] .site-footer__sections { border-bottom-color: var(--cream-3); } .site-footer__sections a { font-family: var(--font-display); font-style: italic; font-size: clamp(28px, 3vw, 40px); color: var(--cream); text-decoration: none; letter-spacing: -0.005em; border-bottom: 1px solid transparent; padding-bottom: 4px; transition: border-color var(--dur-base) var(--ease-quiet); } body[data-footer="cream"] .site-footer__sections a { color: var(--charcoal); } .site-footer__sections a:hover { border-bottom-color: var(--cream); } body[data-footer="cream"] .site-footer__sections a:hover { border-bottom-color: var(--charcoal); } .site-footer__sections .sep { color: var(--accent); font-size: clamp(28px, 3vw, 40px); } body.studio .site-footer__sections .sep { color: var(--metallic); } body.studio .site-footer__signature span span { color: var(--metallic) !important; } body[data-footer="cream"] .site-footer__sections .sep { color: var(--accent); } .site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-7); } @media (max-width: 880px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } } .site-footer__col h4 { font-family: var(--font-body); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; color: rgba(244,236,226,0.55); margin: 0 0 var(--space-4); font-weight: 400; } body[data-footer="cream"] .site-footer__col h4 { color: var(--charcoal-50); } .site-footer__col ul { list-style: none; margin: 0; padding: 0; } .site-footer__col li { margin-bottom: var(--space-3); } .site-footer__col a { color: var(--cream); text-decoration: none; font-size: 14px; border-bottom: 1px solid transparent; padding-bottom: 1px; transition: border-color var(--dur-base) var(--ease-quiet); } body[data-footer="cream"] .site-footer__col a { color: var(--charcoal); } .site-footer__col a:hover { border-bottom-color: var(--cream); } body[data-footer="cream"] .site-footer__col a:hover { border-bottom-color: var(--charcoal); } .site-footer__brand { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--cream); margin-bottom: var(--space-4); letter-spacing: -0.005em; } body[data-footer="cream"] .site-footer__brand { color: var(--charcoal); } .site-footer__brand-body { font-size: 14px; color: rgba(244,236,226,0.75); max-width: 38ch; margin: 0; } body[data-footer="cream"] .site-footer__brand-body { color: var(--charcoal-70); } .site-footer__signature { font-family: var(--font-display); font-style: italic; font-size: 18px; color: rgba(244,236,226,0.75); padding-top: var(--space-6); border-top: 1px solid rgba(244,236,226,0.14); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; } body[data-footer="cream"] .site-footer__signature { color: var(--charcoal-70); border-top-color: var(--cream-3); } .site-footer__signature .meta { font-style: normal; font-family: var(--font-body); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; color: rgba(244,236,226,0.5); } body[data-footer="cream"] .site-footer__signature .meta { color: var(--charcoal-50); } /* ============================================================================= Floating WhatsApp button ============================================================================= */ .fab-whatsapp { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 100; display: inline-flex; align-items: center; gap: var(--space-3); background: var(--accent); color: var(--cream); text-decoration: none; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; padding: var(--space-3) var(--space-5); border-radius: var(--radius-0); box-shadow: var(--shadow-soft); transition: background-color var(--dur-base) var(--ease-quiet), color var(--dur-base) var(--ease-quiet); } .fab-whatsapp:hover { background: var(--accent-hover); color: var(--cream); text-decoration: none; } .fab-whatsapp svg { width: 18px; height: 18px; } .fab-whatsapp .fab-whatsapp__label { display: inline; } @media (max-width: 560px) { .fab-whatsapp { padding: var(--space-3); } .fab-whatsapp .fab-whatsapp__label { display: none; } } /* ============================================================================= Address block / Studio + Experience Centre ============================================================================= */ .address-block { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--fg); } .address-block strong { font-family: var(--font-display); font-weight: 400; font-size: 20px; font-style: italic; display: block; margin-bottom: var(--space-3); color: var(--fg); letter-spacing: -0.005em; } /* Team grid */ .team-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); } .team-grid__cell { aspect-ratio: 3/4; background: var(--cream-2); position: relative; overflow: hidden; } .team-grid__cell--feature { grid-column: span 2; grid-row: span 2; aspect-ratio: 1/1; } .team-grid__cell img { width: 100%; height: 100%; object-fit: cover; } .team-grid__cell__caption { position: absolute; inset: auto 0 0 0; padding: var(--space-3) var(--space-4); background: linear-gradient(to top, rgba(58,58,58,0.85), rgba(58,58,58,0)); color: var(--cream); font-family: var(--font-body); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; } .team-grid__cell--feature .team-grid__cell__caption { padding: var(--space-5); } .team-grid__cell--feature .team-grid__cell__caption strong { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 22px; text-transform: none; letter-spacing: -0.005em; display: block; margin-bottom: var(--space-1); } @media (max-width: 960px) { .team-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } /* Mediums list (About) */ .medium-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--rule-strong); } .medium-list dt { padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); font-family: var(--font-display); font-size: 22px; font-style: italic; letter-spacing: -0.005em; } .medium-list dd { padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); font-family: var(--font-body); font-size: 14px; color: var(--fg-muted); margin: 0; max-width: none; } @media (max-width: 720px) { .medium-list { grid-template-columns: 1fr; } .medium-list dd { padding-top: 0; } } /* ============================================================================= Bullet-list ("What we do" section) ============================================================================= */ .bullet-list { list-style: none; margin: 0; padding: 0; max-width: 78ch; } .bullet-list li { padding: var(--space-5) 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 160px 1fr; gap: var(--space-6); align-items: baseline; } .bullet-list li:first-child { border-top: 1px solid var(--rule); } .bullet-list li strong { font-family: var(--font-display); font-style: italic; font-size: 18px; font-weight: 400; color: var(--fg); letter-spacing: -0.005em; } .bullet-list li span { font-size: 15px; color: var(--fg-muted); } @media (max-width: 720px) { .bullet-list li { grid-template-columns: 1fr; gap: var(--space-2); } } /* ============================================================================= Studio (Indigo) page accents ============================================================================= */ .studio .section--invert { background: var(--cream); color: var(--charcoal); } .studio .section--invert h2, .studio .section--invert h3 { color: var(--charcoal); } .studio .section--invert a { color: var(--accent); border-color: var(--accent); } /* What you'll find list — vertical, indigo */ .catalog-list { list-style: none; margin: 0; padding: 0; } .catalog-list li { padding: var(--space-5) 0; border-bottom: 1px solid rgba(244,236,226,0.14); display: grid; grid-template-columns: 220px 1fr; gap: var(--space-6); align-items: baseline; } .catalog-list li:first-child { border-top: 1px solid rgba(244,236,226,0.14); } .catalog-list li strong { font-family: var(--font-display); font-style: italic; font-size: 22px; font-weight: 400; letter-spacing: -0.005em; } .catalog-list li span { font-size: 14px; color: rgba(244,236,226,0.7); } @media (max-width: 720px) { .catalog-list li { grid-template-columns: 1fr; gap: var(--space-2); } } /* ============================================================================= Skip-link + utility ============================================================================= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .spacer-7 { height: var(--space-7); } .spacer-9 { height: var(--space-9); } /* Selection */ ::selection { background: var(--artemist-red); color: var(--cream); } /* ============================================================================= EDITORIAL — high-fidelity layout vocabulary Magazine-scale typography, asymmetric grids, contents-page treatments. Used on home.html (v2) and to be propagated across the rest of the site. ============================================================================= */ /* Display-XL — masthead-scale italic Caslon */ .display-xl { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(72px, 13vw, 220px); line-height: 0.94; letter-spacing: -0.02em; color: var(--fg); margin: 0; text-wrap: balance; } .display-l { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(48px, 7vw, 96px); line-height: 1.0; letter-spacing: -0.015em; color: var(--fg); margin: 0; } .display-m { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(36px, 4.5vw, 62px); line-height: 1.1; letter-spacing: -0.01em; color: var(--fg); margin: 0; } /* Small-caps editorial label */ .smallcaps { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--charcoal-70); display: inline-block; } .smallcaps--brass { color: var(--metallic); } .smallcaps--red { color: var(--accent); } .smallcaps--cream { color: rgba(244,236,226,0.7); } /* Hairline rules */ .rule-hairline { border: 0; border-top: 1px solid var(--charcoal); margin: 0; } .rule-hairline--cream { border-top-color: rgba(244,236,226,0.45); } /* Vertical caption rail (image meta running vertically) */ .v-caption { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-muted); } /* ============================================================================= MASTHEAD — opening spread ============================================================================= */ .masthead { position: relative; padding: var(--space-5) 0 var(--space-9); background: var(--bg); border-bottom: 1px solid var(--charcoal); } .masthead__strip { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-7); display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--space-5); border-bottom: 1px solid var(--rule); margin-bottom: var(--space-8); } .masthead__strip .smallcaps { color: var(--charcoal-70); } .masthead__grid { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-7); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-9); align-items: start; } .masthead__title-block { padding-top: var(--space-5); } .masthead__title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(80px, 13.5vw, 232px); line-height: 0.92; letter-spacing: -0.025em; color: var(--fg); margin: 0; } .masthead__title .period { color: var(--accent); } .masthead__sub { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; color: var(--fg); max-width: 22ch; margin: var(--space-6) 0 var(--space-5); } .masthead__meta { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: baseline; margin-top: var(--space-7); padding-top: var(--space-5); border-top: 2px solid var(--accent); max-width: 720px; } .masthead__meta dt { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted); margin: 0; } .masthead__meta dd { font-family: var(--font-display); font-style: italic; font-size: 22px; letter-spacing: -0.005em; color: var(--fg); margin: 0; } .masthead__image { position: relative; aspect-ratio: 3/4.2; margin-right: calc(-1 * var(--space-7)); background: var(--cream-2); overflow: hidden; } .masthead__image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .masthead__caption { display: flex; gap: var(--space-4); margin-top: var(--space-4); padding-right: var(--space-2); align-items: flex-start; } .masthead__caption-num { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--accent); letter-spacing: -0.005em; } .masthead__caption-body { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--fg-muted); font-style: italic; max-width: 38ch; } @media (max-width: 960px) { .masthead__grid { grid-template-columns: 1fr; gap: var(--space-7); } .masthead__image { margin-right: 0; aspect-ratio: 4/5; } .masthead__strip { flex-wrap: wrap; gap: var(--space-3); } } /* ============================================================================= CONTENTS LIST — the four-section centrepiece, magazine TOC style ============================================================================= */ .contents-list { border-top: 2px solid var(--charcoal); } .contents-list__header { max-width: var(--container); margin: 0 auto; padding: var(--space-9) var(--space-7) var(--space-6); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: end; } .contents-list__header h2 { font-family: var(--font-display); font-style: italic; font-size: clamp(40px, 5vw, 76px); line-height: 1.0; letter-spacing: -0.015em; color: var(--fg); margin: 0; max-width: 14ch; } .contents-list__header p { font-size: 17px; color: var(--fg-muted); max-width: 44ch; margin: 0; } @media (max-width: 880px) { .contents-list__header { grid-template-columns: 1fr; gap: var(--space-5); } } .contents-list__row { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(0, 5fr) minmax(280px, 3fr); gap: var(--space-7); align-items: center; max-width: var(--container); margin: 0 auto; padding: var(--space-6) var(--space-7); border-top: 1px solid var(--rule); text-decoration: none; color: var(--fg); transition: background-color var(--dur-base) var(--ease-quiet); position: relative; } .contents-list__row:hover { background: var(--cream-2); } .contents-list__row:hover .contents-list__num { color: var(--accent); } .contents-list__row:hover .contents-list__image img { transform: scale(1.03); } .contents-list__row:last-child { border-bottom: 1px solid var(--rule); } .contents-list__num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(72px, 9vw, 132px); line-height: 0.9; letter-spacing: -0.02em; color: var(--charcoal-70); transition: color var(--dur-base) var(--ease-quiet); } .contents-list__body { padding-block: var(--space-3); } .contents-list__title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(34px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.012em; color: var(--fg); margin: 0 0 var(--space-3); } .contents-list__desc { font-size: 16px; line-height: 1.55; color: var(--fg-muted); max-width: 52ch; margin: 0 0 var(--space-4); } .contents-list__link { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); } .contents-list__image { aspect-ratio: 4/3; overflow: hidden; background: var(--cream-2); } .contents-list__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-quiet); } @media (max-width: 1100px) { .contents-list__row { grid-template-columns: 100px 1fr 240px; gap: var(--space-5); } } @media (max-width: 880px) { .contents-list__row { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-7) var(--space-7); } .contents-list__image { aspect-ratio: 16/9; order: 3; } .contents-list__num { font-size: clamp(64px, 14vw, 96px); } } /* ============================================================================= FEATURE — two-column editorial passage with drop cap ============================================================================= */ .feature { background: var(--bg); padding: var(--space-10) 0; border-bottom: 1px solid var(--rule); } .feature__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-7); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); align-items: start; } .feature__side .smallcaps { margin-bottom: var(--space-5); } .feature__side { position: sticky; top: 96px; padding-right: var(--space-5); border-right: 1px solid var(--rule); } .feature__quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(34px, 4vw, 60px); line-height: 1.1; letter-spacing: -0.012em; color: var(--fg); margin: 0 0 var(--space-6); max-width: 22ch; } .feature__attribution { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted); padding-top: var(--space-4); border-top: 2px solid var(--metallic); display: inline-block; padding-right: var(--space-7); } .feature__body { font-size: 17px; line-height: 1.65; color: var(--fg); } .feature__body .lede { font-size: 19px; line-height: 1.55; margin: 0 0 var(--space-5); max-width: none; } .feature__body .lede .drop-cap { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 6.4em; float: left; line-height: 0.8; margin: 0.04em 0.12em -0.05em -0.04em; color: var(--accent); } .feature__body__cols { columns: 2; column-gap: var(--space-7); margin-top: var(--space-5); } .feature__body__cols p { max-width: none; margin: 0 0 var(--space-5); break-inside: avoid; } @media (max-width: 960px) { .feature__inner { grid-template-columns: 1fr; gap: var(--space-7); } .feature__side { position: static; border-right: 0; border-bottom: 1px solid var(--rule); padding: 0 0 var(--space-5); } .feature__body__cols { columns: 1; } .closing__channel-name { white-space: normal; } } /* ============================================================================= ARCHIVE — asymmetric project grid ============================================================================= */ .archive { padding: var(--space-10) 0; background: var(--cream-2); border-bottom: 1px solid var(--rule); } .archive__head { max-width: var(--container); margin: 0 auto var(--space-8); padding: 0 var(--space-7); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-6); align-items: end; } .archive__head h2 { font-family: var(--font-display); font-style: italic; font-size: clamp(40px, 5vw, 76px); line-height: 1.0; letter-spacing: -0.015em; margin: 0; max-width: 18ch; } .archive__head p { font-size: 15px; color: var(--fg-muted); max-width: 40ch; margin: 0; text-align: right; } .archive__grid { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-7); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6) var(--space-5); } .archive__item { display: flex; flex-direction: column; text-decoration: none; color: var(--fg); } .archive__item .archive__media { overflow: hidden; background: var(--cream-3); margin-bottom: var(--space-4); } .archive__item .archive__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-quiet); } .archive__item:hover .archive__media img { transform: scale(1.02); } .archive__item--feature { grid-column: span 7; } .archive__item--feature .archive__media { aspect-ratio: 4/3; } .archive__item--side { grid-column: span 5; } .archive__item--side .archive__media { aspect-ratio: 4/5; } .archive__item--third { grid-column: span 4; } .archive__item--third .archive__media { aspect-ratio: 3/4; } .archive__item--half { grid-column: span 6; } .archive__item--half .archive__media { aspect-ratio: 16/10; } .archive__meta { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-2); } .archive__title { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; letter-spacing: -0.005em; color: var(--fg); margin: 0 0 var(--space-2); } .archive__desc { font-family: var(--font-body); font-size: 14px; color: var(--fg-muted); margin: 0; max-width: 44ch; } @media (max-width: 960px) { .archive__head { grid-template-columns: 1fr; gap: var(--space-3); } .archive__head p { text-align: left; } .archive__grid { grid-template-columns: repeat(6, 1fr); } .archive__item--feature, .archive__item--side { grid-column: span 6; } .archive__item--third, .archive__item--half { grid-column: span 3; } } @media (max-width: 560px) { .archive__grid { grid-template-columns: 1fr; } .archive__item--feature, .archive__item--side, .archive__item--third, .archive__item--half { grid-column: span 1; } } /* ============================================================================= PRESS LIST — magazine archive treatment ============================================================================= */ .press-list-section { padding: var(--space-10) 0; background: var(--bg); border-bottom: 1px solid var(--rule); } .press-list-section__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-7); } .press-list-section h2 { font-family: var(--font-display); font-style: italic; font-size: clamp(40px, 5vw, 76px); line-height: 1.0; letter-spacing: -0.015em; margin: 0 0 var(--space-8); } .press-list { border-top: 2px solid var(--charcoal); } .press-list__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) auto; gap: var(--space-6); padding: var(--space-5) 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .press-list__pub { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.005em; color: var(--fg); } .press-list__title { font-family: var(--font-body); font-size: 16px; line-height: 1.45; color: var(--fg); max-width: 70ch; } .press-list__title em { font-style: italic; } .press-list__date { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; } @media (max-width: 720px) { .press-list__row { grid-template-columns: 1fr; gap: var(--space-2); } } /* ============================================================================= CLOSING MASTHEAD — "Begin a project." Reduced title scale + wider max-width to stop overlap on smaller viewports. ============================================================================= */ .closing { background: var(--charcoal); color: var(--cream); padding: var(--space-9) 0 var(--space-8); border-bottom: 1px solid rgba(244,236,226,0.14); } .closing__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-7); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: end; } .closing__title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(28px, 3.6vw, 56px); line-height: 0.96; letter-spacing: -0.02em; color: var(--cream); margin: 0; max-width: 14ch; overflow-wrap: break-word; } .closing__title .period { color: var(--accent); } .closing__channels { display: grid; gap: var(--space-6); } .closing__channel { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--space-5); padding: var(--space-5) 0; border-top: 1px solid rgba(244,236,226,0.2); align-items: baseline; text-decoration: none; color: var(--cream); transition: padding var(--dur-base) var(--ease-quiet); } .closing__channel:hover { padding-left: var(--space-3); } .closing__channel:last-child { border-bottom: 1px solid rgba(244,236,226,0.2); } .closing__channel-num { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--accent); } .closing__channel-name { font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -0.005em; color: var(--cream); } @media (min-width: 561px) { .closing__channel-name { white-space: nowrap; } } .closing__channel-action { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244,236,226,0.7); } @media (max-width: 960px) { .closing__inner { grid-template-columns: 1fr; gap: var(--space-7); } .closing__channel { grid-template-columns: 24px 1fr auto; } .closing__channel-name { white-space: normal; } } @media (max-width: 560px) { .closing__channel { grid-template-columns: 24px 1fr; } .closing__channel-action { grid-column: 2; padding-top: var(--space-1); } } } /* ============================================================================= STUDIO PARAGRAPH — narrow centred editorial column ============================================================================= */ .editorial-column { padding: var(--space-10) 0; background: var(--bg); text-align: left; } .editorial-column__inner { max-width: 760px; margin: 0 auto; padding: 0 var(--space-7); } .editorial-column .smallcaps { display: block; margin-bottom: var(--space-6); } .editorial-column__intro { font-family: var(--font-display); font-style: italic; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.25; letter-spacing: -0.005em; color: var(--fg); margin: 0 0 var(--space-7); max-width: 30ch; } .editorial-column__body { font-size: 17px; line-height: 1.7; color: var(--fg); max-width: 58ch; } .editorial-column__body p { max-width: none; } .editorial-column__sig { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 2px solid var(--metallic); display: flex; gap: var(--space-5); align-items: baseline; flex-wrap: wrap; } .editorial-column__sig-name { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--fg); } .editorial-column__sig-role { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted); } /* ============================================================================= CINEMA PAGE HEADER — interior pages (smaller than home cinema-hero) Single image, single corner type, ~80vh ============================================================================= */ .cinema-page { position: relative; height: 78vh; min-height: 540px; width: 100%; background: var(--cream); overflow: hidden; } .cinema-page__image { position: absolute; top: -6%; left: 0; right: 0; height: 112%; z-index: 0; will-change: transform; } .cinema-page__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .cinema-page__vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; /* Strong cream scrim at left + bottom where the (charcoal) hero text sits, clearing toward the upper-right so the artwork still reads. Fixes the unreadable-overlay bug on Hospitality / Residential per 2026-06-16. */ background: linear-gradient(90deg, rgba(244,236,226,0.92) 0%, rgba(244,236,226,0.55) 30%, rgba(244,236,226,0) 62%), linear-gradient(0deg, rgba(244,236,226,0.78) 0%, rgba(244,236,226,0) 42%); } .cinema-page__strip { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding: var(--space-5) var(--space-7); display: flex; justify-content: space-between; align-items: baseline; color: var(--charcoal); } .cinema-page__strip .smallcaps { color: var(--charcoal-70); } .cinema-page__content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-9) var(--space-7) var(--space-8); color: var(--charcoal); will-change: transform, opacity; } .cinema-page__eyebrow { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--charcoal-70); margin-bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-3); } .cinema-page__eyebrow::before { content: ""; width: 36px; height: 2px; background: var(--accent); } .cinema-page__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 60px); line-height: 1.0; letter-spacing: -0.02em; color: var(--charcoal); margin: 0; max-width: 18ch; text-wrap: balance; } .cinema-page__title em { font-style: italic; } .cinema-page__title .period { color: var(--accent); } .cinema-page__lede { font-family: var(--font-display); font-style: italic; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.4; color: var(--charcoal); margin: var(--space-5) 0 0; max-width: 46ch; } /* Indigo variant — for Studio */ .studio .cinema-page { background: var(--ink-indigo); } .studio .cinema-page__vignette { background: linear-gradient(180deg, rgba(31,45,61,0.5) 0%, rgba(31,45,61,0.1) 26%, rgba(31,45,61,0.2) 72%, rgba(31,45,61,0.7) 100%); } .studio .cinema-page__content, .studio .cinema-page__strip { color: var(--cream); } .studio .cinema-page__strip .smallcaps { color: rgba(244,236,226,0.7); } .studio .cinema-page__title { color: var(--cream); } .studio .cinema-page__title .period { color: var(--metallic); } .studio .cinema-page__lede { color: var(--cream); } .studio .cinema-page__eyebrow { color: rgba(244,236,226,0.7); } /* Type-only page header (no image) — About, Press */ .cinema-page--type { height: auto; min-height: 0; padding: 18vh var(--space-7) 14vh; background: var(--cream); display: block; } .cinema-page--type .cinema-page__content { position: static; padding: 0; max-width: 1600px; margin: 0 auto; } .cinema-page--type .cinema-page__title { max-width: 22ch; } @media (max-width: 720px) { .cinema-page { height: 72vh; min-height: 520px; } .cinema-page__content { padding: var(--space-7) var(--space-5) var(--space-6); } } /* ============================================================================= CINEMA SECTION — content block with editorial-scale header Tightened vertical rhythm per 2026-05-28 feedback. ============================================================================= */ .cinema-section { padding: clamp(32px, 5vh, 64px) 0; background: var(--bg); border-bottom: 1px solid var(--rule); } .cinema-section--cream-2 { background: var(--cream-2); } .cinema-section--charcoal { background: var(--charcoal); color: var(--cream); border-bottom-color: rgba(244,236,226,0.14); } .cinema-section--charcoal h2, .cinema-section--charcoal h3 { color: var(--cream); } .cinema-section--charcoal p { color: rgba(244,236,226,0.85); } .cinema-section--indigo { background: var(--ink-indigo); color: var(--cream); border-bottom-color: rgba(244,236,226,0.14); } .cinema-section--indigo h2, .cinema-section--indigo h3 { color: var(--cream); } .cinema-section--indigo p { color: rgba(244,236,226,0.85); } .cinema-section__inner { max-width: 1600px; margin: 0 auto; padding: 0 var(--space-7); } .cinema-section__head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: var(--space-7); align-items: end; margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--rule); } .cinema-section--charcoal .cinema-section__head, .cinema-section--indigo .cinema-section__head { border-bottom-color: rgba(244,236,226,0.14); } .cinema-section__head--center { grid-template-columns: 1fr; text-align: center; border-bottom: 0; padding-bottom: 0; } .cinema-section__eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-5); display: inline-flex; align-items: center; gap: var(--space-3); } .cinema-section__eyebrow::before { content: ""; width: 32px; height: 1.5px; background: var(--accent); } .cinema-section--charcoal .cinema-section__eyebrow, .cinema-section--indigo .cinema-section__eyebrow { color: rgba(244,236,226,0.7); } body.studio .cinema-section__eyebrow::before, body.studio .cinema-page__eyebrow::before { background: var(--metallic); } .cinema-section__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.8vw, 42px); line-height: 1.04; letter-spacing: -0.015em; margin: 0; max-width: 22ch; text-wrap: balance; } .cinema-section__title em { font-style: italic; } .cinema-section__title .red { color: var(--accent); } .cinema-section__head-body { font-size: 15px; line-height: 1.6; color: var(--fg-muted); max-width: 50ch; } .cinema-section--charcoal .cinema-section__head-body, .cinema-section--indigo .cinema-section__head-body { color: rgba(244,236,226,0.85); } .cinema-section__head-body p { margin: 0 0 var(--space-4); } .cinema-section__head-body p:last-child { margin: 0; } @media (max-width: 880px) { .cinema-section__head { grid-template-columns: 1fr; gap: var(--space-5); } } /* ============================================================================= CINEMA FLOW — vertical numbered process (replaces flow on cinematic pages) ============================================================================= */ .cinema-flow { display: grid; gap: 0; border-top: 1px solid var(--charcoal); } .cinema-section--charcoal .cinema-flow, .cinema-section--indigo .cinema-flow { border-top-color: rgba(244,236,226,0.4); } .cinema-flow__step { display: grid; grid-template-columns: minmax(140px, 0.9fr) minmax(0, 4fr) minmax(0, 4fr); gap: var(--space-6); padding: var(--space-5) 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .cinema-section--charcoal .cinema-flow__step, .cinema-section--indigo .cinema-flow__step { border-bottom-color: rgba(244,236,226,0.14); } .cinema-flow__num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(30px, 3.4vw, 52px); line-height: 0.9; letter-spacing: -0.02em; color: var(--charcoal-50); } .cinema-section--charcoal .cinema-flow__num, .cinema-section--indigo .cinema-flow__num { color: rgba(244,236,226,0.4); } .cinema-flow__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.12; letter-spacing: -0.01em; color: var(--fg); margin: 0; } .cinema-section--charcoal .cinema-flow__title, .cinema-section--indigo .cinema-flow__title { color: var(--cream); } .cinema-flow__title em { font-style: italic; } .cinema-flow__body { font-size: 15px; line-height: 1.55; color: var(--fg-muted); margin: 0; max-width: 46ch; } .cinema-section--charcoal .cinema-flow__body, .cinema-section--indigo .cinema-flow__body { color: rgba(244,236,226,0.85); } @media (max-width: 880px) { .cinema-flow__step { grid-template-columns: 1fr; gap: var(--space-3); } .cinema-flow__num { font-size: clamp(36px, 11vw, 56px); } } /* ============================================================================= CINEMA SPLIT — two-column editorial layout, sticky left ============================================================================= */ .cinema-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); align-items: start; } .cinema-split--even { grid-template-columns: 1fr 1fr; } .cinema-split__side { position: sticky; top: 96px; } .cinema-split__side .cinema-quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -0.01em; color: var(--fg); margin: 0 0 var(--space-5); max-width: 26ch; } .cinema-section--charcoal .cinema-quote, .cinema-section--indigo .cinema-quote { color: var(--cream); } .cinema-split__body { font-size: 15px; line-height: 1.6; } .cinema-split__body p { max-width: none; margin: 0 0 var(--space-5); } .cinema-split__body p:last-child { margin: 0; } @media (max-width: 960px) { .cinema-split, .cinema-split--even { grid-template-columns: 1fr; gap: var(--space-6); } .cinema-split__side { position: static; } } /* ============================================================================= CINEMA LIST — large vertical bullet list with hairline divisions ============================================================================= */ .cinema-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--charcoal); } .cinema-section--charcoal .cinema-list, .cinema-section--indigo .cinema-list { border-top-color: rgba(244,236,226,0.4); } .cinema-list__item { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .cinema-section--charcoal .cinema-list__item, .cinema-section--indigo .cinema-list__item { border-bottom-color: rgba(244,236,226,0.14); } .cinema-list__item strong { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -0.005em; color: var(--fg); } .cinema-section--charcoal .cinema-list__item strong, .cinema-section--indigo .cinema-list__item strong { color: var(--cream); } .cinema-list__item span { font-size: 14px; line-height: 1.55; color: var(--fg-muted); } .cinema-section--charcoal .cinema-list__item span, .cinema-section--indigo .cinema-list__item span { color: rgba(244,236,226,0.85); } @media (max-width: 720px) { .cinema-list__item { grid-template-columns: 1fr; gap: var(--space-2); } } /* ============================================================================= CINEMA FORM — embedded form placeholder, editorial framing ============================================================================= */ .cinema-form { background: var(--cream-2); border: 1px solid var(--charcoal); padding: var(--space-8) var(--space-7); } .cinema-form__label { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-4); display: block; } .cinema-form__title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.005em; color: var(--fg); margin: 0 0 var(--space-3); } .cinema-form__body { font-size: 15px; color: var(--fg-muted); margin: 0 0 var(--space-6); } .cinema-form__placeholder { border: 1px dashed var(--charcoal-50); padding: var(--space-7) var(--space-6); text-align: center; font-family: var(--font-body); font-size: 13px; color: var(--fg-muted); background: var(--bg); letter-spacing: 0.04em; text-transform: uppercase; } /* ============================================================================= DIRECTORY — email / address table at editorial scale ============================================================================= */ .directory { border-top: 1px solid var(--charcoal); margin: 0; padding: 0; } .directory__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-6); padding: var(--space-5) 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .directory__label { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted); } .directory__value { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -0.005em; color: var(--fg); } .directory__value a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; } .directory__value a:hover { color: var(--accent); } @media (max-width: 720px) { .directory__row { grid-template-columns: 1fr; gap: var(--space-2); } } /* ============================================================================= CINEMA RECORD — press / project record row at editorial scale ============================================================================= */ .cinema-records { border-top: 1px solid var(--charcoal); } .cinema-records__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) 150px; gap: var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); align-items: baseline; transition: padding var(--dur-base) var(--ease-quiet); } .cinema-records__row:hover { padding-left: var(--space-3); } .cinema-records__date { text-align: right; } .cinema-records__pub { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -0.005em; color: var(--fg); } .cinema-records__title { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--fg); max-width: 64ch; } .cinema-records__title em { font-style: italic; } .cinema-records__date { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; } @media (max-width: 720px) { .cinema-records__row { grid-template-columns: 1fr; gap: var(--space-2); } } /* ============================================================================= CLIENTS BAND + CASE STUDIES (hospitality named projects) ============================================================================= */ .clients-band { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); align-items: baseline; justify-content: center; text-align: center; border-top: 1px solid var(--charcoal); border-bottom: 1px solid var(--charcoal); padding: var(--space-6) 0; } .clients-band__name { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -0.005em; color: var(--fg); } .cinema-section--charcoal .clients-band { border-color: rgba(244,236,226,0.4); } .cinema-section--charcoal .clients-band__name { color: var(--cream); } .case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-6); } @media (max-width: 760px) { .case-grid { grid-template-columns: 1fr; } } .case-card { display: flex; flex-direction: column; text-decoration: none; color: var(--fg); } .case-card__media { aspect-ratio: 4/3; overflow: hidden; background: var(--cream-2); margin-bottom: var(--space-4); } .case-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-quiet); } .case-card:hover .case-card__media img { transform: scale(1.03); } .case-card__meta { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-2); } .case-card__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -0.012em; color: var(--fg); margin: 0 0 var(--space-2); } .case-card__name em { font-style: italic; } .case-card__scope { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--fg-muted); margin: 0; max-width: 46ch; } /* ============================================================================= CINEMA — viewport-scale typographic direction (25residences-inspired) Massive type, one-thing-per-screen, cycling navigation. All Caslon. ============================================================================= */ /* Cinema hero — full-bleed image with corner typography */ .cinema-hero { position: relative; height: 100vh; min-height: 640px; width: 100%; background: var(--cream); overflow: hidden; } .cinema-hero__image { position: absolute; top: -8%; left: 0; right: 0; height: 116%; z-index: 0; will-change: transform; } .cinema-hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .cinema-hero__vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(244,236,226,0.42) 0%, rgba(244,236,226,0) 24%, rgba(244,236,226,0) 70%, rgba(244,236,226,0.30) 100%), linear-gradient(135deg, rgba(244,236,226,0.40) 0%, rgba(244,236,226,0) 30%), linear-gradient(315deg, rgba(244,236,226,0.42) 0%, rgba(244,236,226,0) 32%); } .cinema-hero__strip { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding: var(--space-5) var(--space-7); display: flex; justify-content: space-between; align-items: baseline; color: var(--charcoal); } .cinema-hero__brand { display: inline-flex; align-items: baseline; gap: var(--space-3); } .cinema-hero__monogram { width: 28px; height: 28px; font-family: var(--font-display); font-style: italic; font-size: 32px; line-height: 1; color: var(--accent); transform: translateY(2px); } .cinema-hero__brand-text { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--charcoal); } .cinema-hero__top { position: absolute; top: 7vh; left: var(--space-7); z-index: 2; color: var(--charcoal); will-change: transform, opacity; } .cinema-hero__top .word { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 5vw, 82px); line-height: 0.9; letter-spacing: -0.022em; } .cinema-hero__bottom { position: absolute; bottom: 9vh; right: var(--space-7); z-index: 2; text-align: right; color: var(--charcoal); will-change: transform, opacity; } .cinema-hero__bottom .word { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(38px, 5vw, 82px); line-height: 0.9; letter-spacing: -0.012em; color: var(--charcoal); } .cinema-hero__meta { position: absolute; bottom: var(--space-7); left: var(--space-7); z-index: 2; } .cinema-hero__meta-title { font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--charcoal); margin-bottom: var(--space-1); text-shadow: 0 1px 2px rgba(244, 236, 226, 0.7); } .cinema-hero__meta-loc { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em; color: var(--charcoal); margin: 0; text-shadow: 0 1px 2px rgba(244, 236, 226, 0.7); } .cinema-hero__scroll { position: absolute; bottom: var(--space-7); left: 50%; transform: translateX(-50%); z-index: 2; } .cinema-hero__scroll .pill { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--charcoal); padding: var(--space-3) var(--space-5); border: 1px solid var(--charcoal); border-radius: var(--radius-0); background: var(--cream); } @media (max-width: 720px) { .cinema-hero__top, .cinema-hero__bottom { position: static; padding: var(--space-8) var(--space-5); } .cinema-hero { height: auto; min-height: 0; } .cinema-hero__image { position: relative; height: 60vh; } .cinema-hero__meta, .cinema-hero__scroll, .cinema-hero__strip { position: static; padding: var(--space-4) var(--space-5); } } /* ============================================================================= CINEMA FEATURE — single section per viewport with arrow nav ============================================================================= */ .cinema-feature { position: relative; height: 86vh; min-height: 580px; background: var(--ink-indigo); overflow: hidden; } .cinema-feature__slides { position: absolute; inset: 0; } .cinema-feature__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-quiet), visibility var(--dur-slow) var(--ease-quiet); } .cinema-feature__slide.is-active { opacity: 1; visibility: visible; } .cinema-feature__slide-image { position: absolute; inset: 0; } .cinema-feature__slide-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .cinema-feature__slide-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,45,61,0.25) 0%, rgba(31,45,61,0.55) 70%, rgba(31,45,61,0.75) 100%); } .cinema-feature__center { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 var(--space-7); color: var(--cream); pointer-events: none; } .cinema-feature__center > * { pointer-events: auto; } .cinema-feature__index { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(244,236,226,0.7); margin-bottom: var(--space-5); } .cinema-feature__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 64px); line-height: 0.96; letter-spacing: -0.018em; color: var(--cream); margin: 0 0 var(--space-6); } .cinema-feature__name em { font-style: italic; } .cinema-feature__pill { display: inline-block; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream); padding: var(--space-3) var(--space-6); border: 1px solid rgba(244,236,226,0.7); border-radius: var(--radius-0); text-decoration: none; transition: background-color var(--dur-base) var(--ease-quiet), color var(--dur-base) var(--ease-quiet); } .cinema-feature__pill:hover { background: var(--cream); color: var(--ink-indigo); } .cinema-feature__top { position: absolute; top: var(--space-6); left: var(--space-7); right: var(--space-7); z-index: 3; display: flex; justify-content: space-between; align-items: baseline; color: var(--cream); } .cinema-feature__label { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(244,236,226,0.7); } .cinema-feature__counter { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--cream); letter-spacing: -0.005em; } .cinema-feature__bottom { position: absolute; bottom: var(--space-6); left: var(--space-7); right: var(--space-7); z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-5); align-items: end; } .cinema-feature__caption { font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: rgba(244,236,226,0.85); max-width: 40ch; } .cinema-feature__caption strong { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 16px; color: var(--cream); display: block; margin-bottom: var(--space-2); letter-spacing: -0.005em; } .cinema-feature__name-anchor { font-family: var(--font-display); font-style: italic; font-size: 18px; color: rgba(244,236,226,0.8); letter-spacing: -0.005em; text-align: center; } .cinema-arrows { position: absolute; inset: 0; z-index: 4; display: flex; justify-content: space-between; align-items: center; pointer-events: none; padding: 0 var(--space-7); } .cinema-arrow { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid rgba(244,236,226,0.55); border-radius: var(--radius-0); color: rgba(244,236,226,0.85); background: transparent; cursor: pointer; transition: background-color var(--dur-base) var(--ease-quiet), color var(--dur-base) var(--ease-quiet), border-color var(--dur-base) var(--ease-quiet); } .cinema-arrow:hover { background: var(--cream); color: var(--ink-indigo); border-color: var(--cream); } .cinema-arrow svg { width: 22px; height: 22px; } @media (max-width: 720px) { .cinema-feature { min-height: 560px; } .cinema-feature__bottom { grid-template-columns: 1fr; } .cinema-arrows { padding: 0 var(--space-3); } } /* ============================================================================= CINEMA STATEMENT — viewport-scale typographic passage ============================================================================= */ .cinema-statement { background: var(--cream); padding: clamp(36px, 6vh, 76px) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .cinema-statement__inner { max-width: 1600px; margin: 0 auto; padding: 0 var(--space-7); } .cinema-statement__label { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--charcoal-70); display: block; padding-top: var(--space-3); border-top: 1px solid var(--charcoal); max-width: 200px; margin-bottom: var(--space-7); } .cinema-statement__phrase { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 56px); line-height: 1.0; letter-spacing: -0.02em; color: var(--charcoal); margin: 0; text-wrap: balance; } /* Studio Indigo override: red period reads invisible against indigo — shift the accent color used inside the statement to cream. */ .studio .cinema-statement__phrase .red, body.studio .cinema-statement .red { color: var(--cream); } .cinema-statement__phrase em { font-style: italic; color: var(--charcoal); } .cinema-statement__phrase .red { color: var(--accent); } .studio .cinema-statement__phrase em { color: var(--metallic); } .cinema-statement__foot { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--charcoal); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } .cinema-statement__foot .smallcaps { color: var(--charcoal-70); } .cinema-statement__foot p { font-size: 16px; margin: 0; max-width: 50ch; } /* ============================================================================= CINEMA MOSAIC — jigsaw image grid No gaps. Tessellating row-spans. Captions hidden by default — the user reads them as placeholder; they’ll come back once CMS lands. ============================================================================= */ .cinema-mosaic { background: var(--bg); padding: var(--space-8) 0 var(--space-9); border-bottom: 1px solid var(--rule); } .cinema-mosaic__head { max-width: 1600px; margin: 0 auto var(--space-6); padding: 0 var(--space-7); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: end; } .cinema-mosaic__head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 64px); line-height: 0.98; letter-spacing: -0.018em; margin: 0; } .cinema-mosaic__head h2 em { font-style: italic; } .cinema-mosaic__head p { font-size: 15px; color: var(--fg-muted); margin: 0; max-width: 44ch; text-align: right; } .cinema-mosaic__grid { max-width: 1600px; margin: 0 auto; padding: 0 var(--space-7); /* True masonry: seamless jigsaw, no holes, natural aspect ratios (no crop). Replaces the fixed grid-span approach that left blank gaps on the left. */ column-count: 4; column-gap: 4px; } .mosaic-tile { position: relative; display: block; width: 100%; margin: 0 0 4px; break-inside: avoid; overflow: hidden; background: var(--cream-2); text-decoration: none; color: var(--cream); } .mosaic-tile img { width: 100%; height: auto; display: block; transition: transform var(--dur-slow) var(--ease-quiet); } .mosaic-tile:hover img { transform: scale(1.03); } /* Mosaic captions hidden site-wide — placeholder titles cleaned up. Re-enable when CMS lands with real project names. */ .mosaic-tile__overlay { display: none; } .mosaic-tile__label, .mosaic-tile__place { display: none; } /* legacy --feat/--p/--sq/etc. span classes are inert under masonry by design */ @media (max-width: 960px) { .cinema-mosaic__head { grid-template-columns: 1fr; } .cinema-mosaic__head p { text-align: left; } .cinema-mosaic__grid { column-count: 3; } } @media (max-width: 560px) { .cinema-mosaic__grid { column-count: 2; } } /* Larger-image variant — for sparser walls (Commercial, Residential) so the imagery reads at hospitality scale instead of feeling small. */ .cinema-mosaic--large .cinema-mosaic__grid { column-count: 3; } @media (max-width: 960px) { .cinema-mosaic--large .cinema-mosaic__grid { column-count: 2; } } @media (max-width: 560px) { /* Was 1 column — full-width images made Edit/Bespoke enormous on phones. Match the regular mosaic (Studio/Hospitality) at two columns. */ .cinema-mosaic--large .cinema-mosaic__grid { column-count: 2; } } /* ── Native form fields ─────────────────────────────────────── */ .cinema-form__fields { display: grid; gap: var(--space-5); } .cinema-form__field { display: block; } .cinema-form__field-label { display: block; font-family: var(--font-body); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-2); } .cinema-form input, .cinema-form select, .cinema-form textarea { width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--fg); background: var(--bg-elevated); border: 1px solid var(--charcoal); border-radius: var(--radius-0); padding: var(--space-3) var(--space-4); transition: border-color var(--dur-base) var(--ease-quiet), box-shadow var(--dur-base) var(--ease-quiet); } .cinema-form select { appearance: none; -webkit-appearance: none; padding-right: var(--space-7); background-image: linear-gradient(45deg, transparent 50%, var(--charcoal) 50%), linear-gradient(135deg, var(--charcoal) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .cinema-form textarea { min-height: 7.5em; resize: vertical; } .cinema-form input:focus, .cinema-form select:focus, .cinema-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); } .cinema-form [aria-invalid="true"] { border-color: var(--artemist-red); } .cinema-form__status { font-family: var(--font-body); font-size: 14px; color: var(--artemist-red); margin-top: var(--space-3); min-height: 1em; } .cinema-form__submit { margin-top: var(--space-2); justify-self: start; margin-right: auto; } .cinema-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .cinema-form__success { padding: var(--space-6) 0; } .cinema-form__success h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--fg); margin: 0 0 var(--space-3); outline: none; } .cinema-form__success p { font-size: 15px; color: var(--fg-muted); margin: 0; } /* Dark / indigo variant (Press form) */ .cinema-form--dark .cinema-form__field-label { color: rgba(244,236,226,0.7); } .cinema-form--dark input, .cinema-form--dark select, .cinema-form--dark textarea { color: var(--cream); background: rgba(244,236,226,0.06); border-color: rgba(244,236,226,0.3); } .cinema-form--dark select { background-image: linear-gradient(45deg, transparent 50%, var(--cream) 50%), linear-gradient(135deg, var(--cream) 50%, transparent 50%); } .cinema-form--dark input:focus, .cinema-form--dark select:focus, .cinema-form--dark textarea:focus { border-color: var(--metallic); box-shadow: 0 0 0 2px color-mix(in srgb, var(--metallic) 35%, transparent); } .cinema-form--dark [aria-invalid="true"] { border-color: var(--brass-soft); } .cinema-form--dark .cinema-form__status { color: var(--brass-soft); } .cinema-form--dark .cinema-form__success h3 { color: var(--cream); } .cinema-form--dark .cinema-form__success p { color: rgba(244,236,226,0.75); } /* ============================================================ MOBILE POLISH (2026-06-19) — shared-component responsive fixes ============================================================ */ @media (max-width: 720px) { /* 1 — Home hero: stack image + headline; defeat JS reveal-gating so words show */ .cinema-hero { display: flex; flex-direction: column; height: auto; min-height: 0; } .cinema-hero__image { position: relative; height: 52vh; } .cinema-hero__vignette { display: none; } .cinema-hero__top, .cinema-hero__bottom { position: static; text-align: left; padding: 0 var(--space-5); opacity: 1 !important; transform: none !important; } .cinema-hero__top { margin-top: var(--space-6); } .cinema-hero__bottom { margin: 0 0 var(--space-4); } .cinema-hero__top .word, .cinema-hero__bottom .word { font-size: clamp(40px, 12vw, 58px); line-height: 1.02; } .cinema-hero__meta { position: static; padding: 0 var(--space-5) var(--space-7); } .cinema-hero__scroll { display: none; } /* 2 — Inner-page hero strip: stack the two smallcaps, clear the sticky nav */ .cinema-page__strip { flex-direction: column; align-items: flex-start; gap: var(--space-1); top: calc(56px + var(--space-3)); padding: 0 var(--space-5); font-size: 10px; letter-spacing: 0.16em; } /* 1a — keep the strip stacked but shrink so neither line wraps (was 11px, wrapping) */ .cinema-page__strip .smallcaps { font-size: 9px; letter-spacing: 0.03em; line-height: 1.35; } /* 2 — footer section links: smaller + centred (were ~28px, left-aligned, 4 lines tall) */ .site-footer__sections { justify-content: center; gap: var(--space-1) var(--space-3); padding-bottom: var(--space-5); margin-bottom: var(--space-6); } .site-footer__sections a { font-size: 20px; padding-bottom: 2px; } .site-footer__sections .sep { font-size: 15px; } /* 3 — Hero title/lede legibility over the artwork: stronger bottom scrim */ .cinema-page__vignette { background: linear-gradient(0deg, rgba(244,236,226,0.94) 0%, rgba(244,236,226,0.62) 38%, rgba(244,236,226,0) 74%); } .cinema-page__content { padding-bottom: var(--space-7); } .cinema-page__lede { font-size: 16px; margin-top: var(--space-4); } /* 4 — Statement foot: single column */ .cinema-statement__foot { grid-template-columns: 1fr; gap: var(--space-5); } /* 5 — Footer: stack signature, clear the floating WhatsApp button */ .site-footer { padding-bottom: calc(var(--space-7) + 64px); } .site-footer__signature { flex-direction: column; gap: var(--space-2); align-items: flex-start; } /* polish — left-align stacked record dates; tame carousel counter */ .cinema-records__date { text-align: left; } .cinema-feature__counter { font-size: 18px; } /* 6 — Home hero shadow: match the inner-page heroes, which fade the image into cream. The sibling __vignette stays hidden (it would cover the stacked headline), so the scrim sits on the image itself. */ .cinema-hero__image::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(0deg, rgba(244,236,226,0.97) 0%, rgba(244,236,226,0.5) 38%, rgba(244,236,226,0) 100%); z-index: 2; pointer-events: none; } /* 7 — Spacing compaction: the page read as endless scroll on phones. Trim the big fixed-token vertical paddings to a tighter mobile rhythm. */ .cinema-section { padding: clamp(20px, 3vh, 34px) 0; } .cinema-statement { padding: clamp(24px, 3.5vh, 44px) 0; } .cinema-mosaic { padding: var(--space-6) 0; } .cinema-mosaic__head { margin-bottom: var(--space-5); } .cinema-section__head { gap: var(--space-4); margin-bottom: var(--space-5); } .feature, .archive, .press-list-section, .editorial-column { padding: var(--space-7) 0; } .cinema-page__content { padding-bottom: var(--space-6); } .cinema-hero__top { margin-top: var(--space-5); } .cinema-hero__bottom { margin-bottom: var(--space-3); } .cinema-hero__meta { padding-bottom: var(--space-5); } /* 8 — tighten per-item spacing inside the long content lists (press records, directories, the six-step flow) and section body copy */ .cinema-records__row { padding: var(--space-3) 0; } .cinema-list__item { padding: var(--space-3) 0; } .cinema-flow__step { padding: var(--space-4) 0; } .cinema-section__head-body p { margin-bottom: var(--space-3); } } /* ============================================================================= COLLAPSIBLE GROUPS — press archive (older years) + About detail sections. Toggle is injected by site.js; without JS the group renders in full. ============================================================================= */ [data-collapse-group].is-collapsed { display: none; } .collapse-trigger { display: block; width: 100%; margin: 0; padding: var(--space-6) 0; background: none; border: none; border-top: 1px solid var(--rule); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); text-align: center; cursor: pointer; transition: color var(--dur-base) var(--ease-quiet); } .collapse-trigger:hover { color: var(--charcoal); } body.studio .collapse-trigger:hover { color: var(--cream); } .collapse-trigger__icon { display: inline-block; margin-left: var(--space-2); } @media (max-width: 720px) { .collapse-trigger { padding: var(--space-5) 0; font-size: 11px; } } /* FAQ blocks (service pages) — visible Q&A paired with FAQPage JSON-LD */ .cinema-faq{max-width:820px;margin:0 auto;padding:0 var(--space-7);} .cinema-faq__item{padding:var(--space-5) 0;border-bottom:1px solid var(--rule);} .cinema-faq__item:first-child{border-top:1px solid var(--rule);} .cinema-faq__q{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(20px,2.4vw,26px);line-height:1.2;margin:0 0 var(--space-3);color:var(--charcoal);} .cinema-faq__a{font-family:var(--font-body);font-size:17px;line-height:1.62;color:var(--charcoal-70);margin:0;max-width:68ch;} @media (max-width:720px){.cinema-faq{padding:0 var(--space-5);}.cinema-faq__a{font-size:16px;}}