/* =========================================================
   JBRay.org — Entrance
   Page-specific styles for index.html
   ========================================================= */


/* ---------------------------------------------------------
   Entrance hero
   --------------------------------------------------------- */

.entrance-hero {
   position: relative;
   overflow: hidden;
   border-bottom: 1px solid var(--line);
   background:
      radial-gradient(circle at 78% 36%,
         rgba(154, 116, 65, .14),
         transparent 34%),
      linear-gradient(120deg,
         rgba(255, 255, 255, .52),
         transparent 58%);
}

.entrance-hero::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 5px;
   background:
      linear-gradient(90deg,
         transparent,
         rgba(154, 116, 65, .48),
         transparent);
   pointer-events: none;
}

.entrance-hero-grid {
   min-height: calc(100vh - 94px);
   display: grid;
   grid-template-columns: minmax(0, 1.08fr) minmax(350px, .72fr);
   gap: clamp(52px, 7vw, 96px);
   align-items: center;
   padding-top: clamp(68px, 8vh, 104px);
   padding-bottom: clamp(72px, 9vh, 112px);
}


/* ---------------------------------------------------------
   Hero copy
   --------------------------------------------------------- */

.entrance-hero-copy {
   max-width: 720px;
}

.entrance-hero-copy .kicker {
   margin: 0 0 22px;
}

.entrance-hero h1 {
   max-width: 760px;
   margin-bottom: 12px;
   font-size: clamp(58px, 6.4vw, 92px);
}

.entrance-bengali {
   margin: 0 0 27px;
   font-family: 'Noto Serif Bengali', serif;
   font-size: clamp(26px, 2.4vw, 34px);
   line-height: 1.25;
   color: var(--forest);
}

.entrance-hero-lede {
   max-width: 680px;
   margin: 0;
   color: var(--forest);
   font-size: clamp(21px, 1.7vw, 25px);
   line-height: 1.5;
}

.entrance-hero-intro {
   max-width: 650px;
   margin: 22px 0 0;
   color: var(--muted);
   font-size: 18px;
   line-height: 1.7;
}


/* ---------------------------------------------------------
   Hero actions
   --------------------------------------------------------- */

.entrance-hero-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 22px;
   margin-top: 34px;
}

.entrance-text-link {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 9px 0;
   color: var(--forest);
   text-decoration: none;
   border-bottom: 1px solid rgba(41, 62, 55, .45);
   font: 700 12px/1.4 var(--sans);
   text-transform: uppercase;
   letter-spacing: .09em;
}

.entrance-text-link span {
   transition: transform .18s ease;
}

.entrance-text-link:hover span {
   transform: translateX(4px);
}

.entrance-text-link:focus-visible {
   outline: 2px solid var(--bronze);
   outline-offset: 5px;
}


/* ---------------------------------------------------------
   Hero portrait object
   --------------------------------------------------------- */

.entrance-hero-object {
   width: min(100%, 455px);
   margin: 0;
   justify-self: end;
}

.entrance-hero-frame {
   position: relative;
   padding: 18px;
   background: var(--paper);
   border: 1px solid var(--line);
   box-shadow: var(--shadow);
}

.entrance-hero-frame::before {
   content: "";
   position: absolute;
   inset: 9px;
   z-index: 1;
   border: 1px solid rgba(154, 116, 65, .48);
   pointer-events: none;
}

.entrance-hero-frame::after {
   content: "";
   position: absolute;
   inset: 14px;
   z-index: 1;
   border: 1px solid rgba(111, 45, 45, .18);
   pointer-events: none;
}

.entrance-hero-frame img {
   width: 100%;
   height: auto;
   position: relative;
   z-index: 0;
}

.entrance-hero-object figcaption {
   display: grid;
   gap: 3px;
   padding: 15px 10px 0;
   text-align: center;
   color: var(--muted);
   font-size: 14px;
   line-height: 1.45;
}

.entrance-hero-object figcaption .object-label {
   color: var(--bronze);
}

/* ---------------------------------------------------------
   Primary museum pathways
   --------------------------------------------------------- */

