/* =========================================================
   JBRay.org — Timeline
   Page-specific styles for timeline.html
   Loaded after assets/css/styles.css
   ========================================================= */

.timeline-page {
   overflow-x: clip;
}

/* =========================================================
   HERO
   ========================================================= */

.timeline-hero {
   padding: 82px 0 72px;
   background:
      radial-gradient(circle at 78% 38%, rgba(154, 116, 65, .13), transparent 28%),
      linear-gradient(115deg, var(--paper) 0%, var(--ivory) 62%, var(--paper-deep) 100%);
   border-bottom: 1px solid var(--line);
}

.timeline-hero-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.2fr) minmax(270px, .48fr);
   gap: 72px;
   align-items: center;
}

.timeline-hero-copy {
   max-width: 800px;
}

.timeline-hero h1 {
   margin-bottom: 22px;
}

.timeline-hero .lede {
   max-width: 760px;
   margin-bottom: 24px;
}

.timeline-hero-note {
   max-width: 690px;
   margin: 0;
   padding-left: 20px;
   border-left: 3px solid var(--bronze);
   color: var(--muted);
   font-size: 17px;
   line-height: 1.65;
}

.timeline-hero-portrait {
   position: relative;
   margin: 0;
   padding: 16px;
   background: var(--paper);
   border: 1px solid var(--line);
   box-shadow: var(--shadow);
}

.timeline-hero-portrait::before {
   content: '';
   position: absolute;
   inset: 9px;
   border: 1px solid rgba(154, 116, 65, .42);
   pointer-events: none;
}

.timeline-hero-portrait img {
   width: 100%;
   height: auto;
   aspect-ratio: 1131 / 1391;
   object-fit: cover;
   filter: sepia(.08) contrast(1.02);
}

.timeline-hero-portrait figcaption {
   padding: 15px 4px 2px;
   text-align: center;
   color: var(--muted);
   font-size: 14px;
   line-height: 1.4;
}

.timeline-hero-portrait figcaption span {
   display: block;
   margin-bottom: 4px;
   color: var(--bronze);
   font: 700 10px var(--sans);
   text-transform: uppercase;
   letter-spacing: .12em;
}


/* =========================================================
   OUTER LAYOUT
   ========================================================= */

.timeline-gallery-section {
   padding: 80px 0 0;
   background: var(--ivory);
}

.timeline-shell {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 220px;
   gap: 44px;
   align-items: start;
}

.timeline-story {
   min-width: 0;
}


/* =========================================================
   ERA RAIL
   ========================================================= */

.timeline-era-rail {
   position: sticky;
   top: 124px;
   align-self: start;
   z-index: 10;
   transition: opacity .2s ease, transform .2s ease;
}

.timeline-era-rail.is-hidden {
   opacity: 0;
   transform: translateY(10px);
   pointer-events: none;
}

.timeline-era-rail-title {
   margin: 0 0 14px;
   color: var(--bronze);
   font: 700 10px/1.4 var(--sans);
   text-transform: uppercase;
   letter-spacing: .14em;
}

.timeline-era-rail nav {
   border-top: 1px solid var(--line);
}

.timeline-era-rail a {
   display: grid;
   grid-template-columns: 28px 1fr;
   gap: 10px;
   padding: 14px 8px;
   border-bottom: 1px solid var(--line);
   color: var(--muted);
   text-decoration: none;
   transition:
      color .18s ease,
      background .18s ease;
}

.timeline-era-rail a:hover {
   color: var(--forest);
}

.timeline-era-rail a.is-active {
   color: var(--oxblood);
   background: linear-gradient(90deg, rgba(154, 116, 65, .09), transparent);
}

.timeline-era-rail-number {
   padding-top: 2px;
   color: var(--bronze);
   font: 700 10px var(--sans);
   letter-spacing: .08em;
}

.timeline-era-rail strong,
.timeline-era-rail small {
   display: block;
}

.timeline-era-rail strong {
   font-size: 15px;
   line-height: 1.25;
   font-weight: 600;
}

.timeline-era-rail small {
   margin-top: 4px;
   color: var(--muted);
   font: 600 10px var(--sans);
   letter-spacing: .04em;
}


/* =========================================================
   ERA STRUCTURE
   ========================================================= */

.timeline-era {
   position: relative;
   padding: 0 0 104px 72px;
   scroll-margin-top: 120px;
}

.timeline-era::before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 22px;
   width: 1px;
   background: linear-gradient(to bottom,
         rgba(154, 116, 65, .2),
         var(--bronze) 12%,
         var(--line) 88%,
         rgba(154, 116, 65, .1));
}

.timeline-era:last-child {
   padding-bottom: 80px;
}

.timeline-era-heading {
   position: relative;
   display: grid;
   grid-template-columns: 62px minmax(0, 1fr);
   gap: 24px;
   margin-bottom: 48px;
   padding: 0 0 28px;
   border-bottom: 1px solid var(--line);
}

.timeline-era-heading::before {
   content: '';
   position: absolute;
   left: -57px;
   top: 8px;
   width: 13px;
   height: 13px;
   border-radius: 50%;
   background: var(--ivory);
   border: 3px solid var(--bronze);
   box-shadow: 0 0 0 7px var(--ivory);
}

.timeline-era-number {
   margin: 4px 0 0;
   color: var(--bronze);
   font: 700 13px var(--sans);
   letter-spacing: .12em;
}

.timeline-era-heading h2 {
   margin-bottom: 12px;
   font-size: clamp(38px, 4vw, 54px);
}

.timeline-era-heading p:last-child {
   max-width: 720px;
   margin-bottom: 0;
   color: var(--muted);
}

/* =========================================================
   DISPLAY OF STATEMENTS AND QUOTATIONS
   ========================================================= */

.timeline-display-statement {
   margin: 8px 0 20px;
   font-size: 27px;
   line-height: 1.4;
   font-style: italic;
}

/* =========================================================
   EVENTS
   ========================================================= */

.timeline-event {
   position: relative;
   display: grid;
   grid-template-columns: 128px minmax(0, 1fr);
   gap: 28px;
   margin-bottom: 48px;
}

