*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }



[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
   
  background: var(--ph-paper);
  color: var(--ph-ink);
  font-family: var(--ph-sans);
  font-size: var(--ph-t-body);
  line-height: var(--ph-lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  

  overflow-x: clip;
}

img, svg { max-width: 100%; }

 



:root {
  --pp-cover:      var(--ph-deep);         
  --pp-cover-ink:  var(--ph-paper);
  --pp-cover-line: var(--ph-tide);
  --pp-blend:      multiply;               
  --pp-rail:       152px;
  --pp-gap:        48px;

  

  --pp-tr-doc:     .04em;    
  --pp-tr-face:    .08em;    
  --pp-tr-title:   .1em;     

  

  --pp-tr-mrz:     .14;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    

    --pp-cover:      var(--ph-shoal-soft);
    --pp-cover-ink:  var(--ph-ink);
    --pp-cover-line: var(--ph-line);
    --pp-blend:      screen;
  }
}

:root[data-theme="dark"] {
  --pp-cover:      var(--ph-shoal-soft);
  --pp-cover-ink:  var(--ph-ink);
  --pp-cover-line: var(--ph-line);
  --pp-blend:      screen;
}

 

.wrap { max-width: var(--ph-wrap); margin-inline: auto; padding-inline: 32px; }
.stack { display: flex; flex-direction: column; }

::selection { background: var(--ph-shoal-soft); color: var(--ph-ink); }


.page.cover ::selection { background: var(--ph-tide); color: var(--ph-paper); }



:focus-visible { outline: 3px solid var(--ph-deep); outline-offset: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--ph-card); color: var(--ph-ink);
  border: 1px solid var(--ph-ink); border-radius: var(--ph-r-sm);
  padding: 12px 16px; font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none;
}
.skip:focus { left: 16px; top: 12px; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}





.topbar {
  border-bottom: 1px solid var(--ph-line);
  background: color-mix(in srgb, var(--ph-ground-a) 78%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}


.topbar .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0 16px; padding-block: 12px; min-height: 64px;
}
.topbar .ph-lockup { text-decoration: none; min-width: 0; min-height: 44px; }   
.topbar .ph-lockup svg { color: var(--ph-deep); flex: none; }
.topbar .ph-lockup .ph-wordmark { font-size: 1.375rem; }
.topbar .ph-lockup:hover .ph-wordmark { color: var(--ph-deep); }

.topnav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 4px; flex: 0 1 auto; min-width: 0; margin-left: auto;
}
.navlink {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 12px; border-radius: var(--ph-r-md);
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none;
  color: var(--ph-mute); text-decoration: none; white-space: nowrap;
}
.navlink:hover { color: var(--ph-ink); background: var(--ph-paper-deep); }
.navlink[aria-current="page"] { color: var(--ph-deep); }

.themetoggle {
  appearance: none; cursor: pointer; background: transparent;
  border: 1px solid var(--ph-line); border-radius: var(--ph-r-md);
  color: var(--ph-mute); font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none;
  min-height: 44px; padding: 0 12px; margin-left: 8px; min-width: 72px;
  white-space: nowrap;
}
.themetoggle:hover { border-color: var(--ph-mute); color: var(--ph-ink); }

 
.sec {
  display: grid;
  grid-template-columns: var(--pp-rail) minmax(0, 1fr);
  gap: 0 var(--pp-gap);
  

  padding-block: var(--ph-stack);
  border-top: 1px solid var(--ph-line);
}
.sec.first { border-top: 0; }              

.rail {
  align-self: start; position: sticky; top: 24px;
  display: flex; flex-direction: column; gap: 4px; padding-top: 4px;
}
.rail .num {
  font-family: var(--ph-mono); font-size: var(--ph-t-micro);
  letter-spacing: var(--ph-tr-micro); color: var(--ph-brass);
  font-variant-numeric: tabular-nums;
}
.rail .label {
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none;
  color: var(--ph-mute); line-height: 1.4;
}
.rail::after {
  content: ""; display: block; width: 24px; height: 1px;
  background: var(--ph-line); margin-top: 4px;
}
.col { min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.hero { padding-block: var(--ph-stack) var(--ph-block); display: flex; flex-direction: column; gap: var(--ph-pad); }
.hero.tight { padding-block: var(--ph-block) var(--ph-pad); }
.hero-top {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 24px 48px; align-items: end;
}
.hero-top .left, .hero-top .right { display: flex; flex-direction: column; gap: 16px; }

 

.mono, .machine {
  font-family: var(--ph-mono); font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}



.eyebrow {
  font-family: var(--ph-mono); font-size: var(--ph-t-micro);
  letter-spacing: var(--ph-tr-micro); text-transform: uppercase;
  color: var(--ph-mute); max-width: none;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--ph-line); max-width: 72px; }
