/* Kyoto sightseeing 02 / PDF revision, 2026-10-13
   Sections: base, navigation, hero, highlights, courses, footer, responsive. */
:root {
    --paper: #F7F4EC;
    --ink: #292D29;
    --green: #294B3C;
    --muted: #646B60;
    --vermilion: #A94C39;
    --line: #D9DCCF;
    --serif: "Shippori Mincho", "Yu Mincho", serif;
    --sans: "Noto Sans JP", "Yu Gothic", sans-serif;
    --header-height: 88px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
    margin: 0;
    padding-top: var(--header-height);
    background-color: var(--paper);
    background-image: repeating-linear-gradient(12deg, transparent 0 8px, #81785605 9px 10px);
    color: var(--ink);
    font: 16px / 1.8 var(--sans);
    -webkit-font-smoothing: antialiased;
}

[hidden] {
    display: none !important;
}

h1,
h2,
h3,
h4,
p,
figure {
    margin: 0;
}

h1,
h2,
h3,
h4 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.6;
}

img {
    display: block;
    width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
summary,
a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid var(--vermilion);
    outline-offset: 5px;
}

::selection {
    background: var(--green);
    color: white;
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
    padding: 12px 20px;
    background: white;
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: none;
}

.chevron {
    display: inline-block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.chevron--down {
    transform: rotate(135deg);
}

.section-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 104px 48px;
}

.eyebrow {
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    color: var(--green);
}

.section-heading {
    margin-bottom: 48px;
    text-align: center;
}

.section-heading h2 {
    margin-bottom: 20px;
    font-size: clamp(30px, 3.3vw, 44px);
    letter-spacing: .07em;
}

.section-heading > p:last-child:not(.eyebrow) {
    color: var(--muted);
}

/* Fixed navigation */
.site-header {
    display: flex;
    align-items: center;
    gap: 28px;
    position: fixed;
    inset: 0 0 auto;
    height: var(--header-height);
    z-index: 50;
    padding-left: 38px;
    background: #F7F4ECF5;
    border-bottom: 1px solid var(--line);
}

.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 15px;
    min-height: 44px;
}

.brand__type strong {
    display: block;
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: .2em;
}

.brand__type small {
    display: block;
    font-size: 9px;
    letter-spacing: .5em;
}

.brand__crest {
    position: relative;
    display: block;
    width: 46px;
    height: 46px;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--green);
}

.brand__crest i {
    position: absolute;
    top: 12px;
    left: 19px;
    width: 7px;
    height: 12px;
    background: currentColor;
    border-radius: 50%;
    transform-origin: 3.5px 10px;
}

.brand__crest i:nth-child(2) { transform: rotate(60deg); }
.brand__crest i:nth-child(3) { transform: rotate(120deg); }
.brand__crest i:nth-child(4) { transform: rotate(180deg); }
.brand__crest i:nth-child(5) { transform: rotate(240deg); }
.brand__crest i:nth-child(6) { transform: rotate(300deg); }

.global-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

.global-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
}

.global-nav a:hover,
.site-footer nav a:hover {
    text-decoration: underline;
    text-underline-offset: 7px;
}

.booking-link {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    gap: 24px;
    padding: 0 28px;
    background: var(--green);
    color: white;
    font-size: 14px;
}

.booking-link:hover,
.mobile-course-link:hover {
    background: #1F3C2F;
}

.menu-button,
.menu-backdrop {
    display: none;
}

/* Layered photographs and paper texture, retained from the original direction. */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 232px;
    position: relative;
    isolation: isolate;
    max-width: 1680px;
    margin: auto;
}

.hero__wash {
    position: absolute;
    z-index: -1;
    inset: 5% 10% 12% 26%;
    background: #E8E5D980;
    clip-path: polygon(4% 8%, 56% 0, 95% 13%, 100% 82%, 38% 99%, 0 89%);
}

.vertical-kicker {
    position: absolute;
    top: 56px;
    left: 22px;
    font-size: 10px;
    letter-spacing: .28em;
    writing-mode: vertical-rl;
}

.hero__content {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 38px;
    min-height: 780px;
    padding: 72px 36px 92px 72px;
}

.hero__copy {
    position: relative;
    z-index: 2;
}

.hero__eyebrow {
    margin-bottom: 22px;
    color: var(--green);
    font-family: var(--serif);
    font-size: 17px;
    letter-spacing: .1em;
}

