/* Vedant Shetty — “Monograph” theme
   Ebony & ivory gallery rooms, gold-leaf hairlines, serif display.
   Colours and type live here; content lives in js/content.js. */

:root{
  --ebony:#12100c;        /* deep warm black          */
  --room:#17150f;         /* dark section tone        */
  --ivory:#ede8dc;        /* light rooms & dark text  */
  --paper:#f4f0e7;        /* light room background    */
  --gold:#c9a13b;         /* gold leaf accent         */
  --gold-dim:#8f742f;
  --slate:#a99f8c;        /* muted captions on dark   */
  --ink:#241f16;          /* text on ivory            */
  --hair:rgba(201,161,59,.35);   /* gold hairline    */
  --hair-dark:rgba(36,31,22,.18);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ebony);color:var(--ivory);font-family:'Archivo',sans-serif;font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,.serif{font-family:'Fraunces',serif;font-weight:400}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img{display:block;max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}

.eyebrow{font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:16px}
.eyebrow::after{content:"";flex:0 0 44px;height:1px;background:var(--hair)}
.light .eyebrow{color:var(--gold-dim)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important;transition:none!important}}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(18,16,12,.88);backdrop-filter:blur(10px);border-bottom:1px solid rgba(201,161,59,.18)}
nav .wrap{display:flex;align-items:center;height:64px;gap:26px}
nav .mark{font-family:'Fraunces',serif;font-size:1.12rem;color:var(--ivory);letter-spacing:.02em}
nav .mark i{font-style:normal;color:var(--gold)}
nav .spacer{flex:1}
nav a.lnk{color:var(--slate);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase}
nav a.lnk:hover{color:var(--ivory);text-decoration:none}
@media(max-width:780px){nav a.lnk{display:none}}

