/* ============================================================
   STYLE.CSS — Obert Dsouza Portfolio (v2)
   New in this version:
   - Single active-page system (fixes the "home stays visible" bug)
   - Keyword tag pills, separate from prose, on Work + Projects
   - Accordion "Read more" expand/collapse, one open at a time
   - Smoother hover states and scroll-reveal feel
============================================================ */


/* ============================================================
   1. VARIABLES
============================================================ */
:root {
  --black:    #0e0e0e;
  --white:    #fafaf8;
  --beige:    #f2ede6;
  --beige-mid:#e5ddd2;
  --blue:     #1a3a5c;
  --blue-mid: #2c5f8a;
  --blue-soft:#dce8f5;
  --muted:    #8a8a80;
  --border:   #d8d2c9;

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', sans-serif;

  --nav-height: 64px;
  --max-width:  1100px;
  --radius:     8px;
  --radius-lg:  14px;
  --ease:       0.3s ease;
  --ease-slow:  0.45s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   2. RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--beige);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); }


/* ============================================================
   3. NAVIGATION BAR
============================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(250, 250, 248, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--blue);
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: color var(--ease);
}

.nav-logo:hover { color: var(--blue-mid); }

.nav-links { display: flex; gap: 2rem; align-items: center; }

/* Animated underline: grows from center on hover/active */
.nav-link {
  position: relative;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 6px;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--blue);
  transition: width var(--ease), left var(--ease);
}

.nav-link.active {
  color: var(--black);
}

.nav-link.active::after {
  width: 100%;
  left: 0;
}

.nav-link:hover:not(.active) {
  color: var(--black);
}

.nav-link:hover:not(.active)::after {
  width: 60%;
  left: 20%;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--black);
  transition: transform var(--ease), opacity var(--ease);
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   4. MOBILE MENU
============================================================ */
.mobile-menu {
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0;
  z-index: 99;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.mobile-menu.open { max-height: 360px; padding: 1rem 0; }

.mobile-link {
  padding: 0.75rem 2rem;
  font-size: 0.95rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color var(--ease), background var(--ease);
}

.mobile-link:hover { color: var(--black); background: var(--beige); }


/* ============================================================
   5. PAGE SYSTEM
   THE FIX: .page is display:none by default. Only the page
   carrying .active is shown. showPage() in the JS strips
   "active" from every page before adding it to just one,
   so Home (or any other page) never lingers underneath.
============================================================ */
.page {
  display: none;
  padding-top: calc(var(--nav-height) + 3rem);
  padding-bottom: 4rem;
  min-height: 100vh;
}

.page.active {
  display: block;
  animation: fadeIn var(--ease-slow) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; }

.page-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 400;
  margin-bottom: 0.5rem;
  line-height: 1.1;
}

.page-subtitle { color: var(--muted); font-size: 1rem; margin-bottom: 3rem; }


/* ============================================================
   6. HOME PAGE
============================================================ */
/* Home page needs relative positioning + hidden overflow for the
   decorative circle behind the text. Applied at all times since it
   only affects layout, never visibility — so it can safely sit on
   the base .home-page class without specificity conflicts. */
.page.home-page {
  position: relative;
  overflow: hidden;
}

/* IMPORTANT FIX: this used to be the ID selector #page-home, which beat
   the .page { display:none } rule on specificity and kept Home visible
   on every page even when "active" was removed. The rule below only
   ever fires when .home-page is ALSO .active (3 classes = higher
   specificity than plain .page, but it can never apply on its own
   since .active is required) — so an inactive Home page now correctly
   stays hidden, exactly like every other page. */
.page.home-page.active {
  display: flex;
  align-items: center;
  padding-top: 0;
}

.hero { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: calc(var(--nav-height) + 4rem) 2rem 4rem; position: relative; z-index: 2; }
.hero-content { max-width: 640px; }

.hero-eyebrow { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blue-mid); margin-bottom: 1rem; }

.hero-name { font-family: var(--font-display); font-size: clamp(3.5rem, 9vw, 7rem); line-height: 1; margin-bottom: 1rem; }
.hero-name em { font-style: italic; color: var(--blue); }

.hero-role { font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; }
.hero-sub { font-size: 1.05rem; color: #4a4a44; line-height: 1.8; margin-bottom: 2.5rem; max-width: 480px; }

.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn-primary {
  background: var(--blue); color: var(--white); border: 2px solid var(--blue);
  padding: 0.75rem 2rem; font-size: 0.9rem; letter-spacing: 0.06em;
  border-radius: var(--radius); transition: background var(--ease), transform 0.15s ease, box-shadow var(--ease);
}
.btn-primary:hover { background: var(--blue-mid); border-color: var(--blue-mid); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,58,92,0.25); }

