/* ============================================================
   WEROCC — website styles
   One stylesheet for every page.

   WHERE THINGS ARE
    1. Settings ............ colours, margins, font (start here)
    2. Base ................ resets, page background, scrolling
    3. Top bar ............. Menu · logo · Close / Contact Us
    4. Hover triangle ...... the green arrow next to links
    5. Menu pop-up ......... full-screen menu
    6. Footer .............. big W + links (homepage)
    7. Homepage ............ full-screen videos + phrase
    8. Projects page ....... one screen per project + numbers
    9. Project pages ....... Ressonance, Pixom
   10. About page
   11. Sustainability page
   12. Contacts page
   13. Journal page
   14. Process page
   15. Screen sizes ....... tablet, phone, upright screens

   WHICH PAGE USES WHAT
     index.html ........... 3, 4, 5, 6, 7
     projects.html ........ 3, 4, 5, 8
     project-*.html ....... 3, 4, 5, 9
     about.html ........... 3, 4, 5, 9 (shared bits) + 10
     sustainability.html .. 3, 4, 5, 9 (shared bits) + 11
     contacts.html ........ 3, 4, 5, 12
     journal.html ......... 3, 4, 5, 13
   ============================================================ */


/* ------------------------------------------------------------
   1. SETTINGS — change these to restyle the whole site
   ------------------------------------------------------------ */

:root {
  /* ONE DESIGN PIXEL — everything below is written in the sizes of
     the 1280 x 800 design and scales with the screen, so the page
     keeps its proportions on a bigger monitor. The smaller of the
     two ratios wins, so a full screen never overflows. Screens
     narrower than the design stay at 1:1 and use the sizes at the
     bottom of this file (section 14). */
  --s: max(1px, min(calc(100vw / 1280), calc(100svh / 800)));

  /* ---- Colours ---- */
  --green: #a3ff47;   /* brand green: text and lines */
  --dark: #243937;    /* dark green: page background */

  /* ---- Spacing ---- */
  /* Space at the left and right edges. On a screen wider than the
     design, the extra width is added to the margins instead of
     being given to the text, so every box keeps the proportions
     it has in the 1280 x 800 design. */
  --gutter: calc(36 * var(--s) + max(0px, (100vw - 1280 * var(--s)) / 2));
  /* The plain edge margin, without that extra space: used by the
     footer and by the menu pop-up, which stay wide on a big screen */
  --gutter-edge: calc(36 * var(--s));
  --edge: calc(24 * var(--s));       /* space at the top (top bar) and bottom (footer, project year) */

  /* ---- Font ---- */
  --font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --fade: 0.4s ease;  /* speed of the show / hide fades */

  /* ---- TEXT SIZES — change these to resize the whole site.
          Each one comes with its line height (--lh-…).
          The sizes get smaller on tablets and phones; see the
          bottom of this file (section 14). ---- */

  /* HEADER — every big line of text: the sentence over the
     About and Sustainability photos, the quote, the contact
     details, the project name over a photo and the homepage
     phrase (they are all the same size) */
  --fs-header: calc(35 * var(--s));
  --lh-header: calc(38 * var(--s));
  --fw-header: 700;   /* every header is bold */

  /* TITLE — the project name at the top of a project page
     (RESSONANCE, PIXOM): same size as a header, a little lighter */
  --fs-title: calc(35 * var(--s));
  --lh-title: 1;
  --fw-title: 700;

  /* SUB-TITLE — all the small headings in capitals: the type
     under a project name ("ART INSTALLATION DESIGN") and the
     section headings ("ADDITIVE MANUFACTURING") */
  --fs-subtitle: calc(18 * var(--s));
  --lh-subtitle: calc(23 * var(--s));
  --fw-subtitle: 500;

  /* TEXT — every paragraph, including the About intro.
     Two weights, same size: the normal one, and the lighter one
     for the paragraphs under ADDITIVE MANUFACTURING and
     MAN-MACHINE (add the class "ab__text--light" to use it) */
  --fs-text: calc(25 * var(--s));
  --lh-text: calc(29 * var(--s));
  --fw-text: 400;
  --fw-text-light: 300;

  /* LABEL — the small grey headings in capitals (GENERAL INFO,
     ABOUT:, THE COLLECTION:, CONTACTS) */
  --fs-label: calc(14 * var(--s));
  --lh-label: calc(18 * var(--s));
  --fw-label: 500;

  /* INFO ROWS — both halves (Year: / 2025, Client: / Pixom),
     same size as a label. The name on the left is light, the
     value on the right matches the main text */
  --fw-key: 300;
  --fw-value: var(--fw-text);

  /* CAPTION — photo captions and the notes under the graphic
     and the colour swatches */
  --fs-caption: calc(12 * var(--s));
  --lh-caption: calc(17 * var(--s));
  --fw-caption: 300;

  /* META — the project type and year on the projects page */
  --fs-meta: calc(14 * var(--s));

  /* MENU BAR — "Menu", "Close", the project numbers */
  --fs-ui: calc(12 * var(--s));

  /* Two sizes used in one place each */
  --fs-footer: calc(12 * var(--s));  /* footer links and copyright */
  --lh-footer: calc(18 * var(--s));  /* space between the footer lines */
}