.timeline-event::before {
   content: '';
   position: absolute;
   left: -55px;
   top: 17px;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--paper);
   border: 2px solid var(--bronze);
}

.timeline-date {
   padding-top: 2px;
}

.timeline-date time,
.timeline-date>span:first-child {
   display: block;
   color: var(--oxblood);
   font-size: 31px;
   line-height: 1;
   font-weight: 600;
}

.timeline-date span {
   display: block;
   margin-top: 7px;
   color: var(--muted);
   font: 700 10px var(--sans);
   text-transform: uppercase;
   letter-spacing: .08em;
}

.timeline-date-label>span:first-child {
   margin-top: 0;
   color: var(--oxblood);
   font: 700 13px/1.35 var(--sans);
   text-transform: uppercase;
   letter-spacing: .12em;
}

.timeline-event-body {
   min-width: 0;
}

.timeline-event-body h3 {
   margin-bottom: 14px;
   font-size: 30px;
}

.timeline-event-body>p:not(.object-label) {
   max-width: 750px;
   color: var(--muted);
}


/* =========================================================
   MAJOR EVENTS
   ========================================================= */

.timeline-event-major .timeline-event-body {
   padding: 30px 34px;
   background: var(--paper);
   border: 1px solid var(--line);
   box-shadow: 0 12px 32px rgba(38, 30, 22, .055);
}

.timeline-event-accent .timeline-event-body {
   border-top: 4px solid var(--bronze);
}

.timeline-event-decision .timeline-event-body {
   border-left: 4px solid var(--oxblood);
}


/* =========================================================
   EDUCATION IMAGES
   ========================================================= */

.timeline-image-pair {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 18px;
   margin-top: 28px;
}

.timeline-object {
   margin: 0;
   padding: 14px;
   background: var(--paper);
   border: 1px solid var(--line);
   box-shadow: 0 10px 26px rgba(38, 30, 22, .055);
}

.timeline-object img {
   width: 100%;
   height: auto;
   background: var(--ivory);
}

.timeline-image-pair .timeline-object img {
   aspect-ratio: 16 / 10;
   object-fit: cover;
}

.timeline-object figcaption {
   padding: 13px 3px 2px;
   color: var(--muted);
   font-size: 13px;
   line-height: 1.45;
}

.timeline-object figcaption span {
   display: block;
   margin-bottom: 4px;
   color: var(--bronze);
   font: 700 9px var(--sans);
   text-transform: uppercase;
   letter-spacing: .12em;
}

.timeline-object figcaption strong,
.timeline-object figcaption small {
   display: block;
}

.timeline-object figcaption strong {
   color: var(--oxblood);
   font-size: 18px;
   line-height: 1.25;
}

.timeline-object figcaption small {
   margin-top: 5px;
}


/* =========================================================
   INTERPRETIVE NOTE
   ========================================================= */

.timeline-interpretive-note {
   margin-top: 26px;
   padding: 18px 20px;
   background: var(--paper-deep);
   border-left: 3px solid var(--bronze);
}

.timeline-interpretive-note span {
   display: block;
   margin-bottom: 5px;
   color: var(--bronze);
   font: 700 10px var(--sans);
   text-transform: uppercase;
   letter-spacing: .12em;
}

.timeline-interpretive-note p {
   margin: 0;
   color: var(--forest);
   font-size: 16px;
   line-height: 1.55;
}


/* =========================================================
   OBJECT FEATURE — 1913
   ========================================================= */

.timeline-event-object-feature {
   margin-top: 18px;
}

.timeline-object-feature-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 260px;
   gap: 34px;
   align-items: center;
   padding: 32px;
   background: var(--forest);
   color: #f7f0e3;
}

.timeline-object-feature-copy h3 {
   color: #f7f0e3;
}

.timeline-object-feature-copy p:not(.object-label) {
   color: #e6ddcf;
}

.timeline-object-feature-grid .object-label {
   color: #d6b675;
}

.timeline-object-book {
   padding: 12px;
}

.timeline-object-book img {
   max-height: 390px;
   object-fit: contain;
}


/* =========================================================
   1915 LANDMARK
   ========================================================= */

.timeline-event-landmark {
   grid-template-columns: 128px minmax(0, 1fr);
}

.timeline-event-landmark .timeline-event-body {
   padding: 34px;
   background: var(--paper);
   border-top: 4px solid var(--oxblood);
   box-shadow: var(--shadow);
}

.timeline-document-grid {
   display: grid;
   grid-template-columns: minmax(210px, .42fr) minmax(0, 1fr);
   gap: 30px;
   align-items: center;
   margin-top: 34px;
   padding-top: 30px;
   border-top: 1px solid var(--line);
}

.timeline-object-newspaper {
   max-width: 300px;
}

.timeline-object-newspaper img {
   width: 100%;
   height: auto;
}

.timeline-document-copy h3 {
   font-size: 25px;
}

.timeline-document-copy p {
   color: var(--muted);
}


/* =========================================================
   NEXT THRESHOLD
   ========================================================= */

.timeline-next-threshold {
   margin: 12px 0 0 128px;
   padding: 28px 30px;
   background: var(--oxblood);
   color: #f7f0e3;
   border-top: 3px solid var(--bronze);
}

.timeline-next-threshold .object-label {
   color: #d6b675;
}

.timeline-next-threshold strong {
   display: block;
   margin: 5px 0 2px;
   color: #fff;
   font-size: 42px;
   line-height: 1;
   font-weight: 600;
}

.timeline-next-threshold p {
   margin: 8px 0 0;
   color: #f1e7d9;
}


/* =========================================================
   1916 — FOUNDING
   ========================================================= */

.timeline-event-founding .timeline-event-body {
   padding: 0;
   overflow: hidden;
   background: var(--paper);
   border: 1px solid var(--line);
   border-top: 5px solid var(--bronze);
   box-shadow: var(--shadow);
}

.timeline-founding-intro {
   padding: 36px 38px 30px;
}

.timeline-founding-intro h3 {
   font-size: clamp(32px, 3.3vw, 44px);
}

.timeline-founding-intro p:not(.object-label) {
   max-width: 760px;
   color: var(--muted);
}