.btn-secondary {
  background: transparent; color: var(--black); border: 2px solid var(--border);
  padding: 0.75rem 2rem; font-size: 0.9rem; letter-spacing: 0.06em;
  border-radius: var(--radius); transition: border-color var(--ease), color var(--ease), transform 0.15s ease;
}
.btn-secondary:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }

.hero-accent {
  position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  width: 420px; height: 420px; border-radius: 50%; border: 60px solid var(--blue-soft);
  opacity: 0.5; z-index: 1; pointer-events: none;
  animation: spin 60s linear infinite;
}

@keyframes spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}


/* ============================================================
   7. ABOUT PAGE
============================================================ */
.about-grid { display: grid; grid-template-columns: 260px 1fr; gap: 4rem; align-items: start; }

.photo-frame { width: 220px; height: 260px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--beige-mid); }
.headshot { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.headshot-placeholder { width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }

.about-details { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.detail-row { display: flex; justify-content: space-between; font-size: 0.85rem; border-bottom: 1px solid var(--border); padding-bottom: 0.4rem; }
.detail-label { color: var(--muted); }

.about-bio { font-size: 1.05rem; line-height: 1.85; color: #3a3a34; margin-bottom: 2.5rem; }

.skills-heading { font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--blue-mid); margin-bottom: 0.75rem; margin-top: 2rem; }

.skills-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.skill-tag { background: var(--white); border: 1px solid var(--border); font-size: 0.82rem; padding: 0.3rem 0.85rem; border-radius: 100px; }

.edu-item { display: flex; gap: 1.5rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.edu-year { font-size: 0.8rem; color: var(--muted); white-space: nowrap; min-width: 80px; padding-top: 2px; }
.edu-school { font-weight: 500; font-size: 0.95rem; margin-bottom: 0.15rem; }
.edu-degree { font-size: 0.85rem; color: var(--muted); }

.lang-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.lang-tag { font-size: 0.85rem; color: var(--blue); background: var(--blue-soft); padding: 0.3rem 1rem; border-radius: 100px; }

/* Hobbies — sits under the photo/details sidebar, same pill style as
   the Languages tags further down the page for visual consistency */
.hobbies-block { margin-top: 1.5rem; }
.hobbies-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hobby-tag { font-size: 0.8rem; color: var(--blue); background: var(--blue-soft); padding: 0.3rem 0.9rem; border-radius: 100px; }


/* ============================================================
   8. KEYWORD HIGHLIGHTS
   Shared by Projects and Work. Sits as ONE line above the
   paragraph: bold terms separated by a bullet character.
   No pill/badge shapes — just bold text and a muted bullet,
   kept visually separate from the paragraph below it.
============================================================ */
.tag-row {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--blue);
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* The bold keyword terms inside the line */
.tag-row strong {
  font-weight: 700;
  color: var(--blue);
}


/* ============================================================
   9. ACCORDION EXPAND/COLLAPSE
   Shared mechanism: .expand-content is collapsed via max-height:0
   and opacity:0, then transitions open when the parent gets
   the .expanded class (toggled by toggleCard() in the JS).
============================================================ */
.expand-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--ease-slow), opacity var(--ease), margin var(--ease-slow);
}

.expand-content p { font-size: 0.93rem; color: #4a4a44; line-height: 1.8; margin-bottom: 0.9rem; }
.expand-content p:last-child { margin-bottom: 0; }

/* When expanded, reveal the content with generous max-height */
.project-row.expanded .expand-content,
.timeline-item.expanded .expand-content {
  max-height: 600px;
  opacity: 1;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}

/* Rotate the "Read more" label/icon feel via a small arrow */
.btn-readmore {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color var(--ease);
}

.btn-readmore::after {
  content: '↓';
  display: inline-block;
  transition: transform var(--ease);
}

.project-row.expanded .btn-readmore::after,
.timeline-item.expanded .btn-readmore::after {
  transform: rotate(180deg);
}

.btn-readmore:hover { color: var(--blue-mid); }


/* ============================================================
   10. PROJECTS PAGE
   One row per project, stacked vertically. Each row splits into
   an image half and a content half sitting flush together.

   KEY FIX: .project-image uses align-self: start so it stays at
   its own fixed height and never stretches to match the content
   side when "Read more" expands. Grid items normally stretch to
   match the tallest sibling in the row — align-self overrides
   that just for the image column, so only the text side grows.
============================================================ */

/* Wider container for Projects specifically, so rows fill more
   of the page on a laptop screen instead of leaving large empty
   margins on either side. */
.container-narrow { max-width: 1040px; }

.projects-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* The row itself: image + content side by side, no gap between them */
.project-row {
  display: grid;
  grid-template-columns: 38% 62%;   /* Content side is intentionally larger */
  align-items: start;                /* Prevents columns from stretching to match each other */
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;                  /* Keeps the image corners rounded too */
  transition: box-shadow var(--ease), transform var(--ease);
}

.project-row:hover {
  box-shadow: 0 10px 36px rgba(0,0,0,0.09);
  transform: translateY(-3px);
}

/* --- IMAGE HALF (left side) ---
   Fixed height via align-self: start, so it holds its size
   regardless of how tall the content column becomes. */
.project-image {
  align-self: start;
  position: relative;
  height: 240px;
  background: var(--blue-soft);     /* Shows through if no image is added yet */
  overflow: hidden;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fogginess removed per request — image is shown clearly at all times. */
}

/* --- CONTENT HALF (right side) --- */
.project-content {
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
}

.project-title { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 0.6rem; }

.project-teaser { font-size: 0.92rem; color: #4a4a44; line-height: 1.75; margin-bottom: 0.5rem; }

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  flex-wrap: wrap;
}

.btn-watch {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  transition: background var(--ease), transform 0.15s ease;
}

.btn-watch:hover { background: var(--blue-mid); transform: translateY(-2px); }


/* ============================================================
   11. WORK PAGE — TIMELINE
============================================================ */
.timeline { position: relative; padding-left: 2rem; }

.timeline::before {
  content: ''; position: absolute; left: 6px; top: 8px; bottom: 0;
  width: 1px; background: var(--border);
}

.timeline-item { position: relative; margin-bottom: 2rem; }

.timeline-dot {
  position: absolute; left: -2rem; top: 18px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--blue); border: 3px solid var(--beige); z-index: 1;
  transition: transform var(--ease);
}

.timeline-item.expanded .timeline-dot { transform: scale(1.3); }

.timeline-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  transition: box-shadow var(--ease);
}

