/* ESSAAR ONE — public site. Concept: a palace portrait hall; every photograph is seen through a gilded jharokha arch. */
:root{
  --wall:#121733;--wall-deep:#0b0f26;--gold:#c9a24a;--gold-hi:#ecd28b;--gold-lo:#8a6b28;
  --ivory:#f2ead9;--ivory-dim:#c9c1b0;--ink:#1d2036;--kumkum:#8e2a2a;
  --disp:"Rozha One",Georgia,serif;--body:"Spectral",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.pub{margin:0;background:var(--wall);color:var(--ivory);font-family:var(--body);font-weight:300;font-size:18px;line-height:1.65;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M28 4 34 22 52 28 34 34 28 52 22 34 4 28 22 22Z'/%3E%3Cpath d='M0 0 56 56M56 0 0 56'/%3E%3C/g%3E%3C/svg%3E");}
a{color:var(--gold-hi)}
img{display:block}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
h1,h2{font-family:var(--disp);font-weight:400;letter-spacing:.01em;line-height:1.1;margin:0}

/* crest */
.crest{width:46px;height:46px;flex:none}
.crest .lobes{fill:none;stroke:var(--gold);stroke-width:1.6}
.crest .ring{fill:var(--wall-deep);stroke:var(--gold-hi);stroke-width:1}
.crest text{font-family:var(--disp);font-size:27px;fill:var(--gold-hi)}
.crest.sm{width:34px;height:34px;display:inline-block}
.crest.big{width:42%;height:auto}

/* header */
.ph{position:absolute;inset:0 0 auto;z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px 0}
.ph-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ivory)}
.ph-brand span{font-family:var(--disp);font-size:1.45rem;letter-spacing:.06em}
.ph-nav{display:flex;gap:28px;font-style:italic;font-size:1rem}
.ph-nav a{color:var(--ivory-dim);text-decoration:none;padding:4px 2px;border-bottom:1px solid transparent}
.ph-nav a:hover{color:var(--gold-hi);border-bottom-color:var(--gold)}

/* arch */
.arch{position:relative}
.arch-in{position:absolute;inset:0;clip-path:url(#jharokha);background:var(--wall-deep)}
.arch-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arch-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.arch-line path{fill:none;stroke:var(--gold);stroke-width:2;vector-effect:non-scaling-stroke}
.arch-line.outer{inset:-11px;width:calc(100% + 22px);height:calc(100% + 11px)}
.arch-line.outer path{stroke:var(--gold-hi);stroke-width:1;opacity:.55}
.arch-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:1fr auto;align-items:end;
  column-gap:clamp(24px,5vw,80px);padding:150px 24px 48px;overflow:hidden}
.hero-wall{position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 50% 42%,rgba(236,210,139,.13),transparent 70%);pointer-events:none}
.hero-main{grid-column:2;width:min(76vw,430px)}
.hero-main .arch{aspect-ratio:3/4.25}
.hero-main .arch-in img{opacity:0;transition:opacity 1.8s ease}
.hero-main .arch-in img.on{opacity:1}
.hero-side{width:clamp(120px,14vw,190px);margin-bottom:6%}
.hero-side.l{justify-self:end}
.hero-side.r{justify-self:start}
.hero-side .arch{aspect-ratio:3/4.1}
.hero-side .arch-in img{filter:saturate(.7) brightness(.75)}
.hero-text{grid-column:1/-1;text-align:center;padding-top:34px}
.hero-text h1{font-size:clamp(2.6rem,7vw,5.2rem);color:var(--ivory);letter-spacing:.04em}
.tag{font-style:italic;font-size:clamp(1.05rem,2vw,1.3rem);color:var(--ivory-dim);margin:.3em 0 0}
.plaque{display:inline-flex;flex-direction:column;align-items:center;margin:26px auto 0;padding:10px 26px;border-top:1px solid var(--gold-lo);border-bottom:1px solid var(--gold-lo);
  font-size:.95rem;line-height:1.4;min-width:min(320px,80vw);transition:opacity .6s}
.plaque .pa{font-family:var(--disp);color:var(--gold-hi);font-size:1.05rem}
.plaque .pc{font-style:italic;color:var(--ivory-dim)}
.plaque.fade{opacity:0}

/* the unveiling: the arches rise into view like a curtain lifting, then the title appears */
@media (prefers-reduced-motion:no-preference){
  .hero .arch{animation:unveil 1.7s cubic-bezier(.65,0,.25,1) both}
  .hero .hero-side .arch{animation-delay:.45s}
  .hero-text{animation:reveal 1.1s ease 1.3s both}
}
@keyframes unveil{from{clip-path:inset(100% -24px -24px -24px)}to{clip-path:inset(-24px -24px -24px -24px)}}
@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* section heads + ornament */
.sec-head{text-align:center;margin-bottom:56px}
.sec-head h2{font-size:clamp(2rem,4.5vw,3rem)}
.orn{width:200px;height:14px;margin:16px auto 0;background:
  linear-gradient(var(--gold),var(--gold)) left 50%/84px 1px no-repeat,
  linear-gradient(var(--gold),var(--gold)) right 50%/84px 1px no-repeat;position:relative}
