/* One source for main/detail logo, contact, and theme-independent dark footer.
   Project hero typography remains in the project stylesheets. */
@font-face {
  font-family: "ONE Mobile";
  src: url("../fonts/ONE-Mobile-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "ONE Mobile Title";
  src: url("../fonts/ONE-Mobile-Title.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url("../fonts/Poppins-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
body {
  --chrome-gutter: 40px;
  --chrome-top: 36px;
  --chrome-ink: #222;
  --chrome-surface: #ffffffc9;
}

html[data-theme=dark] body {
  --chrome-ink: #fff;
  --chrome-surface: #191919c9;
}

.shared-header {
  position: fixed;
  inset: 0 0 auto;
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 110px;
  padding: var(--chrome-top) var(--chrome-gutter) 0;
  z-index: 100;
  pointer-events: none;
  box-sizing: border-box;
}

a.shared-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 28px/1.4 "ONE Mobile", sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--chrome-ink);
  white-space: nowrap;
  pointer-events: auto;
}

.shared-brand-mark {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 34px;
  height: 38px;
  background: #000;
  color: #fff;
  font: 38px/1 Arial, sans-serif;
}

.shared-contact-anchor {
  position: fixed;
  z-index: 100;
  top: var(--chrome-top);
  right: var(--chrome-gutter);
}

.home-contact.shared-contact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--chrome-ink);
  cursor: pointer;
  font: 700 14px/1.4 Pretendard, sans-serif;
  letter-spacing: 0;
}

.shared-contact .home-contact-label {
  display: block;
  color: var(--chrome-ink);
  background: var(--chrome-surface);
  backdrop-filter: blur(12px);
  padding: 11px 16px;
  border-radius: 16px;
  font: 700 14px/1.4 Pretendard, sans-serif;
}

.shared-contact .home-contact-portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  padding: 6px;
  border: 2px solid #ef805e;
  border-radius: 50%;
  box-sizing: border-box;
}

.shared-contact .contact-avatar {
  --avatar-size: 60px;
}

.shared-contact .home-contact-dot {
  position: absolute;
  right: 4px;
  bottom: 5px;
  width: 15px;
  height: 15px;
  border: 3px solid var(--chrome-surface);
  background: #25d7aa;
  border-radius: 50%;
}

.shared-theme-switch {
  position: absolute;
  top: var(--chrome-top);
  right: calc(var(--chrome-gutter) + 210px);
  z-index: 101;
  color: var(--chrome-ink);
}
.shared-theme-switch .theme-switch {
  display: flex;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 99px;
  padding: 3px;
  background: var(--chrome-surface);
  font: 400 11px/1.4 Pretendard, sans-serif;
}
.shared-theme-switch .theme-link {
  color: inherit;
  padding: 6px 8px;
  border-radius: 99px;
}
.shared-theme-switch .theme-link[aria-current=page] {
  color: var(--chrome-surface);
  background: var(--chrome-ink);
}

body .contact-launcher {
  display: none;
}

body .contact-widget {
  position: static;
}

body .contact-panel {
  position: fixed;
  z-index: 1000;
  top: var(--contact-anchor-top, 128px);
  right: var(--contact-anchor-right, 40px);
  bottom: auto;
  width: min(380px, 100vw - 32px);
  max-height: var(--contact-anchor-height, 650px);
  transform-origin: top right;
}

body.home-page {
  padding-top: 110px;
}

body .shared-brand-footer {
  font-size: 28px;
}

body .portfolio-footer {
  --chrome-ink: #fff;
  --chrome-surface: #242424cc;
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 100px 40px 110px;
  background: #191919;
  color: #fff;
  font-family: Pretendard, sans-serif;
}
body .portfolio-footer *, body .portfolio-footer *::before, body .portfolio-footer *::after {
  box-sizing: border-box;
}
body .portfolio-footer a {
  color: inherit;
  text-decoration: none;
}
body .portfolio-footer h2, body .portfolio-footer h3, body .portfolio-footer p {
  margin: 0;
}
body .portfolio-footer .related-projects > h2 {
  color: #fff;
  font: 700 clamp(22px, 2vw, 36px)/1.4 Pretendard, sans-serif;
  letter-spacing: -0.04em;
  margin-bottom: 38px;
}
body .portfolio-footer .related-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
body .portfolio-footer .related-desktop .related-card {
  display: block;
}
body .portfolio-footer .related-mobile {
  display: none;
}
body .portfolio-footer .related-card {
  min-width: 0;
}
body .portfolio-footer .related-direction:empty {
  display: none;
}
body .portfolio-footer .related-media {
  position: relative;
  aspect-ratio: 15/23;
  overflow: hidden;
  background: #242424;
}
body .portfolio-footer .related-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
body .portfolio-footer .related-media > span {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #191919;
  background: rgba(255, 255, 255, 0.9333333333);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}
