* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #f5f2ed;
  --bg-deep: #ece7df;
  --text: #1a1a1a;
  --text-light: #6b6560;
  --accent: #2c2824;
  --rule: rgba(44, 40, 36, 0.18);
  --band-height: clamp(220px, 13.5vw, 350px);   /* covers grow on wide screens so rows never repeat in view */
  --band-gap: 14px;
  --cover-gap: 14px;
  --scroll-speed: 60s;          /* fallback; JS sets a per-band duration */
  --gutter: 3rem;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

::selection { background: var(--accent); color: var(--bg); }

:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* ── Header ── */
.site-header {
  padding: 2.5rem var(--gutter) 2.25rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}

/* Wordmark: "Translation" / "& Editing" / "by Anthony Mahler".
   Column 1 holds the indent and the ampersand; "Editing" and the
   byline share column 2's left edge. Sizes are in em of --logo-size. */
.site-title { font-weight: inherit; }

.logo {
  --logo-size: 3.9rem;
  display: grid;
  grid-template-columns: 2.35em auto;
  font-size: var(--logo-size);
  color: var(--text);
  text-decoration: none;
}

.logo-word {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.005em;
}

.logo-word--first { grid-column: 1 / -1; }

.logo-amp {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.6em;
  line-height: 0.6;
  color: #958b80;
  justify-self: end;
  align-self: end;
  margin-right: 0.1em;
  transform: translateY(0.08em);
}

.logo-by {
  grid-column: 2;
  margin-top: 0.85rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #4a4540;
}

.site-nav { display: flex; gap: 2rem; }

.site-nav a,
.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light);
}

.site-nav a {
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.site-nav a:hover { color: var(--text); border-color: var(--text); }

/* Language switch, set apart from the section links by a hairline */
.site-nav .lang-switch { position: relative; margin-left: 0.75rem; }
.site-nav .lang-switch::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: 10%;
  bottom: 20%;
  width: 1px;
  background: var(--rule);
}

/* ── Scrolling Bands ── */
.bands-container {
  padding: 1rem 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--band-gap);
  overflow: hidden;
}

.bands-caption { padding: 0.9rem var(--gutter) 0; }

.band-row {
  overflow: hidden;
  /* room for the hover lift so covers aren't clipped */
  padding: 8px 0;
  margin: -8px 0;
}

.band {
  display: flex;
  width: max-content;
  will-change: transform;
}

.band--left  { animation: scroll-left  var(--scroll-speed) linear infinite; }
.band--right { animation: scroll-right var(--scroll-speed) linear infinite; }

.band:hover,
.band:focus-within { animation-play-state: paused; }

@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ── Cover Items ── */
.cover-link {
  position: relative;
  display: block;
  flex-shrink: 0;
  height: var(--band-height);
  /* margin (not flex gap) keeps the -50% loop point exact */
  margin-right: var(--cover-gap);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

span.cover-link { cursor: default; }

.cover-link:hover,
.cover-link:focus-visible {
  transform: scale(1.05);
  z-index: 2;
}

.cover-link img {
  height: 100%;
  width: auto;
  display: block;
  border-radius: 2px;
  background: var(--bg-deep);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.4s ease;
}

.cover-link:hover img {
  box-shadow: 0 8px 30px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);
}

/* ── Sections ── */
.section {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 3fr;
  gap: 2rem 4rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 6rem var(--gutter);
  border-top: 1px solid var(--rule);
}

.section > .eyebrow { padding-top: 0.9rem; }

.eyebrow .num { color: var(--text); margin-right: 0.6em; }

.section-body { max-width: 46rem; }

.lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  line-height: 1.3;
  color: var(--text);
}

.lede em { font-style: italic; }

.prose p {
  font-size: 1.05rem;
  color: var(--accent);
  margin-top: 1.25rem;
}

/* ── Intro ── */
.intro {
  max-width: 1180px;
  margin: 0 auto;
  padding: 4rem var(--gutter) 6rem;
}

.intro .lede {
  max-width: 52rem;
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  line-height: 1.22;
}

/* ── Publishers ── */
.publishers {
  list-style: none;
  margin-top: 2.5rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.75;
  color: var(--accent);
}

.publishers li { display: inline; white-space: nowrap; }  /* never split a name across lines */

.publishers li:not(:last-child)::after {
  content: "·";
  margin: 0 0.6em;
  color: var(--text-light);
}

/* ── Services ── */
.services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 3.5rem;
}

.service h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: 0.4rem;
}

.service .meta {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 1rem;
}

.service p { color: var(--accent); }

.service ul {
  list-style: none;
  margin-top: 1rem;
  border-top: 1px solid var(--rule);
}

.service li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
}

.service li .note {
  float: right;
  margin-left: 1rem;
  color: var(--text-light);
}

.process {
  margin-top: 3.5rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--accent);
}

/* ── About ── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.about-grid:has(.portrait) {
  grid-template-columns: 1fr 1.6fr;
  gap: 3.5rem;
  align-items: start;
}

.portrait {
  aspect-ratio: 4 / 5;
  background: var(--bg-deep);
  overflow: hidden;
}

.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

.about-title { margin-bottom: 2rem; }

.about-grid .prose p:first-child { margin-top: 0; }

/* ── Contact ── */
.contact-email {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 300;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.2rem;
  transition: border-color 0.3s ease;
}

.contact-email:hover { border-color: var(--text); }

.contact-location {
  margin-top: 1.75rem;
  font-size: 0.95rem;
  color: var(--text-light);
}

/* ── Footer ── */
.site-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 3rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--text-light);
}

.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--text); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .section { grid-template-columns: 1fr; gap: 1.5rem; padding: 4.5rem var(--gutter); }
  .section > .eyebrow { padding-top: 0; }
  .about-grid, .about-grid:has(.portrait) { grid-template-columns: 1fr; gap: 2.5rem; }
  .portrait { max-width: 22rem; }
}

@media (max-width: 768px) {
  :root {
    --band-height: 150px;
    --band-gap: 10px;
    --cover-gap: 10px;
    --scroll-speed: 45s;
    --gutter: 1.5rem;
  }

  .site-header {
    padding: 1.5rem var(--gutter) 1rem;
    flex-direction: column;
    gap: 1rem;
  }

  .site-header { align-items: flex-start; gap: 1.5rem; }
  .logo { --logo-size: 2.75rem; }
  .logo-by { font-size: 0.75rem; margin-top: 0.6rem; }
  .site-nav { gap: 1.25rem; flex-wrap: wrap; }
  .services { grid-template-columns: 1fr; gap: 2.5rem; }
  .intro { padding: 3rem var(--gutter) 4rem; }
  .site-footer { flex-direction: column; }
}

@media (max-width: 480px) {
  :root {
    --band-height: 120px;
    --scroll-speed: 40s;
  }
}

/* No drift for visitors who ask for less motion: each band becomes a
   row they can scroll sideways instead. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .band { animation: none !important; }
  .band-row { overflow-x: auto; scrollbar-width: none; }
  .band-row::-webkit-scrollbar { display: none; }
  .band [data-clone] { display: none; }
  .cover-link { transition: none; }
}