.timeline-founding-record {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   border-top: 1px solid var(--line);
   border-left: 1px solid var(--line);
   margin-left: -1px;
}

.timeline-founding-record>div {
   padding: 22px 26px;
   border-right: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   background: var(--ivory);
}

.timeline-founding-record span {
   display: block;
   margin-bottom: 6px;
   color: var(--bronze);
   font: 700 10px var(--sans);
   text-transform: uppercase;
   letter-spacing: .12em;
}

.timeline-founding-record strong {
   display: block;
   margin-bottom: 6px;
   color: var(--forest);
   font-size: 21px;
   line-height: 1.2;
}

.timeline-founding-record p {
   margin: 0;
   color: var(--muted);
   font-size: 15px;
   line-height: 1.5;
}

.timeline-founding-principle {
   padding: 30px 38px 34px;
   background: var(--forest);
   color: #f7f0e3;
}

.timeline-founding-principle .object-label {
   color: #d6b675;
}

.timeline-founding-principle .timeline-display-statement {
   max-width: 760px;
   margin: 10px 0 0;
   color: #f7f0e3;
   font-size: 23px;
   line-height: 1.5;
   font-style: italic;
}


/* =========================================================
   COMPACT EVENT
   ========================================================= */

.timeline-event-compact .timeline-event-body {
   padding: 26px 30px;
   background: transparent;
   border-left: 3px solid var(--bronze);
}

.timeline-event-compact .timeline-event-body p:last-child {
   margin-bottom: 0;
}


/* =========================================================
   1919 — GOVERNANCE
   ========================================================= */

.timeline-event-governance .timeline-event-body {
   padding: 34px;
   background: var(--paper-deep);
   border: 1px solid var(--line);
}

.timeline-leadership-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 22px;
   align-items: start;
   margin-top: 30px;
}

.timeline-governance-copy {
   grid-column: 1 / -1;
   padding: 24px 26px;
   background: var(--paper);
   border-left: 3px solid var(--oxblood);
}

.timeline-leader {
   margin: 0;
   padding: 12px;
   background: var(--paper);
   border: 1px solid var(--line);
}

.timeline-leader img {
   width: 100%;
   height: auto;
   object-fit: contain;
   background: var(--ivory);
}

.timeline-leader figcaption {
   padding: 13px 3px 2px;
}

.timeline-leader figcaption span,
.timeline-leader figcaption strong,
.timeline-leader figcaption small {
   display: block;
}

.timeline-leader figcaption span {
   margin-bottom: 5px;
   color: var(--bronze);
   font: 700 9px var(--sans);
   text-transform: uppercase;
   letter-spacing: .1em;
}

.timeline-leader figcaption strong {
   color: var(--oxblood);
   font-size: 17px;
   line-height: 1.2;
}

.timeline-leader figcaption small {
   margin-top: 4px;
   color: var(--muted);
   font-size: 12px;
}

.timeline-governance-copy h3 {
   font-size: 25px;
}

.timeline-governance-copy p:not(.object-label) {
   color: var(--muted);
}

/* =========================================================
   ERA 04 — SCHOLARSHIP, RECOGNITION & PERMANENCE
   ========================================================= */


/* =========================================================
   1920 — PUBLICATIONS
   ========================================================= */

.timeline-event-publications .timeline-event-body {
   padding: 0;
   overflow: hidden;
   background: var(--forest);
   color: #f7f0e3;
   border: 1px solid #385047;
   box-shadow: var(--shadow);
}

.timeline-publications-copy {
   padding: 34px 38px 28px;
}

.timeline-publications-copy h3 {
   color: #f7f0e3;
   font-size: clamp(30px, 3vw, 40px);
}

.timeline-publications-copy .object-label {
   color: #d6b675;
}

.timeline-publications-copy p:not(.object-label) {
   max-width: 760px;
   color: #e8dfd1;
}

.timeline-publication-gallery {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 22px;
   padding: 28px 38px 38px;
   border-top: 1px solid rgba(255, 255, 255, .16);
}

.timeline-publication-card {
   margin: 0;
   padding: 14px;
   background: var(--paper);
   border: 1px solid #d6b675;
}

.timeline-publication-card img {
   width: 100%;
   height: 410px;
   object-fit: contain;
   background: var(--ivory);
}

.timeline-publication-card figcaption {
   padding: 14px 3px 2px;
}

.timeline-publication-card figcaption span,
.timeline-publication-card figcaption strong,
.timeline-publication-card figcaption small {
   display: block;
}

.timeline-publication-card figcaption span {
   color: var(--bronze);
   font: 700 9px var(--sans);
   text-transform: uppercase;
   letter-spacing: .12em;
}

.timeline-publication-card figcaption strong {
   margin-top: 5px;
   color: var(--oxblood);
   font-size: 18px;
   line-height: 1.25;
}

.timeline-publication-card figcaption small {
   margin-top: 6px;
   color: var(--muted);
   font-size: 12px;
   line-height: 1.45;
}


/* =========================================================
   1921–1923 — GOVERNMENT INQUIRY
   ========================================================= */

.timeline-date-range>span:first-child {
   margin-top: 0;
   color: var(--oxblood);
   font-size: 25px;
   line-height: 1.05;
   font-weight: 600;
   text-transform: none;
   letter-spacing: 0;
}

.timeline-event-inquiry .timeline-event-body {
   padding: 34px;
   background: var(--paper-deep);
   border: 1px solid var(--line);
   border-top: 4px solid var(--bronze);
}

.timeline-inquiry-heading {
   max-width: 780px;
   margin-bottom: 30px;
}

.timeline-inquiry-heading p:not(.object-label) {
   color: var(--muted);
}

.timeline-inquiry-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 24px;
}

.timeline-inquiry-object {
   width: 100%;
   margin: 0;
   padding: 14px;
   background: var(--paper);
   border: 1px solid var(--line);
   box-shadow: 0 12px 30px rgba(38, 30, 22, .07);
}

.timeline-inquiry-object img {
   width: 100%;
   height: auto;
}

.timeline-inquiry-object figcaption {
   padding: 14px 3px 2px;
}

.timeline-inquiry-object figcaption span,
.timeline-inquiry-object figcaption strong {
   display: block;
}

