/* Pocket Mechanica — front page 'home' (5 Sep 2026). Scoped under .pmh. Loads after pm-system. */

/* ============================================================
   Pocket Mechanica — home page prototype, 4 Sep 2026
   Palette, type and interaction rules from the live brand system
   (theme.json v1.7 tokens + Custom Styles + 23 Aug ink variants).
   Single visual world by design: light reading base, dark showcases.
   ============================================================ */
.pmh{
  --base:var(--wp--preset--color--base,#ECEFF1); --mist:var(--wp--preset--color--mist,#E4E8EB); --line:var(--wp--preset--color--line,#C4CCD1); --steel:var(--wp--preset--color--steel,#7C8A93); --slate:var(--wp--preset--color--slate,#3A4248); --ink:var(--wp--preset--color--ink,#14181C); --dark:var(--wp--preset--color--dark,#15191D); --black:var(--wp--preset--color--black,#11151A);
  --line-dark:#283036; --line-card:#3A4248; --raise:#171C21;
  --pink:#E061A4; --pink-ink:#B01F70;
  --amber:#F5A93C; --amber-ink:#8A5A00;
  --cyan:#38D2E0; --cyan-ink:#007673;
  --jade:#33D98C; --jade-ink:#007C3E;
  --violet:#B072FF; --violet-ink:#7600D8;
  --sky:#6E9BFF; --sky-ink:#2A5BC7;
  --indigo:#3D5AFE; --indigo-ink:#2A3FB8;
  --hero-font:"Bricolage Grotesque","Archivo",sans-serif;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --pad:20px; --wide:1180px;
  font-family:var(--body); color:var(--ink); font-size:17px; line-height:1.5; background:var(--base); overflow-x:clip; -webkit-text-size-adjust:100%;
}
.pmh, .pmh *, .pmh *::before, .pmh *::after{box-sizing:border-box}
.pmh img{display:block; max-width:100%; height:auto}
.pmh a{color:inherit; text-decoration:none}
.pmh a:hover, .pmh a:focus{text-decoration:none}
.pmh h1, .pmh h2, .pmh h3, .pmh p, .pmh ul, .pmh figure{margin:0}
.pmh ul{padding:0; list-style:none}
.pmh :focus-visible{outline:2px solid var(--pink); outline-offset:3px}
.pmh .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- atoms ---------- */
.pmh .mono{font-family:var(--mono)}
.pmh .eyebrow{font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ax, var(--pink-ink))}
.pmh .fine{font-family:var(--mono); font-size:.62rem; letter-spacing:.11em; text-transform:uppercase; color:var(--steel); line-height:1.7}
.pmh .h2{font-family:var(--display); font-weight:700; font-size:clamp(1.55rem, 4.6vw, 2.35rem); line-height:1.08; letter-spacing:-.015em; text-wrap:balance; color:var(--ink); font-variation-settings:"wdth" 96}
.pmh .sub{font-size:1.05rem; line-height:1.5; color:var(--slate); max-width:56ch; text-wrap:pretty}
.pmh .sec-head{display:flex; flex-direction:column; gap:10px; padding:0 var(--pad); margin-bottom:22px}
.pmh .sec-head__text{display:flex; flex-direction:column; gap:10px}
.pmh .more{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ax, var(--pink-ink)); min-height:44px; border-bottom:1px solid transparent}
.pmh .more:hover{border-bottom-color:currentColor}
.pmh .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--mono); font-size:.76rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding:0 22px; min-height:52px; border-radius:2px; border:1px solid var(--pink); background:var(--pink); color:var(--black); transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease}
.pmh .btn:hover{background:#F07BB8; border-color:#F07BB8}
.pmh .btn:active{transform:translateY(2px)}
.pmh .btn--quiet{background:transparent; border-color:var(--line-card); color:var(--base)}
.pmh .btn--quiet:hover{background:transparent; border-color:var(--pink); color:var(--pink)}

/* corner brackets — the one iconographic motif */
.pmh .framed{position:relative}
.pmh .bk{position:absolute; width:26px; height:26px; pointer-events:none; z-index:3; border:0 solid var(--pink)}
.pmh .bk--tl{top:8px; left:8px; border-left-width:1.5px; border-top-width:1.5px}
.pmh .bk--tr{top:8px; right:8px; border-right-width:1.5px; border-top-width:1.5px}
.pmh .bk--bl{bottom:8px; left:8px; border-left-width:1.5px; border-bottom-width:1.5px}
.pmh .bk--br{bottom:8px; right:8px; border-right-width:1.5px; border-bottom-width:1.5px}

/* ---------- hero ---------- */
.pmh .hero{background:var(--black); color:var(--base); display:grid; grid-template-columns:1fr; padding:16px 0 34px; overflow:hidden}
.pmh .hero__media{position:relative; margin:0; background:var(--dark); aspect-ratio:5/4; overflow:visible; z-index:1}
.pmh .hero__tilt{position:absolute; inset:0; overflow:hidden; background:var(--dark); transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .4s ease; will-change:transform}
.pmh .hero__media img{width:100%; height:100%; object-fit:cover; object-position:56% 50%; transform:translate(var(--px,0px), var(--py,0px)) scale(1.03); transition:transform .4s ease, opacity .35s ease}
/* the scanning line */
.pmh .scan{position:absolute; left:0; right:0; top:4%; height:2px; background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--pink) 85%, white) 35%, color-mix(in srgb, var(--pink) 85%, white) 65%, transparent 100%); box-shadow:0 0 16px 3px color-mix(in srgb, var(--pink) 40%, transparent); opacity:.75; pointer-events:none; animation:pmh-scan 7s ease-in-out infinite alternate}
@keyframes pmh-scan{from{top:4%} to{top:96%}}
/* the contact light under the pointer */
.pmh .hero__light{position:absolute; left:var(--lx,50%); top:var(--ly,78%); width:52%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(closest-side, rgba(224,97,164,.42), rgba(224,97,164,.12) 50%, transparent 72%); mix-blend-mode:screen; filter:blur(8px); opacity:0; transition:opacity .35s ease; pointer-events:none}
.pmh .hero__media.is-lit .hero__light{opacity:1}
/* orbiting dots */
/* orbiting dots: an ellipse fitted to the frame (JS sets --orbit-r and --oy from the frame size; outside the frame on desktop, just inside it on phones) */
.pmh .orbit{position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; z-index:2; --orbit-r:44vw; --oy:.8; transform:scaleY(var(--oy)) rotate(0deg); animation:pmh-orbit var(--orbit-dur, 26s) linear infinite}
@keyframes pmh-orbit{to{transform:scaleY(var(--oy)) rotate(360deg)}}
.pmh .orbit i{position:absolute; top:0; left:0; border-radius:50%; color:var(--pink); background:currentColor; box-shadow:0 0 10px 2px color-mix(in srgb, currentColor 75%, transparent), 0 0 0 1.5px color-mix(in srgb, var(--black) 55%, transparent); opacity:.95}
.pmh .orbit i::after{content:""; position:absolute; left:50%; bottom:50%; width:2px; height:38px; margin-left:-1px; background:linear-gradient(to top, currentColor, transparent); opacity:.75; border-radius:1px}
.pmh .orbit .o1{width:9px; height:9px; margin:-4.5px; transform:rotate(0deg) translateX(var(--orbit-r))}
.pmh .orbit .o2{width:7px; height:7px; margin:-3.5px; color:var(--cyan); transform:rotate(128deg) translateX(var(--orbit-r))}
.pmh .orbit .o2::after{height:30px}
.pmh .orbit .o3{width:6px; height:6px; margin:-3px; color:var(--amber); transform:rotate(246deg) translateX(var(--orbit-r))}
.pmh .orbit .o3::after{height:24px}
/* technical callouts, half outside the frame */
.pmh .colines{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; overflow:visible}
.pmh .colines line{stroke:var(--pink); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.7}
.pmh .codot{position:absolute; width:6px; height:6px; margin:-3px; border-radius:50%; background:var(--pink); box-shadow:0 0 10px var(--pink); z-index:3; pointer-events:none}
.pmh .co{position:absolute; z-index:4; display:flex; flex-direction:column; gap:3px; min-width:120px; max-width:54%; padding:8px 11px 9px; background:color-mix(in srgb, var(--black) 86%, transparent); border:1px solid var(--line-card); border-radius:2px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:opacity .3s ease, transform .3s ease}
.pmh .co b{font-family:var(--mono); font-size:.52rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--steel)}
.pmh .co span{font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--base); line-height:1.35; white-space:normal; text-wrap:balance}
.pmh .co--a{top:-14px; right:10px}
.pmh .co--b{bottom:-14px; left:10px}
.pmh .co.is-swapping{opacity:0; transform:translateY(4px)}
.pmh .hero__cap{display:flex; flex-direction:column; gap:10px; padding:26px var(--pad) 0}
.pmh .hero__cap-row{display:flex; justify-content:space-between; align-items:baseline; gap:6px 14px; flex-wrap:wrap}
.pmh .hero__day{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel)}
.pmh .hero__day b{color:var(--pink); font-weight:500}
.pmh .hero__day.is-preview b{color:var(--cyan)}
.pmh .hero__arrow{color:var(--pink)}
.pmh .hero__media img.is-swapping{opacity:0}
/* the week strip — seven days, today ringed */
.pmh .week{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:7px; padding-top:6px; perspective:700px}
.pmh .week button{appearance:none; position:relative; aspect-ratio:1; min-height:44px; padding:0; overflow:hidden; background:var(--dark); border:1px solid var(--line-dark); border-radius:3px; cursor:pointer; color:var(--steel); transform:translateY(0) rotateX(calc(var(--ty,0)*1deg)) rotateY(calc(var(--tx,0)*1deg)); transition:transform .22s ease, border-color .18s ease, box-shadow .18s ease}
.pmh .week button img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; transition:opacity .25s ease, transform .4s ease}
.pmh .week button span{position:absolute; left:0; right:0; bottom:0; padding:9px 2px 5px; text-align:center; font-family:var(--mono); font-size:.52rem; letter-spacing:.12em; text-transform:uppercase; background:linear-gradient(180deg, transparent, rgba(17,21,26,.92)); color:#C4CCD1}
.pmh .week button::before{content:""; position:absolute; inset:0; background:radial-gradient(70px circle at var(--mx,50%) var(--my,50%), rgba(224,97,164,.34), transparent 70%); opacity:0; transition:opacity .25s ease; pointer-events:none; z-index:1}
.pmh .week button::after{content:""; position:absolute; top:-30%; bottom:-30%; left:-45%; width:30%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent); transform:skewX(-16deg); opacity:0; pointer-events:none; z-index:2}
.pmh .week button:hover, .pmh .week button:focus-visible{border-color:var(--steel); box-shadow:0 12px 24px -14px rgba(224,97,164,.55)}
.pmh .week button:hover::before{opacity:1}
.pmh .week button:hover img, .pmh .week button:focus-visible img{opacity:1; transform:scale(1.07)}
.pmh .week button.is-pressed{transform:translateY(1px) scale(.97)}
.pmh .week button.is-pressed::after{animation:pmh-sweep2 .55s ease-out}
@keyframes pmh-sweep2{0%{opacity:1; transform:translateX(0) skewX(-16deg)} 100%{opacity:0; transform:translateX(560%) skewX(-16deg)}}
.pmh .week button.is-today{border-color:var(--pink); box-shadow:0 0 0 1px var(--pink), 0 0 18px -4px rgba(224,97,164,.6)}
.pmh .week button.is-today img{opacity:.95}
.pmh .week button.is-today span{color:var(--pink)}
.pmh .week button.is-shown{border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan)}
.pmh .week button.is-shown span{color:var(--cyan)}
/* sound toggle drawn as a detent switch — only shown when the day's entry is a clip */
.pmh .snd{position:absolute; right:14px; bottom:14px; z-index:4; display:inline-flex; align-items:center; gap:8px; background:color-mix(in srgb, var(--black) 78%, transparent); border:1px solid var(--line-card); color:var(--base); border-radius:2px; padding:6px 10px 6px 6px; cursor:pointer; min-height:36px}
.pmh .snd[hidden]{display:none}
.pmh .snd__sw{position:relative; width:34px; height:18px; border:1px solid var(--line-card); border-radius:2px; background:var(--dark); display:block}
.pmh .snd__sw i{position:absolute; top:2px; left:2px; width:12px; height:12px; background:var(--steel); transition:left .12s cubic-bezier(.7,0,.3,1), background .12s ease}
.pmh .snd[aria-pressed="true"] .snd__sw i{left:18px; background:var(--pink)}
.pmh .snd__lab{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase}
.pmh .hero__obj{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--base)}
.pmh .hero__obj b{color:var(--pink); font-weight:500}
.pmh .hero__feel{font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--steel)}
.pmh .track{position:relative; height:3px; background:var(--line-dark); background-image:repeating-linear-gradient(90deg, var(--line-card) 0 1px, transparent 1px 12.5%); background-size:100% 100%}
.pmh .track i{position:absolute; top:-3px; left:0; width:9px; height:9px; background:var(--pink); animation:pmh-sweep 3.6s cubic-bezier(.7,0,.3,1) infinite}
@keyframes pmh-sweep{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(100% - 9px);opacity:0}}
.pmh .breathe{animation:pmh-breathe 6s ease-in-out infinite}
@keyframes pmh-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
.pmh .hero__body{padding:22px var(--pad) 0; display:flex; flex-direction:column; gap:14px}
.pmh .kicker{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.7; color:var(--steel)}
.pmh .kicker b{color:var(--pink); font-weight:500}
.pmh .hero h1{font-family:var(--hero-font); font-weight:800; font-size:clamp(2rem, 8.4vw, 2.35rem); line-height:1.02; letter-spacing:-.025em; color:var(--base); text-wrap:balance; font-variation-settings:"opsz" 96}
.pmh .hero h1 em{font-style:normal; color:var(--pink)}
.pmh .lede{font-size:1.1rem; line-height:1.45; color:#C4CCD1; max-width:34ch; text-wrap:pretty}
.pmh .actions{display:flex; flex-direction:column; gap:10px; padding-top:4px}
.pmh .actions .btn{width:100%}

/* ---------- highlights rail ---------- */
.pmh .hi{padding:40px 0 28px; background:var(--base)}
.pmh .rail-x{overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad); padding:6px var(--pad) 18px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.pmh .rail-x::-webkit-scrollbar{display:none}
.pmh .cards{display:flex; gap:14px; width:max-content}
.pmh .cards > li{flex:0 0 min(78vw, 300px); scroll-snap-align:start; display:flex}
.pmh .card{width:100%; background:rgba(255,255,255,.6); border:1px solid var(--line); border-top:3px solid var(--ax, var(--pink)); border-radius:3px; overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.pmh .card:hover{transform:translateY(-5px); border-color:var(--ax, var(--pink)); box-shadow:0 14px 28px -14px color-mix(in srgb, var(--ax, var(--pink)) 60%, transparent)}
.pmh .card:active{transform:translateY(2px)}
.pmh .card__media{aspect-ratio:4/3; background:var(--dark); overflow:hidden}
.pmh .card__media img{width:100%; height:100%; object-fit:cover}
.pmh .card__body{display:flex; flex-direction:column; gap:5px; padding:12px 14px 14px}
.pmh .card__maker{font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ax, var(--pink-ink))}
.pmh .card h3{font-family:var(--display); font-weight:700; font-size:1.08rem; letter-spacing:-.01em; color:var(--ink); line-height:1.2}
.pmh .card__kind{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); padding-top:6px; margin-top:4px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:8px}
.pmh .card__kind span:last-child{color:var(--slate)}
.pmh .rail-nav{display:none; flex-direction:row; gap:4px; align-self:end}

