/* =====================================================================
   REAL HOLDING GROUP · PORTAL · the private pages (acceso.html, clave.html, index.html).
   The site's own material: warm black, graphite and charcoal, copper and bronze lines, warm off-white words,
   Inter only. No white cards, no bright colours: errors in a controlled terracotta, the active state in a
   muted mineral green. Desktop: the atmosphere on the left (the Real Metals nugget, deeply darkened, under a
   warm vignette), the form on the right on dark graphite, about 400 px wide. Tablet: the atmosphere narrower.
   Phones (640 px and less): the form first, the atmosphere reduced to the bar's hairline and its signal dot.
   Motion: 500 ms of opacity and 8 px on arrival, 200 ms on fields; with reduced motion, opacity only.
   ===================================================================== */
:root{
  --pa-0:#121110; --pa-1:#171615; --pa-2:#1d1c1b; --pa-3:#242221;
  --pa-field:rgba(18,17,16,.62); --pa-field-on:rgba(18,17,16,.86);
  --pa-line:rgba(174,167,163,.13); --pa-line2:rgba(174,167,163,.24); --pa-line3:rgba(174,167,163,.38);
  --pa-hd:#F6F2EC; --pa-hi:#F1EDE7; --pa-tx:#cfc7be; --pa-stone:#AEA7A3; --pa-mute:#8f8a85;
  --pa-cu:#795238; --pa-cu-hover:#875c3f; --pa-cu-lite:#c08a57; --pa-cu-m:#c49e80;
  --pa-ok:#7FA08A; --pa-err:#D08C7B; --pa-err-tx:#E2B1A4;
  --font:'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --gut:clamp(20px, 5vw, 72px);
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
*,*::before,*::after{ box-sizing:border-box; } *{ margin:0; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--pa-1); }
body.pa{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; font-family:var(--font); background:var(--pa-2); color:var(--pa-stone);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; overflow-x:clip; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--pa-cu); color:var(--pa-hi); }
:focus-visible{ outline:2px solid var(--pa-cu-lite); outline-offset:3px; }
[hidden]{ display:none !important; }
.pa-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.pa-ico{ fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

/* the site's grain, the same faint film */
.pa-grain{ position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------------- the top bar: the monogram home, the language switch (the site's bar, in two pieces) ---------------- */
.pa-top{ position:relative; z-index:10; flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px var(--gut); }
.pa-chip{ display:inline-flex; align-items:center; gap:4px; padding:6px; border-radius:999px; background:rgba(31,30,29,.55); border:1px solid var(--pa-line);
  backdrop-filter:blur(16px) saturate(120%); -webkit-backdrop-filter:blur(16px) saturate(120%); box-shadow:0 20px 50px -30px rgba(0,0,0,.8); }
.pa-brand{ display:inline-flex; align-items:center; height:38px; padding:6px 12px; border-radius:999px; background:rgba(174,167,163,.06); transition:background .3s; }
.pa-brand:hover{ background:rgba(174,167,163,.11); }
.pa-brand img{ height:26px; width:auto; }
.pa-lang{ position:relative; display:inline-flex; align-items:baseline; gap:.34em; padding:10px 18px; border:0; border-radius:999px; background:none; font-size:.92rem; font-weight:500;
  line-height:normal; color:var(--pa-stone); cursor:pointer; transition:color .3s, background .3s; -webkit-tap-highlight-color:transparent; }
.pa-lang:hover{ color:var(--pa-hi); background:rgba(174,167,163,.07); }
.pa-lang__o{ position:relative; opacity:.55; transition:opacity .3s, color .3s; }
.pa-lang__o.is-on{ opacity:1; color:var(--pa-hi); }
.pa-lang__o.is-on::after{ content:""; position:absolute; left:0; right:0; bottom:-.32em; height:1px; background:var(--pa-cu-lite); }
.pa-lang__s{ opacity:.4; }
.pa-lang:hover .pa-lang__o{ opacity:.85; } .pa-lang:hover .pa-lang__o.is-on{ opacity:1; }

/* ---------------- the frame: the atmosphere | the form ---------------- */
.pa-shell{ position:relative; flex:1 0 auto; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); }
.pa-visual{ position:relative; overflow:hidden; isolation:isolate;
  background:radial-gradient(70% 60% at 58% 50%, #28221e 0%, #191716 52%, var(--pa-0) 100%); }
/* a low warm light behind the object */
.pa-visual::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(36% 30% at 57% 50%, rgba(192,138,87,.15), rgba(192,138,87,0) 72%); }
/* the nugget: large, cut by the frame, almost in the dark */
.pa-visual__obj{ position:absolute; z-index:0; top:50%; left:57%; height:70%; width:auto; max-width:none; transform:translate(-50%,-50%) rotate(-8deg);
  filter:brightness(.38) saturate(1.02) contrast(1.08); opacity:.9; user-select:none; -webkit-user-select:none; pointer-events:none; }
/* the morph (portal/visual.js): its first frame is the stone above, same size and place, so it simply takes over;
   its own edges fade into the frame (the clip's background is the frame's own dark) */
.pa-visual__vid{ position:absolute; z-index:0; top:50%; left:57%; height:110.6%; width:auto; aspect-ratio:1100/1600; max-width:none; object-fit:cover;
  transform:translate(-50%,-50%); opacity:0; transition:opacity 1.2s var(--ease); pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  mask-composite:intersect; }
.pa-visual.is-morph .pa-visual__vid{ opacity:1; }
.pa-visual__obj{ transition:opacity .6s; }
.pa-visual.is-morph .pa-visual__obj{ opacity:0; transition-delay:1.2s; }
.pa-visual__veil{ position:absolute; inset:0; z-index:1; pointer-events:none; background:
  radial-gradient(42% 36% at 56% 40%, rgba(192,138,87,.11), rgba(192,138,87,0) 70%),
  radial-gradient(90% 70% at 57% 50%, rgba(18,17,16,0) 22%, rgba(18,17,16,.8) 64%, rgba(15,14,13,.97) 100%),
  linear-gradient(0deg, rgba(15,14,13,.95) 0%, rgba(15,14,13,0) 46%), linear-gradient(180deg, rgba(15,14,13,.6) 0%, rgba(15,14,13,0) 24%); }
.pa-visual__cap{ position:absolute; z-index:2; left:var(--gut); right:var(--gut); bottom:clamp(32px,7vh,72px); display:grid; gap:10px; }
.pa-visual__name{ font-size:.74rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--pa-hi); }
.pa-visual__label{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--pa-mute); }
/* the monogram's line and its signal dot, drawn long */
.pa-signal{ position:relative; height:1px; margin-top:14px; background:linear-gradient(90deg, rgba(174,167,163,.3), rgba(174,167,163,.06)); }
.pa-signal::after{ content:""; position:absolute; top:50%; right:22%; width:7px; height:7px; border-radius:50%; background:var(--pa-cu);
  transform:translate(50%,-50%); box-shadow:0 0 0 5px rgba(121,82,56,.14); }

.pa-main{ position:relative; display:flex; align-items:center; justify-content:center; padding:116px clamp(24px,5vw,96px) 56px; border-left:1px solid var(--pa-line);
  background:radial-gradient(70% 50% at 100% 0%, rgba(121,82,56,.12), rgba(121,82,56,0) 70%), radial-gradient(60% 50% at 0% 100%, rgba(82,82,84,.14), rgba(82,82,84,0) 70%), var(--pa-2); }
.pa-panel{ position:relative; width:100%; max-width:400px; animation:paIn .5s var(--ease) both; }

/* ---------------- the copy ---------------- */
.pa-eyebrow{ font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--pa-cu-lite); margin-bottom:22px; }
.pa-h{ font-size:clamp(2rem, 1.1rem + 1.9vw, 2.75rem); font-weight:600; line-height:1.05; letter-spacing:-.032em; color:var(--pa-hd); outline:none; }
.pa-body{ margin-top:14px; font-size:.97rem; line-height:1.6; color:var(--pa-tx); max-width:40ch; }

