/* ================================================================
   Material Design 3 — Near-monochrome scheme
   Near-black/white tonal palette
   ================================================================ */

/* ── MD3 Color tokens — pure black & white ───────────────────────── */
:root {
  --md-sys-color-primary:                  #000000;
  --md-sys-color-on-primary:               #FFFFFF;
  --md-sys-color-primary-container:        #E3E3E3;
  --md-sys-color-on-primary-container:     #000000;
  --md-sys-color-secondary:                #444444;
  --md-sys-color-on-secondary:             #FFFFFF;
  --md-sys-color-secondary-container:      #E3E3E3;
  --md-sys-color-on-secondary-container:   #000000;
  --md-sys-color-tertiary:                 #666666;
  --md-sys-color-on-tertiary:              #FFFFFF;
  --md-sys-color-tertiary-container:       #EBEBEB;
  --md-sys-color-on-tertiary-container:    #000000;
  --md-sys-color-error:                    #B3261E;
  --md-sys-color-on-error:                 #FFFFFF;
  --md-sys-color-error-container:          #F9DEDC;
  --md-sys-color-on-error-container:       #410E0B;
  --md-sys-color-background:               #FFFFFF;
  --md-sys-color-on-background:            #000000;
  --md-sys-color-surface:                  #FFFFFF;
  --md-sys-color-on-surface:               #000000;
  --md-sys-color-surface-variant:          #E3E3E3;
  --md-sys-color-on-surface-variant:       #444444;
  --md-sys-color-outline:                  #767676;
  --md-sys-color-outline-variant:          #C6C6C6;
  --md-sys-color-inverse-surface:          #1A1A1A;
  --md-sys-color-inverse-on-surface:       #F5F5F5;
  --md-sys-color-inverse-primary:          #C6C6C6;
  --md-sys-color-surface-tint:             #000000;
  --md-sys-color-surface-container-highest:#E3E3E3;
  --md-sys-color-surface-container-high:   #EBEBEB;
  --md-sys-color-surface-container:        #F0F0F0;
  --md-sys-color-surface-container-low:    #F5F5F5;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-scrim:                    #000000;

  /* ── MD3 Shape scale ──────────────────────────────────────────── */
  --md-sys-shape-corner-none:         0px;
  --md-sys-shape-corner-extra-small:  4px;
  --md-sys-shape-corner-small:        8px;
  --md-sys-shape-corner-medium:       12px;
  --md-sys-shape-corner-large:        16px;
  --md-sys-shape-corner-extra-large:  28px;
  --md-sys-shape-corner-full:         9999px;

  /* ── MD3 Elevation shadows ────────────────────────────────────── */
  --md-sys-elevation-1: 0px 1px 2px rgba(0,0,0,.3),  0px 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-2: 0px 1px 2px rgba(0,0,0,.3),  0px 2px 6px 2px rgba(0,0,0,.15);
  --md-sys-elevation-3: 0px 4px 8px 3px rgba(0,0,0,.15), 0px 1px 3px rgba(0,0,0,.3);
}

/* ── @material/web component token feed ──────────────────────────
   We just feed the sys tokens into the component tokens.
   No visual customisation — pure spec defaults.
   ─────────────────────────────────────────────────────────────── */

/* Buttons — all share the same shape token */
md-filled-button {
  --md-filled-button-container-color:      var(--md-sys-color-primary);
  --md-filled-button-label-text-color:     var(--md-sys-color-on-primary);
  --md-filled-button-container-shape:      var(--md-sys-shape-corner-full);
}
md-outlined-button {
  --md-outlined-button-label-text-color:   var(--md-sys-color-primary);
  --md-outlined-button-outline-color:      var(--md-sys-color-outline);
  --md-outlined-button-container-shape:    var(--md-sys-shape-corner-full);
}
md-text-button {
  --md-text-button-label-text-color:       var(--md-sys-color-primary);
  --md-text-button-container-shape:        var(--md-sys-shape-corner-full);
}
md-tonal-button {
  --md-tonal-button-container-color:       var(--md-sys-color-secondary-container);
  --md-tonal-button-label-text-color:      var(--md-sys-color-on-secondary-container);
  --md-tonal-button-container-shape:       var(--md-sys-shape-corner-full);
}

/* Cards */
md-elevated-card {
  --md-elevated-card-container-color:  var(--md-sys-color-surface-container-low);
  --md-elevated-card-container-shape:  var(--md-sys-shape-corner-medium);
}
md-filled-card {
  --md-filled-card-container-color:    var(--md-sys-color-surface-container-highest);
  --md-filled-card-container-shape:    var(--md-sys-shape-corner-medium);
}
md-outlined-card {
  --md-outlined-card-container-color:  var(--md-sys-color-surface);
  --md-outlined-card-outline-color:    var(--md-sys-color-outline-variant);
  --md-outlined-card-container-shape:  var(--md-sys-shape-corner-medium);
}