/* ---------- trust band ---------- */
.pmh .trust{background:var(--mist); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px var(--pad); display:flex; flex-direction:column; gap:8px}
.pmh .trust p{font-style:italic; font-size:1.35rem; line-height:1.3; color:var(--ink); font-weight:400}
.pmh .trust .fine{color:var(--slate); font-size:.62rem; font-style:normal; line-height:1.9}
.pmh .trust .fine a{border-bottom:1px solid var(--line)}
.pmh .trust .fine a:hover{color:var(--pink-ink); border-bottom-color:var(--pink-ink)}

/* ---------- the field database ---------- */
.pmh .db{padding:40px 0 34px; background:var(--base)}
.pmh .doors{display:grid; grid-template-columns:1fr; padding:0 var(--pad)}
.pmh .door{position:relative; z-index:0; display:grid; grid-template-columns:12px 1fr auto; gap:16px; align-items:center; padding:16px 0; border-top:1px solid var(--line); min-height:44px}
.pmh .doors li:last-child .door{border-bottom:1px solid var(--line)}
/* the highlight flows in from the left on hover / focus / press */
.pmh .door::before{content:""; position:absolute; inset:0 -12px; z-index:-1; background:color-mix(in srgb, var(--ax) 14%, transparent); transform:scaleX(0); transform-origin:left center; transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.pmh .door::after{content:""; position:absolute; left:-12px; right:-12px; bottom:-1px; height:2px; background:var(--ax); transform:scaleX(0); transform-origin:left center; transition:transform .42s cubic-bezier(.2,.7,.2,1) .05s}
.pmh .door i{width:12px; height:12px; background:var(--ax); flex:none; transform-origin:center; transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.pmh .door b{font-family:var(--display); font-size:1.32rem; font-weight:700; letter-spacing:-.012em; line-height:1.12; color:var(--ink); display:block; font-variation-settings:"wdth" 96; transition:transform .28s cubic-bezier(.2,.7,.2,1), color .2s ease}
.pmh .door span{display:block; font-size:1rem; line-height:1.45; color:var(--slate); margin-top:4px; text-wrap:pretty}
.pmh .door em{font-style:normal; font-family:var(--mono); font-size:1.55rem; font-weight:500; line-height:1; color:var(--axi, var(--steel)); font-variant-numeric:tabular-nums; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:8px; transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.pmh .door em::after{content:"→"; font-size:.72em; opacity:0; transform:translateX(-8px); transition:opacity .22s ease, transform .28s cubic-bezier(.2,.7,.2,1)}
.pmh .door:hover, .pmh .door:focus-visible, .pmh .door:active{outline:none}
.pmh .door:hover::before, .pmh .door:focus-visible::before, .pmh .door:active::before{transform:scaleX(1)}
.pmh .door:hover::after, .pmh .door:focus-visible::after, .pmh .door:active::after{transform:scaleX(1)}
.pmh .door:hover b, .pmh .door:focus-visible b, .pmh .door:active b{color:var(--axi); transform:translateX(4px)}
.pmh .door:hover i, .pmh .door:focus-visible i, .pmh .door:active i{transform:scaleY(2.4)}
.pmh .door:hover em, .pmh .door:focus-visible em, .pmh .door:active em{transform:translateX(-2px)}
.pmh .door:hover em::after, .pmh .door:focus-visible em::after, .pmh .door:active em::after{opacity:1; transform:none}

/* ---------- the wall ---------- */
.pmh .wall{--ax:var(--amber); background:var(--black); color:var(--base); padding:44px 0 36px; overflow:hidden; border-top:1px solid var(--line-dark)}
.pmh .wall .eyebrow{color:var(--amber)}
.pmh .wall .h2{color:var(--base)}
.pmh .wall .sub{color:#C4CCD1}
.pmh .rails{display:flex; flex-direction:column; gap:10px; margin:24px 0 20px}
.pmh .rail{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)}
.pmh .rail__track{display:flex; gap:10px; width:max-content; animation:pmh-drift var(--dur, 120s) linear infinite; animation-play-state:running; will-change:transform}
.pmh .rail--rev .rail__track{animation-direction:reverse}
.pmh .rail:hover .rail__track, .pmh .rail:focus-within .rail__track{animation-play-state:paused}
@keyframes pmh-drift{to{transform:translateX(-50%)}}
.pmh .rail:not(.is-looped){overflow-x:auto; scrollbar-width:none; padding:0 var(--pad)}
.pmh .rail:not(.is-looped) .rail__track{animation:none}
.pmh .tile{flex:0 0 138px; display:flex; flex-direction:column; gap:7px; background:var(--dark); border:1px solid var(--line-dark); border-radius:3px; padding:6px 6px 8px; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease}
.pmh .tile:hover{transform:translateY(-5px); border-color:var(--amber); background:var(--raise); box-shadow:0 0 0 1px var(--amber), 0 16px 30px -16px color-mix(in srgb, var(--amber) 70%, transparent)}
.pmh .tile:active{transform:translateY(2px)}
.pmh .tile__img{aspect-ratio:1; overflow:hidden; border-radius:2px; background:var(--black)}
.pmh .tile__img img{width:100%; height:100%; object-fit:cover}
.pmh .tile__cap{display:flex; flex-direction:column; gap:2px; padding:0 2px}
.pmh .tile__cap b{font-family:var(--mono); font-size:.6rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--base); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pmh .tile__cap span{font-family:var(--mono); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pmh .wall__foot{display:flex; flex-wrap:wrap; gap:6px 28px; padding:0 var(--pad); align-items:center}
.pmh .wall__foot .more{color:var(--amber)}
.pmh .wall__foot .fine{color:var(--steel)}

/* ---------- two doors ---------- */
.pmh .two{padding:44px 0 10px; background:var(--base)}
.pmh .two__grid{display:grid; grid-template-columns:1fr; gap:16px; padding:0 var(--pad)}
.pmh .bigcard{display:flex; flex-direction:column; background:rgba(255,255,255,.6); border:1px solid var(--line); border-top:3px solid var(--ax, var(--amber)); border-radius:3px; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.pmh .bigcard:hover{transform:translateY(-5px); border-color:var(--ax, var(--amber)); box-shadow:0 16px 32px -16px color-mix(in srgb, var(--ax, var(--amber)) 60%, transparent)}
.pmh .bigcard:active{transform:translateY(2px)}
.pmh .bigcard__media{aspect-ratio:4/3; background:var(--dark); overflow:hidden}
.pmh .bigcard__media img{width:100%; height:100%; object-fit:cover}
.pmh .bigcard__body{display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px}
.pmh .bigcard__eyebrow{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--axi, var(--amber-ink))}
.pmh .bigcard h3{font-family:var(--display); font-weight:700; font-size:1.35rem; line-height:1.15; letter-spacing:-.015em; color:var(--ink); text-wrap:balance}
.pmh .bigcard p{font-size:1rem; line-height:1.5; color:var(--slate); text-wrap:pretty}
.pmh .bigcard .more{margin-top:2px}

/* ---------- latest field note ---------- */
.pmh .note{--ax:var(--indigo); --axi:var(--indigo-ink); padding:34px var(--pad) 44px; background:var(--base)}
.pmh .note__card{display:grid; grid-template-columns:1fr; background:var(--dark); color:var(--base); border-radius:3px; overflow:hidden; border:1px solid var(--line-dark)}
.pmh .note__media{aspect-ratio:3/2; overflow:hidden}
.pmh .note__media img{width:100%; height:100%; object-fit:cover}
.pmh .note__body{padding:18px 18px 22px; display:flex; flex-direction:column; gap:10px; border-top:3px solid var(--indigo)}
.pmh .note__body .eyebrow{color:var(--sky)}
.pmh .note h3{font-family:var(--display); font-weight:700; font-size:1.4rem; line-height:1.15; letter-spacing:-.015em; color:var(--base); text-wrap:balance}
.pmh .note p{font-size:1.02rem; line-height:1.5; color:#C4CCD1; text-wrap:pretty}
.pmh .note .more{color:var(--sky)}

/* ---------- feel map ---------- */
.pmh .feel{--ax:var(--cyan); --axi:var(--cyan-ink); background:var(--mist); border-top:1px solid var(--line); padding:44px 0 48px}
.pmh .feel .eyebrow{color:var(--cyan-ink)}
.pmh .feel__grid{display:grid; grid-template-columns:1fr; gap:26px; padding:0 var(--pad)}
.pmh .instr{background:var(--dark); color:var(--base); border:1px solid var(--line-dark); border-radius:3px; padding:18px 16px 16px; display:flex; flex-direction:column; gap:14px}
.pmh .instr__head{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.pmh .instr__head span{font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel)}
.pmh .instr__head b{font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); font-weight:500}
.pmh .instr{margin:0}
.pmh .radar{display:block; width:100%; height:auto; overflow:visible}
.pmh .radar__grid polygon{stroke:var(--line-dark); stroke-width:1}
.pmh .radar__grid .r100{stroke:var(--line-card); stroke-width:1.2}
.pmh .radar__axes line{stroke:var(--line-dark); stroke-width:1}
.pmh .radar__fill{fill:color-mix(in srgb, var(--cyan) 16%, transparent); stroke:var(--cyan); stroke-width:2; stroke-linejoin:round; transform-origin:240px 220px; transform-box:view-box}
.pmh .radar__pts rect{fill:var(--cyan); stroke:var(--black); stroke-width:2}
.pmh .radar__ghost{fill:none; stroke-width:1.2; stroke-dasharray:5 5; stroke-linejoin:round}
.pmh .radar__ghost.g1{stroke:color-mix(in srgb, var(--cyan) 55%, var(--steel))}
.pmh .radar__ghost.g2{stroke:var(--steel); stroke-dasharray:2 6}
.pmh .sliders{display:grid; grid-template-columns:1fr; gap:6px 18px; padding-top:4px; border-top:1px solid var(--line-dark)}
.pmh .ax{display:grid; grid-template-columns:86px 1fr 34px; align-items:center; gap:10px; min-height:40px}
.pmh .ax > span{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:#C4CCD1}
.pmh .ax input{width:100%; margin:0; accent-color:var(--cyan); height:28px; cursor:pointer; background:transparent}
.pmh .ax output{font-family:var(--mono); font-size:.66rem; color:var(--cyan); text-align:right; font-variant-numeric:tabular-nums}
.pmh .radar__pts rect:hover{fill:var(--base)}
.pmh .radar__labels text{font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em; fill:var(--base)}
.pmh .radar__labels .lab{font-size:12.5px; font-weight:500}
.pmh .radar__labels .sub{font-size:9.5px; fill:var(--steel); letter-spacing:.08em}
.pmh .instr__foot{display:flex; flex-direction:column; gap:4px; font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); line-height:1.6}
.pmh .feel__copy{display:flex; flex-direction:column; gap:12px}
.pmh .feel__copy .btn{align-self:flex-start; background:var(--cyan); border-color:var(--cyan)}
.pmh .feel__copy .btn:hover{background:#6FE3ED; border-color:#6FE3ED}


/* ---------- community — black ground, acid-lime accent, separate from pink (objects) and cyan (feel map) ---------- */
.pmh .com{--lime:#C4FF3F; --lime-dim:#7FA824; background:var(--black); color:var(--base); padding:48px 0 56px; border-top:1px solid var(--line-dark)}
.pmh .com .h2{color:var(--base)}
.pmh .com .sub{color:#C4CCD1}
.pmh .com__eyebrow{color:var(--lime) !important}
.pmh .com__grid{display:grid; grid-template-columns:1fr; gap:18px; padding:0 var(--pad)}
.pmh .com__side{display:grid; grid-template-columns:1fr; gap:18px}
.pmh .com__map{min-width:0}
.pmh .com__grid > *{min-width:0}
.pmh .com .instr{background:#0E1216; border-color:var(--line-dark)}
.pmh .com .instr__head b{color:var(--lime)}
/* the map keeps its natural aspect; on phones it lives in a swipeable viewport */
.pmh .wmap-vp{max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--line-card) transparent; margin:0 -6px; padding:0 6px 6px; cursor:grab}
.pmh .wmap{display:block; width:920px; max-width:none; height:auto}
.pmh .wmap__land{fill:none; stroke:var(--line-card); stroke-width:3.4; stroke-linecap:round}
.pmh .wmap__scan{fill:url(#pmh-scan-g); animation:pmh-mapscan 16s linear infinite; pointer-events:none}
@keyframes pmh-mapscan{from{transform:translateX(-80px)} to{transform:translateX(1010px)}}
.pmh .route{fill:none; stroke:var(--lime); stroke-width:1.1; stroke-dasharray:4 7; opacity:.38; animation:pmh-dash 40s linear infinite; transition:opacity .3s ease, stroke-width .3s ease}
.pmh .route.is-sel{opacity:.95; stroke-width:1.8}
@keyframes pmh-dash{to{stroke-dashoffset:-440}}
.pmh .pin{cursor:pointer; outline:none}
.pmh .pin__hit{fill:transparent}
.pmh .pin__dot{fill:var(--lime); stroke:var(--black); stroke-width:1.5; transition:r .2s ease}
.pmh .pin__ring{fill:none; stroke:var(--lime); stroke-width:1.2; opacity:.5; transform-box:fill-box; transform-origin:center; animation:pmh-pulse 5.4s ease-out infinite; animation-delay:var(--d, 0s)}
@keyframes pmh-pulse{0%{transform:scale(.35); opacity:.7} 60%{transform:scale(1.5); opacity:0} 100%{transform:scale(1.5); opacity:0}}
.pmh .pin text{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; fill:#C4CCD1; pointer-events:none}
.pmh .pin:hover .pin__dot, .pmh .pin:focus-visible .pin__dot, .pmh .pin.is-sel .pin__dot{r:5.2}
.pmh .pin.is-sel .pin__ring{animation:none; opacity:1; stroke-width:2; transform:scale(1.4)}
.pmh .pin:focus-visible .pin__ring{opacity:1; stroke:var(--base)}
.pmh .pin.is-sel text{fill:var(--lime)}
.pmh .cityinfo{display:flex; flex-direction:column; gap:6px; padding:12px 12px 12px; border:1px solid var(--line-dark); border-left:3px solid var(--lime); background:var(--dark); border-radius:2px}
.pmh .cityinfo > div{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px}
.pmh .cityinfo b{font-family:var(--display); font-weight:700; font-size:1.1rem; letter-spacing:-.01em; color:var(--base)}
.pmh .cityinfo span{font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel)}
.pmh .cityinfo__meta{color:#C4CCD1 !important}
/* sign-in card */
.pmh .login{background:#0E1216; border:1px solid var(--line-dark); border-top:3px solid var(--lime); border-radius:3px; padding:18px 18px 16px; display:flex; flex-direction:column; gap:12px}
.pmh .login h3{font-family:var(--display); font-weight:700; font-size:1.35rem; line-height:1.15; letter-spacing:-.015em; color:var(--base); text-wrap:balance}
.pmh .login__fields{display:grid; grid-template-columns:1fr; gap:10px}
.pmh .login__fields label{display:flex; flex-direction:column; gap:5px}
.pmh .login__fields span{font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel)}
.pmh .login__fields input{font-family:var(--mono); font-size:16px; color:var(--base); background:var(--black); border:1px solid var(--line-card); border-radius:2px; padding:10px 12px; min-height:44px; width:100%}
.pmh .login__fields input::placeholder{color:var(--slate)}
.pmh .login__fields input:disabled{opacity:.7; cursor:not-allowed}
.pmh .login__actions{display:flex; flex-direction:column; gap:10px}
.pmh .login__actions .btn{width:100%}
.pmh .btn--lime{background:var(--lime); border-color:var(--lime); color:var(--black)}
.pmh .btn--lime:hover{background:#D6FF6E; border-color:#D6FF6E}
.pmh .btn--lime:disabled{opacity:.55; cursor:not-allowed}
.pmh .btn--lime:disabled:hover{background:var(--lime); border-color:var(--lime)}
.pmh .btn--ghost{background:transparent; border-color:var(--line-card); color:var(--base)}
.pmh .btn.is-soon{cursor:default; opacity:.6}
.pmh .login .fine a{color:#C4CCD1; border-bottom:1px solid var(--line-card)}
.pmh .login .fine a:hover{color:var(--lime); border-bottom-color:var(--lime)}
/* rooms */
.pmh .rooms{background:#0E1216; border:1px solid var(--line-dark); border-radius:3px; padding:16px 16px 10px; display:flex; flex-direction:column; gap:10px}
.pmh .rooms li{display:grid; grid-template-columns:8px 1fr; gap:4px 12px; align-items:baseline; padding:10px 0; border-top:1px solid var(--line-dark)}
.pmh .rooms li:first-child{border-top:0}
.pmh .rooms li i{width:8px; height:8px; background:var(--lime); align-self:center}
.pmh .rooms li b{font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--base)}
.pmh .rooms li span{grid-column:2; font-size:.92rem; color:var(--steel); line-height:1.4}
/* drawer + ownership proof */
.pmh .drawer__grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; padding:10px; background:var(--black); border:1px solid var(--line-dark); border-radius:3px; box-shadow:inset 0 2px 10px rgba(0,0,0,.6)}
.pmh .drawer__grid li{min-width:0; position:relative; display:flex; flex-direction:column; gap:4px; background:var(--dark); border:1px solid var(--line-dark); border-radius:2px; padding:4px 4px 5px}
.pmh .drawer__grid img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:1px}
.pmh .drawer__grid span{font-family:var(--mono); font-size:.5rem; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 1px}
.pmh .drawer__grid li.is-proof{border-color:color-mix(in srgb, var(--lime) 55%, var(--line-dark))}
.pmh .drawer__grid em{position:absolute; top:6px; left:6px; font-style:normal; font-family:var(--mono); font-size:.46rem; letter-spacing:.1em; text-transform:uppercase; color:var(--black); background:var(--lime); padding:2px 5px; border-radius:1px}
.pmh .drawer__empty{border-style:dashed !important; align-items:center; justify-content:center}
.pmh .drawer__empty i{font-style:normal; font-family:var(--mono); font-size:1.1rem; color:var(--steel); aspect-ratio:1; width:100%; display:flex; align-items:center; justify-content:center}
.pmh .proof{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; padding:10px 0 2px}
.pmh .proof__shots{display:flex; gap:6px}
.pmh .proof__shots img{width:54px; height:54px; object-fit:cover; border-radius:2px; border:1px solid color-mix(in srgb, var(--lime) 55%, var(--line-dark))}
.pmh .proof p{font-size:.92rem; line-height:1.45; color:#C4CCD1}
.pmh .proof p b{font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--lime); font-weight:600}
/* ---------- sticky mobile CTA ---------- */
.pmh .sticky{position:fixed; left:0; right:0; bottom:0; z-index:15; padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--black) 92%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--line-dark); transform:translateY(110%); transition:transform .25s ease}
.pmh .sticky.is-on{transform:none}
.pmh .sticky .btn{width:100%}

/* ---------- scroll-driven reveals (visible at rest, no observer) ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .pmh .reveal{animation:pmh-rise linear both; animation-timeline:view(); animation-range:entry 0% entry 32%}
    @keyframes pmh-rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
    .pmh .radar__profile{animation:pmh-settle linear both; animation-timeline:view(); animation-range:entry 15% entry 65%; transform-origin:240px 220px; transform-box:view-box}
    @keyframes pmh-settle{from{transform:scale(.08); opacity:.2} to{transform:none; opacity:1}}
  }
}

/* ---------- desktop ---------- */
@media (min-width: 900px){
  .pmh{--pad:max(40px, calc((100% - var(--wide)) / 2))}
  .pmh .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); grid-template-areas:"body media" "body cap"; column-gap:56px; align-items:center}
  .pmh .hero__media{grid-area:media; aspect-ratio:6/5; border:1px solid var(--line-dark)}
  .pmh .hero__cap{grid-area:cap; padding:22px 0 0}
  .pmh .hero{padding:54px var(--pad) 62px}
  .pmh .co--a{top:-16px; right:-18px}
  .pmh .co--b{bottom:-16px; left:-18px}
  .pmh .co b{font-size:.55rem}
  .pmh .co span{font-size:.7rem}
  .pmh .orbit{--orbit-r:306px; --oy:.82}
  .pmh .week{gap:9px}
  .pmh .week button span{font-size:.56rem; padding-bottom:6px}
  .pmh .hero__body{grid-area:body; padding:0; gap:20px}
  .pmh .hero h1{font-size:clamp(2.7rem, 4.1vw, 3.7rem); max-width:14ch}
  .pmh .lede{font-size:1.3rem; max-width:40ch}
  .pmh .actions{flex-direction:row; align-items:center; gap:14px}
  .pmh .actions .btn{width:auto}
  .pmh .bk{width:34px; height:34px}
  .pmh .hi{padding:56px 0 40px}
  .pmh .hi .sec-head{flex-direction:row; align-items:end; justify-content:space-between; gap:24px}
  .pmh .rail-nav{display:flex; gap:4px}
  .pmh .rail-nav button{min-width:44px; min-height:44px; background:none; border:1px solid var(--line); color:var(--slate); cursor:pointer; border-radius:2px; font-family:var(--mono); font-size:.9rem}
  .pmh .rail-nav button:hover{border-color:var(--pink-ink); color:var(--pink-ink)}
  .pmh .cards > li{flex-basis:300px}
  .pmh .trust{flex-direction:row; align-items:baseline; justify-content:space-between; padding:26px var(--pad)}
  .pmh .trust p{font-size:1.65rem}
  .pmh .db{padding:56px 0 48px}
  .pmh .doors{grid-template-columns:1fr 1fr; column-gap:56px}
  .pmh .door{padding:20px 0; gap:18px}
  .pmh .door b{font-size:1.5rem}
  .pmh .door span{font-size:1.04rem}
  .pmh .door em{font-size:1.85rem}
  .pmh .doors li:nth-child(7) .door{border-bottom:1px solid var(--line)}
  .pmh .wall{padding:60px 0 52px}
  .pmh .rails{gap:12px; margin:32px 0 26px}
  .pmh .rail__track{gap:12px}
  .pmh .tile{flex-basis:196px; padding:8px 8px 10px; gap:9px}
  .pmh .tile__cap b{font-size:.64rem}
  .pmh .tile__cap span{font-size:.58rem}
  .pmh .two{padding:60px 0 14px}
  .pmh .two__grid{grid-template-columns:1fr 1fr; gap:24px}
  .pmh .bigcard h3{font-size:1.55rem}
  .pmh .note{padding:40px var(--pad) 60px}
  .pmh .note__card{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .pmh .note__media{aspect-ratio:auto; min-height:320px}
  .pmh .note__body{padding:28px 30px; border-top:0; border-left:3px solid var(--indigo); justify-content:center}
  .pmh .note h3{font-size:1.75rem}
  .pmh .feel{padding:60px 0 64px}
  .pmh .feel__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center}
  .pmh .instr{padding:24px 26px 20px; gap:14px}
  .pmh .sliders{grid-template-columns:1fr 1fr; gap:4px 26px; padding-top:8px}
  .pmh .ax{grid-template-columns:92px 1fr 34px}
  .pmh .instr__foot{flex-direction:row; justify-content:space-between; gap:16px}
  .pmh .radar__labels .lab{font-size:12px}
  .pmh .feel__copy{order:-1}
  .pmh .com{padding:64px 0 68px}
  .pmh .com__grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:24px; align-items:start}
  .pmh .wmap-vp{overflow:visible; margin:0; padding:0; cursor:default}
  .pmh .wmap{width:100%}
  .pmh .login__fields{grid-template-columns:1fr 1fr}
  .pmh .login__actions{flex-direction:row}
  .pmh .login__actions .btn{width:auto; flex:1}
  .pmh .login h3{font-size:1.45rem}
  .pmh .drawer__grid span{font-size:.54rem}
  .pmh .sticky{display:none}
}
@media (min-width: 1264px){
  .pmh .tile{flex-basis:210px}
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce){
  .pmh .breathe, .pmh .track i, .pmh .rail__track, .pmh .pin__ring, .pmh .scan, .pmh .orbit, .pmh .wmap__scan, .pmh .route, .pmh .week button::after{animation:none !important}
  .pmh .scan{top:50%; opacity:.35}
  .pmh .hero__tilt, .pmh .hero__media img, .pmh .week button{transition:none; transform:none !important}
  .pmh .hero__light{display:none}
  .pmh .track i{left:62%}
  .pmh .orbit{display:none}
  .pmh .card, .pmh .tile, .pmh .bigcard, .pmh .btn, .pmh .door i, .pmh .door b, .pmh .door em, .pmh .door em::after, .pmh .door::before, .pmh .door::after{transition:none}
  .pmh .card:hover, .pmh .tile:hover, .pmh .bigcard:hover{transform:none}
  .pmh .rail{overflow-x:auto; scrollbar-width:none; padding:0 var(--pad); -webkit-mask-image:none; mask-image:none}
  .pmh .sticky{transition:none}
}