:root{
    --bg:#FBF7F2;

    --orange-soft: var(--a1);
    --orange-mid: var(--a2);
    --orange-deep: color-mix(in hsl, var(--a2) 80%, black);

    --green-light: var(--a4);
    --green-soft: color-mix(in hsl, var(--a4) 80%, black);
    --green-mid: var(--a3);
    --green-dark: color-mix(in hsl, var(--a3) 80%, black);
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; margin:0; }
  body{ background:var(--bg); overflow:hidden; }

  .stage {
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
}

  .curve{
    position:absolute;
    bottom:0;
    width: var(--w);
    height: var(--h);                 /* animated via --hA/--hB */
    opacity:.75;

    transform-origin:50% 100%;
    animation:
      sway var(--sway) ease-in-out infinite alternate,
      heightPulse var(--hDur) ease-in-out infinite alternate;

    will-change: transform, height;
    pointer-events:none;
  }

  .curve svg{
    width:100%;
    height:100%;
    display:block;
    transform-origin:50% 100%;
    animation:breathe var(--breathe) ease-in-out infinite alternate;
    will-change: transform;
  }

  @keyframes sway{
    from { transform: translateX(calc(0px - var(--dx))); }
    to   { transform: translateX(var(--dx)); }
  }

  @keyframes breathe{
    from { transform: scaleX(0.965) scaleY(1.045); }
    to   { transform: scaleX(1.055) scaleY(0.975); }
  }

  /* Separate randomized height animation per curve */
  @keyframes heightPulse{
    from { height: var(--hA); }
    to   { height: var(--hB); }
  }

  @media (prefers-reduced-motion: reduce){
    .curve, .curve svg{ animation:none !important; }
  }

  :root {
        --maxw: 980px;              /* card max width */
    --title: clamp(34px, 5.8vw, 64px);
    --kword: clamp(15px, 2.6vw, 22px);
    --icon: 28px;
    --radius: 18px;
    --shadow: 0 10px 28px rgba(0,0,0,.10);
  }
  /* Dark mode */
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0f1110; --text:#efece5; --muted:#c9c2b8; --card:#151816;
      --a1: color-mix(in hsl, var(--a1) 85%, black);
      --a2: color-mix(in hsl, var(--a2) 85%, black);
      --a3: color-mix(in hsl, var(--a3) 85%, black);
      --a4: color-mix(in hsl, var(--a4) 85%, black);
    }
  }

  *{box-sizing:border-box}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, "Helvetica Neue", Arial;
    line-height:1.35; min-height:100svh;
    display: flex;
    align-items: stretch;
    padding: clamp(16px, 3vw, 40px);
  }

  /* Centered CARD layout (not full width on desktop) */
  .card{
    width: calc(100vw - (clamp(16px, 3vw, 40px)*2));
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: clip;
    position: relative;
  }

  /* Header row: name + icon + portrait */
  .mast{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: clamp(16px, 3vw, 32px);
    align-items:start;
    padding: clamp(18px, 4vw, 32px);
  }
  .titleGroup {
    text-align: center;
  }
  .brand {
    font-family: 'Oswald', sans-serif;
    font-weight:700; font-size:var(--title); letter-spacing:.02em; margin:0 0 .4rem; color: #6f2801;}
  .icons{ display:flex; gap:14px; align-items:center; justify-content:center; }
  .icons a{ width:var(--icon); height:var(--icon); display:inline-grid; place-items:center; color:#faec7a; opacity:.9; text-decoration:none;
    border-radius: 4px;
    background-color: #2b6355;
    padding: 4px;}
  .icons a:hover{ opacity:1; transform:translateY(-1px) }

  .portraitWrap{
    justify-self:end;
    width: min(55vw, 500px);
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .portraitWrap img{
    width:100%; height:auto; display:block;
  }

  /* Keywords line */
  .mid{
    display:flex; justify-content:center;
    padding: clamp(10px, 2.8vw, 22px) clamp(14px, 3.4vw, 28px) clamp(24px, 4vw, 34px);
  }
  .keywords{
    white-space:nowrap; text-transform:uppercase; letter-spacing:.14em;
    font-weight:800; font-size:var(--kword);
    padding:.85rem 1.25rem; border-radius:999px;
    background: color-mix(in hsl, var(--a1) 22%, transparent);
  }
  .sep{ opacity:.55; padding:0 .5ch }

  @media (min-width:1024px) {
    .portraitWrap {
        width: auto;
        max-height: 100%;
    }
  }

  /* Mobile: stack portrait under the name */
  @media (max-width:768px) {
    body {
      display: block;
      padding: 0;
    }
    .mast{
      grid-template-columns: 1fr;
      text-align:left;
      align-items:center;
      height: 265px;
    }
    .portraitWrap {
        justify-self: end;
        width: min(40vw, 380px);
        position: absolute;
        bottom: 0;
        right: 0;
        height: calc(100vh - 265px);
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }
    .portraitWrap img {
        width: auto;
        height: 100%;
        display: block;
        object-fit: fill;
    }
    .card {
      height: 100vh;
      width: 100%;
    }
    .stage {
        height: 30%;
    }
  }