/* Hub styles. All values come from tokens.css (Claude Design). */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; }
body { margin: 0; background: var(--surface-page); color: var(--text-primary); font: var(--type-body); font-variant-numeric: var(--type-numeric); }
a { color: inherit; }
a:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
img { display: block; }

main { max-width: 1240px; margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-12); }
h1 { font: var(--type-h1); letter-spacing: var(--type-h1-tracking); margin: 0 0 var(--space-2); }
h2 { font: var(--type-h2); margin: var(--space-10) 0 var(--space-3); }
.lead { color: var(--text-secondary); max-width: 62ch; margin: 0 0 var(--space-6); }

/* Big tool tiles: 96px mark, what you can do there, and a toggle for the story behind the mark */
.biggrid { align-items: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: var(--space-4); }
.big { --edge: var(--cobalt); display: flex; flex-direction: column; background: var(--surface-card); border: var(--stroke-hairline) solid var(--border-subtle); border-top: 3px solid var(--edge); border-radius: var(--radius-ui); overflow: hidden; }
.big[data-accent="sky"] { --edge: var(--sky); } .big[data-accent="amber"] { --edge: var(--amber); }
.big[data-accent="verde"] { --edge: var(--verde); } .big[data-accent="rose"] { --edge: var(--rose); }
.big[data-accent="orchid"] { --edge: var(--orchid); }
:root[data-theme="dark"] .big[data-accent="orchid"] { --edge: var(--orchid-lift); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .big[data-accent="orchid"] { --edge: var(--orchid-lift); } }
.big-link { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-4); text-decoration: none; transition: background var(--duration-fast) var(--ease); }
.big-link:hover { background: var(--surface-raised); }
.big-logo { flex: none; width: 96px; height: 96px; border-radius: var(--radius-ui); background: var(--surface-logo); }
.big-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.big-name { font: 700 21px/28px var(--font-ui); }
.big-domain { font: 400 13px/20px var(--font-code); color: var(--text-secondary); overflow-wrap: anywhere; }
.big-slogan { font: italic 400 16px/24px var(--font-display); }
.big .ext { flex: none; color: var(--text-secondary); }
.big-desc { margin: 0; padding: 0 var(--space-5) var(--space-4); text-wrap: pretty; }
.mark { margin-top: auto; border-top: var(--stroke-hairline) solid var(--border-subtle); }
.mark summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-5); cursor: pointer; list-style: none; font: var(--type-small); font-weight: 600; color: var(--text-secondary); user-select: none; }
.mark summary::-webkit-details-marker { display: none; }
.mark summary:hover { background: var(--surface-raised); color: var(--text-primary); }
.mark summary:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -2px; }
.mark .chev { transition: transform var(--duration-base) var(--ease); }
.mark[open] .chev { transform: rotate(180deg); }
.mark p { margin: 0; padding: var(--space-1) var(--space-5) var(--space-5); text-wrap: pretty; }
.mark[open] p { animation: hu-in 220ms var(--ease) both; }
.mark-k { display: block; margin-bottom: var(--space-1); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }
html[data-motion="static"] .mark[open] p, html[data-motion="static"] .mark .chev { animation: none; transition: none; }

/* Channels: the newest video and episode, and a plain link for Instagram */
.chans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-4); align-items: start; }
.chan { display: flex; flex-direction: column; border: var(--stroke-hairline) solid var(--border-subtle); border-radius: var(--radius-ui); background: var(--surface-card); overflow: hidden; }
.chan-head { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-4) 0 var(--space-3); text-decoration: none; font: 700 16px/24px var(--font-ui); transition: background var(--duration-fast) var(--ease); }
.chan-head:hover { background: var(--surface-raised); }
.chan-head .ext { margin-left: auto; width: 16px; height: 16px; color: var(--text-secondary); }
.chan-post { display: flex; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-4) var(--space-4); text-decoration: none; }
.chan-post:hover .chan-title { text-decoration: underline; text-underline-offset: 3px; }
.chan-thumb { display: block; margin: 0 calc(-1 * var(--space-4)) var(--space-2); aspect-ratio: 16 / 9; background: var(--surface-raised); overflow: hidden; }
.chan-thumb img { width: 100%; height: 100%; object-fit: cover; }
.chan-thumb[data-fit="contain"] img { object-fit: contain; }
.chan-kind { font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }
.chan-title { font: 600 17px/24px var(--font-display); text-wrap: balance; }
.chan-plain { padding-top: 0; }
.chan-plain .chan-title { font: 600 15px/24px var(--font-ui); text-decoration: underline; text-underline-offset: 3px; }

