/* emillionaire.design — editorial layer for case studies + all work (loaded after style.css, scoped to body.ed) */

body.ed{
  --ed-line:#e4e4e8;
  --ed-panel:#f4f4f2;
  --ed-sub:#4c4a66;
}
.ed-wrap{ max-width:820px; margin:0 auto; padding:0 24px; }

/* top nav */
.ed-nav{ position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--ed-line); }
.ed-nav .ed-bar{ max-width:1040px; margin:0 auto; padding:22px 24px; display:flex; justify-content:space-between; align-items:center; }
.ed-nav .wordmark{ font-size:22px; }
.ed-nav nav{ display:flex; gap:6px; }
.ed-nav nav a{ padding:7px 14px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.ed-nav nav a:hover{ background:var(--z-mat); }
.ed-nav nav a[aria-current="page"]{ background:var(--z-lime); }

/* case study header: the one panel on the page; holds the title block and the PNG project image */
.ed-head{
  margin:0 calc(50% - 50vw); padding:48px calc(50vw - 50%) 56px;
  background:var(--ed-panel);
}
.ed .ed-head .cs-hero{ margin:0; padding:0; background:none; border:0; border-radius:0; }
.ed .cs-hero h1{ font-weight:800; font-size:clamp(36px,5vw,52px); line-height:1; margin:0 0 12px; }
.ed .cs-hero > p{ font-size:18px; line-height:1.55; color:var(--ed-sub); max-width:52ch; }
.ed .cs-meta{ display:flex; flex-wrap:wrap; gap:12px 40px; margin-top:28px; padding-top:18px; border-top:1px solid #dcdce2; }
.ed .cs-meta dd{ max-width:30ch; }
.ed-hero{ margin-top:40px; }
.ed-hero img{ width:100%; }
.ed-hero img.framed{ border-radius:12px; box-shadow:0 10px 30px rgba(19,26,61,.10), 0 2px 6px rgba(19,26,61,.06); }

/* sections: space instead of rules */
.ed .cs-section{ padding:64px 0 0; }
.ed .cs-section + .cs-section{ border-top:0; }
.ed .cs-section h2{ font-size:clamp(24px,3vw,32px); line-height:1.08; }
.ed .cs-section h3{ font-size:20px; }

/* issues / recommendations: thin rules, recommendation indented beside an ink rule */
.ed .cs-issue + .cs-issue{ border-top:1px solid var(--ed-line); }
.ed .cs-rec{ padding-left:20px; border-left:2px solid var(--z-ink); }

/* images sit straight on the page: no boxes, no panels */
.ed .cs-thumb{ border:0; border-radius:12px; padding:0; background:none; }
.ed .cs-thumb img{ border-radius:12px; box-shadow:0 10px 30px rgba(19,26,61,.10), 0 2px 6px rgba(19,26,61,.06); }
/* rows of three phone screens; a narrow frame for small GIFs so they aren't upscaled */
.ed .cs-img.three{ grid-template-columns:repeat(3,1fr); align-items:start; max-width:720px; margin-left:auto; margin-right:auto; }
.ed .cs-img.xs{ max-width:320px; margin-left:auto; margin-right:auto; }
/* narrow image beside a wide one (the reverse of .cs-img.split) */
.ed .cs-img.split-rev{ grid-template-columns:1fr 2fr; align-items:center; }
/* pairs of phone screens stay phone-sized */
.ed .cs-img.two.mid{ max-width:560px; }
.ed .cs-fig{ border:0; border-radius:0; background:none; overflow:visible; }
.ed .cs-fig .cs-fig-img{ padding:0; }
.ed .cs-fig figcaption{ background:none; border:0; padding:10px 0 0; text-align:center; }

/* filter tabs: text switcher above a scrolling frame */
.ed .cs-tabs{ display:block; border:0; border-radius:0; background:none; overflow:visible; }
.ed .cs-tablist{ flex-direction:row; flex-wrap:wrap; gap:6px 8px; padding:0; margin-bottom:14px; background:none; border:0; }
.ed .cs-tablist label{ border:0; padding:6px 14px; font-size:13px; background:none; }
.ed .cs-tablist label:hover{ background:var(--z-mat); }
.ed .cs-panels{ border:1px solid var(--ed-line); border-radius:12px; }

/* text blocks: outlined, not filled */
.ed .cs-note{ background:none; border:1px solid var(--ed-line); }
.ed .cs-quote{ background:none; border:0; border-left:4px solid var(--z-lime); border-radius:0; padding:4px 0 4px 24px; }

/* reference cards: flat, untilted */
.ed .cs-refs .card{ border:0; border-radius:0; background:none; transform:none; }
.ed .cs-refs .thumb{ border:0; border-radius:12px; padding:0; background:none; }
.ed .cs-refs .thumb img{ border-radius:8px; box-shadow:0 6px 18px rgba(19,26,61,.08); }
.ed .cs-refs .body{ background:none; border-radius:0; padding:16px 0 0; }
.ed .cs-refs + *{ margin-top:0; }
.ed .cs-refs{ gap:40px; }

.ed .cs-links a{ border-width:1px; }
.ed .cs-soon{ border:1px dashed #c9c9d3; margin-top:40px; }

/* prev / next */
.ed-next{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:80px 0 0; padding:24px 0 72px; border-top:1px solid var(--ed-line); }
.ed-next a{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:20px; }
.ed-next a:last-child{ text-align:right; }
.ed-next span{ display:block; margin-bottom:6px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--ed-sub); }
.ed-next a:hover{ color:var(--z-bg); }

/* all work list */
.ed-list-head{ padding:56px 0 32px; }
.ed-list-head h1{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(36px,5vw,52px); line-height:1; margin:0 0 12px; }
.ed-list-head p{ font-size:16px; color:var(--ed-sub); margin:0; }
.ed-list{ list-style:none; margin:0 0 96px; padding:0; border-top:1px solid var(--ed-line); }
.ed-list a{ display:grid; grid-template-columns:minmax(180px,1fr) 2fr auto; gap:4px 24px; align-items:baseline; padding:16px 8px; border-bottom:1px solid var(--ed-line); }
.ed-list b{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:17px; }
.ed-list .d{ font-size:14.5px; color:var(--ed-sub); }
.ed-list .y{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ed-sub); }
.ed-list a:hover{ background:var(--z-mat); }

/* footer */
.ed-foot{ border-top:1px solid var(--ed-line); }
.ed-foot a:hover{ color:var(--z-ink); text-decoration:underline; text-underline-offset:3px; }
.ed-foot .ed-bar{ max-width:1040px; margin:0 auto; padding:24px 24px 48px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ed-sub); }

@media (max-width:680px){
  .ed .cs-img.split-rev{ grid-template-columns:1fr; }
  .ed .cs-img.three{ grid-template-columns:1fr; max-width:300px; }
  .ed-wrap{ padding:0 16px; }
  .ed-nav .ed-bar{ padding:16px; }
  .ed-head{ padding-top:32px; padding-bottom:36px; }
  .ed-hero{ margin-top:28px; }
  .ed .cs-section{ padding-top:48px; }
  .ed-list a{ grid-template-columns:1fr auto; }
  .ed-list .d{ grid-column:1 / -1; grid-row:2; }
  .ed-next a{ font-size:17px; }
  .ed-foot .ed-bar{ padding:20px 16px 40px; }
}