/* A port-town exhibition album: brass, brick, maritime green and warm paper. */
:root{--paper:#f4eddb;--ink:#243f3b;--brick:#984a38;--gold:#94713d;--line:#ccbea1}
body{background-color:var(--paper);background-image:radial-gradient(#806c4620 .6px,transparent .7px);background-size:5px 5px}
header{height:102px;background:#f6efdd;border-top:7px solid var(--brick);border-bottom:4px double var(--gold);padding:0 6%;position:relative}
.brand{font-size:24px;letter-spacing:3px}.brand::before{content:'⚓︎';font-size:25px;margin-right:12px;color:var(--brick)}.brand span{padding-left:40px;letter-spacing:2px;font-size:11px}nav a{font-family:'Yu Mincho',serif;letter-spacing:2px;padding:6px 0;border-bottom:1px solid var(--line)}
.hero{background:#234540;color:#f8efd9;padding:64px 6% 0;gap:28px 45px;isolation:isolate;grid-template-columns:1fr 1.15fr}
.hero::before{content:'';position:absolute;inset:16px;border:1px solid #bca77877;pointer-events:none;z-index:-1}.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:7px;background:var(--brick);border:0}
.hero-copy{padding:0 0 10px}.hero .eyebrow{color:#d8bf88;letter-spacing:3px;font-size:11px}.small-title{color:#e6d6b4;font-family:'Yu Mincho',serif;font-size:15px;letter-spacing:2px;border-left:2px solid #c3a36c;padding-left:16px}
h1{font-size:clamp(42px,4.8vw,72px);line-height:1.45;letter-spacing:.11em;text-shadow:2px 3px 0 #112e2b;margin:26px 0}.intro{color:#ede3cd;font-family:'Yu Mincho',serif;letter-spacing:1px}.hero .button{background:#f2e6c9;color:#35443a;border:4px double #887044;box-shadow:4px 4px 0 #102e2a;letter-spacing:1px;padding:12px 22px}.hero .button:hover{background:#fff8e7}
.dates{color:#e6d3aa;font-size:17px}.dates span{border:1px solid #c7af795e;color:#f4e9cb}.hero-image{padding:16px 16px 12px;background:#eadebf;border:1px solid #ad8e59;outline:1px solid #c4aa75;outline-offset:7px;transform:rotate(1.2deg);box-shadow:12px 15px 0 #142f2b5e;position:relative;margin:5px 8px 10px}
.hero-image::before{content:'門司港の記憶';display:block;color:#644c32;text-align:center;letter-spacing:6px;font:15px 'Yu Mincho',serif;margin:0 0 12px}.hero-image img{border-radius:100px 100px 0 0;width:100%;min-height:0;max-height:430px;object-fit:contain}.hero-image figcaption{color:#766247;font-size:9px;margin-top:10px}.hero-foot{border-top:1px solid #c1aa7666;color:#d6c49e;padding:18px 0 26px;margin-top:20px;font-family:Georgia,'Yu Mincho',serif}
.port-stamp{display:inline-flex;align-items:center;justify-content:center;width:94px;height:94px;border:3px double #a4523b;border-radius:50%;background:#f2e5c5;color:#86432f;position:absolute;right:-20px;bottom:32px;transform:rotate(-12deg);font:14px/1.5 'Yu Mincho',serif;text-align:center;box-shadow:0 0 0 4px #f2e5c5;letter-spacing:2px}
.section{padding-top:76px;padding-bottom:76px}.section-head{border-top:4px double var(--gold);padding-top:23px;margin-bottom:33px}.section-head .eyebrow{letter-spacing:3px;font-size:11px}.section-head h2{letter-spacing:.06em;font-size:clamp(26px,2.7vw,39px)}.section-head>p{font-family:'Yu Mincho',serif;letter-spacing:1px}
.film{background:#e7ddc6;background-image:linear-gradient(90deg,#a7916d10 1px,transparent 1px);background-size:8px 8px;border-bottom:1px solid #beaa83}.player{border:9px solid #fbf4e3;outline:1px solid #aa8753;box-shadow:7px 9px 0 #c6b38e}.film-note{border-left:1px dashed #ad9872;padding-left:32px}.round{border:1px solid #957449;border-radius:50%;width:43px;height:43px;display:inline-flex;justify-content:center;align-items:center;font-size:15px}.film-note h3{font-size:26px}.film-note .text-link{display:inline-block;color:var(--brick);border-bottom:1px solid var(--brick);text-decoration:none;padding-bottom:3px}
.gallery-section{position:relative}.gallery-section::before{content:'門司港 美術散歩';display:block;text-align:center;font:13px 'Yu Mincho',serif;letter-spacing:9px;color:var(--gold);margin-bottom:35px}.toolbar{border-top:0;padding-top:0}.toolbar input{padding:11px 14px;background:#fffaf0;border:1px solid #b9a884}.toolbar p{border:1px solid #ac9470;padding:7px 16px;background:#ece1c6;color:#6e5638}.grid{gap:45px 30px}.card{border-bottom:1px solid #c4b38e;padding-bottom:20px}.art-button{background:#fbf8ef;border:1px solid #d6cbb4;box-shadow:4px 5px 0 #d5c5a64f;padding:22px}.art-button:hover{background:#fffdf7;border-color:#a98a54}.art-button:hover img{transform:none}.number{font-size:11px;letter-spacing:2px;margin-top:21px;display:flex;align-items:center;gap:12px}.number::after{content:'';width:35px;height:1px;background:#b29a71}.card h3{font-size:21px;letter-spacing:.03em}.card p{color:#626653}.card .label{border:3px solid #fffaf0;box-shadow:0 0 0 1px #d3c4a8}
.about{border-top:0}.about .section-head{border-color:#a36c4e}.venue-main{padding:12px;border:1px solid #baa079;background:#e7dcc2;box-shadow:5px 5px 0 #d3c1a0}.lead{color:var(--brick);font-size:29px}.about dl{border-top:3px double #b9a17a}.about dt{color:#8c6943}.venue-strip figure{padding:10px;background:#fff7e5;border:1px solid #d0bd98}.venue-strip img{background:#efe5cf}.venue-strip figcaption{font-family:'Yu Mincho',serif;text-align:center;letter-spacing:2px;color:#7b6241;font-size:12px}.notes{background:#e8dec8;border-top:4px double #ad9771}.notes h2{font-family:'Yu Mincho',serif}.notes .eyebrow{margin-bottom:12px}footer{background:#234540;color:#eddfbd;border-top:9px solid #984a38;padding-top:35px;padding-bottom:35px}footer .brand::before{color:#d0b47b}footer>a:last-child{text-decoration:none;border-bottom:1px solid #a18a5f}
dialog{background:#f7efde;border:5px double #a4895c}.viewer-top{border-bottom:1px solid #c8b68e;padding-bottom:12px}.viewer-top button,.viewer-controls button{background:#eee1c4;border-color:#b19a70}.art-stage{background:#fffdf7;border:1px solid #d5c7ad}.viewer-body aside h2{color:#86462f}.viewer-controls{padding-top:10px;border-top:1px solid #c8b68e}
@media(max-width:800px){header{height:88px}.brand{font-size:19px}.brand::before{font-size:21px;margin-right:6px}.brand span{font-size:9px;padding-left:28px;letter-spacing:1px}nav{gap:17px}.hero{gap:22px;padding-top:45px;padding-left:6%;padding-right:6%}.hero-image{padding:10px;margin-right:5px;margin-left:0}.hero-image::before{font-size:12px;letter-spacing:4px}.port-stamp{width:72px;height:72px;font-size:11px;right:-12px;bottom:20px}.film-layout{gap:20px}.section{padding-top:55px;padding-bottom:55px}.grid{gap:30px 20px}.art-button{padding:13px}.card h3{font-size:19px}}
@media(max-width:520px){header{height:87px}.brand{font-size:17px;letter-spacing:2px}.brand::before{font-size:20px}.brand span{font-size:8px;letter-spacing:.5px}nav{gap:13px}nav a{font-size:11px;letter-spacing:1px}.hero{padding:36px 8% 0;gap:19px}.hero::before{inset:10px}.hero-copy{padding:0}.hero .eyebrow{font-size:9px;letter-spacing:1.9px}.small-title{font-size:12px;padding-left:12px;letter-spacing:1px}h1{font-size:44px;letter-spacing:.07em;line-height:1.4;margin:20px 0}.intro{font-size:12px;letter-spacing:.4px;line-height:2}.hero .button{font-size:12px;padding:9px 16px;gap:22px;margin:10px 0}.dates{font-size:15px}.dates span{font-size:9px;padding:4px 6px;margin-left:7px}.hero-image{width:calc(100% - 10px);margin:6px 5px 10px;padding:11px;transform:rotate(1deg)}.hero-image img{max-height:260px;border-radius:70px 70px 0 0}.hero-image figcaption{font-size:8px;text-align:left}.hero-foot{font-size:9px;letter-spacing:1px;padding-bottom:25px;margin-top:8px}.section-head{padding-top:19px}.section-head h2{font-size:26px}.section-head .eyebrow{font-size:10px;letter-spacing:2px}.section-head>p{font-size:12px}.player{border-width:5px;box-shadow:4px 5px 0 #c6b38e}.gallery-section::before{font-size:11px;letter-spacing:6px;margin-bottom:28px}.toolbar{gap:12px}.toolbar input{width:205px;font-size:12px}.toolbar p{font-size:9px;padding:8px;letter-spacing:.5px}.grid{gap:27px 13px}.art-button{padding:10px}.art-button img{height:178px}.card h3{font-size:16px}.card p{font-size:11px}.card .label{border-width:2px}.card{padding-bottom:16px}.number{margin-top:16px;font-size:10px;gap:7px}.number::after{width:25px}.venue-strip figure{padding:6px}.venue-strip figcaption{font-size:10px;letter-spacing:1px}.lead{font-size:26px}footer{padding:30px 6%;gap:20px}footer .brand{font-size:18px}}

@media(min-width:521px) and (max-width:800px){.hero{display:flex;flex-direction:column;padding:42px 8% 0}.hero h1{font-size:54px;line-height:1.4}.hero-image{width:90%;max-width:540px;margin:18px auto}.hero-image img{max-height:340px}.hero-foot{width:100%}.hero-foot span:last-child{display:none}.dates span{display:inline-block;margin:0 0 0 10px}}