/* ---------------- the form ---------------- */
.pa-form{ margin-top:34px; display:grid; gap:18px; }
.pf{ display:grid; gap:8px; }
.pf__label{ font-size:.8rem; font-weight:500; letter-spacing:.01em; color:var(--pa-stone); }
.pf__box{ position:relative; }
.pf__icon{ position:absolute; left:16px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:var(--pa-mute); pointer-events:none; transition:color .2s; }
.pf__input{ display:block; width:100%; height:52px; padding:0 16px 0 46px; border:1px solid var(--pa-line2); border-radius:12px; background:var(--pa-field);
  color:var(--pa-hi); font:500 1rem/1.2 var(--font); letter-spacing:.005em; caret-color:var(--pa-cu-lite);
  -webkit-appearance:none; appearance:none; transition:border-color .2s, background-color .2s; }
.pf__input--pw{ padding-right:54px; }
.pf__input:hover{ border-color:var(--pa-line3); }
.pf__input:focus{ outline:none; border-color:var(--pa-cu-lite); background:var(--pa-field-on); }
.pf__input:focus-visible{ outline:2px solid rgba(192,138,87,.55); outline-offset:2px; }
.pf__box:focus-within .pf__icon{ color:var(--pa-cu-m); }
.pf__input[aria-invalid="true"]{ border-color:rgba(208,140,123,.72); }
.pf__input:-webkit-autofill, .pf__input:-webkit-autofill:hover, .pf__input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--pa-hi); -webkit-box-shadow:0 0 0 60px #171615 inset; caret-color:var(--pa-cu-lite); transition:background-color 9999s; }
.pf__err{ font-size:.8rem; line-height:1.45; color:var(--pa-err-tx); }
.pf__err:empty{ display:none; }
.pf__err.is-on{ animation:paFade .2s var(--ease) both; }
/* show / hide: inside the field, 44 px to touch */
.pf__eye{ position:absolute; right:4px; top:50%; width:44px; height:44px; display:grid; place-items:center; margin-top:-22px; padding:0; border:0; border-radius:10px;
  background:none; color:var(--pa-mute); cursor:pointer; transition:color .2s, background .2s; -webkit-tap-highlight-color:transparent; }
