/* =============================================================
   Anirudh Chugh — Digital Marketing Portfolio
   Global stylesheet. Colours & type tokens live at the top.
   Layout is handled with inline styles inside each page so the
   markup stays self-descriptive; this file carries the base
   resets, fonts, hover/focus states and responsive rules.
   ============================================================= */

:root{
  --bg:#141410;          /* page background (deep charcoal) */
  --panel:#17170F;       /* card / panel background */
  --panel-2:#0F0F0B;     /* darker inset panel */
  --text:#F2EEE3;        /* primary warm off-white */
  --text-soft:#CFCABB;   /* softer body text */
  --text-mute:#A8A497;   /* muted text */
  --text-faint:#8F8B7E;  /* faint labels */
  --line:rgba(242,238,227,0.10);
  --lime:#C9F24E;        /* electric lime accent */
  --lime-hi:#dcff85;     /* lime hover */
  --blue:#7C93FF;        /* secondary cobalt accent */
  --lav:#C6B5FF;         /* secondary lavender accent */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'Newsreader',Georgia,serif;font-size:18px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--lime);text-decoration:none}
a:hover{color:var(--lime-hi)}
::selection{background:var(--lime);color:var(--bg)}
button{font-family:inherit;cursor:pointer}
input,textarea{font-family:'Newsreader',Georgia,serif}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
img{max-width:100%;display:block;height:auto}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---- interactive hover / focus states (were inline in the app) ---- */
.navlink{transition:background .2s ease,color .2s ease}
.navlink:hover{color:var(--bg)!important;background:var(--lime)}
.btn-primary{transition:background .2s ease}
.btn-primary:hover{background:var(--lime-hi)}
.btn-outline{transition:border-color .2s ease,color .2s ease}
.btn-outline:hover{border-color:var(--lime)!important;color:var(--lime)!important}
.card{transition:border-color .25s ease,transform .25s ease}
.card:hover{border-color:rgba(201,242,78,0.5)!important;transform:translateY(-3px)}
.card-soft{transition:border-color .25s ease,transform .25s ease}
.card-soft:hover{border-color:rgba(201,242,78,0.4)!important;transform:translateY(-3px)}
.linkcard{transition:border-color .25s ease}
.linkcard:hover{border-color:rgba(201,242,78,0.5)!important}
.disc{transition:border-color .3s ease,background .3s ease}
.disc:hover{border-color:rgba(201,242,78,0.45)!important;background:#1b1b12}
.disc .disc-rule{transition:transform .35s ease}
.disc:hover .disc-rule{transform:scaleX(1)!important}
.explore{transition:border-color .3s ease}
.explore:hover{border-color:rgba(242,238,227,0.32)!important}
.flink{transition:color .2s ease}
.flink:hover{color:var(--lime)!important}
.zoombtn{transition:opacity .2s ease}
.zoombtn:hover{opacity:0.9}
.input{transition:border-color .2s ease}
.input:focus{border-color:var(--lime)!important;outline:none}

/* ---- responsive layout helpers ---- */
.r-hero{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center}
.r-nav-links{display:flex;gap:6px;align-items:center}
.r-about{display:grid;grid-template-columns:0.82fr 1.18fr;gap:48px;align-items:center}
.disc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.r-human{display:grid;grid-template-columns:0.4fr 1fr;gap:36px;align-items:center}

@media(max-width:1080px){.disc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:920px){
  .r-hero{grid-template-columns:1fr;gap:36px}
  .r-nav-links{display:none}
  .r-nav-links.open{display:flex;position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;background:var(--panel);padding:14px;gap:2px;border-bottom:1px solid rgba(242,238,227,0.12);z-index:60}
  .r-burger{display:inline-flex!important}
  .r-hero-photo{max-width:440px;margin:0 auto}
  .r-split{grid-template-columns:1fr!important}
}
@media(min-width:921px){.r-burger{display:none!important}}
@media(max-width:760px){.r-about{grid-template-columns:1fr;gap:30px}.r-human{grid-template-columns:1fr;gap:24px;text-align:left}}
@media(max-width:600px){
  section{padding-left:18px!important;padding-right:18px!important}
  .r-human{padding:22px 20px!important}
  .r-human img{max-width:220px}
  .r-detailnav{grid-template-columns:1fr!important}
}
@media(max-width:560px){.disc-grid{grid-template-columns:1fr}}

/* ---- image lightbox ---- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(10,10,8,0.94);display:none;place-items:center;padding:24px;cursor:zoom-out}
.lightbox.open{display:grid}
.lightbox img{max-width:96vw;max-height:90vh;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,0.6)}
.lightbox-close{position:fixed;top:20px;right:22px;width:44px;height:44px;background:var(--panel);border:1px solid rgba(242,238,227,0.24);border-radius:3px;color:var(--text);font-size:18px}

/* hide elements only meant for screen readers visually but keep for a11y */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}