/* Riccardo Brollo Architetto — design rules

   1. Grid     12 columns (8 on tablets, 4 on phones), fixed margin and gap.
   2. Axes     Text starts on column 1 or on column 7 (the half).
               Blocks on axis 1 stop at column 5: column 6 stays empty.
               Anything aligned right ends on the last column.
               The bar spans margin to margin, its three buttons equally
               spaced. On the home page it sits at the bottom of the first
               screen under the big R B A, scrolls up with the page and stops
               at the top. Elsewhere the bar starts at the top.
   6. Marks    R B A is the heading, the spiral is the signature: it closes
               every page on axis 1 and leads back to the start.
   5b.         Carousel cards are three columns wide; list cards two.
   3. Space    Vertical spacing only from the scale below (multiples of 8px).
   4. Type     Seven sizes. Jost for logo, titles, labels and buttons;
               Times for content.
   5. Parts    One card: two columns wide, image 4:5.
               One way to list facts: label above value, a hairline on top.

   Press G on any page to show the columns. */

:root {
  --bg: #ffffff;
  --ink: #111111;
  --muted: #8a8a8a;
  --line: #e2e2e2;
  --veil: rgba(255, 255, 255, .6);

  /* 1. Grid */
  --cols: 12;
  --margin: clamp(16px, 3vw, 48px);
  --gap: clamp(12px, 1.4vw, 24px);
  --page: 100vw; /* set by script.js without the scrollbar */
  --col: calc((var(--page) - 2 * var(--margin) - (var(--cols) - 1) * var(--gap)) / var(--cols));
  --bar: clamp(56px, 7vw, 96px);
  --radius: 6px;

  /* 3. Space */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 48px;
  --s5: clamp(64px, 8vw, 96px);
  --s6: clamp(96px, 12vw, 144px);

  /* 4. Type */
  --text: "Times New Roman", Times, serif;
  --brand: "Jost", "Futura", "Century Gothic", sans-serif;
  --fs-1: 13px;                         /* labels */
  --fs-2: 17px;                         /* captions, secondary */
  --fs-3: 20px;                         /* body, values, card titles */
  --fs-4: clamp(20px, 1.9vw, 27px);     /* project text */
  --fs-5: clamp(20px, 3vw, 44px);       /* buttons */
  --fs-6: clamp(34px, 5.5vw, 84px);     /* section titles */
  --fs-7: clamp(44px, 8.5vw, 136px);    /* page titles */
}

@media (max-width: 1024px) { :root { --cols: 8; } }
@media (max-width: 640px) { :root { --cols: 4; --fs-2: 15px; --fs-3: 17px; --fs-5: 17px; } }

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

html { scroll-behavior: smooth; scroll-padding-top: var(--s6); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-3);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

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

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--brand);
  font-weight: 400;
}

.label {
  margin: 0;
  font-family: var(--brand);
  font-size: var(--fs-1);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.muted { color: var(--muted); }

/* 1. Grid and the two axes */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap);
  padding: 0 var(--margin);
}

.axis-1 { grid-column: 1 / span 5; }
.axis-7 { grid-column: 7 / -1; }
.span-all { grid-column: 1 / -1; }

@media (max-width: 1024px) {
  .axis-1 { grid-column: 1 / span 3; }
  .axis-7 { grid-column: 5 / -1; }
}

@media (max-width: 640px) {
  .axis-1,
  .axis-7 { grid-column: 1 / -1; }
}

/* Column overlay, toggled with G */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  display: none;
}

.grid-overlay.on { display: grid; }
.grid-overlay div { background: rgba(255, 0, 60, .07); }

@media (max-width: 1024px) { .grid-overlay div:nth-child(n + 9) { display: none; } }
@media (max-width: 640px) { .grid-overlay div:nth-child(n + 5) { display: none; } }

/* 5. Facts: label above value, a hairline on top */

.facts { margin: 0; }

.facts > div {
  padding: var(--s1) 0 var(--s2);
  border-top: 1px solid var(--line);
}

.facts dt { margin-bottom: 2px; color: var(--muted); }
.facts dd { margin: 0; font-size: var(--fs-3); line-height: 1.35; overflow-wrap: anywhere; }
.facts a:hover { text-decoration: underline; }

/* Progressive blur: sharp at the inner edge, fading into blur at the screen edge */

.fade {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 15;
  pointer-events: none;
}

.fade > div { position: absolute; inset: 0; }

.fade-top { top: 0; height: var(--top-h, 120px); opacity: var(--top-o, 0); }
.fade-top.off { visibility: hidden; }

.fade-top > div { --dir: to top; }