.pf__eye:hover{ color:var(--pa-hi); background:rgba(174,167,163,.06); }
.pf__eye:focus-visible{ outline-offset:-3px; }
.pf__eye svg{ width:19px; height:19px; }
.pf__eye .pf__eye-off, .pf__eye[aria-pressed="true"] .pf__eye-on{ display:none; }
.pf__eye[aria-pressed="true"] .pf__eye-off{ display:block; }

.pa-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; margin:-6px 0 -4px; }
.pc{ position:relative; display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:.86rem; color:var(--pa-stone); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.pc__input{ position:absolute; left:0; top:50%; width:20px; height:20px; margin:-10px 0 0; opacity:0; cursor:pointer; }
.pc__box{ flex:none; display:grid; place-items:center; width:20px; height:20px; border:1px solid var(--pa-line3); border-radius:6px; background:var(--pa-field); color:var(--pa-hd);
  transition:background-color .2s, border-color .2s; }
.pc__box svg{ width:14px; height:14px; opacity:0; transform:scale(.8); transition:opacity .2s, transform .2s; }
.pc:hover .pc__box{ border-color:rgba(174,167,163,.5); }
.pc__input:checked + .pc__box{ background:var(--pa-cu); border-color:var(--pa-cu); }
.pc__input:checked + .pc__box svg{ opacity:1; transform:none; }
.pc__input:focus-visible + .pc__box{ outline:2px solid var(--pa-cu-lite); outline-offset:3px; }

.pa-link{ display:inline-flex; align-items:center; min-height:44px; font-size:.86rem; color:var(--pa-stone); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:4px; text-decoration-color:rgba(192,138,87,.5); transition:color .2s, text-decoration-color .2s; }
.pa-link:hover{ color:var(--pa-hi); text-decoration-color:var(--pa-cu-lite); }
.pa-back{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--pa-stone);
  transition:color .2s; }
.pa-back svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.pa-back:hover{ color:var(--pa-hi); }
.pa-back:hover svg{ transform:translateX(-3px); }

/* the action: copper, the bar's round ends; busy, it keeps its size (the label stays, a small ring joins it) */
.pb{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:54px; padding:14px 48px; border:1px solid transparent; border-radius:999px;
  background:var(--pa-cu); color:var(--pa-hd); font-size:.76rem; font-weight:600; line-height:1.3; letter-spacing:.16em; text-transform:uppercase; text-align:center; cursor:pointer;
  transition:background-color .25s, border-color .25s, color .25s; -webkit-tap-highlight-color:transparent; }
.pb:hover{ background:var(--pa-cu-hover); }
.pb:active{ transform:translateY(1px); }
.pb:disabled{ cursor:default; }
.pb:disabled:active{ transform:none; }
.pb__label{ transition:opacity .2s; }
.pb.is-busy .pb__label{ opacity:.62; }
.pb__load{ position:absolute; top:50%; right:22px; width:14px; height:14px; margin-top:-7px; border:1.5px solid rgba(246,242,236,.26); border-top-color:var(--pa-hd); border-radius:50%;
  opacity:0; transition:opacity .2s; }
.pb.is-busy .pb__load{ opacity:1; animation:paSpin .8s linear infinite; }
.pb--ghost{ width:auto; min-height:48px; padding:12px 26px; background:transparent; border-color:var(--pa-line2); color:var(--pa-hi); gap:12px; }
.pb--ghost:hover{ background:rgba(174,167,163,.05); border-color:var(--pa-cu-lite); }
.pb--ghost svg{ width:16px; height:16px; }
.pb--ghost > svg{ transition:opacity .2s; }
.pb--ghost .pb__load{ left:26px; right:auto; width:16px; height:16px; margin-top:-8px; border-color:rgba(246,242,236,.2); border-top-color:var(--pa-cu-lite); }
.pb--ghost.is-busy > svg{ opacity:0; }
.pa-form .pb{ margin-top:4px; }
/* the human check (captcha.js): Cloudflare's widget, always shown, centred, as wide as the form (its own minimum,
   300 px); its height kept from the start, so the form does not jump when it arrives */