.eyebrow.brass { color: var(--ph-brass); }
.eyebrow.brass::after { background: var(--ph-line); }

h1 { max-width: 16ch; }
h2 { max-width: 24ch; text-wrap: balance; }
h3 { max-width: 32ch; }

.lede { font-size: 1.1875rem; line-height: 1.5; color: var(--ph-mute); max-width: var(--ph-measure-lede); }
.body { color: var(--ph-mute); max-width: var(--ph-measure); }
.body p + p { margin-top: 16px; }
.body strong, .body b { color: var(--ph-ink); font-weight: 600; }
p { text-wrap: pretty; }



.caption {
  font-size: var(--ph-t-small); line-height: 1.6;
  color: var(--ph-mute); max-width: 72ch;
}
.pull {
  font-size: clamp(1.25rem, 2vw, 1.4375rem); line-height: 1.4;
  color: var(--ph-ink); letter-spacing: -.008em; max-width: 52ch;
  border-top: 1px solid var(--ph-ink); border-bottom: 1px solid var(--ph-line);
  padding-block: 16px;
}

 

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  appearance: none; cursor: pointer; text-decoration: none;
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none;
  background: var(--ph-deep); color: var(--ph-paper);
  border: 1px solid var(--ph-deep); border-radius: var(--ph-r-md);
  min-height: 44px; padding: 12px 24px; line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--ph-tide); border-color: var(--ph-tide); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--ph-deep); border-color: var(--ph-deep); }
.btn.ghost { background: transparent; color: var(--ph-deep); border-color: var(--ph-line); }
.btn.ghost:hover { background: var(--ph-paper-deep); border-color: var(--ph-deep); color: var(--ph-deep); }
.btn.danger { background: var(--pp-refused); border-color: var(--pp-refused); color: var(--ph-paper); }
.btn.danger:hover { background: var(--ph-ink); border-color: var(--ph-ink); color: var(--ph-paper); }

.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }



[id] { scroll-margin-top: 24px; }

.textlink {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none;
  color: var(--ph-deep); text-decoration: underline;
  text-decoration-thickness: from-font; text-underline-offset: 3px;
}
.textlink:hover { text-decoration-thickness: 2px; }

 

.card {
  background: var(--ph-card); border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-lg); padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
}

.callout {
  border: 1px solid var(--ph-line); background: var(--ph-shoal-soft);
  border-radius: var(--ph-r-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 12px; max-width: 72ch;
}
.callout > .t {
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none;
  color: var(--ph-deep);
}
.callout p { font-size: var(--ph-t-small); line-height: 1.6; }
.callout.warn { background: var(--ph-paper-deep); border-color: var(--pp-refused); }
.callout.warn > .t { color: var(--pp-refused); }
.callout.quiet { background: var(--ph-card); }
.callout.quiet > .t { color: var(--ph-mute); }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  padding: 4px 8px; border-radius: var(--ph-r-sm); white-space: nowrap;
  background: var(--ph-paper-deep); color: var(--ph-mute); border: 1px solid var(--ph-line);
}
.chip.ok { color: var(--pp-granted); border-color: var(--pp-granted); background: transparent; }
.chip.no { color: var(--pp-refused); border-color: var(--pp-refused); background: transparent; }



.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none;
  color: var(--ph-ink); border: 1px solid var(--ph-brass);
  border-radius: var(--ph-r-pill); padding: 4px 12px; background: var(--ph-brass-soft);
}

 
.rules { display: flex; flex-direction: column; border-top: 1px solid var(--ph-ink); }
.rules li {
  list-style: none; display: flex; flex-direction: column; gap: 4px;
  padding-block: 16px; border-bottom: 1px solid var(--ph-line);
}
.rules .h {
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none; color: var(--ph-ink);
}
.rules .p { font-size: var(--ph-t-small); color: var(--ph-mute); line-height: 1.55; max-width: var(--ph-measure); }

.notice { display: flex; flex-direction: column; gap: 8px; max-width: 72ch; }
.notice .nh {
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none; color: var(--pp-granted);
}
.notice p { font-size: var(--ph-t-small); line-height: 1.6; }

.errors { display: flex; flex-direction: column; gap: 8px; max-width: 72ch; }
.errors .eh {
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none; color: var(--pp-refused);
}
.errors .emsg { font-size: var(--ph-t-small); line-height: 1.6; color: var(--ph-ink); }
.errors ul { list-style: none; display: flex; flex-direction: column; gap: 4px; padding-left: 12px; }
.errors li { font-family: var(--ph-sans); font-size: var(--ph-t-micro); color: var(--ph-mute); }
.errors .fixed { font-size: var(--ph-t-small); color: var(--ph-mute); }

 