.prose { max-width: 70ch; }
.prose li { margin: var(--space-1) 0; }
@media (max-width: 640px) { .big-link { padding: var(--space-4); } .big-logo { width: 72px; height: 72px; } .big-desc { padding: 0 var(--space-4) var(--space-4); } .mark summary { padding: 0 var(--space-4); } .mark p { padding: var(--space-1) var(--space-4) var(--space-4); } }

/* ---------- home hero (Claude Design's hub hero, made compact) ---------- */
body[data-page="offerings"] main { max-width: none; padding: 0; }
.hub-body { max-width: 1240px; margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-12); }
.hub-hero { background: var(--surface-header); color: var(--text-on-header); overflow: hidden; }
.hub-hero-in { max-width: 1240px; margin: 0 auto; padding: clamp(28px, 4vw, 48px) clamp(16px, 4vw, 40px) clamp(24px, 3vw, 32px); }
.hub-hero h1 { margin: 0 0 var(--space-2); font: 600 clamp(2rem, 4.8vw, 3.5rem)/1.1 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.hub-slogan { margin: 0; font: 600 clamp(1.1rem, 1.8vw, 1.4rem)/1.35 var(--font-ui); }
.hub-by { margin: 2px 0 0; font: 400 clamp(0.95rem, 1.3vw, 1.05rem)/1.5 var(--font-ui); color: color-mix(in srgb, var(--text-on-header) 82%, transparent); }
.hub-lead { margin: var(--space-4) 0 0; max-width: 46ch; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.5; text-wrap: pretty; }
.hub-btns { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 0; }
.hub-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-5); border: 1px solid color-mix(in srgb, var(--text-on-header) 50%, transparent); border-radius: var(--radius-ui); color: var(--text-on-header); text-decoration: none; font: 600 15px/20px var(--font-ui); transition: background var(--duration-fast) var(--ease); }
.hub-btn:hover { background: color-mix(in srgb, var(--text-on-header) 14%, transparent); }
.hub-btn-main { background: var(--chart-white); border-color: var(--chart-white); color: var(--midnight); }
.hub-btn-main:hover { background: color-mix(in srgb, var(--chart-white) 88%, transparent); }
.hub-hero a:focus-visible { outline-color: var(--text-on-header); }
#tools { scroll-margin-top: var(--space-4); }

/* the row of switches: two rows of pills in the six tints; the "on" ones flip once when the page opens */
.hub-swrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) clamp(24px, 3vw, 36px); }
.hub-sw { --sh: clamp(16px, 1.9vw, 22px); display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(30px, 3.4vw, 40px), 1fr)); grid-template-rows: repeat(2, var(--sh)); grid-auto-rows: var(--sh); row-gap: clamp(8px, 1vw, 12px); column-gap: clamp(6px, 0.9vw, 10px); height: calc(2 * var(--sh) + clamp(8px, 1vw, 12px)); overflow: hidden; }
.sw { --c: var(--cobalt); position: relative; min-width: 0; border: 1.5px solid var(--c); border-radius: 999px; background: transparent; }
.sw b { position: absolute; top: 50%; left: 2px; height: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--c); translate: 0 -50%; }
.sw.on { background: var(--c); }
.sw.on b { left: calc(100% - 2px); translate: -100% -50%; background: var(--chart-white); }
.sw.red b { background: var(--signal-red-lift); }
.sw:nth-child(6n+2) { --c: var(--orchid-lift); } .sw:nth-child(6n+3) { --c: var(--rose); } .sw:nth-child(6n+4) { --c: var(--verde); } .sw:nth-child(6n+5) { --c: var(--amber); } .sw:nth-child(6n) { --c: var(--sky); }
@keyframes hu-sw-bg { from { background: transparent; } }
@keyframes hu-sw-knob { from { left: 2px; translate: 0 -50%; background: var(--c); } }
html[data-motion="full"] .sw.on { animation: hu-sw-bg 420ms var(--ease) var(--d, 0ms) backwards; }
html[data-motion="full"] .sw.on b { animation: hu-sw-knob 420ms var(--ease) var(--d, 0ms) backwards; }
.sw:nth-child(10n+1) { --d: 300ms; } .sw:nth-child(10n+2) { --d: 360ms; } .sw:nth-child(10n+3) { --d: 420ms; } .sw:nth-child(10n+4) { --d: 480ms; } .sw:nth-child(10n+5) { --d: 540ms; }
.sw:nth-child(10n+6) { --d: 600ms; } .sw:nth-child(10n+7) { --d: 660ms; } .sw:nth-child(10n+8) { --d: 720ms; } .sw:nth-child(10n+9) { --d: 780ms; } .sw:nth-child(10n) { --d: 840ms; }

