/* North Pacific Energy — corporate profile.
   Sixteen sheets authored at A4 landscape (297 x 210 mm). On screen they scale to the
   available width; in print and in the PDF each sheet is one page.
   The sheets use the same devices as the website: the three-colour bar, ruled panels
   with a coloured top edge, and pictures with one curved corner. */

.profile-intro .page-hero__grid { padding-bottom: 0; }
.profile-stage { background: var(--mist); padding-block: clamp(1.25rem, 4vw, 4rem); overflow-x: auto; }
.book { --z: 1; width: min(100% - 2 * var(--gutter), 297mm); margin-inline: auto; display: grid; gap: clamp(0.9rem, 2.4vw, 2.25rem); justify-items: start; }
.print-doc { margin: 0; background: #fff; }
.print-doc .book { width: 297mm; gap: 0; margin: 0; }

.sheet { position: relative; width: 297mm; height: 210mm; zoom: var(--z); overflow: hidden; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 9.6pt; line-height: 1.5; box-shadow: 0 8mm 18mm -12mm rgba(10, 43, 60, 0.4); break-after: page; break-inside: avoid; }
.print-doc .sheet { box-shadow: none; zoom: 1; }
.sheet * { box-sizing: border-box; }
.sheet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.sheet h2, .sheet h3, .sheet p, .sheet ul, .sheet ol, .sheet dl, .sheet dd, .sheet figure { margin: 0; padding: 0; }
.sheet h2 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
.sheet h3 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; }

/* furniture shared by every inside sheet */
.p-run { position: absolute; left: 16mm; right: 16mm; top: 9mm; display: flex; justify-content: space-between; padding-bottom: 2.4mm; border-bottom: 0.25mm solid var(--line); font-family: var(--font-display); font-size: 7.6pt; font-weight: 500; letter-spacing: 0.005em; color: var(--muted); }
.p-run span:first-child { color: var(--blue); font-weight: 600; }
.p-folio { position: absolute; left: 16mm; bottom: 8mm; display: flex; align-items: baseline; gap: 3mm; font-family: var(--font-display); font-size: 7.6pt; letter-spacing: 0.005em; color: var(--muted); }
.p-folio b { font-size: 10pt; font-weight: 600; letter-spacing: 0; color: var(--blue); font-variant-numeric: tabular-nums; }
.p-folio--right { left: auto; right: 16mm; }
.p-abs { position: absolute; }
.p-meta { font-family: var(--font-display); font-size: 7.8pt; font-weight: 600; letter-spacing: 0.005em; color: var(--blue); }
.p-title { font-size: 27pt; line-height: 1.06; letter-spacing: -0.028em; }
.p-title::before, .p-bar { content: ""; display: block; width: 13mm; height: 1.1mm; background: linear-gradient(90deg, var(--red) 0 33.4%, var(--orange) 33.4% 66.7%, var(--yellow) 66.7%); }
.p-title::before { margin-bottom: 4.5mm; }
.p-title--sm { font-size: 21pt; }
.p-lead { font-size: 12pt; line-height: 1.45; color: var(--ink); }
.p-body { color: var(--muted); }
.p-body + .p-body { margin-top: 2.4mm; }
.p-h3 { font-size: 12.5pt; line-height: 1.2; letter-spacing: -0.015em; }
.p-num { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.05em; line-height: 0.82; color: var(--blue); font-variant-numeric: tabular-nums; }
.p-rule { border: 0; border-top: 0.25mm solid var(--line); margin: 0; }

/* pictures: straight edges, one curved corner */
.p-pic { position: absolute; overflow: hidden; background: var(--sky); }
.p-pic--br { border-bottom-right-radius: 26mm; }
.p-pic--bl { border-bottom-left-radius: 26mm; }
.p-pic--tl { border-top-left-radius: 26mm; }
.p-pic--tr { border-top-right-radius: 26mm; }
.p-pic--veil::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 38, 54, 0.9) 0%, rgba(6, 38, 54, 0.8) 34%, rgba(6, 38, 54, 0.42) 60%, rgba(6, 38, 54, 0.08) 100%); }

/* ruled panel with a coloured top edge */
.p-card { background: var(--paper); border: 0.25mm solid var(--line); border-top: 0.9mm solid var(--blue); padding: 5mm 5.5mm 5.5mm; display: grid; gap: 2mm; align-content: start; }
.p-card p { color: var(--muted); }
.p-card--teal { border-top-color: var(--teal); }
.p-card--orange { border-top-color: var(--orange); }
.p-card--yellow { border-top-color: var(--yellow); }
.p-card--red { border-top-color: var(--red); }
.p-card--pic { padding: 0; gap: 0; border-top-width: 0.25mm; overflow: hidden; }
.p-card--pic figure { position: relative; height: 58mm; }
.p-card--pic div { padding: 5mm 5.5mm 5.5mm; display: grid; gap: 2mm; border-top: 0.9mm solid var(--orange); }

.p-spec { display: grid; grid-template-columns: 40mm 1fr; border: 0.25mm solid var(--line); border-top: 0.9mm solid var(--blue); }
.p-spec dt, .p-spec dd { padding: 2.1mm 3.5mm; border-bottom: 0.25mm solid var(--line); }
.p-spec dt:last-of-type, .p-spec dd:last-of-type { border-bottom: 0; }
.p-spec dt { font-family: var(--font-display); font-size: 7.8pt; font-weight: 500; letter-spacing: 0.005em; color: var(--muted); background: var(--mist); align-self: stretch; display: flex; align-items: center; }
.p-spec dd { font-family: var(--font-display); font-weight: 500; font-size: 9.6pt; }

