:root {
      /* ─── LOGO GRID SETTINGS ─────────────────────────────────────────────
         Edit these values to tune the logo page layout.
         --logo-cols: boxes per row
         --logo-box: square box size
         --logo-gap-x: horizontal distance between boxes
         --logo-gap-y: vertical distance between boxes
         --page-x: left/right page padding
         --logo-reveal-scale: initial logo size before reveal animation
         --logo-reveal-duration: reveal animation time
      */
      --logo-cols: 5;
      --logo-box: 180px;
      --logo-gap-x: 60px;
      --logo-gap-y: 60px;
      --page-x: 80px;
      --logo-reveal-scale: 0.55;
      --logo-reveal-duration: 1.9s;
      --avatar-size: 50px;

      --bg-from: #E2EDF1;
      --bg-to: #CFE3E9;
      --black: #111111;
  }

  @font-face {
      font-family: 'Moderat';
      src: url('font/Moderat/Moderat-Regular.woff2') format('woff2'),
           url('font/Moderat/Moderat-Regular.woff') format('woff');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
  }

  @font-face {
      font-family: 'Moderat';
      src: url('font/Moderat/Moderat-Medium.woff2') format('woff2'),
           url('font/Moderat/Moderat-Medium.woff') format('woff');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
  }

  @font-face {
      font-family: 'Moderat';
      src: url('font/Moderat/Moderat-Bold.woff2') format('woff2'),
           url('font/Moderat/Moderat-Bold.woff') format('woff');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
  }

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

  body {
      font-family: 'Moderat', Arial, sans-serif;
      background: linear-gradient(160deg, var(--bg-from) 0%, var(--bg-to) 100%);
      background-attachment: fixed;
      min-height: 100vh;
      color: var(--black);
  }

  body.contact-page {
      height: 100vh;
      overflow: hidden;
  }

  html {
      background: var(--bg-to);
      scrollbar-width: none;
      -ms-overflow-style: none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
  }

  .custom-scrollbar {
      position: fixed;
      top: 0;
      right: 0;
      width: 24px;
      height: 100vh;
      z-index: 1000;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.12s ease;
  }

  .custom-scrollbar.is-scrollable {
      opacity: 1;
      pointer-events: auto;
  }

  .custom-scrollbar__thumb {
      position: absolute;
      top: 0;
      right: 8px;
      width: 8px;
      min-height: 42px;
      border-radius: 999px;
      background: #fff;
      cursor: grab;
      user-select: none;
      touch-action: none;
  }

  .custom-scrollbar__thumb:active {
      cursor: grabbing;
  }

  body.is-scrollbar-dragging,
  body.is-scrollbar-dragging * {
      user-select: none;
  }

  /* ─── HEADER ─── */
  header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px var(--page-x) 24px;
      background: transparent;
  }

  .logo {
      width:  var(--avatar-size);
      height: var(--avatar-size);
      text-decoration: none;
      display: block;
      flex: 0 0 var(--avatar-size);
  }

  .logo img {
      width:  var(--avatar-size);
      height: var(--avatar-size);
      border-radius: 50%;
      display: block;
  }

  nav {
      display: flex;
      align-items: center;
      gap: 20px;
      font-size: 15px;
      font-weight: 500;
  }

  nav a {
      text-decoration: none;
      color: var(--black);
      opacity: 1;
      position: relative;
      padding: 7px 11px;
      border-radius: 8px;
      line-height: 1;
      transition: background-color 0.15s ease, color 0.15s ease;
  }

  nav a:hover,
  nav a.active {
      background: var(--black);
      color: #fff;
  }

  /* ─── GRID ─── */
  main {
      padding: 160px var(--page-x) 90px;
  }

  .grid {
      display: grid;
      grid-template-columns: repeat(var(--logo-cols), var(--logo-box));
      column-gap: var(--logo-gap-x);
      row-gap: var(--logo-gap-y);
      justify-content: center;
      margin: 0 auto;
      position: relative;
  }

  .portfolio-note {
      width: min(760px, 100%);
      margin: 110px auto 0;
      color: var(--black);
      font-size: 18px;
      font-weight: 400;
      line-height: 1.48;
      text-align: left;
  }

  .portfolio-note p + p {
      margin-top: 18px;
  }

  /* ─── CONTACT ─── */
  .contact-main {
      min-height: calc(100vh - 90px);
      display: flex;
      align-items: flex-start;
      padding-top: 210px;
  }

  .contact-layout {
      width: min(100%, 1260px);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(420px, 520px) minmax(500px, 560px);
      column-gap: 70px;
      align-items: center;
      justify-content: center;
  }

  .contact-portrait {
      display: grid;
      place-items: center;
  }

  .portrait-lockup {
      width: min(28vw, 360px);
      aspect-ratio: 538 / 627;
      position: relative;
  }

  .portrait-photo {
      position: absolute;
      left: 3.021%;
      top: 9.648%;
      width: 94.052%;
      height: 80.703%;
      border-radius: 50%;
      display: block;
      object-fit: cover;
      object-position: center 42%;
  }

  .portrait-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
  }

  .contact-form {
      width: 100%;
      max-width: 560px;
      margin-left: auto;
      padding: 0;
      background: transparent;
      color: var(--black);
      display: flex;
      flex-direction: column;
      gap: 16px;
  }

  .hp-field {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
  }

  .form-field {
      margin: 0;
      border: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
  }

  .form-field label,
  .form-field legend {
      display: block;
      margin: 0;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.4;
      color: var(--black);
  }

  .form-field input[type="text"],
  .form-field textarea {
      width: 100%;
      border: 2px solid var(--black);
      background: #fff;
      color: var(--black);
      font: 500 18px/1.35 'Moderat', Arial, sans-serif;
      padding: 9px 14px;
      outline: none;
      border-radius: 8px;
  }

  .form-field input[type="text"] {
      height: 48px;
  }

  .form-field input[type="text"]::placeholder {
      color: rgba(10, 10, 10, 0.38);
  }

  .form-field input[type="text"]:focus,
  .form-field textarea:focus {
      border-color: var(--black);
  }

  .form-field textarea {
      min-height: 104px;
      resize: vertical;
  }

  .choice-row {
      display: grid;
      gap: 8px;
  }

  .choice-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .choice-row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .choice-row label {
      margin: 0;
      display: block;
      cursor: pointer;
  }

  .choice-row input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
  }

  .choice-row span {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      border: 2px solid var(--black);
      border-radius: 8px;
      background: #fff;
      color: var(--black);
      font-size: 17px;
      font-weight: 700;
      line-height: 1;
      text-align: center;
      padding: 0 12px;
      white-space: nowrap;
      user-select: none;
      transition: background-color 0.15s ease, color 0.15s ease;
  }

  .choice-row input:checked + span,
  .choice-row input:focus-visible + span {
      border-color: var(--black);
      background: var(--black);
      color: #fff;
  }

  .choice-row label:hover input:not(:checked) + span {
      background: rgba(255, 255, 255, 0.5);
  }

  .submit-button {
      align-self: flex-end;
      border: 2px solid var(--black);
      background: var(--black);
      color: #fff;
      font: 700 19px/1 'Moderat', Arial, sans-serif;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      min-width: 146px;
      min-height: 56px;
      padding: 0 30px;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease;
  }

  .submit-button:hover {
      background: #fff;
      color: var(--black);
  }

  .submit-button:disabled {
      opacity: 0.45;
      cursor: wait;
  }

  .form-status {
      min-height: 24px;
      margin-top: -4px;
      font-size: 13px;
      line-height: 1.35;
      color: var(--black);
  }

  .form-status.is-error {
      color: #b00020;
  }

  .grid-item {
      aspect-ratio: 1;
      overflow: hidden;
      cursor: default;
      background: transparent;
      user-select: none;
      opacity: 0;
      transform: perspective(900px) translateY(22px) scale(var(--logo-reveal-scale)) rotateX(10deg) rotate(-2deg);
      transition:
          opacity var(--logo-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
          transform var(--logo-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1);
      will-change: opacity, transform;
  }

  .grid-item.is-visible {
      opacity: 1;
      transform: scale(1) rotate(0deg);
  }

  .grid-item-placeholder {
      border: 1px solid rgba(10, 10, 10, 0.22);
      cursor: default;
  }

  .grid-item img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
      transition: transform 0.4s ease;
  }

  .edit-mode .grid-item:not(.grid-item-placeholder) {
      cursor: grab;
  }

  .edit-mode .grid-item.is-dragging {
      cursor: grabbing;
      opacity: 0.45;
      transform: scale(0.94);
  }

  .edit-mode .grid-item.is-drop-target {
      outline: 3px solid var(--black);
      outline-offset: 8px;
  }

  .reveal-row-debug {
      position: absolute;
      z-index: 10;
      pointer-events: none;
      border: 2px solid rgba(255, 0, 0, 0.7);
  }

  .reveal-row-debug.is-active {
      border-color: rgba(0, 170, 255, 0.85);
  }

  /* ─── LIGHTBOX ─── */
  #lightbox {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(207, 227, 233, 0.97);
      backdrop-filter: blur(16px);
      align-items: center;
      justify-content: center;
      cursor: zoom-out;
  }

  #lightbox.open {
      display: flex;
  }

  #lightbox img {
      max-width: 82vw;
      max-height: 82vh;
      object-fit: contain;
      box-shadow: 0 60px 140px rgba(0, 0, 0, 0.12);
  }

  #lightbox-close {
      position: fixed;
      top: 32px;
      right: 40px;
      font-size: 15px;
      letter-spacing: 0.06em;
      cursor: pointer;
      opacity: 0.4;
      font-family: 'Moderat', Arial, sans-serif;
      transition: opacity 0.15s;
  }

  #lightbox-close:hover {
      opacity: 1;
  }

  #lightbox-prev,
  #lightbox-next {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      font-family: 'Moderat', Arial, sans-serif;
      font-size: 15px;
      cursor: pointer;
      opacity: 0.35;
      padding: 24px 32px;
      transition: opacity 0.15s;
  }

  #lightbox-prev:hover,
  #lightbox-next:hover {
      opacity: 1;
  }

  #lightbox-prev {
      left: 0;
  }

  #lightbox-next {
      right: 0;
  }

  /* ─── FOOTER ─── */
  footer {
      text-align: center;
      padding: 40px;
      font-size: 14px;
      opacity: 1;
  }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 1400px) {
      .grid { grid-template-columns: repeat(var(--logo-cols), var(--logo-box)); }
  }

  @media (max-width: 1000px) {
      .grid { grid-template-columns: repeat(var(--logo-cols), var(--logo-box)); }

      .contact-main {
          align-items: flex-start;
      }

      .contact-layout {
          grid-template-columns: 1fr;
          row-gap: 40px;
      }

      .contact-form {
          margin: 0 auto;
      }

      .portrait-lockup {
          width: min(78vw, 460px);
      }

  }

  @media (max-width: 700px) {
      .grid { grid-template-columns: repeat(var(--logo-cols), var(--logo-box)); }

      header {
          padding: 20px var(--page-x) 16px;
      }

      .logo {
          width: 64px;
          height: 64px;
          flex-basis: 64px;
      }

      .logo img {
          width: 64px;
          height: 64px;
      }

      nav {
          gap: 18px;
          font-size: 17px;
      }

      main {
          padding-top: 112px;
      }

      .contact-main {
          padding: 112px 24px 70px;
          min-height: auto;
      }

      .choice-row-4,
      .choice-row-5 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
      }
  }