:root{
  --bg1:#05060f; --bg2:#0b1026; --gold:#e8c568; --gold-dim:#a8883c;
  --silver:#c8d0e0; --text:#e8e6df; --muted:#8b90a5; --earth:#7fd0b4;
  --star:#dfe4f2; --sun:#ffe9a8;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Georgia,'Times New Roman',serif;
  color:var(--text);
  background:
    radial-gradient(ellipse 120% 80% at 70% -10%, rgba(40,45,90,.55), transparent 60%),
    radial-gradient(ellipse 100% 70% at 20% 110%, rgba(90,70,25,.28), transparent 60%),
    linear-gradient(160deg, var(--bg1), var(--bg2) 55%, #070a18);
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:1rem;
}
.wrap{
  width:100%;
  display:flex; flex-direction:column;
  flex:1;
}

/* ---------- header (the masthead) ---------- */
.kicker{font-size:.62rem; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); margin-bottom:.5rem}

/* ---------- the discreet menu ---------- */
.menu-wrap{position:absolute; top:.3rem; right:.35rem; display:flex; align-items:center; gap:.45rem}
.menu-btn{
  font-family:inherit; font-size:1.75rem; line-height:1;
  color:var(--muted); background:none; border:none; cursor:pointer;
  padding:.25rem .55rem; border-radius:8px; opacity:.85
}
.menu-btn:hover{color:var(--gold); opacity:1}
.whoami{
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:.66rem; letter-spacing:.05em;
  color:var(--gold); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:9.5rem; padding:.28rem .7rem;
  border:1px solid rgba(232,197,104,.28); border-radius:999px;
  background:rgba(232,197,104,.07);
}
.whoami:hover{background:rgba(232,197,104,.15)}
.menu{
  position:absolute; top:calc(100% + .35rem); right:0; z-index:60;
  min-width:11rem; background:rgba(11,16,38,.97);
  border:1px solid rgba(232,197,104,.35); border-radius:10px;
  padding:.35rem; box-shadow:0 18px 44px rgba(0,0,0,.5)
}
.menu.hidden{display:none}
.menu-item.hidden{display:none}
.menu-item{
  display:block; width:100%; text-align:left; font-family:inherit;
  font-size:.72rem; letter-spacing:.06em; color:var(--muted);
  background:none; border:none; cursor:pointer; text-decoration:none;
  padding:.55rem .7rem; border-radius:7px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis
}
.menu-item:hover{color:var(--gold); background:rgba(232,197,104,.08)}
.menu-item[data-signed]{color:var(--silver)}

