/* Shym "Our Projects" page in the story look (DESIGN.md section 7). Francis, 20 Oct 2026: the project page should
   "look the part of the new design", with "tweaks on the fonts only and the layout", because Artem already liked the
   page. So every part, its order and its words stay. Only size, space and motion change (The Same Parts Rule).
   Loaded after shym-project.css by inc/project-page.php, only when the page draws the story look (.sp--story,
   staging ?newlook=2). The strips at the end are the category page's (shym-story-parts.css); this file only gives
   them their colours and their column. */

/* ---------- the top: taller, the story heading ---------- */
/* nearly a whole screen under the site header, with room left for the facts bar */
.sp--story .sp-hero{--sp-hero-h:clamp(560px,calc(100svh - 172px),880px)}
.sp--story .sp-hero-copy{padding:72px 24px 132px}
.sp--story .sp-hero-copy>*{max-width:min(520px,44%)}
.sp--story .sp-hero-copy>.sp-h1{max-width:min(800px,52%)}
/* the label is an eyebrow: small capitals, white at 72%, the pin kept */
.sp--story .sp-kicker{height:auto;margin:0 0 22px;padding:0;border-radius:0;background:none;box-shadow:none;font-size:12.5px;font-weight:600;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.sp--story .sp-kicker::before{flex-basis:13px;width:13px;height:13px;opacity:.72}
/* the story headline (600, .96, -.04em). A title that needs two or three lines stops at 88px, a long one at 72px. */
.sp--story .sp-h1{font-size:clamp(40px,5.2vw,88px);font-weight:600;line-height:.96;letter-spacing:-.04em}
.sp--story .sp-h1--long{font-size:clamp(38px,3.9vw,72px)}
.sp--story .sp-h1 .sp-w{display:inline-block}
.sp--story .sp-hero-sub{margin-top:24px;font-size:17px;line-height:1.6}
.sp--story .sp-hero .sp-btnrow{margin-top:32px}
.sp--story .sp-rating{margin-top:26px}

/* the header is see-through at the top (Francis, 20 Oct 2026: "the header should be transparent when on top";
   shym_look_over in site-shell.php): the plum top is pulled up under the bar, as on the category page, and a plum
   shade along the top of the photo keeps the bar's white words readable over a bright sky */
body.shym-look.shym-look-over .sp--story .sp-hero{--sp-hero-h:clamp(636px,calc(100svh - 96px),956px);margin-top:calc(-1 * var(--shym-main-h,76px))}
body.shym-look.shym-look-over .sp--story .sp-hero-copy{padding-top:calc(72px + var(--shym-main-h,76px))}
body.shym-look.shym-look-over .sp--story .sp-hero-photo::after{
  background:linear-gradient(180deg,rgba(38,34,47,.8) 0%,rgba(38,34,47,.66) 8%,rgba(38,34,47,0) 26%),
    linear-gradient(90deg,var(--sp-ink) 0%,rgba(38,34,47,.8) 20%,rgba(38,34,47,.34) 56%,rgba(38,34,47,.1) 100%),linear-gradient(0deg,rgba(38,34,47,.5) 0%,rgba(38,34,47,0) 50%)}

/* the facts bar's icons for an older page: how it was installed, the heat-up time */
.sp--story ul.sp-facts li.sp-i-tool::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M21.700 18.600 13.400 10.300c.8-2.100.4-4.600-1.400-6.300-1.800-1.800-4.600-2.200-6.800-1.200L9 6.600 6.600 9 2.800 5.200c-1 2.200-.6 5 1.200 6.800 1.700 1.700 4.200 2.200 6.300 1.400l8.300 8.300c.4.4 1 .4 1.300 0l1.800-1.800c.4-.4.4-1 0-1.300z'/%3E%3C/svg%3E")}
.sp--story ul.sp-facts li.sp-i-clock::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M12 7.5V12l3 2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* the top photo inside its <picture> (speed: the phone's smaller files) fills the box as the plain photo did */
.sp .sp-hero-photo picture{display:block;width:100%;height:100%}

/* ---------- headings ---------- */
/* a heading over the whole column: the story headline */
.sp--story .sp-head .sp-title{font-size:clamp(40px,5.6vw,88px);font-weight:600;line-height:.96;letter-spacing:-.04em}
/* a heading in a column, a card or the words of an older page: the story place size */
.sp--story .sp-title,.sp--story .sp-article h2{font-size:clamp(28px,2.8vw,48px);font-weight:600;line-height:1.02;letter-spacing:-.035em}
.sp--story .sp-article h2{margin:clamp(40px,4vw,64px) 0 18px}
.sp--story .sp-article>h2:first-child{margin-top:0}
.sp--story .sp-article h3,.sp--story .sp-article h4{margin-top:32px}
/* the review's first words: a story statement in the card */
.sp--story .sp-quote .sp-quote-lead{font-size:clamp(28px,2.8vw,48px);font-weight:500;line-height:1.1;letter-spacing:-.032em}

/* ---------- room: story parts sit 80px to 150px apart on a computer ---------- */
.sp--story .sp-sec{padding:clamp(32px,4.2vw,68px) 0}
.sp--story .sp-factsec+.sp-sec{padding-top:clamp(56px,6vw,104px)}
.sp--story .sp-hero--nofacts+.sp-sec{padding-top:clamp(56px,6vw,104px)}
.sp--story .sp-head{margin-bottom:clamp(28px,3vw,48px)}
.sp--story .sp-stack{gap:22px}
.sp--story .sp-cols,.sp--story .sp-cols--photo,.sp--story .sp-cols--57,.sp--story .sp-story{gap:clamp(40px,5vw,96px)}
.sp--story .sp-panel{padding:clamp(40px,4.4vw,72px)}
.sp--story .sp-card{padding:clamp(32px,3vw,48px)}
.sp--story .sp-aside .sp-card{padding:32px}
.sp--story .sp-panel--aside{padding:28px}

/* ---------- an older page in the rows of Linda's page (project-page.php, shym_proj_story_words_body) ---------- */
/* the first part of the words beside a cream card that stays in view while the words go by */
.sp--story .sp-cols--lead{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
.sp--story .sp-side{position:sticky;top:96px;min-width:0}
.sp--story .sp-side .sp-card{padding:clamp(28px,2.6vw,40px)}
.sp--story .sp-side .sp-panel--aside .sp-product{max-width:none}
/* the project photo beside a part of the words: it stays in view while long words go by */
.sp--story .sp-cols--top{align-items:start}
.sp--story .sp-photo--stay{position:sticky;top:96px}
/* the rest of the words: the heading at the left, the words at the right, a thin line between the rows */
.sp--story .sp-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,96px);align-items:start}
.sp--story .sp-sec--row{padding:0}
.sp--story .sp-sec--row .sp-row{padding:clamp(40px,4vw,64px) 0;border-top:1px solid var(--sp-line)}
.sp--story .sp-sec--row+.sp-sec:not(.sp-sec--row){padding-top:clamp(40px,4vw,64px)}
.sp--story .sp-row-head .sp-title{position:sticky;top:96px}
.sp--story .sp-panel .sp-row{padding:0;border:0}
.sp--story .sp-panel .sp-row-head .sp-title{position:static}
.sp--story .sp-panel .sp-row-head{gap:16px}
.sp--story .sp-solo{max-width:820px}
.sp--story .sp-stack>.sp-article{width:100%}

/* ---------- more projects: the home page's strips on a dark sheet ---------- */
.sp .sp-strips{
  --ink:#26222F;--body:#4A4451;--muted:#645D6A;--line:#E3DCD5;--cream:#EEE9E5;--white:#FFFFFF;
  --orange:#B5412A;--orange-deep:#9C3622;--star:#F6BB06;
  --font:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lift:0 16px 34px -20px rgba(38,34,47,.45);
  --ease:cubic-bezier(.2,.8,.2,1);
  font-family:var(--font);
}
.sp .sp-strips .shym-cat__wrap{position:relative;width:min(1365px,calc(100% - 48px));margin:0 auto}
/* a dark sheet: plum with 28px top corners */
.sp .sp-strips .shym-part.is-projects{margin-top:clamp(24px,3vw,48px);border-radius:28px 28px 0 0}

/* ---------- motion: each part rises in once as it comes on screen (shym-project-story.js) ---------- */
@media (prefers-reduced-motion:no-preference){
  .sp--story.is-rise .sp-rise{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
  .sp--story.is-rise .sp-rise.is-in{opacity:1;transform:none}
  /* the heading's words rise one after another, 55ms apart */
  .sp--story .sp-hero-copy>.sp-h1{animation:none}
  .sp--story .sp-h1 .sp-w{animation:sp-word 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 55ms)}
}
@keyframes sp-word{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* ---------- tablets ---------- */
@media (max-width:1024px){
  .sp--story .sp-hero-copy>*{max-width:min(520px,48%)}
  .sp--story .sp-hero-copy>.sp-h1{max-width:56%}
}

/* ---------- phones ---------- */
@media (max-width:767px){
  .sp--story .sp-hero{--sp-hero-h:auto}
  .sp--story .sp-hero-copy{padding:8px 16px 76px}
  .sp--story .sp-hero--nofacts .sp-hero-copy{padding-bottom:44px}
  .sp--story .sp-hero-copy>*,.sp--story .sp-hero-copy>.sp-h1{max-width:none}
  .sp--story .sp-kicker{margin-bottom:16px}
  .sp--story .sp-h1{font-size:clamp(38px,10.4vw,56px)}
  .sp--story .sp-h1--long{font-size:clamp(34px,9vw,44px)}
  .sp--story .sp-hero-sub{margin-top:16px;font-size:16px}
  .sp--story .sp-hero .sp-btnrow{margin-top:24px}
  .sp--story .sp-head .sp-title{font-size:clamp(34px,9.6vw,48px)}
  .sp--story .sp-title,.sp--story .sp-article h2,.sp--story .sp-quote .sp-quote-lead{font-size:clamp(26px,7.2vw,34px)}
  .sp--story .sp-sec{padding:28px 0}
  .sp--story .sp-factsec+.sp-sec,.sp--story .sp-hero--nofacts+.sp-sec{padding-top:44px}
  .sp--story .sp-cols,.sp--story .sp-cols--photo,.sp--story .sp-cols--57,.sp--story .sp-story{gap:28px}
  .sp--story .sp-panel{padding:28px 20px}
  .sp--story .sp-card{padding:24px 20px}
  .sp--story .sp-cols--lead,.sp--story .sp-row{grid-template-columns:minmax(0,1fr);gap:20px}
  .sp--story .sp-side,.sp--story .sp-photo--stay,.sp--story .sp-row-head .sp-title{position:static}
  .sp--story .sp-sec--row .sp-row{padding:32px 0}
  .sp--story .sp-sec--row+.sp-sec:not(.sp-sec--row){padding-top:32px}
  .sp .sp-strips .shym-cat__wrap{width:calc(100% - 32px)}
  .sp .sp-strips .shym-part.is-projects{border-radius:22px 22px 0 0}
  /* the photo sits at the top, under the see-through bar */
  body.shym-look.shym-look-over .sp--story .sp-hero{--sp-hero-h:auto}
  body.shym-look.shym-look-over .sp--story .sp-hero-copy{padding-top:8px}
  body.shym-look.shym-look-over .sp--story .sp-hero-photo{aspect-ratio:auto;height:calc(100vw + var(--shym-main-h,64px))}
  body.shym-look.shym-look-over .sp--story .sp-hero-photo::after{background:linear-gradient(180deg,rgba(38,34,47,.8) 0%,rgba(38,34,47,.6) 14%,rgba(38,34,47,0) 34%),linear-gradient(0deg,var(--sp-ink) 0%,rgba(38,34,47,0) 26%)}
}