@font-face {
  font-family: "Fraunces Soft";
  src: url("fonts/fraunces-soft.woff") format("woff");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --room: #0d0d0d;
  --room-deep: #080808;
  --ink: #f3f1ee;
  --ink-soft: #b7b2ac;
  --ink-quiet: #8f8a84;
  --fern: #e9544a;
  --fern-deep: #b9332c;
  --rule: rgba(243, 241, 238, 0.12);
  --tile: clamp(96px, 11vw, 132px);
  /* where a tile stands: a soft dark contact patch, darkest right under it */
  --contact: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.55) 40%, transparent 72%);

  --display: "Fraunces Soft", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --page: min(1180px, 100% - 2 * clamp(20px, 5vw, 64px));

  color-scheme: dark;
  accent-color: var(--fern);
  caret-color: var(--fern);
  scrollbar-color: #3a3734 var(--room-deep);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--room);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--fern); color: #fff; }

a {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--fern);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  transition: color 160ms var(--ease-out), text-decoration-color 160ms var(--ease-out);
}
a:hover { color: var(--fern); }
:focus-visible { outline: 2px solid var(--fern); outline-offset: 4px; border-radius: 4px; }

.wrap { width: var(--page); margin-inline: auto; }

.skip {
  position: absolute; left: 12px; top: -48px;
  padding: 8px 14px; background: var(--ink); color: var(--room); border-radius: 6px;
  text-decoration: none; z-index: 10;
}
.skip:focus { top: 12px; }
.skip:hover { color: var(--room); }

/* ---------- the room ---------- */

.room {
  position: relative;
  overflow: hidden;
  background: linear-gradient(var(--room-deep), var(--room) 40%, var(--room-deep));
  padding-block: clamp(28px, 4vw, 44px) 0;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.topbar .mark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.topbar .mark img { width: 34px; height: 34px; }
.topbar .mark span { font: 650 1.05rem/1 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.topbar .mark span .soft { font-weight: 330; }
.topbar nav { display: flex; gap: clamp(18px, 3vw, 32px); font-size: 0.95rem; }
.topbar nav a { text-decoration-color: transparent; color: var(--ink-soft); }
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--ink); text-decoration-color: var(--fern); }

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, 5vw, 72px);
  padding-top: clamp(40px, 6vh, 80px);
}

.name {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.25rem, 8.2vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-weight: 650;
  text-wrap: balance;
}
.name .soft { font-weight: 330; }

.lede {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  max-width: 30ch;
  font: 400 clamp(1.2rem, 1.9vw, 1.45rem)/1.4 var(--display);
  color: var(--ink-soft);
  text-wrap: pretty;
}

.hero-links {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none;
  font-size: 1.0625rem;
}
.hero-links a { font-weight: 600; }

.hero-tile {
  justify-self: center;
  position: relative;
  isolation: isolate;
  width: clamp(190px, 26vw, 300px);
  margin-bottom: 18px;
}
.hero-tile img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.55)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.hero-tile::after { /* where the logo stands */
  content: ""; position: absolute; left: -6%; right: -6%; top: calc(100% - 14px); height: 30px;
  background: var(--contact);
  z-index: -1;
}

/* ---------- the shelf ---------- */

.shelf { margin-top: clamp(44px, 6vh, 72px); }

.shelf h2 {
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.shelf h2 span { font-weight: 330; color: var(--ink-soft); }

.apps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  position: relative;
}

.app { position: relative; }

.app .tile {
  display: block;
  width: var(--tile);
  height: auto;
  margin-bottom: 26px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
  animation: set-down 760ms var(--ease-out) both;
  animation-delay: calc(var(--i) * 110ms + 120ms);
}

@keyframes set-down {
  from { transform: translateY(-16px); filter: drop-shadow(0 18px 14px rgba(0, 0, 0, 0.45)); }
  to   { transform: translateY(0); }
}

.apps-wrap { position: relative; isolation: isolate; }
.app::before { /* each tile's own contact shadow where it meets the surface */
  content: ""; position: absolute; z-index: -1;
  left: calc(var(--tile) * -0.08); top: calc(var(--tile) - 12px);
  width: calc(var(--tile) * 1.16); height: 24px;
  background: var(--contact);
}

.app h3 {
  margin: 0;
  font: 600 1.3rem/1.2 var(--display);
  letter-spacing: -0.01em;
}
.app .craft { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.45; max-width: 30ch; }
.app .meta {
  margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  font-size: 0.82rem; color: var(--ink-quiet);
}
.state {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--fern); font-weight: 600; letter-spacing: 0.01em;
}
.state::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--fern);
}

.room-end { height: clamp(56px, 8vw, 96px); }

/* ---------- plain sections ---------- */

.plain { padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--rule); }

.pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 96px);
}
.pair h2, .doc h1, .doc h2 {
  margin: 0 0 14px;
  font-family: var(--display); font-weight: 600; letter-spacing: -0.015em;
}
.pair h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.1; }
.pair p { margin: 0 0 14px; max-width: 46ch; color: var(--ink-soft); }
.pair p strong { color: var(--ink); font-weight: 600; }
.email { font: 600 clamp(1.15rem, 2vw, 1.35rem)/1.3 var(--display); }

footer {
  border-top: 1px solid var(--rule);
  padding-block: 32px 40px;
  font-size: 0.9rem; color: var(--ink-quiet);
}
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
footer .sign { display: flex; align-items: center; gap: 10px; }
footer .sign img { width: 22px; height: 22px; }
footer nav { display: flex; gap: 22px; }
footer a { color: var(--ink-soft); text-decoration-color: transparent; }
footer .made { margin: 0; color: var(--ink-soft); }
footer .made .heart {
  display: inline-block; width: 1.05em; height: 0.93em; vertical-align: -0.12em;
  margin-inline: 0.15em;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
footer a:hover { color: var(--ink); text-decoration-color: var(--fern); }

/* ---------- document pages: support, privacy ---------- */

.doc { padding-block: clamp(48px, 8vw, 96px) clamp(64px, 9vw, 112px); }
.doc .inner { max-width: 68ch; }
.doc h1 { font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; }
.doc .updated { margin: 0 0 clamp(32px, 4vw, 48px); color: var(--ink-quiet); font-size: 0.95rem; }
.doc h2 { font-size: 1.45rem; line-height: 1.2; margin-top: 44px; }
.doc p, .doc li { color: var(--ink-soft); }
.doc p strong, .doc li strong { color: var(--ink); font-weight: 600; }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--fern); }
.doc .summary {
  margin: 0 0 8px; font: 400 clamp(1.25rem, 2.2vw, 1.5rem)/1.45 var(--display); color: var(--ink);
}
.doc .applist { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; }
.doc .applist li { display: flex; align-items: center; gap: 14px; margin: 0; }
.doc .applist img { width: 44px; height: 44px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.5)); }
.doc .applist b { color: var(--ink); font-weight: 600; }

/* ---------- small screens ---------- */

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; align-items: start; }
  .hero-tile { justify-self: start; order: -1; width: clamp(150px, 42vw, 210px); margin: 0 0 30px 6px; }
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .app { position: relative; isolation: isolate; }
  .pair { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .topbar nav { gap: 16px; font-size: 0.9rem; }
  .app .meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .apps { column-gap: 20px; }
  .app h3 { font-size: 1.15rem; }
  .app .craft { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .app .tile { animation: none; }
}