.pbf-folio {
  --pbf-paper: #f7f4e9;
  --pbf-ink: #2c3029;
  --pbf-graphite: #50554b;
  --pbf-rule: #aaa899;
  --pbf-ochre: #946319;
  --pbf-blue: #225775;
  background: var(--pbf-paper);
  color: var(--pbf-ink);
}
.pbf-inner { width: min(100% - 2.25rem, 76rem); margin: auto; padding: clamp(1.2rem, 3.5vw, 2.8rem) 0 clamp(2.8rem, 6vw, 5rem); }
.pbf-mast, .pbf-figure figcaption { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .35rem 1rem; }
.pbf-mast { border-block: 3px double var(--pbf-ink); padding: .65rem 0; }
.pbf-mast strong { font: 700 clamp(1.1rem, 2.5vw, 1.5rem)/1.2 Georgia, serif; }
.pbf-mast span { font-size: .9rem; color: var(--pbf-graphite); }
.pbf-opening { display: grid; grid-template-columns: 1.3fr .8fr; align-items: end; gap: clamp(2rem, 5vw, 6rem); margin: clamp(1.8rem, 5vw, 4rem) 0 clamp(1.6rem, 4vw, 3rem); }
.pbf-opening h1 { color: var(--pbf-ink); font: 500 clamp(2.85rem, 5.9vw, 5.75rem)/.99 Georgia, "Times New Roman", serif; letter-spacing: -.055em; max-width: 13ch; }
.pbf-opening p { font-size: clamp(1rem, 1.55vw, 1.2rem); line-height: 1.53; color: var(--pbf-graphite); max-width: 38ch; }
.pbf-location, .pbf-timing { min-width: 0; border: 0; margin: 0; padding: 0; }
.pbf-location:focus-visible { outline: 3px solid var(--pbf-blue); outline-offset: 4px; }
.pbf-folio legend { padding: 0; margin-bottom: .85rem; color: var(--pbf-ink); font-size: 1.15rem; font-weight: 700; }
.pbf-step { display: inline-grid; place-items: center; vertical-align: middle; width: 1.55rem; height: 1.55rem; border: 1px solid var(--pbf-ochre); border-radius: 50%; margin-right: .35rem; color: #765119; font: 700 .94rem/1 Georgia, serif; }
.pbf-field-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(15rem, .9fr); gap: clamp(1.3rem, 4vw, 4rem); align-items: start; }
.pbf-figure { min-width: 0; margin: 0; }
.pbf-drawing { position: relative; isolation: isolate; background: #efeada; outline: 1px solid var(--pbf-rule); outline-offset: -1px; }
.pbf-drawing img { display: block; width: 100%; height: auto; }
.pbf-figure figcaption { border-top: 1px solid var(--pbf-rule); padding-top: .4rem; color: var(--pbf-graphite); font-size: .84rem; }
.pbf-pin { position: absolute; transform: translate(-50%, -50%); cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; }
.pbf-pin-wall { left: 35.375%; top: 65.536%; }
.pbf-pin-joint { left: 60.125%; top: 78.929%; }
.pbf-pin-well { left: 81.5%; top: 57.857%; }
.pbf-pin > span:first-child, .pbf-letter { display: inline-grid; place-items: center; border: 2px solid var(--pbf-blue); border-radius: 50%; font: bold 1rem/1 Georgia, serif; color: var(--pbf-blue); background: #fffdf4; }
.pbf-pin > span:first-child { width: 31px; height: 31px; box-shadow: 0 0 0 2px #fffdf4; }
.pbf-model:has(#pbf-loc-wall:checked) .pbf-pin-wall > span:first-child,
.pbf-model:has(#pbf-loc-joint:checked) .pbf-pin-joint > span:first-child,
.pbf-model:has(#pbf-loc-well:checked) .pbf-pin-well > span:first-child { color: white; background: var(--pbf-blue); }
.pbf-choice-hint { color: var(--pbf-graphite); margin: 0 0 .65rem; line-height: 1.5; }
.pbf-choices, .pbf-times { display: grid; gap: .45rem; }
.pbf-choices > div, .pbf-times > div { position: relative; }
.pbf-choices input, .pbf-times input, .pbf-sr { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; clip-path: inset(50%); margin: 0; padding: 0; border: 0; }
.pbf-choices label, .pbf-times label { display: flex; align-items: center; gap: .65rem; min-height: 44px; cursor: pointer; padding: .4rem .75rem; border: 1px solid var(--pbf-rule); color: var(--pbf-ink); font-size: 1rem; line-height: 1.35; }
.pbf-choices input:checked + label, .pbf-times input:checked + label { border-color: var(--pbf-blue); box-shadow: inset 3px 0 var(--pbf-blue); color: var(--pbf-blue); background: #e4edf0; font-weight: 700; }
.pbf-choices input:focus-visible + label, .pbf-times input:focus-visible + label, .pbf-folio summary:focus-visible, .pbf-folio button:focus-visible, .pbf-change:focus-visible { outline: 3px solid var(--pbf-blue); outline-offset: 3px; }
.pbf-letter { flex: none; width: 1.4rem; height: 1.4rem; font-size: .8rem; border-width: 1px; }
.pbf-guide { margin-top: 1.1rem; padding: .8rem .1rem .4rem .9rem; border-left: 3px solid var(--pbf-ochre); }
.pbf-note, .pbf-value { display: none; }
.pbf-model:has(#pbf-loc-wall:checked) .pbf-note-wall, .pbf-model:has(#pbf-loc-joint:checked) .pbf-note-joint, .pbf-model:has(#pbf-loc-well:checked) .pbf-note-well { display: block; }
.pbf-note h2, .pbf-receipt-body h2 { font: 600 1.5rem/1.16 Georgia, serif; letter-spacing: -.025em; color: var(--pbf-ink); margin: 0 0 .35rem; }
.pbf-note p, .pbf-receipt-body p { font-size: 1rem; line-height: 1.5; color: var(--pbf-graphite); }
.pbf-bottom { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.25rem, 4vw, 4rem); margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--pbf-rule); }
.pbf-times { grid-template-columns: repeat(2,minmax(0,1fr)); }
.pbf-review, .pbf-receipt { margin: 0; padding: 0; }
.pbf-review > summary, .pbf-receipt > summary { cursor: pointer; min-height: 48px; padding: .75rem 1rem; background: var(--pbf-blue); color: white; font-weight: 650; }
.pbf-review > summary:hover, .pbf-receipt > summary:hover { background: #17425b; }
.pbf-review-body { padding: 1rem; border: 1px solid var(--pbf-blue); border-top: 0; }
.pbf-recap { margin: 0 0 .5rem; }
.pbf-recap > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .7rem; border-bottom: 1px solid var(--pbf-rule); padding: .45rem 0; }
.pbf-recap dt { color: var(--pbf-graphite); }
.pbf-recap dd { margin: 0; font-weight: 650; }
.pbf-model:has(#pbf-loc-wall:checked) .pbf-value-wall, .pbf-model:has(#pbf-loc-joint:checked) .pbf-value-joint, .pbf-model:has(#pbf-loc-well:checked) .pbf-value-well,
.pbf-model:has(#pbf-when-today:checked) .pbf-value-today, .pbf-model:has(#pbf-when-week:checked) .pbf-value-week, .pbf-model:has(#pbf-when-older:checked) .pbf-value-older, .pbf-model:has(#pbf-when-unsure:checked) .pbf-value-unsure { display: inline; }
.pbf-change, .pbf-reset { display: inline-flex; align-items: center; min-height: 44px; color: var(--pbf-blue); font-weight: 650; }
.pbf-receipt { margin-top: .4rem; }
.pbf-receipt-body { padding-top: 1rem; }
.pbf-receipt-body h3 { color: var(--pbf-ink); font-size: 1rem; margin: .85rem 0 .25rem; }
.pbf-receipt-body .pbf-recap { margin-top: .5rem; }
.pbf-reset { border: 1px solid var(--pbf-blue); background: transparent; padding: .5rem .8rem; margin-top: 1rem; }
.pbf-reset[hidden] { display: none; }
.pbf-disclosure { margin: .65rem 0 0; font-size: .9rem; color: var(--pbf-graphite); line-height: 1.5; }
@media (max-width: 48rem) {
  .pbf-inner { width: min(100% - 2rem, 36rem); }
  .pbf-opening, .pbf-field-layout, .pbf-bottom { grid-template-columns: minmax(0,1fr); }
  .pbf-opening { gap: .8rem; }
  .pbf-opening h1 { max-width: 15ch; }
  .pbf-field-layout { gap: 1rem; }
  .pbf-bottom { margin-top: 1.3rem; }
}
@media (forced-colors: active) {
  .pbf-choices input:checked + label, .pbf-times input:checked + label { outline: 2px solid Highlight; }
  .pbf-model:has(#pbf-loc-wall:checked) .pbf-pin-wall, .pbf-model:has(#pbf-loc-joint:checked) .pbf-pin-joint, .pbf-model:has(#pbf-loc-well:checked) .pbf-pin-well { outline: 2px solid Highlight; }
}