/* ---------- sign in overlay ---------- */
.login-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(5,6,15,.84); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:1rem
}
.login-overlay.hidden{display:none}
.login-card{
  max-width:400px; width:100%; background:var(--bg2);
  border:1px solid rgba(232,197,104,.35); border-radius:16px;
  padding:1.6rem; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.5)
}
.login-card h2{color:var(--gold); font-weight:normal; letter-spacing:.06em; margin-bottom:.5rem}
.login-card p{color:var(--muted); font-size:.85rem; line-height:1.5; margin-bottom:1.2rem}
.login-card input[type=email]{
  width:100%; padding:.7rem .9rem; border-radius:10px;
  border:1px solid rgba(200,208,224,.3); background:#0d1330; color:var(--text);
  font-family:inherit; font-size:.95rem; margin-bottom:.7rem
}
.login-card input[type=email]:focus{outline:none; border-color:var(--gold)}
.login-card .btn-primary{
  width:100%; padding:.75rem; border:none; border-radius:24px;
  background:var(--gold); color:#1c2410; font-weight:600; font-family:inherit;
  font-size:.95rem; cursor:pointer
}
.login-card .btn-primary:disabled{opacity:.6; cursor:not-allowed}
.login-card .btn-ghost{
  margin-top:.85rem; background:none; border:none; color:var(--muted);
  font-family:inherit; font-size:.75rem; cursor:pointer; text-decoration:underline
}
.status-msg{display:none; margin-top:.7rem; padding:.45rem; border-radius:8px; font-size:.8rem}
.status-msg.error{display:block; background:rgba(220,38,38,.15); color:#fca5a5}
.status-msg.success{display:block; background:rgba(16,185,129,.12); color:#6ee7b7}
.status-msg.info{display:block; background:rgba(139,144,165,.12); color:var(--silver)}

/* the My Calendar list: up to three feeds, each removable */
.cal-list{display:flex; flex-direction:column; gap:.4rem; margin-bottom:.6rem}
.cal-item{display:flex; align-items:center; gap:.5rem; padding:.4rem .55rem; border:1px solid rgba(200,208,224,.14); border-radius:8px; background:rgba(11,16,38,.45)}
.cal-item-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem}
.cal-item-txt b{font-size:.74rem; color:var(--gold); font-weight:normal; letter-spacing:.03em}
.cal-item-txt span{font-size:.62rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cal-rm{flex:none; font-family:inherit; font-size:.7rem; line-height:1; color:var(--muted); background:none; border:none; cursor:pointer; padding:.25rem .35rem; border-radius:6px}
.cal-rm:hover{color:#fca5a5; background:rgba(220,38,38,.12)}

/* ---------- views (the Loom's scales) ---------- */
.view-list{display:flex; flex-direction:column; gap:.4rem; margin-top:.2rem}
.view-row{
  display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  text-align:left; font-family:inherit;
  background:rgba(11,16,38,.6); border:1px solid rgba(200,208,224,.18); border-radius:10px;
  padding:.55rem .75rem; cursor:pointer; transition:.2s
}
.view-row:hover:not(:disabled){border-color:var(--gold-dim); background:rgba(232,197,104,.06)}
.view-row:disabled{opacity:.42; cursor:not-allowed}
.view-row.current{border-color:rgba(232,197,104,.5)}
.view-row .view-name{font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.view-row.current .view-name::after{content:" \00b7 here"; color:var(--silver); font-size:.62rem; letter-spacing:.1em}
.view-row .view-desc{font-size:.66rem; color:var(--muted); line-height:1.4}

/* ---------- the guide (the Loom in brief) ---------- */
.guide-card{
  width:min(560px,100%); max-height:92dvh; overflow:auto;
  background:var(--bg2); border:1px solid rgba(232,197,104,.35); border-radius:16px;
  padding:1.5rem 1.5rem 1.15rem; box-shadow:0 24px 60px rgba(0,0,0,.5);
  text-align:left;
}
.guide-card h2{
  font-weight:normal; text-align:center; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-size:.92rem; margin-bottom:.4rem;
}
.guide-emblem{display:flex; justify-content:center; margin-bottom:.65rem}
.guide-emblem img{
  height:clamp(3.2rem,9vh,5rem); width:auto; border-radius:10px;
  border:1px solid rgba(232,197,104,.22); box-shadow:0 0 26px rgba(232,197,104,.10);
}
.guide-lead{
  text-align:center; font-style:italic; color:var(--muted); font-size:.76rem; margin-bottom:.2rem;
}
.guide-card h3{
  font-weight:normal; text-transform:uppercase; letter-spacing:.14em;
  color:var(--gold); font-size:.74rem; margin:1.1rem 0 .4rem;
}
.guide-card p{color:var(--silver); font-size:.8rem; line-height:1.55}
.guide-card b{color:var(--text); font-weight:normal}
.guide-controls{display:flex; justify-content:center; align-items:center; gap:.5rem; margin:.6rem 0 .5rem}
.guide-controls .rev{display:inline-block; transform:scaleX(-1)}
.guide-controls .g-turn{cursor:default; pointer-events:none}
.guide-list{list-style:none; margin:0 0 .55rem; padding:0; display:flex; flex-direction:column; gap:.32rem}
.guide-list li{font-size:.76rem; color:var(--silver); line-height:1.45}
.guide-list b{color:var(--gold); font-weight:normal}
/* the controller: the app's rhombus map, reproduced faithfully */
.guide-map{display:flex; flex-direction:column; align-items:center; gap:.35rem; margin:.6rem 0 .5rem}
.guide-map svg{
  width:min(290px,80%); height:auto; border-radius:12px;
  border:1px solid rgba(232,197,104,.28); box-shadow:0 0 26px rgba(232,197,104,.09);
  background:rgba(11,16,38,.5); padding:.5rem .7rem;
}
.guide-map polygon{fill:rgba(232,197,104,.06); stroke:rgba(200,208,224,.3); stroke-width:1; cursor:pointer; transition:fill .2s}
.guide-map polygon:hover{fill:rgba(232,197,104,.22)}
.guide-mapcap{font-size:.6rem; font-style:italic; color:var(--muted); letter-spacing:.05em}
.guide-card .btn-ghost{
  display:block; margin:1.15rem auto 0; background:none; border:none;
  color:var(--muted); font-family:inherit; font-size:.75rem; cursor:pointer; text-decoration:underline;
}
.guide-card .btn-ghost:hover{color:var(--gold)}

/* ---------- the 1/16 view (the rising thread) ---------- */
.view16-card{
  width:min(360px,100%); max-height:94dvh; overflow:auto;
  background:var(--bg2); border:1px solid rgba(232,197,104,.35); border-radius:16px;
  padding:1.2rem 1.1rem 1rem; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.5)
}
.v16-title{font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.v16-sub{margin-top:.3rem; font-size:.64rem; color:var(--muted); font-style:italic; line-height:1.5}
/* the fixed focal-month header - repeats the focal details in bigger fonts */
.v16-focal{
  margin-top:.7rem; padding:.55rem .7rem;
  border:1px solid rgba(232,197,104,.28); border-radius:10px;
  background:rgba(11,16,38,.55)
}
.v16-month{font-size:clamp(1.05rem,4.2vw,1.3rem); letter-spacing:.08em; color:var(--gold)}
.v16-ref{margin-top:.18rem; font-size:.85rem; color:var(--silver)}
.v16-gates{margin-top:.22rem; font-size:.68rem; color:var(--muted); letter-spacing:.04em}
#view16{width:100%; height:auto; margin-top:.6rem; touch-action:manipulation;
  mask-image:linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent)}
.hx-moon{cursor:pointer}
.hx-moon:hover circle{stroke:var(--gold)}

/* ---------- the Weave (full-screen Focus: threads across the moon) ---------- */
.weave-card{
  width:min(720px,100%); max-height:94dvh; overflow:auto;
  background:var(--bg2); border:1px solid rgba(232,197,104,.35); border-radius:16px;
  padding:1.1rem 1rem 1rem; box-shadow:0 24px 60px rgba(0,0,0,.5)
}
.weave-title{text-align:center; font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.weave-sub{margin-top:.28rem; text-align:center; font-size:.62rem; color:var(--muted); font-style:italic; line-height:1.5}
.weave-ranges{display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin-top:.7rem}
.chip{
  font-family:inherit; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); background:rgba(11,16,38,.6); border:1px solid rgba(200,208,224,.2);
  border-radius:999px; padding:.3rem .7rem; cursor:pointer; transition:.2s
}
.chip:hover{color:var(--gold); border-color:var(--gold-dim)}
.chip.active{color:var(--gold); border-color:var(--gold); background:rgba(232,197,104,.08)}
.weave-custom{display:flex; justify-content:center; align-items:center; gap:.5rem; margin-top:.55rem}
.weave-custom.hidden{display:none}
.weave-custom input[type=date]{
  font-family:inherit; font-size:.72rem; color:var(--text);
  background:#0d1330; border:1px solid rgba(200,208,224,.3); border-radius:8px; padding:.35rem .5rem
}
.weave-list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.6rem; margin-top:.7rem
}
.w-col{border:1px solid rgba(200,208,224,.14); border-radius:10px; background:rgba(11,16,38,.45); padding:.5rem .55rem}
.w-col.current{border-color:rgba(232,197,104,.45)}
.w-col-head{font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--silver); margin-bottom:.15rem}
.w-col-head b{display:block; font-weight:normal; color:var(--gold); font-size:.68rem; letter-spacing:.06em}
.w-col-head span{display:block; font-size:.56rem; color:var(--muted); font-style:italic; margin-top:.1rem}
.w-row{
  display:block; padding:.32rem .4rem; margin-top:.3rem; border-radius:7px; cursor:pointer; transition:.15s
}
.w-row:hover{background:rgba(232,197,104,.07)}
.w-row.now-row{border-left:2px solid var(--gold); background:rgba(232,197,104,.05)}
.w-top{display:flex; align-items:flex-start; gap:.45rem; font-size:.78rem; line-height:1.35; color:var(--silver)}
.w-dot{width:8px; height:8px; border-radius:50%; flex:none; margin-top:.3rem}
.w-t{flex:1; min-width:0; white-space:normal; overflow:visible; color:inherit}
.w-meta{display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; margin:.18rem 0 0 1.3rem; font-size:.6rem; color:var(--muted)}
.w-pos{white-space:normal}
.w-cross{color:var(--gold-dim); font-style:italic}
.w-src{color:var(--earth); letter-spacing:.04em}
.w-out{
  font-family:inherit; font-size:.72rem; line-height:1; color:var(--earth);
  background:none; border:none; cursor:pointer; padding:.1rem .15rem; border-radius:4px
}
.w-out:hover{color:var(--gold)}
.w-empty{font-size:.62rem; color:var(--muted); font-style:italic; padding:.35rem .1rem}

