/*
Theme Name: KOHD Cinematic
Theme URI: https://kohd.space/
Author: KOHD
Description: Custom cinematic WordPress theme for KOHD Studio.
Version: 1.0.11
Text Domain: kohd-cinematic
*/

:root {
  --kohd-bg: #070807;
  --kohd-fg: #f0e9df;
  --kohd-bronze: #bc8054;
  --kohd-bronze-light: #f0b47d;
  --kohd-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --kohd-sans: "Manrope", Arial, Helvetica, sans-serif;
}

html { margin: 0 !important; background: var(--kohd-bg); scroll-behavior: smooth; }
body.kohd-page { margin: 0; background: var(--kohd-bg); color: var(--kohd-fg); overflow-x: hidden; font-family: var(--kohd-sans); }
body.kohd-page #wpadminbar { z-index: 1000; }

#kohd-home,
#kohd-home *,
#kohd-home *::before,
#kohd-home *::after { box-sizing: border-box; }
#kohd-home { font-family: var(--kohd-sans); direction: ltr; }
#kohd-home button,
#kohd-home a { color: inherit; font: inherit; }
#kohd-home a { text-decoration: none; }
#kohd-home .hero-content,
#kohd-home .site-header,
#kohd-home .hero-footer { direction: ltr; }

#kohd-home.kohd-hero {
  --mouse-x: 50%;
  --mouse-y: 50%;
  --shift-x: 0px;
  --shift-y: 0px;
  position: relative;
  min-height: 100svh;
  overflow: clip;
  isolation: isolate;
  background: var(--kohd-bg);
}

#kohd-home .world-bg {
  position: absolute;
  inset: -3%;
  z-index: -6;
  background: var(--kohd-background-image) center 46% / cover no-repeat;
  filter: saturate(.78) contrast(1.04) brightness(.54);
  transform: translate3d(var(--shift-x), var(--shift-y), 0) scale(1.07);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  animation: kohd-world-breathe 16s ease-in-out infinite alternate;
}
#kohd-home .world-shadow {
  position: absolute;
  inset: 0;
  z-index: -5;
  background:
    linear-gradient(180deg, rgba(2,3,2,.54) 0%, rgba(5,6,4,.06) 35%, rgba(3,4,3,.24) 74%, rgba(4,5,4,.68) 100%),
    radial-gradient(circle at 50% 45%, transparent 0 18%, rgba(2,3,2,.05) 48%, rgba(2,3,2,.46) 100%);
}
#kohd-home .cursor-light {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: radial-gradient(circle 470px at var(--mouse-x) var(--mouse-y), rgba(224,164,111,.12), transparent 70%);
  mix-blend-mode: screen;
}
#kohd-home .grain {
  position: absolute;
  inset: -100%;
  z-index: 30;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation: kohd-grain .22s steps(2) infinite;
}

#kohd-home .preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #050605;
  transition: opacity .8s cubic-bezier(.65,0,.35,1), visibility .8s;
}
#kohd-home .preloader-mark {
  color: #d39a6e;
  font-family: var(--kohd-serif);
  font-size: clamp(4rem, 9vw, 8rem);
  font-weight: 400;
  opacity: .9;
}
#kohd-home .preloader-line {
  position: absolute;
  top: calc(50% + 5.5rem);
  width: 120px;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}
#kohd-home .preloader-line::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #b9784e, #f0b47d);
  transform-origin: left;
  animation: kohd-loading 1.3s cubic-bezier(.8,0,.2,1) both;
}
#kohd-home.is-loaded .preloader { opacity: 0; visibility: hidden; }

#kohd-home .site-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  padding: 28px clamp(22px, 4vw, 68px);
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 1s .55s ease, transform 1s .55s ease;
}
#kohd-home.is-loaded .site-header { opacity: 1; transform: translateY(0); }
#kohd-home .brand { width: clamp(82px, 8vw, 130px); }
#kohd-home .brand img { display: block; width: 100%; height: auto; }
#kohd-home .main-nav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 52px);
  color: rgba(247,240,231,.78);
  font-size: .69rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
#kohd-home .main-nav a { position: relative; padding: 8px 0; transition: color .35s ease; }
#kohd-home .main-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: var(--kohd-bronze-light);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s ease;
}
#kohd-home .main-nav a:hover { color: #fff; }
#kohd-home .main-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
#kohd-home .shop-button,
#kohd-home .control-button {
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
#kohd-home .shop-button {
  position: relative;
  justify-self: end;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(247,235,220,.28);
  border-radius: 50%;
  background: rgba(8,9,7,.28);
  color: #f2e9df;
  backdrop-filter: blur(10px);
  transition: border-color .3s ease, background .3s ease;
}
#kohd-home .shop-button:hover { border-color: rgba(240,180,125,.68); background: rgba(188,128,84,.17); }
#kohd-home .shop-button svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#kohd-home .shop-button i {
  position: absolute;
  top: 8px;
  right: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--kohd-bronze-light);
  box-shadow: 0 0 10px rgba(240,180,125,.8);
}

