/* AlvarezSM project family — shared frame, individual identities. */
:root {
  --project-mark: var(--accent);
  --project-gutter: clamp(20px,5vw,78px);
  --project-max: 1440px;
  --project-ease: cubic-bezier(.22,.7,.25,1);
}
:root[data-app] { --project-gutter:clamp(20px,4vw,68px); --project-max:1480px; }
:root[data-project="gallery"] { --project-mark:#edb885; }
:root[data-project="weather"] { --project-mark:#9bc9ff; }
:root[data-project="chat"] { --project-mark:#c5b3ed; }
:root[data-project="todo"] { --project-mark:#e8c06c; }
:root[data-project="blog"] { --project-mark:#f1af98; }
:root[data-project="spa"] { --project-mark:#badf88; }
:root[data-project="ecommerce"] { --project-mark:#9bcdb3; }
:root[data-project="quiz"] { --project-mark:#b9b2ff; }
:root[data-project="movie"] { --project-mark:#eba4a2; }
:root[data-theme="light"][data-project="gallery"] { --project-mark:#875424; }
:root[data-theme="light"][data-project="weather"] { --project-mark:#2f6099; }
:root[data-theme="light"][data-project="chat"] { --project-mark:#6d4c98; }
:root[data-theme="light"][data-project="todo"] { --project-mark:#7a5908; }
:root[data-theme="light"][data-project="blog"] { --project-mark:#9b4e33; }
:root[data-theme="light"][data-project="spa"] { --project-mark:#436929; }
:root[data-theme="light"][data-project="ecommerce"] { --project-mark:#356d55; }
:root[data-theme="light"][data-project="quiz"] { --project-mark:#6655a4; }
:root[data-theme="light"][data-project="movie"] { --project-mark:#9b4e50; }

.app-header.project-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:96px;
  padding:20px max(var(--project-gutter),calc((100% - var(--project-max))/2 + var(--project-gutter)));
  border-bottom:1px solid var(--line);
}
.project-header .wordmark {
  display:inline-flex;
  align-items:center;
  gap:15px;
  min-width:0;
  margin-right:auto;
  padding-block:3px;
  line-height:1.15;
  color:var(--ink);
}
.project-brand-label { display:grid; gap:6px; min-width:0; }
.project-brand-name {
  font:750 clamp(16px,1.7vw,21px)/1.08 Inter,'Segoe UI',system-ui,sans-serif;
  letter-spacing:-.045em;
}
.project-brand-descriptor {
  color:var(--muted);
  font:500 9px/1.3 ui-monospace,Consolas,monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.project-emblem {
  display:grid;
  place-items:center;
  flex:none;
  width:40px;
  height:40px;
  color:var(--project-mark);
}
.project-emblem > svg { width:38px; height:38px; display:block; overflow:visible; }
.project-emblem > svg .mark-detail {
  transform-origin:20px 20px;
  transition:transform .35s var(--project-ease),opacity .35s var(--project-ease);
}
.project-header .wordmark:is(:hover,:focus-visible) .mark-detail { transform:rotate(9deg); }
.project-header .wordmark:is(:hover,:focus-visible) .project-brand-descriptor { color:var(--ink); }
/* Preserve the two reference marks: Signal's bars and Form's paired circles. */
.project-emblem .brand-symbol { flex:none; }
.project-emblem .motion-logo { margin-right:7px; }
.project-header .app-nav {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
  min-width:0;
  font-size:12px;
  color:var(--ink);
}
.project-context {
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:0;
  color:var(--muted);
  font:500 9px/1.4 ui-monospace,Consolas,monospace;
  letter-spacing:.035em;
}
.project-number {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  flex:none;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--project-mark);
  font-variant-numeric:tabular-nums;
}
.project-context-label { white-space:nowrap; }
.project-header .app-nav a.project-back,
.project-back {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  gap:9px;
  min-height:44px;
  padding:10px 0;
  border:0;
  background:transparent;
  color:var(--ink);
  font:600 11px/1.5 Inter,'Segoe UI',system-ui,sans-serif;
  text-decoration:underline;
  text-decoration-color:var(--line);
  text-underline-offset:5px;
  transition:text-decoration-color .2s;
}
.project-back svg { width:13px; height:13px; transition:transform .25s var(--project-ease); }
.project-back:is(:hover,:focus-visible) { text-decoration-color:currentColor; }
.project-back:is(:hover,:focus-visible) svg { transform:translate(2px,-2px); }
.project-header .icon-button {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  transition:background .2s,border-color .2s;
}
.project-header .icon-button svg { display:block; width:19px; height:19px; }
.project-header .icon-button:hover { background:var(--panel); border-color:var(--project-mark); }
.project-header .cart-button { min-height:44px; padding:8px 0; white-space:nowrap; color:var(--ink); }

.app-footer.project-footer {
  display:block;
  width:min(1440px,100%);
  margin:0 auto;
  padding:28px clamp(20px,5vw,78px) 24px;
  border-top:1px solid var(--line);
  font-family:Inter,'Segoe UI',system-ui,sans-serif;
  color:var(--muted);
}
.app-shell > .app-footer.project-footer { width:100%; margin-top:36px; padding-inline:0; }
.project-footer-signature,
.project-footer-content {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 30px;
}
.project-footer-signature { padding-bottom:13px; }
.project-footer .project-footer-credit,
.project-footer-signature .project-footer-credit {
  margin:0;
  color:var(--ink);
  font:500 12px/1.7 Inter,'Segoe UI',system-ui,sans-serif;
}
.app-footer.project-footer .project-footer-index,
.project-footer-signature .project-footer-index {
  margin:0;
  color:var(--project-mark);
  font:500 9px/1.6 ui-monospace,Consolas,monospace;
  letter-spacing:.04em;
  white-space:nowrap;
}
.project-footer .project-footer-note {
  max-width:78ch;
  margin:0;
  color:var(--muted);
  font:400 11px/1.8 Inter,'Segoe UI',system-ui,sans-serif;
}
.project-footer .project-footer-note span { color:inherit; }
.project-footer .project-back { margin-top:-10px; color:var(--muted); font-size:10px; }

/* Observatory keeps its brand, navigation, language menu and utility footer. */
.project-observatory-header .project-back { font-size:11px; padding-block:12px; }
.project-observatory-footer > .project-footer-signature {
  margin-bottom:25px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}

@media (max-width:1100px) {
  .project-header .app-nav { gap:15px; }
  .project-header .project-context-label { display:none; }
  .project-observatory-header.header { gap:20px; }
  .project-observatory-header.header nav { gap:18px; }
}
@media (max-width:720px) {
  .app-header.project-header { flex-wrap:wrap; gap:0; padding:18px 20px 12px; }
  .project-header .wordmark { width:100%; padding-block:0; }
  .project-header .app-nav {
    width:100%;
    flex-wrap:nowrap;
    justify-content:flex-end;
    gap:18px;
    margin-top:16px;
    padding-top:8px;
    border-top:1px solid var(--line);
  }
  .project-header .project-context { margin-right:auto; }
  .project-header .project-context-label { display:inline; }
  .project-header .project-brand-name { font-size:19px; }
  .project-footer-signature,.project-footer-content { flex-wrap:wrap; gap:9px 24px; }
  .project-footer-signature { align-items:flex-start; padding-bottom:14px; }
  .project-footer .project-footer-credit { flex-basis:100%; }
  .project-footer .project-back { margin-top:0; }
  .project-observatory-footer > .project-footer-signature { flex-direction:column; }
}
@media (max-width:480px) {
  .project-header .app-nav { gap:14px; }
  .project-header .project-context { gap:7px; }
  .project-header .project-context-label { max-width:16ch; white-space:normal; font-size:8px; }
  :root[data-project="ecommerce"] .project-header .project-context-label { display:none; }
  .app-footer.project-footer { padding-inline:20px; }
  .app-shell > .app-footer.project-footer { padding-inline:0; }
}
@media (prefers-reduced-motion:reduce) {
  .project-emblem *, .project-back svg, .project-header .icon-button { transition:none!important; }
  .project-header .wordmark:is(:hover,:focus-visible) .mark-detail,
  .project-back:is(:hover,:focus-visible) svg { transform:none; }
}