/* List */
md-list {
  --md-list-container-color: transparent;
}
md-list-item {
  --md-list-item-label-text-color:     var(--md-sys-color-on-surface);
  --md-list-item-leading-icon-color:   var(--md-sys-color-on-surface-variant);
  --md-list-item-container-shape:      var(--md-sys-shape-corner-full);
}
md-list-item[active] {
  --md-list-item-container-color:      var(--md-sys-color-secondary-container);
  --md-list-item-label-text-color:     var(--md-sys-color-on-secondary-container);
  --md-list-item-leading-icon-color:   var(--md-sys-color-on-secondary-container);
}

/* Icon button */
md-icon-button {
  --md-icon-button-icon-color:         var(--md-sys-color-on-surface-variant);
}

/* Divider */
md-divider {
  --md-divider-color: var(--md-sys-color-outline-variant);
  margin-block: 8px;
}

/* ── Typography — MD3 type scale with Roboto ─────────────────────
   Display / Headline / Title / Body / Label
   ─────────────────────────────────────────────────────────────── */
:root {
  --font: 'Roboto', sans-serif;
}

.t-display-large   { font: 700 57px/64px var(--font); letter-spacing: -.25px; }
.t-display-medium  { font: 700 45px/52px var(--font); letter-spacing: 0; }
.t-display-small   { font: 700 36px/44px var(--font); letter-spacing: 0; }
.t-headline-large  { font: 700 32px/40px var(--font); letter-spacing: 0; }
.t-headline-medium { font: 700 28px/36px var(--font); letter-spacing: 0; }
.t-headline-small  { font: 700 24px/32px var(--font); letter-spacing: 0; }
.t-title-large     { font: 600 22px/28px var(--font); letter-spacing: 0; }
.t-title-medium    { font: 500 16px/24px var(--font); letter-spacing: .15px; }
.t-title-small     { font: 500 14px/20px var(--font); letter-spacing: .1px; }
.t-body-large      { font: 400 16px/24px var(--font); letter-spacing: .5px; }
.t-body-medium     { font: 400 14px/20px var(--font); letter-spacing: .25px; }
.t-body-small      { font: 400 12px/16px var(--font); letter-spacing: .4px; }
.t-label-large     { font: 500 14px/20px var(--font); letter-spacing: .1px; }
.t-label-medium    { font: 500 12px/16px var(--font); letter-spacing: .5px; }
.t-label-small     { font: 500 11px/16px var(--font); letter-spacing: .5px; }

/* ── Base reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }

::selection {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

/* ── Top App Bar ────────────────────────────────────────────────── */
.app-bar {
  position: sticky; top: 0; z-index: 100;
  height: 64px;
  display: flex;
  align-items: center;
  padding-inline: 32px;
  background: var(--md-sys-color-surface-container);
  transition: box-shadow 200ms ease;
}
.app-bar.scrolled { box-shadow: var(--md-sys-elevation-2); }

.app-bar__logo {
  display: flex; align-items: center;
  padding-right: 8px;
}
.app-bar__logo img { height: 36px; width: auto; }

/* Spacer pushes nav to the right */
.app-bar__spacer { flex: 1; }

/* Nav links + icon buttons — all on the right */
.app-bar__nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* kept for backwards compat on pages not yet updated */
.app-bar__nav-links {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.app-bar__icons {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0;
}

/* ── Navigation Drawer (modal) ──────────────────────────────────── */
.scrim {
  position: fixed; inset: 0;
  background: var(--md-sys-color-scrim);
  opacity: 0; visibility: hidden; z-index: 200;
  transition: opacity 250ms ease, visibility 250ms ease;
}
.scrim.open { opacity: .32; visibility: visible; }

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 360px; max-width: 90vw;
  background: var(--md-sys-color-surface-container-low);
  border-radius: 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0;
  z-index: 201;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 250ms cubic-bezier(.2,0,0,1);
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); }

.drawer__header {
  padding: 28px 28px 8px;
}
.drawer__title { color: var(--md-sys-color-on-surface); margin: 0 0 4px; }
.drawer__subtitle { color: var(--md-sys-color-on-surface-variant); margin: 0; }

.drawer__content { padding: 8px 12px 16px; flex: 1; }

/* ── Page wrapper ────────────────────────────────────────────────── */
.page { min-height: calc(100dvh - 64px); }

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 80px;
}