.hero h1 {
    margin-left: -5px;
    font-size: clamp(42px, 4.6vw, 74px);
    line-height: 1.3;
    letter-spacing: -.04em;
    white-space: nowrap;
}

.hero__lead {
    margin-top: 30px;
    font: 500 clamp(17px, 1.55vw, 24px) / 1.9 var(--serif);
    color: var(--green);
}

.hero__lead span {
    display: block;
}

.hero__description {
    margin-top: 27px;
    font-size: 15px;
    line-height: 2.1;
}

.hero__bottom {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 36px;
}

.hero__seal {
    padding: 7px 10px;
    border: 3px double var(--vermilion);
    border-radius: 40%;
    font: 20px / 1.1 var(--serif);
    color: var(--vermilion);
    transform: rotate(-5deg);
}

.hero-scroll {
    display: flex;
    gap: 22px;
    align-items: center;
    min-height: 44px;
    color: var(--green);
    font-family: var(--serif);
}

.hero-visual {
    position: relative;
    min-width: 0;
    height: 570px;
}

.hero-visual__backdrop {
    position: absolute;
    inset: -18px -5px 40px;
    background: #DAD9CC;
    transform: rotate(4deg);
}

.hero-photo {
    position: absolute;
    margin: 0;
    border: 7px solid var(--paper);
    box-shadow: 0 14px 28px #292D2918;
}

.hero-photo img {
    height: 100%;
    object-fit: cover;
}

.hero-photo--main {
    inset: 0 0 32px;
    transform: rotate(-2deg);
}

.hero-photo--main img {
    object-position: 73% 40%;
}

.hero-photo--torii,
.hero-photo--tea {
    width: 36%;
    height: 184px;
    bottom: -24px;
}

.hero-photo--torii {
    left: -20px;
    transform: rotate(5deg);
}

.hero-photo--tea {
    right: -12px;
    bottom: -48px;
    transform: rotate(-6deg);
}

.visual-caption {
    position: absolute;
    bottom: -80px;
    left: 0;
    font: 13px / 1.8 var(--serif);
    letter-spacing: .14em;
}

.travel-tips {
    align-self: stretch;
    padding: 65px 25px 36px;
    border-left: 1px solid var(--line);
}

.travel-tips .eyebrow {
    font-size: 9px;
    letter-spacing: .08em;
}

.travel-tips h2 {
    font-size: 23px;
    color: var(--green);
}

.travel-tips ol {
    list-style: none;
    counter-reset: tips;
    margin: 28px 0;
    padding: 0;
}

.travel-tips li {
    counter-increment: tips;
    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.travel-tips li::before {
    content: "0" counter(tips);
    display: block;
    margin-bottom: 6px;
    color: var(--vermilion);
    font-size: 11px;
    letter-spacing: .15em;
}

.travel-tips h3 {
    margin-bottom: 9px;
    font-size: 16px;
}

.travel-tips li p {
    font-size: 13px;
    color: var(--muted);
}

.tips-note {
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font: 19px / 1.9 var(--serif);
    color: var(--green);
}

/* Five stories */
.spot-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
    gap: 54px 30px;
}

.spot-card {
    grid-column: span 2;
    min-width: 0;
}

.spot-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.spot-card header {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 86px;
    margin-bottom: 16px;
}

.spot-number {
    align-self: start;
    padding-top: 6px;
    color: var(--vermilion);
    font: 33px / 1.3 var(--serif);
}

.spot-card h3 {
    font-size: 25px;
}

.spot-card header p {
    font-size: 13px;
    color: var(--muted);
}

.spot-card figure {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
}

.spot-card img {
    height: 100%;
    object-fit: cover;
}

.spot-intro {
    min-height: 116px;
    padding: 23px 0 12px;
    font-size: 15px;
}

.disclosure-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 100%;
    min-height: 50px;
    padding: 10px 2px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--green);
    text-align: left;
}

.disclosure-button .chevron,
summary .chevron {
    transform: rotate(135deg);
    margin-right: 6px;
}

.disclosure-button[aria-expanded="true"] .chevron,
details[open] summary .chevron {
    transform: rotate(-45deg);
}

.spot-detail {
    padding: 18px 0 0;
    color: var(--muted);
    font-size: 15px;
}

.manners {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 38px;
    margin-top: 80px;
    padding: 34px;
    border: 1px solid var(--line);
    background: #FFFFFF40;
}