.entrance-pathways {
   background: var(--paper);
}

.entrance-pathways-head {
   display: block;
   width: 100%;
   max-width: none;
   margin-bottom: clamp(42px, 6vw, 70px);
}

.entrance-pathways-head h2 {
   margin-bottom: 18px;
}

.entrance-pathways-head .intro {
   width: 100%;
   max-width: none;
   margin: 0;
}

.entrance-pathway-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: clamp(22px, 2.5vw, 34px);
}

/* Entire pathway is clickable */

.entrance-pathway {
   position: relative;
   display: flex;
   flex-direction: column;
   min-width: 0;
   overflow: hidden;
   color: inherit;
   text-decoration: none;
   background: var(--ivory);
   border: 1px solid var(--line);
   box-shadow: 0 12px 32px rgba(30, 42, 37, .06);
   transition:
      transform .2s ease,
      box-shadow .2s ease,
      border-color .2s ease;
}

.entrance-pathway:hover {
   transform: translateY(-4px);
   border-color: rgba(154, 116, 65, .6);
   box-shadow: 0 17px 40px rgba(30, 42, 37, .11);
}

.entrance-pathway:focus-visible {
   outline: 3px solid var(--bronze);
   outline-offset: 4px;
}


/* Images */

.entrance-pathway-image {
   position: relative;
   overflow: hidden;
   background: #e7dfd0;
}

.entrance-pathway-image::after {
   content: "";
   position: absolute;
   inset: 0;
   border-bottom: 1px solid rgba(154, 116, 65, .32);
   pointer-events: none;
}

.entrance-pathway-image img {
   display: block;
   width: 100%;
   height: 330px;
   object-fit: cover;
   transition: transform .35s ease;
}

.entrance-pathway:hover .entrance-pathway-image img {
   transform: scale(1.018);
}


/* Individual crops */

.entrance-pathway-life .entrance-pathway-image img {
   object-position: center 18%;
}

.entrance-pathway-institution .entrance-pathway-image img {
   object-position: center 42%;
}

.entrance-pathway-timeline .entrance-pathway-image img {
   object-position: center;
}


/* Text */

.entrance-pathway-content {
   display: flex;
   flex: 1;
   flex-direction: column;
   padding: clamp(24px, 2.5vw, 32px);
}

.entrance-pathway-content .object-label {
   margin-bottom: 13px;
}

.entrance-pathway-content h3 {
   margin: 0 0 15px;
   color: var(--forest);
   font-size: clamp(25px, 2vw, 31px);
   line-height: 1.15;
}

.entrance-pathway-content p:not(.object-label) {
   margin: 0 0 25px;
   color: var(--muted);
   line-height: 1.65;
}

.entrance-pathway-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: auto;
   color: var(--oxblood);
   font: 700 12px/1.4 var(--sans);
   text-transform: uppercase;
   letter-spacing: .085em;
}

.entrance-pathway-link span {
   transition: transform .18s ease;
}

.entrance-pathway:hover .entrance-pathway-link span {
   transform: translateX(4px);
}


/* ---------------------------------------------------------
   Documentary record
   --------------------------------------------------------- */

.entrance-documentary {
   position: relative;
   background: var(--forest);
   color: var(--ivory);
}

.entrance-documentary-head {
   max-width: 900px;
   margin-bottom: clamp(46px, 6vw, 74px);
}

.entrance-documentary-head .kicker {
   color: #e5bd62;
}

.entrance-documentary-head h2 {
   margin-bottom: 20px;
   color: var(--ivory);
}

.entrance-documentary-head .intro {
   max-width: 840px;
   margin: 0;
   color: rgba(250, 246, 237, .82);
}


/* Two documentary pathways */

.entrance-documentary-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: clamp(28px, 4vw, 54px);
   align-items: stretch;
}

.entrance-documentary-panel {
   display: grid;
   grid-template-columns: minmax(180px, .72fr) minmax(0, 1.15fr);
   gap: clamp(24px, 3vw, 38px);
   align-items: center;
   padding: clamp(24px, 3vw, 36px);
   background: var(--ivory);
   color: var(--ink);
   border: 1px solid rgba(194, 157, 93, .42);
   box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
}


