/* Al-Misbar al-Iraqi — public newspaper styles */

/* ---------- Fonts (SIL Open Font License, see /assets/fonts/LICENSE-*.txt) ---------- */
@font-face{font-family:"Misbar Headline";font-weight:700;font-display:swap;src:url(/assets/fonts/readex-pro-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Misbar Headline";font-weight:700;font-display:swap;src:url(/assets/fonts/readex-pro-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Misbar Text";font-weight:200;font-display:swap;src:url(/assets/fonts/vazirmatn-arabic-200-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Misbar Text";font-weight:200;font-display:swap;src:url(/assets/fonts/vazirmatn-latin-200-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Misbar Text";font-weight:500;font-display:swap;src:url(/assets/fonts/vazirmatn-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Misbar Text";font-weight:500;font-display:swap;src:url(/assets/fonts/vazirmatn-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Misbar Text";font-weight:700;font-display:swap;src:url(/assets/fonts/vazirmatn-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Misbar Text";font-weight:700;font-display:swap;src:url(/assets/fonts/vazirmatn-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens ---------- */
:root{
  --ink:#201c19;
  --red:#a32625;
  --rule:#53473c;
  --rule-soft:#53473c55;
  --muted:#6a5a4b;
  --desk:#d3ccbf;
  --headline:"Misbar Headline","Misbar Text",Tahoma,Arial,sans-serif;
  --text:"Misbar Text",Tahoma,Arial,sans-serif;
  --gutter:48px;
  color-scheme:light;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--desk);color:var(--ink);font-family:var(--text);font-weight:500;line-height:1.55;font-size:16px}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red)}
a:focus-visible{outline:2px solid var(--red);outline-offset:4px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure{margin:0}
.skip{position:absolute;top:-100px;right:12px;background:var(--ink);color:#fff;padding:10px 14px;z-index:10}
.skip:focus{top:12px}
main:focus{outline:none}

/* The paper sheet */
.sheet{
  position:relative;
  width:min(1260px,calc(100% - 64px));
  min-height:100vh;
  margin:28px auto;
  padding:0 var(--gutter);
  background:linear-gradient(#fff8e64d,#fff8e64d),url(/assets/paper.webp) center top/100% auto repeat-y,#ecdcbc;
  box-shadow:0 7px 34px #2d251d25;
  display:flex;flex-direction:column;
}
main{flex:1;padding:30px 0 56px}

/* ---------- Masthead ---------- */
.masthead{padding-top:40px}
.mast-top{
  display:grid;grid-template-columns:150px 1fr 150px;align-items:stretch;
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);
}
.stamp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;padding:14px 8px;line-height:1.35}
.stamp-date{border-left:1px solid var(--ink)}
.stamp-iraq{border-right:1px solid var(--ink)}
.stamp span{font-size:.8125rem;color:var(--muted)}
.stamp strong{font-size:1.05rem;font-weight:700}
.stamp .flag{width:26px;height:auto;margin-top:6px;box-shadow:0 0 0 1px #0002}
.brand{display:block;width:min(560px,90%);margin:14px auto}
.brand img{width:100%;mix-blend-mode:multiply;opacity:.94}
.edition-line{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  margin-top:3px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:9px 0;font-size:.8125rem;font-weight:700;
}
.edition-line nav{display:flex;gap:22px}
.edition-line nav a{position:relative;font-size:.9375rem}
.edition-line nav a[aria-current=page]{color:var(--red)}
.edition-line nav a[aria-current=page]::after{content:"";position:absolute;inset-inline:0;bottom:-11px;height:3px;background:var(--red)}
.edition-desc{font-size:.875rem;text-align:center}
.edition-desc .short{display:none}
.domain{justify-self:end;font-family:var(--text);letter-spacing:.02em}

/* ---------- Shared bits ---------- */
.square{display:inline-block;width:.62em;height:.62em;background:var(--red);margin-inline-end:.4em;vertical-align:.02em}
.meta{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:2px;font-size:.8125rem;color:var(--muted)}
.meta .kicker{color:var(--red);font-weight:700}
.section-title{
  font-family:var(--headline);font-size:1.25rem;font-weight:700;
  border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:8px 0 10px;margin-bottom:22px;
}
.all-link{display:inline-block;margin-top:24px;font-weight:700;color:var(--red);border-bottom:1px solid var(--red);padding-bottom:2px}
.empty{padding:60px 0;text-align:center;font-size:1.125rem;color:var(--muted)}
.page-heading{padding:6px 0 18px;margin-bottom:26px;border-bottom:1px solid var(--rule)}
.page-heading h1{font-family:var(--headline);font-size:2.4rem;line-height:1.5}
.page-heading p{color:var(--muted);font-size:.9375rem}

/* ---------- Front page lead ---------- */
.lead-title{
  font-family:var(--headline);font-weight:700;text-align:center;
  font-size:clamp(1.75rem,3.4vw,2.9rem);line-height:1.45;
  padding:4px 4% 22px;border-bottom:3px double var(--ink);margin-bottom:24px;
  text-wrap:balance;
}
.lead-grid{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:0}
.lead-grid.no-image{grid-template-columns:1fr 1fr}
.lead-grid.single{grid-template-columns:1fr 1.25fr}
.lead-grid.no-image.single{grid-template-columns:1fr;max-width:760px;margin:0 auto}
.lead-grid.no-image.single .lead-right{padding:0;font-size:1.0625rem}
.lead-col{font-size:1rem;line-height:1.75;text-align:justify;hyphens:auto}
.lead-col p+p{margin-top:14px}
.lead-right{padding-left:22px}
.lead-left{padding-right:22px}
.lead-center{padding:0 22px;border-inline:1px solid var(--rule-soft)}
.lead-grid.no-image .lead-left{border-right:1px solid var(--rule-soft)}
.lead-figure{border-block:1px solid var(--ink);padding:5px 0}
.lead-figure img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:sepia(.18) contrast(1.02)}
.lead-center .meta{justify-content:center;margin-top:12px;text-align:center}
.read-more{
  display:block;margin-top:30px;padding:13px 16px;text-align:center;
  background:var(--ink);color:#fff;font-weight:700;font-size:1rem;
}
.read-more:hover{background:var(--red);color:#fff}

/* ---------- Earlier articles / list cards ---------- */
.earlier{margin-top:52px}
.earlier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px}
.earlier-grid .card{display:flex;flex-direction:column;gap:10px}
.card-image img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:sepia(.18) contrast(1.02);border:1px solid var(--rule-soft)}
.card-title{font-family:var(--headline);font-weight:700;font-size:1.15rem;line-height:1.5;margin:6px 0 6px;text-wrap:balance}
.card-excerpt{font-size:.9375rem;line-height:1.7;color:#3a322c}
.list{display:flex;flex-direction:column}
.list .card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:30px;padding:26px 0;border-bottom:1px solid var(--rule-soft)}
.list .card:first-child{padding-top:0}
.list .card-title{font-size:1.6rem}
.list .card-excerpt{font-size:1rem}
.list .card:not(:has(.card-image)){grid-template-columns:1fr}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:30px;font-weight:700;font-size:.9375rem}
.pager span{color:var(--muted);font-weight:500}
.pager a{color:var(--red)}

/* ---------- Article page ---------- */
.story-head{max-width:860px;margin:4px auto 26px;text-align:center}
.story-head .meta{justify-content:center;margin-bottom:12px}
.story-head h1{font-family:var(--headline);font-weight:700;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.45;text-wrap:balance}
.story-figure{max-width:1050px;margin:0 auto 34px;padding:6px 0;border-block:1px solid var(--ink)}
.story-figure img{width:100%;max-height:560px;object-fit:cover;filter:sepia(.18) contrast(1.02)}
.story-body{max-width:760px;margin:0 auto;font-size:1.125rem;line-height:1.95}
.story-body p{margin-bottom:22px}
.story-body p:first-child{font-weight:700;font-size:1.2rem}
.story-body strong{font-weight:700}
.preview-banner{background:#fff3c4;border:1px solid #c9a227;padding:10px 14px;margin-bottom:24px;font:500 .9375rem/1.4 system-ui,sans-serif;text-align:left}
.preview-banner a{color:#7a1b1a;text-decoration:underline}

/* ---------- Footer ---------- */
.site-footer{display:flex;flex-wrap:wrap;align-items:center;gap:22px;border-top:1px solid var(--ink);padding:18px 0 24px;font-size:.8125rem}
.footer-name{font-weight:700;color:var(--red)}
.site-footer nav{display:flex;gap:18px}
.site-footer small{margin-inline-start:auto;color:var(--muted);font-size:.75rem}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  :root{--gutter:30px}
  .lead-grid{grid-template-columns:1fr 1fr}
  .lead-center{grid-column:1/-1;grid-row:1;border:0;padding:0 0 18px}
  .lead-right{padding-left:16px}
  .lead-left{padding-right:16px;border-right:1px solid var(--rule-soft)}
  .lead-grid.single{grid-template-columns:1fr}
  .lead-grid.single .lead-right{padding:0}
}
@media (max-width:650px){
  :root{--gutter:16px}
  body{font-size:15px}
  .sheet{width:calc(100% - 20px);margin:10px auto;min-height:calc(100vh - 20px)}
  .masthead{padding-top:16px}
  .mast-top{grid-template-columns:72px 1fr 64px;border-top-width:3px;border-bottom-width:3px}
  .stamp{padding:8px 4px}
  .stamp span{font-size:.6875rem}
  .stamp strong{font-size:.8125rem}
  .stamp .flag{width:20px}
  .brand{width:94%;margin:8px auto}
  .edition-line{grid-template-columns:auto 1fr;gap:10px;padding:7px 0}
  .edition-line nav{gap:14px}
  .edition-line nav a{font-size:.875rem}
  .edition-line nav a[aria-current=page]::after{bottom:-9px}
  .edition-desc{text-align:left;font-size:.75rem}
  .edition-desc .full{display:none}
  .edition-desc .short{display:inline}
  .domain{display:none}
  main{padding:20px 0 36px}
  .lead-title{padding:0 0 14px;margin-bottom:16px}
  .lead-grid,.lead-grid.no-image{grid-template-columns:1fr}
  .lead-center{padding:0 0 14px}
  .lead-right,.lead-left{padding:0;border:0}
  .lead-left{display:none}
  .lead-right p:not(:first-child){display:none}
  .lead-col{text-align:start}
  .read-more{margin-top:20px}
  .earlier{margin-top:38px}
  .earlier-grid{grid-template-columns:1fr;gap:0}
  .earlier-grid .card{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule-soft)}
  .earlier-grid .card:not(:has(.card-image)){grid-template-columns:1fr}
  .earlier-grid .card-excerpt{display:none}
  .earlier-grid .card-title{font-size:1rem;margin:2px 0 0}
  .list .card{grid-template-columns:1fr;gap:12px}
  .list .card-title{font-size:1.3rem}
  .page-heading h1{font-size:1.9rem}
  .story-body{font-size:1.0625rem;line-height:1.9}
  .story-body p:first-child{font-size:1.125rem}
  .site-footer small{margin-inline-start:0;width:100%}
}
@media print{
  body{background:#fff}
  .sheet{box-shadow:none;background:#fff;width:100%;margin:0}
  .read-more,.earlier,.skip,.edition-line nav,.site-footer nav{display:none}
}