/* Dunya Mediations ------------------------------------------------------- */
:root{
  --ink:#16130F; --brass:#AE8446; --brass-soft:#C9A66B; --paper:#F6F2E9;
  --paper-2:#FFFCF6; --grey:#6B6559; --hair:#E4DDCD;
  --bg:var(--paper); --fg:var(--ink); --muted:var(--grey); --rule:var(--hair); --card:var(--paper-2);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#13100D;--fg:#F6F2E9;--muted:#9C9489;--rule:#2C2721;--card:#1A1612}
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(88px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:Poppins,"Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:300;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 28px}
.narrow{max-width:760px}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0}
.mark{display:block;height:28px;width:auto;color:var(--fg)}
nav{display:flex;align-items:center;gap:24px;font-size:14.5px;color:var(--muted)}
nav a{text-decoration:none}
nav a:hover,nav a[aria-current]{color:var(--fg)}
@media (max-width:720px){nav a.hide-s{display:none}.mark{height:23px}}

/* buttons */
.btn{display:inline-block;text-decoration:none;font-size:15px;font-weight:400;letter-spacing:.2px;
  padding:14px 26px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);transition:.15s}
.btn:hover{background:var(--brass);border-color:var(--brass);color:#fff}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--brass);color:var(--brass);background:transparent}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* type */
h1{font-size:clamp(34px,6vw,58px);font-weight:300;line-height:1.1;letter-spacing:-.8px;margin:0 0 22px}
h2{font-size:clamp(26px,3.6vw,38px);font-weight:300;line-height:1.2;letter-spacing:-.4px;margin:0 0 20px}
h3{font-size:19px;font-weight:500;margin:0 0 8px}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--brass);margin:0 0 18px}
p{margin:0 0 18px;max-width:64ch}
.lead{font-size:clamp(18px,2.2vw,22px);line-height:1.6}
.muted{color:var(--muted)}
.small{font-size:14.5px}

section{padding:84px 0;border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:0}
.tint{background:var(--card)}

/* hero */
.hero{display:grid;gap:52px;grid-template-columns:1.25fr .9fr;align-items:center;padding:84px 0 88px}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:38px}}
.portrait{position:relative;background:var(--card);border:1px solid var(--rule)}
.portrait img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.portrait::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:var(--brass)}
.portrait .ph{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;text-align:center;padding:24px}

/* grids */
.grid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--card);border:1px solid var(--rule);padding:28px 26px}
.card .n{font-size:12px;letter-spacing:1.4px;color:var(--brass);margin-bottom:12px}

/* lists */
ul.plain{margin:0;padding:0;list-style:none}
ul.plain li{padding:13px 0;border-top:1px solid var(--rule)}
ul.plain li:first-child{border-top:0}
ol.steps{list-style:none;counter-reset:s;margin:0;padding:0}
ol.steps li{counter-increment:s;padding:26px 0 26px 64px;position:relative;border-top:1px solid var(--rule)}
ol.steps li:first-child{border-top:0}
ol.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:28px;
  font-size:13px;letter-spacing:1px;color:var(--brass)}

/* quote */
.quotes{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
blockquote{margin:0;background:var(--card);border:1px solid var(--rule);padding:28px 26px;font-size:16.5px}
blockquote p{margin:0 0 14px}
blockquote cite{font-style:normal;font-size:13.5px;color:var(--muted)}

/* band */
.band{background:var(--ink);color:var(--paper);padding:76px 0;border:0}
.band h2,.band p{color:var(--paper)}
.band .btn{background:var(--brass);border-color:var(--brass);color:#fff}
.band .btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* details */
details{border-top:1px solid var(--rule);padding:18px 0}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;font-size:17.5px;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--brass);font-size:20px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:14px 0 4px;color:var(--muted)}

/* strip of photos */
.strip{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
@media (max-width:720px){.strip{grid-template-columns:1fr 1fr}.strip .s3{display:none}}
.strip figure{margin:0;background:var(--card);border:1px solid var(--rule)}
.strip img{aspect-ratio:3/2;object-fit:cover;width:100%}
.strip .ph{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12.5px;padding:16px;text-align:center}

/* footer */
footer{padding:0 0 60px;font-size:13px;line-height:1.85;color:var(--muted)}
footer .brassbar{height:6px;background:var(--brass);margin-bottom:38px}
footer a{text-decoration:none}
footer a:hover{color:var(--fg)}
.fr{font-style:italic}

/* original artwork in place of photographs */
.strip.art figure{border:1px solid var(--rule);background:var(--card)}
.strip.art svg{display:block;width:100%;height:auto}
.strip figcaption{font-size:12.5px;color:var(--muted);padding:12px 14px;border-top:1px solid var(--rule)}
.eyebrow{display:block}

/* portrait treatments */
.portrait.cut{background:none;border:0}
.portrait.cut::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:7px;background:var(--brass)}
.portrait.cut img{aspect-ratio:4/5;object-fit:contain;object-position:bottom}
.portrait img{width:100%;height:auto;display:block}
.strip figcaption{font-size:13px}

/* two column quotes */
.quotes{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.quotes blockquote{border-left:4px solid var(--brass)}