.scroll {
  overflow-x: auto; border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-lg); background: var(--ph-card);
}
table { border-collapse: collapse; width: 100%; font-size: var(--ph-t-small); min-width: 520px; }
thead th {
  text-align: left; font-family: var(--ph-sans); font-weight: 400;
  font-size: var(--ph-t-micro); letter-spacing: 0;
  text-transform: none; color: var(--ph-mute);
  padding: 12px 16px; border-bottom: 1px solid var(--ph-ink);
  white-space: nowrap; background: var(--ph-card);
}
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--ph-line); vertical-align: top; line-height: 1.5; }
tbody tr:last-child td { border-bottom: 0; }
td.capname { font-family: var(--ph-mono); font-size: var(--ph-t-micro); white-space: nowrap; }
td.dim { color: var(--ph-mute); }

.blockbox {
  font-family: var(--ph-mono); font-size: var(--ph-t-micro); line-height: 1.7;
  background: var(--ph-paper-deep); border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-md); padding: 16px;
  color: var(--ph-ink); overflow-x: auto; white-space: pre;
}
.blockbox.tall { max-height: min(480px, calc(100vh - 140px)); overflow-y: auto;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.copyrow { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.copyrow .blockbox { width: 100%; }






.doc-sec { padding-block: var(--ph-block) var(--ph-stack); }
.docwrap { display: flex; flex-direction: column; gap: 12px; }

.doc {
  background: var(--ph-card);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-lg);
  box-shadow: var(--ph-shadow);
  overflow: clip;                 

  max-width: 920px;
  

  container-type: inline-size;
}


.page { position: relative; padding: 32px; border-top: 1px solid var(--ph-line); }

.page-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding-bottom: 12px; margin-bottom: 24px;
  border-bottom: 1px solid var(--ph-line);
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none;
}


.page-head .pt {
  color: var(--ph-ink);
  font-size: inherit; font-weight: 400; line-height: inherit;
  letter-spacing: inherit; max-width: none; text-wrap: wrap;
}
.page-head .folio { color: var(--ph-mute); white-space: nowrap; }

 
.page.cover {
  background: var(--pp-cover); color: var(--pp-cover-ink);
  padding: 48px 32px;
  display: flex; flex-direction: column; gap: 48px;
  border-top: 0;
}
.cover-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.cover-mark { display: flex; align-items: center; gap: 12px; color: var(--pp-cover-ink); }
.cover-mark svg { height: 40px; width: auto; display: block; }
.cover-mark .w { font-size: 1.375rem; font-weight: 600; letter-spacing: -.025em; }
.cover-type {
  font-family: var(--ph-mono); font-size: var(--ph-t-micro);
  letter-spacing: var(--ph-tr-micro); text-transform: uppercase;
  color: var(--pp-cover-ink); opacity: .78; text-align: right;
}
.cover-title {
  font-family: var(--ph-sans);
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
  letter-spacing: -.02em; text-transform: none; line-height: 1.12;
  color: var(--pp-cover-ink);
}
.cover-foot {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 24px; border-top: 1px solid var(--pp-cover-line);
}
.cover-foot .lbl {
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none;
  color: var(--pp-cover-ink); opacity: .7;
}
.cover-foot h1 {
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.5rem);
  color: var(--pp-cover-ink); max-width: 20ch;
}
.cover-foot .idr {
  font-family: var(--ph-mono); font-size: var(--ph-t-small);
  color: var(--pp-cover-ink); opacity: .78; overflow-wrap: anywhere;
}


.cover-titlewrap { position: relative; }
.specimen {
  position: absolute;
  left: 24px;
  

  bottom: calc(-0.7 * (1em + 20px));
  transform: rotate(-7deg); transform-origin: left center;
  font-family: var(--ph-mono);
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.375rem);    
  letter-spacing: var(--pp-tr-title); text-transform: uppercase;
  line-height: 1;
  color: var(--ph-brass-inverse);
  border: 2px solid var(--ph-brass-inverse); border-radius: var(--ph-r-sm);
  padding: 8px 16px;
  pointer-events: none;
}

 
.bearer-grid { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 32px; }
.portrait {
  border: 1px solid var(--ph-line); border-radius: var(--ph-r-md);
  background: var(--ph-paper-deep); aspect-ratio: 5 / 7;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 16px; text-align: center; color: var(--ph-deep);
}
.portrait svg { height: 48px; width: auto; }
.portrait .np {
  font-family: var(--ph-mono); font-size: var(--ph-t-micro);
  letter-spacing: var(--ph-tr-micro); text-transform: uppercase;
  color: var(--ph-mute); line-height: 1.5;
}
.fields { display: flex; flex-direction: column; }
.fields > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 4px 24px; padding-block: 8px; border-bottom: 1px solid var(--ph-line); }
.fields > div:last-child { border-bottom: 0; }
.fields dt {
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none;
  color: var(--ph-mute); padding-top: 4px;
}
.fields dd {
  font-family: var(--ph-mono); font-size: var(--ph-t-small);
  color: var(--ph-ink); line-height: 1.5; overflow-wrap: anywhere;
}
.observations {
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ph-ink);
  display: flex; flex-direction: column; gap: 8px;
}
.observations .lbl {
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none; color: var(--ph-mute);
}
.observations p { font-size: var(--ph-t-small); line-height: 1.6; max-width: var(--ph-measure); }

 


