/* ==========================================================================
   BASE LAYOUT — structure only. Never edit this per-era.
   Each era stylesheet overrides the custom properties below, plus a
   handful of its own decorative rules. This file should not need to
   change when a new era is added.
   ========================================================================== */

:root {
  /* Defaults here are intentionally plain — every real era overrides them. */
  --mw-bg: #ffffff;
  --mw-text: #1a1a1a;
  --mw-text-muted: #595959;
  --mw-accent: #1f4e5f;
  --mw-surface: #f4f4f2;
  --mw-border: #d8d8d8;

  --mw-font-heading: system-ui, sans-serif;
  --mw-font-body: system-ui, sans-serif;

  --mw-radius: 8px;
  --mw-max-width: 1100px;
  --mw-space-sm: 16px;
  --mw-space-md: 32px;
  --mw-space-lg: 64px;
}

* { box-sizing: border-box; }

body {
  margin: 0;


  line-height: 1.6;
}

h1, h2, h3 {

}

.mw-container {
  max-width: var(--mw-max-width);
  margin: 0 auto;
  padding: 0 var(--mw-space-md);
}

/* ---- Timeline header bar ----------------------------------------------
   Intentionally empty here. The Wayback Machine style timeline
   (.wayback, .wayback-nav, ul.timeline, #whereami) is visually distinct
   enough that it's cleaner to keep as its own stylesheet included
   alongside base.css, rather than folded in here and fighting these
   variables. See the site's dedicated wayback-timeline.css.
   ------------------------------------------------------------------- */

/* ---- Hero -------------------------------------------------------------- */

.mw-hero {
  padding: var(--mw-space-lg) var(--mw-space-md);
  text-align: left;
}

.mw-hero-eyebrow {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mw-accent);
  margin-bottom: var(--mw-space-sm);
}

.mw-hero-line {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: bold;
  margin: 0;
}

.mw-cta {
  display: inline-block;
  margin-top: var(--mw-space-md);
  padding: 12px 24px;
  border-radius: var(--mw-radius);
  background: var(--mw-accent);
  color: var(--mw-bg);
  text-decoration: none;
  font-weight: bold;
}

/* Hidden by default. timeline.js reveals + sets src only when the active
   era defines a "video" in the registry (currently just 1987). */
#hero-video {

  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* ---- Modal system ---------------------------------------------------------
   Shared base styles apply to every modal (dialog[data-mw-modal]);
   per-type classes (.mw-service-modal, .mw-work-modal) only override size.
   Deliberately uses its own class names throughout rather than reusing
   .mw-service-card or other classes an era stylesheet specifically
   decorates. That's what keeps every modal inheriting each era's
   colors/fonts (global custom properties) while naturally avoiding the
   beveled/neon/engraved chrome those eras apply to the card grids — no
   special override rule needed, just don't give era CSS a matching
   selector to hook into here. Keep it that way when adding future era
   stylesheets: avoid broad element selectors (e.g. "body.era-x button")
   that would reach into these modals too.
   ------------------------------------------------------------------- */

dialog[data-mw-modal] {
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  padding: var(--mw-space-lg) var(--mw-space-md) var(--mw-space-md);
  background: var(--mw-bg);
  color: var(--mw-text);
  font-family: var(--mw-font-body);
}

dialog[data-mw-modal]::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.mw-service-modal {
  
}

.mw-work-modal {

}

.mw-modal-close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #000;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.mw-service-overview {

  line-height: 1.7;
}
.mw-service-overview p {
  margin: 0 0 var(--mw-space-sm);
}

/* Reset trigger buttons/links back to looking like plain content, so
   wrapping existing markup in a clickable element changes nothing about
   how it currently looks — only that it's now click/keyboard-activatable. */
.mw-service-trigger,
.mw-work-trigger {
  all: unset;
  display: block;
 
  cursor: pointer;
  text-align: inherit;
  font: inherit;
  color: inherit;
}
.mw-service-trigger:focus-visible,
.mw-work-trigger:focus-visible {
  outline: 2px solid var(--mw-accent);
  outline-offset: 4px;
}

/* ---- Work modal content ---------------------------------------------- */

.mw-work-role {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mw-accent);
  margin-bottom: var(--mw-space-sm);
}

.mw-work-overview {
  color: var(--mw-text-muted);
  line-height: 1.7;
  margin-bottom: var(--mw-space-md);
}
.mw-work-overview p {
  margin: 0 0 var(--mw-space-sm);
}

.mw-work-live-link {
  display: inline-block;
  margin-bottom: var(--mw-space-md);
  color: var(--mw-accent);
  font-weight: bold;
  text-decoration: none;
}
.mw-work-live-link:hover {
  text-decoration: underline;
}

.mw-work-gallery {
  list-style: none;
  display: grid;
  gap: var(--mw-space-sm);
  margin: 0 0 var(--mw-space-md);
  padding: 0;
}
.mw-work-gallery--cols-1 { grid-template-columns: 1fr; }
.mw-work-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
.mw-work-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
.mw-work-gallery--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 640px) {
  .mw-work-gallery--cols-2,
  .mw-work-gallery--cols-3,
  .mw-work-gallery--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mw-work-gallery img {
  width: 100%;
  display: block;
  border-radius: calc(var(--mw-radius) / 2);
}

.mw-work-gallery p {
  font-size: 13px;
  color: var(--mw-text-muted);
  margin: 4px 0 0;
}

/* ---- Section shell ------------------------------------------------------ */

.mw-section {
  padding: var(--mw-space-lg) var(--mw-space-md);
  border-top: 1px solid var(--mw-border);
}

.mw-section-header {
  margin-bottom: var(--mw-space-md);
}

.mw-section-tagline {
  color: var(--mw-text-muted);
  font-size: 15px;
}

/* ---- Services grid (4 cards) ------------------------------------------- */

.mw-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mw-space-md);
}

@media (max-width: 640px) {
  .mw-services-grid { grid-template-columns: 1fr; }
}

.mw-service-card {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  padding: var(--mw-space-md);
}

.mw-service-card h3 {
  margin-bottom: 8px;
}

.mw-service-card p {
  color: var(--mw-text-muted);
  margin: 0;
}

/* ---- Client Experience logo grid --------------------------------------- */

.mw-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--mw-space-sm);
  background: var(--mw-accent);
  border-radius: var(--mw-radius);
  padding: var(--mw-space-md);
}

.mw-logo-grid img {
  max-width: 100%;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* ---- Work examples portfolio grid --------------------------------------- */

.mw-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mw-space-md);
}

@media (max-width: 900px) {
  .mw-portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mw-portfolio-grid { grid-template-columns: 1fr; }
}

.mw-portfolio-card {
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  overflow: hidden;
}

.mw-portfolio-card img { width: 100%; display: block; }
.mw-portfolio-card-body { padding: var(--mw-space-sm); }

/* ---- Contact ------------------------------------------------------------ */

.mw-contact-form {
  max-width: 480px;
  display: grid;
  gap: var(--mw-space-sm);
}

.mw-contact-form label {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--mw-text-muted);
}

.mw-contact-form input,
.mw-contact-form select,
.mw-contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  font-family: var(--mw-font-body);
}

/* Decorative chrome dial-back: any era can hook this class onto the
   contact section to strip its own extra flourishes so the form stays
   usable. Individual era stylesheets should scope their heaviest chrome
   OUTSIDE elements carrying this class. */
.mw-contact-form,
.mw-contact-form * {
  --mw-heavy-chrome: none;
}