/* Values and science (js/values.js): two home-page sections under a look. Hidden in the page (style="display:none"); shown only by the attributes values.js writes on <html>.
   The photographs follow Oura's home page: tall cards, a small pill at the top, one line in big light type at the bottom, moved only by the visitor's own swipe or the arrows. */
html[data-vals="on"] main .vals, html[data-science="on"] main .sci { display: block !important; }
html[data-vals="on"] main #triggers { display: none !important; }

.vx { padding: clamp(48px, 7vw, 110px) 0; color: var(--bone); overflow: hidden; }
.vx-head, .sci-top { padding: 0 var(--gut); max-width: 1376px; margin: 0 auto clamp(22px, 3vw, 40px); }
.vx h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.02em; max-width: 14em; }
html[data-look="w"] .vx h2 { font-family: var(--lk-serif); font-weight: 400; font-size: clamp(40px, 5vw, 76px); line-height: 1.02; letter-spacing: -.012em; }
html[data-look="o"] .vx h2 { font-size: clamp(31px, 3.6vw, 50px); line-height: 1.1; }

.vx-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 440px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut);
  padding: 0 var(--gut) 4px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.vx-track::-webkit-scrollbar { display: none; }
.vx-card { position: relative; scroll-snap-align: start; margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5.2; background: var(--panel); isolation: isolate; }
.vals .vx-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.vals .vx-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to bottom, transparent, rgba(16, 14, 12, .62)); z-index: -1; }
.vx-pill { position: absolute; left: 16px; top: 16px; padding: 9px 15px 8px; border-radius: 99px; background: rgba(38, 34, 31, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #f6f1ea; font: 500 14px/1 var(--body); letter-spacing: .01em; }
.vals .vx-line { position: absolute; left: 22px; right: 22px; bottom: 22px; margin: 0; color: #fbf8f3; font: 300 clamp(28px, 2.5vw, 36px)/1.08 var(--display); letter-spacing: -.015em; text-wrap: balance; }
html[data-look="w"] .vals .vx-line { font-family: var(--lk-serif); font-weight: 400; font-size: clamp(32px, 2.9vw, 42px); line-height: 1.02; }

.vx-nav { display: none; gap: 10px; justify-content: flex-end; max-width: 1376px; margin: 18px auto 0; padding: 0 var(--gut); }
.vx-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: inherit; font: 400 18px/1 var(--body); cursor: pointer; }
@media (hover: hover) and (min-width: 900px) { .vx-nav { display: flex; } }

/* The 55+ look moves nothing sideways: the photographs stack, one under another on a phone, three across on a wide screen, and the words are bigger. */
html[data-look="o"] .vx-track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); overflow: visible; scroll-snap-type: none; max-width: 1376px; margin: 0 auto; gap: 18px; }
html[data-look="o"] .vx-nav { display: none !important; }
html[data-look="o"] .vx-pill { font: 600 17px/1 var(--body); padding: 11px 16px 10px; background: rgba(17, 19, 21, .78); }
html[data-look="o"] .vals .vx-line { font: 600 30px/1.12 var(--body); letter-spacing: -.01em; }

/* Science: one photograph and a few words, then cards of the research. */
.sci-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 5vw, 88px); align-items: center; }
@media (max-width: 760px) { .sci-top { grid-template-columns: 1fr; } }
.sci-pic { margin: 0; border-radius: var(--r, 22px); overflow: hidden; aspect-ratio: 1 / .9; background: var(--panel); }
.sci-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sci-c p { margin-top: 16px; color: var(--soft); font-size: clamp(17px, 1.4vw, 21px); max-width: 30em; }
.sci-card { aspect-ratio: auto; min-height: 300px; padding: 66px 22px 22px; background: var(--panel); display: flex; flex-direction: column; gap: 12px; }
.sci-card .vx-pill { background: var(--panel2); color: var(--soft); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sci-card .vx-line { margin: 0; font: 500 clamp(23px, 1.9vw, 28px)/1.12 var(--display); letter-spacing: -.01em; }
html[data-look="w"] .sci-card .vx-line { font-family: var(--lk-serif); font-weight: 400; font-size: clamp(27px, 2.3vw, 33px); line-height: 1.05; }
.sci-card p { margin: 0; color: var(--soft); font-size: 16px; line-height: 1.5; }
.sci-card .sci-cite { margin-top: auto; font-size: 13px; line-height: 1.4; color: var(--mute); }
.sci-card .sci-cite a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
html[data-look="o"] .sci-card p { font-size: 19px; } html[data-look="o"] .sci-card .sci-cite { font-size: 16px; }
html[data-look="o"] .sci-card .vx-line { font: 600 25px/1.2 var(--body); }
html[data-look="o"] .sci-card .vx-pill { background: var(--panel2); color: var(--soft); } /* the 55+ look's dark photo pill (above) would otherwise put dark words on a dark pill here */