.mrz {
  container-type: inline-size;
  background: var(--ph-paper-deep); border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-md); padding: 16px;
  overflow-x: auto;
}
.mrz span {
  display: block; white-space: pre; font-family: var(--ph-mono);
  line-height: 2; color: var(--ph-ink);
  letter-spacing: calc(var(--pp-tr-mrz) * 1em);
  font-size: clamp(8px,
                   calc((100cqi - 2px) / (44 * (0.6 + var(--pp-tr-mrz)))),
                   var(--ph-t-small));
}
.decode { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 0 32px; }
.decode > div {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 4px 16px;
  padding-block: 8px; border-bottom: 1px solid var(--ph-line); align-items: baseline;
}
.decode .pos {
  font-family: var(--ph-mono); font-size: var(--ph-t-micro);
  color: var(--ph-mute); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.decode .v { font-family: var(--ph-mono); font-size: var(--ph-t-micro); color: var(--ph-ink); overflow-wrap: anywhere; }
.decode .k { grid-column: 2; font-size: var(--ph-t-micro); color: var(--ph-mute); line-height: 1.5; }

 
.permits { display: flex; flex-direction: column; }
.permit {
  display: grid; grid-template-columns: minmax(0, 1fr) 176px;
  gap: 16px 24px; align-items: center;
  padding-block: 24px; border-bottom: 1px solid var(--ph-line);
}
.permit:last-child { border-bottom: 0; }
.permit .cap {
  font-family: var(--ph-mono); font-size: var(--ph-t-small);
  color: var(--ph-ink); margin-bottom: 4px;
}
.permit .why { font-size: var(--ph-t-small); line-height: 1.55; color: var(--ph-ink); }
.permit .ifskip { font-size: var(--ph-t-small); line-height: 1.55; color: var(--ph-mute); margin-top: 4px; }
.permit .ref {
  font-family: var(--ph-mono); font-size: var(--ph-t-micro);
  color: var(--ph-mute); margin-left: 8px;
}



.stamp {
  justify-self: end;
  display: inline-flex; flex-direction: column; gap: 4px;
  border: 2px solid currentColor; border-radius: var(--ph-r-sm);
  box-shadow: inset 0 0 0 1px currentColor;
  padding: 8px 12px; text-align: left;
  font-family: var(--ph-mono); text-transform: uppercase;
  color: var(--pp-granted);
  mix-blend-mode: var(--pp-blend);
  transform: rotate(var(--tilt, -3deg));
}
.stamp .s1 { font-size: var(--ph-t-small); letter-spacing: var(--pp-tr-face); line-height: 1.2; white-space: nowrap; }


.stamp .s2 { font-size: var(--ph-t-micro); letter-spacing: var(--ph-tr-micro); opacity: .92; white-space: nowrap; }
.stamp.no { color: var(--pp-refused); }

@media (prefers-reduced-motion: no-preference) {
  

  .stamp { animation: land .32s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes land {
    from { opacity: 0; transform: rotate(var(--tilt, -3deg)) scale(1.6); }
    to   { opacity: 1; transform: rotate(var(--tilt, -3deg)) scale(1); }
  }
  .permit:nth-child(1) .stamp { animation-delay: .12s; }
  .permit:nth-child(2) .stamp { animation-delay: .20s; }
  .permit:nth-child(3) .stamp { animation-delay: .28s; }
  .permit:nth-child(4) .stamp { animation-delay: .36s; }
  .permit:nth-child(5) .stamp { animation-delay: .44s; }
  .permit:nth-child(n+6) .stamp { animation-delay: .50s; }
}


.permit-note {
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ph-line);
  font-size: var(--ph-t-small); line-height: 1.6;
  color: var(--ph-mute); max-width: none;
}
.permit-note > .m { display: block; max-width: 72ch; }


.decode + .permit-note,
.scroll + .permit-note,
table + .permit-note { border-top: 0; padding-top: 0; margin-top: 32px; }

 
.page.declaration { background: var(--ph-paper-deep); }
.page.declaration thead th { background: var(--ph-paper-deep); }
.page.declaration .scroll { background: var(--ph-paper-deep); }
.nothing {
  border: 1px dashed var(--ph-line); border-radius: var(--ph-r-md);
  padding: 24px; display: flex; flex-direction: column; gap: 8px;
}
.nothing .h {
  font-family: var(--ph-sans); font-size: var(--ph-t-h3);
  letter-spacing: 0; text-transform: none; color: var(--ph-ink);
}
.nothing p {
  font-size: var(--ph-t-small); line-height: 1.6; color: var(--ph-mute); max-width: 64ch;
  text-wrap: wrap;    
}


.signature {
  margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--ph-ink);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; max-width: none;
  font-family: var(--ph-mono); font-size: var(--ph-t-micro);
  letter-spacing: var(--ph-tr-micro); text-transform: uppercase; color: var(--ph-ink);
}
.signature .r { color: var(--ph-mute); }