.timeline-inquiry-object figcaption span {
   color: var(--bronze);
   font: 700 9px var(--sans);
   text-transform: uppercase;
   letter-spacing: .12em;
}

.timeline-inquiry-object figcaption strong {
   margin-top: 5px;
   color: var(--oxblood);
   font-size: 17px;
   line-height: 1.3;
}

.timeline-inquiry-record {
   padding: 28px 30px;
   background: var(--paper);
   border-left: 4px solid var(--oxblood);
}

.timeline-inquiry-record h3 {
   font-size: 27px;
}

.timeline-inquiry-record>p:not(.object-label) {
   color: var(--muted);
}


/* =========================================================
   1925 — GANDHI LANDMARK
   ========================================================= */

.timeline-event-gandhi-landmark .timeline-event-body {
   padding: 0;
   overflow: hidden;
   background: var(--paper);
   border: 1px solid var(--line);
   border-top: 5px solid var(--oxblood);
   box-shadow: var(--shadow);
}

.timeline-date-day {
   text-align: left;
}

.timeline-date-day .timeline-day {
   margin: 0;
   color: var(--oxblood);
   font-size: 50px;
   line-height: .9;
   font-weight: 600;
   text-transform: none;
   letter-spacing: 0;
}

.timeline-date-day>span:nth-child(2) {
   margin-top: 7px;
   color: var(--forest);
   font: 700 11px var(--sans);
   text-transform: uppercase;
   letter-spacing: .1em;
}

.timeline-date-day time {
   margin-top: 5px;
   color: var(--muted);
   font-size: 18px;
}

.timeline-gandhi-landmark-grid {
   display: grid;
   grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
   align-items: stretch;
}

.timeline-gandhi-document {
   margin: 0;
   padding: 18px;
   background: var(--paper-deep);
   border-right: 1px solid var(--line);
}

.timeline-gandhi-document img {
   width: 100%;
   height: auto;
   max-height: 560px;
   object-fit: contain;
   background: var(--paper);
}

.timeline-gandhi-document figcaption {
   padding: 15px 3px 2px;
}

.timeline-gandhi-document figcaption span,
.timeline-gandhi-document figcaption strong,
.timeline-gandhi-document figcaption small {
   display: block;
}

.timeline-gandhi-document figcaption span {
   color: var(--bronze);
   font: 700 9px var(--sans);
   text-transform: uppercase;
   letter-spacing: .12em;
}

.timeline-gandhi-document figcaption strong {
   margin-top: 5px;
   color: var(--oxblood);
   font-size: 19px;
}

.timeline-gandhi-document figcaption small {
   margin-top: 6px;
   color: var(--muted);
   font-size: 12px;
   line-height: 1.45;
}

.timeline-gandhi-copy {
   padding: 40px;
}

.timeline-gandhi-copy h3 {
   font-size: clamp(32px, 3.2vw, 44px);
}

.timeline-gandhi-copy>p:not(.object-label) {
   color: var(--muted);
}

.timeline-gandhi-emphasis {
   margin-top: 28px;
   padding: 20px 22px;
   background: var(--forest);
   color: #f7f0e3;
}

.timeline-gandhi-emphasis span {
   display: block;
   margin-bottom: 5px;
   color: #d6b675;
   font: 700 9px var(--sans);
   text-transform: uppercase;
   letter-spacing: .12em;
}

.timeline-gandhi-emphasis strong {
   display: block;
   font-size: 20px;
   line-height: 1.35;
}


/* =========================================================
   1926 — MEMORIAL
   ========================================================= */

.timeline-event-memorial {
   margin-top: 70px;
}

.timeline-event-memorial .timeline-event-body {
   padding: 0;
   background: transparent;
}

.timeline-memorial-grid {
   display: grid;
   grid-template-columns: minmax(230px, .58fr) minmax(0, 1fr);
   gap: 42px;
   align-items: center;
}

.timeline-memorial-portrait {
   margin: 0;
   padding: 16px;
   background: var(--paper);
   border: 1px solid var(--line);
   box-shadow: var(--shadow);
}

.timeline-memorial-portrait img {
   width: 100%;
   height: auto;
}

.timeline-memorial-portrait figcaption {
   padding: 15px 4px 2px;
   text-align: center;
}

.timeline-memorial-portrait figcaption span,
.timeline-memorial-portrait figcaption strong {
   display: block;
}

.timeline-memorial-portrait figcaption span {
   color: var(--bronze);
   font: 700 9px var(--sans);
   text-transform: uppercase;
   letter-spacing: .12em;
}

.timeline-memorial-portrait figcaption strong {
   margin-top: 5px;
   color: var(--oxblood);
   font-size: 18px;
}

.timeline-memorial-copy {
   padding: 38px;
   background: var(--paper);
   border-left: 4px solid var(--oxblood);
}

.timeline-memorial-copy h3 {
   font-size: clamp(30px, 3vw, 40px);
}

.timeline-memorial-copy>p:not(.object-label) {
   color: var(--muted);
}

.timeline-final-gift {
   margin-top: 28px;
   padding: 24px 26px;
   background: var(--paper-deep);
   border-top: 3px solid var(--bronze);
}

.timeline-final-gift span {
   display: block;
   color: var(--bronze);
   font: 700 9px var(--sans);
   text-transform: uppercase;
   letter-spacing: .12em;
}

.timeline-final-gift strong {
   display: block;
   margin: 6px 0 8px;
   color: var(--forest);
   font-size: 36px;
   line-height: 1;
}

.timeline-final-gift p {
   margin: 0;
   color: var(--muted);
   font-size: 15px;
   line-height: 1.55;
}


/* =========================================================
   1927 — CONTINUITY
   ========================================================= */

.timeline-event-continuity .timeline-event-body {
   padding: 34px;
   background: var(--forest);
   color: #f7f0e3;
}

.timeline-event-continuity .timeline-event-body>.object-label {
   color: #d6b675;
}

.timeline-event-continuity .timeline-event-body>h3 {
   color: #f7f0e3;
}

.timeline-event-continuity .timeline-event-body>p {
   color: #e8dfd1;
}

