/* ==========================================================================
   Amariq Studio (amariq.com/studio) — the few pieces amariq.com does not have.
   Loaded after site.css on Studio pages only. Uses site.css tokens only, never
   new colours, so Studio always looks like part of Amariq.
   ========================================================================== */

/* Logo: the Amariq lockup plus a small "Studio" label, same size as on amariq.com. */
.studio_logo{ display:inline-flex; align-items:center; gap:.625rem; text-decoration:none }
.studio_logo img{ height:1.875rem; width:auto }
.studio_tag{
  display:inline-flex; align-items:center; height:1.5rem; padding:0 .55rem;
  border:1px solid var(--line); border-radius:99px;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap
}

/* Hero proof: the channel avatar in place of client faces. */
.studio_avatar{ width:2rem; height:2rem; border-radius:99px; object-fit:cover; border:1px solid var(--line) }

/* Videos: 16:9 thumbnails. YouTube's hqdefault is 4:3 with black bars, so cover-crop it. */
.video_media{ position:relative }
.video_media img{ aspect-ratio:16/9; object-position:center }
.video_play{
  position:absolute; inset:0; margin:auto; width:3rem; height:3rem; border-radius:99px;
  display:grid; place-items:center; background:rgba(0,0,0,.6); color:#FFFFFF;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform .35s var(--ease), background-color .35s var(--ease)
}
.video_play svg{ width:1rem; height:1rem; fill:currentColor }
.video_card:hover .video_play{ transform:scale(1.08); background:rgba(0,0,0,.8) }
.video_card .work_head .h3{ font-size:1.0625rem; line-height:1.35; text-wrap:balance }
.video_card .work_tags{ padding-block-start:1.25rem }

/* Coming next: a quiet numbered list under the grid. */
.coming_next{ border:1px solid var(--line); border-top:0; padding:var(--cell--pad) }
.coming_head{ font-family:var(--font-mono); font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em }
.coming_list{ list-style:none; padding:0; margin:1.25rem 0 0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem 2rem }
.coming_list li{ display:flex; gap:.875rem; align-items:baseline; color:var(--text); line-height:1.45; text-wrap:pretty }
.coming_num{ font-family:var(--font-mono); font-size:.75rem; color:var(--muted); flex:none }

/* Skill packs: a status pill where amariq.com shows a number. */
.skill_status{
  display:inline-flex; align-items:center; height:1.625rem; padding:0 .65rem; border-radius:99px;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.03em; text-transform:uppercase;
  color:var(--muted); box-shadow:inset 0 0 0 1px var(--line); white-space:nowrap
}
.skill_cell{ min-height:18rem }

/* Principles: plain text cells in the lined grid. */
.principle_cell{ padding:var(--cell--pad); display:flex; flex-direction:column; gap:.75rem; min-height:12rem }
.principle_cell .service_num{ margin-block-end:auto; padding-block-end:1.5rem }
.principle_cell .h3{ font-size:1.25rem; letter-spacing:-0.02em }

/* Signup: the form sits in amariq.com's contact frame; the thank-you replaces the fields. */
.signup_thanks{ grid-column:1 / -1; padding:1rem 1.25rem; border:1px solid var(--line); border-radius:.75rem; color:var(--text) }

@media (max-width: 767px){
  .coming_list{ grid-template-columns:minmax(0,1fr) }
  .studio_tag{ height:1.375rem; font-size:.625rem }
}

/* Scrolled capsule: amariq.com sizes it to its own links (49rem). Studio's logo carries the
   "Studio" tag and its nav is longer (measured 821px of content at 1440), so it gets 55rem. */
@media (min-width:992px){
  html.is-scrolled .header_inner{ max-width:calc(55rem + 2 * var(--cell--pad)) }
  html.is-scrolled .scroll_progress{ inset-inline:calc(50% - 27.5rem + 1rem) }
}

/* Skill cards: a SKILL.md file where amariq.com's service cards draw a scene. It sits in
   the same stage (.sv_scene, from site.css) so the cards keep amariq.com's proportions. */
.skill_code{ display:flex; flex-direction:column; gap:.3rem; padding:.7rem .8rem; font-family:var(--font-mono); font-size:.6875rem; line-height:1.4; color:var(--muted); white-space:nowrap; overflow:hidden }
.skill_code i{ font-style:normal }
.skill_code .is-meta{ opacity:.7 }
.skill_code .is-h{ color:var(--text); font-weight:500 }
.skill_cell > .skill_status{ align-self:flex-start; margin-block-end:.875rem }

/* Phones: logo + "Studio" tag + "Get the free skill" + burger measured 18px wider than a
   375px screen. The button goes below 480px; the hero and the menu both carry the same ask. */
.header .studio_logo{ flex:none }
@media (max-width:479px){ .header_cta .button{ display:none } }

/* Signup panel: the Amariq mark instead of a founder photo, plus two proof figures. */
.studio_brand .studio_brand_mark{ width:3.25rem; height:auto; border-radius:0; outline:0; object-fit:contain }
.studio_proof{ margin:2rem 0 0; display:grid; grid-template-columns:1fr 1fr; border-block:1px solid var(--line) }
.studio_proof > div{ padding-block:1rem; display:flex; flex-direction:column; gap:.25rem }
.studio_proof > div + div{ padding-inline-start:1.25rem; border-inline-start:1px solid var(--line) }
.studio_proof dt{ font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted) }
.studio_proof dd{ margin:0; font-size:1.0625rem; font-weight:500; color:var(--text); letter-spacing:-0.01em }
.studio_proof dd{ font-size:1.375rem; letter-spacing:-0.02em }
/* The signup form is shorter than the panel beside it: keep the fields together at the
   top and send the submit row to the bottom, instead of stretching every row apart. */
#free-skill .form_grid{ grid-template-rows:auto auto 1fr auto; align-content:stretch }
#free-skill .field_grow{ display:flex; flex-direction:column }
#free-skill .field_grow textarea{ flex:1; min-height:7rem; resize:vertical }
#free-skill .form_grid .form_foot{ align-self:end }