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

body {
  background-color: white;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0.5rem 15px;
  margin: 0;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

h1 {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  color: black;
  font-size: 2.8rem;
  font-weight: 100;
}

:root {
  --contact-blue: #cee0ff;
  --link-blue: #386abd;
}

.border-test-container {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.variant {
  display: flex;
  flex-direction: column;
}

.border-test {
  padding: 0.5rem;
  margin-bottom: 0.25rem;
  width: 100%;
  border: none;
  aspect-ratio: 2.3 / 1;
  background-color: #ffffff;
  box-shadow: inset 0 0 0 15px white;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: text;
  position: relative;
  z-index: 0;
}

.border-test::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
        90deg,
        var(--contact-blue) 0 3px,
        transparent 3px 6px
      )
      top / 100% 1px no-repeat,
    repeating-linear-gradient(
        90deg,
        var(--contact-blue) 0 3px,
        transparent 3px 6px
      )
      bottom / 100% 1px no-repeat,
    repeating-linear-gradient(
        0deg,
        var(--contact-blue) 0 3px,
        transparent 3px 6px
      )
      left / 1px 100% no-repeat,
    repeating-linear-gradient(
        0deg,
        var(--contact-blue) 0 3px,
        transparent 3px 6px
      )
      right / 1px 100% no-repeat;
}

.border-test::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 0 15px white;
}

.contact-text {
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem;
  color: #8a8a8a;
  font-weight: 300;
  background: transparent;
  position: relative;
  z-index: 3;
  outline: none;
  min-height: 0;
  min-width: 1ch;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0.8rem 1rem 3.1rem 1rem;
  white-space: pre-wrap;
  overflow-y: hidden;
}

.border-test.is-scrollable .contact-text {
  overflow-y: auto;
}

.contact-text:not(:empty),
.contact-text:not(:empty) * {
  -webkit-text-stroke: 2px rgb(255, 255, 255);
  text-stroke: 2px rgb(255, 255, 255);
  paint-order: stroke fill;
}

.contact-text:empty:not(:focus):before {
  content: attr(data-placeholder);
  font-family: sans-serif;
  font-size: 40px;
  color: white;
  -webkit-text-stroke: 0.5px var(--contact-blue);
  text-stroke: 0.5px var(--contact-blue);
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  transform: translateY(-2px);
}

.extension-info {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.extension-title {
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
  color: black;
}

.extension-download {
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
  color: var(--link-blue);
  text-decoration: underline;
}

.extension-download:hover {
  text-decoration: none;
}

.extension-instructions {
  font-family: "Times New Roman", Times, serif;
  font-size: 12px;
  color: #8a8a8a;
  width: 100%;
  margin-top: 0.25rem;
}

.border-test.div-tiler {
  overflow: hidden;
  --tiler-size: 320vmax;
}

.border-test.div-tiler .tiler-layer {
  position: absolute;
  width: var(--tiler-size);
  height: var(--tiler-size);
  top: calc(var(--tiler-size) / -2);
  left: calc(var(--tiler-size) / -2);
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    var(--contact-blue) 0 0.5px,
    transparent 0.5px 16px
  );
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: -8px -8px;
  /* Rotate the layer (not the gradient) to avoid subpixel intensity variation. */
  transform: rotate(-45deg);
  transform-origin: center;
}

.contact-form {
  position: relative;
  width: 100%;
}

.send-button {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--contact-blue);
  color: white;
  border: none;
  padding: 0.28rem 0.6rem;
  font-family: sans-serif;
  font-size: 0.75rem;
  font-style: italic;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  z-index: 4;
}

.send-icon {
  font-size: 1.05rem;
  line-height: 1;
  font-family: "Times New Roman", serif;
  font-style: normal;
}

.send-button:disabled {
  opacity: 0.6;
}

.send-button.hidden {
  opacity: 0;
  pointer-events: none;
}

.form-status {
  min-height: 1.2em;
  font-family: "Times New Roman", Times, serif;
  font-size: 0.95rem;
  color: black;
  margin-top: 0.35rem;
}

