/* Materials Atlas — category-world presentation.
   The current page is generated by data/materials-atlas-home.js using
   .world-* primitives and #atlas-world-grid. Legacy material-card and
   dossier-modal selectors have been retired rather than kept as dead CSS. */

.atlas-world{
  background:#f5f1e8;
  color:#14242c;
  min-height:100vh;
}

.atlas-world main{max-width:none}

.atlas-world .world-hero{
  padding:clamp(90px,12vw,170px) max(24px,5vw) 72px;
  background:linear-gradient(120deg,#ebe5d8,#f7f3eb);
}

.atlas-world .world-hero-inner{max-width:1180px;margin:auto}

.atlas-world .eyebrow{
  font:600 .72rem/1.4 Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8b6737;
}

.atlas-world h1{
  font-family:Georgia,serif;
  font-size:clamp(2.8rem,6vw,6.5rem);
  font-weight:400;
  line-height:.98;
  max-width:1000px;
  margin:18px 0;
}

.atlas-world .world-lead{
  font:400 1.1rem/1.65 Arial,sans-serif;
  color:#61717a;
  max-width:760px;
}

.atlas-world .world-meta{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  margin-top:34px;
  font:600 .72rem/1.4 Arial,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.atlas-world .world-nav{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(245,241,232,.96);
  border-top:1px solid #d8d0c2;
  border-bottom:1px solid #d8d0c2;
  backdrop-filter:blur(10px);
}

.atlas-world .world-nav-inner{
  max-width:1180px;
  margin:auto;
  display:flex;
  gap:22px;
  overflow:auto;
  padding:14px 24px;
}

.atlas-world .world-nav a{
  white-space:nowrap;
  color:#40535d;
  text-decoration:none;
  font:600 .68rem/1.3 Arial,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.atlas-world .world-content{
  max-width:1180px;
  margin:auto;
  padding:60px 24px 100px;
}

.atlas-world .world-note{
  max-width:780px;
  margin:0 0 42px;
  font:400 1rem/1.7 Arial,sans-serif;
  color:#62717a;
}

.atlas-world #atlas-world-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.atlas-world #atlas-world-grid>a{
  display:block;
  text-decoration:none;
  color:inherit;
  background:#faf7f0;
  border:1px solid #ddd5c7;
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.atlas-world #atlas-world-grid>a:hover{
  transform:translateY(-2px);
  border-color:#c8b79f;
  box-shadow:0 14px 30px rgba(20,36,44,.08);
}

.atlas-world #atlas-world-grid>a>div:first-child{
  aspect-ratio:1.55;
  overflow:hidden;
}

.atlas-world #atlas-world-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease;
}

.atlas-world #atlas-world-grid>a:hover img{transform:scale(1.025)}

.atlas-world #atlas-world-grid>a>div:last-child{padding:24px}

.atlas-world #atlas-world-grid a span{
  font:600 .65rem/1 Arial,sans-serif;
  letter-spacing:.13em;
  color:#8b6737;
}

.atlas-world #atlas-world-grid h2{
  font:400 1.8rem/1.05 Georgia,serif;
  margin:12px 0;
}

.atlas-world #atlas-world-grid p{
  font:400 .9rem/1.55 Arial,sans-serif;
  color:#65747c;
  margin:0 0 20px;
}

.atlas-world #atlas-world-grid a span:last-child{
  font:600 .7rem/1 Arial,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#14242c;
}

@media(max-width:900px){
  .atlas-world #atlas-world-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:620px){
  .atlas-world .world-content{padding:44px 18px 72px}
  .atlas-world #atlas-world-grid{grid-template-columns:1fr}
  .atlas-world #atlas-world-grid>a>div:last-child{padding:20px}
}

@media(prefers-reduced-motion:reduce){
  .atlas-world #atlas-world-grid>a,
  .atlas-world #atlas-world-grid img{transition:none}
}

/* 2026-09-26 — align Materials Atlas with the canonical Vasundhara visual system.
   The Atlas keeps its own catalogue structure, but its shell, typography,
   hero hierarchy, navigation and card grammar now belong to the same family
   as the homepage and India Intelligence surfaces. */
body.materials-new.atlas-world{
  background:var(--vh-surface,#f6f4ef);
  color:var(--vh-text,#173447);
  font-family:var(--vh-font-body,'DM Sans',Arial,sans-serif);
}
body.materials-new .world-hero.vh-hero{
  min-height:100svh;
  height:100svh;
  max-height:none;
  display:flex;
  align-items:flex-end;
  padding:0;
  background-image:url('https://amazingarchitecture.com/storage/2336/responsive-images/the_little_much_farm_studio_lab_mulshi_india___media_library_original_1344_756.jpg');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  color:#fff;
}
body.materials-new .world-hero.vh-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(4,11,16,.84),rgba(4,11,16,.38) 58%,rgba(4,11,16,.12)),
    linear-gradient(0deg,rgba(3,8,11,.82),rgba(3,8,11,.08) 68%);
  pointer-events:none;
}
body.materials-new .world-hero-inner{
  position:relative;
  z-index:2;
  width:min(1500px,calc(100% - clamp(36px,8vw,128px)));
  max-width:none;
  margin:0 auto;
  padding:0 0 clamp(52px,9vh,105px);
}
body.materials-new .world-hero .eyebrow{
  display:block;
  margin:0 0 20px;
  color:#e4bd73;
  font:700 .62rem/1.4 var(--vh-font-body,Arial,sans-serif);
  letter-spacing:.25em;
  text-transform:uppercase;
}
body.materials-new .world-hero h1{
  max-width:1050px;
  margin:0 0 24px;
  color:#fff;
  font:400 clamp(3.8rem,7.6vw,8rem)/.88 var(--vh-font-display,'Playfair Display',Georgia,serif);
  letter-spacing:-.055em;
}
body.materials-new .world-lead{
  max-width:760px;
  margin:0;
  color:rgba(255,255,255,.88);
  font:400 clamp(1rem,1.35vw,1.18rem)/1.7 var(--vh-font-body,'DM Sans',Arial,sans-serif);
}
body.materials-new .world-meta{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin:34px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.28);
}
body.materials-new .world-meta span{
  padding:0 24px;
  border-left:1px solid rgba(255,255,255,.23);
  color:rgba(255,255,255,.78);
  font:700 .56rem/1.25 Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
body.materials-new .world-meta span:first-child{padding-left:0;border-left:0}
body.materials-new .world-nav{
  top:0;
  background:rgba(13,27,32,.97);
  border:0;
  box-shadow:none;
}
body.materials-new .world-nav-inner{
  width:min(1500px,100%);
  max-width:none;
  padding:0 clamp(18px,4vw,64px);
  min-height:58px;
  align-items:center;
  gap:0;
}
body.materials-new .world-nav a{
  display:inline-flex;
  align-items:center;
  min-height:58px;
  padding:0 15px;
  color:rgba(255,255,255,.72);
  border-bottom:2px solid transparent;
  font:700 .55rem/1 var(--vh-font-body,Arial,sans-serif);
  letter-spacing:.11em;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
body.materials-new .world-nav a:hover,
body.materials-new .world-nav a:focus-visible{
  color:#e5bd73;
  border-bottom-color:#e5bd73;
  background:rgba(255,255,255,.035);
}
body.materials-new .world-content{
  width:100%;
  max-width:none;
  margin:0;
  padding:clamp(54px,7vw,92px) clamp(18px,4vw,64px) 110px;
}
body.materials-new .world-note{
  width:min(820px,100%);
  max-width:none;
  margin:0 auto clamp(42px,5vw,64px);
  color:#5f6d74;
  font:400 1rem/1.72 var(--vh-font-body,'DM Sans',Arial,sans-serif);
}
body.materials-new #atlas-world-grid{
  width:min(1500px,100%);
  margin:0 auto;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:rgba(23,52,71,.14);
  border:1px solid rgba(23,52,71,.14);
}
body.materials-new #atlas-world-grid>a{
  min-width:0;
  background:#fffdfa;
  border:0;
  box-shadow:none;
  transform:none;
}
body.materials-new #atlas-world-grid>a:nth-child(2n){background:#f7f4ed}
body.materials-new #atlas-world-grid>a:hover{
  border:0;
  background:#fff;
  box-shadow:none;
  transform:none;
}
body.materials-new #atlas-world-grid>a>div:first-child{
  aspect-ratio:1.58;
}
body.materials-new #atlas-world-grid>a>div:first-child img{
  filter:saturate(.92);
}
body.materials-new #atlas-world-grid>a:hover img{transform:scale(1.035)}
body.materials-new #atlas-world-grid>a>div:last-child{
  min-height:245px;
  padding:25px 26px 28px;
  display:flex;
  flex-direction:column;
}
body.materials-new #atlas-world-grid a span:first-child{
  color:#927044;
  font:700 .53rem/1 Arial,sans-serif;
  letter-spacing:.17em;
  text-transform:uppercase;
}
body.materials-new #atlas-world-grid h2{
  margin:14px 0 9px;
  color:#173447;
  font:400 clamp(1.55rem,2.2vw,2.35rem)/.98 var(--vh-font-display,'Playfair Display',Georgia,serif);
  letter-spacing:-.03em;
}
body.materials-new #atlas-world-grid p{
  margin:0;
  color:#66747a;
  font:400 .83rem/1.65 var(--vh-font-body,'DM Sans',Arial,sans-serif);
}
body.materials-new #atlas-world-grid a span:last-child{
  margin-top:auto;
  padding-top:19px;
  color:#76552e;
  font:700 .52rem/1 Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
@media(max-width:980px){
  body.materials-new .world-hero-inner{width:calc(100% - 42px)}
  body.materials-new #atlas-world-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  body.materials-new .world-hero.vh-hero{
    min-height:88svh;
    height:88svh;
  }
  body.materials-new .world-hero-inner{
    width:calc(100% - 28px);
    padding-bottom:42px;
  }
  body.materials-new .world-hero h1{
    font-size:clamp(3.2rem,13vw,5.2rem);
  }
  body.materials-new .world-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  body.materials-new .world-meta span{
    padding:10px 14px;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.2);
  }
  body.materials-new .world-meta span:first-child{padding-left:14px}
  body.materials-new .world-nav-inner{padding:0 10px}
  body.materials-new .world-nav a{padding:0 11px;min-height:52px}
  body.materials-new .world-content{padding:44px 14px 72px}
  body.materials-new #atlas-world-grid{grid-template-columns:1fr}
  body.materials-new #atlas-world-grid>a>div:last-child{min-height:0;padding:21px 20px 23px}
}