/* ---------- the workspace: masthead band / controls over the wall / focus rail ----------
   The full composition: the masthead spans the top, the Loom work area (controls
   above the wall) sits left, the Focus rail runs the full height on the right.
   Rows are content-sized so each section fits on screen; the page scrolls between
   controls and slots when the device is short. */
.loom-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  grid-template-rows:auto auto minmax(auto,1fr);
  grid-template-areas:
    "hud hud"
    "wall side"
    "controls side";
  column-gap:clamp(1.1rem,2.6vw,2.6rem);
  row-gap:.7rem;
  align-items:stretch;
  flex:1;
  min-height:0;
}
.hud{
  grid-area:hud;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  grid-template-areas:"logo identity";
  column-gap:clamp(1.1rem,2.6vw,2.6rem);
  align-items:center;
  padding:0 .25rem .6rem;
  border-bottom:1px solid rgba(220,211,178,.13);
}
.hud-logo{
  grid-area:logo;
  display:grid; place-items:center;
}
.hud-logo img{
  height:clamp(6.6rem,19.5vh,9.6rem);
  width:auto;
  border-radius:8px;
}
.hud-id{
  grid-area:identity;
  display:flex; flex-direction:column; justify-content:center;
  text-align:center;
}
.hud .kicker{font-size:.62rem; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); margin-bottom:.3rem}
.hud h1{font-size:clamp(1.45rem,3vw,2.25rem); font-weight:normal; line-height:1.05; letter-spacing:.055em}
.hud .meta{margin-top:.42rem; font-size:.59rem; letter-spacing:.17em; text-transform:uppercase; color:var(--muted)}
.controls-cell{
  grid-area:controls; text-align:center; min-width:0;
  display:flex; flex-direction:column; justify-content:center;
}
.wall{grid-area:wall}
.side{grid-area:side}
.controlbar{
  display:flex; align-items:center; justify-content:center; gap:.5rem
}
.controlbar .turn{flex:none}
.turn{
  font-family:inherit; color:var(--silver);
  background:rgba(11,16,38,.55); border:1px solid rgba(200,208,224,.25);
  border-radius:50%; cursor:pointer; transition:.2s; line-height:1
}
.turn:hover{color:var(--gold); border-color:var(--gold-dim)}
.turn:active{transform:scale(.94)}
.m-turn{width:2.15rem; height:2.15rem; font-size:.9rem; color:var(--gold-dim)}
.w-turn{width:2.5rem; height:2.5rem; font-size:1.05rem}
.controlbar .rev{display:inline-block; transform:scaleX(-1)}
#map{width:min(36vw,300px); height:auto; cursor:pointer; touch-action:manipulation}
.ctrsub{display:flex; flex-direction:column; align-items:center; margin:.2rem 0 .5rem}
.cl-main{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.cl-sub{font-size:.64rem; color:var(--muted); margin-top:.16rem; font-style:italic}
.today-btn{
  font-family:inherit; font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); background:none; border:1px solid rgba(200,208,224,.22); border-radius:999px;
  padding:.12rem .55rem; cursor:pointer; transition:.2s
}
.today-btn:hover{color:var(--gold); border-color:var(--gold-dim)}
/* the today pill lives above the Focus panel, left-justified, off the month line */
.side-today{
  display:flex;
  justify-content:flex-start;
  margin-bottom:.45rem;
}

