/*
  Social: an editorial magazine. A masthead with a nameplate bar and a headline set across
  the full width between rules, then a cover spread with the contents, and the sections as
  numbered stories: the feed with a pull quote, articles as a tile grid, builds as a photo
  feature with a journal, people and the web in ruled columns. Photos are showcase images,
  never real riders' posts.
*/

.fp--social { --rule: rgba(244,243,238,0.18); --rule-2: rgba(244,243,238,0.5); }

/* ---------- Masthead ---------- */

.smast { padding: clamp(104px, 12vh, 150px) 0 0; }
.smast__bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 0; border-top: 3px solid var(--legend); border-bottom: 1px solid var(--rule-2); font: 700 13px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--legend-dim); }
.smast__bar span:first-child { color: var(--legend); }
.smast__strap { color: var(--signal); }
.smast h1 { margin: clamp(26px, 3vw, 56px) 0; font-size: clamp(3rem, 8.4vw, 13rem); font-weight: 900; letter-spacing: -0.05em; line-height: 0.88; max-width: 15ch; }
.smast__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 60px; align-items: center; padding: clamp(20px, 2vw, 32px) 0; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.smast__lede { margin: 0; font-size: clamp(1.15rem, 1.35vw, 1.7rem); line-height: 1.5; color: #dcdee2; max-width: 52rem; }

/* ---------- Cover spread and contents ---------- */

.sspread { padding: clamp(40px, 4vw, 80px) 0 clamp(70px, 7vw, 140px); }
.sspread__grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(320px, 1fr); gap: clamp(30px, 3.5vw, 90px); align-items: stretch; }
.sspread__cover { margin: 0; }
.sspread__cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 45%; }
.sspread figcaption, .sbuild figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--legend-dim); }
.sspread figcaption b, .sbuild figcaption b { font: 700 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); margin-right: 10px; }
.stoc { border-top: 3px solid var(--legend); display: flex; flex-direction: column; }
.stoc__head { margin: 0; padding: 14px 0; font: 700 13px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--legend); border-bottom: 1px solid var(--rule-2); }
.stoc ol { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
.stoc li { flex: 1; border-bottom: 1px solid var(--rule); }
.stoc a { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 4px 0; align-content: center; height: 100%; padding: clamp(14px, 1.3vw, 24px) 0; color: inherit; text-decoration: none; }
.stoc a span { grid-row: span 2; font-size: clamp(1.1rem, 1.2vw, 1.5rem); color: var(--signal); }
.stoc a b { font-size: clamp(1.25rem, 1.5vw, 2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--legend); }
.stoc a small { font-size: 14px; color: var(--legend-mute); }
.stoc a:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ---------- Shared story parts ---------- */

.skick { margin: 0 0 16px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); }
.fp--social main section:not(.ffinale) h2 { font-size: clamp(2.4rem, 4vw, 5.6rem); font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; margin: 0 0 26px; }
.fp--social main section:not(.ffinale) p:not(.skick):not(.stile__cat) { font-size: clamp(1.05rem, 1.15vw, 1.4rem); line-height: 1.65; color: #cfd2d6; max-width: 42rem; margin: 0; }
.squote { margin: 0; padding: 26px 0; border-top: 3px solid var(--legend); border-bottom: 1px solid var(--rule-2); }
.fp--social .squote p { font-size: clamp(1.8rem, 2.8vw, 3.8rem) !important; font-weight: 800; line-height: 1.12 !important; letter-spacing: -0.025em; color: var(--legend) !important; max-width: 18ch !important; }
.fp--social .squote--small p { font-size: clamp(1.4rem, 1.8vw, 2.4rem) !important; }

/* 01: the feed */
.sfeat { padding: clamp(70px, 7vw, 140px) 0; border-top: 1px solid var(--rule); }
.sfeat__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: clamp(30px, 4vw, 110px); align-items: center; }
.sdrop::first-letter { float: left; font-size: 4.6em; line-height: 0.82; font-weight: 900; margin: 6px 12px 0 0; color: var(--legend); }
.sfeat__phone .phone, .speople__phone .phone { --pw: clamp(230px, 14vw, 300px); }

