:root {
  --orange:#d97537;
  --ink:#292c29;
  --paper:#f3efe7;
  --stone:#e4dccf;
  --sage:#a6b0a2;
  --sage-dark:#73836e;
  --line:rgba(41,44,41,.25);
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  scroll-behavior:smooth
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  color:inherit
}

a,button,summary {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #0758c5;
  outline-offset:5px
}

img {
  display:block;
  width:100%;
  height:auto
}

figure,p {
  margin:0
}

h1,h2,h3 {
  margin:0;
  font-weight:900;
  letter-spacing:-.055em;
  line-height:.98
}

p {
  font-size:1.0625rem;
  line-height:1.6
}

h2 {
  font-size:clamp(2.9rem,6.2vw,6rem)
}

h3 {
  font-size:clamp(2rem,3.1vw,3rem)
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip {
  position:fixed;
  z-index:9;
  top:10px;
  left:10px;
  transform:translateY(-200%);
  background:var(--paper);
  padding:12px
}

.skip:focus {
  transform:none
}

.masthead {
  padding:25px 4.5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:var(--stone);
  border-bottom:1px solid var(--line)
}

.wordmark {
  flex-shrink:0;
  white-space:nowrap;
  font-size:1.25rem;
  font-weight:900;
  letter-spacing:-.045em;
  display:flex;
  align-items:center;
  gap:14px
}

.brand-dot {
  color:#a34d1e;
  font-size:2.3rem;
  line-height:.6
}

.masthead nav {
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
  justify-content:flex-end;
  font-size:.9375rem;
  font-weight:700
}

.masthead nav a:hover,.text-link:hover,footer nav a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.nav-cta {
  border:1.5px solid var(--ink);
  border-radius:99px;
  padding:11px 18px
}

.hero {
  background:var(--sage);
  padding:30px 4.5% 25px;
  overflow:hidden
}

.hero-top {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center
}

.eyebrow,.small-label {
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
  line-height:1.4
}

.edition {
  font-size:.875rem
}

.hero h1 {
  font-size:clamp(2.7rem,8vw,8rem);
  letter-spacing:-.075em;
  margin:20px 0 30px;
  white-space:nowrap;
  line-height:1.05
}

.title-period {
  color:#9d491c
}

.hero-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%;
  margin-bottom:38px
}

.hero-intro>p {
  font-size:clamp(1.6rem,2.7vw,2.75rem);
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1.12
}

.hero-intro>div {
  max-width:430px
}

.hero-intro>div p {
  font-size:1.1875rem;
  line-height:1.4;
  margin-bottom:20px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 25px;
  border-radius:99px;
  font-size:1rem;
  font-weight:700;
  transition:transform .18s,background .18s
}

.button:hover {
  transform:translateY(-3px)
}

.dark {
  background:var(--ink);
  color:var(--paper)
}

.dark:hover {
  background:#3a3c35
}

.hero-image {
  margin:0 -1px
}

.hero-image img {
  border-radius:5px;
  aspect-ratio:1.9;
  object-fit:cover;
  object-position:center 53%
}

.hero-image figcaption {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:.8125rem;
  line-height:1.4;
  margin-top:13px
}

.section {
  padding:100px 4.5%;
  scroll-margin-top:24px
}

.experience {
  background:var(--ink);
  color:var(--paper)
}

.section-heading {
  display:grid;
  grid-template-columns:1fr 2fr 1.15fr;
  align-items:start;
  gap:35px
}

.section-heading>p {
  max-width:310px;
  margin-top:10px;
  color:#c5c6bf
}

.journey {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px;
  margin-top:80px
}

.journey article {
  border-top:1px solid #686a61;
  padding-top:23px
}

.step {
  display:block;
  color:var(--orange);
  font-size:1rem;
  font-weight:700;
  margin-bottom:26px
}

.journey h3 {
  margin-bottom:24px
}

.journey p {
  color:#c5c6bf;
  margin-bottom:34px;
  max-width:350px
}

.journey .small-label {
  font-size:.8125rem
}

.experience-note {
  font-size:.8125rem;
  color:#b7b9af;
  border-top:1px solid #686a61;
  padding-top:20px;
  margin-top:55px
}

.device-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px
}

.device-heading h2 {
  margin-top:25px
}

.device-heading>p {
  font-size:1.3rem;
  line-height:1.5;
  margin-right:4%;
  margin-bottom:4px
}

.device-tabs {
  display:flex;
  border-top:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);
  margin-top:55px
}

