/* PainKiller Labs — the sibling skin.
   byzyb.ai and pklabs.ca share one compiled design system (ploy-styles.css).
   This file is the only thing that makes them look like different companies.
   Load it AFTER ploy-styles.css. */

.dark,
:root {
    --pk-accent: #FF6500;        /* the orange from the logo mark */
    --pk-on-accent: #1B1A1F;     /* the near-black from the logo mark */
    --pk-paper: #F4F1EB;         /* the off-white from the logo mark */

    /* Re-point the shared system's accent at PainKiller orange. */
    --ploy-accent-primary: #FF6500;
}

/* Utility classes the shared stylesheet doesn't ship, since it was compiled
   for byzyb's palette. Kept deliberately small. */
.bg-pk-accent { background-color: var(--pk-accent); }
.text-pk-accent { color: var(--pk-accent); }
.text-pk-on-accent { color: var(--pk-on-accent); }
.border-pk-accent { border-color: var(--pk-accent); }

.hover\:border-pk-accent\/60:hover { border-color: rgba(255, 101, 0, 0.6); }
.hover\:text-pk-accent:hover { color: var(--pk-accent); }

/* Desktop nav. Bigger, brighter and less letter-spaced than the mono
   eyebrows elsewhere: this one has to be read, not just seen. */
.pk-nav-link {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ploy-text-primary) 82%, transparent);
    transition: color 0.3s ease;
}
.pk-nav-link:hover { color: var(--ploy-text-primary); }

/* Long-form legal and support copy. */
.prose-pk h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 2.75rem 0 0.85rem;
    color: var(--ploy-text-primary);
}
.prose-pk h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    margin: 1.75rem 0 0.5rem;
    color: var(--ploy-text-primary);
}
.prose-pk p,
.prose-pk li {
    font-size: 0.98rem;
    line-height: 1.85;
    color: var(--ploy-text-secondary);
}
.prose-pk p { margin: 0 0 1rem; }
.prose-pk ul { margin: 0 0 1rem; padding-left: 1.15rem; list-style: disc; }
.prose-pk li { margin-bottom: 0.4rem; }
.prose-pk a { color: var(--pk-accent); text-decoration: underline; text-underline-offset: 3px; }
.prose-pk strong { color: var(--ploy-text-primary); font-weight: 600; }

/* ------------------------------------------------------------------
   Utilities the shared stylesheet does not ship.

   ploy-styles.css is a COMPILED Tailwind build — it only contains the
   classes byzyb.ai happens to use. Any class used here but not there
   silently does nothing. `node shared/build.mjs` warns when that happens;
   when it does, add the class below.
   ------------------------------------------------------------------ */