/* ---------- the wall ---------- */
.wall{text-align:center}
.wall-head .quadrant{font-size:clamp(1.05rem,4.4vw,1.3rem); color:var(--gold); letter-spacing:.05em}
.wall-head .wallname{margin-top:.15rem; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--silver)}
.wall-head .span{margin-top:.2rem; font-size:.8rem; color:var(--muted); font-style:italic}

/* the wall grows to fill its cell - the spiral takes the available space */
.wall{
  grid-area:wall;
  min-width:0; min-height:0;
  text-align:center;
  display:grid;
  grid-template-rows:auto auto;
  justify-items:center;
  padding:.6rem 0 0;
}
.spiral-wrap{
  width:min(100%,440px);
  display:grid;
  place-items:center;
  animation:fadein .45s ease;
}
@keyframes fadein{from{opacity:0; transform:scale(.985)} to{opacity:1; transform:scale(1)}}
#spiral{
  width:min(100%,440px);
  height:auto;
  display:block;
  margin:0 auto;
  touch-action:manipulation;
}
/* the scan glow: the slot the scan is passing lights gold - motion without a sun */
#spiral circle.scan{stroke:var(--gold); stroke-width:3}
/* the shuttle glides the spiral line - pointer-events off so taps reach the slots */
.shuttle{pointer-events:none}
.gates{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  margin-top:.15rem; font-size:.68rem; color:var(--muted)
}
.gates .gate{min-width:6.5rem; padding:.28rem .55rem; border:1px solid rgba(200,208,224,.18); border-radius:3px; background:rgba(11,16,38,.45)}
.gates .gate b{display:block; font-weight:normal; color:var(--silver); font-size:.72rem}
.gates .gate span{display:block; font-size:.6rem; letter-spacing:.06em; margin-top:.08rem}
.gates .gate-arrow{color:var(--gold-dim)}