/* Documentary images */

.entrance-documentary-object {
   margin: 0;
}

/* ---------------------------------------------------------
   Digital Library — 1964 commemorative booklet
   --------------------------------------------------------- */

.entrance-booklet-object {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
}

.entrance-booklet-trigger {
   width: min(100%, 225px);
   overflow: hidden;
   background: #fff;
   border: 1px solid rgba(90, 67, 43, .3);
   box-shadow: 0 12px 28px rgba(48, 36, 24, .18);
}

.entrance-booklet-trigger img {
   display: block;
   width: 100%;
   height: auto;
}

.entrance-booklet-trigger:hover {
   border-color: var(--bronze);
}

.entrance-booklet-trigger:focus-visible {
   outline: 3px solid var(--bronze);
   outline-offset: 4px;
}

.entrance-booklet-object figcaption {
   max-width: 225px;
   color: var(--muted);
   font: 700 10px/1.4 var(--sans);
   text-align: center;
   text-transform: uppercase;
   letter-spacing: .08em;
}

/* Behar Herald */

.entrance-newspaper-object {
   display: flex;
   justify-content: center;
}

.entrance-archive-trigger {
   position: relative;
   display: block;
   width: min(100%, 185px);
   padding: 0;
   overflow: hidden;
   cursor: zoom-in;
   background: transparent;
   border: 1px solid rgba(90, 67, 43, .34);
   box-shadow: 0 12px 28px rgba(48, 36, 24, .18);
}

.entrance-archive-trigger img {
   display: block;
   width: 100%;
   height: auto;
}

.entrance-archive-trigger .archive-viewer-prompt {
   position: absolute;
   left: 8px;
   right: 8px;
   bottom: 8px;
   padding: 8px 10px;
   background: rgba(28, 48, 42, .9);
   color: #fff;
   font: 700 10px/1.3 var(--sans);
   text-align: center;
   text-transform: uppercase;
   letter-spacing: .08em;
}

.entrance-archive-trigger:hover {
   border-color: var(--bronze);
}

.entrance-archive-trigger:focus-visible {
   outline: 3px solid var(--bronze);
   outline-offset: 4px;
}


/* Documentary copy */

.entrance-documentary-copy {
   display: flex;
   min-width: 0;
   flex-direction: column;
   align-self: stretch;
}

.entrance-documentary-copy .object-label {
   margin-bottom: 12px;
}

.entrance-documentary-copy h3 {
   margin: 0 0 16px;
   color: var(--forest);
   font-size: clamp(27px, 2.2vw, 34px);
   line-height: 1.15;
}

.entrance-documentary-copy>p:not(.object-label) {
   margin: 0 0 20px;
   color: var(--muted);
   line-height: 1.65;
}

.entrance-documentary-caption {
   padding-top: 17px;
   border-top: 1px solid var(--line);
   font-size: 14px;
}

.entrance-documentary-caption cite {
   color: var(--forest);
}

.entrance-documentary-link {
   display: inline-flex;
   align-items: center;
   align-self: flex-start;
   gap: 8px;
   margin-top: auto;
   padding-top: 6px;
   color: var(--oxblood);
   font: 700 12px/1.4 var(--sans);
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: .085em;
}

.entrance-documentary-link span {
   transition: transform .18s ease;
}

.entrance-documentary-link:hover span {
   transform: translateX(4px);
}

.entrance-documentary-link:focus-visible {
   outline: 2px solid var(--bronze);
   outline-offset: 5px;
}



/* ---------------------------------------------------------
   Closing coda
   --------------------------------------------------------- */

.entrance-coda {
   padding: clamp(76px, 9vw, 120px) 0;
   background: var(--paper-deep);
}

.entrance-coda-panel {
   display: grid;
   grid-template-columns: 180px 48px minmax(0, 1fr);
   gap: clamp(28px, 4vw, 48px);
   align-items: center;
   padding: clamp(34px, 4vw, 52px);

   background: var(--oxblood);
   border: 1px solid var(--bronze);

   box-shadow:
      0 0 0 6px rgba(154, 116, 65, .16),
      0 16px 36px rgba(53, 31, 28, .15);
}


