html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 120px;
}

/* ==========================================================
   Chronicle
========================================================== */

.chronicle {
    padding: 40px 0;
    background: #efefef;
    font-family: "Montserrat", sans-serif;
    overflow: visible !important;
}

/* ==========================================================
   TOC Toggle Button
========================================================== */

.toc-toggle {
    position: fixed;
    top: 180px;          /* Adjust to sit below your header */
    right: 20px;         /* Distance from the right edge */

    z-index: 1101;

    padding: 10px 18px;

    background: #FD8813;
    color: #fff;

    border: none;
    border-radius: 6px;

    font-weight: 600;
    cursor: pointer;

    box-shadow: 0 4px 10px rgba(0,0,0,.2);
    transition: background .3s ease;
}

.toc-toggle:hover {
    background: #e67600;
}

/* ==========================================================
   Slide-out TOC
========================================================== */

.chronicle-toc {
    position: fixed;
    top: 170px;
    left: -370px;

    width: 350px;
    height: calc(100vh - 190px);

    z-index: 1100;

    transition: left .35s ease;
}

.chronicle-toc.open {
    left: 0;
}

.chronicle-toc .card {
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: 0 5px 20px rgba(0,0,0,.2);
}

.chronicle-toc .card-header {
    background: #FD8813;
    color: #fff;
    font-weight: bold;
}

.chronicle-toc .card-body {
    overflow-y: auto;
    background: #fde1c8;
}

.toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc-list li {
    margin-bottom: 12px;
}

.toc-list a {
    display: block;
    color: #3d3d3d;
    text-decoration: none;
    transition: .2s;
    padding: 4px 0;
}

.toc-list a:hover {
    color: #FD8813;
    padding-left: 8px;
}

/* ==========================================================
   Chronicle Content
========================================================== */

.chronicle-content {
    background: #fff;
    padding: 40px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

.chronicle-content img {
    display: block;
    margin: 0 auto 0;
    max-width: 100%;
}

.chronicle-content .page {
    margin-bottom: 10px;
}

/* ==========================================================
   Page 1
========================================================== */

.page1 {
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;;
    background-color: #fabd16;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 80px 40px;

    background-image: url("/images/chronicle/bg.webp");
    background-repeat: repeat;
}

.page1 h1 {
    text-align: center;
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 30px;
}

.page1 p {
    max-width: 600px;      /* Adjust as needed */
    margin: 0 auto 24px;
    text-align: left;
    text-indent: 20px;
    line-height: 1.8;
}

.page1 .page-footer {
    margin-top: 60px;
    max-width: 600px;      /* Adjust as needed */
    margin: 0 auto 24px;
}

.page1 .page-footer h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.2;
}

.page1 .page-footer p {
    margin: 0;
    text-indent: 0;
    text-align: left;
    font-size: 1.4rem;
    line-height: 1.3;
}

.page1 hr {
    margin-top: 50px;
    margin-bottom: 50px;
    height: 1px;
    background-color: #000000;
    width: 50%;
}

.page1 .publisher {
    max-width: 600px;      /* Adjust as needed */
    margin: 0 auto 24px;
}

.page1 .publisher p {
    max-width: 600px;      /* Adjust as needed */
    margin: 0 auto 24px;
    line-height: 1.7;
    text-align: left;
    text-indent: 0;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 18px;
}

/* ==========================================================
   Page 2
========================================================== */

.page2 {
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    background-color: #ffd09e;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 80px 40px;
    text-align: center;
    background-image: url("/images/chronicle/bg-light.webp");
    background-repeat: repeat;
}

.page2 h1, .page2 h2 {
    text-transform: uppercase;
}

.page2 h1 {
    font-weight: bold;
}

.page2 .position-title {
    font-weight: bold;
    color: #FD8813;
}

.page2 hr {
    margin-top: 20px;
    margin-bottom: 50px;
    width: 50%;
    height: 1px;
    background-color: #000000;
}

/* ==========================================================
   Page 3
========================================================== */

.page3 {
    background: #f8efe4;
    background-image: url("/images/chronicle/bg-lighter.webp");
    background-size: 220px;
    background-repeat: repeat;
    padding-bottom: 50px;
    font-family: "Century Gothic", sans-serif;
}

.page3 .section-title {
    background: #ef8523;
    color: #fff;
    padding: 18px 30px;
}

.page3 .section-title h1 {
    margin: 0;
    font-weight: bold;
}

.page3 p {
    text-align: justify;
    line-height: 1.8;
    padding-left: 50px;
    padding-right: 50px;
}

.page3 .tkc-image {
    max-width: 360px;
}

