/* GAID on a phone. Every value comes from tokens.css. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--bg);background-image:var(--adire);background-size:var(--adire-size);color:var(--text);
  font:var(--w-body) var(--t-2)/var(--lh-body) var(--font-body)}
a{color:var(--text);text-decoration-thickness:var(--b-2);text-decoration-color:var(--accent);text-underline-offset:var(--s-1)}
.wrap{max-width:var(--page-max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:var(--b-focus) solid var(--focus);outline-offset:var(--b-2)}
button,input,select{font:inherit;color:inherit}

/* ---------------------------------------------------------------- top */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);padding-top:var(--s-4);padding-bottom:var(--s-4)}
.brand{display:flex;align-items:center;min-height:var(--tap)}
.brand img{display:block;height:var(--s-6);width:auto}
.tag{margin:0;padding:var(--s-1) var(--s-3);border:var(--b-1) solid var(--edge);border-radius:var(--r-round);color:var(--text-2);
  font-size:var(--t-1);font-weight:var(--w-strong);letter-spacing:var(--track-label);text-transform:uppercase}

/* ---------------------------------------------------------------- the work */
.stage{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);margin-top:var(--s-4)}
@media (min-width:760px){.stage{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-6)}}
.mount{margin:0;background:var(--mount);aspect-ratio:4/3;max-width:100%;display:flex;align-items:center;justify-content:center;
  padding:7%;min-height:0;overflow:hidden;border-radius:var(--r-0)}
.mount img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.noart{margin:0;color:var(--ink-2);font-size:var(--t-1)}
.words{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.where{margin:0;color:var(--text-2);font-size:var(--t-1);font-weight:var(--w-strong);letter-spacing:var(--track-label);text-transform:uppercase}
.title{margin:0;font:var(--w-display) var(--t-5)/var(--lh-tight) var(--font-display);letter-spacing:var(--track-display);overflow-wrap:anywhere;text-wrap:balance}
.meta{margin:0;color:var(--text-2)}
.said{margin-top:var(--s-3);padding:var(--s-4);background:var(--surface);border-radius:var(--r-1);display:flex;flex-direction:column;gap:var(--s-2)}
.you{margin:0;color:var(--text-2);font-size:var(--t-1)}
.reply{margin:0;font-size:var(--t-3);line-height:var(--lh-body);max-width:var(--measure);overflow-wrap:anywhere}
.source{margin:0;color:var(--text-2);font-size:var(--t-1)}

/* ---------------------------------------------------------------- asking */
.controls{margin-top:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.talk{align-self:center;display:inline-flex;align-items:center;gap:var(--s-3);min-height:calc(var(--tap) + var(--s-2));padding:0 var(--s-6);
  border:var(--b-2) solid var(--ring);border-radius:var(--r-1);background:var(--accent);color:var(--on-accent);font-weight:var(--w-strong);font-size:var(--t-3);cursor:pointer;
  transition:background-color var(--m-fast) var(--ease),box-shadow var(--m-fast) var(--ease)}
.talk[hidden]{display:none}
.talk[data-state="listening"]{background:var(--ink);color:var(--accent);box-shadow:0 0 0 var(--s-1) var(--accent)}
.talk[data-state="speaking"]{background:var(--accent);color:var(--on-accent)}
/* The voice: four bars, still at rest, moving only while listening or speaking. */
.voice{display:inline-flex;align-items:center;gap:var(--s-1);height:var(--dot)}
.voice i{display:block;width:var(--s-1);height:40%;border-radius:var(--r-round);background:currentColor}
.voice i:nth-child(2){height:100%}.voice i:nth-child(3){height:65%}.voice i:nth-child(4){height:85%}
.talk:not([data-state="idle"]) .voice i{animation:voice var(--m-slow) var(--ease) infinite alternate}
.voice i:nth-child(2){animation-delay:calc(var(--m-fast) * 1)}
.voice i:nth-child(3){animation-delay:calc(var(--m-fast) * 2)}
.voice i:nth-child(4){animation-delay:calc(var(--m-fast) * 3)}
@keyframes voice{to{transform:scaleY(.4)}}
@media (prefers-reduced-motion:reduce){.talk .voice i{animation:none}}

.ask{display:flex;gap:var(--s-2)}
.ask input{flex:1;min-width:0;min-height:var(--tap);padding:0 var(--s-3);border:var(--b-1) solid var(--edge);border-radius:var(--r-1);background:var(--surface)}
.ask input::placeholder{color:var(--text-2)}
.go{min-height:var(--tap);padding:0 var(--s-5);border:var(--b-1) solid var(--edge);border-radius:var(--r-1);background:transparent;font-weight:var(--w-strong);cursor:pointer}
.go:hover{background:var(--raised)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chips button{min-height:var(--tap);padding:0 var(--s-4);border:var(--b-1) solid var(--edge);border-radius:var(--r-round);background:transparent;
  font-size:var(--t-1);font-weight:var(--w-strong);letter-spacing:var(--track-label);text-transform:uppercase;cursor:pointer}
.chips button:hover{background:var(--raised)}
.row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:space-between}
.lang{display:flex;align-items:center;gap:var(--s-2);color:var(--text-2);font-size:var(--t-1)}
.lang select{min-height:var(--tap);padding:0 var(--s-2);border:var(--b-1) solid var(--edge);border-radius:var(--r-1);background:var(--surface)}
.pair{display:flex;align-items:center;gap:var(--s-2);color:var(--text-2);font-size:var(--t-1)}
.pair input{width:calc(var(--s-7) * 2);min-height:var(--tap);padding:0 var(--s-2);border:var(--b-1) solid var(--edge);border-radius:var(--r-1);background:var(--surface);
  color:var(--text);font:var(--w-strong) var(--t-2)/1 var(--font-body);letter-spacing:var(--track-label);text-transform:uppercase}
.to-screen{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap);font-weight:var(--w-strong)}

/* ---------------------------------------------------------------- walking */
.home-panel{margin-top:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start}
.take{display:inline-flex;align-items:center;gap:var(--s-2)}
.home-box{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-4);background:var(--surface);border-radius:var(--r-1);max-width:100%}
.home-box[hidden]{display:none}
.label{margin:0;color:var(--text-2);font-size:var(--t-1);font-weight:var(--w-strong);letter-spacing:var(--track-label);text-transform:uppercase}
.visit-code{margin:0;font:var(--w-strong) var(--t-3)/var(--lh-snug) var(--font-body);overflow-wrap:anywhere;user-select:all}
.walk{margin-top:var(--s-7)}
.walk h2{margin:0 0 var(--s-3);font:var(--w-display) var(--t-3)/var(--lh-snug) var(--font-display)}
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--thumb-min),1fr));gap:var(--s-3)}
.works button{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-2);border:var(--b-1) solid var(--line);border-radius:var(--r-1);
  background:var(--surface);text-align:left;font-size:var(--t-1);line-height:var(--lh-snug);cursor:pointer;min-width:0}
.works button:hover{background:var(--raised)}
.works button[aria-current="true"]{border:var(--b-2) solid var(--ring);padding:calc(var(--s-2) - var(--b-1))}
.works .thumb{aspect-ratio:1;max-width:100%;background:var(--mount);display:flex;align-items:center;justify-content:center;padding:10%}
.works .thumb img{max-width:100%;max-height:100%;object-fit:contain}
.works span{overflow-wrap:anywhere}
.foot{margin:var(--s-7) 0 var(--s-6);color:var(--text-2);font-size:var(--t-1);max-width:var(--measure)}