/* =========================================================================
   TOKENS
   ========================================================================= */
:root{
  --paper:      #F5F1E6;
  --paper-dim:  #ECE5D5;
  --ink:        #20261C;
  --ink-soft:   #454E3F;
  --pine:       #2C4635;
  --pine-deep:  #1B2E22;
  --sage:       #7C8B6E;
  --clay:       #9C5A38;
  --slate:      #3C5A66;
  --line:       rgba(32,38,28,0.14);

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --container: 1180px;
  --radius: 4px;
  --ease: cubic-bezier(.22,.68,.35,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.mono{font-family:var(--mono); letter-spacing:0.04em; font-weight:400;}

h1,h2,h3{font-family:var(--display); color:var(--ink); margin:0; font-weight:600;}

a{color:inherit; text-decoration:none;}

img{max-width:100%; display:block;}

::selection{background:var(--pine); color:var(--paper);}

:focus-visible{outline:2px solid var(--clay); outline-offset:3px;}

.grain{position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:0.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.section-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
  position:relative;
  z-index:2;
}
.section-inner-narrow{max-width:760px;}

.eyebrow{
  color:var(--clay);
  font-size:12px;
  text-transform:uppercase;
  margin:0 0 18px;
}

.section{padding:100px 0;}
.section-title{
  font-size:clamp(28px,4vw,44px);
  line-height:1.15;
  max-width:720px;
  margin-bottom:20px;
}
.section-lede{
  max-width:620px;
  color:var(--ink-soft);
  font-size:17px;
  margin-bottom:48px;
}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:var(--radius);
  font-size:15px;
  font-weight:600;
  border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  cursor:pointer;
}
.btn-primary{background:var(--pine); color:var(--paper);}
.btn-primary:hover{background:var(--pine-deep); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--pine); color:var(--pine); transform:translateY(-2px);}
.btn-icon{font-size:14px;}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(245,241,230,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:18px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-brand{display:flex; align-items:center; gap:10px;}
.nav-brand-mark{
  font-family:var(--mono); font-size:12px; font-weight:500;
  border:1px solid var(--ink); border-radius:50%;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
}
.nav-brand-text{font-family:var(--display); font-weight:600; font-size:18px;}
.nav-links{display:flex; align-items:center; gap:28px; font-size:14px;}
.nav-links a{padding-bottom:3px; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;}
.nav-links a:hover, .nav-links a.active{color:var(--pine); border-color:var(--pine);}
.nav-cta{
  background:var(--pine); color:var(--paper) !important;
  padding:9px 18px; border-radius:var(--radius); border-bottom:none !important;
}
.nav-cta:hover{background:var(--pine-deep);}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; width:44px; height:44px; align-items:center; justify-content:center;}
.nav-toggle span{width:22px; height:2px; background:var(--ink); transition:transform .3s, opacity .3s;}
.nav-progress{
  height:2px; background:var(--pine);
  width:0%; transition:width .1s linear;
}

/* =========================================================================
   JOURNEY SCENES — seven-scene scroll-narrative opening.
   Content and per-scene focal point / aspect ratio / scrim intensity come
   from journey-scenes-config.js via CSS custom properties set inline by
   script.js, so image swaps, caption edits, or crop tuning never require
   touching this stylesheet.
   Mobile-first: each panel's height is driven by --scene-aspect (defaults
   to a tall, immersive ratio; wider multi-subject scenes use a shorter,
   more panoramic ratio so less width is cropped away on narrow screens).
   From the 1000px breakpoint up, panels switch to a fixed viewport-based
   cinematic height instead.
   ========================================================================= */