#kohd-home .header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
#kohd-home .mobile-menu-button,
#kohd-home .mobile-menu { display: none; }
#kohd-home .language-switcher { position: relative; }
#kohd-home .language-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: rgba(247,240,231,.78);
  cursor: pointer;
  font-size: .64rem;
  letter-spacing: .14em;
}
#kohd-home .language-button svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.25; }
#kohd-home .language-button:hover { color: var(--kohd-bronze-light); }
#kohd-home .language-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: -4px;
  z-index: 40;
  display: grid;
  min-width: 62px;
  padding: 6px;
  border: 1px solid rgba(240,180,125,.25);
  background: rgba(8,9,7,.92);
  box-shadow: 0 16px 35px rgba(0,0,0,.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
#kohd-home .language-switcher.is-open .language-menu { opacity: 1; visibility: visible; transform: translateY(0); }
#kohd-home .language-menu a { padding: 8px 9px; color: rgba(247,240,231,.72); font-size: .61rem; letter-spacing: .13em; }
#kohd-home .language-menu a:hover { color: var(--kohd-bronze-light); background: rgba(188,128,84,.12); }

#kohd-home .hero-content {
  position: relative;
  z-index: 5;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 118px 24px 94px;
}
#kohd-home .hero-title {
  position: absolute;
  top: clamp(10%, 14vh, 16%);
  left: 50%;
  z-index: -1;
  display: flex;
  justify-content: center;
  width: min(88vw, 1280px);
  transform: translateX(-50%);
  color: rgba(242,229,213,.9);
  font-family: var(--kohd-serif);
  font-size: clamp(5.4rem, 15.5vw, 15rem);
  font-weight: 400;
  line-height: .78;
  letter-spacing: .09em;
  text-shadow: 0 12px 50px rgba(0,0,0,.42);
  pointer-events: none;
}
#kohd-home .hero-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1.1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1);
}
#kohd-home.is-loaded .hero-title span { opacity: 1; transform: translateY(0); }
#kohd-home.is-loaded .hero-title span:nth-child(1) { transition-delay: .34s; }
#kohd-home.is-loaded .hero-title span:nth-child(2) { transition-delay: .42s; }
#kohd-home.is-loaded .hero-title span:nth-child(3) { transition-delay: .5s; }
#kohd-home.is-loaded .hero-title span:nth-child(4) { transition-delay: .58s; }

#kohd-home .game-shell {
  position: relative;
  width: clamp(300px, 42vmin, 430px);
  margin-top: clamp(70px, 13vh, 132px);
  opacity: 0;
  transform: translateY(32px) scale(.96);
  transition: opacity 1.2s .7s ease, transform 1.2s .7s cubic-bezier(.16,1,.3,1), filter .4s ease;
}
#kohd-home.is-loaded .game-shell { opacity: 1; transform: translateY(0) scale(1); }
#kohd-home .game-shell.is-eating { filter: drop-shadow(0 0 20px rgba(215,151,100,.24)); }
#kohd-home .game-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 0 3px 10px;
  color: rgba(240,180,125,.88);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
