/* styles.css — server-rendered Gulf Digest pages (News Majlis design system) */
:root{
  --paper:#f3ecdd; --ink:#1c1a17; --ink-2:#4a463f; --ink-3:#7a766d;
  --line:#d6cbb5; --line-soft:#e6dec9;
  --teal:#1f4e46; --oxblood:#8c2f25; --gold:#b88a3a; --gold-dark:#8a6520;
  --cream:#fbf6ea; --card:#fffdf4;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Newsreader',Georgia,serif;color:var(--ink);
  background:radial-gradient(60% 50% at 80% 0%, #ead7a8 0%, transparent 70%),
             radial-gradient(50% 40% at 10% 100%, #c8b78a 0%, transparent 70%),
             var(--paper);
  background-attachment:fixed;
  min-height:100vh;font-size:16px;line-height:1.55;
}
.wrap{max-width:1100px;margin:0 auto;padding:34px 28px 60px}

a{color:var(--ink);text-decoration:none;transition:color .15s}
a:hover{color:var(--oxblood)}
.mono{font-family:'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.mono:hover{color:var(--oxblood)}

/* Masthead */
.mast{text-align:center;padding-bottom:22px;border-bottom:3px double var(--line);margin-bottom:30px;position:relative}
.mast::after{content:"۞";font-family:'Amiri',serif;color:var(--gold);font-size:17px;position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);background:var(--paper);padding:0 12px}
.mast-top{display:flex;justify-content:space-between;align-items:baseline;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:18px}
.mast-top a{color:var(--ink-2)}
.mast-top a:hover{color:var(--oxblood)}
.title{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(40px,7vw,68px);letter-spacing:-.025em;line-height:1.02}
.title a{color:var(--ink)}
.title a:hover{color:var(--ink)}
.title .gulf{color:var(--oxblood);font-style:italic;font-weight:500}
.tagline{font-style:italic;font-size:16.5px;color:var(--ink-2);max-width:62ch;margin:12px auto 0;line-height:1.5}

/* Section micro-labels */
.kicker{display:block;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--gold-dark);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}

/* The Digest */
.digest{margin-bottom:44px}
.intro{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:20px;line-height:1.45;color:var(--ink);max-width:72ch;margin-bottom:22px}
.intro::first-letter{font-weight:900;font-style:normal;color:var(--oxblood)}
.blurb{font-style:italic;font-size:15px;color:var(--ink-2);line-height:1.5;margin-bottom:10px}
.digest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.dsec{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:6px;padding:18px 20px}
.dsec h3{font-family:'Fraunces',serif;font-weight:800;font-size:21px;letter-spacing:-.015em;line-height:1.18;margin-bottom:8px}
.dsec ul{list-style:none}
.dsec li{padding:9px 0;border-top:1px solid var(--line-soft)}
.dsec li:first-child{border-top:none}
.dsec li a{display:block;font-size:15.5px;font-weight:500;line-height:1.35}
.dsec .src{display:block;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}

/* On the Wire */
.wire h2{color:var(--ink)}
.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px 30px}
.feed{break-inside:avoid}
.feed-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:2px solid var(--ink);padding-bottom:6px;margin-bottom:8px}
.feed-head h4{font-family:'Fraunces',serif;font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1.2}
.ctry{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--teal);white-space:nowrap}
.feed ol{list-style:none;counter-reset:wire}
.feed ol li{counter-increment:wire;position:relative;padding:7px 0 7px 26px;border-bottom:1px solid var(--line-soft);font-size:14.5px;line-height:1.4}
.feed ol li::before{content:counter(wire,decimal-leading-zero);position:absolute;left:0;top:9px;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;color:var(--gold-dark)}
.feed ol li:last-child{border-bottom:none}
.feed .src{display:block;color:var(--ink-2);margin-top:3px}

/* Footer */
.foot{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:52px;padding-top:14px;border-top:3px double var(--line);font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.foot a{color:var(--ink-2)}
.foot a:hover{color:var(--oxblood)}

/* Buttons (admin + shared) — pill, Space Mono uppercase */
button{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;background:var(--card);color:var(--ink);border:1px solid var(--line);padding:7px 14px;border-radius:99px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
button:hover{border-color:var(--ink-3)}
button.primary{background:var(--oxblood);border-color:var(--oxblood);color:#fff;padding:10px 20px}
button.primary:hover{background:#722319;border-color:#722319}
button.del{color:var(--oxblood);border-color:var(--line)}
button.del:hover{background:var(--oxblood);border-color:var(--oxblood);color:#fff}

/* Admin (legacy server-rendered page) */
.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.msg{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--teal)}
table.admin{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:36px}
table.admin th{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-2);text-align:left;padding:10px 12px;border-bottom:2px solid var(--ink);background:var(--cream)}
table.admin td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-size:14.5px}
table.admin tr:last-child td{border-bottom:none}
table.admin tr.off td{opacity:.45}
table.admin td small{display:block;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.08em;color:var(--ink-3);margin-top:2px}
table.admin td .e{color:var(--oxblood)}
table.admin .nm{font-family:'Fraunces',serif;font-weight:700;font-size:15px}
table.admin .url input{width:100%;min-width:220px;font-family:'Space Mono',monospace;font-size:12px;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:7px 10px;outline:none}
table.admin .url input:focus{border-color:var(--oxblood)}
table.admin .act{white-space:nowrap}
table.admin .act button{margin-right:5px;padding:6px 11px;font-size:10px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--line)}
.dot.ok{background:var(--teal)}
.dot.err{background:var(--oxblood)}
.dot.none{background:var(--line)}
.addh{font-family:'Fraunces',serif;font-weight:800;font-size:22px;letter-spacing:-.015em;margin-bottom:12px}
.addform{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:16px}
.addform input{font-family:'Newsreader',serif;font-size:15px;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:9px 12px;outline:none;flex:1;min-width:140px}
.addform input.wide{flex:2 1 280px;font-family:'Space Mono',monospace;font-size:12.5px}
.addform input:focus{border-color:var(--oxblood)}
.addform input::placeholder{color:var(--ink-3);font-style:italic}

/* Mobile */
@media (max-width:720px){
  .wrap{padding:24px 16px 44px}
  .mast-top{font-size:9px;gap:8px}
  .title{font-size:clamp(34px,11vw,46px)}
  .tagline{font-size:15px}
  .digest-grid,.cols{grid-template-columns:1fr}
  .intro{font-size:18px}
  .foot{flex-direction:column;gap:6px;text-align:center;align-items:center}
  table.admin,table.admin thead,table.admin tbody,table.admin tr,table.admin td{display:block}
  table.admin thead{display:none}
  table.admin td{border-bottom:none;padding:5px 12px}
  table.admin tr{border-bottom:1px solid var(--line);padding:8px 0}
  .bar,.addform{gap:8px}
}