/* =========================================================
   LOST IN RADIOWAVES — shared styles
   Palette: an old valve radio. Bakelite case, paper dial face,
   one amber tuning lamp. Red dot = sold, like a gallery wall.
   ========================================================= */
:root{
  --case:   #17130f;   /* page ground, bakelite brown-black */
  --case-2: #1f1a15;   /* raised panels */
  --rule:   #3a3129;   /* hairlines */
  --paper:  #ece4d4;   /* dial-face ivory, main text */
  --dim:    #a3968a;   /* secondary text */
  --lamp:   #f2a541;   /* tuning lamp — used sparingly */
  --sold:   #c9392c;   /* the red dot */

  --c-painting:    #e8b56c;
  --c-photography: #a9c2bb;
  --c-digital:     #d0765a;

  --ui:   'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --read: 'Spectral', Georgia, 'Times New Roman', serif;

  --pad: clamp(18px, 4vw, 48px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background: var(--case);
  color: var(--paper);
  font-family: var(--read);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--lamp); color: var(--case); }
a{ color: inherit; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img{ display:block; max-width:100%; -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; }
:focus-visible{ outline: 2px solid var(--lamp); outline-offset: 3px; }

/* film grain over everything — very faint, gives the dark some tooth */
body::before{
  content:''; position:fixed; inset:0; z-index:200; pointer-events:none;
  opacity:.07; 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='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.watermarked{ position:relative; }
.watermarked::after{
  content:'Lost In Radiowaves';
  position:absolute; right:12px; bottom:10px; z-index:5;
  font-family: var(--ui); font-size:10px; letter-spacing:.06em;
  color: rgba(236,228,212,.42); text-shadow:0 1px 2px rgba(0,0,0,.7);
  pointer-events:none;
}

/* ---------------- header ---------------- */
.bar{
  position: fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding: 18px var(--pad);
  font-family: var(--ui);
  font-size: 14px;
  transition: background .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
.bar.solid{ background: rgba(23,19,15,.9); backdrop-filter: blur(8px); border-color: var(--rule); }
.bar .mark{
  text-decoration:none; font-weight:600; font-stretch: 75%;
  font-size: 17px; letter-spacing:.01em; text-transform: lowercase;
}
.bar nav{ display:flex; gap: clamp(14px, 2.4vw, 30px); }
.bar nav a{ text-decoration:none; color: var(--dim); position:relative; transition: color .2s; }
.bar nav a:hover{ color: var(--paper); }
.bar nav a[aria-current="page"]{ color: var(--paper); }
.bar nav a[aria-current="page"]::before{
  content:''; position:absolute; left:-11px; top:50%; width:5px; height:5px; margin-top:-3px;
  border-radius:50%; background: var(--lamp); box-shadow:0 0 8px var(--lamp);
}
@media (max-width:600px){
  .bar{ flex-direction:column; align-items:flex-start; gap:6px; }
  .bar nav{ gap:18px; }
}

/* ======================================================
   HOME — the tuner
   ====================================================== */
.tuner{
  position:relative; height:100svh; min-height:560px;
  display:grid; grid-template-rows: 1fr auto;
  overflow:hidden;
}
.screen{ position:relative; overflow:hidden; background:#000; }
.screen img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity .6s ease;
}
.screen img.on{ opacity:1; }
.screen canvas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; mix-blend-mode: screen;
}
.screen .shade{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(23,19,15,.55) 0%, rgba(23,19,15,0) 22%, rgba(23,19,15,0) 55%, rgba(23,19,15,.9) 100%);
}
.screen .title{
  position:absolute; left:var(--pad); right:var(--pad); top: clamp(76px, 14vh, 140px); z-index:3;
  pointer-events:none;
}
.screen h1{
  font-family: var(--ui); font-weight:300; font-stretch:62%;
  font-size: clamp(56px, 13vw, 220px);
  line-height:.82; letter-spacing:-.01em; text-transform:lowercase;
}
.screen .title p{
  margin-top: 18px; max-width: 34ch;
  font-style: italic; font-size: clamp(16px, 1.6vw, 20px); color: rgba(236,228,212,.82);
}
.now{
  position:absolute; left:var(--pad); right:var(--pad); bottom: 22px; z-index:3;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  transition: opacity .3s;
}
.now.lost{ opacity:.25; }
.now .freq{
  font-family: var(--ui); font-stretch:62%; font-weight:500;
  font-size: 15px; color: var(--lamp); letter-spacing:.04em;
  font-variant-numeric: tabular-nums;
}
.now h2{ font-family: var(--read); font-weight:300; font-style:italic; font-size: clamp(24px, 3.4vw, 44px); line-height:1.05; }
.now .where{ font-family: var(--ui); font-size: 13px; color: var(--dim); margin-top:6px; }
.now a.open{
  flex:none; font-family: var(--ui); font-size:14px; text-decoration:none;
  padding: 11px 20px; border:1px solid rgba(236,228,212,.4); border-radius: 2px;
  transition: background .2s, color .2s, border-color .2s;
}
.now a.open:hover{ background: var(--paper); color: var(--case); border-color: var(--paper); }

/* the dial strip */
.dial-wrap{
  background: var(--case-2);
  border-top: 1px solid var(--rule);
  padding: 12px var(--pad) 14px;
  display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap: 18px;
  font-family: var(--ui);
}
.dial-wrap .ctl{
  font-size: 13px; color: var(--dim); display:flex; align-items:center; gap:8px;
  padding: 6px 2px; transition: color .2s;
}
.dial-wrap .ctl:hover{ color: var(--paper); }
.dial-wrap .ctl .led{ width:7px; height:7px; border-radius:50%; background: var(--rule); transition: background .2s, box-shadow .2s; }
.dial-wrap .ctl[aria-pressed="true"]{ color: var(--paper); }
.dial-wrap .ctl[aria-pressed="true"] .led{ background: var(--lamp); box-shadow: 0 0 8px var(--lamp); }
.dial-wrap .ctls{ display:flex; gap:16px; }

@media (max-width:720px){
  .dial-wrap{ grid-template-columns: 1fr; gap:8px; padding-top:8px; }
  .dial-wrap .ctls{ justify-content:space-between; }
  .now{ flex-direction:column; align-items:flex-start; gap:14px; }
}

/* ------------- home: statement + rooms ------------- */
.statement{
  padding: clamp(80px, 14vw, 180px) var(--pad);
  display:grid; grid-template-columns: 1fr minmax(0, 30ch) 1.2fr; gap: 40px;
}
.statement p{
  grid-column: 2 / 4;
  font-weight:300; font-size: clamp(24px, 3.2vw, 40px); line-height:1.28;
  max-width: 26ch;
}
@media (max-width:800px){ .statement{ display:block; } }

.rooms{ border-top:1px solid var(--rule); }
.room{
  display:grid; grid-template-columns: minmax(0,1fr) auto; align-items:center; gap: 30px;
  padding: clamp(26px, 4vw, 46px) var(--pad);
  border-bottom: 1px solid var(--rule);
  text-decoration:none; position:relative; overflow:hidden;
}
.room .name{
  font-family: var(--ui); font-weight:300; font-stretch:62%;
  font-size: clamp(54px, 10vw, 150px); line-height:.9; text-transform:lowercase;
  transition: font-stretch .5s ease, color .3s;
}
.room:hover .name, .room:focus-visible .name{ font-stretch: 100%; }
.room .meta{ font-family: var(--ui); font-size: 13px; color: var(--dim); margin-top: 12px; max-width: 60ch; }
.room .meta b{ font-weight:500; color: var(--paper); }
.room .strip{ display:flex; gap:8px; }
.room .strip img{
  width: clamp(60px, 8vw, 118px); aspect-ratio: 3/4; object-fit:cover;
  filter: grayscale(.85) brightness(.7); transition: filter .5s, transform .5s;
}
.room:hover .strip img{ filter:none; }
.room:hover .strip img:nth-child(2){ transform: translateY(-8px); }
@media (max-width:720px){
  .room{ grid-template-columns: 1fr; gap: 16px; }
  .room .strip img{ filter:none; width: calc((100% - 16px)/3); }
  .room .strip{ width:100%; }
}

/* ======================================================
   DISCIPLINE PAGES
   ====================================================== */
.room-head{
  padding: clamp(120px, 18vh, 190px) var(--pad) 40px;
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; align-items:start;
}
.room-head > div:first-child{ grid-column: 1 / -1; }
.room-head .intro{ grid-column: 2; }
.room-head h1{
  font-family: var(--ui); font-weight:300; font-stretch:62%;
  font-size: clamp(72px, 15vw, 230px); line-height:.8; text-transform:lowercase;
}
.room-head .count{ font-family: var(--ui); font-size: 14px; color: var(--dim); margin-top: 18px; }
.room-head .intro p{ color: var(--dim); max-width: 58ch; }
.room-head .intro p + p{ margin-top: 1em; }
.room-head .intro p:first-child{ color: var(--paper); }
@media (max-width:860px){ .room-head{ grid-template-columns:1fr; } .room-head .intro{ grid-column:1; } }

/* series filter — styled as radio preset buttons */
.presets{
  position: sticky; top: var(--bar-h, 60px); z-index: 40;
  padding: 12px var(--pad);
  background: rgba(23,19,15,.92); backdrop-filter: blur(8px);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  display:flex; gap: 6px 22px; flex-wrap: wrap;
  font-family: var(--ui); font-size: 14px;
}
.presets button{ color: var(--dim); padding: 4px 0; display:flex; align-items:center; gap:7px; transition: color .2s; }
.presets button:hover{ color: var(--paper); }
.presets button sup{ font-size: 10px; font-variant-numeric: tabular-nums; opacity:.7; }
.presets button::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--rule); transition: background .2s, box-shadow .2s; }
.presets button[aria-pressed="true"]{ color: var(--paper); }
.presets button[aria-pressed="true"]::before{ background: var(--lamp); box-shadow:0 0 8px var(--lamp); }
@media (max-width:600px){
  .presets{ flex-wrap: nowrap; overflow-x:auto; scrollbar-width:none; }
  .presets button{ white-space:nowrap; }
}

