@charset "UTF-8";
/* ══════════════════════════════════════════════════════════
   STYLE.CSS — Sloth Society
   Site-wide layout and the components shared by more than one
   page: the container width, the page-title lockup, the
   "Come say hi" CTA card and the framed-photo treatment.
   Loaded after common.css so it can build on the tokens.
══════════════════════════════════════════════════════════ */

/* ── CONTAINER ──
   The inner-page artwork measures a 1438px content column in a
   1920 frame. Bootstrap caps at 1320, so lift it from xxl up. */
@media(min-width:1400px){
  .container,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl{max-width:1440px}
}

/* ══════════════════════════════════════════
   PAGE HERO — section.page-hero-01
   The banner every inner page opens with: rules,
   title, rules, tagline. Identical on all four,
   so the section owns its own padding here and
   no page overrides it. Only --rule-w differs.
══════════════════════════════════════════ */
section.page-hero-01{padding:15rem 0 0;text-align:center;position:relative}

/* ══════════════════════════════════════════
   PAGE CTA WRAPPER — section.page-cta
   Holds the shared .cta-frame. Contact is the
   exception: it uses .ct-frame for its own
   two-panel layout inside section.ct-sec-02.
══════════════════════════════════════════ */
section.page-cta{padding:0 0 3rem}

/* ══════════════════════════════════════════
   PAGE TITLE LOCKUP
   Stacked 9px + 3px rules above and below a
   centred Bebas title, then a caps tagline.
   The rule width tracks the title, so each
   page sets its own --rule-w.
══════════════════════════════════════════ */
/* The lockup wrapper. It owns the width, so the two rule
   pairs and the title are measured against one value and the
   whole group can be moved or animated as a unit. Each page
   sets --rule-w because the rule tracks its title length. */
.heading-block{/* width:min(var(--rule-w),84vw); */margin:0 auto;display: inline-block;}
.pt-rules{width:100%;}
.pt-rules hr{opacity:1;border:none}
.pt-rules .hr-thick{border-top:9px solid var(--color-purple);margin:0 0 10px}
.pt-rules .hr-thin{border-top:3px solid var(--color-purple);margin:0}
.pt-rules.is-bottom .hr-thin{margin:0 0 10px}
.pt-title{font-size:clamp(3.4rem,6.2vw,7.4rem);color:var(--color-purple);margin: .3em 1rem .2em;line-height:.82;display: inline-block;}
.pt-tag{font-family:var(--font-display);text-transform:uppercase;font-size: 2.4rem;/* font-size: clamp(1.25rem,1.8vw,2.15rem); */color: var(--color-purple);letter-spacing:-.01em;/* margin-top: 1rem; */}

/* ══════════════════════════════════════════
   FRAMED PHOTO
   White 4px frame, 20px radius, soft shadow.
══════════════════════════════════════════ */
.os-photo{border-radius:var(--r-card);overflow:hidden;border:4px solid var(--color-white);box-shadow:0 10px 34px rgba(48,27,81,.14)}
.os-photo img{transition:transform .7s var(--ease)}
.os-photo:hover img{transform:scale(1.04)}

/* ══════════════════════════════════════════
   CTA — "COME SAY HI"
   A photo frame with a 6px purple border holding a lavender
   card with stacked rules and the mascot straddling its top
   edge. Shared by Our Story, The Space and Become a Sloth.
   Contact reuses the same frame via .ct-frame for its
   two-panel layout.

   Everything here is common. The ONLY per-page value is the
   photograph, which each page sets from its own folder in
   pages/<page>/<page>.css:

       .cta-frame { background-image: url("bg-cta.webp"); }

   Nothing else should be overridden per page.
══════════════════════════════════════════ */
.cta-frame{border:6px solid var(--color-purple);border-radius:30px;overflow:hidden;position:relative;min-height: 90vh;display:flex;align-items:center;justify-content:center;background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment: fixed;background-color:var(--color-purple)}
.cta-overlay{position:absolute;inset:0;background:rgba(0,0,0,.08);z-index:1}
.cta-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;padding:13rem 1rem 6rem}
.cta-card{background:var(--color-lavender);border:6px solid var(--color-purple);border-radius:30px;padding:2.6rem 3rem 2.4rem;text-align:center;max-width:760px;width:100%;position:relative;box-shadow:0 12px 48px rgba(92,68,130,.25)}
.cta-card hr{opacity:1;border:none}
.cta-card .hr-thick{border-top:9px solid var(--color-purple);margin:0 0 5px}
.cta-card .hr-thin{border-top:3px solid var(--color-purple);margin:0 0 1rem}
.cta-card .hr-thin-bot{border-top:3px solid var(--color-purple);margin:1rem 0 5px}
.cta-card .hr-thick-bot{border-top:9px solid var(--color-purple);margin:0 0 1.2rem}
.cta-card h2{font-size: clamp(4.2rem,8vw,8rem);color:var(--color-purple);line-height: .8;margin: 0px 1rem;}
.cta-card .sub{font-family:var(--font-display);text-transform:uppercase;font-size: 2.4rem;/* font-size: clamp(1.25rem,1.6vw,1.8rem); */color:var(--color-purple);letter-spacing:-.01em;margin:0 auto 1.1rem;max-width:26ch;line-height:1.18}
.cta-card .para{max-width:440px;margin:0 auto 1.6rem;line-height:1.6;color:var(--color-dark)}
.cta-mascot{position:absolute;bottom: calc(100% - 13rem);left:50%;transform:translateX(-50%);width:175px;pointer-events:none;z-index:3}
.cta-mascot img{width:100%;height:auto;object-fit:contain}

