:root {
  --black: #030303;
  --near-black: #090909;
  --white: #f4f3ef;
  --muted: #a4a4a0;
  --line: rgba(255,255,255,.22);
  --line-soft: rgba(255,255,255,.12);
  --green: #344b3e;
  --green-light: #91a497;
  --gold: #c99b3b;
  --header-height: 78px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; background: var(--black); color: var(--white); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }

.culture-header {
  height: var(--header-height);
  position: sticky;
  z-index: 100;
  top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr auto 2fr;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(3,3,3,.95);
  backdrop-filter: blur(16px);
}
.header-control,
.header-action,
.menu-button {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  background: transparent;
  color: #d7d6d1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
}
.header-control:hover,
.header-action:hover { color: white; background: rgba(255,255,255,.035); }
.culture-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translate(-50%,-50%);
}
.culture-brand img { width: 35px; height: 41px; object-fit: contain; }
.culture-brand span { display: grid; gap: 2px; }
.culture-brand b { font-size: 13px; letter-spacing: .12em; white-space: nowrap; }
.culture-brand small { color: var(--green-light); font-family: Georgia, 'Times New Roman', serif; font-size: 10px; font-style: italic; letter-spacing: .18em; }
.header-action { grid-column: 4; justify-self: end; border-right: 0; border-left: 1px solid var(--line-soft); }
.culture-menu {
  width: min(440px, 100vw);
  position: fixed;
  z-index: 99;
  top: var(--header-height);
  left: 0;
  display: grid;
  visibility: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #070707;
  opacity: 0;
  transform: translateY(-12px);
  transition: .28s ease;
}
.culture-menu.open { visibility: visible; opacity: 1; transform: translateY(0); }
.culture-menu a { padding: 21px 28px; border-top: 1px solid var(--line-soft); color: #d7d6d1; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.culture-menu a:hover { color: white; background: var(--green); }

.culture-opening {
  min-height: 520px;
  display: grid;
  place-items: center;
  position: relative;
  padding: 115px 24px 145px;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.culture-opening h1 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(48px, 6vw, 92px);
  font-weight: 400;
  letter-spacing: -.045em;
}
.opening-signature { position: absolute; bottom: 44px; left: 50%; display: grid; justify-items: center; gap: 10px; transform: translateX(-50%); }
.opening-signature img { width: 35px; height: 41px; object-fit: contain; opacity: .42; filter: grayscale(1); }
.opening-signature span { color: #848480; font-size: 8px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }

.featured-stories { overflow: hidden; padding: 0 0 78px; }
.culture-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(50vw - 12px);
  gap: 1px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.culture-track::-webkit-scrollbar { display: none; }
.lead-story {
  min-height: 720px;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--black);
  scroll-snap-align: start;
}
.lead-story > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.8,.2,1), filter .8s ease; }
.lead-story:nth-child(1) > img { object-position: 57% center; }
.lead-story:nth-child(2) > img { object-position: center 30%; }
.lead-story:nth-child(3) > img { object-position: center 40%; }
.lead-story:hover > img { transform: scale(1.025); filter: saturate(.82); }
.story-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.18) 52%, rgba(0,0,0,.92) 100%); }
.story-category {
  min-width: 116px;
  position: absolute;
  z-index: 4;
  top: 0;
  left: 50%;
  padding: 12px 20px 11px;
  background: var(--green);
  color: white;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .15em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.story-copy { max-width: 590px; position: absolute; z-index: 3; right: 58px; bottom: 54px; left: 58px; }
.story-copy > p:first-child,
.journal-copy > p { margin: 0 0 11px; color: #d0d0cc; font-size: 9px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.story-copy h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(48px, 4.3vw, 74px); font-weight: 400; line-height: .95; letter-spacing: -.045em; }
.story-summary { max-width: 520px; margin: 23px 0 27px; color: #d4d4cf; font-family: Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.5; }
.story-copy a,
.finale-copy a { min-width: 154px; display: inline-flex; justify-content: center; padding: 14px 22px 13px; border: 1px solid rgba(255,255,255,.75); font-size: 8px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; transition: .25s ease; }
.story-copy a:hover,
.finale-copy a:hover { background: white; color: black; }
.track-controls { width: min(600px, calc(100% - 48px)); display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 22px; margin: 44px auto 0; }
.track-controls button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.track-controls button:hover { border-color: white; background: white; color: black; }
.track-progress { height: 1px; overflow: hidden; background: var(--line); }
.track-progress span { width: 34%; height: 100%; display: block; background: white; transition: transform .3s ease, width .3s ease; }

.culture-statement { max-width: 1520px; margin: 0 auto; padding: 150px 80px 180px; border-top: 1px solid var(--line-soft); text-align: center; }
.culture-statement > p,
.latest-header > p { margin: 0 0 36px; color: var(--green-light); font-size: 8px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.culture-statement h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(54px, 7.5vw, 118px); font-weight: 400; line-height: .92; letter-spacing: -.05em; text-wrap: balance; }
.statement-copy { max-width: 900px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 70px; margin: 66px auto 0; color: #a9a9a4; text-align: left; }
.statement-copy p { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 17px; line-height: 1.75; }

.latest-stories { padding: 110px 46px 150px; border-top: 1px solid var(--line); }
.latest-header { margin-bottom: 72px; text-align: center; }
.latest-header > p { margin-bottom: 21px; }
.latest-header h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(54px, 6vw, 90px); font-weight: 400; letter-spacing: -.045em; }
.story-filters { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto 45px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-filters button { min-height: 56px; padding: 0 28px; border: 0; border-right: 1px solid var(--line-soft); background: transparent; color: #90908c; font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.story-filters button:first-child { border-left: 1px solid var(--line-soft); }
.story-filters button:hover,
.story-filters button.active { background: var(--green); color: white; }
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.journal-story { min-height: 650px; position: relative; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.journal-story[hidden] { display: none; }
.journal-story > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1), filter .7s ease; }
.journal-story:nth-child(1) > img { object-position: center 30%; }
.journal-story:nth-child(2) > img { object-position: center; }
.journal-story:nth-child(3) > img { object-position: center 26%; }
.journal-story:nth-child(4) > img { object-position: 54% center; }
.journal-story:nth-child(5) > img { object-position: center 22%; }
.journal-story:nth-child(6) > img { object-position: center 40%; }
.journal-story:hover > img { transform: scale(1.025); filter: saturate(.85); }
.journal-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.03) 35%, rgba(0,0,0,.86) 100%); }
.journal-copy { position: absolute; z-index: 3; right: 45px; bottom: 40px; left: 45px; }
.journal-copy h3 { max-width: 700px; margin: 0 0 23px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(35px, 3.2vw, 56px); font-weight: 400; line-height: 1.03; letter-spacing: -.035em; }
.journal-copy span { display: inline-block; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.7); font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }

.culture-finale { min-height: 780px; position: relative; display: grid; place-items: center; overflow: hidden; text-align: center; }
.culture-finale > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center 43%; }
.finale-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.33), rgba(0,0,0,.76)); }
.finale-copy { position: relative; z-index: 2; padding: 80px 24px; }
.finale-copy > p { margin: 0 0 25px; color: #d0d0cb; font-size: 8px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.finale-copy h2 { margin: 0 0 42px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(58px, 8vw, 126px); font-weight: 400; line-height: .86; letter-spacing: -.055em; }

.culture-footer { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 70px; padding: 85px 60px 36px; border-top: 1px solid var(--line); background: #030303; }
.culture-footer > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 14px; }
.culture-footer > div > p { margin: 0 0 18px; color: #777773; font-size: 8px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.culture-footer > div > a { color: #d3d3ce; font-family: Georgia, 'Times New Roman', serif; font-size: 14px; }
.culture-footer > div > a:hover { color: white; text-decoration: underline; text-underline-offset: 5px; }
.footer-brand img { width: 62px; margin-bottom: 30px; }
.footer-brand p { max-width: 330px; color: #a0a09b !important; font-family: Georgia, 'Times New Roman', serif; font-size: 15px !important; font-weight: 400 !important; line-height: 1.6; letter-spacing: 0 !important; text-transform: none !important; }
.culture-footer small { grid-column: 1 / -1; padding-top: 50px; border-top: 1px solid var(--line-soft); color: #656561; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }

@media (max-width: 900px) {
  :root { --header-height: 68px; }
  .culture-header { grid-template-columns: auto 1fr auto; }
  .header-control:first-child { display: none; }
  .menu-button { grid-column: 1; padding: 0 20px; }
  .culture-brand { gap: 8px; }
  .culture-brand img { width: 29px; height: 34px; }
  .culture-brand b { font-size: 10px; }
  .culture-brand small { font-size: 8px; }
  .header-action { grid-column: 3; padding: 0 20px; }
  .culture-opening { min-height: 420px; }
  .culture-track { grid-auto-columns: 78vw; }
  .lead-story { min-height: 640px; }
  .culture-statement { padding: 120px 45px 140px; }
  .story-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .story-filters button { flex: 0 0 auto; }
  .journal-story { min-height: 550px; }
  .culture-footer { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 650px) {
  .menu-button { padding: 0 17px; font-size: 0; }
  .menu-button span { font-size: 17px; }
  .header-action { padding: 0 16px; font-size: 0; }
  .header-action span { font-size: 17px; }
  .culture-brand span { display: none; }
  .culture-brand img { width: 34px; height: 40px; }
  .culture-opening { min-height: 390px; padding-inline: 25px; }
  .culture-opening h1 { font-size: 48px; line-height: .98; }
  .culture-track { grid-auto-columns: 89vw; }
  .lead-story { min-height: 610px; }
  .story-copy { right: 26px; bottom: 34px; left: 26px; }
  .story-copy h2 { font-size: 47px; }
  .story-summary { font-size: 14px; }
  .culture-statement { padding: 100px 24px 115px; }
  .culture-statement h2 { font-size: 50px; }
  .statement-copy { grid-template-columns: 1fr; gap: 25px; margin-top: 48px; }
  .statement-copy p { font-size: 15px; }
  .latest-stories { padding: 90px 18px 110px; }
  .latest-header { margin-bottom: 50px; }
  .latest-header h2 { font-size: 52px; }
  .story-grid { grid-template-columns: 1fr; }
  .journal-story { min-height: 530px; }
  .journal-copy { right: 25px; bottom: 28px; left: 25px; }
  .journal-copy h3 { font-size: 36px; }
  .culture-finale { min-height: 650px; }
  .finale-copy h2 { font-size: 58px; }
  .culture-footer { grid-template-columns: 1fr; gap: 42px; padding: 68px 26px 30px; }
  .culture-footer small { padding-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}