/* the hang — rows with a rhythm: features run large, the rest in pairs and threes */
.hang{
  display:flex; flex-direction:column; gap: clamp(48px, 6vw, 96px);
  padding: clamp(36px, 5vw, 70px) var(--pad) clamp(80px, 10vw, 140px);
}
.hang .row{ display:grid; gap: clamp(20px, 3vw, 44px); align-items:start; }
.hang .row.n1{ grid-template-columns: minmax(0, 1fr); justify-items:center; }
.hang .row.n2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.hang .row.n3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
/* a big row: the lead piece takes the room it needs, its mate fills the rest */
.hang .row.big{ display:flex; align-items:flex-start; gap: clamp(28px, 4vw, 64px); }
.hang .row.big .lead{ flex: 0 0 auto; width: min(62%, calc(84vh * var(--ar))); }
.hang .row.big .mate{ flex: 0 1 auto; width: min(34%, calc(64vh * var(--ar))); }
.hang .row.big.flip{ flex-direction: row-reverse; }
.hang .row.big .lead:only-child{ margin: 0 auto; }
.hang .empty{ font-family: var(--ui); color: var(--dim); padding: 40px 0; }

.work{ --ar: .8; display:block; text-align:left; width: min(100%, calc(84vh * var(--ar))); }
.work .frame{ position:relative; overflow:hidden; width:100%; }
.work img{ display:block; width:100%; height:auto; opacity:0; filter: blur(14px); transform: scale(1.02);
  transition: opacity .7s ease, filter .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.work img.in{ opacity:1; filter:none; transform:none; }
.work:hover img.in{ transform: scale(1.02); }
/* tall pieces don't take over the screen: each card is as wide as 84% of the screen height allows */
.work .cap{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding-top: 12px; }
.work .t{ font-style: italic; font-size: 17px; line-height:1.3; }
.work .s{ font-family: var(--ui); font-size: 12px; color: var(--dim); white-space:nowrap; display:flex; align-items:center; gap:7px; }
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background: var(--sold); flex:none; }
.work.fade{ animation: tunein .7s both; }
@keyframes tunein{ from{ opacity:0; filter: blur(6px) contrast(1.6); } to{ opacity:1; filter:none; } }
@media (max-width:620px){
  .hang{ gap: 44px; }
  .hang .row, .hang .row.n1{ grid-template-columns: 1fr; }
}