.p-list { list-style: none; display: grid; gap: 1.6mm; }
.p-list li { position: relative; padding-left: 5mm; color: var(--muted); }
.p-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 2.6mm; height: 0.6mm; background: var(--orange); }
.p-list strong { color: var(--ink); font-weight: 600; }

.p-rows { list-style: none; border-top: 0.5mm solid var(--ink); }
.p-rows > li { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 5mm; padding: 3.2mm 0; border-bottom: 0.25mm solid var(--line); align-items: baseline; }
.p-rows p { color: var(--muted); }
.p-rows--roomy > li { padding: 6.4mm 0; }

.p-cols { display: grid; gap: 6mm; }
.p-cols--3 { grid-template-columns: repeat(3, 1fr); }
.p-cols--2 { grid-template-columns: repeat(2, 1fr); }
.p-cols--4 { grid-template-columns: repeat(4, 1fr); }

.p-table { width: 100%; border-collapse: collapse; font-size: 9pt; line-height: 1.35; border: 0.25mm solid var(--line); border-top: 0.9mm solid var(--blue); }
.p-table th, .p-table td { text-align: left; vertical-align: top; padding: 3.2mm 4mm; border-bottom: 0.25mm solid var(--line); }
.p-table thead th { font-family: var(--font-display); font-size: 7.8pt; font-weight: 600; letter-spacing: 0.005em; color: var(--ink); background: var(--mist); }
.p-table tbody th { font-family: var(--font-display); font-weight: 600; font-size: 12.5pt; color: var(--blue); white-space: nowrap; }
.p-table tbody th small { display: block; margin-top: 0.5mm; font-family: var(--font-body); font-size: 7.4pt; font-weight: 400; color: var(--muted); white-space: normal; }
.p-table td { color: var(--muted); }
.p-table tbody tr:last-child th, .p-table tbody tr:last-child td { border-bottom: 0; }

/* chapter openers: the picture fills the sheet under a blue veil, the title sits on it in white */
.p-chapter { color: var(--paper); background: var(--blue-deep); }
.p-chapter .p-num { font-size: 84pt; color: var(--paper); }
.p-chapter h2 { font-size: 32pt; line-height: 1.04; letter-spacing: -0.03em; color: var(--paper); }
.p-chapter .p-body { color: rgba(255, 255, 255, 0.94); font-size: 11.5pt; line-height: 1.45; }

/* the route line used on the shipping and who-does-what sheets */
.p-route { position: absolute; left: 16mm; right: 16mm; }
.p-route svg { position: absolute; left: 0; top: 0; width: 100%; height: 22mm; overflow: visible; }
.p-route path { fill: none; stroke: var(--teal); stroke-width: 0.5mm; vector-effect: non-scaling-stroke; }
.p-route ol { position: relative; list-style: none; display: grid; }
.p-route li { position: relative; padding: 27mm 4mm 0; text-align: center; }
.p-route li::before { content: ""; position: absolute; left: 50%; top: var(--y); width: 4.4mm; height: 4.4mm; margin: -2.2mm 0 0 -2.2mm; border-radius: 50%; background: var(--paper); border: 0.8mm solid var(--blue); }
.p-route li:first-child::before { background: var(--yellow); border-color: var(--yellow); }
.p-route li:last-child::before { background: var(--red); border-color: var(--red); }
.p-route h3 { font-size: 11pt; }
.p-route p { margin-top: 1.2mm; font-size: 8.6pt; color: var(--muted); }
.p-route .p-meta { display: block; margin-bottom: 1.2mm; }
.p-pill { position: absolute; left: 16mm; right: 16mm; padding: 3.4mm 6mm; border: 0.25mm solid var(--line); border-left: 1.2mm solid var(--teal); display: flex; justify-content: center; align-items: baseline; gap: 4mm; background: var(--mist); }
.p-pill strong { font-family: var(--font-display); font-weight: 600; font-size: 11pt; color: var(--blue); }
.p-pill span { color: var(--muted); }

.p-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5mm 6mm; }
.p-group { padding: 4mm 5mm 4.5mm; border: 0.25mm solid var(--line); border-left: 1.1mm solid var(--blue); }
.p-group .p-meta { display: block; margin-bottom: 1.6mm; }
.p-group ul { list-style: none; }
.p-group li { font-family: var(--font-display); font-weight: 500; font-size: 10.6pt; letter-spacing: -0.01em; line-height: 1.4; }

.p-stat { display: grid; grid-template-columns: 30mm 1fr; gap: 0 5mm; align-items: center; padding: 4.6mm 0; border-bottom: 0.25mm solid var(--line); }
.p-stat .p-num { font-size: 40pt; }
.p-stat p { color: var(--muted); }

@media print {
  @page { size: 297mm 210mm; margin: 0; }
  .profile-intro, .site > .header, .site > .footer, .skip, .wa, .toast { display: none !important; }
  .profile-stage { background: none; padding: 0; overflow: visible; }
  .book { width: 297mm; gap: 0; margin: 0; --z: 1 !important; }
  .sheet { zoom: 1; box-shadow: none; }
  html, body { background: #fff; }
}