@font-face { font-family: CYPF; src: url('/sans.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: CYPF; src: url('/bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
:root { color-scheme: dark; --graphite: #242629; --paper: #f4f1ea; --gold: #c7b27f; --muted: #b0b1b3; --ease-out: cubic-bezier(.23,1,.32,1); --gutter: clamp(20px,4.8vw,92px); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--graphite); color: var(--paper); font-family: CYPF,Helvetica,sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 7px; }
.header,main,footer { width: min(100%,1920px); margin-inline: auto; }
.header { min-height: clamp(88px,10vw,132px); display: flex; align-items: center; padding: 20px var(--gutter); gap: clamp(14px,2.5vw,36px); flex-shrink: 0; }
.brand { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(26px,2.3vw,34px); font-weight: 700; letter-spacing: -1px; flex-shrink: 0; }
.brand-description { font-size: clamp(10px,1vw,14px); line-height: 1.4; }
.mobile-break { display: none; }
.soon { margin-left: auto; font-size: clamp(8px,.8vw,11px); letter-spacing: clamp(.6px,.1vw,1.5px); text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: clamp(6px,.7vw,10px); white-space: nowrap; flex-shrink: 0; }
.soon > span { width: 4px; height: 4px; background: var(--gold); border-radius: 50%; }
main { flex: 1; display: grid; grid-template-columns: minmax(0,59.3fr) minmax(0,40.7fr); }
.intro { min-width: 0; display: flex; align-items: center; padding: clamp(24px,3vw,48px) clamp(20px,3vw,58px) clamp(24px,3vw,48px) var(--gutter); }
.intro-content { width: 100%; container-type: inline-size; }
h1 { font-size: clamp(48px,min(15.9cqw,11svh),132px); line-height: 1.04; font-weight: 700; letter-spacing: -.045em; margin: 0 0 clamp(24px,3vw,44px); }
.headline-field { display: inline-flex; align-items: baseline; width: 5.6em; max-width: 100%; margin-top: .04em; }
.particle-word { position: relative; display: inline-block; flex: 1; height: 1.25em; min-width: 0; }
.headline-period { flex: none; display: inline-block; width: .32em; margin-left: .08em; line-height: 1; }
.particle-overlay { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 2; }
.description { font-size: clamp(16px,1.55vw,24px); line-height: 1.65; color: var(--muted); letter-spacing: -.015em; max-width: 40em; }
.description p { margin: 0; }
.contact { display: inline-flex; align-items: center; min-height: 44px; gap: clamp(18px,2vw,28px); font-size: clamp(18px,1.6vw,23px); padding: 4px 0 10px; margin-top: clamp(28px,4.3vw,64px); border-bottom: 1px solid #9a8c66; }
.contact span { color: var(--gold); font-size: 22px; transition: transform 180ms var(--ease-out); }
.credit { font-size: clamp(9px,.7vw,10px); letter-spacing: 1.7px; text-transform: uppercase; color: #92958f; margin: clamp(24px,3vw,42px) 0 0; }
.visual { position: relative; min-width: 0; min-height: 0; }
.visual-caption { position: absolute; top: clamp(20px,3vw,42px); left: clamp(16px,2.4vw,35px); font-size: clamp(9px,.7vw,10px); letter-spacing: 1.8px; text-transform: uppercase; color: #aaa99e; pointer-events: none; }
footer { flex-shrink: 0; min-height: clamp(64px,6vw,88px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px,1.4vw,20px); padding: 22px var(--gutter); padding-bottom: max(22px,env(safe-area-inset-bottom)); font-size: clamp(8px,.7vw,10px); line-height: 1.6; letter-spacing: 1px; text-transform: uppercase; color: #92958f; }
.footer-rule { height: 1px; width: clamp(22px,2.6vw,38px); background: #55584e; }
@media (hover: hover) and (pointer: fine) { .contact:hover span { transform: translate(3px,-3px); } }
@media (min-width: 901px) and (max-height: 820px) {
  .header { min-height: 88px; padding-block: 12px; }
  .intro { padding-block: 20px; }
  h1 { font-size: clamp(48px,min(15.9cqw,12svh),116px); margin-bottom: 24px; }
  .contact { margin-top: 28px; }
  .credit { margin-top: 24px; }
  footer { min-height: 64px; padding-block: 16px; }
}
@media (max-width: 900px) {
  main { grid-template-columns: minmax(0,1fr); }
  .intro { padding: clamp(24px,5vw,40px) var(--gutter) 20px; }
  .intro-content { max-width: 680px; }
  h1 { font-size: clamp(44px,min(15.9cqw,10svh),104px); }
  .description { font-size: clamp(16px,2.3vw,20px); }
  .contact { margin-top: clamp(28px,5vw,44px); }
  .visual { display: none; }
}
@media (max-width: 600px) {
  .mobile-break { display: block; }
  .header { padding-top: max(16px,env(safe-area-inset-top)); padding-bottom: 16px; }
  .description { max-width: 32em; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition: none !important; scroll-behavior: auto !important; } }