.doc-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; max-width: none;
  font-family: var(--ph-mono); font-size: var(--ph-t-micro);
  letter-spacing: var(--pp-tr-doc); color: var(--ph-mute);
}

 



.picker { display: flex; flex-direction: column; gap: 0; }
.tablist {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px 4px 0;                   
  border-bottom: 1px solid var(--ph-line);
}
.tab {
  appearance: none; background: transparent; cursor: pointer;
  border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--ph-r-md) var(--ph-r-md) 0 0;
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none;
  color: var(--ph-mute); min-height: 44px; padding: 0 16px;
  margin-bottom: -1px;    
}
.tab:hover { color: var(--ph-ink); }
.tab[aria-selected="true"] {
  color: var(--ph-deep); background: var(--ph-card);
  border-color: var(--ph-line); border-bottom: 1px solid var(--ph-card);
}

@media (max-width: 640px) {
  

  .tablist {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0; padding: 0; border: 1px solid var(--ph-line);
    border-radius: var(--ph-r-md) var(--ph-r-md) 0 0; overflow: hidden;
  }
  .tab {
    border: 0; border-radius: 0; padding: 0 12px;
    border-right: 1px solid var(--ph-line);
    border-bottom: 1px solid var(--ph-line);
  }
  .tab:nth-child(2n) { border-right: 0; }
  .tab:nth-last-child(-n+2) { border-bottom: 0; }
  .tab[aria-selected="true"] {
    background: var(--ph-card); color: var(--ph-deep);
    border-bottom-color: var(--ph-line);
  }
  .tabpanel { border-top: 0; }

  

  .tabpanel .btn { width: 100%; }
}

.tabpanel {
  border: 1px solid var(--ph-line); border-top: 0;
  border-radius: 0 0 var(--ph-r-lg) var(--ph-r-lg);
  background: var(--ph-card); padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.tabpanel .plat {
  font-size: var(--ph-t-small); line-height: 1.6;
  color: var(--ph-mute); max-width: 72ch;
}
.tabpanel .next { font-size: var(--ph-t-small); color: var(--ph-mute); max-width: 64ch; }

 



.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); gap: 12px; }
.door {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  background: var(--ph-card); border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-lg); padding: 24px;
  color: var(--ph-ink); text-decoration: none;
  transition: border-color .14s ease, background .14s ease;
}
.door:hover { border-color: var(--ph-deep); background: var(--ph-shoal-soft); }
.door .k {
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none;
  color: var(--ph-brass);
}
.door .t { font-size: var(--ph-t-h3); font-weight: 600; letter-spacing: -.014em; }
.door .d { font-size: var(--ph-t-small); color: var(--ph-mute); line-height: 1.5; }


.door .go {
  display: inline-block; margin-top: auto; padding-top: 4px;
  color: var(--ph-deep); line-height: 1;
  transition: transform .14s ease;
}
.door:hover .go { transform: translateX(4px); }


@media (prefers-reduced-motion: reduce) {
  .door, .door .go { transition: none; }
  .door:hover .go { transform: none; }
}


@media (max-width: 640px) {
  .door .go { display: none; }
}

 

.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); gap: 12px; }
.path-card { position: relative; }
.path-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.path-card label {
  display: flex; flex-direction: column; gap: 8px; cursor: pointer; height: 100%;
  background: var(--ph-card); border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-lg); padding: 24px;
  transition: border-color .14s ease, background .14s ease;
}
.path-card label:hover { border-color: var(--ph-mute); }
.path-card input:checked + label { border-color: var(--ph-deep); background: var(--ph-shoal-soft); }
.path-card input:focus-visible + label { outline: 3px solid var(--ph-deep); outline-offset: 4px; }
.path-card .t { font-size: var(--ph-t-h3); font-weight: 600; letter-spacing: -.014em; }
.path-card .d { font-size: var(--ph-t-small); color: var(--ph-mute); line-height: 1.5; }

