/* ═══════════════════════════════════════════════════════════════
   ZOYOS · Editorial identity for project and workshop pages
   ═══════════════════════════════════════════════════════════════ */

.editorial-page {
  --ink: #151514;
  --ink-soft: #292927;
  --blue: #151514;
  --blue-deep: #292927;
  --blue-lift: #b8b8b1;
  --tint: #e9e9e4;
  --white: #fff;
  --accent: #0077ff;
  --accent-hover: #1684ff;
  --accent-wash: rgba(0,119,255,.075);
  --text-2: #73736e;
  --text-3: #92928c;
  --line: rgba(21,21,20,.15);
  --line-soft: rgba(21,21,20,.08);
  --r-lg: 6px;
  --r-md: 6px;
  --serif: "Iowan Old Style", "Baskerville", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --pad-y: clamp(60px, 6.5vw, 92px);
  background: #f4f4f0;
}

.editorial-page ::selection { background: var(--accent); color: #000; }

.editorial-page :is(h1, h2) {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
}

.editorial-page :is(h3, h4) { letter-spacing: -.025em; }
.editorial-page em { color: inherit; }
.editorial-page .wrap { width: min(1240px, 100% - 64px); }

/* Navigation */
.editorial-page #nav {
  min-height: 92px;
  padding: 0 max(32px, calc((100vw - 1240px) / 2));
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.editorial-page #nav .nav-logo img { height: 26px; }
.editorial-page #nav .nav-links a { font-family: var(--sans); font-size: 13px; }
.editorial-page #nav .nav-cta { border-radius: 6px; }
.editorial-page #nav .nav-links a:hover { color: var(--accent); }
.editorial-page #nav.scrolled {
  min-height: 66px;
  padding-block: 0;
  background: rgba(244,244,240,.92);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.editorial-page #nav.scrolled .nav-logo img { filter: brightness(0); }
.editorial-page #nav.scrolled .nav-cta { background: var(--accent); color: #fff; }
.editorial-page .mobile-menu { background: var(--ink); }
.editorial-page .mobile-menu a { font-family: var(--serif); font-size: clamp(34px, 9vw, 52px); font-weight: 400; }
.editorial-page .mobile-menu a:hover { color: var(--accent); }

/* Farbfoto-Heroes */
.editorial-page .hero {
  min-height: max(600px, 70svh);
  padding: 138px 32px 58px;
  background: #292927;
}
.editorial-page .hero::before {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
}
.cases-page .hero::before {
  background-image: url("Use%20Cases/maleco-hamburg-sommerabend.jpg");
  background-position: center 54%;
}
.workshop-page .hero::before { background-image: url("Workshops/maleco62.jpg"); background-position: center 48%; }
.editorial-page .hero::after {
  background:
    linear-gradient(180deg, rgba(13,13,12,.67), rgba(13,13,12,.24) 42%, rgba(13,13,12,.78)),
    linear-gradient(90deg, rgba(13,13,12,.3), transparent 62%);
}
.editorial-page :is(.hero-grain, .hero-dots) { display: none; }
.editorial-page .hero-sub-page { min-height: max(600px, 70svh); }
.editorial-page .hero-inner { max-width: 980px; }
.editorial-page .hero h1 { color: #fff; font-size: clamp(44px, 5vw, 70px); }
.editorial-page .hero h1 .muted { color: rgba(255,255,255,.68); }
.editorial-page .hero-sub { max-width: 620px; margin-top: 24px; color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.55; }
.editorial-page .eyebrow {
  color: var(--text-2);
  font-size: 10px;
  letter-spacing: .1em;
}
.editorial-page .eyebrow::before { display: none; }
.editorial-page .eyebrow-light { color: rgba(255,255,255,.62); }
.editorial-page .hero-meta { color: rgba(255,255,255,.58); font-size: 10px; letter-spacing: .1em; }

/* Controls */
.editorial-page .btn {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 13px;
}
.editorial-page .btn-blue,
.editorial-page .hero-action-primary { background: var(--accent); color: #fff; }
.editorial-page .btn-blue:hover,
.editorial-page .hero-action-primary:hover { background: var(--accent-hover); box-shadow: 0 12px 34px rgba(0,119,255,.22); }
.editorial-page .btn-outline:hover { border-color: var(--ink); }
.editorial-page .toc { gap: 8px; margin-top: 34px; }
.editorial-page .toc a {
  padding: 9px 14px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 12px;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}
.editorial-page .hero-actions { max-width: 780px; }
.editorial-page .chip { border-radius: 6px; font-family: var(--sans); font-size: 12px; }
.editorial-page .chip svg { color: #fff; }

/* Shared sections */
.editorial-page .logos { padding: 42px 0 60px; background: #f4f4f0; }
.editorial-page .logos-label { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.editorial-page .logo-grid { border-color: var(--line); background: var(--line); }
.editorial-page .logo-cell { min-height: 118px; background: #f4f4f0; }
.editorial-page .sec { padding: var(--pad-y) 0; background: #fff; }
.editorial-page .sec-alt { background: #e9e9e4; }
.editorial-page .sec-head { margin-bottom: clamp(30px, 3.5vw, 46px); }
.editorial-page .sec-head h2,
.editorial-page .statement h2 { font-size: clamp(34px, 3.6vw, 52px); }
.editorial-page .sec-head p,
.editorial-page .statement p { font-size: 16px; line-height: 1.58; }
.editorial-page .statement { max-width: 920px; }
.editorial-page .statement-point { font-size: clamp(19px, 1.8vw, 26px); font-weight: 500; }

/* Project archive */
.editorial-page .case-list { border-top-color: var(--line); }
.editorial-page .case-acc { border-bottom-color: var(--line); }
.editorial-page .case-acc > summary { grid-template-columns: 160px 1fr 24px; padding: 24px 0; }
.editorial-page .case-acc > summary:hover { background: var(--accent-wash); }
.editorial-page .case-thumb { border-radius: 6px; }
.editorial-page .case-thumb img { filter: none; }
.editorial-page .case-acc h2 { font-size: clamp(22px, 2.35vw, 32px); font-weight: 400; }
.editorial-page .case-chevron { color: var(--accent); }
.editorial-page .case-body { grid-template-columns: 160px 1fr; padding-bottom: 38px; }
.editorial-page .case-block-label { color: var(--text-2); font-size: 10px; letter-spacing: .1em; }
.editorial-page .case-block p { max-width: 78ch; font-size: 15px; line-height: 1.72; }
.editorial-page .case-outcome { padding: 28px 30px; border-radius: 6px; background: #e9e9e4; }
.editorial-page .case-outcome li { font-size: 15px; }
.editorial-page .case-outcome li::before { border-radius: 0; background: var(--accent); }
.editorial-page .case-ask { color: var(--ink); font-family: var(--sans); }
.editorial-page .cta-band { padding: var(--pad-y) 0 0; background: #fff; }
.editorial-page .band { border-radius: 0; background: var(--ink); }
.editorial-page .band::before { display: none; }
.editorial-page .band h2 { font-size: clamp(34px, 3.5vw, 50px); font-weight: 400; }

/* Workshop components */
.editorial-page .cards { gap: 12px; }
.editorial-page .card {
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: none;
}
.editorial-page .card:hover { transform: translateY(-2px); border-color: rgba(21,21,20,.28); box-shadow: none; }
.editorial-page .card-hl { background: var(--ink); border-color: var(--ink); box-shadow: none; }
.editorial-page .card h3 { font-size: 22px; }
.editorial-page .icon-tile { border-radius: 6px; background: var(--tint); color: var(--ink); }
.editorial-page .step:hover { background: var(--accent-wash); }
.editorial-page .step-num { color: var(--text-2); }
.editorial-page .includes-item { border-radius: 6px; font-family: var(--sans); }
.editorial-page .includes-item svg { color: var(--ink); }
.editorial-page .pkg-grid { gap: 12px; }
.editorial-page .pkg { border-color: var(--line); border-radius: 6px; }
.editorial-page .pkg.featured { border-color: var(--ink); }
.editorial-page .pkg-badge { border-radius: 4px; background: var(--accent); color: #000; font-size: 10px; }
.editorial-page .pkg h3 { font-size: 24px; }
.editorial-page .pkg-price { font-family: var(--serif); font-weight: 400; font-size: 42px; }
.editorial-page .band-blue { border-radius: 0; background: var(--ink); }
.editorial-page .faq-item .plus { color: var(--ink); }
.editorial-page .faq-item summary { font-size: 18px; font-weight: 500; }
.editorial-page .contact-value a:hover { color: var(--accent); }
.editorial-page form input,
.editorial-page form select,
.editorial-page form textarea { border-radius: 6px; font-family: var(--sans); background: #fff; }
.editorial-page form input:focus,
.editorial-page form select:focus,
.editorial-page form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,119,255,.12); }
.editorial-page form button {
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
}
.editorial-page form button:hover { background: var(--accent-hover); }

/* Footer */
.editorial-page footer {
  padding: 40px 0 46px;
  border-top: 0;
  background: var(--ink);
}
.editorial-page footer .footer-inner img { height: 22px; filter: brightness(0) invert(1); opacity: .66; }
.editorial-page footer :is(.footer-links a, .footer-copy) { color: rgba(255,255,255,.46); font-size: 11px; }
.editorial-page footer .footer-links a:hover { color: var(--accent); }

@media (max-width: 1000px) {
  .editorial-page .wrap { width: min(760px, 100% - 40px); }
  .editorial-page #nav { padding-inline: 20px; }
  .editorial-page .case-acc > summary { grid-template-columns: 124px 1fr 24px; }
  .editorial-page .case-body { grid-template-columns: 124px 1fr; }
}

@media (max-width: 880px) {
  .editorial-page #nav { min-height: 78px; }
  .editorial-page .hero { min-height: 620px; padding: 124px 20px 52px; }
  .editorial-page .hero-actions { width: min(100%, 620px); }
}

@media (max-width: 760px) {
  .editorial-page .case-acc > summary { grid-template-columns: 92px 1fr 20px; gap: 16px; }
  .editorial-page .case-body { grid-template-columns: 1fr; }
  .editorial-page .case-body > :first-child { grid-column: 1; }
}

@media (max-width: 620px) {
  .editorial-page .wrap { width: calc(100% - 32px); }
  .editorial-page .hero { min-height: 600px; padding: 112px 16px 44px; }
  .editorial-page .hero h1 { font-size: clamp(38px, 10.5vw, 52px); }
  .editorial-page .hero-sub { font-size: 15px; }
  .editorial-page .hero-actions .btn,
  .editorial-page .hero-actions .chip { border-radius: 6px; }
  .editorial-page .sec-head h2,
  .editorial-page .statement h2 { font-size: clamp(32px, 9vw, 42px); }
  .editorial-page .case-acc h2 { font-size: 22px; }
  .editorial-page .band { padding-inline: 22px; }
  .editorial-page .band h2 { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-page :is(.card, .case-acc > summary, .step, .btn) { transition: none; }
}