/*
  DESKTOP (1000px and wider)
  Every page is a collage: elements sit at exact positions on a 1024px wide
  ".page", copied from the original Readymag layout. The whole page is zoomed
  to fit the screen by site.js (photos may bleed past the edges).

  MOBILE (below 1000px)
  The same elements are laid out in one column, in the order they appear in
  src/pages/*.html. Small pictures (class "sm") go two per row.
*/

:root {
  --bg: #fdf9f3;
  --ink: #000;
  --text: rgba(0, 0, 0, 0.72);  /* running text: a softer black */
  --muted: rgba(0, 0, 0, 0.5);
  --accent: rgba(255, 102, 0, 0.8);
  --link: #0080ff;
  --scale: 1;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  overflow-x: clip; /* photos that bleed past the edge don't cause sideways scroll */
}

html { scroll-behavior: smooth; }

body {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 13px;
  line-height: 23px;
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { margin: 0; font: inherit; }

/* No bold anywhere, also over the bold set inline in the page sources.
   The depth of the black carries the hierarchy instead: full black for what
   used to be bold (titles, menu, emphasis), a softer black for running text,
   grey (--muted) for labels, dates and captions. */
* { font-weight: 400 !important; }
body { color: var(--text); }
h1, h2, h3, b, strong,
.site-header, .hero p, .pager a, .facts dd, .contact-form label, .contact-links .mail, .link-btns a,
[style*="font-weight:700"], [style*="font-weight: 700"] { color: var(--ink); }
img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }
a.nav { font-weight: 700; }
a.nav:hover { color: var(--accent); }
a.nav[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
a.link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a.link:hover { text-decoration: none; }
a.plain { text-decoration: underline; text-underline-offset: 3px; }
a.plain:hover { opacity: .7; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ================= DESKTOP ================= */

.page {
  position: relative;
  width: 1024px;
  margin: 0 auto;
  zoom: var(--scale);
}

/* ---------- header ---------- */

.site-header { position: absolute; inset: 0 0 auto 0; height: 0; z-index: 500; }
.site-header > * { position: absolute; }

.site-header .logo { left: 42px; top: 37px; width: 61px; }

.hero { position: absolute; left: -4px; top: 38px; width: 155px; z-index: 500; }
.hero p { margin: 14px -27px 0; width: 209px; text-align: center; font-weight: 700; }

.site-header .menu { left: 593px; top: 37px; display: flex; } /* 4 links × 87px end just before the language switch */
.site-header .menu a { width: 87px; text-align: center; }

.site-header .lang { left: 950px; top: 37px; display: flex; gap: 6px; color: var(--muted); }
.site-header .lang a:hover { color: var(--accent); }
.site-header .lang a[aria-current] { color: var(--ink); font-weight: 700; }

/* ---------- collage ---------- */

.canvas { position: relative; display: block; overflow-x: visible; overflow-y: clip; } /* nothing hangs below the page */
.canvas > * { position: absolute; }

.pic img { width: 100%; height: 100%; object-fit: cover; }
.pic a { display: block; width: 100%; height: 100%; }
.pic a img { transition: opacity .2s; }
.pic a:hover img { opacity: .85; }

.txt p, .txt h1, .txt h2 { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; }
.txt .br { display: block; } /* line break from the desktop layout (a space on mobile) */

.shape.line::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(50% - var(--t) / 2);
  height: var(--t);
  background: var(--c);
}
.shape.tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.canvas > .divider { display: none; } /* section dividers only show on mobile */

/* ---------- CV on the about page ---------- */

.cv { line-height: 21px; border-top: 1px solid rgba(0, 0, 0, .12); padding-top: 56px; } /* clearly apart from the intro */
.cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.cv h2 { font-size: 18px; line-height: 26px; font-weight: 700; margin: 0 0 14px; }
.cv section > h2 ~ h2 { margin-top: 36px; }
.cv h3 { font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.cv h3 span { display: block; font-weight: 400; color: var(--muted); }
.cv-item { margin-bottom: 26px; }
.cv-item p { margin: 0; white-space: normal; }
.cv ul { margin: 0; padding-left: 16px; }
.cv li { margin-bottom: 6px; }
.cv ul.cv-list { padding-left: 0; list-style: none; }
.cv ul.cv-list li { margin-bottom: 10px; }

/* ---------- plywood bed: process steps and size switch ---------- */

/* key facts next to the description */
.facts dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.facts dl > div { border-top: 1px solid rgba(0, 0, 0, .12); padding-top: 8px; }
.facts dt { font-size: 11px; line-height: 16px; color: var(--muted); }
.facts dd { margin: 0; font-weight: 700; }

/* the steps hang on a line drawn like the edge of a slat, with a slot cut at every step */
.step { border-left: 2px solid var(--ink); padding: 2px 0 0 32px; }
.step::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 6px;
  width: 16px;
  height: 12px;
  border: 2px solid var(--ink);
  border-left: 0;
  background: var(--bg);
}
.step .num { color: #ff8000; margin-right: 6px; }

.pic.drawing { mix-blend-mode: multiply; }   /* white render background melts into the page */
.pic.drawing img { object-fit: contain; }

.sizes .hint { margin: 0 0 8px; font-size: 11px; line-height: 16px; color: var(--muted); }
.size-btns { display: flex; gap: 8px; }
.size-btns button {
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 4px 12px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.size-btns button:hover { border-color: var(--accent); color: var(--accent); }
.size-btns button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ---------- contact ---------- */

/* Unlike the collage pages, the contact page flows normally: a title like the
   project pages, then one framed box with photo | text | form and the links
   along the bottom. The photo stretches to the height of the box. */
.canvas:has(> .contact) { height: auto !important; }
.canvas > .contact { position: static; padding: 100px 60px 48px; }
.contact h1 { font-size: 24px; line-height: 45px; font-weight: 700; margin-bottom: 20px; }
.contact p { margin: 0; }
.contact .label { font-size: 11px; line-height: 16px; color: var(--muted); }

.contact-box {
  display: grid;
  grid-template-columns: 180px 1.2fr 1fr; /* text column a bit wider, so justified lines don't gape */
  grid-template-areas:
    "photo text form"
    "photo links links";
  gap: 28px 40px;
  border: 1px solid var(--ink);
  padding: 32px;
}

.contact-pic { grid-area: photo; margin: 0; align-self: stretch; position: relative; min-height: 300px; }
.contact-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }

.contact-text { grid-area: text; min-width: 0; }
.contact-text .label { margin: 20px 0 4px; }
.contact-text ul { margin: 0; padding: 0; list-style: none; }
.contact-text li { margin-bottom: 6px; } /* a gap between items, so wrapped lines read as one item */
/* justified like the texts on the other pages; hyphenation (by the page's
   language) keeps the gaps between words small */
.contact-text p:not(.label),
.contact-text li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* links: the e-mail address, then the other profiles as small outlined
   buttons, styled like the size buttons on the bed page */
.contact-links {
  grid-area: links;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, .12);
}
.contact-links .mail { font-weight: 700; }
.link-btns { display: flex; gap: 8px; }
.link-btns a {
  font-weight: 700;
  border: 2px solid var(--ink);
  padding: 2px 12px;
  transition: color .2s, border-color .2s;
}
.link-btns a:hover { border-color: var(--accent); color: var(--accent); }

/* form: name and e-mail side by side, everything else full width */
.contact-box .contact-form { grid-area: form; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-content: start; }
.contact-box .contact-form > * { grid-column: 1 / -1; }
.contact-box .contact-form > label:nth-of-type(1),
.contact-box .contact-form > label:nth-of-type(2) { grid-column: auto; }
.contact-box .contact-form button { justify-self: start; }
.contact-box .contact-form input,
.contact-box .contact-form textarea { width: 100%; min-width: 0; } /* let the form shrink to its column */
.contact-box .contact-form .label { margin-bottom: -6px; }
.contact-box .form-status:empty { display: none; }

.contact-form { width: 100%; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.contact-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.contact-form input,
.contact-form textarea {
  font: inherit;
  font-weight: 400;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .35);
  border-radius: 0;
  padding: 4px 0;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-bottom-color: var(--accent); }
.contact-form button {
  align-self: flex-start;
  font: inherit;
  font-weight: 700;
  color: var(--bg);
  background: var(--ink);
  border: 0;
  border-radius: 0;
  padding: 8px 26px;
  cursor: pointer;
  transition: background .2s;
}
.contact-form button:hover { background: var(--accent); }
.contact-form button:disabled { opacity: .5; cursor: default; }
.contact-form .hp { display: none; }
.form-status { margin: 0; min-height: 23px; }
.form-status.ok { color: #1a7f37; }
.form-status.err { color: #c62828; }
.privacy { margin: 0; font-size: 11px; line-height: 16px; color: var(--muted); }

/* ---------- services ---------- */

/* Flows normally like the contact page: title and headline, one wide photo,
   the two packages as framed cards side by side, the terms, other services in
   a 2 × 2 grid, and the button to contact. */
.canvas:has(> .services) { height: auto !important; }
.canvas > .services { position: static; padding: 100px 60px 48px; }
.services h1 { font-size: 24px; line-height: 45px; font-weight: 700; margin-bottom: 20px; }
.services h2 { font-size: 24px; line-height: 45px; font-weight: 700; }
.services p { margin: 0; }
.services .where { margin-top: 8px; color: var(--muted); }
.services .num { color: #ff8000; margin-right: 6px; }
.services .label { font-size: 11px; line-height: 16px; color: var(--muted); }
/* what was bold here is full black now, like the rest of the site */
.services .consult, .prices .price { color: var(--ink); }

/* three photos side by side: a model, a prototype, a drone build */
.svc-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.svc-pics figure { margin: 0; position: relative; }
.svc-pics img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 65%; }
/* captions appear on the photo when you point at it (or tap it on a phone);
   site.js narrows each one to its longest line, so the box is only as wide as the words */
.svc-pics figcaption {
  position: absolute; right: 8px; bottom: 8px; max-width: calc(100% - 16px);
  padding: 4px 8px; background: var(--bg); color: var(--ink);
  font-size: 10px; line-height: 14px; text-align: right;
  text-wrap: balance; /* two lines of about equal length, not one word left over */
  opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.svc-pics figure:hover figcaption, .svc-pics figure:focus figcaption { opacity: 1; transform: none; }
.svc-pics figure:focus { outline: none; }
.svc-pics figure:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* packages: two framed cards of equal height */
.pkgs { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 56px; }
.pkg { display: flex; flex-direction: column; border: 1px solid var(--ink); padding: 24px 28px 28px; }
.pkg h2 { font-size: 18px; line-height: 26px; margin-bottom: 6px; }
.services .pkg-lead { margin-bottom: 18px; }
.pkg ul { margin: 0 0 20px; padding-left: 16px; }
.pkg li { margin-bottom: 4px; }
/* prices sit at the bottom of each card: the label and description across the
   whole width, then the time on the left and the amount on the right in Inter Tight,
   so they stand apart from the Courier text around them */
.prices { margin: auto 0 0; padding-top: 22px; display: grid; gap: 14px; }
.prices > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; border-top: 1px solid rgba(0, 0, 0, .12); padding-top: 10px; }
.prices dt, .prices .desc { grid-column: 1 / -1; }
.prices .time { grid-column: 1; }
.prices dt { font-size: 11px; line-height: 16px; color: var(--muted); }
.prices dd { margin: 0; }
.prices .price { grid-column: 2; text-align: right; white-space: nowrap; font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif; font-size: 28px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.prices .eur { display: block; margin-top: 4px; font-size: 13px; letter-spacing: 0; color: var(--muted); }
.pkg .proof { margin-top: 10px; }
.services .note { padding-top: 4px; font-size: 11px; line-height: 16px; color: var(--muted); }

/* consultation and terms right under the packages */
.svc-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 64px; margin-top: 28px; }
.svc-terms > div { display: grid; gap: 12px; align-content: start; }
.services .consult { font-weight: 700; }
.services .terms { color: var(--muted); }

.svc-other { margin-top: 80px; }
.svc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 16px; margin-bottom: 14px; }
.svc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 64px; }
.svc { display: flex; flex-direction: column; border-top: 1px solid rgba(0, 0, 0, .12); padding-top: 12px; }
.svc h3 { margin: 0 0 6px; font-size: 15px; line-height: 23px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.svc .proof { margin-top: auto; padding-top: 10px; } /* links line up at the bottom of each row */

.svc-cta { margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(0, 0, 0, .12); }
.btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--bg);
  background: var(--ink);
  padding: 10px 32px;
  transition: background .2s;
}
.btn:hover { background: var(--accent); }

