/* Foldman CD page (foldman-cd): the playable D-84 beside the hero, then the zine's pages about discs. */

/* ---------- hero + player ---------- */
.dmdeck{max-width:var(--wrap);margin:0 auto;padding:8px 24px 50px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,720px);gap:30px 44px;align-items:start}
.dm-hero{min-width:0;padding-top:10px}
.dm-big{font-size:clamp(5rem,11.5vw,10.5rem);line-height:.86;margin:4px 0 0 -4px}
.dm-hero .tagline{font-size:clamp(1.6rem,2.8vw,2.3rem);max-width:20ch}
.dm-hero .lede{max-width:50ch}
.dm-hero .facts{margin:22px 0 6px}
.dm-hero .ctas{margin-top:14px}
.dm-fine{font-size:.9rem;color:var(--ink2);max-width:52ch;margin-top:18px}
.dm-stage{position:relative;background:var(--sheet);border:2px solid #000;padding:34px 30px 26px;transform:rotate(.6deg);box-shadow:6px 7px 0 rgba(0,0,0,.18);margin-top:24px}
.dm-tape{top:-14px;left:44%}

/* ---------- tape or disc ---------- */
.dm-vs-leaf .lede{max-width:56ch}
.dm-vs-wrap{overflow-x:auto;margin-top:22px}
.dm-vs{width:100%;border-collapse:collapse;font-size:1rem;min-width:520px}
.dm-vs th,.dm-vs td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1.5px dashed rgba(0,0,0,.4)}
.dm-vs thead th{font:400 1.5rem/1 var(--cut);border-bottom:3px solid #000;padding-bottom:10px}
.dm-vs thead th:nth-child(2){color:var(--pink)}
.dm-vs thead th:nth-child(3){color:var(--riso)}
.dm-vs tbody th{font-weight:700;width:28%}
.dm-vs td.both{text-align:center;font-family:var(--marker);font-size:1.08rem;background:rgba(242,239,46,.55)}

/* ---------- the CD bag ---------- */
.dm-bag{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:30px 50px;align-items:center}
.dm-bag-copy .lede{max-width:46ch}
.dm-ticks{list-style:none;margin:18px 0;padding:0;display:grid;gap:12px;max-width:52ch}
.dm-ticks li{position:relative;padding-left:32px}
.dm-ticks li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;border:2.5px solid #000;
  background:radial-gradient(circle,#000 0 2px,var(--yellow) 2.5px 5px,#fff 5.5px)}
.dm-rule{max-width:52ch;transform:rotate(-.8deg);margin-top:20px}
.dm-bag-pic{margin:0}
.dm-bag-pic svg{width:100%;height:auto;display:block;overflow:visible}

/* shared ink drawing style */
.dm-ink{fill:none;stroke:#000;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dm-ink .fleece{fill:#E9E2F2}
.dm-ink .stitch{stroke-dasharray:3 5;stroke-width:1.6}
.dm-ink .cd{fill:#F2EF2E}
.dm-ink .pinkp{fill:var(--pink)}
.dm-ink .hub{fill:#DADFE5}
.dm-ink .knob,.dm-ink .orange{fill:#FF5A00}
.dm-ink .body,.dm-ink .silver{fill:#CDCFD3}
.dm-ink .lidopen{fill:rgba(40,48,60,.25)}
.dm-ink .well{fill:#2A2C30}
.dm-ink .sled{stroke:var(--pink);stroke-width:3.4}
.dm-ink .lines{stroke-width:2;stroke:var(--ink2)}
.dm-ink .cue{stroke:var(--pink);stroke-width:3}
.dm-ink .arrow-p{stroke:var(--pink);stroke-width:3}
.dm-ink .board{fill:#2F6B4F}
.dm-ink .board ~ circle:not(.cd):not(.hub):not(.orange){fill:#F2F3F1}
.dm-ink .lcd{fill:#B2BDA9}
.dm-ink .white{fill:#EDEDEA}
.dm-ink .screen{fill:#070708}
.dm-ink .cdline{stroke:#F2F3F1;stroke-width:2;fill:none}
.dm-ink .kblue{fill:#2C5BFF}
.dm-ink .kgreen{fill:#2FBF71}
.dm-ink .grid rect{fill:#F8F8F5}
.dm-ink .handle{stroke-width:5}
.dm-ink .dark{fill:#2A2B2E}
.dm-ink .spk{stroke:#9A9EA6}
.dm-ink .jog{fill:#3A3C41}
svg .dm-lbl{font:400 17px var(--marker);fill:#000}
svg .dm-num{font:700 11px var(--type);fill:#000;text-anchor:middle}
svg .dm-num.lite{fill:#fff;font-size:9px}

/* ---------- five bodies ---------- */
.dm-bodies-head{max-width:760px;margin:0 0 26px}
.dm-bodies{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:30px 26px}
.dm-card{background:var(--sheet);border:2px solid #000;padding:20px 20px 18px;box-shadow:5px 6px 0 #000}
.dm-card:nth-child(odd){transform:rotate(-.8deg)}
.dm-card:nth-child(even){transform:rotate(.7deg)}
.dm-card svg{width:100%;height:auto;display:block;margin-bottom:12px}
.dm-card h3{font:400 1.9rem/1 var(--cut);margin:0 0 8px}
.dm-card p{margin:0 0 10px;font-size:.97rem}
.dm-code{display:inline-block;font:700 .8rem/1 var(--type);letter-spacing:.12em;border:2px solid #000;padding:4px 7px 3px;margin:0 0 8px!important;background:var(--yellow)}
.dm-sw{font-size:.85rem!important;color:var(--ink2);display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:12px 0 0!important}
.dm-sw span{white-space:nowrap;display:inline-flex;align-items:center;gap:5px;margin-right:6px}
.dm-sw i{width:14px;height:14px;border-radius:50%;border:1.5px solid #000;display:inline-block}

/* ---------- one library ---------- */
.dm-shared .lede{max-width:58ch}
.dm-shared .path{white-space:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.dm-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px;margin:22px 0}
.dm-two h3{font:400 1.25rem/1.2 var(--marker);margin:0 0 8px}
.dm-two ul{margin:0;padding-left:1.1em}
.dm-covers{max-width:none;margin-top:26px;transform:rotate(.8deg)}

/* ---------- hidden tracks ---------- */
.dm-liner{max-width:760px;margin:0 auto}
.dm-hidden{margin:0;padding-left:1.2em;display:grid;gap:8px}
.dm-hidden li::marker{content:"✶  "}

/* ---------- own discs, origin ---------- */
.dm-own{max-width:720px;margin:0 auto;transform:rotate(-1deg)}
.dm-own h2{font-size:1.9rem;margin:0 0 6px}
.dm-origin p{max-width:60ch}

/* ---------- sign-off ---------- */
.dm-endgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:46px;align-items:start}
.dm-priv{max-width:none;transform:rotate(-1.5deg)}
.dm-priv ul{margin:6px 0 12px;padding-left:1.1em}
.dm-priv li{margin:0 0 .4em}
.dm-priv li::marker{content:"✶  "}
.end-card .jfront h2{font-size:2.4rem}
.end-links{margin:6px 0 0;padding:0;list-style:none}
.end-links li{padding:8px 0;border-bottom:1.5px dotted #000}
.end-links a{font-weight:700;text-underline-offset:3px}
.end-links a:hover{background:var(--yellow)}

@media (max-width:1180px){
  .dmdeck{grid-template-columns:minmax(0,1fr)}
  .dm-stage{max-width:760px}
}
@media (max-width:1020px){
  .dm-bag,.dm-endgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .dmdeck{padding:6px 16px 40px}
  .dm-stage{padding:30px 16px 22px;transform:none}
  .dm-two{grid-template-columns:minmax(0,1fr)}
  .dm-vs{min-width:0;font-size:.92rem}
  .dm-vs th,.dm-vs td{padding:10px 8px}
}