/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Homepage and projects page: one scroll = one screen.
     The long pages switch this off (see sections 9 and 11). */
  scroll-snap-type: y mandatory;
  /* Keeps the scrollbar's space while the menu is open, so
     nothing jumps sideways when it opens */
  scrollbar-gutter: stable;
}

/* The page can't scroll while the menu is open.
   The dark background paints everything the menu itself cannot
   reach (the strip kept free for the scrollbar, the scrollbar
   track, the bounce area at the top and bottom), so no white
   shows around the menu. */
html.menu-open {
  overflow: hidden;
  background: var(--dark);
  scrollbar-color: var(--dark) var(--dark);
}

body {
  margin: 0;
  background: var(--dark);
  color: var(--green);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}

/* White page with dark text — used by the project, About and
   Sustainability pages (class on <body>) */
.page-project {
  background: #fff;
  color: var(--dark);
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}


/* ------------------------------------------------------------
   3. TOP BAR — [Menu] [logo] [Close / Contact Us]
   ------------------------------------------------------------ */

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  /* the bar is part of the frame: it keeps the plain edge margin */
  padding: var(--edge) var(--gutter-edge) 0; /* --edge = distance from the top */
}

.topbar__logo {
  grid-column: 2;
}

.topbar__logo img {
  display: block;
  width: calc(132 * var(--s)); /* logo size */
  height: auto;
}

.topbar__btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--green);
  font: 400 var(--fs-ui)/1 var(--font); /* size of "Menu" / "Close" */
  cursor: pointer;
  /* Pulls the text up by the empty space above capital letters,
     so its top lines up with the top of the logo */
  margin-top: -0.1em;
}

.topbar__btn--left {
  grid-column: 1;
  justify-self: start;
}

.topbar__btn--right {
  grid-column: 3;
  justify-self: end;
}

/* The bar floats over the page on the homepage and the project,
   About, Sustainability and Contacts pages */
.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  transition: opacity var(--fade), visibility var(--fade);
}


/* ------------------------------------------------------------
   4. HOVER TRIANGLE
   A green triangle appears to the left of the text on hover.
   The text itself doesn't move. Size per element:
     --tri-w  width   --tri-h  height   --tri-gap  space before the text
   ------------------------------------------------------------ */

.menu__link,
.topbar__btn,
.footer__links a,
.project__title,
.project-nav__name,
.jn__more {
  --tri-w: calc(6 * var(--s));
  --tri-h: calc(7 * var(--s));
  --tri-gap: calc(6 * var(--s));

  position: relative;
  display: inline-block;
}

.menu__link::before,
.topbar__btn::before,
.footer__links a::before,
.project__title::before,
.project-nav__name::before,
.jn__more::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + var(--tri-gap));
  width: var(--tri-w);
  height: var(--tri-h);
  background: var(--green);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  opacity: 0;
  transform: translate(-30%, -54%);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.menu__link:hover::before,
.menu__link:focus-visible::before,
.topbar__btn:hover::before,
.topbar__btn:focus-visible::before,
.footer__links a:hover::before,
.footer__links a:focus-visible::before,
.project__title:hover::before,                  /* only over the project name */
.project:focus-visible .project__title::before, /* keyboard: section selected */
.project-nav__link:hover .project-nav__name::before,
.project-nav__link:focus-visible .project-nav__name::before,
.jn:hover .jn__more::before,
.jn:focus-visible .jn__more::before {
  opacity: 1;
  transform: translate(0, -54%);
}

.menu__link:focus-visible,
.topbar__btn:focus-visible,
.footer__links a:focus-visible,
.project:focus-visible {
  outline: none;
}


/* ------------------------------------------------------------
   5. MENU POP-UP
   Sizes come from the 1280 × 800 design and scale with the
   screen: --u = one design pixel.
   ------------------------------------------------------------ */

.menu {
  --u: min(calc(100vh / 800), calc(100vw / 1280));

  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--dark);

  /* closed; script.js adds .is-open */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fade), visibility var(--fade);
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
}

/* The menu stops where the scrollbar space starts (scrollbar-gutter,
   section 2), so this paints that strip green too. Without it a thin
   line of the page shows on the right edge. */
.menu::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: calc(40 * var(--s));
  background: var(--dark);
}