body .portfolio-footer .related-card:hover .related-media img {
  transform: scale(1.035);
}
body .portfolio-footer .related-card:hover .related-media > span, body .portfolio-footer .related-card:focus-visible .related-media > span {
  opacity: 1;
}
body .portfolio-footer .related-card h3 {
  color: #fff;
  margin-top: 22px;
  font: 400 16px/1.4 "ONE Mobile Title", Pretendard, sans-serif;
  letter-spacing: -0.02em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
body .portfolio-footer .related-card p {
  color: rgba(255, 255, 255, 0.7019607843);
  margin-top: 10px;
  font: 400 12px/1.4 "ONE Mobile Title", Pretendard, sans-serif;
}
body .portfolio-footer .portfolio-footer-signoff {
  margin-top: clamp(120px, 16vw, 300px);
}
body .portfolio-footer .portfolio-footer-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 16px;
  color: rgba(255, 255, 255, 0.7019607843);
  font: 600 13px/1.3 Pretendard, sans-serif;
}
body .portfolio-footer .portfolio-footer-meta > span:nth-child(2) {
  justify-self: center;
}
body .portfolio-footer .portfolio-footer-meta > a {
  justify-self: end;
  text-align: right;
}
body .portfolio-footer .portfolio-greeting {
  display: block;
  color: #fff;
  margin-top: 20px;
  font: 700 clamp(26px, 7.3vw, 148px)/1.2 Poppins, sans-serif;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
body .portfolio-footer .portfolio-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  color: #aaa;
  font: 400 12px/1.4 Pretendard, sans-serif;
}

body .shared-footer-section {
  min-height: 0;
  background: #191919;
}

body .shared-footer-section > .story-pin {
  position: relative;
  padding: 0;
  overflow: visible;
}

@media (max-width: 1279px) {
  body {
    --chrome-top: 28px;
  }
  body .portfolio-footer .related-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body .portfolio-footer .related-desktop .related-card:nth-child(n+5) {
    display: none;
  }
}
@media (max-width: 1023px) {
  body .portfolio-footer .related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body .portfolio-footer .related-desktop .related-card:nth-child(n+4) {
    display: none;
  }
}
@media (max-width: 767px) {
  body {
    --chrome-gutter: 16px;
    --chrome-top: 20px;
  }
  .shared-header {
    height: 86px;
  }
  a.shared-brand, body .shared-brand-footer {
    font-size: 19px;
    gap: 5px;
  }
  .shared-brand-mark {
    width: 24px;
    height: 26px;
    font-size: 26px;
  }
  .home-contact.shared-contact {
    gap: 8px;
  }
  .shared-contact .home-contact-label {
    font-size: 10px;
    padding: 7px 9px;
    border-radius: 10px;
  }
  .shared-contact .home-contact-portrait {
    width: 44px;
    height: 44px;
    padding: 3px;
  }
  .shared-contact .contact-avatar {
    --avatar-size: 34px;
  }
  .shared-contact .home-contact-dot {
    width: 10px;
    height: 10px;
    border-width: 2px;
    right: 0;
    bottom: 2px;
  }
  .shared-theme-switch {
    top: 68px;
    right: 16px;
  }
  body.home-page {
    padding-top: 86px;
  }
  body .portfolio-footer {
    padding: 64px 16px 110px;
  }
  body .portfolio-footer .related-projects > h2 {
    font-size: 22px;
    margin-bottom: 24px;
  }
  body .portfolio-footer .related-desktop {
    display: none;
  }
  body .portfolio-footer .related-mobile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  body .portfolio-footer .related-direction {
    display: block;
    color: #bbb;
    font-size: 12px;
    margin-bottom: 12px;
  }
  body .portfolio-footer .related-card h3 {
    font-size: 14px;
    margin-top: 16px;
  }
  body .portfolio-footer .related-card p {
    font-size: 11px;
  }
  body .portfolio-footer .portfolio-footer-signoff {
    margin-top: 100px;
  }
  body .portfolio-footer .portfolio-footer-meta {
    font-size: 10px;
    gap: 8px;
  }
  body .portfolio-footer .portfolio-footer-bottom {
    font-size: 10px;
    gap: 8px 14px;
    margin-top: 20px;
  }
}
@media (max-width: 359px) {
  .shared-contact .home-contact-label {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body .portfolio-footer .related-media img {
    transition: none;
  }
}
body[data-chrome-dark-surface=true] {
  --chrome-ink: #fff;
  --chrome-surface: #191919c9;
}

/* Unified portrait contact and scroll-to-top · 2026-11-10 */
.home-contact-label,.home-footer [data-contact-open],.portfolio-footer [data-contact-open],.contact-launcher{display:none!important}
.global-back-top{position:fixed;right:24px;bottom:24px;left:auto;z-index:10010;width:44px;height:44px;border:1px solid #ddd;border-radius:50%;background:#fffffff0;color:#111;font:22px/1 Arial;cursor:pointer;box-shadow:0 3px 15px #0001;opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .4s,transform .4s,visibility .4s}
.global-back-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.global-back-top[hidden]{display:none}.story-back-top,.rd4-top,[data-flow-top]{display:none!important}
.home-page .home-coming-corner{position:absolute;right:12px;bottom:12px;z-index:3;top:auto;left:auto;border-radius:999px;padding:7px 12px;background:#fff;color:#171717;font-size:10px;line-height:1}
body.special-force-dark{background:#282828;color:#f7f7f3;--portfolio-bg:#282828;--portfolio-ink:#f7f7f3;--portfolio-hero-ink:#eee6e1}
body.special-force-dark .project-overview,body.special-force-dark .project-image{background:#282828;color:#f7f7f3}
@media(min-width:1280px){
 body[data-large-phones] .case-phones .case-artwork-layout{max-width:2000px;grid-template-columns:repeat(var(--phone-columns),minmax(0,620px));justify-content:center;gap:clamp(24px,2.5vw,48px)}
 body[data-large-phones] .case-phones img{max-width:620px;width:100%}
 body[data-large-phones] .case-phones[style*="--phone-columns:2"] .case-artwork-layout{max-width:1288px}
 body[data-large-phones] .project-image img{max-width:620px;width:100%;margin-inline:auto}
}
@media(max-width:767px){.global-back-top{right:16px;bottom:16px;width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.global-back-top{transition:none}}