.fade > div:nth-child(1) { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(var(--dir), transparent 0%, #000 40%); mask-image: linear-gradient(var(--dir), transparent 0%, #000 40%); }
.fade > div:nth-child(2) { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(var(--dir), transparent 30%, #000 70%); mask-image: linear-gradient(var(--dir), transparent 30%, #000 70%); }
.fade > div:nth-child(3) { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(var(--dir), transparent 60%, #000 100%); mask-image: linear-gradient(var(--dir), transparent 60%, #000 100%); }

/* A light veil keeps the buttons readable over photos */
.fade > div:nth-child(4) { background: linear-gradient(var(--dir), transparent, var(--veil)); }

/* Home: the first screen shows only R B A and the bar; the carousel follows */

.intro { height: calc(100vh - var(--bar)); height: calc(100svh - var(--bar)); min-height: 280px; }

.works { padding: var(--s6) 0; }

.monogram {
  /* Part of the page: it scrolls away and comes back with it */
  position: absolute;
  top: var(--s3);
  left: var(--margin);
  z-index: 20;
  width: calc(100% - 2 * var(--margin));
  margin: 0;
  font-family: var(--brand);
  font-size: min(44vw, calc((100svh - var(--bar)) * .95));
  font-weight: 400;
  line-height: .78;
}

.monogram a { display: flex; justify-content: space-between; }
.monogram span:first-child { margin-left: -.06em; }
.monogram span:last-child { margin-right: -.04em; }

/* Inner pages have no landing */
.is-small .monogram { display: none; }
.is-small .fade-top { --top-o: 1; }

/* Bar: in the page flow, it scrolls up and sticks to the top */

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--bar);
  padding: 0 var(--margin);
  font-family: var(--brand);
  font-size: var(--fs-5);
  font-weight: 600;
  line-height: 1;
}


.bar a { display: inline-flex; align-items: center; transition: opacity .2s; }
.bar a:hover,
.bar a[aria-current="page"] { opacity: .45; }

/* Inner pages: the bar already takes its own height at the top */
.is-small .head { padding-top: var(--s5); }

.arrow {
  width: .7em;
  height: .7em;
  margin-left: .14em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
}

/* The same arrow laid flat, for moving between images */
.arrow.h { width: .9em; height: .9em; margin: 0; }

/* A cross drawn with a thin line */
.cross {
  width: .8em;
  height: .8em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25px;
  vector-effect: non-scaling-stroke;
}

.cross path { vector-effect: non-scaling-stroke; }

/* 5. Card: two columns wide, image 4:5 */

.card { display: block; }

.card .frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--line);
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .4s ease;
  -webkit-user-drag: none;
  user-select: none;
}

@media (hover: hover) {
  .card:hover img { transform: scale(1.03); filter: blur(10px); }
}

.card h3 {
  margin-top: var(--s1);
  font-size: var(--fs-3);
  line-height: 1.2;
}

.card p {
  margin: 0;
  font-size: var(--fs-2);
  line-height: 1.3;
  color: var(--muted);
}

.card .where { color: var(--ink); }

/* Carousel: endless, every card three columns wide */

.carousel {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0 var(--margin);
  scrollbar-width: none;
  cursor: grab;
}

.carousel::-webkit-scrollbar { display: none; }
.carousel.dragging { cursor: grabbing; }
.carousel.dragging a { pointer-events: none; }

.carousel .card { flex: 0 0 calc(3 * var(--col) + 2 * var(--gap)); }

/* Page head: title across, then the two axes */

.head {
  row-gap: var(--s4);
  padding-top: var(--s6);
  padding-bottom: var(--s5);
  align-items: start;
}

.head h1 {
  grid-column: 1 / -1;
  font-size: var(--fs-7);
  line-height: .95;
  text-transform: uppercase;
}

.head .text p {
  margin: 0 0 .6em;
  font-size: var(--fs-4);
  line-height: 1.35;
}

@media (max-width: 640px) {
  .head .facts { order: 2; }
}

/* List pages: the same cards on the grid */

.list {
  row-gap: var(--s5);
  padding-bottom: var(--s6);
}

.list .card { grid-column: span 2; }

/* Contacts: a title on axis 1, the facts on axis 7 */

.contacts {
  row-gap: var(--s4);
  padding-top: var(--s5);
  padding-bottom: var(--s6);
  border-top: 1px solid var(--line);
  margin: 0 var(--margin);
  padding-left: 0;
  padding-right: 0;
}

.contacts h2 {
  font-size: var(--fs-6);
  line-height: 1;
  text-transform: uppercase;
}

.contacts .facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
}

.contacts .facts .wide { grid-column: 1 / -1; }

/* Plain list of values, no labels: the same hairline rows as the facts */
.facts.plain { padding: 0; list-style: none; }

.facts.plain li {
  padding: var(--s1) 0 var(--s2);
  border-top: 1px solid var(--line);
  font-size: var(--fs-3);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.facts.plain li:first-child { font-size: var(--fs-4); }
.facts.plain .key { margin-right: var(--s1); color: var(--muted); }

.copy {
  margin-left: var(--s2);
  font-family: var(--brand);
  font-size: var(--fs-1);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: middle;
}

.copy:hover { color: var(--ink); }

@media (max-width: 640px) {
  .contacts .facts { grid-template-columns: 1fr; }
}

/* Project images: one at a time, arrows on the sides, counter below */

.viewer { padding-bottom: var(--s5); }

.viewer-stage {
  --side: var(--s5);
  position: relative;
  height: clamp(320px, 66vh, 780px);
  margin: 0 var(--margin);
}

.viewer-stage figure {
  position: absolute;
  inset: 0 var(--side);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.viewer-stage figure.on { opacity: 1; pointer-events: auto; cursor: zoom-in; }

.viewer-stage img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius);
  -webkit-user-drag: none;
  user-select: none;
}

/* Drawings are outlined by a hairline */
.viewer-stage figure[data-group] img { box-shadow: 0 0 0 1px var(--line); }

.viewer-stage button {
  position: absolute;
  top: 50%;
  display: inline-flex;
  padding: var(--s1);
  font-family: var(--brand);
  font-size: var(--fs-5);
  line-height: 0;
  transform: translateY(-50%);
  transition: opacity .2s;
}

.viewer-stage button:hover { opacity: .45; }
.viewer-stage .back { left: calc(-1 * var(--s1)); }
.viewer-stage .fwd { right: calc(-1 * var(--s1)); }

.viewer-ui {
  align-items: baseline;
  margin-top: var(--s3);
  font-size: var(--fs-2);
}

.viewer-ui .count { grid-column: 1 / span 5; font-variant-numeric: tabular-nums; }
.viewer-ui .note { grid-column: 7 / -1; }

@media (max-width: 1024px) {
  .viewer-ui .count { grid-column: 1 / span 3; }
  .viewer-ui .note { grid-column: 5 / -1; }
}

@media (max-width: 640px) {
  .viewer-stage { --side: var(--s4); height: 56vh; }
  .viewer-ui .count { grid-column: 1 / span 2; }
  .viewer-ui .note { grid-column: 3 / -1; }
}

/* Full-screen view of one image */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1002;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s4) var(--margin);
  background: rgba(255, 255, 255, .97);
}

