:root{
  --mhi-mulberry:#4B1F4F;
  --mhi-winter-berry:#B8326B;
  --mhi-inkwell:#1B2A6B;
  --mhi-charcoal:#3B3B45;
  --mhi-parchment:#F4EFE7;
  --mhi-white:#FFFDFC;
  --paper:var(--mhi-parchment);
  --paper-2:var(--mhi-white);
  --ink:var(--mhi-charcoal);
  --ink-soft:#665D68;
  --rule:#CDBFC9;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}
.layout{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  max-width:1500px;
  margin:0 auto;
  min-height:100vh;
}
.desk{
  padding:clamp(28px, 5vw, 60px) clamp(16px, 3vw, 32px) 64px;
  position:relative;
}
h1{
  font-family:'Courier New', monospace;
  font-size:clamp(1.15rem, 2.5vw, 1.55rem);
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin:0 0 14px;
  color:var(--mhi-mulberry);
}
h1 a{
  color:inherit;
  text-decoration:none;
}
.intro{
  position:relative;
  min-height:0;
  padding:clamp(30px, 5vw, 58px) 41% 30px 0;
  border-top:2px solid var(--mhi-mulberry);
  border-bottom:1px solid var(--rule);
  overflow:visible;
}
.portrait{
  position:absolute;
  z-index:1;
  top:0;
  right:-4%;
  bottom:auto;
  width:42%;
  height:420px;
  object-fit:cover;
  object-position:54% 20%;
  filter:grayscale(1) contrast(1.05);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 38%, #000 100%), linear-gradient(to bottom, #000 0, #000 70%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0, #000 38%, #000 100%), linear-gradient(to bottom, #000 0, #000 70%, transparent 100%);
  mask-composite:intersect;
}
.tagline-group{
  position:relative;
  z-index:2;
  margin-bottom:0;
  max-width:510px;
}
.tagline-line{
  color:var(--mhi-inkwell);
  font-size:clamp(1rem, 2vw, 1.25rem);
  margin:0;
  line-height:1.5;
}
.mobile-tagline-break{ display:none; }
.bio{
  position:relative;
  z-index:2;
  font-size:1.08rem;
  line-height:1.65;
  max-width:59%;
  margin:clamp(12px, 2vw, 16px) 0 58px;
}
.field{
  position:relative;
  height:520px;
  margin-top:24px;
  border-top:1px solid var(--rule);
}
.stamp{
  position:absolute;
  width:149px;
  height:149px;
  aspect-ratio:1/1;
  flex-shrink:0;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.66rem;
  background: var(--stamp-bg, var(--paper-2));
  box-shadow:none;
  border:1px solid var(--mhi-charcoal);
  transition:transform .2s ease;
  z-index:1;
}
.stamp:hover{ z-index:20; }
.stamp::after{
  content:"";
  position:absolute;
  inset:13px;
  border-radius:50%;
  border:1.5px dashed currentColor;
  opacity:0.6;
}
.stamp:hover{ transform:translateY(-3px); }
.stamp .icon-badge{
  width:min(var(--icon-scale, 76%), 100%);
  height:min(var(--icon-scale, 76%), 100%);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.4),
    inset 0 -2px 4px rgba(0,0,0,0.25);
}
.stamp .icon-badge img{
  width:96%;
  height:96%;
  object-fit:contain;
}
.stamp .stamp-link{
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index:3;
}
.stamp .tip{
  position:absolute;
  top:100%;
  left:0;
  width:210px;
  background:var(--mhi-white);
  border-radius:0;
  border:1px solid var(--mhi-inkwell);
  padding:12px 14px;
  font-size:0.78rem;
  line-height:1.55;
  opacity:0;
  pointer-events:none;
  box-shadow:4px 4px 0 var(--mhi-winter-berry);
  transition:opacity .18s ease;
  z-index:2;
}
.stamp:hover .tip{ opacity:1; pointer-events:auto; }
.tip .name{ display:block; font-family:'Courier New', monospace; font-weight:bold; text-transform:uppercase; font-size:0.7rem; margin-bottom:3px;}
.tip .desc{ color:var(--ink-soft); font-style:italic; display:block; margin-bottom:5px;}
.tip .note{ color:var(--ink); font-size:0.73rem; display:block;}
.tip .stage{
  display:block;
  margin-top:6px;
  font-family:'Courier New', monospace;
  font-size:0.66rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.tip .tip-link{
  display:inline-block;
  margin-top:8px;
  font-family:'Courier New', monospace;
  font-size:0.7rem;
  letter-spacing:0.02em;
  color:var(--ink);
  text-decoration:underline;
  pointer-events:auto;
}

/* stage indicator: neutral outer ring around the stamp, like a wax-seal groove (overridable per-project via --ring-color) */
.stamp::before{
  content:"";
  position:absolute;
  inset:-9px;
  border-radius:50%;
  pointer-events:none;
}
.stamp[data-stage="idea"]::before{
  border:2.5px dotted var(--ring-color, var(--ink-soft));
  opacity:0.7;
}
.stamp[data-stage="in-progress"]::before{
  border:2.5px dashed var(--ring-color, var(--ink-soft));
  opacity:0.85;
}
.stamp[data-stage="production"]::before{
  border:3.5px solid var(--ring-color, var(--ink-soft));
  opacity:1;
}

.log-panel{
  background:var(--mhi-mulberry);
  color:var(--mhi-white);
  border-left:0;
  padding:clamp(42px, 7vw, 76px) clamp(22px, 3vw, 34px) 42px;
}
.log-head{
  font-family:'Courier New', monospace;
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--mhi-white);
  margin-bottom:28px;
}
.entry{
  display:block;
  border-bottom:1px solid rgba(255,253,252,0.35);
  padding-bottom:18px;
  margin-bottom:18px;
  text-decoration:none;
  color:inherit;
}
.entry .date{
  display:block;
  font-family:'Courier New', monospace;
  font-size:0.7rem;
  color:#E8BED1;
  margin-bottom:6px;
  letter-spacing:0.02em;
}
.entry .title{
  display:block;
  font-size:1.05rem;
  line-height:1.4;
  margin-bottom:6px;
  transition:color .15s ease;
}
.entry:hover .title{
  color:#F3ABC8;
}
.entry .teaser{
  display:block;
  font-size:0.85rem;
  line-height:1.5;
  color:#E8BED1;
}
.log-mark{
  display:block;
  width:min(170px, 62%);
  margin:42px auto 0;
}

