@charset "UTF-8";

:root {
  --text: #eef3f1;
  --muted: rgba(238, 243, 241, 0.68);
  --line: rgba(238, 243, 241, 0.16);
  --glass: rgba(7, 11, 13, 0.55);
  --glass-strong: rgba(7, 11, 13, 0.78);
  --accent: #b8c9c4;
  --warm: #bd7a5e;
  --mobile-header-h: 86px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #080b0d;
  color: var(--text);
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", sans-serif;
  letter-spacing: 0.03em;
}
a { color: inherit; text-decoration: none; }

.fixed-photo {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url("assets/dufferin-hero.jpeg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  animation: photoBreath 18s ease-in-out infinite alternate;
}
@keyframes photoBreath {
  from { transform: scale(1); filter: saturate(0.78) contrast(0.94) brightness(0.92); }
  to { transform: scale(1.035); filter: saturate(0.86) contrast(1.02) brightness(0.98); }
}
.site-shade {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 20%, rgba(189, 122, 94, 0.34), transparent 28%),
    linear-gradient(90deg, rgba(8, 11, 13, 0.86), rgba(8, 11, 13, 0.38) 48%, rgba(8, 11, 13, 0.86)),
    linear-gradient(0deg, rgba(8, 11, 13, 0.94), rgba(8, 11, 13, 0.18) 42%, rgba(8, 11, 13, 0.82));
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  padding: 24px 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  mix-blend-mode: difference;
}
.logo-image-link {
  display: inline-flex;
  align-items: center;
  width: clamp(118px, 11vw, 170px);
  max-width: 34vw;
  line-height: 0;
}
.logo-image-link img,
.hero-logo-image img,
.footer-logo-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 1;
  filter: drop-shadow(0 0 16px rgba(255,255,255,0.10)) drop-shadow(0 2px 2px rgba(0,0,0,0.32));
}
.nav {
  display: flex;
  gap: 22px;
  font-size: 12px;
  letter-spacing: 0.14em;
}
.nav a { opacity: 0.76; transition: opacity 0.2s ease; }
.nav a:hover { opacity: 1; }

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(238,243,241,0.06);
  border-radius: 999px;
  padding: 0;
  position: relative;
  cursor: pointer;
}
.menu-toggle span {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 1px;
  background: var(--text);
  transition: transform .22s ease, opacity .22s ease, top .22s ease;
}
.menu-toggle span:nth-child(1){top:14px}
.menu-toggle span:nth-child(2){top:20px}
.menu-toggle span:nth-child(3){top:26px}
.menu-toggle.is-open span:nth-child(1){top:20px;transform:rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0}
.menu-toggle.is-open span:nth-child(3){top:20px;transform:rotate(-45deg)}

.page-layer { position: relative; z-index: 1; }
.hero {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 0 7vw 9vh;
  position: relative;
}
.hero-copy { width: min(920px, 100%); }
.reveal-on-load { animation: heroFadeUp 1.25s cubic-bezier(.18,.86,.26,1) both; }
@keyframes heroFadeUp {
  from { opacity:0; transform:translateY(34px); filter:blur(10px); }
  to { opacity:1; transform:translateY(0); filter:blur(0); }
}
.eyebrow {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.hero-logo-image {
  margin: 0;
  line-height: 0;
  width: min(600px, 58vw);
}
.tagline {
  white-space: nowrap;
  max-width: none;
  margin: 32px 0 0;
  color: rgba(238,243,241,0.86);
  font-size: clamp(10px, 2.05vw, 28px);
  line-height: 1.6;
  letter-spacing: 0.025em;
}
.quick-links { display:flex; gap:10px; margin-top:34px; flex-wrap:wrap; }
.quick-icon {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line);
  padding:11px 14px;
  min-width:104px;
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase;
  background:rgba(238,243,241,.06);
  backdrop-filter:blur(14px);
  transition:background .2s ease, transform .2s ease;
}
.quick-icon:hover { background:rgba(238,243,241,.14); transform:translateY(-2px); }
.quick-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; }
.quick-icon:nth-child(2) svg,
.quick-icon:nth-child(4) svg { fill:currentColor; stroke:none; }
.quick-icon:nth-child(3) svg path,
.quick-icon:nth-child(5) svg path,
.quick-icon:nth-child(6) svg path { stroke-linecap:round; stroke-linejoin:round; }
.scroll {
  position:absolute;
  right:42px;
  bottom:42px;
  writing-mode:vertical-rl;
  font-size:11px;
  letter-spacing:.26em;
  color:var(--muted);
  animation:scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity:.38; transform:translateY(0); }
  50% { opacity:.9; transform:translateY(8px); }
}

