/* ============================================================
   jamalcassim.com — shared styles
   Swiss / International Typographic. Archivo + Space Mono + EB Garamond.
   Near-black #0a0a0a · dirty off-white #eceae4 · white #fff. No other colour.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}

/* ---- shared tokens ---- */
:root{
  --ink:#0a0a0a;
  --paper:#eceae4;
  --paper-light:#f0ede6;
  --dim:rgba(10,10,10,0.5);
  --hair:rgba(10,10,10,0.18);
}

/* ---- shared grain (used on every page) ---- */
.grain{position:fixed;inset:-50%;z-index:50;pointer-events:none;opacity:0.10;
  background-image:url("/assets/grain.png");background-repeat:repeat;
  animation:gs 0.4s steps(3) infinite;}
@keyframes gs{0%{transform:translate(0,0);}25%{transform:translate(-4%,3%);}
  50%{transform:translate(3%,-2%);}75%{transform:translate(-2%,4%);}100%{transform:translate(3%,-3%);}}

/* ---- shared construction grid ---- */
.grid-lines{position:fixed;inset:0;pointer-events:none;z-index:1;}
.grid-lines .v{position:absolute;top:0;bottom:0;width:1px;background:rgba(10,10,10,0.06);}

/* ============================================================
   MASTER PAGE (index.html) — dark
   ============================================================ */
.master{background:var(--ink);color:var(--paper);font-family:'Archivo',sans-serif;overflow:hidden;height:100vh;width:100vw;}
.master .grain{opacity:0.12;mix-blend-mode:normal;}
.master .grid-lines .v{background:rgba(236,234,228,0.10);}
.master .grid-lines .h{position:absolute;left:0;right:0;height:1px;background:rgba(236,234,228,0.10);}
.wrap{position:relative;width:100vw;height:100vh;overflow:hidden;}
.bg{position:absolute;inset:0;z-index:0;background:#101010;}
.bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 55% 42%, #1a1a1a 0%, #0c0c0c 70%);}
.bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.06);}
.bg.has-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0.45) 0%,rgba(10,10,10,0.05) 30%,rgba(10,10,10,0.1) 65%,rgba(10,10,10,0.7) 100%);}
.content{position:relative;z-index:2;width:100%;height:100%;padding:32px 40px;display:flex;flex-direction:column;justify-content:space-between;}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;}
.meta{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.05em;line-height:1.6;text-transform:uppercase;}
.master .meta .dim{color:rgba(236,234,228,0.5);}
.dim-link,.dim-link:link,.dim-link:visited,.dim-link:active{font-family:'Space Mono',monospace;color:rgba(236,234,228,0.5)!important;text-decoration:none!important;letter-spacing:0.05em;text-transform:uppercase;transition:color 0.25s ease;}
.dim-link:hover{color:#fff!important;}
.center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;text-align:center;width:100%;}
.name{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(44px,7vw,112px);line-height:0.86;letter-spacing:-0.045em;text-transform:uppercase;color:#fff;display:inline-block;}
.brands{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid rgba(236,234,228,0.35);padding-top:16px;}
.brand{display:flex;flex-direction:column;gap:4px;text-decoration:none;transition:opacity 0.3s ease;}
.brands:hover .brand{opacity:0.35;}
.brands:hover .brand:hover{opacity:1;}
.brand-idx{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:0.08em;color:rgba(236,234,228,0.45);}
.brand-name{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(15px,2vw,28px);letter-spacing:-0.02em;text-transform:uppercase;line-height:0.95;color:#fff;transition:text-shadow 0.3s ease;}
.brand:hover .brand-name{text-shadow:0 0 24px rgba(255,255,255,0.45);}
.brand-sub{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(236,234,228,0.5);margin-top:3px;}
@media(max-width:640px){
  .master .content{padding:20px 18px;}
  .brands{flex-wrap:wrap;gap:16px;}
  .brand{flex:0 0 42%;}
  .name{font-size:clamp(38px,12vw,72px);}
}

/* ============================================================
   DREAMS INDEX (dreams/index.html) — light
   ============================================================ */
.idx{background:var(--paper);color:var(--ink);font-family:'Archivo',sans-serif;min-height:100vh;position:relative;}
.idx .grid-lines .v{background:rgba(10,10,10,0.06);}
.page{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:32px 40px 80px;}
.doc-topbar{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1.5px solid var(--ink);padding-bottom:14px;}
.doc-topbar .meta .dim{color:var(--dim);}
.back{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color 0.2s;}
.back:hover{color:var(--ink);}
.masthead{margin:54px 0 12px;}
.masthead h1{font-weight:900;font-size:clamp(56px,11vw,150px);line-height:0.84;letter-spacing:-0.045em;text-transform:uppercase;}
.masthead .desc{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--dim);margin-top:18px;}
.colhead{display:grid;grid-template-columns:54px 88px 1fr 150px 90px;gap:20px;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(10,10,10,0.4);border-bottom:1px solid rgba(10,10,10,0.25);padding:48px 0 8px;}
/* ---- ARTICLE LIST: Claude Code inserts new <a.entry> blocks at the top of .list ---- */
.entry{display:grid;grid-template-columns:54px 88px 1fr 150px 90px;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink);transition:padding-left 0.25s ease,opacity 0.2s ease;}
.list:hover .entry{opacity:0.4;}
.list:hover .entry:hover{opacity:1;padding-left:10px;}
.e-num{font-family:'Space Mono',monospace;font-size:11px;color:rgba(10,10,10,0.4);}
.thumb{width:88px;aspect-ratio:1/1;background:#d8d5cc;overflow:hidden;position:relative;}
.thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.05);display:block;}
.thumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-size:7px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(10,10,10,0.35);}
.e-title{font-weight:700;font-size:clamp(19px,2.4vw,30px);letter-spacing:-0.02em;line-height:1.05;align-self:center;}
.e-title .sub{display:block;font-weight:400;font-size:13px;color:rgba(10,10,10,0.55);letter-spacing:0;margin-top:5px;font-family:'EB Garamond',serif;font-style:italic;}
.e-tag{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(10,10,10,0.55);}
.e-date{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.04em;color:rgba(10,10,10,0.55);text-align:right;}
@media(max-width:680px){
  .page{padding:22px 18px 60px;}
  .colhead{display:none;}
  .entry{grid-template-columns:34px 56px 1fr;gap:12px;}
  .thumb{width:56px;}
  .e-tag,.e-date{display:none;}
}

