@import url("../fonts/typography.css");

@layer base, layout, components;

@layer base {
  :root {
    --dpl-ground: #FAFAFC;
    --dpl-paper: #FFFFFF;
    --dpl-ink: #111318;
    --dpl-sub: #4F5665;
    --dpl-navy: #1E3A5F;
    --dpl-coral: #D94F3D;
    --dpl-line: #EAECEF;
    --dpl-display: "Space Grotesk", system-ui, sans-serif;
    --dpl-body: "IBM Plex Sans", system-ui, sans-serif;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { font-size: 16px; }
  body {
    margin: 0;
    background: var(--dpl-ground);
    color: var(--dpl-ink);
    font-family: var(--dpl-body);
    line-height: 1.62;
    overflow-x: hidden;
  }
  img { max-width: 100%; height: auto; display: block; }
  :focus-visible { outline: 2px solid var(--dpl-coral); outline-offset: 3px; }
}

@layer layout {
  .dpl-shell { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
  .dpl-band { padding: 72px 0; border-top: 1px solid var(--dpl-line); }
  .dpl-band-paper { background: var(--dpl-paper); }

  .dpl-topbar { background: var(--dpl-paper); border-bottom: 1px solid var(--dpl-line); }
  .dpl-topbar-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .dpl-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--dpl-ink);
    font-family: var(--dpl-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
  }
  .dpl-nav { display: flex; align-items: center; gap: 26px; }
  .dpl-nav a { color: var(--dpl-sub); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
  .dpl-nav a:hover, .dpl-nav a[aria-current="page"] { color: var(--dpl-coral); }

  .dpl-burger {
    display: none;
    background: var(--dpl-ink);
    color: #FFFFFF;
    border: 0;
    padding: 8px 14px;
    font-family: var(--dpl-display);
    font-size: 0.875rem;
    cursor: pointer;
  }
  .dpl-drawer { display: none; background: var(--dpl-paper); border-top: 1px solid var(--dpl-line); padding: 14px 24px 20px; }
  .dpl-drawer.open { display: grid; gap: 10px; }
  .dpl-drawer a { color: var(--dpl-ink); text-decoration: none; font-weight: 500; padding: 6px 0; }

  .dpl-poster { max-width: 1160px; margin: 0 auto; padding: 64px 24px 56px; }
  .dpl-poster h1 {
    font-family: var(--dpl-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 6.2vw, 5.1rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin: 0 0 28px;
    max-width: 15ch;
  }
  .dpl-poster-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--dpl-ink);
  }
  .dpl-poster-lead { max-width: 560px; margin: 0; font-size: 1.125rem; color: var(--dpl-sub); }
  .dpl-panorama { margin: 28px 0 0; aspect-ratio: 16 / 7; overflow: hidden; background: var(--dpl-line); }
  .dpl-panorama img { width: 100%; height: 100%; object-fit: cover; }

  .dpl-asym { display: grid; grid-template-columns: 2fr 3fr; gap: 48px; align-items: center; }
  .dpl-asym-rev { grid-template-columns: 3fr 2fr; }
  .dpl-center-box { max-width: 660px; margin: 0 auto; }
}

@layer components {
  .dpl-pill-group { display: flex; flex-wrap: wrap; gap: 12px; }
  .dpl-pill-dark {
    display: inline-block;
    background: var(--dpl-navy);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    padding: 13px 26px;
    border-radius: 999px;
    font-size: 0.9375rem;
    border: 0;
    cursor: pointer;
  }
  .dpl-pill-dark:hover { background: var(--dpl-coral); }
  .dpl-pill-ghost {
    display: inline-block;
    border: 1px solid var(--dpl-ink);
    color: var(--dpl-ink);
    text-decoration: none;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 0.9375rem;
  }
  .dpl-pill-ghost:hover { background: var(--dpl-ink); color: #FFFFFF; }

  .dpl-h2 { font-family: var(--dpl-display); font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.12; margin: 0 0 16px; letter-spacing: -0.02em; }
  .dpl-muted { color: var(--dpl-sub); margin: 0 0 20px; }

  /* Tabs */
  .dpl-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 32px;
    border-bottom: 1px solid var(--dpl-line);
    padding-bottom: 18px;
  }
  .dpl-tab {
    background: var(--dpl-ground);
    color: var(--dpl-ink);
    border: 1px solid var(--dpl-line);
    border-radius: 999px;
    padding: 10px 20px;
    font-family: var(--dpl-display);
    font-weight: 500;
    font-size: 0.9375rem;
    cursor: pointer;
  }
  .dpl-tab[aria-selected="true"] {
    background: var(--dpl-navy);
    color: #FFFFFF;
    border-color: var(--dpl-navy);
  }
  .dpl-tabpanel {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .dpl-tabpanel[hidden] { display: none; }
  .dpl-tabpanel h3 { font-family: var(--dpl-display); font-size: 1.6rem; margin: 0 0 12px; }
  .dpl-tabpanel ul { padding-left: 18px; margin: 0 0 22px; color: var(--dpl-sub); display: grid; gap: 8px; }
  .dpl-panel-img { border: 1px solid var(--dpl-line); overflow: hidden; }

  /* Independence Notice inside About Band */
  .dpl-notice-box {
    border-left: 3px solid var(--dpl-coral);
    background: var(--dpl-ground);
    padding: 18px 22px;
    margin-top: 24px;
    font-size: 0.9375rem;
    color: var(--dpl-sub);
  }

  /* Centered Contact Form */
  .dpl-contact-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 28px;
  }
  .dpl-info-chip {
    background: var(--dpl-paper);
    border: 1px solid var(--dpl-line);
    padding: 10px 16px;
    font-size: 0.9375rem;
    color: var(--dpl-ink);
    text-decoration: none;
  }
  .dpl-info-chip:hover { border-color: var(--dpl-navy); }
  .dpl-stack-form { display: grid; gap: 16px; }
  .dpl-input-group { display: grid; gap: 6px; }
  .dpl-input-group label { font-size: 0.875rem; font-weight: 600; }
  .dpl-input-group input, .dpl-input-group textarea {
    font-family: var(--dpl-body);
    font-size: 1rem;
    padding: 12px 14px;
    border: 1px solid #CFD4DC;
    background: var(--dpl-paper);
    color: var(--dpl-ink);
  }

  /* Architectural Single-Row Footer */
  .dpl-footer {
    background: var(--dpl-paper);
    border-top: 1px solid var(--dpl-ink);
    padding: 32px 0;
  }
  .dpl-footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 0.875rem;
    color: var(--dpl-sub);
  }
  .dpl-footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
  .dpl-footer-links a { color: var(--dpl-ink); text-decoration: none; }
  .dpl-footer-links a:hover { color: var(--dpl-coral); }

  /* Cookie Dock */
  .dpl-cookie-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dpl-paper);
    border-top: 2px solid var(--dpl-ink);
    padding: 16px 24px;
    z-index: 60;
  }
  .dpl-cookie-dock[hidden] { display: none; }
  .dpl-cookie-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
  }
  .dpl-cookie-inner p { margin: 0; font-size: 0.875rem; color: var(--dpl-sub); max-width: 680px; }
  .dpl-cookie-btns { display: flex; gap: 10px; }
  .dpl-cbtn {
    padding: 9px 20px;
    border-radius: 999px;
    font-family: var(--dpl-body);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    border: 1px solid var(--dpl-navy);
  }
  .dpl-cbtn-yes { background: var(--dpl-navy); color: #FFFFFF; }
  .dpl-cbtn-no { background: #FFFFFF; color: var(--dpl-navy); }
}

@media (max-width: 820px) {
  .dpl-nav { display: none; }
  .dpl-burger { display: inline-block; }
  .dpl-poster { padding-top: 36px; }
  .dpl-panorama { aspect-ratio: 16 / 10; }
  .dpl-tabpanel, .dpl-asym, .dpl-asym-rev { grid-template-columns: 1fr; }
}