/* The list starts where the text starts; the triangle sits before
   it. It is as tall as the picture, and the links are spread from
   its top to its bottom, so both line up with the picture however
   many links there are. */
.menu__nav {
  position: absolute;
  top: calc(116 * var(--u));
  /* the menu keeps the plain edge margin, so it stays wide */
  left: calc(var(--gutter-edge) + 37 * var(--u));
  height: calc(651 * var(--u));
}

.menu__list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.menu__link {
  --tri-w: calc(18 * var(--u));
  --tri-h: calc(21 * var(--u));
  --tri-gap: calc(19 * var(--u));

  color: var(--green);
  font-size: calc(52 * var(--u));
  font-weight: 500;
  line-height: 1;
}

/* Picture on the right; script.js fills it from data-image */
.menu__media {
  position: absolute;
  top: calc(116 * var(--u));
  right: var(--gutter-edge);
  width: calc(567 * var(--u));
  height: calc(651 * var(--u));
  overflow: hidden;
}

/* Every picture is stacked; only the active one shows */
.menu__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.menu__image.is-active {
  opacity: 1;
}


/* ------------------------------------------------------------
   6. FOOTER (homepage) — big W logo + links
   ------------------------------------------------------------ */

.footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh; /* grows taller if the logo needs more room */
  /* the footer keeps the plain edge margin, so the logo stays wide */
  padding: calc(30 * var(--s)) var(--gutter-edge) 0;
  background: var(--dark);
  color: var(--green);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* The logo always spans from the left to the right margin */
.footer__logo {
  display: block;
  width: 100%;
  height: auto;
}

/* Bottom row: social · pages · copyright */
.footer__bar {
  display: grid;
  grid-template-columns: calc(300 * var(--s)) 1fr auto;
  align-items: last baseline; /* copyright on the same line as the last link */
  margin-top: auto;           /* pushes the row to the bottom */
  padding-top: calc(40 * var(--s));
  /* Bottom margin = the top bar's margin, measured from the
     baseline of the last line (0.31em = space under the baseline) */
  padding-bottom: calc(var(--edge) - 0.31em);
  font-size: var(--fs-footer);
  line-height: var(--lh-footer);
}

.footer__copy {
  margin: 0;
  font-weight: 500;
}


/* ------------------------------------------------------------
   7. HOMEPAGE — full-screen videos + the phrase
   ------------------------------------------------------------ */

.panel {
  position: relative;
  display: block;
  height: 100vh;   /* older browsers */
  height: 100svh;  /* full screen, also on phones */
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always; /* one scroll = one section */
}

.panel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills the screen, no black bars */
}

/* "IDEAS C.A.M TRUE" in the middle of the screen */
.tagline {
  position: fixed;
  top: 51%;
  left: 50%;
  z-index: 10;
  margin: 0;
  transform: translate(-50%, -50%);
  font-size: var(--fs-header);
  font-weight: var(--fw-header);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--fade), visibility var(--fade);
}

/* Top bar + phrase disappear over the footer (class from script.js) */
.is-footer .site-header,
.is-footer .tagline {
  opacity: 0;
  visibility: hidden;
}


/* ------------------------------------------------------------
   8. PROJECTS PAGE — one screen per project, numbers on the right
   ------------------------------------------------------------ */

/* Background: one photo, or two side by side (--split) */
.project__media {
  position: absolute;
  inset: 0;
  display: flex;
}

/* <picture> = the photo plus its upright (phone) version */
.project__media picture {
  display: contents;
}

/* The photo fills the whole screen, no bands. The covers are
   exported at 16:10, the same shape as the design, so nothing is
   cut on a normal screen; a very wide or very tall screen trims
   the edges. Change "cover" to "contain" to show the whole photo
   instead, with dark green bands where it does not fit. */
.project__media img {
  display: block;
  flex: 1;
  min-width: 0;
  height: 100%;
  object-fit: cover;
}

/* Name + type, in the middle of the screen */
.project__info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
}

.project__title {
  --tri-w: calc(8 * var(--s));
  --tri-h: calc(9 * var(--s));
  --tri-gap: calc(7 * var(--s));

  margin: 0;
  font-size: var(--fs-header);
  font-weight: var(--fw-header);
  line-height: 1;
}

/* The type is written as it reads: "Art Installation Design" */
.project__type {
  margin: calc(3 * var(--s)) 0 0;
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-subtitle);
  line-height: var(--lh-subtitle);
}

/* Year at the bottom, same margin as the top bar */
.project__year {
  position: absolute;
  bottom: calc(var(--edge) - 0.16em);
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  font-size: var(--fs-meta);
  font-weight: 400;
  line-height: 1;
}

/* (01) (02) (03)… fixed on the right, centred */
.project-nav {
  position: fixed;
  top: 50%;
  /* same edge margin as "Contact Us" in the bar above */
  right: var(--gutter-edge);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(10 * var(--s));
  transform: translateY(-50%);
  font-size: var(--fs-ui);
  line-height: 1;
}