/* ============================================================
   DREAMS ARTICLE (dreams/*.html) — light, serif reading
   ============================================================ */
.art{background:var(--paper);color:var(--ink);font-family:'EB Garamond',Georgia,serif;min-height:100vh;position:relative;}
.art .grid-lines .v{background:rgba(10,10,10,0.05);}
.idx .grain{opacity:0.05;}
.art .grain{opacity:0.04;}
.col{position:relative;z-index:2;max-width:720px;margin:0 auto;padding:32px 40px 96px;}
.art .doc-topbar{font-family:'Archivo',sans-serif;}
.arthead{margin:64px 0 0;}
.arthead .kicker{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);margin-bottom:22px;}
.arthead h1{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(34px,5.5vw,60px);line-height:0.98;letter-spacing:-0.03em;}
.arthead .standfirst{font-style:italic;font-size:clamp(18px,2.4vw,23px);line-height:1.4;color:rgba(10,10,10,0.7);margin-top:22px;max-width:600px;}
.byline{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--dim);margin-top:28px;display:flex;gap:24px;border-top:1px solid rgba(10,10,10,0.2);border-bottom:1px solid rgba(10,10,10,0.2);padding:12px 0;}
.feature{width:100%;aspect-ratio:16/9;background:#d8d5cc;overflow:hidden;position:relative;margin:36px 0 8px;}
.feature img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.05);display:block;}
.feature .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:rgba(10,10,10,0.35);}
.feature .cap{position:absolute;bottom:8px;left:10px;font-family:'Space Mono',monospace;font-size:8px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.85);}
.body{margin-top:40px;font-size:clamp(18px,2.2vw,21px);line-height:1.62;}
.body p{margin-bottom:1.35em;}
.body p.lead::first-letter{font-family:'Archivo',sans-serif;font-weight:800;float:left;font-size:4.1em;line-height:0.78;padding:6px 12px 0 0;letter-spacing:-0.03em;}
.body h2{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(20px,2.6vw,27px);letter-spacing:-0.02em;margin:1.8em 0 0.6em;line-height:1.1;}
.body blockquote{margin:1.6em 0;padding-left:24px;border-left:2px solid var(--ink);font-style:italic;font-size:1.15em;line-height:1.4;color:rgba(10,10,10,0.8);}
.body em{font-style:italic;}
.body strong{font-weight:600;}
.endmark{display:inline-block;width:11px;height:11px;background:var(--ink);margin-top:8px;}
.artfoot{margin-top:64px;border-top:1.5px solid var(--ink);padding-top:18px;display:flex;justify-content:space-between;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.06em;text-transform:uppercase;}
.artfoot a{color:var(--ink);text-decoration:none;transition:opacity 0.2s;}
.artfoot a:hover{opacity:0.5;}
@media(max-width:680px){.col{padding:22px 20px 70px;}}