@charset "utf-8";
/* ================================================================
   SPACEVIVOR. — Interior Design Studio
   Main Stylesheet
   ================================================================ */

/* ── Custom Properties ────────────────────────────────────────── */
:root {
  --sv-bg:        #f2eee7;
  --sv-bg-light:  #f2ede6;
  --sv-text:      #2c2c2c;
  --sv-text-sub:  #6b6560;
  --sv-line:      rgba(44,44,44,.15);
  --sv-line-bold: rgba(44,44,44,.30);
  --sv-serif:     'Cormorant Garamond', 'Georgia', 'Tinos', serif;
  --sv-sans:      'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sv-ease:      cubic-bezier(.4, 0, .2, 1);
}

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--sv-sans);
  color: var(--sv-text);
  background: var(--sv-bg);
  line-height: 1.6;
  overflow-x: hidden;
}
a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
ul, ol { list-style: none; }

/* ── Fixed Header Logo ────────────────────────────────────────── */
.sv-header-logo {
  position: fixed;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, color .4s ease;
}
.sv-header-logo.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Menu Toggle (hamburger / X) ──────────────────────────────── */
.sv-menu-toggle.sv-menu-button {
  position: fixed;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.sv-menu-toggle.visible,
.sv-menu-toggle.subpage-toggle {
  opacity: 1;
  pointer-events: auto;
}
.sv-menu-button span {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1.5px;
  background: #38302d;
  transform: translate(-50%, -50%);
  transition: transform .35s var(--sv-ease), opacity .25s ease;
}
.sv-menu-button span:first-child {
  transform: translate(-50%, -50%) translateY(-6px);
}
.sv-menu-button span:last-child {
  transform: translate(-50%, -50%) translateY(6px);
}
.sv-menu-button.active span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}
.sv-menu-button.active span:nth-child(2) {
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0);
}
.sv-menu-button.active span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.sv-menu-button:focus-visible { outline: 1px solid #271e1b; outline-offset: 4px; }

/* Fullscreen menu shares the homepage frame and logo coordinates. */
.sv-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--sv-bg);
  color: #38302d;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility .45s ease;
}
.sv-nav.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.sv-nav::before,
.sv-nav::after {
  content: "";
  position: absolute;
  height: 1px;
  background: rgba(50, 48, 45, .25);
  pointer-events: none;
}
.sv-nav__top {
  position: absolute;
}
.sv-nav__logo { display: block; }
.sv-nav__logo img { width: 100%; height: auto; }
.sv-nav__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  overflow-y: auto;
}
.sv-nav__body,
.sv-nav__bottom {
  flex: none;
  min-width: 0;
  overflow-y: auto;
}
.sv-nav__menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.sv-nav__menu a,
.sv-social-links a {
  font-family: "Tinos", serif;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: opacity .3s;
}
.sv-nav__menu a:hover,
.sv-social-links a:hover { opacity: .45; }
.sv-social-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  color: #38302d;
}
.sv-menu-open .sv-header-logo,
.sv-menu-open .sv-frame,
.sv-menu-open .sv-hero__hud { visibility: hidden; }
@media (max-height: 650px) {
  .sv-nav__menu { gap: 14px; }
  .sv-nav__content { gap: 24px; }
}
@media (max-height: 500px) {
  .sv-nav__content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
  .sv-nav__content .sv-social-links { gap: 6px; }
}

/* ── Section base ─────────────────────────────────────────────── */
.sv-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
}

/* ================================================================
   ② ABOUT
   ================================================================ */
.sv-about__left {
  display: flex;
  flex-direction: column;
  padding: 80px 60px 50px;
}
.sv-about__title {
  font-family: var(--sv-serif);
  font-size: .92rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 60px;
}
.sv-about__text {
  font-size: .87rem;
  line-height: 2;
  color: var(--sv-text);
}
.sv-about__text p { margin-bottom: 26px; }

.sv-about__right {
  position: relative;
  overflow: hidden;
}
.sv-about__right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Shared public-page frame and logo. */
.sv-frame__line {
  position: fixed;
  height: 1px;
  background: rgba(50, 48, 45, .25);
  z-index: 90;
  pointer-events: none;
}
.sv-site .sv-header-logo.subpage-logo {
  opacity: 1;
  pointer-events: auto;
}
.sv-header-logo__image {
  display: block;
  height: auto;
}

/* ================================================================
   ④ PORTFOLIO GRID
   ================================================================ */

/* filters */
.sv-grid__filters {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}
.sv-grid__filter-label {
  font-family: var(--sv-serif);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.sv-grid__filter-label:hover,
.sv-grid__filter-label.active {
  border-bottom-color: var(--sv-text);
}

.sv-grid__filter-group { position: relative; }
.sv-grid__filter-trigger {
  font-family: var(--sv-serif);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--sv-text);
}
.sv-grid__filter-trigger::after {
  content: '▾';
  font-size: .6rem;
}
/* Expanded options take up space and push the following content down. */
.sv-grid__filter-dropdown {
  padding-top: 8px;
  display: none;
}
.sv-grid__filter-group.open .sv-grid__filter-dropdown { display: block; }
.sv-grid__filter-dropdown button {
  display: block;
  font-family: var(--sv-serif);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 0;
  color: var(--sv-text-sub);
  white-space: nowrap;
  transition: color .3s;
}
.sv-grid__filter-dropdown button:hover,
.sv-grid__filter-dropdown button.active { color: var(--sv-text); }

/* grid items */
.sv-grid__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.sv-grid__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
}
.sv-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--sv-ease);
}
.sv-grid__item:hover img { transform: scale(1.05); }

.sv-grid__item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .4s ease;
}
.sv-grid__item:hover .sv-grid__item-overlay { opacity: 1; }