.timeline-continuity-grid {
   display: grid;
   grid-template-columns: 260px minmax(0, 1fr);
   gap: 32px;
   align-items: center;
   margin-top: 30px;
}

.timeline-continuity-portrait {
   margin: 0;
   padding: 14px;
   background: var(--paper);
   color: var(--ink);
}

.timeline-continuity-portrait img {
   width: 100%;
   height: auto;
   object-fit: contain;
}

.timeline-continuity-portrait figcaption {
   padding: 14px 3px 2px;
}

.timeline-continuity-portrait figcaption span,
.timeline-continuity-portrait figcaption strong {
   display: block;
}

.timeline-continuity-portrait figcaption span {
   color: var(--bronze);
   font: 700 9px var(--sans);
   text-transform: uppercase;
   letter-spacing: .12em;
}

.timeline-continuity-portrait figcaption strong {
   margin-top: 5px;
   color: var(--oxblood);
   font-size: 17px;
}

.timeline-continuity-copy {
   padding: 28px 30px;
   border: 1px solid rgba(255, 255, 255, .2);
   background: rgba(255, 255, 255, .055);
}

.timeline-continuity-copy .object-label {
   color: #d6b675;
}

.timeline-continuity-copy .timeline-display-statement {
   margin: 8px 0 20px;
   color: #fff;
   font-size: 27px;
   line-height: 1.4;
   font-style: italic;
}

.timeline-continuity-copy p {
   margin-bottom: 0;
   color: #e8dfd1;
}

/* =========================================================
   ERA 05 — LEGACY IN MOTION
   ========================================================= */


/* Leadership succession */

.timeline-event-succession .timeline-event-body {
   padding: 34px;
   background: var(--paper-deep);
   border: 1px solid var(--line);
}

.timeline-event-succession .timeline-event-body>p:not(.object-label) {
   color: var(--muted);
}

.timeline-succession-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 22px;
   margin-top: 28px;
}

.timeline-succession-person {
   margin: 0;
   padding: 15px;
   background: var(--paper);
   border: 1px solid var(--line);
}

.timeline-succession-person img {
   width: 100%;
   height: auto;
}

.timeline-succession-person figcaption,
.timeline-patipukur-person figcaption,
.timeline-governance-portrait figcaption,
.timeline-expansion-person figcaption,
.timeline-state-photo figcaption,
.timeline-state-document figcaption {
   padding: 14px 3px 2px;
}

.timeline-succession-person figcaption span,
.timeline-succession-person figcaption strong,
.timeline-succession-person figcaption small,
.timeline-patipukur-person figcaption span,
.timeline-patipukur-person figcaption strong,
.timeline-patipukur-person figcaption small,
.timeline-governance-portrait figcaption span,
.timeline-governance-portrait figcaption strong,
.timeline-governance-portrait figcaption small,
.timeline-expansion-person figcaption span,
.timeline-expansion-person figcaption strong,
.timeline-expansion-person figcaption small,
.timeline-state-photo figcaption span,
.timeline-state-photo figcaption strong,
.timeline-state-document figcaption span,
.timeline-state-document figcaption strong {
   display: block;
}

.timeline-succession-person figcaption span,
.timeline-patipukur-person figcaption span,
.timeline-governance-portrait figcaption span,
.timeline-expansion-person figcaption span,
.timeline-state-photo figcaption span,
.timeline-state-document figcaption span {
   color: var(--bronze);
   font: 700 9px var(--sans);
   text-transform: uppercase;
   letter-spacing: .11em;
}

.timeline-succession-person figcaption strong,
.timeline-patipukur-person figcaption strong,
.timeline-governance-portrait figcaption strong,
.timeline-expansion-person figcaption strong,
.timeline-state-photo figcaption strong,
.timeline-state-document figcaption strong {
   margin-top: 5px;
   color: var(--oxblood);
   font-size: 18px;
   line-height: 1.25;
}

.timeline-succession-person figcaption small,
.timeline-patipukur-person figcaption small,
.timeline-governance-portrait figcaption small,
.timeline-expansion-person figcaption small {
   margin-top: 5px;
   color: var(--muted);
   font-size: 12px;
   line-height: 1.45;
}

.timeline-succession-note {
   margin-top: 22px;
   padding: 16px 18px;
   border-left: 3px solid var(--bronze);
   background: var(--paper);
}

.timeline-succession-note p {
   margin: 0;
   color: var(--muted);
   font-size: 14px;
   line-height: 1.55;
}


/* 1933 Patipukur */

.timeline-event-patipukur-origin .timeline-event-body {
   padding: 34px;
   background: var(--forest);
   color: #f7f0e3;
}

.timeline-patipukur-heading .object-label,
.timeline-patipukur-copy .object-label {
   color: #d6b675;
}

.timeline-patipukur-heading h3 {
   color: #f7f0e3;
}

.timeline-patipukur-heading p:not(.object-label) {
   color: #e8dfd1;
}

.timeline-patipukur-grid {
   display: grid;
   grid-template-columns: 250px minmax(0, 1fr);
   gap: 30px;
   align-items: center;
   margin-top: 28px;
}

.timeline-patipukur-person {
   margin: 0;
   padding: 14px;
   background: var(--paper);
   color: var(--ink);
}

.timeline-patipukur-person img {
   width: 100%;
   height: auto;
}

.timeline-patipukur-copy {
   padding: 28px;
   border: 1px solid rgba(255, 255, 255, .2);
   background: rgba(255, 255, 255, .055);
}

.timeline-patipukur-copy .timeline-display-statement {
   margin: 8px 0 20px;
   color: #fff;
   font-size: 26px;
   line-height: 1.4;
   font-style: italic;
}

.timeline-patipukur-copy p {
   color: #e8dfd1;
}


/* 1941 Jubilee */

.timeline-event-jubilee .timeline-event-body {
   padding: 34px;
   background: var(--paper);
   border-top: 4px solid var(--bronze);
   box-shadow: var(--shadow);
}

.timeline-event-jubilee .timeline-event-body>p:not(.object-label) {
   color: var(--muted);
}

.timeline-jubilee-grid {
   display: grid;
   grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
   gap: 32px;
   align-items: center;
   margin-top: 30px;
}

