/* About: the one page led by the serif. A long-form essay set like a book, quiet and mostly still. */

/* opening */
.p-about .ab-top { border-top: 0; padding-block: clamp(56px, 8vw, 128px) clamp(48px, 6vw, 96px); }
.p-about .ab-top-tag { grid-column: 1 / 4; }
.p-about .ab-top h1 { grid-column: 1 / 12; font-size: clamp(2.3rem, 5.6vw, 5.2rem); line-height: 0.97; max-width: 17ch; }
.p-about .ab-rule { grid-column: 4 / 13; height: 2px; margin-top: clamp(32px, 4.4vw, 64px); }
.p-about .ab-open { grid-column: 4 / 11; margin-top: clamp(22px, 2.6vw, 36px); font-family: var(--serif); font-size: clamp(1.35rem, 2.3vw, 1.95rem); line-height: 1.34; max-width: 30em; }

/* the essay, on paper */
.p-about .ab-essay { background: var(--paper); padding-block: clamp(64px, 8vw, 128px) clamp(40px, 5vw, 80px); }
.p-about .ab-pass { row-gap: 0; padding-bottom: clamp(56px, 7vw, 108px); align-items: start; }
.p-about .ab-head { grid-column: 1 / 4; display: flex; flex-direction: column; gap: 10px; padding-top: 0.45rem; border-top: 1px solid var(--ink); padding-right: 12px; }
.p-about .ab-num { font-size: 0.8rem; letter-spacing: 0.14em; color: var(--ink-2); padding-top: 12px; }
.p-about .ab-head h2 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.12; letter-spacing: -0.01em; max-width: 12ch; }
.p-about .ab-body { grid-column: 4 / 10; font-family: var(--serif); font-size: clamp(1.14rem, 1.42vw, 1.3rem); line-height: 1.62; }
.p-about .ab-body p { max-width: 34em; }
.p-about .ab-body p + p { margin-top: 1.05em; }
.p-about .ab-first > p:first-child::first-letter { float: left; font-size: 3.5em; line-height: 0.84; font-weight: 600; padding: 0.08em 0.1em 0 0; }
.p-about .ab-note { grid-column: 10 / 13; align-self: start; color: var(--ink-2); border-top: 1px solid var(--hair); padding-top: 12px; margin-top: 0.5rem; max-width: 22ch; }
.p-about .ab-note-low { align-self: center; }
.p-about .ab-pull { grid-column: 4 / 13; font-stretch: 112%; font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.9rem, 3.9vw, 3.5rem); line-height: 1; max-width: 16ch; margin-bottom: clamp(24px, 3vw, 44px); text-wrap: balance; }
.p-about .ab-pull-after { margin: clamp(32px, 4vw, 56px) 0 0; max-width: 18ch; font-size: clamp(1.6rem, 3vw, 2.7rem); }
.p-about .ab-body .ab-ill { font-family: var(--mono); margin-top: 1.6em; line-height: 1.5; }

/* principles: a numbered list, set in type */
.p-about .ab-prin .g { align-items: start; row-gap: 32px; }
.p-about .ab-prin-head { grid-column: 1 / 5; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
.p-about .ab-prin-head h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); max-width: 10ch; }
.p-about .ab-list { grid-column: 6 / 13; }
.p-about .ab-list li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); padding-block: clamp(18px, 2.2vw, 28px); border-top: 1px solid var(--ink); }
.p-about .ab-list li:last-child { border-bottom: 1px solid var(--ink); }
.p-about .ab-list .mono { padding-top: 0.42rem; color: var(--ink-2); }
.p-about .ab-list h3 { font-size: clamp(1.25rem, 1.9vw, 1.65rem); font-weight: 800; letter-spacing: -0.012em; line-height: 1.1; }
.p-about .ab-list p { font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; margin-top: 8px; max-width: 46ch; }

