/* Small editorial companions. No full-page pattern, motion, external assets or global overrides. */
.subpage-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    align-items: center;
    gap: 56px;
}
.subpage-hero-copy { min-width: 0; }
.subpage-hero .subpage-hero-copy { overflow-wrap: anywhere; }
.subpage-companion {
    position: relative;
    width: 240px;
    max-width: 100%;
    aspect-ratio: 240 / 244;
    justify-self: end;
    pointer-events: none;
    user-select: none;
}
.subpage-companion-arch {
    position: absolute;
    inset: 5% 10% auto 16%;
    height: 65%;
    background: #e9ecdf;
    border: 1px solid #dde2d2;
    border-radius: 100px 100px 10px 10px;
}
.subpage-companion-arch::after {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1px solid #faf8f1;
    border-radius: inherit;
}
.subpage-companion-ledge {
    position: absolute;
    top: 69.7%;
    left: 5%;
    right: 4%;
    border-top: 1px solid #bac5ac;
}
.subpage-companion-cat {
    position: absolute;
    top: 5.3%;
    left: 7.1%;
    width: 86.7%;
}
.subpage-paw { position: absolute; color: #9b7958; opacity: .23; }
.subpage-paw--one { width: 11%; left: 0; top: 19%; transform: rotate(-30deg); }
.subpage-paw--two { width: 9%; left: 11%; top: 2%; transform: rotate(-12deg); }
.subpage-paw--three { width: 10%; right: 0; top: 34%; transform: rotate(24deg); }

/* Static at all times, including if the visitor enabled homepage animation previously. */
.subpage-companion .cat-animated,
.subpage-margin .cat-animated { animation: none !important; transform: none !important; }
.subpage-companion .cat-dream { opacity: .55; }
.subpage-companion .cat-yawn-mouth,
.subpage-companion .cat-yawn-tongue { opacity: 0; }

/* These watermarks occupy the unused right-hand reading margin, never a text/form background. */
.subpage-story { position: relative; isolation: isolate; }
.subpage-margin {
    display: none;
    position: absolute;
    right: 22px;
    bottom: 68px;
    width: 150px;
    height: 125px;
    pointer-events: none;
    user-select: none;
}
.subpage-margin-paw { position: absolute; color: #849574; opacity: .14; width: 33px; }
.subpage-margin-paw--one { right: 59px; top: 65px; transform: rotate(20deg); }
.subpage-margin-paw--two { right: 15px; top: 17px; transform: rotate(38deg); }
.subpage-watermark { opacity: .2; --cat-line: #819172; }
.subpage-watermark .cat-fill { fill: var(--paper); stroke-width: 2; }
.subpage-watermark .cat-patch,
.subpage-watermark .cat-stripe,
.subpage-watermark .cat-shadow,
.subpage-watermark .cat-dream { display: none; }
.subpage-watermark .cat-ear { stroke: var(--cat-line); }
.subpage-watermark .cat-nose { fill: var(--cat-line); }

/* A real profile gets only a quiet trail; the actual photographs remain the feature. */
.subpage-hero--profile { grid-template-columns: minmax(0, 1fr) 140px; }
.subpage-companion--paws { width: 140px; height: 150px; aspect-ratio: auto; }
.subpage-companion--paws .subpage-paw { width: 30px; color: #849574; opacity: .17; }
.subpage-companion--paws .subpage-paw--one { left: 8%; top: 67%; transform: rotate(20deg); }
.subpage-companion--paws .subpage-paw--two { left: 46%; top: 39%; transform: rotate(35deg); }
.subpage-companion--paws .subpage-paw--three { right: 4%; top: 2%; transform: rotate(12deg); }

@media (min-width: 1200px) {
    .subpage-margin { display: block; }
}
@media (max-width: 960px) {
    .subpage-hero { grid-template-columns: minmax(0, 1fr) 184px; gap: 28px; }
    .subpage-companion { width: 184px; }
    .subpage-hero--profile { grid-template-columns: minmax(0, 1fr) 100px; }
    .subpage-companion--paws { width: 100px; }
}
@media (max-width: 680px) {
    /* One compact companion below the copy: no absolute positioning over mobile text. */
    .subpage-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 20px; }
    .subpage-companion { width: 130px; }
    .subpage-companion-arch::after { inset: 5px; }
    .subpage-hero--profile .subpage-companion { display: none; }
}
@media print {
    .subpage-companion, .subpage-margin { display: none; }
    .subpage-hero { display: block; }
}