.timeline-jubilee-document {
   margin: 0;
   padding: 15px;
   background: var(--paper-deep);
   border: 1px solid var(--line);
}

.timeline-jubilee-document img {
   width: 100%;
   height: auto;
}

.timeline-jubilee-document figcaption {
   padding: 14px 3px 2px;
}

.timeline-jubilee-document figcaption span,
.timeline-jubilee-document figcaption strong {
   display: block;
}

.timeline-jubilee-document figcaption span {
   color: var(--bronze);
   font: 700 9px var(--sans);
   text-transform: uppercase;
   letter-spacing: .11em;
}

.timeline-jubilee-document figcaption strong {
   margin-top: 5px;
   color: var(--oxblood);
   font-size: 18px;
}

.timeline-jubilee-copy {
   padding: 28px 30px;
   background: var(--paper-deep);
   border-left: 4px solid var(--oxblood);
}

.timeline-jubilee-copy p:not(.object-label) {
   color: var(--muted);
}


/* 1943–1950 governance */

.timeline-event-governance-transition .timeline-event-body {
   padding: 32px;
   background: var(--paper-deep);
   border: 1px solid var(--line);
}

.timeline-governance-transition-grid {
   display: grid;
   grid-template-columns: 240px minmax(0, 1fr);
   gap: 30px;
   align-items: center;
}

.timeline-governance-portrait {
   margin: 0;
   padding: 14px;
   background: var(--paper);
   border: 1px solid var(--line);
}

.timeline-governance-portrait img {
   width: 100%;
   height: auto;
}

.timeline-governance-transition-copy {
   padding: 28px;
   background: var(--paper);
   border-left: 4px solid var(--bronze);
}

.timeline-governance-transition-copy p:not(.object-label) {
   color: var(--muted);
}


/* 1951 expansion */

.timeline-event-patipukur-expansion .timeline-event-body {
   padding: 34px;
   background: var(--paper);
   border: 1px solid var(--line);
}

.timeline-event-patipukur-expansion .timeline-event-body>p:not(.object-label) {
   color: var(--muted);
}

.timeline-expansion-grid {
   display: grid;
   grid-template-columns: 240px minmax(0, 1fr);
   gap: 30px;
   align-items: center;
   margin-top: 28px;
}

.timeline-expansion-person {
   margin: 0;
   padding: 14px;
   background: var(--paper-deep);
   border: 1px solid var(--line);
}

.timeline-expansion-person img {
   width: 100%;
   height: auto;
}

.timeline-expansion-copy {
   padding: 28px;
   background: var(--paper-deep);
   border-top: 3px solid var(--bronze);
}

.timeline-expansion-copy p {
   color: var(--muted);
}


/* Early 1960s */

.timeline-event-pressure .timeline-event-body {
   padding: 30px 34px;
   background: transparent;
   border-left: 4px solid var(--oxblood);
}

.timeline-event-pressure .timeline-event-body>p:not(.object-label) {
   color: var(--muted);
}


/* 1964 transition */

.timeline-event-state-transition .timeline-event-body {
   padding: 0;
   overflow: hidden;
   background: var(--paper);
   border: 1px solid var(--line);
   border-top: 5px solid var(--oxblood);
   box-shadow: var(--shadow);
}

.timeline-state-heading {
   padding: 38px 40px 30px;
}

.timeline-state-heading h3 {
   font-size: clamp(32px, 3.3vw, 44px);
}

.timeline-state-heading p:not(.object-label) {
   color: var(--muted);
}

.timeline-state-hospitals {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 18px;
   padding: 28px 38px;
   background: var(--paper-deep);
   border-block: 1px solid var(--line);
}

.timeline-state-photo {
   margin: 0;
   padding: 14px;
   background: var(--paper);
   border: 1px solid var(--line);
}

.timeline-state-photo img {
   width: 100%;
   height: auto;
}

.timeline-state-document-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 22px;
   padding: 34px 38px;
   background: var(--forest);
}

.timeline-state-document {
   margin: 0;
   padding: 14px;
   background: var(--paper);
   border: 1px solid #d6b675;
}

.timeline-state-document img {
   width: 100%;
   height: 430px;
   object-fit: contain;
   background: var(--ivory);
}

.timeline-state-coda {
   padding: 34px 40px;
   background: var(--oxblood);
   color: #f7f0e3;
}

.timeline-state-coda .object-label {
   color: #d6b675;
}

.timeline-state-coda .timeline-display-statement {
   margin: 8px 0 18px;
   color: #fff;
   font-size: 28px;
   line-height: 1.4;
   font-style: italic;
}

.timeline-state-coda p {
   color: #f0e4d7;
}

/* =========================================================
   ERA 06 — PUBLIC LEGACY
   ========================================================= */


/* 1964 onward */

.timeline-event-public-institution .timeline-event-body {
   padding: 34px;
   background: var(--paper);
   border: 1px solid var(--line);
   border-top: 4px solid var(--bronze);
}

.timeline-public-institution-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr);
   gap: 34px;
   align-items: center;
}

.timeline-public-institution-copy p:not(.object-label) {
   color: var(--muted);
}

.timeline-modern-campus {
   margin: 0;
   padding: 14px;
   background: var(--paper-deep);
   border: 1px solid var(--line);
}

.timeline-modern-campus img {
   width: 100%;
   height: auto;
}

.timeline-modern-campus figcaption {
   padding: 14px 3px 2px;
}

.timeline-modern-campus figcaption span,
.timeline-modern-campus figcaption strong {
   display: block;
}

.timeline-modern-campus figcaption span {
   color: var(--bronze);
   font: 700 9px var(--sans);
   text-transform: uppercase;
   letter-spacing: .11em;
}

.timeline-modern-campus figcaption strong {
   margin-top: 5px;
   color: var(--oxblood);
   font-size: 18px;
   line-height: 1.3;
}


/* 2012 research */

.timeline-event-research .timeline-event-body {
   padding: 30px 34px;
   background: transparent;
   border-left: 4px solid var(--bronze);
}

.timeline-event-research .timeline-event-body>p:not(.object-label) {
   color: var(--muted);
}

