/* Round 19 (12 Oct): the Projects page (/projects) and a project page (/projects/{slug}) — the look of Harun's
   approved drafts (draft-web/projects.html, toledo-spain.html). Loaded only by those two pages. */

.pg2 { padding: 48px 0 80px }
.pg2 > .lab { font-size: 14px }
.pg2 .lab { margin-bottom: 6px }
.pg2 h1 { font-size: clamp(48px, 8vw, 112px); margin: 10px 0 18px; text-wrap: balance; line-height: .92 }
.pg2 .lede { font-size: 20px; max-width: 46ch; color: #333; text-wrap: pretty }

/* "Photo to come" box (no photo uploaded yet): the drafts' caption style */
.pg2 .ph { color: #C9C9C9; font: 11px/1.4 Menlo, monospace; letter-spacing: .04em }
.pg2 .photo { display: block; width: 100%; object-fit: cover; background: #262626 }

/* Projects page: one column of cards */
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; margin-top: 20px; max-width: 860px }
.pcard { display: flex; flex-direction: column; border-top: 3px solid #1C1C1C; padding-top: 18px; min-width: 0; color: #1C1C1C }
.pcard h2 { font-size: clamp(34px, 4vw, 52px); margin: 0 0 12px; text-wrap: balance }
.pcard h2 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px }
.pcard .phl { display: block; margin-top: 18px }
.pcard .phl .ph, .pcard .phl .photo { margin: 0; height: 360px }
@media (max-width: 820px) { .pcard .phl .ph, .pcard .phl .photo { height: 220px } }
.pcard .kick { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: #333 }
.pcard .kick b { background: #F0A80D; color: #1C1C1C; padding: 2px 7px; margin-inline-end: 8px }
.pcard p { color: #333; max-width: 52ch }
.pcard .go { align-self: flex-start; font-weight: 800; text-decoration: underline; text-underline-offset: 4px }
.pcard .go:focus-visible, .pcard h2 a:focus-visible { outline: 3px solid #F0A80D; outline-offset: 4px }
.pcard:hover .go { color: #B97A00 }

/* Size / Water / Cost — each on its own line */
.kf { margin: 18px 0 16px; border-top: 1px solid #C9C9C9; max-width: 620px }
.kf > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #C9C9C9 }
.kf dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: #333 }
.kf dd { font-family: Anybody, "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; min-width: 0 }
.kf.big { margin-top: 36px; max-width: none; border-top: 3px solid #1C1C1C }
.kf.big dd { font-size: clamp(24px, 3vw, 34px) }
@media (max-width: 520px) { .kf > div { grid-template-columns: minmax(0, 1fr); gap: 2px } }

/* Project page */
.pg2 .back { display: inline-block; font-weight: 800; font-size: 14px; margin-bottom: 18px; text-decoration: underline; text-underline-offset: 4px }
.pg2 .note { margin-top: 14px; font-size: 13px; color: #555 }
.pg2 .sec { margin-top: 56px }
.pg2 .sec h2 { font-size: clamp(32px, 4.4vw, 56px) }
.pg2 .sec .copy { font-size: 18px; color: #333; max-width: 62ch; margin-top: 16px }
.pg2 .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 26px }
@media (max-width: 820px) { .pg2 .facts { grid-template-columns: minmax(0, 1fr) } }
.pg2 .facts > div { background: #fff; color: #1C1C1C; border: 2px solid #1C1C1C; border-radius: 6px; padding: 20px 22px; min-width: 0 }
.pg2 .facts h4 { font-family: Anybody, "Helvetica Neue", Arial, sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #1C1C1C; background: #F0A80D; display: inline-block; padding: 3px 8px; margin-bottom: 10px }
.pg2 .facts p { color: #333 }
.pg2 .acts2 { margin-top: 40px; display: flex; gap: 10px; flex-wrap: wrap }
.pg2 .nextp { margin-top: 56px; border-top: 2px solid #1C1C1C; padding-top: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-weight: 800 }
.pg2 .nextp a { text-decoration: underline; text-underline-offset: 4px }

/* Arabic / Urdu: letters join, so no letter spacing; the "next" arrow points the reading way */
html[dir="rtl"] .pg2 .lab, html[dir="rtl"] .pcard .kick, html[dir="rtl"] .kf dt, html[dir="rtl"] .pg2 .facts h4 { letter-spacing: 0 }
html[dir="rtl"] .pg2 .arr { display: inline-block; transform: scaleX(-1) }