.orn:after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border:1px solid var(--gold-hi);transform:translate(-50%,-50%) rotate(45deg)}
.quiet{text-align:center;font-style:italic;color:var(--ivory-dim)}

/* galleries arcade: bays stand on one base line, like a palace corridor */
.galleries{padding:110px 24px 120px;max-width:1240px;margin:0 auto}
.arcade{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:64px 44px;align-items:end}
.bay{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--ivory)}
.bay .arch{width:100%;aspect-ratio:3/4.1;margin-bottom:22px}
.bay.tall .arch{aspect-ratio:3/4.7}
.bay .arch-in img{transition:transform 1.2s ease}
.bay:hover .arch-in img{transform:scale(1.05)}
.bay:hover .arch-line path{stroke:var(--gold-hi)}
.bay-name{font-family:var(--disp);font-size:1.3rem;line-height:1.25;color:var(--gold-hi)}
.bay-meta{font-style:italic;font-size:.95rem;color:var(--ivory-dim);margin-top:4px}

/* marble band */
.marble{background:var(--ivory);color:var(--ink);
  background-image:radial-gradient(ellipse 60% 40% at 15% 20%,rgba(160,150,130,.18),transparent 70%),radial-gradient(ellipse 50% 50% at 85% 80%,rgba(160,150,130,.15),transparent 70%);
  border-top:3px double var(--gold-lo);border-bottom:3px double var(--gold-lo)}
.marble-in{max-width:1080px;margin:0 auto;padding:96px 24px;display:grid;grid-template-columns:1.4fr 1fr;gap:72px}
.marble h2{font-size:2.2rem;color:var(--ink);margin-bottom:18px}
.marble p{margin:0;max-width:60ch;font-size:1.1rem;line-height:1.8}
.marble a{color:#6d4f12}
.ct{margin:0;display:grid;gap:14px}
.ct div{display:grid;grid-template-columns:110px 1fr;align-items:baseline;border-bottom:1px solid rgba(138,107,40,.35);padding-bottom:10px}
.ct dt{font-style:italic;color:#7a6a4c}
.ct dd{margin:0;font-size:1.1rem}

/* gallery page */
.gal-head{text-align:center;padding:170px 24px 40px}
.gal-head h1{font-size:clamp(2.2rem,5.5vw,4rem);max-width:22ch;margin:0 auto}
.gal-meta{font-style:italic;color:var(--ivory-dim);margin:.6em 0 0}
.back{display:inline-block;margin-bottom:18px;font-style:italic;color:var(--ivory-dim);text-decoration:none;border-bottom:1px solid var(--gold-lo)}
.wall{columns:4 260px;column-gap:26px;max-width:1400px;margin:0 auto;padding:30px 24px 120px}
.pic{display:block;width:100%;margin:0 0 26px;padding:7px;break-inside:avoid;cursor:zoom-in;background:var(--wall-deep);
  border:1px solid var(--gold);box-shadow:0 0 0 4px var(--wall),0 0 0 5px rgba(201,162,74,.45),0 18px 40px rgba(0,0,0,.45)}
.pic img{width:100%;aspect-ratio:1/var(--r);object-fit:cover;background:#1a2045}
.pic:hover{border-color:var(--gold-hi)}

/* viewer */
.lb{position:fixed;inset:0;z-index:50;background:rgba(9,12,30,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 70px}
.lb img{max-width:100%;max-height:78vh;object-fit:contain;border:1px solid var(--gold);padding:6px;background:var(--wall-deep)}
.lb .lb-cap{margin-top:18px;text-align:center;font-style:italic;color:var(--ivory-dim);min-height:1.6em}
.lb .lb-cap b{font-style:normal;font-family:var(--disp);font-weight:400;color:var(--gold-hi);margin-right:10px}
.lb button{position:absolute;background:none;border:1px solid var(--gold-lo);color:var(--gold-hi);font:inherit;font-size:1.6rem;width:48px;height:48px;border-radius:50%;cursor:pointer}
.lb button:hover{border-color:var(--gold-hi)}
.lb .lb-x{top:18px;right:18px;font-size:1.3rem}
.lb .lb-p{left:12px;top:50%}
.lb .lb-n{right:12px;top:50%}
.lb .lb-dl{margin-top:10px;font-size:.95rem}

/* footer */
.pf{text-align:center;padding:40px 24px 50px;color:var(--ivory-dim);font-size:.9rem}
.pf p{margin:.4em auto;max-width:60ch}
.pf a{color:var(--ivory-dim)}
.pf-rule{width:min(560px,80%);height:1px;margin:0 auto 26px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

@media(max-width:820px){
  body.pub{font-size:17px}
  .hero{grid-template-columns:1fr;padding-top:140px}
  .hero-side{display:none}
  .hero-main{grid-column:1;justify-self:center}
  .marble-in{grid-template-columns:1fr;gap:48px;padding:70px 22px}
  .arcade{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:44px 22px}
  .bay-name{font-size:1.1rem}
  .lb{padding:20px 12px 80px}
  .lb .lb-p,.lb .lb-n{top:auto;bottom:18px}
  .lb .lb-p{left:calc(50% - 60px)}.lb .lb-n{right:calc(50% - 60px)}
}
@media(max-width:480px){.ph-nav{gap:18px}.ct div{grid-template-columns:90px 1fr}}