.manners h3 {
    font-size: 23px;
}

.manners ul {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
}

.manners li + li {
    margin-top: 14px;
}

.manners strong {
    font-weight: 500;
    color: var(--green);
}

/* Three ways to enjoy Kyoto */
.enjoy {
    background: var(--green);
    color: var(--paper);
}

.enjoy .eyebrow,
.enjoy .section-heading > p:last-child {
    color: #D6E2D5;
}

.enjoy__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
}

.enjoy__items article {
    padding: 5px 22px;
    text-align: center;
}

.enjoy__items article + article {
    border-left: 1px solid #FFFFFF38;
}

.line-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
}

.enjoy__items h3 {
    margin-bottom: 18px;
    font-size: 22px;
}

.enjoy__items p {
    text-align: left;
    font-size: 15px;
    color: #E6EBE2;
}

/* Model courses */
.courses .section-heading h2 span {
    display: inline-block;
}

.course-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto 48px;
    padding: 6px;
    border: 1px solid var(--line);
}

.course-tabs button {
    flex: 1;
    min-height: 58px;
    padding: 12px 10px;
    border: 0;
    background: transparent;
    font-family: var(--serif);
    font-size: 20px;
}

.course-tabs [aria-selected="true"] {
    background: var(--green);
    color: white;
}

.course-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: start;
    gap: 56px;
}

.course-photos {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-top: 12px;
}

.course-photos img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 7px solid var(--paper);
    box-shadow: 0 10px 30px #292D2915;
}

.course-photos img:first-child {
    grid-column: 1 / 12;
    transform: rotate(-3deg);
}

.course-photos img:nth-child(2) {
    grid-column: 4 / -1;
    margin-top: -16px;
    transform: rotate(3deg);
}

.photo-note {
    grid-column: 1 / -1;
    padding-top: 32px;
    font: 17px / 1.8 var(--serif);
    text-align: center;
    color: var(--green);
}

.course-meta {
    display: inline-block;
    margin-bottom: 16px;
    padding: 5px 14px;
    background: #E6EBE1;
    color: var(--green);
    font-size: 14px;
}

.course-body > h3 {
    margin-bottom: 28px;
    font-size: 26px;
    text-wrap: balance;
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline li {
    display: flex;
    gap: 20px;
    position: relative;
    padding-bottom: 26px;
}

.timeline li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 35px;
    bottom: 0;
    left: 17px;
    border-left: 1px solid var(--line);
}

.step-number {
    display: grid;
    place-items: center;
    flex: 0 0 35px;
    height: 35px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--vermilion);
    font-size: 12px;
}

.timeline h4 {
    margin-bottom: 5px;
    font-size: 20px;
}

.timeline p,
.course-note {
    font-size: 14px;
    color: var(--muted);
}

.course-note {
    padding-top: 6px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: 48px;
    margin-top: 18px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--green);
    color: var(--green);
}

/* Access and FAQ */
.access {
    border-top: 1px solid var(--line);
    padding-top: 80px;
    padding-bottom: 70px;
}

.access-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: center;
}

.access-grid article {
    padding: 12px 18px;
}

.access-grid article + article {
    border-left: 1px solid var(--line);
}

.access-grid p {
    margin-bottom: 16px;
    color: var(--muted);
}

.access-grid h3 {
    font-size: 18px;
}

.access-grid h3 span {
    display: block;
    color: var(--green);
    font-size: 26px;
}

.access-note {
    margin-top: 32px;
    text-align: center;
    font-size: 14px;
    color: var(--muted);
}

.faq {
    max-width: 1000px;
    padding-top: 20px;
}

.faq details {
    border-top: 1px solid var(--line);
}

