/*
Theme Name: dotz Holding V2.1
Theme URI: https://dotcity.co/
Author: dotcity
Description: Minimal official holding page for Dotz domains.
Version: 2.1.0
Text Domain: dotz-holding-v2-1
*/

:root {
  color-scheme: light;
  --paper: #fff;
  --white: #ffffff;
  --ink: #090909;
  --quiet: #68665f;
  --hairline: rgba(9, 9, 9, 0.16);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--paper);
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.site-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  padding: clamp(24px, 4.5vw, 68px);
}

.art-field {
  position: absolute;
  z-index: -2;
  right: -4vw;
  bottom: -10vh;
  width: min(72vw, 1120px);
  height: min(92vh, 940px);
  background:
    linear-gradient(90deg, var(--paper) 0%, rgba(255, 255, 255, 0.82) 14%, rgba(255, 255, 255, 0.18) 46%, transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, transparent 24%, transparent 76%, rgba(255, 255, 255, 0.2) 100%),
    url("assets/img/dotz-art-v2.webp") center / cover no-repeat;
  filter: saturate(1.04) contrast(1.02);
}

.city-trace {
  position: absolute;
  z-index: -1;
  top: clamp(44px, 9vh, 100px);
  left: clamp(24px, 4.5vw, 68px);
  width: min(32vw, 390px);
  height: 112px;
  color: var(--ink);
  opacity: 0.14;
  pointer-events: none;
}

.city-trace::before {
  position: absolute;
  inset: 31px 8px 24px 3px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  content: "";
  transform: skewX(-22deg);
  transform-origin: left center;
}

.city-trace::after {
  position: absolute;
  top: 28px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    72px 0 currentColor,
    141px 18px currentColor,
    218px -6px currentColor,
    302px 35px currentColor;
  content: "";
}

.hero {
  align-self: center;
  width: min(100%, 780px);
  padding: clamp(96px, 17vh, 188px) 0 clamp(64px, 12vh, 132px);
}

.host-mark {
  display: flex;
  align-items: flex-end;
  gap: clamp(7px, 1vw, 14px);
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.85rem, 4.2vw, 4.6rem);
  font-weight: 390;
  letter-spacing: -0.065em;
  line-height: 0.94;
}

.host-mark__home {
  display: inline-flex;
  align-items: flex-end;
  gap: inherit;
  color: inherit;
  text-decoration: none;
}

.host-mark__image-frame {
  position: relative;
  flex: 0 0 auto;
  width: clamp(152px, 25vw, 340px);
  aspect-ratio: 813 / 364;
  overflow: hidden;
}

.host-mark__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.host-mark__suffix {
  padding-bottom: 0.08em;
  white-space: nowrap;
}

.status {
  margin: clamp(25px, 4vh, 42px) 0 0;
  color: var(--quiet);
  font-size: clamp(0.94rem, 1.25vw, 1.12rem);
  font-weight: 560;
  letter-spacing: 0.025em;
  line-height: 1.35;
  text-transform: lowercase;
}

.credit {
  position: relative;
  display: flex;
  justify-content: flex-start;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  color: var(--quiet);
  font-size: 0.71rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: lowercase;
}

.credit a {
  text-decoration-color: rgba(9, 9, 9, 0.24);
  text-underline-offset: 4px;
}

.host-mark__home:focus-visible,
.credit a:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .site-shell {
    padding: 24px;
  }

  .art-field {
    right: -20vw;
    bottom: -8vh;
    width: 118vw;
    height: 58vh;
    background-position: 76% center;
    opacity: 0.88;
  }

  .city-trace {
    top: 38px;
    left: 24px;
    width: 62vw;
    opacity: 0.1;
    transform: scale(0.82);
    transform-origin: left top;
  }

  .hero {
    align-self: start;
    padding: clamp(150px, 25vh, 220px) 0 45vh;
  }

  .host-mark {
    gap: 6px;
    font-size: clamp(1.5rem, 8vw, 2.5rem);
  }

  .host-mark__image-frame {
    width: clamp(134px, 48vw, 230px);
  }
}

@media (max-height: 620px) and (min-width: 761px) {
  .hero {
    padding-top: 88px;
    padding-bottom: 62px;
  }

  .art-field {
    bottom: -28vh;
  }
}