.reveal {
  opacity:0;
  transform:translateY(54px);
  filter:blur(10px);
  transition:opacity 1s cubic-bezier(.18,.86,.26,1), transform 1s cubic-bezier(.18,.86,.26,1), filter 1s cubic-bezier(.18,.86,.26,1);
  will-change:opacity, transform, filter;
}
.reveal.is-visible { opacity:1; transform:translateY(0); filter:blur(0); }

.glass-section {
  position: relative;
  overflow: hidden;
  width: min(1180px, calc(100% - 72px));
  margin: 0 auto 28px;
  padding: clamp(32px, 5vw, 58px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.006) 42%, rgba(189,122,94,0.045)),
    linear-gradient(135deg, var(--glass-strong), var(--glass));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
}
.glass-section::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 22%),
    radial-gradient(circle at 94% 8%, rgba(184,201,196,.11), transparent 26%);
  opacity:.42;
}
.glass-section > * { position:relative; z-index:1; }

/* Section title is always placed at the top of each panel, never sticky */
.section-head {
  position: static;
  display: flex;
  align-items: baseline;
  gap: 18px;
  max-width: none;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(238,243,241,.13);
}
.section-head p {
  margin: 0;
  color: var(--warm);
  font-size: 12px;
  letter-spacing: .22em;
  flex: 0 0 auto;
}
.section-head h2 {
  margin: 0;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1;
  font-weight: 300;
  letter-spacing: .07em;
}

/* Text blocks */
.bio-text p,
.goods-list p,
.contact-copy p,
.movie-compact p,
.sns-update-block p {
  margin: 0;
  color: var(--muted);
  line-height: 2.05;
  font-size: 15px;
}
.bio-text p + p { margin-top: 22px; }
.bio-en { color: rgba(238,243,241,.54) !important; font-size: 14px !important; }

.member-lineup {
  margin-top: 34px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.member-title {
  margin: 0 0 14px !important;
  color: var(--accent) !important;
  font-size: 12px !important;
  letter-spacing: .22em;
  line-height: 1.4 !important;
}
.member-lineup dl { margin: 0; display: grid; gap: 0; }
.member-lineup div {
  display:grid;
  grid-template-columns:170px 1fr;
  gap:24px;
  padding:11px 0;
  border-top:1px solid rgba(238,243,241,.10);
}
.member-lineup div:first-of-type { border-top:0; }
.member-lineup dt {
  color:rgba(238,243,241,.52);
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.member-lineup dd {
  margin:0;
  color:var(--text);
  font-size:15px;
  letter-spacing:.06em;
}
.member-lineup dd span {
  margin-left:12px;
  color:rgba(238,243,241,.52);
  font-size:13px;
  letter-spacing:.08em;
}

.service-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); }
.service-card {
  min-height:138px;
  background:linear-gradient(135deg,rgba(238,243,241,.08),rgba(238,243,241,.025)),rgba(21,29,32,.72);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:20px;
  position:relative;
  overflow:hidden;
  transition:transform .22s ease, background .22s ease;
}
.service-card:hover {
  transform:translateY(-3px);
  background:linear-gradient(135deg,rgba(238,243,241,.13),rgba(238,243,241,.035)),rgba(21,29,32,.76);
}
.service-card strong {
  display:block;
  margin-top:14px;
  font-size:clamp(21px,2.45vw,30px);
  line-height:1;
  font-weight:400;
  letter-spacing:.05em;
}
.service-card > span:last-child {
  color:var(--muted);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.service-icon {
  width:40px;
  height:40px;
  display:inline-grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(238,243,241,.06);
}
.service-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; }
.spotify-card .service-icon svg path,
.youtube-music-card .service-icon svg,
.amazon-card .service-icon svg {
  stroke-linecap:round;
  stroke-linejoin:round;
}
.apple-card .service-icon svg { fill:currentColor; stroke:none; }

