:root {
  color-scheme: light dark;
  --page: #fbf8f5;
  --surface: #fff;
  --ink: #332b49;
  --muted: #655c7e;
  --action: #493b61;
  --on-action: #fff;
  --lavender: #eee8f2;
  --divider: #d8cfe0;
  --tile: #19151e;
  --tile-ink: #f4ede5;
  --tile-accent: #c7abe8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #19151e;
    --surface: #26202e;
    --ink: #f4ede5;
    --muted: #bcb0cb;
    --action: #c7abe8;
    --on-action: #19151e;
    --lavender: #332b40;
    --divider: #594966;
  }
}
* { box-sizing: border-box; }
html { scroll-padding-block-start: 1.5rem; }
body { margin: 0; background: var(--page); color: var(--ink); font: 1rem/1.6 "Segoe UI", Arial, sans-serif; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
a { color: var(--action); text-underline-offset: .25em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--action); outline-offset: 5px; border-radius: 2px; }
input:focus-visible, button:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
svg, img { display: block; max-inline-size: 100%; }
img { block-size: auto; }
em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.wrap { max-inline-size: 82rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); }
.skip-link { position: absolute; inset-block-start: -8rem; inset-inline-start: 1rem; z-index: 2; padding: .75rem 1rem; background: var(--surface); min-block-size: 44px; }
.skip-link:focus { inset-block-start: 1rem; }
.site-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding-block: 1.5rem; }
.identity { display: inline-flex; align-items: center; gap: .75rem; font-size: 1.0625rem; font-weight: 600; text-decoration: none; }
.identity svg { inline-size: 36px; block-size: 36px; flex: 0 0 36px; fill: currentColor; }
nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
nav a { display: inline-flex; align-items: center; gap: .4rem; min-block-size: 44px; font-size: .875rem; font-weight: 600; padding-block: .5rem; }
.eyebrow { color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }
.cover { padding-block-start: 1.5rem; }
.cover-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding-block-end: 1rem; }
.pilot { padding: .2rem .7rem; border: 1px solid var(--divider); border-radius: 2rem; color: var(--muted); font-size: .75rem; }
.cover-art { display: block; overflow: hidden; border-radius: 1rem; }
.cover-art img { inline-size: 100%; outline: 1px solid oklch(0 0 0 / .1); outline-offset: -1px; border-radius: inherit; }
.cover-copy { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem 4rem; align-items: start; padding-block: 2.5rem; }
h1 { font-size: clamp(2rem, 3.4vw, 3.2rem); letter-spacing: -.04em; font-weight: 600; }
h1 em { color: var(--action); }
.cover-intro { max-inline-size: 44ch; }
.cover-intro > p { color: var(--muted); font-size: 1.0625rem; }
.button { display: inline-flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-block-size: 48px; padding: .75rem 1rem; margin-block-start: 1.5rem; border-radius: .5rem; background: var(--action); color: var(--on-action); font-size: .875rem; font-weight: 600; text-decoration: none; }
.button:hover { text-decoration: underline; }
.previews { padding-block: 3rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 1.5rem 3rem; margin-block-end: 1.75rem; }
.section-heading h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.035em; margin-block-start: .75rem; font-weight: 600; }
.section-heading > p { max-inline-size: 32ch; color: var(--muted); font-size: .9375rem; }
.collection-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 2rem; margin-block-end: 1.5rem; }
.search-field { min-inline-size: 0; max-inline-size: 40rem; }
.search-field label { display: block; font-weight: 600; font-size: .9375rem; }
.search-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; margin-block-start: .5rem; }
.search-controls input, .search-controls button { min-block-size: 48px; padding: .65rem 1rem; border: 1px solid var(--muted); border-radius: .5rem; font: inherit; }
.search-controls input { min-inline-size: 0; inline-size: 100%; background: var(--surface); color: var(--ink); }
.search-controls input::placeholder { color: var(--muted); opacity: 1; }
.search-controls button { background: var(--surface); color: var(--action); font-size: .875rem; font-weight: 600; cursor: pointer; }
.search-controls button:hover:not(:disabled) { text-decoration: underline; }
.search-controls button:disabled { color: var(--muted); border-color: var(--divider); cursor: default; }
.search-hint, .search-count { color: var(--muted); font-size: .875rem; }
.search-hint { margin-block-start: .5rem; }
.search-count { align-self: center; }
.search-empty { padding: 1.5rem; margin-block-end: 1.5rem; border: 1px solid var(--divider); border-radius: 1rem; background: var(--surface); }
.search-empty h3 { font-size: 1.25rem; font-weight: 600; }
.search-empty p { margin-block-start: .5rem; color: var(--muted); }
.collection-search[hidden], .search-empty[hidden], .preview-card[hidden] { display: none; }
.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.preview-card { min-inline-size: 0; background: var(--surface); border: 1px solid var(--divider); border-radius: 1rem; padding: 1.5rem; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.tag { color: var(--muted); font-size: .75rem; }
.theme-study, .brand-study { min-block-size: 14rem; margin-block: 1.5rem; padding: 1.5rem; border-radius: .5rem; }
.theme-study { display: grid; align-content: center; gap: 1.5rem; background: var(--lavender); }
.study-type { font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.15; letter-spacing: -.04em; }
.study-type span, .study-type em { display: block; }
.study-panels { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: .75rem; }
.study-panels span { block-size: 2.5rem; border: 1px solid var(--divider); border-radius: .25rem; background: var(--surface); }
.swiss-study { display: grid; grid-template-columns: auto 1fr; gap: 1rem; min-block-size: 14rem; margin-block: 1.5rem; padding: 1.5rem; background: #fafaf7; color: #181816; border-radius: 2px; border-block-start: 4px solid #b52e21; }
.swiss-number { align-self: start; padding: .25rem .5rem; background: #b52e21; color: #fff; font-size: .875rem; font-weight: 700; }
.swiss-type { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; }
.swiss-lines { display: grid; grid-column: 1 / -1; grid-template-columns: 2fr 1fr 1fr; align-items: end; gap: .75rem; }
.swiss-lines span { block-size: 2px; background: currentColor; }
.precision-study { --study-page: #f6f8fb; --study-panel: #fff; --study-ink: #17212f; --study-muted: #526174; --study-line: #d6dee8; --study-action: #175cd3; display: grid; align-content: start; gap: .5rem; min-block-size: 14rem; margin-block: 1.5rem; padding: 1rem; border-radius: 4px; color: var(--study-ink); background: var(--study-page); }
.precision-study-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-block-end: .25rem; border-block-end: 1px solid var(--study-line); color: var(--study-muted); font-size: .8125rem; }
.precision-study-row { display: grid; grid-template-columns: 4px 1fr auto; gap: .5rem; align-items: center; padding: .25rem .5rem; background: var(--study-panel); border: 1px solid var(--study-line); border-radius: 4px; font-size: .75rem; }
.precision-study-row strong { font-family: Consolas, monospace; font-weight: 500; }
.precision-study-row > span:last-child { color: var(--study-muted); }
.precision-study-marker { align-self: stretch; background: var(--study-action); }
.precision-study-note { font-size: 1rem; font-weight: 600; line-height: 1.25; }
.play-study { --play-paper: #fff9e9; --play-ink: #2b203d; --play-lavender: #f0e4ff; --play-green: #e3f0d4; --play-peach: #ffe4cd; --play-note: #ffe69c; --play-on-note: #43371b; display: grid; grid-template-columns: minmax(0, 1fr) 6rem; align-items: center; gap: .75rem 1rem; min-block-size: 14rem; margin-block: 1.5rem; padding: 1rem; border: 2px solid var(--play-ink); border-radius: 30px; box-shadow: 4px 5px 0 var(--play-ink); background: var(--play-paper); color: var(--play-ink); }
.play-sticker { grid-column: 1 / -1; justify-self: start; padding: .15rem .6rem; border: 2px solid var(--play-ink); border-radius: 14px; background: var(--play-note); color: var(--play-on-note); font-size: .75rem; font-weight: 700; }
.play-study-type { font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1; font-weight: 800; letter-spacing: -.035em; }
.play-study-shapes { position: relative; inline-size: 6rem; block-size: 6rem; }
.play-study-shapes span { position: absolute; inline-size: 3.5rem; block-size: 3.5rem; border: 2px solid var(--play-ink); border-radius: 50%; background: var(--play-lavender); }
.play-study-shapes span:nth-child(2) { inset-inline-end: 0; inset-block-start: 1rem; background: var(--play-green); }
.play-study-shapes span:nth-child(3) { inset-inline-start: .5rem; inset-block-end: 0; background: var(--play-peach); }
.play-study-caption { grid-column: 1 / -1; font-size: .8125rem; font-weight: 600; }
.brand-card { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; align-items: center; }
.botanical-study { --botanical-paper: #f6f5ed; --botanical-ink: #293d2f; --botanical-muted: #596550; --botanical-leaf: #e5eadc; --botanical-earth: #e9e5d6; display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; gap: .75rem; align-items: center; min-block-size: 14rem; margin-block: 1.5rem; padding: 1.5rem; border-radius: 32px 8px 32px 8px; background: var(--botanical-paper); color: var(--botanical-ink); }
.botanical-study-index { color: var(--botanical-muted); font-size: .75rem; }
.botanical-study p { margin-block-start: .75rem; font: 400 clamp(1.75rem, 3.5vw, 2.75rem)/1.1 Georgia, serif; letter-spacing: -.025em; }
.botanical-study svg { inline-size: 4.5rem; block-size: 6rem; overflow: visible; }
.botanical-study-leaf { fill: var(--botanical-leaf); stroke: var(--botanical-ink); stroke-width: 1.5; }
.botanical-study-leaf.second-leaf { fill: var(--botanical-earth); }
.botanical-study-stem { fill: none; stroke: var(--botanical-ink); stroke-width: 1.5; }
.blueprint-study { --blueprint-paper: #f3f7ff; --blueprint-ink: #142e61; --blueprint-muted: #46618d; --blueprint-accent: #1644b8; display: grid; grid-template-columns: minmax(0, 1fr) 5rem; align-items: center; gap: .75rem; min-block-size: 14rem; margin-block: 1.5rem; padding: 1.25rem; border-radius: 8px; border: 1px dashed var(--blueprint-accent); background: var(--blueprint-paper); color: var(--blueprint-ink); box-shadow: 5px 5px 0 #1644b817; }
.blueprint-study-index { font-size: .75rem; color: var(--blueprint-muted); }
.blueprint-study p { margin-block-start: .75rem; font: 400 clamp(1.4rem, 2.8vw, 2.2rem)/1.2 Consolas, monospace; letter-spacing: -.025em; }
.blueprint-study svg { inline-size: 5rem; block-size: 5rem; fill: none; stroke: var(--blueprint-accent); stroke-width: 1.5; }
.blueprint-study-grid { opacity: .12; stroke-width: 1; }
.blueprint-study-guide { stroke-dasharray: 3 3; }
.pulse-study { display: grid; grid-template-columns: minmax(0, 1fr) 5rem; align-items: center; gap: .75rem; min-block-size: 14rem; margin-block: 1.5rem; padding: 1.5rem; border-radius: 12px; color: #f5f8ee; background: #10140d; }
.pulse-study-index { font-size: .75rem; color: #bec9ae; }
.pulse-study p { margin-block-start: .75rem; font: 700 clamp(2rem, 4vw, 3.5rem)/1.05 Impact, 'Arial Narrow', sans-serif; letter-spacing: -.015em; text-transform: uppercase; }
.pulse-study svg { inline-size: 5rem; block-size: 7rem; fill: #c4f047; }
.pulse-study-white { fill: #f5f8ee; }
.gallery-study { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 1.25rem; block-size: 14rem; margin-block: 1.5rem; padding: 1rem; border-radius: 4px; background: #f6f4f0; color: #252823; }
.gallery-study img { display: block; inline-size: 100%; block-size: 12rem; object-fit: contain; }
.gallery-study span { font-size: .75rem; color: #596057; }
.gallery-study p { margin-block-start: .75rem; font: 400 clamp(1.5rem, 3vw, 2.5rem)/1.1 "Segoe UI", Arial, sans-serif; letter-spacing: -.035em; }
.layered-card { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; align-items: center; }
.layered-card .card-meta { grid-column: 1 / -1; }
.layered-study { --layered-page: #eaf2f1; --layered-low: #dfebe9; --layered-tint: #d5eae5; --layered-raised: #fff; --layered-ink: #172f2c; --layered-muted: #405e58; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.8fr); gap: .75rem; min-block-size: 15rem; margin-block: 1.5rem; padding: .75rem; border-radius: 24px; background: var(--layered-page); color: var(--layered-ink); }
.layered-study-rail { display: grid; align-content: start; gap: .75rem; padding: .75rem .5rem; border-radius: 18px; background: var(--layered-low); font-size: .6875rem; overflow-wrap: anywhere; }
.layered-study-rail > span { padding: .35rem .5rem; }
.layered-study-current { border-radius: 999px; background: var(--layered-tint); font-weight: 700; }
.layered-study-content { min-inline-size: 0; padding: .5rem; }
.layered-study-content > span { color: var(--layered-muted); font-size: .75rem; }
.layered-study-content > p { margin-block: .5rem 1rem; font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 600; line-height: 1.15; letter-spacing: -.035em; }
.layered-study-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.layered-study-panels span { padding: .75rem; border-radius: 12px; background: var(--layered-raised); font-size: .6875rem; overflow-wrap: anywhere; }
.layered-study-panels strong { font-weight: 500; color: var(--layered-muted); }
.brand-card .card-meta { grid-column: 1 / -1; }
.brand-study { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2rem); background: var(--tile); color: var(--tile-ink); }
.brand-study svg { inline-size: 96px; block-size: 96px; flex: 0 0 96px; fill: var(--tile-accent); }
.brand-study p { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 500; line-height: 1.2; letter-spacing: -.03em; }
.card-copy h3 { font-size: 1.625rem; letter-spacing: -.025em; font-weight: 600; }
.card-copy h3 a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; text-decoration: none; }
.card-copy h3 a:hover { text-decoration: underline; }
.card-copy p { color: var(--muted); margin-block: 1rem .75rem; max-inline-size: 48ch; }
.text-link { display: inline-flex; align-items: center; gap: .75rem; min-block-size: 44px; padding-block: .5rem; font-size: .875rem; font-weight: 600; }
.reading-note { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.5rem 4rem; padding-block: 3rem 4rem; }
.reading-note > .eyebrow { grid-column: 1 / -1; }
.reading-note h2 { font-size: clamp(1.75rem, 3.3vw, 2.75rem); font-weight: 600; letter-spacing: -.035em; }
.reading-note h2 em { color: var(--action); }
.reading-note > div { color: var(--muted); max-inline-size: 58ch; }
.reading-note p + p { margin-block-start: 1rem; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding-block: 1.75rem 2rem; border-block-start: 1px solid var(--divider); color: var(--muted); font-size: .8125rem; }
.site-footer a { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px; padding-block: .5rem; }
@media (max-width: 48rem) {
  .collection-search { grid-template-columns: 1fr; }
  .cover-copy, .preview-grid, .reading-note, .brand-card, .layered-card { grid-template-columns: 1fr; }
  .cover-copy { gap: 1.5rem; }
  .cover-intro { max-inline-size: 52ch; }
  .reading-note { gap: 1.25rem; }
}
@media (max-width: 26rem) {
  .search-controls { grid-template-columns: 1fr; }
  .preview-card { padding: 1rem; }
  .theme-study, .brand-study { padding: 1rem; }
  .brand-study { flex-wrap: wrap; text-align: center; }
}
@media (prefers-color-scheme: dark) {
  .layered-study { --layered-page: #101c1c; --layered-low: #172626; --layered-tint: #294c46; --layered-raised: #273c3b; --layered-ink: #e7f3ef; --layered-muted: #b4cec5; }
  .cover-art img { outline-color: oklch(1 0 0 / .1); }
  .swiss-study { background: #171716; color: #faf6ed; border-color: #ff8978; }
  .swiss-number { background: #ff8978; color: #35160f; }
  .precision-study { --study-page: #0c121c; --study-panel: #141e2c; --study-ink: #e9eff7; --study-muted: #aab9cc; --study-line: #33445b; --study-action: #88b7ff; }
  .play-study { --play-paper: #1c122c; --play-ink: #fff4dc; --play-lavender: #382449; --play-green: #253529; --play-peach: #463027; --play-note: #f1d57c; --play-on-note: #352509; box-shadow: 4px 5px 0 #0c0612; }
  .blueprint-study { --blueprint-paper: #0c1528; --blueprint-ink: #e7f0ff; --blueprint-muted: #aabbda; --blueprint-accent: #8ab7ff; box-shadow: 5px 5px 0 #8ab7ff22; }
  .botanical-study { --botanical-paper: #101d17; --botanical-ink: #f3edda; --botanical-muted: #b7c9b6; --botanical-leaf: #23392c; --botanical-earth: #343729; }
}
@media (forced-colors: active) {
  a:focus-visible, input:focus-visible, button:focus-visible { outline-color: Highlight; }
  .preview-card, .pilot { border-color: CanvasText; }
  .button { border: 1px solid ButtonText; }
  .identity svg, .brand-study svg { fill: CanvasText; }
}