.pa-captcha:empty:not(.is-on){ display:none; }
.pa-captcha.is-on{ display:flex; justify-content:center; min-height:65px; }
.pa-captcha.is-on.is-compact{ min-height:140px; }
.pa-captcha__err{ margin-top:-8px; }

/* the one message of the page (aria-live): nothing until it speaks */
.pa-msg{ font-size:.86rem; line-height:1.5; border-radius:12px; }
.pa-msg.is-on{ margin-top:18px; padding:12px 14px; border:1px solid transparent; animation:paFade .25s var(--ease) both; }
.pa-msg.is-error{ color:var(--pa-err-tx); border-color:rgba(208,140,123,.3); background:rgba(208,140,123,.07); }
.pa-msg.is-info{ color:var(--pa-tx); border-color:var(--pa-line2); background:rgba(174,167,163,.05); }
.pa-msg.is-ok{ color:#cdd8cf; border-color:rgba(127,160,138,.3); background:rgba(127,160,138,.07); }

.pa-foot{ margin-top:34px; padding-top:22px; border-top:1px solid var(--pa-line); display:grid; gap:8px; font-size:.8rem; line-height:1.55; color:var(--pa-mute); }
.pa-foot a{ color:var(--pa-stone); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(192,138,87,.5); transition:color .2s, text-decoration-color .2s; }
.pa-foot a:hover{ color:var(--pa-hi); text-decoration-color:var(--pa-cu-lite); }
.pa-view .pa-back{ margin-top:14px; }

/* ---------------- the new password: what it needs, how strong it is ---------------- */
.pm{ display:grid; gap:12px; margin-top:-4px; }
.pm__head{ display:flex; align-items:center; gap:12px; }
.pm__bar{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.pm__bar i{ height:3px; border-radius:2px; background:rgba(174,167,163,.14); transition:background-color .25s; }
.pm[data-level="1"] .pm__bar i:nth-child(1){ background:var(--pa-err); }
.pm[data-level="2"] .pm__bar i:nth-child(-n+2), .pm[data-level="3"] .pm__bar i:nth-child(-n+3){ background:var(--pa-cu-lite); }
.pm[data-level="4"] .pm__bar i{ background:var(--pa-ok); }
.pm__label{ flex:none; min-width:8.5em; text-align:right; font-size:.76rem; color:var(--pa-mute); }
.pm__level{ color:var(--pa-hi); }
.pm[data-level="0"] .pm__label{ visibility:hidden; }
.pm__list{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 14px; font-size:.78rem; line-height:1.35; color:var(--pa-mute); }
.pm__list li{ display:flex; align-items:center; gap:8px; transition:color .2s; }
.pm__list svg{ flex:none; width:15px; height:15px; }
.pm__list .o{ opacity:.45; transition:opacity .2s, stroke .2s; }
.pm__list .v{ opacity:0; transition:opacity .2s; }
.pm__list li.is-ok{ color:var(--pa-tx); }
.pm__list li.is-ok svg{ color:var(--pa-ok); }
.pm__list li.is-ok .o{ opacity:.55; } .pm__list li.is-ok .v{ opacity:1; }
.pm__rec{ font-size:.78rem; color:var(--pa-cu-m); }

/* ---------------- the portal's first screen (index.html) ---------------- */
.pp-wait{ position:fixed; inset:0; z-index:20; display:grid; place-items:center; align-content:center; gap:22px; background:var(--pa-2); }
.pp-wait img{ width:54px; height:auto; opacity:.9; }
.pp-wait__line{ position:relative; width:120px; height:1px; overflow:hidden; background:rgba(174,167,163,.16); }
.pp-wait__line::after{ content:""; position:absolute; top:0; left:0; width:36px; height:1px; background:var(--pa-cu-lite); animation:paRun 1.4s var(--ease) infinite; }
.pp-wait__txt{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--pa-mute); }
html:not(.auth-pending) .pp-wait{ display:none; }
/* nothing of the portal is laid out before the session and the profile are confirmed (portal.js): the dashboard's shell
   and its layers (portal/dashboard.css) stay out of the layout */
html.auth-pending .db, html.auth-pending .db-layer, html.auth-pending .db-pop, html.auth-pending .db-tip, html.auth-pending .db-toast{ display:none !important; }

.pp-status{ display:inline-flex; align-items:center; gap:10px; font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--pa-stone); }
.pp-dot{ width:7px; height:7px; border-radius:50%; background:var(--pa-ok); box-shadow:0 0 0 4px rgba(127,160,138,.14); }