.movie-compact,
.contact-copy,
.sns-update-block {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}
.movie-compact a {
  display:inline-flex;
  margin-top:18px;
  border:1px solid var(--line);
  padding:11px 16px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:rgba(238,243,241,.06);
}
.update-kicker {
  margin:0 0 18px !important;
  color:var(--accent) !important;
  font-size:13px !important;
  letter-spacing:.38em;
}
.sns-update-block h3 {
  margin:0 0 16px;
  color:var(--text);
  font-size:clamp(21px,2.45vw,30px);
  line-height:1.25;
  font-weight:400;
  letter-spacing:.04em;
}
.goods-list { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.goods-list article {
  border-left:1px solid var(--line);
  padding:0 0 0 18px;
}
.goods-list h3 {
  margin:0 0 10px;
  font-size:24px;
  font-weight:400;
}
.footer {
  width:min(1180px, calc(100% - 72px));
  margin:0 auto;
  padding:40px 0 58px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
}
.footer-logo-image { margin:0; width:clamp(116px,10vw,160px); line-height:0; }
.footer small { font-size:11px; letter-spacing:.12em; }

/* Mobile */
@media (max-width: 920px) {
  .site-header {
    height: var(--mobile-header-h);
    padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
    mix-blend-mode: normal;
    background: linear-gradient(180deg, rgba(8,11,13,.82), rgba(8,11,13,.26));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .logo-image-link { width: clamp(108px,29vw,145px); }
  .menu-toggle { display:block; }
  .nav {
    position:absolute;
    top:calc(100% + 8px);
    right:16px;
    width:min(260px, calc(100vw - 32px));
    display:grid;
    gap:0;
    padding:12px;
    border:1px solid var(--line);
    background:rgba(7,11,13,.90);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transform:translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
  }
  .nav.is-open { opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav a { padding:14px 12px; border-bottom:1px solid var(--line); opacity:1; }
  .nav a:last-child { border-bottom:0; }

  .fixed-photo {
    top: var(--mobile-header-h);
    height: calc(100svh - var(--mobile-header-h));
    bottom:auto;
    background-size: contain;
    background-color:#080b0d;
    background-position:center top;
    animation:none;
  }
  .site-shade {
    top:var(--mobile-header-h);
    height:calc(100svh - var(--mobile-header-h));
    bottom:auto;
  }
  .hero {
    min-height: calc(100svh + 180px);
    padding: calc(var(--mobile-header-h) + 55svh) 22px 58px;
    align-items:flex-start;
  }
  .hero-logo-image { width:min(500px,78vw); }
  .tagline { font-size:clamp(9px,2.55vw,16px); }
  .scroll { display:none; }
  .quick-icon { width:calc(50% - 5px); min-width:0; }

  .glass-section {
    width:calc(100% - 28px);
    margin-bottom:18px;
    padding:28px 20px;
  }
  .section-head h2 { font-size:clamp(28px,9vw,42px); }
  .service-grid,
  .goods-list { grid-template-columns:1fr; }
  .service-card { min-height:126px; }
  .goods-list article { border-left:0; border-top:1px solid var(--line); padding:18px 0 0; }
  .goods-list article:first-child { border-top:0; padding-top:0; }
  .member-lineup div { grid-template-columns:1fr; gap:4px; }
  .footer { width:calc(100% - 44px); flex-direction:column; padding:36px 0 48px; }
}
@media (max-width: 560px) {
  :root { --mobile-header-h:84px; }
  .site-shade {
    background:
      linear-gradient(0deg, rgba(8,11,13,.94), rgba(8,11,13,.28) 38%, rgba(8,11,13,.48)),
      linear-gradient(90deg, rgba(8,11,13,.66), rgba(8,11,13,.10), rgba(8,11,13,.66));
  }
  .logo-image-link { width:clamp(96px,34vw,132px); }
  .hero-logo-image { width:80vw; }
  .tagline { font-size:clamp(8.5px,2.45vw,12px); letter-spacing:.01em; }
  .quick-links { gap:8px; }
  .quick-icon { width:calc(50% - 4px); padding:12px 8px; font-size:9.5px; }
  .quick-icon svg { width:18px; height:18px; }
  .member-lineup dd span { display:block; margin-left:0; margin-top:2px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .reveal,.reveal.is-visible,.reveal-on-load {
    opacity:1;
    transform:none;
    filter:none;
  }
}


/* ---- Update: remove GOODS, add compact MV embeds, unify single section line ---- */

/* The section title already has the dividing line, so content blocks should not add a second top line. */
.movie-compact,
.contact-copy,
.sns-update-block,
.movie-embeds {
  border-top: 0 !important;
}

/* Keep the bottom edge as a subtle closing line where appropriate. */
.contact-copy,
.sns-update-block {
  border-bottom: 1px solid var(--line);
}

/* Compact YouTube embeds */
.movie-embeds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 0 0 4px;
}

.video-card {
  margin: 0;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(238,243,241,0.055), rgba(238,243,241,0.015)),
    rgba(21,29,32,0.52);
  overflow: hidden;
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Since GOODS was removed, keep the final flow compact */
.footer {
  margin-top: 0;
}

@media (max-width: 920px) {
  .movie-embeds {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* ---- Movie section: keep YouTube link above embeds ---- */
.movie-content {
  display: grid;
  gap: 22px;
}

.movie-content .movie-compact {
  border-top: 0 !important;
  border-bottom: 1px solid var(--line);
  padding: 0 0 22px;
}

.movie-content .movie-embeds {
  border-top: 0 !important;
}


/* ---- SEO / LINE MUSIC update ---- */
.line-card .service-icon svg,
.quick-icon svg {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-card .service-icon svg {
  fill: none;
  stroke: currentColor;
}

/* Keep five music services balanced */
@media (min-width: 921px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-grid .service-card:last-child {
    grid-column: 1 / -1;
    min-height: 112px;
  }
}

/* Quick links with 8 items */
@media (min-width: 1180px) {
  .quick-icon {
    min-width: 96px;
  }
}


/* ---- Top quick links layout fix ---- */
/* Desktop: keep all 8 links in one horizontal row. */
@media (min-width: 921px) {
  .quick-links {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 8px;
    width: min(100%, 980px);
  }

  .quick-icon {
    flex: 1 1 0;
    min-width: 0 !important;
    width: auto !important;
    padding: 10px 8px;
    font-size: clamp(8px, 0.72vw, 10.5px);
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .quick-icon svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
  }
}

/* Tablet / mobile: return to two columns. */
@media (max-width: 920px) {
  .quick-links {
    display: flex;
    flex-wrap: wrap !important;
    gap: 10px;
    width: 100%;
  }

  .quick-icon {
    width: calc(50% - 5px) !important;
    flex: 0 0 calc(50% - 5px);
    min-width: 0 !important;
  }
}

@media (max-width: 560px) {
  .quick-links {
    gap: 8px;
  }

  .quick-icon {
    width: calc(50% - 4px) !important;
    flex-basis: calc(50% - 4px);
  }
}


/* ---- Hard fix: MUSIC only has 4 cards, no YouTube Music card ---- */
.service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.service-grid .service-card {
  grid-column: auto !important;
}

.service-grid .service-card:last-child {
  grid-column: auto !important;
  min-height: 138px !important;
}

/* Desktop top links stay one row */
@media (min-width: 921px) {
  .quick-links {
    flex-wrap: nowrap !important;
    width: min(100%, 980px);
  }

  .quick-icon {
    flex: 1 1 0;
    min-width: 0 !important;
    width: auto !important;
  }
}


/* ---- Full music service labels in TOP quick links ---- */
@media (min-width: 921px) {
  .quick-links {
    flex-wrap: nowrap !important;
    width: min(100%, 1080px) !important;
    gap: 6px !important;
  }

  .quick-icon {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 9px 6px !important;
    font-size: clamp(7px, 0.58vw, 9.5px) !important;
    letter-spacing: 0.035em !important;
    white-space: nowrap !important;
    gap: 5px !important;
  }

  .quick-icon svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 auto;
  }
}

/* On smaller widths, two columns with readable full labels */
@media (max-width: 920px) {
  .quick-icon {
    font-size: 10px !important;
    letter-spacing: 0.05em !important;
  }
}

@media (max-width: 560px) {
  .quick-icon {
    font-size: 9px !important;
    gap: 5px !important;
  }
}