.project-nav__link {
  position: relative;
  display: block;
  opacity: 0.5; /* the other projects' numbers are dimmed */
  transition: opacity 0.2s ease;
}

/* The project on screen (script.js), or the one under the mouse */
.project-nav__link.is-current,
.project-nav__link:hover,
.project-nav__link:focus-visible {
  opacity: 1;
  outline: none;
}

/* Project name: hidden, slides in left of the number on hover */
.project-nav__name {
  position: absolute;
  top: 0;
  right: calc(100% + calc(10 * var(--s)));
  white-space: nowrap;
  opacity: 0;
  transform: translateX(calc(6 * var(--s)));
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.project-nav__link:hover .project-nav__name,
.project-nav__link:focus-visible .project-nav__name {
  opacity: 1;
  transform: translateX(0);
}


/* ------------------------------------------------------------
   9. PROJECT PAGES (project-ressonance.html, project-pixom.html)
   White page: full-screen photo, name, two-column texts and
   photo rows that are dragged sideways.
   The About and Sustainability pages reuse .pp__row, .pp__label
   and the photo rows.
   ------------------------------------------------------------ */

/* Long pages scroll normally, without jumping a screen at a time */
html:has(.pp) {
  scroll-snap-type: none;
}

/* ---- Photo at the top ---- */

.pp__hero {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* The top photo, or a video used in its place */
.pp__hero img,
.pp__hero video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Project name + type ---- */

.pp__head {
  padding: calc(19 * var(--s)) var(--gutter) 0;
  text-align: center;
}

.pp__title {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: var(--fw-title);
  line-height: var(--lh-title);
  letter-spacing: -0.01em;
}

/* ---- Two columns: subtitle on the left, content on the right ---- */

.pp__row {
  display: grid;
  grid-template-columns: calc(542 * var(--s)) 1fr; /* left column width */
  padding: calc(44 * var(--s)) var(--gutter) 0;    /* space above each row */
}

/* Captions use the same dark green as the main text */
.pp__caption {
  color: var(--dark);
}

.pp__label {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
}

/* Year / Location / Client / Used Materials */
.pp__info {
  display: grid;
  grid-template-columns: calc(271 * var(--s)) 1fr;
  margin: 0;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}

.pp__info dt,
.pp__info dd {
  margin: 0;
}

/* Left half (Year: / Location:) lighter, right half (2025 /
   MNAC, Lisbon) the same weight as the main text */
.pp__info dt {
  font-weight: var(--fw-key);
}

.pp__info dd {
  font-weight: var(--fw-value);
}

/* Paragraphs */
.pp__text p {
  margin: 0 0 calc(29 * var(--s));
  font-size: var(--fs-text);
  font-weight: var(--fw-text);
  line-height: var(--lh-text);
}

.pp__text p:last-child {
  margin-bottom: 0;
}

/* ---- Photo row, dragged sideways ---- */

.pp__slider {
  display: flex;
  align-items: flex-start; /* photos line up by their top edge */
  gap: calc(11 * var(--s));               /* space between photos */
  margin-top: calc(22 * var(--s));
  padding-left: var(--gutter-edge);  /* photo rows keep the plain edge margin */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;   /* no scrollbar: the row is dragged */
  /* WEROCC arrow cursor (11 12 = its middle). The @2x file is for
     sharp screens; both are scaled down from _originals/site/cursor.png.
     The normal hand is the fallback.
     The arrow points right on the right half of the row and left
     on the left half — script.js adds .is-left. */
  cursor: url("Img/site/imgs/cursor-small.png") 11 12, grab;
  cursor: image-set(url("Img/site/imgs/cursor-small.png") 1x, url("Img/site/imgs/cursor-small@2x.png") 2x) 11 12, grab;
}

.pp__slider.is-left {
  cursor: url("Img/site/imgs/cursor-small-left.png") 11 12, grab;
  cursor: image-set(url("Img/site/imgs/cursor-small-left.png") 1x, url("Img/site/imgs/cursor-small@2x-left.png") 2x) 11 12, grab;
}

.pp__slider::-webkit-scrollbar {
  display: none;
}

.pp__slider.is-dragging {
  cursor: url("Img/site/imgs/cursor-small.png") 11 12, grabbing;
  cursor: image-set(url("Img/site/imgs/cursor-small.png") 1x, url("Img/site/imgs/cursor-small@2x.png") 2x) 11 12, grabbing;
}

.pp__slider.is-dragging.is-left {
  cursor: url("Img/site/imgs/cursor-small-left.png") 11 12, grabbing;
  cursor: image-set(url("Img/site/imgs/cursor-small-left.png") 1x, url("Img/site/imgs/cursor-small@2x-left.png") 2x) 11 12, grabbing;
}

/* Space after the last photo */
.pp__slider::after {
  content: "";
  flex: 0 0 var(--gutter-edge);
}

.pp__slide {
  flex: 0 0 auto;
  width: calc(532 * var(--s)); /* photo width when the row is not screen-height */
  margin: 0;
}

/* A slide holds a photo or a video — both behave the same */
.pp__slide img,
.pp__slide video {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.pp__caption {
  margin-top: calc(18 * var(--s));
  font-size: var(--fs-caption);
  font-weight: var(--fw-caption);
  line-height: var(--lh-caption);
}

/* ---- Photo row that fills one screen ----
   .pp__block          = subtitle (+ text) + photo row
   .pp__block--photos  = only the photo row                      */

.pp__block {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
}

.pp__block--photos {
  padding-top: calc(44 * var(--s));
}

.pp__block .pp__slider {
  flex: 1;
  min-height: 0;          /* lets the photos shrink to fit */
  align-items: stretch;
  padding-bottom: calc(44 * var(--s));   /* space under the photos */
}

/* A row with captions needs more room: the row scrolls sideways,
   so anything below its edge is cut off. Enough for a caption of
   three lines (17px each) under the tallest photo. */
.pp__block .pp__slider:has(.pp__caption) {
  padding-bottom: calc(96 * var(--s));
}

.pp__block .pp__slide {
  position: relative;
  width: auto; /* the width follows the photo */
  height: 100%;
}

/* Photos keep their own shape: a tall photo grows until it fills
   the height left on screen, a wide one is limited by its width
   and stays shorter. --pp-fit = that height, set by script.js. */
.pp__block .pp__slide img,
.pp__block .pp__slide video {
  width: auto;
  height: auto;
  max-width: calc(var(--pp-fit, 600px) * 0.95);
  max-height: 100%;
}

/* A video behaves like a wide photo: limited by its width, shorter
   than the row, and aligned with the top of the other slides.
   The aspect-ratio set on the element in the HTML gives it the
   same shape as the horizontal photos (16 / 10); object-fit crops
   the film to that shape instead of squashing it. */
.pp__block .pp__slide video {
  align-self: start;
  object-fit: cover;
}

/* The caption hangs under the photo without taking height, so only
   the subtitle + photos have to fit the screen. It is as wide as
   the photo above it, so a long caption wraps instead of running
   past the picture. */
.pp__block .pp__caption {
  position: absolute;
  top: calc(100% + calc(14 * var(--s)));
  left: 0;
  width: 100%;
}


/* ------------------------------------------------------------
   10. ABOUT PAGE (about.html)
   White page like the project pages, plus a headline over the
   photo, a big quote and a wide photo.
   ------------------------------------------------------------ */

.pr__hero,
.ab__hero {
  position: relative;
}

/* Green headline centred on the photo */
.pr__headline,
.ab__headline {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(calc(1000 * var(--s)), 100% - 2 * var(--gutter));
  margin: 0;
  transform: translate(-50%, -50%);
  color: var(--green);
  font-size: var(--fs-header);
  font-weight: var(--fw-header);
  line-height: var(--lh-header);
  letter-spacing: -0.01em;
  text-align: center;
  text-transform: uppercase;
}

/* "About us" paragraphs (the biggest text on the page) */
.ab__lead p {
  margin: 0 0 calc(33 * var(--s));
  font-size: var(--fs-text);
  font-weight: var(--fw-text);
  line-height: var(--lh-text);
}

.ab__lead p:last-child {
  margin-bottom: 0;
}

/* The quote across the page */
.ab__quote {
  padding: calc(90 * var(--s)) var(--gutter) 0;
  text-align: center;
}

.ab__quote p {
  max-width: calc(1140 * var(--s));
  margin: 0 auto;
  font-size: var(--fs-header);
  font-weight: var(--fw-header);
  line-height: var(--lh-header);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Wide photo under the quote */
.ab__figure {
  /* Width of the picture under the quote — make this number
     smaller or bigger to resize it */
  width: min(calc(800 * var(--s)), 100% - 2 * var(--gutter));
  margin: calc(24 * var(--s)) auto 0;
}

.ab__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* "Our DNA" / "Our ID": subtitle, heading and text in one column */
/* "Additive Manufacturing", "Man-Machine" — subtitle style,
   written as they read */
.ab__heading {
  margin: 0;
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-subtitle);
  line-height: var(--lh-subtitle);
}

.ab__text p {
  margin: 0 0 calc(29 * var(--s));
  font-size: var(--fs-text);
  font-weight: var(--fw-text);
  line-height: var(--lh-text);
}

/* The lighter paragraphs (ADDITIVE MANUFACTURING, MAN-MACHINE) */
.ab__text--light p {
  font-weight: var(--fw-text-light);
}


/* ------------------------------------------------------------
   11. SUSTAINABILITY PAGE (sustainability.html)
   Uses the About page rules, plus the full-screen graphic and
   the material colour swatches.
   ------------------------------------------------------------ */

/* The diagram, stacked: space above, the drawing, the caption.
   The three numbers in padding/gap set the distances:
   calc(48 * var(--s)) under the header video, calc(40 * var(--s)) before the caption,
   calc(44 * var(--s)) under it (same as the rest of the page). */
.su__graphic {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: calc(48 * var(--s)) 0 calc(44 * var(--s));
}

/* The drawing has empty space inside the file: 2.78% left and
   2.71% right. The graphic is made that much wider and pushed
   left, so the "M" of Matter lines up with the "M" of Menu and
   the right end lines up with the right margin.
   If you replace the file, measure its empty space and change
   0.9451 (the drawing's share of the width) and 0.0278 (the
   empty space on the left). */
.su__graphic img,
.su__graphic video {
  flex: none;
  /* lines up with the Menu button, so it uses the same edge margin */
  width: calc((100% - 2 * var(--gutter-edge)) / 0.9451);
  height: auto;
  margin-left: calc(var(--gutter-edge) - (100% - 2 * var(--gutter-edge)) / 0.9451 * 0.0278);
}

/* The video of the diagram has wide empty bands above and below
   the drawing, which would make this section taller than a screen.
   They are cropped away here: the second number is the height kept
   out of the 1844 x 1456 frame — raise it to keep more empty space. */
.su__graphic video {
  aspect-ratio: 1844 / 800;
  object-fit: cover;
}

/* Caption under the drawing */
.su__graphic figcaption {
  max-width: calc(1160 * var(--s));
  margin: calc(40 * var(--s)) 0 0 var(--gutter);
  color: var(--dark); /* same green as the main text */
  font-size: var(--fs-caption);
  font-weight: var(--fw-caption);
  line-height: var(--lh-caption);
}

/* Material name on the left (001 RPETG) */
.su__material {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-caption);
  line-height: var(--lh-caption);
}

/* The second material row sits close under the first */
.su__materials--next {
  padding-top: calc(14 * var(--s));
}

/* Space under the last material row: the same calc(44 * var(--s)) the photo rows
   leave under their pictures on the About page */
.su__materials:last-child {
  padding-bottom: calc(44 * var(--s));
}

/* Colour swatches, three per row. A material with more than three
   simply wraps onto a second row.
   First number = space between rows, second = space between columns */
.su__swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(28 * var(--s)) calc(8 * var(--s));
}

.su__swatches figure {
  margin: 0;
}

.su__swatches img {
  display: block;
  width: 100%;
  height: auto;
}

.su__swatches figcaption {
  margin-top: calc(17 * var(--s));
  font-size: var(--fs-caption);
  font-weight: var(--fw-caption);
  line-height: var(--lh-caption);
}

/* Code, colour name and description, each on its own line */
.su__code,
.su__name,
.su__desc {
  display: block;
}

.su__code {
  /* Same green as the main text. For a lighter code line use:
     color: color-mix(in srgb, var(--dark) 50%, #fff); */
  color: var(--dark);
}

/* The material name is a touch heavier than the code above it */
.su__name {
  font-weight: 400;
}

/* Description under the colour name: same size, lighter */
.su__desc {
  font-weight: var(--fw-caption);
}


/* ------------------------------------------------------------
   12. CONTACTS PAGE (contacts.html)
   One screen, no scrolling: the outlined triangle at the top,
   the details at the bottom.
   ------------------------------------------------------------ */

.ct {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  padding: calc(123 * var(--s)) var(--gutter) calc(28 * var(--s)); /* calc(123 * var(--s)) = where the triangle starts */
  overflow: hidden;
}

/* The triangle shrinks with the space above the details, so it
   never runs into them */
.ct__triangle {
  flex: 0 1 auto;
  min-height: 0;
  align-self: flex-start;
  width: auto;
  height: min(calc(313 * var(--s)), 100%);
  max-width: 34vw;
  color: var(--green); /* the outline colour */
}

/* All the details sit at the bottom */
.ct__info {
  margin-top: auto;
  padding-top: calc(24 * var(--s));
}

.ct__row + .ct__row {
  margin-top: calc(20 * var(--s)); /* space between the three rows */
}

/* Phone on the left, e-mail on the right */
.ct__row--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(24 * var(--s));
}

