.cc { position: fixed; inset: 0; z-index: var(--z-layer, 160); --edge: 22px; --peek: 5.5vw; --gap: 20px; --cc-x: calc(var(--edge) + var(--peek) + var(--gap)); --cc-y: 22px; --cc-r: 12px; --peek-w: calc(var(--cc-x) - var(--gap)); --pad: clamp(24px, 2.6vw, 44px); --peek-op: 0.45; --rail-tone: #e2e1dc; --peek-gray: #4d4d4d; color: var(--ink); } .cc[hidden] { display: none; } .cc img, .cc video { display: block; max-width: 100%; } .cc :is(.icon, .lucide) { flex: none; } .cc ::selection { background: var(--acid); color: var(--paper-ink); } .cc :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .cc .label { box-shadow: none; padding: 0; border-radius: 0; background: none; } .cc-back { position: absolute; inset: 0; background: rgba(8, 8, 8, 0.66); } .cc-stage { position: absolute; inset: var(--cc-y) var(--cc-x); } .cc-card { position: absolute; inset: 0; border-radius: var(--cc-r); color: var(--paper-ink); overflow: visible; will-change: transform; } .cc-paper { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .cc-paper-fill { fill: var(--paper); } .cc-rail-tone { fill: var(--rail-tone); } .cc-progress { fill: none; stroke: var(--paper-ink); stroke-width: 2; stroke-dasharray: 1 1; stroke-dashoffset: 1; } .cc-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; border-radius: inherit; } .cc-scroll::-webkit-scrollbar { display: none; } .cc-peek { position: absolute; z-index: 2; top: calc(var(--cc-y) + (100% - 2 * var(--cc-y)) * 0.088); bottom: calc(var(--cc-y) + (100% - 2 * var(--cc-y)) * 0.088); width: calc(var(--peek-w) + 24px); border-radius: 10px; background: var(--peek-gray); opacity: var(--peek-op); transition: opacity 0.3s, background-color 0.3s; } .cc-peek--prev { left: -24px; } .cc-peek--next { right: -24px; } @media (hover: hover) { .cc-peek:hover { opacity: 0.62; background: #575757; } } .cc .cc-close { position: absolute; z-index: 8; top: calc(var(--cc-y) + 14px); right: calc(var(--cc-x) + 14px); width: 52px; height: 52px; background: rgba(17, 17, 17, 0.55); color: var(--paper); --fill: var(--paper); --fill-ink: var(--paper-ink); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .cc .cc-arrow { position: absolute; z-index: 8; top: 50%; translate: 0 -50%; background: rgba(238, 237, 232, 0.14); color: var(--paper); --fill: var(--paper); --fill-ink: var(--paper-ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .cc .cc-arrow--prev { left: max(6px, calc(var(--peek-w) / 2 - 32px)); } .cc .cc-arrow--next { right: max(6px, calc(var(--peek-w) / 2 - 32px)); } .cc-phone-ways { display: none; } .cc-grid { display: grid; grid-template-columns: minmax(300px, 0.36fr) minmax(0, 0.64fr); min-height: 100%; } .cc-side { --rs: clamp(16px, 2.2vh, 24px); position: sticky; top: var(--side-top, 0px); align-self: start; display: flex; flex-direction: column; padding: var(--pad); padding-right: calc(var(--pad) * 0.8); container-type: inline-size; } .cc-head { display: grid; gap: 14px; } .cc-where { color: var(--paper-muted); } .cc-title { margin: 0; font-size: min(clamp(32px, 3.3vw, 56px), calc(100cqi / (var(--title-chars, 14) * 0.5))); font-weight: 500; line-height: 0.98; letter-spacing: -0.05em; } .cc-title > span { display: block; } .cc-title-second { color: var(--paper-muted); } .cc-title:focus { outline: none; } .cc-promise { margin: 0; max-width: 40ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.45; } .cc-factrow { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 7px 18px; margin: calc(var(--rs) - 14px) 0 0; padding-top: var(--rs); border-top: 1px solid var(--paper-line); } .cc-factrow div { display: contents; } .cc-factrow dt { color: var(--paper-muted); } .cc-factrow dd { margin: 0; font-size: 14px; line-height: 1.35; } .cc .cc-rail-h { margin: 0 0 12px; font-size: 16px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--paper-ink); } .cc-sumwrap { margin-top: var(--rs); padding: var(--rs) 0; border-top: 1px solid var(--paper-line); } .cc-index ol { list-style: none; display: grid; margin: 0; padding: 0; } .cc-index li { position: relative; } .cc-index li:not(:last-child)::after { content: ''; position: absolute; left: 4px; top: calc(50% + 6px); width: 1.5px; height: calc(100% - 12px); background: linear-gradient(to bottom, var(--paper-ink) calc(var(--fill, 0) * 100%), #c9c8c2 0); } .cc-index li.is-past::after { background: var(--paper-ink); } .cc a.cc-ix { display: inline-flex; align-items: center; gap: 14px; min-height: 24px; padding: 6px 0; color: var(--paper-muted); font-size: 15px; line-height: 1.3; text-decoration: none; transition: color 0.3s; } .cc-ix::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #8f8e89; transition: background-color 0.3s, box-shadow 0.3s; } .cc-index li.is-past .cc-ix::before, .cc-ix.is-on::before { background: var(--paper-ink); box-shadow: inset 0 0 0 1.5px var(--paper-ink); } .cc a.cc-ix:is(.is-on, :hover), .cc-index li.is-past a.cc-ix { color: var(--paper-ink); } .cc-askwrap { margin-top: auto; padding-top: var(--rs); border-top: 1px solid var(--paper-line); } .cc-ask-qs { display: flex; flex-wrap: wrap; gap: 6px; } .cc-ask-q { min-height: 40px; padding: 9px 15px 8px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; line-height: 1.25; text-align: left; color: var(--paper-ink); background: var(--paper); cursor: pointer; transition: background-color 0.3s, color 0.3s; } .cc-ask-q:focus-visible { background: var(--paper-ink); color: var(--paper); } @media (hover: hover) { .cc-ask-q:hover { background: var(--paper-ink); color: var(--paper); } } .cc-main { --gut: calc(var(--pad) * 0.72); display: grid; gap: clamp(56px, 9vh, 104px); align-content: start; padding: var(--gut) var(--gut) var(--pad); min-width: 0; } .cc-figure { display: grid; gap: 10px; margin: 0; } .cc-figcap { font-size: 13px; line-height: 1.4; color: var(--paper-muted); } .cc-frame { position: relative; aspect-ratio: 16 / 10; width: 100%; overflow: hidden; border-radius: 10px; clip-path: inset(0 round 10px); } .cc-frame > :is(video, img) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); } .cc .cc-film { position: absolute; z-index: 2; right: 14px; bottom: 14px; width: 48px; height: 48px; background: rgba(17, 17, 17, 0.55); color: var(--paper); --fill: var(--paper); --fill-ink: var(--paper-ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .cc-part { display: grid; gap: 18px; min-width: 0; } .cc .cc-part-label { margin: 0; color: var(--paper-muted); } .cc-h { margin: 0; font-size: clamp(26px, 2.4vw, 40px); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; } .cc-h > span { display: block; } .cc-h-second { color: var(--paper-muted); } .cc-h3 { margin: 0; font-size: clamp(18px, 1.4vw, 22px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; } .cc-then { margin-top: 8px; } .cc-p { margin: 0; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; } .cc-quiet { color: var(--paper-muted); font-size: 15px; } .cc-p .text-link { font: inherit; border: 0; padding: 0; background-color: transparent; cursor: pointer; } .cc-note { margin: 0; padding: 16px 18px; border-radius: 8px; background: var(--stone); font-size: 15px; line-height: 1.5; } .cc-ideas { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; } .cc-ideas li { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--paper-line); } .cc-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; } .cc-list li { padding: 10px 0; border-top: 1px solid var(--paper-line); } .cc-moments { display: grid; gap: 10px; padding: 16px 18px; border-radius: 8px; background: var(--stone); } .cc-moments ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; } .cc-moments li { display: inline-flex; align-items: center; gap: 10px; } .cc-moments .icon { width: 14px; height: 14px; } .cc-blocks { display: grid; margin: 0; } .cc-blocks > div { display: grid; grid-template-columns: 30% minmax(0, 1fr); gap: 18px; padding: 14px 0; border-top: 1px solid var(--paper-line); } .cc-blocks dt { font-weight: 500; } .cc-blocks dd { margin: 0; } .cc-metrics { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; } .cc-metrics dd { margin: 0; font-size: 28px; font-weight: 500; } .cc-kind { color: var(--paper-muted); } .cc-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0; font-size: 15px; } .cc-drawing { container-type: inline-size; } .cc-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .cc-side-by { display: grid; gap: 10px; align-content: start; padding: 16px 18px; border-radius: 8px; background: var(--stone); } .cc-side-by .eyebrow { color: var(--paper-muted); } .cc-end { height: 8vh; } .cc-pics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 22px; } .cc-pic { display: grid; gap: 12px; margin: 0; align-content: start; min-width: 0; grid-column: 1 / -1; } .cc-pic.is-tall { grid-column: auto; } .cc-pic--film { grid-column: 1 / -1; } .cc .cc-plinth { position: relative; display: block; width: 100%; aspect-ratio: var(--ar, 4 / 3); overflow: hidden; padding: 0; border: 0; border-radius: 10px; background: var(--stone); font: inherit; text-align: left; cursor: zoom-in; } .cc-plinth-win { position: absolute; inset: 0; display: block; } .cc-plinth-win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cc-pic.is-wide .cc-plinth { background: #fff; } .cc-pic.is-tall .cc-plinth { aspect-ratio: 3 / 4; } .cc-pic.is-tall .cc-plinth-win img { inset: 6%; width: 88%; height: 88%; object-fit: contain; } .cc-plinth.is-window .cc-plinth-win img { object-position: 50% var(--pos, 0%); } .cc-pic.is-tall .cc-plinth.is-window .cc-plinth-win img { inset: 0; width: 100%; height: 100%; object-fit: cover; } .cc-pic figcaption { max-width: 64ch; font-size: 15px; line-height: 1.5; color: var(--paper-muted); } .cc-pic.is-tall figcaption { font-size: 13px; line-height: 1.45; } .cc-pic figcaption b { font-weight: 500; color: var(--paper-ink); } .cc-enlarge-icon { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(17, 17, 17, 0.6); color: var(--paper); opacity: 0; transition: opacity 0.25s; } .cc-enlarge-icon .icon { width: 16px; height: 16px; } .cc-plinth:is(:hover, :focus-visible) .cc-enlarge-icon { opacity: 1; } @media (hover: none) { .cc-enlarge-icon { opacity: 1; } } .cc-map { position: relative; display: block; flex: none; width: 52px; aspect-ratio: var(--mar, 2 / 1); overflow: hidden; border-radius: 3px; background: #fff; } .cc-map img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; } .cc-map i { position: absolute; border-radius: 1.5px; box-shadow: 0 0 0 1.5px var(--paper-ink), 0 0 0 99px rgba(222, 220, 214, 0.66); transition: left 0.2s, top 0.2s, width 0.2s, height 0.2s; } .cc-crop-foot { display: none; } @media (max-width: 760px) { .cc-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; } .cc-pic figcaption { font-size: 14px; } .cc-pic.has-region .cc-plinth { aspect-ratio: auto; display: grid; background: var(--stone); } .cc-pic.has-region .cc-plinth-win { position: relative; aspect-ratio: var(--rar); overflow: hidden; background: #fff; } .cc-pic.has-region .cc-plinth-win img { inset: auto; left: calc(-100% * var(--rx) / var(--rw)); top: calc(-100% * var(--ry) / var(--rh)); width: calc(100% / var(--rw)); height: auto; max-width: none; object-fit: fill; } .cc-pic.has-region .cc-enlarge-icon { display: none; } .cc-crop-foot { position: relative; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px 0 12px; overflow: hidden; font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--paper-ink); } .cc-crop-foot > .icon { margin-left: auto; width: 18px; height: 18px; } } .cc-viewer { position: absolute; inset: 0; z-index: 7; display: grid; grid-template-rows: minmax(0, 1fr); padding: 64px 84px 28px; border-radius: var(--cc-r); background: var(--paper); color: var(--paper-ink); } .cc-viewer-fig { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; height: 100%; min-height: 0; margin: 0; } .cc-viewer-pic { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; border-radius: 10px; background: var(--stone); } .cc-viewer-pic > img { position: absolute; inset: 3%; width: 94%; height: 94%; object-fit: contain; } .cc-viewer-window { position: relative; height: 94%; max-width: 94%; aspect-ratio: var(--ar); overflow: hidden; border-radius: 6px; } .cc-viewer-window img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--pos, 0%); } .cc-pan-wrap { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-height: 0; } .cc-pan { position: relative; min-height: 0; overflow: hidden; border-radius: 10px; background: var(--stone); touch-action: none; cursor: grab; } .cc-pan > img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; will-change: transform; } .cc-pan.is-easing > img { transition: transform 0.55s var(--ease-ink, cubic-bezier(0.16, 1, 0.3, 1)); } .cc-pan-hint { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px 9px; border-radius: 999px; background: rgba(17, 17, 17, 0.74); color: var(--paper); font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; pointer-events: none; transition: opacity 0.5s; } .cc-pan-hint .icon { width: 15px; height: 15px; } .cc-pan-hint.is-gone { opacity: 0; } .cc-pan-tools { display: flex; align-items: center; gap: 12px; } .cc-pan-map { padding: 0; border: 0; background: none; cursor: pointer; } .cc-pan-map .cc-map { width: 96px; } .cc-pan-zoom { display: inline-flex; align-items: center; gap: 14px; height: 48px; margin-left: auto; padding: 0 16px; border: 0; background: var(--stone); color: var(--paper-ink); font: inherit; font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; } .cc-pan-zoom .icon { width: 18px; height: 18px; } html.reduced .cc-pan.is-easing > img, html.reduced .cc-pan-hint { transition: none; } .cc-viewer figcaption { display: flex; gap: 16px; font-size: 14px; line-height: 1.45; color: var(--paper-muted); } .cc-viewer figcaption b { font-weight: 500; color: var(--paper-ink); } .cc-viewer-count { flex: none; color: var(--paper-ink); font-weight: 500; } .cc .cc-viewer-close { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; } .cc .cc-viewer-prev, .cc .cc-viewer-next { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; } .cc .cc-viewer-prev { left: 18px; } .cc .cc-viewer-next { right: 18px; } .cc.cc-viewing :is(.cc-close, .cc-arrow, .cc-peek, .cc-phone-ways) { opacity: 0; pointer-events: none; visibility: hidden; } .cc-clone { position: fixed; z-index: 9; overflow: hidden; border-radius: 10px; pointer-events: none; background: #000; } .cc-clone video { width: 100%; height: 100%; object-fit: cover; } .cc-loading { display: grid; gap: 18px; padding: var(--pad); } @media (min-width: 761px) and (max-height: 960px) { .cc-side { --rs: 14px; padding-top: 30px; padding-bottom: 24px; } .cc-head { gap: 10px; } .cc-title { font-size: min(clamp(30px, 3vw, 48px), calc(100cqi / (var(--title-chars, 14) * 0.5))); } .cc a.cc-ix { padding: 3px 0; font-size: 14px; } .cc .cc-rail-h { margin-bottom: 8px; font-size: 15px; } .cc-ask-q { min-height: 36px; padding: 8px 14px 7px; font-size: 13.5px; } } @media (min-width: 761px) and (max-height: 820px) { .cc-head { gap: 8px; } .cc-side { padding-top: 24px; padding-bottom: 20px; } .cc-promise { font-size: 14.5px; } .cc-ask-q { min-height: 32px; padding: 6px 12px 5px; font-size: 13px; } } @media (max-width: 760px) { .cc { --pad: 20px; --edge: 0px; --peek: 0px; --gap: 0px; --cc-x: 8px; --cc-y: 8px; } .cc .cc-peek, .cc .cc-arrow { display: none; } .cc .cc-close { width: 48px; height: 48px; top: calc(var(--cc-y) + 10px); right: calc(var(--cc-x) + 10px); } .cc-stage { bottom: 72px; } .cc-phone-ways { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 8; display: flex; gap: 8px; } .cc .cc-phone-ways .pill { flex: 1; min-width: 0; min-height: 56px; padding: 0 14px; gap: 8px; background: var(--stone); color: var(--paper-ink); --fill: var(--paper-ink); --fill-ink: var(--paper); } .cc-phone-ways .pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-grid { display: flex; flex-direction: column; } .cc-side, .cc-main { display: contents; } .cc-head { order: 1; padding: 72px var(--pad) 0; } .cc-figure { order: 2; margin: 20px var(--pad) 0; } .cc-sumwrap { order: 3; margin: 22px var(--pad) 0; } .cc-askwrap { order: 3; margin: 0 var(--pad); } .cc-part { order: 4; margin-top: 52px; padding: 0 var(--pad); } .cc-end { order: 5; height: 32px; } .cc-blocks > div { grid-template-columns: 1fr; gap: 4px; } .cc-ask-q { background: var(--stone); } .cc-viewer { padding: 64px 14px 18px; } .cc .cc-viewer-prev, .cc .cc-viewer-next { top: 14px; translate: none; } .cc .cc-viewer-prev { left: 14px; } .cc .cc-viewer-next { left: 70px; right: auto; } } html.reduced .cc :is(.cc-peek, .cc-ix::before, .cc-enlarge-icon, .cc-ask-q) { transition: none; } @media (forced-colors: active) { .cc-card, .cc-viewer { border: 1px solid CanvasText; background: Canvas; } .cc-paper { display: none; } .cc-ix.is-on::before, .cc-index li.is-past .cc-ix::before { background: Highlight; box-shadow: none; } } @media (min-width: 761px) and (max-height: 760px) { .cc-side { --rs: 11px; padding-top: 20px; padding-bottom: 16px; } .cc-title { font-size: min(clamp(28px, 2.7vw, 40px), calc(100cqi / (var(--title-chars, 14) * 0.5))); } .cc-factrow { gap: 4px 16px; } .cc a.cc-ix { padding: 2px 0; font-size: 13.5px; } .cc-index li:not(:last-child)::after { top: calc(50% + 5px); height: calc(100% - 10px); } .cc-ask-qs { gap: 4px; } } .cc-sumwrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .cc-index { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .cc-index ol { flex: 1 1 auto; display: flex; flex-direction: column; } .cc-index li { flex: 1 1 0; min-height: 30px; max-height: 52px; display: flex; align-items: center; } @media (max-width: 760px) { .cc-index li { flex: none; min-height: 0; max-height: none; } } @media (min-width: 761px) { .cc-grid { display: flex; flex-direction: column; } .cc-side, .cc-main { display: contents; } .cc-head { order: 1; padding: 40px calc(var(--pad) + 60px) 0 var(--pad); } .cc-factrow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .cc-factrow div { display: grid; gap: 6px; align-content: start; } .cc-figure { order: 2; margin: 24px var(--pad) 0; } .cc-sumwrap { order: 3; position: sticky; top: 0; z-index: 4; flex: none; justify-content: center; min-height: 80px; margin: 24px 0 0; padding: 10px calc(var(--pad) + 60px) 10px var(--pad); border-top: 0; background: var(--stone); } .cc-sumwrap .cc-rail-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cc-index ol { flex-direction: row; gap: 0 24px; overflow-x: auto; scrollbar-width: none; } .cc-index ol::-webkit-scrollbar { display: none; } .cc-index li { flex: none; min-height: 0; max-height: none; } .cc-index li:not(:last-child)::after { display: none; } .cc a.cc-ix { gap: 9px; white-space: nowrap; } .cc-part { order: 4; margin-top: 48px; padding: 0 var(--pad); } .cc-askwrap { order: 5; flex: none; margin: 64px var(--pad) 0; } .cc-ask-q { background: var(--stone); } .cc-end { order: 6; } } @media (min-width: 761px) { .cc-part > :is(.cc-p, .cc-h, .cc-list, .cc-note, .cc-blocks, .cc-sources, .cc-quiet, .eyebrow, h2, h3) { max-width: 46rem; } } @media (min-width: 1100px) { .cc-frame { aspect-ratio: 16 / 9; } .cc-head { padding-top: 48px; } }