/* ==========================================================================
   Hilton Yokohama × LAUNICA — Executive Lounge spatial art direction
   Special landing page. Warm washi-paper palette, thin serif type,
   autumn accent — referenced from the printed exhibition panel design.
   ========================================================================== */

:root {
  --hyl-bg: #f4ece0;
  --hyl-surface: #fbf6ee;
  --hyl-ink: #2c2118;
  --hyl-ink-soft: #6b5c4c;
  --hyl-ink-dim: #9c8f7d;
  --hyl-gold: #a9752e;
  --hyl-line: rgba(44, 33, 24, 0.14);
  --hyl-maple-1: #9c3a2a;
  --hyl-maple-2: #c96a3e;
  --hyl-maple-3: #e0a15c;
  --hyl-radius: 14px;
}

.hyl-scope {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
  color: var(--hyl-ink);
  background: var(--hyl-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.hyl-scope * { box-sizing: border-box; }

.hyl-shell { max-width: 980px; margin: 0 auto; padding: 0 28px; }

/* ---- Header ----
   The site-wide fixed nav (.product-header, from style.css) sits on top of
   this page at 80px tall (60px at some narrower breakpoints), so the
   Hilton header gets extra top padding to clear it instead of being
   covered. */
.hyl-header {
  position: relative;
  padding: 128px 0 40px;
  overflow: hidden;
  border-bottom: 1px solid var(--hyl-line);
}

.hyl-header-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.hyl-header-inner img { display: block; height: 180px; width: auto; object-fit: contain; }
.hyl-header-inner .hyl-logo-launica { height: 156px; }
.hyl-header-x { font-family: "Cormorant Garamond", serif; font-size: 32px; color: var(--hyl-ink-dim); }

@media (max-width: 640px) {
  .hyl-header { padding: 104px 0 32px; }
  .hyl-header-inner { gap: 18px; }
  .hyl-header-inner img { height: 108px; }
  .hyl-header-inner .hyl-logo-launica { height: 94px; }
}

.hyl-header-tagline {
  position: relative;
  z-index: 2;
  text-align: center;
  margin: 18px 0 0;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hyl-ink-dim);
}

/* Decorative falling-maple accent, top-right corner. Emoji glyph keeps this
   dependency-free (no extra image asset) while still reading unmistakably
   as autumn foliage against the washi background. */
.hyl-maple-accent {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hyl-maple-accent span {
  position: absolute;
  font-size: 64px;
  filter: saturate(1.1);
  opacity: .5;
}
.hyl-maple-accent span:nth-child(1) { top: -18px; right: 6%;  font-size: 96px; transform: rotate(18deg);  opacity: .6; }
.hyl-maple-accent span:nth-child(2) { top: 30px;  right: 20%; font-size: 44px; transform: rotate(-12deg); opacity: .35; }
.hyl-maple-accent span:nth-child(3) { top: 70px;  right: 2%;  font-size: 36px; transform: rotate(40deg);  opacity: .3; }

/* ---- Section shell ---- */
.hyl-section { padding: 64px 0; border-bottom: 1px solid var(--hyl-line); }
.hyl-section:last-of-type { border-bottom: none; }
.hyl-section--surface { background: var(--hyl-surface); }

.hyl-eyebrow {
  font-family: "Cormorant Garamond", serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--hyl-gold);
  text-align: center;
  margin: 0 0 18px;
}

.hyl-concept-title {
  font-family: "Shippori Mincho", serif;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 600;
  text-align: center;
  letter-spacing: .08em;
  margin: 0 0 28px;
}

.hyl-divider {
  width: 64px;
  height: 1px;
  margin: 0 auto 28px;
  background: linear-gradient(90deg, transparent, var(--hyl-gold), transparent);
}

.hyl-lede {
  max-width: 620px;
  margin: 0 auto 36px;
  text-align: center;
  font-size: 15px;
  line-height: 2.1;
  color: var(--hyl-ink-soft);
}

.hyl-br-desktop { display: none; }
@media (min-width: 640px) {
  .hyl-br-desktop { display: inline; }
}

.hyl-translations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 780px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--hyl-line);
}
@media (max-width: 640px) {
  .hyl-translations { grid-template-columns: 1fr; gap: 20px; }
}