/* Bright Institution-style gold used only inside Entrance coda */
.entrance-coda-era {
   display: flex;
   flex-direction: column;
   color: #e5bd62;
   font-family: var(--serif);
   font-size: clamp(31px, 3vw, 42px);
   line-height: 1.08;
}


/* ---------------------------------------------------------
   Coda ornamental divider
   --------------------------------------------------------- */

.entrance-coda-divider {
   display: flex;
   min-height: 180px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.entrance-coda-divider-line {
   width: 1px;
   flex: 1;
   min-height: 36px;
   background: #e5bd62;
}

.entrance-coda-divider-ornament {
   position: relative;
   display: block;
   flex: 0 0 auto;
   width: 38px;
   height: 58px;
}


/* Central vertical stem */

.entrance-coda-divider-ornament::before {
   content: "";
   position: absolute;
   top: 7px;
   bottom: 7px;
   left: 50%;
   width: 1px;
   transform: translateX(-50%);
   background: #e5bd62;
}


/* Top spear / bud */

.coda-fleuron-top {
   position: absolute;
   top: 1px;
   left: 50%;
   width: 7px;
   height: 7px;
   transform: translateX(-50%) rotate(45deg);
   border-top: 1px solid #e5bd62;
   border-left: 1px solid #e5bd62;
}


/* Central diamond */

.coda-fleuron-center {
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 2;
   width: 10px;
   height: 10px;
   transform: translate(-50%, -50%) rotate(45deg);
   background: var(--oxblood);
   border: 1px solid #e5bd62;
}


/* Horizontal swept arms */

.coda-fleuron-arm {
   position: absolute;
   top: 50%;
   width: 15px;
   height: 9px;
   border-top: 1px solid #e5bd62;
}

.coda-fleuron-arm-left {
   right: 20px;
   transform: translateY(-1px) rotate(18deg);
   border-radius: 70% 0 0 0;
}

.coda-fleuron-arm-right {
   left: 20px;
   transform: translateY(-1px) rotate(-18deg);
   border-radius: 0 70% 0 0;
}


/* Lower leaves */

.coda-fleuron-leaf {
   position: absolute;
   top: 32px;
   width: 10px;
   height: 16px;
   border: 1px solid #e5bd62;
}

.coda-fleuron-leaf-left {
   left: 8px;
   transform: rotate(-38deg);
   border-radius: 100% 0 100% 0;
}

.coda-fleuron-leaf-right {
   right: 8px;
   transform: rotate(38deg);
   border-radius: 0 100% 0 100%;
}


/* Small lower diamond */

.coda-fleuron-bottom {
   position: absolute;
   bottom: 2px;
   left: 50%;
   width: 6px;
   height: 6px;
   transform: translateX(-50%) rotate(45deg);
   border-right: 1px solid #e5bd62;
   border-bottom: 1px solid #e5bd62;
}


/* Copy */

.entrance-coda-copy .kicker {
   margin-bottom: 14px;
   color: #e5bd62;
}

.entrance-coda-copy h2 {
   margin: 0;

   color: var(--ivory);

   font-size: clamp(36px, 4vw, 58px);
   line-height: 1.08;
}

.entrance-coda-copy>p:not(.kicker):not(.entrance-coda-closing) {
   max-width: 780px;
   margin: 20px 0 0;

   color: rgba(245, 240, 230, .9);

   font-size: clamp(17px, 1.4vw, 20px);
   line-height: 1.7;
}

.entrance-coda-closing {
   margin: 24px 0 0;
   color: #e5bd62;
   font: 700 12px/1.4 var(--sans);
   text-transform: uppercase;
   letter-spacing: .12em;
}

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

body:has(.entrance-coda) .site-footer {
   margin-top: 0;
}

/* ---------------------------------------------------------
   Intermediate desktop / laptop
   --------------------------------------------------------- */

@media (max-width: 1280px) {

   .entrance-hero-grid {
      min-height: auto;
      grid-template-columns: minmax(0, 1fr) minmax(310px, 410px);
      gap: 54px;
      padding-top: 72px;
      padding-bottom: 80px;
   }

   .entrance-hero h1 {
      font-size: clamp(54px, 6vw, 76px);
   }

}

/* ---------------------------------------------------------
   1100 pixels
   --------------------------------------------------------- */

@media (max-width: 1100px) {

   .entrance-documentary-grid {
      grid-template-columns: 1fr;
   }

   .entrance-documentary-panel {
      grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
   }

}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 900px) {

   .entrance-hero-grid {
      grid-template-columns: 1fr;
      gap: 50px;
      padding-top: 62px;
      padding-bottom: 72px;
   }

   .entrance-hero-copy {
      max-width: 760px;
   }

   .entrance-hero-object {
      width: min(100%, 460px);
      justify-self: center;
   }

   .entrance-pathway-grid {
      grid-template-columns: 1fr;
      max-width: 720px;
      margin-inline: auto;
   }

   .entrance-pathway {
      display: grid;
      grid-template-columns: minmax(230px, .72fr) minmax(0, 1fr);
   }

   .entrance-pathway-image img {
      height: 100%;
      min-height: 310px;
   }

   .entrance-coda-panel {
      grid-template-columns: 140px 36px minmax(0, 1fr);
      gap: 26px;
   }

   .entrance-coda-divider {
      min-height: 160px;
   }

   .entrance-coda-era {
      font-size: 30px;
   }

}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 680px) {

   .entrance-hero-grid {
      gap: 40px;
      padding-top: 48px;
      padding-bottom: 58px;
   }

   .entrance-hero h1 {
      font-size: clamp(45px, 13vw, 58px);
   }

   .entrance-bengali {
      margin-bottom: 22px;
   }

   .entrance-hero-lede {
      font-size: 20px;
   }

   .entrance-hero-intro {
      font-size: 17px;
   }

   .entrance-hero-actions {
      align-items: stretch;
      flex-direction: column;
      gap: 14px;
   }

   .entrance-text-link {
      align-self: flex-start;
   }

   .entrance-hero-frame {
      padding: 14px;
   }

   .entrance-hero-frame::before {
      inset: 7px;
   }

   .entrance-hero-frame::after {
      inset: 11px;
   }

   .entrance-pathway {
      display: flex;
   }

   .entrance-pathway-image img {
      height: 300px;
      min-height: 0;
   }

   .entrance-pathway-content {
      padding: 24px;
   }

   .entrance-documentary-head {
      margin-bottom: 38px;
   }

   .entrance-documentary-panel {
      grid-template-columns: 1fr;
      gap: 26px;
   }

   .entrance-booklet-trigger {
      width: min(72%, 230px);
   }

   .entrance-archive-trigger {
      width: min(58%, 190px);
   }

   .entrance-documentary-copy h3 {
      font-size: 27px;
   }

   .entrance-coda {
      padding: 58px 0 66px;
   }

   .entrance-coda-panel {
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 28px 24px;
   }

   .entrance-coda-era {
      flex-direction: row;
      gap: 8px;
      font-size: 29px;
   }

   .entrance-coda-divider {
      min-height: 0;
      height: 28px;
      flex-direction: row;
      gap: 10px;
   }

   .entrance-coda-divider-line {
      width: auto;
      height: 1px;
      min-height: 0;
      flex: 1;
   }

   .entrance-coda-divider-ornament {
      width: 30px;
      height: 28px;
   }

   .entrance-coda-copy h2 {
      font-size: clamp(34px, 10vw, 44px);
   }

   .entrance-coda-copy>p:not(.kicker):not(.entrance-coda-closing) {
      font-size: 17px;
   }

}


/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

   .entrance-text-link span {
      transition: none;
   }

   .entrance-pathway,
   .entrance-pathway-image img,
   .entrance-pathway-link span {
      transition: none;
   }

   .entrance-documentary-link span {
      transition: none;
   }

}