/* the media kit (/media-kit, tools/tatako_media_kit.py): files first, then text; the top stays under a third of the screen */
.kit { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter) 56px; }
.kit [hidden] { display: none; }
.kit figure { margin: 0; }
.kit img { display: block; max-width: 100%; height: auto; }
.kit-top { padding: var(--top-list) 0 20px; }
.kit-top h1 { font-size: var(--h1-page); line-height: 1.16; margin: 0 0 var(--s2); }
.kit-top p { margin: 0; font-size: 18px; line-height: 1.4; color: var(--ink-2); }
.kit-top .kit-btns { margin-top: 12px; }
.kit-top .btn { font-size: 17px; padding: 0.78em 1.3em; }
.kit-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.kit-size { font: 600 13px/1 var(--body); opacity: 0.82; white-space: nowrap; }
.kit-sec { padding: 28px 0; border-top: 1.5px solid var(--edge); scroll-margin-top: 12px; }
.kit-sec h2 { font-size: clamp(22px, 2.4vw, 27px); margin: 0; }
.kit-sec h3 { font-size: 18px; line-height: 1.25; margin: 0 0 4px; }
.kit-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-bottom: 14px; }
.kit-intro { max-width: 46em; margin: 0 0 14px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.kit-sub { margin-top: 22px !important; }
.kit-list { margin: 14px 0 0; padding-inline-start: 1.2em; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.kit-list li { margin-bottom: 4px; }
.kit-tiles, .kit-steps, .kit-logos, .kit-poses, .kit-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kit-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kit-tiles li { background: #fff; border: 1.5px solid var(--edge); border-radius: 16px; padding: 12px 14px; font: 600 15px/1.25 var(--body); color: var(--ink-2); }
.kit-tiles b { display: block; font: 600 clamp(24px, 3vw, 32px)/1.1 var(--head); color: var(--accent-shade); }
.kit-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; counter-reset: step; }
.kit-steps li { counter-increment: step; }
.kit-steps h3::before { content: counter(step) ". "; color: var(--accent-shade); }
.kit-steps p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.kit-facts { margin: 18px 0 0; }
.kit-facts div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 2px 16px; padding: 9px 0; border-top: 1px solid var(--edge); }
.kit-facts dt { font: 600 16px/1.4 var(--head); color: var(--ink); }
.kit-facts dd { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.kit-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kit-logos li { display: flex; align-items: center; justify-content: center; min-height: 112px; padding: 18px; border: 1.5px solid var(--edge); border-radius: 16px; background: var(--c); }
.kit-logos img { width: auto; height: 46px; }
.kit-logos li:nth-child(4) img, .kit-logos li:nth-child(6) img { height: 64px; }
.kit-poses { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kit-poses figure { height: 100%; box-sizing: border-box; padding: 12px; background: var(--sea); border-radius: 16px; }
.kit-poses img { width: 100%; height: 150px; object-fit: contain; }
.kit figcaption { margin-top: 6px; font: 600 14px/1.3 var(--body); color: var(--muted); }
.kit-shots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.6fr); gap: 12px; align-items: start; }
.kit-wide { display: grid; gap: 12px; }
.kit-shots img, .kit-scenes img { width: 100%; border: 1.5px solid var(--edge); border-radius: 14px; box-sizing: border-box; }
.kit-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.kit-lang { margin-top: 10px; padding: 0 18px; background: #fff; border: 1.5px solid var(--edge); border-radius: 16px; }
.kit-lang summary { padding: 14px 0; font: 600 17px/1.2 var(--head); cursor: pointer; }
.kit-desc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--edge); }
.kit-label { grid-column: 1 / -1; margin: 0; font: 600 13px/1.2 var(--body); color: var(--muted); }
.kit-text { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.kit-text[lang="ar"] { font-size: 18px; line-height: 1.7; }
.kit-desc .btn { align-self: start; }
.kit-file { padding: 12px 0 16px; border-top: 1px solid var(--edge); }
.kit-messages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kit-messages li { padding: 14px 16px; background: #fff; border: 1.5px solid var(--edge); border-radius: 16px; }
.kit-messages p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.kit-founder { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.kit-founder figure { width: 200px; }
.kit-founder figure > a { display: block; }
.kit-founder img { width: 100%; border-radius: 20px; }
.kit-founder figcaption a { color: var(--link); }
.kit-founder p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); max-width: 44em; }
.kit-role { font: 600 15px/1.3 var(--body) !important; color: var(--muted) !important; }
.kit-press { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.kit-press .contact-form { margin-top: 0; }
.kit-press .contact-form label:first-of-type { margin-top: 0; }
.kit-press .note a { color: var(--link); }
@media (max-width: 760px) {
  .kit-top p { font-size: 16.5px; }
  .kit-top .btn { font-size: 16px; }
  .kit-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-tiles li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kit-steps, .kit-messages, .kit-press { grid-template-columns: minmax(0, 1fr); }
  .kit-facts div { grid-template-columns: minmax(0, 1fr); }
  .kit-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-logos li { min-height: 84px; padding: 12px; }
  .kit-logos img { height: 30px; }
  .kit-poses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-poses img { height: 120px; }
  .kit-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-wide { grid-column: 1 / -1; }
  .kit-desc { grid-template-columns: minmax(0, 1fr); }
  .kit-desc .btn { justify-self: start; }
  .kit-founder { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 480px) {  /* both top buttons stay on one row, so the top keeps under a third of a phone screen */
  .kit-top { padding-bottom: 12px; }
  .kit-top .kit-btns { flex-wrap: nowrap; gap: 8px; margin-top: 10px; }
  .kit-top .btn { font-size: 15px; padding: 0.8em 0.9em; white-space: nowrap; }
  .kit-top .kit-size { display: none; }
}
@media (max-width: 340px) {
  .kit-top .kit-btns { gap: 6px; }
  .kit-top .btn { font-size: 14px; padding: 0.85em 0.7em; }
}