/* ---------------- motion ---------------- */
@keyframes paIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes paFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes paSpin{ to{ transform:rotate(360deg); } }
@keyframes paRun{ from{ transform:translateX(-36px); } to{ transform:translateX(120px); } }
@keyframes paPulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
.is-enter{ animation:paIn .5s var(--ease) both; }

/* ---------------- tablet: the atmosphere narrower ---------------- */
@media (max-width:1023px){
  .pa-shell{ grid-template-columns:minmax(0,.58fr) minmax(0,1fr); }
  .pa-visual__obj{ height:36%; left:50%; top:46%; }
  .pa-visual__vid{ height:56.9%; left:50%; top:46%; }
  .pa-visual__label{ display:none; }
  .pa-main{ padding-left:clamp(24px,4.2vw,56px); padding-right:clamp(24px,4.2vw,56px); }
}
@media (min-width:641px){
  /* the bar floats over the frame (the atmosphere reaches the top) */
  .pa-top{ position:absolute; inset:0 0 auto 0; pointer-events:none; }
  .pa-top > *{ pointer-events:auto; }
}
/* ---------------- phones: the form first; the atmosphere is the bar's hairline and its dot ---------------- */
@media (max-width:640px){
  .pa-top{ padding-top:max(16px, env(safe-area-inset-top)); padding-bottom:16px; }
  .pa-top::before{ content:""; position:absolute; left:var(--gut); right:var(--gut); bottom:0; height:1px; background:linear-gradient(90deg, rgba(174,167,163,.24), rgba(174,167,163,.04)); }
  .pa-top::after{ content:""; position:absolute; bottom:0; right:calc(var(--gut) + 22%); width:5px; height:5px; margin-bottom:-2px; border-radius:50%; background:var(--pa-cu); }
  .pa-shell{ display:flex; flex-direction:column; }
  .pa-visual{ display:none; }
  .pa-main{ display:block; flex:1 0 auto; border-left:0; padding:30px var(--gut) calc(40px + env(safe-area-inset-bottom)); }
  .pa-panel{ max-width:440px; margin:0 auto; }
  .pa-h{ font-size:clamp(1.85rem, 8.4vw, 2.3rem); }
  .pa-form{ margin-top:28px; }
  .pa-foot{ margin-top:30px; }
  /* the long labels (ENVIAR ENLACE DE RECUPERACIÓN) keep one line from about 385 px; narrower, two even lines */
  .pb{ letter-spacing:.12em; }
  .pb:not(.pb--ghost){ padding-left:40px; padding-right:40px; }  /* (the busy ring sits at 22 to 36 px from the right) */
  .pb__label{ text-wrap:balance; }
  .pm__list{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:360px){
  .pa-lang{ padding:10px 14px; }
  .pa-brand{ padding:6px 10px; }
}
/* phones held sideways: little height, the page simply scrolls */
@media (max-width:1023px) and (max-height:520px) and (orientation:landscape){
  .pa-main{ align-items:flex-start; padding-top:96px; }
}

/* leaving for the Home (portal/leave.js): the page settles into the site's own charcoal (#1f1e1d, the intro's), out of
   which the Home opens (intro.js arrive()); a going back from the history finds the page as it was */
body.pa::after{ content:""; position:fixed; inset:0; z-index:100; background:#1f1e1d; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .62s cubic-bezier(.65,0,.35,1), visibility 0s linear .62s; }
html.pa-leave body.pa::after{ opacity:1; visibility:visible; transition:opacity .62s cubic-bezier(.65,0,.35,1); }
/* arriving from the site (portal/entry.js): the page starts on that charcoal and opens out of it (portal/leave.js) */
html.pa-arrive body.pa::after{ opacity:1; visibility:visible; transition:none; }
.pa-shell{ transition:transform .8s var(--ease); }
html.pa-leave .pa-shell{ transform:scale(.985); }

@media (prefers-reduced-motion:reduce){
  .pa-visual__vid{ display:none; }
  .pa-panel, .is-enter{ animation-name:paFade; }
  .pb.is-busy .pb__load{ animation:paPulse 1.6s ease-in-out infinite; }
  .pp-wait__line::after{ animation:none; left:42px; }
  .pa-back:hover svg{ transform:none; }
  .pb:active{ transform:none; }
}