.timeline-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.07); }

.timeline-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.85rem; flex-wrap: wrap; }

.tl-company { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue-mid); margin-bottom: 0.2rem; }
.tl-role { font-family: var(--font-display); font-size: 1.35rem; }
.tl-date { font-size: 0.82rem; color: var(--muted); white-space: nowrap; padding-top: 4px; }


/* ============================================================
   12. CONTACT PAGE
============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }

.contact-message { font-size: 1.15rem; line-height: 1.85; color: #3a3a34; margin-bottom: 2rem; }

.contact-links { display: flex; flex-direction: column; gap: 1rem; }

.contact-link {
  display: flex; align-items: center; gap: 0.85rem;
  font-size: 0.95rem; padding: 0.85rem 1.1rem;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); transition: border-color var(--ease), background var(--ease), transform 0.15s ease;
}

.contact-link:hover { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); transform: translateX(4px); }

.contact-icon {
  width: 32px; height: 32px; background: var(--blue-soft); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 0.85rem; font-weight: 500; flex-shrink: 0;
}

.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }

.form-group input, .form-group textarea {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.75rem 1rem; font-family: var(--font-body); font-size: 0.95rem;
  outline: none; resize: vertical; transition: border-color var(--ease), box-shadow var(--ease);
}

.form-group input:focus, .form-group textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

.btn-submit {
  background: var(--blue); color: var(--white); border: none;
  padding: 0.85rem 2rem; font-size: 0.9rem; letter-spacing: 0.06em;
  border-radius: var(--radius); align-self: flex-start; transition: background var(--ease), transform 0.15s ease;
}

.btn-submit:hover { background: var(--blue-mid); transform: translateY(-2px); }

.form-thanks { background: var(--blue-soft); border: 1px solid var(--blue); border-radius: var(--radius-lg); padding: 2rem; text-align: center; color: var(--blue); font-size: 1.05rem; }


/* ============================================================
   13. FOOTER
   Dark background (var(--black)) so it reads as clearly
   distinct from the rest of the page, which stays light.
   Text/links inside switch to light tones for contrast.
============================================================ */
.footer {
  background: var(--black);
  color: var(--beige);
  padding-top: 2.25rem;
}

.footer-inner {
  max-width: 1300px;      /* Wider than the rest of the site's 1100px cap,
                              so the 3 columns fill more of the screen on
                              wide monitors instead of leaving large empty
                              margins on either side */
  margin: 0 auto;
  padding: 0 2rem;
}