.lightbox.on { display: flex; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
}

.lightbox button {
  position: absolute;
  padding: var(--s1);
  font-family: var(--brand);
  font-size: var(--fs-5);
  font-weight: 600;
  line-height: 0;
}

.lightbox .close { top: var(--s1); right: calc(var(--margin) - var(--s1)); }
.lightbox .prev { left: calc(var(--margin) - var(--s1)); top: 50%; transform: translateY(-50%); }
.lightbox .next-img { right: calc(var(--margin) - var(--s1)); top: 50%; transform: translateY(-50%); }

/* Next project */

.next {
  display: block;
  margin: 0 var(--margin);
  padding: var(--s3) 0 var(--s6);
  border-top: 1px solid var(--line);
  font-family: var(--brand);
}

.next span { display: block; margin-bottom: var(--s1); }

.next strong {
  font-size: var(--fs-6);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.next:hover strong { opacity: .6; }

/* Signature: the spiral closes every page and leads back to the start */

.sign { padding-top: var(--s4); padding-bottom: var(--s4); }

.sign a {
  grid-column: 1 / span 1;
  display: block;
  width: var(--s4);
  height: var(--s4);
}

.sign img {
  width: 100%;
  height: 100%;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

.sign a:hover img { transform: rotate(-360deg); }

/* Cursor: a black dot */

@media (hover: hover) and (pointer: fine) {
  html.dot-cursor,
  html.dot-cursor * { cursor: none !important; }
}

.dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1003;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: width .2s, height .2s, margin .2s, opacity .2s;
}

.dot.on { opacity: 1; }
.dot.big { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* While the dot opens the next page it must stay visible */
.dot.falling { mix-blend-mode: normal; background: var(--ink); transition: none; }

/* The next project, bursting out of the dot */
.sheet {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  will-change: transform, clip-path;
}

.sheet iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card img { transition: none; }
}