/* ── HERO ────────────────────────────────────────────────────────── */
.hero {
  background: var(--md-sys-color-surface-container-lowest);
  padding-block: 80px;
}
.hero__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 80px;
}

/* Photo with tonal container behind */
.hero__photo-wrap { position: relative; }
.hero__photo {
  width: 280px; height: 360px;
  object-fit: cover;
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--md-sys-elevation-3);
  position: relative; z-index: 1;
}
.hero__photo-wrap::after {
  content: '';
  position: absolute;
  inset: 20px -20px -20px 20px;
  background: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-extra-large);
  z-index: 0;
}

.hero__text { display: flex; flex-direction: column; gap: 32px; }
.hero__tagline {
  color: var(--md-sys-color-on-surface);
  margin: 0;
}
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ── Contact strip ────────────────────────────────────────────────── */
.contact-strip {
  background: var(--md-sys-color-surface-container);
  padding-block: 64px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px; text-align: center;
}
.contact-strip__label { color: var(--md-sys-color-on-surface); margin: 0; }

/* ── Section header (listing pages) ─────────────────────────────── */
.section { padding-block: 72px; }
.section__title { color: var(--md-sys-color-on-surface); margin: 0 0 48px; }

/* ── Card grid ───────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* inner content of each card */
.card-body {
  padding: 20px 20px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.card-overline { color: var(--md-sys-color-secondary); margin: 0; }
.card-title    { color: var(--md-sys-color-on-surface); margin: 0; }
.card-desc     { color: var(--md-sys-color-on-surface-variant); margin: 0; flex: 1; }
.card-actions  {
  padding: 8px 12px 12px;
  display: flex;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* ── About page ──────────────────────────────────────────────────── */
.about__title { color: var(--md-sys-color-on-surface); margin: 0 0 48px; }
.about__body  { max-width: 66ch; }
.about__body p {
  color: var(--md-sys-color-on-surface);
  font: 400 16px/1.75 var(--font);
  letter-spacing: .5px;
  margin: 0 0 24px;
}

/* ── Article page ────────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 4px;
  color: var(--md-sys-color-on-surface-variant);
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.breadcrumb a { color: var(--md-sys-color-primary); }
.breadcrumb .sep {
  font-size: 18px; color: var(--md-sys-color-outline);
  font-family: 'Material Symbols Outlined';
}

.article__meta  { color: var(--md-sys-color-secondary); margin: 0 0 16px; }
.article__title { color: var(--md-sys-color-on-surface); margin: 0 0 48px; max-width: 22ch; }
.article__body  { max-width: 66ch; }
.article__body p {
  color: var(--md-sys-color-on-surface);
  font: 400 16px/1.75 var(--font);
  letter-spacing: .5px;
  margin: 0 0 28px;
}

/* ── Privacy page ────────────────────────────────────────────────── */
.privacy__title { color: var(--md-sys-color-on-surface); margin: 0 0 8px; }
.privacy__date  { color: var(--md-sys-color-on-surface-variant); margin: 0 0 48px; }
.privacy__body  { max-width: 66ch; }
.privacy__body h2 {
  color: var(--md-sys-color-on-surface);
  font: 500 16px/24px var(--font); letter-spacing: .15px;
  margin: 40px 0 12px;
}
.privacy__body p,
.privacy__body li {
  color: var(--md-sys-color-on-surface);
  font: 400 16px/1.75 var(--font); letter-spacing: .5px;
  margin: 0 0 16px;
}
.privacy__body ul { padding-left: 24px; }
.privacy__body a  { color: var(--md-sys-color-primary); }

/* ── Footer ──────────────────────────────────────────────────────── */
.footer { background: var(--md-sys-color-surface-container); }
.footer__inner {
  display: flex; flex-wrap: wrap; gap: 64px;
  padding-block: 64px;
}
.footer__brand { flex: 0 0 240px; }
.footer__brand-name { color: var(--md-sys-color-on-surface); margin: 0 0 8px; }
.footer__brand-sub  { color: var(--md-sys-color-on-surface-variant); margin: 0; }
.footer__col-title  { color: var(--md-sys-color-on-surface-variant); margin: 0 0 16px; }
.footer__links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.footer__links a {
  color: var(--md-sys-color-on-surface-variant);
  font: 400 14px/20px var(--font); letter-spacing: .25px;
  transition: color 150ms;
}
.footer__links a:hover { color: var(--md-sys-color-primary); }

.footer__bottom {
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
}
.footer__bottom-inner {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
  padding-block: 20px;
}
.footer__bottom-inner a {
  color: var(--md-sys-color-inverse-primary);
  font: 500 12px/16px var(--font); letter-spacing: .5px;
  transition: opacity 150ms;
}
.footer__bottom-inner a:hover { opacity: .8; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 840px) {
  .app-bar__nav-links,
  .app-bar__icons { display: none; }
  .container    { padding-inline: 24px; }

  .hero         { padding-block: 40px; }
  .hero__row    { grid-template-columns: 1fr; gap: 40px; }
  .hero__photo  { width: 100%; height: 260px; }
  .hero__photo-wrap::after { inset: 12px -12px -12px 12px; }

  .card-grid    { grid-template-columns: 1fr; }
  .preview-grid { grid-template-columns: 1fr; }
  .footer__inner{ gap: 32px; padding-block: 40px; }
  .footer__brand{ flex: 0 0 100%; }
}
@media (min-width: 841px) {
  .hamburger    { display: none; }
}
@media (min-width: 841px) and (max-width: 1240px) {
  .container    { padding-inline: 48px; }
}

/* ================================================================
   Article/App preview cards — DeepMind-style
   Full image top, meta below, title, arrow CTA
   ================================================================ */

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.preview-card {
  display: flex;
  flex-direction: column;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  /* elevation 1 */
  box-shadow: var(--md-sys-elevation-1);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.preview-card:hover {
  box-shadow: var(--md-sys-elevation-3);
  transform: translateY(-2px);
}

/* Top image — 16:9 fixed height */
.preview-card__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--md-sys-color-surface-container-highest);
  flex-shrink: 0;
}

/* Placeholder when no image — tonal gradient using primary container */
.preview-card__img-wrap--placeholder {
  background: linear-gradient(
    135deg,
    var(--md-sys-color-primary-container) 0%,
    var(--md-sys-color-secondary-container) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-card__img-wrap--placeholder .material-symbols-outlined {
  font-size: 48px;
  color: var(--md-sys-color-on-primary-container);
  opacity: 0.5;
}

.preview-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}

.preview-card:hover .preview-card__img {
  transform: scale(1.04);
}

/* Text content below image */
.preview-card__body {
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.preview-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--md-sys-color-secondary);
}

.preview-card__category {
  font: 500 11px/16px var(--font);
  letter-spacing: .5px;
  text-transform: uppercase;
}

.preview-card__date {
  font: 400 11px/16px var(--font);
  letter-spacing: .4px;
  color: var(--md-sys-color-on-surface-variant);
}

.preview-card__title {
  color: var(--md-sys-color-on-surface);
  margin: 0;
  font: 700 22px/28px var(--font);
  letter-spacing: 0;
  flex: 1;
}

/* Bottom arrow link row */
.preview-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.preview-card__cta {
  font: 500 14px/20px var(--font);
  letter-spacing: .1px;
  color: var(--md-sys-color-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.preview-card__arrow {
  font-size: 18px;
  color: var(--md-sys-color-primary);
  transition: transform 200ms ease;
}

.preview-card:hover .preview-card__arrow {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 840px) {
  .preview-grid { grid-template-columns: 1fr; }
}

/* ── About page ──────────────────────────────────────────────────── */
.about__title { margin-bottom: 32px; }
.about__body { max-width: 720px; }
.about__body p { margin: 0 0 20px; line-height: 1.75; font-size: 16px; color: var(--md-sys-color-on-surface); }

/* ── Article page ────────────────────────────────────────────────── */
.article__meta { color: var(--md-sys-color-on-surface-variant); margin: 0 0 12px; }
.article__title { margin: 0 0 32px; }
.article__body { max-width: 720px; }
.article__body p { margin: 0 0 20px; line-height: 1.75; font-size: 16px; color: var(--md-sys-color-on-surface); }

/* ── Breadcrumb ──────────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 24px;
}
.breadcrumb a { color: var(--md-sys-color-primary); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep {
  font-family: 'Material Symbols Outlined'; font-size: 16px;
  line-height: 1; color: var(--md-sys-color-outline-variant);
}

/* ── Privacy page ────────────────────────────────────────────────── */
.privacy__title { margin-bottom: 8px; }
.privacy__date { color: var(--md-sys-color-on-surface-variant); margin-bottom: 32px; }
.privacy__body { max-width: 720px; }
.privacy__body h2 { font: 700 20px/28px var(--font); margin: 32px 0 12px; }
.privacy__body p { margin: 0 0 16px; line-height: 1.75; font-size: 16px; }
.privacy__body a { color: var(--md-sys-color-primary); }
.privacy__body a:hover { text-decoration: underline; }