/* /websites, /contact and /about. New components in the site's own tokens. */
.sites-hero .page-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.sites-hero .page-title { font-size: clamp(2.4rem, 4.6vw, 4.2rem); }
.sites-deck { z-index: 0; }
.sites-deck { aspect-ratio: 16 / 11; position: relative; }
.deck-card { border: 1px solid rgb(255 255 255 / 22%); border-radius: 14px; box-shadow: 0 24px 50px rgb(0 0 0 / 38%); height: auto; left: 50%; position: absolute; top: 50%; width: 66%; }
.deck-1 { transform: translate(-96%, -82%) rotate(-7deg); }
.deck-2 { transform: translate(-6%, -92%) rotate(5deg); }
.deck-3 { transform: translate(-50%, -50%) rotate(-1.5deg); z-index: 2; }
.deck-4 { transform: translate(-96%, -16%) rotate(4deg); }
.deck-5 { transform: translate(-6%, -8%) rotate(-5deg); }

.site-row { background: var(--paper); overflow: hidden; }
.site-row:nth-of-type(even) { background: var(--teal-light); }
.site-row-inner { align-items: center; display: grid; gap: clamp(32px, 6vw, 88px); grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); margin: 0 auto; max-width: 1240px; padding: clamp(56px, 8vw, 110px) max(5%, 20px); }
.site-row:nth-of-type(even) .site-copy { order: 2; }
.site-index { color: var(--site); display: block; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.14em; margin-bottom: 14px; }
.site-copy h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.04; margin: 0 0 10px; text-wrap: balance; }
.site-line { color: var(--site); font-size: 1.1rem; font-weight: 700; margin: 0 0 16px; }
.site-text { color: var(--muted); line-height: 1.65; margin: 0 0 20px; text-wrap: pretty; }
.site-good { border-top: 1px solid var(--line); list-style: none; margin: 0 0 26px; padding: 0; }
.site-good li { border-bottom: 1px solid var(--line); font-weight: 600; padding: 11px 0; }
.site-row:nth-of-type(even) .site-good, .site-row:nth-of-type(even) .site-good li { border-color: rgb(18 85 77 / 18%); }
.site-go { background: var(--site); border-radius: 999px; color: #fff; display: inline-block; font-weight: 700; padding: 14px 26px; text-decoration: none; transition: filter 200ms ease, transform 200ms ease; }
.site-go:hover { filter: brightness(1.1); transform: translateY(-2px); }
.site-go:focus-visible, .book-mail:focus-visible, .site-poster:focus-visible { outline: 3px solid var(--site, var(--teal)); outline-offset: 3px; }
.site-host { color: var(--muted); font-size: 0.85rem; margin: 12px 0 0; overflow-wrap: anywhere; }
.site-poster { border-radius: 18px; box-shadow: 0 34px 70px -18px rgb(23 46 43 / 45%); display: block; line-height: 0; overflow: hidden; transform: rotate(-1.5deg); transition: box-shadow 250ms ease; }
.site-row:nth-of-type(even) .site-poster { transform: rotate(1.5deg); }
.site-poster:hover { box-shadow: 0 44px 80px -16px rgb(23 46 43 / 55%); }
.site-poster img { height: auto; width: 100%; }

.sites-how { background: var(--paper); }
.sites-how-inner, .book-inner, .about-inner { margin: 0 auto; max-width: 1040px; }
.sites-how-grid { border-top: 2px solid var(--ink); display: grid; gap: 0 36px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; }
.sites-how-grid article { padding-top: 22px; }
.sites-how-grid h3 { font-size: 1.2rem; margin: 0 0 8px; }
.sites-how-grid p { color: var(--muted); margin: 0; }

.book-section { background: var(--paper); }
.book-list { border-top: 2px solid var(--ink); list-style: none; margin: 30px 0 0; padding: 0; }
.book-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 8px 32px; grid-template-columns: minmax(0, 1fr) auto; padding: 20px 0; }
.book-row h3 { font-size: 1.12rem; margin: 0 0 4px; }
.book-row p { color: var(--muted); margin: 0; }
.book-tag { background: var(--teal-light); border-radius: 999px; color: var(--teal); font-size: 0.72rem; font-weight: 700; margin-left: 6px; padding: 3px 9px; white-space: nowrap; }
.book-mail { color: var(--teal); font-weight: 700; overflow-wrap: anywhere; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.book-note { color: var(--muted); font-size: 0.92rem; margin: 18px 0 0; }
.book-more { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ghost-dark { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }

.about-section { background: var(--paper); }
.about-row { border-top: 1px solid var(--line); display: grid; gap: 10px 48px; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); padding: 34px 0; }
.about-row:first-child { border-top: 2px solid var(--ink); }
.about-row h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0; }
.about-row p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin: 0; }

@media (max-width: 860px) {
  .sites-hero .page-hero-inner, .site-row-inner { grid-template-columns: minmax(0, 1fr); }
  .site-row:nth-of-type(even) .site-copy { order: 0; }
  .sites-how-grid, .about-row { grid-template-columns: minmax(0, 1fr); }
  .site-poster, .site-row:nth-of-type(even) .site-poster { transform: none; }
}
@media (max-width: 560px) {
  .sites-deck { margin: 0 8px; }
  .deck-card { width: 54%; }
  .book-row { grid-template-columns: minmax(0, 1fr); }
}
.book-row p a { color: var(--teal); font-weight: 600; }

/* /articles and each article */
.art-title { font-size: clamp(2.2rem, 5vw, 4rem); }
.art-section { background: var(--paper); }
.art-body { font-size: 1.08rem; line-height: 1.75; margin: 0 auto; max-width: 720px; }
.art-wide { max-width: 980px; }
.art-body h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); line-height: 1.2; margin: 1.8em 0 0.5em; }
.art-body p, .art-body li { color: #3f504b; text-wrap: pretty; }
.art-body p { margin: 0 0 1em; }
.art-body li { margin-bottom: 0.6em; }
.art-body a { color: var(--teal); font-weight: 600; }
.art-lead { font-size: 1.22rem; line-height: 1.6; }
.art-table { margin: 1.4em 0; overflow-x: auto; }
.art-table table { border-collapse: collapse; font-size: 0.98rem; min-width: 560px; width: 100%; }
.art-table th, .art-table td { border-bottom: 1px solid var(--line); padding: 12px 10px; text-align: left; }
.art-table thead th { border-bottom: 2px solid var(--ink); }
.art-next { border-top: 2px solid var(--ink); display: grid; gap: 6px; margin-top: 48px; padding-top: 20px; }
.art-next > span { color: var(--muted); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.art-next .art-all { font-size: 0.95rem; margin-top: 8px; }
.art-list { border-top: 2px solid var(--ink); list-style: none; margin: 0; padding: 0; }
.art-row { border-bottom: 1px solid var(--line); margin: 0 !important; }
.art-row a { color: inherit; display: block; font-weight: inherit; padding: 26px 0; text-decoration: none; transition: padding-left 200ms ease; }
.art-row a:hover, .art-row a:focus-visible { padding-left: 12px; }
.art-row h2 { margin: 6px 0; }
.art-row a:hover h2 { color: var(--teal); }
.art-row p { margin: 0; }
.art-cat { color: var(--teal); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }