/* tiles.css — every tile on jelia.nyc hovers, reacts and clicks through (J 2026-10-06).
   Sits OVER site.css + ambient-map.css; deleting the <link> restores the page exactly.
   Route colours are the page's own transit palette, as RGB triples so the glow can fade. */

.c-cyan{--rc:147,147,147} .c-blue{--rc:125,125,125} .c-yellow{--rc:196,196,196} .c-red{--rc:116,116,116}
.stat{--rc:147,147,147}

/* --- the tile itself ------------------------------------------------------- */
[data-tile]{position:relative;isolation:isolate;cursor:pointer;
  --mx:50%;--my:50%;--rx:0deg;--ry:0deg;--lift:0px;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,border-color .22s ease,background-color .22s ease}
/* light that follows the pointer, tinted with the tile's own route colour */
[data-tile]::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(var(--rc),.16),transparent 55%);
  opacity:0;transition:opacity .25s ease}
[data-tile]:hover,[data-tile]:focus-within{--lift:-4px;
  box-shadow:0 14px 34px -12px rgba(var(--rc),.45),0 0 0 1px rgba(var(--rc),.35);
  border-color:rgba(var(--rc),.55)}
[data-tile]:hover::before,[data-tile]:focus-within::before{opacity:1}
[data-tile]:hover h3,[data-tile]:hover .nm,[data-tile]:hover b{color:#ffffff}
/* press: the tile gives a little under the finger */
[data-tile].is-pressed{--lift:-1px;transition-duration:.08s}
[data-tile].is-pressed{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)) scale(.985)}

/* stats were bare numbers on a rule; give them a tile body only so they can host the hover */
.stat[data-tile]{background:transparent;border-radius:0 0 8px 8px;padding:.9rem .9rem 1rem}
.stat .tile-more{display:flex;margin-top:.6rem}
.stat[data-tile]:hover{background:rgba(255,255,255,.03)}

/* --- the "read more" link: stretched over the whole tile, so anywhere clicks ---- */
.tile-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  font-family:"Chakra Petch","Space Grotesk",sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:rgb(var(--rc))}
.tile-more .ar{transition:transform .22s ease}
[data-tile]:hover .tile-more .ar,[data-tile]:focus-within .tile-more .ar{transform:translateX(4px)}
a.tile-more::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
a.tile-more:focus-visible{outline:none}
a.tile-more:focus-visible::after{outline:3px solid var(--cyan);outline-offset:2px}
.app .tile-more{margin-top:auto;padding-top:.2rem}

@media (hover:none){[data-tile]{--rx:0deg!important;--ry:0deg!important}}
@media (prefers-reduced-motion:reduce){
  [data-tile]{transition:box-shadow .2s ease,border-color .2s ease;transform:none!important}
  .tile-more .ar{transition:none}}

/* --- header: Apps launcher -------------------------------------------------- */
.launch{position:relative;margin-left:.4rem}
.launch>button{display:inline-flex;align-items:center;gap:.45rem;font:600 .9rem Inter,sans-serif;color:var(--ink);
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:999px;padding:.45rem .95rem;cursor:pointer}
.launch>button:hover,.launch>button[aria-expanded="true"]{border-color:var(--cyan);color:var(--cyan)}
.launch>button svg{width:15px;height:15px;fill:currentColor}
.launch .panel{position:absolute;right:0;top:calc(100% + .6rem);z-index:40;width:min(340px,86vw);
  background:var(--navy-2);border:1px solid var(--line-2);border-radius:12px;padding:.7rem;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.7);display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
.launch .panel[hidden]{display:none}
.launch .panel a{display:grid;gap:.1rem;padding:.6rem .7rem;border-radius:8px;text-decoration:none;color:var(--ink);
  border-left:3px solid var(--lc,var(--slate));background:rgba(255,255,255,.02)}
.launch .panel a:hover,.launch .panel a:focus-visible{background:rgba(147,147,147,.1)}
.launch .panel a b{font:600 .92rem "Space Grotesk",Inter,sans-serif}
.launch .panel a small{font-size:.76rem;color:var(--muted)}
.launch .panel .ph{grid-column:1/-1;font-family:"Chakra Petch",sans-serif;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);padding:.2rem .4rem}
@media(max-width:900px){.launch{margin-left:auto}}