/* where we are */
.p-about .ab-where { background: var(--plate-a); }
.p-about .ab-where .g { align-items: end; row-gap: 40px; }
.p-about .ab-where-text { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 18px; }
.p-about .ab-where-text h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); margin-bottom: 6px; }
.p-about .ab-map { grid-column: 7 / 13; }
.p-about .ab-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.p-about .ab-shore { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.p-about .ab-pl circle { fill: var(--ink); }
.p-about .ab-pl line { stroke: var(--ink); stroke-width: 0.8; }
.p-about .ab-pl text, .p-about .ab-north text { font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.1px; fill: var(--ink); }
.p-about .ab-lake { font-family: var(--serif); font-style: italic; font-size: 17px; letter-spacing: 5px; fill: var(--ink-2); }
.p-about .ab-north line, .p-about .ab-north path { fill: none; stroke: var(--ink); stroke-width: 1; }

/* the mark */
.p-about .ab-mark .g { align-items: center; row-gap: 44px; }
.p-about .ab-dwg { grid-column: 2 / 6; }
.p-about .ab-sheet { background: var(--paper); padding: clamp(8px, 1vw, 14px); box-shadow: -10px 12px 0 var(--plate-b); transform: rotate(-0.6deg); }
.p-about .ab-sheet svg { display: block; width: 100%; height: auto; }
.p-about .ab-dwg figcaption { margin-top: 28px; }
.p-about .ab-sheet .l { stroke: var(--ink); stroke-width: 1.3; fill: none; }
.p-about .ab-sheet .lt { stroke: var(--ink); stroke-width: 0.8; fill: none; }
.p-about .ab-sheet .cl { stroke: var(--ink); stroke-width: 0.7; stroke-dasharray: 14 3 3 3; fill: none; }
.p-about .ab-sheet .fp { fill: var(--paper); }
.p-about .ab-sheet .fg { fill: var(--plate-b); }
.p-about .ab-sheet .pt { stroke: var(--mark); stroke-width: 8; fill: none; }
.p-about .ab-sheet .dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.1px; fill: var(--ink); }
.p-about .ab-sheet .dtb { font-family: var(--wide); font-stretch: 112%; font-weight: 800; font-size: 13px; fill: var(--ink); }
.p-about .ab-mark-text { grid-column: 7 / 13; display: flex; flex-direction: column; gap: 18px; }
.p-about .ab-mark-text h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); max-width: 16ch; margin-bottom: 6px; }
.p-about .ab-mark-text .story { max-width: 34em; }

/* the way in: a sign-off, like the end of a letter */
.p-about .ab-close { background: var(--paper); padding-block: clamp(72px, 9vw, 140px); }
.p-about .ab-close-in { grid-column: 4 / 10; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.p-about .ab-close h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); }
.p-about .ab-close .story { font-size: clamp(1.2rem, 1.7vw, 1.5rem); max-width: 30em; }
.p-about .ab-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 6px; }
.p-about .ab-sign { display: flex; flex-direction: column; gap: 4px; margin-top: clamp(20px, 3vw, 40px); padding-top: 16px; border-top: 1px solid var(--ink); width: 100%; max-width: none; }
.p-about .ab-sign b { font-stretch: 112%; font-weight: 800; font-size: 1.15rem; }
.p-about .ab-sign .mono { color: var(--ink-2); }

@media (max-width: 900px) {
  .p-about .ab-top h1 { max-width: none; }
  .p-about .ab-rule { margin-top: 28px; }
  .p-about .ab-head { flex-direction: row; align-items: baseline; gap: 14px; padding-top: 14px; margin-bottom: 20px; }
  .p-about .ab-num { padding-top: 0; }
  .p-about .ab-head h2 { max-width: none; font-size: 1.25rem; }
  .p-about .ab-first > p:first-child::first-letter { font-size: 3.2em; }
  .p-about .ab-note, .p-about .ab-note-low { align-self: start; max-width: 34ch; margin-top: 26px; border-top: 0; border-left: 1px solid var(--ink); padding: 2px 0 2px 16px; }
  .p-about .ab-prin-head { position: static; }
  .p-about .ab-prin-head h2 { max-width: none; }
  .p-about .ab-list li { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .p-about .ab-dwg { max-width: 340px; margin-left: 10px; }
  .p-about .ab-pl text, .p-about .ab-north text { font-size: 12.5px; letter-spacing: 0.3px; }
}