@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Open+Sans:wght@400;600;700&display=swap');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #faf9f6; color: #3a3a3a; font: 1rem/1.65 'Open Sans', sans-serif; }
a { color: #904027; text-underline-offset: .2em; }
a:hover { color: #572619; }
a:focus-visible { outline: 3px solid #904027; outline-offset: 4px; }
h1, h2 { font-family: 'Libre Baskerville', serif; line-height: 1.4; }
.practical-page, .practical-footer { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.practical-intro { padding: 44px 0 32px; }
.eyebrow { margin: 0 0 12px; color: #596b52; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.practical-intro h1 { max-width: 850px; margin: 0 0 16px; font-size: clamp(1.85rem, 3.5vw, 2.8rem); letter-spacing: -.035em; }
.practical-lead { max-width: 750px; margin: 0; color: #62675e; }
.practical-layout { display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: 56px; align-items: start; }
.practical-contents { position: sticky; top: calc(var(--nav-height, 80px) + 24px); border-top: 3px solid #c8d5c4; padding-top: 16px; }
.practical-contents h2 { margin: 0 0 10px; color: #62675e; font: 700 .75rem/1.5 'Open Sans', sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.practical-contents ul { list-style: none; margin: 0; padding: 0; }
.practical-contents li a { display: block; padding: 7px 0; color: #3a3a3a; font-size: .88rem; text-decoration: none; }
.practical-contents li a:hover { color: #904027; text-decoration: underline; }
.contents-phone { display: block; margin-top: 18px; padding-top: 18px; border-top: 1px solid #d8ddd4; font-size: .85rem; text-decoration: none; }
.contents-phone strong { font-size: 1.05rem; }
.practical-guide { min-width: 0; }
.guide-section { padding: 24px 0; border-top: 1px solid #d8ddd4; }
.guide-section h2 { font-size: 1.25rem; margin: 0 0 16px; }
.guide-section h3 { margin: 22px 0 12px; font-size: .9rem; }
.guide-section p { margin: 0 0 12px; }
.guide-section > :last-child { margin-bottom: 0; }
.guide-section:target h2 { color: #904027; }
.info-rows { margin: 0; }
.info-rows > div { display: grid; grid-template-columns: 155px minmax(0, 1fr); gap: 20px; padding: 7px 0; }
.info-rows dt { font-size: .9rem; font-weight: 600; }
.info-rows dd { margin: 0; color: #62675e; font-size: .95rem; }
.info-rows .important-time { color: #3a3a3a; font-weight: 600; }
.wifi-section { display: flex; align-items: center; gap: 40px; padding: 20px 24px; border-top: 3px solid #9eaf96; background: #edf1e9; }
.wifi-section h2 { margin: 0; }
.wifi-details { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 0; min-width: 0; }
.wifi-details dt { font-size: .75rem; color: #62675e; }
.wifi-details dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.host-phone { display: inline-block; margin-bottom: 10px; font-size: 1.5rem; font-weight: 700; text-decoration: none; }
.emergency-contacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; }
.emergency-contacts dt { color: #62675e; font-size: .8rem; }
.emergency-contacts dd { margin: 4px 0 0; font-size: 1.2rem; font-weight: 700; }
.emergency-contacts a { display: inline-block; padding-block: 4px; }
.registration-section { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 32px; align-items: center; }
.registration-link { display: inline-block; padding: 10px 16px; background: #c8d5c4; color: #3a3a3a; font-size: .9rem; font-weight: 600; text-decoration: none; border-radius: 4px; }
.registration-link:hover { background: #b8c9b2; color: #3a3a3a; }
.registration-qr { display: block; width: 140px; height: 140px; max-width: 100%; }
.practical-footer { border-top: 1px solid #d8ddd4; margin-top: 24px; padding: 24px 0; font-size: .9rem; }
.practical-footer p { margin: 0; }
.practical-footer span { color: #62675e; margin-left: 12px; }
.skip-link { position: absolute; top: -100px; left: 16px; padding: 12px; background: white; z-index: 1001; }
.skip-link:focus { top: 12px; }

@media (max-width: 850px) {
    .practical-page, .practical-footer { width: calc(100% - 40px); }
    .practical-intro { padding-top: 28px; }
    .practical-layout { grid-template-columns: 1fr; gap: 24px; }
    .practical-contents { position: static; }
    .practical-contents ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
    .practical-contents li a { min-height: 44px; padding-block: 10px; text-decoration: underline; text-decoration-color: #b1bba9; }
    .contents-phone { display: none; }
}
@media (max-width: 540px) {
    .practical-page, .practical-footer { width: calc(100% - 32px); }
    .practical-intro { padding-bottom: 24px; }
    .practical-lead { font-size: .95rem; }
    .practical-contents li a { font-size: .82rem; }
    .guide-section { padding-block: 20px; }
    .guide-section h2 { font-size: 1.15rem; margin-bottom: 12px; }
    .info-rows > div { grid-template-columns: 1fr; gap: 2px; padding: 7px 0; }
    .wifi-section { display: block; padding: 16px; }
    .wifi-details { gap: 10px 24px; }
    .emergency-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .registration-section { grid-template-columns: 1fr; gap: 20px; }
    .practical-footer span { display: block; margin: 4px 0 0; }
}
@media (max-height: 720px) and (min-width: 851px) {
    .practical-contents { max-height: calc(100dvh - var(--nav-height, 80px) - 40px); overflow-y: auto; padding-inline: 5px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
    body { background: white; color: black; font-size: 10pt; }
    .nav, .practical-contents, .skip-link { display: none; }
    .practical-page, .practical-footer { width: 100%; }
    .practical-intro { padding-top: 0; }
    .practical-layout { display: block; }
    .guide-section { padding-block: 12px; }
    .guide-section h2 { break-after: avoid; }
    .info-rows > div, .wifi-section, .registration-section, .emergency-contacts { break-inside: avoid; }
    a { color: inherit; }
}