.hyl-translations h4 {
  font-family: "Cormorant Garamond", serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--hyl-gold);
  margin: 0 0 8px;
}

.hyl-translations p {
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--hyl-ink-soft);
  margin: 0;
}

/* ---- Exhibition artists × artwork ---- */
.hyl-works-head-note {
  max-width: 620px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--hyl-ink-soft);
}
.hyl-works-head-note .hyl-lang-en,
.hyl-works-head-note .hyl-lang-cn {
  display: block;
  font-size: 12px;
  opacity: .8;
  margin-top: 6px;
}

.hyl-exhibit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
}

.hyl-exhibit-card {
  background: var(--hyl-bg);
  border: 1px solid var(--hyl-line);
  border-radius: var(--hyl-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(44, 33, 24, 0.04), 0 18px 34px -24px rgba(44, 33, 24, 0.35);
  transition: transform .3s ease, box-shadow .3s ease;
}
.hyl-exhibit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -20px rgba(44, 33, 24, 0.4);
}

.hyl-exhibit-product {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--hyl-surface);
  text-decoration: none;
}
.hyl-exhibit-product-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.hyl-exhibit-card:hover .hyl-exhibit-product-photo {
  transform: scale(1.05);
}

.hyl-exhibit-product-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, transparent, rgba(28, 20, 12, 0.78) 70%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hyl-exhibit-product-name {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hyl-exhibit-product-cta {
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  letter-spacing: .03em;
}

.hyl-exhibit-artist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--hyl-line);
  background: var(--hyl-surface);
  text-decoration: none;
  transition: background-color .2s ease;
}
.hyl-exhibit-artist-row:hover {
  background-color: var(--hyl-bg);
}
.hyl-exhibit-artist-photo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--hyl-line);
}
.hyl-exhibit-artist-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--hyl-ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hyl-exhibit-artist-arrow {
  color: var(--hyl-gold);
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 640px) {
  .hyl-exhibit-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .hyl-exhibit-artist-photo { width: 28px; height: 28px; }
  .hyl-exhibit-artist-name { font-size: 12px; }
  .hyl-exhibit-product-name { font-size: 12px; }
  .hyl-exhibit-product-cta { font-size: 10px; }
}

.hyl-artist-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 18px;
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .hyl-artist-grid { grid-template-columns: repeat(2, 1fr); }
}

.hyl-artist-pill {
  text-align: center;
  padding: 14px 10px;
  border: 1px solid var(--hyl-line);
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--hyl-ink-soft);
  background: var(--hyl-surface);
}
.hyl-artist-pill--tbd { color: var(--hyl-ink-dim); border-style: dashed; }

.hyl-artist-pill-link { color: inherit; text-decoration: none; display: block; }
.hyl-artist-pill-link:hover { color: var(--hyl-ink); border-color: var(--hyl-gold); }

.hyl-empty-note {
  text-align: center;
  font-size: 13px;
  color: var(--hyl-ink-dim);
  margin-top: 18px;
  line-height: 1.9;
}
.hyl-empty-note .hyl-lang-en,
.hyl-empty-note .hyl-lang-cn {
  display: block;
  font-size: 12px;
  opacity: .8;
}

/* ---- Furniture by ---- */
.hyl-furniture {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;
  align-items: center;
  max-width: 780px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .hyl-furniture { grid-template-columns: 1fr; text-align: center; }
}
.hyl-furniture img { width: 100%; max-width: 200px; height: auto; }
.hyl-furniture-body p { font-size: 14px; line-height: 1.95; color: var(--hyl-ink-soft); margin: 0 0 18px; }
.hyl-furniture-body .hyl-translations { border-top: 1px solid var(--hyl-line); grid-template-columns: 1fr 1fr; max-width: none; margin: 0; padding-top: 20px; }

/* ---- Footer ---- */
.hyl-footer {
  padding: 40px 0 56px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--hyl-ink-dim);
}
.hyl-footer a { color: inherit; }
.hyl-footer p { margin: 4px 0; }

@media (max-width: 640px) {
  .hyl-shell { padding: 0 20px; }
  .hyl-section { padding: 48px 0; }
}