.drop {
  border: 1px dashed var(--ph-line); border-radius: var(--ph-r-lg);
  background: var(--ph-card); padding: 24px;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  transition: border-color .14s ease, background .14s ease;
}
.drop.over { border-color: var(--ph-deep); background: var(--ph-shoal-soft); }
.drop .hint { font-size: var(--ph-t-small); color: var(--ph-mute); }
.drop .picked { font-family: var(--ph-mono); font-size: var(--ph-t-micro); color: var(--pp-granted); }


.drop input[type="file"] { font-family: var(--ph-mono); font-size: var(--ph-t-micro); color: var(--ph-mute); width: 100%; min-height: 44px; }
.drop.disabled { opacity: .45; }

textarea.paste, input.field, select.field {
  width: 100%; font-family: var(--ph-mono); font-size: var(--ph-t-small);
  line-height: 1.6; color: var(--ph-ink); background: var(--ph-card);
  border: 1px solid var(--ph-line); border-radius: var(--ph-r-md); padding: 12px;
}
textarea.paste { min-height: 176px; resize: vertical; }
textarea.paste:disabled { opacity: .45; }


select.field { min-height: 44px; cursor: pointer; max-width: 40ch; }



.vote { display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; position: relative; z-index: 1; }
.vote-status {
  flex-basis: 100%; margin: 0;
  font-size: var(--ph-t-small); line-height: 1.4; color: var(--ph-ink);
}
.vote button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 10px;
  font: inherit; font-size: var(--ph-t-small); line-height: 1;
  color: var(--ph-mute); background: var(--ph-paper-deep);
  border: 1px solid var(--ph-line); border-radius: var(--ph-r-pill); cursor: pointer;
}
.vote button:hover { color: var(--ph-ink); border-color: var(--ph-mute); }


.vote button[aria-pressed="true"] {
  color: var(--ph-paper); background: var(--ph-deep); border-color: var(--ph-deep);
}
.vote button[value="down"][aria-pressed="true"] {
  background: var(--pp-refused); border-color: var(--pp-refused);
}


.vote-failed button { border-color: var(--pp-refused); }


@media (max-width: 640px) {
  .vote button { min-height: 44px; padding: 4px 14px; }
}



.galleryline {
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: center; justify-content: space-between;
  padding: 12px 0; border-top: 1px solid var(--ph-line);
}
.galleryline .glabel { font-size: var(--ph-t-small); color: var(--ph-mute); }
.galleryline .glabel .textlink { margin-left: 8px; }



.listbox {
  display: flex; flex-direction: column; gap: 16px;
  border: 1px solid var(--ph-line); border-radius: var(--ph-r-md);
  background: var(--ph-card); padding: 20px; max-width: var(--ph-measure);
}
.listbox .formrow { max-width: none; }
.formrow { display: flex; flex-direction: column; gap: 8px; max-width: 60ch; }
.formrow > label {
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none; color: var(--ph-mute);
}
.formrow .help { font-size: var(--ph-t-small); color: var(--ph-mute); }


.formrow .fielderr { font-size: var(--ph-t-small); color: var(--pp-refused); margin: 0; }
.formrow:has(.fielderr:not([hidden])) select.field { border-color: var(--pp-refused); }

.step { border-top: 1px solid var(--ph-line); padding-block: 48px; }
.step.first { border-top: 0; padding-top: 24px; }
.step-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.step-head .k {
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none; color: var(--ph-brass);
}
.step-body { display: flex; flex-direction: column; gap: 16px; }


.step-body.narrow { max-width: 72ch; }
.pathpanel { border-top: 1px solid var(--ph-line); padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.awaiting {
  border: 1px dashed var(--ph-line); border-radius: var(--ph-r-lg); padding: 24px;
  font-size: var(--ph-t-small); line-height: 1.6;
  color: var(--ph-mute); background: var(--ph-card); max-width: 72ch;
}


.awaiting p + p { margin-top: 12px; }


 



.promptbox {
  border: 1px solid var(--ph-line); border-radius: var(--ph-r-lg);
  background: var(--ph-card);
}
.promptbox > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; min-height: 44px;           
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none;
  color: var(--ph-deep);
}
.promptbox > summary::-webkit-details-marker { display: none; }
.promptbox > summary::marker { content: ""; }
.promptbox > summary::before {
  content: "\203A"; font-family: var(--ph-sans); font-size: 1.125rem; line-height: 1;
  transition: transform .14s ease;
}
.promptbox[open] > summary::before { transform: rotate(90deg); }
.promptbox > summary:hover { background: var(--ph-paper-deep); border-radius: var(--ph-r-lg); }
.promptbody {
  padding: 0 18px 18px;
  display: flex; flex-direction: column; gap: 12px;
}


.promptbody .blockbox { width: 100%; }
@media (prefers-reduced-motion: reduce) { .promptbox > summary::before { transition: none; } }

