/* Styles for the "とぅむきち" page template (page-templates/creator.php) only. */

.creator-page__section {
    padding-block: clamp(70px, 10vw, 160px);
    background-color: var(--color-bg-base);
}

/*
 * The closing (X) section gets extra breathing room on both sides,
 * same idea as the "pause"/"closing" sections on the About page,
 * since there is no image here to do that work visually.
 */
.creator-page__section--x {
    padding-block: clamp(96px, 14vw, 200px);
}

.creator-page__inner {
    max-width: 640px;
    margin-inline: auto;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    text-align: center;
}

.creator-page__heading {
    margin: 0 0 24px;
    font-size: clamp(24px, 4vw, 32px);
}

/*
 * Same top/bottom gap as .about-page__image's own margin-top (40px);
 * reusing that value here keeps this page's title→image→body rhythm
 * consistent with the about/daily pages instead of inventing a new one.
 * Adjacent block margins collapse with the heading's own 24px
 * margin-bottom and the body paragraph's lack of a margin-top, so the
 * effective gap on both sides is exactly this 40px.
 */
.creator-page__image {
    margin-top: 40px;
    margin-bottom: 40px;
}

/*
 * Explicitly a square image shown at 75% of the container's width:
 * width sets that size directly, height: auto keeps it square (using
 * the image's own width/height attributes), and margin-inline: auto
 * centers it now that it's a block box.
 */
.creator-page__image img {
    display: block;
    width: 75%;
    height: auto;
    margin-inline: auto;
}

.creator-page__body {
    margin: 0 0 24px;
}

.creator-page__body:last-of-type {
    margin-bottom: 0;
}

.creator-page__link {
    margin: 24px 0 0;
}

.creator-page__link a {
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
}

.creator-page__link a:hover,
.creator-page__link a:focus-visible {
    color: var(--color-pink);
}

/*
 * The X section above already ends with a generous padding-bottom
 * (clamp(96px, 14vw, 200px)); reusing that as the gap before this
 * link keeps the "十分な余白" without stacking two large gaps. This
 * wrapper only adds a smaller gap of its own before the shared
 * footer, matching the pattern used on the other 4 pages.
 */
.creator-page__back-home {
    padding-bottom: clamp(64px, 10vw, 120px);
}