.device-tabs button {
  width:33.333%;
  border:0;
  border-right:1px solid var(--line);
  background:transparent;
  padding:24px 20px;
  display:flex;
  justify-content:space-between;
  text-align:left;
  font-size:1.15rem;
  font-weight:700;
  cursor:pointer;
  transition:background .2s
}

.device-tabs button:last-child {
  border-right:0
}

.device-tabs button[aria-selected=true] {
  background:var(--sage)
}

.device-tabs button:hover {
  background:#d4dacd
}

.device-tabs button span {
  font-size:.875rem;
  font-weight:400
}

.device-panel {
  display:grid;
  grid-template-columns:.85fr 1.4fr;
  gap:6%;
  padding-top:50px;
  align-items:center
}

.device-panel[hidden] {
  display:none
}

.device-copy h3 {
  font-size:clamp(2.4rem,4.2vw,4.3rem);
  margin:24px 0
}

.device-copy p {
  margin:0 0 20px;
  max-width:410px
}

.outline-label {
  display:inline-block;
  border:1px solid currentColor;
  border-radius:99px;
  padding:8px 13px;
  font-size:.8125rem;
  font-weight:700;
  margin-top:10px
}

.device-art img {
  border-radius:4px
}

.device-art figcaption {
  margin-top:12px;
  font-size:.8125rem;
  line-height:1.5
}

.identity {
  background:var(--stone)
}

.identity-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:10%;
  margin-top:36px
}

.identity h2 {
  font-size:clamp(3.6rem,8vw,8rem)
}

.identity em {
  font-family:Georgia,serif;
  font-weight:400
}

.identity-grid>div {
  max-width:440px
}

.identity-grid p {
  margin-bottom:22px
}

.identity-grid .large-copy {
  font-size:clamp(1.6rem,2.65vw,2.6rem);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1.2;
  margin-bottom:36px
}

.preview {
  background:var(--sage)
}

.preview-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:12%;
  margin-top:30px;
  align-items:center
}

.preview-grid>div>p {
  max-width:510px;
  font-size:1.1875rem;
  margin-top:28px
}

.actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:22px;
  margin-top:30px
}

.text-link {
  font-weight:700;
  border-bottom:1px solid var(--ink);
  padding:8px 0
}

.preview-note {
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:5px;
  padding:32px;
  transform:rotate(2deg)
}

.preview-note h3 {
  margin:20px 0
}

.preview-note p {
  margin-bottom:15px
}

.questions {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:8%
}

.questions h2 {
  margin-top:25px
}

.faq details {
  border-top:1px solid var(--line)
}

.faq details:last-child {
  border-bottom:1px solid var(--line)
}

summary {
  list-style:none;
  padding:25px 45px 25px 0;
  position:relative;
  font-size:1.125rem;
  font-weight:700;
  cursor:pointer;
  line-height:1.4
}

summary::-webkit-details-marker {
  display:none
}

summary::after {
  content:'+';
  position:absolute;
  right:5px;
  top:19px;
  font-size:1.75rem;
  font-weight:400
}

details[open] summary::after {
  content:'−'
}

.faq p {
  padding:0 35px 26px 0;
  max-width:650px
}

.faq p a {
  text-decoration:underline;
  text-underline-offset:3px
}

footer {
  background:var(--ink);
  color:var(--paper);
  padding:55px 4.5% 35px;
  overflow:hidden
}

.footer-brand {
  font-size:clamp(2rem,6.5vw,6.5rem);
  font-weight:900;
  letter-spacing:-.065em;
  display:flex;
  justify-content:space-between;
  align-items:center;
  line-height:1.1
}

.footer-brand span {
  color:var(--orange);
  font-size:1em
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:30px;
  border-top:1px solid #686a61;
  padding-top:25px;
  margin-top:40px
}

.footer-bottom p {
  font-size:.875rem;
  color:#c5c6bf
}

.footer-bottom nav {
  display:flex;
  gap:24px;
  align-items:flex-end;
  font-size:.875rem
}


@media(min-width:1600px) {
  .hero,.section,.masthead,footer {
  padding-left:max(4.5%,calc((100vw - 1440px)/2));
  padding-right:max(4.5%,calc((100vw - 1440px)/2))
}

}