/* ======================================================
   VIEWING ROOM (lightbox)
   ====================================================== */
.viewer{
  position:fixed; inset:0; z-index:100;
  background: #0f0c0a;
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  opacity:0; visibility:hidden; transition: opacity .35s, visibility 0s .35s;
}
.viewer.open{ opacity:1; visibility:visible; transition: opacity .35s; }
.viewer:focus{ outline:none; }
.viewer .stage{ position:relative; display:flex; align-items:center; justify-content:center; padding: 56px 24px; min-height:0; }
.viewer .stage .pic{ position:relative; max-height:100%; display:flex; }
.viewer .stage .pic img{ max-height: calc(100svh - 112px); max-width:100%; width:auto; height:auto; object-fit:contain; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.viewer canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; mix-blend-mode:screen; opacity:0; }
.viewer .side{
  border-left:1px solid var(--rule); overflow-y:auto;
  padding: 70px 36px 36px; display:flex; flex-direction:column;
}
.viewer .side .where{ font-family: var(--ui); font-size:13px; color: var(--dim); display:flex; gap:8px; align-items:center; }
.viewer .side h2{ font-weight:300; font-style:italic; font-size: clamp(28px, 2.6vw, 38px); line-height:1.1; margin: 10px 0 8px; }
.viewer .side .medium{ font-family: var(--ui); font-size:13px; color: var(--dim); }
.viewer .side .text{ margin-top: 28px; font-size: 17px; line-height:1.72; color: rgba(236,228,212,.9); }
.viewer .side .text:empty{ display:none; }
.viewer .side .ask{
  margin-top: 36px; align-self:flex-start;
  font-family: var(--ui); font-size:14px; text-decoration:none;
  padding: 11px 20px; border:1px solid rgba(236,228,212,.4); border-radius:2px;
  transition: background .2s, color .2s;
}
.viewer .side .ask:hover{ background: var(--paper); color: var(--case); }
.viewer .side .nav{
  margin-top:auto; padding-top: 40px; display:flex; justify-content:space-between; align-items:center;
  font-family: var(--ui); font-size:13px; color: var(--dim); font-variant-numeric: tabular-nums;
}
.viewer .side .nav button{ padding: 8px 0; color: var(--dim); transition: color .2s; }
.viewer .side .nav button:hover{ color: var(--paper); }
.viewer .close{
  position:absolute; top:16px; right:20px; z-index:3;
  font-family: var(--ui); font-size:14px; color: var(--dim); padding: 6px 4px;
}
.viewer .close:hover{ color: var(--paper); }
.viewer .edge{ position:absolute; top:0; bottom:0; width:22%; z-index:1; }
.viewer .edge.prev{ left:0; cursor: w-resize; }
.viewer .edge.next{ right:0; cursor: e-resize; }
@media (max-width:860px){
  .viewer{ grid-template-columns:1fr; grid-template-rows: auto 1fr; overflow-y:auto; }
  .viewer .stage{ padding: 56px 12px 12px; }
  .viewer .stage img{ max-height: 62svh; }
  .viewer .side{ border-left:0; border-top:1px solid var(--rule); padding: 24px 20px 30px; overflow:visible; }
  .viewer .edge{ display:none; }
}
body.locked{ overflow:hidden; }