/* Three-column grid. A thin vertical divider sits between each
   column via border-right on every column except the last —
   see .footer-col:not(:last-child) below. Collapses to a single
   stacked column on small screens (see responsive section). */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(250, 250, 248, 0.12);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0 2.5rem;    /* Increased from 2rem, so columns have more
                           breathing room between the divider lines */
}

.footer-col:first-child { padding-left: 0; }
.footer-col:last-child { padding-right: 0; }

/* The divider line itself: a subtle, muted vertical rule between
   columns 1-2 and 2-3. Matches the same low-opacity tone already
   used for the border under the whole grid. */
.footer-col:not(:last-child) {
  border-right: 1px solid rgba(250, 250, 248, 0.15);
}

/* Column 3 (QR) is centred, since its content is visual */
.footer-col-center { align-items: center; text-align: center; }

/* Standard short uppercase heading, used for "Quick Links" and "Scan to Connect" */
.footer-heading {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue-soft);
  margin-bottom: 0.4rem;
}

/* The longer sentence-style heading used only on the Contact column —
   previously a standalone banner above all columns, now doubling as
   that column's intro line. Kept in the same italic serif style. */
.footer-heading-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--white);
  margin-bottom: 0.75rem;
}

/* Links inside the footer — lighter than body text, brighten on hover */
.footer-link {
  font-size: 0.88rem;
  color: rgba(250, 250, 248, 0.75);
  transition: color var(--ease);
}

.footer-link:hover { color: var(--white); }

/* Applied specifically to Quick Links and the QR fallback link —
   text-decoration is turned off globally in the base reset, so it's
   switched back on just for these, as requested. */
.footer-link-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- QR code column ---
   .footer-qr is a FIXED-SIZE box: width, height, and box-sizing
   are all set explicitly, so the QR image can never push past its
   own boundary no matter what else is happening in the layout. */
.footer-qr {
  width: 144px;
  height: 144px;
  box-sizing: border-box;
  background: var(--white);         /* White card behind the QR keeps it
                                        scannable regardless of the dark
                                        footer background around it */
  padding: 12px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.footer-qr img { width: 120px; height: 120px; display: block; }

.footer-qr-fallback {
  font-size: 0.78rem;
  color: rgba(250, 250, 248, 0.6);
  max-width: 170px;
}

.footer-qr-fallback a { color: var(--blue-soft); }
.footer-qr-fallback a:hover { color: var(--white); }

/* --- Bottom copyright line --- */
.footer-bottom {
  text-align: center;
  padding: 1rem 0;
  font-size: 0.78rem;
  color: rgba(250, 250, 248, 0.55);
}


/* ============================================================
   14. RESPONSIVE
============================================================ */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .photo-frame { width: 180px; height: 210px; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-accent { display: none; }

  /* Project rows: image on top, content below, instead of side by side */
  .project-row { grid-template-columns: 1fr; }
  .project-image { min-height: 200px; }
}

@media (max-width: 600px) {
  .navbar { padding: 0 1.25rem; }
  .hero { padding-left: 1.25rem; padding-right: 1.25rem; }
  .container { padding: 0 1.25rem; }
  .hero-name { font-size: clamp(2.8rem, 12vw, 4rem); }
  .hero-cta { flex-direction: column; }
  .btn-primary, .btn-secondary { width: 100%; text-align: center; }
  .timeline { padding-left: 1.5rem; }
  .timeline-header { flex-direction: column; gap: 0.3rem; }
  .timeline-card, .project-content { padding: 1.1rem 1.25rem; }
  .card-footer { flex-direction: column; align-items: flex-start; }

  .footer-inner { padding: 0 1.25rem; }
}

/* ------------------------------------------------------------
   FOOTER — single dedicated breakpoint.
   3 columns divide evenly, so unlike the old 4-column version
   there's no need for an intermediate 2-column step: above 700px
   the columns sit side by side (set in the base .footer-grid rule
   above); at 700px and below, everything stacks into one column
   for readability. The 700px cutoff was chosen by calculating
   column width at each size to confirm the fixed 144px QR box
   never gets tighter than its column before the stack kicks in.
------------------------------------------------------------ */
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; }

  /* Dividers were vertical rules between side-by-side columns;
     stacked on top of each other, a right-side border no longer
     makes sense, so switch to a horizontal rule underneath instead. */
  .footer-col {
    padding: 0 0 1.75rem 0;
    border-right: none;
    border-bottom: 1px solid rgba(250, 250, 248, 0.15);
    align-items: center;
    text-align: center;
  }

  .footer-col:last-child { border-bottom: none; padding-bottom: 0; }
  .footer-col:not(:last-child) { margin-bottom: 1.75rem; }

  .footer-heading-lead { font-size: 1.1rem; }
}