/* ================================================================
   SINDH — A JOURNEY THROUGH TIME  ·  v2
   Chapters of history, each with its own ground. Photographs are
   never stretched as wallpaper — they are framed objects shown at
   native size. Grounds are colour, Indus-seal pattern and grain.
   ================================================================ */

/* Self-hosted display faces — Roman inscriptional capitals for the dates
   (stone-cut, monumental) over a high-contrast Garamond for the prose. */
@font-face{ font-family:'Cinzel'; src:url('../fonts/cinzel.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face{ font-family:'CormorantG'; src:url('../fonts/cormorant.woff2') format('woff2'); font-weight:400 600; font-display:swap; }
@font-face{ font-family:'Marcellus'; src:url('../fonts/marcellus.woff2') format('woff2'); font-weight:400; font-display:swap; }
/* Archivo - a 19th-century American grotesque. Self-hosted variable axis, latin
   subset, 34KB. It replaces Lato, which is on so many generated sites that it
   reads as no decision at all; Archivo has real width and bite in the
   letterspaced micro-labels this page runs on. */
@font-face{ font-family:'Archivo'; src:url('../fonts/archivo.woff2') format('woff2'); font-weight:300 600; font-display:swap; font-style:normal; }

/* =========================================================
   MASTHEAD over the journey — the nav must read on any ground
   ========================================================= */
/* One slim rail: crest + name on the left, navigation on the right.
   (The old two-tier masthead clipped the crest and ate 200px of height.) */
body.home #header{ position:fixed; inset:0 0 auto; z-index:80; }
/* while the index is open the rail rides above the curtain — the mark in it is
   the close control, and burying it left Escape as the only way out */
body.home.idx-on #header{ z-index:210; }
body.home.idx-on #header .container-fluid.position-absolute{ background:transparent !important; border-bottom-color:rgba(201,162,39,.16); }
body.home #header .top-header{ display:none !important; }
body.home #header .container-fluid.position-absolute{
	position:static !important; background:#0A0806 !important;
	border-bottom:1px solid rgba(201,162,39,.3);
}
/* The rail carries a 72px crest, so it has to be tall enough to hold it with
   clearance — at 45px the disc was cut off against the top of the screen.
   It also spans the full width: Bootstrap's .container capped the masthead at
   1200px even on a 1920 screen, which is what made everything look cramped. */
body.home #header .navbar > .container{
	position:relative; min-height:134px;
	max-width:none !important; width:100%;
	--edge:clamp(22px,3vw,56px);
	--crest:123px;
	padding-left:421px; padding-right:var(--edge);
}
/* The crest sits on its own white disc, drawn here so the ring of white is
   even. The source PNG (assets/img/crest-mark.png) is the 500px original with
   its dead margin cropped off, so the seal fills the disc instead of floating
   in it. The rail is tall enough to hold the disc with clearance — the crest
   used to be sliced off against the top of the screen. */
body.home #header .navbar > .container::before{
	content:""; position:absolute; left:var(--edge); top:50%; transform:translateY(-50%);
	width:var(--crest); height:var(--crest); z-index:3; border-radius:50%;
	background:#fff url('../../assets/img/crest-colour-sm.png') center/90% no-repeat;
	box-shadow:0 10px 26px rgba(0,0,0,.5);
}
body.home #header .navbar > .container::after{
	content:"Indian Institute of Sindhology"; position:absolute;
	left:calc(var(--edge) + var(--crest) + 20px); top:50%; transform:translateY(-50%);
	font-family:'CormorantG',Georgia,serif; font-size:1.05rem; letter-spacing:.01em; color:#F2E8D5; white-space:nowrap;
}
@media (min-width:1700px){
	body.home #header .navbar > .container{ --crest:132px; min-height:144px; padding-left:468px; }
	body.home #header .navbar > .container::after{ font-size:1.25rem; }
}
/* Below 1400 there is no room for the wordmark as well as nine menu items and
   a crest this size, so the crest carries the identity on its own. */
@media (min-width:1200px) and (max-width:1399.98px){
	body.home #header .navbar > .container{ --crest:117px; min-height:128px; padding-left:175px; }
	body.home #header .navbar > .container::after{ display:none; }
}
@media (min-width:992px) and (max-width:1199.98px){
	body.home #header .navbar > .container{ --crest:111px; min-height:122px; padding-left:167px; }
	body.home #header .navbar > .container::after{ display:none; }
}
@media (max-width:991.98px){
	body.home #header .navbar > .container{ --crest:96px; min-height:112px; padding-left:142px; }
	body.home #header .navbar > .container::after{ display:none; }
}
/* The theme's original brand block is a Bootstrap column holding a
   `d-lg-none` logo: invisible above 992px but still reserving ~171px, which
   was squeezing the menu off the right edge. The crest above replaces it at
   every size, so it goes. */
body.home #header .navbar > .container > .col-lg-2{ display:none !important; }
body.home #header .navbar-collapse{ justify-content:flex-end; }
body.home #header .navbar{ padding-top:0 !important; padding-bottom:0 !important; }
/* (the old crest-bar fold lived here; .top-header is display:none on this
   template, so its animated max-height was cost with nothing to show) */
body.home #header .navbar .nav-link{
	color:#EDE4D1 !important; font-size:.8rem; letter-spacing:.03em; opacity:.94;
	white-space:nowrap; padding-left:.5rem !important; padding-right:.5rem !important;
}
/* nine items have to stay on one line, so the type grows only as far as the
   width actually allows — measured, not guessed */
@media (min-width:1200px){
	body.home #header .navbar .nav-link{ font-size:.86rem; padding-left:.6rem !important; padding-right:.6rem !important; }
}
/* the Index button is a tenth item in the row, so the range where it is
   tightest (1400–1599) gives back its width in link padding */
@media (min-width:1400px){
	body.home #header .navbar .nav-link{ font-size:.84rem; padding-left:.46rem !important; padding-right:.46rem !important; }
}
@media (min-width:1600px){
	body.home #header .navbar .nav-link{ font-size:.88rem; padding-left:.66rem !important; padding-right:.66rem !important; }
}
@media (min-width:1700px){
	body.home #header .navbar .nav-link{ font-size:.97rem; padding-left:.85rem !important; padding-right:.85rem !important; }
}
/* below 1700 the mark carries the button on its own — the word is the first
   thing to go when the row runs out of room, not a menu item */
@media (max-width:1699.98px){
	.idx__open{ margin-left:.7rem; padding:.55rem .7rem; }
	.idx__open > span:not(.idx__mark){ display:none; }
}
body.home #header .navbar .navbar-nav{ flex-wrap:nowrap; align-items:center; }
body.home #header .navbar .nav-link:hover,
body.home #header .navbar .nav-link.active{ color:#F0D98A !important; opacity:1; }
body.home #header .navbar-toggler{ border-color:rgba(240,217,138,.6) !important; }
body.home #header .navbar-toggler-icon{ filter:invert(1) brightness(2); }
body.home #header .dropdown-menu{
	background:rgba(2,20,30,.96); border:0; border-top:2px solid #C9A227; border-radius:0;
	backdrop-filter:blur(12px);
}
body.home #header .dropdown-item{ color:#E4DCC7; }
body.home #header .dropdown-item:hover{ background:rgba(201,162,39,.16); color:#F0D98A; }
body.home #header .upper-header-fonts{ color:#F2ECE0 !important; }

/* ---- the menu opens from the item that opened it ----------------------------
   Bootstrap toggles .show with no transition, so the panel appeared instantly
   from nowhere. It now grows from its own trigger (origin top-left, never
   centre), starts at 0.97 rather than 0, and the rows arrive behind it in a
   short stagger. 190ms: a menu is opened often enough that anything slower
   starts to feel like waiting. */
body.home #header .dropdown-menu{
	display:block; transform-origin:top left;
	opacity:0; transform:translateY(-6px) scale(.97);
	visibility:hidden; pointer-events:none;
	transition:opacity .19s var(--out,cubic-bezier(.22,1,.36,1)),
	           transform .19s var(--out,cubic-bezier(.22,1,.36,1)),
	           visibility 0s linear .19s;
	box-shadow:0 26px 50px -22px rgba(0,0,0,.85);
}
body.home #header .dropdown-menu.show{
	opacity:1; transform:none; visibility:visible; pointer-events:auto;
	transition-delay:0s;
}
body.home #header .dropdown-menu .dropdown-item{
	opacity:0; transform:translateY(-5px);
	transition:opacity .26s var(--out,cubic-bezier(.22,1,.36,1)),
	           transform .26s var(--out,cubic-bezier(.22,1,.36,1)),
	           background .2s ease, color .2s ease;
}
body.home #header .dropdown-menu.show .dropdown-item{ opacity:1; transform:none; }
body.home #header .dropdown-menu.show .dropdown-item:nth-child(1){ transition-delay:.03s; }
body.home #header .dropdown-menu.show .dropdown-item:nth-child(2){ transition-delay:.06s; }
body.home #header .dropdown-menu.show .dropdown-item:nth-child(3){ transition-delay:.09s; }
body.home #header .dropdown-menu.show .dropdown-item:nth-child(4){ transition-delay:.12s; }
body.home #header .dropdown-menu.show .dropdown-item:nth-child(5){ transition-delay:.15s; }
body.home #header .dropdown-menu.show .dropdown-item:nth-child(n+6){ transition-delay:.18s; }