.faq details:last-child {
    border-bottom: 1px solid var(--line);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 8px;
    list-style: none;
    cursor: pointer;
    font-weight: 500;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq details > div {
    padding: 0 8px 28px;
    color: var(--muted);
}

.site-footer {
    padding: 48px max(40px, calc((100vw - 1144px) / 2)) 36px;
    background: #E9EADF;
}

.footer-top {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 32px;
}

.footer-copy {
    font-family: var(--serif);
    font-size: 15px;
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-left: auto;
    font-size: 13px;
}

.site-footer nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.site-footer > p {
    color: var(--muted);
    font-size: 13px;
}

.site-footer > small {
    display: block;
    margin-top: 14px;
    font-size: 10px;
    letter-spacing: .14em;
}

.mobile-course-link {
    display: none;
}

/* Content stays visible without JavaScript; reveal animation runs only once. */
.is-revealed {
    animation: soft-reveal .65s ease-out both;
}

@keyframes soft-reveal {
    from { opacity: .25; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
    :root { --header-height: 76px; }

    .site-header { padding: 0 28px; }
    .booking-link { display: none; }

    .menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-width: 108px;
        min-height: 48px;
        margin-left: auto;
        padding: 8px;
        border: 0;
        background: transparent;
        color: var(--green);
        font-size: 14px;
    }

    .menu-lines,
    .menu-lines::after {
        display: block;
        width: 22px;
        height: 1px;
        background: currentColor;
        position: relative;
    }

    .menu-lines { transform: translateY(-4px); }
    .menu-lines::after { content: ""; top: 8px; }
    .menu-button[aria-expanded="true"] .menu-lines { transform: rotate(45deg); }
    .menu-button[aria-expanded="true"] .menu-lines::after { top: 0; transform: rotate(90deg); }

    .global-nav {
        display: none;
        position: fixed;
        top: calc(var(--header-height) + 12px);
        right: 20px;
        width: min(400px, calc(100% - 40px));
        max-height: calc(100dvh - var(--header-height) - 32px);
        overflow-y: auto;
        margin: 0;
        padding: 16px 26px;
        border: 1px solid var(--line);
        background: var(--paper);
        box-shadow: 0 12px 30px #0002;
    }

    .global-nav.is-open { display: block; }
    .global-nav a { min-height: 62px; font-size: 17px; }
    .global-nav a + a { border-top: 1px solid var(--line); }
    .menu-backdrop { display: block; position: fixed; inset: var(--header-height) 0 0; z-index: 40; border: 0; background: #15251D66; }

    .hero { grid-template-columns: minmax(0, 1fr); }
    .hero__content { min-height: 700px; padding: 55px 40px 85px; gap: 28px; }
    .hero h1 { font-size: clamp(48px, 6.5vw, 66px); }
    .hero__lead { font-size: clamp(18px, 2.1vw, 21px); }
    .hero-visual { height: 500px; }
    .hero-photo--torii, .hero-photo--tea { height: 160px; }
    .travel-tips { padding: 32px 40px; border-left: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #EBECDF60; }
    .travel-tips h2 { font-size: 24px; }
    .travel-tips h2 br { display: none; }
    .travel-tips ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin: 20px 0 0; }
    .travel-tips li p { font-size: 14px; }
    .tips-note { display: none; }
    .section-wrap { padding: 80px 40px; }
    .spot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spot-card, .spot-card:nth-child(4) { grid-column: auto; }
    .spot-card:last-child { grid-column: 1 / -1; width: calc((100% - 30px) / 2); justify-self: center; }
    .spot-intro { min-height: 123px; }
    .enjoy__items { gap: 12px; }
    .enjoy__items article { padding: 0 18px; }
    .enjoy__items h3 { font-size: 19px; }
    .course-panel { gap: 32px; }
    .course-body > h3 { font-size: 23px; }
    .manners { grid-template-columns: 200px 1fr; gap: 25px; padding: 26px; }
    .footer-top { flex-wrap: wrap; }
    .site-footer nav { width: 100%; margin-left: 0; }
}

@media (max-width: 600px) {
    :root { --header-height: 72px; }

    body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
    .site-header { padding: 0 20px; gap: 12px; }
    .brand { gap: 10px; }
    .brand__crest { width: 40px; height: 40px; }
    .brand__crest i { top: 9px; left: 16px; }
    .brand__type strong { font-size: 17px; }
    .menu-button { font-size: 14px; min-width: 100px; }
    .section-wrap { padding: 64px 20px; }
    .section-heading { margin-bottom: 32px; text-align: left; }
    .section-heading h2 { font-size: 30px; letter-spacing: .03em; }
    .section-heading p { font-size: 16px; }
    .section-heading .eyebrow { font-size: 10px; }
    .hero__wash { inset: 3% 0 30% 20%; }
    .vertical-kicker { display: none; }
    .hero__content { display: block; padding: 42px 20px 38px; min-height: 0; }
    .hero__eyebrow { font-size: 16px; margin-bottom: 16px; }
    .hero h1 { font-size: clamp(44px, 14vw, 66px); }
    .hero__lead { margin-top: 20px; font-size: 20px; }
    .hero__description { margin-top: 20px; font-size: 16px; line-height: 1.8; }
    .hero__bottom { margin-top: 24px; gap: 24px; }
    .hero__seal { font-size: 17px; }

    .hero-visual {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        height: auto;
        margin-top: 34px;
    }

    .hero-visual__backdrop { display: none; }
    .hero-photo { position: static; inset: auto; width: auto; height: auto; transform: none; border: 4px solid var(--paper); }
    .hero-photo--main { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
    .hero-photo--torii, .hero-photo--tea { aspect-ratio: 4 / 3; }
    .hero-photo--main img { object-position: 72% 50%; }
    .visual-caption { position: static; grid-column: 1 / -1; font-size: 14px; }
    .travel-tips { padding: 30px 20px; }
    .travel-tips .eyebrow { font-size: 10px; }
    .travel-tips h2 { font-size: 23px; }
    .travel-tips ol { display: block; margin-top: 20px; }
    .travel-tips li { position: relative; padding: 20px 0 20px 38px; }
    .travel-tips li::before { position: absolute; top: 24px; left: 0; font-size: 13px; }
    .travel-tips h3 { font-size: 19px; }
    .travel-tips li p { font-size: 16px; }
    .spot-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
    .spot-card:last-child { width: 100%; grid-column: auto; }
    .spot-card header { min-height: 0; margin-bottom: 20px; }
    .spot-card h3 { font-size: 26px; }
    .spot-card header p { font-size: 16px; }
    .spot-intro { min-height: 0; padding-top: 20px; font-size: 16px; }
    .spot-detail { font-size: 16px; }
    .manners { display: block; margin-top: 48px; padding: 25px 20px; }
    .manners h3 { font-size: 23px; }
    .manners ul { padding-left: 18px; margin-top: 22px; font-size: 16px; }
    .manners li + li { margin-top: 20px; }
    .enjoy__items { grid-template-columns: 1fr; gap: 28px; }
    .enjoy__items article { padding: 0 0 28px; }
    .enjoy__items article + article { padding-top: 28px; border-left: 0; border-top: 1px solid #FFFFFF38; }
    .enjoy__items article:last-child { padding-bottom: 0; }
    .line-icon { width: 52px; height: 52px; margin-bottom: 12px; }
    .enjoy__items h3 { font-size: 23px; margin-bottom: 12px; }
    .enjoy__items p { font-size: 16px; }
    .course-tabs { gap: 4px; margin-bottom: 28px; }
    .course-tabs button { font-size: 18px; min-height: 52px; }
    .course-panel { grid-template-columns: 1fr; gap: 28px; }
    .course-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 0; }
    .course-photos img:first-child, .course-photos img:nth-child(2) { grid-column: auto; transform: none; margin: 0; border-width: 3px; }
    .photo-note { display: none; }
    .course-meta { font-size: 16px; }
    .course-body > h3 { font-size: 25px; }
    .timeline li { gap: 16px; }
    .timeline h4 { font-size: 21px; }
    .timeline p, .course-note { font-size: 16px; }
    .access { padding-top: 56px; padding-bottom: 44px; }
    .access-grid { grid-template-columns: 1fr; text-align: left; }
    .access-grid article { padding: 22px 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; align-items: center; }
    .access-grid article + article { border-left: 0; border-top: 1px solid var(--line); }
    .access-grid p { margin-bottom: 0; font-size: 16px; }
    .access-grid h3 { font-size: 16px; }
    .access-grid h3 span { font-size: 22px; }
    .access-note { text-align: left; font-size: 16px; margin-top: 16px; }
    .faq { padding-top: 20px; }
    .faq summary { padding: 22px 2px; }
    .faq details > div { padding: 0 2px 24px; }
    .site-footer { padding: 36px 20px; }
    .footer-top { display: block; margin-bottom: 25px; }
    .footer-copy { font-size: 16px; margin-top: 20px; }
    .site-footer nav { gap: 0 24px; margin-top: 20px; font-size: 16px; }
    .site-footer > p { font-size: 16px; }
    .mobile-course-link { display: flex; align-items: center; justify-content: center; gap: 26px; position: fixed; bottom: 0; left: 0; right: 0; min-height: 72px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; background: var(--green); color: white; box-shadow: 0 -4px 18px #0001; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}