squeezes every column into the narrow
viewport (long titles/venues wrap to 1-2 characters per line) — on
phones each row instead reflows into a small stacked card, one line
per field, labelled by the data-label attribute on each | */
.table-wrap {
overflow-x: visible;
border: none;
}
.table,
.table tbody,
.table tr {
display: block;
width: 100%;
}
.table thead {
display: none;
}
.table tr {
border: 1px solid var(--color-line);
border-radius: 8px;
padding: 0.7rem 0.9rem;
margin-bottom: 0.7rem;
background: var(--color-surface);
}
.table td {
display: block;
width: auto;
padding: 0.35rem 0;
border-bottom: none;
font-size: 0.85rem;
}
.table td[data-label]::before {
content: attr(data-label);
display: block;
font-family: var(--font-label);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-ink-soft);
margin-bottom: 0.1rem;
}
}
.login-box {
max-width: 380px;
margin: 5rem auto;
background: var(--color-surface);
border: 1px solid var(--color-line);
padding: 2.5rem;
}
/* ================= FOOTER ================= */
.site-footer {
background: var(--color-surface-container);
border-top: 1px solid var(--color-line);
margin-top: 4rem;
}
.site-footer__inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 3rem 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
text-align: center;
}
.site-footer__brand {
font-family: var(--font-brand);
font-size: 1.3rem;
color: var(--color-ink);
}
.site-footer__copy {
font-family: var(--font-label);
font-size: 0.76rem;
letter-spacing: 0.04em;
color: var(--color-ink-soft);
}
/* ================= animations ================= */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-up {
animation: fadeUp 0.7s ease both;
}
@media (prefers-reduced-motion: reduce) {
.fade-up {
animation: none;
}
}
/* ================= RESPONSIVE ================= */
@media (min-width: 640px) {
.field-row {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 900px) {
.site-nav__links {
display: flex;
}
.site-nav__inquiry {
display: inline-flex;
}
.menu-toggle {
display: none;
}
.schedule-item__poster {
width: 76px;
}
.bento {
grid-template-columns: repeat(2, 1fr);
}
.bento-card--dark {
grid-column: span 2;
}
.teaser-grid {
grid-template-columns: repeat(2, 1fr);
}
.journal-grid {
grid-template-columns: repeat(3, 1fr);
}
.journal-card--featured {
grid-column: span 3;
}
.inquiry-grid {
grid-template-columns: 1fr 2fr;
gap: 3.5rem;
}
.timeline__item {
flex-direction: row;
gap: 2.5rem;
}
.timeline__date-col {
width: 180px;
flex-shrink: 0;
text-align: right;
padding-right: 1rem;
}
.timeline__card {
flex: 1;
}
.gallery-grid {
grid-template-columns: repeat(4, 1fr);
}
.page-banner__card {
margin-left: 3rem;
margin-top: -4rem;
}
.journal-card--plain {
grid-column: span 1;
}
}
@media (max-width: 899px) {
:root {
--nav-height: 64px;
font-size: 16.5px;
}
body {
line-height: 1.8;
}
.container {
padding: 0 var(--margin-mobile, 20px);
}
.site-nav__inner {
padding: 0 var(--margin-mobile, 20px);
}
.site-nav__brand {
font-size: 1.2rem;
}
.site-nav__actions {
gap: 0.7rem;
}
/* belt-and-suspenders: guarantee the hamburger collapse regardless of any
stale intermediate cache serving an older stylesheet */
.site-nav__links,
.site-nav__inquiry {
display: none !important;
}
.menu-toggle {
display: inline-flex !important;
}
/* --- hero: full-bleed, sized for a phone viewport (kept short so it doesn't read as an oddly tall photo) --- */
.hero-cinema {
height: 75vh;
height: 75svh;
min-height: 530px;
max-height: 750px;
}
.hero-cinema__content {
bottom: 0.1rem;
padding: 1.25rem 0 0.7rem;
}
.hero-cinema__title {
font-size: 1.85rem;
max-width: 100%;
}
.hero-cinema__cta {
width: 100%;
gap: 1rem;
padding: 0.3rem 0;
border-bottom: none;
}
.hero-cinema__cta-link {
font-size: 0.85rem;
letter-spacing: 0.1em;
}
.promo-slider {
width: min(600px, 97vw);
margin: 0.6rem auto 0.25rem;
}
.promo-slider__slide {
flex: 0 0 84%;
}
.social-rail__item {
width: 59px;
height: 59px;
}
.social-rail__item .icon {
width: 32px;
height: 32px;
}
.promo-slider__arrow .icon {
width: 17px;
height: 17px;
}
.quick-info {
margin-top: 1.1rem;
}
.quick-info__item {
padding: 0.8rem 1rem;
}
/* --- generous desktop whitespace, compressed for mobile --- */
.philosophy {
padding: 2.75rem 0 0.5rem;
}
.philosophy__rule {
height: 3rem;
margin-top: 1.75rem;
}
.section {
margin: 1.75rem 0;
}
.section__title {
font-size: 1.2rem;
margin-bottom: 0.9rem;
}
.bento {
gap: 0.8rem;
}
.bento-card {
min-height: 0;
padding: 1.1rem;
}
.bento-card--dark {
min-height: 0;
padding: 1.3rem;
}
.teaser-grid {
gap: 1rem;
}
.teaser-card {
padding: 1.25rem;
}
.gallery-teaser {
padding: 3rem 0;
}
.gallery-grid {
gap: 0.6rem;
margin-top: 1.6rem;
}
.cta-dark {
padding: 3.5rem 0;
}
.page-header {
padding: 2.5rem 0 2rem;
}
.page-title {
margin-bottom: 1.75rem;
}
.page-banner {
margin-bottom: 3rem;
}
.page-banner__frame {
height: 26vh;
min-height: 170px;
}
.page-banner__card {
margin: -2.5rem 1rem 0;
padding: 1.4rem 1.5rem;
}
.timeline {
gap: 1.75rem;
}
.timeline__card {
padding: 1.4rem;
}
.timeline__date {
font-size: 1.6rem;
}
.inquiry-grid {
gap: 1.5rem;
}
.inquiry-info,
.inquiry-form {
padding: 1.5rem;
}
.journal-grid {
gap: 1.1rem;
}
.journal-card--featured {
padding: 1.25rem;
}
.journal-card--featured .journal-card__title {
font-size: 1.4rem;
}
.site-footer__inner {
padding: 2.25rem 20px;
}
}
|