/* spacing */
.mt-2  { margin-top: 0.5rem; }
.mt-5  { margin-top: 1.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-9  { margin-top: 2.25rem; }
.mt-11 { margin-top: 2.75rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.p-5   { padding: 1.25rem; }
.p-7   { padding: 1.75rem; }
.py-3  { padding-block: 0.75rem; }
.py-20 { padding-block: 5rem; }
.pt-32 { padding-top: 8rem; }
.pt-36 { padding-top: 9rem; }
.pb-24 { padding-bottom: 6rem; }
.gap-14 { gap: 3.5rem; }
.gap-px { gap: 1px; }

/* sizing */
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.w-40 { width: 10rem; }
.max-w-4xl     { max-width: 56rem; }
.max-w-\[26rem\] { max-width: 26rem; }
.max-w-\[46rem\] { max-width: 46rem; }
.max-w-\[48rem\] { max-width: 48rem; }
.max-w-\[62rem\] { max-width: 62rem; }

/* type */
.font-semibold { font-weight: 600; }
.text-\[0\.68rem\] { font-size: 0.68rem; }
.text-\[0\.92rem\] { font-size: 0.92rem; }
.text-\[0\.98rem\] { font-size: 0.98rem; }
.text-\[1\.2rem\]  { font-size: 1.2rem; }
.text-\[1\.35rem\] { font-size: 1.35rem; }
.text-\[1\.6rem\]  { font-size: 1.6rem; }
.text-\[1\.1rem\]  { font-size: 1.1rem; }
.text-\[clamp\(1\.5rem\,3vw\,2\.25rem\)\]   { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.text-\[clamp\(2\.75rem\,6vw\,4\.5rem\)\]   { font-size: clamp(2.75rem, 6vw, 4.5rem); }
.text-\[clamp\(3rem\,7vw\,5\.5rem\)\]       { font-size: clamp(3rem, 7vw, 5.5rem); }
.text-\[clamp\(2\.1rem\,4\.6vw\,3\.6rem\)\] { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.leading-\[1\.12\] { line-height: 1.12; }
.leading-\[1\.2\]  { line-height: 1.2; }
.leading-\[1\.25\] { line-height: 1.25; }
.leading-\[1\.6\]  { line-height: 1.6; }
.leading-\[1\.7\]  { line-height: 1.7; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.underline-offset-4 { text-underline-offset: 4px; }

/* layout */
.pointer-events-none { pointer-events: none; }

/* Shrink-wraps "The company." so the circular mark can centre over the
   heading rather than over the whole column. */
.pk-company-mark {
    width: max-content;
    max-width: 100%;
}
.pk-company-mark img {
    display: block;
    margin-inline: auto;
}

/* An aside inside running prose. Used for the example that carries an
   argument rather than continuing it. */
.pk-aside {
    border-left: 2px solid var(--pk-accent);
    padding: 0.15rem 0 0.15rem 1.6rem;
}
.pk-aside p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ploy-text-secondary);
}

/* Portrait frame. A background-image rather than an <img> so that a missing
   file renders as an empty panel instead of a broken-image icon. */
.pk-portrait {
    width: 100%;
    max-width: 22rem;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--ploy-border-primary);
    background-color: color-mix(in srgb, var(--ploy-text-primary) 5%, transparent);
    background-size: cover;
    background-position: center 22%;
}

/* The circular mark, sunk into the hero like a seal pressed into the page.
   Hidden on narrow screens, where it would only crowd the type. */
.pk-hero-seal {
    position: absolute;
    top: 50%;
    right: -7rem;
    width: 40rem;
    max-width: 45vw;
    transform: translateY(-50%);
    opacity: 0.085;
    pointer-events: none;
    user-select: none;
}
@media (max-width: 1023px) { .pk-hero-seal { display: none; } }

/* colour with alpha */
.bg-pk-accent\/10          { background-color: rgba(255, 101, 0, 0.1); }
.border-pk-accent\/50      { border-color: rgba(255, 101, 0, 0.5); }
.bg-ploy-border-primary\/50 { background-color: color-mix(in srgb, var(--ploy-border-primary) 50%, transparent); }

/* responsive */
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .md\:h-8    { height: 2rem; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:h-11   { height: 2.75rem; }
    .md\:h-52   { height: 13rem; }
    .md\:w-52   { width: 13rem; }
    .md\:py-24  { padding-block: 6rem; }
    .md\:pt-40  { padding-top: 10rem; }
    .md\:pt-48  { padding-top: 12rem; }
    .md\:pb-28  { padding-bottom: 7rem; }
    .md\:pb-32  { padding-bottom: 8rem; }
    .md\:grid-cols-\[1fr_1\.1fr\] { grid-template-columns: 1fr 1.1fr; }
}

/* ------------------------------------------------------------------
   "How I build": three layers, a path drawn as you scroll, and the bee
   riding it. The geometry is computed in about.html; this is the skin.
   ------------------------------------------------------------------ */

.pk-journey { position: relative; margin-top: 4.5rem; }

.pk-route {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.pk-trail,
.pk-drawn { fill: none; stroke-width: 2; stroke-linecap: round; }
.pk-trail { stroke: color-mix(in srgb, var(--ploy-text-primary) 14%, transparent); }
.pk-drawn { stroke: var(--pk-accent); }
.pk-bee { filter: drop-shadow(0 0 14px rgba(255, 101, 0, 0.35)); }

.pk-layer {
    position: relative;
    width: 72%;
    min-height: 430px;
    padding: 3rem 0 9rem 3.25rem;
}
.pk-layer:nth-of-type(2) { margin-left: 28%; }

.pk-node {
    position: absolute;
    left: 0;
    top: 3.5rem;
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--ploy-text-primary) 22%, transparent);
    border-radius: 50%;
    background: var(--ploy-background-primary);
    transition: border-color 0.4s ease, background-color 0.4s ease;
}
.pk-layer[data-reached="true"] .pk-node {
    border-color: var(--pk-accent);
    background: var(--pk-accent);
}

.pk-layer-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ploy-text-secondary);
    transition: color 0.4s ease;
}
.pk-layer[data-reached="true"] .pk-layer-eyebrow { color: var(--pk-accent); }

.pk-layer-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 3.4vw, 2.85rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ploy-text-primary);
    margin: 0.85rem 0 1rem;
}
.pk-layer-copy {
    max-width: 30rem;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--ploy-text-secondary);
}
.pk-layer-copy-wide { max-width: 36rem; margin-top: 1.75rem; }
.pk-layer-aside { margin-top: 1.75rem; max-width: 36rem; }

.pk-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ploy-text-secondary);
}
.pk-flow span {
    border: 1px solid color-mix(in srgb, var(--ploy-text-primary) 16%, transparent);
    padding: 0.55rem 0.8rem;
}
.pk-flow b { font-weight: 400; color: var(--pk-accent); }

.pk-local {
    max-width: 40rem;
    margin: -3rem 0 0 3.25rem;
    border-left: 2px solid color-mix(in srgb, var(--ploy-text-primary) 18%, transparent);
    padding: 0.25rem 0 0.25rem 1.6rem;
}
.pk-local h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ploy-text-primary);
}
.pk-local p { margin: 0; font-size: 0.98rem; line-height: 1.8; color: var(--ploy-text-secondary); }

.pk-horizon {
    margin-top: 5rem;
    border-top: 1px dashed color-mix(in srgb, var(--ploy-text-primary) 18%, transparent);
    padding-top: 2.75rem;
}
.pk-horizon h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ploy-text-primary);
    margin: 0.75rem 0 0.85rem;
}
.pk-horizon-copy {
    max-width: 36rem;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--ploy-text-secondary);
}

@media (max-width: 900px) {
    .pk-layer {
        width: 100%;
        min-height: 0;
        padding: 2.5rem 0 6rem 2rem;
    }
    .pk-layer:nth-of-type(2) { margin-left: 0; }
    .pk-local { margin-left: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pk-bee { display: none; }
    .pk-drawn { stroke-dashoffset: 0 !important; }
}