.page3 .schedule-card {
    border: 1px solid #777;
    background: #fff;
    margin-right: 50px;
    margin-left: 50px;
}

.page3 .schedule-title {
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    font-size: 1.4rem;
}

.page3 .schedule-title.orange {
    background: #ef8523;
}

.page3 .schedule-title.pink {
    background: #d43c91;
}

.page3 .schedule-table {
    font-size: 1.4rem;
    margin-bottom: 0;
}

.page3 .schedule-table td,
.page3 .schedule-table th {
    border: 1px solid #666;
    padding: 4px 8px;
    vertical-align: top;
}

.page3 .schedule-table .date-col {
    width: 72px;
    white-space: nowrap;
    font-weight: bold;
}

.page3 .schedule-table .year-row th {
    background: #ef8523;
    color: white;
    text-align: center;
    font-size: 1.4rem;
}

.page3 .schedule-table .pink-row th {
    background: #d43c91;
}

/* ==========================================================
   Page 4
========================================================== */

.page4 {
    background: #f8efe4;
    background-image: url("/images/chronicle/bg-pink.webp");
    background-repeat: repeat;
    background-size: 220px;
    padding:0 35px 60px;
    font-family: "Century Gothic", sans-serif;
}

.page4 .focus-header {
    width:260px;
    margin:0 auto 30px;
    background:#d21883;
    color:#fff;
    text-align:center;
    padding:14px 0;
    font-family:Georgia,serif;
    font-size:2rem;
    font-weight:bold;
}

.page4 .article-title {
    color: #d21883;
    text-align: center;
    font-family: Georgia, serif;
    font-size: 3.1rem;
    font-weight: bold;
    margin-bottom: 30px;
}

.page4 p {
    text-align: justify;
    line-height: 1.65;
    margin-bottom: 15px;
}

.page4 h4 {
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
    margin: 18px 0 10px;
}

.page4 ol {
    padding-left: 22px;
}

.page4 li {
    margin-bottom: 15px;
}

.page4 li h4 {
    display: inline;
    margin-right: 5px;
}

.page4 li p {
    display: inline;
}

/* ==========================================================
   Page 5
========================================================== */

.page5{
    background:#f8efe4;
    background-image: url("/images/chronicle/bg-pink.webp");
    background-repeat:repeat;
    background-size:220px;
    padding:0 35px 60px;
    font-family:"Century Gothic",sans-serif;
}

.page5 .focus-header{
    width:260px;
    margin:0 auto 30px;
    background:#d21883;
    color:#fff;
    text-align:center;
    padding:14px 0;
    font-family:Georgia,serif;
    font-size:2rem;
    font-weight:bold;
}

.page5 p{
    text-align:justify;
    line-height:1.65;
    margin-bottom:18px;
}

.page5-table{
    text-align:center;
    border-color:#c63a8b;
}

.page5-table th{
    background:#efb6d3;
    color:#4d0031;
    font-weight:bold;
    border:2px solid #c63a8b;
    vertical-align:middle;
}

.page5-table td{
    background:#fff;
    border:2px solid #c63a8b;
    vertical-align:middle;
}

/* ==========================================================
   Page 6
========================================================== */

.page6{
    background:#f8efe4;
    background-image: url("/images/chronicle/bg-lighter.webp");
    background-repeat:repeat;
    background-size:220px;
    padding:0 35px 60px;
    font-family:"Century Gothic",sans-serif;
}

.page6 .spotlight-header{
    width:290px;
    margin:0 auto 18px;
    background:#d21883;
    color:#fff;
    text-align:center;
    padding:14px 0;
    font-family:Georgia,serif;
    font-weight:bold;
}

.page6 .article-title{
    text-align:center;
    color:#d21883;
    font-family:Georgia,serif;
    font-weight:bold;
    margin-bottom:25px;
}

.page6 p{
    text-align:justify;
    line-height:1.6;
    margin-bottom:16px;
}

.page6 .video-card{
    float:right;
    width:320px;          /* Adjust as needed */
    margin:0 0 12px 18px;
    border:3px solid #d21883;
    background:#f3c7db;
}

.page6 .tunnel-video{
    display:block;
    width:100%;
    height:360px;         /* Only as tall as the paragraph */
    object-fit:cover;
    background:#000;
}

.page6 .photo-caption{
    display:block;
    font-size:1.4rem;
    line-height:1.2;
    color:#7a0046;
    padding-bottom: 20px;
}

