/* Foldman user guide: a photocopied instruction booklet. Builds on zine.css. */

.g-hero{padding-bottom:20px}
.g-hero .leaf{padding-bottom:44px}
.g-hero h1{font-family:var(--cut);font-weight:400;font-size:clamp(2.8rem,7vw,5.4rem);line-height:.92;margin:0 0 14px}
.g-hero .lede{max-width:62ch}
.g-meta{font-family:var(--stamp);font-size:.95rem;color:var(--ink2);margin:14px 0 0}

/* Contents: a cassette index card */
.g-toc{columns:2 260px;column-gap:40px;margin:22px 0 0;padding:18px 22px;list-style:none;
  background:#fff;border:2px solid #000;box-shadow:5px 5px 0 var(--yellow);counter-reset:toc}
.g-toc li{break-inside:avoid;counter-increment:toc;padding:3px 0;border-bottom:1px dotted #9aa09e}
.g-toc li::before{content:counter(toc,decimal-leading-zero) "  ";font-family:var(--stamp);color:var(--red)}
.g-toc a{color:#000;text-decoration:none;font-weight:700}
.g-toc a:hover{background:var(--yellow)}

/* One chapter = one sheet */
.g-ch{scroll-margin-top:80px}
.g-ch .leaf{padding:48px 52px 56px}
.g-ch h2{font-family:var(--cut);font-weight:400;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:.95;margin:0 0 10px}
.g-ch h3{font-family:var(--cut);font-weight:400;font-size:1.55rem;letter-spacing:.02em;line-height:1.1;margin:1.8em 0 .4em;scroll-margin-top:80px}
.g-ch h3:first-of-type{margin-top:1.2em}
.g-ch p,.g-ch li{max-width:68ch}
.g-ch ul{padding-left:1.2em}
.g-ch ul li{margin:.25em 0}
.g-ch .lede{margin-top:0}

/* Text beside a screenshot; stacks on narrow screens */
.g-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 44px;align-items:start;margin:22px 0}
.g-row.tall{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
.g-row.wide{grid-template-columns:1fr}
.g-row > div > :first-child{margin-top:0}

.g-shot{margin:0;position:relative}
.g-shot img{display:block;width:100%;height:auto;background:#1b1b1c;border:6px solid #fff;
  outline:1px solid rgba(0,0,0,.35);box-shadow:5px 7px 0 rgba(0,0,0,.12)}
.g-shot figcaption{font-family:var(--marker);font-size:1.05rem;line-height:1.25;margin-top:10px;transform:rotate(-1deg)}
.g-shot .tape{left:50%;top:-12px;transform:translateX(-50%) rotate(2deg);width:90px;height:24px;z-index:2}
.g-shot.cover{max-width:340px;justify-self:center}
.g-shot.phone{max-width:300px;justify-self:center}
.g-shot.page{max-width:420px;justify-self:center}
.g-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:24px;align-items:start}
.g-pair .g-shot{max-width:none}

/* Numbered parts beside a picture */
.g-parts{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px;counter-reset:part}
.g-parts li{counter-increment:part;display:grid;grid-template-columns:2rem 1fr;gap:10px;align-items:baseline}
.g-parts li::before{content:counter(part);font:700 .95rem var(--type);width:1.7rem;height:1.7rem;border-radius:50%;
  display:grid;place-items:center;background:#000;color:#fff}

/* Settings and gestures tables, typed on a card */
.g-table{width:100%;border-collapse:collapse;margin:18px 0;background:#fff;border:2px solid #000;font-size:.98rem}
.g-table th,.g-table td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px dotted #9aa09e}
.g-table thead th{font-family:var(--stamp);font-weight:400;background:var(--sheet2);border-bottom:2px solid #000}
.g-table td:first-child{font-weight:700;white-space:nowrap}
.g-table .def{font-family:var(--stamp);font-size:.85rem;color:var(--red);white-space:nowrap}
.g-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.g-tip{margin:20px 0;max-width:62ch}
.g-tip.note{transform:rotate(-.5deg)}
.g-ch .path{white-space:normal}
.btn{font:700 .86em var(--type);letter-spacing:.04em;border:1.5px solid #000;border-radius:3px;padding:0 5px;background:#fff;white-space:nowrap}

.g-top{display:inline-block;margin-top:26px;font-family:var(--marker);color:var(--riso)}

@media (max-width:860px){
  .g-row,.g-row.tall{grid-template-columns:1fr}
  .g-ch .leaf{padding:34px 22px 40px}
  .g-toc{padding:14px 16px}
  .g-table td:first-child{white-space:normal}
}
@media (max-width:640px){
  .g-ch .leaf.tilt-l,.g-ch .leaf.tilt-r{transform:none}
}