/* ================================================================
Refinement layer — elevates the original I.I.S. identity.
Palette matches base.css: teal #06557d, deep #023c5a, maroon #93303a.
================================================================ */
:root{
--sind-teal:#06557d;
--sind-teal-d:#023c5a;
--sind-blue:#3085a3;
--sind-maroon:#93303a;
--sind-gold:#c19a45;
--sind-cream:#f7f3ea;
--sind-ink:#2a2a2a;
--sind-line:#e6ddcf;
}
/* ================================================================
ONE MASTHEAD, SITE-WIDE
The homepage wore a dark rail with the colour seal and a gold
hairline; every interior page still wore the original teal bar over
a white nav strip. Same site, two headers — and with the new dark
footer underneath, an interior page read as three different sites
stacked. The rail below is the homepage's, unscoped.
Only `position:fixed` and the settle-on-scroll stay homepage-only
(journey.js drives those and does not load elsewhere), so interior
pages get the same rail in normal flow with nothing to overlap.
================================================================ */
#header{ position:relative; z-index:50; }
#header .top-header{ display:none !important; }
#header .container-fluid.position-absolute{
position:static !important; background:var(--sind-ink) !important;
border-bottom:1px solid rgba(201,162,39,.3);
}
#header .navbar{ padding-top:0 !important; padding-bottom:0 !important; }
#header .navbar > .container{
position:relative; min-height:112px;
max-width:none !important; width:100%;
--edge:clamp(22px,3vw,56px); --crest:96px;
padding-left:330px; padding-right:var(--edge);
}
#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('../img/crest-colour-sm.png') center/90% no-repeat;
box-shadow:0 10px 26px rgba(0,0,0,.5);
}
#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;
}
/* the theme's brand column is an empty Bootstrap slot above 992px that was
squeezing the menu toward the right edge */
#header .navbar > .container > .col-lg-2{ display:none !important; }
#header .navbar-collapse{ justify-content:flex-end; }
#header .navbar .navbar-nav{ flex-wrap:nowrap; align-items:center; }
#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;
}
@media (min-width:1200px){ #header .navbar .nav-link{ font-size:.86rem; padding-left:.6rem !important; padding-right:.6rem !important; } }
@media (min-width:1600px){ #header .navbar .nav-link{ font-size:.9rem; padding-left:.7rem !important; padding-right:.7rem !important; } }
#header .navbar .nav-link:hover,
#header .navbar .nav-link.active{ color:var(--sind-gold-l) !important; opacity:1; }
#header .navbar-toggler{ border-color:rgba(240,217,138,.6) !important; }
#header .navbar-toggler-icon{ filter:invert(1) brightness(2); }
#header .dropdown-menu{
background:rgba(2,20,30,.97); border:0; border-top:2px solid var(--sind-gold); border-radius:0;
box-shadow:0 26px 50px -22px rgba(0,0,0,.85);
}
#header .dropdown-item{ color:#E4DCC7; }
#header .dropdown-item:hover{ background:rgba(201,162,39,.16); color:var(--sind-gold-l); }
@media (min-width:1200px) and (max-width:1399.98px){
#header .navbar > .container{ --crest:88px; min-height:104px; padding-left:140px; }
#header .navbar > .container::after{ display:none; }
}
@media (min-width:992px) and (max-width:1199.98px){
#header .navbar > .container{ --crest:84px; min-height:100px; padding-left:134px; }
#header .navbar > .container::after{ display:none; }
}
@media (max-width:991.98px){
#header .navbar > .container{ --crest:74px; min-height:92px; padding-left:118px; }
#header .navbar > .container::after{ display:none; }
#header .navbar .navbar-brand.d-lg-none{ display:none !important; }
}
/* ================================================================
ONE TYPE SYSTEM, SITE-WIDE
The homepage was set in Archivo + Cormorant while every interior
page still ran Lato + Nanum Myeongjo — a Korean serif carrying the
headings of an Indian institute. Two type systems on one site is
the flow break you feel before you can name it. All three faces are
self-hosted here, so the interior pages also stop calling Google.
================================================================ */
@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:'Archivo'; src:url('../fonts/archivo.woff2') format('woff2'); font-weight:300 600; font-display:swap; }
:root{
--sind-gold-l:#F0D98A;
--sind-ink:#0A0806;
--ez:cubic-bezier(.16,1,.3,1);
--out:cubic-bezier(.22,1,.36,1);
--drawer:cubic-bezier(.32,.72,0,1);
}
body,
.page-content p,
.page-content li,
.sind-doc-t{ font-family:'Archivo',system-ui,sans-serif; }
h1,h2,h3,h4,h5,
.page-content h2,.page-content h3,
.sind-people-stage h3{ font-family:'CormorantG',Georgia,serif; }
/* subtle global polish */
html{ scroll-behavior:smooth; }
body{ text-rendering:optimizeLegibility; }
img{ max-width:100%; }
a{ transition:color .25s ease; }
::selection{ background:rgba(201,162,39,.3); color:#1B1305; }
/* a rule under the heading, not a 4px bar down its side: a thick coloured
edge on one side is the single most recognisable generated-UI tell, and the
footer and hero already use the underline form */
.sind-sub{
font-family:'CormorantG',Georgia,serif; color:var(--sind-teal-d);
position:relative; padding-bottom:.42em;
}
.sind-sub::after{
content:""; position:absolute; left:0; bottom:0; width:44px; height:1px;
background:linear-gradient(90deg,var(--sind-gold),rgba(201,162,39,.1));
}
.page-content h2,.page-content h3{ font-family:'CormorantG',Georgia,serif; color:var(--sind-teal-d); margin-top:1.4em; }
.page-content p{ line-height:1.85; }
.page-content ul li{ margin:.4em 0; }
/* a title whose old page no longer exists — kept as a record, not a link */
.unlinked{ color:var(--sind-teal-d); font-weight:600; border-bottom:1px dotted rgba(2,60,90,.3); }
/* ================================================================
THE PAGE PLATE
Replaces the pale grey banner. Same Ajrak block the homepage and
footer are printed on, closed by the gold hairline, with corner
brackets borrowed from the framed plates.
================================================================ */
.plate{
position:relative; isolation:isolate; overflow:hidden;
padding:clamp(58px,9vh,104px) clamp(22px,5vw,64px) clamp(52px,8vh,92px);
background:
radial-gradient(78% 82% at 84% 6%, rgba(122,51,22,.62) 0%, transparent 62%),
radial-gradient(60% 70% at 4% 96%, rgba(6,85,125,.34) 0%, transparent 60%),
linear-gradient(162deg,#0B1E28 0%,#0A0A0D 54%,#1B0C05 100%);
color:#E4D6C6;
}
.plate__field{
position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05;
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%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:104px 104px;
}
/* the hairline that closes the plate, brightest at the centre */
.plate::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:3;
background:linear-gradient(90deg, transparent, rgba(201,162,39,.18) 10%, var(--sind-gold) 36%, var(--sind-gold-l) 50%, var(--sind-gold) 64%, rgba(201,162,39,.18) 90%, transparent);
}
.plate__in{ position:relative; z-index:2; width:min(1300px,100%); margin-inline:auto; }
/* corner brackets, the same device the framed plates carry */
.plate__in::before,.plate__in::after{
content:""; position:absolute; width:44px; height:44px;
border:1px solid rgba(201,162,39,.5); pointer-events:none;
}
.plate__in::before{ top:-16px; left:-6px; border-right:0; border-bottom:0; }
.plate__in::after{ bottom:-16px; right:-6px; border-left:0; border-top:0; }
@media (max-width:900px){ .plate__in::before,.plate__in::after{ display:none; } }
.plate__crumb{
display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; margin-bottom:1.15rem;
font-family:'Archivo',system-ui,sans-serif; font-size:.66rem;
letter-spacing:.24em; text-transform:uppercase; color:#B49B84;
}
#header ~ * .plate__crumb a,
.plate__crumb a{ color:#DDB79A; text-decoration:none; }
.plate__crumb a:hover{ color:var(--sind-gold-l); }
/* an Ajrak lozenge instead of a pair of slashes */
.plate__crumb i{ width:6px; height:6px; border:1px solid rgba(201,162,39,.8); transform:rotate(45deg); flex:0 0 auto; }
.plate__crumb span{ color:#F2E3CD; }
.plate__t{
font-family:'CormorantG',Georgia,serif; font-weight:600;
font-size:clamp(2rem,4.6vw,3.7rem); line-height:1.06; letter-spacing:-.012em;
margin:0; color:#FFFFFF; max-width:22ch; text-wrap:balance;
}
.plate__k{
margin:.9em 0 0; max-width:62ch; color:#C7B49F;
font-family:'Archivo',system-ui,sans-serif; font-weight:300;
font-size:clamp(.95rem,1.08vw,1.06rem); line-height:1.85;
}
/* ================================================================
THE PAPER
Interior bodies sat on flat white. They sit on the same stock the
catalogue cards are cut from, with the block printed faintly under
the text.
================================================================ */
body:not(.home){ background:#FBF7EF; }
body:not(.home) #main,
body:not(.home) main,
body:not(.home) .plate ~ section{ position:relative; }
body:not(.home) .plate ~ section::before{
/* .035 printed as visible boxes rather than texture on this pale stock */
content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.02;
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%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%3C/g%3E%3C/svg%3E");
background-size:104px 104px;
}
body:not(.home) .plate ~ section > .container{ position:relative; z-index:1; }
/* justified setting plus the imported
tags opened rivers and left
orphan lines; ragged-right reads far better at this measure */
.page-content{ max-width:72ch; margin-inline:auto; }
.page-content p,.page-content li{ text-align:left; }
/* Images run wider than the text measure — an editorial move that stops the
column looking marooned in a 1300px container.
`max-width`, never `width`: the trustee portraits are 119px originals, and
setting a width stretched all twenty of them to 660px — a 5.5x upscale that
turned every face to mush. A small image now simply stays small. */
.page-content img{ display:block; max-width:min(100%,860px); height:auto; margin:2.2em auto; }
/* a small original gets a mount so it reads as a plate rather than a stray
thumbnail floating in the measure */
.page-content img[width]:not([width=""]){ background:#fff; }
.page-content p > img,
.page-content img{
border:7px solid #fff;
box-shadow:0 16px 30px -22px rgba(20,18,15,.7);
box-sizing:border-box;
}
.page-content p{ line-height:1.9; color:#3E3A34; }
/* the opening line of a page carries a little more weight */
.page-content > p:first-of-type{ font-size:1.1rem; color:#2C2822; }
/* ================================================================
ABOUT — an editorial page, not a column
The claim opens against the building; the mission gets a dark band
of its own; the founding is dated the way the homepage dates its
chapters; and the ten constitutional objectives are set as a
numbered register rather than run together in a heading.
================================================================ */
.ab{ position:relative; padding:clamp(52px,7vh,88px) clamp(22px,5vw,64px); }
.ab--rest{ padding-top:clamp(46px,6vh,74px); }
.ab__field{
position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.02;
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%3Ccircle cx='60' cy='60' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
background-size:104px 104px;
}
.ab__in{ position:relative; z-index:1; width:min(1180px,100%); margin-inline:auto; }
.ab__in + .ab__in{ margin-top:clamp(52px,7vh,92px); }
/* --- the opening spread --------------------------------------------------- */
.ab__open{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,5vw,76px); align-items:center; }
@media (max-width:900px){ .ab__open{ grid-template-columns:1fr; } }
.ab__lede{
font-family:'CormorantG',Georgia,serif; font-weight:400;
font-size:clamp(1.4rem,2.5vw,2.15rem); line-height:1.34; color:#1E2A30;
margin:0 0 .7em; max-width:24ch; text-wrap:balance;
}
.ab__lede b{ font-weight:600; color:#8E2F19; }
.ab__p{
font-family:'Archivo',system-ui,sans-serif; font-weight:300;
font-size:1rem; line-height:1.92; color:#4A443C; max-width:56ch; margin:0 0 1.1em;
}
/* the plate tips a degree off the grid, as the homepage plates do */
.ab__plate{ margin:0; position:relative; }
.ab__plate img{
display:block; width:100%; height:auto; border:9px solid #fff; background:#fff; box-sizing:border-box;
box-shadow:0 26px 44px -26px rgba(20,18,15,.72);
transform:rotate(-1.3deg); transition:transform .8s var(--out);
}
@media (hover:hover) and (pointer:fine){ .ab__plate:hover img{ transform:rotate(0deg) translateY(-6px); } }
.ab__plate::before,.ab__plate::after{
content:""; position:absolute; width:40px; height:40px; border:1px solid var(--sind-gold); opacity:.8;
}
.ab__plate::before{ top:-14px; left:-14px; border-right:0; border-bottom:0; }
.ab__plate::after{ bottom:12px; right:-14px; border-left:0; border-top:0; }
.ab__plate figcaption{
margin-top:1.1em; font-family:'Archivo',system-ui,sans-serif; font-size:.66rem;
letter-spacing:.2em; text-transform:uppercase; color:#7A7168;
}
@media (max-width:900px){ .ab__plate img{ transform:none; } .ab__plate::before,.ab__plate::after{ display:none; } }
/* --- the mission band ----------------------------------------------------- */
.creed{
position:relative; isolation:isolate; overflow:hidden;
padding:clamp(60px,9vh,110px) clamp(22px,5vw,64px);
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%);
color:#E9DBC9;
}
.creed__field{
position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05;
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;
}
.creed::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:3;
background:linear-gradient(90deg, transparent, var(--sind-gold) 40%, var(--sind-gold-l) 50%, var(--sind-gold) 60%, transparent);
}
.creed__in{ position:relative; z-index:2; width:min(1180px,100%); margin-inline:auto; }
.creed__h{
font-family:'Archivo',system-ui,sans-serif !important; font-size:.66rem; font-weight:600;
letter-spacing:.28em; text-transform:uppercase; color:var(--sind-gold-l);
margin:0 0 1.5rem; padding-bottom:.9rem; position:relative;
}
.creed__h::after{ content:""; position:absolute; left:0; bottom:0; width:52px; height:1px; background:linear-gradient(90deg,var(--sind-gold),transparent); }
.creed__l{
font-family:'CormorantG',Georgia,serif; font-weight:600;
font-size:clamp(1.9rem,4.6vw,3.5rem); line-height:1.14; color:#FFFFFF;
margin:0; max-width:20ch;
}
.creed__l span{ color:var(--sind-gold-l); }
.creed__l--2{ margin-top:.12em; }
/* --- origin, dated -------------------------------------------------------- */
.ab__origin{ display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,4vw,64px); align-items:start; }
@media (max-width:760px){ .ab__origin{ grid-template-columns:1fr; } }
.ab__yr{ position:relative; padding-right:clamp(20px,3vw,44px); }
.ab__yr::after{ content:""; position:absolute; top:.35em; right:0; bottom:.4em; width:1px; background:linear-gradient(180deg,var(--sind-gold),rgba(193,154,69,.08)); }
@media (max-width:760px){ .ab__yr::after{ display:none; } }
.ab__yr em{ display:block; font-style:normal; font-family:'Gulzar',serif; font-size:1.05rem; color:#8E2F19; line-height:1; margin-bottom:.35em; }
.ab__yr strong{ display:block; font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:clamp(2.6rem,5.4vw,4.2rem); line-height:.92; color:var(--sind-teal-d); letter-spacing:.01em; }
.ab__yr i{ display:block; font-style:normal; margin-top:.7em; font-family:'Archivo',system-ui,sans-serif; font-size:.63rem; letter-spacing:.2em; text-transform:uppercase; color:#7A7168; white-space:nowrap; }
.ab__h{
font-family:'CormorantG',Georgia,serif; font-weight:600;
font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--sind-teal-d);
margin:0 0 .7em; padding-bottom:.42em; position:relative;
}
.ab__h::after{ content:""; position:absolute; left:0; bottom:0; width:44px; height:1px; background:linear-gradient(90deg,var(--sind-gold),rgba(193,154,69,.08)); }
.ab__h--wide{ margin-bottom:1.6em; }
/* --- the ten objectives --------------------------------------------------- */
.aims{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(30px,4.5vw,72px);
}
@media (max-width:860px){ .aims{ grid-template-columns:1fr; } }
.aims__i{
display:grid; grid-template-columns:auto 1fr; gap:clamp(14px,1.6vw,24px);
padding:1.25rem 0; border-bottom:1px solid rgba(2,60,90,.13);
}
.aims__n{ display:block; text-align:right; padding-top:.15em; }
.aims__n em{ display:block; font-style:normal; font-family:'Gulzar',serif; font-size:.85rem; color:#8E2F19; opacity:.85; line-height:1; margin-bottom:.3em; }
.aims__n{ font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:1.05rem; color:var(--sind-gold); letter-spacing:.04em; }
.aims__b{ font-family:'Archivo',system-ui,sans-serif; font-weight:300; font-size:.95rem; line-height:1.8; color:#4A443C; }
.aims__b b{ font-weight:600; color:var(--sind-teal-d); }
/* --- the three notes ------------------------------------------------------ */
.notes{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(26px,3.4vw,54px); }
@media (max-width:860px){ .notes{ grid-template-columns:1fr; } }
.notes__i{ position:relative; padding-top:1.35rem; border-top:1px solid rgba(2,60,90,.18); }
.notes__i::before{ content:""; position:absolute; left:0; top:-4px; width:7px; height:7px; background:var(--sind-gold); transform:rotate(45deg); }
.notes__h{ font-family:'CormorantG',Georgia,serif !important; font-weight:600; font-size:1.24rem; color:var(--sind-teal-d); margin:0 0 .55em; }
.notes__i p{ font-family:'Archivo',system-ui,sans-serif; font-weight:300; font-size:.92rem; line-height:1.85; color:#4A443C; margin:0; }
/* ================================================================
PERSONALITIES
The biography exists only as a scan, so the scan gets the stage
rather than a half-column, and opens full size on click.
================================================================ */
.ab--people{ padding-top:clamp(40px,5.5vh,66px); }
.ppl{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(30px,4vw,64px); align-items:start; }
@media (max-width:900px){ .ppl{ grid-template-columns:1fr; } }
.ppl__count{
display:flex; align-items:baseline; gap:.6rem; margin:0 0 1.1rem; padding-bottom:.9rem;
border-bottom:1px solid rgba(2,60,90,.16);
font-family:'Archivo',system-ui,sans-serif; font-size:.63rem;
letter-spacing:.2em; text-transform:uppercase; color:#7A7168;
}
.ppl__count em{ font-style:normal; font-family:'Gulzar',serif; font-size:.95rem; color:#8E2F19; }
.ppl__count b{ font-family:'Cinzel',Georgia,serif; font-size:1.16rem; color:var(--sind-teal-d); }
.ppl__scroll{ max-height:min(70vh,760px); overflow-y:auto; padding-right:6px; }
.ppl__scroll{ scrollbar-width:thin; scrollbar-color:var(--sind-gold) transparent; }
.ppl__scroll::-webkit-scrollbar{ width:4px; }
.ppl__scroll::-webkit-scrollbar-thumb{ background:var(--sind-gold); border-radius:99px; }
.ppl__index .sind-person-btn{
position:relative; display:block; width:100%; text-align:left; background:none; border:0;
border-bottom:1px solid rgba(2,60,90,.1); padding:.72em 0 .72em 1.3em; cursor:pointer;
font-family:'Archivo',system-ui,sans-serif; font-size:.92rem; color:#4A443C;
transition:color .25s ease, transform .25s var(--out);
}
.ppl__index .sind-person-btn::before{
content:""; position:absolute; left:0; top:1.15em; width:6px; height:6px;
border:1px solid rgba(193,154,69,.7); transform:rotate(45deg);
transition:background .25s ease, border-color .25s ease;
}
.ppl__index .sind-person-btn:hover{ color:var(--sind-teal); transform:translateX(4px); }
.ppl__index .sind-person-btn.active{
color:var(--sind-teal-d); font-weight:600; font-family:'CormorantG',Georgia,serif; font-size:1.14rem;
}
.ppl__index .sind-person-btn.active::before{ background:var(--sind-gold); border-color:var(--sind-gold); }
.ppl__index .sind-person-btn:focus-visible{ outline:2px solid var(--sind-gold); outline-offset:2px; }
.ppl__card{ max-width:none; }
.ppl__n{
font-family:'CormorantG',Georgia,serif !important; font-weight:600;
font-size:clamp(1.6rem,3vw,2.4rem); color:var(--sind-teal-d);
margin:0 0 .8em; padding-bottom:.4em; position:relative;
}
.ppl__n::after{ content:""; position:absolute; left:0; bottom:0; width:46px; height:1px; background:linear-gradient(90deg,var(--sind-gold),rgba(193,154,69,.08)); }
/* the record, mounted and readable */
.ppl__scan{
/* inline-block so the mount shrinks to the scan's own width — these vary,
and stretching a 753px original to fill the stage only softens it */
display:inline-block; max-width:100%; position:relative; border:10px solid #fff; background:#fff;
box-shadow:0 26px 46px -26px rgba(20,18,15,.72);
transition:transform .6s var(--out), box-shadow .6s var(--out);
}
.ppl__scan img{ display:block; width:auto; max-width:100%; height:auto; }
@media (hover:hover) and (pointer:fine){
.ppl__scan:hover{ transform:translateY(-5px); box-shadow:0 38px 56px -28px rgba(20,18,15,.78); }
}
.ppl__scan:focus-visible{ outline:2px solid var(--sind-gold); outline-offset:4px; }
.ppl__hint{
margin:1em 0 0; font-family:'Archivo',system-ui,sans-serif; font-size:.63rem;
letter-spacing:.18em; text-transform:uppercase; color:#8A8177;
}
.ppl__body{ margin-top:1.6em; max-width:68ch; }
.ppl__body p{ font-family:'Archivo',system-ui,sans-serif; font-weight:300; line-height:1.88; color:#4A443C; }
/* ================================================================
THE ROSTER
Twenty people were a fifteen-screen vertical parade. They are a
roll now: portrait at its own size, name, office, and the
biography behind a real disclosure instead of a dead button.
================================================================ */
.ab--roster{ padding-top:clamp(44px,6vh,72px); }
.roster__count{
display:flex; align-items:baseline; gap:.7rem; margin:0 0 clamp(28px,4vh,44px);
padding-bottom:1rem; border-bottom:1px solid rgba(2,60,90,.16);
font-family:'Archivo',system-ui,sans-serif; font-size:.66rem;
letter-spacing:.22em; text-transform:uppercase; color:#7A7168;
}
.roster__count em{ font-style:normal; font-family:'Gulzar',serif; font-size:1rem; color:#8E2F19; }
.roster__count b{ font-family:'Cinzel',Georgia,serif; font-size:1.25rem; color:var(--sind-teal-d); letter-spacing:.03em; }
.roster{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:clamp(26px,3vw,44px);
}
/* Only one trustee carries an office as well as a place ("Director",
"(Adipur)"), so his card ran a line deeper and dropped his Read more below
the rest of the row. The column stretches and the disclosure is pushed to
the bottom, so every card in a row ends on the same line. */
.roster__i{
position:relative; padding-bottom:1.6rem; border-bottom:1px solid rgba(2,60,90,.12);
display:flex; flex-direction:column; align-items:flex-start;
}
.roster__bio{ margin-top:auto; }
/* the portrait keeps its own scale — these originals are ~119px */
.roster__plate{
display:block; width:118px; height:118px; overflow:hidden; margin-bottom:1.05rem;
border:6px solid #fff; background:#fff; box-sizing:content-box;
box-shadow:0 14px 26px -18px rgba(20,18,15,.7);
transition:transform .55s var(--out), box-shadow .55s var(--out);
}
.roster__plate img{ width:100%; height:100%; object-fit:cover; display:block; }
.roster__plate--none{
background:rgba(2,60,90,.05);
box-shadow:inset 0 0 0 1px rgba(2,60,90,.1);
}
@media (hover:hover) and (pointer:fine){
.roster__i:hover .roster__plate{ transform:translateY(-4px); box-shadow:0 24px 34px -20px rgba(20,18,15,.75); }
}
.roster__n{
font-family:'CormorantG',Georgia,serif !important; font-weight:600;
font-size:1.3rem; line-height:1.22; color:var(--sind-teal-d); margin:0 0 .3em;
}
.roster__r{
margin:0 0 .9em; font-family:'Archivo',system-ui,sans-serif; font-size:.66rem;
letter-spacing:.18em; text-transform:uppercase; color:#8E2F19;
}
/* a real disclosure, so the control actually does something */
.roster__bio summary{
display:inline-flex; align-items:center; gap:.55em; cursor:pointer; list-style:none;
font-family:'Archivo',system-ui,sans-serif; font-size:.66rem; font-weight:600;
letter-spacing:.16em; text-transform:uppercase; color:var(--sind-teal);
padding-bottom:2px; border-bottom:1px solid rgba(6,85,125,.3);
transition:color .3s ease, border-color .3s ease;
}
.roster__bio summary::-webkit-details-marker{ display:none; }
.roster__bio summary::before{
content:""; width:6px; height:6px; border:1px solid currentColor; transform:rotate(45deg);
transition:background .3s ease, transform .4s var(--out);
}
.roster__bio[open] summary::before{ background:var(--sind-gold); transform:rotate(135deg); }
.roster__bio summary:hover{ color:var(--sind-teal-d); border-color:var(--sind-teal-d); }
.roster__bio summary:focus-visible{ outline:2px solid var(--sind-gold); outline-offset:3px; }
.roster__bio p{
margin:1em 0 0; font-family:'Archivo',system-ui,sans-serif; font-weight:300;
font-size:.88rem; line-height:1.82; color:#4A443C;
}
/* ================================================================
THE RECORD PLATE
Every archive tile was a rounded rectangle with a soft shadow —
the default card. These are mounted objects: white mount, gold
corner rules, and a caption plate that rises on hover.
================================================================ */
.sind-tile{ display:block; text-decoration:none; color:inherit; }
.sind-tile-frame{
display:block; position:relative; aspect-ratio:1; overflow:hidden;
border:8px solid #fff; background:#fff;
box-shadow:0 18px 34px -22px rgba(20,18,15,.75), 0 1px 0 rgba(255,255,255,.7) inset;
transition:transform .6s var(--out), box-shadow .6s var(--out);
}
.sind-tile-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
/* the gold corner rules sit outside the mount */
.sind-tile{ position:relative; }
.sind-tile::before,.sind-tile::after{
content:""; position:absolute; width:26px; height:26px; z-index:2;
border:1px solid var(--sind-gold); opacity:0;
transition:opacity .5s var(--out), transform .5s var(--out);
}
.sind-tile::before{ top:-7px; left:-7px; border-right:0; border-bottom:0; transform:translate(5px,5px); }
.sind-tile::after{ bottom:26px; right:-7px; border-left:0; border-top:0; transform:translate(-5px,-5px); }
@media (hover:hover) and (pointer:fine){
.sind-tile:hover .sind-tile-frame{ transform:translateY(-6px); box-shadow:0 32px 48px -26px rgba(20,18,15,.8); }
.sind-tile:hover::before,.sind-tile:hover::after{ opacity:1; transform:none; }
}
.sind-tile:active .sind-tile-frame{ transform:translateY(-2px) scale(.99); }
.sind-tile-cap{
display:block; margin-top:12px; padding-top:9px; line-height:1.4;
font-family:'Archivo',system-ui,sans-serif; font-size:.78rem; color:#5B554C;
border-top:1px solid rgba(2,60,90,.14);
}
/* ---------- music: sleeves in a rack ---------- */
.sind-disc{ position:relative; }
.sind-disc-frame{
display:block; overflow:hidden; border:7px solid #fff; background:#fff;
box-shadow:0 18px 32px -22px rgba(20,18,15,.75);
transition:transform .6s var(--out), box-shadow .6s var(--out);
}
.sind-disc-frame img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
@media (hover:hover) and (pointer:fine){
.sind-disc:hover .sind-disc-frame{ transform:translateY(-6px) rotate(-1.2deg); box-shadow:0 32px 46px -24px rgba(20,18,15,.8); }
}
.sind-disc h6{
font-family:'CormorantG',Georgia,serif; color:var(--sind-teal-d);
font-size:1.06rem; font-weight:600; line-height:1.35;
}
/* ---------- publications: a stack you can pull from ---------- */
.sind-pub{ display:block; position:relative; }
.sind-pub-frame{
display:block; overflow:hidden; aspect-ratio:285/420;
border:8px solid #fff; background:#fff;
box-shadow:0 20px 36px -22px rgba(20,18,15,.78);
transition:transform .6s var(--out), box-shadow .6s var(--out);
}
.sind-pub-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (hover:hover) and (pointer:fine){
.sind-pub:hover .sind-pub-frame{ transform:translateY(-7px); box-shadow:0 34px 50px -26px rgba(20,18,15,.82); }
}
.sind-dl{
display:inline-flex; align-items:center; gap:.5em; margin-top:.35em;
font-family:'Archivo',system-ui,sans-serif; font-size:.7rem; font-weight:600;
letter-spacing:.18em; text-transform:uppercase; color:#8E2F19; text-decoration:none;
border-bottom:1px solid rgba(142,47,25,.35); padding-bottom:2px;
transition:color .3s ease, border-color .3s ease;
}
.sind-dl::before{ content:""; width:6px; height:6px; border:1px solid currentColor; transform:rotate(45deg); }
.sind-dl:hover{ color:var(--sind-maroon); border-color:var(--sind-maroon); }
/* ---------- the action button ----------
`.btn-donate` was a rounded teal Bootstrap pill — the one element left on
the interior pages that belonged to no design system. It now speaks the same
language as the buttons on the homepage: a rule, uppercase Archivo, and a
fill that rises from the bottom edge on hover. */
.btn-donate{
position:relative; display:inline-flex; align-items:center; gap:.7em;
padding:.95em 1.7em; overflow:hidden; isolation:isolate; border-radius:0;
border:1px solid var(--sind-teal-d); background:none !important;
color:var(--sind-teal-d) !important; text-decoration:none;
font-family:'Archivo',system-ui,sans-serif; font-weight:600; font-size:.7rem;
letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
transition:color .4s var(--out), transform .16s var(--out);
}
.btn-donate::before{
content:""; position:absolute; inset:0; z-index:-1; background:var(--sind-teal-d);
transform:translateY(101%); transition:transform .45s var(--drawer);
}
@media (hover:hover) and (pointer:fine){
.btn-donate:hover{ color:#FBF7EF !important; }
.btn-donate:hover::before{ transform:translateY(0); }
}
.btn-donate:active{ transform:scale(.975); }
.btn-donate:focus-visible{ outline:2px solid var(--sind-gold); outline-offset:3px; }
.btn-sm-donate{ padding:.72em 1.25em; font-size:.64rem; }
/* ---------- the document row ---------- */
.sind-doc-list{ border-top:1px solid rgba(2,60,90,.16); }
.sind-doc{ border-bottom:1px solid rgba(2,60,90,.12); }
.sind-doc-t{ font-family:'CormorantG',Georgia,serif; font-size:1.14rem; color:var(--sind-teal-d); }
/* ---------- personalities tabs ---------- */
.sind-people-list{ max-height:640px; overflow-y:auto; border-right:1px solid var(--sind-line); padding-right:8px; }
.sind-people-list::-webkit-scrollbar{ width:4px; } .sind-people-list::-webkit-scrollbar-thumb{ background:var(--sind-gold); }
.sind-person-btn{ display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid #eee; padding:12px 10px; color:#555; cursor:pointer; font-size:1rem;
transition:color .25s ease, transform .25s var(--out); }
.sind-person-btn:hover{ color:var(--sind-teal); transform:translateX(6px); }
.sind-person-btn.active{ color:var(--sind-maroon); font-weight:700; font-family:'CormorantG',Georgia,serif; }
.sind-people-stage .person-card{ display:none; }
.sind-people-stage .person-card.show{ display:block; }
.sind-people-stage h3{ font-family:'CormorantG',Georgia,serif; color:var(--sind-teal-d); }
/* ---------- documents (circulars) ---------- */
.sind-doc-list{ border-top:1px solid var(--sind-line); }
/* the row slides on transform; animating padding-left relaid out every row */
.sind-doc{ display:flex; align-items:center; gap:18px; padding:20px 8px; border-bottom:1px solid var(--sind-line);
transition:background .3s ease, transform .3s var(--out); }
.sind-doc:hover{ background:var(--sind-cream); transform:translateX(8px); }
.sind-doc i{ color:var(--sind-maroon); font-size:1.5rem; }
.sind-doc-t{ flex:1; font-family:'CormorantG',Georgia,serif; color:var(--sind-teal-d); font-size:1.05rem; }
/* ---------- teal pill button (downloads etc.) ---------- */
.btn-sm-donate{ padding:.5em 1.1em; font-size:.8rem; }
/* ---------- lightbox ---------- */
#sindLb{ position:fixed; inset:0; z-index:10000; background:rgba(2,32,49,.94); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .35s ease; }
#sindLb.open{ opacity:1; visibility:visible; }
#sindLb img{ max-width:90vw; max-height:88vh; border:5px solid #fff; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); }
#sindLb .sindLb-x{ position:absolute; top:22px; right:30px; color:#fff; font-size:38px; cursor:pointer; line-height:1; }
/* ---------- refined ellipse buttons (elevate original) ---------- */
.ecllipse-2{ transition:transform .3s ease, box-shadow .3s ease !important; }
.ecllipse-2:hover{ transform:translateY(-2px); }
/* ---------- about hover cards smoother ---------- */
.aboutCard img{ transition:transform .8s cubic-bezier(.16,1,.3,1) !important; }
.url-box:hover .aboutCard img{ transform:scale(1.06); }
/* ================================================================
FOOTER
Site-wide, so every page signs off the same way — it used to be
themed only on the homepage, which meant the interior pages ended
on the old bright teal band.
Three tiers: the Institute's own mark, then the links, then the
line of record. The ground is the Ajrak block the pages are
printed on, and the link markers are Ajrak lozenges rather than
borrowed chevrons.
================================================================ */
#footer{
position:relative; isolation:isolate; overflow:hidden;
background:
radial-gradient(90% 70% at 50% 0%, rgba(6,85,125,.30) 0%, transparent 62%),
linear-gradient(180deg,#02222F 0%,#01161F 46%,#0A0A0D 100%);
color:#C3D3DB;
font-family:'Archivo','Lato',system-ui,sans-serif;
border-top:1px solid rgba(201,162,39,.34);
}
/* the gold rule that closes the page, brightest at the centre */
#footer::before{
content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:4;
background:linear-gradient(90deg, transparent, rgba(201,162,39,.2) 12%, #C9A227 38%, #F0D98A 50%, #C9A227 62%, rgba(201,162,39,.2) 88%, transparent);
}
.foot__field{
position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05;
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%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:104px 104px;
}
.foot__in{ position:relative; z-index:2; width:min(1300px,100%); margin-inline:auto; padding-inline:clamp(22px,5vw,64px); }
/* ---- tier one: the mark --------------------------------------------------- */
.foot__crown{ padding:clamp(52px,7vh,86px) 0 clamp(34px,4.5vh,52px); border-bottom:1px solid rgba(201,162,39,.16); }
.foot__crown .foot__in{ display:flex; align-items:center; gap:clamp(28px,4vw,68px); flex-wrap:wrap; }
.foot__brand{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); flex:0 0 auto; }
.foot__seal{
width:clamp(84px,8vw,118px); height:auto; border-radius:50%;
background:#fff; padding:3.2%; box-sizing:border-box;
box-shadow:0 14px 34px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(201,162,39,.4);
}
.foot__wm{ width:clamp(230px,24vw,360px); height:auto; opacity:.96; }
.foot__creed{
flex:1 1 320px; max-width:52ch; margin:0;
font-family:'CormorantG',Georgia,serif; font-size:clamp(1.02rem,1.34vw,1.3rem);
line-height:1.52; color:#E7DFCE;
}
/* ---- tier two: the links -------------------------------------------------- */
.foot__main{ padding:clamp(44px,6vh,72px) 0 clamp(40px,5vh,64px); }
.foot__grid{
display:grid; gap:clamp(26px,3vw,52px);
grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.25fr);
}
@media (max-width:1100px){ .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .foot__grid{ grid-template-columns:1fr; } }
#footer .foot__h{
margin:0 0 1.15em; padding-bottom:.6em; position:relative;
font-family:'CormorantG',Georgia,serif; font-weight:600;
font-size:1.24rem; letter-spacing:.012em; color:#F0D98A; text-transform:none;
}
#footer .foot__h::after{
content:""; position:absolute; left:0; bottom:0; width:34px; height:1px;
background:linear-gradient(90deg,#C9A227,rgba(201,162,39,.1));
}
.foot__col ul{ list-style:none; margin:0; padding:0; }
.foot__col li{ position:relative; padding:.1em 0 .1em 1.35em; }
/* the Ajrak lozenge, drawn, in place of a borrowed chevron */
.foot__col li::before{
content:""; position:absolute; left:0; top:.86em; width:6px; height:6px;
border:1px solid rgba(201,162,39,.75); transform:rotate(45deg);
transition:background .3s ease, border-color .3s ease;
}
/* These are navigation, not prose links, so the hit area has to be reachable
with a thumb: they were 16px tall. Padding the anchor rather than the list
item keeps the Ajrak lozenge aligned where it is. */
#footer .foot__col a{
display:inline-block; min-height:24px; padding-block:4px;
color:#C7D6DE; text-decoration:none; font-size:.95rem; line-height:1.5;
transition:color .3s ease;
}
@media (hover:hover) and (pointer:fine){
#footer .foot__col a:hover{ color:#F0D98A; }
.foot__col li:hover::before{ background:#C9A227; border-color:#F0D98A; }
}
.foot__reach{ font-style:normal; display:grid; gap:1.05em; }
.foot__row{ display:flex; gap:.85em; align-items:flex-start; font-size:.95rem; line-height:1.6; }
/* base.css colours bare with the institute teal (#06557d), which on this
ground is all but invisible — the address has to name its own colour */
#footer .foot__row span,
#footer address span{ color:#C3D3DB; }
#footer .foot__row i{ color:#C9A227; width:1.1em; flex:0 0 auto; margin-top:.18em; font-size:1rem; }
#footer .foot__row a{ color:#D8C79A; text-decoration:none; }
#footer .foot__row a:hover{ color:#F0D98A; text-decoration:underline; text-underline-offset:.22em; }
/* ---- where the Institute is, elsewhere ------------------------------------ */
.foot__social{
list-style:none; display:flex; gap:.6rem; margin:1.5rem 0 0; padding:1.35rem 0 0;
position:relative;
}
.foot__social::before{
content:""; position:absolute; left:0; top:0; width:44px; height:1px;
background:linear-gradient(90deg,#C9A227,rgba(201,162,39,.1));
}
#footer .foot__soc{
display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
color:#E2CE96; text-decoration:none; font-size:1.02rem;
border:1px solid rgba(201,162,39,.42); background:rgba(201,162,39,.05);
transition:color .3s ease, background .3s ease, border-color .3s ease, transform .16s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover) and (pointer:fine){
#footer .foot__soc:hover{ color:#1B1305; background:#E2CE96; border-color:#F0D98A; }
}
#footer .foot__soc:active{ transform:scale(.94); }
#footer .foot__soc:focus-visible{ outline:2px solid #F0D98A; outline-offset:3px; }
#footer .foot__social li::before{ content:none; }
/* ---- tier three: the line of record --------------------------------------- */
.foot__base{ background:rgba(0,0,0,.42); border-top:1px solid rgba(201,162,39,.16); }
.foot__baserow{
display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
padding-block:1.15rem;
}
#footer .foot__baserow p{ margin:0; font-size:.83rem; color:#8FA3AC; }
@media (max-width:640px){
.foot__crown .foot__in{ justify-content:center; text-align:center; }
.foot__brand{ flex-direction:column; }
.foot__baserow{ justify-content:center; text-align:center; }
}
/* ================================================================
NOT FOUND - a call slip returned unfilled
Most arrivals here came from an address printed years ago on the
ASP.NET site. They wanted something specific, so the page shows
the address they asked for, says why it is empty, and hands them
the catalogue and a search box instead of a lone "home" button.
================================================================ */
.nf{
position:relative; isolation:isolate; overflow:hidden;
padding:clamp(56px,9vh,104px) clamp(22px,5vw,64px) clamp(48px,7vh,84px);
background:
radial-gradient(70% 78% at 18% 8%, rgba(122,51,22,.48) 0%, transparent 64%),
linear-gradient(160deg,#0B1E28 0%,#0A0A0D 58%,#1B0C05 100%);
color:#E9DBC9;
}
.nf__field{
position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05;
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;
}
.nf::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:3;
background:linear-gradient(90deg, transparent, var(--sind-gold) 40%, var(--sind-gold-l) 50%, var(--sind-gold) 60%, transparent);
}
.nf__in{
position:relative; z-index:2; width:min(1180px,100%); margin-inline:auto;
display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
gap:clamp(34px,5vw,80px); align-items:center;
}
@media (max-width:880px){ .nf__in{ grid-template-columns:1fr; gap:38px; } }
/* --- the slip itself ------------------------------------------------------ */
.nf__slip{
position:relative; background:#F2EAD9; color:#2A241C;
padding:clamp(24px,3vw,34px) clamp(22px,2.6vw,30px) clamp(30px,3.4vw,40px);
transform:rotate(-1.6deg);
box-shadow:0 30px 50px -28px rgba(0,0,0,.85);
}
.nf__slip::before{
content:""; position:absolute; inset:7px; border:1px solid rgba(42,36,28,.22); pointer-events:none;
}
/* the punch hole of a filing slip */
.nf__slip::after{
content:""; position:absolute; top:15px; right:16px; width:13px; height:13px;
border-radius:50%; background:rgba(11,30,40,.9);
box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.nf__slipk{
margin:0 0 1.5em; font-family:'Archivo',system-ui,sans-serif; font-size:.6rem; font-weight:600;
letter-spacing:.3em; text-transform:uppercase; color:#6F6247;
}
.nf__asked{
margin:0 0 1.4em; font-family:ui-monospace,'Cascadia Mono','SFMono-Regular',Menlo,Consolas,monospace;
font-size:clamp(.85rem,1.5vw,1rem); line-height:1.65; color:#7A2E14;
word-break:break-all; padding-bottom:1.1em;
border-bottom:1px dashed rgba(42,36,28,.3);
}
/* the returned stamp, set at an angle against the slip's own tilt */
.nf__stamp{
display:inline-block; margin:0; transform:rotate(-4deg);
font-family:'Archivo',system-ui,sans-serif; font-size:.66rem; font-weight:600;
letter-spacing:.2em; text-transform:uppercase; color:#8E2F19;
border:2px solid rgba(142,47,25,.55); border-radius:2px;
padding:.5em .85em; opacity:.9;
}
@media (max-width:880px){ .nf__slip{ transform:none; } }
/* --- what it means -------------------------------------------------------- */
.nf__num{ display:flex; align-items:baseline; gap:.7em; margin:0 0 .5em; }
.nf__num-sd{
font-family:'Gulzar',serif; font-size:clamp(1.9rem,4vw,3rem); line-height:1;
color:var(--sind-gold); opacity:.92;
}
.nf__num-en{
font-family:'Cinzel',Georgia,serif; font-weight:600;
font-size:clamp(.72rem,1.1vw,.8rem); letter-spacing:.34em; color:#9DB0B8;
}
.nf__h{
font-family:'CormorantG',Georgia,serif !important; font-weight:400;
font-size:clamp(1.85rem,4.4vw,3.15rem); line-height:1.13; color:#F4EADA;
margin:0 0 .6em; text-wrap:balance;
}
.nf__p{
font-family:'Archivo',system-ui,sans-serif; font-weight:300;
font-size:.97rem; line-height:1.86; color:#C4B4A2; max-width:52ch; margin:0 0 .9em;
}
.nf__p--last{ margin-bottom:1.9em; }
/* --- the search ----------------------------------------------------------- */
.nf__seek{ display:flex; gap:10px; flex-wrap:wrap; max-width:520px; }
.nf__q{
flex:1 1 240px; min-width:0; background:rgba(255,255,255,.05); color:#F4EADA;
border:1px solid rgba(201,162,39,.34); border-radius:0;
padding:.86em 1.05em; font-family:'Archivo',system-ui,sans-serif; font-size:.94rem;
transition:border-color .3s ease, background .3s ease;
}
.nf__q::placeholder{ color:#8B7F70; }
.nf__q:focus{ outline:none; border-color:var(--sind-gold-l); background:rgba(255,255,255,.09); }
.nf__go{
display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
background:transparent; color:var(--sind-gold-l);
border:1px solid rgba(201,162,39,.55); border-radius:0;
padding:.86em 1.5em; font-family:'Archivo',system-ui,sans-serif;
font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
transition:color .3s ease, background .3s ease, border-color .3s ease;
}
@media (hover:hover) and (pointer:fine){
.nf__go:hover{ background:#E2CE96; border-color:#F0D98A; color:#1B1305; }
}
.nf__go:focus-visible{ outline:2px solid #F0D98A; outline-offset:3px; }
.nf__go .ar{ transition:transform .3s var(--out); }
@media (hover:hover) and (pointer:fine){ .nf__go:hover .ar{ transform:translateX(3px); } }
/* --- the catalogue -------------------------------------------------------- */
.nf__in--cat{
display:block; margin-top:clamp(48px,7vh,86px);
padding-top:clamp(30px,4vh,46px); border-top:1px solid rgba(201,162,39,.18);
}
.nf__catk{
margin:0 0 clamp(22px,3vh,34px); font-family:'Archivo',system-ui,sans-serif;
font-size:.62rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
color:var(--sind-gold-l); opacity:.75;
}
.nf__cat{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(22px,3vw,46px); }
@media (max-width:880px){ .nf__cat{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px){ .nf__cat{ grid-template-columns:1fr; } }
.nf__grph{
font-family:'Cinzel',Georgia,serif !important; font-weight:600;
font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
color:#F4EADA; margin:0 0 1.1em; padding-bottom:.7em;
border-bottom:1px solid rgba(201,162,39,.2);
}
.nf__list{ list-style:none; margin:0; padding:0; }
.nf__list li{ margin:0 0 .62em; }
.nf__list a{
font-family:'Archivo',system-ui,sans-serif; font-weight:300; font-size:.9rem;
color:#B7A794; text-decoration:none; position:relative;
padding-bottom:2px; background-image:linear-gradient(var(--sind-gold-l),var(--sind-gold-l));
background-size:0 1px; background-repeat:no-repeat; background-position:0 100%;
transition:color .3s ease, background-size .4s var(--out);
}
@media (hover:hover) and (pointer:fine){
.nf__list a:hover{ color:#F4EADA; background-size:100% 1px; }
}
.nf__list a:focus-visible{ outline:2px solid #F0D98A; outline-offset:3px; }
/* ================================================================
SEARCH RESULTS - grouped by the collection that holds the record
A flat list of titles tells you nothing in an archive of 210
records. Which collection a hit lives in is the useful fact, so
results are bucketed and counted per collection.
================================================================ */
.ab--search{ padding-top:clamp(40px,5.5vh,68px); }
.sr__head{ max-width:62ch; margin:0 0 clamp(38px,5vh,62px); }
.sr__k{
margin:0 0 .7em; font-family:'Archivo',system-ui,sans-serif; font-size:.62rem; font-weight:600;
letter-spacing:.3em; text-transform:uppercase; color:#6A6055;
}
.sr__q{
font-family:'CormorantG',Georgia,serif !important; font-weight:400;
font-size:clamp(1.8rem,4.2vw,2.9rem); line-height:1.16; color:var(--sind-teal-d);
margin:0 0 .5em; word-break:break-word;
}
/* the bilingual count used on the roster and personalities pages */
.sr__count{ display:flex; align-items:baseline; gap:.6em; margin:0 0 1.9em; }
.sr__count em{ font-family:'Gulzar',serif; font-style:normal; font-size:1.5rem; color:var(--sind-gold); line-height:1; }
.sr__count b{ font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:1.02rem; color:var(--sind-teal-d); }
.sr__count i{
font-family:'Archivo',system-ui,sans-serif; font-style:normal; font-size:.64rem; font-weight:600;
letter-spacing:.22em; text-transform:uppercase; color:#6A6055;
}
/* --- refine ---------------------------------------------------------------- */
.sr__seek{ display:flex; gap:10px; flex-wrap:wrap; max-width:540px; }
.sr__input{
flex:1 1 240px; min-width:0; background:#fff; color:#2A241C;
border:1px solid rgba(2,60,90,.24); border-radius:0;
padding:.84em 1.05em; font-family:'Archivo',system-ui,sans-serif; font-size:.94rem;
transition:border-color .3s ease, box-shadow .3s ease;
}
.sr__input::placeholder{ color:#7A7065; }
.sr__input:focus{ outline:none; border-color:var(--sind-gold); box-shadow:0 0 0 3px rgba(201,162,39,.14); }
.sr__go{
display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
background:var(--sind-teal-d); color:#F4EADA; border:1px solid var(--sind-teal-d); border-radius:0;
padding:.84em 1.5em; font-family:'Archivo',system-ui,sans-serif;
font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
transition:background .3s ease, color .3s ease, border-color .3s ease;
}
@media (hover:hover) and (pointer:fine){
.sr__go:hover{ background:#8E2F19; border-color:#8E2F19; color:#fff; }
.sr__go:hover .ar{ transform:translateX(3px); }
}
.sr__go .ar{ transition:transform .3s var(--out); }
.sr__go:focus-visible{ outline:2px solid var(--sind-gold); outline-offset:3px; }
/* --- a collection of hits -------------------------------------------------- */
.sr__grp{ margin:0 0 clamp(34px,4.6vh,58px); }
.sr__grph{
display:flex; align-items:baseline; gap:.8em;
font-family:'Cinzel',Georgia,serif !important; font-weight:600;
font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--sind-teal-d); margin:0 0 1.3em; padding-bottom:.75em;
border-bottom:1px solid rgba(2,60,90,.16);
}
.sr__grph i{
font-family:'Archivo',system-ui,sans-serif; font-style:normal;
font-size:.62rem; font-weight:600; letter-spacing:.1em; color:var(--sind-gold);
border:1px solid rgba(201,162,39,.5); border-radius:999px; padding:.2em .62em;
}
/* Two columns from 1000px. A single column left half a wide screen empty
while the title-only collections (Books, Music) ran forty items deep. */
.sr__list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(16px,2vh,26px) clamp(30px,4vw,64px); }
@media (min-width:1000px){ .sr__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.sr__i{ max-width:64ch; }
.sr__list li::before{ content:none; }
.sr__t{
display:inline-block; font-family:'CormorantG',Georgia,serif; font-weight:600;
font-size:1.22rem; line-height:1.3; color:var(--sind-teal-d); text-decoration:none;
background-image:linear-gradient(var(--sind-gold),var(--sind-gold));
background-size:0 1px; background-repeat:no-repeat; background-position:0 100%;
transition:color .3s ease, background-size .4s var(--out);
}
@media (hover:hover) and (pointer:fine){
.sr__t:hover{ color:#8E2F19; background-size:100% 1px; }
}
.sr__t:focus-visible{ outline:2px solid var(--sind-gold); outline-offset:3px; }
.sr__x{
margin:.4em 0 0; font-family:'Archivo',system-ui,sans-serif; font-weight:300;
font-size:.92rem; line-height:1.78; color:#5C554C;
}
.sr__all{ margin:1.25em 0 0; }
.sr__all a{
display:inline-flex; align-items:center; gap:.5em; text-decoration:none;
font-family:'Archivo',system-ui,sans-serif; font-size:.66rem; font-weight:600;
letter-spacing:.2em; text-transform:uppercase; color:#6A6055;
transition:color .3s ease;
}
.sr__all a .ar{ transition:transform .3s var(--out); }
@media (hover:hover) and (pointer:fine){
.sr__all a:hover{ color:#8E2F19; }
.sr__all a:hover .ar{ transform:translateX(3px); }
}
/* --- pagination ------------------------------------------------------------ */
.sr__pages{
display:flex; flex-wrap:wrap; gap:8px; align-items:center;
padding-top:clamp(22px,3vh,34px); border-top:1px solid rgba(2,60,90,.14);
}
.sr__pages .page-numbers{
display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px;
padding:0 .6em; text-decoration:none; border:1px solid rgba(2,60,90,.2);
font-family:'Archivo',system-ui,sans-serif; font-size:.84rem; color:var(--sind-teal-d);
transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.sr__pages .page-numbers.current{ background:var(--sind-teal-d); color:#F4EADA; border-color:var(--sind-teal-d); }
@media (hover:hover) and (pointer:fine){
.sr__pages a.page-numbers:hover{ background:var(--sind-gold); border-color:var(--sind-gold); color:#1B1305; }
}
/* --- nothing matched ------------------------------------------------------- */
.sr__none{ max-width:62ch; }
.sr__nonep{
font-family:'CormorantG',Georgia,serif; font-size:clamp(1.15rem,2vw,1.42rem);
line-height:1.6; color:#3D3830; margin:0 0 2.2em;
}
.sr__nonek{
margin:0 0 1.1em; font-family:'Archivo',system-ui,sans-serif; font-size:.62rem; font-weight:600;
letter-spacing:.3em; text-transform:uppercase; color:#6A6055;
}
.sr__none-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.sr__none-list li::before{ content:none; }
.sr__none-list a{
display:inline-block; text-decoration:none; padding:.6em 1.05em;
border:1px solid rgba(2,60,90,.22);
font-family:'Archivo',system-ui,sans-serif; font-size:.8rem; color:var(--sind-teal-d);
transition:background .3s ease, color .3s ease, border-color .3s ease;
}
@media (hover:hover) and (pointer:fine){
.sr__none-list a:hover{ background:var(--sind-teal-d); color:#F4EADA; border-color:var(--sind-teal-d); }
}
/* base.css colours every bare teal, which reaches inside these button
labels and prints them dark blue on a dark ground. Same fault that hid the
footer address. The label always takes the button's own colour. */
.nf__go span,
.sr__go span,
.sr__grph span{ color:inherit; }
/* ================================================================
DIRECTOR AND STAFF - the roll of service
Eight people over 8,763px, where the two stock silhouettes
rendered at 513px and the real 170px portraits at 184px: the
placeholders were louder than the staff. Rebuilt as a register -
the Director's office as an opening spread, then each department
as a working unit whose people are entries dated by the year they
joined. Portraits stay at native size; an absent one is recorded
as absent rather than filled with a stock face.
================================================================ */
.stf{ position:relative; padding:clamp(48px,6.5vh,84px) clamp(22px,5vw,64px); }
.stf__in{ position:relative; z-index:1; width:min(1180px,100%); margin-inline:auto; }
.stf--dir{ padding-bottom:clamp(40px,5vh,64px); }
.stf--roll{ padding-top:clamp(44px,6vh,76px); }
/* --- the office of the Director ------------------------------------------- */
.stf__office{
margin:0 0 clamp(24px,3.4vh,40px); font-family:'Archivo',system-ui,sans-serif;
font-size:.62rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
color:#6A6055; padding-bottom:.85em; border-bottom:1px solid rgba(2,60,90,.16);
}
.dir{ display:grid; grid-template-columns:auto 1fr; gap:clamp(26px,4vw,58px); align-items:center; }
@media (max-width:700px){ .dir{ grid-template-columns:1fr; justify-items:start; } }
/* the portrait is 170px and stays 170px: framed as a print, it reads as
deliberate; stretched, it reads as a thumbnail that failed */
.dir__plate{ margin:0; position:relative; flex:none; }
.dir__plate img{
display:block; width:170px; height:auto; border:8px solid #fff; background:#fff;
box-sizing:content-box; box-shadow:0 22px 38px -22px rgba(20,18,15,.6);
transform:rotate(-1.2deg);
}
.dir__plate::before,.dir__plate::after{
content:""; position:absolute; width:34px; height:34px; border:1px solid var(--sind-gold); opacity:.85;
}
.dir__plate::before{ top:-12px; left:-12px; border-right:0; border-bottom:0; }
.dir__plate::after{ bottom:-12px; right:-12px; border-left:0; border-top:0; }
@media (max-width:700px){ .dir__plate img{ transform:none; } }
.dir__since{ display:flex; align-items:baseline; gap:.6em; margin:0 0 .7em; }
.dir__since em{ font-family:'Gulzar',serif; font-style:normal; font-size:1.5rem; color:var(--sind-gold); line-height:1; }
.dir__since i{
font-family:'Archivo',system-ui,sans-serif; font-style:normal; font-size:.64rem; font-weight:600;
letter-spacing:.22em; text-transform:uppercase; color:#6A6055;
}
.dir__n{
font-family:'CormorantG',Georgia,serif !important; font-weight:400;
font-size:clamp(2rem,4.6vw,3.3rem); line-height:1.1; color:var(--sind-teal-d);
margin:0 0 .3em; text-wrap:balance;
}
.dir__r{
margin:0; font-family:'Cinzel',Georgia,serif; font-weight:600;
font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#8E2F19;
}
.dir__mono{
display:grid; place-items:center; width:170px; height:215px; background:#F2EAD9;
border:8px solid #fff; box-shadow:0 22px 38px -22px rgba(20,18,15,.6);
font-family:'Cinzel',Georgia,serif; font-size:3rem; color:var(--sind-gold);
}
/* the biography, set as prose rather than a wall */
.dir__bio{
margin-top:clamp(28px,4vh,48px); padding-top:clamp(22px,3vh,34px);
border-top:1px solid rgba(2,60,90,.14);
columns:2; column-gap:clamp(34px,4.5vw,68px);
}
@media (max-width:820px){ .dir__bio{ columns:1; } }
/* Holding each paragraph whole meant the long first one filled column one on
its own and the short second one left column two half empty. Letting it
split lets the browser balance the two. */
.dir__bio p{
margin:0 0 1.15em; font-family:'Archivo',system-ui,sans-serif; font-weight:300;
font-size:.95rem; line-height:1.92; color:#4A443C;
}
.dir__bio p:last-child{ margin-bottom:0; }
/* --- the service band ------------------------------------------------------ */
.stf__band{
position:relative; isolation:isolate; overflow:hidden;
padding:clamp(34px,5vh,58px) clamp(22px,5vw,64px);
background:
radial-gradient(68% 76% at 20% 8%, rgba(122,51,22,.42) 0%, transparent 64%),
linear-gradient(160deg,#0B1E28 0%,#0A0A0D 58%,#1B0C05 100%);
color:#E9DBC9;
}
.stf__bandfield{
position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05;
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%3C/svg%3E");
background-size:104px 104px;
}
.stf__band::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:3;
background:linear-gradient(90deg, transparent, var(--sind-gold) 40%, var(--sind-gold-l) 50%, var(--sind-gold) 60%, transparent);
}
.stf__bandin{ z-index:2; display:flex; flex-wrap:wrap; gap:clamp(28px,6vw,90px); }
.stf__stat{ display:flex; align-items:baseline; gap:.55em; margin:0; }
.stf__stat em{ font-family:'Gulzar',serif; font-style:normal; font-size:1.85rem; color:var(--sind-gold); line-height:1; }
.stf__stat b{ font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:1.15rem; color:#F4EADA; }
.stf__stat i{
font-family:'Archivo',system-ui,sans-serif; font-style:normal; font-size:.64rem; font-weight:600;
letter-spacing:.22em; text-transform:uppercase; color:#C4B4A2;
}
/* --- a department ---------------------------------------------------------- */
.dept + .dept{ margin-top:clamp(46px,6.5vh,86px); }
.dept__h{ display:flex; align-items:baseline; gap:.9em; padding-bottom:.75em; border-bottom:1px solid rgba(2,60,90,.18); }
.dept__n{
font-family:'Cinzel',Georgia,serif !important; font-weight:600;
font-size:clamp(.86rem,1.5vw,1.02rem); letter-spacing:.15em; text-transform:uppercase;
color:var(--sind-teal-d); margin:0;
}
.dept__c{ display:flex; align-items:baseline; gap:.4em; margin:0; }
.dept__c em{ font-family:'Gulzar',serif; font-style:normal; font-size:1.05rem; color:var(--sind-gold); line-height:1; }
.dept__c b{
font-family:'Archivo',system-ui,sans-serif; font-size:.62rem; font-weight:600; letter-spacing:.1em;
color:var(--sind-gold); border:1px solid rgba(201,162,39,.5); border-radius:999px; padding:.18em .6em;
}
.dept__note{
margin:1.1em 0 0; max-width:62ch;
font-family:'CormorantG',Georgia,serif; font-size:clamp(1.02rem,1.7vw,1.2rem);
line-height:1.6; color:#5C554C;
}
/* --- the register ---------------------------------------------------------- */
.roll{
list-style:none; margin:clamp(26px,3.4vh,40px) 0 0; padding:0;
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,3.6vw,56px);
}
@media (max-width:900px){ .roll{ grid-template-columns:1fr; } }
.roll li::before{ content:none; }
.roll__i{ display:grid; grid-template-columns:140px 1fr; gap:clamp(16px,2vw,26px); align-items:start; }
@media (max-width:460px){ .roll__i{ grid-template-columns:104px 1fr; gap:16px; } }
.roll__plate{ position:relative; }
.roll__frame{
display:block; position:relative; width:100%; aspect-ratio:1; overflow:hidden;
border:6px solid #fff; background:#fff; box-sizing:border-box;
box-shadow:0 16px 26px -18px rgba(20,18,15,.55);
}
.roll__frame img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
/* the corner brackets that mark a framed plate everywhere else on the site */
.roll__plate::before{
content:""; position:absolute; top:-9px; left:-9px; width:24px; height:24px;
border:1px solid var(--sind-gold); border-right:0; border-bottom:0; opacity:.8;
}
/* no photograph exists: a monogram on the Ajrak ground, and the absence
recorded as a fact of the register rather than filled with stock art */
/* No photograph exists and none ever will. Gold on cream read as a plate that
had faded; a dark plate with the Ajrak star struck on it and the initials
inscribed in gold reads as a mark someone made on purpose - and it can never
be mistaken for a portrait. */
.roll__frame--mono{
display:grid; place-items:center; border-color:#fff;
background-color:#023c5a;
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='%23F0D98A' stroke-width='1.4' stroke-linejoin='round' opacity='.3'%3E%3Crect x='26' y='26' width='68' height='68'/%3E%3Cpath d='M60 12 108 60 60 108 12 60Z'/%3E%3Ccircle cx='60' cy='60' r='15'/%3E%3C/g%3E%3C/svg%3E");
background-size:112px 112px; background-position:center; background-repeat:no-repeat;
}
.roll__mono{
font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:2.05rem;
letter-spacing:.06em; color:var(--sind-gold-l);
text-shadow:0 1px 3px rgba(0,0,0,.45);
}
/* the caption sat under a 140px plate at .16em tracking, so it broke to two
ragged lines and spilled past the frame; it is one quiet line now */
.roll__norec{
display:block; margin-top:.6em; font-family:'Archivo',system-ui,sans-serif;
font-size:.5rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
color:#7A7065; text-align:center; line-height:1.4; white-space:nowrap;
}
.roll__yr{ display:flex; align-items:baseline; gap:.45em; margin:0 0 .45em; }
.roll__yr em{ font-family:'Gulzar',serif; font-style:normal; font-size:1.12rem; color:var(--sind-gold); line-height:1; }
.roll__yr b{
font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:.76rem;
letter-spacing:.12em; color:#6A6055;
}
.roll__n{
font-family:'CormorantG',Georgia,serif !important; font-weight:600;
font-size:clamp(1.16rem,2vw,1.42rem); line-height:1.24; color:var(--sind-teal-d); margin:0 0 .22em;
}
.roll__r{
margin:0 0 .95em; font-family:'Archivo',system-ui,sans-serif; font-size:.7rem; font-weight:600;
letter-spacing:.13em; text-transform:uppercase; color:#8E2F19;
}
.roll__f{ margin:0; padding-top:.9em; border-top:1px solid rgba(2,60,90,.13); }
.roll__f dt{
font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:.6rem;
letter-spacing:.16em; text-transform:uppercase; color:var(--sind-gold); margin:0 0 .3em;
}
.roll__f dd{
margin:0 0 .9em; font-family:'Archivo',system-ui,sans-serif; font-weight:300;
font-size:.88rem; line-height:1.78; color:#4A443C;
}
.roll__f dd:last-child{ margin-bottom:0; }
/* ================================================================
A COLLECTION IN PREPARATION
An archive that has opened a collection but not yet catalogued it
should say so, and should ask for the records it is missing -
much of what belongs in these collections is still in family
hands. A blank page reads as neglect; a stated intention with an
invitation reads as work.
================================================================ */
.awa .ab__in{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,74px); align-items:center; }
@media (max-width:860px){ .awa .ab__in{ grid-template-columns:1fr; } }
/* the sheet: a ruled register page with nothing entered on it yet */
.awa__sheet{
position:relative; background:#F6F0E2; color:#2A241C;
padding:clamp(30px,4vw,46px) clamp(26px,3.4vw,40px) clamp(34px,4.4vw,50px);
box-shadow:0 26px 44px -30px rgba(20,18,15,.6);
overflow:hidden;
}
.awa__sheet::before{
content:""; position:absolute; inset:8px; border:1px solid rgba(42,36,28,.2); pointer-events:none;
}
/* the empty ruled lines of a register waiting for entries */
.awa__rule{
position:absolute; left:8px; right:8px; bottom:8px; height:52%;
background-image:repeating-linear-gradient(180deg, transparent 0 27px, rgba(42,36,28,.13) 27px 28px);
pointer-events:none;
}
.awa__k{
position:relative; margin:0 0 1.1em; font-family:'Archivo',system-ui,sans-serif;
font-size:.6rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:#6F6247;
}
.awa__what{
position:relative; margin:0 0 .8em; font-family:'CormorantG',Georgia,serif;
font-size:clamp(1.3rem,2.4vw,1.82rem); line-height:1.34; color:var(--sind-teal-d); max-width:26ch;
}
.awa__note{
position:relative; margin:0 0 1.9em; font-family:'Archivo',system-ui,sans-serif; font-weight:300;
font-size:.92rem; line-height:1.8; color:#5C554C; max-width:44ch;
}
.awa__stamp{
position:relative; display:inline-block; margin:0; transform:rotate(-3deg);
font-family:'Archivo',system-ui,sans-serif; font-size:.64rem; font-weight:600;
letter-spacing:.2em; text-transform:uppercase; color:#8E2F19;
border:2px solid rgba(142,47,25,.5); border-radius:2px; padding:.5em .85em; opacity:.9;
}
.awa__askh{
font-family:'CormorantG',Georgia,serif !important; font-weight:400;
font-size:clamp(1.5rem,3vw,2.15rem); line-height:1.2; color:var(--sind-teal-d); margin:0 0 .5em;
}
.awa__askp{
margin:0 0 1.7em; font-family:'Archivo',system-ui,sans-serif; font-weight:300;
font-size:.97rem; line-height:1.88; color:#4A443C; max-width:50ch;
}
.awa__cta{ margin:0; }
.awa__btn{
display:inline-flex; align-items:center; gap:.6em; text-decoration:none;
background:var(--sind-teal-d); color:#F4EADA; border:1px solid var(--sind-teal-d);
padding:.88em 1.6em; font-family:'Archivo',system-ui,sans-serif;
font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.awa__btn span{ color:inherit; }
.awa__btn .ar{ transition:transform .3s var(--out); }
@media (hover:hover) and (pointer:fine){
.awa__btn:hover{ background:#8E2F19; border-color:#8E2F19; color:#fff; }
.awa__btn:hover .ar{ transform:translateX(3px); }
}
.awa__btn:focus-visible{ outline:2px solid var(--sind-gold); outline-offset:3px; }
/* ================================================================
PERIODICAL - a run of issues, not a gallery
================================================================ */
.ab--per{ padding-top:clamp(40px,5.5vh,68px); }
.per__head{ max-width:62ch; margin:0 0 clamp(32px,4.4vh,54px); }
.per__count{ display:flex; align-items:baseline; gap:.55em; margin:0 0 1em; }
.per__count em{ font-family:'Gulzar',serif; font-style:normal; font-size:1.5rem; color:var(--sind-gold); line-height:1; }
.per__count b{ font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:1rem; color:var(--sind-teal-d); }
.per__count i{
font-family:'Archivo',system-ui,sans-serif; font-style:normal; font-size:.64rem; font-weight:600;
letter-spacing:.22em; text-transform:uppercase; color:#6A6055;
}
.per__lede{
margin:0; font-family:'CormorantG',Georgia,serif; font-size:clamp(1.1rem,1.9vw,1.36rem);
line-height:1.6; color:#4A443C;
}
.per__lede b{ font-weight:600; color:#8E2F19; }
.per{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(22px,3vw,44px); }
@media (max-width:900px){ .per{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px){ .per{ grid-template-columns:1fr; } }
.per li::before{ content:none; }
.per__cover{
display:block; position:relative; aspect-ratio:3/4; overflow:hidden;
border:7px solid #fff; background:#EFE7D6; box-sizing:border-box;
box-shadow:0 18px 30px -20px rgba(20,18,15,.55);
transition:transform .5s var(--out), box-shadow .5s var(--out);
}
.per__cover img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (hover:hover) and (pointer:fine){
a.per__cover:hover{ transform:translateY(-5px); box-shadow:0 26px 40px -20px rgba(20,18,15,.62); }
}
/* the issue that has not come out yet: present, and plainly empty */
.per__cover--next{
display:grid; place-items:center; background:transparent;
border:1px dashed rgba(2,60,90,.3); box-shadow:none;
}
.per__nextmark{ font-family:'Cinzel',Georgia,serif; font-size:2rem; color:rgba(2,60,90,.3); line-height:1; }
.per__meta{ padding-top:.95em; }
.per__t{
font-family:'CormorantG',Georgia,serif !important; font-weight:600; font-size:1.06rem;
line-height:1.3; color:var(--sind-teal-d); margin:0 0 .3em;
}
.per__t--next{ color:#7A7065; }
.per__nexts,.per__read{
margin:0; font-family:'Archivo',system-ui,sans-serif; font-size:.62rem; font-weight:600;
letter-spacing:.16em; text-transform:uppercase; color:#6A6055;
}
.per__read a{ display:inline-flex; align-items:center; gap:.45em; text-decoration:none; color:#8E2F19; }
.per__read a span{ color:inherit; }
.per__read a .ar{ transition:transform .3s var(--out); }
@media (hover:hover) and (pointer:fine){ .per__read a:hover .ar{ transform:translateX(3px); } }
/* ================================================================
TRUSTEES - the roll divides into founders and those serving now
================================================================ */
.tsec + .tsec{ margin-top:clamp(46px,6.5vh,84px); }
.tsec__h{ display:flex; align-items:baseline; gap:.9em; padding-bottom:.75em; border-bottom:1px solid rgba(2,60,90,.18); }
.tsec__n{
font-family:'Cinzel',Georgia,serif !important; font-weight:600;
font-size:clamp(.86rem,1.5vw,1.02rem); letter-spacing:.15em; text-transform:uppercase;
color:var(--sind-teal-d); margin:0;
}
.tsec__c{ display:flex; align-items:baseline; gap:.4em; margin:0; }
.tsec__c em{ font-family:'Gulzar',serif; font-style:normal; font-size:1.05rem; color:var(--sind-gold); line-height:1; }
.tsec__c b{
font-family:'Archivo',system-ui,sans-serif; font-size:.62rem; font-weight:600; letter-spacing:.1em;
color:var(--sind-gold); border:1px solid rgba(201,162,39,.5); border-radius:999px; padding:.18em .6em;
}
.tsec__note{
margin:1em 0 0; font-family:'CormorantG',Georgia,serif; font-size:1.1rem; color:#5C554C;
}
/* an office held, distinct from the place of residence beneath it */
.roster__o{
margin:.1em 0 .2em; font-family:'Cinzel',Georgia,serif; font-weight:600;
font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; color:#8E2F19;
}
/* The pending issue sat alone on a second row with three empty cells beside
it, which read as a layout fault rather than as an expectation. It is a
quiet line at the end of the run instead. */
.per__i--next{ display:none; }
.per__pending{
margin:clamp(24px,3vh,36px) 0 0; padding-top:1.15em;
border-top:1px solid rgba(2,60,90,.16);
display:flex; align-items:baseline; gap:.7em; flex-wrap:wrap;
font-family:'Archivo',system-ui,sans-serif; font-size:.64rem; font-weight:600;
letter-spacing:.2em; text-transform:uppercase; color:#6A6055;
}
.per__pending b{ font-family:'CormorantG',Georgia,serif; font-weight:600; font-size:1.02rem; letter-spacing:0; text-transform:none; color:var(--sind-teal-d); }
/* ================================================================
THE LIBRARY - two holdings, described the same way
================================================================ */
.ab--lib{ padding-top:clamp(40px,5.5vh,68px); }
.lib__intro{ max-width:66ch; margin:0 0 clamp(38px,5vh,64px); }
.ab--lib .hold{
display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
gap:clamp(28px,4.4vw,68px); align-items:center;
}
.ab--lib .hold + .hold{ margin-top:clamp(44px,6vh,84px); padding-top:clamp(40px,5.5vh,72px); border-top:1px solid rgba(2,60,90,.14); }
.ab--lib .hold--flip .ab--lib .hold__plate{ order:2; }
@media (max-width:860px){ .ab--lib .hold{ grid-template-columns:1fr; } .ab--lib .hold--flip .hold__plate{ order:0; } }
.ab--lib .hold__plate{ margin:0; position:relative; }
.ab--lib .hold__plate img{
display:block; width:100%; height:auto; border:9px solid #fff; background:#fff; box-sizing:border-box;
box-shadow:0 26px 42px -26px rgba(20,18,15,.6);
}
.ab--lib .hold__plate::before,.ab--lib .ab--lib .hold__plate::after{
content:""; position:absolute; width:36px; height:36px; border:1px solid var(--sind-gold); opacity:.8;
}
.ab--lib .hold__plate::before{ top:-12px; left:-12px; border-right:0; border-bottom:0; }
.ab--lib .hold__plate::after{ bottom:-12px; right:-12px; border-left:0; border-top:0; }
/* no photograph supplied yet: a marked plate, never a broken frame */
.ab--lib .hold__nophoto{
display:grid; place-items:center; aspect-ratio:4/3; background:#F2EAD9;
border:9px solid #fff; box-sizing:border-box; color:rgba(2,60,90,.3);
box-shadow:0 26px 42px -26px rgba(20,18,15,.5);
}
.ab--lib .hold__n{
font-family:'CormorantG',Georgia,serif !important; font-weight:400;
font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1.16; color:var(--sind-teal-d); margin:0 0 .35em;
}
.ab--lib .hold__lede{
margin:0 0 1.1em; font-family:'Cinzel',Georgia,serif; font-weight:600;
font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:#8E2F19;
}
.ab--lib .hold__text p{
margin:0 0 1.05em; font-family:'Archivo',system-ui,sans-serif; font-weight:300;
font-size:.96rem; line-height:1.9; color:#4A443C; max-width:54ch;
}
.ab--lib .hold__get{ margin:1.6em 0 0; }
.hold__btn{
display:inline-flex; align-items:center; gap:.6em; text-decoration:none;
background:var(--sind-teal-d); color:#F4EADA; border:1px solid var(--sind-teal-d);
padding:.86em 1.5em; font-family:'Archivo',system-ui,sans-serif;
font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.hold__btn span{ color:inherit; }
.hold__btn .ar{ transition:transform .3s var(--out); }
@media (hover:hover) and (pointer:fine){
.hold__btn:hover{ background:#8E2F19; border-color:#8E2F19; color:#fff; }
.hold__btn:hover .ar{ transform:translateX(3px); }
}
.ab--lib .hold__pending{
margin:1.6em 0 0; display:inline-block; font-family:'Archivo',system-ui,sans-serif;
font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#6A6055;
border:1px dashed rgba(2,60,90,.28); padding:.6em 1em;
}
/* ================================================================
CIVILIAN AWARDS - four grades, in precedence
================================================================ */
.ab--civ{ padding-top:clamp(40px,5.5vh,68px); }
.civ__lede{
max-width:60ch; margin:0 0 clamp(34px,4.6vh,56px);
font-family:'CormorantG',Georgia,serif; font-size:clamp(1.1rem,1.9vw,1.34rem);
line-height:1.62; color:#4A443C;
}
.civ__lede a{ color:#8E2F19; text-decoration:none; border-bottom:1px solid rgba(142,47,25,.4); }
.civ{ list-style:none; margin:0; padding:0; }
.civ li::before{ content:none; }
.civ__i{
display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,44px); align-items:start;
padding:clamp(20px,2.6vh,30px) 0; border-top:1px solid rgba(2,60,90,.16);
}
.civ__i:last-child{ border-bottom:1px solid rgba(2,60,90,.16); }
.civ__rank em{
font-family:'Gulzar',serif; font-style:normal; font-size:clamp(1.6rem,3vw,2.2rem);
color:var(--sind-gold); line-height:1;
}
.civ__n{ display:flex; align-items:baseline; gap:.7em; flex-wrap:wrap; margin:0 0 .35em; }
.civ__n span{
font-family:'CormorantG',Georgia,serif; font-weight:600;
font-size:clamp(1.2rem,2.2vw,1.6rem); color:var(--sind-teal-d);
}
.civ__n i{ font-family:'Gulzar',serif; font-style:normal; font-size:1.15rem; color:#6A6055; }
.civ__for{
margin:0 0 .9em; font-family:'Archivo',system-ui,sans-serif; font-weight:300;
font-size:.92rem; line-height:1.8; color:#5C554C; max-width:54ch;
}
.civ__pending{
display:inline-block; margin:0; font-family:'Archivo',system-ui,sans-serif;
font-size:.58rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#7A7065;
border:1px dashed rgba(2,60,90,.26); padding:.45em .85em;
}
/* a form of activity with nothing scanned yet */
.awa__ask--form{ max-width:62ch; }
.awa__ask--form .awa__stamp{ margin-bottom:1.6em; }
.form__count{ display:flex; align-items:baseline; gap:.55em; margin:0 0 clamp(24px,3vh,36px); }
.form__count em{ font-family:'Gulzar',serif; font-style:normal; font-size:1.5rem; color:var(--sind-gold); line-height:1; }
.form__count b{ font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:1rem; color:var(--sind-teal-d); }
.form__count i{
font-family:'Archivo',system-ui,sans-serif; font-style:normal; font-size:.64rem; font-weight:600;
letter-spacing:.22em; text-transform:uppercase; color:#6A6055;
}
/* ================================================================
HEADER SOCIAL MARKS + VISIT COUNT
================================================================ */
.nav-soc{ display:flex; align-items:center; gap:6px; margin-left:.4rem; }
.nav-soc__a{
display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
border:1px solid rgba(201,162,39,.45); border-radius:50%; color:var(--sind-gold-l);
font-size:.78rem; text-decoration:none;
transition:background .3s ease, color .3s ease, border-color .3s ease;
}
@media (hover:hover) and (pointer:fine){
.nav-soc__a:hover{ background:#E2CE96; border-color:#F0D98A; color:#1B1305; }
}
.nav-soc__a:focus-visible{ outline:2px solid #F0D98A; outline-offset:2px; }
@media (max-width:991px){ .nav-soc{ justify-content:center; padding:.8rem 0 .2rem; } }
#footer .foot__count{ display:flex; align-items:baseline; gap:.5em; }
#footer .foot__count i.fa{ color:var(--sind-gold); font-size:.8rem; }
#footer .foot__count em{ font-family:'Gulzar',serif; font-style:normal; font-size:1rem; color:var(--sind-gold); line-height:1; }
#footer .foot__count b{ font-family:'Cinzel',Georgia,serif; font-weight:600; color:#E9DBC9; font-size:.9rem; }
#footer .foot__count span{
font-family:'Archivo',system-ui,sans-serif; font-size:.6rem; font-weight:600;
letter-spacing:.2em; text-transform:uppercase; color:#8FA3AC;
}
/* ================================================================
THE BAR AT TWELVE
The nav bar now carries twelve destinations because E-Books and
Blogs were asked for at the top level. At the inherited sizing
that overflowed to 1507px inside a 1440px window and broke onto
four rows. The logo column stops reserving a fixed two-twelfths,
the inherited Bootstrap margins come off, and the labels tighten
just enough to hold one line.
================================================================ */
@media (min-width:992px){
#header .navbar > .container{ max-width:100%; padding-inline:clamp(14px,2vw,34px); }
#header .navbar > .container > .col-lg-2{ width:auto; flex:0 0 auto; }
#header #navbarSupportedContent{ margin-left:0 !important; padding-left:0 !important; flex:1 1 auto; }
#header .navbar-nav{ flex-wrap:nowrap; margin-left:auto; align-items:center; }
#header .navbar-nav > li{ margin-right:0 !important; }
/* The list items sat flush against each other, so a dropdown caret read as
if it belonged to the label that followed it: "Activities-v-Books". The
caret now stays tight to its own word and a real gap separates the
destinations. */
#header .navbar-nav{ column-gap:10px; }
#header .nav-link{
font-size:.74rem; letter-spacing:.005em; white-space:nowrap;
padding-left:.3rem; padding-right:.3rem;
}
#header .dropdown-toggle::after{ margin-left:.3em; vertical-align:.16em; opacity:.65; }
.nav-soc{ margin-left:.5rem; gap:5px; }
.nav-soc__a{ width:25px; height:25px; font-size:.72rem; }
}
@media (min-width:1500px){
#header .nav-link{ font-size:.85rem; padding-left:.6rem; padding-right:.6rem; }
.nav-soc__a{ width:28px; height:28px; }
}
/* The library's own long account of itself — the reading room, the magazines,
the rare books and their scanning. It follows the holding rather than
preceding it, set in two columns so 4,000 characters do not arrive as one
narrow ribbon of small type. */
.ab--lib .hold__account{
margin-top:clamp(30px,4vh,48px); padding-top:clamp(24px,3vh,38px);
border-top:1px solid rgba(2,60,90,.14);
columns:2; column-gap:clamp(34px,4.5vw,68px);
}
@media (max-width:860px){ .ab--lib .hold__account{ columns:1; } }
.ab--lib .hold__account p{
margin:0 0 1.05em; font-family:'Archivo',system-ui,sans-serif; font-weight:300;
font-size:.9rem; line-height:1.85; color:#4A443C;
}
/* the account's own sub-topics arrive as bare paragraphs; the short ones that
introduce a section are set as headings so the run has structure */
.ab--lib .hold__account p:has(strong):only-child{ break-inside:avoid; }
/* ================================================================
ONE RECORD — 210 of these, the largest category on the site
They were the last thing still on raw Bootstrap: rounded corners
and a grey shadow against a site of square framed plates, one
line of metadata beside half a page of nothing, and the only way
back rendered as a pale default link.
================================================================ */
.ab--rec{ padding-top:clamp(38px,5vh,64px); }
.rec{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(30px,4.6vw,72px); align-items:start; }
.rec--noimg{ grid-template-columns:1fr; }
@media (max-width:880px){ .rec{ grid-template-columns:1fr; } }
.rec__plate{ margin:0; position:relative; }
.rec__plate a{ display:block; position:relative; }
.rec__plate img{
display:block; width:100%; height:auto; border:9px solid #fff; background:#fff; box-sizing:border-box;
box-shadow:0 26px 44px -26px rgba(20,18,15,.68);
transition:transform .5s var(--out), box-shadow .5s var(--out);
}
@media (hover:hover) and (pointer:fine){
.rec__plate a:hover img{ transform:translateY(-5px); box-shadow:0 34px 52px -26px rgba(20,18,15,.72); }
}
.rec__plate a:focus-visible{ outline:2px solid var(--sind-gold); outline-offset:4px; }
.rec__plate::before,.rec__plate::after{
content:""; position:absolute; width:34px; height:34px; border:1px solid var(--sind-gold); opacity:.8; pointer-events:none;
}
.rec__plate::before{ top:-12px; left:-12px; border-right:0; border-bottom:0; }
.rec__plate::after{ bottom:20px; right:-12px; border-left:0; border-top:0; }
.rec__plate figcaption{
margin-top:1em; font-family:'Archivo',system-ui,sans-serif; font-size:.6rem; font-weight:600;
letter-spacing:.18em; text-transform:uppercase; color:#7A7065;
}
.rec__of{
margin:0 0 .8em; font-family:'Archivo',system-ui,sans-serif; font-size:.6rem; font-weight:600;
letter-spacing:.28em; text-transform:uppercase; color:#6A6055;
padding-bottom:.8em; border-bottom:1px solid rgba(2,60,90,.16);
}
.rec__t{
font-family:'CormorantG',Georgia,serif !important; font-weight:400;
font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.14; color:var(--sind-teal-d); margin:0 0 .7em;
text-wrap:balance;
}
.rec__facts{ margin:0 0 1.5em; display:grid; grid-template-columns:auto 1fr; gap:.5em clamp(16px,2vw,30px); align-items:baseline; }
.rec__facts dt{
font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:.6rem;
letter-spacing:.16em; text-transform:uppercase; color:var(--sind-gold); margin:0; white-space:nowrap;
}
.rec__facts dd{ margin:0; font-family:'Archivo',system-ui,sans-serif; font-weight:300; font-size:.94rem; line-height:1.7; color:#4A443C; }
.rec__body p{ margin:0 0 1em; font-family:'Archivo',system-ui,sans-serif; font-weight:300; font-size:.95rem; line-height:1.88; color:#4A443C; max-width:56ch; }
.rec__get{ margin:1.6em 0 0; }
.rec__back{ margin:1.8em 0 0; padding-top:1.3em; border-top:1px solid rgba(2,60,90,.14); }
.rec__back a{
display:inline-flex; align-items:center; gap:.55em; text-decoration:none;
font-family:'Archivo',system-ui,sans-serif; font-size:.66rem; font-weight:600;
letter-spacing:.18em; text-transform:uppercase; color:#8E2F19; transition:color .3s ease;
}
.rec__back a span{ color:inherit; }
.rec__back a .ar{ transition:transform .3s var(--out); }
@media (hover:hover) and (pointer:fine){
.rec__back a:hover{ color:var(--sind-teal-d); }
.rec__back a:hover .ar{ transform:translateX(-3px); }
}
/* walk the collection without going back up to the grid */
.recnav{
display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,26px);
margin-top:clamp(40px,5.5vh,72px); padding-top:clamp(22px,3vh,34px);
border-top:1px solid rgba(2,60,90,.16);
}
@media (max-width:640px){ .recnav{ grid-template-columns:1fr; } }
.recnav__a{
display:block; text-decoration:none; padding:1.05em 1.25em; background:#FBF6EA;
border-top:1px solid rgba(201,162,39,.5);
transition:transform .4s var(--out), background .3s ease, box-shadow .4s var(--out);
}
.recnav__a--next{ text-align:right; }
@media (hover:hover) and (pointer:fine){
.recnav__a:hover{ transform:translateY(-3px); background:#fff; box-shadow:0 18px 28px -22px rgba(20,18,15,.5); }
}
.recnav__a:focus-visible{ outline:2px solid var(--sind-gold); outline-offset:3px; }
.recnav__a em{
display:block; font-style:normal; font-family:'Archivo',system-ui,sans-serif; font-size:.58rem;
font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#6A6055; margin-bottom:.4em;
}
.recnav__a b{
font-family:'CormorantG',Georgia,serif; font-weight:600; font-size:1.06rem;
line-height:1.3; color:var(--sind-teal-d);
}
/* ================================================================
THE MENU ON A PHONE
base.css carries `@media(max-width:992px){.navbar-collapse{
background-color:white}}` from the old ASP.NET site, where the nav
links were dark. They are gold and cream now, so the open menu was
gold-on-white at 1.4:1 — effectively invisible. The panel also ran
to 465px inside a 390px window, cutting the labels off, and every
dropdown sat expanded at once for an 1,830px menu.
================================================================ */
@media (max-width:991.98px){
#header .navbar-collapse{
background:#02141E !important;
border:1px solid rgba(201,162,39,.28);
position:absolute; left:10px; right:10px; top:calc(100% + 6px); width:auto;
padding:.35rem .95rem .8rem;
max-height:calc(100svh - 128px); overflow-y:auto; overscroll-behavior:contain;
box-shadow:0 26px 44px -26px rgba(0,0,0,.85);
}
#header .navbar-nav{ width:100%; align-items:stretch; }
#header .navbar-nav > li{ width:100%; }
#header .nav-link{
text-align:right; padding:.6rem .1rem; font-size:.94rem;
border-bottom:1px solid rgba(201,162,39,.12);
}
/* the submenu is already inside the dark panel; a second ground on top of
it just reads as a box floating in a box */
#header .dropdown-menu{
background:transparent !important; border:0 !important; box-shadow:none;
margin:0; padding:.15rem 0 .5rem;
}
#header .dropdown-item{
text-align:right; white-space:normal; padding:.42rem .1rem;
font-size:.86rem; color:#C7B49F;
}
#header .dropdown-item:hover,
#header .dropdown-item:focus{ background:transparent; color:#F0D98A; }
.nav-soc{ justify-content:flex-end; padding:.7rem .1rem .2rem; margin:0; }
/* journey.css animates the homepage dropdowns with display:block +
opacity:0 + visibility:hidden so they can transition. On desktop they are
absolutely positioned, so an invisible menu costs no layout. On a phone
Bootstrap makes them position:static, so every hidden submenu still
reserved its full height — five invisible menus stacked into an 1,830px
column of empty space. Below the breakpoint the plain open/closed
behaviour is what a phone actually needs. */
#header .dropdown-menu{
display:none !important;
opacity:1 !important; visibility:visible !important;
transform:none !important; pointer-events:auto !important;
transition:none !important;
}
#header .dropdown-menu.show{ display:block !important; }
#header .dropdown-menu .dropdown-item{ opacity:1 !important; transform:none !important; }
}
/* the search page with no term: a prompt, not 204 records under empty quotes */
.sr__q--blank{ color:var(--sind-teal-d); }
.sr__blank{
max-width:52ch; margin:0 0 1.8em; font-family:'Archivo',system-ui,sans-serif; font-weight:300;
font-size:.97rem; line-height:1.86; color:#4A443C;
}
/* ================================================================
MUSEUM AND ART GALLERY
Six collections of Sindhi craft and a gallery of a thousand works
in fifteen sections, which the imported page rendered as two
bulleted lists with the photographs stacked loose between them.
The objects are framed the way every plate on this site is; the
gallery's sections are set as the register of rooms they are.
================================================================ */
.ab--mus{ padding-bottom:clamp(30px,4vh,50px); }
.mus__open{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(30px,5vw,74px); align-items:start; }
@media (max-width:900px){ .mus__open{ grid-template-columns:1fr; } }
.mus__lede{
margin:0; font-family:'CormorantG',Georgia,serif; font-weight:400;
font-size:clamp(1.24rem,2.3vw,1.72rem); line-height:1.44; color:#3D3830; text-wrap:pretty;
}
.mus__tally{ list-style:none; margin:0; padding:0; display:grid; gap:1.05em; }
.mus__tally li{ display:flex; align-items:baseline; gap:.55em; padding-bottom:.85em; border-bottom:1px solid rgba(2,60,90,.14); }
.mus__tally li::before{ content:none; }
.mus__tally em{ font-family:'Gulzar',serif; font-style:normal; font-size:1.5rem; color:var(--sind-gold); line-height:1; }
.mus__tally b{ font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:1.06rem; color:var(--sind-teal-d); }
.mus__tally i{
font-family:'Archivo',system-ui,sans-serif; font-style:normal; font-size:.63rem; font-weight:600;
letter-spacing:.2em; text-transform:uppercase; color:#6A6055;
}
/* --- the collections ------------------------------------------------------- */
.ab--craft{ padding-top:clamp(34px,4.6vh,58px); }
.mus__h{
font-family:'Cinzel',Georgia,serif !important; font-weight:600;
font-size:clamp(.86rem,1.5vw,1.02rem); letter-spacing:.16em; text-transform:uppercase;
color:var(--sind-teal-d); margin:0 0 .55em;
}
.mus__h-note{
margin:0 0 clamp(30px,4vh,50px); max-width:60ch;
font-family:'CormorantG',Georgia,serif; font-size:clamp(1.05rem,1.8vw,1.26rem); line-height:1.6; color:#5C554C;
}
.craft + .craft{ margin-top:clamp(38px,5vh,66px); }
.craft__h{ display:flex; align-items:baseline; gap:.85em; padding-bottom:.7em; border-bottom:1px solid rgba(2,60,90,.16); }
.craft__n{
font-family:'CormorantG',Georgia,serif !important; font-weight:600;
font-size:clamp(1.2rem,2.2vw,1.6rem); line-height:1.2; color:var(--sind-teal-d); margin:0;
}
.craft__c{ display:flex; align-items:baseline; gap:.4em; margin:0; }
.craft__c em{ font-family:'Gulzar',serif; font-style:normal; font-size:1.05rem; color:var(--sind-gold); line-height:1; }
.craft__c b{
font-family:'Archivo',system-ui,sans-serif; font-size:.62rem; font-weight:600; letter-spacing:.1em;
color:var(--sind-gold); border:1px solid rgba(201,162,39,.5); border-radius:999px; padding:.18em .6em;
}
.craft__grid{
list-style:none; margin:clamp(20px,2.6vh,30px) 0 0; padding:0;
display:grid; grid-template-columns:repeat(auto-fill,minmax(142px,1fr)); gap:clamp(14px,2.4vw,34px);
}
.craft__grid li::before{ content:none; }
/* the object in the same white mount every framed plate on the site uses */
.craft__plate{
display:block; position:relative; aspect-ratio:1; overflow:hidden;
border:7px solid #fff; background:#F2EAD9; box-sizing:border-box;
box-shadow:0 18px 30px -20px rgba(20,18,15,.6);
transition:transform .5s var(--out), box-shadow .5s var(--out);
}
.craft__plate img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (hover:hover) and (pointer:fine){
.craft__plate:hover{ transform:translateY(-5px); box-shadow:0 28px 40px -22px rgba(20,18,15,.68); }
}
.craft__plate:focus-visible{ outline:2px solid var(--sind-gold); outline-offset:4px; }
.craft__plate::after{
content:""; position:absolute; top:-1px; left:-1px; width:22px; height:22px;
border:1px solid var(--sind-gold); border-right:0; border-bottom:0; opacity:0;
transition:opacity .4s var(--out);
}
@media (hover:hover) and (pointer:fine){ .craft__plate:hover::after{ opacity:.9; } }
/* a craft the Institute holds but has not photographed: a fact, not a gap */
.craft__pending{
display:inline-block; margin:1.3em 0 0; font-family:'Archivo',system-ui,sans-serif;
font-size:.6rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#7A7065;
border:1px dashed rgba(2,60,90,.28); padding:.6em 1em;
}
/* ================================================================
THE ART GALLERY - a thousand works, in fifteen rooms
Set on the dark ground so the register reads as a different room
of the site from the craft collections above it.
================================================================ */
.gal{
position:relative; isolation:isolate; overflow:hidden;
padding:clamp(54px,8vh,96px) clamp(22px,5vw,64px);
background:
radial-gradient(70% 78% at 82% 8%, rgba(122,51,22,.44) 0%, transparent 64%),
linear-gradient(160deg,#0B1E28 0%,#0A0A0D 58%,#1B0C05 100%);
color:#E9DBC9;
}
.gal__field{
position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05;
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%3C/g%3E%3C/svg%3E");
background-size:104px 104px;
}
.gal::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:3;
background:linear-gradient(90deg, transparent, var(--sind-gold) 40%, var(--sind-gold-l) 50%, var(--sind-gold) 60%, transparent);
}
.gal__in{ position:relative; z-index:2; width:min(1180px,100%); margin-inline:auto; }
.gal__head{ max-width:62ch; margin:0 0 clamp(30px,4.4vh,52px); }
.gal__h{
font-family:'CormorantG',Georgia,serif !important; font-weight:400;
font-size:clamp(1.8rem,4vw,2.9rem); line-height:1.14; color:#F4EADA; margin:0 0 .5em;
}
.gal__lede{
margin:0; font-family:'Archivo',system-ui,sans-serif; font-weight:300;
font-size:.98rem; line-height:1.88; color:#C4B4A2;
}
.gal__rooms{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(26px,3.4vw,56px);
}
@media (max-width:860px){ .gal__rooms{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .gal__rooms{ grid-template-columns:1fr; } }
.gal__room{
display:flex; align-items:baseline; gap:.85em;
padding:.95em 0; border-top:1px solid rgba(201,162,39,.18);
}
.gal__room::before{ content:none; }
.gal__n{ font-family:'Gulzar',serif; font-size:1.02rem; color:var(--sind-gold); line-height:1; flex:none; min-width:1.6em; }
.gal__t{
font-family:'CormorantG',Georgia,serif; font-weight:600; font-size:1.08rem;
line-height:1.35; color:#F4EADA;
}
/* ================================================================
THE FOOTER IN ONE SCREEN
It ran to 1,042px against a 900px window, so the sign-off could
never be seen whole. The grid declared five columns for six
children, which pushed Contact onto a second row and doubled the
height on its own. Six columns put it back on one line; the crown
and the row rhythm then tighten to bring the whole footer inside
a single screen. Link hit areas stay at 24px.
================================================================ */
@media (min-width:1101px){
.foot__grid{ grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.15fr); gap:clamp(18px,2vw,34px); }
.foot__crown{ padding:clamp(26px,3.4vh,40px) 0 clamp(20px,2.6vh,28px); }
.foot__main{ padding:clamp(26px,3.4vh,40px) 0 clamp(22px,3vh,32px); }
.foot__seal{ width:clamp(64px,5vw,82px); }
.foot__wm{ width:clamp(180px,16vw,250px); }
#footer .foot__h{ margin-bottom:.75em; padding-bottom:.42em; font-size:1.06rem; }
.foot__col li{ padding:.02em 0 .02em 1.2em; }
#footer .foot__col a{ font-size:.86rem; min-height:24px; padding-block:2px; line-height:1.42; }
.foot__col li::before{ top:.72em; width:5px; height:5px; }
.foot__reach{ gap:.62em; }
.foot__row{ font-size:.86rem; line-height:1.5; }
.foot__social{ margin-top:.7rem; }
#footer .foot__soc{ width:30px; height:30px; }
.foot__creed{ font-size:1rem; line-height:1.5; max-width:44ch; }
.foot__baserow{ padding-block:.7rem; }
}
/* Tablet: three columns keeps the labels readable and halves the stack. */
@media (min-width:641px) and (max-width:1100px){
.foot__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.6vw,32px); }
.foot__crown{ padding:clamp(26px,3.4vh,40px) 0 clamp(20px,2.6vh,28px); }
.foot__main{ padding:clamp(26px,3.4vh,40px) 0 clamp(22px,3vh,32px); }
.foot__seal{ width:74px; }
.foot__wm{ width:210px; }
}
/* Phone: two columns rather than one long ribbon. Twenty-five links cannot
fit a 844px screen whatever is done to them, so the aim here is the
shortest honest footer, not a false one-screen claim. */
@media (max-width:640px){
.foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 18px; }
.foot__col--reach{ grid-column:1 / -1; }
.foot__crown{ padding:26px 0 18px; }
.foot__crown .foot__in{ gap:14px; }
.foot__main{ padding:24px 0 20px; }
.foot__seal{ width:60px; }
.foot__wm{ width:190px; }
.foot__creed{ font-size:.94rem; line-height:1.55; }
#footer .foot__h{ margin-bottom:.6em; padding-bottom:.36em; font-size:1rem; }
.foot__col li{ padding:.02em 0 .02em 1.1em; }
#footer .foot__col a{ font-size:.82rem; min-height:24px; padding-block:2px; line-height:1.4; }
.foot__col li::before{ top:.66em; width:5px; height:5px; }
/* On a phone the creed is the one part that carries no navigation and no
contact detail — the same sentence already opens the About page. Dropping
it here buys back roughly a fifth of the footer. */
.foot__creed{ display:none; }
.foot__crown{ padding:20px 0 14px; }
.foot__crown .foot__in{ justify-content:flex-start; }
.foot__seal{ width:52px; }
.foot__wm{ width:170px; }
.foot__main{ padding:18px 0 16px; }
.foot__reach{ gap:.5em; }
.foot__row{ font-size:.84rem; line-height:1.45; }
#footer .foot__social{ margin-top:.55rem; }
#footer .foot__soc{ width:30px; height:30px; }
.foot__baserow{ padding-block:.6rem; gap:6px; }
#footer .foot__baserow p{ font-size:.76rem; }
}
/* ================================================================
LINKS IN RUNNING TEXT
base.css carries a bare `a{ color:#fff }` from the old site, where
links sat on dark grounds. On the cream page that is white on
cream — 1.13:1 — so the Contact page's telephone and email, and
the three membership lines on Donations, were invisible.
Image links keep the colour but not the rule underneath them.
================================================================ */
.page-content a{ color:#8E2F19; }
.page-content a:not(:has(img)){
text-decoration:none; border-bottom:1px solid rgba(142,47,25,.38); padding-bottom:1px;
transition:color .3s ease, border-color .3s ease;
}
@media (hover:hover) and (pointer:fine){
.page-content a:not(:has(img)):hover{ color:var(--sind-teal-d); border-color:var(--sind-teal-d); }
}
.page-content a:focus-visible{ outline:2px solid var(--sind-gold); outline-offset:3px; }
/* ================================================================
CONTACT — the details, the building, and what to write about
================================================================ */
.ab--contact{ padding-top:clamp(38px,5vh,64px); padding-bottom:clamp(30px,4vh,52px); }
.cx{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(28px,4.4vw,64px); align-items:stretch; }
@media (max-width:880px){ .cx{ grid-template-columns:1fr; } }
.cx__card{
background:#FBF6EA; border-top:1px solid rgba(201,162,39,.55);
padding:clamp(26px,3vw,38px);
box-shadow:0 20px 34px -26px rgba(20,18,15,.5);
display:flex; flex-direction:column;
}
.cx__k{
margin:0 0 1.1em; font-family:'Archivo',system-ui,sans-serif; font-size:.6rem; font-weight:600;
letter-spacing:.3em; text-transform:uppercase; color:#6A6055;
padding-bottom:.85em; border-bottom:1px solid rgba(2,60,90,.16);
}
.cx__addr{ font-style:normal; display:grid; gap:.32em; margin:0 0 1.6em; }
.cx__addr span{
font-family:'Archivo',system-ui,sans-serif; font-weight:300; font-size:.98rem;
line-height:1.6; color:#4A443C;
}
.cx__addr .cx__name{
font-family:'CormorantG',Georgia,serif; font-weight:600; font-size:1.3rem;
color:var(--sind-teal-d); line-height:1.25; margin-bottom:.15em;
}
.cx__reach{ margin:0 0 1.7em; display:grid; grid-template-columns:auto 1fr; gap:.55em clamp(16px,2vw,26px); align-items:baseline; }
.cx__reach dt{
font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:.6rem;
letter-spacing:.16em; text-transform:uppercase; color:var(--sind-gold); margin:0;
}
.cx__reach dd{ margin:0; }
.cx__reach dd a{
font-family:'Archivo',system-ui,sans-serif; font-size:1rem; color:#8E2F19; text-decoration:none;
border-bottom:1px solid rgba(142,47,25,.34); padding-bottom:1px;
transition:color .3s ease, border-color .3s ease;
}
@media (hover:hover) and (pointer:fine){
.cx__reach dd a:hover{ color:var(--sind-teal-d); border-color:var(--sind-teal-d); }
}
.cx__go{ margin:0 0 1.5em; }
.cx__btn{
display:inline-flex; align-items:center; gap:.6em; text-decoration:none;
background:var(--sind-teal-d); color:#F4EADA; border:1px solid var(--sind-teal-d);
padding:.82em 1.45em; font-family:'Archivo',system-ui,sans-serif;
font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.cx__btn span{ color:inherit; }
.cx__btn .ar{ transition:transform .3s var(--out); }
@media (hover:hover) and (pointer:fine){
.cx__btn:hover{ background:#8E2F19; border-color:#8E2F19; color:#fff; }
.cx__btn:hover .ar{ transform:translateX(3px); }
}
.cx__soc{ list-style:none; margin:auto 0 0; padding:.9em 0 0; display:flex; gap:9px; border-top:1px solid rgba(2,60,90,.12); }
.cx__soc li::before{ content:none; }
.cx__soc a{
display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
border:1px solid rgba(201,162,39,.55); border-radius:50%; color:#8E2F19; text-decoration:none;
transition:background .3s ease, color .3s ease, border-color .3s ease;
}
@media (hover:hover) and (pointer:fine){
.cx__soc a:hover{ background:var(--sind-teal-d); border-color:var(--sind-teal-d); color:#F4EADA; }
}
/* the building on a map, in the same white mount as every plate */
.cx__map{ margin:0; display:flex; flex-direction:column; }
.cx__map iframe{
display:block; width:100%; flex:1; min-height:clamp(300px,42vh,430px); border:0;
background:#EFE7D6;
border:8px solid #fff; box-sizing:border-box;
box-shadow:0 24px 40px -26px rgba(20,18,15,.62);
filter:saturate(.92);
}
.cx__map figcaption{
margin-top:.9em; font-family:'Archivo',system-ui,sans-serif; font-size:.6rem; font-weight:600;
letter-spacing:.2em; text-transform:uppercase; color:#6A6055;
}
/* --- what to write about --------------------------------------------------- */
.ab--why{ padding-top:clamp(30px,4vh,52px); }
.why__h{
font-family:'Cinzel',Georgia,serif !important; font-weight:600;
font-size:clamp(.86rem,1.5vw,1.02rem); letter-spacing:.16em; text-transform:uppercase;
color:var(--sind-teal-d); margin:0 0 clamp(24px,3.4vh,38px);
padding-bottom:.75em; border-bottom:1px solid rgba(2,60,90,.16);
}
.why{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3.4vw,52px); }
@media (max-width:820px){ .why{ grid-template-columns:1fr; } }
.why__i{ display:grid; grid-template-columns:auto 1fr; gap:clamp(14px,2vw,24px); align-items:start; }
.why__i::before{ content:none; }
.why__n{ font-family:'Gulzar',serif; font-size:1.5rem; color:var(--sind-gold); line-height:1; }
.why__t{
font-family:'CormorantG',Georgia,serif !important; font-weight:600;
font-size:clamp(1.1rem,1.9vw,1.32rem); line-height:1.26; color:var(--sind-teal-d); margin:0 0 .4em;
}
.why__d{
margin:0 0 .8em; font-family:'Archivo',system-ui,sans-serif; font-weight:300;
font-size:.92rem; line-height:1.8; color:#4A443C; max-width:46ch;
}
.why__go{ margin:0; }
.why__go a{
display:inline-flex; align-items:center; gap:.5em; text-decoration:none;
font-family:'Archivo',system-ui,sans-serif; font-size:.62rem; font-weight:600;
letter-spacing:.18em; text-transform:uppercase; color:#8E2F19; transition:color .3s ease;
}
.why__go a span{ color:inherit; }
.why__go a .ar{ transition:transform .3s var(--out); }
@media (hover:hover) and (pointer:fine){
.why__go a:hover{ color:var(--sind-teal-d); }
.why__go a:hover .ar{ transform:translateX(3px); }
}
.why__note{
margin:clamp(28px,3.6vh,44px) 0 0; padding-top:1.3em; border-top:1px solid rgba(2,60,90,.14);
font-family:'CormorantG',Georgia,serif; font-size:clamp(1.05rem,1.8vw,1.24rem);
line-height:1.6; color:#5C554C; max-width:56ch;
}
/* The grid for a form-of-activity page. The tiles themselves reuse
.sind-tile / .sind-tile-frame / .sind-tile-cap, which the Activities
archive already proves out — only the grid was missing. */
.formgrid{
list-style:none; margin:clamp(24px,3vh,36px) 0 0; padding:0;
display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:clamp(18px,2.6vw,36px);
}
.formgrid li::before{ content:none; }
.formgrid > li{ min-width:0; }
/* =====================================================================
* DONATIONS
* Four ways to give, ordered by how quickly a donor can act. The UPI
* panel is the only dark band on the page so the eye lands there first.
* ===================================================================== */
.giv__lede{
font-family:'CormorantG',Georgia,serif; font-weight:400;
font-size:clamp(1.18rem,2.3vw,1.6rem); line-height:1.5; color:var(--sind-ink,#2A241C);
max-width:60ch; margin:0;
}
.giv__h{
font-family:'CormorantG',Georgia,serif !important; font-weight:400;
font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1.16; color:var(--sind-ink,#2A241C);
margin:0 0 .4em;
}
.giv__hnote{ max-width:58ch; color:var(--sind-body,#4A443C); margin:0 0 clamp(24px,3.4vh,40px); }
/* --- bank + cheque ------------------------------------------------- */
.giv{
list-style:none; margin:clamp(22px,3vh,34px) 0 0; padding:0;
display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,2.6vw,34px);
}
.giv li::before{ content:none; }
.giv__i{
position:relative; min-width:0;
padding:clamp(22px,2.6vw,32px);
background:var(--sind-paper-2,#FBF6EA);
border:1px solid rgba(193,154,69,.34);
border-radius:3px;
}
.giv__i::before{
content:""; position:absolute; left:0; top:0; width:3px; height:44px;
background:linear-gradient(180deg,var(--sind-gold,#c19a45),transparent);
}
.giv__t{
font-family:'Cinzel',Georgia,serif !important; font-weight:600;
font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--sind-teal,#06557d); margin:0 0 .7em;
}
.giv__d{ color:var(--sind-body,#4A443C); margin:0 0 1.1em; }
.giv__facts{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.5em 1.2em; align-items:baseline; }
.giv__facts dt{
font-family:'Cinzel',Georgia,serif; font-weight:600;
font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
color:var(--sind-muted,#7A7065); margin:0;
}
.giv__facts dd{
margin:0; color:var(--sind-ink,#2A241C); font-weight:600;
display:flex; align-items:center; gap:.55em; flex-wrap:wrap; min-width:0;
overflow-wrap:anywhere;
}
.giv__addr{ font-style:normal; display:grid; gap:.16em; color:var(--sind-ink,#2A241C); margin:0 0 1.1em; }
.giv__go a, .mem__go a{
display:inline-flex; align-items:center; gap:.5em;
font-family:'Archivo',system-ui,sans-serif; font-weight:600;
font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
color:var(--sind-teal,#06557d); text-decoration:none;
border-bottom:1px solid rgba(6,85,125,.3); padding-bottom:2px;
}
.giv__go a:hover, .mem__go a:hover{ color:var(--sind-madder,#8E2F19); border-bottom-color:currentColor; }
.giv__go{ margin:0; }
.giv__foot{
margin:clamp(28px,3.6vh,44px) 0 0; max-width:62ch;
color:var(--sind-body,#4A443C); font-size:.95rem;
}
.giv__foot a, .giv__d a{
color:var(--sind-teal,#06557d); font-weight:600;
text-decoration:underline; text-underline-offset:3px;
text-decoration-color:rgba(6,85,125,.4);
}
.giv__foot a:hover, .giv__d a:hover{ color:var(--sind-madder,#8E2F19); text-decoration-color:currentColor; }
/* --- the UPI band --------------------------------------------------- */
.upi{
position:relative; isolation:isolate; overflow:hidden;
padding:clamp(54px,8vh,96px) clamp(22px,5vw,64px);
background:
radial-gradient(70% 78% at 82% 8%, rgba(122,51,22,.44) 0%, transparent 64%),
linear-gradient(160deg,#0B1E28 0%,#0A0A0D 58%,#1B0C05 100%);
color:#E9DBC9;
}
.upi__field{
position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05;
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%3C/g%3E%3C/svg%3E");
background-size:104px 104px;
}
.upi::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:3;
background:linear-gradient(90deg, transparent, var(--sind-gold,#c19a45) 40%, var(--sind-gold-l,#F0D98A) 50%, var(--sind-gold,#c19a45) 60%, transparent);
}
.upi__in{ position:relative; z-index:2; width:min(1180px,100%); margin-inline:auto; }
.upi__head{ max-width:60ch; margin:0 0 clamp(28px,4vh,44px); }
.upi__k{
font-family:'Cinzel',Georgia,serif !important; font-weight:600;
font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
color:var(--sind-gold-l,#F0D98A); margin:0 0 .8em;
}
.upi__h{
font-family:'CormorantG',Georgia,serif !important; font-weight:400;
font-size:clamp(1.8rem,4vw,2.9rem); line-height:1.14; color:#F4EADA; margin:0 0 .45em;
}
.upi__note{ color:#CBB89F; margin:0; font-size:1rem; line-height:1.6; }
/* Flex, not a two-column grid: without the code the band would otherwise keep
an empty second column and the text would sit in a narrow strip at the left. */
.upi__body{
display:flex; flex-wrap:wrap; align-items:flex-start;
gap:clamp(26px,4vw,58px);
}
.upi__card{
margin:0; padding:14px; background:#fff; border-radius:6px;
box-shadow:0 18px 44px rgba(0,0,0,.42);
flex:0 0 auto; width:min(300px,100%);
}
.upi__card img{ display:block; width:100%; height:auto; border-radius:3px; }
.upi__card figcaption{
font-family:'Cinzel',Georgia,serif; font-weight:600;
font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
text-align:center; color:#6A6055; padding:.85em 0 .2em;
}
.upi__say{ flex:1 1 340px; min-width:0; max-width:58ch; }
.upi__facts{ margin:0 0 clamp(22px,3vh,32px); display:grid; gap:.2em 0; }
.upi__facts dt{
font-family:'Cinzel',Georgia,serif; font-weight:600;
font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
color:var(--sind-gold-l,#F0D98A); margin:1.15em 0 .35em;
}
.upi__facts dt:first-child{ margin-top:0; }
.upi__facts dd{
margin:0; color:#F4EADA; font-size:1.06rem; font-weight:600;
display:flex; align-items:center; gap:.7em; flex-wrap:wrap; min-width:0;
}
.upi__id{
font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
font-size:1.02rem; letter-spacing:.01em; color:#fff;
background:rgba(240,217,138,.11); border:1px solid rgba(240,217,138,.3);
border-radius:3px; padding:.34em .6em; overflow-wrap:anywhere;
}
.upi__copy{
appearance:none; cursor:pointer;
font-family:'Archivo',system-ui,sans-serif; font-weight:600;
font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
color:#0B1E28; background:var(--sind-gold-l,#F0D98A);
border:1px solid var(--sind-gold-l,#F0D98A); border-radius:3px;
padding:.6em .9em; min-height:34px; transition:background .18s ease, color .18s ease;
}
.upi__copy:hover{ background:#fff; border-color:#fff; }
.upi__copy.is-done{ background:transparent; color:var(--sind-gold-l,#F0D98A); }
.upi__copy--sm{
background:transparent; color:var(--sind-teal,#06557d);
border-color:rgba(6,85,125,.34); padding:.42em .66em; min-height:30px;
}
.upi__copy--sm:hover{ background:var(--sind-teal,#06557d); border-color:var(--sind-teal,#06557d); color:#fff; }
.upi__copy--sm.is-done{ background:transparent; color:var(--sind-madder,#8E2F19); border-color:currentColor; }
.upi__appsk{
font-family:'Cinzel',Georgia,serif !important; font-weight:600;
font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
color:var(--sind-gold-l,#F0D98A); margin:0 0 .8em;
}
.upi__apps{ list-style:none; margin:0 0 clamp(20px,2.6vh,28px); padding:0; display:flex; flex-wrap:wrap; gap:.5em; }
.upi__apps li::before{ content:none; }
.upi__apps li{
font-family:'Archivo',system-ui,sans-serif; font-size:.78rem; font-weight:500;
color:#E9DBC9; border:1px solid rgba(233,219,201,.26); border-radius:999px;
padding:.42em .9em;
}
.upi__warn{
margin:0; max-width:46ch; font-size:.86rem; line-height:1.6; color:#CBB89F;
border-left:2px solid rgba(240,217,138,.42); padding-left:.9em;
}
.upi__warn b{ color:#F4EADA; font-weight:600; }
/* --- membership ----------------------------------------------------- */
.mem{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(18px,2.4vw,30px);
}
.mem li::before{ content:none; }
.mem__i{
position:relative; min-width:0; padding:clamp(24px,2.8vw,34px);
background:var(--sind-paper-2,#FBF6EA);
border:1px solid rgba(193,154,69,.34); border-radius:3px;
display:flex; flex-direction:column; gap:.55em;
}
.mem__n{
font-family:'Gulzar',serif; font-size:1.5rem; line-height:1;
color:var(--sind-gold,#c19a45); opacity:.75;
}
.mem__t{
font-family:'Cinzel',Georgia,serif !important; font-weight:600;
font-size:.78rem; letter-spacing:.15em; text-transform:uppercase;
color:var(--sind-teal,#06557d); margin:0;
}
.mem__amt{
font-family:'CormorantG',Georgia,serif; margin:0 0 .35em;
color:var(--sind-ink,#2A241C); display:flex; align-items:baseline; gap:.12em;
}
.mem__amt span{ font-size:1.35rem; color:var(--sind-muted,#7A7065); }
.mem__amt b{ font-size:clamp(1.9rem,4vw,2.5rem); font-weight:400; line-height:1; }
.mem__go{ margin:auto 0 0; }
/* Copy is a real target on a phone: 34px fails the 44px minimum, and this is a
control people press with a thumb while holding a banking app in the other. */
@media (pointer:coarse){
.upi__copy{ min-height:44px; padding-inline:1.1em; }
.upi__copy--sm{ min-height:44px; }
}
@media (max-width:820px){
.upi__body{ grid-template-columns:1fr; }
.upi__card{ width:min(280px,100%); justify-self:center; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition-duration:.001ms !important; } }