/* ---- the gold rule that tracks the menu ------------------------------------
   One element that slides between items rather than nine that fade
   independently: the eye follows a single object moving, which is what makes a
   menu feel built rather than assembled. Positioned by journey.js. */
body.home #header .navbar .navbar-nav{ position:relative; }
.nav-ink{
	position:absolute; left:0; bottom:-2px; height:1px; width:1px; z-index:1;
	background:linear-gradient(90deg, transparent, var(--gold-l,#F0D98A) 22%, var(--gold-l,#F0D98A) 78%, transparent);
	transform:translateX(var(--ink-x,0)) scaleX(var(--ink-w,0));
	transform-origin:left center; opacity:0;
	transition:transform .42s var(--drawer,cubic-bezier(.32,.72,0,1)), opacity .25s ease;
	pointer-events:none;
}
.nav-ink.on{ opacity:1; }
@media (prefers-reduced-motion:reduce){
	.nav-ink{ transition:opacity .2s ease; }
	body.home #header .dropdown-menu{ transition:opacity .15s ease, visibility 0s linear .15s; transform:none; }
	body.home #header .dropdown-menu.show{ transform:none; }
	body.home #header .dropdown-menu .dropdown-item{ transform:none; transition:opacity .15s ease; }
}

/* ---- the masthead settles once you start reading ---------------------------
   Full ceremony at the top of the page; a working rail once the visitor is
   travelling. One state change on a scroll threshold, not a per-frame tie.
   The crest and wordmark ride on transforms, so the only layout property in
   play is the rail's own min-height — and that changes once per threshold
   crossing, with hysteresis, on a fixed subtree of a dozen nodes. Scaling the
   crest via width/height instead would put two more layout properties on the
   same 500ms. */
body.home #header .navbar > .container{
	transition:min-height .5s var(--drawer,cubic-bezier(.32,.72,0,1));
}
body.home #header .navbar > .container::before{
	transform-origin:left center;
	transform:translateY(-50%) scale(var(--crest-s,1));
	transition:transform .5s var(--drawer,cubic-bezier(.32,.72,0,1)), box-shadow .4s ease;
}
body.home #header .navbar > .container::after{
	transform:translateY(-50%) translateX(var(--name-x,0));
	transition:transform .5s var(--drawer,cubic-bezier(.32,.72,0,1)), opacity .3s ease;
}
body.home.mast-min #header .navbar > .container{ min-height:88px; --crest-s:.6; --name-x:-49px; }
@media (min-width:1700px){
	body.home.mast-min #header .navbar > .container{ min-height:94px; --crest-s:.6; --name-x:-53px; }
}
@media (min-width:1200px) and (max-width:1399.98px){
	body.home.mast-min #header .navbar > .container{ min-height:86px; --crest-s:.6; --name-x:0; }
}
@media (min-width:992px) and (max-width:1199.98px){
	body.home.mast-min #header .navbar > .container{ min-height:84px; --crest-s:.6; }
}
@media (max-width:991.98px){
	body.home.mast-min #header .navbar > .container{ min-height:78px; --crest-s:.62; }
}
@media (prefers-reduced-motion:reduce){
	body.home #header .navbar > .container,
	body.home #header .navbar > .container::before,
	body.home #header .navbar > .container::after{ transition:none; }
}

/* ================================================================
   THE INDEX — navigation as a printed page, not a link row
   A block-mark in the rail opens the whole site as an Ajrak-grounded
   index: every destination set large, each with what it actually holds,
   arriving in a staggered mask reveal behind a curtain that wipes down
   from the masthead.
   ================================================================ */