/* ---------- previous / next project ---------- */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 40px 42px 0;
  font-weight: 700;
}
.pager a { display: flex; flex-direction: column; max-width: 45%; }
.pager a span { font-weight: 400; color: var(--muted); }
.pager .next { text-align: right; margin-left: auto; }
.pager a:hover { color: var(--accent); }

/* ---------- footer ---------- */

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-top: 60px;
  padding: 24px 42px 40px;
  border-top: 1px solid rgba(0, 0, 0, .12);
}
.site-footer a:hover { color: var(--accent); }

/* ---------- 404 ---------- */

.notfound { padding: 200px 42px 120px; text-align: center; }
.notfound h1 { font-size: 48px; line-height: 1; font-weight: 700; margin-bottom: 24px; }

/* ---------- "scroll down" hint pinned to the bottom of the screen ---------- */

.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 28px;
  translate: -50% 0;
  zoom: var(--scale);
  width: 98px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  color: rgba(0, 0, 0, .32);
  pointer-events: none;
  z-index: 1000;
  transition: opacity .3s;
}
.scroll-hint i {
  width: 29px;
  height: 24px;
  background: rgba(0, 0, 0, .32);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.scroll-hint.hidden { opacity: 0; }

/* ================= MOBILE ================= */

@media (max-width: 999px) { /* keep in sync with BREAK in site.js */
  body { font-size: 16px; line-height: 1.65; }

  .page { width: auto; max-width: 680px; zoom: 1; padding: 0 20px; margin: 0 auto !important; }

  /* header: sticky bar with logo, menu and language switch */
  .site-header {
    position: sticky;
    top: 0;
    height: auto;
    margin: 0 -20px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg);
    font-size: 14px;
  }
  .site-header > * { position: static; }
  .site-header .logo { width: 56px; }
  .site-header .menu { margin-left: auto; gap: 16px; }
  .site-header .menu a { width: auto; white-space: nowrap; }
  .site-header.is-home .menu { margin-left: 0; }
  .site-header .lang { margin-left: 4px; }
  .site-header.is-home .lang { margin-left: auto; }
  /* phones: logo + 4 links + language don't fit in one row, so the links get
     their own row under the logo (the home page has no logo, so it still fits) */
  @media (max-width: 559px) {
    .site-header:not(.is-home) { flex-wrap: wrap; row-gap: 4px; }
    .site-header:not(.is-home) .menu { order: 3; width: 100%; margin-left: 0; justify-content: space-between; }
    .site-header:not(.is-home) .lang { margin-left: auto; }
  }

  /* home: big logo above the projects, not in the bar */
  .hero { position: static; width: 180px; margin: 24px auto 28px; }
  .hero p { margin: 10px -20px 0; width: auto; }

  /* collage → one column */
  .canvas {
    height: auto !important;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 0 0;
  }
  .canvas > * {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }
  .canvas > .pic img { height: auto; }
  .canvas > .pic.pair { width: calc(50% - 5px) !important; }
  .canvas > .pic.pair img { aspect-ratio: 4 / 5; object-fit: cover; } /* pairs line up */

  .canvas > .txt { margin: 6px 0 22px; }
  .canvas > .txt:has(h1) { order: -1; margin-bottom: 6px; }   /* page title always first */
  .txt p, .txt h1, .txt h2 { line-height: 1.65 !important; }
  .txt h1, .txt h2 { margin-top: 14px; line-height: 1.3 !important; text-align: left !important; }
  .txt p span { font-size: inherit !important; }               /* one comfortable size for body text */
  /* justified paragraphs (not captions, labels, or right/centre-aligned lists like "software used") */
  .canvas > .txt:not(.cap):not(.label) p:not([style*="text-align"]),
  .cv li, .cv-item p {
    text-align: justify;
    hyphens: auto;          /* splits long words so the gaps between words stay small */
  }
  .txt .br { display: inline; }
  .txt .nb { font-weight: 400 !important; }                    /* long bold passages read better regular on a phone */
  .txt .br::before { content: " "; }                           /* desktop-only line breaks become spaces */

  /* captions: right under their photo, aligned right */
  .canvas > .cap { margin: -4px 0 22px; font-size: 14px; }
  .canvas > .cap p { text-align: right !important; }
  /* "software used" sits right under the title it belongs to */
  .canvas > .sw { margin: -6px 0 22px; font-size: 14px; }
  .canvas > .sw p { text-align: right !important; line-height: 1.5 !important; }

  /* labels like "KUKA process:" belong to the picture below */
  .canvas > .label { margin: 18px 0 -2px; }

  .canvas > .shape:not(.line),
  .canvas > .pic.bg { display: none; }

  /* a line from the collage, or a <div class="divider"> placed in the page source,
     becomes a thin divider between sections */
  .canvas > .shape.line,
  .canvas > .divider { display: block; height: 1px !important; margin: 34px 0 20px; background: rgba(0, 0, 0, .12); }
  .canvas > .shape.line::after { display: none; }

  /* plywood bed: steps keep their slot line, process photos are smaller than the main ones */
  .canvas > .txt.step { position: relative !important; inset: auto !important; margin: 0; padding: 2px 0 26px 32px; }
  .canvas > .txt.step.last { padding-bottom: 8px; }
  .canvas > .pic.proc { width: 78% !important; margin: 12px 0 0 auto; }
  .canvas > .sizes { margin: 0 0 4px; }
  .canvas > .facts { margin: 0 0 26px; }
  .facts dd { line-height: 1.5; }
  .size-btns button { padding: 6px 12px; font-size: 14px; }

  /* CV: one column */
  .cv-grid { grid-template-columns: 1fr; }
  .cv { line-height: 1.6; margin-top: 40px !important; padding-top: 36px; }
  .cv h3 { font-size: 15px; }
  .cv section + section { margin-top: 12px; }

  /* contact: photo on top as a wide strip, links in the middle (away from
     the same links in the footer), form last */
  .canvas > .contact { padding: 12px 0 8px; }
  .contact h1 { line-height: 1.3; margin-bottom: 16px; }
  .contact-box { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "text" "links" "form"; gap: 28px; padding: 0 20px 24px; }
  .contact-pic { min-height: 0; margin: 0 -20px; }
  .contact-pic img { position: static; height: auto; aspect-ratio: 3 / 2; object-position: 50% 45%; }
  .contact-links { justify-content: flex-start; padding: 16px 0; border-bottom: 1px solid rgba(0, 0, 0, .12); }
  .link-btns a { padding: 4px 12px; font-size: 14px; }
  .contact-box .contact-form { grid-template-columns: minmax(0, 1fr); }
  .contact-text p:first-child { text-align: left; } /* too short to justify nicely at phone width */

  /* services: everything in one column, the photo across the full width */
  .canvas > .services { padding: 12px 0 8px; }
  .services h1 { line-height: 1.3; margin-bottom: 16px; }
  .services h2 { line-height: 1.3; }
  .services .label, .prices dt, .services .note { font-size: 13px; line-height: 1.5; }
  .svc-pics { gap: 6px; margin-top: 28px; }
  .svc-pics figcaption { right: 4px; bottom: 4px; max-width: calc(100% - 8px); padding: 3px 5px; }
  .prices .price { font-size: 24px; }
  .prices .time, .prices .price { grid-column: 1 / -1; } /* phone: the amount goes under the text, still on the right */
  .prices .price { margin-top: 8px; }
  .pkgs, .svc-terms, .svc-list { grid-template-columns: minmax(0, 1fr); }
  .pkgs { gap: 24px; margin-top: 40px; }
  .pkg { padding: 20px; }
  .svc-other { margin-top: 56px; }
  .svc-list { gap: 28px; }
  .svc p:not(.proof) { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
  .svc-cta { margin-top: 48px; }

  .pager { flex-direction: column; gap: 20px; padding: 40px 0 0; }
  .pager a { max-width: 80%; }

  .site-footer {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 48px -20px 0;
    padding: 24px 20px 32px;
    font-size: 14px;
    text-align: center;
  }

  .notfound { padding: 120px 0 80px; }
  .scroll-hint { display: none; }
}