:root {
      --bg:#0b1015; --panel:#111922; --panel-hover:#16212c;
      --text:#f4efe5; --muted:#9ba8b4; --line:#263442;
      --accent:#d9c08a; --accent-soft:#a9d8d3; --max:980px;
    }
    * { box-sizing:border-box; }
    body {
      margin:0; min-height:100dvh; color:var(--text);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      line-height:1.6;
      background:
        radial-gradient(circle at 75% 15%,rgba(169,216,211,.08),transparent 32rem),
        radial-gradient(circle at 15% 85%,rgba(217,192,138,.06),transparent 28rem),
        var(--bg);
    }
    a { color:inherit; }
    .page {
      width:min(calc(100% - 36px),var(--max)); margin:0 auto;
      min-height:100dvh; display:flex; flex-direction:column;
    }
    .hero {
  padding:clamp(48px,9vh,110px) 0 42px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,330px);
  gap:clamp(36px,6vw,76px);
  align-items:center;
}

.hero-copy {
  min-width:0;
}

.dom {
  color:var(--accent);
}

.portrait {
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--line);
  background:var(--panel);
}

.portrait img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 35%;
}
    .eyebrow {
      margin:0 0 18px; color:var(--accent-soft); font-size:.78rem;
      letter-spacing:.22em; text-transform:uppercase;
    }
    h1 {
      margin:0; font-family:Georgia,"Times New Roman",serif;
      font-size:clamp(3.1rem,9vw,7.4rem); font-weight:500;
      line-height:.92; letter-spacing:-.045em;
    }
    .intro {
      margin:34px 0 0; max-width:650px; color:#d9dee2;
      font-size:clamp(1.08rem,2.2vw,1.38rem);
    }
    .intro strong { color:var(--text); font-weight:650; }
    .projects {
      display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
      gap:16px; padding:18px 0 54px;
    }
    .card {
      position:relative; min-height:230px; padding:28px;
      border:1px solid var(--line); border-radius:22px;
      background:rgba(17,25,34,.84); text-decoration:none;
      transition:transform .18s ease,border-color .18s ease,background .18s ease;
    }
    a.card:hover,a.card:focus-visible {
      transform:translateY(-3px); border-color:#536678;
      background:var(--panel-hover); outline:none;
    }
    .card-label {
      margin:0 0 38px; color:var(--muted); font-size:.72rem;
      letter-spacing:.18em; text-transform:uppercase;
    }
    .card h2 {
      margin:0 0 12px; font-family:Georgia,"Times New Roman",serif;
      font-size:clamp(2rem,4vw,3rem); font-weight:500;
    }
    .card p { margin:0; max-width:31rem; color:#bac4cc; }
    .action { display:inline-block; margin-top:24px; color:var(--accent); font-weight:650; }
    .soon .action { color:var(--muted); }
    .threat {
      margin:0; padding:0 0 54px; color:var(--muted);
      font-family:Georgia,"Times New Roman",serif;
      font-size:clamp(1.25rem,2.6vw,1.65rem); font-style:italic;
    }
    footer {
      margin-top:auto; padding:22px 0 32px; border-top:1px solid var(--line);
      display:flex; justify-content:space-between; gap:20px;
      color:#788693; font-size:.86rem;
    }
    footer span:last-child { text-align:right; }
    @media (max-width:680px) {
      .page { width:min(calc(100% - 24px),var(--max)); }
      header { padding-top:54px; }
      .projects { grid-template-columns:1fr; }
      .card { min-height:205px; padding:24px; }
      footer { flex-direction:column; gap:5px; }
      footer span:last-child { text-align:left; }
.hero {
  padding-top:54px;
  grid-template-columns:1fr;
  gap:28px;
}

.hero-copy {
  display:contents;
}

.hero .eyebrow {
  order:1;
}

.hero h1 {
  order:2;
}

.portrait {
  order:3;
  width:min(100%,420px);
  aspect-ratio:4/3;
}

.portrait img {
  object-position:50% 30%;
}

.hero .intro {
  order:4;
  margin-top:0;
}
    }
.contact-block {
  margin:0 0 54px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(17,25,34,.5);
  color:#bac4cc;
  font-size:1rem;
}

.contact-block p {
  margin:0;
}

.contact-block p + p {
  margin-top:12px;
}

.contact-block a {
  color:var(--accent);
  font-weight:650;
  text-decoration:none;
}

.contact-block a:hover,
.contact-block a:focus-visible {
  text-decoration:underline;
}

.contact-note {
  padding-top:8px;
  color:var(--muted);
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-size:.94rem;
}
  
/* Yotri: the existing page rules above are preserved verbatim. */
 .yotri-home {
  --pet-size:100px;
  --edge-right:calc(24px + env(safe-area-inset-right, 0px));
  --edge-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  position:fixed; z-index:20;
  right:var(--edge-right); bottom:calc(var(--edge-bottom) + var(--avoid-offset, 0px));
  width:var(--pet-size);
}
.yotri-button {
  display:block; width:100%; padding:0; border:0;
  background:transparent; color:var(--text); cursor:pointer;
  border-radius:14px; -webkit-tap-highlight-color:transparent;
}
.yotri-button img { display:block; width:100%; height:auto; }
.yotri-button:focus-visible, .yotri-close:focus-visible {
  outline:2px solid var(--accent); outline-offset:4px;
}
.yotri-bubble {
  position:absolute; z-index:2;
  right:calc(100% + 16px); bottom:0;
  width:min(300px, calc(100vw - var(--edge-right) - var(--pet-size) - 32px));
  max-height:calc(100dvh - var(--edge-bottom) - 24px);
  padding:18px 30px 18px 18px;
  border:1px solid var(--line); border-radius:18px;
  background:var(--panel); color:var(--text);
  font:400 .88rem/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}
.yotri-bubble[hidden] { display:none; }
.yotri-bubble-content { max-height:calc(100dvh - var(--edge-bottom) - 60px); overflow-y:auto; }
.yotri-bubble p { margin:0; }
.yotri-play {
  display:inline-block; margin-top:14px; padding:7px 12px;
  border:1px solid var(--line); border-radius:8px;
  background:var(--panel-hover); color:var(--accent);
  font-weight:650; text-decoration:none;
}
.yotri-play:hover,.yotri-play:focus-visible {
  border-color:#536678; text-decoration:underline;
}
.yotri-play:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.yotri-home.bubble-top .yotri-bubble { bottom:auto; top:0; }
.yotri-bubble::after {
  content:""; position:absolute; right:-6px; bottom:24px;
  width:10px; height:10px; background:var(--panel);
  border-top:1px solid var(--line); border-right:1px solid var(--line);
  transform:rotate(45deg);
}
.yotri-close {
  position:absolute; top:3px; right:3px;
  width:28px; height:28px; border:0; border-radius:8px;
  padding:0; background:transparent; color:var(--muted);
  font:20px/1 system-ui,sans-serif; cursor:pointer;
}
.yotri-close:hover { color:var(--accent); }
@media (max-width:680px) {
  .yotri-home {
    --pet-size:82px;
    --edge-right:calc(16px + env(safe-area-inset-right, 0px));
    --edge-bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .yotri-bubble {
    right:0; bottom:calc(100% + 14px);
    width:min(300px, calc(100vw - var(--edge-right) - 32px));
    max-height:calc(100dvh - var(--edge-bottom) - var(--pet-size) * 208 / 192 - 38px);
  }
  .yotri-bubble-content {
    max-height:calc(100dvh - var(--edge-bottom) - var(--pet-size) * 208 / 192 - 74px);
  }
  .yotri-bubble::after {
    right:36px; bottom:-6px;
    border-top:0; border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .yotri-home.bubble-below .yotri-bubble { bottom:auto; top:calc(100% + 14px); }
  .yotri-home.bubble-below .yotri-bubble::after {
    top:-6px; bottom:auto; transform:rotate(225deg);
  }
}

/* Synchronized sprite locomotion. All rules are confined to the pet widget. */
.yotri-button .yotri-sprite { display:block; width:100%; height:auto; }
.yotri-button .yotri-sprite[hidden] { display:none; }
.yotri-home.sprite-ready .yotri-button picture { display:none; }
.yotri-home[aria-hidden="true"] { visibility:hidden; }
.yotri-bubble { right:auto; bottom:auto; }
.yotri-bubble::after {
  left:auto; right:auto; top:auto; bottom:auto;
  border:0; transform:rotate(45deg);
}
.yotri-bubble[data-side="left"]::after {
  right:-6px; bottom:24px; border-top:1px solid var(--line); border-right:1px solid var(--line);
}
.yotri-bubble[data-side="right"]::after {
  left:-6px; bottom:24px; border-bottom:1px solid var(--line); border-left:1px solid var(--line);
}
.yotri-bubble[data-side="above"]::after {
  left:var(--arrow-x); bottom:-6px; border-bottom:1px solid var(--line); border-right:1px solid var(--line);
}
.yotri-bubble[data-side="below"]::after {
  left:var(--arrow-x); top:-6px; border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.yotri-bubble[data-side] { right:auto; bottom:auto; }