@media (forced-colors: active) {
  .art-field,
  .city-trace {
    display: none;
  }

  .credit {
    border-top-color: CanvasText;
  }
}
/* dotz premium layout V2.3: full-height art, disciplined hierarchy, quiet confidence. */

:root {
  --dotz-page-pad: clamp(26px, 4.25vw, 64px);
  --dotz-rule: rgba(9, 9, 9, 0.2);
}

.site-shell {
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--dotz-page-pad);
  background: #fff;
}

.art-field {
  inset: 0;
  width: auto;
  height: auto;
  background:
    linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.99) 25%, rgba(255, 255, 255, 0.83) 41%, rgba(255, 255, 255, 0.25) 61%, rgba(255, 255, 255, 0) 80%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 0.15) 100%),
    url("assets/img/dotz-art-v2.webp") 60% center / cover no-repeat;
  filter: saturate(0.96) contrast(1.035);
  opacity: 1;
}

.art-field::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent calc(43% - 1px), rgba(9, 9, 9, 0.08) 43%, transparent calc(43% + 1px)),
    linear-gradient(180deg, transparent calc(79% - 1px), rgba(9, 9, 9, 0.065) 79%, transparent calc(79% + 1px));
  content: "";
  pointer-events: none;
}

.city-trace {
  top: clamp(34px, 7vh, 72px);
  left: var(--dotz-page-pad);
  width: min(31vw, 360px);
  opacity: 0.09;
}

.hero {
  align-self: center;
  width: min(100%, 800px);
  padding: 0 0 clamp(20px, 4vh, 46px);
}

.host-mark {
  display: block;
  font-size: 1rem;
  font-weight: 380;
  letter-spacing: 0;
}

.host-mark__home {
  align-items: flex-start;
  flex-direction: column;
  gap: clamp(9px, 1.35vh, 13px);
}

.host-mark__image-frame {
  width: clamp(158px, 24vw, 326px);
}

.host-mark__suffix {
  margin-left: 0.2em;
  padding: 0;
  color: #242321;
  font-size: clamp(0.68rem, 0.76vw, 0.78rem);
  font-weight: 670;
  letter-spacing: 0.15em;
  line-height: 1;
}

.status {
  display: none;
}

.credit {
  width: 100%;
  padding-top: 15px;
  border-top-color: var(--dotz-rule);
  color: #4e4c47;
  font-size: 0.67rem;
  font-weight: 620;
  letter-spacing: 0.12em;
}

@media (max-width: 760px) {
  :root {
    --dotz-page-pad: 22px;
  }

  .site-shell {
    padding: var(--dotz-page-pad);
  }

  .art-field {
    inset: 0;
    width: auto;
    height: auto;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.77) 0%, rgba(255, 255, 255, 0.08) 27%, rgba(255, 255, 255, 0.03) 72%, rgba(255, 255, 255, 0.72) 100%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.72) 29%, rgba(255, 255, 255, 0.08) 66%, rgba(255, 255, 255, 0) 100%),
      url("assets/img/dotz-art-v2.webp") 76% center / cover no-repeat;
    opacity: 1;
  }

  .art-field::after {
    background:
      linear-gradient(90deg, transparent calc(28% - 1px), rgba(9, 9, 9, 0.07) 28%, transparent calc(28% + 1px)),
      linear-gradient(180deg, transparent calc(74% - 1px), rgba(9, 9, 9, 0.055) 74%, transparent calc(74% + 1px));
  }

  .city-trace {
    top: 27px;
    left: var(--dotz-page-pad);
    width: 58vw;
    opacity: 0.075;
    transform: scale(0.76);
  }

  .hero {
    align-self: center;
    padding: 0 0 9vh;
  }

  .host-mark {
    font-size: 1rem;
  }

  .host-mark__image-frame {
    width: clamp(138px, 46vw, 218px);
  }

  .host-mark__home {
    gap: 9px;
  }

  .host-mark__suffix {
    font-size: 0.62rem;
    letter-spacing: 0.13em;
  }
}

@media (max-height: 620px) and (min-width: 761px) {
  .hero {
    padding: 0;
  }

  .art-field {
    inset: 0;
  }
}