/* ==========================================================================
   MAGIK master pages: the pages outside the three divisions, built from the
   same division components (css/magik.css section 16) so the whole site is
   one vocabulary: /about, /work, /work/jubaili-agrotec, /contact (with
   contact.css), /contact/thank-you, /privacy, /terms and 404.html. Every
   page opens on the house ink (.dv-hero) and reads on #FFFCFC below it.
   This file only adds what those pages have and the system does not:

     1  Heads: the three-world cards, the film in a hero, the ink seam
     2  Facts: a credits list (dl), the label above or beside a plain value
     3  Work: the index of every kind of work, the client logos
     4  The case study: the storyboard, the split reading, the steps
     5  About: who we are, the founder's words beside the facts
     6  Legal: contents, sections, closing
     7  Not found: the plain links

   Cache: /css/pages/master.css?v=N on all eight pages; bump N on every one
   of them when this file changes.
   ========================================================================== */


/* 1  HEADS ------------------------------------------------------------------ */
/* a hero with no picture keeps its words to a reading width */
.ms-hero .dv-lede{ max-width:600px; }
.ms-hero .dv-title{ max-width:720px; }

/* the three worlds as cards (About and 404 inside the hero, the thank-you
   page on #FFFCFC): the same pictures as the phone menu and the homepage */
.ms-worlds{ margin-top:clamp(48px, 5.6vw, 80px); }
.ms-worlds > .dv-head{ margin-bottom:20px; align-items:baseline; }
.ms-world-cards .dv-card-line{
  font-family:var(--m-sans); font-weight:400; font-size:17px; line-height:1.3; color:var(--m-text);
}
.ms-world-cards .dv-card-body{ gap:10px; }
/* on a phone the three sit as compact rows, picture left, so all three
   worlds are seen at once (as in the phone menu) */
@media (max-width:620px){
  .ms-world-cards{ gap:10px; }
  .ms-world-cards .dv-card{ flex-direction:row; align-items:stretch; min-height:104px; padding-bottom:0; }
  .ms-world-cards .dv-card-media{ width:38%; max-width:180px; aspect-ratio:auto; }
  .ms-world-cards .dv-card-body{ flex:1; justify-content:center; gap:4px; padding:12px 60px 12px 14px; }
  .ms-world-cards .dv-card-title{ font-size:19px; }
  .ms-world-cards .dv-card-kicker{ display:none; }
  .ms-world-cards .dv-card-line{ font-size:18px; }
  .ms-world-cards .dv-card-arrow{ top:50%; bottom:auto; margin-top:-20px; right:12px; }
}

/* the film in a hero: the player takes the picture's place, at true 16:9
   and never above its 1280 x 720 source; its bar sits under it */
.ms-hero-film .m-film{ width:100%; }
.ms-hero-film .m-film-bar{ gap:10px 16px; }
.ms-hero-film .dv-hero-copy .m-actions{ margin-top:30px; }
/* once the film sits right under the words, its own Play is enough */
@media (max-width:960px){ .ms-hero-film .dv-hero-copy .m-play{ display:none; } }

/* ink meets ink: where a page ends on its hero or its close, a hairline
   marks where the footer's night band begins */
.m-main:has(> :is(.dv-close, .dv-hero):last-child) + .m-footer{ border-top:1px solid rgba(255,252,252,.16); }


/* 2  FACTS ------------------------------------------------------------------
   A credits list: the label in 12px capitals, the value in plain 16px type.
   Two or three columns as the width allows; --rows sets the label beside
   the value in one column. */
.ms-facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:0 40px; }
.ms-facts > div{ padding:14px 0 16px; border-top:1px solid var(--m-rule); min-width:0; }
.ms-facts dt{ font-size:12px; font-weight:600; letter-spacing:.16em; line-height:16px; text-transform:uppercase; color:var(--m-muted); }
.ms-facts dd{ margin-top:6px; font-size:16px; line-height:1.5; color:var(--m-text); overflow-wrap:anywhere; }
.ms-facts dd a{
  display:inline-flex; align-items:center; min-height:44px; margin:-10px 0;
  text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px;
}
.ms-facts dd a:hover{ text-decoration-thickness:2px; }
.ms-facts--rows{ grid-template-columns:minmax(0, 1fr); }
.ms-facts--rows > div{ display:grid; grid-template-columns:minmax(0, 11em) minmax(0, 1fr); gap:4px 24px; align-items:baseline; }
.ms-facts--rows > div:last-child{ border-bottom:1px solid var(--m-rule); }
.ms-facts--rows dd{ margin-top:0; }
@media (max-width:599px){
  .ms-facts--rows > div{ grid-template-columns:minmax(0, 1fr); }
}


/* 3  WORK -------------------------------------------------------------------- */
/* every kind of work: one column per division, each row a door to its page */
.ms-index{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px clamp(24px, 3.4vw, 56px); }
.ms-index-head{ margin-bottom:6px; }
.ms-index-head a{ display:inline-flex; align-items:center; gap:10px; min-height:44px; color:inherit; }
.ms-index-head a:hover{ text-decoration:underline; text-underline-offset:.35em; text-decoration-thickness:1px; }
.ms-index .dv-row{ grid-template-columns:minmax(0, 1fr) auto; }
.ms-index .dv-row-label, .ms-index .dv-row-line{ grid-column:1; }
.ms-index .dv-row-arrow{ grid-column:2; grid-row:1 / span 2; }
@media (max-width:960px){
  /* two columns: Creative on the left, Tech and Pathways stacked on the right */
  .ms-index{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ms-index > :first-child{ grid-row:span 2; }
}
@media (max-width:620px){
  .ms-index{ grid-template-columns:minmax(0, 1fr); gap:32px; }
  .ms-index > :first-child{ grid-row:auto; }
}

/* the clients: logos as supplied, never recoloured or cropped */
.ms-clients-band{ padding-top:clamp(48px, 4.4vw, 64px); padding-bottom:clamp(48px, 4.4vw, 64px); }
.ms-clients{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 48px; }
.ms-logos{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.ms-logos li{ display:flex; align-items:center; justify-content:center; height:112px; padding:8px; border:1px solid var(--m-rule); background-color:#FFFFFF; }
.ms-logos img{ display:block; width:auto; height:96px; max-width:100%; }
@media (max-width:420px){
  .ms-logos{ gap:10px; }
  .ms-logos li{ height:80px; }
  .ms-logos img{ height:64px; }
}


/* 4  THE CASE STUDY ------------------------------------------------------------
   The storyboard: four cleared frames at true 16:9; each opens the film at
   its moment (js/pages/case-study.js). The buttons stay hidden until the
   script has wired them, so none is ever a button that does nothing. */
.ms-frames{ list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:36px 20px; }
.ms-frames .m-frame-cap{ font-size:16px; }
.ms-seek{ margin-top:4px; padding:0; background:transparent; border:0; cursor:pointer; font-family:var(--m-sans); }
[data-seek]:not(.is-ready){ visibility:hidden; }
@media (max-width:1099px){ .ms-frames{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
/* on a phone the frames become a sideways rail that bleeds to the screen
   edges and shows the next frame's edge; the section clips it */
@media (max-width:559px){
  .ms-frames{
    display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin-left:calc(-1 * var(--m-g)); margin-right:calc(-1 * var(--m-g));
    padding:0 var(--m-g) 4px; scroll-padding:0 var(--m-g);
  }
  .ms-frames > li{ position:relative; flex:0 0 min(80vw, 320px); scroll-snap-align:start; }
}

/* the split reading: the head on the left, the facts on the right */
.ms-split{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); gap:32px clamp(40px, 7vw, 112px); align-items:start; }
.ms-body{ max-width:520px; margin-top:22px; font-size:17px; line-height:1.6; color:var(--m-text-2); }
@media (max-width:899px){ .ms-split{ grid-template-columns:minmax(0, 1fr); } }

/* a process as rows (About, the case study): a wider label column */
.ms-steps{ --dv-row-label:200px; }
.ms-steps--wide{ --dv-row-label:320px; }
.ms-steps .dv-row{ grid-template-columns:minmax(0, var(--dv-row-label)) minmax(0, 1fr); min-height:72px; }
@media (max-width:720px){
  .ms-steps .dv-row{ grid-template-columns:minmax(0, 1fr); }
}
.ms-folds{ margin-top:clamp(40px, 4vw, 56px); }


/* 5  ABOUT -------------------------------------------------------------------
   Who we are: how MAGIK began in the founder's words, his photograph small
   beside them, then the facts that let a visitor find MAGIK (section 2's
   list, label beside value). The photograph's file is 200px square, so it
   is shown at 120 to 144px and never enlarged. Story and facts sit side by
   side from 1200px, each opening on a hairline at the same height, the
   facts with a narrower label column so the email never breaks; below
   that they stack, and on a phone the photograph and its caption (name,
   then role) share one row above his words. What MAGIK has not supplied
   yet (the CAC number) is left out (AGENTS.md section 4 says where that
   list is kept). */
.ms-who{ display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(48px, 5vw, 64px); }
.ms-who-label{
  padding-top:14px; border-top:1px solid var(--m-rule);
  font-size:12px; font-weight:600; letter-spacing:.16em; line-height:16px; text-transform:uppercase; color:var(--m-muted);
}
.ms-founder{
  display:grid; grid-template-columns:144px minmax(0, 1fr); grid-template-areas:"photo story" "photo cap";
  gap:0 clamp(24px, 2.4vw, 36px); align-items:start; max-width:760px; margin-top:24px;
}
.ms-founder-photo{ grid-area:photo; display:block; width:144px; }
.ms-founder-photo img{ display:block; width:100%; height:auto; aspect-ratio:1 / 1; }
.ms-story{ grid-area:story; }
.ms-story p{
  font-size:clamp(18px, 1.55vw, 22px); line-height:1.55; color:var(--m-text);
  text-indent:-.4em; /* the opening quote hangs, so the words keep one edge */
}
.ms-founder-cap{
  grid-area:cap; margin-top:18px;
  font-size:12px; font-weight:600; letter-spacing:.16em; line-height:16px; text-transform:uppercase; color:var(--m-muted);
}
@media (min-width:1200px){
  .ms-who{ grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); column-gap:clamp(56px, 6vw, 112px); align-items:start; }
  .ms-who-label{ line-height:24px; } /* on the facts' first baseline */
  .ms-who-facts > div{ grid-template-columns:152px minmax(0, 1fr); }
}
@media (max-width:599px){
  .ms-founder{ grid-template-columns:120px minmax(0, 1fr); grid-template-areas:"photo cap" "story story"; gap:20px 18px; margin-top:20px; }
  .ms-founder-photo{ width:120px; }
  .ms-founder-cap{ align-self:end; margin-top:0; }
  .ms-founder-name{ display:block; }
  .ms-story p{ text-indent:0; }
}
@media (max-width:359px){
  .ms-founder{ column-gap:16px; }
  .ms-founder-cap{ letter-spacing:.12em; }
}


/* 6  LEGAL ------------------------------------------------------------------
   Long reading on #FFFCFC: the contents stay beside the text on wide
   screens; every section is one numbered heading and plain paragraphs. */
.lg-body{ display:grid; gap:40px 96px; padding-top:clamp(48px, 5vw, 80px); padding-bottom:var(--m-space-scene); }
@media (min-width:1000px){
  .lg-body{ grid-template-columns:minmax(220px, 300px) minmax(0, 720px); align-items:start; }
  .lg-toc{ position:sticky; top:96px; }
}
.lg-toc{ padding-top:20px; border-top:1px solid var(--m-rule); }
.lg-toc ol{ list-style:none; margin-top:10px; }
.lg-toc a{
  display:flex; align-items:baseline; gap:14px; min-height:44px; padding:11px 0;
  font-size:16px; line-height:1.4; color:var(--m-text);
}
.lg-toc a:hover span:last-child{ text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px; }
.lg-num{
  flex:none; min-width:22px;
  font-size:12px; font-weight:600; letter-spacing:.16em; line-height:16px;
  font-variant-numeric:tabular-nums; color:var(--m-muted);
}
.lg-meta{ max-width:680px; font-size:clamp(18px, 1.4vw, 20px); line-height:1.6; color:var(--m-text-2); }
.lg-section{
  margin-top:clamp(40px, 4vw, 56px); padding-top:clamp(28px, 3vw, 40px);
  border-top:1px solid var(--m-rule); scroll-margin-top:88px;
}
.lg-h2{
  display:flex; align-items:baseline; gap:16px;
  font-size:clamp(24px, 2.2vw, 30px); font-weight:600; line-height:1.2; letter-spacing:-.005em; color:var(--m-text);
}
.lg-copy{ margin-top:16px; }
.lg-copy ul{ list-style:none; }
.lg-copy li{ position:relative; padding-left:22px; }
.lg-copy li + li{ margin-top:8px; }
.lg-copy li::before{ content:""; position:absolute; left:2px; top:.72em; width:6px; height:6px; background:var(--m-text); }
.lg-copy strong{ font-weight:600; color:var(--m-text); }
.lg-closing{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 40px;
  margin-top:clamp(56px, 6vw, 88px); padding-top:32px; border-top:1px solid var(--m-rule);
}
.lg-closing p{ max-width:460px; font-size:18px; line-height:1.55; color:var(--m-text); }


/* 7  NOT FOUND ----------------------------------------------------------------- */
.ms-links{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 40px; margin-top:clamp(40px, 4vw, 56px); padding-top:20px; border-top:1px solid var(--m-rule); }
.ms-links ul{ list-style:none; display:flex; flex-wrap:wrap; gap:0 32px; }
.ms-links a{ display:inline-flex; align-items:center; min-height:44px; min-width:44px; font-size:16px; font-weight:600; color:var(--m-text); }
.ms-links a:hover{ text-decoration:underline; text-underline-offset:.35em; text-decoration-thickness:1px; }