.f-pat,
.i-pat,
.i-pats{
  --pat-s1: 0.5rem;
  --pat-s2: 1rem;
  --pat-s3: 1.5rem;
  --pat-s4: 2rem;
  --pat-s5: 2.5rem;
  --pat-s6: 3rem;

  --i-pat-ink: var(--color-text);
  --i-pat-muted: var(--color-text-muted);
  --i-pat-rule: var(--color-border);
  --i-pat-field: var(--color-bg);
  --i-pat-raise: var(--color-bg-elevated);
  --i-pat-chalk: var(--color-primary);
  --i-pat-thread: var(--color-accent);
  --i-pat-serif: var(--font-pt-serif, 'PT Serif'), Georgia, 'Times New Roman', serif;
  
  --i-pat-grid: color-mix(in oklab, var(--color-primary) 10%, transparent);

  background: var(--i-pat-field);
  color: var(--i-pat-ink);
  font-family: var(--i-pat-serif);
}
.f-pat a:focus-visible,
.i-pat a:focus-visible,
.i-pats a:focus-visible{
  outline: 2px solid var(--i-pat-chalk);
  outline-offset: 2px;
}

.f-pat-piece-meta,
.f-pat-bundle-meta,
.i-pats-row-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0.25rem 0 0;
  font-family: var(--font-role-mono);
  font-size: 0.6875rem;
  color: var(--i-pat-muted);
}
.f-pat-piece-meta > * + *,
.f-pat-bundle-meta > * + *,
.i-pats-row-meta > * + *{
  margin-left: var(--pat-s2);
}
.f-pat-piece-meta > * + *::before,
.f-pat-bundle-meta > * + *::before,
.i-pats-row-meta > * + *::before{
  content: '|';
  margin-right: var(--pat-s2);
  color: var(--i-pat-rule);
}


.i-pats-envelope{
  background-color: var(--i-pat-raise);
  background-image: repeating-linear-gradient(to right, transparent 0 35px, var(--i-pat-grid) 35px 36px),
    repeating-linear-gradient(to bottom, transparent 0 35px, var(--i-pat-grid) 35px 36px);
  border-bottom: 1px solid var(--i-pat-rule);
  padding-top: var(--pat-s4);
}
.i-pats-envelope-inner{
  display: flex;
  flex-direction: column;
  gap: var(--pat-s2);
  padding-bottom: var(--pat-s3);
}
.i-pats-line{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pat-s1) var(--pat-s2);
  margin: 0;
  font-family: var(--font-role-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--i-pat-muted);
}
.i-pats-letter{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--i-pat-chalk);
  color: var(--i-pat-raise);
  font-family: var(--i-pat-serif);
  font-size: 1.25rem;
  font-weight: 700;
}
.i-pats-slug{
  color: var(--i-pat-ink);
  font-weight: 700;
}
.i-pats-count{
  margin-left: auto;
}
.i-pats-title{
  margin: 0;
  font-family: var(--i-pat-serif);
  font-size: clamp(2.1rem, 2.8vw + 1.2rem, 3.1rem);
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}
.i-pats-desc{
  margin: 0;
  max-width: 66ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--i-pat-muted);
}
.i-pats-body{
  padding-block: var(--pat-s3) var(--pat-s6);
}
.i-pats-bundles{
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--i-pat-chalk);
}
.i-pats-row{
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) auto;
  gap: var(--pat-s2);
  align-items: baseline;
  padding: 0.65rem 0.2rem;
  border-bottom: 1px dotted var(--i-pat-rule);
}
.i-pats-tkt{
  font-family: var(--font-role-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--i-pat-chalk);
  border: 1px solid color-mix(in oklab, var(--i-pat-chalk) 45%, transparent);
  padding: 0.12rem 0.4rem;
  text-align: center;
  white-space: nowrap;
}
.i-pats-row-title a{
  font-family: var(--i-pat-serif);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--i-pat-ink);
  text-decoration: none;
}
.i-pats-row-title a:hover{
  text-decoration: underline wavy var(--i-pat-thread);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.i-pats-cut{
  font-family: var(--font-role-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--i-pat-muted);
  max-width: 9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.i-pats-empty{
  padding-top: var(--pat-s2);
  border-top: 2px solid var(--i-pat-chalk);
  color: var(--i-pat-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.i-pats-more{
  margin-top: var(--pat-s5);
}
.i-pats-more a{
  font-family: var(--font-role-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--i-pat-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--i-pat-chalk);
  padding-bottom: 0.3rem;
}
.i-pats-more a:hover{
  color: var(--i-pat-chalk);
}
.i-pats .ad-label{
  color: var(--i-pat-muted);
}

.i-pats-cutrail{
  margin-top: var(--pat-s4);
  background: var(--i-pat-raise);
  border: 1.5px dashed color-mix(in oklab, var(--i-pat-chalk) 45%, transparent);
  padding: var(--pat-s2) var(--pat-s3);
}
.i-pats-cutrail-title{
  margin: 0 0 var(--pat-s1);
  font-family: var(--font-role-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--i-pat-chalk);
}
.i-pats-cutrail-list{
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--i-pat-chalk);
}
.i-pats-cutrail-row{
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  gap: var(--pat-s2);
  align-items: start;
  padding-block: 0.6rem;
}
.i-pats-cutrail-row + .i-pats-cutrail-row{
  border-top: 1px dotted var(--i-pat-rule);
}
.i-pats-cutrail-num{
  justify-self: start;
  background: var(--i-pat-chalk);
  color: var(--i-pat-raise);
  font-family: var(--font-role-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.12rem 0.35rem;
  line-height: 1.3;
}
.i-pats-cutrail-link{
  display: block;
  font-family: var(--i-pat-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--i-pat-ink);
  text-decoration: none;
}
.i-pats-cutrail-link:hover{
  text-decoration: underline wavy var(--i-pat-thread);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.i-pats-cutrail-views{
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-role-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--i-pat-chalk);
}
@media (max-width: 560px){.i-pats-row{
    grid-template-columns: 3.6rem minmax(0, 1fr);
  }}
@media (max-width: 560px){.i-pats-cut{
    display: none;
  }}
@media (max-width: 560px){.i-pats-count{
    margin-left: 0;
  }}

.i-pats-row:has(.i-pats-row-thumb){
  grid-template-columns: 4.6rem 5rem minmax(0, 1fr) auto;
  align-items: center;
}
.i-pats-row-thumb{
  display: block;
  border: 1px solid color-mix(in oklab, var(--i-pat-chalk) 45%, transparent);
  background: var(--i-pat-raise);
  line-height: 0;
}
.i-pats-row-thumb:hover{
  border-color: var(--i-pat-chalk);
}
.i-pats-row-img{
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@media (max-width: 560px){.i-pats-row:has(.i-pats-row-thumb){
    grid-template-columns: 3.6rem 3.75rem minmax(0, 1fr);
    align-items: start;
  }}