:root{
    --sky-top:#1A1730;
    --sky-mid:#5B3A57;
    --sky-bottom:#C9756B;
    --sand:#E8B783;
    --sun:#F6D9A0;
    --ink:#2A1E1A;
    --ink-soft:#6E5A4F;
    --accent:#C8964F;
    --accent-soft:#E9C893;
    --card:#FBF1E2;
    --card-border:#E4CBA8;

    --dune-back:#D49A66;
    --dune-mid:#BC7C46;
    --dune-front:#8E5C32;

    --prog:0;
    --maxw:660px;

    --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
    --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  }

  *{ box-sizing:border-box; }
  [hidden]{ display:none !important; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family:var(--sans);
    color:var(--ink);
    background:var(--sky-top);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  /* ---------- atmosphere layers ---------- */
  .layer{ position:fixed; inset:0; pointer-events:none; }

  .sky{
    z-index:0;
    background:
      linear-gradient(to bottom,
        var(--sky-top) 0%,
        #3A2742 26%,
        var(--sky-mid) 48%,
        #9A5560 66%,
        var(--sky-bottom) 80%,
        var(--sand) 100%);
  }
  .nightfall{
    z-index:1;
    background:linear-gradient(to bottom, #0C0A1A 0%, #1A1730 40%, rgba(26,23,48,0) 72%);
    opacity:calc(var(--prog) * 0.6);
    transition:opacity 1.4s ease;
  }

  .stars{ z-index:1; }
  .star{
    position:absolute;
    width:2px;height:2px;border-radius:50%;
    background:#FBEFD8;
    opacity:0;
    animation:twinkle 6s ease-in-out infinite;
  }
  @keyframes twinkle{ 0%,100%{opacity:0;} 50%{opacity:var(--tw,.7);} }

  .sun-orbit{
    z-index:2;
    transform:translateY(calc(var(--prog) * 30vh));
    transition:transform 1.6s cubic-bezier(.22,.61,.36,1);
  }
  .sun{
    position:absolute;
    left:50%; top:42%;
    width:min(46vw,420px); aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle at 50% 50%,
      rgba(250,230,194,.82) 0%, rgba(246,201,144,.6) 24%, rgba(232,165,120,.4) 46%,
      rgba(232,165,120,.16) 62%, rgba(232,165,120,0) 76%);
    animation:sunfloat 22s ease-in-out infinite alternate;
    filter:blur(.3px);
  }
  @keyframes sunfloat{ from{ margin-top:-10px; } to{ margin-top:10px; } }

  canvas#sand{ z-index:5; }

  .dunes{ z-index:4; bottom:0; top:auto; height:52vh; }
  .dunes svg{ position:absolute; bottom:0; left:0; width:140%; height:100%; }
  .dunes .d-back{ z-index:1; }
  .dunes .d-mid{ z-index:2; }
  .dunes .d-front{ z-index:3; }

  .vignette{
    z-index:20;
    background:radial-gradient(120% 90% at 50% 38%,
      rgba(0,0,0,0) 42%, rgba(20,8,14,.16) 78%, rgba(12,5,10,.42) 100%);
  }
  .grain{
    z-index:21;
    opacity:.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* ---------- progress rail ---------- */
  .progress{
    position:fixed; left:0; top:0; right:0; height:3px; z-index:15;
    background:rgba(255,255,255,.06);
  }
  .progress__bar{
    height:100%;
    width:calc(var(--prog) * 100%);
    background:linear-gradient(90deg, var(--accent), var(--accent-soft));
    box-shadow:0 0 14px rgba(233,200,147,.6);
    transition:width 1s cubic-bezier(.22,.61,.36,1);
  }
  .phase{
    position:fixed; top:18px; left:50%; transform:translateX(-50%);
    z-index:15;
    font-family:var(--sans); font-weight:500;
    font-size:11px; letter-spacing:.32em; text-transform:uppercase;
    color:rgba(251,239,216,.72);
    opacity:0; transition:opacity .8s ease;
    pointer-events:none; white-space:nowrap;
    text-shadow:0 1px 8px rgba(0,0,0,.4);
  }
  .phase.show{ opacity:1; }

  /* ---------- narrator control (top-right) ---------- */
  .narrator{
    position:fixed; top:14px; right:14px; z-index:16;
    display:flex; align-items:center; gap:8px;
    font-family:var(--sans);
  }
  .narrator button{
    font-family:var(--sans); cursor:pointer; color:#F3E4CC;
    background:rgba(26,18,30,.42); backdrop-filter:blur(8px);
    border:1px solid rgba(251,239,216,.2); border-radius:999px;
    padding:7px 12px; font-size:12px; letter-spacing:.02em;
    display:flex; align-items:center; gap:6px;
    transition:background .25s, border-color .25s, color .25s;
  }
  .narrator button:hover{ background:rgba(40,28,44,.6); border-color:rgba(251,239,216,.4); }
  .narrator svg{ width:15px; height:15px; display:block; }
  .narrator svg path, .narrator svg line{ stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .narrator .muted-x{ display:none; }
  .narrator.is-muted .muted-x{ display:block; }
  .narrator.is-muted .wave{ display:none; }
  .narrator .vname{ font-variant:small-caps; letter-spacing:.06em; }

  /* ---------- stage ---------- */
  main#stage{
    position:relative; z-index:10;
    min-height:100svh;
    display:flex; align-items:center; justify-content:center;
    padding:72px 22px 92px;
  }
  .screen{ width:100%; max-width:var(--maxw); }
  .screen.wide{ max-width:720px; }
  .rise{ }

  /* ---------- typography ---------- */
  .eyebrow{
    font-family:var(--sans); font-weight:500;
    font-size:12px; letter-spacing:.34em; text-transform:uppercase;
    color:var(--accent-soft);
    margin:0 0 18px;
  }
  h1.title{
    font-family:var(--serif); font-weight:500;
    font-size:clamp(54px, 11vw, 118px);
    line-height:.92; letter-spacing:.01em;
    margin:0 0 18px;
    color:#FBEFD8;
    text-shadow:0 2px 40px rgba(0,0,0,.45), 0 0 70px rgba(233,200,147,.25);
  }
  h2.head{
    font-family:var(--serif); font-weight:500;
    font-size:clamp(32px, 6vw, 50px);
    line-height:1.04; letter-spacing:.005em;
    margin:0 0 20px; color:var(--ink);
  }
  .lede{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:clamp(18px, 2.3vw, 23px);
    line-height:1.55; color:#F3E4CC;
    text-shadow:0 1px 22px rgba(0,0,0,.5);
    margin:0 auto 26px; max-width:34em;
  }

  /* ---------- intro ---------- */
  .intro{ text-align:center; }
  .intro .glowpad{
    position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
    width:min(86vw,720px); height:min(86vw,720px);
    background:radial-gradient(circle, rgba(20,10,20,.42) 0%, rgba(20,10,20,0) 62%);
    z-index:-1; pointer-events:none; border-radius:50%;
  }

  .cube-scene{ perspective:1100px; width:160px; height:160px; margin:0 auto 6px; }
  .cube-rot{ width:100%; height:100%; transform-style:preserve-3d; transform:rotateX(-24deg) rotateY(0deg); }
  .cube{ position:relative; width:104px; height:104px; margin:28px auto; transform-style:preserve-3d; animation:spin 30s linear infinite; }
  .cube .face{
    position:absolute; width:104px; height:104px;
    border:1px solid rgba(233,200,147,.85);
    background:linear-gradient(135deg, rgba(246,217,160,.16), rgba(200,150,79,.06));
    box-shadow:inset 0 0 36px rgba(246,217,160,.18);
    backface-visibility:visible;
  }
  .cube .f1{ transform:translateZ(52px); }
  .cube .f2{ transform:rotateY(180deg) translateZ(52px); }
  .cube .f3{ transform:rotateY(90deg) translateZ(52px); }
  .cube .f4{ transform:rotateY(-90deg) translateZ(52px); }
  .cube .f5{ transform:rotateX(90deg) translateZ(52px); background:linear-gradient(135deg, rgba(246,217,160,.26), rgba(200,150,79,.1)); }
  .cube .f6{ transform:rotateX(-90deg) translateZ(52px); }
  @keyframes spin{ from{ transform:rotateY(0); } to{ transform:rotateY(360deg); } }

  /* ---------- card ---------- */
  .card{
    background:linear-gradient(180deg, #FFF8EC, var(--card));
    border:1px solid var(--card-border);
    border-radius:22px;
    padding:clamp(28px, 5vw, 52px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.7) inset,
      0 24px 60px -28px rgba(60,28,18,.55),
      0 0 70px -20px rgba(233,200,147,.35);
    text-align:left;
  }
  .card.center{ text-align:center; }

  .body p{
    font-size:clamp(15.5px, 1.9vw, 17.5px);
    line-height:1.75; color:var(--ink-soft);
    margin:0 0 17px;
  }
  .body p:last-child{ margin-bottom:0; }

  .pull{
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:clamp(21px,3vw,27px); line-height:1.35;
    color:var(--ink); text-align:center;
    margin:8px auto 24px; max-width:24em;
  }

  .represents-label{
    font-family:var(--sans); font-weight:500; font-size:11px;
    letter-spacing:.3em; text-transform:uppercase; color:var(--accent);
    margin:0 0 10px;
  }
  .represents{
    font-family:var(--serif); font-weight:500;
    font-size:clamp(26px,4.4vw,38px); line-height:1.15;
    color:var(--ink); margin:0 0 22px;
  }

  /* ---------- emblem ---------- */
  .emblem{ width:78px; height:78px; margin:0 0 22px; display:block; }
  .card.center .emblem, .desert .emblem{ margin-left:auto; margin-right:auto; }
  .emblem svg{ width:100%; height:100%; overflow:visible; }
  .emblem path, .emblem line, .emblem circle, .emblem polyline{
    fill:none; stroke:var(--accent); stroke-width:1.6;
    stroke-linecap:round; stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
  }
  .desert .emblem path, .desert .emblem circle, .desert .emblem line, .desert .emblem polyline{ stroke:var(--accent-soft); }
  .emblem .fillpetal{ fill:rgba(200,150,79,.14); stroke:var(--accent); }
  .draw{ stroke-dasharray:var(--len,520); stroke-dashoffset:0; }

  /* ====================================================================
     PICTURING — over the open desert (no card), narrated word-by-word
     ==================================================================== */
  .desert{ text-align:center; }
  .desert .step-label{
    font-family:var(--sans); font-weight:500; font-size:11px;
    letter-spacing:.3em; text-transform:uppercase; color:var(--accent-soft);
    margin:2px 0 18px; text-shadow:0 1px 10px rgba(0,0,0,.5);
  }
  /* the spoken invitation, read first, sitting at the top of the scene */
  .settle{
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:clamp(17px,2.3vw,22px); line-height:1.45;
    color:#F4E6CD; max-width:24em; margin:0 auto 22px;
    text-shadow:0 1px 2px rgba(0,0,0,.6), 0 1px 16px rgba(0,0,0,.6);
  }
  .scene{
    position:relative; z-index:0;
    font-family:var(--serif); font-weight:400; font-style:italic;
    font-size:clamp(21px, 3vw, 30px); line-height:1.5;
    color:#FCF3E2; max-width:22em; margin:0 auto 30px;
    text-shadow:0 1px 2px rgba(0,0,0,.65), 0 1px 20px rgba(0,0,0,.6), 0 0 46px rgba(0,0,0,.5);
  }
  /* soft dark scrim behind the words so they stay legible over the bright sun */
  .scene::before{
    content:""; position:absolute; left:50%; top:50%;
    width:120%; height:152%; transform:translate(-50%,-50%);
    background:radial-gradient(ellipse 64% 58% at 50% 50%,
      rgba(12,5,11,.72) 0%, rgba(12,5,11,.5) 48%, rgba(12,5,11,0) 80%);
    filter:blur(28px); z-index:-1; pointer-events:none;
  }
  .scene .w{
    opacity:.2; transition:opacity .55s ease, text-shadow .55s ease;
  }
  .scene .w.lit{ opacity:1; }
  .scene.alllit .w{ opacity:1; }

  /* frosted panel that lets the desert show through behind the choices */
  .panel{
    background:rgba(24,16,28,.34);
    backdrop-filter:blur(12px) saturate(1.05);
    -webkit-backdrop-filter:blur(12px) saturate(1.05);
    border:1px solid rgba(251,239,216,.16);
    border-radius:22px;
    padding:clamp(20px,3.5vw,30px) clamp(18px,3.5vw,32px);
    box-shadow:0 24px 60px -30px rgba(0,0,0,.6);
    text-align:left;
    opacity:0; transform:translateY(14px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .panel.show{ opacity:1; transform:none; }
  .panel-hint{
    font-family:var(--serif); font-style:italic; color:rgba(251,239,216,.78);
    font-size:clamp(16px,2vw,19px); margin:0 0 18px; text-align:center;
  }

  .picker{ margin:0 0 18px; }
  .picker:last-of-type{ margin-bottom:6px; }
  .picker .plabel{
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:clamp(16px,2vw,19px); color:#F3E4CC; margin:0 0 10px;
  }
  .pills{ display:flex; flex-wrap:wrap; gap:9px; }
  .pill{
    font-family:var(--sans); font-size:13.5px; font-weight:500; letter-spacing:.01em;
    cursor:pointer; color:#F3E4CC;
    background:rgba(251,239,216,.07);
    border:1px solid rgba(251,239,216,.24);
    border-radius:999px; padding:9px 16px;
    transition:background .2s, border-color .2s, color .2s, transform .15s;
  }
  .pill:hover{ background:rgba(251,239,216,.14); border-color:rgba(251,239,216,.45); }
  .pill:active{ transform:scale(.97); }
  .pill.sel{
    color:#3A2410;
    background:linear-gradient(135deg, var(--accent-soft), var(--accent));
    border-color:transparent;
    box-shadow:0 8px 20px -10px rgba(200,150,79,.8);
  }
  select.drop{
    font-family:var(--sans); font-size:14px; color:#F3E4CC; cursor:pointer;
    background:rgba(24,16,28,.55);
    border:1px solid rgba(251,239,216,.28);
    border-radius:12px; padding:11px 38px 11px 14px;
    appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23E9C893' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat; background-position:right 14px center;
    min-width:200px; max-width:100%;
  }
  select.drop:focus{ outline:none; border-color:var(--accent); }
  select.drop option{ color:#2A1E1A; background:#FBF1E2; }
  .picker.is-drop .plabel{ margin-bottom:8px; }

  /* the quiet "imagine" beat while the narrator reads, before the questions appear */
  .imagine{
    font-family:var(--serif); font-style:italic;
    color:rgba(251,239,216,.72); font-size:clamp(16px,2vw,19px);
    margin:6px auto 20px; text-shadow:0 1px 16px rgba(0,0,0,.55);
  }
  .nav-right{ display:flex; align-items:center; gap:12px; }

  /* narrator chooser on the intro */
  .vchooser{ margin:2px auto 24px; }
  .vchooser-label{
    font-family:var(--sans); font-weight:500; font-size:11px;
    letter-spacing:.28em; text-transform:uppercase;
    color:rgba(251,239,216,.55); margin-bottom:11px;
  }
  .vpills{ display:inline-flex; gap:10px; }
  .vpill{
    font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.04em;
    cursor:pointer; color:#F3E4CC;
    background:rgba(251,239,216,.07);
    border:1px solid rgba(251,239,216,.28);
    border-radius:999px; padding:9px 24px;
    transition:background .2s, border-color .2s, color .2s, transform .15s;
  }
  .vpill:hover{ background:rgba(251,239,216,.14); border-color:rgba(251,239,216,.5); }
  .vpill:active{ transform:scale(.97); }
  .vpill.sel{
    color:#3A2410;
    background:linear-gradient(135deg, var(--accent-soft), var(--accent));
    border-color:transparent; box-shadow:0 8px 20px -10px rgba(200,150,79,.8);
  }

  /* ---------- echo / interpretations ---------- */
  .echo{
    margin:14px 0 26px; padding:18px 20px;
    background:rgba(200,150,79,.07);
    border-left:2px solid var(--accent-soft);
    border-radius:0 12px 12px 0;
  }
  .echo .row2{ display:flex; justify-content:space-between; gap:16px; padding:7px 0; border-top:1px solid rgba(228,203,168,.55); }
  .echo .row2:first-child{ border-top:none; }
  .echo .q2{ font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:15.5px; }
  .echo .a2{ font-size:15px; color:var(--ink); font-weight:500; text-align:right; }
  .echo .a2.empty{ color:#A88E78; font-weight:400; font-style:italic; }

  .interp{ margin-top:6px; }
  .interp .row{ padding:15px 0; border-top:1px solid rgba(228,203,168,.7); }
  .interp .row:first-child{ border-top:none; }
  .interp .attr{
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:clamp(17px,2.2vw,19px); color:var(--ink); margin:0 0 5px;
  }
  .interp .read{ font-size:15px; line-height:1.65; color:var(--ink-soft); margin:0; }

  /* ---------- recap (closing) ---------- */
  .recap{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin:6px 0 28px; }
  .recap .chip{ width:48px; height:48px; opacity:.9; }
  .recap .chip svg{ width:100%; height:100%; }
  .recap .chip path, .recap .chip line, .recap .chip circle, .recap .chip polyline{
    fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  }

  /* ---------- buttons / nav ---------- */
  .nav{ display:flex; align-items:center; gap:18px; margin-top:34px; }
  .nav.center{ justify-content:center; }
  .nav.between{ justify-content:space-between; }
  .desert .nav{ margin-top:26px; }

  .btn{
    font-family:var(--sans); font-weight:500; font-size:15px; letter-spacing:.02em;
    border:none; cursor:pointer; border-radius:999px;
    padding:15px 32px; color:#3A2410;
    background:linear-gradient(135deg, var(--accent-soft), var(--accent));
    box-shadow:0 12px 26px -12px rgba(200,150,79,.85), 0 0 0 1px rgba(255,255,255,.25) inset;
    transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(200,150,79,.95); filter:brightness(1.04); }
  .btn:active{ transform:translateY(0); }
  .btn.ghost{
    background:transparent; color:#F3E4CC; box-shadow:none;
    padding:15px 10px; letter-spacing:.04em;
  }
  .btn.ghost:hover{ transform:none; color:#fff; filter:none; }
  .btn.ghost.dark{ color:var(--ink-soft); }
  .btn.ghost.dark:hover{ color:var(--ink); }
  .btn.big{ padding:17px 42px; font-size:16px; }

  .hint{ margin-top:18px; font-size:12.5px; color:#B49A82; font-style:italic; }
  .intro .hint{ color:rgba(251,239,216,.6); }
  .desert .hint{ color:rgba(251,239,216,.55); }

  /* tiny replay link under the scene */
  .replay{
    background:none; border:none; cursor:pointer;
    color:rgba(251,239,216,.6); font-family:var(--sans); font-size:12px;
    letter-spacing:.08em; text-transform:uppercase; padding:6px 10px;
    display:inline-flex; align-items:center; gap:6px; margin-bottom:6px;
    transition:color .2s;
  }
  .replay:hover{ color:#FBEFD8; }
  .replay svg{ width:13px; height:13px; }
  .replay svg path{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

  /* ---------- responsive ---------- */
  @media (max-width:560px){
    main#stage{ padding:62px 16px 80px; }
    .card{ border-radius:18px; }
    .nav{ gap:10px; }
    .btn{ padding:14px 24px; }
    .phase{ font-size:10px; letter-spacing:.26em; }
    .narrator button{ padding:6px 10px; font-size:11px; }
    .echo .row2{ flex-direction:column; gap:2px; }
    .echo .a2{ text-align:left; }
    select.drop{ min-width:100%; }
  }

  @media (prefers-reduced-motion: reduce){
    .cube{ animation:none; }
    .sun{ animation:none; }
    .star{ animation:none; opacity:.4; }
    .scene .w{ opacity:1 !important; transition:none; }
    .draw{ stroke-dashoffset:0 !important; }
  }

  /* ============================================================
     FOREST THEME — "A Walk in the Woods" (set <body data-theme="forest">)
     Re-tints the shared atmosphere; gold accents stay light for legibility.
     ============================================================ */
  body[data-theme="forest"]{
    --sky-top:#241B33; --sky-mid:#5A4658; --sky-bottom:#9A6A4A;
    --sand:#C98A4B; --sun:#E8C97A;
    --accent:#D9A94B; --accent-soft:#EBCB86;
    --dune-back:#3A4A30; --dune-mid:#243520; --dune-front:#14200E;
    --mote:230,214,140;
  }
  body[data-theme="forest"] .sky{
    background:linear-gradient(to bottom,
      #241B33 0%, #3A2E42 22%, #6E4F52 44%, #9A6A4A 64%, #C98A4B 80%, #25341E 100%);
  }
  body[data-theme="forest"] .dunes{ height:46vh; }

  /* generic intro hero emblem (non-cube journeys) */
  .hero-emblem{ width:118px; margin:0 auto 12px; position:relative; }
  .hero-emblem svg{ width:100%; height:auto; display:block; overflow:visible; }
  .hero-emblem path, .hero-emblem ellipse, .hero-emblem line, .hero-emblem circle, .hero-emblem polyline{
    fill:none; stroke:var(--accent-soft); stroke-width:1.8;
    stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  }
  .hero-emblem .lg-ln2{ opacity:.55; }
  .hero-emblem .lg-dot{ fill:var(--accent-soft); stroke:none; }

  /* scene actions row: Hear again + Skip to answer */
  .scene-actions{ display:flex; justify-content:center; align-items:center; gap:20px; flex-wrap:wrap; }
  .desert[data-stage="answer"] [data-skip]{ display:none; }

  /* persistent home link back to the hub */
  .home-link{
    position:fixed; top:14px; left:14px; z-index:16;
    display:flex; align-items:center; gap:8px; text-decoration:none; color:#F3E4CC;
    background:rgba(26,18,30,.42); backdrop-filter:blur(8px);
    border:1px solid rgba(251,239,216,.2); border-radius:999px;
    padding:7px 14px 7px 11px; font-family:var(--sans); font-size:12px; letter-spacing:.04em;
    transition:background .25s, border-color .25s, color .25s;
  }
  .home-link:hover{ background:rgba(40,28,44,.6); border-color:rgba(251,239,216,.42); color:#fff; }
  .home-link svg{ width:13px; height:16px; display:block; }
  .home-link svg ellipse, .home-link svg line, .home-link svg circle{
    fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  }
  .home-link span{ font-variant:small-caps; letter-spacing:.08em; }
  @media (max-width:600px){ .home-link span{ display:none; } .home-link{ padding:7px; } }