/* A compact chapter opener. The writing and the illustration occupy separate areas. */
.ugd-enabled .ugd-page-hero {
    --ugd-hero-paper: #eff7f5;
    --ugd-hero-edge: #cbdfde;
    --ugd-hero-art-width: min(43%, 440px);
    box-sizing: border-box;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: clamp(146px, 15vw, 170px);
    margin: 0 0 22px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ugd-hero-edge);
    border-radius: 10px;
    background: linear-gradient(105deg, #fbfcf8 1%, var(--ugd-hero-paper) 70%);
    color: #153749;
    text-align: start;
}
.ugd-page-hero .ugd-page-hero__copy {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    width: calc(100% - var(--ugd-hero-art-width));
    min-width: 0;
    padding: 24px clamp(20px, 3.4vw, 42px);
}
.ugd-page-hero .ugd-page-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #31656a;
    font: 700 11px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.ugd-page-hero__eyebrow::before {
    content: "";
    flex: 0 0 22px;
    height: 2px;
    background: #488686;
}
.ugd-enabled .ugd-page-hero h1.ugd-page-hero__title {
    margin: 9px 0 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: #153749;
    font-size: clamp(30px, 3.7vw, 46px);
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.27;
    overflow-wrap: anywhere;
    word-break: auto-phrase;
    text-wrap: balance;
}
.ugd-page-hero .ugd-page-hero__title::before,
.ugd-page-hero .ugd-page-hero__title::after { display: none; content: none; }
.ugd-page-hero .ugd-page-hero__art {
    position: absolute;
    inset: 0 0 0 auto;
    width: var(--ugd-hero-art-width);
    overflow: hidden;
    clip-path: polygon(var(--ugd-hero-cut, 7%) 0, 100% 0, 100% 100%, 0 100%);
    background: #e0efee;
    color: #548387;
    pointer-events: none;
}
.ugd-page-hero .ugd-page-hero__art > img,
.ugd-page-hero .ugd-page-hero__art > svg {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: var(--ugd-hero-focus, 50% 50%);
}
.ugd-page-hero--beginner { --ugd-hero-focus: 54% 16%; }
.ugd-page-hero--style { --ugd-hero-focus: 69% 30%; }
.ugd-page-hero--fish-guide { --ugd-hero-focus: left 46%; --ugd-hero-cut: 2%; }
.ugd-page-hero--place { --ugd-hero-focus: 68% 45%; }
.ugd-page-hero--rod { --ugd-hero-focus: 50% 18%; }
.ugd-page-hero--reel { --ugd-hero-focus: 26% 66%; }
.ugd-enabled .ugd-page-hero--cooking { --ugd-hero-paper: #f8f3e8; --ugd-hero-edge: #e3ddce; }
.ugd-enabled .ugd-page-hero--cover { --ugd-hero-art-width: min(41%, 285px); }
/* The approved covers carry a painted title at left. Show only the scene at right. */
.ugd-page-hero--cover .ugd-page-hero__art > img {
    position: absolute;
    inset: 0 0 0 auto;
    width: 180%;
    object-position: right var(--ugd-hero-cover-y, 35%);
}
.ugd-enabled .ugd-page-hero--fishing-map { --ugd-hero-art-width: min(41%, 235px); --ugd-hero-cover-y: 8%; }
.ugd-page-hero--fishing-boats { --ugd-hero-cover-y: 82%; }
.ugd-enabled .ugd-page-hero--chart { --ugd-hero-art-width: min(28%, 260px); }
.ugd-page-hero--chart .ugd-page-hero__art {
    clip-path: none;
    background: linear-gradient(90deg, transparent, #e5f1ee);
}
@media (max-width: 760px) {
    .ugd-enabled .ugd-page-hero {
        --ugd-hero-art-width: 38%;
        min-height: 112px;
        margin-bottom: 16px;
        border-radius: 8px;
    }
    .ugd-page-hero .ugd-page-hero__copy { padding: 16px 5px 16px 15px; }
    .ugd-page-hero .ugd-page-hero__eyebrow { gap: 6px; font-size: 9px; letter-spacing: .12em; }
    .ugd-page-hero__eyebrow::before { flex-basis: 13px; }
    .ugd-enabled .ugd-page-hero h1.ugd-page-hero__title {
        margin-top: 8px;
        font-size: clamp(21px, 5.9vw, 32px);
        line-height: 1.3;
        letter-spacing: 0;
    }
    .ugd-enabled .ugd-page-hero--chart { --ugd-hero-art-width: 25%; }
}
@media (max-width: 359px) {
    .ugd-enabled .ugd-page-hero { --ugd-hero-art-width: 34%; }
    .ugd-enabled .ugd-page-hero--chart { --ugd-hero-art-width: 18%; }
    .ugd-page-hero--chart .ugd-page-hero__art svg > g { transform: translateX(21px); }
    .ugd-page-hero .ugd-page-hero__copy { padding-left: 11px; }
}

/* This header replaces the title in the map provider's scrolling introduction. */
.intro-title.ugd-map-intro { padding: 8px 6px 0; }
.ugd-map-intro .ugd-page-hero--fishing-map {
    min-height: clamp(102px, 12vw, 154px);
    margin-bottom: 8px;
}
.ugd-map-intro .national-stats { margin-top: 8px; }
.ugd-map-intro + .japan-selector { margin-top: 14px; }

/* The primary guides share a photography and live-text carousel. */
.ugd-enabled .ugd-guide-slides {
    container-type:inline-size;
    position:relative;
    width:100%;
    max-width:900px;
    margin:0 auto 8px;
    padding:0;
    border:0;
    background:none;
    text-align:left;
    font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
.ugd-guide-slides .ugd-slide-sr {
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    margin:-1px!important;
    padding:0!important;
    overflow:hidden!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
    border:0!important;
}
.ugd-guide-slides .ugd-slide-frame {
    display:grid;
    grid-template-areas:"scene";
    min-height:30cqw;
    isolation:isolate;
    position:relative;
    overflow:hidden;
    background:#0b3c51;
    color:#fff;
    touch-action:pan-y pinch-zoom;
}
.ugd-guide-slides .ugd-guide-slide {
    grid-area:scene;
    min-width:0;
    position:relative;
    display:flex;
    align-items:center;
    padding:3.4% 4.5%;
    opacity:0;
    background:#0b3c51;
    pointer-events:none;
}
.ugd-guide-slides .ugd-guide-slide.is-active { z-index:2;opacity:1;transition:opacity .9s ease; }
.ugd-guide-slides .ugd-guide-slide.is-previous { z-index:1;opacity:1; }
.ugd-guide-slides .ugd-guide-slide>img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:right center;
    border:0;
    border-radius:0;
    max-width:none;
    margin:0;
    padding:0;
}
.ugd-guide-slides .ugd-guide-slide.is-broken>img {visibility:hidden}
.ugd-guide-slides .ugd-slide-copy {
    position:relative;
    z-index:1;
    width:72%;
    min-width:0;
    text-shadow:0 1px 4px rgba(6,25,36,.8);
    color:#fff;
    overflow-wrap:anywhere;
}
.ugd-guide-slides .ugd-slide-heading {
    font-size:clamp(1.125rem,6cqw,3.375rem);
    text-wrap:balance;
    font-weight:800;
    line-height:1.22;
    letter-spacing:.01em;
}
.ugd-guide-slides .ugd-guide-slide:not(:first-child) .ugd-slide-heading {font-size:clamp(1.0625rem,5.4cqw,3.05rem)}
.ugd-guide-slides .ugd-slide-kicker {
    color:#e3f4f7;
    margin:0 0 .14em;
    font-size:clamp(.6875rem,2.6cqw,1.45rem);
    font-weight:700;
    line-height:1.35;
    letter-spacing:.055em;
}
.ugd-guide-slides .ugd-slide-kicker::before { content:"";display:inline-block;width:1.2em;height:2px;vertical-align:middle;margin-right:.5em;background:#a9d8da }
.ugd-guide-slides .ugd-slide-caption { margin:.26em 0 0;font-size:clamp(.75rem,3.4cqw,1.87rem);font-weight:500;line-height:1.38;letter-spacing:0 }
.ugd-guide-slides .ugd-slide-caption span {display:block;text-wrap:balance}
@container (max-width:319px) {
    .ugd-guide-slides .ugd-guide-slide {padding-block:1.25%}
}
.ugd-guide-slides .ugd-slide-controls {
    position:absolute;
    z-index:3;
    right:clamp(4px,1.5cqw,12px);
    bottom:clamp(2px,.8cqw,7px);
    display:flex;
    align-items:center;
    gap:0;
    padding:0;
    margin:0;
    background:transparent;
}
.ugd-guide-slides .ugd-slide-controls[hidden] {display:none!important}
/* Native buttons retain a touch target while only the three circles are painted. */
.ugd-enabled .ugd-guide-slides .ugd-slide-controls button[data-slide-choice] {
    appearance:none;
    box-sizing:border-box;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:clamp(24px,6.4cqw,30px);
    min-width:24px;
    height:clamp(24px,6.4cqw,30px);
    min-height:24px;
    margin:0;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    box-shadow:none;
    cursor:pointer;
    color:#fff;
    line-height:1;
    touch-action:manipulation;
}
.ugd-guide-slides .ugd-slide-controls [data-slide-choice] span {
    box-sizing:border-box;
    display:block;
    width:6px;
    height:6px;
    border:1px solid rgba(255,255,255,.95);
    border-radius:50%;
    background:rgba(8,36,46,.55);
    box-shadow:0 0 0 1px rgba(0,23,36,.7);
}
.ugd-guide-slides .ugd-slide-controls [data-slide-choice][aria-pressed=true] span {
    width:8px;
    height:8px;
    background:currentColor;
}
.ugd-guide-slides .ugd-slide-controls [data-slide-choice]:focus-visible {
    outline:2px solid currentColor;
    outline-offset:-3px;
    box-shadow:inset 0 0 0 4px #244856;
}
@media (forced-colors:active) {
    .ugd-guide-slides .ugd-slide-controls [data-slide-choice] span {
        forced-color-adjust:none;
        border:1px solid ButtonText;
        background:Canvas;
    }
    .ugd-guide-slides .ugd-slide-controls [data-slide-choice][aria-pressed=true] span {background:ButtonText}
}
@media(prefers-reduced-motion:reduce) {
    .ugd-guide-slides .ugd-guide-slide.is-active {transition:none}
}