/* hero */
.hero{padding:96px 0 72px;position:relative}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center}
@media(max-width:840px){.hero .wrap{grid-template-columns:1fr;gap:48px}}
.hero h1{font-size:clamp(3rem,7.6vw,5.6rem);line-height:1.02;letter-spacing:-.015em;margin:22px 0 10px}
.hero .line{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(1.15rem,2.4vw,1.6rem);color:var(--gold)}
.hero .lead{margin-top:22px;max-width:480px;color:#cfc8b8;font-size:1rem}
.arch{position:relative;justify-self:center;width:min(340px,78vw)}
.arch img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:170px 170px 8px 8px;filter:saturate(1.02)}
.arch::before{content:"";position:absolute;inset:-14px;border:1px solid var(--hair);border-radius:184px 184px 12px 12px;pointer-events:none}
.arch::after{content:"♛";position:absolute;top:-30px;right:-8px;font-size:1.5rem;color:var(--gold);background:var(--ebony);padding:0 10px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-top:64px}
.stats div{padding:24px 18px;text-align:center;border-left:1px solid var(--hair)}
.stats div:first-child{border-left:none}
.stats b{display:block;font-family:'Fraunces',serif;font-weight:400;font-size:1.9rem;color:var(--gold);line-height:1.1}
.stats span{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
@media(max-width:680px){.stats{grid-template-columns:1fr 1fr}.stats div:nth-child(3){border-left:none}}
.profiles{display:flex;gap:26px;justify-content:center;padding:16px 0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}

/* rooms */
section{padding:104px 0}
.light{background:var(--paper);color:var(--ink)}
.light h2{color:var(--ink)}
h2{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.12;letter-spacing:-.01em;margin:18px 0 16px;max-width:720px}
.intro{max-width:600px;font-size:1.02rem}
.light .intro{color:#4c4335}
section:not(.light) .intro{color:#cfc8b8}

/* scoresheet */
.sheet{margin-top:52px;border-top:1px solid var(--hair-dark)}
.srow{display:grid;grid-template-columns:86px 1fr auto;gap:20px;align-items:baseline;padding:20px 4px;border-bottom:1px solid var(--hair-dark)}
.srow .yr{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--gold-dim)}
.srow .ev{font-size:.95rem;color:#4c4335;position:relative;overflow:hidden}
.srow .ev::after{content:"";position:absolute;bottom:6px;margin-left:12px;width:100%;border-bottom:1px dotted rgba(36,31,22,.3)}
.srow .rs{font-weight:500;font-size:.95rem;letter-spacing:.02em;text-align:right}
.srow.strong .rs{font-family:'Fraunces',serif;font-size:1.1rem;color:var(--gold-dim)}
.srow .rs a{font-size:.78rem;margin-left:10px;color:var(--gold-dim)}
@media(max-width:600px){.srow{grid-template-columns:64px 1fr;gap:10px}.srow .rs{grid-column:2;text-align:left}}

/* framed photo trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
@media(max-width:760px){.trio{grid-template-columns:1fr}}
figure.fr{background:transparent}
figure.fr .fim{border:1px solid var(--hair-dark);padding:10px;background:#fff}
section:not(.light) figure.fr .fim{border-color:var(--hair);background:#1d1a13}
figure.fr img{width:100%;height:250px;object-fit:cover;object-position:top}
figure.fr figcaption{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding-top:12px;color:#7a6f5c}
section:not(.light) figure.fr figcaption{color:var(--slate)}

/* gallery cards */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
@media(max-width:880px){.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.gallery{grid-template-columns:1fr}}
.gcard{border:1px solid var(--hair);background:#16130d;display:flex;flex-direction:column;transition:transform .3s ease,border-color .3s ease}
.gcard:hover{transform:translateY(-4px);border-color:rgba(201,161,59,.7)}
.light .gcard{border-color:var(--hair-dark);background:#fff}
.light .gcard:hover{border-color:rgba(36,31,22,.45)}
.gcard .gim{aspect-ratio:4/3;overflow:hidden;position:relative}
.gcard .gim img{width:100%;height:100%;object-fit:cover;object-position:top}
.gcard .tag{position:absolute;left:0;bottom:0;background:var(--gold);color:#241c07;font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:7px 14px}
.gcard .gb{padding:22px 22px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.gcard .where{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.light .gcard .where{color:#8a7c62}
.gcard h3{font-family:'Fraunces',serif;font-weight:500;font-size:1.14rem;line-height:1.3}
.gcard p{font-size:.88rem;flex:1;color:#c6bfae}
.light .gcard p{color:#54493a}
.gcard .lks a{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-right:16px}
.light .gcard .lks a{color:var(--gold-dim)}

/* team */
.team{display:grid;grid-template-columns:auto 1fr;gap:60px;align-items:start;margin-top:8px}
@media(max-width:820px){.team{grid-template-columns:1fr}}
.team .big{font-family:'Fraunces',serif;font-size:clamp(5rem,13vw,9rem);line-height:.9;color:var(--gold-dim)}
.team .links{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.team .links a{color:var(--gold-dim)}

/* media */
.mediarow{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;margin-top:52px}
@media(max-width:820px){.mediarow{grid-template-columns:1fr}}
.tv{position:relative;display:block;border:1px solid var(--hair);padding:10px;background:#1d1a13}
.tv img{width:100%}
.tv .play{position:absolute;inset:10px;display:flex;align-items:center;justify-content:center}
.tv .play i{width:74px;height:74px;border-radius:50%;border:1px solid var(--gold);background:rgba(18,16,12,.75);color:var(--gold);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:1.4rem;transition:transform .25s ease,background .25s ease}
.tv:hover .play i{transform:scale(1.1);background:rgba(18,16,12,.92)}
.tv figcaption{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);padding-top:12px}
blockquote{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(1.2rem,2.4vw,1.55rem);line-height:1.5;color:var(--ivory)}
blockquote footer{font-family:'Archivo';font-style:normal;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-top:16px}
.presslist{margin-top:34px;border-top:1px solid var(--hair)}
.presslist a{display:block;padding:15px 2px;border-bottom:1px solid var(--hair);color:var(--ivory);font-size:.9rem}
.presslist a:hover{color:var(--gold);text-decoration:none;padding-left:8px;transition:padding .2s ease}
.presslist a::before{content:"— ";color:var(--gold)}

/* about strip */
.aboutstrip{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:56px 0;background:var(--room)}
.aboutstrip p{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(1.1rem,2.2vw,1.45rem);max-width:820px;line-height:1.6;color:#d9d2c1}
.aboutstrip p::before{content:"“";color:var(--gold);font-size:1.6em;line-height:0;vertical-align:-.3em;margin-right:6px}

/* closing */
.ferry{position:relative;min-height:420px;display:flex;align-items:flex-end;background-size:cover;background-position:center}
.ferry::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,16,12,.35),rgba(18,16,12,.93))}
.ferry .inner{position:relative;z-index:2;padding:150px 0 64px;width:100%}
.ferry .serif{font-size:clamp(1.5rem,3.4vw,2.4rem);font-style:italic;max-width:680px;line-height:1.35}

footer{padding:46px 28px 72px;text-align:center;color:var(--slate);font-size:.78rem;letter-spacing:.06em}
footer .knight{color:var(--gold);font-size:1.2rem;display:block;margin-bottom:14px}
footer .plinks{margin-top:10px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}
footer .plinks a{margin:0 12px}