#kohd-home .game-meta span { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
#kohd-home .game-meta b { font-weight: 400; }
#kohd-home .game-meta small { color: rgba(244,234,222,.58); font-size: .52rem; font-weight: 400; letter-spacing: .17em; }
#kohd-home .game-board {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background-color: transparent;
  background-image:
    linear-gradient(rgba(224,174,132,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224,174,132,.12) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(188,128,84,.065), transparent 70%);
  background-size: calc(100% / 18) calc(100% / 18), calc(100% / 18) calc(100% / 18), 100% 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#kohd-home .game-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 180px at var(--mouse-x) var(--mouse-y), rgba(240,180,125,.11), transparent 70%);
  pointer-events: none;
}
#kohd-home .snake-piece,
#kohd-home .olive-food {
  position: absolute;
  left: calc(var(--cell-x) * (100% / 18));
  top: calc(var(--cell-y) * (100% / 18));
  width: calc(100% / 18);
  height: calc(100% / 18);
  transition: left 155ms linear var(--piece-delay), top 155ms linear var(--piece-delay);
}
#kohd-home .snake-piece::before,
#kohd-home .olive-food::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 64% 36% 62% 38%;
  background: linear-gradient(145deg, #f0dbc6 0%, #c08a61 50%, #71472f 100%);
  box-shadow: inset 2px 2px 3px rgba(255,255,255,.2), 0 2px 7px rgba(96,56,34,.42);
  transform: rotate(42deg);
}
#kohd-home .snake-piece:nth-of-type(3n)::before { transform: rotate(62deg) scale(.92); }
#kohd-home .snake-piece:nth-of-type(4n)::before { transform: rotate(24deg) scale(.88); }
#kohd-home .snake-head::before {
  inset: 13%;
  background: linear-gradient(145deg, #fff0df 0%, #d49a6d 52%, #77482f 100%);
  box-shadow: 0 0 12px rgba(222,158,106,.5), inset 2px 2px 3px rgba(255,255,255,.24);
}
#kohd-home .snake-head::after {
  content: "";
  position: absolute;
  top: 31%;
  left: 29%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #202618;
  box-shadow: 8px 0 0 #202618;
  transform: rotate(42deg);
}
#kohd-home .olive-food::before {
  inset: 16%;
  background: linear-gradient(145deg, #cbd59b, #8f9d62 58%, #46512d);
  box-shadow: 0 0 16px rgba(157,174,104,.72), inset 2px 2px 3px rgba(255,255,255,.22);
  animation: kohd-food-pulse 1.35s ease-in-out infinite;
}
#kohd-home .olive-food::after {
  content: "";
  position: absolute;
  top: 9%;
  left: 54%;
  width: 24%;
  height: 18%;
  border-radius: 80% 0 80% 0;
  background: #b7c584;
  transform: rotate(-22deg);
}
#kohd-home .mobile-controls { display: none; }

#kohd-home .hero-footer {
  position: absolute;
  right: clamp(22px, 4vw, 68px);
  bottom: 25px;
  left: clamp(22px, 4vw, 68px);
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  color: rgba(243,233,222,.66);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s 1.2s ease, transform 1s 1.2s ease;
}
#kohd-home.is-loaded .hero-footer { opacity: 1; transform: translateY(0); }
#kohd-home .availability { display: flex; align-items: center; gap: 9px; }
#kohd-home .availability i { width: 6px; height: 6px; border-radius: 50%; background: var(--kohd-bronze-light); box-shadow: 0 0 10px rgba(240,180,125,.65); animation: kohd-status 2.4s ease-in-out infinite; }
#kohd-home .scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#kohd-home .scroll-cue i { position: relative; width: 1px; height: 25px; overflow: hidden; background: rgba(255,255,255,.18); }
#kohd-home .scroll-cue i::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: var(--kohd-bronze-light); animation: kohd-scroll-line 2.1s ease-in-out infinite; }
#kohd-home .edition { justify-self: end; }

