/* Layout measurements come from approved Figma frame 75:21297, at 1920px. */
.campaign-hero {position:relative; overflow:hidden; min-height:950px; background:var(--bg01) url('../img/hero-bg.png') center top / 1920px auto no-repeat; text-align:center;}
.campaign-hero__content {display:grid; grid-template-columns:1fr; position:relative; z-index:1; padding-top:56px;}
.campaign-hero__label, .campaign-footer__label {place-self:start center; padding:11px 37px 4px 36px; border-radius:30px; color:var(--bg03); background:var(--main-color); font-size:33px; line-height:1;}
.campaign-hero__title {position:relative; z-index:1; margin-top:30px; color:var(--main-color); font-size:90px; line-height:1;}
.campaign-hero__art {width:1186px; margin:-47px auto 0;}
.campaign-hero__description {position:relative; margin:-36px auto 0; color:var(--gray01); font-size:24px; line-height:1.667;}
.campaign-hero__description span {color:var(--main-color);}
.campaign-hero__partners {display:flex; align-items:center; position:absolute; top:50px; left:60px; z-index:2;}
.campaign-hero__partners a + a {margin-left:30px;}
.campaign-hero__partners img {width:125px;}
.campaign-hero__partners a:last-child img {width:101px;}
.campaign-nav {position:relative; z-index:3; margin:-35px auto 0; width:1045px; max-width:92%;}
.campaign-nav__list {display:grid; grid-template-columns:repeat(3, 1fr); gap:20px 4.78%;}
.campaign-nav__link {display:block; padding:18px 12px; border:3px solid var(--main-color); border-radius:20px; color:var(--main-color); background:var(--bg03); text-align:center; font-size:30px; line-height:1.067;}
.campaign-nav__link[aria-current='page'], .campaign-nav__link:hover {color:var(--bg03); background:var(--main-color);}
.campaign-video {padding:182px 0 166px;}
.campaign-video__scene {display:grid; grid-template-columns:25% 46.1% 25.25%; gap:0 1.82%; align-items:end; max-width:1822px; margin:0 auto;}
.campaign-video__laptop {display:grid; position:relative;}
.campaign-video__laptop > * {grid-area:1/1;}
.campaign-video__screen {place-self:start center; position:relative; width:77.62%; margin-top:4.17%; aspect-ratio:1 / 0.5982; border:0; background:var(--gray01);}
.campaign-video__screen img {width:100%; height:100%; object-fit:cover;}
.campaign-video__play {display:grid; position:absolute; inset:0; place-items:center; background:none; border:0;}
.campaign-video__play img {width:72px; height:auto; aspect-ratio:1 / 1; filter:drop-shadow(0 2px 6px var(--gray01));}
.campaign-video__frame {display:block; width:100%; height:100%; border:0;}
.campaign-video__book {position:relative; place-self:start center; width:84.4%; margin-top:47.74%; pointer-events:none;}
.section-title {text-align:center; font-size:56px; line-height:1;}
.section-title span {color:var(--main-color);}
.campaign-why {padding-bottom:100px;}
.campaign-why__list {display:grid; grid-template-columns:repeat(4, 1fr); gap:30px 3.7251%; position:relative; margin-top:60px; padding:0 32px 30px;}
/* The pink bar sits behind the circles, matching Figma's 1415x30 rounded rectangle. */
.campaign-why__list::after {content:''; position:absolute; right:0; bottom:0; left:0; height:30px; border-radius:50px; background:var(--bg04);}
.campaign-why__item {aspect-ratio:1 / 1; display:flex; flex-direction:column; align-items:center; position:relative; z-index:1; border:2px solid var(--main-color); border-radius:50%; padding:50px 12px 30px; margin-bottom:-18px; background:var(--bg03);}
.campaign-why__item img {height:120px; width:auto;}
.campaign-why__item p {margin-top:20px; color:var(--main-color); font-size:24px; line-height:1.417; text-align:center;}
.campaign-statistics {padding:100px 0; background:var(--bg02); text-align:center;}
.campaign-statistics__figure {margin-top:60px;}
.campaign-statistics__figure > img {width:100%;}
.campaign-statistics__figure--preference > img {width:900px; margin:0 auto;}
.campaign-statistics__caption {margin:60px auto 0; font-size:24px; line-height:1;}
/* Figma's three-line caption frame is 92px tall, so its leading is 30.67px. */
.campaign-statistics__figure:nth-of-type(2) .campaign-statistics__caption {line-height:1.417;}
.campaign-statistics__source {display:block; margin-top:30px; color:var(--gray04); font-size:17px; line-height:1;}
.campaign-process {padding:100px 0;}
.campaign-process__list {display:grid; grid-template-columns:repeat(5, 1fr); gap:30px 3.53%; margin-top:60px;}
.campaign-process__item {position:relative; text-align:center;}
.campaign-process__circle {display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; aspect-ratio:1 / 1; border:2px solid var(--main-color); border-radius:50%;}
.campaign-process__item:nth-child(odd) .campaign-process__circle {border-color:var(--third);}
.campaign-process__item:nth-child(odd) .campaign-process__circle p {color:var(--third);}
.campaign-process__circle img {height:110px; max-width:75%; width:auto;}
.campaign-process__circle p {margin-top:24px; color:var(--main-color); font-size:24px; line-height:1;}
.campaign-process__step {display:block; max-width:155px; margin:22px auto 0; padding:11px 8px; border-radius:30px; color:var(--bg03); background:var(--main-color); font-size:24px; line-height:1;}
.campaign-process__item:nth-child(odd) .campaign-process__step {background:var(--secondary);}
/* Connecting arrows sit in the gap between circles; Figma alternates blue and pink. */
.campaign-process__item:not(:last-child) .campaign-process__circle::after {content:''; position:absolute; top:calc(50% - 11.5px); right:-41.5px; width:29px; height:23px; background:url('../img/step-arrow-pink.svg') center / contain no-repeat;}
.campaign-process__item:nth-child(odd) .campaign-process__circle::after {background-image:url('../img/step-arrow-blue.svg');}
.campaign-catalog {padding:100px 0; background:var(--bg01);}
.campaign-catalog__title {font-size:56px;}
.campaign-catalog__tabs {display:grid; grid-template-columns:repeat(4, 1fr); gap:20px 1.59%; max-width:1260px; margin:60px auto 0;}
.campaign-catalog__tab {padding:16px 8px 10px; border:2px solid var(--main-color); border-radius:20px; color:var(--main-color); background:var(--bg03); font-size:30px; line-height:1;}
.campaign-catalog__tab[aria-selected='true'], .campaign-catalog__tab:hover {color:var(--bg03); background:var(--main-color);}
.campaign-catalog__panel {margin-top:80px;}
.campaign-catalog__books {display:grid; grid-template-columns:repeat(5, 14.49%); justify-content:space-between; gap:60px 6.85%;}
.campaign-book {display:grid; aspect-ratio:1 / 1.4814; container-type:inline-size;}
.campaign-book > * {grid-area:1/1;}
.campaign-book__cover {width:100%;}
/* Card-relative type keeps all titles inside the illustrated label at intermediate widths. */
.campaign-book__title {position:relative; margin:13.65% 15% 0 20.49%; font-size:10.73cqw; line-height:1.364; color:var(--main-color); word-break:normal; white-space:pre-line; overflow-wrap:anywhere;}
.campaign-book__title--long {font-size:8.78cqw;}
.campaign-book__edition {position:relative; align-self:start; margin:97.56% 12% 0 22.44%; color:var(--bg03); font-size:4.88cqw; line-height:1;}
.campaign-catalog__empty {padding:70px 20px; border:1px solid var(--main-color); border-radius:20px; background:var(--bg03); text-align:center;}
.campaign-distribution {padding:100px 0;}
.campaign-distribution__summary {display:grid; grid-template-columns:20% 1fr 20%; align-items:center; gap:0 3%; margin-top:60px; padding:52px 40px; border:2px solid var(--main-color); border-radius:30px; background:var(--bg01); text-align:center;}
/* Each line is its own block so the 30px label and 70px figure keep independent leading. */
.campaign-distribution__count {position:relative;}
.campaign-distribution__count-label {display:block; font-size:30px; line-height:1;}
.campaign-distribution__count-value {display:block; position:relative; margin-top:21px; color:var(--main-color); font-size:70px; line-height:1;}
.campaign-distribution__count-unit {position:relative; color:var(--gray01); font-size:40px;}
.campaign-distribution__count strong {position:relative; font-weight:400;}
/* Highlight bar sits behind the figure at half opacity, as measured from the design capture. */
.campaign-distribution__count-value::before {content:''; position:absolute; top:49px; left:50%; width:164px; height:17px; margin-left:-79px; border-radius:10px; background:var(--main-color); opacity:0.5;}
.campaign-distribution__copy {margin-top:23px; font-size:20px; line-height:1.5; color:var(--gray04); font-weight:500;}
.campaign-distribution__copy span {color:var(--main-color); font-weight:700;}
.campaign-distribution__libraries {display:grid; grid-template-columns:repeat(4, 1fr); gap:30px 2.54%; margin-top:40px; text-align:center;}
.campaign-library__icon {display:grid; place-items:center; padding:76px 20px; border:2px solid var(--main-color); border-radius:40px;}
.campaign-library__icon img {height:90px; width:auto;}
.campaign-library h3 {margin-top:30px; color:var(--main-color); font-size:28px; line-height:1;}
/* Figma tightens the leading only on the two-line institution names. */
.campaign-library h3.campaign-library__name--tight {line-height:1.357;}
.campaign-library p {margin-top:15px; font-size:20px; line-height:1;}
.campaign-footer {display:grid; justify-items:center; padding:40px 20px; background:var(--bg01) url('../img/footer-background.png') center / cover no-repeat; text-align:center;}
.campaign-footer__title {margin-top:20px; color:var(--main-color); font-size:60px; line-height:1;}
.campaign-footer__art {width:596px; margin-top:2px;}
.campaign-footer__social {display:flex; align-items:center; margin-top:14px;}
.campaign-footer__social li + li {margin-left:25px;}
.campaign-footer__social img {height:43px; width:auto;}
@media (max-width:1640px) {
  /* Circle content must stay shorter than the grid column, which narrows below 1455. */
  .campaign-why__item {justify-content:center; min-width:0; padding:28px 12px 30px;}
  .campaign-why__item img {height:95px;}
  .campaign-video__scene {width:95%;}
  .campaign-hero__partners {top:30px; left:30px;}
}
@media (max-width:1320px) {
  .campaign-hero__partners {position:relative; top:auto; left:auto; padding:25px 4%;}
  .campaign-hero__content {padding-top:0;}
  .campaign-hero__title {font-size:72px;}
  /* Leaves room for the nav's -35px overlap so it never covers the description. */
  .campaign-hero {min-height:900px; padding-bottom:73px;}
  .campaign-why__item {justify-content:center; min-width:0; padding:25px 10px;}
  .campaign-why__item img {height:75px;}
  .campaign-why__item p {margin-top:15px; font-size:20px;}
  .section-title, .campaign-catalog__title {font-size:46px;}
  .campaign-process__item:not(:last-child) .campaign-process__circle::after {top:calc(50% - 8px); right:-31px; width:20px; height:16px;}
  .campaign-distribution__summary {padding:40px 25px;}
}
@media (max-width:1080px) {
  .campaign-hero {min-height:0; padding-bottom:90px;}
  .campaign-hero__title {font-size:64px;}
  .campaign-hero__art {margin-top:-20px; width:100%;}
  .campaign-hero__description {margin-top:-20px; padding:0 4%; font-size:20px;}
  .campaign-nav__link {font-size:26px;}
  .campaign-video {padding:100px 0;}
  /* The circles are aspect-ratio boxes, so their content height sets the minimum column width. */
  .campaign-why__list {padding:0 0 30px;}
  .campaign-why__item {justify-content:center; min-width:0; padding:15px 10px;}
  .campaign-why__item img {height:55px;}
  .campaign-why__item p {margin-top:12px; font-size:16px;}
  .campaign-process__circle p {font-size:20px;}
  .campaign-process__circle img {height:70px;}
  .campaign-process__circle p {margin-top:15px;}
  .campaign-catalog__tab {font-size:24px;}
  .campaign-catalog__books {grid-template-columns:repeat(4, 19%); gap:45px 8%;}
  .campaign-distribution__summary {grid-template-columns:15% 1fr 15%;}
  /* Four columns cannot hold the longest institution name below 1080. */
  .campaign-distribution__libraries {grid-template-columns:repeat(2, 1fr); gap:30px 4%;}
  .campaign-library h3 {font-size:23px;}
  .campaign-library p {font-size:16px; line-height:1.4;}
}
@media (max-width:768px) {
  body {font-size:18px;}
  .campaign-hero__partners img {width:95px;}
  .campaign-hero__partners a:last-child img {width:78px;}
  .campaign-hero__label, .campaign-footer__label {font-size:20px; padding:8px 20px;}
  .campaign-hero__title {margin-top:20px; font-size:48px;}
  .campaign-hero__art {margin-top:-10px;}
  .campaign-hero__description {margin-top:-10px; font-size:17px; line-height:1.6;}
  .campaign-nav {margin-top:-25px;}
  .campaign-nav__list {gap:10px 3%;}
  .campaign-nav__link {padding:12px 8px; font-size:22px; line-height:1.182; border-radius:12px;}
  .campaign-video {padding:70px 0;}
  .campaign-video__scene {grid-template-columns:12% 72% 12%; gap:0 2%;}
  .campaign-video__play img {width:44px;}
  .section-title, .campaign-catalog__title {font-size:34px; line-height:1.3;}
  .campaign-why {padding-bottom:60px;}
  .campaign-why__list {grid-template-columns:repeat(2, 1fr); gap:25px 5%; margin-top:35px; padding:0;}
  .campaign-why__list::after {display:none;}
  .campaign-why__item {max-width:260px; width:100%; margin:0 auto; justify-content:center; padding:20px 12px;}
  .campaign-why__item img {height:90px;}
  .campaign-why__item p {margin-top:15px;}
  .campaign-statistics, .campaign-process, .campaign-catalog, .campaign-distribution {padding:60px 0;}
  .campaign-statistics__figure {margin-top:35px;}
  .campaign-statistics__caption {margin-top:25px; font-size:18px; line-height:1.5;}
  .campaign-statistics__source {margin-top:18px; font-size:12px; line-height:1.5;}
  .campaign-process__list {grid-template-columns:repeat(3, 1fr); gap:30px 6%; margin-top:35px;}
  .campaign-process__item:not(:last-child) .campaign-process__circle::after {display:none;}
  .campaign-process__step {font-size:18px; margin-top:15px; padding:8px;}
  .campaign-catalog__tabs {grid-template-columns:repeat(2, 1fr); gap:12px 3%; margin-top:35px;}
  .campaign-catalog__tab {padding:10px 8px; font-size:21px; line-height:1.238; border-radius:12px;}
  .campaign-catalog__panel {margin-top:40px;}
  .campaign-catalog__books {grid-template-columns:repeat(3, 27%); gap:35px 9.5%;}
  .campaign-distribution__summary {margin-top:35px; padding:30px 18px; grid-template-columns:12% 1fr 12%; gap:0 2%; border-radius:20px;}
  .campaign-distribution__count-label {font-size:26px;}
  .campaign-distribution__count-value {margin-top:16px; font-size:56px;}
  .campaign-distribution__count-unit {font-size:32px;}
  .campaign-distribution__count-value::before {top:39px; width:132px; height:14px; margin-left:-63px;}
  .campaign-distribution__copy {font-size:16px; margin-top:22px;}
  .campaign-distribution__libraries {grid-template-columns:repeat(2, 1fr); gap:30px 5%; margin-top:30px;}
  .campaign-library__icon {padding:35px 20px; border-radius:25px;}
  .campaign-library h3 {margin-top:20px;}
  .campaign-footer__title {font-size:40px; margin-top:18px;}
  .campaign-footer__art {width:450px;}
  .campaign-footer__social {margin-top:10px;}
  .campaign-footer__social img {height:33px;}
  .campaign-footer__social li + li {margin-left:15px;}
}
@media (max-width:500px) {
  .campaign-hero__title {font-size:37px;}
  .campaign-hero {padding-bottom:65px;}
  .campaign-hero__description {font-size:15px; margin-top:0;}
  .campaign-hero__partners {padding-bottom:30px;}
  .campaign-nav__link {font-size:20px;}
  .section-title, .campaign-catalog__title {font-size:28px;}
  .campaign-why__item img {height:65px;}
  .campaign-why__item p {font-size:17px; margin-top:10px;}
  .campaign-process__list {grid-template-columns:repeat(2, 1fr); gap:25px 8%;}
  .campaign-catalog__books {grid-template-columns:repeat(2, 42%); gap:30px 16%;}
  .campaign-catalog__tab {font-size:19px;}
  .campaign-distribution__summary {grid-template-columns:1fr;}
  .campaign-distribution__summary > img {display:none;}
  /* One column keeps the longest institution name on a single line on small phones. */
  .campaign-distribution__libraries {grid-template-columns:1fr; gap:25px;}
  .campaign-library__icon {padding:28px 20px;}
  .campaign-library__icon img {height:70px;}
  .campaign-library h3 {font-size:20px;}
  .campaign-library p {font-size:14px;}
  .campaign-footer__title {font-size:34px;}
  .campaign-footer__social img {height:29px;}
  .campaign-footer__social li + li {margin-left:10px;}
}
/* Story & review list — measurements from Figma frames 78:9544 / 128:26975. */
.story {margin-top:-35px; padding:185px 0 143px; background:var(--bg05);}
/* Figma spaces card boxes 70px apart; the artwork is 24px taller than the box. */
.story__list {display:grid; gap:46px;}
/* Each card is the exported open-book artwork; its two halves align to the fold. */
.story-card {display:grid; grid-template-columns:49.95% 50.05%; align-items:center; aspect-ratio:1 / 0.4734; background:url('../img/story-book-01.svg') center / contain no-repeat;}
.story-card--book2 {background-image:url('../img/story-book-02.svg');}
.story-card--book3 {background-image:url('../img/story-book-03.svg');}
.story-card__photo {width:77.4%; margin-left:19.26%; aspect-ratio:1 / 0.6667; overflow:hidden;}
.story-card__photo img {width:100%; height:100%; object-fit:cover;}
.story-card__body {width:84.27%; margin-left:0.1%; text-align:center;}
.story-card__badge {display:grid; place-items:center; width:180px; height:50px; margin:0 auto; border-radius:50px; color:var(--bg03); background:var(--main-color); font-size:26px; line-height:1;}
/* Longer labels get a wider pill; all pills keep the same pink. */
.story-card__badge--mid {width:220px;}
.story-card__badge--wide {width:240px;}
/* Figma's two-line title frame is 90px tall, so its leading is 45px. */
.story-card__title {margin-top:20px; color:var(--gray01); font-size:40px; line-height:1.125;}
.story-card__title span {color:var(--main-color);}
.story-card__more {display:grid; place-items:center; width:120px; height:46px; margin:40px auto 0; border:1px solid var(--main-color); border-radius:5px; color:var(--main-color); background:var(--bg06); font-size:22px; line-height:1;}
.story-card__more:hover {color:var(--bg03); background:var(--main-color);}
@media (max-width:1080px) {
  .story {padding:70px 0 100px;}
  .story__list {gap:45px;}
  .story-card__badge {width:150px; height:42px; font-size:21px;}
  .story-card__badge--mid {width:183px;}
  .story-card__badge--wide {width:200px;}
  .story-card__title {margin-top:15px; font-size:30px;}
  .story-card__more {width:104px; height:40px; margin-top:26px; font-size:18px;}
}
@media (max-width:768px) {
  .story {padding:50px 0 70px;}
  .story__list {gap:30px;}
  .story-card__badge {width:118px; height:34px; font-size:16px;}
  .story-card__badge--mid {width:144px;}
  .story-card__badge--wide {width:157px;}
  .story-card__title {margin-top:10px; font-size:21px;}
  .story-card__more {width:82px; height:32px; margin-top:16px; font-size:14px; border-radius:4px;}
}
@media (max-width:500px) {
  .story-card__badge {width:92px; height:27px; font-size:12px;}
  .story-card__badge--mid {width:113px;}
  .story-card__badge--wide {width:123px;}
  .story-card__title {margin-top:7px; font-size:16px;}
  .story-card__more {width:64px; height:26px; margin-top:11px; font-size:11px;}
}
/* Review detail — measurements from Figma frames 128:27887 / 128:30120. */
/* Review pages start their heading 79px below the card edge and run 1300px wide. */
.story-detail__card.story-detail__card--review {margin-top:-4px; padding-top:71px;}
.review-detail__wide {width:1300px; max-width:100%; margin:0 auto;}
/* Cloud artwork decorates the card's top corners. */
.review-cloud {position:absolute; pointer-events:none;}
.review-cloud--a {top:53px; left:3.18%; width:15.48%;}
.review-cloud--b {top:120px; left:76.82%; width:10.18%;}
.review-cloud--c {top:269px; left:3.18%; width:7.63%;}
.review-item__meta strong {font-weight:700;}
.review-item__book {color:var(--main-color); font-weight:700;}
.review-item__author {font-size:14px;}
.review-detail__lead {margin-top:53px; font-size:20px; font-weight:700; line-height:1.5; text-align:center;}
.review-list {display:grid; gap:60px; margin-top:55px;}
.review-item {display:grid; grid-template-columns:300px 1fr; gap:0 50px; align-items:start; width:100%; max-width:92%; margin:0 auto; padding:50px 72px; border:1px solid var(--main-color); border-radius:20px; background:var(--bg03); text-align:left;}
.review-item--reverse {grid-template-columns:1fr 300px;}
.review-item--reverse .review-item__cover {order:2;}
.review-item__cover {display:grid; place-items:center; position:relative; width:300px; aspect-ratio:1 / 1; border:3px solid var(--bg07); border-radius:20px;}
.review-item__cover img {width:210px;}
.review-item__body {margin-top:8px;}
/* Figma's three meta lines sit 32px apart but the block ends at the last line's baseline. */
.review-item__meta {margin-bottom:-15px; font-size:17px; line-height:1.912;}
/* Figma keeps the "후기 :" label on its own, with the body indented 45px beside it. */
/* Flex keeps the body indented to the label's own width at every font size. */
.review-item__text {display:flex; margin-top:50px; font-size:17px; line-height:1.588;}
.review-item__label {flex-shrink:0; white-space:pre;}
.review-cards {display:grid; gap:60px; margin-top:50px;}
.review-cards img {width:100%; border:1px solid var(--main-color);}
@media (max-width:1080px) {
  /* Clouds keep their % width but need a shorter offset on narrower cards. */
  .review-cloud--a {top:38px;}
  .review-cloud--b {top:86px;}
  .review-cloud--c {top:193px;}
  .review-detail__lead {margin-top:40px; font-size:17px;}
  .review-list, .review-cards {gap:40px; margin-top:35px;}
  .review-item {grid-template-columns:220px 1fr; gap:0 35px; padding:35px 40px;}
  .review-item--reverse {grid-template-columns:1fr 220px;}
  .review-item__cover {width:220px;}
  .review-item__cover img {width:154px;}
  .review-item__meta, .review-item__text {font-size:15px;}
  .review-item__text {margin-top:30px;}
}
@media (max-width:768px) {
  .review-cloud {display:none;}
  .review-detail__lead {margin-top:28px; font-size:14px;}
  .review-list, .review-cards {gap:25px; margin-top:25px;}
  .review-item, .review-item--reverse {grid-template-columns:1fr; gap:20px; padding:25px 20px; justify-items:center; text-align:center;}
  .review-item--reverse .review-item__cover {order:0;}
  .review-item__cover {width:170px;}
  .review-item__cover img {width:119px;}
  .review-item__body {margin-top:0; text-align:left;}
  .review-item__meta, .review-item__text {font-size:13px;}
  .review-item__text {margin-top:20px;}
}
/* Story detail pages — measurements from Figma frames 78:10491 / 78:12411 / 78:14326. */
/* The nav overlaps the hero by 35px, so the pink band starts where the hero ends. */
.story-detail {margin-top:-35px; padding:185px 0 100px; background:var(--bg05);}
.story-detail__card {position:relative; padding:95px 0 80px; border:10px solid var(--main-color); border-radius:20px; background:var(--bg03);}
.story-detail__body {width:1000px; max-width:92%; margin:0 auto; text-align:center;}
.story-detail__title {color:var(--main-color); font-size:46px; line-height:1;}
/* Review headings run two lines; Figma's frame is 102px tall. */
.story-detail__card--review .story-detail__title {line-height:1.217;}
/* Figma's text frame is 10px shorter than the CSS line box (first line 20px, then 30px). */
.story-detail__text {margin-top:40px; margin-bottom:-10px; font-size:20px; line-height:1.5;}
.story-detail__text--bold {font-weight:700;}
/* Inline emphasis inside body copy, per Figma's character style overrides. */
.story-detail__body strong {font-weight:700;}
.story-detail__body .story-detail__em--xbold {font-weight:800;}
.story-detail__em--blue {color:var(--fourth);}
.story-detail__em--red {color:var(--third);}
.story-detail__text--lead {margin-top:79px;}
.story-detail__text--para {margin-top:60px;}
.story-detail__figures {display:grid; grid-template-columns:repeat(2, 49%); justify-content:space-between; gap:20px 2%; margin-top:80px;}
.story-detail__figure {aspect-ratio:1 / 0.6673; overflow:hidden;}
.story-detail__figure--tall {aspect-ratio:1 / 1.3327;}
.story-detail__figure--wide {aspect-ratio:1 / 0.45; margin-top:80px; overflow:hidden;}
.story-detail__figure img, .story-detail__figure--wide img {width:100%; height:100%; object-fit:cover;}
.story-detail__figure--pending {aspect-ratio:1 / 0.5; margin-top:80px; overflow:hidden;}
.story-detail__figure--pending img {width:100%; height:100%; object-fit:cover;}
.story-detail__figure--tall-wide {aspect-ratio:1 / 0.54; margin-top:80px; overflow:hidden;}
.story-detail__figure--portrait-wide {aspect-ratio:1 / 0.666; margin-top:80px; overflow:hidden;}
.story-detail__figure--tall-wide img, .story-detail__figure--portrait-wide img {width:100%; height:100%; object-fit:cover;}
.story-detail__rule {margin-top:80px; border-top:5px solid var(--main-color);}
.story-detail__rule + .story-detail__text {margin-top:80px;}
/* Platform table: Figma draws 2px pink rules between the caption, rows and columns. */
.story-links {width:100%; margin-top:40px; border:2px solid var(--main-color); border-collapse:collapse; table-layout:fixed;}
.story-links th {height:50px; padding:0 10px; border-bottom:2px solid var(--main-color); font-size:20px; font-weight:700; line-height:1;}
.story-links td {height:104px; padding:0 10px; border-top:2px solid var(--main-color); font-size:18px; line-height:1.222;}
.story-links td + td {border-left:2px solid var(--main-color);}
.story-links__item {display:inline-flex; align-items:flex-start; gap:5px; text-align:left;}
.story-links__item img {flex-shrink:0; width:20px; height:20px;}
.story-links td {font-weight:700;}
/* Only the first cell mixes weights: bold platform name, regular note beneath. */
.story-links tr:first-child td:first-child {font-weight:400;}
.story-links td strong {font-weight:700;}
.story-detail__note {margin-top:40px; font-size:20px; font-weight:700; line-height:1;}
.story-detail__closing {margin-top:40px; color:var(--gray01); font-size:32px; font-weight:700; line-height:1;}
.story-detail__closing--two-line {margin-top:60px; line-height:1.156;}
.story-detail__more {display:grid; place-items:center; width:200px; height:46px; margin:80px auto 0; border-radius:999px; color:var(--bg03); background:var(--main-color); font-size:24px; line-height:1;}
.story-detail__more:hover {background:var(--secondary);}
/* Decorative artwork sits in the card's side margins at fixed design coordinates. */
.story-detail__deco {position:absolute; pointer-events:none;}
.story-detail__deco--a {top:124px; left:4.8%; width:14.2%;}
.story-detail__deco--b {top:247px; left:85.58%; width:8.69%;}
.story-detail__deco--c {top:1120px; left:3.18%; width:8.69%;}
.story-detail__deco--d {top:1657px; left:87.7%; width:4.45%;}
@media (max-width:1320px) {
  .story-detail {padding:140px 0 80px;}
  .story-detail__card {padding:80px 0 70px;}
  .story-detail__title {font-size:38px;}
  .story-detail__closing {font-size:26px;}
}
@media (max-width:1080px) {
  .story-detail {padding:110px 0 70px;}
  .story-detail__card {padding:60px 0 55px;}
  .story-detail__title {font-size:30px;}
  .story-detail__text {margin-top:30px; font-size:17px;}
  .story-detail__text--lead {margin-top:50px;}
  .story-detail__text--para {margin-top:40px;}
  .story-detail__figures, .story-detail__figure--wide {margin-top:50px;}
  .story-detail__closing {margin-top:30px; font-size:21px;}
  .story-detail__more {width:170px; height:42px; margin-top:50px; font-size:20px;}
  .story-detail__deco {display:none;}
}
@media (max-width:768px) {
  .story-detail {padding:80px 0 50px;}
  .story-detail__card {padding:45px 0 40px;}
  .story-detail__title {font-size:23px;}
  .story-detail__text {margin-top:22px; font-size:14px;}
  .story-detail__text--lead {margin-top:35px;}
  .story-detail__text--para {margin-top:28px;}
  .story-detail__figures {grid-template-columns:1fr; gap:14px; margin-top:35px;}
  .story-detail__figure--wide {margin-top:35px;}
  .story-detail__closing {margin-top:22px; font-size:16px;}
  /* The fixed cell height and 18px type overflow a phone-width table. */
  .story-links {margin-top:25px;}
  .story-links th {height:auto; padding:12px 8px; font-size:16px;}
  .story-links td, .story-links tr:last-child td {height:auto; padding:14px 6px; font-size:13px;}
  .story-links__item {gap:4px;}
  .story-links__item img {width:16px; height:16px;}
  .story-detail__note {margin-top:22px; font-size:12px; line-height:1.4;}
  .story-detail__rule {margin-top:35px;}
  .story-detail__rule + .story-detail__text {margin-top:35px;}
  .story-detail__more {width:140px; height:36px; margin-top:35px; font-size:16px;}
}
@media (max-width:500px) {
  .story-links th {font-size:14px;}
  .story-links td, .story-links tr:last-child td {padding:12px 4px; font-size:11px;}
  .story-links__item {gap:3px;}
  .story-links__item img {width:14px; height:14px;}
  .story-detail__note {font-size:11px;}
}