/* Responsive layer for the Rijil Chandran Makkutty site.
   The design is authored with inline desktop styles, so this sheet targets those
   inline values by attribute and overrides them at narrow widths. */

html, body { overflow-x: hidden; }
img, figure { max-width: 100%; }

@media (max-width: 900px) {

  /* --- every multi-column grid collapses to one column --- */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="gap: 55px"]   { gap: 30px !important; }
  [style*="gap: 46px"]   { gap: 26px !important; }
  [style*="gap: 27.6px"] { gap: 20px !important; }

  /* --- page gutters: 46px -> 22px --- */
  [style*="padding: 0 46px 55px"]    { padding: 0 22px 38px !important; }
  [style*="padding: 74px 46px 55px"] { padding: 44px 22px 38px !important; }
  [style*="padding: 55px 46px 37px"] { padding: 34px 22px 26px !important; }
  [style*="padding: 55px 46px 0"]    { padding: 34px 22px 0 !important; }
  [style*="padding: 55px 46px;"]     { padding: 34px 22px !important; }
  [style*="padding: 37px 46px 0"]    { padding: 26px 22px 0 !important; }
  [style*="padding: 13.8px 46px"]    { padding: 10px 18px !important; }
  [style*="padding: 46px 46px"]      { padding: 28px 22px !important; }

  /* --- display type scales down --- */
  [style*="font-size: 420px"] { font-size: 150px !important; right: -14px !important; bottom: -46px !important; }
  [style*="font-size: 104px"],
  [style*="font-size: 100px"] { font-size: 50px !important; line-height: 1 !important; }
  [style*="font-size: 92px"],
  [style*="font-size: 86px"],
  [style*="font-size: 84px"]  { font-size: 44px !important; line-height: 1.02 !important; }
  [style*="font-size: 52px"]  { font-size: 33px !important; }
  [style*="font-size: 42px"]  { font-size: 28px !important; }
  [style*="font-size: 40px"]  { font-size: 27px !important; }
  [style*="font-size: 32px"]  { font-size: 24px !important; }
  [style*="font-size: 30px"]  { font-size: 23px !important; }

  /* CSS multi-column body text -> single column */
  [style*="columns: 2"] { columns: 1 !important; column-gap: 0 !important; }

  /* justified text creates rivers in a narrow column */
  [style*="text-align: justify"] { text-align: left !important; }

  /* --- sticky header wraps instead of overflowing --- */
  header { flex-wrap: wrap !important; align-items: center !important; gap: 8px 14px !important; }
  header > div:first-child {
    width: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px !important;
    margin-right: 0 !important;
  }
  header a[href="#office"] { margin-left: auto !important; padding: 6px 13px !important; }
}

@media (max-width: 480px) {
  /* the role line under the name is long; loosen the tracking so it wraps cleanly */
  header > div:first-child > span:last-child { letter-spacing: 0.07em !important; }

  [style*="font-size: 420px"] { font-size: 108px !important; }
  [style*="font-size: 104px"],
  [style*="font-size: 100px"] { font-size: 40px !important; }
  [style*="font-size: 92px"],
  [style*="font-size: 86px"],
  [style*="font-size: 84px"]  { font-size: 36px !important; }
  [style*="font-size: 52px"]  { font-size: 27px !important; }
}