/* ==========================================================================
   Phase — tutorials (tutorials.html + tutorials/*)
   The poster theme (css/home.css) on the resources pages.
   - the index: the sticker hero with a yellow disc, the manifesto, then
     the tutorials as big colour cards (one colour + shape each)
   - an article: a compact (not pinned) hero in that tutorial's colour —
     a disc behind the title, one of the shapes, the tags as chips — then
     the article set for reading, the other tutorials, and the close
   Code windows, swatches and hover previews keep their behaviour
   (js/code-blocks.js); only their dress changes.
   ========================================================================== */

body.tutorials-page{--hm-ground:var(--p-yellow)}

/* ==========================================================================
   INDEX
   ========================================================================== */
.tutorials-page .hm-sun{--s:clamp(250px,28vw,480px);left:64%;top:54%}
.tutorials-page .hm-hero h1{font-size:clamp(3.8rem,13vw,13rem);letter-spacing:-.06em}

.rs-list{padding:clamp(110px,12vw,170px) 0 clamp(90px,10vw,140px)}
.rs-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.rs-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  min-height:clamp(300px,30vw,400px);
  padding:clamp(26px,3vw,42px);
  border-radius:32px;
  color:var(--fg,#0a0a0a);
  background:var(--c);
  box-shadow:0 40px 70px -50px rgba(10,10,10,.55);
  transition:transform .45s var(--fl-ease),box-shadow .45s var(--fl-ease);
}
.rs-card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 50px 80px -46px rgba(10,10,10,.6)}
.rs-card__kicker{font-family:var(--fl-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.rs-card h2{max-width:13ch;margin-top:auto;font-size:clamp(1.8rem,3vw,2.8rem);font-weight:600;letter-spacing:-.04em;line-height:1}
.rs-card p{max-width:36ch;font-size:1rem;line-height:1.55;color:inherit;opacity:.85}
.rs-card__go{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  padding:11px 18px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:.92rem;
  color:var(--c);
  background:var(--fg,#0a0a0a);
}
.rs-card__go svg{width:15px;height:15px;transition:transform .35s var(--fl-ease)}
.rs-card:hover .rs-card__go svg{transform:translateX(3px)}
.rs-card__art{
  position:absolute;
  right:-5%;
  top:-12%;
  z-index:-1;
  width:clamp(104px,12vw,170px);
  height:auto;
  transform:rotate(var(--r,0deg));
  transition:transform .6s var(--fl-ease);
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.18));
}
.rs-card:hover .rs-card__art{transform:rotate(calc(var(--r,0deg) + 10deg)) scale(1.05)}

/* ==========================================================================
   ARTICLE — the hero
   ========================================================================== */
.ar-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:calc(var(--fl-nav) + clamp(50px,7vw,100px)) 0 clamp(60px,7vw,100px);
}
.ar-hero__disc{
  position:absolute;
  right:clamp(-160px,-6vw,-40px);
  top:clamp(60px,9vw,120px);
  z-index:-1;
  width:clamp(260px,34vw,520px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--c);
  animation:ar-pop 1.1s var(--fl-ease) both .1s;
}
.ar-hero__sticker{
  position:absolute;
  right:clamp(20px,16vw,300px);
  top:clamp(60px,8vw,110px);
  z-index:-1;
  width:clamp(80px,10vw,150px);
  height:auto;
  transform:rotate(var(--r,0deg));
  filter:drop-shadow(0 16px 20px rgba(60,40,10,.18));
  animation:ar-sticker .9s cubic-bezier(.3,1.6,.5,1) both .5s;
}
@keyframes ar-pop{from{transform:scale(0)}}
@keyframes ar-sticker{from{transform:scale(0) rotate(-40deg);opacity:0}}
.ar-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:clamp(26px,3vw,40px);
  font-family:var(--fl-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fl-dim);
}
.ar-back:hover{color:var(--fl-ink)}
.ar-hero h1{max-width:15ch;font-size:clamp(2.6rem,6vw,5.6rem);font-weight:600;letter-spacing:-.045em;line-height:.98;text-wrap:balance}
.ar-hero__sub{max-width:34em;margin-top:22px;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55;color:var(--fl-dim)}
.ar-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.ar-tags li{
  padding:7px 13px;
  border-radius:var(--radius-pill);
  border:1px solid var(--fl-line-2);
  background:var(--fl-surface);
  font-family:var(--fl-mono);
  font-size:.7rem;
  letter-spacing:.08em;
}