.page6 .photo-card{
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ==========================================================
   Page 7
========================================================== */

.page7{
    background:#f8efe4;
    background-image: url("/images/chronicle/bg-lighter.webp");
    background-repeat:repeat;
    background-size:220px;
    padding:0 35px 60px;
    font-family:"Century Gothic",sans-serif;
}

.page7 .spotlight-header{
    width:290px;
    margin:0 auto 18px;
    background:#d21883;
    color:#fff;
    text-align:center;
    padding:14px 0;
    font-family:Georgia,serif;
    font-size:2rem;
    font-weight:bold;
}

.page7 p{
    text-align:justify;
    line-height:1.6;
    margin-bottom:15px;
}

.page7 .photo-card{
    background:#f3c7db;
}

.page7 .photo-card img{
    display:block;
    width:100%;
}

.page7 .small-photo{
    max-width:320px;
    margin:20px auto;
}

.page7 .photo-caption{
    background:#f3c7db;
    padding:3px 8px;
    font-size:1.4rem;
    color:#700042;
}

.page7 .photo-caption strong{
    display:block;
    color:#c00067;
    text-transform:uppercase;
}

.page7 .inline-photo {
    float: right;
    width: 320px;
    padding: 10px;
}

/* ==========================================================
   Page 8
========================================================== */

.page8{
    background:#f8efe4;
    background-image:url("/images/chronicle/bg-lighter.webp");
    background-repeat:repeat;
    background-size:220px;
    padding:0 35px;
    font-family:"Century Gothic",sans-serif;
}

.page8 .pov-header{
    width:270px;
    margin:0 auto 18px;
    background:#f4b400;
    color:#fff;
    text-align:center;
    padding:14px 0;
    font-family:Georgia,serif;
    font-weight:bold;
}

.page8 .article-title{
    text-align:center;
    color:#ef7d00;
    font-family:Georgia,serif;
    font-weight:bold;
    margin-bottom:25px;
}

.page8 p{
    text-align:justify;
    line-height:1.6;
    margin-bottom:15px;
}

.page8 h4{
    margin-top:20px;
    font-weight:bold;
}

.page8 h5{
    color:#000;
    font-weight:bold;
    margin:15px 0 8px;
    font-style:italic;
}

.page8 .screenshot{
    width:100%;
    border:1px solid #bcbcbc;
    background:#fff;
    padding:2px;
}

.page8 .airplane{
    width:100%;
    margin-top:12px;
}

.page8-table{
    margin-top:15px;
}

.page8-table th{
    background:#f6d99a;
    text-align:center;
    font-weight:bold;
}

.page8-table td,
.page8-table th{
    border:1px solid #8a8a8a;
    vertical-align:middle;
    text-align:center;
}

/* ==========================================================
   Page 9
========================================================== */

.page9{
    background:#f8efe4;
    background-image:url("/images/chronicle/bg-lighter.webp");
    background-repeat:repeat;
    background-size:220px;
    padding:0 35px 60px;
    font-family:"Century Gothic",sans-serif;
}

.page9 .pov-header{
    width:270px;
    margin:0 auto 18px;
    background:#f4b400;
    color:#fff;
    text-align:center;
    padding:14px 0;
    font-family:Georgia,serif;
    font-weight:bold;
}

.page9 p{
    text-align:justify;
    line-height:1.6;
    margin-bottom:14px;
}

.page9 h4{
    font-weight:bold;
    text-decoration:underline;
    margin:20px 0 12px;
}

.page9 h5{
    font-weight:bold;
    font-style:italic;
    margin-bottom:10px;
}

.page9 h5 small{
    display:block;
    font-style:normal;
    font-weight:normal;
}

.page9 .screenshot{
    width:100%;
    border:1px solid #bfbfbf;
    background:#fff;
    padding:2px;
}

.page9-table{
    font-size:1.6rem;
}

.page9-table th{
    background:#f6d99a;
    text-align:center;
}

.page9-table td,
.page9-table th{
    border:1px solid #888;
    vertical-align:top;
}

.page9 .table-responsive{
    overflow-x:auto;
}

/* ==========================================================
   Page 10
========================================================== */

.page10{
    padding:40px 35px 60px;
    background:#f9eee8 url("/images/chronicle/bg-lighter.webp") repeat;
    background-size:220px;
    font-family:"Century Gothic", sans-serif;
}

/* Banner */

.page10 .coaching-header{
    width:320px;
    margin:0 auto 15px;
    background:#d21883;
    color:#fff;
    text-align:center;
    padding:14px 0;
    font-family:Georgia, serif;
    font-size:2rem;
    font-weight:bold;
}

/* Title */

.page10 .article-title{
    text-align:center;
    color:#d21883;
    font-family:Georgia, serif;
    font-weight:bold;
    margin-bottom:25px;
}

/* Body */

.page10 p{
    line-height:1.6;
    text-align:justify;
    color:#222;
    margin-bottom:16px;
}

/* Section Headings */

.page10 .section-title{
    font-size:1.6rem;
    font-weight:bold;
    text-decoration:underline;
    margin:18px 0 12px;
    line-height:1.4;
}

/* Images */

.page10 .photo-card{
     overflow:hidden;
     float: right;
}

.page10 .screenshot{
    display:block;
    width:100%;
    height:auto;
}

/* Caption */

.page10 .photo-caption{
    background:#f3c8db;
    color:#7a0047;
    padding:6px 8px;
    font-size:.72rem;
    line-height:1.2;
}

.page10 .photo-caption strong{
    display:block;
    color:#c40067;
    text-transform:uppercase;
}

/* Left Column */

.page10 .left-feature{
    display:flex;
    gap:15px;
    align-items:flex-start;
}

.page10 .left-feature .photo-card{
    flex:0 0 42%;
}

.page10 .left-feature .content{
    flex:1;
}

/* Small Gallery */

.page10 .gallery{
    display:flex;
    gap:15px;
    margin:15px 0;
}

.page10 .gallery .photo-card{
    flex:1;
    margin-bottom:0;
}

/* Bottom Section */

.page10 .bottom-section{
    display:flex;
    gap:20px;
    align-items:flex-start;
}

.page10 .bottom-section .content{
    flex:1;
}

.page10 .bottom-section .photo-card{
    width:45%;
    margin-bottom:0;
}

/* Links */

.page10 a{
    color:#000;
    text-decoration:underline;
    font-weight:bold;
}

.page10 a:hover{
    color:#d21883;
}

.page10 .video-card{
    float:right;
    width:320px;          /* Adjust as needed */
    margin:0 0 12px 18px;
    border:3px solid #d21883;
    background:#f3c7db;
}

.page10 .disney-video{
    display:block;
    width:100%;
    height:360px;         /* Only as tall as the paragraph */
    object-fit:cover;
    background:#000;
}

/* ==========================================================
   PAGE 11
========================================================== */

.page11{
    padding:40px 35px 60px;
    background:#f8efe7 url("/images/chronicle/bg-lighter.webp") repeat;
    background-size:220px;
    font-family:"Century Gothic", sans-serif;
}

/* Body */

.page11 p{
    line-height:1.6;
    text-align:justify;
    color:#222;
    margin-bottom:16px;
}

/* Section Titles */

.page11 .section-title{
    font-family:Georgia, serif;
    font-weight:bold;
    font-size: 1.6rem;
    text-decoration:underline;
    margin-bottom:15px;
    line-height:1.35;
    color:#000;
}

/* ==========================================================
   PHOTO CARDS
========================================================== */

.page11 .photo-card{
    overflow:hidden;
}

.page11 .screenshot{
    display:block;
    width:100%;
    height:auto;
}

/* ==========================================================
   FEATURE CARD
========================================================== */

.page11 .feature-card{
    background: rgba(239, 197, 217, 0.7);
    padding:0;
    border:1px solid #c44b92;
}

.page11 .feature-header{
    background:#c2187d;
    color:#fff;
    text-align:center;
    font-family:Georgia, serif;
    font-size:1rem;
    font-weight:bold;
    text-transform:uppercase;
    padding:10px 12px;
    letter-spacing:.5px;
}

.page11 .feature-card img{
    display:block;
    width:100%;
    border-bottom:3px solid #d21883;
}

.page11 .feature-body{
    padding:15px;
}

.page11 .feature-body p{
    margin-bottom:15px;
}

/* ==========================================================
   FOOTER
========================================================== */

.page11 .page-footer{
    margin-top:35px;
    padding-top:12px;
    border-top:1px solid #bbb;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:.8rem;
    color:#555;
}

.page11 .footer-right{
    font-weight:bold;
    color:#d21883;
}

/* ==========================================================
   LINKS
========================================================== */

.page11 a{
    color:#000;
    text-decoration:underline;
}

.page11 a:hover{
    color:#d21883;
}

/* ==========================================================
   SPACING
========================================================== */

.page11 .row{
    margin-bottom:15px;
}

.page11 .photo-card{
    margin-bottom:15px;
}

/* ===========================
   PAGE 12
=========================== */

.page12 {
    padding:0px 35px 60px;
    background:#fffdf7 url("/images/chronicle/bg-lighter.webp") repeat;
    background-size:220px;
    font-family:"Century Gothic",sans-serif;
}

/* Orange Banner */

.page12 .activities-header {

    width:560px;
    margin:0 auto 25px;
    background:#f68b1f;
    color:#fff;
    text-align:center;
    font-family:Georgia,serif;
    font-size:2rem;
    font-weight:bold;
    padding:16px;
}

/* Title */

.page12 .article-title {
    text-align:center;
    color:#f68b1f;
    font-family:Georgia,serif;
    font-size:2.3rem;
    font-weight:bold;
    margin-bottom:30px;
}

/* Paragraph */

.page12 p {
    text-align:justify;
    line-height:1.7;
    margin-bottom:18px;
}

/* Speaker List */

.page12 .speaker-list {
    padding-left:18px;
}

.page12 .speaker-list li {
    margin-bottom:10px;
}

/* Gallery */

.page12 .gallery-section {
    margin-top:35px;
    background:#fde6a5;
    padding:30px;
}

/* Photos */

.page12 .photo-card {
    background:#fff;
    border:4px solid #fff;
    box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.page12 .large-photo {
    height:100%;
}

.page12 .screenshot {
    display:block;
    width:100%;
    height:auto;
}

/* ==========================================================
   Page 13
========================================================== */

.page13 {
    padding: 0 0 35px;
    background: #fbf4e7 url("/images/chronicle/bg-lighter.webp") repeat;
    background-size: 220px;
    font-family: "Century Gothic", sans-serif;
}

.page13 .featured-header {
    background: #f58220;
    color: #fff;
    text-align: center;
    padding: 12px;
    font-family: Georgia, serif;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: .5px;
    margin-bottom: 18px;
}

.page13 .researcher-name {
    font-family: Georgia, serif;
    color: #1b1b1b;
    margin-bottom: 6px;
}

.page13 .researcher-position {
    font-family: Georgia, serif;
    font-size: 1.15rem;
    font-weight: normal;
    color: #444;
    line-height: 1.45;
    margin-bottom: 25px;
}

.page13 p {
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 18px;
}

.page13 .photo-card {
    overflow: hidden;
}

.page13 .photo-card img {
    display: block;
    width: 100%;
    height: auto;
    border: 4px solid #f58220;
}

.page13 .portrait img {
    aspect-ratio: 3 / 5;
    object-fit: cover;
}

.page13 .gallery-top img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ==========================================================
   Page 14
========================================================== */

.page14 {
    padding: 0 0 40px;
    background: #fffdf8 url("/images/chronicle/bg-lighter.webp") repeat;
    background-size: 220px;
    font-family: "Century Gothic", sans-serif;
}

.page14 .activities-header {
    width: 500px;
    margin: 0 auto 18px;
    padding: 14px;
    background: #f58220;
    color: #fff;
    text-align: center;
    font-family: Georgia, serif;
    font-size: 1.8rem;
    font-weight: bold;
}

.page14 .article-title {
    text-align: center;
    color: #f58220;
    font-family: Georgia, serif;
    margin-bottom: 10px;
}

.page14 .intro {
    max-width: 900px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

.page14 .featured-card,
.page14 .meeting-card {
    background: #A2A496;
}

.page14 .photo-card {
    border: 3px solid #f58220;
    background: #A2A496;
    overflow: hidden;
}

.page14 .photo-card img {
    display: block;
    width: 100%;
    height: auto;
}

.page14 .event-info {
    background: rgba(255,245,236,.95);
    border-left: 3px solid #f58220;
    border-right: 3px solid #f58220;
    border-bottom: 3px solid #f58220;
    text-align: center;
    padding: 12px;
}

.page14 .event-date {
    display: inline-block;
    background: #f58220;
    color: #fff;
    font-weight: bold;
    padding: 6px 14px;
    margin-bottom: 10px;
}

.page14 .event-title {
    font-family: Georgia, serif;
    line-height: 1.5;
}

/* ==========================================================
   Page 15
========================================================== */

.page15 {
    padding: 0 0 40px;
    background: #fffdf8 url("/images/chronicle/bg-lighter.webp") repeat;
    background-size: 220px;
    font-family: "Century Gothic", sans-serif;
}

.page15 .activities-header {
    width: 520px;
    margin: 0 auto 20px;
    padding: 14px;
    background: #f58220;
    color: #fff;
    text-align: center;
    font-family: Georgia, serif;
    font-size: 1.8rem;
    font-weight: bold;
}

.page15 .feature-card {
    background: rgba(255,255,255,.92);
}

.page15 .feature-card p {
    margin: 14px 10px 8px;
}

.page15 .feature-title {
    margin: 14px 10px 8px;
    color: #f58220;
    font-family: Georgia, serif;
    text-transform: uppercase;
}

.page15 .article-title {
    margin: 28px 10px 25px;
    text-align: center;
    color: #f58220;
    font-family: Georgia, serif;
}

.page15 p {
    text-align: justify;
    line-height: 1.7;
}

.page15 .photo-card {
    border: 3px solid #f58220;
    overflow: hidden;
    background: #fff;
}

.page15 .photo-card img {
    display: block;
    width: 100%;
    height: auto;
}

.page15 .section-divider {
    border: 0;
    border-top: 4px solid #f58220;
    opacity: 1;
    margin: 35px 0 25px;
}

/* ==========================================================
   Page 16
========================================================== */

.page16 {
    padding: 0 0 40px;
    background: #fffdf8 url("/images/chronicle/bg-lighter.webp") repeat;
    background-size: 220px;
    font-family: "Century Gothic", sans-serif;
}

.page16 .activities-header {
    width: 500px;
    margin: 0 auto 18px;
    padding: 14px;
    background: #f58220;
    color: #fff;
    text-align: center;
    font-family: Georgia, serif;
    font-size: 1.8rem;
    font-weight: bold;
}

.page16 .article-title {
    text-align: center;
    color: #f58220;
    font-family: Georgia, serif;
    margin-bottom: 20px;
}

.page16 p {
    text-align: justify;
    line-height: 1.7;
}

.page16 .event-card {
    position: relative;
}

.page16 .photo-card {
    border: 3px solid #f58220;
    overflow: hidden;
    background: #fff;
}

.page16 .photo-card img {
    display: block;
    width: 100%;
    height: auto;
}

.page16 .event-caption {
    display: flex;
    align-items: stretch;
    margin-top: -4px;
}

.page16 .event-date {
    width: 180px;
    background: #f58220;
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 12px;
}

.page16 .event-description {
    flex: 1;
    background: #fff7ec;
    padding: 12px;
    font-family: Georgia, serif;
}

.page16 .event-note {
    flex: 1;
    background: #fff7ec;
    padding: 12px;
    border-left: 2px solid #f58220;
}

.page16 .bottom-note {
    background: rgba(255,247,236,.9);
    padding: 20px;
    border-left: 5px solid #f58220;
}

/* ==========================================================
   Page 17
========================================================== */

.page17 {
    padding: 0 0 40px;
    background: #fbf0f2 url("/images/chronicle/bg-pink.webp") repeat;
    background-size: 220px;
    font-family: "Century Gothic", sans-serif;
}

.page17 .armchair-header {
    width: 420px;
    margin: 0 auto 25px;
    padding: 15px;
    background: #ef4b55;
    color: #fff;
    text-align: center;
    font-family: Georgia, serif;
    font-size: 1.8rem;
    font-weight: bold;
}

.page17 h3 {
    color: #ef4b55;
    font-family: Georgia, serif;
    font-weight: bold;
    margin: 20px 0 12px;
}

.page17 h4 {
    color: #ef4b55;
    font-family: Georgia, serif;
    margin: 20px 0 12px;
}

.page17 h5 {
    font-family: Georgia, serif;
    margin-bottom: 10px;
}

.page17 p {
    text-align: justify;
    line-height: 1.7;
}

.page17 .itinerary-card {
    margin: 18px 0;
}

.page17 .itinerary-card img {
    width: 100%;
    border: 2px solid #003f73;
}

.page17 .photo-card {
    margin: 20px 0;
}

.page17 .photo-card img {
    width: 100%;
    border: 3px solid #ef4b55;
    display: block;
}

.page17 .guide-list {
    padding-left: 18px;
    line-height: 1.8;
}

.page17 ol {
    padding-left: 22px;
}

/* ==========================================================
   Page 18
========================================================== */

.page18 {
    padding: 0 0 40px;
    background: #fbf0f2 url("/images/chronicle/bg-pink.webp") repeat;
    background-size: 220px;
    font-family: "Century Gothic", sans-serif;
}

.page18 .armchair-header {
    width: 420px;
    margin: 0 auto 25px;
    padding: 15px;
    background: #ef4b55;
    color: #fff;
    text-align: center;
    font-family: Georgia, serif;
    font-size: 1.8rem;
    font-weight: bold;
}

.page18 h3 {
    color: #ef4b55;
    font-family: Georgia, serif;
    font-weight: bold;
    margin: 20px 0 12px;
}

.page18 h4 {
    color: #ef4b55;
    font-family: Georgia, serif;
    margin-bottom: 15px;
}

.page18 h5 {
    color: #003366;
    font-family: Georgia, serif;
    margin-bottom: 8px;
}

.page18 p {
    text-align: justify;
    line-height: 1.7;
}

.page18 .tour-card {
    margin: 25px 0;
}

.page18 .tour-title {
    background: #0b2f67;
    color: #fff;
    padding: 8px 12px;
    font-weight: bold;
    font-family: Georgia, serif;
}

.page18 .photo-card {
    border: 2px solid #0b2f67;
    border-top: none;
    overflow: hidden;
}

.page18 .photo-card img {
    display: block;
    width: 100%;
    height: auto;
}

.page18 .day-card {
    margin-bottom: 20px;
    padding-left: 15px;
}

.page18 .day-card h3 {
    background: #b0bad2;
    color: #000;
    padding: 3px;
    font-family: Georgia, serif;
    font-weight: normal;
    margin: 20px 0 12px;
}

/* ==========================================================
   Page 19
========================================================== */

.page19 {
    padding: 0 0 40px;
    background: #fbf0f2 url("/images/chronicle/bg-pink.webp") repeat;
    background-size: 220px;
    font-family: "Century Gothic", sans-serif;
}

.page19 .armchair-header {
    width: 420px;
    margin: 0 auto 25px;
    padding: 15px;
    background: #ef4b55;
    color: #fff;
    text-align: center;
    font-family: Georgia, serif;
    font-size: 1.8rem;
    font-weight: bold;
}

.page19 .continue-text {
    font-style: italic;
    margin-bottom: 12px;
}

.page19 .tour-title {
    background: #c62828;
    color: #fff;
    padding: 10px 15px;
    font-family: Georgia, serif;
    font-weight: bold;
}

.page19 .photo-card {
    border: 2px solid #c62828;
    overflow: hidden;
    background: #fff;
}

.page19 .photo-card img {
    display: block;
    width: 100%;
    height: auto;
}

.page19 .day-card {
    margin-bottom: 20px;
    padding-left: 16px;
}

.page19 .day-card h3 {
    background: #f3d0c1;
    color: #000;
    padding: 3px;
    font-family: Georgia, serif;
    font-weight: normal;
    margin: 20px 0 12px;
}

.page19 p {
    text-align: justify;
    line-height: 1.7;
}

/* ==========================================================
   Page 20
========================================================== */

.page20 {
    padding: 0 0 40px;
    background: #fffdf8 url("/images/chronicle/bg-lighter.webp") repeat;
    background-size: 220px;
    font-family: "Century Gothic", sans-serif;
}

.page20 .partner-header {
    width: 520px;
    margin: 0 auto 25px;
    padding: 15px;
    background: #f58220;
    color: #fff;
    text-align: center;
    font-family: Georgia, serif;
    font-size: 1.8rem;
    font-weight: bold;
}

.page20 p {
    text-align: justify;
    line-height: 1.7;
}

/* ---------- Responsive Table ---------- */

.page20 .partner-table-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-top: 20px;
}

.page20 .partner-table {
    width: 100%;
    min-width: 560px;
    border: 2px solid #444;
    margin: 0;
    background: rgba(255,255,255,.95);
    font-size: 1.4rem;
    border-spacing: 0;
}

.page20 .partner-table th,
.page20 .partner-table td {
    padding: .75rem;
    vertical-align: middle;
    white-space: normal;
    word-break: break-word;
}

.page20 .partner-table th {
    background: #f58220;
    color: #000;
    text-align: center;
    font-family: Georgia, serif;
    font-weight: bold;
}

.page20 .partner-table td {
    text-align: center;
    font-size: 1.4rem;
}

.page20 .partner-table td:first-child {
    text-align: left;
}

.page20 .qr-card {
    margin-top: 30px;
    padding: 20px;
    text-align: center;
    background: rgba(255,248,240,.95);
}

.page20 .qr-card img {
    max-width: 220px;
    width: 100%;
    border: 8px solid #f58220;
    border-radius: 15px;
}

/* ==========================================================
   Other Pages
========================================================== */

/*section:not(.page1) {
    max-width: 900px;
    margin: 100px auto;
}*/

/* ==========================================================
   Responsive
========================================================== */

@media (max-width: 991px) {

    .toc-toggle {
        top: 180px;
    }

    .chronicle-toc {
        top: 180px;
        left: -100%;
        width: 85%;
        height: calc(100vh - 18 0px);
    }

    .chronicle-toc.open {
        left: 0;
    }

    .chronicle-content {
        padding: 20px;
    }

    .page1 {
        max-width: 100%;
    }

    .page3 .section-title h1 {
        font-size: 2rem;
    }

    .page3 .schedule-card {
        margin-top: 25px;
    }

    .page4 {
        padding: 30px 20px;
    }

    .page4 .article-title {
        font-size: 2.2rem;
    }

    .page4 .focus-header {
        width: 220px;
        font-size: 1.5rem;
    }

    .page5{
        padding:0 20px 40px;
    }

    .page5 .focus-header{
        width:220px;
    }

    .page6{
        padding:0 20px 40px;
    }

    .page6 .spotlight-header{
        width:230px;
        font-size:1.5rem;
    }

    .page6 .video-card{
        float:none;
        width:100%;
        max-width:320px;
        margin:20px auto;
    }

    .page6 .tunnel-video{
        height:300px;
    }

    .page7{
        padding:0 20px 40px;
    }

    .page7 .spotlight-header{
        width:230px;
        font-size:1.5rem;
    }

    .page8{
        padding:0 20px 40px;
    }

    .page8 .pov-header{
        width:220px;
        font-size:1.5rem;
    }

    .page8 .article-title{
        font-size:1.6rem;
    }

    .page8-table {
        font-size: 0.75rem;
    }

    .page8-table th,
    .page8-table td {
        padding: 4px 6px;
    }

    .page9{
        padding:0 20px 40px;
    }

    .page9 .pov-header{
        width:220px;
        font-size:1.5rem;
    }

    .page9-table{
        min-width:550px;
        font-size: 1.25rem;
    }

    .page10{
        padding:30px 20px 40px;
    }

    .page10 .coaching-header{
        width:250px;
        font-size:1.5rem;
    }

    .page10 .article-title{
        font-size:1.7rem;
    }

    .page10 .left-feature,
    .page10 .bottom-section,
    .page10 .gallery{
        display:block;
    }

    .page10 .left-feature .photo-card,
    .page10 .bottom-section .photo-card{
        width:100%;
        margin-bottom:20px;
    }

    .page10 .gallery .photo-card{
        margin-bottom:20px;
    }

    .page11{
        padding:30px 20px 40px;
    }

    .page11 .section-title{
        font-size:1.05rem;
    }

    .page11 p{
        font-size:.9rem;
    }

    .page11 .feature-header{
        font-size:.9rem;
    }

    .page11 .page-footer{
        flex-direction:column;
        gap:8px;
        text-align:center;
    }

    .page12 {
        padding: 30px 20px;
    }

    .page12 .activities-header {
        width: 100%;
        font-size: 1.5rem;
    }

    .page12 .article-title {
        font-size: 1.8rem;
    }

    .page12 .gallery-section {
        padding: 20px;
    }

    .page12 .photo-card {
        margin-bottom: 20px;
    }

    .page13 {
        padding-bottom: 25px;
    }

    .page13 .researcher-name {
        margin-top: 20px;
    }

    .page13 .researcher-position {
        font-size: 1rem;
    }

    .page13 .gallery-top {
        margin-top: 20px;
    }

    .page14 .activities-header {
        width: 100%;
        font-size: 1.4rem;
    }

    .page14 .article-title {
        font-size: 1.8rem;
    }

    .page15 .activities-header {
        width: 100%;
        font-size: 1.4rem;
    }

    .page15 .article-title {
        font-size: 1.7rem;
    }

    .page15 .feature-title {
        font-size: 1.15rem;
    }

    .page15 .photo-card {
        margin-bottom: 20px;
    }

    .page16 .activities-header {
        width: 100%;
        font-size: 1.4rem;
    }

    .page16 .article-title {
        font-size: 1.7rem;
    }

    .page16 .event-caption {
        display: block;
    }

    .page16 .event-date,
    .page16 .event-description,
    .page16 .event-note {
        width: 100%;
        border-left: none;
    }

    .page16 .bottom-note {
        margin-top: 20px;
    }

    .page17 .armchair-header {
        width: 100%;
        font-size: 1.5rem;
    }

    .page17 .photo-card,
    .page17 .itinerary-card {
        margin-bottom: 20px;
    }

    .page18 .armchair-header {
        width: 100%;
        font-size: 1.5rem;
    }

    .page18 .tour-card {
        margin-bottom: 30px;
    }

    .page19 .armchair-header {
        width: 100%;
        font-size: 1.5rem;
    }

    .page19 .photo-card {
        margin-bottom: 25px;
    }

    .page20 .partner-header {
        width: 100%;
        font-size: 1.5rem;
    }

    .page20 .partner-table {
        font-size: .9rem;
    }

    .page20 .qr-card {
        margin-top: 20px;
    }

}