/* Role line — letterhead treatment beneath the name.
   Deliberately darker and more widely tracked than .Project-label so it
   reads as a title block, not as another subordinate section label. */

.Role {
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: normal;
  color: #1a1a1a;
  margin-top: -0.55rem;
}

/* Projects section */

.Projects {
  margin-top: 2.5rem;
  display: none;
}

.Projects-heading {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: normal;
  font-size: 1rem;
  color: #8a8a8a;
  margin-bottom: 0.5rem;
}

.Project {
  position: relative;
  padding: 0.85rem 0;
}

.Project::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
      90deg,
      var(--contact-blue) 0 3px,
      transparent 3px 6px
    )
    top / 100% 1px no-repeat;
}

.Project:last-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
      90deg,
      var(--contact-blue) 0 3px,
      transparent 3px 6px
    )
    bottom / 100% 1px no-repeat;
}

.Project summary {
  list-style: none;
  cursor: pointer;
}

.Project summary::-webkit-details-marker {
  display: none;
}

.Project summary:focus-visible {
  outline: 2px solid var(--link-blue);
  outline-offset: 2px;
}

.Project-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.Project-name {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 1.15rem;
  color: black;
  min-width: 0;
}

.Project-toggle {
  flex: 0 0 auto;
  width: 1rem;
  text-align: right;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--link-blue);
}

.Project-toggle::before {
  content: "+";
}

.Project[open] .Project-toggle::before {
  content: "\2212";
}

.Project-premise {
  display: block;
  font-family: sans-serif;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #8a8a8a;
  margin-top: 0.25rem;
}

.Project-body {
  padding-top: 0.75rem;
  padding-left: 0.75rem;
  font-family: sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #333;
}

.Project-label {
  margin-top: 1rem;
  font-family: "Times New Roman", Times, serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a8a8a;
}

.Project-label:first-child {
  margin-top: 0;
}

.Project-body ul {
  list-style: none;
  margin-top: 0.4rem;
}

.Project-body li {
  position: relative;
  padding-left: 1.1em;
  margin-top: 0.3rem;
}

.Project-body li::before {
  content: "\2013";
  color: var(--contact-blue);
  position: absolute;
  left: 0;
}

.Project-meta {
  margin-top: 1rem;
  font-family: "Times New Roman", Times, serif;
  font-size: 12px;
  color: #8a8a8a;
}

/* Permanote listing + release notification */

