/* Bricolage Grotesque (Mathieu Triay) + Playfair Display (Claus Eggers Sørensen).
   Both SIL Open Font License 1.1 — free for commercial use. Loaded from Google Fonts;
   the <link> lives in index.html. */

:root {
  --ink: #000;
  --paper: #fff;
  --font-sans: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, serif;
  --canvas-w: 1024px;
  --canvas-h: 1993px;
  --gutter: 28px;          /* canvas offset inside the 1080px design frame */
  --z: 1.33333;            /* scale, kept in sync with the viewport by layout.js */
  --card-radius: 15px;
  --tile-radius: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, p, ul { margin: 0; padding: 0; font-weight: inherit; }
ul { list-style: none; }
img, picture { display: block; }
picture { width: 100%; height: 100%; }
picture > img { width: 100%; height: 100%; }

/* ---------- stage & canvas ---------- */
.stage {
  position: relative;
  width: 100%;
  overflow: hidden;             /* the marquee and the right gutter run past the frame */
}
.canvas {
  position: relative;
  width: var(--canvas-w);
  height: var(--canvas-h);
  margin-left: var(--gutter);
  zoom: var(--z);               /* desktop: the canvas re-lays out at scale, like the original */
}
.stage.is-touch .canvas {       /* phones/tablets: scaled down to fit and centred vertically */
  zoom: 1;
  position: absolute;
  top: var(--fit-top, 0px);
  left: calc(var(--gutter) * var(--z));
  margin: 0;
  transform: scale(var(--z));
  transform-origin: 0 0;
}
.stage.is-touch { height: var(--stage-h, 100vh); }
/* In fit mode the header stays flush with the top of the screen instead of moving
   down with the vertically centred canvas (Readymag "top-anchored" widgets). */
.stage.is-touch .band[data-clone-section="header"] { position: relative; top: calc(-1 * var(--pin, 0px)); }

/* Bands give each section its height; their content is positioned on the canvas. */
.band { display: block; height: var(--h); }
.band > *, .nav > li { position: absolute; }
.band > nav { position: static; }   /* list items position against the canvas */

/* ---------- header ---------- */
.nav > li {
  left: var(--x);
  top: 9px;
  height: 48px;
  font: 400 11px/48px var(--font-sans);
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 310;
}
.nav-link {
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 1px;
  background: none;
}
.nav-link:hover,
.nav-link[aria-current="page"] {
  background: linear-gradient(var(--ink), var(--ink)) 0 100% / 1px 1px repeat-x;
}
.nav-link:hover:not([aria-current]) { color: rgba(0, 0, 0, .8); }

.social {
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  z-index: 312;
}
.social img, .social svg { width: 100%; height: 100%; }
.social svg { fill: var(--ink); }
.social img { object-fit: cover; }

/* ---------- marquee ---------- */
.marquee {
  left: -487px;
  top: 70px;
  width: 2948px;
  height: 319.25px;
  z-index: 328;
  offset-path: path("M 1474 159.625 C 1474 159.625 124 159.625 124 159.625");
  offset-rotate: 0deg;
  animation: marquee 8s linear infinite;
}
@keyframes marquee {
  from { offset-distance: 0px; }
  to   { offset-distance: 1350px; }
}
.card {
  position: absolute;
  background: var(--img) center / 100% 100% no-repeat;   /* same scaling path as the original */
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: 315px;
  border-radius: var(--card-radius);
}
@media (min-width: 1081px) { .card { background-image: var(--img-l); } }

/* ---------- intro ---------- */
.headline {
  left: 31px;
  top: 419.98px;
  width: 520px;
  font: 300 38px/48px var(--font-sans);
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.kicker {
  left: 877px;
  top: 519.98px;
  width: 520px;
  font: italic 400 32px/44px var(--font-serif);
  white-space: pre-wrap;
}

/* ---------- work grid ---------- */
.tile {
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  transition: opacity .2s ease;
}
.tile img {
  width: 100%;
  height: 100%;
  border-radius: var(--tile-radius);
  object-fit: fill;
}
@media (hover: hover) { .tile:hover { opacity: .8; } }
.tile:active { opacity: .8; }

/* ---------- footer ---------- */
.email {
  left: 356px;
  top: 1909px;
  width: 315.94px;
  font: 300 21px/48px var(--font-sans);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .marquee { animation-play-state: paused; }
}

/* =====================================================================
   Shared pieces for the inner pages (about / contact / playground).
   Same 1024px canvas as the home page; each page sets its own --canvas-h.
   Body copy uses Archivo — the face the original inner pages used, and
   free (OFL), so it stays.
   ===================================================================== */
:root { --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif; --ink-soft: #282828; }

/* the little green hint pills ("HOVER HERE:)" / "DRAG ME:)") */
.pill {
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  background: #BFF747; border-radius: 7px; z-index: 329;
}
.pill-label {
  left: var(--x); top: var(--y); width: var(--w);
  font: 400 8px/12px var(--font-body); color: var(--ink-soft);
  white-space: nowrap; z-index: 330;
}

/* generic positioned text + picture blocks on the canvas */
.tx { left: var(--x); top: var(--y); width: var(--w); color: var(--ink-soft); }
.pic { left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.pic img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- about ---------- */
.about-grid { left: var(--x); top: var(--y); width: var(--w); height: var(--h); z-index: 304; }
.about-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-cell {                    /* one hover-zoom cell over the contact sheet */
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  background-image: url(assets/images/about-selfies.webp);
  background-size: 383px 255px;  /* the sheet at canvas size */
  background-position: var(--bx) var(--by);
  transition: transform .35s ease;
  transform-origin: center;
  z-index: var(--z-cell);
}
@media (hover: hover) { .about-cell:hover { transform: scale(1.2); } }
.about-head { font: 400 58px/57px var(--font-body); letter-spacing: -.02em; z-index: 310; }
.about-bio  { font: 400 12px/18px var(--font-body); z-index: 311; }
.about-bio p { margin: 0 0 18px; }
.about-bio p:last-child { margin: 0; }
.about-box {
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border: 1px solid var(--ink-soft); border-radius: 9px; z-index: 302;
}
.about-label { font: 400 7px/11px var(--font-body); letter-spacing: .06em; z-index: 313; }
.about-list  { font: 400 11px/16px var(--font-body); z-index: 312; }

/* ---------- contact ---------- */
.contact-intro { font: 400 19px/24px var(--font-body); z-index: 302; }
.contact-mail  { font: 400 25px/33px var(--font-body); z-index: 301; }
.contact-mail a { color: inherit; text-decoration: none; }
.contact-mail a:hover { text-decoration: underline; }
.contact-art { z-index: 312; pointer-events: none; }
.contact-form { left: var(--x); top: var(--y); width: var(--w); height: var(--h); z-index: 303; }
.contact-form .field {
  position: absolute; left: 0; width: 508px;
  border: 1px solid var(--ink-soft); border-radius: 18px; background: var(--paper);
  display: flex; align-items: center; padding: 0 20px;
}
.contact-form .field.tall { align-items: flex-start; padding-top: 15px; }
.contact-form input, .contact-form textarea {
  width: 100%; border: 0; outline: 0; background: none; padding: 0; margin: 0;
  font: 400 15px/20px var(--font-body); color: #000; resize: none;
}
.contact-form ::placeholder { color: #8a8a8a; opacity: 1; }
.contact-form button {
  position: absolute; left: 0; width: 508px; border: 0; cursor: pointer;
  background: #85B548; color: #fff; border-radius: 18px;
  font: 400 15px/49px var(--font-body); padding: 0;
}
.contact-form button:hover { background: #78a63e; }
.contact-form .sent { position: absolute; left: 0; font: 400 12px/18px var(--font-body); color: var(--ink-soft); }

/* ---------- playground ---------- */
.pg-note { left: var(--x); top: var(--y); width: var(--w); height: var(--h); z-index: 301; }
.pg-note img { width: 100%; height: 100%; object-fit: fill; display: block; }
.pg-intro { font: 400 18px/26px var(--font-body); text-align: center; z-index: 302; }
/* The stickers sit in their own full-canvas layer so each one positions against the
   canvas origin. The layer itself ignores the pointer; only the stickers take it. */
#stickers {
  position: absolute; left: 0; top: 0;
  width: var(--canvas-w); height: var(--canvas-h);
  pointer-events: none;
}
.sticker {
  position: absolute; pointer-events: auto;
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  z-index: var(--z-st); cursor: grab; touch-action: none;
  transition: transform .18s ease;
}
.sticker img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; -webkit-user-drag: none; user-select: none; }
@media (hover: hover) { .sticker:hover { transform: scale(1.04); } }
.sticker.dragging { cursor: grabbing; transition: none; }
@media (prefers-reduced-motion: reduce) { .sticker, .about-cell { transition: none; } }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pg-email {
  left: var(--x); top: var(--y); width: var(--w);
  font: 300 21px/48px var(--font-sans); text-transform: uppercase; z-index: 328;
}

/* ---------- project case-study pages ---------- */
.pj-title   { font: 400 23px/43px var(--font-sans); color: var(--ink-soft); z-index: 304; }
.pj-cat     { font: 400 18px/29px var(--font-body); color: #000; z-index: 303; }
.pj-desc    { font: 400 13px/20px var(--font-body); color: #000; z-index: 302; }
.pj-credits { font: 300 10px/15px var(--font-sans); color: var(--ink-soft); text-align: center; z-index: 305; }
.pj-full    { font: 400 10px/15px var(--font-sans); color: var(--ink-soft); text-align: center; z-index: 306; }
.pj-full a  { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.pj-full a:hover { opacity: .7; }
.pj-media {
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  z-index: var(--z-m); overflow: hidden;
}
.pj-media img, .pj-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .sent.is-ok  { color: #4e7d2a; }
.contact-form .sent.is-err { color: #a33; }
.contact-form button:disabled { opacity: .65; cursor: default; }

/* ---------- slideshow (carrossel do Readymag) ---------- */
.pj-slideshow {
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  z-index: var(--z-m); overflow: hidden; border-radius: 15px; background: #000;
}
.pj-slideshow .slides {
  display: flex; height: 100%;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  transform: translateX(calc(var(--i, 0) * -100%));
}
.pj-slideshow .slides img {
  flex: 0 0 100%; width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.pj-slideshow .sl-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .45); cursor: pointer; opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
.pj-slideshow:hover .sl-nav, .pj-slideshow:focus-within .sl-nav { opacity: 1; }
.pj-slideshow .sl-nav:hover { background: rgba(0, 0, 0, .7); }
.pj-slideshow .sl-nav::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff;
}
.pj-slideshow .sl-prev { left: 10px; }
.pj-slideshow .sl-next { right: 10px; }
.pj-slideshow .sl-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.pj-slideshow .sl-next::before { transform: translate(-70%, -50%) rotate(45deg); }
.pj-slideshow .sl-nav[disabled] { opacity: .25 !important; cursor: default; }
.pj-slideshow .sl-dots {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 6px;
}
.pj-slideshow .sl-dots button {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .45); cursor: pointer; transition: background .2s ease;
}
.pj-slideshow .sl-dots button[aria-current="true"] { background: #fff; }
@media (prefers-reduced-motion: reduce) { .pj-slideshow .slides { transition: none; } }