.journey-scenes{
  display:flex;
  flex-direction:column;
}
.scene-panel{
  position:relative;
  width:100%;
  aspect-ratio:var(--scene-aspect, 4/5);
  overflow:hidden;
  background:var(--paper-dim);
}
.scene-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--scene-focal, center);
}
.scene-scrim{
  position:absolute;
  left:0; right:0; bottom:0;
  pointer-events:none;
}
.scene-scrim.scrim-subtle{
  height:38%;
  background:linear-gradient(to top, rgba(20,26,20,0.38), rgba(20,26,20,0));
}
.scene-scrim.scrim-strong{
  height:50%;
  background:linear-gradient(to top, rgba(15,20,15,0.62), rgba(15,20,15,0));
}
.scene-caption{
  position:absolute;
  left:50%; right:auto; top:6%; bottom:auto;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 32px);
  box-sizing:border-box;
  margin:0;
  padding:10px 22px;
  color:#2F3328;
  background:rgba(245,241,230,0.58);
  border-radius:10px;
  font-family:var(--display);
  font-size:clamp(19px,4.6vw,28px);
  font-weight:600;
  line-height:1.3;
  text-align:center;
  text-shadow:none;
  z-index:2;
}
/* Scene 1 — opening thought of the whole journey. Sits in the empty dark
   sky above the Earth rather than over the bright globe, set larger and
   semibold so it reads as the strongest statement to open on. */
.scene-caption-opening{
  position:absolute;
  left:50%;
  right:auto;
  top:9%;
  bottom:auto;
  transform:translateX(-50%);

  width:max-content;
  max-width:calc(100% - 32px);
  margin:0;

  padding:12px 28px;

  color:#2F3328;
  background:rgba(245,241,230,0.58);
  border-radius:12px;

  font-family:var(--display);
  font-size:clamp(22px,6vw,34px);
  font-weight:600;
  line-height:1.3;
  text-align:center;
  letter-spacing:0.01em;

  text-shadow:none;
  box-sizing:border-box;
  white-space:normal;
  overflow-wrap:break-word;

  z-index:2;
}
/* Scene 7 — closing thought. Largest, warmest weight; the strong scrim
   already in place behind it (see .scrim-strong) keeps it legible against
   the busiest scene in the sequence. */
.scene-caption-closing{
  position:absolute;
  left:50%;
  right:auto;
  top:auto;
  bottom:0;
  transform:translateX(-50%);

  width:max-content;
  max-width:calc(100% - 32px);
  margin:0;

  padding:12px 28px;

  color:#2F3328;
  background:rgba(245,241,230,0.58);
  border-radius:12px;

  font-family:var(--display);
  font-size:clamp(21px,5vw,30px);
  font-weight:600;
  line-height:1.3;
  text-align:center;

  text-shadow:none;
  box-sizing:border-box;
  white-space:normal;
  overflow-wrap:break-word;

  z-index:2;
}
@media (min-width:1000px){
  .scene-panel{
    aspect-ratio:auto;
    height:92vh;
    min-height:560px;
  }
  /* Scenes 2-6 - move captions into the open sky.*/
  .scene-caption:not(.scene-caption-opening):not(.scene-caption-closing){
    top:8%;
    padding:12px 26px;
    font-size:clamp(24px,2.6vw,34px);
  }
    /* Scene 1 — desktop opening position. */
  .scene-caption-opening{
    top:14%;
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:max-content;
    max-width:calc(100% - 48px);
    padding:14px 36px;
    font-size:clamp(30px,3.4vw,44px);
  }
  /* Scene 7 — desktop closing position remains at bottom. */
  .scene-caption-closing{
    top: auto; bottom:0;
    font-size:clamp(28px,3vw,38px);
  }
}

/* =========================================================================
   ABOUT
   ========================================================================= */
.section-about{border-top:1px solid var(--line);}
.eyebrow-transition{
  color:var(--ink-soft);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin:28px 0 10px;
}
.about-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:56px;
  align-items:start;
}
.about-portrait{
  float:right;
  width:220px;
  margin:2px 0 20px 28px;
  shape-margin:16px;
}
.about-portrait img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:760/950;
  object-fit:cover;
  object-position:center 18%;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 24px 50px -30px rgba(27,46,34,0.45);
}
.about-lead p{font-size:17px; color:var(--ink-soft); margin:0 0 18px;}
.about-lead strong{color:var(--ink); font-weight:600;}
.capability-note{font-size:10px; color:var(--clay); margin-left:6px; white-space:nowrap;}
.capability-list{list-style:none; margin:0; padding:0; font-size:13.5px;}
.capability-list li{
  padding:12px 0; border-bottom:1px solid var(--line); color:var(--ink-soft);
}
.capability-list li:first-child{padding-top:0;}