/* moving between the hub's pages fades, in browsers that support it; Reduced and Off skip it */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
html[data-motion="static"]::view-transition-group(*), html[data-motion="static"]::view-transition-old(*), html[data-motion="static"]::view-transition-new(*) { animation-duration: 0s; }

/* each hub page is its own document, so the tab indicator is placed at once instead of gliding in from the first tab */
body[data-site="hub"] .hu-tabs-ind { transition: none; }

/* Links page: friends' and colleagues' sites, one card each */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lk-page { max-width: 1240px; margin: 0 auto; }
.lk-page h1 { max-width: 24ch; text-wrap: balance; }
.lk-page .lead { max-width: 68ch; font-size: 1.125rem; line-height: 1.55; text-wrap: pretty; }
.lk-kicker { margin: 0 0 var(--space-2); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }
.lk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-5); align-items: stretch; margin-top: var(--space-6); }
.lk { --edge: var(--cobalt); display: flex; flex-direction: column; background: var(--surface-card); border: var(--stroke-hairline) solid var(--border-subtle); border-top: 3px solid var(--edge); border-radius: var(--radius-ui); overflow: hidden; }
.lk[data-accent="sky"] { --edge: var(--sky); } .lk[data-accent="amber"] { --edge: var(--amber); }
.lk[data-accent="verde"] { --edge: var(--verde); } .lk[data-accent="rose"] { --edge: var(--rose); }
.lk[data-accent="orchid"] { --edge: var(--orchid); }
.lk-shot { display: block; border-bottom: var(--stroke-hairline) solid var(--border-subtle); background: var(--surface-raised); }
.lk-shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.lk-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5); }
.lk-name { margin: 0; font: 700 24px/30px var(--font-ui); }
.lk-name a { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.lk-name a:hover { text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 4px; }
.lk-name .ext { color: var(--text-secondary); }
.lk-tag { margin: 2px 0 0; font: italic 400 17px/24px var(--font-display); }
.lk-by { margin: var(--space-2) 0 var(--space-3); color: var(--text-secondary); }
.lk-by b { color: var(--text-primary); font-weight: 600; }
.lk-desc { margin: 0 0 var(--space-4); text-wrap: pretty; }
.lk-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: auto 0 0; }
.lk-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-5); border: 1px solid var(--text-primary); border-radius: var(--radius-ui); background: var(--text-primary); color: var(--surface-page); text-decoration: none; font: 600 15px/20px var(--font-ui); }
.lk-btn:hover { background: color-mix(in srgb, var(--text-primary) 85%, var(--surface-page)); }
.lk-host { font: 400 13px/20px var(--font-code); color: var(--text-secondary); overflow-wrap: anywhere; }
.lk-note { margin: var(--space-8) 0 0; max-width: 68ch; color: var(--text-secondary); font-size: 0.875rem; }

/* Awards on a tool tile */
.big-awards { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.big-awards li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: var(--stroke-hairline) solid var(--border-subtle); border-left: 3px solid var(--edge); border-radius: var(--radius-ui); background: var(--surface-raised); }
.big-award-logo { flex: none; display: flex; align-items: center; justify-content: center; width: 72px; height: 40px; padding: 4px; border-radius: var(--radius-ui); background: var(--chart-white); }
.big-award-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.big-award-tx { display: flex; flex-direction: column; min-width: 0; font: var(--type-small); color: var(--text-secondary); }
.big-award-tx b { color: var(--text-primary); font-weight: 600; }