/* Address, centred */
.ct__row--center {
  display: flex;
  justify-content: center;
}

/* Instagram · Linkedin · Pinterest, in the design's proportions */
.ct__social {
  display: grid;
  grid-template-columns: 418fr 417fr 373fr;
}

.ct__label {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
}

.ct__big {
  margin: 0;
  font-size: var(--fs-header);
  font-weight: var(--fw-header);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.ct__big a {
  transition: opacity 0.2s ease;
}

.ct__big a:hover {
  opacity: 0.7;
}


/* ------------------------------------------------------------
   13. JOURNAL PAGE (journal.html)
   A photo with the headline, then one screen per piece of news:
   date, kind, title, photo(s), text and "Read more".
   The green triangle on the left margin is fixed on screen.
   ------------------------------------------------------------ */

/* The news sit on white, like the project pages */
.jn-page {
  background: #fff;
  color: var(--dark);
}

/* One scroll = one screen, like the homepage and the projects
   page (the snapping itself is switched on in section 2) */
.jn-page .pp__hero,
.jn {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* One piece of news = one screen, everything centred.
   The whole screen is a link to that piece of news. */
.jn {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100svh;   /* exactly one screen: the photo shrinks so that
                       the text and "Read more" always fit */
  /* Space at the top keeps the date clear of the fixed Menu and
     logo; the same space at the bottom keeps it centred */
  padding: calc(66 * var(--s)) var(--gutter);
  text-align: center;
}

/* Date above the title */
.jn__date {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-value);
  line-height: var(--lh-caption);
}

/* Kind (lighter) over the name (bold), both in capitals */
.jn__head {
  margin: calc(18 * var(--s)) 0 0;
  font-size: var(--fs-header);
  line-height: var(--lh-header);
  text-transform: uppercase;
}

.jn__kind,
.jn__title {
  display: block;
}

.jn__kind {
  font-weight: var(--fw-text); /* lighter than the name below */
}

.jn__title {
  font-weight: var(--fw-header);
}

/* The photo. It shrinks on a short screen so the whole piece of
   news still fits one screen — raise calc(514 * var(--s)) to make it bigger. */
.jn__media {
  display: flex;
  flex: 0 1 auto;    /* gives up its height first on a short screen */
  justify-content: center;
  gap: calc(8 * var(--s));
  min-height: 0;
  margin-top: calc(20 * var(--s));
}

.jn__media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* calc(514 * var(--s)) is the size in the design; on a shorter screen the
     photo shrinks to whatever height is left */
  max-height: min(calc(514 * var(--s)), 100%);
}