.Notify {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.Notify-heading {
  display: flex;
  flex-direction: column;
}

.Notify-title {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.15rem;
  line-height: 1.2;
  color: black;
}

.Notify-meta {
  font-family: "Times New Roman", Times, serif;
  font-size: 0.85rem;
  color: #8a8a8a;
  margin-top: 0.15rem;
}

.Notify-form {
  --env-w: 1.4rem;
  --env-gap: 0.3rem;
  --env-overlap: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 100%;
}

/* Envelope sits left of the field, then slides under it on send */
.Notify-track {
  position: relative;
  display: block;
  min-width: 0;
  margin-left: calc(var(--env-w) + var(--env-gap));
}

.Notify-envelope {
  position: absolute;
  top: 50%;
  left: calc(-1 * (var(--env-w) + var(--env-gap)) - 1px);
  width: var(--env-w);
  height: calc(var(--env-w) * 0.625);
  margin-top: calc(var(--env-w) * -0.3125);
  fill: none;
  stroke: var(--contact-blue);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  z-index: 0;
  transition: left 0.3s ease, stroke 0.2s ease;
}

.Notify-envelope * {
  vector-effect: non-scaling-stroke;
}

/* Sending and sent: tucked under the right end, a third still showing */
.Notify-form.is-sending .Notify-envelope,
.Notify-form.is-sent .Notify-envelope {
  /* A third of it stays visible inside the right end of the field */
  left: calc(100% - var(--env-w) / 3);
  stroke: #0000ee;
  transition: left 0.9s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .Notify-envelope {
    transition: none;
  }
}

.Notify-field {
  position: relative;
  z-index: 1;
  display: grid;
  background: white;
  /* Clip anything pushed past the right edge (the tucked-in envelope) */
  clip-path: inset(-10px 0 -10px -200px);
  border: 1px solid var(--contact-blue);
}

.Notify-field:focus-within,
.Notify-field:has(.Notify-input:not(:placeholder-shown)) {
  border-color: #0000ee;
}

/* Colon standing in for the left wall while typing: two dots, centred */
.Notify-field::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--env-overlap) + 0.15rem);
  width: 2px;
  height: 8px;
  margin-top: -4px;
  background:
    radial-gradient(circle, #0000ee 1px, transparent 1.3px) top / 2px 2px no-repeat,
    radial-gradient(circle, #0000ee 1px, transparent 1.3px) bottom / 2px 2px no-repeat;
  opacity: 0;
  pointer-events: none;
}

/* Left wall opens up: two short stubs stay attached to the top and bottom */
.Notify-form:not(.is-sent) .Notify-field:is(:focus-within, :has(.Notify-input:not(:placeholder-shown))) {
  border-left-color: transparent;
  background:
    linear-gradient(#0000ee, #0000ee) left top / 1px 2px no-repeat,
    linear-gradient(#0000ee, #0000ee) left bottom / 1px 2px no-repeat,
    white;
  background-origin: border-box;
}

.Notify-form:not(.is-sent) .Notify-field:is(:focus-within, :has(.Notify-input:not(:placeholder-shown)))::before {
  opacity: 1;
}

/* Active (focused or has text): envelope slides over the lip and turns blue */
.Notify-form:not(.is-sent):not(.is-sending) .Notify-track:is(:focus-within, :has(.Notify-input:not(:placeholder-shown))) .Notify-envelope {
  left: calc(var(--env-overlap) - var(--env-w) - 1px);
  stroke: #0000ee;
}

/* Hidden mirror of the typed text: lets the field grow (leftwards, as the
   form is right-aligned) once the address is longer than the default width. */
.Notify-field::after {
  content: attr(data-value);
  grid-area: 1 / 1;
  visibility: hidden;
  white-space: pre;
  padding: 0.2rem 1.6rem 0.2rem 0.55rem;
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem;
}

.Notify-form.is-sent .Notify-field::after {
  font-size: 0.76rem;
}

.Notify-input {
  position: relative;
  z-index: 1;
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  min-width: 16rem;
  border: none;
  background: transparent;
  padding: 0.2rem 1.6rem 0.2rem 0.55rem;
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem;
  color: #8a8a8a;
  outline: none;
  transition: padding-left 0.3s ease;
}

/* Active (focused or has text): make room for the envelope and colon */
.Notify-field:is(:focus-within, :has(.Notify-input:not(:placeholder-shown))) .Notify-input,
.Notify-field:is(:focus-within, :has(.Notify-input:not(:placeholder-shown)))::after {
  padding-left: 1rem;
}

/* After sending: the address stays, quieter and smaller, and is locked */
.Notify-form.is-sent .Notify-input {
  font-size: 0.76rem;
  color: #b5b5b5;
  pointer-events: none;
}

.Notify-input::placeholder {
  font-size: 0.8rem;
  color: #8a8a8a;
}

.Notify-arrow {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  width: 0.6rem;
  height: 0.43rem;
  margin-top: -0.215rem;
  fill: none;
  stroke: #0000ee;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
}

.Notify-input:valid:not(:placeholder-shown) ~ .Notify-arrow {
  opacity: 1;
}

.Notify-form.is-sent .Notify-input ~ .Notify-arrow {
  opacity: 0;
}

.Notify-button {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  color: #0000ee;
  cursor: pointer;
}

.Notify-button:focus-visible {
  outline: 1px solid #0000ee;
  outline-offset: 3px;
}

.Notify-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.Notify-bell {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.Notify-status:empty {
  display: none;
}

.Notify-status {
  width: 100%;
  font-family: "Times New Roman", Times, serif;
  font-size: 0.95rem;
  color: black;
}

/* While the notify field is focused the page itself can't scroll, so the
   browser has nothing to drag into view when the keyboard opens. */
html:has(.Notify-input:focus) {
  overflow: hidden;
}