/* viewing room v2 */
.viewer .stage{ flex-direction:column; padding: 56px 32px 104px; }
.viewer .stage .pic img{ max-height: calc(100svh - 190px); cursor: zoom-in; }
.viewer.zooming .stage .pic img{ cursor: none; }
.viewer .lens{
  position:absolute; z-index:4; width: 280px; height:280px; border-radius:50%; pointer-events:none;
  border: 2px solid var(--lamp); box-shadow: 0 12px 40px rgba(0,0,0,.6);
  background-repeat:no-repeat; opacity:0; transform: scale(.85); transition: opacity .15s, transform .15s;
}
.viewer .lens.on{ opacity:1; transform:none; }
.viewer .views{ position:absolute; left:50%; bottom: 26px; transform:translateX(-50%); display:flex; gap:12px; z-index:3; }
.viewer .views:empty{ display:none; }
.viewer .views button{ display:flex; flex-direction:column; align-items:center; gap:6px; font-family: var(--ui); font-size:11px; color: var(--dim); }
.viewer .views img, .viewer .views .wallico{
  width:60px; height:44px; object-fit:cover; display:block; border:1px solid var(--rule); opacity:.6; transition: opacity .2s, border-color .2s;
}
.viewer .views .wallico{ background: linear-gradient(180deg, #d9d2c6 70%, #8c7d6c 70%); }
.viewer .views [aria-selected="true"]{ color: var(--paper); }
.viewer .views [aria-selected="true"] img, .viewer .views [aria-selected="true"] .wallico{ opacity:1; border-color: var(--lamp); }
.viewer .zhint{ position:absolute; right: 30px; bottom: 34px; z-index:3; font-family: var(--ui); font-size:12px; color: var(--dim); }
.viewer .zhint:hover{ color: var(--paper); }
.viewer .zhint::before{ content:'+'; display:inline-block; width:20px; height:20px; margin-right:8px; border:1px solid var(--rule); border-radius:50%; text-align:center; line-height:18px; color: var(--paper); }
.viewer.zooming .zhint::before{ content:'\2013'; }
/* on a wall */
.viewer .wall{ position:absolute; inset:0; overflow:hidden; color: rgba(60,50,42,.55);
  background: linear-gradient(180deg, #ddd6ca 0%, #cfc7ba 100%); }
.viewer .wall .art{ position:absolute; left:50%; transform:translateX(-50%); background-size:cover; background-position:center; box-shadow: 0 14px 26px rgba(0,0,0,.32), 0 2px 4px rgba(0,0,0,.2); }
.viewer .wall .dim{ position:absolute; left:50%; transform:translateX(-50%); font-family: var(--ui); font-size:12px; color:#5d5246; }
.viewer .wall .bench{ position:absolute; left: 50%; transform: translateX(-62%); border-top: solid #3b3029; border-top-width: var(--seat, 6px); }
.viewer .wall .bench::before, .viewer .wall .bench::after{ content:''; position:absolute; top:0; bottom:0; width: 6%; background:#2e251f; }
.viewer .wall .bench::before{ left:8%; } .viewer .wall .bench::after{ right:8%; }
.viewer .wall .who{ position:absolute; left: 74%; width:auto; }
.viewer .wall .floor{ position:absolute; left:0; right:0; bottom:0; background: linear-gradient(180deg, #8c7d6c, #6f6253); }
/* the side column sells */
.viewer .side .offer{ margin-top: 20px; display:flex; gap:10px; align-items:center; font-family: var(--ui); font-size:14px; line-height:1.45; }
.viewer .side .lamp{ flex:none; width:8px; height:8px; border-radius:50%; background: var(--rule); }
.viewer .side .lamp.available{ background:#7fbf8a; box-shadow:0 0 8px #7fbf8a; }
.viewer .side .lamp.sold{ background: var(--sold); }
.viewer .side .lamp.print{ background: var(--lamp); box-shadow:0 0 8px rgba(242,165,65,.6); }
.viewer .side .cta{ margin-top: 30px; display:flex; flex-direction:column; gap:10px; }
.viewer .side .ask, .viewer .side .wallbtn{
  margin:0; align-self:stretch; text-align:center; font-family: var(--ui); font-size:14px;
  padding: 14px 18px; border:1px solid rgba(236,228,212,.4); border-radius:2px; transition: background .2s, color .2s, border-color .2s;
}
.viewer .side .ask{ background: var(--paper); color: var(--case); border-color: var(--paper); font-weight:500; }
.viewer .side .ask:hover{ background: var(--lamp); border-color: var(--lamp); color: var(--case); }
.viewer .side .wallbtn:hover{ border-color: var(--paper); }
.viewer .side .nav .t{ display:flex; align-items:center; gap:10px; }
.viewer .side .nav .t img{ width:40px; height:40px; object-fit:cover; opacity:.7; transition: opacity .2s; }
.viewer .side .nav .t:hover img{ opacity:1; }
/* the ask form takes over the side column */
.viewer.asking .side > :not(.askform){ display:none; }
.viewer .askform{ display:flex; flex-direction:column; gap:14px; font-family: var(--ui); }
.viewer .askform[hidden]{ display:none; }
.viewer .askform .back{ align-self:flex-start; font-size:13px; color: var(--dim); margin-bottom: 10px; }
.viewer .askform .back::before{ content:'\2039  '; }
.viewer .askform h3{ font-family: var(--read); font-weight:300; font-style:italic; font-size: 30px; line-height:1.1; }
.viewer .askform .for{ font-size:13px; color: var(--dim); margin-top:-6px; }
.viewer .askform label{ display:flex; flex-direction:column; gap:6px; font-size:12px; color: var(--dim); }
.viewer .askform input, .viewer .askform textarea, .viewer .askform select{
  font: 15px var(--read); color: var(--paper); background: #17130f; border:1px solid var(--rule); border-radius:2px; padding: 11px 12px;
}
.viewer .askform textarea{ resize: vertical; line-height:1.5; }
.viewer .askform input:focus, .viewer .askform textarea:focus, .viewer .askform select:focus{ outline:none; border-color: var(--lamp); }
.viewer .askform label[hidden], .viewer .pic[hidden], .viewer .wall[hidden], .viewer .ask[hidden], .viewer .wallbtn[hidden], .viewer .zhint[hidden]{ display:none; }
.viewer .askform .hp{ position:absolute; left:-9999px; }
.viewer .askform .send{ margin-top:6px; padding:14px; background: var(--paper); color: var(--case); font-size:14px; font-weight:500; border-radius:2px; }
.viewer .askform .send:disabled{ opacity:.5; }
.viewer .askform .status{ font-size:13px; color: var(--paper); min-height: 1.4em; }
.viewer .askform .status a{ color: var(--lamp); }
/* phones: pan around the full image */
.viewer .pan{ position:fixed; inset:0; z-index:10; background:#0b0908; overflow:auto; -webkit-overflow-scrolling:touch; }
.viewer .pan[hidden]{ display:none; }
.viewer .pan img{ display:block; max-width:none; height:auto; }
.viewer .panclose{ position:fixed; top:14px; right:14px; z-index:11; font-family: var(--ui); font-size:14px; padding:10px 14px; background: rgba(23,19,15,.85); color: var(--paper); border-radius:2px; }
@media (max-width:860px){
  .viewer .stage{ padding: 56px 12px 92px; min-height: 64svh; }
  .viewer .stage .pic img{ max-height: 56svh; }
  .viewer .views{ bottom: 18px; }
  .viewer .views img, .viewer .views .wallico{ width:52px; height:38px; }
  .viewer .zhint{ right: auto; left: 14px; top: 16px; bottom:auto; }
  .viewer .wall{ position:relative; inset:auto; width:100%; height: 56svh; }
  .viewer .lens{ display:none; }
}

/* ---------------- page to page: a quick retune ---------------- */
@view-transition{ navigation: auto; }
::view-transition-old(root){ animation: tune-out .28s ease-in both; }
::view-transition-new(root){ animation: tune-in .42s ease-out both; }
@keyframes tune-out{ to{ opacity:0; filter: blur(4px) contrast(1.8) brightness(1.3); } }
@keyframes tune-in{ from{ opacity:0; filter: blur(6px) contrast(1.6); } }
::view-transition-group(piece){ animation-duration: .55s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation: none !important; }
}

/* the dial: a tuning cursor */
.v2 .panel{ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 4v20' stroke='%23f2a541' stroke-width='2'/%3E%3Cpath d='M8 14l-5 0M3 14l3-3M3 14l3 3M20 14l5 0M25 14l-3-3M25 14l-3 3' stroke='%23ece4d4' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") 14 14, ew-resize; }
.v2 .panel:active{ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 4v20' stroke='%23ff6b3d' stroke-width='2.5'/%3E%3C/svg%3E") 14 14, grabbing; }

/* skip link, for keyboards and screen readers */
.skip{ position:absolute; left:-9999px; top:8px; z-index:300; background: var(--paper); color: var(--case); padding:10px 14px; font-family: var(--ui); font-size:14px; }
.skip:focus{ left:8px; }

/* ---------------- footer ---------------- */
footer{
  padding: clamp(70px, 10vw, 130px) var(--pad) 32px;
  border-top: 1px solid var(--rule);
}
footer .row{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
footer h2{ font-weight:300; font-style:italic; font-size: clamp(30px, 5vw, 64px); line-height:1.05; max-width: 14ch; }
footer .contact{ font-family: var(--ui); font-size: 15px; text-align:right; }
footer .contact a{ display:block; text-decoration:none; margin-top:8px; border-bottom:1px solid transparent; width:fit-content; margin-left:auto; }
footer .contact a:hover{ border-color: var(--lamp); }
footer .meta{ margin-top: 70px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family: var(--ui); font-size: 12px; color: var(--dim); }
@media (max-width:640px){ footer .contact{ text-align:left; } footer .contact a{ margin-left:0; } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- log ---------- */
.log{ padding: 10px var(--pad) clamp(90px, 12vw, 160px); }
.log .entry{ max-width: 780px; }
.log .entry{ border-top: 1px solid rgba(236,228,212,.12); padding: 34px 0 38px; scroll-margin-top: 90px; }
.log .stamp{ display:flex; gap:18px; align-items:baseline; text-decoration:none; margin-bottom: 14px;
  font-family: var(--ui); font-stretch:62%; font-weight:500; font-size: 17px; letter-spacing:.05em; }
.log .stamp .id{ color: var(--lamp); }
.log .stamp .date{ color: var(--dim); font-weight:400; }
.log .entry p{ font-family: var(--read); font-weight:300; font-size: clamp(20px, 2.2vw, 26px); line-height:1.45; max-width: 34ch; }
.log .entry:target .stamp .id{ text-decoration: underline; text-underline-offset: 6px; }
.log .piece{ display:inline-flex; gap:12px; align-items:center; margin-top: 22px; text-decoration:none;
  font-family: var(--ui); font-size: 13px; color: var(--dim); }
.log .piece img{ width: 56px; height: 70px; object-fit: cover; }
.log .piece:hover{ color: var(--paper); }
.statement .latest-log{ grid-column: 2 / 4; display:flex; flex-wrap:wrap; gap: 6px 16px; align-items:baseline;
  margin-top: 46px; text-decoration:none; font-family: var(--ui); font-size: 14px; color: var(--dim); max-width: 60ch; }
.statement .latest-log .id{ color: var(--lamp); font-stretch:62%; font-weight:500; font-size: 15px; letter-spacing:.05em; }
.statement .latest-log .date{ font-stretch:62%; font-size: 15px; letter-spacing:.05em; }
.statement .latest-log .line{ flex-basis: 100%; font-family: var(--read); font-style: italic; font-size: 17px; color: var(--paper); opacity:.85; }
.statement .latest-log:hover .line{ opacity:1; }

/* ---------- home screen on desktop ----------
   Pick the look with data-mode on <section class="tuner"> in index.html:
   wall   = piece hung whole, never enlarged, on a blur of itself
   split  = text on the left, piece filling the right half
   signal = full screen, with a scanline/grain "transmission" texture
   Phones always get the full-screen crop. */
.screen .atmos{ display:none; }
@media (min-width: 900px) and (orientation: landscape){
  .tuner[data-mode="wall"] .screen{ background:#0d0b09; }
  .tuner[data-mode="wall"] .screen .atmos{ display:block; position:absolute; inset:0; overflow:hidden; }
  .tuner[data-mode="wall"] .screen .atmos div{
    position:absolute; inset:-80px; background-size:cover; background-position:center;
    filter: blur(60px) brightness(.34) saturate(.8);
    opacity:0; transition: opacity .9s ease;
  }
  .tuner[data-mode="wall"] .screen .atmos div.on{ opacity:1; }
  .tuner[data-mode="wall"] .screen img{
    inset:auto; right: var(--pad); top: clamp(84px, 12vh, 130px);
    width: calc(58% - var(--pad)); height: calc(100% - clamp(84px, 12vh, 130px) - 128px);
    object-fit: scale-down; filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
  }
  .tuner[data-mode="wall"] .screen .shade{
    background: linear-gradient(90deg, rgba(13,11,9,.55) 0%, rgba(13,11,9,0) 45%),
                linear-gradient(180deg, rgba(13,11,9,0) 60%, rgba(13,11,9,.75) 100%);
  }

  .tuner[data-mode="split"] .screen{ background: var(--bg, #17130f); }
  .tuner[data-mode="split"] .screen img{ left: 50%; width: 50%; }
  .tuner[data-mode="split"] .screen canvas{ left: 50%; width: 50%; }
  .tuner[data-mode="split"] .screen .shade{
    left: 50%; background: linear-gradient(180deg, rgba(23,19,15,.6) 0%, rgba(23,19,15,0) 16%, rgba(23,19,15,0) 70%, rgba(23,19,15,.7) 100%);
  }

  .tuner[data-mode="signal"] .screen img{ filter: contrast(1.06) saturate(.92); }
  .tuner[data-mode="signal"] .screen .shade::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1px, rgba(0,0,0,0) 1px 3px);
    mix-blend-mode: multiply;
  }

  .tuner .screen h1{ font-size: clamp(64px, 8.4vw, 168px); }
  .tuner .screen .title{ right: auto; max-width: 42%; }
}

/* =========================================================
   THE DIAL
   A moving band behind glass: the pointer stays in the middle,
   the band slides under it. A knob on the right, on wide screens.
   ========================================================= */
.dial-wrap.v2{
  grid-template-columns: auto 1fr auto; gap: 22px;
  padding: 14px var(--pad) 16px; background: #1b1612;
}
.v2 .ctls{ flex-direction:column; gap:6px; }
.v2 .panel{
  position:relative; height: 104px; border-radius: 7px; overflow:hidden;
  background: linear-gradient(180deg, #2a231c, #19140f);
  border: 1px solid var(--rule);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.55);
  cursor: grab; touch-action: pan-y; user-select:none;
}
.v2 .panel:active{ cursor: grabbing; }
.v2 .panel:focus-visible{ outline: 1px solid var(--lamp); outline-offset: 4px; }
.v2 .glow{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 240px 120% at 50% 62%, rgba(242,165,65,.22), rgba(242,165,65,.06) 55%, transparent 75%);
  transition: opacity .4s;
}
.v2 .panel.lost .glow{ opacity:.35; }
.v2 .band{
  position:absolute; inset:0; pointer-events:none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.v2 .band svg{ position:absolute; top:0; left:0; height:100%; overflow:visible; will-change: transform; }
.v2 .band .tk{ stroke: rgba(236,228,212,.16); }
.v2 .band .tk.mj{ stroke: rgba(236,228,212,.42); }
.v2 .band .mhz.w{ fill: #c8bba9; font-size: 11px; }
.v2 .band .mhz{ fill: #6f6459; font: 10px var(--ui); font-stretch:62%; letter-spacing:.03em; }
.v2 .band .nm{ fill: #8d8073; font: 11px var(--ui); font-stretch:62%; transition: fill .3s, opacity .3s; }
.v2 .band .nm.on{ opacity:0; }
.v2 .band .bar{ transition: opacity .3s; opacity:.8; }
.v2 .band .bar.on{ opacity:1; }
.v2 .readout{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  font: 500 20px var(--ui); font-stretch:62%; color: var(--lamp);
  font-variant-numeric: tabular-nums; letter-spacing:.03em; pointer-events:none;
  text-shadow: 0 0 12px rgba(242,165,65,.45);
}
.v2 .pointer{
  position:absolute; top:34px; bottom:6px; left:50%; width:2px; margin-left:-1px; pointer-events:none;
  background: #ff6b3d; box-shadow: 0 0 10px 2px rgba(255,107,61,.35);
}
.v2 .pointer::before{
  content:""; position:absolute; top:-6px; left:-5px;
  border:6px solid transparent; border-top-color:#ff6b3d; border-bottom:0;
}
.v2 .sheen{
  position:absolute; inset:0 0 50% 0; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}
/* the knob */
.v2 .knob{
  width: 92px; height: 92px; border-radius:50%; cursor: grab; touch-action:none;
  background: repeating-conic-gradient(#2c241d 0 5deg, #0f0c09 5deg 10deg);
  padding: 4px; box-shadow: 0 6px 14px rgba(0,0,0,.5);
}
.v2 .knob:active{ cursor: grabbing; }
.v2 .knob .cap{
  position:relative; width:100%; height:100%; border-radius:50%;
  background: radial-gradient(circle at 38% 32%, #4d4136, #1a1410 70%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.08), inset 0 -3px 6px rgba(0,0,0,.6);
  will-change: transform;
}
.v2 .knob .cap i{
  position:absolute; top:9px; left:50%; width:3px; height:13px; margin-left:-1.5px; border-radius:2px;
  background: var(--lamp); box-shadow: 0 0 6px rgba(242,165,65,.6);
}
@media (max-width:720px){
  .dial-wrap.v2{ grid-template-columns: 1fr; gap:8px; padding: 8px 14px 14px; }
  .v2 .ctls{ flex-direction:row; justify-content:space-between; }
  .v2 .knob{ display:none; }
  .v2 .panel{ height: 96px; }
}