@keyframes kohd-loading { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kohd-grain { 0% { transform: translate(0,0); } 25% { transform: translate(3%,-2%); } 50% { transform: translate(-2%,3%); } 75% { transform: translate(2%,2%); } 100% { transform: translate(-3%,-3%); } }
@keyframes kohd-world-breathe { from { scale: 1; } to { scale: 1.018; } }
@keyframes kohd-food-pulse { 0%,100% { transform: rotate(42deg) scale(.82); } 50% { transform: rotate(42deg) scale(1.04); } }
@keyframes kohd-status { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes kohd-scroll-line { 0% { transform: translateY(0); } 60%,100% { transform: translateY(200%); } }

@media (max-width: 760px) {
  #kohd-home.kohd-hero { min-height: 100dvh; }
  #kohd-home .site-header { grid-template-columns: 1fr auto; padding: 16px 18px; }
  #kohd-home .brand { width: 78px; }
  #kohd-home .main-nav { display: none; }
  #kohd-home .shop-button { width: 36px; height: 36px; }
  #kohd-home .shop-button svg { width: 16px; height: 16px; }
  #kohd-home .header-actions { position: relative; gap: 7px; z-index: 55; }
  #kohd-home .mobile-menu-button {
    display: grid;
    grid-template-columns: repeat(2, 5px);
    gap: 3px;
    place-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(247,235,220,.24);
    border-radius: 50%;
    background: rgba(8,9,7,.28);
    color: var(--kohd-bronze-light);
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
  }
  #kohd-home .mobile-menu-button i { width: 5px; height: 5px; border: 1px solid currentColor; }
  #kohd-home .mobile-menu-button:active { transform: scale(.92); }
  #kohd-home.is-mobile-menu-open .mobile-menu-button { background: rgba(188,128,84,.18); border-color: rgba(240,180,125,.82); }
  #kohd-home .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .32s ease, visibility .32s ease;
  }
  #kohd-home.is-mobile-menu-open .mobile-menu { opacity: 1; visibility: visible; pointer-events: auto; }
  .kohd-menu-open { overflow: hidden; }
  #kohd-home .mobile-menu-backdrop { position: absolute; inset: 0; background: rgba(3,4,3,.68); backdrop-filter: blur(5px); }
  #kohd-home .mobile-menu-panel {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(240,180,125,.36);
    background: linear-gradient(145deg, rgba(29,24,19,.985), rgba(7,9,7,.99) 58%, rgba(35,25,17,.99));
    box-shadow: 0 28px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,245,232,.08);
    transform: translateY(-14px) scale(.985);
    transition: transform .42s cubic-bezier(.2,.8,.2,1);
  }
  #kohd-home .mobile-menu-panel::before { content: ""; position: absolute; top: -25%; right: -30%; width: 90vw; height: 90vw; border: 1px solid rgba(240,180,125,.12); border-radius: 50%; pointer-events: none; }
  #kohd-home .mobile-menu-panel::after { content: ""; position: absolute; right: 26px; bottom: 20px; width: 1px; height: 32%; background: linear-gradient(transparent, rgba(240,180,125,.42), transparent); }
  #kohd-home.is-mobile-menu-open .mobile-menu-panel { transform: translateY(0) scale(1); }
  #kohd-home .mobile-menu-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
  #kohd-home .mobile-menu-mark { color: #f5e8da; font-family: var(--kohd-serif); font-size: 1.25rem; letter-spacing: .18em; }
  #kohd-home .mobile-menu-close { position: relative; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(247,235,220,.25); border-radius: 50%; background: transparent; color: var(--kohd-bronze-light); }
  #kohd-home .mobile-menu-close i { position: absolute; top: 17px; left: 9px; width: 16px; height: 1px; background: currentColor; transform: rotate(45deg); }
  #kohd-home .mobile-menu-close i + i { transform: rotate(-45deg); }
  #kohd-home .mobile-menu-kicker { position: relative; z-index: 1; margin: 12vh 0 20px; color: rgba(240,180,125,.76); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; }
  #kohd-home .mobile-menu-links { position: relative; z-index: 1; display: flex; flex-direction: column; }
  #kohd-home .mobile-menu-links a { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; gap: 12px; padding: 15px 0; color: #f7eee5; border-bottom: 1px solid rgba(255,255,255,.11); }
  #kohd-home .mobile-menu-links small { color: var(--kohd-bronze-light); font-size: .56rem; letter-spacing: .14em; }
  #kohd-home .mobile-menu-links span { font-family: var(--kohd-serif); font-size: clamp(2.15rem, 10vw, 3rem); font-weight: 400; line-height: .9; }
  #kohd-home .mobile-menu-links a:active { color: var(--kohd-bronze-light); }
  #kohd-home .mobile-menu-bottom { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; color: rgba(247,240,231,.52); font-size: .51rem; letter-spacing: .14em; text-transform: uppercase; }
  #kohd-home .mobile-menu-bottom i { width: 6px; height: 6px; border-radius: 50%; background: var(--kohd-bronze-light); box-shadow: 0 0 10px rgba(240,180,125,.75); }
  #kohd-home .language-button { min-height: 36px; padding: 0 4px; font-size: .56rem; }
  #kohd-home .language-button svg { width: 14px; height: 14px; }
  #kohd-home .language-menu { right: 0; }
  #kohd-home .hero-content { min-height: 100dvh; padding: 98px 18px 82px; }
  #kohd-home .hero-title { top: 13%; width: 92vw; font-size: clamp(3.75rem, 20vw, 5.2rem); letter-spacing: .03em; }
  #kohd-home .game-shell { width: min(258px, 72vw); margin-top: clamp(38px, 10vh, 72px); }
  #kohd-home .game-board { touch-action: none; }
  #kohd-home .game-meta { min-height: 23px; padding-bottom: 6px; font-size: .5rem; }
  #kohd-home .mobile-controls { display: none !important; }
  #kohd-home .hero-footer { right: 18px; bottom: 16px; left: 18px; grid-template-columns: 1fr 1fr; font-size: .46rem; letter-spacing: .13em; }
  #kohd-home .scroll-cue { display: none; }
  #kohd-home .edition { justify-self: end; text-align: right; }
  #kohd-home .availability { max-width: 160px; line-height: 1.45; }
}

@media (max-width: 430px) {
  #kohd-home .hero-title { top: 14%; font-size: clamp(3.5rem, 19vw, 4.8rem); }
  #kohd-home .game-shell { width: min(238px, 70vw); }
}

@media (max-height: 700px) and (min-width: 761px) {
  #kohd-home .game-shell { width: 310px; margin-top: 58px; }
  #kohd-home .hero-title { top: 13%; }
}