/* project + post detail pages */
.page{
  max-width:700px;
  margin:0 auto;
  padding:clamp(32px, 7vw, 72px) 24px 80px;
}
.page .back{
  display:inline-block;
  font-family:'Courier New', monospace;
  font-size:0.75rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--mhi-inkwell);
  text-decoration:none;
  margin-bottom:30px;
}
.page h1{
  font-family:Georgia, 'Iowan Old Style', serif;
  text-transform:none;
  letter-spacing:normal;
  font-size:clamp(2rem, 5vw, 3rem);
  margin-bottom:10px;
}
.page .meta{
  font-family:'Courier New', monospace;
  font-size:0.75rem;
  color:var(--mhi-winter-berry);
  margin-bottom:24px;
}
.page .content{
  font-size:1.05rem;
  line-height:1.75;
}
.page .project-icon{
  display:flex;
  width:96px;
  height:96px;
  margin-bottom:20px;
  border:1px solid var(--mhi-charcoal);
  box-shadow:none;
}
.page .external-link{
  display:inline-block;
  margin-top:24px;
  font-family:'Courier New', monospace;
  font-size:0.8rem;
  color:var(--mhi-inkwell);
}

.content a{ color:var(--mhi-inkwell); }
.content em{ color:var(--mhi-mulberry); }

@media (max-width:900px){
  .layout{ grid-template-columns:1fr; }
  .mobile-tagline-break{ display:block; }
  .intro{
    min-height:clamp(280px, 78vw, 410px);
    padding:clamp(24px, 7vw, 38px) 55% 26px 0;
    overflow:hidden;
  }
  .portrait{
    top:auto;
    width:62%;
    height:112%;
    right:-10%;
    bottom:-9%;
    object-position:53% 16%;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 28%, #000 100%), linear-gradient(to bottom, #000 0, #000 60%, transparent 88%);
    mask-image:linear-gradient(to right, transparent 0, #000 28%, #000 100%), linear-gradient(to bottom, #000 0, #000 60%, transparent 88%);
  }
  .bio{
    max-width:660px;
    margin:clamp(24px, 4vw, 42px) 0 58px;
  }
  .field{
    height:auto;
    margin-top:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:clamp(40px, 12vw, 56px);
    border-top:0;
  }

  /* On narrow screens the absolutely-positioned desktop scatter can't work:
     each stamp becomes a vertical unit — round badge on top, caption below
     in normal flow so it never overlaps the disc or the next stamp. */
  .stamp{
    position:relative;
    /* cancel the desktop scatter coords set inline on each stamp */
    top:auto !important;
    left:auto !important;
    width:min(149px, 62vw);
    height:auto;
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    background:none;
    border:none;
    border-radius:0;
    box-shadow:none;
    transform:none;
  }
  .stamp:hover{ transform:none; }
  /* the inner dashed ring is rebuilt on the badge; the outer stage ring
     (.stamp::before, styled per-stage above) is re-sized to hug the badge */
  .stamp::after{ content:none; }
  .stamp::before{
    inset:auto;
    top:-9px;
    left:-9px;
    right:-9px;
    height:calc(min(149px, 62vw) + 18px);
  }

  /* the badge now carries the wax-disc look */
  .stamp .icon-badge{
    position:relative;
    width:min(149px, 62vw);
    height:min(149px, 62vw);
    flex:0 0 auto;
    background:var(--stamp-bg, var(--paper-2));
    border:1px solid rgba(0,0,0,0.06);
    box-shadow:
      inset 0 2px 3px rgba(255,255,255,0.6),
      inset 0 -3px 5px rgba(0,0,0,0.12),
      0 1px 2px rgba(0,0,0,0.06);
  }
  .stamp .icon-badge img{
    width:min(var(--icon-scale, 76%), 100%);
    height:min(var(--icon-scale, 76%), 100%);
  }
  /* inner dashed ring, rebuilt inside the badge */
  .stamp .icon-badge::after{
    content:"";
    position:absolute;
    inset:9%;
    border-radius:50%;
    border:1.5px dashed currentColor;
    opacity:0.6;
  }

  /* caption sits in normal flow under the badge, always visible (no hover on touch) */
  .stamp .tip{
    position:static;
    opacity:1;
    pointer-events:auto;
    width:min(300px, 82vw);
    margin:16px 0 0;
    box-shadow:none;
    border:1px solid var(--rule);
  }

  /* keep the whole-stamp link to the badge only, so the caption's own link stays clickable */
  .stamp .stamp-link{
    inset:0 0 auto 0;
    height:min(149px, 62vw);
  }

  .log-panel{ border-left:none; border-top:0; }
}