/* Shared base for the three demonstration websites */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
main:focus { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 200; padding: 0.7rem 1.1rem;
  background: #111; color: #fff; text-decoration: none; transform: translateY(-250%); transition: transform 0.2s;
}
.skip-link:focus { transform: none; }

/* Fictional-project banner */
.demo-banner {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 1.5rem;
  padding: 0.55rem 1rem; background: #161514; color: #e9e1d4;
  font-family: "Jost", system-ui, sans-serif; font-size: 0.78rem; font-weight: 300; letter-spacing: 0.03em; line-height: 1.5; text-align: center;
}
.demo-banner p { display: inline-flex; align-items: center; gap: 0.55rem; }
.demo-banner__dot { width: 6px; height: 6px; border-radius: 50%; background: #cfbea6; flex: none; }
.demo-banner a { color: #fff; text-underline-offset: 3px; white-space: nowrap; }
.demo-banner a:hover { color: #cfbea6; }
.demo-credit a { text-underline-offset: 3px; }

/* Shown inside the portfolio's device mockups */
.in-frame .demo-banner { display: none; }
.in-frame { scroll-behavior: auto; }

/* Shared language switch */
.lang-switch { display: inline-flex; align-items: center; gap: 0.4rem; letter-spacing: 0.1em; }
.lang-switch a { text-decoration: none; opacity: 0.65; padding: 0.3rem 0.15rem; transition: opacity 0.3s; }
.lang-switch a:hover, .lang-switch a[aria-current="true"] { opacity: 1; }
.lang-switch a[aria-current="true"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.lang-sep { opacity: 0.4; }

/* Mobile menu toggle (structure shared, colours per demo) */
.d-toggle { display: none; align-items: center; gap: 0.6rem; background: none; border: 0; padding: 0.5rem 0; cursor: pointer; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; }
.d-toggle__lines { display: grid; gap: 5px; width: 24px; }
.d-toggle__lines i { display: block; height: 1.5px; background: currentColor; transition: transform 0.35s; }
.d-toggle[aria-expanded="true"] .d-toggle__lines i:first-child { transform: translateY(3.25px) rotate(45deg); }
.d-toggle[aria-expanded="true"] .d-toggle__lines i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
body.menu-open { overflow: hidden; }
/* backdrop-filter would trap the fixed overlay inside the header */
body.menu-open [data-header] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Form feedback */
.d-field__error { margin-top: 0.4rem; font-size: 0.82rem; color: var(--d-error, #a1281b); }
.d-field__error:empty { display: none; }
.is-invalid input, .is-invalid select, .is-invalid textarea { border-color: var(--d-error, #a1281b) !important; }
.d-status { margin-top: 1rem; font-size: 0.92rem; line-height: 1.5; }
.d-status:empty { display: none; }
.d-status.is-notice { padding: 0.9rem 1.1rem; border-left: 2px solid currentColor; background: rgba(127, 127, 127, 0.1); }
.d-status.is-error { padding: 0.9rem 1.1rem; color: var(--d-error, #a1281b); border-left: 2px solid currentColor; background: rgba(161, 40, 27, 0.07); }

/* Reveal */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); transition-delay: var(--d, 0ms); }
.js .rv.is-visible, .in-frame .rv { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .rv { opacity: 1; transform: none; }
}