/* Two photos side by side */
.jn__media--split img {
  max-width: calc(50% - calc(4 * var(--s)));
}

/* Text under the photo, then the link */
.jn__text {
  flex: none;
  max-width: calc(660 * var(--s));
  margin-top: calc(46 * var(--s));
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-text);
  line-height: var(--lh-subtitle);
}

.jn__text p {
  margin: 0;
}

/* "Read more..." — a link with the green triangle on hover */
.jn__more {
  margin-top: var(--lh-subtitle);
  color: inherit;
  text-decoration: none;
}



/* ------------------------------------------------------------
   14. PROCESS PAGE (process.html)
   White page: photo with the headline, the six steps drawn as a
   diagram, the "behind the scenes" text and a photo row.
   The hero, the row and the photo row come from section 9.
   ------------------------------------------------------------ */

/* The hero and its green headline come from section 10 (About),
   which shares its rules with .pr__hero and .pr__headline. */

/* ---- The diagram ----
   The drawing keeps the margins of the page and its own shape. */
.pr__diagram {
  margin: calc(40 * var(--s)) var(--gutter) 0;
}

.pr__diagram img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- The six steps, written out under the paragraph ----
   Two columns: 01-03 on the left, 04-06 on the right */
.pr__steps {
  display: grid;
  grid-template-columns: calc(366 * var(--s)) 1fr; /* left column wider: its titles are longer */
  margin-top: calc(52 * var(--s));
}

