:root {
    --page-bg: #F1F0EC;
    --card-bg: #FFFFFF;
    --header-bg: #F5F4F0;
    --ink: #1C1A17;
    --ink-soft: #7A756C;
    --ink-faint: #A8A296;
    --icon: #4A463F;
    --line: #ECEAE3;
    --accent: #EF7A57;
    --accent-tint: rgba(255,255,255,.5);
    --lavender: #B7A0D4;
    --rose: #E8919F;
    --plum: #7C5470;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; }
  body {
    background: var(--page-bg); color: var(--ink); font-family: var(--font);
    display: flex; justify-content: safe center; align-items: center; padding: 3rem 1.2rem;
    /* svh = the height actually visible with the browser's address bar
       showing. plain vh measures as if it were hidden, which reserves
       extra height mobile Chrome/Safari never actually shows on load -
       that phantom space is what shows up as "scrollable" for no reason
       and throws off centering relative to what's really on screen. */
    min-height: 100vh; min-height: 100svh;
    position: relative;
  }
  a { color: inherit; text-decoration: none; }

  /* the card itself never grows past mobile width — that's the point of a
     micropage. on desktop the canvas around it does the work instead. */
  .phone { width: 100%; max-width: 400px; position: relative; z-index: 2; }

  /* ---- gradient canvas behind the card ---- */
  .bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
  .bg-layer .blob { position: absolute; border-radius: 50%; filter: blur(70px); }
  .bg-layer .b1 { width: 480px; height: 480px; top: -160px; left: -140px; background: var(--rose); opacity: .55; }
  .bg-layer .b2 { width: 460px; height: 460px; bottom: -180px; right: -160px; background: var(--lavender); opacity: .55; }
  .bg-layer .b3 { width: 380px; height: 380px; top: 30%; right: 8%; background: var(--accent); opacity: .3; }
  .bg-layer .b4 { width: 340px; height: 340px; bottom: 18%; left: 6%; background: var(--plum); opacity: .22; }

  /* the blobs are fixed pixel sizes, so on a narrow viewport they read as
     one or two huge shapes filling the whole screen instead of a soft
     multi-corner glow — scale them down to keep the same proportions
     relative to the viewport that desktop has */
  @media (max-width: 700px) {
    .bg-layer .b1 { width: 260px; height: 260px; top: -90px; left: -80px; }
    .bg-layer .b2 { width: 250px; height: 250px; bottom: -100px; right: -90px; }
    .bg-layer .b3 { width: 200px; height: 200px; }
    .bg-layer .b4 { width: 180px; height: 180px; }
  }

  /* ---- liquid glass ---- */
  .card {
    background:
      linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 68%, rgba(255,255,255,.16) 100%),
      rgba(255,255,255,.42);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    backdrop-filter: blur(28px) saturate(170%);
    border-radius: 30px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.55);
    box-shadow:
      0 24px 48px rgba(28,26,23,.10),
      0 2px 6px rgba(28,26,23,.05),
      inset 0 1px 0 rgba(255,255,255,.7),
      inset 0 -1px 0 rgba(28,26,23,.04);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card { background: rgba(255,255,255,.88); }
  }

  /* ---- header ---- */
  .header {
    margin: 10px;
    background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.18));
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 22px; padding: 18px 18px; display: flex; align-items: center; gap: 14px;
  }
  .avatar {
    width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
    object-fit: cover; display: block;
  }
  .who h1 { margin: 0; font-size: 1.24rem; font-weight: 700; letter-spacing: 0; }
  .who p { margin: 2px 0 0; font-size: .92rem; color: var(--ink-soft); font-weight: 400; }

  /* on phones, lead with a bigger photo and stack the name/tagline
     underneath instead of the side-by-side row desktop uses */
  @media (max-width: 700px) {
    .header { flex-direction: column; text-align: center; padding: 24px 18px; gap: 10px; }
    .avatar { width: 96px; height: 96px; }
    .who p { margin-top: 4px; }
  }

  /* short screens (iPhone SE and similar) don't have the vertical room
     for the spacing above - this is a height constraint, not a width one,
     so it's gated separately and doesn't affect taller phones like a
     15 Pro Max even though they're just as narrow. tightens body/header/
     row padding and the avatar so the whole card, every row collapsed,
     fits on one screen without scrolling. */
  @media (max-width: 700px) and (max-height: 700px) {
    body { padding: .85rem 1.2rem; }
    .header { padding: 14px 18px; gap: 8px; }
    .avatar { width: 72px; height: 72px; }
    .row { padding: 9px 8px; }
    .section-label { padding-top: 8px; }
  }

  /* ---- rows ---- */
  .group { padding: 4px 10px; }
  .row {
    display: flex; align-items: center; gap: 14px; padding: 15px 8px;
    border-radius: 14px; cursor: pointer;
  }
  a.row:hover, summary.row:hover { background: var(--accent-tint); }
  .icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--icon); }
  .icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .label { font-size: 1.02rem; font-weight: 400; flex: 1; }
  .chev { width: 18px; height: 18px; color: var(--ink-faint); transition: transform .18s ease; }
  details[open] .chev { transform: rotate(180deg); }
  summary { list-style: none; }
  summary::-webkit-details-marker { display: none; }
  .about-body { margin: 0; padding: 8px 18px; font-size: .92rem; line-height: 1.6; color: var(--ink-soft); }
  .about-body a { color: var(--ink); text-decoration: underline; }

  /* external-link hint, shown only on hover */
  .arrow-out {
    width: 15px; height: 15px; flex-shrink: 0; color: var(--ink-faint);
    opacity: 0; transform: translate(-3px, 3px); transition: opacity .15s ease, transform .15s ease;
  }
  .arrow-out svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .row:hover .arrow-out { opacity: 1; transform: translate(0, 0); }

  /* small hand-drawn wavy underline, sits under the Musings icon, same grey as the icon */
  .wavy-wrap { position: relative; }
  .icon svg.wavy-underline { position: absolute; left: 2px; bottom: -5px; width: 18px; height: 6px; }

  /* contact form inside the "Say hello" disclosure */
  .contact-form { padding: 2px 18px 18px 44px; }
  .field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
  .field label {
    font-family: var(--font); font-size: .72rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .field input, .field textarea {
    font-family: var(--font); font-size: .92rem; color: var(--ink);
    background: var(--header-bg); border: 1px solid var(--line); border-radius: 10px;
    padding: 9px 11px;
  }
  .field textarea { min-height: 68px; resize: vertical; }
  .field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  /* honeypot: kept in the DOM and tab order skipped, but never visible to a real visitor */
  .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .send-btn {
    font-family: var(--font); font-weight: 600; font-size: .92rem; color: #fff;
    background: var(--ink-soft); border: none; border-radius: 10px; padding: 10px 18px; cursor: pointer;
    margin-top: 8px;
  }
  .send-btn:hover { background: var(--accent); }
  .form-note { font-size: .78rem; color: var(--ink-faint); margin: 12px 0 0; line-height: 1.5; }
  .form-note a { color: var(--ink-soft); text-decoration: underline; }
  .form-status { font-size: .84rem; color: var(--accent); font-weight: 600; margin: 10px 0 0; min-height: 1.2em; }
  .send-btn:disabled { opacity: .6; cursor: default; }

  .divider { height: 1px; background: var(--line); margin: 6px 20px; }
  .section-label {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-faint); padding: 12px 18px 4px;
  }

  /* on larger viewports the card just gets a bit more room to sit in,
     it does not grow into a different layout */
  @media (min-width: 860px) {
    .phone { max-width: 420px; }
  }