@media (prefers-reduced-motion: reduce) {
  #kohd-home *, #kohd-home *::before, #kohd-home *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  #kohd-home .world-bg { transform: none; }
  #kohd-home .preloader { display: none; }
}

/* Stacked homepage sections */
.kohd-sections {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #080908;
  color: #f0e9df;
  font-family: var(--kohd-sans);
}
.kohd-sections a,
.kohd-sections a:visited { color: inherit !important; text-decoration: none !important; }
.kohd-section {
  position: relative;
  width: min(1240px, calc(100% - 12vw));
  margin: 0 auto;
  padding: clamp(92px, 13vw, 190px) 0;
}
.kohd-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1);
}
.kohd-reveal.is-visible { opacity: 1; transform: translateY(0); }
.section-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(240,180,125,.82);
  font-size: .61rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.section-kicker span:first-child { color: rgba(244,234,222,.36); }
.section-rule {
  width: 100%;
  height: 1px;
  margin-top: clamp(64px, 8vw, 112px);
  background: linear-gradient(90deg, rgba(240,180,125,.38), rgba(255,255,255,.08), transparent);
}
.about-grid,
.shop-teaser-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: clamp(40px, 9vw, 150px);
  margin-top: 42px;
}
.about-grid h2,
.shop-teaser-grid h2,
.services-heading h2,
.work-heading h2,
.contact-section h2 {
  max-width: 780px;
  margin: 0;
  color: #f3e8dc;
  font-family: var(--kohd-serif);
  font-size: clamp(2.8rem, 6.5vw, 6.8rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .94;
}
.about-grid h2 em,
.shop-teaser-grid h2 em,
.services-heading h2 em,
.work-heading h2 em,
.contact-section h2 em,
.philosophy-section em {
  color: var(--kohd-bronze-light);
  font-style: italic;
}
.section-copy {
  align-self: end;
  max-width: 350px;
  color: rgba(243,233,222,.62);
  font-size: .93rem;
  line-height: 1.8;
}
.section-copy p { margin: 0 0 18px; }
.text-link,
.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(240,180,125,.55);
  color: #f0b47d !important;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: gap .35s ease, color .35s ease;
}
.text-link:hover,
.contact-email:hover { gap: 25px; color: #fff0df; }
.kohd-sections .text-link,
.kohd-sections .text-link:visited { color: #f0b47d !important; }
.services-section { padding-bottom: clamp(100px, 14vw, 210px); }
.services-heading,
.work-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 42px;
}
.services-heading p {
  max-width: 270px;
  margin: 0 0 4px;
  color: rgba(243,233,222,.55);
  font-size: .9rem;
  line-height: 1.7;
}
.service-list {
  margin-top: clamp(70px, 9vw, 128px);
  border-top: 1px solid rgba(240,180,125,.25);
}
.service-row {
  display: grid;
  grid-template-columns: 58px minmax(170px, 1fr) minmax(230px, .85fr) 30px;
  align-items: center;
  gap: 20px;
  min-height: 112px;
  border-bottom: 1px solid rgba(255,255,255,.11);
  transition: padding .4s ease, background .4s ease;
}
.service-row:hover { padding: 0 20px; background: rgba(188,128,84,.06); }
.service-number { color: rgba(240,180,125,.68); font-size: .67rem; letter-spacing: .14em; }
.service-row h3 { margin: 0; color: #f0e4d7; font-family: var(--kohd-serif); font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 400; }
.service-row p { max-width: 340px; margin: 0; color: rgba(243,233,222,.5); font-size: .78rem; line-height: 1.6; }
.service-arrow { justify-self: end; color: var(--kohd-bronze-light); font-size: 1.2rem; transition: transform .35s ease; }
.service-row:hover .service-arrow { transform: translate(4px, -4px); }
.work-section { width: min(1340px, calc(100% - 8vw)); }
.portfolio-preview { padding-top: clamp(110px, 15vw, 210px); padding-bottom: clamp(120px, 17vw, 230px); }
.portfolio-preview-row { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-top: 42px; }
.portfolio-preview-row h2 { margin: 0; color: #f3e8dc; font-family: var(--kohd-serif); font-size: clamp(3rem, 7vw, 7.2rem); font-weight: 400; letter-spacing: -.05em; line-height: .9; }
.portfolio-preview-row h2 em { color: var(--kohd-bronze-light); font-style: italic; }
.portfolio-preview-link { display: inline-flex; align-items: center; gap: 18px; padding-bottom: 8px; border-bottom: 1px solid rgba(240,180,125,.55); color: #f0b47d !important; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; transition: gap .35s ease, color .35s ease; }
.portfolio-preview-link:hover { gap: 25px; color: #fff0df !important; }
.portfolio-preview-link b { font-size: 1.1rem; font-weight: 400; }
.kohd-sections .portfolio-preview-link,
.kohd-sections .portfolio-preview-link:visited { color: #f0b47d !important; }
.work-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 12px;
  margin-top: clamp(64px, 8vw, 110px);
}
.work-card {
  position: relative;
  display: flex;
  min-height: 430px;
  overflow: hidden;
  padding: 24px;
  isolation: isolate;
  background: #12120f;
}
.work-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--card-image) center / cover no-repeat;
  filter: saturate(.62) brightness(.43);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease;
}
.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5,5,4,.12), rgba(5,5,4,.8));
}
.work-card:hover::before { transform: scale(1.06); filter: saturate(.8) brightness(.55); }
.work-card-index { color: rgba(255,240,223,.65); font-size: .66rem; letter-spacing: .16em; }
.work-card-content { align-self: end; display: flex; flex-direction: column; gap: 10px; }
.work-card-content small { color: rgba(240,180,125,.85); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; }
.work-card-content strong { color: #fff0df; font-family: var(--kohd-serif); font-size: clamp(1.8rem, 3.4vw, 3.5rem); font-weight: 400; line-height: .94; }
.work-card-arrow { position: absolute; top: 22px; right: 22px; color: #f0b47d; font-size: 1.2rem; transition: transform .35s ease; }
.work-card:hover .work-card-arrow { transform: translate(4px, -4px); }
.shop-section { width: min(1240px, calc(100% - 12vw)); padding-top: clamp(130px, 18vw, 250px); }
.shop-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: linear-gradient(rgba(240,180,125,.3), transparent 30%, transparent 70%, rgba(240,180,125,.15));
  opacity: .45;
}
.shop-teaser-mark { position: absolute; top: 7%; right: 10%; color: rgba(240,180,125,.28); font-family: var(--kohd-serif); font-size: 4rem; }
.coming-soon { display: inline-block; margin-top: 14px; color: rgba(243,233,222,.38); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; }
.philosophy-section { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; align-items: start; min-height: 60vh; }
.philosophy-section blockquote { grid-column: 2; margin: 14px 0 0; color: #f2e8dd; font-family: var(--kohd-serif); font-size: clamp(3.2rem, 7.6vw, 8rem); font-weight: 400; letter-spacing: -.06em; line-height: .88; }
.philosophy-note { grid-column: 2; max-width: 320px; margin: 44px 0 0 28%; color: rgba(243,233,222,.5); font-size: .85rem; line-height: 1.7; }
.contact-section { display: flex; flex-direction: column; align-items: center; min-height: 75vh; padding-top: clamp(160px, 20vw, 290px); text-align: center; }
.contact-section .section-kicker { margin-bottom: 45px; }
.contact-section h2 { font-size: clamp(3.2rem, 8vw, 8.8rem); }
.contact-email { margin-top: 58px; font-size: .78rem; }
.contact-orbit { position: absolute; top: 8%; left: 50%; width: min(52vw, 600px); aspect-ratio: 1; border: 1px solid rgba(240,180,125,.13); border-radius: 50%; transform: translateX(-50%) rotate(-20deg); }
.contact-orbit::before,
.contact-orbit::after { content: ""; position: absolute; inset: 10%; border: 1px solid rgba(240,180,125,.08); border-radius: 50%; }
.contact-orbit::after { inset: 24%; border-color: rgba(240,180,125,.08); }
.kohd-site-footer { width: min(1240px, calc(100% - 12vw)); margin: 0 auto; padding: 36px 0 28px; border-top: 1px solid rgba(255,255,255,.12); }
.footer-brand { display: inline-block; color: #f0e4d7 !important; font-family: var(--kohd-serif); font-size: 1.5rem; letter-spacing: .12em; }
.footer-links a { color: rgba(243,233,222,.55) !important; }
.kohd-sections .footer-brand,
.kohd-sections .footer-brand:visited { color: #f0e4d7 !important; }
.kohd-sections .footer-links a,
.kohd-sections .footer-links a:visited { color: rgba(243,233,222,.55) !important; }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 30px; color: rgba(243,233,222,.55); font-size: .63rem; letter-spacing: .16em; text-transform: uppercase; }
.footer-links a:hover { color: #f0b47d; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 68px; color: rgba(243,233,222,.3); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 760px) {
  .kohd-section,
  .kohd-site-footer,
  .shop-section { width: min(100% - 44px, 620px); }
  .kohd-section { padding: 78px 0; }
  .about-grid,
  .shop-teaser-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-grid h2,
  .shop-teaser-grid h2,
  .services-heading h2,
  .work-heading h2,
  .contact-section h2 { font-size: clamp(2.8rem, 12vw, 5rem); }
  .section-copy { max-width: 420px; }
  .services-heading,
  .work-heading { display: block; }
  .portfolio-preview { padding: 92px 0 105px; }
  .portfolio-preview-row { display: block; }
  .portfolio-preview-link { margin-top: 34px; }
  .services-heading p { margin-top: 28px; }
  .work-heading .text-link { margin-top: 30px; }
  .service-row { grid-template-columns: 34px 1fr 20px; gap: 12px; min-height: 145px; }
  .service-row p { grid-column: 2 / 4; grid-row: 2; font-size: .74rem; }
  .service-row h3 { font-size: 1.55rem; }
  .service-row:hover { padding: 0 8px; }
  .work-grid { grid-template-columns: 1fr; gap: 10px; }
  .work-card,
  .work-card-large { min-height: 340px; }
  .shop-section::before { left: 78%; }
  .shop-teaser-mark { top: 4%; right: 5%; }
  .philosophy-section { display: block; min-height: 0; padding-bottom: 92px; }
  .philosophy-section blockquote { margin-top: 52px; font-size: clamp(3.1rem, 14vw, 5.4rem); }
  .philosophy-note { margin: 34px 0 0 20%; }
  .contact-section { min-height: 620px; padding-top: 150px; }
  .contact-orbit { top: 13%; width: 94vw; }
  .footer-bottom { flex-direction: column; gap: 12px; margin-top: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .kohd-reveal { opacity: 1; transform: none; transition: none; }
  .work-card::before { transition: none; }
}

/* Standalone About and Portfolio pages */
.kohd-page-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  width: min(1400px, calc(100% - 12vw));
  margin: 0 auto;
  padding: 30px 0;
}
.kohd-page-brand { width: clamp(86px, 8vw, 126px); }
.kohd-page-brand img { display: block; width: 100%; height: auto; }
.kohd-page-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); color: rgba(247,240,231,.74); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; }
.kohd-page-nav a { position: relative; padding: 8px 0; color: inherit; text-decoration: none; }
.kohd-page-nav a::after { content: ""; position: absolute; right: 0; bottom: 2px; left: 0; height: 1px; background: var(--kohd-bronze-light); transform: scaleX(0); transform-origin: right; transition: transform .3s ease; }
.kohd-page-nav a:hover::after,
.kohd-page-nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
.kohd-page-contact { justify-self: end; padding-bottom: 7px; border-bottom: 1px solid rgba(240,180,125,.55); color: var(--kohd-bronze-light); font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.kohd-page-contact span { display: inline-block; margin-left: 10px; font-size: 1rem; transition: transform .3s ease; }
.kohd-page-contact:hover span { transform: translate(3px, -3px); }
.kohd-portfolio-page { width: min(1400px, calc(100% - 12vw)); margin: 0 auto; padding: clamp(100px, 13vw, 190px) 0 clamp(130px, 18vw, 250px); }
.portfolio-hero { max-width: 1000px; }
.kohd-portfolio-page .kohd-reveal { opacity: 1; transform: none; }
.portfolio-hero h1 { margin: 44px 0 0; color: #f3e8dc; font-family: var(--kohd-serif); font-size: clamp(4rem, 10vw, 10rem); font-weight: 400; letter-spacing: -.06em; line-height: .84; }
.portfolio-hero h1 em { color: var(--kohd-bronze-light); font-style: italic; }
.portfolio-hero > p { max-width: 370px; margin: 42px 0 0 29%; color: rgba(243,233,222,.58); font-size: .9rem; line-height: 1.75; }
.portfolio-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin-top: clamp(100px, 13vw, 190px); }
.portfolio-card { position: relative; display: flex; min-height: 440px; overflow: hidden; padding: 24px; isolation: isolate; background: #12120f; }
.portfolio-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--card-image) center / cover no-repeat; filter: saturate(.62) brightness(.43); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease; }
.portfolio-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,5,4,.12), rgba(5,5,4,.8)); }
.portfolio-card:hover::before { transform: scale(1.06); filter: saturate(.8) brightness(.55); }
.portfolio-card-index { color: rgba(255,240,223,.65); font-size: .66rem; letter-spacing: .16em; }
.portfolio-card > div { align-self: end; display: flex; flex-direction: column; gap: 10px; }
.portfolio-card small { color: rgba(240,180,125,.85); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; }
.portfolio-card h2 { margin: 0; color: #fff0df; font-family: var(--kohd-serif); font-size: clamp(1.8rem, 3.4vw, 3.5rem); font-weight: 400; line-height: .94; }
.kohd-editorial-page { min-height: 70vh; width: min(1240px, calc(100% - 12vw)); margin: 0 auto; padding: clamp(130px, 16vw, 230px) 0 clamp(150px, 20vw, 300px); }
.kohd-editorial-inner { max-width: 1120px; }
.kohd-editorial-title { margin: 45px 0 0; color: #f3e8dc; font-family: var(--kohd-serif); font-size: clamp(3.5rem, 8vw, 8.5rem); font-weight: 400; letter-spacing: -.06em; line-height: .87; }
.kohd-editorial-title em { color: var(--kohd-bronze-light); font-style: italic; }
.editable-about-content { max-width: 540px; margin: 70px 0 0 35%; color: rgba(243,233,222,.64); font-size: 1rem; line-height: 1.85; }
.editable-about-content p { margin: 0 0 22px; }
.kohd-page-footer { width: min(1400px, calc(100% - 12vw)); }

.kohd-contact-page { width: min(1240px, calc(100% - 12vw)); margin: 0 auto; padding: clamp(105px, 14vw, 190px) 0 clamp(140px, 18vw, 250px); }
.kohd-contact-intro { max-width: 980px; }
.kohd-contact-intro h1 { margin: 42px 0 0; color: #f3e8dc; font-family: var(--kohd-serif); font-size: clamp(4rem, 10vw, 10rem); font-weight: 400; letter-spacing: -.06em; line-height: .82; }
.kohd-contact-intro h1 em { color: var(--kohd-bronze-light); font-style: italic; }
.kohd-contact-intro > p { max-width: 430px; margin: 48px 0 0 32%; color: rgba(243,233,222,.62); font-size: 1rem; line-height: 1.8; }
.kohd-contact-methods { margin-top: clamp(86px, 11vw, 150px); border-top: 1px solid rgba(240,180,125,.25); }
.kohd-contact-card { display: flex; align-items: center; gap: 20px; padding: 29px 0; border-bottom: 1px solid rgba(255,255,255,.11); color: inherit; text-decoration: none; }
.kohd-contact-icon,
.kohd-social-icon { display: grid; place-items: center; flex: 0 0 auto; color: var(--kohd-bronze-light); }
.kohd-contact-icon { width: 54px; height: 54px; border: 1px solid rgba(240,180,125,.45); border-radius: 50%; box-shadow: 0 0 22px rgba(240,180,125,.08); }
.kohd-contact-icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.kohd-contact-card small { display: block; margin-bottom: 6px; color: rgba(240,180,125,.75); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; }
.kohd-contact-card b { color: #f3e8dc; font-family: var(--kohd-serif); font-size: clamp(1.5rem, 3vw, 2.7rem); font-weight: 400; }
.kohd-social-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; padding-top: 28px; }
.kohd-social-item { display: flex; align-items: center; gap: 10px; min-height: 68px; padding: 12px; border: 1px solid rgba(255,255,255,.1); color: rgba(243,233,222,.68); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }
.kohd-social-icon { width: 30px; height: 30px; border: 1px solid rgba(240,180,125,.36); border-radius: 50%; filter: drop-shadow(0 0 8px rgba(240,180,125,.24)); }
.kohd-social-icon svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.editable-contact-content { max-width: 540px; margin: 58px 0 0 32%; color: rgba(243,233,222,.62); font-size: .95rem; line-height: 1.8; }

@media (max-width: 760px) {
  .kohd-page-header { grid-template-columns: 1fr auto; width: min(100% - 44px, 620px); }
  .kohd-page-nav { display: none; }
  .kohd-page-contact { font-size: .57rem; }
  .kohd-portfolio-page,
  .kohd-editorial-page,
  .kohd-page-footer { width: min(100% - 44px, 620px); }
  .portfolio-hero h1 { font-size: clamp(3.3rem, 16vw, 6rem); }
  .portfolio-hero > p { margin: 36px 0 0; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 90px; }
  .portfolio-card { min-height: 340px; }
  .kohd-editorial-title { font-size: clamp(3rem, 14vw, 5.4rem); }
  .editable-about-content { margin: 52px 0 0; }
  .kohd-contact-page { width: min(100% - 44px, 620px); padding-top: 92px; }
  .kohd-contact-intro h1 { font-size: clamp(3.3rem, 16vw, 6rem); }
  .kohd-contact-intro > p { margin: 36px 0 0; }
  .kohd-contact-methods { margin-top: 82px; }
  .kohd-contact-card b { font-size: clamp(1.45rem, 7vw, 2.1rem); }
  .kohd-social-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kohd-social-item { min-height: 58px; font-size: .56rem; }
  .editable-contact-content { margin: 45px 0 0; }
}