/* 02: articles as tiles */
.sart { padding: clamp(70px, 7vw, 140px) 0; border-top: 1px solid var(--rule); }
.sart__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px clamp(30px, 4vw, 110px); align-items: end; padding-bottom: clamp(30px, 3vw, 50px); margin-bottom: clamp(30px, 3vw, 50px); border-bottom: 1px solid var(--rule-2); }
.sart__head h2 { margin-bottom: 0 !important; }
.sart__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2vw, 44px); }
.stile { margin: 0; padding-top: 0; }
.stile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.stile--lead img { aspect-ratio: 4 / 3; }
.stile__cat { margin: 16px 0 8px; font: 700 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); }
.stile h3 { margin: 0; font-size: clamp(1.15rem, 1.3vw, 1.7rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; }
.stile--lead h3 { font-size: clamp(1.6rem, 2.1vw, 2.9rem); line-height: 1.08; }

/* 03: builds */
.sbuild { padding: clamp(70px, 7vw, 140px) 0; border-top: 1px solid var(--rule); }
.sbuild__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 110px); align-items: start; }
.sbuild__photo { margin: 0; }
.sbuild__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.sjournal { list-style: none; margin: 34px 0 0; padding: 0; border-top: 3px solid var(--legend); }
.sjournal li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.sjournal span { font-size: 13px; color: var(--legend-mute); }
.sjournal b { font-size: clamp(1.05rem, 1.1vw, 1.3rem); color: var(--legend); }
.sjournal em { font-style: normal; color: var(--legend-dim); }

/* 04 and 05: people and the web */
.speople { padding: clamp(70px, 7vw, 140px) 0; border-top: 1px solid var(--rule); }
.speople__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: start; }
.speople__col { padding: 0 clamp(26px, 3.4vw, 90px); }
.speople__col + .speople__col { border-left: 1px solid var(--rule); }
.speople__col .squote { margin-top: 34px; }
.speople__phone { padding-right: clamp(10px, 1vw, 20px); }
.spub { margin: 34px 0 0; border-top: 3px solid var(--legend); }
.spub div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.spub dt { font-weight: 700; color: var(--legend); }
.spub dd { margin: 0; font: 700 12px/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); }
.spub .is-private dd { color: var(--legend-mute); }

/* ---------- Narrower screens ---------- */

@media (max-width: 1400px) {
  .sart__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stile--lead { grid-column: 1 / -1; }
  .stile--lead img { aspect-ratio: 21 / 9; }
  .sart__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .speople__grid { grid-template-columns: auto minmax(0, 1fr); }
  .speople__web { grid-column: 2; border-left: 0 !important; margin-top: 60px; padding-top: 60px; border-top: 1px solid var(--rule); }
}

@media (max-width: 1100px) {
  .sfeat__grid { grid-template-columns: minmax(0, 1fr) auto; }
  .sfeat .squote { grid-column: 1; }
  .sfeat__phone { grid-row: 1 / span 2; grid-column: 2; }
  .sspread__grid, .sbuild__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .smast__bar span:last-child { display: none; }
  .smast__foot { grid-template-columns: minmax(0, 1fr); }
  .sfeat__grid { grid-template-columns: minmax(0, 1fr); }
  .sfeat__phone { grid-row: auto; grid-column: auto; justify-self: start; }
  .sfeat__phone .phone, .speople__phone .phone { --pw: min(56vw, 240px); }
  .sart__head { grid-template-columns: minmax(0, 1fr); }
  .sart__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stile--lead img { aspect-ratio: 3 / 2; }
  .speople__grid { grid-template-columns: minmax(0, 1fr); }
  .speople__col { padding: 0; }
  .speople__col, .speople__web { grid-column: auto; margin-top: 50px; }
  .speople__col + .speople__col { padding-top: 50px; border-top: 1px solid var(--rule); }
}

@media (max-width: 600px) {
  .smast__bar { font-size: 11px; }
  .sart__grid { grid-template-columns: minmax(0, 1fr); }
  .sjournal li { grid-template-columns: 5.4rem minmax(0, 1fr) auto; }
}