/* portal-writing.css: the /writing index and essays on portaldesign.com.
 * Loaded after portal-work.css, which supplies the fonts, colour tokens, header and footer.
 * Layout follows Portal's label rail and content column: a small label at the left edge, the
 * reading column starting about a third of the way across, 620px wide. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.portal-writing { margin: 0; background: #FFFFFF; color: #000000; -webkit-font-smoothing: antialiased; }
body.portal-writing a { color: inherit; }
body.portal-writing img { max-width: 100%; }

.pwr { padding: 150px 20px 0; }
body.portal-writing .pwr-eyebrow, body.portal-writing .pwr-eyebrow a, body.portal-writing .pwr-rail, body.portal-writing .pwr-label {
  font-family: "Fragment Mono", ui-monospace, monospace !important; font-size: 12px; line-height: 1.4;
  letter-spacing: .05em; text-transform: uppercase; color: #6B6B6B; margin: 0;
}
.pwr-eyebrow a { text-decoration: none; }
.pwr-eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pwr-title {
  font-size: clamp(44px, 7vw, 100px); line-height: .95; letter-spacing: -.05em; font-weight: 400;
  margin: 20px 0 0; max-width: 14ch;
}
.pwr-title i { letter-spacing: -.02em; }

.pwr-grid { display: grid; grid-template-columns: minmax(0, 31.5%) minmax(0, 620px); margin-top: 140px; }
body.portal-writing .pwr-rail { padding-right: 32px; max-width: 30ch; padding-top: 8px; }
body.portal-writing .pwr-label { font-size: 12px; line-height: 1.4; color: #6B6B6B; }
.pwr-body > :first-child { margin-top: 0; }
body.portal-writing .pwr-body .pwr-lede { color: #000000; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.22; letter-spacing: -.02em; margin: 0 0 56px; }
.pwr-body h2 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.12; letter-spacing: -.03em; font-weight: 500; margin: 72px 0 18px; }
.pwr-body h3 { font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; margin: 32px 0 8px; }
.pwr-body p { font-size: 19px; line-height: 1.55; letter-spacing: -.01em; color: #2B2B2B; margin: 0 0 20px; }
.pwr-body p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* the closing blocks: where the idea comes from, and the offer */
.pwr-block { background: #F4F4F4; padding: 32px; margin-top: 72px; }
.pwr-block + .pwr-block { margin-top: 16px; }
body.portal-writing .pwr-block .pwr-label { margin-bottom: 14px; }
.pwr-block p { font-size: 17px; line-height: 1.5; margin: 0 0 12px; }
.pwr-block p:last-child { margin-bottom: 0; }
.pwr-block strong { font-weight: 600; }
body.portal-writing .pwr-cta {
  display: inline-block; margin-top: 8px; padding: 14px 24px; border-radius: 999px; background: #000000;
  color: #FFFFFF !important; text-decoration: none !important;
  font-family: "Uncut Sans Medium", "Helvetica Neue", Arial, sans-serif !important; font-size: 13px; line-height: 1.2; letter-spacing: .02em;
}
.pwr-cta:hover { background: #2B2B2B; }

.pwr-more { margin-top: 96px; }
.pwr-more ul { list-style: none; padding: 0; margin: 16px 0 0; }
.pwr-more li { margin: 0 0 10px; }
.pwr-more a { font-size: 19px; line-height: 1.4; text-decoration: none; letter-spacing: -.01em; }
.pwr-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* index */
.pwr-list { list-style: none; padding: 0; margin: 40px 0 0; }
.pwr-list li { margin: 0 0 64px; }
.pwr-list a { display: block; text-decoration: none; }
body.portal-writing .pwr-list .pwr-label { margin-bottom: 10px; max-width: none; }
.pwr-list h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.08; letter-spacing: -.035em; font-weight: 400; margin: 0 0 10px; }
.pwr-list a:hover h2 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.pwr-list p { font-size: 17px; line-height: 1.5; color: #555555; margin: 0; max-width: 52ch; }
.pwr-grid + .pwr-grid { margin-top: 120px; }
.pwr-books h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.03em; font-weight: 500; margin: 0 0 8px; }
.pwr-books .pwr-book { margin: 0 0 40px; }
.pwr-books p { font-size: 17px; line-height: 1.5; color: #2B2B2B; margin: 0 0 8px; max-width: 56ch; }
.pwr-books a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

body.portal-writing .pw-foot { margin-top: 140px; }

@media (max-width: 860px) {
  .pwr { padding: 96px 16px 0; }
  .pwr-grid { grid-template-columns: minmax(0, 1fr); margin-top: 64px; }
  .pwr-rail { padding: 0 0 28px; max-width: none; }
  .pwr-grid + .pwr-grid { margin-top: 80px; }
  .pwr-body h2 { margin-top: 56px; }
  .pwr-body p { font-size: 18px; }
  .pwr-block { padding: 24px; margin-top: 56px; }
  .pwr-list li { margin-bottom: 48px; }
  body.portal-writing .pw-foot { margin-top: 96px; }
}

.pwr-title--long { max-width: 18ch; font-size: clamp(40px, 6.2vw, 88px); }
.pwr-list--first { margin-top: 0; }

/* ── figures (2026-11-16): the work carries the page, as on the case studies ───────── */
.pwr-hero, .pwr-fig { margin: 0; }
.pwr-hero { margin-top: 56px; }
.pwr-hero a, .pwr-fig a { display: block; background: #F4F4F4; }
.pwr-hero img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: cover; }
.pwr-hero.is-cut img, .pwr-fig.is-cut img { object-fit: contain; padding: clamp(20px, 4vw, 64px); box-sizing: border-box; }
.pwr-hero.is-tall img { object-fit: contain; }
body.portal-writing .pwr-hero figcaption, body.portal-writing .pwr-fig figcaption {
  font-family: "Uncut Sans Medium", "Helvetica Neue", Arial, sans-serif !important; font-size: 13px; line-height: 1.4; color: #6B6B6B; margin-top: 12px; max-width: 70ch;
}
.pwr-hero + .pwr-grid { margin-top: 96px; }
.pwr-fig { margin: 48px 0 56px; width: min(980px, calc(68.5vw - 40px)); }
.pwr-fig img { display: block; width: 100%; height: auto; }
.pwr-fig.is-tall { width: min(460px, 100%); }
.pwr-fig + .pwr-fig { margin-top: -8px; }

/* index: cards */
.pwr-cards { list-style: none; padding: 0; margin: 72px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 20px; }
.pwr-cards li:first-child { grid-column: span 2; }
.pwr-cards a { display: block; text-decoration: none; }
.pwr-card__img { display: block; background: #F4F4F4; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 18px; }
.pwr-cards li:first-child .pwr-card__img { aspect-ratio: 8 / 5; }
.pwr-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.pwr-card__img.is-cut img { object-fit: contain; padding: 8%; box-sizing: border-box; }
.pwr-cards a:hover .pwr-card__img img { transform: scale(1.03); }
body.portal-writing .pwr-cards .pwr-label { margin-bottom: 8px; }
.pwr-cards h2 { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -.03em; font-weight: 400; margin: 0 0 8px; }
.pwr-cards a:hover h2 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.pwr-cards p:not(.pwr-label) { font-size: 16px; line-height: 1.45; color: #555555; margin: 0; max-width: 46ch; }
.pwr-cards + .pwr-grid { margin-top: 140px; }
@media (max-width: 1000px) { .pwr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .pwr-hero { margin-top: 36px; } .pwr-hero + .pwr-grid { margin-top: 56px; }
  .pwr-fig { width: 100%; margin: 32px 0 40px; }
  .pwr-cards + .pwr-grid { margin-top: 88px; }
}
@media (max-width: 600px) { .pwr-cards { grid-template-columns: minmax(0, 1fr); gap: 52px 0; margin-top: 48px; } .pwr-cards li:first-child { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .pwr-card__img img { transition: none; } }

/* index (2026-11-17): a staggered run like the work index. Cards differ in width, sit left then
 * right, and every second one drops below its neighbour. Images keep their own proportions. */
@media (min-width: 861px) {
  .pwr-cards { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(88px, 9vw, 150px) 20px; align-items: start; margin-top: 96px; }
  .pwr-cards li:nth-child(n) { grid-column: auto; }
  .pwr-cards li:nth-child(1) { grid-column: 1 / 8; }
  .pwr-cards li:nth-child(2) { grid-column: 9 / 13; margin-top: clamp(80px, 11vw, 190px); }
  .pwr-cards li:nth-child(3) { grid-column: 2 / 6; margin-top: clamp(60px, 7vw, 120px); }
  .pwr-cards li:nth-child(4) { grid-column: 7 / 13; }
  .pwr-cards li:nth-child(5) { grid-column: 1 / 7; }
  .pwr-cards li:nth-child(6) { grid-column: 8 / 12; margin-top: clamp(80px, 11vw, 190px); }
  .pwr-cards li:nth-child(7) { grid-column: 4 / 11; }
  .pwr-cards li:nth-child(n) .pwr-card__img { margin-bottom: 20px; }
}
.pwr-cards li:first-child .pwr-card__img { aspect-ratio: auto; }

/* type manners (2026-11-17): the italic phrase stays on one line, the source reads as a line
 * for the book and a line for the chapter, and captions never leave one word on a line. */
.pwr-title i { white-space: nowrap; }
.pwr-title { text-wrap: balance; }
body.portal-writing .pwr-rail { max-width: 34ch; }
.pwr-rail span { display: block; }
.pwr-rail span:not(:last-child) { white-space: nowrap; }
body.portal-writing .pwr-hero figcaption, body.portal-writing .pwr-fig figcaption { text-wrap: balance; }
.pwr-cards h2, .pwr-cards p, .pwr-body h2, .pwr-lede, .pwr-books p { text-wrap: pretty; }