/* =========================================================================
   PROFESSIONAL EVOLUTION (JOURNEY)
   ========================================================================= */
.journey-rail{
  display:grid;
  grid-template-columns:repeat(9,1fr);
  gap:0;
  border-top:1px solid var(--line);
  padding-top:22px;
}
.journey-step{
  position:relative;
  padding:0 10px 0 0;
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.35;
}
.journey-step::before{
  content:"";
  position:absolute; top:-23px; left:0;
  width:100%; height:2px; background:var(--sage);
}
.journey-step:first-child::before{background:var(--clay);}
.journey-step:last-child{color:var(--pine); font-weight:600;}
.journey-index{display:block; font-family:var(--mono); font-size:10px; color:var(--clay); margin-bottom:4px;}

/* =========================================================================
   FLOW / DIFFERENTIATOR
   ========================================================================= */
.section-flow{background:var(--pine-deep); color:var(--paper);}
.section-flow .section-title, .section-flow h2{color:var(--paper);}
.section-flow .section-lede{color:rgba(245,241,230,0.7);}
.section-flow .eyebrow{color:#C98A5E;}

.flow-transect{position:relative; padding-top:30px;}
.flow-line{width:100%; height:120px; display:block;}
.flow-line path{fill:none !important; stroke:rgba(245,241,230,0.35); stroke-width:1.5; vector-effect:non-scaling-stroke;}
.flow-points{
  display:grid; grid-template-columns:repeat(6,1fr); gap:10px;
  margin-top:-10px;
}
.flow-point{display:flex; flex-direction:column; gap:6px;}
.flow-index{font-size:11px; color:#C98A5E;}
.flow-label{font-size:13.5px; color:var(--paper); line-height:1.3;}
.flow-point-final .flow-label{color:#E4C9A8; font-weight:600;}

/* =========================================================================
   EXPERTISE
   ========================================================================= */
.expertise-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.expertise-card{
  background:var(--paper);
  padding:28px;
  cursor:pointer;
}
.expertise-card-head{
  display:flex; justify-content:space-between; align-items:center;
}
.expertise-coord{font-size:11px; color:var(--clay);}
.expertise-title{font-family:var(--display); font-size:19px; margin:10px 0 0;}
.expertise-items{
  list-style:none; margin:0; padding:0; font-size:13px; color:var(--ink-soft);
  max-height:0; overflow:hidden; transition:max-height .4s var(--ease), margin-top .4s var(--ease);
}
.expertise-card.open .expertise-items{max-height:260px; margin-top:14px;}
.expertise-items li{padding:5px 0;}
.expertise-toggle{font-size:18px; color:var(--sage); transition:transform .3s var(--ease);}
.expertise-card.open .expertise-toggle{transform:rotate(45deg); color:var(--pine);}

/* =========================================================================
   TIMELINE
   ========================================================================= */
.timeline-origin{
  font-size:12px; color:var(--clay); border:1px solid var(--line);
  padding:14px 18px; border-radius:var(--radius); margin-bottom:36px;
  background:var(--paper-dim);
}
.timeline{position:relative; padding-left:34px; border-left:1px solid var(--line);}
.timeline-item{position:relative; padding-bottom:38px; cursor:pointer;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-dot{
  position:absolute; left:-40px; top:4px;
  width:11px; height:11px; border-radius:50%;
  background:var(--paper); border:2px solid var(--sage);
  transition:background .25s, border-color .25s;
}
.timeline-item[data-category="Leadership"] .timeline-dot{border-color:var(--pine);}
.timeline-item[data-category="Government"] .timeline-dot{border-color:var(--slate);}
.timeline-item[data-category="Research"] .timeline-dot{border-color:var(--clay);}
.timeline-item[data-category="Training"] .timeline-dot{border-color:#C98A5E;}
.timeline-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 16px;}
.timeline-role{font-family:var(--display); font-size:19px; font-weight:600;}
.timeline-period{font-size:12px; color:var(--ink-soft);}
.timeline-org{font-size:14px; color:var(--ink-soft); margin-top:4px;}
.timeline-meta{font-size:11px; color:var(--sage); margin-top:6px;}
.timeline-status{font-size:10px; color:var(--clay); margin-top:6px; text-transform:uppercase;}
.timeline-desc{
  font-size:14px; color:var(--ink-soft); max-width:640px;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s var(--ease), opacity .3s var(--ease), margin-top .4s var(--ease);
}
.timeline-item.open .timeline-desc{max-height:800px; opacity:1; margin-top:12px;}
.timeline-item.open .timeline-dot{background:var(--pine);}
.timeline-toggle-hint{font-size:11px; color:var(--sage); margin-top:8px;}

/* =========================================================================
   PROJECTS
   ========================================================================= */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.project-card{
  padding:26px;
  border:1px solid var(--line);
  background:var(--paper);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.project-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px -18px rgba(32,38,28,0.35); border-color:var(--sage);}
.project-tag{font-size:11px; color:var(--clay); margin-bottom:10px; display:block;}
.project-title{font-family:var(--display); font-size:18px; margin-bottom:10px;}
.project-desc{font-size:13.5px; color:var(--ink-soft);}

/* =========================================================================
   TEACHING
   ========================================================================= */
.teaching-steps{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  font-size:14px; color:var(--pine);
}
.teaching-arrow{color:var(--sage);}

/* =========================================================================
   DIRECTION
   ========================================================================= */
.section-direction{background:var(--paper-dim);}

/* =========================================================================
   CONTACT
   ========================================================================= */
.section-contact{position:relative; background:var(--pine-deep); color:var(--paper); overflow:hidden;}
.section-contact .eyebrow{color:#C98A5E;}
.contact-title{color:var(--paper);}
.section-contact .section-lede{color:rgba(245,241,230,0.75);}
.contact-contours{position:absolute; inset:0; width:100%; height:100%; opacity:0.4; pointer-events:none;}
.contact-contours .contour{stroke:rgba(245,241,230,0.28) !important;}
.contact-ctas{display:flex; flex-wrap:wrap; gap:14px; position:relative; z-index:2; margin-bottom:56px;}
.section-contact .btn-ghost{border-color:rgba(245,241,230,0.35); color:var(--paper);}
.section-contact .btn-ghost:hover{border-color:var(--paper); color:var(--paper);}

.contact-form{position:relative; z-index:2; max-width:520px;}
.form-row{margin-bottom:18px; display:flex; flex-direction:column; gap:8px;}
.form-row label{font-size:11px; color:rgba(245,241,230,0.6);}
.form-row input, .form-row textarea{
  background:rgba(245,241,230,0.06);
  border:1px solid rgba(245,241,230,0.25);
  color:var(--paper);
  padding:12px 14px; border-radius:var(--radius); font-family:var(--body); font-size:14px;
  resize:vertical;
}
.form-row input:focus, .form-row textarea:focus{border-color:#C98A5E; outline:none;}
.form-note{margin-top:14px; font-size:11px; color:rgba(245,241,230,0.5);}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{padding:56px 32px 30px; border-top:1px solid var(--line);}
.footer-inner{
  max-width:var(--container); margin:0 auto;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px;
  padding-bottom:24px;
}
.footer-name{font-family:var(--display); font-size:20px; font-weight:600; margin:0 0 6px;}
.footer-role{font-size:12px; color:var(--ink-soft); margin:0;}
.footer-contact{display:flex; flex-direction:column; gap:6px; font-size:13px; text-align:right;}
.footer-contact a:hover{color:var(--pine);}
.footer-tagline{
  max-width:var(--container); margin:0 auto; padding:0 0 8px;
  font-size:11px; color:var(--sage);
}
.footer-sanskrit{
  max-width:94%; margin:0 auto 18px; padding:0 12px;
  font-family:var(--display);
  font-size:clamp(9.5px, 2.7vw, 16px);
  line-height:1.6;
  color:var(--pine-deep); text-align:center;
  white-space:nowrap;
  letter-spacing:0.01em;
}
.footer-copy{max-width:var(--container); margin:0 auto; font-size:11px; color:var(--ink-soft);}

/* =========================================================================
   SCROLL-REVEAL
   ========================================================================= */
.reveal{transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.js .reveal{opacity:0;}
.reveal.in{opacity:1; transform:translateY(0);}
/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1000px){
  .about-grid{grid-template-columns:1fr; gap:36px;}
  .about-portrait{width:190px; margin:2px 0 18px 24px;}
  .expertise-grid{grid-template-columns:repeat(2,1fr);}
  .projects-grid{grid-template-columns:repeat(2,1fr);}
  .flow-points{grid-template-columns:repeat(3,1fr); row-gap:22px;}
  .journey-rail{grid-template-columns:repeat(3,1fr); row-gap:26px;}
}

@media (max-width:1000px){
  .nav-links{
    position:fixed; top:66px; right:0; left:0;
    height:calc(100vh - 66px); height:calc(100dvh - 66px);
    background:var(--paper); flex-direction:column; align-items:flex-start;
    padding:28px 32px; gap:20px; font-size:17px;
    transform:none; transition:transform .35s var(--ease);
    border-top:1px solid var(--line);
    overflow-y:auto;
  }
  /* Root cause of the narrow-width horizontal overflow: the closed mobile menu
     panel is position:fixed and only hidden visually via a transform that slides
     it just past the right edge. Browsers still count a transformed fixed-position
     box toward the page's horizontal scrollable region even though it paints
     off-screen -- confirmed by diagnosis: neither overflow-x:hidden on html/body
     nor visibility:hidden on the panel removed the phantom region, because
     ancestor overflow doesn't clip position:fixed descendants and this particular
     scrollable-region quirk isn't affected by visibility either. display:none is
     the only property that removes a box from this calculation entirely, so the
     closed state now uses display:none (set here, and toggled from script.js only
     once the existing slide transition has actually finished) instead of relying
     on the transform alone. This does not change any visible position, timing, or
     styling of the panel -- only when it truly leaves the render tree.  */
  .js .nav-links{transform:translateX(100%); transition:transform .35s var(--ease); display:none;}
  .js .nav-links.open{transform:translateX(0); display:flex;}
  .js .nav-toggle{display:flex;}
  .nav-cta{margin-top:8px;}

  .section{padding:70px 0;}
  .section-inner{padding:0 22px;}
  .expertise-grid{grid-template-columns:1fr;}
  .projects-grid{grid-template-columns:1fr;}
  .flow-points{grid-template-columns:repeat(2,1fr);}
  .flow-line{display:none;}
  .journey-rail{grid-template-columns:repeat(2,1fr);}
  .about-portrait{width:150px; margin:2px 0 14px 20px;}
  .footer-inner{flex-direction:column;}
  .footer-contact{text-align:left;}
  .capability-list{columns:1;}
  body.menu-open{overflow:hidden;}
}

@media (max-width:420px){
  .nav-inner{padding:14px 18px;}
  .nav-links{top:59px; height:calc(100vh - 59px); height:calc(100dvh - 59px); padding:24px 22px;}
  .journey-rail{grid-template-columns:1fr;}
  .flow-points{grid-template-columns:1fr;}
  .about-portrait{width:112px; margin:2px 0 10px 14px;}
  .contact-ctas{display:grid; grid-template-columns:1fr;}
  .contact-ctas .btn{width:100%; justify-content:center;}
}

/* =========================================================================
   OPTIONAL MEDIA / RESOURCE LAYER
   Content is hidden until media/resources are added in config.js.
   Large video/audio assets should normally remain on external platforms.
   ========================================================================= */
.media-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:42px;
}
.media-card,
.project-media{overflow:hidden;}
.media-card{
  padding:0 0 24px;
  border:1px solid var(--line);
  background:var(--paper);
}
.media-card > .project-tag,
.media-card > .project-title,
.media-card > .project-desc,
.media-card > .resource-links{margin-left:24px; margin-right:24px;}
.project-media{margin:-26px -26px 24px;}
.project-media img,
.media-card-image img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}
.media-card-image{margin-bottom:22px;}
.resource-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.resource-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  color:var(--pine);
  font-size:12px;
  text-decoration:none;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.resource-link:hover{background:var(--paper-dim); border-color:var(--sage); transform:translateY(-1px);}
.resource-type{font-size:9px; color:var(--clay); letter-spacing:.08em;}

@media (max-width:1000px){
  .media-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
  .media-grid{grid-template-columns:1fr;}
}