/* Both lines are caption size, like the colour swatches on
   Sustainability: the name normal, the sentence under it lighter */
.pr__step,
.pp__text .pr__note {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

/* "01. Client Contact" */
.pr__step {
  margin: 0;
  font-weight: 400;
}

/* The sentence under each step. The name of the class is repeated
   so it beats the paragraph rule in section 9. */
.pp__text .pr__note {
  margin: 0 0 var(--lh-caption);
  font-weight: var(--fw-caption);
}

.pp__text .pr__col > .pr__note:last-child {
  margin-bottom: 0;
}

/* ---- The slicing techniques ----
   Four to a line: a cropped drawing, its name and what it does. */
.pr__slicing {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(56 * var(--s));
  padding: calc(72 * var(--s)) var(--gutter) 0;
}

.pr__technique {
  margin: 0;
}

/* The drawing is cut: it keeps the column width and shows only
   the middle of its height. */
.pr__technique img {
  display: block;
  width: 100%;
  height: auto;   /* without this the width="" height="" in the HTML wins */
  aspect-ratio: 215 / 297;
  object-fit: cover;
}

/* Name and text, like the colour swatches on Sustainability:
   caption size, the name normal, the text under it lighter */
.pr__technique figcaption {
  margin-top: calc(17 * var(--s));
  font-size: var(--fs-caption);
  font-weight: var(--fw-caption);
  line-height: var(--lh-caption);
}

/* "Planar", "Multiplanar"... */
.pr__name {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

/* What the technique does */
.pr__about {
  margin: 0;
  font-weight: inherit;
}

/* ------------------------------------------------------------
   15. SCREEN SIZES
   ------------------------------------------------------------ */

/* ---- Tablets and small laptops ----
   Only the text sizes from section 1 change here */
@media (max-width: 1100px) {
  :root {
    --fs-header: calc(30 * var(--s));
    --lh-header: calc(36 * var(--s));

    --fs-subtitle: calc(21 * var(--s));
    --lh-subtitle: calc(25 * var(--s));

    --fs-text: calc(21 * var(--s));
    --lh-text: calc(25 * var(--s));
  }

  /* Project pages: narrower left column, narrower photos */
  .pp__row {
    grid-template-columns: 34% 1fr;
  }

  .pp__slide {
    width: 42vw;
  }

  .pp__block .pp__slide img {
    max-width: min(calc(var(--pp-fit, 600px) * 0.95), 46vw);
  }
}

/* ---- Phones ---- */
@media (max-width: 700px) {
  :root {
    --gutter: calc(20 * var(--s));
    --edge: calc(16 * var(--s));

    --fs-header: calc(22 * var(--s));
    --lh-header: calc(28 * var(--s));

    --fs-title: calc(30 * var(--s));

    --fs-subtitle: calc(18 * var(--s));
    --lh-subtitle: calc(22 * var(--s));

    --fs-text: calc(18 * var(--s));
    --lh-text: calc(22 * var(--s));

    --fs-meta: calc(16 * var(--s));
  }

  /* Top bar */
  .topbar__logo img {
    width: calc(110 * var(--s));
  }

  /* Footer: links in two columns, copyright below */
  .footer__bar {
    grid-template-columns: 1fr 1fr;
    row-gap: calc(24 * var(--s));
  }

  .footer__copy {
    grid-column: 1 / -1;
  }

  /* Menu: bigger links, no picture */
  .menu__nav {
    top: calc(90 * var(--s));
    left: calc(var(--gutter) + calc(30 * var(--s)));
    height: auto;
  }

  .menu__list {
    display: block;
  }

  .menu__link {
    --tri-w: calc(14 * var(--s));
    --tri-h: calc(16 * var(--s));
    --tri-gap: calc(16 * var(--s));

    font-size: calc(40 * var(--s));
    line-height: calc(64 * var(--s));
  }

  .menu__media {
    display: none;
  }

  /* Project pages: one column, smaller text, narrower photos */
  .pp__head {
    padding-top: calc(36 * var(--s));
  }

  .pp__row {
    grid-template-columns: 1fr;
    padding-top: calc(40 * var(--s));
  }

  /* Process page: the six steps go under each other */
  .pr__steps {
    grid-template-columns: 1fr;
    margin-top: calc(32 * var(--s));
  }

  /* Process page: the techniques go two by two */
  .pr__slicing {
    grid-template-columns: 1fr 1fr;
    gap: calc(24 * var(--s));
    padding-top: calc(40 * var(--s));
  }

  .pp__text .pr__col > .pr__note:last-child {
    margin-bottom: var(--lh-caption);
  }

  .pp__text .pr__col:last-child > .pr__note:last-child {
    margin-bottom: 0;
  }

  .pp__row .pp__label {
    margin-bottom: calc(14 * var(--s));
  }

  .pp__info {
    grid-template-columns: calc(130 * var(--s)) 1fr;
  }

  .pp__text p {
    margin-bottom: calc(22 * var(--s));
  }

  .pp__slide {
    width: 78vw;
  }

  .pp__block .pp__slide img {
    max-width: min(calc(var(--pp-fit, 600px) * 0.95), 78vw);
  }

  /* About + Sustainability */
  .ab__lead p {
    margin-bottom: calc(22 * var(--s));
  }

  .ab__quote {
    padding-top: calc(50 * var(--s));
  }

  .ab__text p {
    margin-bottom: calc(22 * var(--s));
  }
}

/* ---- Screens held upright (phones, tablets in portrait) ----
   The projects page swaps in the tall "-portrait" photos; see
   the <picture> blocks in projects.html */
@media (orientation: portrait) {
  /* Two-photo projects: the photos go one above the other */
  .project__media--split {
    flex-direction: column;
  }

  .project__media--split img {
    width: 100%;
    height: auto;
    min-height: 0;
  }
}