@media(max-width:900px) {
  .section {
  padding-top:70px;
  padding-bottom:70px
}

.section-heading {
  grid-template-columns:1fr 2fr
}

.section-heading>p {
  grid-column:2;
  max-width:400px
}

.journey {
  gap:25px;
  margin-top:50px
}

.device-heading>p {
  font-size:1.1rem;
  margin-right:0
}

.device-panel {
  grid-template-columns:1fr;
  gap:28px
}

.device-copy {
  max-width:700px
}

.device-copy p {
  max-width:650px
}

.preview-grid {
  gap:6%
}

.preview-note {
  padding:23px;
  transform:none
}

.questions {
  grid-template-columns:.8fr 1.5fr
}

.masthead nav {
  gap:19px
}

.identity-grid {
  gap:6%
}


}


@media(max-width:600px) {
  .masthead {
  padding:20px 5%;
  align-items:flex-start;
  gap:20px
}

.wordmark {
  font-size:.875rem;
  gap:8px;
  padding-top:4px
}

.brand-dot {
  font-size:1.7rem
}

.masthead nav {
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  font-size:.8125rem
}

.masthead nav a:nth-child(3) {
  display:block
}

.nav-cta {
  padding:6px 11px
}

.hero {
  padding:25px 5% 20px
}

.hero-top {
  gap:12px;
  align-items:start
}

.hero-top .eyebrow {
  font-size:.75rem;
  max-width:170px
}

.edition {
  font-size:.75rem;
  max-width:110px;
  text-align:right
}

.hero h1 {
  font-size:7.8vw;
  margin:28px 0;
  letter-spacing:-.075em
}

.hero-intro {
  grid-template-columns:1fr;
  gap:22px;
  margin-bottom:30px
}

.hero-intro>p {
  font-size:2.1rem
}

.hero-intro>div p {
  font-size:1.0625rem;
  max-width:340px
}

.hero-image img {
  aspect-ratio:1.2;
  object-position:center
}

.hero-image figcaption {
  flex-direction:column;
  gap:5px;
  font-size:.75rem
}

.section {
  padding:55px 5%
}

.section-heading {
  display:block
}

.section-heading h2 {
  margin:25px 0
}

.section-heading>p {
  max-width:340px
}

.journey {
  grid-template-columns:1fr;
  gap:38px;
  margin-top:45px
}

.journey article {
  position:relative;
  padding:25px 0 0 55px
}

.step {
  position:absolute;
  left:0;
  top:26px
}

.journey h3 {
  font-size:2.3rem;
  margin-bottom:18px
}

.journey p {
  max-width:none;
  margin-bottom:20px
}

.experience-note {
  margin-top:35px
}

.device-heading {
  display:block
}

.device-heading>p {
  margin-top:25px
}

.device-tabs {
  margin-top:30px
}

.device-tabs button {
  font-size:.9375rem;
  padding:18px 10px;
  flex-direction:column;
  gap:10px
}

.device-tabs button span {
  font-size:.75rem
}

.device-panel {
  padding-top:32px
}

.device-copy h3 {
  font-size:2.7rem;
  margin:20px 0
}

.identity-grid {
  grid-template-columns:1fr;
  gap:35px
}

.identity h2 {
  font-size:4.3rem
}

.identity-grid .large-copy {
  font-size:2rem
}

.preview-grid {
  grid-template-columns:1fr;
  gap:38px
}

.preview h2 {
  font-size:3.2rem
}

.preview-grid>div>p {
  font-size:1.0625rem
}

.preview-note {
  padding:28px
}

.questions {
  grid-template-columns:1fr;
  gap:35px
}

summary {
  font-size:1rem
}

.footer-bottom {
  flex-direction:column
}

.footer-bottom nav {
  flex-wrap:wrap;
  gap:20px
}

.footer-brand {
  font-size:6.8vw
}

footer {
  padding:40px 5% 30px
}


}


@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto;
  }

  * {
    transition:none!important;
  }
}

.genomics {
  background:var(--paper);
  border-bottom:1px solid var(--line);
}

.genomics-heading {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:10%;
  align-items:end;
}

.genomics-heading h2 {
  margin-top:25px;
}

.genomics-heading > p {
  max-width:470px;
  font-size:1.1875rem;
}

.genomic-features {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:8%;
  row-gap:45px;
  margin-top:65px;
}

.genomic-features article {
  border-top:2px solid var(--sage-dark);
  padding-top:22px;
}

.genomic-features h3 {
  margin:22px 0;
}

.genomic-features p {
  max-width:520px;
  margin-top:15px;
}

.play-features {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
  margin-top:55px;
}

.play-features article {
  padding-top:24px;
  border-top:1px solid var(--line);
}

.play-features h3 {
  font-size:1.75rem;
  margin-bottom:18px;
}

