/* Avinash D.R.S. - Guides pages: a plain reading layout in the site's fonts and colours */
@font-face { font-family:"Array"; font-weight:400; font-style:normal; font-display:swap;
             src:url("../Fonts/WEB/fonts/Array-Regular.woff2") format("woff2"), url("../Fonts/WEB/fonts/Array-Regular.woff") format("woff"); }
@font-face { font-family:"Khand"; font-weight:400; font-style:normal; font-display:swap;
             src:url("../Fonts/WEB/fonts/Khand-Regular.woff2") format("woff2"), url("../Fonts/WEB/fonts/Khand-Regular.woff") format("woff"); }
:root { --ink:#0d0d0d; --cream:#e7e7e3; --accent:#ffb000; font-synthesis:none; }
* { box-sizing:border-box; margin:0; padding:0; }
body { min-height:100vh; display:flex; flex-direction:column; background:#cfcfca radial-gradient(ellipse at 50% 30%, #e2e2de 0%, #b9b9b4 70%, #8c8c88 100%) fixed;
       color:var(--ink); font-family:"Khand", system-ui, sans-serif; }
a { color:inherit; }

.g-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; padding:20px clamp(16px, 4vw, 40px); }
.g-brand { font-family:"Array", sans-serif; font-size:26px; letter-spacing:1px; text-decoration:none; }
.g-top nav { display:flex; flex-wrap:wrap; gap:2px; padding:4px; background:rgba(10,10,10,.82); border-radius:999px; }
.g-top nav a { color:var(--cream); text-decoration:none; font-size:15px; letter-spacing:.5px; padding:6px 14px; border-radius:999px; opacity:.8; }
.g-top nav a:hover { opacity:1; background:rgba(231,231,227,.12); }
.g-top nav a[aria-current="page"] { background:var(--accent); color:var(--ink); opacity:1; }

.g-main { flex:1; width:100%; max-width:720px; margin:0 auto; padding:clamp(32px, 10vh, 96px) clamp(16px, 4vw, 40px) 48px; }
.g-tag { font-size:14px; letter-spacing:2px; text-transform:uppercase; color:#7a5500; }
h1 { margin-top:6px; font-family:"Array", sans-serif; font-weight:400; font-size:clamp(48px, 9vw, 96px); line-height:.95; }
.g-lede { margin-top:18px; font-size:21px; line-height:1.45; }
.g-soon { margin-top:14px; font-size:18px; opacity:.7; }
.g-btn { display:inline-block; margin-top:30px; padding:14px 30px; border-radius:999px; background:var(--ink); color:var(--cream);
         text-decoration:none; font-size:20px; box-shadow:0 8px 0 #000; }
.g-btn:active { transform:translateY(5px); box-shadow:0 3px 0 #000; }

.g-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; padding:20px clamp(16px, 4vw, 40px);
          background:var(--ink); color:var(--cream); font-size:15px; }
.g-foot nav { display:flex; flex-wrap:wrap; gap:4px 18px; }
.g-foot nav a { text-decoration:none; opacity:.8; }
.g-foot nav a:hover { opacity:1; color:var(--accent); }
.g-foot span { opacity:.6; }