/* Source: css/v50/style.css */ :root { --bg: #04102F; --panel: #14203F; --panel-2: #1A2645; --ink: #f4f2ec; --dim: #a6a9b2; --gold: #d9a441; --gold-soft: rgba(217,164,65,0.14); --line: rgba(244,242,236,0.20); --radius: 14px; --max: 1280px; --ease: cubic-bezier(.22,.61,.36,1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0px; background: var(--bg); color: var(--ink); overflow-x: hidden; font-family: Inter, -apple-system, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: Inter, sans-serif; font-weight: 800; letter-spacing: -0.02em; margin: 0px 0px 0.4em; color: var(--ink); } .mono { font-family: "IBM Plex Mono", monospace; } .wrap { max-width: var(--max); margin: 0px auto; padding: 0px 28px; } button { font-family: inherit; cursor: pointer; appearance: none; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: inherit; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } .eyebrow { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 700; } .hero .eyebrow { font-size: 0.95rem; text-shadow: rgba(0, 0, 0, 0.9) 0px 2px 10px, rgba(0, 0, 0, 0.95) 0px 1px 3px; } .site-nav { position: sticky; top: 0px; z-index: 50; background: rgba(11, 13, 18, 0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .shipping-bar-label { font-size: 0.68rem; color: var(--dim); line-height: 1.25; } .shipping-bar-value { font-size: 0.85rem; font-weight: 700; color: var(--ink); line-height: 1.3; } #shipping-indicator { display: flex; flex-direction: column; align-items: flex-start; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; font-family: inherit; padding: 0px; text-align: left; } .logo-shipping-group { display: flex; align-items: center; gap: 1.6rem; } #shipping-bar { display: none; } @media (max-width: 760px) { #shipping-indicator { display: none !important; } #shipping-bar { display: flex; flex-direction: column; align-items: flex-start; width: 100%; background: rgba(11, 13, 18, 0.6); border-top-width: medium; border-right-width: medium; border-left-width: medium; border-top-style: none; border-right-style: none; border-left-style: none; border-top-color: currentcolor; border-right-color: currentcolor; border-left-color: currentcolor; border-image: none; border-bottom: 1px solid var(--line); padding: 0.5rem 16px; text-align: left; cursor: pointer; font-family: inherit; } } .site-nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; } .logo { font-weight: 800; font-size: 1.32rem; display: inline-flex; align-items: center; gap: 0.55rem; } .logo-icon { height: 52px; width: auto; display: block; } .nav-links { display: flex; gap: 2rem; list-style: none; margin: 0px; padding: 0px; font-size: 0.9rem; } .nav-links a { opacity: 0.78; transition: opacity 0.2s, color 0.2s; } .nav-links a:hover { opacity: 1; color: var(--gold); } .nav-right { display: flex; align-items: center; gap: 1.4rem; } .cart-btn { background: var(--gold); color: rgb(26, 18, 6); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0.65rem 1.2rem; border-radius: 100px; font-size: 0.82rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; } .cart-count { background: rgb(26, 18, 6); color: var(--gold); border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 800; } #mobile-nav-toggle { display: none; } @media (max-width: 760px) { .site-nav .wrap { height: 64px; padding: 0px; } .logo { font-size: 1.05rem; gap: 0.4rem; } .logo-icon { height: 32px; } .nav-right { gap: 0.7rem; } .cart-btn { padding: 0.5rem 0.9rem; font-size: 0.78rem; } #account-menu-btn span:nth-of-type(2) { display: none; } #account-menu-btn { padding: 0.4rem; } .nav-links { display: none; position: absolute; top: 100%; left: 0px; right: 0px; flex-direction: column; gap: 0px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: rgba(0, 0, 0, 0.35) 0px 12px 24px; padding: 0.5rem 0px; } .nav-links.mobile-open { display: flex; } .nav-links li { width: 100%; } .nav-links a { display: block; padding: 0.9rem 1.4rem; font-size: 0.95rem; } .nav-links a:hover { background: rgba(255, 255, 255, 0.04); } #mobile-nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 34px; height: 34px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; padding: 0px; } #mobile-nav-toggle span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; } #mobile-nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } #mobile-nav-toggle.open span:nth-child(2) { opacity: 0; } #mobile-nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } } .hero { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0px; background-size: cover; background-repeat: no-repeat; background-position: center 35%; opacity: 0; transition: opacity 1.6s; } .hero-bg.active { opacity: 1; } .hero-video-panel { position: absolute; z-index: 2; right: 5%; top: 50%; transform: translateY(-50%); width: min(360px, 30vw); padding: 3rem; background: radial-gradient(rgba(11, 13, 18, 0.75) 0%, rgba(11, 13, 18, 0.5) 40%, rgba(11, 13, 18, 0.15) 65%, transparent 85%); } .hero-video-frame { position: relative; } .hero-video-frame video { width: 100%; display: block; transform: scale(1.2); mask-image: radial-gradient(55% 60%, black 30%, transparent 78%); filter: brightness(0.9) contrast(1.05); } .hero-video-caption { position: absolute; left: 0px; right: 0px; bottom: 0px; z-index: 3; color: rgb(255, 255, 255); font-size: 0.85rem; font-weight: 600; text-align: center; padding: 1.2rem 0.8rem 0.8rem; background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, transparent 100%); } .hero-photo-tag { position: absolute; z-index: 2; left: 5%; bottom: 6%; font-size: 0.72rem; color: var(--dim); background: rgba(11, 13, 18, 0.5); padding: 0.35rem 0.7rem; border-radius: 100px; backdrop-filter: blur(4px); } .hero-actions .btn-outline { background: rgba(11, 13, 18, 0.55); border-color: rgba(255, 255, 255, 0.75); backdrop-filter: blur(6px); box-shadow: none; } .hero-actions .btn-outline:hover { background: rgba(217, 164, 65, 0.16); border-color: var(--gold); color: var(--gold); } .hero-actions .btn-solid { background: linear-gradient(180deg, #f0bb63, var(--gold)); box-shadow: rgba(255, 255, 255, 0.45) 0px 1px 0px inset, rgb(169, 122, 42) 0px 5px 0px, rgba(0, 0, 0, 0.35) 0px 12px 24px; transition: all .15s var(--ease); } .hero-actions .btn-solid:hover { transform: translateY(-1px); box-shadow: rgba(255, 255, 255, 0.45) 0px 1px 0px inset, rgb(169, 122, 42) 0px 6px 0px, rgba(0, 0, 0, 0.4) 0px 16px 28px; } .hero-actions .btn-solid:active { transform: translateY(3px); box-shadow: rgba(255, 255, 255, 0.45) 0px 1px 0px inset, rgb(169, 122, 42) 0px 2px 0px, rgba(0, 0, 0, 0.3) 0px 6px 12px; } .hero::before { content: ""; position: absolute; inset: 0px; z-index: 1; background: rgba(11, 13, 18, 0.5); } .hero-scroll-cue { position: fixed; left: 50%; bottom: 0.6rem; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; justify-content: center; width: 44px; height: 26px; border-radius: 100px; background: var(--gold); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px; cursor: pointer; animation: 1.8s ease-in-out 0s infinite normal none running heroScrollBounce, 1.8s ease-in-out 0s infinite normal none running heroScrollPulse; transition: opacity 0.3s; } .hero-scroll-cue.hidden { opacity: 0; pointer-events: none; } .hero-scroll-cue svg { width: 16px; height: 16px; } @keyframes heroScrollBounce { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(5px); } } @keyframes heroScrollPulse { 0% { box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 14px, rgba(217, 164, 65, 0.55) 0px 0px 0px 0px; } 70% { box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 14px, rgba(217, 164, 65, 0) 0px 0px 0px 12px; } 100% { box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 14px, rgba(217, 164, 65, 0) 0px 0px 0px 0px; } } @media (prefers-reduced-motion: reduce) { .hero-scroll-cue { animation: auto ease 0s 1 normal none running none; } } @media (max-width: 760px) { .hero-scroll-cue { display: none; } } .hero h1 { text-shadow: rgba(0, 0, 0, 0.7) 0px 4px 24px; font-size: clamp(2.4rem, 5.5vw, 4.4rem); line-height: 1.05; max-width: 16ch; margin-top: 0.6rem; } .hero-inner { position: relative; z-index: 2; padding: 5rem 0px; } @media (max-width: 760px) { .hero-inner { display: flex; flex-direction: column; } .hero .eyebrow { order: 0; } .hero h1 { order: 1; } .hero-tagline { order: 2; } .hero-actions { order: 3; margin-top: 1.4rem; } .hero-frank-badge { order: 4; } } .hero p { max-width: 52ch; color: rgb(232, 230, 224); margin-top: 1.2rem; text-shadow: rgba(0, 0, 0, 0.6) 0px 2px 12px; } .hero-tagline { position: relative; font-size: 1.25rem; line-height: 1.55; color: rgb(240, 239, 233); margin-top: 1.6rem; max-width: 46ch; padding-left: 1.4rem; text-shadow: rgba(0, 0, 0, 0.6) 0px 2px 12px; } .hero-tagline-mark { position: absolute; left: 0px; top: 0.15em; bottom: 0.3em; width: 3px; background: linear-gradient(180deg, var(--gold), transparent); } .hero-tagline-sub { display: inline-block; margin-top: 0.7rem; font-size: 0.82em; color: rgb(200, 198, 192); font-weight: 400; } .hero-emphasis { color: var(--gold); font-weight: 700; } .hero-actions { margin-top: 1.6rem; display: flex; gap: 1rem; flex-wrap: wrap; } .hero-frank-badge { display: inline-flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; padding: 0.7rem 1.6rem 0.7rem 0.7rem; max-width: 100%; background: var(--ink); border-radius: 100px; transition: transform 0.2s, box-shadow 0.2s; } .hero-frank-badge:hover { box-shadow: rgba(244, 242, 236, 0.25) 0px 8px 24px; } .hero-frank-badge img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--gold); } .hero-frank-badge span { font-size: 0.95rem; color: var(--bg); font-weight: 600; line-height: 1.4; } .hero-frank-badge b { font-weight: 800; } .hero-frank-badge-arrow { display: inline-block; transition: transform 0.2s; } .hero-frank-badge:hover .hero-frank-badge-arrow { transform: translateX(3px); } @media (max-width: 760px) { .hero-frank-badge { border-radius: 20px; padding: 1rem 1.3rem; gap: 0.8rem; margin-top: 1.2rem; margin-right: 64px; } .hero-frank-badge img { display: none; } .hero-frank-badge span { font-size: 0.88rem; } } .frank-tooltip-trigger { position: relative; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; } .frank-tooltip { position: fixed; z-index: 200; width: 300px; max-width: calc(-2rem + 100vw); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 50px; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s; pointer-events: none; } .frank-tooltip-trigger:hover .frank-tooltip, .frank-tooltip-trigger:focus-within .frank-tooltip { opacity: 1; visibility: visible; transform: translateY(0px); } .frank-tooltip img { width: 100%; height: 160px; object-fit: cover; display: block; } .frank-tooltip-body { display: block; padding: 0.9rem 1rem; font-size: 0.8rem; line-height: 1.55; color: var(--dim); font-weight: 400; } @media (max-width: 760px) { .frank-tooltip { display: none; } } @keyframes heroFadeUp { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: translateY(0px); } } .hero .eyebrow, .hero h1, .hero-tagline, .hero-inner > a, .hero-actions { opacity: 0; animation: 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0s 1 normal forwards running heroFadeUp; } .hero .eyebrow { animation-delay: 0.1s; } .hero h1 { animation-delay: 0.22s; } .hero-tagline { animation-delay: 0.36s; } .hero-inner > a { animation-delay: 0.5s; } .hero-actions { animation-delay: 0.62s; } @media (max-width: 900px) { .hero-video-panel { display: none; } } .btn { display: inline-block; padding: 0.9rem 1.7rem; border-radius: 100px; font-size: 0.92rem; font-weight: 700; text-align: center; transition: all .2s var(--ease); border: 1.5px solid transparent; } .btn-solid { background: var(--gold); color: rgb(26, 18, 6); } .btn-solid:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--gold-soft); } .btn-outline { border-color: var(--line); color: var(--ink); } .btn-outline:hover { border-color: var(--gold); color: var(--gold); } section { padding: 5rem 0px; } .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.6rem; flex-wrap: wrap; } .section-head h1, .section-head h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0px; } .section-head p { color: var(--dim); max-width: 44ch; margin: 0px; font-size: 0.98rem; } .cat-tabs { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2.6rem; } .path-bar { display: flex; gap: 0.8rem; margin-bottom: 2rem; flex-wrap: wrap; } .path-chip { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.2rem; border-radius: 100px; background: var(--gold); color: rgb(26, 18, 6); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; font-size: 0.82rem; font-weight: 700; } .path-chip:hover { background: rgb(224, 145, 63); } .cat-tab { background: var(--panel); border: 1px solid var(--line); color: var(--ink); padding: 0.6rem 1.2rem; border-radius: 100px; font-size: 0.85rem; font-weight: 600; transition: 0.2s; } .cat-tab.active, .cat-tab:hover { background: var(--gold); color: rgb(26, 18, 6); border-color: var(--gold); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.6rem; } .card { display: block; background: var(--panel); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s; } .card:hover { transform: translateY(-4px); border-color: rgba(217, 164, 65, 0.4); } .card-media { aspect-ratio: 1 / 1; overflow: hidden; position: relative; background: radial-gradient(ellipse at center, var(--panel) 0%, var(--bg) 100%); display: flex; align-items: center; justify-content: center; } .card-media img { width: 100%; height: 100%; object-fit: cover; } .card-body { padding: 1.2rem 1.3rem 1.4rem; } .card-body h4 { font-size: 1.05rem; margin-bottom: 0.2rem; } .card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.9rem; } .price { font-weight: 700; color: var(--gold); font-size: 1.02rem; } .buy-box { position: sticky; top: 96px; border: 3px solid rgba(244, 242, 236, 0.35); border-radius: 14px; background: var(--panel); padding: 1.3rem; min-width: 0px; } .card-foot span:last-child { font-size: 0.82rem; color: var(--dim); } .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 10px; } .gallery-grid > div { overflow: hidden; border-radius: 10px; background: var(--panel); } .gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .gallery-grid > div:hover img { transform: scale(1.06); } .gallery-grid .tall { grid-row: span 2; } .gallery-grid .wide { grid-column: span 2; } @media (max-width: 860px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } } .frank-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: start; } .frank-hero p { font-size: 1.03rem; line-height: 1.75; margin-bottom: 1.1rem; color: var(--dim); } .frank-links { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; } .frank-link { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.3rem; border-radius: 100px; background: var(--gold); color: rgb(26, 18, 6); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; font-weight: 700; font-size: 0.85rem; transition: 0.2s; } .frank-link:hover { background: rgb(224, 145, 63); transform: translateY(-2px); } .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--panel); border-radius: var(--radius); overflow: hidden; } .video-embed iframe { width: 100%; height: 100%; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; } .form-card { max-width: 680px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 2.2rem; } @media (max-width: 600px) { .form-card { padding: 1.4rem 1.3rem; } } .field { margin-bottom: 1.5rem; } .field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.6rem; color: var(--dim); } .field input[type="text"], .field input[type="email"], .field textarea, .field select { width: 100%; background: rgb(255, 255, 255); border: 1px solid var(--line); color: rgb(26, 37, 64); border-radius: 10px; padding: 0.85rem 1rem; font-family: inherit; font-size: 0.95rem; } .field textarea { min-height: 120px; resize: vertical; } .field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus { caret-color: var(--ink); transition: background-color 5000s ease-in-out; box-shadow: 0 0 0px 1000px var(--panel) inset !important; -webkit-text-fill-color: var(--ink) !important; } .dropzone { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 2rem 1.2rem; text-align: center; font-size: 0.88rem; color: var(--dim); transition: 0.2s; } .dropzone.drag { border-color: var(--gold); color: var(--gold); } .dropzone input { display: none; } .thumb-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; } .thumb { width: 64px; height: 64px; overflow: hidden; border-radius: 8px; border: 1px solid var(--line); } .thumb img { width: 100%; height: 100%; object-fit: cover; } .ref-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem; margin-top: 1rem; } .ref-opt { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; border: 2px solid transparent; cursor: pointer; } .ref-opt img { width: 100%; height: 100%; object-fit: cover; } .ref-opt.selected { border-color: var(--gold); } .ref-opt.none-opt { display: flex; align-items: center; justify-content: center; background: var(--panel); font-size: 0.75rem; text-align: center; padding: 0.5rem; font-weight: 600; } .cart-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 90; } .cart-overlay.open { opacity: 1; pointer-events: auto; } .cart-drawer { position: fixed; top: 0px; right: 0px; height: 100%; width: min(420px, 92vw); background: var(--panel); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .3s var(--ease); z-index: 91; display: flex; flex-direction: column; } .cart-drawer.open { transform: translateX(0px); } .cart-head { padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; } .cart-items { flex: 1 1 0%; overflow-y: auto; padding: 1rem 1.6rem; } .cart-item { display: flex; gap: 0.9rem; padding: 0.9rem 0px; border-bottom: 1px solid var(--line); } .cart-item .thumb { width: 56px; height: 56px; flex-shrink: 0; } .cart-item-info { flex: 1 1 0%; font-size: 0.85rem; } .cart-item-info .meta { color: var(--dim); font-size: 0.76rem; } .cart-item-remove { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: var(--dim); font-size: 0.76rem; text-decoration: underline; padding: 0px; margin-top: 0.3rem; } .cart-foot { padding: 1.4rem 1.6rem; border-top: 1px solid var(--line); } .cart-line { display: flex; justify-content: space-between; font-size: 0.88rem; margin-bottom: 0.5rem; } .cart-line.total { font-size: 1.05rem; font-weight: 700; margin-top: 0.8rem; } .empty-cart { color: var(--dim); font-size: 0.9rem; text-align: center; padding: 3rem 0px; } .shipping-note { font-size: 0.74rem; color: var(--dim); margin-top: 0.6rem; } .card-collage { aspect-ratio: 16 / 10; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; background: var(--line); overflow: hidden; } .card-collage img { width: 100%; height: 100%; object-fit: cover; } footer { padding: 3rem 0px 6.5rem; font-size: 0.85rem; color: var(--dim); border-top: 1px solid var(--line); } footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } @media (max-width: 860px) { .frank-hero { grid-template-columns: minmax(0px, 1fr); } } .gia-lightbox { position: fixed; inset: 0px; background: rgba(6, 7, 10, 0.96); z-index: 200; display: none; align-items: center; justify-content: center; } .gia-lightbox.open { display: flex; } .gia-lb-stage { position: relative; width: 90vw; height: 82vh; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; } .gia-lb-stage img { max-width: 100%; max-height: 100%; user-select: none; -webkit-user-drag: none; transition: transform 0.15s ease-out; cursor: grab; } .gia-lb-stage img.dragging { transition: none; cursor: grabbing; } .gia-lb-btn { position: absolute; z-index: 210; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); color: rgb(255, 255, 255); border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; cursor: pointer; backdrop-filter: blur(4px); } .gia-lb-btn:hover { background: rgba(255, 255, 255, 0.2); } .gia-lb-close { top: 2vw; right: 2vw; } .gia-lb-zoom-controls { position: absolute; bottom: 2vw; left: 50%; transform: translateX(-50%); display: flex; gap: 0.6rem; z-index: 210; } .gia-lb-zoom-controls .gia-lb-btn { position: static; width: 42px; height: 42px; font-size: 1.1rem; } @media (max-width: 600px) { .wrap { padding: 0px 16px; } h1 { font-size: 1.8rem; } h2 { font-size: 1.5rem; } .btn { padding: 0.8rem 1.3rem; font-size: 0.85rem; } .grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; } .buy-box { padding: 1rem; border-width: 2px; } .card-body { padding: 0.7rem 0.8rem 0.85rem; } .card-body h4 { font-size: 0.85rem; margin-bottom: 0px; line-height: 1.3; } .card-foot { margin-top: 0.5rem; } .card-foot .price { font-size: 0.88rem; } .card-foot span:last-child { font-size: 0.78rem; } .choice-btn { padding: 0.55rem 0.9rem; font-size: 0.8rem; } .swatch-circle { width: 38px; height: 38px; } .section-head { margin-bottom: 1.2rem; } table.catalog { font-size: 0.78rem; } .gia-lb-stage { width: 96vw; height: 70vh; } .gia-lb-btn { width: 40px; height: 40px; font-size: 1.1rem; } .gia-lb-zoom-controls { bottom: 4vw; } } .table-scroll { overflow-x: auto; } input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="date"], select, textarea { font-size: 16px !important; } .unpacking-guide-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.8rem; max-width: 880px; width: 100%; max-height: 90vh; overflow-y: auto; } .unpacking-guide-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 1.4rem; } .unpacking-guide-item { flex: 0 0 180px; display: flex; flex-direction: column; align-items: center; text-align: center; } .unpacking-guide-img-wrap { position: relative; width: 100%; } .unpacking-guide-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; display: block; } .unpacking-guide-close { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: var(--dim); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0.3rem; margin: -0.3rem; border-radius: 6px; } @media (max-width: 760px) { .unpacking-guide-overlay { padding: 0px !important; align-items: flex-end !important; } .unpacking-guide-card { max-width: 100%; width: 100%; max-height: 94vh; border-radius: 16px 16px 0px 0px; padding: 1.3rem 1.2rem 1.8rem; } .unpacking-guide-items { gap: 1.6rem; } .unpacking-guide-item { flex: 0 0 100%; flex-direction: row; align-items: center; text-align: left; gap: 1rem; max-width: none; } .unpacking-guide-img-wrap { width: 110px; flex: 0 0 auto; } .unpacking-guide-item p { font-size: 0.92rem !important; margin: 0px !important; } .unpacking-guide-close { font-size: 1.7rem; padding: 0.5rem; margin: -0.5rem; } }/* Local story-only extension of the verified official navy/gold template. */ .version{padding:6px 4%;font-size:12px;background:#14203f;color:#e7c78a;text-align:center;letter-spacing:.04em}.site-nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px max(4%,calc((100% - 1280px)/2));background:#0b0d12;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-size:23px;font-weight:800;white-space:nowrap}.brand img{width:38px;height:45px;object-fit:contain}.site-nav>div{display:flex;align-items:center;gap:25px}.site-nav>div a{font-size:14px}.site-nav a:hover{color:var(--gold)}.skip{position:absolute;top:-80px;left:20px;z-index:20;background:var(--gold);color:#14203f;padding:10px}.skip:focus{top:5px}:focus-visible{outline:3px solid var(--gold);outline-offset:5px}.wrap{max-width:1280px;margin:auto;padding-inline:32px}.hero{min-height:640px;height:calc(100svh - 110px);max-height:850px}.hero-bg{background-position:center 40%}.hero-inner{position:relative;z-index:3;width:100%;max-width:1050px;padding:48px 32px;pointer-events:none}.hero-inner>*{pointer-events:auto;max-width:650px}.hero h1{font-size:clamp(42px,4.8vw,68px);line-height:1.08;max-width:700px}.hero .eyebrow{font-size:13px}.hero-tagline{font-size:20px;max-width:550px}.hero-frank-badge{display:flex;align-items:center;gap:14px;padding:12px 18px;background:#f4f2ec;border-radius:60px;color:#10203c!important;margin:24px 0;width:fit-content;max-width:620px;font-size:16px}.hero-frank-badge img{width:54px;height:54px;object-fit:cover;border-radius:50%;flex-shrink:0}.hero-actions{display:flex;gap:14px;margin:0}.hero-video-panel{right:3%;width:min(330px,27vw);padding:22px;z-index:2}.hero-video-frame video{transform:none}.motion-toggle{position:relative;margin:8px auto 0;display:block;background:#14203fd9;color:#f4f2ec;border:1px solid #a6a9b2;border-radius:22px;padding:7px 12px;font:inherit;font-size:12px;cursor:pointer}.band{padding:85px 0;background:var(--bg)}.band:nth-of-type(even){background:#081535}.band-head{margin-bottom:34px;max-width:850px}.band-head h2,.origin h2{font-size:clamp(32px,4vw,49px);line-height:1.12}.band-lede{color:#ced1d9;font-size:18px;max-width:72ch}.band-head .eyebrow{color:var(--gold)}.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}.work-item{margin:0;min-width:0}.work-item img{width:100%;height:430px;object-fit:contain;background:#0b1020;border-radius:12px}.work-item.wide{grid-column:span 2}.work-item.wide img{object-fit:contain}.work-item figcaption{color:#c6cbd5;font-size:15px;line-height:1.65;padding:14px 2px 0;max-width:65ch}.sphere-pair{grid-column:span 2;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:24px}.sphere-pair figure{margin:0}.sphere-pair figure:first-child img{height:510px}.sphere-pair figure:last-child img{height:340px}.band-quotes{margin:65px auto 0;max-width:850px;border-left:2px solid var(--gold);padding:8px 28px;font-size:22px}.frank-intro{margin-bottom:25px}.frank-note{background:var(--panel);padding:26px;border-radius:14px;display:grid;grid-template-columns:1.3fr 1fr;gap:38px}.frank-note p{margin:0 0 16px}.frank-note-quote{color:var(--gold);font-size:24px}.frank-note-quote span{display:block;font-size:13px}.frank-honours{margin:0;padding-left:20px;line-height:1.7}.frank-honours li{margin-bottom:14px}.archive-link{margin:12px 0 45px}.timeline{position:relative}.timeline:before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:#8d713c}.t-item{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);gap:24px;align-items:start;margin-bottom:65px}.t-content,.t-media{min-width:0}.t-date{display:flex;justify-content:center}.t-dot{height:14px;width:14px;border-radius:50%;background:var(--gold);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--gold);margin-top:8px}.story-text{font-size:17px;line-height:1.8;text-align:left}.story-text p{margin-top:0}.t-year{display:block;color:var(--gold);font-size:14px;font-weight:700;margin-bottom:12px}.t-media video{width:100%;max-height:470px;background:#0b0d12;border-radius:12px}.t-media figcaption{font-size:13px;color:#b9c0cd;margin-top:10px;text-align:left}.video-embed{position:relative;aspect-ratio:16/9;width:100%;background:#14203f;border-radius:12px;overflow:hidden}.video-embed iframe{border:0;width:100%;height:100%;display:block}.origin{max-width:820px;margin:auto;font-size:18px;line-height:1.8}.origin p{margin:24px 0}.origin-film{margin:32px 0}.origin-film figcaption{font-size:14px;color:#bdc4d1}.origin-pull{padding-left:25px;border-left:2px solid var(--gold);font-size:25px}.origin-sub{font-size:28px;margin-top:42px}.frank-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 34px;align-items:start}.archive-card{min-width:0}.archive-card>img{width:100%;height:390px;object-fit:contain;border-radius:12px;background:#0b1020}.archive-card>div{padding:20px 2px}.archive-card h3{font-size:23px;margin:0 0 14px}.archive-card p{font-size:16px;line-height:1.85;color:#cbd0da;margin:0 0 15px;max-width:65ch}.sheets,.after,.collection{margin-top:72px}.sheets>p,.after>p,.collection>p{max-width:75ch;font-size:17px;color:#cbd0da;line-height:1.8}.sheets h3,.after h3,.collection h3{font-size:30px}.sheet-row,.collection-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:25px}.sheet-row img,.collection-row img{width:100%;max-height:460px;object-fit:contain;background:#0b1020;border-radius:10px}.wall-note{margin-top:55px;color:#d4c6aa;font-size:20px}.films{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px}.film{margin:0;background:var(--panel);border-radius:12px;overflow:hidden}.film figcaption{padding:15px 17px;font-weight:700}.close-band{text-align:center}.close-band h2{font-size:40px}.close-band p{max-width:650px;margin:20px auto}.close-mail{color:var(--gold);font-size:clamp(20px,3vw,30px)}footer{padding:35px 5%;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}footer p{font-size:13px;color:var(--dim)}html{scroll-padding-top:20px}section{scroll-margin-top:20px} @media(min-width:901px) and (max-height:750px){.hero{min-height:530px}.hero-inner{padding-block:24px}.hero h1{font-size:52px}.hero-frank-badge{margin-block:18px}.hero-tagline{font-size:18px}} @media(max-width:1050px){.site-nav{flex-wrap:wrap;justify-content:center;gap:12px}.hero-inner{padding-right:28%;padding-left:6%}.hero h1{font-size:48px}.work-item img{height:340px}.hero-video-panel{right:0;width:27vw;padding:8px}} @media(max-width:760px){.version{font-size:10px}.site-nav{padding:14px 18px}.brand{font-size:22px}.site-nav>div{gap:8px 18px;flex-wrap:wrap;justify-content:center}.site-nav>div a{font-size:12px;padding:5px 0}.hero{height:auto;max-height:none;min-height:680px;align-items:flex-start}.hero-bg{background-position:62% center;opacity:.75!important}.hero-inner{padding:32px 23px 270px}.hero h1{font-size:39px;max-width:12ch}.hero-tagline{font-size:17px;max-width:33ch}.hero .eyebrow{font-size:11px;max-width:28ch}.hero-frank-badge{font-size:14px;padding:10px 13px;gap:10px;border-radius:20px}.hero-frank-badge img{width:43px;height:43px}.hero-actions{flex-wrap:wrap;gap:10px}.hero-actions .btn{font-size:13px;padding:12px 16px}.hero-video-panel{display:block!important;top:auto;bottom:15px;right:calc(50% - 110px);transform:none;width:220px;padding:0}.hero-video-frame video{height:225px;object-fit:contain}.motion-toggle{font-size:11px;padding:5px 10px;margin-top:0}.wrap{padding-inline:22px}.band{padding:55px 0}.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 15px}.work-item img{height:280px}.work-item.wide{grid-column:span 2}.work-item.wide img{height:auto;max-height:380px}.work-item figcaption{font-size:13px}.sphere-pair figure:first-child img{height:310px}.sphere-pair figure:last-child img{height:230px}.sphere-pair{gap:15px}.frank-note{display:block;padding:22px}.frank-honours{margin-top:25px}.timeline:before{left:0}.t-item{display:flex;flex-direction:column;gap:20px;padding-left:20px;position:relative;margin-bottom:48px}.t-content{order:0}.t-media{order:1;width:100%}.t-date{position:absolute;left:-7px;top:0}.story-text{font-size:16px}.frank-wall{grid-template-columns:1fr;gap:24px}.archive-card>img{height:auto;max-height:440px}.archive-card p{font-size:16px}.sheet-row,.collection-row{gap:14px}.films{grid-template-columns:1fr 1fr;gap:18px 14px}.film figcaption{font-size:13px;padding:12px}.origin{font-size:17px}.band-quotes{font-size:19px;margin-top:35px}.close-band h2{font-size:30px}footer{display:block;text-align:center}} @media(max-width:430px){.films{grid-template-columns:1fr}.work-item img{height:235px}.work-item figcaption{font-size:13px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}} @media print{img,video,iframe,.video-embed,.hero-bg,.hero-video-panel,.site-nav,.version,.hero-actions,.hero-frank-badge,.image-contact-menu{display:none!important}body,.band{background:white!important;color:#222!important}h1,h2,h3,p,figcaption{color:#222!important}.hero{height:auto;min-height:0}.hero-inner{padding:0}.work-grid,.frank-wall,.timeline,.t-item{display:block}.archive-card{break-inside:avoid}} .hero-frank-badge{flex-wrap:nowrap}.hero .eyebrow,.hero h1,.hero-tagline,.hero-inner>a,.hero-actions{opacity:1;animation:none}.gia-ask{position:fixed;z-index:1000;background:#14203f;color:#f4f2ec;border:1px solid #d9a441;border-radius:12px;max-width:calc(100vw - 24px);padding:18px 45px 18px 18px;box-shadow:0 8px 35px #0006}.gia-ask p{margin:0 0 8px}.gia-ask-mail{color:#e9b95c}.gia-ask-close{position:absolute;right:8px;top:6px;border:0;background:transparent;color:white;font-size:24px;cursor:pointer}@media(max-width:760px){.hero-frank-badge{order:3;margin-right:0}.hero-actions{order:4!important}.hero-frank-badge img{display:block}.hero-frank-badge span{font-size:14px}}@media print{.gia-ask{display:none!important}} /* Rendered desktop review: lead history with the personal story and art. */ #frank .archive-link{margin:0 0 32px}#frank .frank-intro{margin-top:45px}.archive-introduction{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:45px;align-items:start;margin-bottom:32px}.archive-introduction .band-head{margin-bottom:0}.archive-introduction .band-lede{font-size:16px;line-height:1.65}.archive-introduction figure{margin:0;padding-top:5px}.archive-introduction img{width:100%;height:440px;object-fit:contain;background:#0b1020;border-radius:12px}.archive-introduction figcaption{font-size:13px;color:#bbc2cf;margin-top:12px}.band{padding-top:60px}.hero-video-panel{top:45%} @media(max-width:760px){.archive-introduction{grid-template-columns:1fr;gap:18px}.archive-introduction figure{grid-row:2}.archive-introduction img{height:auto;max-height:420px}.band{padding-top:45px}.hero-video-panel{top:auto}} html{scroll-behavior:auto}.sheet-row img,.collection-row img{height:auto}.brand img{height:45px}.hero-frank-badge img{height:54px} @media(max-width:760px){.hero-frank-badge img{height:43px}.archive-introduction .band-head{display:contents}.archive-introduction .eyebrow{grid-row:1}.archive-introduction h2{grid-row:2}.archive-introduction .band-lede-first{grid-row:3}.archive-introduction figure{grid-row:4}} .t-media video{height:auto}.hero-video-frame video{height:auto}@media(max-width:760px){.hero-video-frame video{height:225px}} .video-preview{display:block;position:relative;width:100%;height:100%;border:0;padding:0;background:#14203f;cursor:pointer;color:#10203c}.video-preview img{display:block;width:100%;height:100%;object-fit:cover}.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:#f4f2ec;display:flex;align-items:center;justify-content:center;padding-left:4px;font-size:24px;box-shadow:0 4px 20px #0005}.video-preview:hover .video-play{background:#e9b95c}.video-preview:focus-visible{outline-offset:-4px}.video-embed:has([data-video="5WgjHhQVdv8"]){aspect-ratio:983/794}@media print{.video-preview{display:none!important}} /* v34: coherent artwork scale and stable in-card reading, same official template. */ .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 28px}.work-item.wide{grid-column:1/-1}.work-item img{height:470px;background:transparent}.work-item.wide img{height:520px}.sphere-pair{grid-column:1/-1;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:6%;max-width:1050px;width:100%;margin:20px auto 35px}.sphere-pair figure:first-child img{height:590px}.sphere-pair figure:last-child img{height:380px}.sphere-pair figure{max-width:100%}.t-item{grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);gap:22px}.t-date{position:relative;min-height:40px}.t-date .event-label{position:absolute;right:calc(50% + 12px);top:2px;width:96px;text-align:right;font-size:12px;font-weight:700;line-height:1.45;color:var(--gold)}.t-date .t-dot{margin-top:6px}.frank-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px}.archive-card{height:565px;display:flex;flex-direction:column;min-width:0;overflow:hidden}.archive-card>img{width:100%;height:320px;min-height:320px;object-fit:contain;background:transparent;border-radius:8px}.archive-card>div{padding:17px 0 0}.archive-copy{display:flex;flex-direction:column;min-height:0;flex:1}.archive-card h3{font-size:21px;line-height:1.2;min-height:50px;margin-bottom:10px}.story-text-scroll{font-size:15px;line-height:1.65;color:#cbd0da;overflow:hidden;min-height:0}.story-text-scroll p{font-size:15px;line-height:1.65;margin:0 0 16px}.story-card:not(.reading) .story-text-scroll{max-height:100px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.story-toggle{align-self:flex-start;margin-top:auto;padding:11px 0 0;background:none;border:0;color:#e9b95c;font:inherit;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.story-card.reading>img{height:120px;min-height:120px;object-fit:contain;align-self:flex-start;width:40%}.story-card.reading .archive-copy{flex:1;min-height:0}.story-card.reading h3{min-height:0}.story-card.reading .story-text-scroll{overflow:auto;flex:1;padding-right:14px;scrollbar-color:#d9a441 #14203f;scrollbar-width:thin}.story-card.reading .story-toggle{padding-top:14px;flex-shrink:0}.story-extra{margin:20px 0}.story-extra img{height:auto;width:100%;object-fit:contain;background:none}.story-extra figcaption{font-size:13px;line-height:1.6;margin-top:10px;color:#bbc3d2}.collection-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.collection-row img{width:100%;height:340px;max-height:none;object-fit:cover;background:transparent}.collection-row img:first-child{grid-column:1/-1;height:auto;max-height:460px;object-fit:contain}.collection-row img:last-child{grid-column:1/-1;height:470px;object-fit:cover;object-position:center 72%}.sheet-row img{background:transparent}.archive-introduction img{background:transparent} @media(max-width:1000px){.frank-wall{grid-template-columns:repeat(2,minmax(0,1fr))}.t-item{grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);gap:16px}.t-date .event-label{width:75px;font-size:11px}.work-item img{height:390px}.sphere-pair figure:first-child img{height:490px}.sphere-pair figure:last-child img{height:320px}} @media(max-width:760px){.work-grid{gap:30px 18px}.work-item img{height:320px}.work-item.wide img{height:auto;max-height:460px}.sphere-pair{gap:18px;margin:15px 0 25px}.sphere-pair figure:first-child img{height:350px}.sphere-pair figure:last-child img{height:240px}.t-item{display:flex;padding-left:24px;padding-top:30px}.t-date{left:-7px;top:0}.t-date .event-label{left:24px;right:auto;top:0;width:160px;text-align:left;font-size:13px}.archive-card{height:565px}.frank-wall{grid-template-columns:1fr}.archive-card>img{height:320px;min-height:320px}.archive-card h3{min-height:0}.collection-row img{height:240px}.collection-row img:last-child{height:310px}.story-card.reading>img{height:120px;min-height:120px}} @media(max-width:430px){.work-grid{grid-template-columns:1fr}.work-item img{height:440px}.work-item.wide{grid-column:auto}.sphere-pair{grid-column:1/-1;grid-template-columns:1.3fr 1fr}.sphere-pair figure:first-child img{height:310px}.sphere-pair figure:last-child img{height:220px}.sphere-pair figcaption{font-size:12px}.collection-row img{height:190px}.collection-row img:last-child{height:280px}} @media print{.archive-card{height:auto;display:block;overflow:visible}.story-text-scroll,.story-card:not(.reading) .story-text-scroll{display:block;overflow:visible;max-height:none}.story-toggle{display:none}} @media(max-width:760px){.archive-card:not(.story-card){height:auto;min-height:0;padding-bottom:16px}.archive-card:not(.story-card)>img{height:320px;min-height:320px}} /* Timeline labels occupy their own reserved strip; no text can collide. */ .t-item{padding-top:42px;position:relative}.t-item .t-date{position:absolute;left:calc(50% - 60px);top:0;width:120px;min-height:35px}.t-item .t-content,.t-item .t-media{grid-row:1}.t-item>.t-content:first-child,.t-item>.t-media:first-child{grid-column:1}.t-item>.t-content:last-child,.t-item>.t-media:last-child{grid-column:3}.t-date .event-label{top:0;right:calc(50% + 13px);width:130px}.t-date .t-dot{margin-top:4px}.collection-row img:last-child{grid-column:auto;height:340px;object-fit:cover;object-position:center}.physical-finale{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:40px;align-items:center;margin-top:24px}.physical-finale figure{margin:0}.physical-finale img{width:100%;height:500px;object-fit:cover;object-position:center 48%;border-radius:10px}.physical-finale p{font-size:20px;line-height:1.8;max-width:38ch;color:#cbd0da} @media(max-width:760px){.t-item{padding-top:37px}.t-item .t-date{left:-7px;width:14px}.t-date .event-label{left:24px;right:auto;top:0;width:180px}.physical-finale{grid-template-columns:1fr;gap:16px}.physical-finale figure{max-width:440px}.physical-finale img{height:450px}.physical-finale p{font-size:17px;max-width:100%}.collection-row img:last-child{height:240px}} @media(max-width:430px){.collection-row img:last-child{height:190px}.physical-finale img{height:420px}} .physical-finale img{object-position:center 30%} /* v35: give the artwork and the actual making process the page's strongest scale. */ #the-work>.wrap{max-width:1450px;padding-inline:clamp(24px,4vw,65px)}#the-work .band-head{display:grid;grid-template-columns:.8fr 1.2fr;column-gap:60px;align-items:end;max-width:none;margin-bottom:45px}#the-work .band-head .eyebrow{grid-column:1;grid-row:1;margin-bottom:8px}#the-work .band-head h2{grid-column:1;grid-row:2;font-size:clamp(54px,6.4vw,88px);line-height:.98;margin:0}#the-work .band-head .band-lede{grid-column:2;grid-row:1/span 2;margin:0;font-size:18px;line-height:1.7;max-width:55ch}.work-grid{column-gap:45px;row-gap:65px}.work-item:not(.wide):not(.sphere-pair)>img{height:530px}.scene-work>img{height:610px!important;max-height:75svh;object-fit:contain}.scene-work>figcaption{max-width:850px;font-size:20px;line-height:1.6;padding-top:20px}.work-item:not(.wide) figcaption{font-size:16px;line-height:1.65;padding-top:20px}.work-item.sphere-pair{max-width:1200px;grid-template-columns:1.5fr 1fr;gap:8%;padding:45px 0;margin:15px auto;position:relative}.sphere-pair:before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 48% 58%,rgba(217,164,65,.055),transparent 68%)}.sphere-pair figure{position:relative;z-index:1}.sphere-pair figure:first-child img{height:640px}.sphere-pair figure:last-child img{height:420px}#the-work .band-quotes{margin-top:65px;font-size:26px;line-height:1.6;max-width:880px}.origin{max-width:none}.origin-opening{display:grid;grid-template-columns:1fr 1.05fr;gap:55px;align-items:start}.origin-introduction h2{font-size:clamp(36px,4vw,54px);line-height:1.08;max-width:14ch;margin-bottom:30px}.origin-introduction p{font-size:18px;line-height:1.8}.origin-film{margin:0}.origin-continuation{max-width:850px;margin:40px auto 0}.origin-continuation p{font-size:19px;line-height:1.85}.origin-continuation .origin-pull{font-size:26px;line-height:1.6}.origin-continuation .origin-sub{font-size:32px}.t-date .event-label{font-size:14px;top:-2px;width:160px}#how-its-made .band-head{display:grid;grid-template-columns:.85fr 1.15fr;gap:0 50px;max-width:none;align-items:end;margin-bottom:38px}#how-its-made .band-head .eyebrow{grid-column:1;grid-row:1}#how-its-made .band-head h2{grid-column:1;grid-row:2;font-size:clamp(40px,5vw,65px);line-height:1.05;margin:0}#how-its-made .band-lede{grid-column:2;grid-row:1/span 2;margin:0;max-width:55ch}.films{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.films>.film:first-child{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}.films>.film:first-child .video-embed{flex:1;aspect-ratio:auto;min-height:350px}.films>.film:first-child figcaption{font-size:22px;padding:20px 22px}.films>.film:first-child .video-play{width:78px;height:78px;font-size:31px}.film:not(:first-child) figcaption{font-size:15px}.hero-video-panel{width:min(380px,29vw);right:1.5%;padding:12px;top:45%}.archive-card{border-bottom:1px solid rgba(217,164,65,.18);padding-bottom:16px}.archive-card .story-toggle{padding-top:10px}.physical-finale p{font-size:23px;line-height:1.7}.close-band{padding-block:90px}.close-band h2{font-size:clamp(36px,4.8vw,65px);max-width:17ch;margin-inline:auto}.close-band p{font-size:18px;line-height:1.8}.close-mail{display:inline-block;margin-top:10px;font-size:clamp(20px,3vw,34px)}::selection{background:#d9a441;color:#04102f} @media(max-width:1000px){.work-item:not(.wide):not(.sphere-pair)>img{height:440px}.scene-work>img{height:500px!important}.origin-opening{gap:28px}.origin-introduction p{font-size:17px}.hero-video-panel{width:29vw}.sphere-pair figure:first-child img{height:530px}.sphere-pair figure:last-child img{height:350px}} @media(max-width:760px){.hero{display:flex;flex-direction:column;min-height:0;max-height:none;height:auto;overflow:hidden}.hero-inner{order:1;padding:32px 23px 25px}.hero-video-panel{order:2;position:relative;top:auto;right:auto;bottom:auto;left:auto;transform:none;width:300px;max-width:90%;margin:0 auto 24px;padding:0;align-self:center}.hero-video-frame video{height:320px;object-fit:contain}.hero-bg{background-position:63% 44%}.motion-toggle{margin-top:0}.hero-actions{margin-bottom:0}#the-work .band-head,#how-its-made .band-head{display:block;margin-bottom:30px}#the-work .band-head h2{font-size:57px;margin-bottom:22px}#the-work .band-head .band-lede{font-size:17px}#the-work>.wrap{padding-inline:22px}.work-grid{gap:40px 20px}.work-item:not(.wide):not(.sphere-pair)>img{height:380px}.scene-work>img{height:auto!important;max-height:65svh}.scene-work>figcaption{font-size:17px}.work-item:not(.wide) figcaption{font-size:14px;padding-top:14px}.work-item.sphere-pair{gap:18px;padding:15px 0;margin:0}.sphere-pair figure:first-child img{height:350px}.sphere-pair figure:last-child img{height:240px}.origin-opening{grid-template-columns:1fr;gap:18px}.origin-introduction h2{font-size:38px;max-width:16ch;margin-bottom:20px}.origin-introduction p{font-size:17px}.origin-continuation{margin-top:24px}.origin-continuation p{font-size:17px}.origin-continuation .origin-pull{font-size:22px}.t-date .event-label{font-size:14px;width:180px}#how-its-made .band-head h2{font-size:43px;margin-bottom:22px}.films{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 15px}.films>.film:first-child{grid-column:1/-1;grid-row:auto;display:block}.films>.film:first-child .video-embed{aspect-ratio:16/9;min-height:0}.films>.film:first-child figcaption{font-size:18px;padding:15px}.film:not(:first-child) figcaption{font-size:13px}.physical-finale p{font-size:18px}.close-band{padding-block:60px}} @media(max-width:430px){.work-item:not(.wide):not(.sphere-pair)>img{height:430px}.sphere-pair figure:first-child img{height:310px}.sphere-pair figure:last-child img{height:220px}.work-item.sphere-pair figcaption{font-size:12px}.films{grid-template-columns:1fr}.films>.film:first-child{grid-column:auto}} /* Final rendered pass: scene photographs occupy their actual row, without a wide empty mount. */ .scene-work>img{height:auto!important;max-height:none;width:100%;object-fit:contain}.hero .motion-toggle{transform:translateY(-24px);margin-top:0}@media(max-width:760px){.hero .motion-toggle{transform:none}} .design-switcher{display:flex;justify-content:center;align-items:center;gap:8px 24px;flex-wrap:wrap;padding:11px 20px;background:#0b1530;border-bottom:1px solid #34405a;font-size:12px}.design-switcher a{color:#cbd0da;padding:5px 0}.design-switcher a[aria-current]{color:#efbc5c;border-bottom:2px solid #d9a441}.design-switcher a:last-child{color:#efbc5c}.design-switcher a:focus-visible{outline:2px solid #d9a441;outline-offset:4px}@media(max-width:760px){.design-switcher{gap:3px 15px;font-size:11px;padding:8px 15px}} /* Preserve the complete video only in native fullscreen; page layout is unchanged. */ video:fullscreen{object-fit:contain!important;object-position:center!important;background:#000!important;width:100vw!important;height:100vh!important;max-height:none!important;aspect-ratio:auto!important} /* Source: css/v50/option-b.css */ /* B — salon: a clear, denser wall of objects, interrupted by complete room scenes. */ #the-work>.wrap{max-width:1550px;padding-inline:40px}#the-work .band-head{display:block;max-width:900px;margin-bottom:34px}#the-work .band-head h2{font-size:64px;margin-bottom:20px}#the-work .band-head .band-lede{max-width:72ch}.work-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 26px}.work-item:not(.wide):not(.sphere-pair)>img{height:390px}.work-item figcaption{font-size:15px!important;padding-top:14px!important}.scene-work:first-child{grid-column:span 2}.scene-work:first-child>img{height:390px!important;object-fit:cover;object-position:center}.scene-work:not(:first-child){grid-column:1/-1}.scene-work:not(:first-child)>img{height:auto!important;max-height:none;width:100%;max-width:1100px;margin-inline:auto}.scene-work:not(:first-child)>figcaption{max-width:1100px;margin-inline:auto}.sphere-pair{grid-column:1/-1;max-width:1100px}.band-quotes{font-size:22px!important}.archive-introduction{grid-template-columns:1.1fr 1fr}.archive-introduction img{height:430px}.frank-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.films{grid-template-columns:repeat(3,minmax(0,1fr))}.films>.film:first-child{grid-column:auto;grid-row:auto;display:block}.films>.film:first-child .video-embed{aspect-ratio:16/9;min-height:0}.films>.film:first-child figcaption{font-size:15px;padding:15px 17px}.films>.film:first-child .video-play{width:58px;height:58px;font-size:24px}.hero-inner{max-width:1200px}.hero h1{max-width:14ch}.hero-video-panel{right:4%;width:min(380px,29vw)} @media(max-width:1000px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.scene-work:first-child{grid-column:1/-1}.frank-wall{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){#the-work>.wrap{padding-inline:22px}#the-work .band-head h2{font-size:48px}.work-grid{gap:32px 16px}.work-item:not(.wide):not(.sphere-pair)>img{height:260px}.scene-work:first-child>img{height:auto!important;object-fit:contain}.scene-work:not(:first-child)>img{max-height:none}.work-item figcaption{font-size:13px!important}.frank-wall{grid-template-columns:1fr}.films{grid-template-columns:1fr 1fr}.hero-video-panel{right:auto;width:300px}.archive-introduction img{height:auto}.hero-inner{max-width:100%}} @media(max-width:430px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.work-item:not(.wide):not(.sphere-pair)>img{height:245px}.sphere-pair{grid-template-columns:1.3fr 1fr!important}.films{grid-template-columns:1fr}} /* Preserve the complete driftwood silhouette in the salon's opening pair. */ .scene-work:first-child>img{height:auto!important;max-height:none;object-fit:contain} /* Source: css/v50/hybrid.css */ /* v37: B's collection density, A's dramatic pauses, reference's in-place sliding stories. */ .work-item.sphere-pair{max-width:1250px;padding-block:45px;grid-template-columns:1.5fr 1fr;gap:8%}.sphere-pair figure:first-child img{height:640px}.sphere-pair figure:last-child img{height:420px}.scene-work:not(:first-child)>img{max-width:none;width:100%;height:auto!important}.scene-work:not(:first-child)>figcaption{font-size:20px!important;max-width:1000px;padding-top:20px!important}.origin-opening{grid-template-columns:1fr 1.08fr;gap:55px}.archive-card{height:auto;min-width:0;overflow:visible;padding-bottom:0;display:flex;flex-direction:column;border-bottom:1px solid rgba(217,164,65,.2)}.archive-card.sliding-work{display:flex;height:auto;gap:0}.work-plate{order:0;position:relative;height:370px;min-height:370px;overflow:hidden;padding:0!important;isolation:isolate}.work-plate>img{width:100%;height:100%;object-fit:contain;background:transparent;border-radius:8px;pointer-events:auto}.work-label{order:1;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;width:100%;min-height:88px;padding:19px 0 18px;border:0;background:none;color:#f4f2ec;text-align:left;font:inherit;font-size:21px;line-height:1.3;font-weight:750;cursor:pointer}.work-label>span:first-child{min-width:0;max-width:30ch}.work-plus{flex:0 0 28px;position:relative;width:28px;height:28px;border:1px solid #71603c;border-radius:50%;margin-top:0}.work-plus:before,.work-plus:after{content:'';position:absolute;left:50%;top:50%;background:#e9b95c;transform:translate(-50%,-50%);transition:transform .25s,opacity .25s}.work-plus:before{width:12px;height:2px}.work-plus:after{height:12px;width:2px}.work-label[aria-expanded=true] .work-plus:after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}.work-label:hover{color:#efbc5c}.work-label:focus-visible{outline:2px solid #e9b95c;outline-offset:4px}.work-story{position:absolute;inset:auto 0 0;z-index:2;max-height:100%;height:auto;overflow-y:auto;overscroll-behavior:contain;padding:24px 23px 28px;background:#14203f;border-top:1px solid #b69250;transform:translateY(102%);visibility:hidden;pointer-events:none;transition:transform .52s cubic-bezier(.22,.61,.36,1),visibility 0s linear .52s;scrollbar-width:thin;scrollbar-color:#b69250 #14203f}.story-open .work-story{transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform .52s cubic-bezier(.22,.61,.36,1),visibility 0s linear 0s}.work-story p{font-size:16px;line-height:1.8;color:#e2e5eb;max-width:65ch;margin:0 0 18px}.work-story p:last-child{margin-bottom:0}.work-story .story-extra{margin:22px 0 0}.work-story .story-extra img{width:100%;height:auto;object-fit:contain;pointer-events:auto}.work-story .story-extra figcaption{font-size:13px;line-height:1.6;color:#cbd0da}.archive-card:not(.sliding-work)>img{height:370px;min-height:370px;background:transparent;object-fit:contain}.archive-card:not(.sliding-work)>div{padding:19px 0}.archive-card:not(.sliding-work) h3{min-height:0}.archive-card:not(.sliding-work) p{font-size:15px;margin:0 0 12px}.frank-wall{row-gap:32px}.work-story:focus-visible{outline:2px solid #e9b95c;outline-offset:-3px} @media(max-width:1000px){.work-plate{height:350px;min-height:350px}.sphere-pair figure:first-child img{height:530px}.sphere-pair figure:last-child img{height:350px}} @media(max-width:760px){.work-item.sphere-pair{padding:15px 0;gap:18px}.sphere-pair figure:first-child img{height:350px}.sphere-pair figure:last-child img{height:240px}.scene-work:not(:first-child)>figcaption{font-size:16px!important}.origin-opening{grid-template-columns:1fr;gap:20px}.work-plate{height:370px;min-height:370px}.work-label{font-size:20px;min-height:78px;padding-top:17px}.work-story{padding:21px 20px 24px}.work-story p{font-size:16px}.archive-card:not(.sliding-work)>img{height:370px;min-height:370px}} @media(max-width:430px){.sphere-pair figure:first-child img{height:310px}.sphere-pair figure:last-child img{height:220px}.work-plate{height:350px;min-height:350px}.archive-card:not(.sliding-work)>img{height:350px;min-height:350px}} @media(prefers-reduced-motion:reduce){.work-story,.story-open .work-story,.work-plus:before,.work-plus:after{transition:none}} @media print{.work-plate{height:auto;min-height:0;overflow:visible}.work-story{position:static;transform:none;visibility:visible;max-height:none;overflow:visible;background:transparent;color:#222;pointer-events:auto}.work-label{display:block}.work-plus{display:none}.work-story p{color:#222}} .work-plate>img,.archive-card:not(.sliding-work)>img{object-position:center bottom} /* v38 explicit actions outside the scrollable story */ .work-label{flex-direction:column;align-items:flex-start;gap:9px;min-height:116px} .work-label>span:first-child{max-width:none} .work-action{font-size:15px;line-height:1.4;font-weight:650;color:#efbc5c;text-decoration:underline;text-underline-offset:4px} .work-story{overflow-y:auto;scrollbar-gutter:stable;scrollbar-width:auto} .work-story::-webkit-scrollbar{width:9px} .work-story::-webkit-scrollbar-thumb{background:#b69250;border-radius:8px;border:2px solid #14203f} .work-story::-webkit-scrollbar-track{background:#14203f} .sliding-work .work-plate > img{cursor:pointer} /* v39: compact, aligned archive stages; preserve every image's full bounds. */ .frank-wall{column-gap:26px;row-gap:24px;align-items:start} .work-plate{height:clamp(270px,22vw,310px);min-height:0} .work-plate>img{object-fit:contain;object-position:center center;border-radius:4px} .archive-card:not(.sliding-work)>img{height:clamp(270px,22vw,310px);min-height:0;object-fit:contain;object-position:center center} .work-label{min-height:92px;font-size:18px;line-height:1.35;font-weight:650;padding:13px 0 14px;gap:7px} .work-label>span:first-child{max-width:none;text-wrap:pretty} .work-action{font-size:14px;line-height:1.4} .archive-card:not(.sliding-work)>div{padding:13px 0 14px} .archive-card:not(.sliding-work) h3{font-size:18px;line-height:1.35;font-weight:650;margin-bottom:7px} .work-story{max-height:100%;overscroll-behavior:contain;scrollbar-gutter:stable} @media(min-width:761px) and (max-width:1000px){.work-plate,.archive-card:not(.sliding-work)>img{height:300px;min-height:0}} @media(max-width:760px){.frank-wall{row-gap:26px}.work-plate,.archive-card:not(.sliding-work)>img{height:320px;min-height:0}.work-label{font-size:18px;min-height:0;padding-bottom:16px}.work-story{padding:19px 18px}.work-story p{line-height:1.7}} @media(max-width:380px){.work-plate,.archive-card:not(.sliding-work)>img{height:290px}} @media print{.work-plate{height:auto;min-height:0}} /* Original study photos are small files: render at their real dimensions. */ .collection-row{grid-template-columns:repeat(2,minmax(0,460px));align-items:start;gap:20px;justify-content:start} .collection-row img,.collection-row img:first-child,.collection-row img:last-child{grid-column:auto;width:100%;max-width:460px;height:auto;max-height:none;object-fit:contain;object-position:center;background:transparent} .physical-finale{grid-template-columns:minmax(0,259px) minmax(0,1fr);gap:32px} .physical-finale figure{max-width:259px} .physical-finale img{width:100%;max-width:259px;height:auto;max-height:none;object-fit:contain;object-position:center} @media(max-width:760px){.collection-row{grid-template-columns:minmax(0,460px)}.physical-finale{grid-template-columns:1fr;gap:20px}} /* Visual QA: match the actual image heights within each archive row. */ .frank-wall .work-plate,.frank-wall .archive-card:not(.sliding-work)>img{height:var(--row-art-height,270px);min-height:0} .work-plate{display:flex;align-items:center;justify-content:center} .work-plate>img{display:block;width:auto;max-width:100%;height:100%;object-fit:contain;object-position:center} .frank-wall .archive-card:not(.sliding-work)>img{width:auto;max-width:100%;align-self:center} .work-label{min-height:0;font-size:18px;padding:12px 0 14px;gap:7px} .work-label>span:first-child{min-height:2.7em} .archive-card:not(.sliding-work)>div{padding-top:12px} @media(max-width:1280px){.work-label,.archive-card:not(.sliding-work) h3{font-size:17px}} @media(max-width:760px){.work-label>span:first-child{min-height:0}.work-label{font-size:18px}} .work-plate{height:max(220px,var(--row-art-height,270px))!important;align-items:flex-end} .work-plate>img{height:var(--row-art-height,270px)} @media print{.work-plate{height:auto!important}} /* Compact gallery, quiet story controls, and grouped supporting material. */ .work-grid{grid-auto-flow:dense;row-gap:34px} .work-label{flex-direction:row;align-items:flex-start;gap:14px} .work-label>span:first-child{flex:1;min-height:2.7em} .work-action{position:relative;display:block;flex:0 0 28px;width:28px;height:28px;margin-top:0;border:1px solid #9e8555;border-radius:50%;text-decoration:none} .work-action:before,.work-action:after{content:'';position:absolute;top:50%;left:50%;background:#edc476;width:12px;height:2px;transform:translate(-50%,-50%);transition:transform .2s} .work-action:after{transform:translate(-50%,-50%) rotate(90deg)} .story-open .work-action:before{transform:translate(-50%,-50%) rotate(45deg)} .story-open .work-action:after{transform:translate(-50%,-50%) rotate(-45deg)} .archive-help{font-size:15px!important;line-height:1.5!important;color:#d9c9ab!important;margin:0 0 22px!important} .sheet-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start} .sheet-row img{display:block;width:100%;height:200px!important;max-height:200px;object-fit:contain} .physical-finale{display:grid;grid-template-columns:minmax(0,460px) minmax(0,259px) minmax(180px,1fr);gap:24px;align-items:start} .physical-finale>img{max-width:460px;width:100%;height:auto;border-radius:10px} .physical-finale figure{width:100%;margin:0} .physical-finale p{font-size:17px;line-height:1.65;margin:0} @media(max-width:760px){.work-grid{row-gap:25px}.sheet-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.sheet-row img{height:170px!important}.physical-finale{grid-template-columns:minmax(0,1.3fr) minmax(0,.75fr);gap:16px}.physical-finale>div{grid-column:1/-1}.work-label>span:first-child{min-height:0}} @media(prefers-reduced-motion:reduce){.work-action:before,.work-action:after{transition:none}} .work-plate{height:max(180px,var(--row-art-height,270px))!important}.work-story{padding:16px 18px 18px}.work-story p{font-size:15px;line-height:1.65} .glass-quartet{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} .glass-quartet .work-item>img{height:260px!important;object-fit:contain} .glass-quartet figcaption{font-size:14px!important;line-height:1.6} @media(max-width:1100px){.glass-quartet{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}.glass-quartet .work-item>img{height:300px!important}} @media(max-width:600px){.glass-quartet .work-item>img{height:230px!important}.glass-quartet{gap:22px 16px}} .sheet-row{grid-template-columns:repeat(4,minmax(0,180px));gap:18px;max-width:774px}.sheet-row img{justify-self:start}@media(max-width:760px){.sheet-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:400px}} /* Source: css/v50/gallery-v43.css */ /* v43: bounded collection refinements, shared by all three opening studies. */ .murrine-crop{height:260px;overflow:hidden;border-radius:8px} .glass-quartet .murrine-crop>img{display:block;width:100%;height:100%!important;object-fit:contain;transform:scale(1.6);transform-origin:50% 52%} .work-item.sphere-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;max-width:1100px} .sphere-pair figure:first-child img,.sphere-pair figure:last-child img{height:500px;width:100%;object-fit:contain} .frank-wall .work-label{width:min(100%,calc(var(--row-art-height,270px)*var(--art-ratio,1)));align-self:center;display:grid;grid-template-columns:28px minmax(0,1fr) 28px;align-items:start;gap:6px} .frank-wall .work-label:before{content:'';grid-column:1} .frank-wall .work-label>span:first-child{grid-column:2;grid-row:1;text-align:center;min-height:2.7em} .frank-wall .work-label .work-action{grid-column:3;grid-row:1;justify-self:end} .frank-wall .archive-card:not(.sliding-work)>div{width:min(100%,calc(var(--row-art-height,270px)*var(--art-ratio,1)));align-self:center;text-align:center} .frank-wall .work-plate>img,.frank-wall .archive-card>img{border-radius:8px} .story-pending{color:#e6c98d!important;font-style:italic} .sheet-row{grid-template-columns:repeat(4,minmax(0,212px));max-width:902px} .sheet-row img{height:236px!important;max-height:236px} .catalog-story{max-width:902px;margin-top:18px;border-bottom:1px solid #665333;padding-bottom:14px} .catalog-story summary{cursor:pointer;color:#f1d29a;font-size:17px;line-height:1.6} .catalog-story summary:focus-visible{outline:2px solid #e9b95c;outline-offset:5px} .catalog-story p{font-size:16px;color:#cbd0da;margin:14px 0 0} @media(max-width:1100px){.murrine-crop{height:300px}.sphere-pair figure:first-child img,.sphere-pair figure:last-child img{height:420px}} @media(max-width:760px){.work-item.sphere-pair{gap:18px}.sphere-pair figure:first-child img,.sphere-pair figure:last-child img{height:300px}.sheet-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:470px}.sheet-row img{height:200px!important;max-height:200px}.frank-wall .work-label>span:first-child{min-height:0}} @media(max-width:600px){.murrine-crop{height:230px}.sphere-pair figure:first-child img,.sphere-pair figure:last-child img{height:240px}} /* Glass stories share the archive interaction, while retaining gallery proportions. */ #the-work .glass-story{display:flex;flex-direction:column;min-width:0;margin-top:0} #the-work .glass-story .work-plate{height:390px!important;min-height:0;display:block;width:100%;isolation:isolate} #the-work .glass-story .work-plate>img{display:block;width:100%;height:100%;max-height:none;object-fit:contain;object-position:center;cursor:pointer} #the-work .glass-story .work-label{width:100%;padding:12px 0 10px;min-height:0;font-size:17px;line-height:1.4;display:flex;align-items:start;justify-content:space-between;gap:10px} #the-work .glass-story .work-label>span:first-child{min-height:0;text-align:left} #the-work .glass-story .work-story{max-height:100%;overflow-y:auto;text-align:left} #the-work .glass-story .work-story p{font-size:16px;line-height:1.7;margin:0} #the-work .scene-work .work-plate{height:auto!important;max-width:1100px;margin-inline:auto} #the-work .scene-work .work-plate>img{height:auto} #the-work .scene-work .work-label{max-width:1100px;margin-inline:auto} #the-work .glass-quartet .work-plate{height:260px!important} #the-work .glass-quartet .murrine-crop{height:100%;cursor:pointer} #the-work .sphere-pair{grid-template-columns:repeat(2,minmax(0,1fr))!important} #the-work .sphere-pair .glass-story .work-plate{height:500px!important} @media(max-width:1100px){#the-work .glass-quartet .work-plate{height:300px!important}#the-work .sphere-pair .glass-story .work-plate{height:420px!important}} @media(max-width:760px){#the-work .glass-story .work-plate{height:260px!important}#the-work .sphere-pair .glass-story .work-plate{height:300px!important}#the-work .glass-story .work-label{font-size:15px}#the-work .scene-work .work-plate{height:auto!important}} @media(max-width:600px){#the-work .glass-quartet .work-plate{height:230px!important}#the-work .sphere-pair .glass-story .work-plate{height:240px!important}} @media(max-width:430px){#the-work .glass-story .work-plate{height:245px!important}#the-work .scene-work .work-plate{height:auto!important}#the-work .glass-quartet .work-plate{height:230px!important}#the-work .sphere-pair .glass-story .work-plate{height:240px!important}} /* Keep glass captions, controls and readers attached to the visible image footprint. */ #the-work .glass-story{--glass-height:390px} #the-work .glass-story .work-plate,#the-work .glass-story .work-label{width:min(100%,calc(var(--glass-height)*var(--glass-ratio,1)));margin-inline:auto} #the-work .glass-story .work-label{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;gap:6px} #the-work .glass-story .work-label:before{content:'';grid-column:1} #the-work .glass-story .work-label>span:first-child{grid-column:2;grid-row:1;text-align:center} #the-work .glass-story .work-label .work-action{grid-column:3;grid-row:1;justify-self:end} #the-work .scene-work .work-plate,#the-work .scene-work .work-label{width:100%;max-width:1100px} #the-work .glass-quartet .glass-story{--glass-height:260px} #the-work .sphere-pair .glass-story{--glass-height:500px} @media(max-width:1100px){#the-work .glass-quartet .glass-story{--glass-height:300px}#the-work .sphere-pair .glass-story{--glass-height:420px}} @media(max-width:760px){#the-work .glass-story{--glass-height:260px}#the-work .sphere-pair .glass-story{--glass-height:300px}} @media(max-width:600px){#the-work .glass-quartet .glass-story{--glass-height:230px}#the-work .sphere-pair .glass-story{--glass-height:240px}} @media(max-width:430px){#the-work .glass-story{--glass-height:245px}#the-work .glass-quartet .glass-story{--glass-height:230px}#the-work .sphere-pair .glass-story{--glass-height:240px}} .work-item.sphere-pair{align-items:start}.sphere-pair .glass-story-card{align-self:start} /* v46: readers use the gallery column, independent of artwork width. */ #the-work .glass-story .work-plate{width:100%} #the-work .glass-story .work-story{width:100%;padding:16px 16px 18px;box-sizing:border-box} #the-work .glass-story .work-story p{font-size:16px;line-height:1.55;overflow-wrap:normal;word-break:normal} #the-work .glass-story .work-label{width:min(100%,calc(var(--glass-height)*var(--glass-ratio,1)))} /* Source: css/v50/studio-options.css */ /* v48: one continuous studio photograph, including the navigation. */ .studio-option{font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}.studio-option .version{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;min-height:26px;padding:5px 16px;box-sizing:border-box;background:#152438;color:#d5e0eb;font:11px/1.2 "Segoe UI",Arial,sans-serif}.version a{color:inherit}.version a[aria-current]{font-weight:700;text-decoration:underline;text-underline-offset:4px} .studio-opening{position:relative;isolation:isolate;height:100svh;min-height:574px;color:#f4f7fa;background-image:url('/images/staged/studio-v48.jpg');background-size:cover;background-position:center center;background-repeat:no-repeat;overflow:hidden} .studio-opening .site-nav{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 4%;height:68px;min-height:0;box-sizing:border-box;background:transparent;border:0;max-width:none;font-family:"Segoe UI",Arial,sans-serif}.studio-opening .brand{display:flex;align-items:center;gap:10px;color:#f7f8fa;font-size:23px;font-weight:750;letter-spacing:-.6px;white-space:nowrap}.studio-opening .brand img{height:29px;width:29px}.studio-opening .site-nav>div{display:flex;align-items:center;gap:23px}.studio-opening .site-nav>div a{font-size:12px;color:#e4ecf5;white-space:nowrap} .studio-hero{position:relative;height:calc(100% - 68px);min-height:0;max-height:none;background:none} .studio-copy{position:absolute;left:4%;top:12%;width:29%;max-width:440px;z-index:1}.artist-line{font:13px/1.5 "Segoe UI",Arial,sans-serif;color:#dbe5f0;margin:0 0 17px}.artist-line strong{font-weight:650}.studio-copy h1{font:700 clamp(30px,3vw,46px)/1.09 "Segoe UI",Arial,sans-serif;letter-spacing:-1.3px;color:#f6f8fa;margin:0;text-wrap:balance} .studio-actions{position:static;display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:25px}.studio-actions>a{display:flex;align-items:center;justify-content:center;min-width:180px;min-height:46px;box-sizing:border-box;padding:12px 18px;border:1px solid #e8eff5;border-radius:12px;background:#edf3f7;color:#152b42;font:650 12px/1.3 "Segoe UI",Arial,sans-serif;text-decoration:none;box-shadow:none}.studio-actions>a+a{background:rgba(28,48,70,.55);border-color:#a2b6ca80;color:#f3f7fb}.studio-actions>a:hover{background:#d6e5f0;color:#172e46} .studio-frank{position:absolute;right:4%;top:3%;width:178px;color:#f6f8fa;background:none;border:0;z-index:1;text-decoration:none}.studio-frank>span{display:block;color:#d9e4ef;font:12px/1.5 "Segoe UI",Arial,sans-serif}.studio-frank strong{display:block;font:700 27px/1.16 "Segoe UI",Arial,sans-serif;letter-spacing:-.5px;margin:5px 0 11px}.studio-frank b{display:inline-block;font:650 12px/1.4 "Segoe UI",Arial,sans-serif;padding-bottom:5px;border-bottom:1px solid #d5b77a}.studio-frank:hover b{color:#f4cf89}.studio-opening a:focus-visible{outline:2px solid #efc67b;outline-offset:5px} /* A: compact sculptural weight. */ .option-a .studio-copy{width:29%;top:13%} /* B: broad, light headline above its horizontal button pair. */ .option-b .studio-copy{top:3%;width:53%;max-width:780px}.option-b .studio-copy h1{font-weight:350;font-size:clamp(31px,3.2vw,49px);line-height:1.12;letter-spacing:-1.3px;max-width:24ch}.option-b .studio-actions{flex-direction:row;flex-wrap:wrap;margin-top:23px;gap:10px}.option-b .studio-actions>a{border-radius:25px;min-width:170px} /* C: lighter, close-set reading with restrained square-rounded controls. */ .option-c .studio-copy{width:30%;top:12%}.option-c .studio-copy h1{font-weight:400;font-size:clamp(30px,2.8vw,44px);line-height:1.15;letter-spacing:-.8px}.option-c .studio-actions>a{border-radius:8px;min-width:184px} /* D: firm condensed rhythm, without detached buttons. */ .option-d .studio-copy{width:29%;top:13%}.option-d .studio-copy h1{font-family:Bahnschrift,"Segoe UI",Arial,sans-serif;font-weight:600;font-size:clamp(29px,2.8vw,44px);line-height:1.15;letter-spacing:-.65px}.option-d .studio-actions{margin-top:23px}.option-d .studio-actions>a{min-width:198px;border-radius:8px} @media(min-width:761px) and (max-height:700px){.studio-copy{top:8%}.option-a .studio-copy,.option-c .studio-copy,.option-d .studio-copy{top:9%}.studio-copy h1{font-size:32px}.option-b .studio-copy h1{font-size:35px}.option-b .studio-copy{top:2%}.option-c .studio-copy h1,.option-d .studio-copy h1{font-size:31px}.artist-line{margin-bottom:13px}.studio-actions{margin-top:21px}.studio-actions>a{min-height:43px;padding:11px 15px}.studio-frank{top:1%;width:166px}.studio-frank strong{font-size:25px}} @media(max-width:1050px) and (min-width:761px){.studio-opening .site-nav>div{gap:15px}.studio-opening .brand{font-size:21px}.studio-opening .site-nav{padding-inline:3%}.studio-copy{left:3%}.studio-frank{right:3%;width:155px}.option-b .studio-actions>a{min-width:154px;font-size:11px}.option-b .studio-copy{width:54%}} @media(max-width:760px){.studio-option .version{font-size:10px;gap:12px}.studio-opening{height:auto;min-height:980px;background-size:auto 100%;background-position:64% center}.studio-opening .site-nav{height:auto;padding:16px 20px;flex-direction:column;gap:14px}.studio-opening .site-nav>div{justify-content:center;gap:12px;flex-wrap:wrap}.studio-opening .site-nav>div a{font-size:11px}.studio-opening .brand{font-size:23px}.studio-hero{height:auto;min-height:860px;padding:24px 22px 480px;box-sizing:border-box;display:flex;flex-direction:column;gap:24px}.studio-copy,.option-a .studio-copy,.option-b .studio-copy,.option-c .studio-copy,.option-d .studio-copy{position:static;width:100%;max-width:none}.studio-copy h1,.option-b .studio-copy h1,.option-c .studio-copy h1,.option-d .studio-copy h1{font-size:34px;max-width:18ch;line-height:1.1;letter-spacing:-1px}.studio-actions,.option-b .studio-actions{flex-direction:row;gap:8px;flex-wrap:wrap;margin-top:20px}.studio-actions>a,.option-b .studio-actions>a,.option-c .studio-actions>a,.option-d .studio-actions>a{min-width:0;min-height:44px;padding:11px 13px;font-size:11px}.studio-frank{position:static;align-self:flex-end;width:200px;text-align:right}.studio-frank strong{font-size:26px}} .chooser{margin:0;background:#15263b;color:#edf4fa;font-family:"Segoe UI",Arial,sans-serif}.chooser main{max-width:1200px;margin:auto;padding:40px 24px}.chooser h1{font-size:clamp(32px,4vw,52px);letter-spacing:-1.5px}.chooser p{color:#c3d3e3}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px}.choice{padding:22px;color:inherit;text-decoration:none;border:1px solid #496079;border-radius:14px;background:#1a3049}.choice>span{font-size:13px;color:#c8ac7b}.choice h2{font-size:24px;margin:8px 0 15px}.choice img{display:block;width:100%;aspect-ratio:1.6;object-fit:cover;border-radius:6px}.choice b{display:inline-block;margin-top:18px;font-size:14px}.choice:hover{background:#243e59}@media(max-width:620px){.choices{grid-template-columns:1fr}} @media(min-width:761px){.studio-frank{width:230px;top:0}.studio-frank strong{margin-bottom:8px}} @media(min-width:761px){.studio-frank{right:19%}} @media(max-width:760px){.studio-opening{height:calc(100vw * 1.7778);min-height:700px;background-image:url(/images/staged/studio-mobile-v48.jpg);background-size:100% auto;background-position:center bottom;background-color:#0c1525}.studio-opening .site-nav{padding:12px 15px;gap:8px}.studio-opening .site-nav>div{gap:9px}.studio-opening .brand{font-size:21px}.studio-hero{min-height:0;padding:18px 20px 0;gap:18px}.studio-copy h1,.option-b .studio-copy h1,.option-c .studio-copy h1,.option-d .studio-copy h1{font-size:29px;line-height:1.1;max-width:20ch}.artist-line{margin-bottom:10px}.studio-frank{width:210px}.studio-frank strong{font-size:24px;margin:3px 0 5px}.studio-actions,.option-b .studio-actions{margin-top:15px}} /* v49: one restrained Segoe UI family, B-based opening, matched transparent CTAs. */ .studio-opening,.studio-opening *{font-family:"Segoe UI",Arial,sans-serif} .studio-opening{background-image:url('/images/staged/studio-v48.jpg');background-size:cover;background-position:center center} .studio-opening .site-nav{height:76px;padding:18px 4%;border:0;background:transparent;box-shadow:none} .studio-opening .brand{font-size:24px;font-weight:600;letter-spacing:-.5px}.studio-opening .brand img{width:30px;height:30px} .studio-opening .site-nav>div a{font-size:13px;font-weight:400} .studio-hero{height:calc(100% - 76px)} .option-a .studio-copy,.option-b .studio-copy,.option-c .studio-copy,.option-d .studio-copy{left:4%;top:4%;width:53%;max-width:780px} .option-a .studio-copy h1,.option-b .studio-copy h1,.option-c .studio-copy h1,.option-d .studio-copy h1{font-family:"Segoe UI",Arial,sans-serif;font-weight:350;font-size:clamp(32px,3.2vw,49px);line-height:1.12;letter-spacing:-1.2px;max-width:24ch} .artist-line{font-size:13px;font-weight:400}.artist-line strong{font-weight:600} .option-a .studio-actions,.option-b .studio-actions,.option-c .studio-actions,.option-d .studio-actions{display:flex;flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px} .option-a .studio-actions>a,.option-b .studio-actions>a,.option-c .studio-actions>a,.option-d .studio-actions>a{min-width:172px;min-height:45px;padding:12px 18px;border:1px solid rgba(176,195,213,.45);border-radius:24px;background:transparent;color:#f3f6fa;font-size:12px;font-weight:500;box-shadow:none} .studio-actions>a:hover,.studio-actions>a+a:hover{background:rgba(210,228,245,.12);color:#fff;border-color:#b5c8d9} .option-a .studio-frank,.option-b .studio-frank,.option-c .studio-frank,.option-d .studio-frank{left:4%;right:auto;top:auto;bottom:12%;width:285px;background:transparent} .studio-frank>span{font-size:16px;line-height:1.5;color:#e3ebf3;font-weight:400}.studio-frank strong{font-size:27px;font-weight:600;line-height:1.2;margin:3px 0 12px}.studio-frank b{font-size:13px;font-weight:500;border-bottom:1px solid #a8bbcd;padding-bottom:5px} /* A: wide, open masthead and unboxed navigation. */ .option-a .studio-opening{background-position:50% 50%} /* B: softly framed inset masthead; no hard divider. */ .option-b .site-nav{margin:12px 3% 0;width:94%;height:62px;padding:12px 22px;border-radius:16px;background:rgba(10,25,43,.25)} .option-b .studio-hero{height:calc(100% - 74px)}.option-b .studio-opening{background-size:104% auto;background-position:56% 52%} .option-b .studio-copy,.option-b .studio-frank{left:5%} /* C: centered signature with a separate, evenly spaced navigation line. */ .option-c .site-nav{height:112px;flex-direction:column;justify-content:center;gap:14px;padding:16px 4%} .option-c .brand{font-size:25px}.option-c .site-nav>div{gap:30px}.option-c .studio-hero{height:calc(100% - 112px)} .option-c .studio-copy{top:1%;left:4%}.option-c .studio-opening{background-size:102% auto;background-position:42% 52%} .option-c .studio-frank{bottom:10%} /* D: left signature and navigation tucked into a compact upper-right block. */ .option-d .site-nav{height:94px;align-items:flex-start;padding-top:23px} .option-d .site-nav>div{max-width:380px;justify-content:flex-end;flex-wrap:wrap;gap:9px 24px} .option-d .brand{padding-top:5px}.option-d .studio-hero{height:calc(100% - 94px)} .option-d .studio-copy{top:2%;left:5%}.option-d .studio-frank{left:5%;bottom:10%} .option-d .studio-opening{background-size:105% auto;background-position:64% 54%} @media(min-width:761px) and (max-height:700px){.option-a .studio-copy,.option-b .studio-copy,.option-c .studio-copy,.option-d .studio-copy{top:2%;width:55%}.option-a .studio-copy h1,.option-b .studio-copy h1,.option-c .studio-copy h1,.option-d .studio-copy h1{font-size:35px}.option-a .studio-actions,.option-b .studio-actions,.option-c .studio-actions,.option-d .studio-actions{margin-top:20px}.option-a .studio-frank,.option-b .studio-frank,.option-c .studio-frank,.option-d .studio-frank{bottom:9%}.studio-frank>span{font-size:15px}.studio-frank strong{font-size:26px}} @media(max-width:1050px) and (min-width:761px){.studio-opening .site-nav>div{gap:15px}.studio-opening .site-nav>div a{font-size:12px}.option-d .site-nav>div{max-width:320px;gap:9px 18px}.option-c .site-nav>div{gap:23px}.option-a .studio-actions>a,.option-b .studio-actions>a,.option-c .studio-actions>a,.option-d .studio-actions>a{min-width:160px}} @media(max-width:760px){.option-a .studio-opening,.option-b .studio-opening,.option-c .studio-opening,.option-d .studio-opening{height:auto;min-height:980px;background-size:auto 100%;background-position:64% center}.studio-opening .site-nav,.option-b .site-nav,.option-c .site-nav,.option-d .site-nav{height:auto;width:100%;margin:0;padding:16px 20px;flex-direction:column;align-items:center;gap:14px;background:none;border-radius:0}.studio-opening .brand{font-size:23px}.studio-opening .site-nav>div,.option-d .site-nav>div{max-width:none;justify-content:center;gap:10px 14px;flex-wrap:wrap}.studio-opening .site-nav>div a{font-size:11px}.studio-hero,.option-b .studio-hero,.option-c .studio-hero,.option-d .studio-hero{height:auto;min-height:860px;padding:22px 22px 480px;display:flex;flex-direction:column;gap:25px}.option-a .studio-copy,.option-b .studio-copy,.option-c .studio-copy,.option-d .studio-copy{position:static;width:100%;max-width:none}.option-a .studio-copy h1,.option-b .studio-copy h1,.option-c .studio-copy h1,.option-d .studio-copy h1{font-size:34px;max-width:18ch}.option-a .studio-actions,.option-b .studio-actions,.option-c .studio-actions,.option-d .studio-actions{margin-top:20px;gap:8px}.option-a .studio-actions>a,.option-b .studio-actions>a,.option-c .studio-actions>a,.option-d .studio-actions>a{min-width:0;padding:11px 13px;font-size:11px}.option-a .studio-frank,.option-b .studio-frank,.option-c .studio-frank,.option-d .studio-frank{position:static;align-self:flex-start;text-align:left;width:285px}.studio-frank>span{font-size:15px}} /* Final v49 fixes: navigation must never blur the artwork beneath it. */ .studio-opening .site-nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none} @media(max-width:760px){ .option-a .studio-opening,.option-b .studio-opening,.option-c .studio-opening,.option-d .studio-opening{height:max(740px,calc(100vw * 1.7778));min-height:0;background-image:url('/images/staged/studio-mobile-v48.jpg');background-size:100% auto;background-position:center bottom} .studio-opening .site-nav,.option-b .site-nav,.option-c .site-nav,.option-d .site-nav{padding:12px 15px;gap:8px} .studio-opening .brand{font-size:21px}.studio-opening .site-nav>div,.option-d .site-nav>div{gap:9px 12px} .studio-hero,.option-b .studio-hero,.option-c .studio-hero,.option-d .studio-hero{height:auto;min-height:0;padding:18px 20px 0;gap:20px} .option-a .studio-copy h1,.option-b .studio-copy h1,.option-c .studio-copy h1,.option-d .studio-copy h1{font-size:29px;line-height:1.1;max-width:20ch} .artist-line{margin-bottom:10px}.option-a .studio-actions,.option-b .studio-actions,.option-c .studio-actions,.option-d .studio-actions{margin-top:15px} .option-a .studio-frank,.option-b .studio-frank,.option-c .studio-frank,.option-d .studio-frank{width:270px}.studio-frank>span{font-size:14px}.studio-frank strong{font-size:24px;margin:3px 0 7px} } /* =================================================================== RESPONSIVE STUDIO FRAMING - three photographs of the same scene, one per shape of window. Nothing stretched, nothing cropped off the floor. One 1.6 image could not do this: anchored to the floor, the tulip height and the size of the glass are the same dial, so enlarging the glass put the tulips behind the menu and clearing the menu shrank the glass. Three framings solve it at the source. v52: the vessel sits back behind the sphere with its base higher in the frame, and the floor is matte again rather than a mirror. =================================================================== */ @media (min-aspect-ratio:37/20){ .option-a .studio-opening{ background-image:url('/images/staged/studio-wide-v55.jpg'); background-size:cover; background-position:center bottom; } } @media (min-aspect-ratio:1/1) and (max-aspect-ratio:37/20){ .option-a .studio-opening{ background-image:url('/images/staged/studio-standard-v55.jpg'); background-size:cover; background-position:center bottom; } } @media (max-aspect-ratio:1/1){ .option-a .studio-opening{ background-image:url('/images/staged/studio-portrait-v55.jpg'); background-size:cover; background-position:center bottom; } } /* =================================================================== v50: the Frank story joins the left column instead of hanging off the bottom edge. Same corner, same alignment - it just stops being pinned to the floor, where on a television it fell below the fold and clipped the underline of its own link. =================================================================== */ @media (min-width:761px){ .option-a .studio-hero{ display:flex; flex-direction:column; align-items:flex-start; padding:32px 0 0 4%; box-sizing:border-box; } .option-a .studio-copy{position:static;width:53%;max-width:780px} .option-a .studio-frank{ position:static; left:auto;right:auto;top:auto;bottom:auto; width:285px; margin:46px 0 0; padding-top:18px; border-top:1px solid rgba(176,195,213,.30); } .option-a .studio-frank>span{font-size:13px;line-height:1.5;color:#dbe5f0} .option-a .studio-frank strong{font-size:27px;font-weight:600;line-height:1.2;letter-spacing:-.4px;margin:4px 0 13px} .option-a .studio-frank b{font-size:13px;font-weight:600;color:#f6f8fa} } /* The television: shorter hero, so the column tightens a few pixels. */ @media (min-width:761px) and (max-height:700px){ .option-a .studio-hero{padding-top:10px} .option-a .studio-frank{margin-top:38px;padding-top:16px} } /* Narrow desktop windows: the glass sits further left, so the block narrows to keep clear of it. */ @media (min-width:761px) and (max-width:1050px){ .option-a .studio-frank{width:215px} } /* Phones: already in the flow under the buttons - just add the rule. */ @media (max-width:760px){ .option-a .studio-frank{ width:285px;max-width:100%; margin-top:4px;padding-top:16px; border-top:1px solid rgba(176,195,213,.30); } .option-a .studio-frank>span{font-size:13px} .option-a .studio-frank strong{font-size:24px;margin:3px 0 11px} .option-a .studio-frank b{font-size:13px} } /* One warm accent, matching the glass. A link, not a button. */ .studio-frank{transition:border-top-color .2s} .studio-frank b{border-bottom:1px solid #d5b77a;padding-bottom:5px} .studio-frank:hover b{color:#f4cf89;border-bottom-color:#f4cf89} .studio-frank:hover{border-top-color:rgba(213,183,122,.5)} .studio-opening a:focus-visible{outline:2px solid #efc67b;outline-offset:6px;border-radius:3px} /* =================================================================== THE CHOSEN OPENING - option 3, with Igal's corrections. A hairline runs down the frame at 7.5% and everything hangs off it. The identity line is rotated along that rule rather than stacked above the headline, which is what stops the left side reading as a plain column of lines. The menu stays exactly where it was, top right. Headline and buttons sit higher than before, and the Frank entry comes back to the same left edge as the logo, the headline and the buttons - so all the type occupies one band and the glass is left alone on the right. Desktop only. Below 761px the opening keeps its stacked flow, which is the right answer on a phone. =================================================================== */ @media (min-width:761px){ /* the rule everything hangs from */ .option-a .studio-opening::before{ content:''; position:absolute; left:7.5%; top:0; bottom:0; width:1px; background:rgba(195,216,240,.26); z-index:2; pointer-events:none; } .option-a .studio-hero{ position:static; display:block; height:auto; padding:0; min-height:0; } /* the logo keeps its place; the name beside the mark in the narrow face */ .option-a .studio-opening .brand{ font-family:'Archivo Narrow',system-ui,sans-serif !important; font-weight:700 !important; letter-spacing:.02em !important; } /* the menu does not move */ .option-a .studio-opening .site-nav > div a{ font-family:'Archivo Narrow',system-ui,sans-serif !important; font-size:clamp(9px,.72vw,11.5px) !important; letter-spacing:.13em; text-transform:uppercase; color:#a8bed8 !important; } /* identity, turned onto the rule */ .option-a .artist-line{ position:absolute; left:7.5%; top:50%; z-index:3; margin:0 !important; transform:translate(-50%,-50%) rotate(-90deg); white-space:nowrap; font-family:'Archivo Narrow',system-ui,sans-serif !important; font-size:clamp(8px,.7vw,11px) !important; font-weight:500 !important; letter-spacing:.3em; text-transform:uppercase; color:#93a9c4 !important; } .option-a .artist-line strong{ font-weight:600 !important; color:#b9cbe2 !important; } /* the headline, lifted, in the serif */ .option-a .studio-copy{ position:absolute; left:10%; top:25%; width:41%; max-width:none; z-index:3; } .option-a .studio-copy h1{ margin:0 !important; font-family:'DM Serif Display',Georgia,serif !important; font-weight:400 !important; font-size:clamp(22px,3.5vw,58px) !important; line-height:1 !important; letter-spacing:-.015em !important; color:#fff !important; } .option-a .studio-copy h1 i{ font-style:italic; color:#eac184; } /* the buttons, lifted, out of the copy block */ .option-a .studio-actions{ position:absolute; left:10%; top:60%; z-index:3; display:flex; flex-direction:row; gap:10px; margin:0 !important; } .option-a .studio-actions > a{ font-family:'Archivo Narrow',system-ui,sans-serif !important; font-size:clamp(10px,.82vw,13px) !important; font-weight:400 !important; letter-spacing:.06em; min-width:9.5em; min-height:0; padding:.78em 1.2em; border-radius:40px; border:1px solid rgba(206,221,238,.5) !important; background:transparent !important; color:#f2f6fb !important; } .option-a .studio-actions > a:hover{ background:rgba(234,193,132,.12) !important; border-color:#eac184 !important; } /* Frank, back on the same left edge as everything else */ .option-a .studio-frank{ position:absolute; left:10%; right:auto; top:auto; bottom:9%; width:25%; margin:0; z-index:3; padding-top:.7em; border-top:1px solid rgba(234,193,132,.5); font-family:'Archivo Narrow',system-ui,sans-serif !important; font-size:clamp(9px,.74vw,11.5px) !important; line-height:1.5 !important; color:#c6d6e9 !important; } .option-a .studio-frank > span{ font-family:'Archivo Narrow',system-ui,sans-serif !important; font-size:inherit !important; color:#c6d6e9 !important; } .option-a .studio-frank strong{ display:block; margin:.1em 0 .25em !important; font-family:'DM Serif Display',Georgia,serif !important; font-weight:400 !important; font-size:clamp(13px,1.3vw,20px) !important; line-height:1.15 !important; letter-spacing:0 !important; color:#fff !important; } .option-a .studio-frank b{ font-family:'Archivo Narrow',system-ui,sans-serif !important; font-size:inherit !important; font-weight:400 !important; border-bottom:1px solid #eac184; padding-bottom:4px; color:#f2dcb3 !important; } .option-a .studio-frank:hover b{ color:#fff !important; border-bottom-color:#fff; } } /* ---- the text field is NOT the same width on every framing --------- Measured off the photographs themselves: the glass begins at 44% of the wide framing but at only 34% of the standard one, and above 40% of the standard frame's height it is clear out to 52%. So the headline column cannot be one fixed width - on a laptop-shaped window it has to be narrower and set smaller, and it has to finish above that 40% line. ------------------------------------------------------------------ */ @media (min-width:761px) and (min-aspect-ratio:37/20){ .option-a .studio-copy{ width:34%; } .option-a .studio-copy h1{ font-size:clamp(22px,3.2vw,54px) !important; } } @media (min-width:761px) and (max-aspect-ratio:37/20){ .option-a .studio-copy{ width:39%; top:23%; } .option-a .studio-copy h1{ font-size:clamp(20px,2.5vw,40px) !important; } .option-a .studio-actions{ top:54%; } .option-a .studio-frank{ width:28%; } } /* ---- the identity line, set properly on its rule ------------------- rotate() combined with translate() moved it along the rotated axes, which pushed the text sideways into the headline. writing-mode does the same job without that trap: the line runs up the rule and its box stays the width of the type, not its length. ------------------------------------------------------------------ */ @media (min-width:761px){ .option-a .artist-line{ writing-mode:vertical-rl; transform:translate(-50%,-50%) rotate(180deg); max-height:46%; } } /* ---- match the approved mock exactly on the wide framing ----------- Measured off notes/hero-mine.html option 3 at its own 2.21 box: headline 41% wide at 45px (3.67vw), identity on the rule at 7%, buttons and Frank at 10%. I had tightened these to 34% and 40px to keep clear of the glass, which is why the live page read smaller than the version Igal approved. The box width is a maximum, not the rendered line length - the text wraps well before the vessel at 44%, which the mock already demonstrates. His three changes on top of the mock: the headline higher (30% -> 25%), the buttons higher (70% -> 60%), and Frank moved from the centre at 52% back to the left edge at 10%. ------------------------------------------------------------------ */ @media (min-width:761px) and (min-aspect-ratio:37/20){ .option-a .studio-copy{ width:41%; top:25%; } .option-a .studio-copy h1{ font-size:clamp(24px,3.67vw,58px) !important; } .option-a .studio-actions{ top:60%; } .option-a .studio-frank{ left:10%; width:25%; bottom:9%; } } /* ---- the headline was set solid ------------------------------------ line-height:1 with a 47px serif puts the three lines almost touching, which is the squashing Igal pointed at. Letter-spacing was pulled in as well. Both go back to normal distance. ------------------------------------------------------------------ */ @media (min-width:761px){ .option-a .studio-copy h1{ line-height:1.14 !important; letter-spacing:-.005em !important; } /* the gold italic sits on the same rhythm */ .option-a .studio-copy h1 i{ letter-spacing:0; } } /* =================================================================== FOUR CORRECTIONS, from Igal's own screenshot. 1. The italic was never loaded. The font link asked for DM Serif Display with no italic variant, so the browser was faking one by slanting the roman - which is why "So Much Movement." looked like a different typeface. The real italic is loaded now. 2. The headline goes back to solid. I loosened it because the lines looked squashed to me; he meant the wordmark, not the headline. 3. "Glass In Action" was set in Archivo NARROW - a condensed face. That is the squashing. It goes back to normal width. 4. The rail must stop before it runs into the wordmark at the top. =================================================================== */ @media (min-width:761px){ /* 1 + 2: the headline exactly as in the approved image */ .option-a .studio-copy h1{ line-height:1 !important; letter-spacing:-.015em !important; } .option-a .studio-copy h1 i{ font-family:'DM Serif Display',Georgia,serif !important; font-style:italic !important; font-synthesis:none; /* never fake it again */ letter-spacing:-.015em; } /* 3: the wordmark at normal width, not condensed */ .option-a .studio-opening .brand{ font-family:'Archivo',system-ui,sans-serif !important; font-weight:700 !important; letter-spacing:-.01em !important; } /* 4: the rail starts below the wordmark and the menu */ .option-a .studio-opening::before{ top:17%; } /* the identity line re-centres inside the shortened rail */ .option-a .artist-line{ top:56%; } /* Frank, a little higher */ .option-a .studio-frank{ bottom:13%; } } /* ---- the column was too narrow for the sentence -------------------- Measured the wide photograph band by band: the glass does not start at 44% all the way up. Across the headline's own band it begins at 49%, and higher still at 52-55%. Holding the column to 44% for the full height forced "Still" onto the second line. Column now runs to 47%, and the face comes down from 47px to the ~41px of the approved screenshot, so the sentence breaks where Igal wants it: How Something So Still / Can Have So Much / Movement. ------------------------------------------------------------------ */ @media (min-width:761px) and (min-aspect-ratio:37/20){ .option-a .studio-copy{ width:37%; top:24%; } .option-a .studio-copy h1{ font-size:clamp(22px,3.2vw,52px) !important; } } /* ---- the breaks are a decision, not an accident -------------------- Fluid type in a fluid column means the wrap point moves with the window, which is why "Still" kept falling to the second line. The three lines are now explicit. The face is sized so the longest of them - "How Something So Still" - still finishes inside the clear zone, which is 49% across in this band. ------------------------------------------------------------------ */ @media (min-width:761px){ .option-a .studio-copy h1 br.hb{ display:block; } } @media (max-width:760px){ .option-a .studio-copy h1 br.hb{ display:none; } } @media (min-width:761px) and (min-aspect-ratio:37/20){ .option-a .studio-copy{ width:39%; } .option-a .studio-copy h1{ font-size:clamp(22px,2.75vw,46px) !important; } } /* =================================================================== MOBILE OPENING - from the pressure test. At 390 the Frank invitation sat on top of the lit sphere and the vessel, white on bright amber, and the right button met a tulip. The artwork is not touched. Instead the top of the frame gets a soft dark field - the same navy the backdrop already is - so the type has somewhere to live, and the whole column is tightened so it finishes above the glass. =================================================================== */ @media (max-width:760px){ /* a text-safe field, darkest at the top, gone before the glass */ .option-a .studio-opening::after{ content:''; position:absolute; left:0; right:0; top:0; height:58%; background:linear-gradient(180deg, rgba(6,16,40,.92) 0%, rgba(6,16,40,.88) 42%, rgba(6,16,40,.62) 72%, rgba(6,16,40,0) 100%); z-index:1; pointer-events:none; } .option-a .studio-hero, .option-a .studio-opening .site-nav{ position:relative; z-index:2; } /* tighten the column so it finishes before the artwork */ .option-a .studio-hero{ padding:14px 20px 0 !important; min-height:0 !important; height:auto !important; gap:0 !important; } .option-a .artist-line{ position:static !important; transform:none !important; writing-mode:horizontal-tb !important; margin:0 0 8px !important; font-size:12px !important; letter-spacing:.1em; text-transform:uppercase; color:#b9cbe2 !important; } .option-a .studio-copy{ position:static !important; width:100% !important; } .option-a .studio-copy h1{ font-size:clamp(26px,7.4vw,34px) !important; line-height:1.12 !important; margin:0 !important; } .option-a .studio-actions{ position:static !important; margin:16px 0 0 !important; display:flex; flex-wrap:wrap; gap:8px; } .option-a .studio-actions > a{ min-width:0; flex:0 1 auto; padding:.7em 1em; font-size:12px !important; min-height:44px; } /* the invitation sits with the rest, inside the dark field */ .option-a .studio-frank{ position:static !important; width:auto !important; margin:18px 0 0 !important; bottom:auto !important; left:auto !important; padding-top:12px; border-top:1px solid rgba(234,193,132,.5); } .option-a .studio-frank > span{ font-size:12px !important; } .option-a .studio-frank strong{ font-size:21px !important; margin:2px 0 6px !important; } .option-a .studio-frank b{ font-size:12px !important; display:inline-block; min-height:44px; line-height:44px; } /* the rail is a desktop device only */ .option-a .studio-opening::before{ display:none; } } /* ---- mobile: the invitation still reached the vessel --------------- Frank's block finished at 57% of the frame and the glass begins around 48%, so "Read the story" sat on the patterned vessel. Every element above it gives up a few pixels, and the dark field holds its opacity further down. ------------------------------------------------------------------ */ @media (max-width:760px){ .option-a .studio-opening::after{ height:64%; background:linear-gradient(180deg, rgba(6,16,40,.94) 0%, rgba(6,16,40,.92) 55%, rgba(6,16,40,.72) 80%, rgba(6,16,40,0) 100%); } .option-a .studio-opening .site-nav{ padding:10px 20px !important; gap:6px !important; } .option-a .studio-hero{ padding-top:8px !important; } .option-a .artist-line{ margin-bottom:6px !important; font-size:11px !important; } .option-a .studio-copy h1{ font-size:clamp(23px,6.6vw,30px) !important; } .option-a .studio-actions{ margin-top:12px !important; } .option-a .studio-actions > a{ min-height:42px; padding:.6em .9em; } .option-a .studio-frank{ margin-top:11px !important; padding-top:9px; } .option-a .studio-frank strong{ font-size:19px !important; margin:1px 0 3px !important; } .option-a .studio-frank b{ min-height:40px; line-height:40px; } } /* =================================================================== 1. MOBILE: THE ARCHIVE INTRODUCTION WAS IN TWO COLUMNS. option-b.css sets .archive-introduction to 1.1fr 1fr with no media query, so it overrides the single column style.css declares for mobile. On top of that .band-head is display:contents there, and only the eyebrow, the h2 and the first paragraph are given grid rows - so the remaining paragraphs auto-placed into the second column and the heading ended up beside the prose. One column, normal reading order, nothing else touched. =================================================================== */ @media (max-width:760px){ .archive-introduction{ grid-template-columns:1fr !important; gap:16px !important; } .archive-introduction .band-head{ display:block !important; } .archive-introduction .band-head > *, .archive-introduction > figure{ grid-row:auto !important; } .archive-introduction .band-lede{ margin:0 0 12px; } .archive-introduction > figure{ margin-top:4px; } } /* =================================================================== 5. LOW-RESOLUTION DESKTOP: THE SUPPORTING TYPE WAS TOO SMALL. Measured at 1024x600: artist credit 8px and turned on its side, navigation 9px, button labels 10px, Frank's qualifier 9px. All of it below a readable minimum, and the identity - the one line that says whose work this is - was the hardest thing on the screen to read. Minimums raised, and the rotated credit is now reserved for windows wide enough to carry it. Below 1200px it sits horizontally above the headline, where it reads normally. =================================================================== */ @media (min-width:761px){ .option-a .studio-opening .site-nav > div a{ font-size:max(12px,.78vw) !important; } .option-a .studio-actions > a{ font-size:max(13px,.85vw) !important; min-height:44px; padding:.7em 1.15em; } .option-a .studio-frank{ font-size:max(12px,.8vw) !important; } .option-a .studio-frank > span{ font-size:max(12px,.8vw) !important; } .option-a .studio-frank strong{ font-size:max(18px,1.35vw) !important; } .option-a .studio-frank b{ font-size:max(12px,.8vw) !important; display:inline-block; min-height:34px; line-height:30px; } .option-a .artist-line{ font-size:max(12px,.78vw) !important; } } /* the credit only goes on the rail where there is room for it */ @media (min-width:761px) and (max-width:1199px){ .option-a .studio-opening::before{ display:none; } .option-a .artist-line{ position:absolute !important; left:10% !important; top:17% !important; transform:none !important; writing-mode:horizontal-tb !important; max-height:none !important; white-space:nowrap; letter-spacing:.14em; text-transform:uppercase; } .option-a .studio-copy{ top:23% !important; } } /* =================================================================== 4. MOBILE STORY PANELS WERE TOO NARROW AND TOO SHORT. At 390 the glass grid is two 165px columns, so a story opened into a 165px-wide panel - three or four words a line. And a long archive story had a 198px reading window for 1272px of text. A card being read takes the whole width for as long as it is open, and the panel gets a bounded but generous height with a visible cue that there is more below. Nothing covers a neighbouring piece, the page does not jump, and closing returns the card to its place. =================================================================== */ @media (max-width:760px){ /* the card being read takes the full row */ .work-grid > .sliding-work.story-open, .work-grid > .work-item.story-open{ grid-column:1 / -1 !important; } /* a readable, bounded reading height */ .sliding-work.story-open .work-story, .archive-card.story-open .work-story{ max-height:min(58vh,480px) !important; overflow-y:auto !important; overscroll-behavior:contain; padding-right:12px; scrollbar-width:thin; scrollbar-color:rgba(234,193,132,.55) transparent; } .sliding-work.story-open .work-story::-webkit-scrollbar{ width:4px; } .sliding-work.story-open .work-story::-webkit-scrollbar-thumb{ background:rgba(234,193,132,.55); border-radius:4px; } /* the cue: the text fades at the foot while there is more to read */ .sliding-work.story-open, .archive-card.story-open{ position:relative; } .sliding-work.story-open .work-story{ -webkit-mask-image:linear-gradient(180deg,#000 0,#000 88%,rgba(0,0,0,.25) 100%); mask-image:linear-gradient(180deg,#000 0,#000 88%,rgba(0,0,0,.25) 100%); } .sliding-work.story-open .work-story p{ font-size:15px; line-height:1.65; } } /* =================================================================== FIRST-PAGE NOTES FROM IGAL'S WALKTHROUGH. - the buttons lift a little - the rule above Frank Stella stays exactly where it is - "Read the story" loses its underline and takes an arrow instead - the vertical credit moves further left, away from the headline: set on its side so close to the text it was hard to read =================================================================== */ @media (min-width:761px){ /* buttons a little higher */ .option-a .studio-actions{ top:56% !important; } /* the credit and its rail move left, off the headline */ .option-a .studio-opening::before{ left:5%; } .option-a .artist-line{ left:5% !important; } /* an arrow instead of a rule under the link */ .option-a .studio-frank b{ border-bottom:0 !important; padding-bottom:0 !important; display:inline-flex; align-items:center; gap:.45em; min-height:0; line-height:1.3; } .option-a .studio-frank b::after{ content:'\2192'; /* → */ font-size:1.05em; line-height:1; transform:translateX(0); transition:transform .22s ease; } .option-a .studio-frank:hover b::after{ transform:translateX(4px); } } /* the same on mobile: no rule under the link, arrow beside it */ @media (max-width:760px){ .option-a .studio-frank b{ border-bottom:0 !important; display:inline-flex; align-items:center; gap:.45em; min-height:40px; } .option-a .studio-frank b::after{ content:'\2192'; font-size:1.05em; } } /* The Glass grid is sized by gallery-v43.css: each figure carries its own --glass-ratio inline and the plate AND the caption are set to --glass-height x ratio, which is what kept every caption centred under its own picture at the picture-s own width. Overriding the heights here flattened that engine and broke the centring, so the sizing is tuned through --glass-height further down instead. */ /* ---- the bands need to announce themselves ------------------------ Igal: moving from the glass into Frank, and from Frank into Why Glass, and again into The Work, the ground barely changes - you cannot tell the subject has changed. A hairline and a real step in tone at each seam, using the palette already in the file. ------------------------------------------------------------------ */ body #frank{ border-top:1px solid rgba(217,164,65,.28); } body #why-glass{ border-top:1px solid rgba(217,164,65,.28); } body #work-for-frank{ border-top:1px solid rgba(217,164,65,.28); } body #how-its-made{ border-top:1px solid rgba(217,164,65,.28); } /* ---- the two lines that should stand up --------------------------- */ body .origin-sub, body h3.origin-sub{ margin-top:clamp(3.6rem,6.5vw,5.6rem) !important; padding-top:1.4rem; border-top:2px solid rgba(217,164,65,.6); font-style:italic; color:#f2e3c4 !important; } /* ================================================================== TYPOGRAPHY — items 1, 19, 20, 21 Igal: "a new font and huge", "four or five across the opening alone", "it is starting to look like a Christmas light." The cause was not taste, it was wiring. The page downloads three families - Archivo, Archivo Narrow, DM Serif Display - but body copy was declared "Segoe UI" and every heading "Inter". Neither is downloaded. Inter rendered only because it happens to be installed on this machine; on a machine without it the headings would change again. So the page was running on four accidental faces. Two deliberate ones now: Archivo for everything, DM Serif Display for the hero line and the few places that should feel spoken. ================================================================== */ body, body .band-lede, body .story-text, body .origin p, body .origin-continuation p, body .archive-card p, body .sheets > p, body .after > p, body .collection > p, body figcaption, body .eyebrow, body .band-quotes, body .work-item figcaption{ font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; } body h1, body h2, body h3, body h4, body .band-head h2, body .origin h2, body .sheets h3, body .after h3, body .collection h3, body .archive-card h3, body .work-label{ font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; } /* the hero keeps the serif - it is the one voice on the page */ body .studio-opening h1, body .studio-copy h1, body .studio-frank b{ font-family:'DM Serif Display',Georgia,serif; } body{ font-synthesis:none; } /* ---- one heading scale, and a quieter one ------------------------ Rendered before this: 64px, 65px, 54px, 49px for headings doing the same job. Now every band title is the same size and smaller, so no single one shouts over the opening. ------------------------------------------------------------------ */ body .band-head h2, body .origin h2, body #the-work .band-head h2, body #how-its-made .band-head h2, body .origin-introduction h2, body .close-band h2{ font-size:clamp(31px,3.1vw,46px) !important; line-height:1.1 !important; font-weight:700 !important; letter-spacing:-.015em; } body .sheets h3, body .after h3, body .collection h3{ font-size:clamp(20px,1.7vw,25px) !important; font-weight:700; letter-spacing:-.005em; } /* ---- item 23: the line the whole section rests on ----------------- "Deciding to learn glassblowing myself" is the thesis of the page and it was set as ordinary body copy at 26px with a thin rule. Igal: "does not announce itself." It speaks now - the serif, real air around it, the gold kept but made structural. ------------------------------------------------------------------ */ body .origin-pull{ font-size:clamp(21px,2vw,30px) !important; line-height:1.42 !important; font-weight:400; color:#f6ead1 !important; margin:clamp(2.4rem,4.5vw,3.8rem) 0 !important; padding:0 0 0 clamp(18px,1.8vw,30px) !important; border-left:3px solid #d9a441 !important; max-width:none !important; } /* ---- item 24: and the one that follows it ------------------------ */ body .origin-sub, body h3.origin-sub{ font-size:clamp(27px,2.6vw,38px) !important; font-weight:700 !important; } /* ---- and nothing left behind ------------------------------------ Twenty of the piece stories, the timeline date labels, the nav and the catalog story each re-declared "Segoe UI" on themselves, so setting the family on body alone never reached them. Everything inherits now; the serif rules above out-rank this one and keep it. ------------------------------------------------------------------ */ body{ font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; } /* everything inside the page content inherits; the hero keeps its own rules untouched, because that opening is already signed off. */ body .wrap, body .wrap *, body .site-nav, body .site-nav *, body footer, body footer *{ font-family:inherit; } /* weights the page asks for but never downloads: 650 and 800 both resolve to a synthesised face. Archivo ships 400/600/700 here. */ body .work-label, body .archive-card h3, body .sheets h3, body .after h3, body .collection h3, body .frank-wall h3, body h3{ font-weight:700; } /* ---- the Hat poster's frame, without :has() ---------------------- The ratio that makes that poster fill its frame was keyed on :has(), so on a browser without it the frame falls back to 16/9 and crops the top and bottom off the sculpture. ------------------------------------------------------------------ */ body .origin-film .video-embed{ aspect-ratio:960/768; } /* ================================================================== THE SEAMS BETWEEN SECTIONS — items 3, 12, 19, 25 Igal: "you cannot tell the subject has changed"; "three different background colours run in sequence ... the sequence is muddled"; "no transition into this section either." Measured: the bands alternated between rgb(4,16,47) and rgb(8,21,53) - a luminance step of 0.0024, which is nothing. Worse, the colour came from .band:nth-of-type(even), so it tracked a section's POSITION rather than its subject; the band-white / band-soft / band-paper classes were doing nothing at all. Now each band is named and the step between neighbours is real, with a soft fall of light at the top of each so the change reads as a transition rather than a join. ================================================================== */ body #the-work { background:#091a36 !important; } /* deepest, so the glass carries it */ body #frank { background:#0d1b3c !important; } /* lifts - a new subject */ body #why-glass { background:#040e26 !important; } body #work-for-frank{ background:#0d1b3c !important; } body #how-its-made { background:#040e26 !important; } body #contact { background:#0d1b3c !important; } body #the-work, body #frank, body #why-glass, body #work-for-frank, body #how-its-made, body #contact{ position:relative; } body #frank::before, body #why-glass::before, body #work-for-frank::before, body #how-its-made::before, body #contact::before{ content:''; position:absolute; left:0; right:0; top:0; height:170px; pointer-events:none; z-index:0; background:linear-gradient(to bottom, rgba(217,164,65,.055), rgba(217,164,65,0) 78%); } body #frank > *, body #why-glass > *, body #work-for-frank > *, body #how-its-made > *, body #contact > *{ position:relative; z-index:1; } /* ================================================================== ITEM 26 — keep the piece in view while its story is open Igal: "Opening a story hides the piece ... a small thumbnail of the picture sits above the text at the top left, so you can still see what you are reading about." Measured: the panel covered the plate from 32px down, so of a 290px photograph a 32px sliver was left. The picture now steps back into the top-left corner and the story takes the room below it. ================================================================== */ body #work-for-frank .sliding-work .work-plate > img{ transition:height .42s cubic-bezier(.22,.61,.36,1), width .42s cubic-bezier(.22,.61,.36,1), object-position .42s ease; } body #work-for-frank .sliding-work.story-open .work-plate > img{ position:absolute !important; top:10px !important; left:10px !important; height:108px !important; min-height:0 !important; width:44% !important; max-width:44% !important; object-fit:contain !important; object-position:left top !important; border-radius:4px; z-index:3; } body #work-for-frank .sliding-work.story-open .work-story{ max-height:calc(100% - 120px) !important; } @media (max-width:760px){ body #work-for-frank .sliding-work.story-open .work-plate > img{ height:84px !important; width:50% !important; } body #work-for-frank .sliding-work.story-open .work-story{ max-height:calc(100% - 94px) !important; } } @media (prefers-reduced-motion:reduce){ body #work-for-frank .sliding-work .work-plate > img{ transition:none; } } /* ================================================================== ITEM 27 — the two-line titles knocking the rows out of line Igal: "'Frank Stella on the Roof' has a two-line title, which throws the images below it out of line. The captions are centred, which is what makes the horizontal spacing uneven." Measured: the grid was align-items:start, so a card whose title wrapped to a third line (99px against its neighbours' 75px) ended deeper than the rest of its row. Stretching the row and letting the caption take up the slack levels every card at any width, rather than guessing a height that only holds at one. ================================================================== */ body #frank-wall{ align-items:stretch !important; } body #frank-wall .archive-card{ height:auto !important; display:flex; flex-direction:column; } body #frank-wall .archive-card .work-plate{ flex:0 0 auto; } body #frank-wall .work-label{ flex:1 1 auto; align-items:start; } /* ---- item 18: the tribute ---------------------------------------- Igal: "'Frank Stella' set bold, in the gold. This part is a tribute." It opens the block that gives his dates and his honours, so it should read as a name, not as the first words of a sentence. ------------------------------------------------------------------ */ body .frank-note .fn-name{ font-weight:700; color:#e9b95c; letter-spacing:.005em; } /* ================================================================== A LONE PICTURE SHOULD NOT SIT IN THE LEFT-HAND COLUMN Igal, on "Sculpture study": "is left by itself on the left. I would put it in the middle. And maybe even slightly bigger ... this way it doesn't look like we have an empty space on the right." The same thing happened in The Glass once "Frosted glass on wood" was moved out of the opening row. Both get the same treatment: the full row, centred, and a size that earns it. ================================================================== */ body #the-work .work-grid > .solo-feature{ grid-column:1 / -1; justify-self:center; --glass-height:470px; } body #frank-wall > .archive-card:last-child{ grid-column:1 / -1; justify-self:center; width:min(100%,560px); } body #frank-wall > .archive-card:last-child .work-plate{ height:430px !important; } @media (max-width:1100px){ body #the-work .work-grid > .solo-feature{ --glass-height:380px; } body #frank-wall > .archive-card:last-child .work-plate{ height:360px !important; } } @media (max-width:760px){ body #the-work .work-grid > .solo-feature{ --glass-height:280px; } body #frank-wall > .archive-card:last-child{ width:100%; } body #frank-wall > .archive-card:last-child .work-plate{ height:auto !important; } } /* ---- "Why an engineer ended up blowing glass" in two lines ------- Igal: "Why is it three rows? It should be in two rows only. The word glass should not go below." It was capped at 14ch, which put "glass" on a line of its own. ------------------------------------------------------------------ */ body .origin-introduction h2{ max-width:21ch !important; text-wrap:balance; } /* ---- the section titles in the archive should match each other --- Igal: "Printed design catalog ... other titles you had them in a different colour and a different font. This one looks kind of disconnected." ------------------------------------------------------------------ */ body .sheets h3, body .after h3, body .collection h3, body #work-for-frank .band-head h2{ color:#f4f2ec; } body .sheets h3, body .after h3, body .collection h3{ margin-bottom:.55em; } /* the printed sheets are white now, so they need no dark plate behind them and a hairline keeps them from bleeding into the band */ body .sheet-row img{ background:#fff !important; border:1px solid rgba(217,164,65,.22); border-radius:4px; } /* ---- the opening scene takes the full row, like the other three --- Igal: "the first image on the right, Frosted glass on wood ... the height of that picture is different than the glass sphere in driftwood." Moving that picture was only half of it: the driftwood scene was pinned to two of the three columns, so whatever followed simply took the empty third column and mismatched it in turn. The other three scenes already run 1/-1; this one now does too. ------------------------------------------------------------------ */ body #the-work .work-grid > .scene-work{ grid-column:1 / -1 !important; } /* the plate height is fixed at 390 by the gallery sheet, so a bigger --glass-height alone could not lift the solo picture */ body #the-work .work-grid > .solo-feature .work-plate{ height:470px !important; } @media (max-width:1100px){ body #the-work .work-grid > .solo-feature .work-plate{ height:380px !important; } } @media (max-width:760px){ body #the-work .work-grid > .solo-feature .work-plate{ height:280px !important; } } /* the statement reads in about three lines, not two long ones and not the six narrow ones it was cut to before */ body .origin-pull{ max-width:42ch !important; } /* ---- the 2017 talk still ----------------------------------------- Igal: "the bleeding of the hat video and the image still exists." Both were the same fault, in the pictures rather than the CSS. The Hat poster carried a 4px white matte on three sides and 6px on the fourth, so with object-fit:cover on an almost identical ratio the matte was never cropped away - it read as a white edge with square corners inside a rounded frame. The talk still was a screen capture with black letterbox bars top and bottom and white pillars either side. Both are cropped to their real picture now, and each frame is set to the ratio of the picture it holds, so nothing is letterboxed and nothing is cut. ------------------------------------------------------------------ */ body .t-media .video-embed{ aspect-ratio:558/360; } /* ---- the date marker follows the text, not the film --------------- Igal: "you have the point on the line, then you have the text on one side ... the next time it's always on the left side ... it should be whatever the text is, not what the video. One left, one right, one left, one right. Always with the text side." The label was pinned to the left of the dot on every item, so on the items whose text sits on the right it drifted away from the words it belongs to and hung over the film instead. ------------------------------------------------------------------ */ @media (min-width:761px){ body .t-item.t-flip .t-date .event-label{ right:auto; left:calc(50% + 12px); text-align:left; } } /* Keep an intrinsic scene plate when its image becomes a story thumbnail. */ body #the-work .scene-work .work-plate{ aspect-ratio:var(--glass-ratio,1.333333); } /* Phone readers use normal flow: a thumbnail followed by the whole story. Absolute thumbnails previously collapsed auto-height scene plates, and nested quartet/pair cards missed the full-row selector. Closed artwork keeps the gallery's existing ratio-based sizing. */ @media (max-width:760px){ body #the-work .glass-quartet > .story-open, body #the-work .sphere-pair > .story-open{ grid-column:1 / -1; } body #work-for-frank .sliding-work.story-open .work-plate{ display:flex !important; flex-direction:column; align-items:stretch; height:auto !important; min-height:0; aspect-ratio:auto !important; overflow:visible; } body #work-for-frank .sliding-work.story-open .work-plate > img{ flex-shrink:0; position:static !important; align-self:flex-start; height:84px !important; width:auto !important; max-width:44% !important; margin:10px; transition:none; } body #work-for-frank .sliding-work.story-open .murrine-crop{ flex-shrink:0; align-self:flex-start; height:84px !important; width:84px; margin:10px; } body #work-for-frank .sliding-work.story-open .work-story{ position:static; box-sizing:border-box; width:100%; max-height:none !important; overflow:visible !important; transform:none; transition:none; -webkit-mask-image:none; mask-image:none; } .option-a .studio-opening .site-nav > div{ gap:0 12px; } .option-a .studio-opening .site-nav a, .option-a .studio-actions > a{ display:inline-flex; align-items:center; justify-content:center; min-height:44px !important; } .option-a .studio-opening .site-nav > div a{ min-width:44px; font-size:12px; } } @media (min-width:761px) and (max-width:1100px){ .option-a .studio-opening .site-nav{height:auto;gap:8px 20px;} .option-a .studio-opening .site-nav a{ display:inline-flex;align-items:center;min-height:44px; } } /* A portrait tablet uses the portrait photograph, so its text must also follow a portrait layout instead of desktop percentage positioning. */ @media (min-width:761px) and (max-width:1100px) and (max-aspect-ratio:1/1){ .option-a .studio-opening{ height:auto; min-height:100svh; padding-bottom:60vw; background-size:100% auto; background-position:center bottom; } .option-a .studio-opening::before{display:none;} .option-a .studio-opening::after{ content:'';position:absolute;inset:0 0 auto;height:52%; background:linear-gradient(#061028 45%,rgba(6,16,40,.9) 75%,transparent); pointer-events:none; } .option-a .studio-opening .site-nav{ position:relative;z-index:2;height:auto;flex-wrap:wrap; } .option-a .studio-opening .site-nav > div{flex-wrap:wrap;gap:4px 20px;} .option-a .studio-opening .site-nav a{min-height:44px;display:inline-flex;align-items:center;} .option-a .studio-hero{ position:relative;z-index:2;height:auto !important; padding:24px 5% 0; } .option-a .artist-line, .option-a .studio-copy, .option-a .studio-actions, .option-a .studio-frank{ position:static !important;transform:none !important; width:auto !important;max-width:100%; } .option-a .artist-line{writing-mode:horizontal-tb !important;margin:0 0 12px;} .option-a .studio-copy h1{font-size:clamp(30px,4vw,40px) !important;} .option-a .studio-actions{margin:20px 0 0 !important;} .option-a .studio-frank{margin:20px 0 0 !important;padding-top:12px;} } footer a{display:inline-flex;align-items:center;min-height:44px;} @media(max-width:760px){ body #the-work .work-grid > .sliding-work.story-open:not(.wide):not(.solo-feature), body #the-work .glass-quartet > .story-open, body #the-work .sphere-pair > .story-open{grid-column:auto !important;} body #the-work .glass-story .work-label{font-size:14px;line-height:20px;} body #the-work .glass-story{position:relative;} body #the-work .glass-story .work-label{position:static;display:block;padding-inline:0;text-align:center;} body #the-work .glass-story .work-label > span:first-child{display:block;width:100%;max-width:none;} body #the-work .glass-story .work-action{position:absolute;top:8px;right:8px;z-index:5;background:rgba(6,16,40,.85);} body #the-work .band-lede, body #the-work .work-story p{font-size:16px;line-height:24px;} body #the-work .glass-story:not(.wide):not(.solo-feature) .work-story p{font-size:14px;line-height:20px;} body #the-work .story-open .work-story{max-height:100% !important;overflow-y:auto !important;padding:12px;box-sizing:border-box;} } /* Owner review: retain desktop typography and put the invitation below the glass. */ @media(max-width:760px){ .option-a .studio-opening{display:flex;flex-direction:column;} .option-a .studio-opening{background-position:center calc(100% + 82px);} .option-a .studio-opening::after{height:36%;background:linear-gradient(180deg,rgba(6,16,40,.94),rgba(6,16,40,.72) 55%,transparent);} .option-a .studio-opening .site-nav{flex-shrink:0;} .option-a .studio-opening .site-nav{flex-direction:row;align-items:flex-start;justify-content:flex-start;padding:12px 16px !important;gap:8px !important;} .option-a .studio-opening .brand{font-size:16px;white-space:normal;max-width:100px;gap:6px;line-height:1.15;} .option-a .studio-opening .brand img{width:24px;height:24px;flex-shrink:0;} .option-a .studio-opening .site-nav > div{display:grid;grid-template-columns:.8fr 1.3fr .8fr 1.1fr;gap:0 6px;justify-content:start;align-items:start;flex:1;min-width:0;} .option-a .studio-opening .site-nav > div a{display:block;box-sizing:border-box;height:44px;min-height:44px !important;min-width:0;padding:6px 3px;font-size:11px;line-height:1.35;white-space:nowrap;text-align:center;border:1px solid rgba(232,239,245,.3);border-radius:12px;background:rgba(28,48,70,.25);} .option-a .studio-opening .site-nav > div a[href="#contact"]{display:none;} .option-a .studio-opening .site-nav > div a[href="#frank"]{display:block;text-align:center;} .mobile-menu-break{display:block;} .option-a .studio-hero{flex:1;padding-top:30px !important;} .option-a .artist-line{margin-bottom:12px !important;} .option-a .studio-actions{margin-top:20px !important;} .option-a .studio-copy h1{font-family:'DM Serif Display',Georgia,serif !important;font-weight:700 !important;font-size:clamp(20px,6vw,26px) !important;max-width:none;letter-spacing:-.5px;} .option-a .studio-copy h1 br.hb{display:block;} .option-a .studio-copy h1 i br.hb{display:none;} .option-a .studio-copy h1 i{font-family:inherit !important;font-weight:inherit !important;color:#eac184 !important;} .option-a .studio-frank{position:static !important;top:auto !important;bottom:auto !important;left:auto !important;right:auto !important;margin:30px 0 0 !important;} .option-a .studio-frank b{display:inline-flex;align-items:center;justify-content:center;min-height:44px;line-height:1.3;padding:0 14px;border:1px solid rgba(232,239,245,.3);border-radius:24px;background:rgba(28,48,70,.25);} .option-a .studio-frank b::after{content:none;} .option-a .studio-actions > a, .option-a .studio-frank b{position:relative;isolation:isolate;border-color:transparent;background:transparent;box-shadow:none;} .option-a .studio-actions > a::before, .option-a .studio-frank b::before{content:'';position:absolute;inset:5px 0;border:1px solid rgba(232,239,245,.3);border-radius:24px;background:rgba(28,48,70,.25);z-index:-1;pointer-events:none;} } body #how-its-made .film figcaption{text-align:center;} body .after > h3,body .collection > h3,body .origin-sub{color:#f4f2ec !important;} .mobile-menu-break::after{content:' ';white-space:pre;} @media(max-width:760px){ body #work-for-frank .archive-card .work-label, body #work-for-frank .archive-card h3, body #work-for-frank .archive-card > div > p, body figcaption{font-size:14px !important;line-height:20px !important;} body #contact.close-band{padding-block:28px;} body #contact h2{margin:0 0 8px;} body #contact .close-mail{margin-top:0;} body footer{padding:12px 20px;gap:4px;} body footer p{margin:4px 0;line-height:20px;} } @media(min-width:761px) and (max-width:1000px) and (max-height:500px){ body #work-for-frank .archive-card .work-label, body #work-for-frank .archive-card h3, body #work-for-frank .archive-card > div > p, body figcaption{font-size:14px !important;line-height:20px !important;} body .sliding-work.story-open .work-story{max-height:calc(100svh - 100px) !important;overflow-y:auto !important;} body .frank-note,body .frank-note p,body .frank-note li,body .frank-note b,body .frank-note span{font-size:14px !important;line-height:21px !important;font-style:italic;font-synthesis:style;} body .frank-honours{list-style:none;padding:0;} body .frank-honours li{list-style:none;margin-bottom:8px;} body .frank-honours li::before{content:none;} body #contact.close-band{padding-block:28px;} body footer{padding:12px 20px;gap:4px;} body footer p{margin:4px 0;} } /* Modestly larger catalog sheets, with an opt-in detail lens. */ body .sheet-row{grid-template-columns:repeat(4,minmax(0,240px));max-width:1014px;} body .sheet-row img{width:100%;height:auto !important;max-height:none;} .catalog-sheet{position:relative;min-width:0;} #design-catalog{position:relative;padding-top:54px;} .catalog-zoom{position:absolute;right:6px;top:6px;z-index:3;width:44px;height:44px;border:1px solid #b69250;border-radius:50%;background:#0d1b3c;color:#f4f2ec;font:30px/1 Arial,sans-serif;cursor:pointer;} .catalog-zoom[aria-pressed=true]{background:#eac184;color:#061028;} .catalog-lens{display:none;position:absolute;z-index:2;width:132px;height:132px;border:2px solid #b69250;border-radius:50%;background-color:white;background-repeat:no-repeat;pointer-events:none;box-shadow:0 3px 12px #0005;} .zoom-active .catalog-lens{display:block;} #design-catalog.zoom-active{touch-action:none;} #design-catalog.zoom-active .catalog-sheet{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;} .catalog-story{position:relative;max-width:1014px;} body .catalog-story summary{display:flex;align-items:center;justify-content:center;gap:20px;min-height:56px;text-align:center;list-style:none;cursor:pointer;} .catalog-story summary::-webkit-details-marker{display:none;} .catalog-story[open] .work-action:before{transform:translate(-50%,-50%) rotate(45deg);} .catalog-story[open] .work-action:after{transform:translate(-50%,-50%) rotate(-45deg);} .catalog-story-panel{position:absolute;bottom:100%;left:0;right:0;z-index:4;max-height: min(360px,60vh);overflow-y:auto;box-sizing:border-box;padding:22px;background:#14203f;border-top:1px solid #b69250;box-shadow:0 -4px 15px #0003;} .catalog-story[open] .catalog-story-panel{animation:catalog-story-rise .25s ease-out;} @keyframes catalog-story-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.catalog-story[open] .catalog-story-panel{animation:none;}} @media(max-width:760px){body .sheet-row{grid-template-columns:repeat(2,minmax(0,1fr));width:calc(100% + 16px);max-width:none;margin-left:-8px;margin-right:-8px;gap:10px;}.catalog-lens{width:100px;height:100px;}} /* Keep the reading affordance visible wherever a story has internal scrolling. */ @media(max-width:760px){ body #the-work .glass-story .work-plate{height:auto !important;aspect-ratio:var(--glass-ratio);min-height:0 !important;} body #the-work .glass-story .work-plate > img{height:100% !important;width:100%;} body #the-work .glass-story .work-label{width:100%;} body #the-work .glass-story:has(#glass-title-12) .work-plate{aspect-ratio:.955208;overflow:hidden;} body #the-work .glass-story:has(#glass-title-12) .work-plate > img{position:absolute;top:-7.46%;left:0;width:100%;height:auto !important;max-height:none;} body #the-work .glass-story:has(#glass-title-14){grid-column:1 / -1 !important;} body #the-work .glass-quartet .glass-story .work-plate{aspect-ratio:.912125;} body #the-work .glass-quartet .murrine-crop{position:absolute;inset:0;height:100%;overflow:hidden;} body #the-work .glass-quartet .murrine-crop > img{position:absolute;width:125%;max-width:none;height:auto !important;left:-12.5%;top:-40%;transform:none;} } body .sliding-work.story-open .work-story, body .catalog-story-panel{scrollbar-width:thin;scrollbar-color:#eac184 #25334d;scrollbar-gutter:stable;} body .work-story::-webkit-scrollbar, body .catalog-story-panel::-webkit-scrollbar{width:7px;} body .work-story::-webkit-scrollbar-thumb, body .catalog-story-panel::-webkit-scrollbar-thumb{background:#eac184;border-radius:5px;} body .work-story::-webkit-scrollbar-track, body .catalog-story-panel::-webkit-scrollbar-track{background:#25334d;} /* Phone opening: let the content determine its height, with clear space for art. */ @media(max-width:760px){ .option-a .studio-opening{height:auto !important;min-height:100svh;padding-bottom:100vw;box-sizing:border-box;background-size:100% auto;background-position:center bottom;} .option-a .studio-opening .site-nav{display:flex;flex-direction:column;align-items:stretch;gap:14px !important;padding:16px 20px !important;} .option-a .studio-opening .brand{max-width:none;font-size:28px !important;line-height:1.1;white-space:nowrap;gap:10px;align-items:center;} .option-a .studio-opening .brand img{width:48px;height:48px;} .option-a .studio-opening .site-nav > div{flex:none;width:100%;grid-template-columns:.9fr 1.3fr .9fr 1.1fr;gap:7px;} .option-a .studio-opening .site-nav > div a{height:auto;min-height:52px !important;padding:8px 4px;font-size:13px !important;line-height:17px !important;} .option-a .studio-opening .mobile-menu-break{display:block;height:0;} .option-a .studio-opening .mobile-menu-break::after{content:none;} .option-a .studio-hero{flex:none;padding:14px 20px 0 !important;gap:16px;} .option-a .studio-copy h1{font-size:clamp(19px,6vw,42px) !important;line-height:1.15 !important;letter-spacing:-.5px;white-space:nowrap;} .option-a .studio-copy h1 > br.hb{display:block;} .option-a .studio-copy h1 i{display:inline;white-space:nowrap;} .option-a .studio-copy h1 i br.hb{display:none;} .option-a .artist-line{font-size:12px !important;line-height:18px !important;} .option-a .studio-actions{margin-top:8px !important;} .option-a .studio-actions > a{font-size:14px !important;} .option-a .studio-frank{margin-top:18px !important;} .option-a .studio-frank > span{font-size:14px !important;line-height:20px;} .option-a .studio-frank strong{font-size:24px !important;} .option-a .studio-frank b{font-size:14px !important;} } @media(max-width:760px){ body .frank-intro .frank-note{padding:16px 18px;font-size:14px;line-height:21px;font-style:italic;font-synthesis:style;gap:12px;} body .frank-intro .frank-note p, body .frank-intro .frank-note li, body .frank-intro .frank-note b, body .frank-intro .frank-note span{font-size:14px !important;line-height:21px !important;font-style:italic !important;} body .frank-intro .frank-note p{margin:0 0 10px;} body .frank-intro .frank-honours{list-style:none;margin:0;padding:0;} body .frank-intro .frank-honours li{list-style:none;padding:0;margin:0 0 8px;} body .frank-intro .frank-honours li::before{content:none;} body .frank-intro .frank-honours li:last-child{margin-bottom:0;} body .frank-intro .frank-note-quote{margin:10px 0 0;text-align:right;} body figcaption, body .films .film > figcaption, body #how-its-made .films .film > figcaption{margin-top:0 !important;padding-top:5px !important;padding-bottom:5px !important;} body #the-work .glass-story .work-label{padding-top:5px;padding-bottom:5px;} } @media(max-width:760px){ body #work-for-frank .frank-wall{overflow-anchor:none;} body #the-work .glass-story .work-label{padding-top:6px;padding-bottom:6px;} body #the-work .glass-story .work-plate > img{object-position:center bottom;} body #the-work .glass-story .work-action{width:24px;height:24px;} body .band-quotes p{font-size:19px !important;line-height:1.4 !important;} body .frank-note-quote{font-size:16px !important;line-height:24px !important;font-style:italic;text-align:right;} body .origin-pull{font-size:19px !important;line-height:27px !important;} body .origin-sub{font-size:22px !important;line-height:28px !important;text-wrap:balance;} } .frank-references{margin:16px 0 24px;padding:16px 20px;border-left:2px solid #e7bc79;max-width:760px} .frank-references h3{margin:0 0 10px;color:#fff;font-size:20px} .frank-references ul{list-style:none;margin:0;padding:0;display:grid;gap:12px} .frank-references li{font-size:15px;line-height:1.45} .frank-references a{color:inherit;text-decoration:underline;text-underline-offset:3px} .frank-references li>span{display:block;font-size:13px;opacity:.8;margin-top:2px} /* Match the opening action buttons, including Read the story. */ .option-a .studio-frank b{font-family:'Segoe UI',Arial,sans-serif!important} /* Phone archive stories occupy the existing artwork plate, never the page. The row's measured art height is identical in the open and closed state. */ .story-scroll-track{display:none} @media(max-width:760px){ body #work-for-frank .sliding-work .work-plate, body #work-for-frank .sliding-work.story-open .work-plate{ position:relative;display:flex!important;flex-direction:row;align-items:flex-end; height:max(180px,var(--row-art-height,270px))!important; min-height:0;aspect-ratio:auto!important;overflow:hidden; } body #work-for-frank .sliding-work.story-open .work-plate > img{ position:static!important;top:auto!important;left:auto!important; height:var(--row-art-height,270px)!important;width:auto!important;max-width:100%!important; margin:0;object-position:center!important;z-index:auto;transition:none; } body #work-for-frank .sliding-work .work-story, body #work-for-frank .sliding-work.story-open .work-story{ position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;max-height:100%!important; padding:16px 22px 18px 16px;overflow-y:auto!important;overflow-x:hidden!important; overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch; -webkit-mask-image:none;mask-image:none;transition:none; } body #work-for-frank .sliding-work:not(.story-open) .work-story{visibility:hidden;pointer-events:none} body #work-for-frank .sliding-work.story-open .work-story{transform:none;visibility:visible;pointer-events:auto} body #work-for-frank .sliding-work.story-open .story-scroll-track:not([hidden]){ display:block;position:absolute;z-index:4;right:5px;top:12px;bottom:12px;width:3px; border-radius:3px;background:rgba(234,193,132,.18);pointer-events:none; } .story-scroll-track > span{display:block;width:3px;border-radius:3px;background:#eac184;will-change:transform} } /* Source: fonts/public/families-0.css */ /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(/fonts/public/5a621c5598a31392.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(/fonts/public/ff4f17d21930e36d.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(/fonts/public/8f704806dbedeaae.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(/fonts/public/5a621c5598a31392.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(/fonts/public/ff4f17d21930e36d.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(/fonts/public/8f704806dbedeaae.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(/fonts/public/5a621c5598a31392.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(/fonts/public/ff4f17d21930e36d.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(/fonts/public/8f704806dbedeaae.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/public/6d50d612a87b0f46.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/public/2eaf4bd71b5467c7.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/public/e1097881272dd160.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/public/6d50d612a87b0f46.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/public/2eaf4bd71b5467c7.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/public/e1097881272dd160.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/public/6d50d612a87b0f46.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/public/2eaf4bd71b5467c7.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/public/e1097881272dd160.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'DM Serif Display'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/public/e026521e59b7b3e5.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Serif Display'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/public/ed8b291611e32fa2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/public/3af47815d6183efc.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/public/fdf61e20fd2c0108.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Source: css/v50/gift-gallery.css */ /* Four unified gift groups, reviewed by the UX agent. */ .gift-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 0;max-width:540px} .gift-gallery button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;width:100%;height:150px;box-sizing:border-box;padding:8px;border:1px solid rgba(231,188,121,.18);border-radius:4px;background:transparent;cursor:pointer} .gift-gallery img{display:block;width:100%;min-width:0;flex:1;height:100%;object-fit:contain;background:transparent;border-radius:0} .gift-gallery button:focus-visible{outline:2px solid #e7bc79;outline-offset:4px} .gift-lightbox{box-sizing:border-box;width:min(880px,88vw);max-width:88vw;max-height:76dvh;height:auto;padding:0 8px 12px;border:0;border-radius:8px;background:#101c2c;color:#fff;overflow:hidden} .gift-lightbox[open]{display:flex;flex-direction:column} .gift-lightbox::backdrop{background:rgba(3,10,22,.58)} .gift-toolbar{display:flex;align-items:center;justify-content:flex-end;height:40px;flex-shrink:0} .gift-close,.gift-prev,.gift-next{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:#fff;font:26px/1 Arial,sans-serif;cursor:pointer} .gift-toolbar .gift-close{font-size:28px;height:40px} .gift-stage{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;min-height:0} .gift-images{display:grid;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:0;overflow:hidden;overscroll-behavior:contain} .gift-images>img{display:block;min-width:0;width:100%;height:auto;max-height:calc(76dvh - 80px);object-fit:contain} .gift-counter{display:block;text-align:center;margin:8px 0 0;font:12px/16px 'Segoe UI',Arial,sans-serif;color:#acb3be} .gift-lightbox button:focus-visible{outline:2px solid #eac184;outline-offset:-3px} @media(max-width:600px){.gift-gallery{gap:10px}.gift-gallery button{height:120px}.gift-lightbox{width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:72dvh;padding-inline:4px}.gift-stage{grid-template-columns:32px minmax(0,1fr) 32px}.gift-prev,.gift-next{width:32px;position:relative}.gift-prev::before,.gift-next::before{content:'';position:absolute;inset:0 -6px}.gift-images{gap:6px}.gift-images>img{max-height:calc(72dvh - 80px)}} .gift-lightbox{position:fixed;inset:0;margin:auto;height:fit-content;min-height:0;background:#e8e1d5;color:#26313b;border:1px solid #b9ae9c;border-radius:16px;box-shadow:0 18px 56px rgba(0,0,0,.38)} .gift-close,.gift-prev,.gift-next{color:#26313b} .gift-counter{color:#59616a} .gift-lightbox button:focus-visible{outline-color:#6a4a1b} /* Clear, full-size side controls without reducing the paired image stage. */ @media(max-width:600px){ .gift-stage{grid-template-columns:44px minmax(0,1fr) 44px} .gift-prev,.gift-next{width:44px;height:44px;min-width:44px;font:700 30px/1 Arial,sans-serif;border-radius:50%;background:rgba(255,255,255,.64);color:#26313b;border:1px solid rgba(38,49,59,.24)} .gift-prev::before,.gift-next::before{content:none} .gift-toolbar .gift-close{height:44px} .gift-toolbar{height:44px} .gift-prev:active,.gift-next:active{background:#fff} } @media(max-width:600px){ .gift-images{display:flex;align-items:stretch;justify-content:flex-start;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x pinch-zoom;aspect-ratio:1.2;height:auto;max-height:calc(72dvh - 90px)} .gift-images::-webkit-scrollbar{display:none} .gift-slide{display:grid;align-items:center;gap:6px;flex:0 0 100%;min-width:0;height:100%;scroll-snap-align:start;scroll-snap-stop:always} .gift-slide img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;max-height:100%} } /* Source: css/v50/hero-review.css */ .option-a .studio-frank strong{font-family:'Segoe UI',Arial,sans-serif!important;font-weight:600!important;color:#eac184!important} .option-a .studio-copy h1>br.hb{display:block!important} .option-a .studio-copy h1{white-space:nowrap;max-width:none!important} @media(min-width:761px){.option-a .studio-copy{width:60%!important}.option-a .studio-copy h1{font-size:clamp(22px,2.7vw,46px)!important;line-height:1.12!important}.option-a .studio-frank b{display:inline-flex;align-items:center;justify-content:center;font-family:'Archivo Narrow',system-ui,sans-serif!important;font-size:max(13px,.85vw)!important;font-weight:400!important;letter-spacing:.06em;line-height:1.3!important;box-sizing:border-box;min-height:44px;padding:.7em 1.15em;border:1px solid rgba(206,221,238,.5)!important;border-radius:40px;background:transparent;color:#f2f6fb!important}.option-a .studio-frank b::after{content:none!important}} .home-return{position:fixed;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));z-index:40;display:flex;align-items:center;gap:7px;min-height:44px;padding:4px 12px 4px 6px;border:1px solid #667285;border-radius:24px;background:#09172df2;color:#fff;text-decoration:none;font:600 14px/1.2 'Segoe UI',Arial,sans-serif;box-shadow:0 2px 12px #0003} .home-return[hidden]{display:none}.home-return img{width:32px;height:32px;object-fit:contain}.home-return:focus-visible{outline:2px solid #eac184;outline-offset:3px} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}} .frank-heading-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:32px;align-items:start;margin-bottom:38px} .frank-heading-row .band-head{margin-bottom:0} .frank-heading-row .frank-references{margin:0;padding:0;border:0;max-width:none} .frank-heading-row .frank-references h3{font:600 13px/18px 'Segoe UI',Arial,sans-serif;letter-spacing:.08em;color:#d4c6aa;margin:0 0 4px} .frank-heading-row .frank-references ul{gap:0} .frank-heading-row .frank-references li{padding:10px 0;border-bottom:1px solid #ffffff18;font-size:15px;line-height:21px} .frank-heading-row .frank-references li:last-child{border-bottom:0} .frank-heading-row .frank-references a{text-decoration:none;border-bottom:0} .frank-heading-row .frank-references li>a{display:block;color:#f0f3f6} .frank-heading-row .frank-references li>a::after{content:' \2197';color:#d4c6aa;font-size:12px} .frank-heading-row .frank-references a:hover{color:#eac184} .frank-heading-row .frank-references a:focus-visible{outline:2px solid #eac184;outline-offset:4px} .frank-heading-row .frank-references li>span{font-size:13px;line-height:18px;color:#b8c4d2;opacity:1} body .frank-note{border:1px solid rgba(231,188,121,.25);background:rgba(231,188,121,.035);border-radius:6px;padding:22px;font-style:italic} body .frank-note p,body .frank-note li,body .frank-note b,body .frank-note span{font-style:italic!important} body .frank-honours{list-style:none;padding:0}body .frank-honours li::before{content:none} @media(max-width:999px){.frank-heading-row{grid-template-columns:1fr;gap:24px}.frank-heading-row .frank-references{max-width:520px}body .frank-note{padding:16px}} @media(max-width:760px){ .home-return{display:none!important} #the-work .band-quotes{margin-top:28px;padding-left:14px} #the-work .band-quotes p{font-size:16px!important;line-height:24px!important;font-weight:400!important} } body #why-glass{background:#14233b!important} body #why-glass h3.origin-sub{color:#fff!important} body .frank-note .fn-who .frank-note-quote{font-size:15px!important;line-height:22px!important;font-weight:700!important;font-style:italic!important;text-align:right!important;margin:10px 0 0!important;width:100%} body .frank-note .fn-who .frank-note-quote span{font-size:12px!important;line-height:18px!important;font-weight:400!important} .option-a .studio-frank b{display:inline-flex!important;align-items:center;justify-content:center;font-size:14px!important;line-height:20px!important;padding:0 18px!important;min-height:44px;box-sizing:border-box} @media(max-width:760px){ body .frank-note .fn-who .frank-note-quote{font-size:13px!important;line-height:19px!important} body .frank-note .fn-who .frank-note-quote span{font-size:12px!important;line-height:16px!important} .option-a .studio-opening{padding-bottom:calc(100vw + 20px)!important} } /* One frame and one state treatment for all three invitations. The slim visible frame sits inside a stable 44px interaction area. */ body.option-a .studio-actions > a, body.option-a .studio-frank b{ position:relative;isolation:isolate;display:inline-flex!important; align-items:center;justify-content:center;box-sizing:border-box; height:44px;min-height:44px!important;padding-block:0!important; line-height:20px!important;border:1px solid transparent!important; background:transparent!important;box-shadow:none!important; color:#f2f6fb!important;transform:none!important; } body.option-a .studio-actions > a::before, body.option-a .studio-frank b::before{ content:'';position:absolute;inset:5px 0;z-index:-1;pointer-events:none; box-sizing:border-box;border:1px solid rgba(206,221,238,.5);border-radius:24px; background:rgba(28,48,70,.25);transition:background-color .15s,border-color .15s; } body.option-a .studio-actions > a::after, body.option-a .studio-frank b::after{content:none!important} body.option-a .studio-frank:hover{border-top-color:rgba(206,221,238,.25)} body.option-a .studio-actions > a:focus-visible, body.option-a .studio-frank:focus-visible{outline:none} body.option-a .studio-actions > a:focus-visible::before, body.option-a .studio-frank:focus-visible b::before{ border:2px solid #eac184;outline:none; background:rgba(234,193,132,.16); } @media(hover:hover){ body.option-a .studio-actions > a:hover::before, body.option-a .studio-frank b:hover::before{ border-color:#eac184;background:rgba(234,193,132,.16); } } /* Legacy hover rules must not paint a second frame outside the inner one. */ body.option-a .studio-actions > a:is(:hover,:focus,:active), body.option-a .studio-frank:is(:hover,:focus,:active) b{ border-color:transparent!important;background:transparent!important; box-shadow:none!important;color:#f2f6fb!important; } @media(min-width:761px){ body.option-a .studio-opening{background-position:center calc(100% + 28px)} } .section-home{display:none} /* Keep the biography and its quotation on exactly the same text measure. */ body .frank-note .fn-who{width:100%;max-width:62ch;min-width:0} body .frank-note .fn-who > p{box-sizing:border-box;width:100%;max-width:none;padding-inline:0} @media(max-width:760px){ .section-home{display:flex;align-items:center;gap:6px;width:fit-content; min-height:44px;margin:20px 0 0;color:#cbd5e3;font:14px/20px 'Segoe UI',Arial,sans-serif;text-decoration:none} .section-home:focus-visible{outline:2px solid #eac184;outline-offset:3px} body .frank-intro .frank-note{display:block;padding:20px;} body .frank-intro .frank-note .fn-who > p:not(.frank-note-quote){ font-size:15px!important;line-height:23px!important;margin:0 0 16px; } body .frank-intro .frank-note .fn-name{display:block;font-size:17px!important;line-height:24px!important;margin-bottom:4px} body .frank-intro .frank-note .frank-honours{margin:22px 0 0;padding:16px 0 0;border-top:1px solid rgba(231,188,121,.18)} body .frank-intro .frank-note .frank-honours li{font-size:14px!important;line-height:21px!important;margin:0 0 14px;padding:0} body .frank-intro .frank-note .frank-honours li:last-child{margin:0} body .frank-intro .frank-note .frank-honours b{display:inline} } @media(prefers-reduced-motion:reduce){ body.option-a .studio-actions > a::before,body.option-a .studio-frank b::before{transition:none} } .section-home img{display:block;width:24px;height:24px;object-fit:contain} /* Phone refinements: supporting name, consistent story controls, and contact card. */ @media(max-width:760px){ body.option-a .studio-frank strong{font-size:20px!important;line-height:25px!important} body #work-for-frank .sliding-work{position:relative} body #work-for-frank .sliding-work .work-label{position:static;display:block;padding:6px 0;text-align:center} body #work-for-frank .sliding-work .work-label>span:first-child{display:block;width:100%;max-width:none} body #work-for-frank .sliding-work .work-action, body #the-work .glass-story .work-action{position:absolute;top:8px;right:8px;z-index:5;box-sizing:border-box;width:44px;height:44px;margin:0;background:rgba(6,16,40,.9);border:1px solid #bca16f;border-radius:50%} body .gia-ask{box-sizing:border-box;left:50%!important;top:50%!important;transform:translate(-50%,-50%);width:calc(100vw - 32px);max-width:360px;max-height:calc(100dvh - 48px);overflow:auto;padding:50px 20px 20px;background:#e8e1d5;color:#26313b;border:1px solid #b9ae9c;border-radius:16px;box-shadow:0 12px 44px #0005;font:16px/24px 'Segoe UI',Arial,sans-serif} body .gia-ask p{margin:0 0 10px;text-wrap:balance} body .gia-ask-mail{display:flex;align-items:center;min-height:44px;width:fit-content;color:#614416;text-decoration:underline;text-underline-offset:3px;font-size:16px;overflow-wrap:anywhere} body .gia-ask-close{display:flex;align-items:center;justify-content:center;top:4px;right:4px;width:44px;height:44px;padding:0;color:#26313b;font:28px/1 Arial,sans-serif} body .gia-ask :focus-visible{outline:2px solid #6a4a1b;outline-offset:2px} } @media(max-width:760px){ body #work-for-frank .sliding-work.story-open .work-story, body #the-work .glass-story.story-open .work-story{padding:16px!important} } @media(max-width:760px){ body #work-for-frank .sheets>h3, body #work-for-frank .after>h3, body #work-for-frank .collection>h3{font-size:24px!important;line-height:30px!important;color:#f4f2ec!important;margin-bottom:12px;text-wrap:balance} } /* Keep the artwork context visible while the story rises within its image. */ @media(max-width:760px){ body #the-work .glass-story .work-plate, body #work-for-frank .sliding-work .work-plate{--story-art-strip:clamp(56px,22%,84px)} body #the-work .glass-story .work-story, body #work-for-frank .sliding-work .work-story, body #the-work .glass-story.story-open .work-story, body #work-for-frank .sliding-work.story-open .work-story{top:auto;bottom:0;height:auto;max-height:calc(100% - var(--story-art-strip))!important;padding:16px!important;transform:translateY(102%);visibility:hidden;pointer-events:none;transition:transform .3s ease,visibility 0s linear .3s!important} body #the-work .glass-story.story-open .work-story, body #work-for-frank .sliding-work.story-open .work-story{transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform .3s ease,visibility 0s!important} body #the-work .glass-story .work-story::before, body #work-for-frank .sliding-work .work-story::before{content:none} body #the-work .glass-story.story-open .story-scroll-track:not([hidden]), body #work-for-frank .sliding-work.story-open .story-scroll-track:not([hidden]){display:block;position:absolute;z-index:4;right:5px;top:calc(var(--story-art-strip) + 12px);bottom:12px;width:3px;border-radius:3px;background:rgba(234,193,132,.18);pointer-events:none} } @media(max-width:760px) and (prefers-reduced-motion:reduce){ body #the-work .glass-story .work-story, body #work-for-frank .sliding-work .work-story{transition:none!important} } @media(max-width:760px){ body #the-work .glass-story .work-story, body #work-for-frank .sliding-work .work-story, body #the-work .glass-story.story-open .work-story, body #work-for-frank .sliding-work.story-open .work-story{left:1%;right:1%;bottom:2px;width:98%;max-height:calc(100% - var(--story-art-strip) - 2px)!important;border-radius:4px 4px 2px 2px} } /* The same inset sheet language on desktop; archive thumbnails remain above it. */ @media(min-width:761px){ body #the-work .glass-story .work-story, body #work-for-frank .sliding-work .work-story{left:1%;right:1%;bottom:3px;width:98%;box-sizing:border-box;border-radius:8px 8px 4px 4px;transform:translateY(103%);visibility:hidden;pointer-events:none;transition:transform .3s ease,visibility 0s linear .3s!important} body #the-work .glass-story .work-story{max-height:calc(100% - 56px)!important} body #work-for-frank .sliding-work .work-story, body #work-for-frank .sliding-work.story-open .work-story{max-height:calc(100% - 126px)!important} body #the-work .glass-story.story-open .work-story, body #work-for-frank .sliding-work.story-open .work-story{transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform .3s ease,visibility 0s!important} } body #work-for-frank .wall-note{max-width:680px;margin:48px auto 16px;padding:24px 0 0;text-align:center;text-wrap:balance;color:#f4f2ec} body #work-for-frank .wall-note::before{content:'';display:block;width:48px;height:1px;margin:0 auto 20px;background:#eac184} body #work-for-frank .wall-note strong{display:block;font-family:'DM Serif Display',Georgia,serif;font-size:30px;line-height:38px;font-weight:400;text-wrap:balance} body #work-for-frank .wall-note span{display:block;margin-top:12px;color:#cbd5e3;font-size:16px;line-height:24px;text-wrap:balance} @media(max-width:760px){ body #work-for-frank .wall-note{margin-top:32px;max-width:32ch} body #work-for-frank .wall-note strong{font-size:24px;line-height:30px} } @media(prefers-reduced-motion:reduce){ body #the-work .glass-story .work-story, body #work-for-frank .sliding-work .work-story{transition:none!important} } /* Stronger phone headline; compact marks retain comfortable invisible tap areas. */ @media(max-width:760px){ body.option-a .studio-copy h1{font-size:clamp(27px,7.2vw,30px)!important;line-height:1.1!important;letter-spacing:-.45px;text-wrap:balance} body #work-for-frank .sliding-work .work-action, body #the-work .glass-story .work-action{border:0;background:radial-gradient(circle at center,rgba(6,16,40,.9) 0 12px,#bca16f 12px 13px,transparent 13px);border-radius:0} body #work-for-frank .sliding-work .work-action::before, body #work-for-frank .sliding-work .work-action::after, body #the-work .glass-story .work-action::before, body #the-work .glass-story .work-action::after{width:10px;height:1.5px} } /* Story prose uses the available sheet width; no obsolete close-button spacer. */ body #the-work .glass-story .work-story, body #the-work .glass-story.story-open .work-story, body #work-for-frank .sliding-work .work-story, body #work-for-frank .sliding-work.story-open .work-story{scrollbar-gutter:auto} body #the-work .glass-story .work-story p, body #work-for-frank .sliding-work .work-story p{max-width:none;width:auto;text-wrap:wrap;word-break:normal;overflow-wrap:normal} body .gia-ask:focus{outline:none} @media(max-width:760px){ body .gia-ask{width:calc(100vw - 40px);max-width:320px;padding:18px 44px 12px 18px;background:#20334b;color:#f4f2ec;border:1px solid #64758b;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35)} body .gia-ask p{margin:0 0 2px;font-size:16px;line-height:24px} body .gia-ask-mail{color:#eac184;font-size:15px;line-height:22px;white-space:nowrap} body .gia-ask-close{color:#f4f2ec;top:0;right:0} body .gia-ask :focus-visible{outline-color:#eac184} } /* Exact two-line headline and continuous hero field, without scaling/cropping art. */ body.option-a .studio-opening{background-color:#061028} @media(max-width:760px){ body.option-a .studio-copy h1{font-size:var(--hero-title-size,6vw)!important;white-space:nowrap;text-wrap:nowrap} body.option-a .studio-opening{background-image:none!important} body.option-a .studio-opening::before{content:'';display:block!important;position:absolute;inset:auto 0 0;width:100%;height:auto;aspect-ratio:3 / 5;z-index:-1;pointer-events:none;background:url('/images/staged/studio-portrait-v55.jpg') center bottom / 100% 100% no-repeat;mask-image:linear-gradient(to bottom,transparent,#000 25%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 25%)} body.option-a .studio-opening::after{display:none!important} } @media(min-width:761px){ body.option-a .studio-opening::before{content:'';display:block!important;position:absolute;inset:0 0 auto;width:100%;height:80px;pointer-events:none;background:linear-gradient(#061028 28px,transparent 80px);z-index:0} } /* Keep the invitations in one flow: added biography text cannot lift its separator through the CTA row. Phone and portrait-tablet retain their flow. */ .studio-invitations{display:contents} @media(min-width:761px){ body.option-a .studio-invitations{display:flex;flex-direction:column;align-items:flex-start;position:absolute;left:10%;top:56%;width:25%;z-index:3} body.option-a .studio-invitations .studio-actions{position:static;inset:auto;width:max-content;max-width:none;margin:0!important;flex-wrap:nowrap;transform:translateY(calc(-18svh + 44px))} body.option-a .studio-invitations .studio-frank{position:static;inset:auto;width:100%;box-sizing:border-box;margin:18px 0 0!important;padding-top:14px} } @media(min-width:761px) and (max-width:1100px) and (max-aspect-ratio:1/1){ body.option-a .studio-invitations{display:contents} body.option-a .studio-invitations .studio-actions{width:auto;max-width:100%;margin:20px 0 0!important;flex-wrap:wrap} body.option-a .studio-invitations .studio-frank{margin:20px 0 0!important} body.option-a .studio-invitations .studio-actions{transform:none} } body.option-a .studio-frank .collaboration-role{white-space:nowrap;max-width:none} /* Desktop optical alignment; preserve the biography's existing position. */ @media(min-width:761px){ body.option-a .studio-invitations .studio-frank{border-top-color:transparent!important;background:linear-gradient(rgba(206,221,238,.25),rgba(206,221,238,.25)) left top / min(240px,100%) 1px no-repeat} body.option-a .studio-invitations .studio-frank b{margin-inline-start:-19px} } @media(min-width:761px) and (max-width:1100px) and (max-aspect-ratio:1/1){ body.option-a .studio-invitations .studio-frank b{margin-inline-start:0} } /* One compact editorial invitation: label, name, role and onward link. Keep the biography anchored; only the two glass invitations are pills. */ body.option-a .studio-invitations .studio-frank strong{margin:3px 0 4px!important} body.option-a .studio-invitations .studio-frank .collaboration-role{margin:0!important} body.option-a .studio-invitations .studio-frank b{ margin:4px 0 0!important;padding:0!important;border:0!important; justify-content:flex-start;gap:8px;border-radius:0; color:#eac184!important;letter-spacing:0;text-decoration:none; } body.option-a .studio-invitations .studio-frank b::before{content:none!important} body.option-a .studio-invitations .studio-frank b::after{ content:'\2192'!important;position:static;display:inline-block; width:auto;height:auto;margin:0;border:0;background:none; transform:none!important;color:inherit;font:inherit; } body.option-a .studio-invitations .studio-frank:focus-visible b{ outline:2px solid #eac184;outline-offset:3px; } @media(hover:hover){ body.option-a .studio-invitations .studio-frank b:hover{ color:#fff!important;text-decoration:underline;text-underline-offset:4px; } } /* Preserve the approved floating logo without covering a scrolling heading. */ body .home-return[data-heading-overlap="true"]{visibility:hidden!important;pointer-events:none!important} /* Source: css/v50/sandbox-review.css */ /* Round-two evidence-led sandbox refinements. Desktop artwork sizing is unchanged. */ .mobile-contact,.mobile-references-link{display:none} .story-cue{font-size:15px;line-height:1.5;margin:0 0 24px;color:#687077} #the-work .story-cue{color:#a6afb9} #work-for-frank .story-cue{color:#cbd5e3} body.option-a .studio-frank .collaboration-role{font-size:14px!important;line-height:1.5;letter-spacing:0;text-transform:none;max-width:28ch;margin:8px 0} @media(min-width:761px){ body.option-a .studio-copy .artist-line{position:absolute!important;left:0!important;right:auto!important;top:auto!important;bottom:100%!important;transform:none!important;writing-mode:horizontal-tb!important;max-height:none!important;width:auto!important;margin:0 0 14px!important;font-size:15px!important;line-height:22px!important;letter-spacing:.03em!important;text-transform:none!important;white-space:nowrap} } /* v5: quiet chapter routes and discoverable detail, outside the artwork. */ .editorial-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;margin:12px 0 24px;font-size:15px;line-height:1.5} .editorial-links a,.archive-index a,.story-inquiry a{color:#eac184;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px} .editorial-links a,.archive-index a{display:inline-flex;align-items:center;min-height:44px} .editorial-links a:hover,.archive-index a:hover,.story-inquiry a:hover{color:#fff} .editorial-links a:focus-visible,.archive-index a:focus-visible,.story-inquiry a:focus-visible{outline:2px solid #eac184;outline-offset:4px} .archive-index{display:flex;flex-wrap:wrap;gap:4px 24px;align-items:center;margin:16px 0 24px;padding-block:12px;border-block:1px solid #ffffff24;font-size:15px;line-height:1.5;scroll-margin-top:24px} .archive-index>span{color:#cbd5e3;font-size:14px} .chapter-return{margin:20px 0 0} #printed-designs,#physical-studies,#frank-wall,#archive-piece-2{scroll-margin-top:28px} body #the-work .work-story .story-inquiry,body #work-for-frank .work-story .story-inquiry{margin:14px 0 0;font-size:14px;line-height:1.5} .story-inquiry a{display:inline-flex;align-items:center;min-height:36px} .catalog-instruction{color:#cbd5e3;font-size:15px!important;line-height:1.5!important;margin:12px 0 0} body #design-catalog .catalog-date{margin:10px 0 0;font-size:15px;line-height:1.5;color:#cbd5e3;text-align:center} .catalog-instruction .phone-instruction{display:none} @media(min-width:761px){ body #the-work .glass-quartet .glass-story .work-label{width:100%;max-width:none} body #the-work .glass-quartet .glass-story .work-label>span:first-child{max-width:none;text-wrap:balance} #frank .story-text>.gift-gallery{margin-top:24px} } @media(max-width:760px){ .editorial-links,.archive-index{gap:2px 20px;font-size:14px} .archive-index>span{flex-basis:100%} .mobile-references-link{text-decoration:underline;text-underline-offset:4px} .catalog-instruction .desktop-instruction{display:none} .catalog-instruction .phone-instruction{display:inline} body #the-work .glass-quartet .glass-story.murrine-feature .work-plate{aspect-ratio:.912125!important} .story-inquiry a{min-height:44px} } @media(max-width:760px){ body.option-a .studio-opening .site-nav{position:relative} body.option-a .studio-opening .site-nav>a.mobile-contact{display:flex!important;align-items:center;justify-content:center;position:absolute;right:20px;top:16px;min-height:44px;padding:0 4px;font-size:14px!important;color:#eac184} body.option-a .studio-copy .artist-line{position:static!important;transform:none!important;writing-mode:horizontal-tb!important;margin:0 0 12px!important;white-space:normal} body.option-a .studio-frank .collaboration-role{margin:6px 0} .mobile-references-link{display:inline-flex;align-items:center;min-height:44px;color:#eac184;font-size:15px;text-underline-offset:4px} .references-disclosure{margin:22px 0 0;border-top:1px solid #ffffff30;border-bottom:1px solid #ffffff30;padding:4px 0} .references-disclosure summary{cursor:pointer;min-height:44px;align-content:center;color:#eac184;font-size:15px} .references-disclosure .frank-references{margin:12px 0;padding:0;border:0} .references-disclosure .frank-references h3{display:none} .references-disclosure .frank-references li{font-size:15px;line-height:1.5;margin-bottom:14px} .references-disclosure .frank-references li>span{display:block;font-size:13px} .references-disclosure :focus-visible,.mobile-contact:focus-visible,.mobile-references-link:focus-visible{outline:2px solid #eac184;outline-offset:3px} /* Portrait images reserve a readable full-row footprint even while closed. */ body #the-work .glass-story.mobile-portrait{grid-column:1 / -1;width:100%;position:relative} body #the-work .glass-story.mobile-portrait .work-plate{width:min(100%,300px)!important;height:auto!important;min-height:0!important;aspect-ratio:var(--glass-ratio);margin-inline:auto} body #the-work .glass-story.mobile-portrait .work-plate>img{width:100%!important;height:100%!important} body #the-work .glass-story.mobile-portrait .work-label{width:min(100%,300px)!important} body #the-work .glass-story,body #work-for-frank .sliding-work{position:relative} body #the-work .glass-story[data-image-bounds] .work-story, body #work-for-frank .sliding-work[data-image-bounds] .work-story{ left:var(--sheet-left)!important;right:auto!important;top:auto!important;bottom:var(--sheet-bottom)!important;width:var(--sheet-width)!important;height:var(--sheet-height)!important;max-height:var(--sheet-height)!important;box-sizing:border-box;padding:14px!important;overflow-y:auto;overscroll-behavior:contain; } body #the-work .glass-story[data-image-bounds] .work-action, body #work-for-frank .sliding-work[data-image-bounds] .work-action{left:var(--control-left)!important;right:auto!important;top:var(--control-top)!important} body #the-work .glass-story[data-image-bounds] .story-scroll-track, body #work-for-frank .sliding-work[data-image-bounds] .story-scroll-track{left:var(--track-left)!important;right:auto!important;top:auto!important;bottom:calc(var(--sheet-bottom) + 12px)!important;height:calc(var(--sheet-height) - 24px)!important} } @media(prefers-reduced-motion:reduce){body .sliding-work .work-story{transition:none!important}} /* v2: explicit closed/open parity beats the legacy expanded-grid selectors. */ @media(max-width:760px){ body #the-work .glass-story.mobile-portrait, body #the-work .work-grid > .glass-story.mobile-portrait.sliding-work.story-open:not(.wide):not(.solo-feature), body #the-work .glass-quartet > .glass-story.mobile-portrait.story-open, body #the-work .sphere-pair > .glass-story.mobile-portrait.story-open{grid-column:1 / -1!important} body.option-a .studio-opening .site-nav .brand{box-sizing:border-box;max-width:calc(100% - 76px)!important;min-height:44px} } @media(max-width:380px){ body.option-a .studio-opening .site-nav .brand{font-size:20px!important;gap:6px!important;white-space:nowrap!important} body.option-a .studio-opening .site-nav .brand img{width:36px!important;height:36px!important} } /* The portrait-tablet hero uses normal flow rather than desktop coordinates. */ @media(min-width:761px) and (max-width:1100px) and (max-aspect-ratio:1/1){ body.option-a .studio-copy .artist-line{position:static!important;inset:auto!important;margin:0 0 12px!important;white-space:normal!important} } /* v3: desktop prose must scroll, including the shallow landscape archive rows. The original plate height is retained in both states; the thumbnail stays visible. */ @media(min-width:761px){ body.option-a .studio-opening .site-nav>a.mobile-contact{display:none!important} body #work-for-frank .sliding-work .work-story, body #work-for-frank .sliding-work.story-open .work-story{overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain} body #work-for-frank .sliding-work.desktop-short-story.story-open .work-plate>img{width:26%!important;max-width:26%!important;left:1%!important;top:10px!important;height:108px!important} body #work-for-frank .sliding-work.desktop-short-story .work-story, body #work-for-frank .sliding-work.desktop-short-story.story-open .work-story{left:29%!important;right:1%!important;top:auto!important;bottom:3px!important;width:70%!important;height:calc(100% - 6px)!important;max-height:calc(100% - 6px)!important;padding:12px!important} } /* v7: this long title needs the column, not the narrow portrait's painted width. */ @media(min-width:761px){ body #work-for-frank #archive-piece-7 .work-label{width:100%;max-width:none} } /* Source: css/v50/impeccable-editorial.css */ /* Sandbox editorial refinements: artwork, palette, hero layout and full archive retained. */ #frank .collaboration-intro{max-width:48ch;margin:20px 0 12px;color:#e0e7ef;font-size:18px;line-height:1.65} #frank .collaboration-paths{margin:8px 0 12px;gap:8px 22px} #work-for-frank .archive-introduction .archive-index{margin:20px 0 28px;gap:4px 18px} #work-for-frank .archive-checkpoint{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;margin:8px 0 22px;padding-block:10px;border-block:1px solid #ffffff24;font-size:15px} #work-for-frank .archive-checkpoint a{min-height:44px} #how-its-made .film-start{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0 0 36px;max-width:65ch;font-size:17px;line-height:1.5} #how-its-made .film-start a{display:inline-flex;align-items:center;min-height:44px;color:#eac184;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px} #how-its-made .film-start span{color:#cbd5e3;font-size:15px} #how-its-made .film-start a:hover{color:#fff} #how-its-made .film-start a:focus-visible{outline:2px solid #eac184;outline-offset:4px} #how-its-made .film{scroll-margin-top:32px} #how-its-made .film figcaption{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 14px;text-align:left;line-height:1.4} #how-its-made .film-title{font-size:18px;font-weight:600} #how-its-made .film-runtime{color:#eac184;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:400} #how-its-made .film-description{grid-column:1/-1;color:#cbd5e3;font-size:15px;font-weight:400;line-height:1.5} @media(max-width:700px){ #frank .collaboration-intro{font-size:17px;line-height:1.6;margin-top:16px} #frank .collaboration-paths{font-size:15px;gap:2px 18px} #work-for-frank .archive-introduction .archive-index{margin:18px 0 24px} #work-for-frank .archive-checkpoint{gap:2px 20px;margin-block:4px 16px;font-size:14px} #how-its-made .film-start{margin-bottom:28px;font-size:16px} #how-its-made .film-title{font-size:17px} } /* Wine and toy is now the opening story-bearing image, not a duplicate preview. */ body #work-for-frank .archive-introduction>.featured-archive-work{width:100%;max-width:100%;margin:0;padding:5px 0 0;border-bottom:0;align-self:start} body #work-for-frank .featured-archive-work .work-plate{width:100%;height:auto!important;min-height:0!important;aspect-ratio:4/3;max-height:none;align-items:center} body #work-for-frank .featured-archive-work .work-plate>img{width:100%;height:100%!important;max-height:none;object-fit:contain;object-position:center} body #work-for-frank .featured-archive-work .work-label{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:12px 0;font-size:18px} body #work-for-frank .featured-archive-work .work-label>span:first-child{min-height:0} @media(max-width:760px){body #work-for-frank .archive-introduction>.featured-archive-work{grid-row:auto;margin-top:4px}} /* Independence notice shares the copyright typography. */ body footer{flex-wrap:wrap} body footer .independence-notice{flex-basis:100%;width:100%;max-width:100%;margin:16px 0 0;font-weight:400;line-height:1.6} .lecture-invitation .wrap{max-width:900px}.lecture-invitation h2{font-size:clamp(28px,3vw,40px);line-height:1.2;margin:12px 0 20px}.lecture-invitation p:not(.eyebrow){max-width:60ch;font-size:17px;line-height:1.65}.lecture-invitation a{display:inline-flex;align-items:center;min-height:44px;color:#eac184;text-decoration:underline;text-underline-offset:4px} /* Update signup preview; no commerce or active subscription backend. */ body .studio-updates{padding-block:44px;background:#10243b} body .studio-updates .wrap{max-width:720px} body .studio-updates h2{font-size:clamp(28px,3vw,36px);line-height:1.2;margin:0 0 12px} body .studio-updates p{font-size:16px;line-height:1.6;margin:0 0 20px} body .studio-updates form>label{display:block;font-size:15px;margin-bottom:8px} body .studio-updates-entry{display:flex;gap:12px;align-items:stretch} body .studio-updates-entry input{flex:1;min-width:0;width:100%;min-height:46px;padding:10px 12px;box-sizing:border-box;border:1px solid #8392a5;border-radius:6px;background:#08172e;color:#f4f2ec;font:inherit;font-size:16px} body .studio-updates-entry button{min-height:46px;padding:10px 18px;border:1px solid #eac184;border-radius:24px;background:transparent;color:#eac184;font-family:inherit;font-weight:500;font-size:15px;line-height:1.4;cursor:pointer;white-space:nowrap} body .studio-updates-entry button:disabled{opacity:.6;cursor:default} body .studio-updates form>.studio-updates-consent{display:flex;align-items:flex-start;gap:10px;margin:14px 0 12px;line-height:1.5;min-height:44px;cursor:pointer} body .studio-updates-consent input{flex:0 0 18px;width:18px;height:18px;margin:3px 0 0;accent-color:#eac184} body .studio-updates .studio-updates-note{font-size:13px;color:#c1cdd9;margin:0;line-height:1.5} body .studio-updates #studio-updates-status:not(:empty){margin-top:10px;color:#f4f2ec} body .studio-updates :focus-visible{outline:2px solid #eac184;outline-offset:3px} @media(max-width:520px){body .studio-updates-entry{flex-direction:column;gap:10px}body .studio-updates-entry button{align-self:flex-start}body .studio-updates{padding-block:32px}} /* A quiet editorial invitation, not a second section of competing headlines. */ body .lecture-invitation{padding:48px 0;background:#10243b} body .lecture-invitation .wrap{max-width:1120px;display:flex;align-items:center;justify-content:space-between;gap:24px 48px} body .lecture-invitation .lecture-copy{flex:1;min-width:0;max-width:60ch} body .lecture-invitation h2{font-size:34px;line-height:1.2;margin:0 0 14px} body .lecture-invitation p:not(.eyebrow){font-size:18px;line-height:1.6;margin:0;color:#cbd5e3} body .lecture-invitation .wrap>a{flex-shrink:0;gap:8px;font-size:16px;line-height:1.5} body .lecture-invitation .section-home{display:none!important} @media(max-width:760px){ body .lecture-invitation{padding:36px 0} body .lecture-invitation .wrap{display:block} body .lecture-invitation h2{font-size:28px}body .lecture-invitation p:not(.eyebrow){font-size:17px} body .lecture-invitation .wrap>a{margin-top:12px} } /* One invitation, one reading column, two ways to stay in touch. */ body #contact.contact-ending{padding:48px 0;background:#10243b;text-align:left} body #contact .contact-ending-inner{max-width:680px;display:block} body #contact .contact-invitation{min-width:0} body #contact.contact-ending h2{font-size:clamp(28px,3vw,36px);line-height:1.2;margin:0 0 12px} body #contact.contact-ending .close-mail{display:inline-flex;align-items:center;min-height:44px;margin:0;font-size:20px;line-height:1.5;overflow-wrap:anywhere} body #contact .studio-updates{min-width:0;margin-top:24px;padding:0;border:0;background:none} body #contact .studio-updates>p{font-size:16px;line-height:1.6;margin:0 0 20px;max-width:none;color:#cbd5e3} body #contact .studio-updates .studio-updates-note{margin:0;font-size:13px;color:#c1cdd9} body #contact .studio-updates #studio-updates-status:not(:empty){margin-top:10px;color:#f4f2ec} @media(max-width:760px){body #contact.contact-ending{padding:32px 0}} /* Compact brand strip: one metadata row, followed by the exact notice. */ body footer.site-ending-footer{display:block;padding:12px 0;background:#10243b;text-align:left;border-top:1px solid #ffffff12} body footer.site-ending-footer .footer-inner{max-width:800px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px 16px;align-items:center} body footer.site-ending-footer a{font-size:13px;font-weight:600;color:#aeb9ca;min-height:24px;width:fit-content;display:inline-flex;align-items:center;text-decoration:none} body footer.site-ending-footer .foot-meta{font-size:13px;font-weight:400;line-height:1.35;margin:0;color:#aeb9ca} body footer.site-ending-footer .independence-notice{flex-basis:100%;width:100%;max-width:100%;margin:0;font-size:13px;font-weight:400;line-height:1.35;text-wrap:pretty} @media(max-width:360px){body footer.site-ending-footer .footer-inner{column-gap:8px}} /* The last study belongs beside the preceding work, not on a full-width row. */ body #frank-wall > #archive-piece-30{grid-column:auto;justify-self:stretch;width:100%} body #frank-wall > #archive-piece-30 .work-plate{height:var(--row-art-height,270px)!important} /* Place the talk invitation where the collaboration is introduced. */ body #frank .lecture-invitation{margin:0 0 44px;padding:28px 32px;border:0;border-left:4px solid #b58a42;border-radius:8px;background:#e8dfcf;color:#10243b;box-sizing:border-box} body #frank .lecture-invitation .wrap{max-width:none;padding-inline:0} /* A contrasting invitation surface, distinct from the collaboration narrative. */ body #frank .lecture-invitation h2{color:#10243b} body #frank .lecture-invitation p:not(.eyebrow){color:#344458} body #frank .lecture-invitation .wrap>a{padding:10px 16px;box-sizing:border-box;border:1px solid #10243b;border-radius:5px;background:#10243b;color:#f4f2ec;text-decoration:none;font-weight:600} body #frank .lecture-invitation .wrap>a:hover{background:#223d5b;border-color:#223d5b} body #frank .lecture-invitation .wrap>a:focus-visible{outline:2px solid #10243b;outline-offset:4px} @media(max-width:760px){ body #frank .lecture-invitation{padding:22px 20px;margin-bottom:32px} body #frank .lecture-invitation .wrap>a{margin-top:18px;max-width:100%} } /* Useful enquiry details belong to the invitation, not the personal tribute. */ body #frank .lecture-placement{margin-top:12px} body #frank .lecture-invitation>.wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:start} body #lecture-enquiry-form{min-width:0} body #lecture-enquiry-form label{display:block;font-size:15px;line-height:1.4;font-weight:600;color:#10243b} body #lecture-enquiry-form label>span{font-weight:400;font-size:13px} body .lecture-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px} body #lecture-enquiry-form input,body #lecture-enquiry-form select,body #lecture-enquiry-form textarea{display:block;width:100%;min-width:0;box-sizing:border-box;margin-top:6px;padding:10px 12px;border:1px solid #89909a;border-radius:5px;background:#faf7f0;color:#10243b;font:16px/1.4 'Segoe UI',Arial,sans-serif;min-height:44px} body #lecture-enquiry-form textarea{resize:vertical} body #lecture-enquiry-form textarea::placeholder{color:#596574;opacity:1} body #lecture-enquiry-form button{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:14px;padding:10px 16px;border:1px solid #10243b;border-radius:5px;background:#10243b;color:#f4f2ec;font:600 16px/1.4 'Segoe UI',Arial,sans-serif;cursor:pointer} body #lecture-enquiry-form button:disabled{opacity:.6;cursor:default} body #lecture-enquiry-form :focus-visible{outline:2px solid #10243b;outline-offset:3px} body #frank #lecture-enquiry-note,body #frank #lecture-enquiry-status{font-size:13px;line-height:1.5;margin:10px 0 0;color:#344458} body #frank #lecture-enquiry-status:empty{display:none} body #frank .personal-closing{margin-top:20px} body #frank .personal-closing a{display:block;width:fit-content;font-size:13px;line-height:1.6;color:#cbd5e3;text-decoration:underline;text-underline-offset:3px;margin-top:6px} @media(max-width:900px){body #frank .lecture-invitation>.wrap{grid-template-columns:1fr;gap:24px}} @media(max-width:520px){body .lecture-fields{grid-template-columns:1fr}} /* Phone refinements: shorter invitation, quiet footer, content-sized action. */ .updates-intro-mobile{display:none} @media(max-width:760px){ .updates-intro-desktop{display:none} .updates-intro-mobile{display:inline} body #contact .studio-updates>.updates-intro{font-size:15px;line-height:1.5;margin-bottom:16px} body #contact .studio-updates-entry{display:flex;flex-direction:column;align-items:stretch;gap:8px} body #contact .studio-updates-entry input{min-height:44px;padding:9px 12px;font-size:16px} body #contact .studio-updates-entry button{align-self:flex-start;width:auto;min-width:0;min-height:44px;padding:9px 12px;font-size:14px;line-height:1.4} body #contact .studio-updates form>.studio-updates-consent{margin-top:12px;font-size:14px} body footer.site-ending-footer a,body footer.site-ending-footer .foot-meta,body footer.site-ending-footer .independence-notice{font-size:12px;line-height:1.4} body footer.site-ending-footer{padding-block:10px} body footer.site-ending-footer .footer-inner{gap:4px 12px} } /* Lecture invitation uses the site's navy, gold and rounded-outline language. */ body #frank .lecture-invitation{background:#14233b;color:#f4f2ec;border:1px solid #eac18466;border-left:3px solid #eac184;border-radius:8px;padding:28px 32px} body #frank .lecture-invitation h2{color:#eac184} body #frank .lecture-invitation p:not(.eyebrow){color:#cbd5e3} body #lecture-enquiry-form label{color:#f4f2ec} body #lecture-enquiry-form textarea{background:#061028;color:#f4f2ec;border-color:#8392a5} body #lecture-enquiry-form textarea::placeholder{color:#aeb9ca} body #lecture-enquiry-form button{border:1px solid #eac184;border-radius:24px;background:transparent;color:#eac184;font-weight:500} body #lecture-enquiry-form button:hover{background:#eac18416} body #lecture-enquiry-form :focus-visible{outline-color:#eac184} body #frank #lecture-enquiry-note,body #frank #lecture-enquiry-status{color:#cbd5e3} @media(max-width:760px){body #frank .lecture-invitation{padding:22px 20px}} /* Equal desktop vessels: common image stage, caption rhythm and plus baseline. */ @media(min-width:761px){ body #the-work #glass-vessels{gap:28px 24px;align-items:start} body #the-work #glass-vessels>.glass-story{width:100%;min-width:0;margin:0} body #the-work #glass-vessels .work-plate{height:300px!important;min-height:0;width:100%} body #the-work #glass-vessels .work-plate>img{width:100%;height:100%!important;object-fit:contain;object-position:center bottom} body #the-work #glass-vessels .work-label{display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:start;gap:12px;width:100%;min-height:68px;padding:12px 0;margin:0} body #the-work #glass-vessels .work-label>span:first-child{min-height:0} body #the-work #glass-vessels .work-action{position:relative;inset:auto;margin:0;justify-self:end} } /* Reset inherited three-column caption coordinates when using two columns. */ @media(min-width:761px){ body #the-work #glass-vessels .work-label::before{content:none} body #the-work #glass-vessels .work-label>span:first-child{grid-column:1;grid-row:1;text-align:left;min-width:0;max-width:none;width:auto;text-wrap:wrap;word-break:normal;overflow-wrap:normal} body #the-work #glass-vessels .work-label .work-action{grid-column:2;grid-row:1} } /* Both glass routes use the opening's rounded outline invitation style. */ body #the-work nav.editorial-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:20px 0 24px} body #the-work nav.editorial-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:8px 16px;border:1px solid #ceddee80;border-radius:24px;background:transparent;color:#f2f6fb;font-size:15px;line-height:1.4;text-decoration:none} @media(hover:hover){body #the-work nav.editorial-links a:hover{border-color:#eac184;background:#eac18416;color:#f2f6fb}} body #the-work nav.editorial-links a:focus-visible{outline:2px solid #eac184;outline-offset:3px} @media(max-width:760px){body #the-work nav.editorial-links{gap:8px 12px}body #the-work nav.editorial-links a{font-size:14px;padding-inline:14px}} /* Size the desktop tracks to the photographs, not to four equal empty stages. */ @media(min-width:1101px){ body #the-work #glass-vessels{grid-template-columns:1.0656fr .912125fr .6fr .636fr;column-gap:24px} body #the-work #glass-vessels .work-plate{height:auto!important;aspect-ratio:var(--glass-ratio);max-height:none;position:relative} body #the-work #glass-vessels .murrine-crop{position:absolute;inset:0;height:100%;width:100%} } /* Two photograph-sized columns on tablets; captions retain their own photo width. */ @media(min-width:761px) and (max-width:1100px){ body #the-work #glass-vessels{--vessel-height:clamp(210px,28vw,300px);grid-template-columns:max-content max-content;justify-content:space-between;column-gap:24px} body #the-work #glass-vessels>.glass-story{width:calc(var(--vessel-height)*var(--glass-ratio))} body #the-work #glass-vessels .work-plate{height:var(--vessel-height)!important;width:100%;position:relative} body #the-work #glass-vessels .murrine-crop{position:absolute;inset:0;height:100%;width:100%} } /* Tablet cards need usable caption measure, not widely separated narrow columns. */ @media(min-width:761px) and (max-width:1100px){ body #the-work #glass-vessels{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:normal;gap:28px 24px} body #the-work #glass-vessels>.glass-story{width:100%;min-width:0} body #the-work #glass-vessels .work-plate{height:300px!important;width:100%;aspect-ratio:auto} body #the-work #glass-vessels .work-plate>img{object-position:left bottom} body #the-work #glass-vessels .murrine-crop{position:relative;inset:auto;width:min(100%,319.68px);height:100%;margin:0} body #the-work #glass-vessels .work-label{width:100%;min-height:68px} } /* Editorial route choices share one outline-button language; citations stay links. */ body nav.editorial-links,body nav.archive-index{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:20px 0 24px} body nav.editorial-links a,body nav.archive-index a,body a.mobile-references-link{align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:8px 16px;border:1px solid #ceddee80;border-radius:24px;background:transparent;color:#f2f6fb;font-size:15px;line-height:1.4;text-decoration:none} body nav.editorial-links a,body nav.archive-index a{display:inline-flex} body nav.archive-index>span{flex-basis:100%} @media(hover:hover){body nav.editorial-links a:hover,body nav.archive-index a:hover,body a.mobile-references-link:hover{border-color:#eac184;background:#eac18416;color:#f2f6fb}} body nav.editorial-links a:focus-visible,body nav.archive-index a:focus-visible{outline:2px solid #eac184;outline-offset:3px} body #frank .frank-references{padding:22px 24px;border:1px solid #eac18455;border-radius:8px;background:#17283f;box-sizing:border-box} body #frank .frank-references h3{font:600 26px/1.25 'Segoe UI',Arial,sans-serif;letter-spacing:0;color:#eac184;margin:0 0 12px} body #frank .frank-references li{padding:12px 0;font-size:16px;line-height:1.45} body #frank .frank-references li>span{font-size:14px;line-height:1.5;margin-top:5px;color:#c2cfdd;opacity:1} body #frank .frank-references li>a{text-decoration:underline;text-underline-offset:3px} body #lecture-enquiry-form textarea{background:#20344d;border-color:#8698ad;color:#f4f2ec} @media(max-width:760px){ body nav.editorial-links,body nav.archive-index{gap:8px 12px} body nav.editorial-links a,body nav.archive-index a,body a.mobile-references-link{font-size:14px;padding-inline:14px} body #frank .references-disclosure{padding:18px 20px;border:1px solid #eac18455;border-radius:8px;background:#17283f} body #frank .references-disclosure>summary{font:600 21px/1.35 'Segoe UI',Arial,sans-serif;color:#eac184;min-height:44px} body #frank .references-disclosure .frank-references{padding:4px 0 0;border:0;background:transparent;margin:8px 0 0} } /* One archive chooser; let the narrative flow without repeated navigation menus. */ body #work-for-frank nav.archive-index{border:0;padding:0;gap:10px 12px;margin:20px 0 28px} body #work-for-frank .three-more-years{margin-top:28px;margin-bottom:0;padding-block:0} body #work-for-frank .three-more-years>p:last-child{margin-bottom:0} body #work-for-frank #physical-studies{margin-top:52px;padding-top:0} body #work-for-frank #physical-studies>h3{margin-top:0} body #how-its-made .films{row-gap:48px} @media(max-width:760px){ body #work-for-frank .three-more-years{margin-top:24px} body #work-for-frank #physical-studies{margin-top:40px} body #how-its-made .films{row-gap:36px} } /* Center vessel captions on the photograph, with symmetric space for the plus. */ @media(min-width:761px){ body #the-work #glass-vessels .work-label{grid-template-columns:28px minmax(0,1fr) 28px;gap:6px;align-items:start} body #the-work #glass-vessels .work-label>span:first-child{grid-column:2;grid-row:1;text-align:center;justify-self:stretch;width:auto;min-width:0} body #the-work #glass-vessels .work-label .work-action{grid-column:3;grid-row:1;justify-self:end;position:relative;inset:auto} } @media(min-width:761px) and (max-width:1100px){ body #the-work #glass-vessels .work-label{width:min(100%,calc(300px * var(--glass-ratio)));margin-inline:0} } /* Tablet photo stages and their captions share one center axis. */ @media(min-width:761px) and (max-width:1100px){ body #the-work #glass-vessels .work-label{width:100%;margin-inline:0} body #the-work #glass-vessels .work-plate>img{object-position:center bottom} body #the-work #glass-vessels .murrine-crop{margin-inline:auto} } /* Continue the origin story below the right-hand film column, not page center. */ @media(min-width:761px){ body #why-glass .origin-continuation{width:calc((100% - 55px) * .5192307692);max-width:none;margin:32px 0 0 auto;text-align:left} } @media(max-width:760px){ body #why-glass .origin-continuation{width:100%;max-width:none;margin:24px 0 0;text-align:left} } /* Let full-width archive narrative use its available desktop reading area. */ @media(min-width:761px){ body #work-for-frank .after>p, body #work-for-frank .sheets>p, body #work-for-frank .collection>p{width:100%;max-width:none} } /* Full-width continuation remains aligned with the section's left text edge. */ body #why-glass .origin-continuation{width:100%;max-width:none;margin:32px 0 0;text-align:left} body #why-glass .origin-continuation>p{max-width:none;width:100%} body #printed-designs .catalog-tools{display:flex;align-items:center;gap:12px;margin:16px 0 18px;max-width:100%} body #printed-designs .catalog-tools .catalog-zoom{position:relative;inset:auto;flex:0 0 44px;width:44px;height:44px} body #printed-designs .catalog-tools .catalog-instruction{margin:0;max-width:none;min-width:0;line-height:1.5} @media(max-width:760px){body #why-glass .origin-continuation{margin-top:24px}} /* Archive jumps clear the fixed 44px home control, its padding and safe area. */ @media(min-width:761px){ body #frank-wall, body #printed-designs, body #physical-studies{scroll-margin-top:calc(max(10px, env(safe-area-inset-top, 0px)) + 70px)} } /* Phones have no floating home control; retain the compact chapter inset. */ @media(max-width:760px){ body #frank-wall, body #printed-designs, body #physical-studies{scroll-margin-top:28px} }/* User approved the quieter Proposed lecture design in the visual comparison. */ body #frank #lectures-and-archive.lecture-invitation{background:#14233b;border-color:#52667c} body #frank #lectures-and-archive.lecture-invitation h2{font:600 30px/1.2 Archivo,sans-serif;color:#eac184} body #frank #lectures-and-archive.lecture-invitation>.wrap>div:first-child{border-bottom:0;padding-bottom:0} body .studio-updates-entry button:enabled:hover{background:#eac18424} /* Phones use native pinch zoom; keep the desktop lens on mouse devices. */ @media(max-width:760px),(pointer:coarse){ body #printed-designs .catalog-tools,body #printed-designs .catalog-instruction,body #printed-designs .catalog-lens{display:none!important} body #design-catalog{padding-top:0} body #design-catalog,body #design-catalog .catalog-sheet{touch-action:auto!important} } /* Source: css/v50/impeccable-stories.css */ /* Keep the existing artwork footprint and motion; only the sheet adapts. */ @media(max-width:760px){ body #the-work .glass-story[data-image-bounds] .work-story, body #work-for-frank .sliding-work[data-image-bounds] .work-story{padding:8px 12px!important} body #the-work .work-story .story-inquiry, body #work-for-frank .work-story .story-inquiry{margin-top:0} } .story-reading-button{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:#eac184;font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:4px;cursor:pointer} .story-reading-button[hidden]{display:none!important} .story-reading-button:hover{color:#fff} .story-reading-button:focus-visible,.story-reader :focus-visible{outline:2px solid #eac184;outline-offset:4px} .story-reader{box-sizing:border-box;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;border:1px solid #63758b;border-radius:14px;background:#14213e;color:#f5f3ef;box-shadow:0 18px 60px #0006;overflow:hidden} .story-reader::backdrop{background:rgba(3,12,30,.62)} .story-reader[open]{display:flex;flex-direction:column} .story-reader-header{flex-shrink:0} .story-reader-copy{min-height:0} .story-reader-header{display:flex;align-items:center;gap:20px;padding:18px 24px;border-bottom:1px solid #eac18440} .story-reader h2{margin:0;font-size:clamp(22px,4vw,28px);line-height:1.25;color:#eac184} .story-reader-close{flex:none;margin-left:auto;width:44px;height:44px;border:1px solid #eac18480;border-radius:50%;background:transparent;color:#f5f3ef;cursor:pointer} .story-reader-copy{max-height:calc(100dvh - 170px);overflow-y:auto;overscroll-behavior:contain;padding:20px 24px 24px;line-height:1.7;font-size:18px;scrollbar-color:#eac184 #14213e;scrollbar-width:thin} .story-reader-copy p{margin:0 0 1em} .story-reader-copy p:last-child{margin-bottom:0} .story-reader-copy a{color:#eac184;text-underline-offset:4px} .story-reader-copy .story-inquiry{margin-top:20px} @media(max-width:760px){.story-reader-header{padding:12px 16px;gap:12px}.story-reader-copy{padding:16px;font-size:17px;max-height:calc(100dvh - 160px)}} /* Source: css/v50/impeccable-gifts.css */ /* Sandbox: inspect a paired photograph without separating the archive group. */ .gift-lightbox [hidden]{display:none!important} .gift-toolbar{height:auto;min-height:44px;gap:8px} .gift-back{margin-right:auto;min-height:44px;padding:8px 12px;border:0;background:transparent;color:#26313b;font:600 14px/1.3 'Segoe UI',Arial,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .gift-inspect{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:44px;min-height:44px;width:100%;max-height:calc(76dvh - 100px);padding:2px;border:0;border-radius:4px;background:transparent;color:#26313b;cursor:zoom-in} .gift-inspect img{display:block;width:100%;height:auto;min-height:0;max-height:calc(76dvh - 132px);object-fit:contain;flex:1 1 auto} .gift-inspect span{flex:0 0 auto;font:600 12px/1.4 'Segoe UI',Arial,sans-serif;text-decoration:underline;text-underline-offset:3px;padding:3px} .gift-inspect:hover,.gift-back:hover{background:rgba(38,49,59,.07)} .gift-lightbox.is-inspecting .gift-prev,.gift-lightbox.is-inspecting .gift-next{display:none} .gift-detail{grid-column:1/-1;min-width:0;min-height:0;text-align:center;padding:0 8px;touch-action:pan-x pan-y pinch-zoom} .gift-detail img{display:block;width:100%;height:auto;max-height:calc(76dvh - 125px);object-fit:contain} .gift-detail p{font:14px/1.4 'Segoe UI',Arial,sans-serif;margin:8px 0 0;color:#26313b} @media(max-width:600px){ .gift-inspect{height:100%;max-height:100%} .gift-slide .gift-inspect img{height:auto;max-height:calc(100% - 29px)} .gift-inspect span{font-size:11px} .gift-detail img{max-height:calc(72dvh - 140px)} } /* Source: css/v50/copy-review.css */ /* Temporary sandbox copy review only. Do not include these marks in a public release. */ body #the-work .copy-review-added{color:#ff8f96!important;text-decoration:none;background:transparent;font:inherit} body #the-work .copy-review-removed{color:#cbd2df!important;text-decoration:line-through;text-decoration-thickness:1.5px;font:inherit} body #the-work .work-label .copy-review-added, body #the-work .work-label .copy-review-removed{display:block;overflow-wrap:normal;word-break:normal} body #the-work .work-label .copy-review-removed{font-size:.85em;line-height:1.35;margin-bottom:5px} /* Source: css/v50/hero-years-review.css */ /* Sandbox: standalone milestone with one continuous caption. */ body.option-a .studio-invitations .studio-frank.hero-years-review{display:block;background:none!important;border:0!important;padding-top:0;min-height:0;text-align:left} body.option-a .studio-frank.hero-years-review>.hero-years-number{display:block;font:700 44px/1 'Archivo',Arial,sans-serif!important;letter-spacing:-.035em;color:#f6f8fa;margin:0 0 3px} body.option-a .studio-frank.hero-years-review>.hero-years-copy{display:block;font:400 16px/1.5 'Archivo',Arial,sans-serif!important;color:#d9e4ef;white-space:nowrap} body.option-a .studio-frank.hero-years-review .hero-years-copy a{font:inherit;color:#eac184;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px} body.option-a .studio-invitations .studio-frank.hero-years-review strong{display:inline;font:inherit!important;font-weight:700!important;color:inherit!important;margin:0!important} body.option-a .studio-frank.hero-years-review .hero-years-copy a:hover{color:#fff} body.option-a .studio-frank.hero-years-review .hero-years-copy a:focus-visible{outline:2px solid #eac184;outline-offset:5px} @media(max-width:760px){body.option-a .studio-frank.hero-years-review>.hero-years-number{font-size:47px!important}body.option-a .studio-frank.hero-years-review>.hero-years-copy{font-size:14px!important}} body.option-a .hero-years-review .hero-story-link{position:relative;display:inline-block} body.option-a .hero-years-review .hero-story-tooltip{position:absolute;left:0;top:calc(100% + 10px);bottom:auto;z-index:5;display:block;visibility:hidden;opacity:0;white-space:nowrap;padding:8px 12px;border:1px solid rgba(234,193,132,.65);border-radius:20px;background:rgba(8,25,52,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#eac184;font:500 13px/1.4 'Archivo',Arial,sans-serif;box-shadow:0 3px 12px #0002;text-decoration:none;pointer-events:none} body.option-a .hero-years-review .hero-story-link:hover .hero-story-tooltip,body.option-a .hero-years-review .hero-story-link:focus-visible .hero-story-tooltip{visibility:visible;opacity:1} body.option-a .hero-years-review .hero-story-tooltip.pointer-tooltip{position:fixed;z-index:100} /* Approved mobile compact navigation and milestone. */ @media(max-width:760px){ body.option-a .studio-opening .site-nav>div{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px!important;width:100%!important} body.option-a .studio-opening .site-nav>div>a{min-width:0!important;padding:7px 2px!important;font-size:11px!important;line-height:1.25!important;text-align:center;justify-content:center} body.option-a .studio-opening .site-nav>div>a[href="#contact"]{display:none!important} body.option-a .studio-frank.hero-years-review>.hero-years-number{font-size:36px!important;margin-bottom:3px!important} body.option-a .studio-frank.hero-years-review>.hero-years-copy{line-height:1.3!important} body #frank .references-disclosure{margin:16px 0 24px;padding:8px 14px;border:1px solid #52667c;border-radius:8px;background:#14233b} body #frank .references-disclosure summary{display:flex;align-items:center;justify-content:space-between;list-style:none} body #frank .references-disclosure summary::-webkit-details-marker{display:none} body #frank .references-disclosure summary:after{content:'+';font-size:22px} body #frank .references-disclosure[open] summary:after{content:'−'} } /* Source: css/v50/footer-review.css */ body .site-ending-footer.footer-review{padding:18px 0 14px;background:transparent} body footer.site-ending-footer.footer-review .footer-inner{display:flex;flex-direction:column;gap:12px;align-items:stretch;max-width:1200px} body .footer-review .independence-notice{box-sizing:border-box;width:100%;max-width:none;margin:0;padding:12px 16px;border:1px solid rgba(136,166,200,.23);border-radius:4px;background:rgba(32,61,104,.22);color:#aebdd0;font-size:12px;line-height:1.6;text-align:left} body .footer-review .independence-notice strong{color:#eac184;font-weight:600} body .footer-review-bottom{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;color:#aebdd0;font-size:12px} body .footer-review-bottom p{margin:0;font:inherit} body .footer-review-bottom a{font:inherit;color:inherit} @media(max-width:600px){body .site-ending-footer.footer-review{padding:12px 0}body .footer-review .independence-notice{font-size:12px;padding:10px 12px}body .footer-review-bottom{flex-wrap:wrap;font-size:12px;gap:6px}} /* Lecture invitation: one reading path, one continuous form. */ body #frank .lecture-invitation{border:1px solid #eac18466;padding:28px 32px} body #frank .lecture-invitation>.wrap{display:block} body #frank .lecture-invitation .lecture-copy, body #frank .lecture-invitation .lecture-copy>p{max-width:none;width:auto} body #frank .lecture-invitation h2{margin-bottom:8px} body #lecture-enquiry-form{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:24px} body #lecture-enquiry-form .lecture-contact-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.25fr);gap:16px} body #lecture-enquiry-form label{min-width:0;margin:0;font-weight:500} body #lecture-enquiry-form input, body #lecture-enquiry-form textarea{background:#20344d;border-color:#8698ad;color:#f4f2ec;caret-color:#eac184;border-radius:5px} body #lecture-enquiry-form textarea{min-height:104px} body #lecture-enquiry-form .lecture-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px} body #lecture-enquiry-form button{flex:none;margin:0;min-height:44px;padding:10px 24px} body #lecture-enquiry-form button:disabled{opacity:.65} body #lecture-enquiry-form button:enabled:hover{background:#eac18424} body #frank #lecture-enquiry-note, body #frank #lecture-enquiry-status{max-width:none;margin:0;font-size:13px;line-height:1.5} body #lecture-enquiry-form ::selection{background:#eac184;color:#10243b} @media(max-width:760px){ body #frank .lecture-invitation{padding:24px 20px} body #lecture-enquiry-form{margin-top:20px} body #lecture-enquiry-form .lecture-contact-fields{grid-template-columns:minmax(0,1fr)} body #lecture-enquiry-form textarea{min-height:128px} body #lecture-enquiry-form .lecture-form-actions{align-items:flex-start;flex-direction:column;gap:10px} } /* Approved warm spotlight treatment, without supplementary promotional copy. */ body #frank .lecture-invitation{background:#253951;border:1px solid #bba17c;border-radius:8px} body #frank .lecture-invitation h2{font:400 46px/1.12 'DM Serif Display',Georgia,serif;color:#f4e1c0;margin-bottom:12px} body #frank .lecture-invitation>.wrap>div:first-child{padding-bottom:20px;border-bottom:1px solid #eac18466} body #lecture-enquiry-form input,body #lecture-enquiry-form textarea{background:#08172e;border-color:#8392a5} @media(max-width:760px){body #frank .lecture-invitation h2{font-size:36px}} /* Source: css/v50/mobile-header.css */ /* Load last. Desktop composition and artwork are intentionally inherited. */ .mobile-nav-toggle { display: none; } @media (max-width: 760px) { body.option-a .studio-opening .site-nav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px !important; padding: 12px 20px !important; } body.option-a .studio-opening .site-nav .brand { max-width: calc(100% - 72px) !important; min-width: 0; font-size: 20px !important; line-height: 1.2; gap: 8px !important; white-space: normal !important; } body.option-a .studio-opening .site-nav .brand img { width: 32px !important; height: 32px !important; flex-shrink: 0; } body.option-a .studio-opening .site-nav > a.mobile-contact { display: none !important; } body.option-a .studio-opening .site-nav .mobile-nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px; padding: 0 4px; border: 0; border-radius: 0; background: none; color: #eac184; font: 400 15px/1.4 'Archivo', Arial, sans-serif; cursor: pointer; } body.option-a .studio-opening .site-nav > div { display: flex !important; flex-direction: column; align-items: stretch; width: 100% !important; gap: 0 !important; padding: 8px 0; border-top: 1px solid #52667c; border-bottom: 1px solid #52667c; } body.option-a .studio-opening .site-nav.mobile-nav-ready > div[hidden] { display: none !important; } body.option-a .studio-opening .site-nav > div > a, body.option-a .studio-opening .site-nav > div > a[href="#contact"] { display: block !important; min-height: 44px !important; height: auto; padding: 10px 0 !important; border: 0; border-radius: 0; background: none; font-size: 16px !important; line-height: 1.5 !important; text-align: left !important; white-space: normal; width: 100% !important; } body.option-a .studio-opening .site-nav .mobile-menu-break { display: none; } body.option-a .studio-opening .site-nav .mobile-menu-break::after { content: none; } body.option-a .studio-opening:not(.collaboration-masthead) { min-height: 0; padding-bottom: calc(95vw + 20px) !important; } body.option-a .studio-hero { padding: 20px 20px 0 !important; gap: 0; } body.option-a .studio-copy .artist-line { margin: 0 0 12px !important; font-size: 13px !important; line-height: 1.5 !important; text-transform: none !important; letter-spacing: 0 !important; white-space: normal !important; } body.option-a .studio-copy h1 { font-size: clamp(23px, 5.7vw, 38px) !important; line-height: 1.16 !important; white-space: normal; text-wrap: wrap; letter-spacing: -.02em; } body.option-a .studio-copy h1 i { white-space: normal; } body.option-a .studio-invitations { display: block; } body.option-a .studio-invitations .studio-actions { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 4px 16px; margin: 18px 0 0 !important; } body.option-a .studio-actions > a { height: auto; min-height: 44px !important; min-width: 0; padding: 8px 0 !important; font-size: 14px !important; white-space: normal; text-align: left; } body.option-a .studio-actions > a::before { content: none !important; } body.option-a .studio-actions > a:first-child { padding: 8px 16px !important; border-radius: 24px; background: #eac184 !important; color: #061028 !important; } body.option-a .studio-actions > a + a { text-decoration: underline; text-underline-offset: 4px; } body.option-a .studio-invitations .studio-frank.hero-years-review { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; width: auto; margin: 12px 0 0 !important; padding: 0; text-align: left; } body.option-a .studio-frank.hero-years-review > .hero-years-number { font-size: 18px !important; line-height: 1.5 !important; margin: 0 !important; } body.option-a .studio-frank.hero-years-review > .hero-years-copy { font-size: 14px !important; line-height: 1.5 !important; white-space: normal; } body.option-a .hero-years-review .hero-story-link { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 .25em; min-height: 44px; } body.option-a .studio-opening .mobile-nav-toggle:focus-visible, body.option-a .studio-actions > a:focus-visible { outline: 2px solid #eac184; outline-offset: 4px; } } /* Source: css/v50/mobile-home-final.css */ /* Review-only corrections; deployed styles remain untouched. */ @media(max-width:760px){ body.option-a .studio-opening:not(.collaboration-masthead){position:relative;min-height:100svh;padding-top:76px!important;padding-bottom:calc(100vw + 30px)!important;background-position:center bottom} body.option-a .studio-opening .site-nav{position:absolute!important;inset:0 0 auto;z-index:30;background:transparent!important;box-shadow:none!important;border:0!important} body.option-a .studio-opening .site-nav>div{position:absolute;top:100%;right:20px;left:20px;width:auto!important;background:rgba(6,16,40,.78);border:0!important;padding:12px 18px;border-radius:0} body.option-a .studio-opening .site-nav a,body.option-a .studio-opening .site-nav .mobile-nav-toggle{color:#fff!important} body.option-a .studio-hero{padding-top:26px!important} body.option-a .studio-actions>a,body.option-a .studio-actions>a:first-child{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:8px 0!important;color:#fff!important;text-decoration:underline;text-underline-offset:4px} body.option-a .studio-frank.hero-years-review .hero-years-copy a{color:#fff!important} body.option-a .studio-actions>a:hover,body.option-a .studio-actions>a:focus-visible,body.option-a .studio-frank.hero-years-review .hero-years-copy a:hover,body.option-a .studio-frank.hero-years-review .hero-years-copy a:focus-visible,body.option-a .studio-opening .site-nav a:hover,body.option-a .studio-opening .site-nav a:focus-visible{color:#eac184!important} } @media(min-width:761px){body #the-work #glass-title-14 + .work-plate{height:var(--vessel-height,300px)!important;aspect-ratio:auto;background:#000;display:flex;align-items:center}body #the-work #glass-title-14 + .work-plate>img{width:100%!important;height:auto!important;max-height:100%;object-fit:contain;object-position:center!important}} body #frank .homepage-source-references{grid-column:1/-1;width:100%;max-width:none;box-sizing:border-box} body #frank .homepage-source-references .reference-content{display:grid;grid-template-columns:minmax(280px,1.35fr) repeat(2,minmax(115px,.55fr)) minmax(175px,.85fr);gap:24px;align-items:start} body #frank .homepage-source-references ul{display:flex;flex-direction:column;justify-content:space-evenly;align-self:stretch;gap:20px;margin:0;padding:8px 0;list-style:none} body #frank .homepage-source-references li{margin:0} body #frank .homepage-source-references li>span{display:block;margin-top:5px} body #frank .homepage-source-references .programme-sheet{display:flex;flex-direction:column;background:#fff;width:100%;aspect-ratio:918/1512;overflow:hidden} body #frank .homepage-source-references .programme-sheet>img{display:block;width:100%;height:auto;flex:1;min-height:0;object-fit:contain} body #frank .homepage-source-references .programme-excerpt{display:block;padding:10px 9%;background:white} body #frank .homepage-source-references .programme-excerpt img{display:block;width:100%;height:auto} body #frank .homepage-source-references .article-cover-image{display:block;width:100%;height:auto;aspect-ratio:918/1512;object-fit:contain;background:white} body #frank .homepage-source-references .wbur-reference-image img{display:block;width:100%;height:auto} body #frank .homepage-source-references .programme-pdf-link,body #frank .homepage-source-references .article-original-link,body #frank .homepage-source-references .wbur-source-link,body #frank .homepage-source-references .wbur-listening-note{display:block;text-align:center;font-size:13px;line-height:1.4;margin-top:8px;white-space:nowrap} @media(max-width:760px){body #frank .homepage-source-references .reference-content{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}body #frank .homepage-source-references ul{grid-column:1/-1;gap:22px}body #frank .homepage-source-references .wbur-reference-preview{grid-column:1/-1;max-width:320px;width:100%;margin-inline:auto}} body #frank .homepage-source-references .reference-content{grid-template-columns:minmax(260px,1fr) 120px 120px;gap:18px} body #frank .homepage-source-references ul{grid-column:1;grid-row:1/span 2;padding-top:12px} body #frank .homepage-source-references .poster-enlarge,body #frank .homepage-source-references .article-cover-link{display:flex;width:120px;height:160px;align-items:center;justify-content:center;background:#fff;overflow:hidden} body #frank .homepage-source-references .programme-sheet{width:108px;aspect-ratio:auto} body #frank .homepage-source-references .programme-excerpt{padding:0 8.3%} body #frank .homepage-source-references .article-cover-image{width:100%;height:100%;object-fit:contain} body #frank .homepage-source-references .wbur-reference-preview{grid-column:2/4;grid-row:2} body #frank .homepage-source-references .programme-pdf-link,body #frank .homepage-source-references .article-original-link{font-size:11px} .home-poster-dialog{padding:28px 16px 16px;border:1px solid #526078;background:#11213c;max-width:90vw;max-height:90vh;overflow:auto}.home-poster-dialog::backdrop{background:#000c}.home-poster-dialog .programme-sheet{display:block;width:min(590px,75vw,65vh);background:white}.home-poster-dialog img{display:block;width:100%;height:auto}.home-poster-dialog .programme-original-row{width:84%;margin:0 auto}.home-poster-dialog button{position:absolute;right:8px;top:0;background:none;border:0;color:white;font-size:26px} @media(max-width:760px){body #frank .homepage-source-references .reference-content{grid-template-columns:repeat(2,minmax(0,1fr))}body #frank .homepage-source-references ul{grid-column:1/-1;grid-row:1}body #frank .homepage-source-references .conference-poster-link,body #frank .homepage-source-references .article-reference-preview{width:120px;justify-self:center}body #frank .homepage-source-references .wbur-reference-preview{grid-column:1/-1;grid-row:3;max-width:258px}} @media(min-width:761px){body #the-work #glass-title-14 + .work-plate{height:390px!important}body #the-work #glass-title-14 + .work-plate>img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}} body #frank .homepage-source-references li>a::after{content:none!important} @media(max-width:760px){ html{scrollbar-width:none}html::-webkit-scrollbar{display:none} body.option-a .studio-opening:not(.collaboration-masthead){height:100svh!important;min-height:640px!important;padding:64px 0 0!important;background:#061028!important;display:flex!important;flex-direction:column!important;overflow:hidden;position:relative!important} body.option-a .studio-opening::before,body.option-a .studio-opening::after{display:none!important} body.option-a .studio-opening .site-nav{height:64px;position:absolute!important;padding:10px 22px!important;background:transparent!important;box-shadow:none!important} body.option-a .studio-opening .site-nav .brand{font:600 18px/1.2 Archivo,Arial,sans-serif!important} body.option-a .studio-opening .site-nav .mobile-nav-toggle{border:1px solid #6e819a!important;border-radius:5px!important;color:white!important;min-width:58px;min-height:38px} body.option-a .studio-opening .site-nav>div{background:rgba(6,16,40,.97);left:0;right:0;padding:14px 24px;z-index:50} .new-hero{min-height:0;flex:1;display:flex;flex-direction:column;gap:0} .new-copy{padding:18px 24px 16px;flex:none} .new-copy p{font:400 13px/1.5 Archivo,Arial,sans-serif;color:#dbe6f0;margin:0 0 10px} body.option-a .new-copy h1{font:700 clamp(24px,6.8vw,30px)/1.15 'DM Serif Display',Georgia,serif;letter-spacing:-.02em;color:white;margin:0} .new-copy h1 i{font-style:italic;color:#eac184} .new-credential{flex:none;color:white;text-decoration:none;padding:0 24px 16px;font:400 14px/1.4 Archivo,Arial,sans-serif;display:flex;gap:6px;align-items:baseline} .new-credential strong{font-size:16px;text-decoration:underline;text-underline-offset:4px} .new-credential:hover,.new-credential:focus-visible{color:#eac184} .new-art{min-height:0;flex:1;overflow:hidden;background:#061028} .new-art img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block;max-height:none} .new-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;flex:none;padding:18px 24px 22px;background:#061028} .new-actions a{display:flex;justify-content:center;align-items:center;min-height:44px;padding:7px 5px;border:1px solid #60758f;border-radius:5px;color:#fff;font:400 13px/1.35 Archivo,Arial,sans-serif;text-decoration:none;white-space:nowrap} .new-actions a:hover,.new-actions a:focus-visible{color:#eac184;border-color:#eac184} .new-e .new-copy{padding-top:25px;padding-bottom:4px} .new-e .new-actions{padding-top:15px;padding-bottom:18px} .new-pair{display:flex;min-height:0;flex:1;padding:0 0 20px} .new-pair .new-art{width:68%;flex:none;border-radius:0 12px 12px 0} .new-pair .new-art img{object-position:center bottom} .new-pair .new-credential{width:32%;padding:24px 12px;display:flex;flex-direction:column;justify-content:center;align-items:start;gap:9px;font-size:15px;line-height:1.4;background:#10213b} .new-pair .new-credential strong{font-size:23px;line-height:1.2} .new-f .new-art{order:0;margin:10px 22px 0;border-radius:7px} .new-f .new-copy{padding:18px 24px 12px} .new-f .new-copy p{margin-bottom:8px} .new-foot{padding:0 24px 18px} .new-foot .new-credential{padding:0 0 14px;font-size:14px} .new-foot .new-actions{padding:0;background:none} @media(max-height:710px){.new-copy{padding-top:10px;padding-bottom:10px}.new-copy p{margin-bottom:6px}.new-actions{padding-top:12px;padding-bottom:15px}.new-credential{padding-bottom:11px}.new-f .new-copy{padding-top:10px}.new-e .new-copy{padding-top:10px}.new-pair .new-credential strong{font-size:21px}} } /* Continuous photographic hero, with all content composed in the quiet upper field. */ @media(max-width:760px){ body.option-a .studio-opening:not(.collaboration-masthead){isolation:isolate;background:#061028 url('/images/staged/studio-portrait-v55.jpg') center bottom/cover no-repeat!important} .new-hero{position:relative;display:block!important;flex:1;min-height:0} .new-art{display:none!important} .new-pair,.new-foot{display:contents!important} .new-copy{position:absolute;top:23px;left:24px;right:24px;padding:0!important} .new-copy p{margin:0 0 10px;font-size:13px} .new-copy h1{font-size:27px!important;line-height:1.13!important} .new-credential{position:absolute;top:170px;left:24px;right:24px;margin:0!important;padding:0!important;display:flex!important;flex-direction:row!important;justify-content:flex-start!important;align-items:baseline!important;gap:6px!important;background:none!important;width:auto!important;font-size:14px!important;border:0!important} .new-credential strong{font-size:17px!important;line-height:1.3!important} .new-actions{position:absolute;top:213px;left:24px;right:24px;padding:0!important;background:transparent!important;display:grid!important;grid-template-columns:1fr 1.2fr;gap:10px} .new-actions a{background:rgba(6,16,40,.15);border-color:#8190a6;color:#fff!important;min-height:44px;border-radius:5px;font-size:13px!important} .new-actions a:hover,.new-actions a:focus-visible{color:#eac184!important} .new-e .new-credential{top:24px;display:block!important}.new-e .new-credential span{display:block}.new-e .new-credential strong{font-size:22px!important}.new-e .new-copy{top:103px}.new-e .new-actions{top:245px} .new-f .new-copy{top:25px;text-align:center}.new-f .new-copy h1{font-size:28px!important}.new-f .new-credential{top:174px;justify-content:center!important}.new-f .new-actions{top:220px} .new-g .new-copy{top:22px;left:24px;right:24px}.new-g .new-copy h1{font-size:26px!important}.new-g .new-credential{top:180px;left:24px;right:58%;display:block!important}.new-g .new-credential span{display:block;font-size:13px}.new-g .new-credential strong{display:block;font-size:21px!important}.new-g .new-actions{top:175px;left:49%;right:24px;grid-template-columns:1fr;gap:8px}.new-g .new-actions a{min-height:40px;font-size:12px!important} .new-h .new-copy{top:30px;left:24px;right:24px;text-align:left}.new-h .new-copy p{margin-bottom:16px}.new-h .new-copy h1{font-size:29px!important}.new-h .new-credential{top:188px;left:24px;right:24px;justify-content:space-between!important;border-top:1px solid #697a91!important;padding-top:13px!important}.new-h .new-actions{top:252px}.new-h .new-actions a{border:0;border-bottom:1px solid #8190a6;border-radius:0;background:none;justify-content:flex-start} @media(max-height:710px){.new-copy{top:10px}.new-copy h1{font-size:25px!important}.new-credential{top:150px}.new-actions{top:192px}.new-e .new-credential{top:10px}.new-e .new-copy{top:81px}.new-e .new-actions{top:213px}.new-f .new-copy{top:10px}.new-f .new-credential{top:150px}.new-f .new-actions{top:195px}.new-g .new-copy{top:10px}.new-g .new-credential{top:153px}.new-g .new-actions{top:148px}.new-h .new-copy{top:10px}.new-h .new-credential{top:162px}.new-h .new-actions{top:217px}} } @media(max-width:760px){body.option-a .new-copy h1 i{font-family:inherit!important;font-weight:inherit!important;font-style:italic!important;color:#eac184!important}} @media(max-width:760px) and (max-height:710px){body.option-a .studio-opening:not(.collaboration-masthead){background-size:auto calc(100% + 100px)!important;background-position:center top!important}} @media(max-width:760px){.new-e .new-copy{top:24px}.new-e .new-actions{top:170px}.new-e .new-credential{top:239px;display:flex!important;flex-direction:row!important;align-items:baseline!important;gap:6px!important}.new-e .new-credential span{display:inline}.new-e .new-credential strong{font-size:17px!important}} @media(max-width:760px) and (max-height:710px){.new-e .new-copy{top:10px}.new-e .new-actions{top:148px}.new-e .new-credential{top:214px}} /* English copy stays left aligned; option3 uses a broad primary invitation. */ @media(max-width:760px){.new-copy,.new-f .new-copy{text-align:left!important}.new-f .new-copy{top:24px}.new-f .new-actions{top:170px;display:block!important}.new-f .new-actions a:first-child{width:100%;font-weight:600}.new-f .new-actions a+ a{width:51%;margin-left:auto;margin-top:12px}.new-f .new-credential{top:239px;right:54%;display:block!important;text-align:left;justify-content:flex-start!important}.new-f .new-credential span{display:block;font-size:13px}.new-f .new-credential strong{display:block;font-size:17px!important}.new-f .new-copy h1{font-size:27px!important}} @media(max-width:760px) and (max-height:710px){.new-f .new-copy{top:10px}.new-f .new-actions{top:148px}.new-f .new-credential{top:210px}.new-f .new-copy h1{font-size:25px!important}} /* Final local homepage: mobile-only hero; desktop hero stays authored. */ #mobile-hero{display:none}.site-nav .brand{text-decoration:none}.watch-by-chapter{display:inline-flex;min-height:44px;align-items:center;margin-top:12px;padding:10px 24px;border:1px solid #eac184;border-radius:24px;background:transparent;color:#eac184;text-decoration:none;font:500 16px/1.4 'Segoe UI',Arial,sans-serif}.watch-by-chapter:hover{background:#eac18424}.watch-by-chapter:focus-visible{outline:2px solid #fff;outline-offset:4px} @media(max-width:760px){ #desktop-hero{display:none!important}#mobile-hero{display:block!important} body.option-a .studio-opening .site-nav{position:fixed!important;z-index:100;background:transparent!important} body.option-a .studio-opening .site-nav .brand{color:#fff!important;text-shadow:0 1px 4px #000} body.option-a .studio-opening .site-nav .mobile-nav-toggle,.new-actions a{border:1px solid #eac184!important;border-radius:24px!important;background:transparent!important;color:#eac184!important;font:500 14px/1.4 'Segoe UI',Arial,sans-serif!important;min-height:44px} body.option-a .studio-opening .site-nav .mobile-nav-toggle:hover,.new-actions a:hover{background:#eac18424!important} body.option-a .studio-opening .site-nav>div{background:rgba(6,16,40,.25)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} body.option-a .studio-opening:has(.mobile-nav-toggle[aria-expanded="true"]) .new-copy,body.option-a .studio-opening:has(.mobile-nav-toggle[aria-expanded="true"]) .new-credential,body.option-a .studio-opening:has(.mobile-nav-toggle[aria-expanded="true"]) .new-actions{visibility:hidden} .new-credential strong{text-decoration:none!important}.new-credential:focus-visible{outline:2px solid #eac184;outline-offset:5px} body .home-return,body .section-home{display:none!important} body #frank .homepage-source-references .reference-content{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:22px 16px;align-items:center} body #frank .homepage-source-references ul{display:contents} body #frank .homepage-source-references li{padding:0;border:0!important;min-width:0;font-size:14px;line-height:1.5} body #frank .homepage-source-references li>span{font-size:13px;line-height:1.5} body #frank .homepage-source-references li:nth-child(1){grid-column:1/-1;grid-row:1} body #frank .homepage-source-references li:nth-child(2){grid-column:1;grid-row:2} body #frank .homepage-source-references li:nth-child(3){grid-column:1;grid-row:3} body #frank .homepage-source-references li:nth-child(4){grid-column:1/-1;grid-row:4} body #frank .homepage-source-references .conference-poster-link{grid-column:2;grid-row:2} body #frank .homepage-source-references .article-reference-preview{grid-column:2;grid-row:3} body #frank .homepage-source-references .wbur-reference-preview{grid-column:1/-1;grid-row:5;margin-top:-12px} body .watch-by-chapter{font-size:15px} } @media(max-width:760px){body #frank .references-disclosure{border:0;background:transparent;padding:0;margin:22px 0}body #frank .references-disclosure>summary{display:none}body #frank .references-disclosure .frank-references{display:block!important}html{scroll-padding-top:78px}} @media(max-width:760px){body .home-return:not([hidden]){display:inline-flex!important;position:fixed!important;top:10px;left:18px;z-index:150;align-items:center;gap:8px;min-height:44px;padding:7px 12px;background:rgba(6,16,40,.94);border:1px solid #64758b;border-radius:24px;color:#fff;text-decoration:none}body .home-return[hidden]{display:none!important}body .home-return img{width:26px;height:26px}} @media(max-width:760px){body #frank .references-disclosure .frank-references>h3{display:block!important;margin:0 0 22px;font-size:22px;color:#eac184}} /* Requested transparency: no painted panel or blur over the artwork. */ @media(max-width:760px){body.option-a .studio-opening .site-nav,body.option-a .studio-opening .site-nav>div{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}body.option-a .studio-opening .site-nav>div a{text-shadow:0 1px 3px #061028}} /* Match the original photograph's edge light, preserving the artwork pixels. */ @media(min-width:761px){body #the-work #glass-title-14 + .work-plate{background:linear-gradient(to right,rgb(4,2,3) 0%,rgb(6,4,5) 10%,rgb(11,9,10) 20%,rgb(17,15,16) 30%,rgb(21,19,20) 40%,rgb(20,18,19) 50%,rgb(17,15,16) 60%,rgb(12,10,13) 70%,rgb(9,7,10) 80%,rgb(6,4,7) 90%,rgb(2,2,2) 100%) center top / 100% 50% no-repeat,linear-gradient(to right,rgb(26,24,25) 0%,rgb(39,33,33) 10%,rgb(55,44,38) 20%,rgb(10,4,4) 30%,rgb(24,10,9) 40%,rgb(18,6,6) 50%,rgb(3,1,2) 60%,rgb(42,33,34) 70%,rgb(28,22,22) 80%,rgb(18,16,17) 90%,rgb(15,13,16) 100%) center bottom / 100% 50% no-repeat!important}} @media(max-width:760px){#mobile-hero .new-credential{top:145px;align-items:center!important;gap:12px!important}#mobile-hero .mobile-year-number{font:700 42px/1 Archivo,Arial,sans-serif;color:#fff;letter-spacing:-.035em}#mobile-hero .mobile-year-description{font:400 14px/1.35 Archivo,Arial,sans-serif;display:block}#mobile-hero .mobile-year-description strong{display:block;font:600 17px/1.35 Archivo,Arial,sans-serif;margin-top:2px}} @media(max-width:760px) and (max-height:710px){#mobile-hero .new-credential{top:128px}} /* Scrolling: authored header leaves with hero; icon-only Home occupies a separate utility strip. */ @media(max-width:760px){ body.option-a .studio-opening .site-nav{position:absolute!important} body .home-return:not([hidden]){position:fixed!important;inset:auto 12px 6px auto!important;width:44px!important;height:44px!important;min-height:44px!important;padding:8px!important;justify-content:center!important;border:0!important;border-radius:0!important;background:#061028!important;box-shadow:none!important;z-index:150!important} body .home-return:not([hidden])::before{content:'';position:fixed;left:0;right:0;bottom:0;height:56px;background:#061028;border-top:1px solid #34455e;z-index:-1;pointer-events:none} body .home-return span{display:none!important}body .home-return img{width:28px!important;height:28px!important;display:block} body .home-return:focus-visible{outline:2px solid #eac184;outline-offset:0} body .site-ending-footer{padding-bottom:72px!important} body #frank .references-disclosure>summary{display:flex!important;min-height:44px;align-items:center;padding:10px 0;color:#eac184;font-size:21px;font-weight:600;cursor:pointer} body #frank .references-disclosure .frank-references>h3{display:none!important} } /* Blend only the empty floor edge into its sampled continuation, not the artwork. */ @media(min-width:761px){body #the-work #glass-title-14 + .work-plate>img{mask-image:linear-gradient(to bottom,#000 0,#000 var(--floor-fade-start,340px),transparent var(--floor-fade-end,367px));-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 var(--floor-fade-start,340px),transparent var(--floor-fade-end,367px))}} @media(min-width:761px){body .home-return:not([hidden]){position:fixed!important;inset:auto auto 16px 10px!important;width:44px!important;height:44px!important;min-height:44px!important;padding:8px!important;display:flex!important;align-items:center;justify-content:center;border:0!important;border-radius:50%!important;background:#061028!important;box-shadow:none!important;z-index:150}body .home-return span{display:none!important}body .home-return img{width:28px!important;height:28px!important}body .home-return:focus-visible{outline:2px solid #eac184;outline-offset:2px}} .hat-native-video{aspect-ratio:984/794!important;background:#000}.hat-native-video>video{display:block;width:100%;height:100%;object-fit:contain} @media(max-width:760px){ body .home-return:not([hidden]){inset:10px 12px auto auto!important;width:44px!important;height:44px!important;border:1px solid #52657e!important;border-radius:50%!important;background:#061028!important} body .home-return:not([hidden])::before{inset:0 0 auto 0!important;height:64px!important;background:#061028!important;border:0!important;z-index:-1} body .site-ending-footer{padding-bottom:18px!important} body #frank .references-disclosure>summary{border:1px solid #eac184;border-radius:8px;padding:10px 14px;min-height:48px;font-size:19px;line-height:1.4;justify-content:space-between;gap:14px} body #frank .references-disclosure>summary::after{content:'+';display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border:1px solid #eac184;border-radius:50%;font:400 22px/1 Arial,sans-serif} body #frank .references-disclosure[open]>summary::after{content:'−'} body #frank .references-disclosure[open]>.frank-references{margin-top:18px} body #frank .references-disclosure>summary:focus-visible{outline:2px solid #fff;outline-offset:4px} } @media(max-width:760px){body #frank .homepage-source-references li:nth-child(4){grid-column:1;grid-row:4}body #frank .homepage-source-references .wbur-reference-preview{grid-column:2;grid-row:4;width:120px;max-width:120px;margin:0;justify-self:center}body #frank .homepage-source-references .wbur-reference-image{display:block;width:120px;aspect-ratio:930/316;overflow:hidden;background:#fff}body #frank .homepage-source-references .wbur-reference-image img{width:135.914%;max-width:none;height:auto}body #frank .homepage-source-references .wbur-source-link{font-size:11px;text-align:center}body #frank .homepage-source-references .wbur-listening-note{font-size:11px;white-space:normal;text-align:center}} body #frank .homepage-source-references .wbur-reference-image{display:block;width:120px!important;height:160px!important;aspect-ratio:auto!important;margin-inline:auto;overflow:hidden;text-decoration:none} .wbur-preview-card{display:flex;flex-direction:column;width:120px;height:160px;box-sizing:border-box;padding:9px 8px;background:#fff;color:#2d2b29} .wbur-preview-brand{display:block;padding-bottom:5px;border-bottom:2px solid #ffdf00;font:700 23px/1 Georgia,serif;letter-spacing:-1px} .wbur-preview-content{display:flex;gap:6px;align-items:flex-start;margin-top:12px} .wbur-preview-play{display:inline-flex;flex:none;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#ffdf00;color:#2d2b29;font:13px/1 Arial,sans-serif;padding-left:2px} .wbur-preview-content strong{font:700 12px/1.2 Georgia,serif;color:#2d2b29} .wbur-preview-date{display:block;margin-top:auto;padding-top:6px;font:10px/1.3 Arial,sans-serif;color:#514f4c} @media(max-width:760px){body #frank .references-disclosure{border:1px solid #eac184!important;border-radius:8px;padding:0!important;background:transparent;overflow:hidden}body #frank .references-disclosure>summary{border:0!important;border-radius:0;padding:10px 14px}body #frank .references-disclosure[open]>summary{border-bottom:1px solid #526078!important}body #frank .references-disclosure .frank-references{margin:0!important;padding:16px 14px!important;border:0!important;border-radius:0;background:transparent!important}} .wbur-reference-caption{width:120px;margin-inline:auto} @media(max-width:760px){body #frank .homepage-source-references .wbur-reference-preview{display:contents!important}body #frank .homepage-source-references .wbur-reference-image{grid-column:2;grid-row:4;justify-self:center;margin:0}body #frank .homepage-source-references .wbur-reference-caption{grid-column:2;grid-row:5;justify-self:center;margin-top:-15px}body #frank .homepage-source-references li:nth-child(4){align-self:center}} .keep-words{white-space:nowrap}.wbur-reference>a,.wbur-preview-content strong{text-wrap:balance} body #archive-piece-7 .work-plate{overflow:hidden}body #archive-piece-7 .work-plate>img{transform:scale(1.25);transform-origin:50% 32%} .full-video-reference{width:120px;justify-self:center}.full-video-reference-image{display:flex;position:relative;width:120px;height:160px;align-items:center;justify-content:center;background:#172842;overflow:hidden}.full-video-reference-image img{display:block;width:120px;height:auto}.full-video-reference-image>span{position:absolute;left:44px;top:64px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#061028c9;color:#fff}.full-video-caption{display:block;text-align:center;font-size:11px;margin-top:8px}#full-presentation{scroll-margin-top:76px} @media(min-width:761px){body #frank .homepage-source-references .full-video-reference{grid-column:2;grid-row:1}body #frank .homepage-source-references .conference-poster-link{grid-column:3;grid-row:1}body #frank .homepage-source-references .article-reference-preview{grid-column:2;grid-row:2}body #frank .homepage-source-references .wbur-reference-preview{grid-column:3;grid-row:2}} @media(max-width:760px){body #frank .homepage-source-references li:nth-child(1){grid-column:1;grid-row:1}body #frank .homepage-source-references .full-video-reference{grid-column:2;grid-row:1}} @media(max-width:760px){body .home-return:not([hidden]){inset:12px auto auto 12px!important}body .home-return:not([hidden])::before{display:none!important;content:none!important}} body #frank .homepage-source-references .full-video-reference-image{background:transparent!important} /* Desktop references pair every source with its own preview. */ @media(min-width:761px){ body #frank .homepage-source-references .reference-content{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:18px 30px;align-items:center} body #frank .homepage-source-references ul{display:contents} body #frank .homepage-source-references li{grid-column:1!important;grid-row:auto!important;align-self:center;padding:0!important;border:0!important;margin:0} body #frank .homepage-source-references li:nth-child(1){grid-row:1!important} body #frank .homepage-source-references li:nth-child(2){grid-row:2!important} body #frank .homepage-source-references li:nth-child(3){grid-row:3!important} body #frank .homepage-source-references li:nth-child(4){grid-row:4!important} body #frank .homepage-source-references .full-video-reference{grid-column:2;grid-row:1} body #frank .homepage-source-references .conference-poster-link{grid-column:2;grid-row:2} body #frank .homepage-source-references .article-reference-preview{grid-column:2;grid-row:3} body #frank .homepage-source-references .wbur-reference-preview{grid-column:2;grid-row:4;width:120px;justify-self:center} body #frank .homepage-source-references .wbur-listening-note{white-space:normal;font-size:11px;line-height:1.4;text-align:center} } @media(min-width:761px){ body #frank .homepage-source-references{width:min(100%,760px);max-width:760px;margin-inline:auto;box-sizing:border-box} body #frank .homepage-source-references .reference-content{gap:16px 28px} body #frank .homepage-source-references .wbur-reference-preview{display:contents} body #frank .homepage-source-references .wbur-reference-image{grid-column:2;grid-row:4} body #frank .homepage-source-references .wbur-reference-caption{grid-column:2;grid-row:5;margin-top:-9px} } @media(min-width:761px){ body #frank .frank-heading-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:start} body #frank .frank-heading-row>.band-head{margin:0;min-width:0} body #frank .homepage-source-references{width:100%;max-width:none;margin:0;padding:16px 18px;min-width:0} body #frank .homepage-source-references h3{font-size:18px;margin:0 0 12px} body #frank .homepage-source-references .reference-content{grid-template-columns:minmax(0,1fr) 75px;gap:10px 18px} body #frank .homepage-source-references li{font-size:13px;line-height:1.4} body #frank .homepage-source-references li>span{font-size:11px;line-height:1.4;margin-top:3px} body #frank .homepage-source-references .full-video-reference,body #frank .homepage-source-references .conference-poster-link,body #frank .homepage-source-references .article-reference-preview{width:75px} body #frank .homepage-source-references .full-video-reference-image,body #frank .homepage-source-references .poster-enlarge,body #frank .homepage-source-references .article-cover-link,body #frank .homepage-source-references .wbur-reference-image{width:75px!important;height:100px!important} body #frank .homepage-source-references .full-video-reference-image img{width:75px;height:auto} body #frank .homepage-source-references .full-video-reference-image>span{width:24px;height:24px;left:25px;top:38px;font-size:11px} body #frank .homepage-source-references .programme-sheet{width:68px} body #frank .homepage-source-references .wbur-preview-card{transform:scale(.625);transform-origin:top left} body #frank .homepage-source-references .wbur-reference-caption{width:75px;margin-top:-3px} body #frank .homepage-source-references .programme-pdf-link,body #frank .homepage-source-references .article-original-link,body #frank .homepage-source-references .wbur-source-link,body #frank .homepage-source-references .full-video-caption{font-size:10px;line-height:1.3;white-space:normal;margin-top:5px} body #frank .homepage-source-references .wbur-listening-note{font-size:10px;line-height:1.3;margin-top:4px} } @media(min-width:761px){body #frank .homepage-source-references{grid-column:2;grid-row:1}body #frank .frank-heading-row>.band-head{grid-column:1;grid-row:1}} @media(min-width:761px){ body #frank .homepage-source-references .reference-content{grid-template-columns:minmax(0,1fr) 64px;gap:8px 16px} body #frank .homepage-source-references .full-video-reference,body #frank .homepage-source-references .conference-poster-link,body #frank .homepage-source-references .article-reference-preview,body #frank .homepage-source-references .wbur-reference-caption{width:64px} body #frank .homepage-source-references .full-video-reference-image,body #frank .homepage-source-references .poster-enlarge,body #frank .homepage-source-references .article-cover-link,body #frank .homepage-source-references .wbur-reference-image{width:64px!important;height:85px!important} body #frank .homepage-source-references .full-video-reference-image img{width:64px} body #frank .homepage-source-references .full-video-reference-image>span{left:20px;top:31px} body #frank .homepage-source-references .programme-sheet{width:58px} body #frank .homepage-source-references .wbur-preview-card{transform:scale(.533333)} } @media(min-width:761px){body #frank .homepage-source-references a{color:#eac184!important}body .home-return:not([hidden]){inset:12px auto auto 12px!important}body .home-return:not([hidden])::before{display:none!important;content:none!important}} /* Compact paired mini-cards: each source sits beside its own thumbnail. */ @media(min-width:761px){ body #frank .homepage-source-references .reference-content{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr) 64px;gap:14px 12px;align-items:start} body #frank .homepage-source-references li{font-size:12px;line-height:1.4;align-self:start;padding-top:7px!important} body #frank .homepage-source-references li>span{font-size:10px;line-height:1.4} body #frank .homepage-source-references li:nth-child(1){grid-column:1!important;grid-row:1!important} body #frank .homepage-source-references li:nth-child(2){grid-column:3!important;grid-row:1!important} body #frank .homepage-source-references li:nth-child(3){grid-column:1!important;grid-row:2!important} body #frank .homepage-source-references li:nth-child(4){grid-column:3!important;grid-row:2!important} body #frank .homepage-source-references .full-video-reference{grid-column:2;grid-row:1} body #frank .homepage-source-references .conference-poster-link{grid-column:4;grid-row:1} body #frank .homepage-source-references .article-reference-preview{grid-column:2;grid-row:2} body #frank .homepage-source-references .wbur-reference-preview{display:block;grid-column:4;grid-row:2;width:64px} body #frank .homepage-source-references .wbur-reference-caption{margin-top:0} } /* Remove duplicated preview labels; source links retain the same destinations. */ .full-video-caption,.programme-pdf-link,.article-original-link,.wbur-source-link{display:none!important} @media(min-width:761px){ body #frank .homepage-source-references .reference-content{grid-template-columns:56px minmax(0,1fr) 56px;grid-template-rows:repeat(4,75px);gap:5px 18px;align-items:center} body #frank .homepage-source-references li{grid-column:2!important;position:relative;padding:0!important;align-self:center;font-size:12px} body #frank .homepage-source-references li:nth-child(1){grid-row:1!important}body #frank .homepage-source-references li:nth-child(2){grid-row:2!important}body #frank .homepage-source-references li:nth-child(3){grid-row:3!important}body #frank .homepage-source-references li:nth-child(4){grid-row:4!important} body #frank .homepage-source-references li:after{content:'';position:absolute;width:14px;height:1px;background:#b29770;top:50%} body #frank .homepage-source-references li:nth-child(odd):after{right:-16px}body #frank .homepage-source-references li:nth-child(even):after{left:-16px} body #frank .homepage-source-references li:nth-child(odd){text-align:right}body #frank .homepage-source-references li:nth-child(even){text-align:left} body #frank .homepage-source-references .full-video-reference{grid-column:3;grid-row:1;width:56px} body #frank .homepage-source-references .conference-poster-link{grid-column:1;grid-row:2;width:56px} body #frank .homepage-source-references .article-reference-preview{grid-column:3;grid-row:3;width:56px} body #frank .homepage-source-references .wbur-reference-preview{grid-column:1;grid-row:4;width:56px;display:block;position:relative} body #frank .homepage-source-references .full-video-reference-image,body #frank .homepage-source-references .poster-enlarge,body #frank .homepage-source-references .article-cover-link,body #frank .homepage-source-references .wbur-reference-image{width:56px!important;height:75px!important} body #frank .homepage-source-references .full-video-reference-image img{width:56px}body #frank .homepage-source-references .full-video-reference-image>span{left:16px;top:25px} body #frank .homepage-source-references .programme-sheet{width:51px}body #frank .homepage-source-references .wbur-preview-card{transform:scale(.466667)} body #frank .homepage-source-references .wbur-reference-caption{position:absolute;top:77px;left:0;width:145px;margin:0} body #frank .homepage-source-references .wbur-listening-note{text-align:left;margin:0;font-size:10px;white-space:nowrap} body #frank .homepage-source-references{padding-bottom:34px} } @media(min-width:761px){body #frank .homepage-source-references li:nth-child(n){grid-column:2!important}} @media(max-width:760px){body #frank .homepage-source-references .reference-content{row-gap:14px}body #frank .homepage-source-references .wbur-reference-caption{margin-top:-7px}} @media(min-width:761px){body #frank .homepage-source-references li{font-size:14px;line-height:1.4}body #frank .homepage-source-references li>span{font-size:12px;line-height:1.4}} @media(max-width:760px){body #frank .references-disclosure,body #frank .homepage-source-references{scroll-margin-top:72px}} /* Fixed text anchor; only thumbnails alternate their horizontal offset. */ @media(min-width:761px){ body #frank .homepage-source-references .reference-content{grid-template-columns:minmax(0,1fr) 90px;column-gap:18px} body #frank .homepage-source-references li:nth-child(n){grid-column:1!important;text-align:right!important} body #frank .homepage-source-references li:nth-child(n):after{left:auto;right:-16px} body #frank .homepage-source-references li:nth-child(even):after{width:48px;right:-50px} body #frank .homepage-source-references .full-video-reference{grid-column:2;grid-row:1;justify-self:start} body #frank .homepage-source-references .conference-poster-link{grid-column:2;grid-row:2;justify-self:end} body #frank .homepage-source-references .article-reference-preview{grid-column:2;grid-row:3;justify-self:start} body #frank .homepage-source-references .wbur-reference-preview{grid-column:2;grid-row:4;justify-self:end} body #frank .homepage-source-references .full-video-reference-image{background:#fff!important;padding:3px;box-sizing:border-box} body #frank .homepage-source-references .full-video-reference-image img{width:100%;height:auto} body #frank .homepage-source-references .full-video-reference-image>span{background:#10213b;border:1px solid #fff} body #frank .homepage-source-references .wbur-reference-caption{left:auto;right:0;width:145px} body #frank .homepage-source-references .wbur-listening-note{text-align:right} } .standalone-presentation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:start;margin:38px 0 46px;padding:28px 0;border-top:1px solid #34455e;border-bottom:1px solid #34455e}.standalone-presentation h3{font-size:26px;margin:10px 0}.standalone-presentation .video-embed{width:100%;aspect-ratio:16/9}.standalone-presentation figcaption{font-size:13px;line-height:1.5;margin-top:10px;color:#bdcbe0}.standalone-presentation .watch-by-chapter{display:inline-block;margin-top:10px} @media(max-width:760px){.standalone-presentation{grid-template-columns:1fr;gap:16px;margin:24px 0;padding:20px 0}.standalone-presentation h3{font-size:23px}.standalone-presentation .eyebrow{font-size:11px}} @media(min-width:761px){ body #frank .homepage-source-references .reference-content{grid-template-columns:minmax(0,1fr) 56px 100px;grid-template-rows:repeat(4,55px);gap:0 18px} body #frank .homepage-source-references li:nth-child(n){align-self:start;padding-top:20px!important} body #frank .homepage-source-references li:nth-child(odd){grid-column:1!important} body #frank .homepage-source-references li:nth-child(even){grid-column:1/3!important} body #frank .homepage-source-references li:nth-child(n):after{width:14px;right:-16px;top:40px} body #frank .homepage-source-references .full-video-reference,body #frank .homepage-source-references .article-reference-preview{grid-column:2;align-self:start;justify-self:start} body #frank .homepage-source-references .conference-poster-link,body #frank .homepage-source-references .wbur-reference-preview{grid-column:3;align-self:start;justify-self:end} body #frank .homepage-source-references li:nth-child(even){margin-right:44px} body #frank .homepage-source-references li:nth-child(even):after{width:58px;right:-60px} body #frank .homepage-source-references{padding-bottom:54px} } @media(min-width:761px){body #frank .homepage-source-references li:nth-child(even){margin-right:0;padding-top:17px!important}} @media(min-width:761px){body #frank .homepage-source-references li:nth-child(4),body #frank .homepage-source-references .wbur-reference-preview{transform:translateY(8px)}body #frank .homepage-source-references{padding-bottom:62px}} .presentation-timeline-station .watch-by-chapter{display:inline-block;margin-top:10px}.presentation-timeline-station .t-media{min-width:0}.presentation-timeline-station .video-embed{width:100%;aspect-ratio:16/9} .collaboration-full-story h3{margin:0 0 8px;font-size:21px}.collaboration-full-story .recording-context{font-size:13px;line-height:1.5;color:#bdcbe0;margin:0 0 14px}.collaboration-full-story .watch-by-chapter{display:inline-block;margin-top:10px} /* Reference groups follow the supplied composition: text and image move together. */ @media(min-width:761px){ body #frank .homepage-source-references .reference-content{grid-template-columns:minmax(0,1fr) 75px 107px;grid-template-rows:repeat(4,88px);column-gap:12px;row-gap:0} body #frank .homepage-source-references li:nth-child(n){grid-column:1/-1!important;width:calc(100% - 87px);justify-self:start;align-self:start;padding-top:27px!important;margin:0;transform:none;text-align:right!important;font-size:16px;line-height:1.3} body #frank .homepage-source-references li:nth-child(odd){width:calc(100% - 206px);justify-self:start} body #frank .homepage-source-references li>span{font-size:13px;line-height:1.4} body #frank .homepage-source-references li:nth-child(n):after{left:auto;right:-11px;top:49px;width:10px} body #frank .homepage-source-references .full-video-reference,body #frank .homepage-source-references .conference-poster-link,body #frank .homepage-source-references .article-reference-preview,body #frank .homepage-source-references .wbur-reference-preview{width:75px;transform:none} body #frank .homepage-source-references .full-video-reference-image,body #frank .homepage-source-references .poster-enlarge,body #frank .homepage-source-references .article-cover-link,body #frank .homepage-source-references .wbur-reference-image{width:75px!important;height:100px!important} body #frank .homepage-source-references .full-video-reference-image img{width:69px} body #frank .homepage-source-references .full-video-reference-image>span{left:25px;top:38px} body #frank .homepage-source-references .programme-sheet{width:68px} body #frank .homepage-source-references .wbur-preview-card{transform:scale(.625)} body #frank .homepage-source-references .wbur-reference-caption{top:104px;right:0;left:auto;width:190px} body #frank .homepage-source-references .wbur-listening-note{font-size:12px} body #frank .homepage-source-references{padding-bottom:54px} } /* Final text-only adjustment: shared left edge; existing thumbnail coordinates stay fixed. */ @media(min-width:761px){ body #frank .homepage-source-references li:nth-child(n){width:calc(100% - 231px);text-align:left!important} body #frank .homepage-source-references li:nth-child(odd):after{width:21px;right:-29px} body #frank .homepage-source-references li:nth-child(even):after{width:140px;right:-148px} } /* Leaders start after the rendered title, not after its wider list item. */ @media(min-width:761px){ body #frank .homepage-source-references li:nth-child(n):after{display:none} body #frank .homepage-source-references li>a{display:flex;align-items:center;gap:8px;width:calc(100% + 29px);text-decoration:none} body #frank .homepage-source-references li:nth-child(even)>a{width:calc(100% + 148px)} body #frank .homepage-source-references li>a .reference-title-text{flex:0 1 auto;text-decoration:underline;min-width:0} body #frank .homepage-source-references li>a:after{content:''!important;display:block;flex:1 0 12px;height:1px;background:#b29770} } /* User-approved arrangement without connector lines; keep all layout geometry. */ @media(min-width:761px){body #frank .homepage-source-references li>a:after{visibility:hidden}} @media(min-width:761px){body #frank .homepage-source-references .reference-content{grid-template-rows:repeat(4,72px)}} .native-full-presentation{width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}.native-full-presentation video{display:block;width:100%;height:100%;object-fit:contain} /* Listening guidance belongs to the interview's text, not its thumbnail. */ body #frank .homepage-source-references li.wbur-reference>.wbur-listening-note{display:block;margin-top:5px;font-size:12px;line-height:1.4;text-align:left;white-space:normal;color:#bdcbe0} /* Readable preview date; keep the approved reference-card composition. */ body .wbur-preview-date{font-size:12px!important}