@media (max-width: 640px) {
  .awaiting { padding: 16px; }
  .promptbox > summary { padding: 12px 14px; }
  .promptbody { padding: 0 14px 14px; }
  

  .paths > .card { padding: 20px; }
}
 



.log { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--ph-ink); }
.log > li {
  border-bottom: 1px solid var(--ph-line); padding-block: 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.log > li:last-child { border-bottom: 0; }
.log h3 { font-size: var(--ph-t-h3); font-weight: 600; letter-spacing: -.014em; }
.log p { font-size: var(--ph-t-small); line-height: 1.6; color: var(--ph-mute); max-width: var(--ph-measure); }
.log p + p { margin-top: 8px; }
.log b, .log strong { color: var(--ph-ink); font-weight: 600; }

ol.steps { padding-left: 0; list-style: none; counter-reset: st; display: flex; flex-direction: column; gap: 12px; }
ol.steps li {
  counter-increment: st; display: grid; grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px; font-size: var(--ph-t-small); color: var(--ph-mute); line-height: 1.55; max-width: var(--ph-measure);
}
ol.steps li::before {
  content: counter(st, decimal-leading-zero);
  font-family: var(--ph-mono); font-size: var(--ph-t-micro);
  color: var(--ph-brass); padding-top: 4px;
}



.rawlink {
  font-family: var(--ph-sans); font-size: 0.9em; color: var(--ph-mute);
  overflow-wrap: anywhere;
}








.gate {
  display: flex; flex-direction: column; gap: 12px; max-width: 72ch;
  background: color-mix(in srgb, var(--pp-refused) 7%, var(--ph-card));
  border: 1px solid color-mix(in srgb, var(--pp-refused) 45%, var(--ph-line));
  border-radius: var(--ph-r-md); padding: 20px;
}
.gate .gh {
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none;
  color: var(--pp-refused);
}
.gate p { font-size: var(--ph-t-small); line-height: 1.6; max-width: var(--ph-measure); }
.gate .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; }



.leak-warn {
  

  display: grid; gap: 12px; max-width: 72ch;
  background: color-mix(in srgb, var(--ph-brass) 7%, var(--ph-card));
  border: 1px solid color-mix(in srgb, var(--ph-brass) 45%, var(--ph-line));
  border-radius: var(--ph-r-md); padding: 20px;
}
.leak-warn .lh {
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none;
  color: var(--ph-brass);
}
.leak-warn p { font-size: var(--ph-t-small); line-height: 1.6; max-width: var(--ph-measure); }


#leak-warn-lines { max-height: min(480px, calc(100vh - 140px)); overflow-y: auto; }

.checkrow {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px;
  align-items: start; font-size: var(--ph-t-small); line-height: 1.55;
  max-width: var(--ph-measure); cursor: pointer;
}
.checkrow input[type="checkbox"] {
  width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ph-deep); cursor: pointer;
}
.checkrow span { color: var(--ph-ink); }
.checkrow .sub { display: block; color: var(--ph-mute); margin-top: 4px; }



.sendbox { display: flex; flex-direction: column; gap: 16px; max-width: 60ch; }
.sendbox .sh {
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none; color: var(--ph-mute);
}
.sendbox[hidden] { display: none; }
.sendbox .sent {
  border: 1px solid var(--pp-granted); border-radius: var(--ph-r-md);
  padding: 14px 16px; font-size: var(--ph-t-small); line-height: 1.6; color: var(--ph-ink);
}