/* ---------- the focus box (grows with its cell - never bounces) ---------- */
.side{
  grid-area:side;
  min-width:0; min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding-top:.6rem;
}
/* the rhombus map lives in its own zone under the Focus - centred in the space below it */
.map-zone{
  flex:1;
  min-height:0;
  display:grid;
  place-items:center;
  padding:.8rem 0 .4rem;
}
.focusbox{
  width:100%;
  text-align:left;
  border:1px solid rgba(232,197,104,.35); border-radius:14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.008)),
    rgba(11,16,38,.78);
  padding:clamp(.85rem,1.5vw,1.15rem);
  min-height:clamp(14rem,36vh,22rem);
}
.fb-head{font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:.55rem}
.fb-head::after{content:"+"; float:right; color:var(--gold-dim); font-size:.85rem; line-height:1}
.fb-now{font-size:.95rem; color:var(--text); cursor:pointer; display:flex; align-items:center; gap:.5rem; min-height:1.5em}
.fb-play{color:var(--earth)}
.fb-no{color:var(--muted); font-style:italic; font-size:.85rem}
.fb-title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fb-meta{font-size:.68rem; color:var(--muted); margin:.2rem 0 .5rem; display:flex; justify-content:space-between; align-items:center; gap:.6rem; min-height:1.1em}
.fb-link{color:var(--earth); text-decoration:none; white-space:nowrap}
.fb-list{border-top:1px solid rgba(200,208,224,.12); padding-top:.45rem; height:auto; min-height:7rem; max-height:14rem; overflow:auto}
.fb-row{display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--silver); padding:.25rem 0; cursor:pointer}
.fb-row:hover{color:var(--gold)}
.fb-dot{width:8px; height:8px; border-radius:50%; flex:none}
.fb-src{margin-left:auto; font-size:.62rem; color:var(--muted); white-space:nowrap}
.fb-date{font-size:.62rem; color:var(--muted); white-space:nowrap}