.paper-output {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:10%;
  background:var(--ink);
  color:var(--paper);
}

.paper-output h2 {
  margin-top:25px;
}

.paper-output p {
  margin-bottom:22px;
  max-width:500px;
  color:#d4d3cb;
}

.paper-output .large-copy {
  color:var(--paper);
  font-size:clamp(1.6rem,2.65vw,2.6rem);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.04em;
  margin-bottom:30px;
}


.genomic-features { grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.research-art { max-width:940px; margin:55px auto 0; padding:28px; background:var(--ink); border-radius:8px; }
.research-art img, .field-art img { display:block; width:100%; height:auto; }
.research-art figcaption { color:var(--paper); margin-top:18px; font-size:.8125rem; }
.field-art { margin:50px 0 0; }
.field-art figcaption { margin-top:14px; font-size:.8125rem; }
.science-detail { margin-top:45px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.science-detail summary { cursor:pointer; font-weight:700; }
.science-detail p { max-width:900px; margin:20px 0; }
.science-detail a, .license-note a { text-decoration:underline; }
.play-modes { background:var(--stone); }
.mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px; margin-top:50px; }
.mode-grid article { padding:40px; border-radius:6px; }
.local-mode { background:var(--paper); }
.cloud-mode { background:var(--ink); color:var(--paper); }
.mode-grid h3 { margin:24px 0; font-size:clamp(2rem,3vw,3rem); }
.mode-grid ul { padding-left:20px; margin:25px 0; }
.mode-grid li { margin:12px 0; line-height:1.5; }
.mode-signoff { display:block; border-top:1px solid currentColor; padding-top:20px; }
.section-note { font-size:.875rem; margin-top:25px; }
.open-source { background:var(--paper); }
.open-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:10%; margin-top:30px; }
.open-grid p { margin:0 0 25px; }
.open-grid .large-copy { margin-top:30px; font-size:1.65rem; font-weight:700; }
.open-grid .license-note { margin-top:25px; font-size:.8125rem; }
@media(max-width:900px) { .genomic-features { gap:25px; } .mode-grid article { padding:28px; } }
@media(max-width:600px) {
  .genomics-heading, .genomic-features, .play-features, .paper-output, .mode-grid, .open-grid { grid-template-columns:1fr; gap:30px; }
  .genomics-heading > p { margin-top:25px; font-size:1.0625rem; }
  .genomic-features { margin-top:40px; }
  .research-art { padding:12px; margin-top:35px; }
  .mode-grid article { padding:28px 24px; }
}

.play-modes .section-heading p { color:var(--ink); }

/* Current concept boards retain full-image links and readable adjacent context. */
.concept-gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;
  margin-top:55px;
}
.gallery-intro {
  grid-column:1 / -1;
  max-width:750px;
}
.gallery-intro p { margin-top:15px; }
.concept-gallery figure {
  padding:24px;
  border-radius:6px;
  background:var(--ink);
  color:var(--paper);
}
.concept-gallery img {
  max-width:360px;
  margin:0 auto;
}
.concept-gallery .concept-wide { grid-column:1 / -1; }
.concept-wide img { max-width:1024px; }
.concept-gallery figcaption {
  margin-top:20px;
  font-size:.9375rem;
  line-height:1.5;
}
.concept-gallery figcaption strong {
  display:block;
  margin-bottom:6px;
}
@media(max-width:600px) {
  .concept-gallery { grid-template-columns:1fr; gap:25px; }
  .concept-gallery figure { padding:16px; }
}

.future-world { margin-top:55px; }
.future-world .play-features { margin-top:25px; }

/* Concept boards retain their original proportions. */
.vision { background:var(--paper); }

/* Show the entire family, including its shared Caddy. */
.hero-image img { aspect-ratio:auto; object-fit:contain; }
.vision .genomics-heading { grid-template-columns:1fr; gap:30px; }
.vision .genomics-heading > p { max-width:800px; }
.concept-gallery > figure:first-of-type { grid-column:1 / -1; }

.screen-concept { margin-top:36px; padding:20px; background:var(--stone); border-radius:6px; }
.screen-concept img { border-radius:4px; }
.screen-concept figcaption { margin-top:18px; font-size:1rem; line-height:1.6; }
.screen-concept figcaption strong { display:block; margin-bottom:8px; }
.screen-transition { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; margin-top:24px; }
@media (max-width:700px) {
  .screen-concept { padding:12px; }
  .screen-transition { grid-template-columns:1fr; gap:16px; }
}