.timeline-research-echo {
   margin-top: 24px;
   padding: 20px 22px;
   background: var(--paper);
   border: 1px solid var(--line);
}

.timeline-research-echo span {
   display: block;
   margin-bottom: 5px;
   color: var(--bronze);
   font: 700 10px var(--sans);
   text-transform: uppercase;
   letter-spacing: .12em;
}

.timeline-research-echo p {
   margin: 0;
   color: var(--forest);
   font-size: 16px;
   line-height: 1.6;
}


/* 2015–2016 centenary */

.timeline-event-centenary .timeline-event-body {
   padding: 0;
   overflow: hidden;
   background: var(--forest);
   color: #f7f0e3;
   border: 1px solid #385047;
   box-shadow: var(--shadow);
}

.timeline-centenary-heading {
   padding: 36px 38px 26px;
}

.timeline-centenary-heading .object-label {
   color: #d6b675;
}

.timeline-centenary-heading h3 {
   color: #f7f0e3;
   font-size: clamp(32px, 3.2vw, 44px);
}

.timeline-centenary-heading p:not(.object-label) {
   max-width: 760px;
   color: #e8dfd1;
}

.timeline-centenary-object {
   margin: 0;
   padding: 24px 38px 18px;
   border-top: 1px solid rgba(255, 255, 255, .15);
}

.timeline-centenary-object img {
   width: 100%;
   height: auto;
   max-height: 560px;
   object-fit: contain;
   background: var(--paper);
}

.timeline-centenary-object figcaption {
   padding: 14px 3px 2px;
}

.timeline-centenary-object figcaption span,
.timeline-centenary-object figcaption strong {
   display: block;
}

.timeline-centenary-object figcaption span {
   color: #d6b675;
   font: 700 9px var(--sans);
   text-transform: uppercase;
   letter-spacing: .11em;
}

.timeline-centenary-object figcaption strong {
   margin-top: 5px;
   color: #fff;
   font-size: 20px;
}

.timeline-centenary-note {
   padding: 0 38px 32px;
}

.timeline-centenary-note p {
   margin: 0;
   color: #e8dfd1;
}


/* Present day */

.timeline-event-present .timeline-event-body {
   padding: 34px;
   background: var(--paper-deep);
   border: 1px solid var(--line);
}

.timeline-event-present .timeline-event-body>p:not(.object-label) {
   color: var(--muted);
}

.timeline-present-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 22px;
   margin-top: 30px;
}

.timeline-present-card {
   margin: 0;
   padding: 14px;
   background: var(--paper);
   border: 1px solid var(--line);
}

.timeline-present-card img {
   width: 100%;
   height: auto;
   object-fit: contain;
   background: var(--ivory);
}

.timeline-present-card figcaption {
   padding: 14px 3px 2px;
}

.timeline-present-card figcaption span,
.timeline-present-card figcaption strong {
   display: block;
}

.timeline-present-card figcaption span {
   color: var(--bronze);
   font: 700 9px var(--sans);
   text-transform: uppercase;
   letter-spacing: .11em;
}

.timeline-present-card figcaption strong {
   margin-top: 5px;
   color: var(--oxblood);
   font-size: 18px;
   line-height: 1.3;
}

/* Final coda */

.timeline-final-coda {
   margin: 10px 0 0 128px;
   padding: 46px 48px;
   background: var(--oxblood);
   color: #f7f0e3;
   border-top: 4px solid var(--bronze);
}

.timeline-final-coda .object-label {
   color: #d6b675;
}

.timeline-final-coda h3 {
   margin: 8px 0 14px;
   color: #fff;
   font-size: clamp(34px, 4vw, 52px);
}

.timeline-final-coda p {
   max-width: 760px;
   margin-bottom: 0;
   color: #f0e4d7;
   font-size: 18px;
}


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

body:has(.timeline-page) .site-footer {
   margin-top: 0;
}


/* =========================================================
   RESPONSIVE — LAPTOP / INTERMEDIATE
   ========================================================= */