/* --- footer: everything that is live on the estate -------------------------- */
.estate{margin-top:2rem;display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.estate h4{margin:0 0 .7rem;font-family:"Chakra Petch",sans-serif;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan);font-weight:600}
.estate ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.estate a{color:var(--ink-2);text-decoration:none;display:flex;gap:.5rem;align-items:baseline}
.estate a:hover{color:var(--cyan)}
.estate a small{color:var(--muted);font-size:.78rem}

/* --- deep pages ------------------------------------------------------------- */
.crumbs{font-size:.86rem;color:var(--muted);margin:0 0 1.2rem}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--cyan)}
.deep-hero{padding:3.6rem 0 2.6rem;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.deep-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:rgb(var(--rc))}
.deep-hero h1{font-size:clamp(2rem,4.6vw,3.1rem);max-width:22ch}
.deep-hero .lead{margin-top:1rem}
.deep-hero .actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.deep{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:3rem;padding:3rem 0 1rem}
@media(max-width:900px){.deep{grid-template-columns:1fr;gap:1.6rem}}
.deep article{display:grid;gap:2.4rem;min-width:0}
.deep article section{padding:0;border:0}
.deep article h2{font-size:1.5rem;margin:0 0 .8rem}
.deep article p,.deep article li{color:var(--ink-2);max-width:68ch}
.deep article p+p{margin-top:.9rem}
.deep .steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:.9rem}
.deep .steps li{counter-increment:s;position:relative;padding:1rem 1.1rem 1rem 3.4rem;background:var(--navy-2);
  border:1px solid var(--line);border-radius:8px}
.deep .steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:1.05rem;top:1rem;
  font:600 .95rem "Chakra Petch",sans-serif;color:rgb(var(--rc))}
.deep .steps li b{color:#ffffff}
.deep .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem}
.deep .facts div{border-top:2px solid rgb(var(--rc));padding-top:.7rem}
.deep .facts b{display:block;font:700 1.5rem "Chakra Petch",sans-serif;color:#ffffff}
.deep .facts span{font-size:.86rem;color:var(--muted)}
.deep details{background:var(--navy-2);border:1px solid var(--line);border-radius:8px;padding:.2rem 1.1rem}
.deep details+details{margin-top:.6rem}
.deep details summary{cursor:pointer;padding:.85rem 0;font-weight:600;color:#ffffff;list-style:none}
.deep details summary::after{content:"+";float:right;color:rgb(var(--rc));font-weight:700}
.deep details[open] summary::after{content:"–"}
.deep details p{padding-bottom:1rem}
.deep aside{position:sticky;top:5.5rem;align-self:start;display:grid;gap:1rem}
@media(max-width:900px){.deep aside{position:static}}
.deep aside .box{background:var(--navy-2);border:1px solid var(--line);border-left:3px solid rgb(var(--rc));border-radius:8px;padding:1.1rem 1.2rem}
.deep aside .box h4{margin:0 0 .6rem;font-family:"Chakra Petch",sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.deep aside .box ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.deep aside .box a{color:var(--ink-2);text-decoration:none;font-size:.93rem}
.deep aside .box a:hover,.deep aside .box a[aria-current]{color:var(--cyan)}
/* the sidebar CTA is a real button: keep the site's dark-on-cyan button text (the link colours above were
   repainting it pale-on-cyan, and cyan-on-cyan on hover) */
.deep aside .box a.btn,.deep aside .box a.btn:hover{color:#111111;text-decoration:none}
.deep aside .box a.btn:hover{background:var(--cyan-2)}
.pager2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem 0 3.4rem}
.pager2 a{display:grid;gap:.25rem;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:8px;background:var(--navy-2);text-decoration:none;color:#ffffff}
.pager2 a:hover{border-color:var(--cyan)}
.pager2 a small{font-family:"Chakra Petch",sans-serif;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pager2 a.nx{text-align:right;grid-column:2}
@media(max-width:600px){.pager2{grid-template-columns:1fr}.pager2 a.nx{grid-column:1}}