.idx__open{
	position:relative; display:inline-flex; align-items:center; gap:.7rem;
	margin-left:1.1rem; padding:.55rem .95rem .55rem .6rem; background:none; cursor:pointer;
	border:1px solid rgba(201,162,39,.42); border-radius:2px; color:#F0D98A;
	font-family:var(--sans,'Archivo',sans-serif); font-size:.68rem; font-weight:600;
	letter-spacing:.22em; text-transform:uppercase; white-space:nowrap;
	transition:border-color .35s var(--out), background .35s var(--out), color .35s var(--out), transform .16s var(--out);
}
@media (hover:hover) and (pointer:fine){
	.idx__open:hover{ border-color:var(--gold-l,#F0D98A); background:rgba(201,162,39,.12); }
}
.idx__open:active{ transform:scale(.97); }
/* three printed bars that fold into a cross — the block lifting off the cloth */
.idx__mark{ position:relative; display:block; width:20px; height:14px; flex:0 0 auto; }
.idx__mark i{
	position:absolute; left:0; height:1.5px; background:currentColor; border-radius:1px;
	transition:transform .42s var(--drawer), opacity .2s ease;
}
.idx__mark i:nth-child(1){ top:0;    width:20px; }
.idx__mark i:nth-child(2){ top:6.2px; width:13px; }
.idx__mark i:nth-child(3){ top:12.5px; width:20px; }
body.idx-on .idx__mark i:nth-child(1){ transform:translateY(6.2px) rotate(45deg); }
body.idx-on .idx__mark i:nth-child(2){ opacity:0; transform:scaleX(0); }
body.idx-on .idx__mark i:nth-child(3){ transform:translateY(-6.3px) rotate(-45deg); }

.idx{
	position:fixed; inset:0; z-index:200; display:grid; align-items:center;
	visibility:hidden; pointer-events:none;
	transition:visibility 0s linear .62s;
}
body.idx-on .idx{ visibility:visible; pointer-events:auto; transition-delay:0s; }
/* the curtain: an Ajrak field that wipes down from under the masthead */
.idx__ground{
	position:absolute; inset:0; z-index:0;
	background:
		radial-gradient(80% 60% at 78% 8%, rgba(140,26,20,.42) 0%, transparent 62%),
		radial-gradient(70% 60% at 12% 96%, rgba(6,85,125,.5) 0%, transparent 60%),
		linear-gradient(168deg,#12232E 0%,#0A0F16 52%,#1A0B07 100%);
	clip-path:inset(0 0 100% 0);
	transition:clip-path .62s var(--drawer);
}
body.idx-on .idx__ground{ clip-path:inset(0 0 0 0); }
.idx__ground::after{
	content:""; position:absolute; inset:0; opacity:.055; pointer-events:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23F0D98A' stroke-width='.75' stroke-linejoin='round'%3E%3Crect x='30' y='30' width='60' height='60'/%3E%3Cpath d='M60 17.6 102.4 60 60 102.4 17.6 60Z'/%3E%3Ccircle cx='60' cy='60' r='13'/%3E%3Ccircle cx='60' cy='60' r='4.5'/%3E%3Cpath d='M0 16A16 16 0 0 0 16 0M104 0a16 16 0 0 0 16 16M120 104a16 16 0 0 0-16 16M16 120A16 16 0 0 0 0 104'/%3E%3Cpath d='M60 0v10M120 60h-10M60 120v-10M0 60h10'/%3E%3C/g%3E%3Cg fill='%23F0D98A'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3Ccircle cx='90' cy='30' r='2'/%3E%3Ccircle cx='90' cy='90' r='2'/%3E%3Ccircle cx='30' cy='90' r='2'/%3E%3C/g%3E%3C/svg%3E");
	background-size:96px 96px;
}
.idx__in{
	position:relative; z-index:2; width:min(1240px,100%);
	margin-inline:auto; padding:calc(var(--mast,134px) + clamp(26px,4vh,54px)) clamp(22px,7vw,130px) clamp(40px,6vh,70px);
	max-height:100svh; overflow-y:auto; overscroll-behavior:contain;
}
.idx__list{ list-style:none; margin:0; padding:0;
	display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(30px,5vw,86px); }
@media (max-width:860px){ .idx__list{ grid-template-columns:1fr; } }
.idx__list li{ border-bottom:1px solid rgba(240,217,138,.16); }
.idx__list a{
	display:flex; align-items:baseline; justify-content:space-between; gap:18px;
	padding:clamp(13px,1.7vh,20px) 0; color:inherit; position:relative;
}
/* each row rises out of its own mask */
.idx__m{ display:block; overflow:hidden; }
.idx__m > span{
	display:block; transform:translateY(105%);
	transition:transform .62s var(--drawer);
}
body.idx-on .idx__m > span{ transform:none; }
.idx__en{
	font-family:var(--serif,'CormorantG',serif); font-weight:600;
	font-size:clamp(1.35rem,2.7vw,2.3rem); line-height:1.12; color:#F6EFE2;
	transition:color .3s var(--out);
}
.idx__note{
	font-family:var(--sans,'Archivo',sans-serif); font-size:.66rem; letter-spacing:.16em;
	text-transform:uppercase; color:#9DA9A6; white-space:nowrap; flex:0 0 auto;
	transition:color .3s var(--out);
}
@media (hover:hover) and (pointer:fine){
	.idx__list a:hover .idx__en{ color:var(--gold-l,#F0D98A); }
	.idx__list a:hover .idx__note{ color:#E0C878; }
}
.idx__list a::after{
	content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
	background:var(--gold-l,#F0D98A); transform:scaleX(0); transform-origin:left;
	transition:transform .45s var(--drawer);
}
@media (hover:hover) and (pointer:fine){ .idx__list a:hover::after{ transform:scaleX(1); } }

.idx__foot{
	margin-top:clamp(28px,4.5vh,52px); padding-top:20px;
	border-top:1px solid rgba(240,217,138,.16);
	display:flex; flex-wrap:wrap; gap:10px clamp(24px,4vw,64px);
	font-family:var(--sans,'Archivo',sans-serif); font-size:.74rem; color:#C6CFD2;
	opacity:0; transform:translateY(10px);
	transition:opacity .5s var(--out) .34s, transform .5s var(--drawer) .34s;
}
body.idx-on .idx__foot{ opacity:1; transform:none; }
.idx__foot a{ color:#D9C899; }
.idx__foot a:hover{ color:var(--gold-l,#F0D98A); }

/* the page behind does not scroll while the index is open */
body.idx-on{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
	.idx__ground{ clip-path:none; opacity:0; transition:opacity .2s ease; }
	body.idx-on .idx__ground{ opacity:1; }
	.idx__m > span{ transform:none; transition:none; }
	.idx__mark i{ transition:opacity .2s ease; }
	.idx__foot{ transform:none; }
}


.jr{
	/* jewel-toned, metallic — built for gravitas */
	--obsidian:#0A0A0D;
	--terra:#A8451F;  --terra-d:#4E1E0D;  --terra-l:#E9B489;
	--lapis:#16307A;  --lapis-d:#08122E;  --lapis-l:#A9BCEF;
	--oxide:#8C1A14;  --oxide-l:#D2673C;
	--teal:#06557d;   --teal-d:#02283C;   --teal-l:#7FC4DE;
	--ivory:#F4EEE2;  --ivory-d:#D8CDB8;
	--gold:#C9A227;   --gold-l:#F0D98A;   --gold-d:#7A6110;
	--ink:#14120F;

	--mono-serif:'Cinzel','Nanum Myeongjo',Georgia,serif;   /* the dates */
	--serif:'CormorantG','Nanum Myeongjo',Georgia,serif;    /* headlines */
	--sans:'Archivo','Lato',system-ui,sans-serif;
	--sd:'Gulzar','Nanum Myeongjo',serif;
	--ez:cubic-bezier(.16,1,.3,1);
	--out:cubic-bezier(.22,1,.36,1);        /* exponential ease-out */
	--drawer:cubic-bezier(.32,.72,0,1);     /* iOS sheet curve */

	position:relative; background:var(--obsidian); color:var(--ivory); overflow-x:clip;
}
.jr *{ box-sizing:border-box; }
.jr img{ display:block; max-width:100%; }
.jr a{ color:inherit; text-decoration:none; }

/* ================================================================
   BROWSER SURFACES
   The parts nobody draws still carry the design. Selection, the caret,
   the scrollbar, the focus ring and the numerals in the counts all ship
   with defaults that belong to no design system — themed here from the
   institute's own palette.
   ================================================================ */
body.home ::selection{ background:rgba(201,162,39,.34); color:#FFF8E4; text-shadow:none; }
body.home ::-moz-selection{ background:rgba(201,162,39,.34); color:#FFF8E4; }
.ch--vault ::selection, .hold ::selection{ background:rgba(6,85,125,.24); color:#02283C; }
body.home{ caret-color:#C9A227; accent-color:#C9A227; }
/* Archivo carries the whole page now, header and footer included, so the
   Google-hosted Lato request is dropped from the homepage entirely. */
body.home, body.home #header, body.home #footer{ font-family:'Archivo',system-ui,sans-serif; }

/* a rail cut from the page's own ground rather than the OS grey */
body.home{ scrollbar-color:#4A3A14 #0A0A0D; scrollbar-width:thin; }
body.home::-webkit-scrollbar{ width:11px; height:11px; }
body.home::-webkit-scrollbar-track{ background:#0A0A0D; }
body.home::-webkit-scrollbar-thumb{
	background:linear-gradient(180deg,#6A5518,#3B2E0C); border-radius:99px;
	border:3px solid #0A0A0D;
}
body.home::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#8A6B14,#4E3D0F); }

/* one focus ring for the whole page, gold, and only for keyboard users */
body.home :focus-visible{
	outline:2px solid #F0D98A; outline-offset:3px; border-radius:2px;
}
body.home :focus:not(:focus-visible){ outline:none; }

/* links carry the underline low enough to clear the descenders */
.jr a:not(.jbtn):not(.hold):not(.holds__i){
	text-underline-offset:.22em; text-decoration-thickness:1px;
}
/* the counts are figures to be compared, so they line up in columns */
.holds__i b, .yr, .rupture__yr, .strata__i b{ font-variant-numeric:tabular-nums; }

/* Anchor jumps are eased by the browser itself, on the compositor. */
html:has(.jr){ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html:has(.jr){ scroll-behavior:auto; } }

/* Each chapter paints inside its own box, so work in one chapter can never
   force the browser to re-examine the rest of a 6,600px page while scrolling.
   (`paint` only — `layout`/`strict` would make these containing blocks for
   the fixed spine and grain layer.) */
.ch, .rupture, .finale{ contain:paint; }
/* --mast is measured from the real masthead by journey.js, so jumped-to
   sections clear it whatever height the rail ends up being */
.jr section[id]{ scroll-margin-top:calc(var(--mast,88px) + 10px); }

/* film grain over the whole journey — kills banding, adds tooth */
.jr::after{
	content:""; position:fixed; inset:0; z-index:70; pointer-events:none; opacity:.04;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	/* no mix-blend-mode: a fixed full-viewport blended layer re-composites the
	   whole screen every frame. Plain low-opacity grain costs nothing. */
}

/* Gold reads as gold at full strength; a gradient inside letterforms is
   decoration, and it costs legibility at every size below the headline. */
.gild{ color:#E3C169; }

/* =========================================================
   THE INSTITUTE — the first screen.
   The page must say what this place is before it says anything
   about history. Institute colours (teal + gold), the Institute's
   own crest, and the Institute's own holdings, counted.
   ========================================================= */
.iis{
	position:relative; isolation:isolate; overflow:hidden;
	min-height:100svh; display:flex; align-items:center;
	padding:calc(var(--mast,64px) + clamp(26px,5vh,60px)) clamp(22px,7vw,130px) clamp(34px,5vh,64px);
	/* the Indus ground, lit from behind the crest instead of the upper left */
	background:
		radial-gradient(86% 66% at 76% 16%, #7A3316 0%, transparent 62%),
		radial-gradient(58% 54% at 6% 94%, rgba(201,162,39,.18) 0%, transparent 60%),
		linear-gradient(158deg,#5A2410 0%,#4E1E0D 44%,#2B1108 100%);
	color:#F0D3BB;
	contain:paint;
}
/* The seam between the Institute and its founding. Both grounds are teal, so
   without this they read as one continuous field. A hairline that fades out
   into both margins rather than a border that stops dead at the edges —
   printed rule, not box model. */
.iis::after{
	content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:6;
	pointer-events:none;
	/* the saturated gold, not the pale one: at a single pixel a light tint
	   loses its hue and just reads as a white line */
	background:linear-gradient(90deg,
		transparent 0%,
		rgba(201,162,39,.16) 10%,
		var(--gold) 34%,
		var(--gold-l) 50%,
		var(--gold) 66%,
		rgba(201,162,39,.16) 90%,
		transparent 100%);
}

.iis__in{ width:min(1240px,100%); margin-inline:auto; position:relative; z-index:2; }
/* the photograph is a ground layer now, not a column, so the copy simply
   occupies the left of the field */
.iis__split{ display:block; }
.iis__say{ max-width:min(54%,620px); }
@media (max-width:940px){ .iis__say{ max-width:none; } }

/* ---- the building, printed into the ground ---------------------------------
   `screen` over the dark terracotta turns the greyscaled photograph into warm
   highlights rising out of the ground — the building appears to be printed on
   the same cloth as the Ajrak rather than pasted over it. The radial mask
   dissolves it toward the copy so nothing sits behind the text at full
   strength. The box takes the photo's own 1222:556 ratio, so there is no crop
   and no upscale past the original.
   No parallax on this: it is a large blended layer, and moving it would make
   the compositor redo the blend every frame. */
.iis__shot{
	position:absolute; right:0; top:44%; transform:translateY(-50%);
	width:min(78%,1120px); aspect-ratio:1222 / 556;
	margin:0; z-index:0; pointer-events:none;
}
.iis__shot img{
	width:100%; height:100%; object-fit:cover; display:block;
	filter:grayscale(1) contrast(1.12) brightness(.96);
	mix-blend-mode:screen; opacity:.44;
	-webkit-mask-image:radial-gradient(104% 118% at 97% 46%, #000 16%, rgba(0,0,0,.42) 44%, transparent 70%);
	        mask-image:radial-gradient(104% 118% at 97% 46%, #000 16%, rgba(0,0,0,.42) 44%, transparent 70%);
}
/* a hairline under it, fading out — the same rule language as the seam */
.iis__shot::after{
	content:""; position:absolute; left:12%; right:0; bottom:-1px; height:1px;
	background:linear-gradient(90deg, transparent, rgba(201,162,39,.5) 45%, rgba(201,162,39,.16));
}
@media (max-width:940px){
	.iis__shot{ position:relative; top:auto; right:auto; transform:none;
		width:100%; margin:clamp(26px,4vh,44px) 0 0; }
	.iis__shot img{ opacity:.5; -webkit-mask-image:none; mask-image:none; }
	.iis__shot::after{ left:0; }
}

/* ---- the statement ---------------------------------------------------------
   The hero's anchor: set in the display face at reading size, with the claim
   itself carried on weight rather than colour, and the founding date hung
   below on its own rule instead of buried in a second paragraph. */
.iis__since{
	display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
	margin:0 0 1.9em; padding-top:.95em; position:relative;
	font-family:var(--sans); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
	color:#F2D9C2;
}
.iis__since::before{
	content:""; position:absolute; left:0; top:0; width:58px; height:1px;
	background:linear-gradient(90deg, var(--gold), rgba(201,162,39,.15));
}
.iis__since em{ font-style:normal; font-family:var(--sd); font-size:1.02rem;
	letter-spacing:0; color:var(--gold-l); unicode-bidi:isolate; }
.iis__since b{ font-family:var(--mono-serif); font-weight:600; font-size:1.14rem;
	letter-spacing:.05em; color:#FFFFFF; }

.jr .iis__name{
	font-family:var(--serif); font-weight:600; line-height:1.02; letter-spacing:-.012em;
	font-size:clamp(2.5rem,6.2vw,5.1rem); margin:.06em 0 .34em; color:#FFFFFF !important;
}
.jr .iis__name em{ font-style:normal; display:inline-block; color:#EBCB76; }
.iis__lede b{ font-weight:600; color:#FFF3E4; }
.iis__lede{
	font-family:var(--serif); font-size:clamp(1.18rem,1.8vw,1.66rem); line-height:1.46;
	color:#FBE3CB; max-width:32ch; margin:0 0 .5em; font-weight:400;
}
.iis__sub{
	font-family:var(--sans); font-weight:300; font-size:clamp(.93rem,1.03vw,1.02rem); line-height:1.9;
	color:#E2BEA2; max-width:46ch; margin:0 0 1.9em;
}
.iis__cta{ display:flex; flex-wrap:wrap; gap:14px; margin:0; }

/* the crest, presented rather than enlarged: the real seal sits at its own
   size inside a drawn armature, so it can never go soft */
/* the mark sits in its own shallow perspective so the pointer tilt reads as a
   physical object turning, not a flat image being skewed */
.iis__mark{
	position:relative; display:grid; place-items:center; aspect-ratio:1;
	width:min(100%,500px); margin-inline:auto;
	perspective:1200px; transform-style:preserve-3d;
	transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
	will-change:transform;
}
@media (prefers-reduced-motion:reduce){ .iis__mark{ transform:none; } }
.crest{ width:100%; height:100%; color:var(--gold); opacity:.92; }
.crest__turn{ transform-origin:50% 50%; animation:crestturn 64s linear infinite; }
@keyframes crestturn{ to{ transform:rotate(360deg); } }
body.hero-off .crest__turn{ animation-play-state:paused; }
/* The seal on its white disc, at 1.5x the previous size. The disc is drawn
   here (background + radius + padding) rather than baked into the file, so the
   ring of white stays even at every size — the source PNG is cropped tight to
   the mark, with no dead margin of its own. */
.crest__seal{
	position:absolute; width:min(84%,416px); height:auto;
	background:#fff; border-radius:50%; padding:3.4%;
	box-shadow:0 18px 44px -14px rgba(0,0,0,.62), 0 0 0 1px rgba(201,162,39,.45);
}
@media (max-height:800px){
	.iis__mark{ width:min(100%,430px); }
}
@media (max-width:940px){ .iis__mark{ width:min(100%,300px); margin-top:14px; } }
@media (prefers-reduced-motion:reduce){ .crest__turn{ animation:none; } }

/* Laptop screens (1366×768 and similar) were pushing the holdings band below
   the fold — the counts are the Institute's strongest claim and have to be on
   the first screen. Tighten the type and spacing rather than drop anything. */
@media (min-width:941px) and (max-height:960px){
	.iis{ padding-top:calc(var(--mast,64px) + clamp(16px,2.4vh,30px)); padding-bottom:clamp(24px,3.4vh,40px); }
	.jr .iis__name{ font-size:clamp(2.2rem,4.4vw,3.5rem); margin-bottom:.26em; }
	.iis__lede{ font-size:clamp(1rem,1.32vw,1.22rem); line-height:1.46; max-width:38ch; margin-bottom:.7em; }
	.iis__sub{ font-size:.9rem; line-height:1.75; max-width:52ch; margin-bottom:1.35em; }
	/* the mark keeps its own height-based sizing above — capping it here is
	   what made the seal shrink instead of grow */
	.holds{ margin-top:clamp(22px,3vh,34px); padding-top:16px; }
	.holds__i b{ font-size:1.7rem; }
	.holds__i i{ margin-top:7px; }
	.holds__i em{ margin-bottom:5px; }
}

/* what the Institute holds — counted from the archive, never asserted */
.holds{
	display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.6vw,26px);
	margin-top:clamp(34px,5.5vh,64px); padding-top:20px;
	border-top:1px solid rgba(233,180,137,.26);
}
.holds__i{ position:relative; display:block; padding:4px 8px 4px 0; color:inherit; }
.holds__i em{ display:block; font-style:normal; font-family:var(--sd); font-size:.92rem;
	color:var(--gold); opacity:.85; line-height:1; margin-bottom:7px; unicode-bidi:isolate; }
.holds__i b{ display:block; font-family:var(--mono-serif); font-weight:600; font-size:clamp(1.5rem,2.5vw,2.15rem);
	color:#FFFFFF; line-height:1; transition:color .45s var(--ez); }
.holds__i i{ display:block; font-style:normal; font-family:var(--sans); font-size:.66rem;
	letter-spacing:.13em; text-transform:uppercase; color:#DDB79A; margin-top:9px; line-height:1.5; }
.holds__i::after{
	content:""; position:absolute; left:0; top:-21px; width:100%; height:2px;
	background:var(--gold); transform:scaleX(0); transform-origin:left;
	transition:transform .55s var(--ez);
}
@media (hover:hover) and (pointer:fine){
	.holds__i:hover::after{ transform:scaleX(1); }
	.holds__i:hover b{ color:var(--gold-l); }
}
@media (max-width:900px){ .holds{ grid-template-columns:repeat(2,1fr); row-gap:24px; } }
@media (max-width:430px){ .holds{ grid-template-columns:1fr; } }

/* =========================================================
   THE TURN — from the Institute into the history it keeps
   ========================================================= */
.turn{
	position:relative; overflow:hidden; contain:paint;
	padding:clamp(74px,11vh,140px) clamp(22px,7vw,130px) clamp(60px,9vh,110px);
	background:linear-gradient(180deg,#01161F 0%,#0A0A0D 62%,#1B0C05 100%);
	color:#E6DED0;
}
.turn__in{ width:min(1240px,100%); margin-inline:auto; }
/* statement left, reasoning right — the right half was standing empty */
.turn__head{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,80px); align-items:end; }
@media (max-width:900px){ .turn__head{ grid-template-columns:1fr; align-items:start; } }
.turn__k{ font-family:var(--sans); font-size:.63rem; letter-spacing:.28em; text-transform:uppercase;
	color:var(--gold); opacity:.85; margin:0 0 18px; }
.jr .turn__t{
	font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,3.2vw,2.7rem); line-height:1.22;
	margin:0; color:#F6EFE2 !important; max-width:27ch; letter-spacing:-.005em; text-wrap:balance;
}
.jr .turn__t em{ font-style:italic; color:var(--oxide-l); }
.turn__p{ font-family:var(--sans); font-weight:300; font-size:clamp(.95rem,1.06vw,1.04rem);
	line-height:1.95; color:#B9AE9C; max-width:46ch; margin:0 0 .35em; }

/* ---------------- spine ---------------- */
/* A quiet ruler at the very edge: dots by default, the date on hover —
   so it can never collide with the headline. */
.spine{
	position:fixed; left:0; top:50%; transform:translateY(-50%);
	z-index:60; display:flex; flex-direction:column; padding:10px 12px;
}
.spine__i{
	display:flex; align-items:center; gap:10px; padding:7px 0; background:none; border:0; cursor:pointer;
	font-family:var(--sans); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
	color:rgba(255,255,255,.55); transition:color .4s var(--ez);
}
.spine__i b{ display:block; width:8px; height:8px; border-radius:50%; flex:0 0 auto;
	border:1px solid currentColor; background:transparent; transition:.4s var(--ez); }
/* the label floats out on hover and never reserves layout width,
   so the rail stays ~32px and cannot reach the headline */
.spine__i{ position:relative; }
.spine__i span{
	position:absolute; left:26px; top:50%; margin-top:-.5em;
	opacity:0; transform:translateX(-6px); transition:.4s var(--ez);
	white-space:nowrap; pointer-events:none;
	background:rgba(9,7,6,.82); padding:5px 10px; border-radius:2px;
}
.spine:hover .spine__i span{ opacity:1; transform:none; }
.spine__i.on{ color:#F0D98A; }
.spine__i.on b{ background:#F0D98A; box-shadow:0 0 10px rgba(240,217,138,.8); }
@media (max-width:1200px){ .spine{ display:none; } }

/* ---------------- chapter shell ---------------- */
.ch{ position:relative; padding:clamp(90px,14vh,170px) clamp(22px,7vw,130px); overflow:hidden; isolation:isolate; }
.ch__in{ width:min(1240px,100%); margin-inline:auto; position:relative; z-index:2; }
/* ================================================================
   AJRAK
   The block-print of Sindh: an eight-point star built from two squares,
   a quartered rosette at every corner of the lattice, resist dots on the
   edges. It is the one pattern that says "Sindh" before a word is read,
   and the site had a generic diamond tile in its place.
   One tile, used at three intensities — ground, edge, and the field of
   the index overlay.
   ================================================================ */
.ch__seal{ position:absolute; inset:0; z-index:0; opacity:.05; pointer-events:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='.9' stroke-linejoin='round'%3E%3Crect x='30' y='30' width='60' height='60'/%3E%3Cpath d='M60 17.6 102.4 60 60 102.4 17.6 60Z'/%3E%3Ccircle cx='60' cy='60' r='13'/%3E%3Ccircle cx='60' cy='60' r='4.5'/%3E%3Cpath d='M0 16A16 16 0 0 0 16 0M104 0a16 16 0 0 0 16 16M120 104a16 16 0 0 0-16 16M16 120A16 16 0 0 0 0 104'/%3E%3Cpath d='M60 0v10M120 60h-10M60 120v-10M0 60h10'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3Ccircle cx='90' cy='30' r='2'/%3E%3Ccircle cx='90' cy='90' r='2'/%3E%3Ccircle cx='30' cy='90' r='2'/%3E%3C/g%3E%3C/svg%3E");
	background-size:120px 120px; }
/* the cream chapter takes the same block in ink rather than resist-white */
.ch--vault .ch__seal{ opacity:.05; filter:invert(1); }

.kicker{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.kicker span{ font-family:var(--sans); font-size:.65rem; letter-spacing:.34em; text-transform:uppercase; opacity:.7; }
.kicker em{ font-style:normal; font-family:var(--sd); direction:rtl; font-size:clamp(.95rem,1.4vw,1.3rem); opacity:.85; }
.yr{ font-family:var(--mono-serif); font-weight:600; line-height:.86; letter-spacing:.006em;
	font-size:clamp(3.4rem,10vw,9rem); margin:0 0 .14em; display:block; }
/* the theme's base.css colours h1–h3; inside the journey the chapter decides */
.jr h1,.jr h2,.jr h3,.jr h4{ color:inherit; }
.ch__t{ font-family:var(--serif); font-weight:600; line-height:1.06; letter-spacing:-.012em;
	font-size:clamp(1.8rem,4.1vw,3.6rem); margin:0 0 .5em; max-width:20ch; }
/* explicit, contrast-checked headline colours per ground */
.jr .ch--indus .ch__t{ color:#FBE3CB !important; }   /* 8.4:1 on the terracotta ground   */

.jr .ch--inst  .ch__t{ color:#EDF6FB !important; }   /* 14.1:1 on teal                   */
.ch--indus .ch__p{ color:#F0D3BB; }

.ch--inst  .ch__p{ color:#CFE6F0; }
/* the cream chapter needs dark text — inherited white was invisible here */
.ch--vault .ch__p{ color:#403A32; opacity:1; }
.ch--vault .kicker span{ color:#9C3A24; opacity:1; }
.ch--vault .ch__note{ color:#6B6257; }
/* the catalogue cards are card-stock now, not photographs — they carry
   their own ink colours (see .hold__t) */
.ch__p{ font-family:var(--sans); font-weight:300; line-height:1.95; font-size:clamp(1rem,1.22vw,1.15rem);
	max-width:50ch; margin:0 0 1em; opacity:.86; }
/* the second line of a chapter heading: the thing's own name, set in the
   warm brown the card emblems are drawn in so heading and cards agree */
.jr .ch__t2{ display:block; color:#8C4A22; font-size:.74em; letter-spacing:0; margin-top:.16em; }
.ch__note{ font-family:var(--sans); font-size:.63rem; letter-spacing:.24em; text-transform:uppercase; opacity:.5; margin-top:28px; }

.ch__split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,80px); align-items:center; }
@media (max-width:900px){ .ch__split{ grid-template-columns:1fr; } }

/* ================================================================
   CHAPTER COMPOSITIONS
   Every chapter used the same split — copy one side, object the
   other, centred, six times over. Only the colour changed, and that
   sameness is what made the page read as flat however good each
   screen was on its own. Each era now has its own geometry, and each
   one breaks the container in a different direction.
   All of it collapses to a single column below 900px.
   ================================================================ */
@media (min-width:901px){

	/* --- 2600 BCE: the seal runs off the right edge of the page ---------
	   The find is bigger than the frame that holds it. The date is set to
	   overlap the plate's left edge so the two read as one object. */
	.ch--indus{ overflow:hidden; }
	.ch--indus .ch__split{
		grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
		gap:clamp(20px,2.4vw,44px); align-items:center;
	}
	.ch--indus .ch__split > :last-child{
		margin-right:calc(-1 * clamp(22px,7vw,130px));
		transform:translateX(clamp(10px,3vw,64px));
	}
	.ch--indus .seal3d{ --sz:clamp(280px,32vw,470px); margin-inline:auto 0; }
	.ch--indus .yr{ position:relative; z-index:3; white-space:nowrap; }


	/* --- 1989: the building spans wide, the index sits on top of it -----
	   The wings are inside the building, so the panel overlaps the plate
	   instead of queueing underneath it. */
	.ch--inst .ch__split{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); align-items:start; }
	.ch--inst .ch__split > :last-child{ position:relative; padding-top:clamp(10px,2vh,26px); }
	.ch--inst .plate3{
		max-width:none !important; width:min(100%,620px);
		margin-right:calc(-1 * clamp(10px,3vw,70px));
	}
	.ch--inst .wings{
		position:relative; z-index:4; max-width:none; width:min(100%,470px);
		margin-top:clamp(-46px,-4vh,-26px); margin-left:clamp(-40px,-4vw,-16px);
		padding:clamp(18px,2.4vh,28px) clamp(20px,2.6vw,32px);
		background:rgba(2,22,33,.9);
		box-shadow:0 30px 60px -34px rgba(0,0,0,.9), inset 0 0 0 1px rgba(127,196,222,.14);
	}
	.ch--inst .wings li:last-child{ border-bottom:0; padding-bottom:0; }
	/* the panel overlaps the plate's lower edge, so the plate names itself
	   along the top instead of underneath where it would be buried */
	.ch--inst .plate3__c{
		top:0; bottom:auto; padding:11px 12px 26px;
		background:linear-gradient(180deg, rgba(0,0,0,.86), transparent);
	}

}

/* rotations and negative margins are touch-target hazards on a phone */
@media (max-width:900px){
	.ch--inst .wings{ margin-top:clamp(22px,3vh,32px); margin-left:0; }
}

/* the opening chapter must land inside the first screen */
/* Once the Institute took the first screen this stopped being the opening
   shot, so it no longer forces a full viewport — that only left half the
   section empty. It keeps the large date type; the height follows content. */
.ch--open{ display:flex; align-items:center; }
.ch--open .yr{ font-size:clamp(2.9rem,8.2vw,7.4rem); margin-bottom:.06em; }
.ch--open .ch__t{ font-size:clamp(1.55rem,3.6vw,3.1rem); margin-bottom:.42em; max-width:26ch; text-wrap:balance; }
.ch--open .ch__p{ font-size:clamp(.96rem,1.14vw,1.12rem); line-height:1.85; margin-bottom:.7em; }
.ch--open .seal3d{ --sz:clamp(200px,24vw,352px); }
.ch--open .kicker{ margin-bottom:14px; }

/* The strata — a cut through the ground, read left to right: six layers of
   time, and the table of contents for everything below. It sits in the turn
   section, where the page hands over from the Institute to its history. */
.strata{
	position:relative; z-index:3; margin-top:clamp(38px,6vh,66px);
	display:grid; grid-template-columns:repeat(3,1fr);
	border-top:1px solid rgba(233,180,137,.28); padding-top:14px;
}
.strata__i{
	position:relative; background:none; border:0; padding:16px 6px 0 0; cursor:pointer;
	text-align:left; color:inherit; font-family:var(--sans);
	font-size:.6rem; letter-spacing:.17em; text-transform:uppercase;
	opacity:.5; transition:opacity .45s var(--ez), transform .45s var(--ez);
}
/* each layer is pegged to the rule above it */
.strata__i::before{
	content:""; position:absolute; left:0; top:-1px; width:1px; height:20px;
	background:rgba(233,180,137,.5); transform:scaleY(.55); transform-origin:top;
	transition:transform .45s var(--ez), background .45s var(--ez);
}
.strata__i:first-child{ opacity:.92; }
.strata__i:first-child::before{ transform:scaleY(1); background:var(--gold-l); }
@media (hover:hover) and (pointer:fine){
	.strata__i:hover{ opacity:1; transform:translateY(-3px); }
}
.strata__i:hover::before{ transform:scaleY(1); background:var(--gold-l); }
.strata__i:focus-visible{ outline:1px solid var(--gold-l); outline-offset:4px; opacity:1; }
.strata__i b{ display:block; font-weight:400; font-family:var(--mono-serif); font-size:.86rem; letter-spacing:.04em; }
.strata__i i{ display:block; font-style:normal; opacity:.62; margin-top:4px; }
@media (max-width:900px){
	.strata{ grid-template-columns:repeat(3,1fr); row-gap:20px; }
}
@media (max-width:520px){
	.strata{ grid-template-columns:repeat(3,1fr); }
}

/* chapters bleed into one another instead of butting up in hard bands */
.ch, .rupture, .finale{ position:relative; }
.ch::before, .rupture::before{
	content:""; position:absolute; left:0; right:0; top:-1px; height:clamp(70px,10vh,150px);
	z-index:1; pointer-events:none;
	background:linear-gradient(180deg, rgba(0,0,0,.45), transparent);
}
.ch::after{
	content:""; position:absolute; left:0; right:0; bottom:-1px; height:clamp(70px,10vh,150px);
	z-index:1; pointer-events:none;
	background:linear-gradient(0deg, rgba(0,0,0,.32), transparent);
}
.ch--vault::before{ background:linear-gradient(180deg, rgba(1,22,31,.5), transparent); }
.ch--vault::after{ background:linear-gradient(0deg, rgba(2,40,60,.14), transparent); }

/* ---- chapter grounds ---- */
.ch--indus{ background:radial-gradient(90% 70% at 12% 18%, #7A3316 0%, transparent 60%), linear-gradient(160deg,#4E1E0D,#2B1108); color:var(--terra-l); }
.ch--indus .yr{ color:var(--terra-l); }


.ch--inst{ background:radial-gradient(80% 70% at 20% 20%, #06557d 0%, transparent 62%), linear-gradient(160deg,#02283C,#01161F); color:#CFE6F0; }
.ch--inst .yr{ color:var(--gold-l); }
.ch--vault{ background:var(--ivory); color:var(--ink); }
.ch--vault .ch__seal{ opacity:.014; filter:invert(1); }
.jr .ch--vault .ch__t{ color:#02283C !important; }
.ch--vault .ch__p{ opacity:.75; }

/* ---------------- framed plate: photographs at native size ---------------- */
.plate3{ perspective:1200px; }
.plate3__i{
	position:relative; display:block; transform-style:preserve-3d;
	transition:transform .8s var(--ez), box-shadow .8s var(--ez);
	border:10px solid #fff; background:#fff;
	box-shadow:0 40px 70px -30px rgba(0,0,0,.8), 0 2px 0 rgba(255,255,255,.5) inset;
	max-width:100%;
}
@media (hover:hover) and (pointer:fine){
	.plate3:hover .plate3__i{ transform:rotateY(-7deg) rotateX(3deg) translateZ(18px); box-shadow:0 60px 90px -34px rgba(0,0,0,.9); }
}
.plate3__i img{ width:100%; height:auto; }
.plate3__c{
	position:absolute; left:0; right:0; bottom:0; padding:26px 12px 10px; z-index:2;
	font-family:var(--sans); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; text-align:center;
	background:linear-gradient(0deg, rgba(0,0,0,.88), transparent);
}
/* gold corner rules around a plate */
.plate3::before,.plate3::after{ content:""; position:absolute; width:54px; height:54px; border:1px solid var(--gold); opacity:.75; }
.plate3::before{ top:-14px; left:-14px; border-right:0; border-bottom:0; }
.plate3::after{ bottom:-14px; right:-14px; border-left:0; border-top:0; }

/* ---------------- 3D Indus seal ---------------- */
/* --sz drives both the box and the depth of each face, so the cube stays a
   cube at any size (they used to be hardcoded separately and drifted apart). */
/* A single square of steatite, carved and tilting in a raking light —
   the shape an Indus seal actually is. (A four-face cube, however lit,
   reads as an open box; this reads as an object you could pick up.) */
.seal3d{ --sz:clamp(190px,22vw,300px); width:var(--sz); aspect-ratio:1; perspective:1400px; margin-inline:auto; }
.seal3d__c{
	position:relative; width:100%; height:100%; transform-style:preserve-3d;
	animation:sealtilt 16s ease-in-out infinite;
}
.seal3d__f{
	position:absolute; inset:0; display:grid; place-items:center; border-radius:5px;
	background:
		radial-gradient(130% 110% at 26% 14%, rgba(255,226,190,.26), transparent 56%),
		linear-gradient(152deg,#8A452339 0,transparent 40%),
		linear-gradient(150deg,#7A3A1C 0%,#5C2913 44%,#3C1809 100%);
	box-shadow:
		inset 0 1px 0 rgba(255,222,182,.28),
		inset 0 -2px 0 rgba(0,0,0,.5),
		inset 0 -26px 44px rgba(0,0,0,.42),
		0 26px 40px -14px rgba(0,0,0,.72),
		0 2px 0 rgba(255,214,168,.10);
}
/* the carved rebate around the sign-line */
.seal3d__f::before{
	content:""; position:absolute; inset:9%; border-radius:2px;
	border:1px solid rgba(201,162,39,.30);
	box-shadow:inset 0 1px 0 rgba(0,0,0,.5), 0 1px 0 rgba(255,214,168,.10);
}
/* No drop-shadow filters here: this SVG sits inside an element that is
   3D-transformed continuously, and a filtered layer has to be re-rasterised
   on every frame of that transform. The carving reads from the plate's own
   inset shadows instead. */
.seal3d__glyphs{ position:relative; width:74%; height:74%; stroke:var(--gold-l); fill:none;
	stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
/* raking light travelling across the stone */
.seal3d__gloss{
	position:absolute; inset:0; border-radius:5px; pointer-events:none; overflow:hidden;
}
.seal3d__gloss::before{
	content:""; position:absolute; top:-40%; bottom:-40%; width:36%; left:0;
	background:linear-gradient(100deg, transparent, rgba(255,232,198,.16) 45%, transparent);
	animation:sealsheen 9s ease-in-out infinite;
}
@keyframes sealtilt{
	0%,100%{ transform:rotateX(9deg) rotateY(-15deg); }
	50%    { transform:rotateX(4deg) rotateY(15deg); }
}
/* translate, never `left` — animating `left` runs layout on every frame,
   forever, and that alone is enough to make the whole page scroll badly. */
@keyframes sealsheen{
	0%,62%{ transform:translateX(-125%) rotate(12deg); }
	92%,100%{ transform:translateX(320%) rotate(12deg); }
}
/* nothing animates while it is off screen */
body.hero-off .seal3d__c,
body.hero-off .seal3d__gloss::before{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){
	.seal3d__c{ animation:none; transform:rotateX(6deg) rotateY(-10deg); }
	.seal3d__gloss::before{ animation:none; }
}

/* ================================================================
   1947 — THE PARTITION.  The screen itself is torn in two.
   ================================================================ */
.rupture{
	position:relative; min-height:118svh; color:#E9DBC9;
	background:
		radial-gradient(72% 80% at 82% 10%, rgba(122,51,22,.5) 0%, transparent 62%),
		linear-gradient(160deg,#0B1E28 0%,#0A0A0D 56%,#1B0C05 100%);
	display:grid; place-items:center; overflow:hidden; isolation:isolate;
}
.rupture__half{ position:absolute; inset:0; z-index:1; overflow:hidden; will-change:transform; }
.rupture__half::before{
	content:""; position:absolute; inset:0;
	background:
		radial-gradient(72% 80% at 82% 10%, rgba(122,51,22,.42) 0%, transparent 62%),
		linear-gradient(160deg,#0B1E28 0%,#0A0A0D 56%,#1B0C05 100%);
}
.rupture__half--l{ clip-path:polygon(0 0,50.2% 0,49.4% 22%,50.6% 46%,49.2% 70%,50.4% 100%,0 100%); }
.rupture__half--r{ clip-path:polygon(50.2% 0,100% 0,100% 100%,50.4% 100%,49.2% 70%,50.6% 46%,49.4% 22%); }
/* the seam: a wound of light down the centre */
/* The glow is a gradient on a wide element, not a 70px-blur box-shadow.
   A large blur radius has to be re-rasterised whenever the element changes,
   and this one's opacity is driven by scroll — it was repainting a
   180px-wide, full-height blurred region on every scroll frame. */
.rupture__seam{
	position:absolute; top:0; bottom:0; left:50%; width:190px; margin-left:-95px; z-index:3;
	transform:scaleY(0); transform-origin:top;
	background:
		linear-gradient(90deg, transparent 0%, rgba(122,51,22,.26) 34%, rgba(193,154,69,.30) 47%, rgba(193,154,69,.30) 53%, rgba(122,51,22,.26) 66%, transparent 100%);
}
.rupture__seam::before{
	content:""; position:absolute; top:0; bottom:0; left:50%; width:3px; margin-left:-1.5px;
	background:linear-gradient(180deg, transparent, rgba(193,154,69,.7) 12%, #F0D98A 50%, rgba(193,154,69,.7) 88%, transparent);
}
/* centred by margin now, so the reveal transform is scaleY alone —
   leaving the old translateX(-50%) here would shove the seam off centre */
.rupture.lit .rupture__seam{ transform:scaleY(1); transition:transform 1.7s var(--ez) .15s; }
.rupture__in{ position:relative; z-index:4; text-align:center; padding:0 clamp(20px,6vw,90px); max-width:1100px; }
.rupture__yr{
	font-family:var(--serif); font-weight:600; font-size:clamp(5rem,20vw,17rem); line-height:.78;
	letter-spacing:-.06em; margin:0; color:#F4EADA; position:relative;
	/* no wide text-shadow: this type is huge and used to be scroll-scaled,
	   so a 60px blur had to be re-rasterised on every scroll frame */
}
.rupture__yr em{ font-style:normal; display:block; font-family:var(--sd); direction:rtl;
	font-size:clamp(1.1rem,2.2vw,1.9rem); color:var(--oxide-l); letter-spacing:0; margin-bottom:.25em; opacity:.9; }
.jr .rupture__t{
	font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,3.6vw,3.1rem); line-height:1.18;
	margin:.7em auto .5em; max-width:22ch; color:#F4EADA;
}
.rupture__t i{ font-style:italic; color:#EBCB76; }
.rupture__p{ font-family:var(--sans); font-weight:300; line-height:1.95; max-width:52ch; margin:0 auto; opacity:.72; font-size:clamp(.98rem,1.2vw,1.1rem); }
.rupture__names{
	margin-top:clamp(30px,5vh,54px); display:flex; gap:10px 26px; flex-wrap:wrap; justify-content:center;
	font-family:var(--sans); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(233,219,201,.5);
}
.rupture__names span{ position:relative; }
.rupture__names span+span::before{ content:"·"; position:absolute; left:-15px; opacity:.5; }


/* what stands inside the 1989 building — a ruled index under the plate,
   which also closes the empty ground the short photograph left behind */
.wings{ list-style:none; margin:clamp(30px,4vh,46px) 0 0; padding:0; max-width:520px; }
.wings li{
	position:relative; display:flex; align-items:baseline; justify-content:space-between; gap:18px;
	padding:11px 0 11px 20px; border-bottom:1px solid rgba(127,196,222,.16);
}
.wings li::before{
	content:""; position:absolute; left:0; top:1.16em; width:7px; height:7px;
	border:1px solid rgba(201,162,39,.85); transform:rotate(45deg);
}
.wings b{ font-family:var(--serif); font-weight:600; font-size:1.06rem; color:#EDF6FB; white-space:nowrap; }
.wings span{ font-family:var(--sans); font-size:.72rem; letter-spacing:.02em; color:#9FC2D2; text-align:right; }
.wings--soon b{ color:var(--gold-l); }
.wings--soon::before{ background:rgba(201,162,39,.85); }
@media (max-width:520px){
	.wings li{ flex-direction:column; gap:3px; }
	.wings span{ text-align:left; }
}


/* ---------------- the catalogue ----------------
   Cards of card-stock, ruled like a catalogue drawer: a drawn emblem, the
   real count of records held, the name of the collection. */
.vault__g{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:clamp(30px,4vh,52px); }
/* Card as machined object, not a flat rectangle: an outer tray in the chapter's
   own ground holds an inset card of stock, with concentric radii. This replaces
   the coloured band that used to run along the card's top edge — a stripe down
   one side of a card is the single most recognisable generated-UI tell, and it
   was doing the work this nesting does properly. */
.hold{
	position:relative; padding:7px; border-radius:16px; isolation:isolate;
	background:rgba(2,40,60,.055);
	box-shadow:inset 0 0 0 1px rgba(2,40,60,.09);
	transition:transform .55s var(--ez), background .55s var(--ez), box-shadow .55s var(--ez);
}
.hold__in{
	position:relative; overflow:hidden; min-height:196px; height:100%;
	display:flex; flex-direction:column; justify-content:space-between;
	padding:24px 24px 22px; border-radius:10px;
	color:#25201A; background:#FBF7EE;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.95),
		inset 0 0 0 1px rgba(2,40,60,.08),
		0 10px 24px -20px rgba(20,18,15,.55);
	transition:box-shadow .55s var(--ez);
}
/* faint ruling, like catalogue card stock */
.hold__in::after{
	content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
	background:repeating-linear-gradient(0deg, transparent 0 27px, rgba(2,40,60,.055) 27px 28px);
}
@media (hover:hover) and (pointer:fine){
	.hold:hover{ transform:translateY(-5px); background:rgba(201,162,39,.14);
		box-shadow:inset 0 0 0 1px rgba(201,162,39,.4); }
	.hold:hover .hold__in{ box-shadow:
		inset 0 1px 0 rgba(255,255,255,.95),
		inset 0 0 0 1px rgba(2,40,60,.08),
		0 22px 34px -24px rgba(20,18,15,.6); }
}
.hold:active{ transform:translateY(-2px) scale(.994); }

.hold__em{ width:74px; height:74px; color:#8C4A22; opacity:.92; flex:0 0 auto;
	transition:color .5s var(--ez), transform .6s var(--ez); }
.hold:hover .hold__em{ transform:translateY(-2px); }
.hold:hover .hold__em{ color:var(--gold-d); }


.hold__t{ display:block; margin-top:18px; padding-top:14px; border-top:1px solid rgba(2,40,60,.16); }
.hold__t b{ display:block; font-family:var(--serif); font-size:1.28rem; font-weight:600; color:#02283C; }
.hold__t i{ display:block; font-style:normal; font-family:var(--sans); font-size:.72rem;
	letter-spacing:.02em; text-transform:none; color:#5B554C; margin-top:5px; }

.hold__go{ position:absolute; right:24px; top:26px; font-size:1.1rem; color:var(--gold-d);
	opacity:0; transform:translateX(-7px); transition:.5s var(--ez); }
.hold:hover .hold__go{ opacity:1; transform:none; }

.hold--a{ grid-column:span 7; } .hold--b{ grid-column:span 5; }
.hold--c,.hold--d,.hold--e{ grid-column:span 4; }
@media (max-width:900px){ .hold--a,.hold--b{ grid-column:span 12; } .hold--c,.hold--d,.hold--e{ grid-column:span 6; } }
@media (max-width:560px){ .hold--c,.hold--d,.hold--e{ grid-column:span 12; } }

/* ---------------- finale ---------------- */
.finale{ background:linear-gradient(180deg,#02283C,#01161F); color:#EAF3F8; text-align:center;
	padding:clamp(85px,13vh,160px) clamp(22px,7vw,130px); position:relative; overflow:hidden; }
.finale__sd{ font-family:var(--sd); direction:rtl; font-size:clamp(1.4rem,2.6vw,2.3rem); }
.finale__t{ font-family:var(--serif); font-weight:700; font-size:clamp(2.1rem,5.2vw,4.4rem); line-height:1.07; margin:.35em auto; max-width:17ch; }
/* the vision paragraph is long, so it gets a wider measure than the old
   two-sentence version needed — centred text at 56ch was running to six
   lines with both edges ragged */
.finale__p{ font-family:var(--sans); font-weight:300; max-width:64ch; margin:0 auto 1.4em; line-height:1.9; opacity:.86; }
/* how to give is a practical note, not part of the statement: set a step
   quieter and separated by a short rule so the two are not read as one block */
.finale__give{
	position:relative; font-family:var(--sans); font-weight:300; font-size:.94rem;
	max-width:58ch; margin:0 auto 38px; padding-top:1.7em; line-height:1.85; color:#B7CBD6;
}
.finale__give::before{
	content:""; position:absolute; left:50%; top:0; width:56px; height:1px; margin-left:-28px;
	background:linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---------------- buttons ---------------- */
.jbtn{ display:inline-flex; align-items:center; gap:.85em; font-family:var(--sans); font-weight:600; font-size:.74rem;
	letter-spacing:.2em; text-transform:uppercase; padding:1.15em 1.3em 1.15em 2.2em; border:1px solid currentColor;
	position:relative; overflow:hidden; isolation:isolate; margin:6px;
	transition:color .45s var(--ez), transform .16s var(--out); }
.jbtn::before{ content:""; position:absolute; inset:0; z-index:-1; background:currentColor; transform:translateY(101%); transition:transform .5s var(--drawer); }
@media (hover:hover) and (pointer:fine){
	.jbtn:hover::before{ transform:translateY(0); }
}
/* the press is the one piece of feedback that has to be instant */
.jbtn:active{ transform:scale(.975); }
/* `.jr a{ color:inherit }` scores (0,1,1) and `.jbtn--gold` only (0,1,0), so the
   gold never applied — the primary CTA was rendering the same white as the
   secondary, and the plain button's white label vanished into its own white
   hover fill. Matching on `a.jbtn` scores (0,2,1) and settles it; each ground
   then names its own three colours. */
.jr a.jbtn{ color:var(--jb-fg,#F2ECE0); }
.jr a.jbtn--gold{ color:var(--jb-gold,var(--gold-l)); }
.jr a.jbtn:hover{ color:var(--jb-on,#0A0A0D); }

.iis{ --jb-fg:#F0D3BB; --jb-on:#3A170A; }
.ch--indus{ --jb-fg:#F0D3BB; --jb-on:#2B1108; }

.ch--inst{ --jb-fg:#CFE6F0; --jb-on:#01161F; }
.ch--vault{ --jb-fg:#02283C; --jb-gold:#7A6110; --jb-on:#F4EEE2; }
.finale{ --jb-fg:#EAF3F8; --jb-on:#01161F; }
/* the arrow rides in its own well, flush with the button's inner edge, so the
   glyph never floats loose beside the label */
.jbtn .ar{ width:1.9em; height:1.9em; padding:.42em; flex:0 0 auto; border-radius:50%;
	background:currentColor; color:inherit; box-sizing:content-box;
	transition:transform .45s var(--drawer); }
.jbtn .ar path{ stroke:var(--obsidian); }
.jbtn--gold .ar path{ stroke:#231A05; }
.ch--vault .jbtn .ar path{ stroke:var(--ivory); }
@media (hover:hover) and (pointer:fine){
	.jbtn:hover .ar{ transform:translateX(4px); }
	.jbtn--gold:hover .ar path{ stroke:var(--gold-l); }
}
.jbtn:active .ar{ transform:translateX(1px); }
/* the standalone down-arrow under the opening chapter */
.ch__note .ar{ width:.95em; height:.95em; vertical-align:-.1em; margin-left:.5em; }

/* word-by-word headline reveal.
   base.css colours generic spans teal (#06557d); these wrappers are ours,
   so they must take the heading's colour, not the theme's. */
.wln{ display:inline-block; overflow:hidden; vertical-align:top; color:inherit; }
/* no will-change here either — each headline word rises exactly once, and
   keeping 47 words on their own compositor layers for the whole session
   costs far more than the tween it was meant to smooth. */
.wln__i{ display:inline-block; color:inherit !important; }
.jr .kicker span,
.jr .kicker em,
.jr .ch__note,
.jr .ch__p span,
.jr .rupture__names span,
.jr .plate3__c,
.jr .relic__c{ color:inherit !important; }
.jr .kicker span{ opacity:.85; }

/* gold thread of progress through the whole journey */
.jr-progress{
	position:fixed; top:0; left:0; right:0; height:2px; z-index:90; transform:scaleX(0); transform-origin:left;
	background:linear-gradient(90deg,#7A6110,#C9A227 35%,#F0D98A 60%,#C9A227);
	box-shadow:0 0 12px rgba(201,162,39,.6);
}

/* deeper blending: a soft aura at each chapter seam so hues melt together */
.ch::before, .rupture::before{ height:clamp(90px,13vh,190px); }

.ch--inst::before  { background:linear-gradient(180deg, rgba(8,8,8,.6), transparent); }
.ch--vault::before { background:linear-gradient(180deg, rgba(1,22,31,.4), transparent); }
.rupture::before   { background:linear-gradient(180deg, rgba(9,18,45,.75), transparent); }
.finale::before{
	content:""; position:absolute; left:0; right:0; top:0; height:clamp(90px,13vh,190px); z-index:1; pointer-events:none;
	background:linear-gradient(180deg, rgba(244,238,226,.22), transparent);
}

/* ---------------- motion ---------------- */
@media (prefers-reduced-motion:no-preference){
	.js-jr .fx{ opacity:0; transform:translateY(20px); }
	.js-jr .fx.in{ opacity:1; transform:none; transition:opacity .65s var(--ez), transform .65s var(--ez); }
	.js-jr .fx.f1.in{ transition-delay:.07s; } .js-jr .fx.f2.in{ transition-delay:.14s; }
	.js-jr .fx.f3.in{ transition-delay:.21s; } .js-jr .fx.f4.in{ transition-delay:.28s; }
	.js-jr .yr{ opacity:0; transform:translateY(30px) scale(.95); }
	.js-jr .lit .yr{ opacity:1; transform:none; transition:opacity .85s var(--ez), transform .95s var(--out); }
	.js-jr .rupture__yr{ opacity:0; transform:scale(1.12); letter-spacing:.04em; }
	.js-jr .rupture.lit .rupture__yr{ opacity:1; transform:none; letter-spacing:-.06em;
		transition:opacity 1.1s var(--ez), transform 1.5s var(--ez), letter-spacing 1.5s var(--ez); }
}
@media (prefers-reduced-motion:reduce){
	.jr *{ animation:none !important; transition:none !important; }
	.rupture__seam{ transform:translateX(-50%) scaleY(1); }
}
@media (max-width:900px){
	.ch{ padding-block:clamp(72px,11vh,110px); }
	.yr{ font-size:clamp(3.6rem,18vw,6.5rem); }
	.rupture{ min-height:auto; padding-block:clamp(90px,14vh,130px); }
}

/* compositor hints — keeps scroll on the GPU */
/* will-change promotes an element to its own compositor layer, so it is only
   worth paying for on things that move continuously. Applying it to all 51
   wall tiles and all 47 split words meant 100+ layers to composite on every
   frame — the scroll stutter. Only the scrubbed halves and the turning seal
   keep it now; hover and one-shot transforms do not need it. */
.rupture__half,.seal3d__c{ will-change:transform; }
.jr::after{ will-change:opacity; }

/* ================================================================
   THE FOUR HALLS
   What the Institute holds, promoted out of a caption-sized list
   inside the 1989 chapter into a band of its own. Each hall goes
   somewhere; the mark is drawn, never an icon font.
   ================================================================ */
.halls{
	position:relative; isolation:isolate;
	padding:clamp(58px,9vh,104px) clamp(22px,5vw,64px);
	background:#F5EEDF; color:#2A241C;
}
.halls__field{
	position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.028;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23023c5a' stroke-width='.9' stroke-linejoin='round'%3E%3Crect x='30' y='30' width='60' height='60'/%3E%3Cpath d='M60 17.6 102.4 60 60 102.4 17.6 60Z'/%3E%3Ccircle cx='60' cy='60' r='13'/%3E%3C/g%3E%3C/svg%3E");
	background-size:104px 104px;
}
.halls::after{
	content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:3;
	background:linear-gradient(90deg, transparent, #c19a45 40%, #F0D98A 50%, #c19a45 60%, transparent);
}
.halls__in{ position:relative; z-index:2; width:min(1240px,100%); margin-inline:auto; }
.halls__head{ margin:0 0 clamp(34px,4.6vh,58px); }
.halls__k{
	margin:0 0 .9em; font-family:'Archivo',system-ui,sans-serif; font-size:.62rem; font-weight:600;
	letter-spacing:.3em; text-transform:uppercase; color:#6A6055;
}
.halls__t{
	font-family:'CormorantG',Georgia,serif !important; font-weight:400;
	font-size:clamp(1.7rem,4vw,2.9rem); line-height:1.14; color:#023c5a; margin:0; max-width:20ch;
	text-wrap:balance;
}
.halls__list{
	list-style:none; margin:0; padding:0;
	display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.4vw,34px);
}
@media (max-width:1000px){ .halls__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .halls__list{ grid-template-columns:1fr; } }
.halls__list li::before{ content:none; }
.halls__i a{
	display:flex; flex-direction:column; height:100%; text-decoration:none;
	background:#FBF6EA; padding:clamp(22px,2.4vw,30px);
	border-top:1px solid rgba(201,162,39,.55);
	box-shadow:0 18px 30px -26px rgba(20,18,15,.5);
	transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1), background .4s ease;
}
@media (hover:hover) and (pointer:fine){
	.halls__i a:hover{ transform:translateY(-6px); background:#fff; box-shadow:0 30px 44px -26px rgba(20,18,15,.58); }
	.halls__i a:hover .halls__go .ar{ transform:translateX(4px); }
	.halls__i a:hover .halls__mark{ color:#8E2F19; }
}
.halls__i a:focus-visible{ outline:2px solid #c19a45; outline-offset:3px; }
/* Photographs of the Institute's own rooms and objects, in the same white-
   bordered frame every plate on the site uses. object-fit:cover on a 4:3 box
   keeps the four cards level whatever each original's shape. */
.halls__shot{
	display:block; position:relative; aspect-ratio:4/3; overflow:hidden;
	margin:0 0 1.15rem; border:6px solid #fff; background:#EFE7D6; box-sizing:border-box;
	box-shadow:0 16px 26px -18px rgba(20,18,15,.55);
}
.halls__shot img{
	display:block; width:100%; height:100%; object-fit:cover;
	transition:transform .7s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover) and (pointer:fine){
	.halls__i a:hover .halls__shot img{ transform:scale(1.04); }
}
.halls__n{
	font-family:'CormorantG',Georgia,serif !important; font-weight:600;
	font-size:clamp(1.1rem,1.7vw,1.32rem); line-height:1.24; color:#023c5a; margin:0 0 .55em;
}
.halls__d{
	margin:0 0 1.5em; font-family:'Archivo',system-ui,sans-serif; font-weight:300;
	font-size:.88rem; line-height:1.75; color:#5C554C; flex:1;
}
.halls__go{
	display:inline-flex; align-items:center; gap:.5em; margin-top:auto;
	font-family:'Archivo',system-ui,sans-serif; font-size:.62rem; font-weight:600;
	letter-spacing:.2em; text-transform:uppercase; color:#8E2F19;
}
.halls__go span{ color:inherit; }
.halls__go .ar{ transition:transform .35s cubic-bezier(.22,1,.36,1); }
/* ================================================================
   1947, brought onto the site's own ground
   The chapter was flat #050505 with a fluorescent #FF4A3D seam and
   none of the devices the rest of the site closes a dark band with.
   It now stands on the same terracotta-over-teal as .creed, .gal,
   .nf and .stf__band, carries the Ajrak field at the same low
   opacity, and is closed by the gold hairline. The cut stays — it
   is what the chapter is about — but it is drawn in the Institute's
   ink rather than in a colour that appears nowhere else.
   ================================================================ */
.rupture::after{
	content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.045;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23F0D98A' stroke-width='.8' stroke-linejoin='round'%3E%3Crect x='30' y='30' width='60' height='60'/%3E%3Cpath d='M60 17.6 102.4 60 60 102.4 17.6 60Z'/%3E%3Ccircle cx='60' cy='60' r='13'/%3E%3Ccircle cx='60' cy='60' r='4.5'/%3E%3C/g%3E%3Cg fill='%23F0D98A'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3Ccircle cx='90' cy='90' r='2'/%3E%3C/g%3E%3C/svg%3E");
	background-size:104px 104px;
}
/* the gold hairline that closes every dark band on this site */
.rupture__in::after{
	content:""; position:absolute; left:50%; transform:translateX(-50%);
	bottom:clamp(-72px,-7vh,-46px); width:min(78vw,900px); height:1px;
	background:linear-gradient(90deg, transparent, #c19a45 40%, #F0D98A 50%, #c19a45 60%, transparent);
	opacity:.9;
}
/* the Sindhi numeral above the year, in the gold the site uses on dark */
.rupture__yr em{ color:#EBCB76 !important; }
/* base.css sets a bare `p{color:#fff}`, so this paragraph came out pure white
   where every other dark band on the site sets its prose in cream. */
.jr .rupture__p{ color:#C4B4A2; opacity:1; }