@media (max-width: 1180px) {

   .timeline-shell {
      grid-template-columns: 1fr;
   }

   .timeline-era-rail {
      position: static;
      grid-row: 1;
      margin-bottom: 36px;
      padding: 18px;
      background: var(--paper);
      border: 1px solid var(--line);
   }

   .timeline-era-rail nav {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-left: 1px solid var(--line);
   }

   .timeline-era-rail a {
      border-right: 1px solid var(--line);
      padding: 12px;
   }

}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 880px) {

   .timeline-hero-grid {
      grid-template-columns: 1fr;
      gap: 42px;
   }

   .timeline-hero-portrait {
      max-width: 420px;
   }

   .timeline-event {
      grid-template-columns: 100px minmax(0, 1fr);
      gap: 22px;
   }

   .timeline-object-feature-grid {
      grid-template-columns: 1fr 220px;
   }

   .timeline-document-grid {
      grid-template-columns: 220px 1fr;
   }

   .timeline-next-threshold {
      margin-left: 100px;
   }

   .timeline-gandhi-landmark-grid {
      grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
   }

   .timeline-memorial-grid {
      grid-template-columns: 240px minmax(0, 1fr);
   }

   .timeline-continuity-grid {
      grid-template-columns: 220px minmax(0, 1fr);
   }

   .timeline-patipukur-grid,
   .timeline-jubilee-grid,
   .timeline-governance-transition-grid,
   .timeline-expansion-grid {
      grid-template-columns: 220px minmax(0, 1fr);
   }

   .timeline-state-document img {
      height: 360px;
   }

   .timeline-public-institution-grid {
      grid-template-columns: 1fr;
   }

   .timeline-modern-campus {
      max-width: 700px;
   }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 680px) {

   .timeline-hero {
      padding: 58px 0 48px;
   }

   .timeline-hero-note {
      padding-left: 15px;
   }

   .timeline-gallery-section {
      padding-top: 48px;
   }

   .timeline-era-rail nav {
      grid-template-columns: 1fr;
   }

   .timeline-era-rail a {
      border-left: 0;
   }

   .timeline-era {
      padding-left: 30px;
      padding-bottom: 74px;
   }

   .timeline-era::before {
      left: 5px;
   }

   .timeline-era-heading {
      grid-template-columns: 1fr;
      gap: 8px;
   }

   .timeline-era-heading::before {
      left: -31px;
      top: 7px;
   }

   .timeline-era-number {
      margin-bottom: 0;
   }

   .timeline-event {
      grid-template-columns: 1fr;
      gap: 12px;
      margin-bottom: 38px;
   }

   .timeline-event::before {
      left: -29px;
      top: 9px;
   }

   .timeline-date {
      padding-top: 0;
   }

   .timeline-date time,
   .timeline-date>span:first-child {
      font-size: 27px;
   }

   .timeline-date-label>span:first-child {
      font-size: 13px;
      line-height: 1.35;
   }

   .timeline-date-range>span:first-child {
      font-size: 25px;
   }

   .timeline-date-day .timeline-day {
      font-size: 42px;
   }

   .timeline-event-major .timeline-event-body,
   .timeline-event-landmark .timeline-event-body {
      padding: 24px;
   }

   .timeline-image-pair {
      grid-template-columns: 1fr;
   }

   .timeline-object-feature-grid {
      grid-template-columns: 1fr;
      padding: 24px;
   }

   .timeline-object-book {
      max-width: 280px;
      width: 100%;
      margin-inline: auto;
   }

   .timeline-document-grid {
      grid-template-columns: 1fr;
   }

   .timeline-object-newspaper {
      margin-inline: auto;
   }

   .timeline-next-threshold {
      margin-left: 0;
      padding: 24px;
   }

   .timeline-founding-intro,
   .timeline-founding-principle {
      padding: 24px;
   }

   .timeline-founding-record {
      grid-template-columns: 1fr;
   }

   .timeline-founding-principle .timeline-display-statement {
      font-size: 20px;
   }

   .timeline-event-governance .timeline-event-body {
      padding: 24px;
   }

   .timeline-leadership-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
   }

   .timeline-leader {
      width: 100%;
      margin: 0;
   }

   .timeline-governance-copy {
      grid-column: 1 / -1;
      padding: 22px;
   }

   .timeline-publications-copy {
      padding: 24px;
   }

   .timeline-publication-gallery {
      grid-template-columns: 1fr;
      padding: 22px 24px 24px;
   }

   .timeline-publication-card {
      max-width: 330px;
      width: 100%;
      margin-inline: auto;
   }

   .timeline-publication-card img {
      height: auto;
   }

   .timeline-event-inquiry .timeline-event-body {
      padding: 24px;
   }

   .timeline-inquiry-record {
      padding: 22px;
   }

   .timeline-gandhi-landmark-grid {
      grid-template-columns: 1fr;
   }

   .timeline-gandhi-document {
      border-right: 0;
      border-bottom: 1px solid var(--line);
   }

   .timeline-gandhi-document img {
      max-width: 340px;
      margin-inline: auto;
   }

   .timeline-gandhi-copy {
      padding: 24px;
   }

   .timeline-memorial-grid {
      grid-template-columns: 1fr;
      gap: 22px;
   }

   .timeline-memorial-portrait {
      max-width: 290px;
      width: 100%;
      margin-inline: auto;
   }

   .timeline-memorial-copy {
      padding: 24px;
   }

   .timeline-final-gift {
      padding: 20px;
   }

   .timeline-continuity-grid {
      grid-template-columns: 1fr;
   }

   .timeline-continuity-portrait {
      max-width: 290px;
      width: 100%;
      margin-inline: auto;
   }

   .timeline-continuity-copy {
      padding: 22px;
   }

   .timeline-continuity-copy .timeline-display-statement {
      font-size: 23px;
   }

   .timeline-succession-grid,
   .timeline-state-hospitals,
   .timeline-state-document-grid {
      grid-template-columns: 1fr;
   }

   .timeline-succession-person {
      max-width: 320px;
      width: 100%;
      margin-inline: auto;
   }

   .timeline-patipukur-grid,
   .timeline-jubilee-grid,
   .timeline-governance-transition-grid,
   .timeline-expansion-grid {
      grid-template-columns: 1fr;
   }

   .timeline-patipukur-person,
   .timeline-governance-portrait,
   .timeline-expansion-person {
      max-width: 290px;
      width: 100%;
      margin-inline: auto;
   }

   .timeline-jubilee-document {
      max-width: 330px;
      width: 100%;
      margin-inline: auto;
   }

   .timeline-patipukur-copy,
   .timeline-jubilee-copy,
   .timeline-governance-transition-copy,
   .timeline-expansion-copy {
      padding: 22px;
   }

   .timeline-event-succession .timeline-event-body,
   .timeline-event-patipukur-origin .timeline-event-body,
   .timeline-event-jubilee .timeline-event-body,
   .timeline-event-governance-transition .timeline-event-body,
   .timeline-event-patipukur-expansion .timeline-event-body {
      padding: 24px;
   }

   .timeline-event-pressure .timeline-event-body {
      padding: 24px;
   }

   .timeline-state-heading,
   .timeline-state-coda {
      padding: 26px 24px;
   }

   .timeline-state-hospitals,
   .timeline-state-document-grid {
      padding: 24px;
   }

   .timeline-state-photo,
   .timeline-state-document {
      max-width: 340px;
      width: 100%;
      margin-inline: auto;
   }

   .timeline-state-document img {
      height: auto;
   }

   .timeline-state-coda .timeline-display-statement {
      font-size: 23px;
   }

   .timeline-event-public-institution .timeline-event-body,
   .timeline-event-present .timeline-event-body {
      padding: 24px;
   }

   .timeline-event-research .timeline-event-body {
      padding: 24px;
   }

   .timeline-centenary-heading,
   .timeline-centenary-note {
      padding-left: 24px;
      padding-right: 24px;
   }

   .timeline-centenary-object {
      padding: 20px 24px 16px;
   }

   .timeline-present-grid {
      grid-template-columns: 1fr;
   }

   .timeline-present-card {
      max-width: 340px;
      width: 100%;
      margin-inline: auto;
   }

   .timeline-final-coda {
      margin-left: 0;
      padding: 32px 24px;
   }

}