/*
  Layout is drawn in "card units" (u), mirroring business_card.svg's 900×500
  viewBox. 1u scales with the viewport (width and height) and is capped so
  the card never gets absurdly large on wide screens.
*/
:root {
  --u: min(0.1vw, 0.19vh, 1.8px);
  --ink: #000;
  --paper: #fff;
  --accent: #2f5bff;
  --radius: calc(8 * var(--u));

  /* One device pixel, in CSS px. Browsers snap border widths and box edges
     to device pixels, so the stroke and any offsets the pointer must line up
     on are snapped to this grid too (see .pointer). */
  --dpx: 1px;
  --stroke: max(var(--dpx), round(calc(3 * var(--u)), var(--dpx)));
}
@media (min-resolution: 1.2dppx)  { :root { --dpx: calc(1px / 1.25); } }
@media (min-resolution: 1.45dppx) { :root { --dpx: calc(1px / 1.5); } }
@media (min-resolution: 1.7dppx)  { :root { --dpx: calc(1px / 1.75); } }
@media (min-resolution: 1.95dppx) { :root { --dpx: calc(1px / 2); } }
@media (min-resolution: 2.2dppx)  { :root { --dpx: calc(1px / 2.25); } }
@media (min-resolution: 2.45dppx) { :root { --dpx: calc(1px / 2.5); } }
@media (min-resolution: 2.95dppx) { :root { --dpx: calc(1px / 3); } }
@media (prefers-color-scheme: dark) {
  :root { --ink: #f2f2f2; --paper: #0d0d0d; --accent: #7d9bff; }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  display: grid;
  place-items: center;
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

main {
  /* reserve room for the labels/brackets that hang above & below the line */
  padding: calc(110 * var(--u)) 0 calc(212 * var(--u));
}

.address {
  margin: 0;
  font-size: calc(60 * var(--u));
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.005em;
}

.seg {
  position: relative;
  display: inline-block;
  transition: color .15s ease;
}

/* ---------- brackets ---------- */
.brace {
  position: absolute;
  left: calc(6 * var(--u));
  right: calc(6 * var(--u));
  display: flex;
  color: var(--ink);
  font-size: calc(28 * var(--u));
  pointer-events: none;
  transition: color .15s ease;
}
.brace .arm {
  flex: 1;
  align-self: stretch;
  border: var(--stroke) solid currentColor;
}

/* opening upward (labels above the address) */
.brace.up {
  bottom: calc(100% + 24 * var(--u));
  height: calc(30 * var(--u));
  align-items: flex-start;
}
.brace.up .arm { border-bottom: 0; }
.brace.up .arm:first-of-type { border-right: 0; border-top-left-radius: var(--radius); }
.brace.up .arm:last-of-type { border-left: 0;  border-top-right-radius: var(--radius); }
/* pointer's bottom edge = bottom of the arms' top border */
.brace.up .pointer { margin-top: calc(var(--stroke) - var(--pointer-h)); }

/* opening downward (labels below the address) */
.brace.down {
  top: calc(100% + 33 * var(--u));
  height: calc(var(--leg, 30) * var(--u));
  align-items: flex-end;
}
.brace.down .arm { border-top: 0; }
.brace.down .arm:first-of-type { border-right: 0; border-bottom-left-radius: var(--radius); }
.brace.down .arm:last-of-type { border-left: 0;  border-bottom-right-radius: var(--radius); }
/* pointer's top edge = top of the arms' bottom border */
.brace.down .pointer { margin-bottom: calc(var(--stroke) - var(--pointer-h)); }

.email > .brace.down {
  --leg: 120;
  --radius: calc(20 * var(--u));
}

/* ---------- pointer ----------
   The curly tip from the card. Markup:
     <svg class="pointer"><use href="#pointer"/></svg>            (points up)
     <svg class="pointer pointer--down"><use href="#pointer"/></svg>
   The #pointer symbol (index.html) has its baseline on the bottom edge of
   its viewBox and a non-scaling stroke, so:
   - the shape scales smoothly with --u,
   - the line is exactly --stroke thick, the same as a border of --stroke,
   - the line occupies the box's bottom --stroke (top, for --down), and the
     box height is snapped to device pixels, so anything that aligns its
     edge to that band lands on the same pixel rows.
   The path bleeds 1 unit past each side to overlap neighbours seamlessly. */
.pointer {
  --pointer-h: max(var(--stroke), round(calc(11.5 * var(--u)), var(--dpx)));
  display: block;
  flex: none;
  width: calc(var(--pointer-h) * 32.38 / 11.5);
  height: var(--pointer-h);
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke);
}
/* the outer <svg> has no viewBox, so these lengths are plain CSS px */
.pointer use        { transform: translateY(calc(var(--stroke) / -2)); }
.pointer--down use  { transform: translateY(calc(var(--pointer-h) + var(--stroke) / 2)) scaleY(-1); }

/* ---------- labels ---------- */
.label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
  padding: 0.15em 0.3em;
  border-radius: 0.2em;
  outline-offset: 2px;
}
.brace.up   .label { bottom: calc(100% + 26 * var(--u) - 0.15em); }
.brace.down .label { top:    calc(100% + 28 * var(--u) - 0.15em); }

a.label:focus-visible { outline: 2px solid var(--accent); }

/* hovering/focusing a label highlights the part of the address it names */
.seg:has(> .brace > .label:hover),
.seg:has(> .brace > .label:focus-visible),
.seg:has(> .brace > .label:hover) > .brace,
.seg:has(> .brace > .label:focus-visible) > .brace {
  color: var(--accent);
}