/* The guide pages: the home page's parts (sky, paper sheet, closing, footer, menu) around a comfortable article. home.css comes first. */
.guide-top { position: relative; z-index: 2; padding-bottom: clamp(88px, 14vh, 148px); }
.guide-hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 860px; margin: 0 auto; padding: clamp(40px, 9vh, 88px) var(--edge) 0; }
.guide-hero .crumb { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--white); text-decoration: none; text-underline-offset: 3px; }
.guide-hero .lede { max-width: 34em; }
.guide-hero .updated { margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--white); text-shadow: 0 1px 8px rgba(var(--rgb-sky-deep), .35); }
.guide-hero .note-tag { display: inline-block; margin-top: 26px; padding: 7px 14px 8px; border-radius: 9px; background: var(--tag); color: var(--tag-ink); font: 400 clamp(19px, 1.6vw, 22px)/1 'Gochi Hand', var(--text); box-shadow: 0 3px 9px rgba(var(--rgb-tag), .2); transform: rotate(-2.5deg); }

/* the sheet */
.calm.guide { padding: clamp(52px, 8vh, 88px) 0 clamp(56px, 9vh, 96px); margin-top: -36px; }
.guide-in, .guide-more { max-width: 720px; margin: 0 auto; padding: 0 var(--edge); }
.guide-in h2 { font: 800 clamp(24px, 2.1vw, 30px)/1.15 var(--display); letter-spacing: -.02em; margin: 52px 0 14px; text-wrap: balance; scroll-margin-top: 24px; }
.guide-in > h2:first-child { margin-top: 0; }
.guide-in p, .guide-in li { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.62; color: var(--ink2); text-wrap: pretty; }
.guide-in p + p, .guide-in ul + p, .guide-in ol + p { margin-top: 14px; }
.guide-in b { font-weight: 600; color: var(--ink); }
.guide-in ul, .guide-in ol { display: grid; gap: 12px; margin-top: 16px; }
.guide-in ul li { position: relative; padding-left: 28px; }
.guide-in ul li::before { content: ''; position: absolute; left: 3px; top: .55em; width: 12px; height: 6px; border-left: 2px solid var(--deep); border-bottom: 2px solid var(--deep); transform: rotate(-45deg); }
.guide-in ol { counter-reset: g; }
.guide-in ol li { counter-increment: g; position: relative; padding-left: 44px; }
.guide-in ol li::before { content: counter(g); position: absolute; left: 0; top: -.08em; font: 800 26px/1.2 var(--display); color: var(--ink); }

/* real screenshots from a phone */
.guide-in figure { max-width: 460px; margin: 22px 0 6px; }
.guide-in figure img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 0 0 1px var(--line), 0 14px 32px -24px rgba(var(--rgb-ink), .4); }
.guide-in figcaption { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--ink2); text-wrap: pretty; }
.guide-in figure + p { margin-top: 18px; }
.pixjar-card figure { max-width: 280px; }

/* what Pixjar does about it: a card with Visor standing on it */
.pixjar-card { --v: clamp(96px, 9vw, 116px); position: relative; margin-top: calc(var(--v) * 1.48 + 8px); padding: 28px clamp(22px, 3vw, 32px) 30px; border-radius: 24px; background: var(--white); box-shadow: 0 1px 0 var(--line), 0 18px 44px -28px rgba(var(--rgb-ink), .28); }
.pixjar-card h2 { margin: 0 0 10px; padding-right: 96px; }
.pixjar-card .visor-up { position: absolute; right: clamp(10px, 3vw, 28px); bottom: calc(100% - 22px); width: var(--v); height: auto; pointer-events: none; }

/* the list of guides, and "more guides" at the end */
.guide-more { margin-top: clamp(52px, 8vh, 80px); }
.guide-more .guides { margin-top: 16px; grid-template-columns: repeat(2, 1fr); }
.guide-more .guides li:last-child { grid-column: 1 / -1; }
.guide-list { max-width: 820px; margin: 0 auto; padding: 0 var(--edge); }
.guide-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; min-height: 48px; padding: 24px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.guide-list li:last-child a { border-bottom: 1px solid var(--line); }
.guide-list b { font: 800 clamp(21px, 2vw, 28px)/1.15 var(--display); letter-spacing: -.02em; text-wrap: balance; transition: color .15s ease; }
.guide-list span { grid-column: 1; font-size: 16px; line-height: 1.45; color: var(--ink2); text-wrap: pretty; }
.guide-list svg { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--out); }
@media (hover: hover) and (pointer: fine) {
  .guide-list a:hover b { color: var(--deep); }
  .guide-list a:hover svg { transform: translateX(4px); }
  .guide-hero .crumb:hover { text-decoration: underline; }
}

@media (max-width: 899px) {
  .calm.guide { margin-top: -26px; }
  .pixjar-card h2 { padding-right: 76px; }
  .pixjar-card { --v: 88px; }
  .guide-more .guides { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .guide-list b, .guide-list svg { transition: none; } }