/* Ehtesab — Campus Magazine / Student Notice Board theme.
   Final overridden tokens from the preview portal. Solid colours only:
   no gradients, no neon, no dark mode. */
:root{
  --paper:#f2e7cb; --surface:#fffaf0; --surface-2:#eedfb6; --ink:#211409;
  --ink-soft:#6b5136; --line:#c9a35f; --green:#1f5233; --green-deep:#13351f;
  --green-tint:#dfe4c3; --brick:#9c3a20; --brick-deep:#6e2611; --brick-tint:#f2d6ba;
  --gold:#a8730d; --gold-tint:#f7e7b4; --olive:#6d6a3f; --gray-tint:#e9dfc2;
  --shadow:0 18px 36px rgba(84,55,16,0.18); --radius:8px; --radius-sm:6px;
}
*{box-sizing:border-box}
html{scroll-padding-top:112px}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Public Sans",Georgia,serif;line-height:1.6;
  background-image:radial-gradient(rgba(84,55,16,0.04) 1px,transparent 1px);
  background-size:22px 22px}
body[dir="rtl"]{font-family:"Noto Nastaliq Urdu","Public Sans",serif;line-height:1.9}
body[dir="rtl"] h1,body[dir="rtl"] h2,body[dir="rtl"] h3{line-height:1.7}
a{color:var(--brick)}
p,li{ text-align:justify }
nav a,.lang button,.btn,.tag,.pill,.chip,.life-pill,.kicker,.open,h1,h2,h3,h4,.photo-caption,.punch,.support-tag,.loop-num{ text-align:left }
body[dir="rtl"] p,body[dir="rtl"] li{ text-align:justify }
/* --- Header stack --- */
.top-banner{background:#f6ead0;border-bottom:4px double var(--brick-deep);padding:8px 16px;text-align:center}
.top-banner svg{width:min(100%,800px);height:auto;display:block;margin:0 auto}
.unoff-strip{background:var(--green-deep);color:#fff;text-align:center;font-size:13px;padding:9px 16px;border-bottom:2px dashed var(--gold)}
.unoff-strip .not{color:var(--gold-tint);font-weight:700}
.masthead{position:sticky;top:0;z-index:50;background:#fff8e8;border-bottom:4px double #7a4a21;
  background-image:repeating-linear-gradient(0deg,transparent 0 30px,rgba(201,163,95,0.25) 30px 31px)}
.masthead-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px 6px}
.brand{font-family:"Playfair Display",Georgia,serif;font-size:33px;line-height:1.1;color:var(--brick);font-weight:800}
.brand small{display:block;font-size:13.5px;color:var(--green);letter-spacing:1px;text-transform:uppercase;font-family:"Public Sans",sans-serif}
nav{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px 12px}
nav a{text-decoration:none;color:var(--ink);border:1.5px solid var(--line);padding:7px 12px;background:var(--surface);font-size:15px}
nav a.active{background:var(--brick);color:#fff;border-color:var(--brick)}
.lang{display:flex;gap:0}
.lang button{border:2px solid var(--ink);background:var(--surface);padding:6px 10px;cursor:pointer;font-size:15px;box-shadow:2.5px 2.5px 0 var(--ink);margin-left:-2px}
.lang button.active{background:var(--brick);color:#fff;border-color:var(--brick)}
.wrap{max-width:1140px;margin:0 auto;padding:18px 16px 60px}
.page{display:none}
.page.active{display:block}
/* --- Hero --- */
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:30px;align-items:start}
.hero h1{font-family:"Playfair Display",Georgia,serif;font-size:clamp(42px,6vw,72px);line-height:1.05;margin:8px 0;color:var(--brick)}
.hero .post{font-family:"Playfair Display",Georgia,serif;font-size:clamp(24px,3.4vw,36px);font-weight:600;color:var(--green);margin:0 0 8px}
.hero .profile{font-size:18px;font-weight:700}
.hero .profile b,.hero .profile{color:var(--ink)}
.hero .lede{font-size:20px;line-height:1.6;max-width:34em}
.tag{display:inline-block;background:#ffedb8;border:1.5px solid var(--gold);color:var(--ink);padding:8px 15px;font-size:14px;font-weight:700;transform:rotate(-1.1deg);position:relative}
.tag::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--brick);margin-right:8px;vertical-align:middle}
.hero-photo{width:100%;max-width:430px;justify-self:end;background:#fffdf4;padding:15px;border:1px solid #d3b478;transform:rotate(1.15deg);box-shadow:var(--shadow),8px 8px 0 rgba(168,115,13,0.35);position:relative}
.hero-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border:2px solid var(--brick)}
.photo-caption{font-family:"Caveat",cursive;font-size:19px;color:#6b5136;text-align:center;margin:10px 0 0}
.btn{display:inline-block;background:var(--brick);color:#fff;text-decoration:none;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:17.5px;padding:16px 26px;margin:6px 8px 6px 0;cursor:pointer;transform:rotate(-0.4deg);transition:transform .15s,box-shadow .15s}
.btn:nth-child(even){transform:rotate(0.4deg)}
.btn:hover{transform:translate(-1px,-1px) rotate(0deg);box-shadow:4px 4px 0 var(--ink)}
.btn.green{background:var(--green)}
.btn.white{background:#fff;color:var(--ink)}
.btn.outline-white{background:transparent;color:#fff;border-color:#fff;box-shadow:3px 3px 0 #fff}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.commit{margin-top:28px;background:#fff6d8;border:1.5px solid #dbb968;transform:rotate(-0.35deg);padding:18px 22px;box-shadow:var(--shadow);position:relative}
.commit::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--green);position:absolute;top:-6px;left:20px}
.commit-label{display:block;text-transform:uppercase;letter-spacing:1px;color:var(--brick);font-weight:700;font-size:13px;margin-bottom:6px}
.commit p{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:clamp(19px,2.6vw,24px);line-height:1.5;margin:0}
/* --- Sections --- */
section.page{padding-top:64px}
section.page:first-child{padding-top:18px}
h2{font-family:"Playfair Display",Georgia,serif;font-weight:800;font-size:clamp(28px,3.6vw,38px);color:var(--brick);border-bottom:2px solid var(--gold);padding-bottom:6px}
h3{font-family:"Playfair Display",Georgia,serif;font-size:22px;color:var(--green)}
h4{font-family:"Playfair Display",Georgia,serif;color:var(--ink)}
.divider{border:none;border-top:2px dashed #8a6a3a;margin:36px 0;position:relative}
.divider::after{content:"";display:block;width:9px;height:9px;background:var(--brick);transform:rotate(45deg);margin:-6px auto 0}
.kicker{display:inline-block;background:var(--gold-tint);border:1.5px solid var(--gold);color:var(--brick);padding:6px 14px;font-weight:700;transform:rotate(-0.5deg)}
.vision-section h2{font-size:clamp(36px,4.5vw,56px)}
.vision-intro{font-size:17px;max-width:62em}
.punch{font-family:"Playfair Display",Georgia,serif;font-style:normal;font-weight:700;font-size:clamp(31px,4.6vw,47px);line-height:1.2;margin:10px 0}
.punch-brick{color:var(--brick)}
.punch-green{color:var(--green)}
.punch-ink{color:var(--ink)}
.vision-panels{display:grid;gap:18px;margin:22px 0}
.vpanel{position:relative;padding:22px 22px 18px;border:1.5px solid var(--line);box-shadow:var(--shadow)}
.vpanel h3{font-size:clamp(23px,3.2vw,32px);font-weight:700;margin:10px 0 6px}
.vpanel p{font-size:16px}
.sir-panel{background:#fdf3cd;transform:rotate(-0.3deg)}
.gap-panel{background:#fbeed9;transform:rotate(0.25deg)}
.lob-panel{background:#f7ebc9;transform:rotate(-0.2deg)}
.trans-panel{background:#ecebd2;transform:rotate(0.3deg)}
.cab-panel{background:#eef0d8;transform:rotate(-0.25deg)}
.loop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0}
.loop-card{position:relative;background:var(--surface);border:1.5px solid var(--line);border-top:4px solid var(--brick);padding:18px;box-shadow:var(--shadow)}
.loop-card:nth-child(2){border-top-color:var(--green)}
.loop-card:nth-child(3){border-top-color:var(--gold)}
.loop-card:nth-child(4){border-top-color:var(--olive)}
.loop-card:nth-child(5){border-top-color:var(--brick-deep)}
.loop-card:nth-child(odd){transform:rotate(-0.4deg)}
.loop-card:nth-child(even){transform:rotate(0.4deg)}
.loop-num{font-family:"Caveat",cursive;font-size:34px;color:var(--brick);font-weight:700}
.pin{position:absolute;top:-9px;left:16px;width:11px;height:11px;border-radius:50%;background:var(--brick);box-shadow:0 0 0 2px var(--gold-tint)}
.vision-line{background:var(--green-deep);color:#fff;padding:22px 26px;margin:28px 0;box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 0 6px var(--green-deep)}
.vision-line p{font-family:"Caveat",cursive;font-size:clamp(26px,3.6vw,38px);color:var(--gold-tint);margin:0;text-align:center}
.vision-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}
.vcard{background:var(--surface);border:1.5px solid var(--line);padding:18px;box-shadow:var(--shadow)}
.win-lose{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}
.win-card{background:var(--green-deep);color:#fff;padding:20px;border:1.5px solid var(--green-deep)}
.win-card h3{color:#fff}
.lose-card{background:#5c6644;color:#fff;padding:20px}
.lose-card h3{color:#fff}
.album{margin:24px 0}
.album-frame{background:#fffdf4;border:1px solid #d3b478;padding:18px;height:340px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);text-align:center}
.album-note{font-size:17px;color:var(--ink-soft);max-width:30em}
/* Support */
.support{position:relative;background:var(--brick);color:#fff;padding:36px 28px 28px;border-bottom:5px solid var(--brick-deep);box-shadow:inset 0 0 0 2px rgba(255,255,255,0.35),inset 0 0 0 6px var(--brick);margin-top:36px}
.support-tag{display:inline-block;background:#fff;color:var(--brick);padding:6px 14px;font-weight:700;transform:rotate(-1deg)}
.support h2{color:#fff;border-bottom-color:var(--gold-tint);font-size:clamp(27px,4vw,38px)}
.support p{color:#fff}
/* Explore */
.explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:18px 0}
.explore-card{position:relative;display:block;text-decoration:none;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);padding:20px 18px 16px;box-shadow:var(--shadow)}
.explore-card:nth-child(3n+1){background:#fdf3cd;border-top:4px solid var(--brick)}
.explore-card:nth-child(3n+2){background:#ecebd2;border-top:4px solid var(--green)}
.explore-card:nth-child(3n){background:#fbeed9;border-top:4px solid var(--gold)}
.explore-card:nth-child(odd){transform:rotate(-0.4deg)}
.explore-card:nth-child(even){transform:rotate(0.4deg)}
.explore-card:hover{transform:rotate(0deg)}
.explore-card h3{color:var(--brick)}
.explore-card .open{color:var(--brick);font-weight:700}
/* Cards, forms, wall */
.card,.vcard,.how-card,.step-card,.glance-box{background:var(--surface);border:1.5px solid var(--line);padding:16px 18px;margin:14px 0;box-shadow:var(--shadow);position:relative}
.wall .card{background-image:radial-gradient(rgba(84,55,16,0.18) 1px,transparent 1px);background-size:22px 22px;background-color:#fbf0cd}
.pill,.stamp-tag{display:inline-block;padding:4px 10px;border:1.5px solid var(--line);font-size:13px;background:var(--surface-2);margin:2px 6px 2px 0}
.pill.demo{background:#ffe9a8;border-color:var(--gold);font-weight:700}
.pill.review{background:#e2eedd}
form label{display:block;margin:12px 0 4px;font-weight:700}
form input,form select,form textarea{width:100%;padding:11px;border:2px solid #c2a061;background:#fffef8;font-size:16px;font-family:inherit}
.ruled-form{border:2px solid #c2a061;background:var(--surface);padding:20px;position:relative;background-image:repeating-linear-gradient(0deg,transparent 0 30px,rgba(194,160,97,0.3) 30px 31px)}
.note{font-size:14px;background:#fff3c4;border:1px dashed var(--gold);padding:10px 12px}
.muted{color:var(--ink-soft);font-size:14px}
table{width:100%;border-collapse:collapse;background:var(--surface)}
th,td{border:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
th{background:var(--surface-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chips button{border:1.5px solid var(--line);background:#fff;padding:7px 12px;cursor:pointer}
.chips button.active{background:var(--green);color:#fff}
.timeline{border-left:3px solid var(--gold);margin-left:8px;padding-left:16px}
.timeline div{margin:10px 0}
.page-head{padding:18px 22px;margin-bottom:18px}
.green-head{background:var(--green-deep);color:#fff}
.green-head h2{color:#fff;border-bottom-color:var(--gold-tint)}
.voice-question{font-family:"Caveat",cursive;font-size:clamp(26px,3.6vw,36px);color:var(--brick)}
.life-pill{display:inline-block;background:var(--surface);border:1.5px solid var(--gold);padding:5px 10px;font-weight:700;margin:3px}
.life-arrow{color:var(--brick);font-weight:700}
.how-grid,.step-grid,.glance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0}
.how-card,.step-card{border-left:4px solid var(--green)}
.notif-card{border-left:5px solid var(--brick)}
.notif-card.resolved{border-left-color:var(--green)}
.notif-card.progress{border-left-color:var(--gold)}
.glance-box{text-align:center}
.glance-box p{font-size:32px;font-weight:700;margin:6px 0;text-align:center}
.role-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:16px 0}
.role-card{border:1.5px dashed var(--line);background:var(--surface);padding:16px;box-shadow:var(--shadow)}
.reportcard-frame{border:4px double var(--green);padding:20px;background:var(--surface)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1140px;margin:0 auto;text-align:left}
footer{border-top:3px double var(--brick);padding:24px 16px;background:#ecdcb0}
@media(max-width:900px){
  html{scroll-padding-top:172px}
  .hero-grid{grid-template-columns:1fr}
  .hero-photo{max-width:320px;justify-self:center;transform:rotate(0.6deg)}
  .explore-grid,.loop-grid,.how-grid,.step-grid,.glance-grid{grid-template-columns:repeat(2,1fr)}
  .vision-cards,.win-lose,.role-cards,.footer-grid{grid-template-columns:1fr}
  .brand{font-size:30px}
  .album-frame{height:240px}
}
@media(max-width:700px){
  .explore-grid,.loop-grid,.how-grid,.step-grid,.glance-grid,.role-cards{grid-template-columns:1fr}
  .vpanel,.loop-card,.explore-card,.hero-photo,.commit{transform:none}
  .hero-photo{transform:rotate(0.6deg)}
}
@media(max-width:640px){
  .masthead-top{flex-direction:column;align-items:flex-start}
  nav a{font-size:14px;padding:6px 9px}
}
@media(max-width:520px){
  html{scroll-padding-top:292px}
  .brand{font-size:30px}
  .brand small{font-size:12.5px}
}