/* ==========================================================================
   ARTICLE — the body, set for reading
   ========================================================================== */
.ar-main{padding:clamp(20px,3vw,40px) 0 clamp(90px,10vw,140px)}
.ar-body{max-width:720px}
.ar-body > * + *{margin-top:20px}
.ar-body p,
.ar-body li{font-size:clamp(1.05rem,1.15vw,1.15rem);line-height:1.75;color:rgba(10,10,10,.78)}
.ar-body .lead-in{font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.45;font-weight:600;letter-spacing:-.02em;color:#0a0a0a}
.ar-body h2{margin-top:clamp(44px,5vw,64px);font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:600;letter-spacing:-.035em;line-height:1.1;color:#0a0a0a}
.ar-body strong{color:#0a0a0a}
.ar-body a{color:#0a0a0a;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--c)}
.ar-body ul,.ar-body ol{padding-left:1.2em;list-style:disc}
.ar-body ol{list-style:decimal}

/* code windows: ink, with the palette's three dots */
.ar-body .code-window{margin:28px 0;border-radius:20px;background:#121216;border:0;box-shadow:0 30px 60px -36px rgba(10,10,10,.6)}
.ar-body .code-window__bar{background:#1b1b20;border-bottom:1px solid rgba(255,255,255,.06)}
.ar-body .code-window__dots i{background:var(--p-red)}
.ar-body .code-window__dots i:nth-child(2){background:var(--p-yellow)}
.ar-body .code-window__dots i:nth-child(3){background:var(--p-green)}
.ar-body .code-window__copy:hover{color:var(--p-yellow)}

/* the tip: a yellow note pinned to the page */
.ar-body .tip{
  margin:30px 0;
  padding:20px 22px;
  border:0;
  border-radius:20px;
  background:color-mix(in srgb,var(--p-yellow) 26%,var(--fl-surface));
  box-shadow:inset 4px 0 0 var(--p-yellow);
}
.ar-body .tip__icon{color:#0a0a0a;background:var(--p-yellow)}
.ar-body .tip p{color:rgba(10,10,10,.8)}

/* ==========================================================================
   ARTICLE — more tutorials
   ========================================================================== */
.ar-more{padding:clamp(80px,9vw,130px) 0;background:var(--fl-bg-2)}
.ar-more .fl-label{margin-bottom:clamp(20px,2.4vw,32px)}
.ar-more__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.ar-more .rs-card{min-height:260px;border-radius:26px}
.ar-more .rs-card h2{font-size:clamp(1.3rem,1.8vw,1.7rem)}
.ar-more .rs-card p{display:none}
.ar-more .rs-card__art{width:clamp(76px,7vw,104px)}
.ar-more .rs-card h3{max-width:13ch;margin-top:auto;font-size:clamp(1.3rem,1.8vw,1.7rem);font-weight:600;letter-spacing:-.03em;line-height:1.05}

.rs-cta .fl-cta__title,
.ar-cta .fl-cta__title{max-width:13ch;font-size:clamp(2.6rem,6.6vw,6.4rem)}
.ar-cta{min-height:auto;padding:clamp(140px,15vw,220px) 0}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .ar-more__grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .rs-grid{grid-template-columns:1fr}
  .ar-hero__disc{right:-30vw;top:40px;width:70vw}
  .ar-hero__sticker{right:6vw;top:calc(var(--fl-nav) + 10px);width:80px}
}
@media (prefers-reduced-motion:reduce){
  .ar-hero__disc,.ar-hero__sticker{animation:none}
}