.statgrid {
  

  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 1px; background: var(--ph-line); border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-md); overflow: hidden; max-width: 72ch;
}
.stat { background: var(--ph-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.stat .n { font-size: 1.5rem; line-height: 1.1; letter-spacing: var(--ph-tr-head); color: var(--ph-ink); }
.stat .n.warn { color: var(--pp-refused); }
.stat .l {
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: 0; text-transform: none; color: var(--ph-mute);
}



.meter { display: flex; flex-direction: column; gap: 8px; max-width: 72ch; }
.meter .track {
  height: 6px; border-radius: var(--ph-r-pill);
  background: var(--ph-paper-deep); overflow: hidden;
}
.meter .fill { height: 100%; background: var(--ph-deep); border-radius: var(--ph-r-pill); }
.meter .fill.low { background: var(--pp-refused); }
.meter .cap { font-size: var(--ph-t-small); color: var(--ph-mute); }

 

.foot {
  margin-top: 24px; border-top: 1px solid var(--ph-ink);
  padding-block: 32px 72px;
  display: grid; grid-template-columns: var(--pp-rail) minmax(0, 1fr);
  gap: 24px var(--pp-gap);
}
.foot .fmark { display: flex; flex-direction: column; gap: 12px; }
.foot .fmark .ph-lockup { min-height: 44px; text-decoration: none; }
.foot .fmark .ph-lockup svg { color: var(--ph-deep); }
.foot .fbody { display: flex; flex-direction: column; gap: 16px; }
.foot p { font-size: var(--ph-t-small); color: var(--ph-mute); max-width: var(--ph-measure); }
.foot .flinks { display: flex; gap: 16px; flex-wrap: wrap; }
.foot .flinks a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: var(--pp-tr-doc); color: var(--ph-mute); text-decoration: none;
}
.foot .flinks a:hover { color: var(--ph-deep); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  

  .foot .flinks { display: flex; flex-direction: column; gap: 0; }
  .foot .flinks a { justify-content: flex-start; }
}
.foot .meta {
  font-family: var(--ph-sans); font-size: var(--ph-t-micro);
  letter-spacing: var(--pp-tr-doc); color: var(--ph-mute); line-height: 1.8;
}

.legal { display: flex; flex-direction: column; gap: 32px; max-width: 70ch; }
.legal h2 { font-size: var(--ph-t-h2); max-width: none; }
.legal h3 { font-size: var(--ph-t-h3); }
.legal p { font-size: var(--ph-t-body); color: var(--ph-mute); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 16px; display: flex; flex-direction: column; gap: 8px; }
.legal li { font-size: var(--ph-t-body); color: var(--ph-mute); }
.legal li b, .legal p b { color: var(--ph-ink); font-weight: 600; }
.legal .block { display: flex; flex-direction: column; gap: 12px; }



.slot {
  font-family: var(--ph-sans); font-size: var(--ph-t-small);
  color: var(--ph-ink); background: var(--ph-brass-soft);
  border: 1px solid var(--ph-brass); border-radius: var(--ph-r-sm);
  padding: 4px 8px; overflow-wrap: anywhere;
}




@media (max-width: 1000px) {
  .hero-top { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
}

@media (max-width: 900px) {
  :root { --pp-rail: 0px; --pp-gap: 0px; }
  .sec, .foot { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; flex-direction: row; align-items: baseline; gap: 12px; margin-bottom: 16px; }
  .rail::after { display: none; }
  .bearer-grid { grid-template-columns: 120px minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 760px) {
  .permit { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .stamp { justify-self: start; }
}

 
@media (max-width: 700px) {
  .navlink.drop-md { display: none; }
  .themetoggle { margin-left: 4px; }
}



@media (max-width: 833px) {
  .topbar:has(.navlink[href="/upload"]) .navlink.drop-md { display: none; }
}
@media (max-width: 741px) {
  .topbar:has(.navlink[href="/upload"]) .ph-lockup .ph-product { display: none; }
}


@media (max-width: 640px) {
  .topbar:has(.navlink[href="/upload"]) .navlink[href="/about"] { display: none; }
}

@media (max-width: 640px) {
  .wrap { padding-inline: 20px; }
  

  .sec { padding-block: var(--ph-block) var(--ph-band); }
  

  .foot { margin-top: 0; }
  .page { padding: 24px; }
  .page.cover { padding: 32px 24px; gap: 32px; }
  

  .page-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .cover-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cover-type { text-align: left; }
  .bearer-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .fields > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  

  .mrz { --pp-tr-mrz: 0; padding: 12px; }
  .doc { border-radius: var(--ph-r-md); }

  

  .cover-titlewrap { align-self: flex-start; }
  .specimen {
    left: auto;
    

    right: max(-163px, calc(154px - 100cqi));
    bottom: -20px;
    transform-origin: right center;
    

    font-size: 1.625rem;
    padding: 6px 10px;
  }

  

  .portrait {
    aspect-ratio: auto;
    max-width: none;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    text-align: left;
  }
  .portrait svg { height: 56px; }
}



@media (max-width: 506px) {
  .navlink.drop-sm { display: none; }
}

@media (max-width: 460px) {
  

  .topbar .ph-lockup .ph-product { display: none; }
  .topbar .ph-lockup .ph-wordmark { font-size: 1.25rem; }
}

@media (max-width: 430px) {
  .navlink { padding: 0 8px; }
  

  .topbar:has(.navlink[href="/upload"]) .ph-lockup svg { display: none; }
}



button, .btn, input:not([type=checkbox]):not([type=radio]), select { min-height:48px; }
input:not([type=checkbox]):not([type=radio]), textarea, select { border-color:var(--ph-mute); border-radius:8px; }
input[type=checkbox], input[type=radio] { accent-color:var(--ph-deep); }
input::placeholder, textarea::placeholder { color:var(--ph-mute); opacity:1; }
:focus-visible { outline:3px solid var(--ph-deep); outline-offset:4px; }

 
select.field { font-family:var(--ph-sans); }