/* Achates: a sober classic bookshop page, a single woodcut beside the text */
:root {
  --paper: #faf9f5;
  --ink: #333333;
  --title: #282828;
  --muted: #7a7a7a;
  --rule: #e4e0d8;
  --wine: #4f0707;
  --wine-hover: #af244a;
  --serif: "Ovo", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 1.06rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a, a:visited { color: var(--wine); text-underline-offset: 3px; }
a:hover, a:focus, a:active { color: var(--wine-hover); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }

/* Header: centered title, language switch at the right */
.site-header { padding-top: clamp(1.5rem, 4vw, 2.75rem); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.site-title, .site-title:visited {
  grid-column: 2; text-align: center; color: var(--title); text-decoration: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 4.5vw, 2.3rem); line-height: 1.15;
  font-variant-caps: small-caps; letter-spacing: .05em;
}
.lang { grid-column: 3; justify-self: end; display: inline-flex; gap: .2rem; }
.lang[hidden] { display: none; }
.lang button {
  font: inherit; font-size: .8rem; letter-spacing: .1em; color: var(--muted);
  background: none; border: 1px solid transparent; padding: .1rem .4rem; cursor: pointer;
}
.lang button:hover { color: var(--wine-hover); }
.lang button[aria-pressed="true"] { color: var(--wine); border-color: var(--wine); }

/* Main: woodcut on the left, information on the right, aligned to its bottom edge.
   The image height follows the viewport so the page fits without scrolling (up to 14" screens). */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; }
/* --plate-col can be set by the inline script to end the image exactly under the word "Achates" (currently off) */
.layout {
  display: grid; grid-template-columns: var(--plate-col, 1fr) minmax(0, 1fr);
  row-gap: clamp(2rem, 5vw, 4rem); column-gap: clamp(1rem, 2.5vw, 2rem); align-items: end;
  padding-top: clamp(1.5rem, 3.5vh, 2.5rem); padding-bottom: clamp(1.5rem, 3.5vh, 2.5rem);
}
.plate { margin: 0; justify-self: end; width: min(100%, calc(clamp(320px, 100svh - 14rem, 495px) * 1336 / 1400)); }
.plate img {
  display: block; width: 100%; height: auto; aspect-ratio: 1336 / 1400;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 10px 30px rgba(60,40,20,.12);
}

.info { max-width: 30rem; }
.info h1 {
  margin: 0; font-weight: 400; color: var(--title);
  font-size: 1.5rem; line-height: 1.5;
}

.block { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.block h2 {
  margin: 0 0 .75rem; font-weight: 400; font-size: .85rem; color: var(--wine);
  text-transform: uppercase; letter-spacing: .18em;
}

.contact { font-style: normal; font-size: 1.06rem; line-height: 1.85; }
.contact h3 { margin: 0 0 .25rem; font-weight: 400; font-size: 1em; color: var(--title); }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); padding: 1.5rem 0; text-align: center; font-size: .85rem; color: var(--muted); }

@media (max-width: 760px) {
  /* Title alone on its row, language switch above it at the right */
  .header-inner { grid-template-columns: 1fr; gap: .75rem; }
  .site-title { grid-column: 1; grid-row: 2; }
  .lang { grid-column: 1; grid-row: 1; }
  .layout { grid-template-columns: 1fr; }
  .plate { width: min(72%, 300px); justify-self: center; }
  .info { max-width: none; }
}