/* ---------- info + footer ---------- */
.info{
  margin-top:.65rem; text-align:center; font-size:.78rem; color:var(--muted);
  min-height:1.2em; font-style:italic
}
.foot{
  margin-top:auto; padding-top:1rem; text-align:center;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)
}

/* ---------- portrait phones: the same Loom, one column ---------- */
@media (orientation:portrait) and (max-width:700px){
  body{padding:.75rem}
  .loom-main{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    grid-template-areas:
      "hud"
      "wall"
      "controls"
      "side";
    gap:.8rem;
  }
  .hud{grid-template-columns:1fr; grid-template-areas:"logo" "identity"}
  .hud-logo img{height:clamp(4.5rem,13vw,7rem)}
  #map{width:min(55vw,240px)}
  .spiral-wrap,
  #spiral{width:min(100%,330px)}
  .side{justify-content:flex-start}
  .focusbox{min-height:12rem}
  .fb-list{min-height:6rem; max-height:10rem}
}

/* ---------- landscape phones: the primary mobile composition ---------- */
@media (orientation:landscape) and (max-height:600px){
  body{
    padding:
      max(.45rem,env(safe-area-inset-top))
      max(.7rem,env(safe-area-inset-right))
      max(.45rem,env(safe-area-inset-bottom))
      max(.7rem,env(safe-area-inset-left));
  }
  .hud .kicker{font-size:.56rem; letter-spacing:.22em; margin-bottom:.3rem}
  .hud h1{font-size:clamp(1.1rem,4.2vh,1.45rem)}
  .hud .meta{font-size:.55rem; letter-spacing:.12em; margin-top:.25rem}
  .hud-logo img{height:clamp(3.6rem,12vh,5.6rem)}
  .loom-main{grid-template-columns:minmax(0,1fr) minmax(0,2fr); column-gap:1rem; row-gap:.4rem}
  #map{width:min(26vw,190px)}
  .m-turn{width:1.8rem; height:1.8rem}
  .w-turn{width:2.1rem; height:2.1rem}
  .ctrsub{margin:.1rem 0 .3rem}
  .cl-main{font-size:.64rem}
  .cl-sub{font-size:.56rem}
  .wall-head .quadrant{font-size:.9rem}
  .wall-head .wallname{font-size:.6rem; letter-spacing:.22em}
  .wall-head .span{font-size:.68rem}
  .spiral-wrap,
  #spiral{width:min(100%,310px)}
  .gates{gap:.35rem; font-size:.6rem}
  .gates .gate{min-width:5.3rem; padding:.22rem .45rem}
  .gates .gate b{font-size:.64rem}
  .gates .gate span{font-size:.54rem}
  .side{justify-content:flex-start}
  .focusbox{min-height:0; padding:.65rem .75rem .6rem}
  .fb-head{font-size:.54rem; margin-bottom:.35rem}
  .fb-now{font-size:.8rem}
  .fb-meta{font-size:.58rem; margin:.12rem 0 .3rem}
  .fb-list{min-height:4.2rem; max-height:7rem; padding-top:.3rem}
  .fb-row{font-size:.66rem; padding:.16rem 0}
  .fb-src{font-size:.54rem}
  .info{margin-top:.4rem; font-size:.6rem}
  .foot{padding-top:.45rem; font-size:.5rem; letter-spacing:.15em}
}

/* ---------- very short landscape phones: protect the working area ---------- */
@media (orientation:landscape) and (max-height:420px){
  body{padding:.35rem .6rem}
  .loom-main{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  #map{width:min(24vw,150px)}
  .spiral-wrap,
  #spiral{width:min(100%,260px)}
  .focusbox{padding:.5rem .6rem}
  .fb-list{min-height:3.5rem; max-height:5rem}
  .foot{display:none}
}

/* ---------- larger screens: give the Loom room ---------- */
@media (min-width:900px){
  body{padding:1.2rem 1.5rem 1rem}
  #map{width:min(30vw,340px)}
  .spiral-wrap,
  #spiral{width:min(100%,440px)}
  .focusbox{padding:1.1rem 1.2rem .9rem}
}

/* ---------- accessibility / motion ---------- */
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition:none !important;
  }
}