@media(max-width:991px){
  section.page-hero-01{padding-top:11rem}
  .cta-inner{padding:9rem 1rem 4rem}
  .cta-mascot{bottom:calc(100% - 9rem);width:140px}
}
@media(max-width:767px){
  .heading-block{width:min(300px,72vw)}
  .cta-card{padding:2rem 1.3rem}
}


/* ══════════════════════════════════════════════════════════
   PAGE LOADER / TRANSITION CURTAIN

   A single light panel that lifts upward on arrival and
   drops back down from the same place on departure, so a
   click and the next page's load read as one movement.
   A gradient tail hangs below it, giving the trailing edge
   a soft fade rather than a hard line as it travels.

   State lives on <html>:
     .js            curtain is armed (JS is alive)
     .page-ready    curtain has lifted — set once loaded
     .page-leaving  curtain is dropping back for a navigation

   Without .js the curtain is display:none, so the page can
   never be stranded behind it.
══════════════════════════════════════════════════════════ */
.page-loader{display:none}

html.js .page-loader{
  display:flex;
  position:fixed;inset:0;z-index:100000;
  align-items:center;justify-content:center;
  background:var(--color-bg);
  transform:translateY(0);
  transition:transform 1s cubic-bezier(.76,0,.24,1);
  will-change:transform;
  backface-visibility:hidden;
}
/* A soft tail hanging below the panel, so the trailing edge
   fades into the page instead of cutting hard as it lifts. */
html.js .page-loader:before{
  content:"";
  width:100%;height:100%;
  background:linear-gradient(180deg,#faf7ff,transparent);
  position:absolute;top:100%;left:0;
}

/* lifted away — the resting state once the page is up.
   -200% so the gradient tail clears the viewport too. */
html.js.page-ready .page-loader{
  transform:translateY(-200%);
  pointer-events:none;
}

/* dropping back down for the next page */
html.js.page-leaving .page-loader{
  transform:translateY(0);
  pointer-events:auto;
  transition-duration:1s;
}

/* nothing scrolls behind the curtain while it is down */
html.js:not(.page-ready){overflow-x:hidden;overflow-y:auto}

.pl-inner{display:flex;flex-direction:column;align-items:center;gap:1.6rem}

.pl-mark{
  width:min(260px,58vw);height:auto;
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
html.js .pl-mark{opacity:1;transform:translateY(0);transition-delay:.12s}
/* fade the mark out just ahead of the lift, so the panel
   leaves empty rather than carrying the logo off-screen */
html.js.page-ready .pl-mark{opacity:0;transform:translateY(-8px);transition-delay:0s}

.pl-bar{
  display:block;width:min(180px,42vw);height:3px;border-radius:3px;
  background:rgba(105,68,178,.18);overflow:hidden;
}
.pl-bar i{
  display:block;height:100%;width:40%;border-radius:3px;
  background:var(--color-pink);
  animation:pl-slide 1.15s var(--ease) infinite;
}
@keyframes pl-slide{
  0%  {transform:translateX(-110%)}
  100%{transform:translateX(360%)}
}
html.js.page-ready .pl-bar{opacity:0;transition:opacity .3s}

/* Reduced motion: no curtain movement at all, just show the page. */
@media(prefers-reduced-motion:reduce){
  html.js .page-loader{transition:none}
  html.js .pl-bar i{animation:none;width:100%}
  html.js.page-leaving .page-loader{transform:translateY(-100%)}
}