/*
 * The website as it looks before anything is clicked: a name and an address on a sheet of paper.
 * Paper and type come from the owner's card design (data-design on <html>, see cards.css).
 */

:root {
  --table: #17161a;
  --table-light: #2c2a2f;
  --bone: #efece3;
  --ink: #2b2a27;

  --font-engraved: "Cormorant SC", Garamond, "Times New Roman", serif;
  --font-italic: "Cormorant Garamond", Garamond, "Times New Roman", serif;

  /* fibre in the bone card stock, see cards.css */
  --grain-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .27 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

  --ease: cubic-bezier(.65, 0, .2, 1);
  color-scheme: light;
}

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

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--table);
  color: var(--card-ink);
  -webkit-font-smoothing: antialiased;
}

.page {
  position: fixed;
  inset: 0;
  /* a lighter shade of the card stock it is about to become */
  background-color: color-mix(in srgb, var(--card-paper), white 45%);
}

.site {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding-inline: 16px;
  text-align: center;
  font-family: var(--card-font);
  font-weight: var(--card-weight, 400);
  letter-spacing: var(--card-tracking, 0);
  font-feature-settings: "onum", "kern";
  text-shadow: 0 1px 0 rgb(255 255 255 / .7), 0 -.5px 0 rgb(0 0 0 / .14);
}

.site h1,
.site p {
  margin: 0;
  font: inherit;
}

.site__name {
  all: unset;
  display: inline-block;
  font-size: clamp(2.25rem, 9vw, 3rem);
  font-weight: var(--name-weight, inherit);
  font-variant-caps: var(--name-caps, normal);
  text-transform: var(--name-case, none);
  line-height: 1.12;
  cursor: pointer;
}

/* Hovering presses the name into the paper: a hint of what clicking it does. */
.site__name:is(:hover, :focus-visible) {
  color: color-mix(in srgb, var(--card-ink), black 30%);
  text-shadow: 0 1.5px 0 rgb(255 255 255 / .95), 0 -1px 0 rgb(0 0 0 / .22), 0 0 1px rgb(0 0 0 / .12);
}

.site__mail {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: var(--address-weight, inherit);
  text-transform: var(--address-case, none);
  line-height: 1.2;
  color: inherit;
  text-decoration: none;
}

/* without JavaScript the address is an image; let its white background take on the paper's colour */
.site__mail img {
  mix-blend-mode: multiply;
}

.site__mail:hover,
.site__web:hover {
  text-decoration: underline 1px;
  text-underline-offset: .2em;
}

/* someone without an e-mail address: js/contact.js removes the link, so drop its empty line too */
.site__contact:not(:has(a)) {
  display: none;
}

/* only on a friend's domain whose card names another website; travels to the card's corner */
.site__web {
  display: inline-block;
  font-size: 1.3rem;
  line-height: 1.2;
  color: inherit;
  text-decoration: none;
}

.surname {
  text-transform: uppercase;
}

:focus-visible {
  outline: 2px solid #8a7a5c;
  outline-offset: 4px;
}