/* =========================================================
   Laura Porto Ferreira — Portfolio
   Design tokens lifted from the Canva source design.
   ========================================================= */

:root {
  --color-bg: #ffffff;
  --color-ink: #111111;
  --color-ink-soft: #444444;
  --color-muted: #8a8a8a;
  --color-rule: #e6e6e6;
  --color-marker: #c81d25;

  --font-mono: "Special Elite", "Courier Prime", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;
  --font-caps: "Pathway Gothic One", "Archivo", sans-serif;

  --max-width: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3rem, 8vw, 6rem);
  --header-h: 64px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 0.18s ease, border-color 0.18s ease;
}

a:hover {
  color: var(--color-marker);
  border-color: var(--color-marker);
}

h1, h2, h3, h4 {
  font-family: var(--font-caps);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); text-transform: uppercase; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); text-transform: uppercase; }
h3 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.08em; }

p { margin: 0 0 1rem; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ----- Site header ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: transparent;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.site-nav {
  display: flex;
  gap: 1.75rem;
}

.site-nav a {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  border: none;
  position: relative;
  padding-bottom: 4px;
}

.site-nav a:hover,
.site-nav a.active {
  color: inherit;
  font-weight: bold;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-marker);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.site-nav a:hover::after,
.site-nav a.active::after { transform: scaleX(1); }

/* About link: handwritten underline — hover/active only */
.site-nav a[href$="index.html"]::after {
  background: none;
  background-image: url('../images/scribbles/about-menu-underline.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 60px;
  bottom: -30px;
  mix-blend-mode: multiply;
  transform: none;
  opacity: 0;
  transition: none;
}

.site-nav a[href$="index.html"]:hover::after,
.site-nav a[href$="index.html"].active::after {
  opacity: 1;
}

/* Projects link: handwritten underline — hover/active only */
.site-nav a[href$="projects.html"]::after {
  background: none;
  background-image: url('../images/scribbles/projetcs-menu-underline.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 60px;
  bottom: -30px;
  mix-blend-mode: multiply;
  transform: none;
  opacity: 0;
  transition: none;
}

.site-nav a[href$="projects.html"]:hover::after,
.site-nav a[href$="projects.html"].active::after {
  opacity: 1;
}

/* Contact link: handwritten circle — hover/active only */
.site-nav a[href="#contact-footer"]::after {
  background: none;
  background-image: url('../images/scribbles/contact-menu-circle.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  left: -12px;
  right: -12px;
  top: -10px;
  bottom: -10px;
  height: auto;
  transform: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.site-nav a[href="#contact-footer"]:hover::after,
.site-nav a[href="#contact-footer"].active::after {
  opacity: 1;
}

/* ----- Cover / hero ----- */

/* Sticky section: pins at viewport top (behind the header) while the
   about section scrolls up and over it. Mirrors the pattern used on
   daria-stolyarova.com — the section itself is sticky (z-index: 0),
   the next section has z-index: 1 and slides on top as you scroll. */
.cover {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cover-video {
  /* scale-down: behaves like `contain` on small screens (scales down to fit)
     but never upscales beyond the video's native 1122×792 on large screens.
     This preserves full native quality and shows the whole frame — "zoomed out". */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: scale-down;
  /* BT.709 limited-range (tv) → full-range correction: limited "white" is
     Y=235 which browsers render as ~rgb(235,235,235). brightness(255/235)
     maps it back to display white, removing the grey cast. */
  filter: brightness(1.085);
}

.cover-overlay {
  display: none;
}


/* ----- About block ----- */
/* z-index: 1 > cover (0) so the about section slides over the video on scroll. */
.about {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  padding: var(--section-y) 0;
  padding-top: calc(var(--section-y) + 6rem);
  /* border replaced by torn-paper pseudo-element */
  overflow: visible;
}

/* Torn paper edge — real photo PNG, bleeds upward over the video */
#torn-edge {
  position: absolute;
  top: -110px;
  left: 0;
  width: 100%;
  height: 260px;
  display: block;
  object-fit: cover;
  object-position: center 44%;
  pointer-events: none;
  z-index: 1;
}

/* Paperclip — sits on the torn edge, straddles cover and about sections */
.clip-anchor {
  position: absolute;
  top: 40px;
  left: 4vw;
  /* top of clip aligned with the torn paper visual edge */
  transform: translateY(calc(-20% + var(--clip-drift, 22px)));
  pointer-events: none;
  z-index: 3;
}

.paperclip-img {
  width: 90px;
  height: auto;
  display: block;
  transform: rotate(-12deg);
  transform-origin: center bottom;
  mix-blend-mode: multiply;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) 1.4fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
}

.about-portrait {
  position: relative;
  max-width: 450px;
  width: 100%;
  margin: 0 0 0 auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.about-portrait video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-data {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.35rem 0.75rem;
  font-size: 0.95rem;
  line-height: 1.6rem;
  align-items: start;
}

.about-data dt {
  font-family: "Bebas Neue", "Pathway Gothic One", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.1rem;
}

.about-data dt::after {
  content: ':';
}

.about-data dd { margin: 0 0 0.5rem; min-width: 0; overflow-wrap: anywhere; }

.about-data dd p { margin: 0; }

/* ----- About collage slide ----- */
.about-collage {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  width: 100%;
  height: 100svh;
  overflow: hidden;
  padding: 0;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.about-collage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- Section header ----- */
.section-head {
  padding: var(--section-y) 0 calc(var(--section-y) / 2);
  text-align: center;
}

.section-head .marker-num {
  font-family: var(--font-hand);
  color: var(--color-marker);
  font-size: 5rem;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  transform: rotate(-2deg);
  margin-right: 0.5rem;
}

.section-head h2 {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

.section-head .subtitle {
  display: block;
  font-family: var(--font-mono);
  color: var(--color-ink-soft);
  margin-top: 0.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

/* ----- Projects overview (intro grid) ----- */
.projects-overview {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--section-y) 0;
}

.projects-overview > .container {
  width: 100%;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 4vw, 3rem);
  align-items: start;
}

.overview-col {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

.num-img {
  height: clamp(120px, 17vw, 220px);
  width: auto;
  flex-shrink: 0;
}

.overview-content {
  padding-top: clamp(10.5px, 1.5vw, 19.5px);
  margin-left: clamp(-1.5rem, -2vw, -0.6rem);
}

.overview-category {
  font-family: var(--font-caps);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.2vw, 2.8rem);
  letter-spacing: 0.04em;
  margin: 0 0 0.6rem;
  line-height: 1.1;
}

.overview-projects {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.65rem, 0.9vw, 0.9rem);
  line-height: 2;
  text-transform: lowercase;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .overview-grid {
    grid-template-columns: fit-content(100%);
    justify-content: center;
    justify-items: start;
  }
  .overview-col {
    width: auto;
    max-width: 100%;
    justify-content: flex-start;
  }
  .overview-projects { white-space: normal; }
  .overview-content { margin-left: clamp(-1.25rem, -2vw, -0.6rem); }
}

@media (max-width: 720px) {
  .overview-grid { gap: clamp(1.25rem, 6vw, 2.5rem); }
  .overview-col { gap: 0.2rem; }
  .num-img { height: clamp(90px, 22vw, 140px); }
  .overview-content { margin-left: clamp(-0.9rem, -3vw, -0.4rem); padding-top: 0.25rem; }
}

.overview-projects a {
  border: none;
  color: inherit;
  display: inline-block;
  transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.overview-projects a:hover {
  font-weight: 700;
  opacity: 0.8;
  transform: scale(1.04);
}

.overview-projects a.is-active {
  font-weight: 700;
}

.overview-cta {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
}

.cta-img {
  height: clamp(100px, 15vw, 200px);
  width: auto;
}

.cta-link {
  display: inline-block;
  border: none;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.cta-link:hover {
  opacity: 0.8;
  transform: scale(1.04);
}

.projects-section {
  padding: calc(var(--section-y) / 2) 0;
}


.section-label {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
}

.section-label .num {
  font-family: var(--font-hand);
  color: var(--color-marker);
  font-size: 3rem;
  line-height: 1;
}

.section-label h2 { margin: 0; }

.project-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.project-card {
  display: block;
  border: none;
  color: inherit;
  background: transparent;
  position: relative;
}

.project-card .thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f3f3f3;
  margin-bottom: 0.85rem;
}

.project-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.project-card:hover .thumb img { transform: scale(1.03); }

.project-card .title {
  font-family: var(--font-caps);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
  margin: 0;
}

.project-card .meta {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 0.25rem;
}

/* ----- Project page ----- */
.project-hero {
  padding: var(--section-y) 0 calc(var(--section-y) / 2);
}

.project-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}

.project-hero-header .breadcrumb {
  margin-bottom: 0;
}

.project-category-label {
  font-family: var(--font-caps);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  white-space: nowrap;
}

.project-hero .breadcrumb {
  font-family: var(--font-caps);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
  overflow-wrap: anywhere;
}

.project-hero .breadcrumb a { border: none; }
.project-hero .breadcrumb .marker { color: var(--color-marker); }

.project-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.project-meta {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.35rem 0rem;
  font-size: 0.9rem;
  align-items: baseline;
}

.project-meta dt {
  font-family: var(--font-caps);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.1rem;
  padding-top: 0;
}

.project-meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.project-meta .checkbox {
  display: inline-block;
  margin-right: 0.75rem;
  position: relative;
  padding-left: 1.25rem;
  vertical-align: baseline;
}

.project-meta .checkbox::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--color-ink);
  position: absolute;
  left: 0;
  top: 0.2em;
  flex-shrink: 0;
}

.project-meta .checkbox.checked::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3.2rem;
  height: 3.2rem;
  transform: translate(-1.175rem, -50%);
  background: url('../images/scribbles/x-marker.png') center / contain no-repeat;
  pointer-events: none;
}

.abstract {
  font-size: 0.95rem;
  line-height: 1.75;
  text-align: justify;
  overflow-wrap: anywhere;
  min-width: 0;
}

@media (max-width: 600px) {
  .abstract { text-align: left; }
}

.abstract p + p { margin-top: 1rem; }

/* ----- Project gallery ----- */
.gallery {
  display: grid;
  gap: 1.5rem;
  padding: calc(var(--section-y) / 2) 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
}

.gallery figure { margin: 0; }

.gallery figcaption {
  display: none;
}

.gallery img {
  width: 100%;
  height: auto;
}

.gallery--full {
  grid-template-columns: 1fr;
}

/* ----- Hero image in project grid right column ----- */
.project-hero-img {
  margin: 0;
}

.project-hero-img img,
.project-hero-img video {
  width: 100%;
  height: auto;
  display: block;
}

/* ----- Abstract inside project-meta dl ----- */
.project-meta dd.meta-abstract {
  font-size: 0.88rem;
  line-height: 1.7;
  text-align: justify;
  overflow-wrap: anywhere;
}

.project-meta dd.meta-abstract p {
  margin: 0 0 0.75rem;
}

.project-meta dd.meta-abstract p:last-child {
  margin-bottom: 0;
}

/* ----- Process / collage section ----- */
.project-process {
  padding: calc(var(--section-y) / 2) 0 var(--section-y);
  border-top: 1px solid var(--color-rule);
}

.project-category-label--right {
  display: block;
  text-align: right;
  margin-bottom: 0.75rem;
}

.process-figure {
  margin: 0;
}

.process-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.external-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding: calc(var(--section-y) / 4) 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.external-links .label {
  font-family: var(--font-hand);
  color: var(--color-marker);
  font-size: 1.4rem;
  margin-right: 0.4rem;
  transform: rotate(-2deg);
  display: inline-block;
}

/* ----- Project nav (prev/next) ----- */
.project-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--section-y) 0;
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-caps);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.project-nav a { border: none; }
.project-nav .prev::before { content: "← "; color: var(--color-marker); }
.project-nav .next::after  { content: " →"; color: var(--color-marker); }

/* ----- Contact footer ----- */
.contact-footer {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(3rem, 6vw, 4rem);
}

.footer-copyright {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(0.6rem, 1.4vw, 1rem);
  margin: 0;
  font-family: var(--font-caps);
  font-size: clamp(0.65rem, 0.9vw, 0.85rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.footer-copyright .copyright-symbol {
  font-size: 1.15em;
  line-height: 1;
  display: inline-block;
}

/* Single-row 4-column grid */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(1rem, 3vw, 2rem);
  width: 100%;
  max-width: 1200px;
  align-items: center;
}

/* Each column */
.ct-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Phone ── */
.phone-wrap {
  position: relative;
  display: inline-block;
}
.phone-circle {
  width: clamp(160px, 19vw, 225px);
  display: block;
}
.phone-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-55%, -50%);
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 1vw, 0.95rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  border: none !important;
}

/* ── Email ── */
.ct-email {
  flex-direction: column;
  gap: 0;
}
.email-arrow {
  position: absolute;
  width: clamp(165px, 20vw, 245px);
  bottom: -100%;
  right: -25%;
  pointer-events: none;
}
.ct-email a {
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 1vw, 0.95rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  white-space: nowrap;
}

/* ── LinkedIn ── */
.linkedin-stamp {
  width: clamp(120px, 15vw, 190px);
  display: block;
}
.ct-linkedin a {
  border: none;
  display: block;
}

/* ── CV ── */
.ct-cv {
  flex-direction: column;
  align-items: center;
}
.cv-label {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  border: none;
  cursor: pointer;
}
/* ── Footer hover: bold text, no red colour ── */
.contact-footer a:hover {
  color: inherit;
  font-weight: 700;
}

/* ── Scribble animations ── */
/* ===== Maquetes marquee / infinite scroll carousel ===== */
.maquetes-marquee-section {
  overflow: hidden;
  width: 100%;
  padding: 2.5rem 0;
  background: transparent;
}

.maquetes-marquee-track {
  overflow: hidden;
  width: 100%;
}

.maquetes-marquee-inner {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: maquetes-scroll 60s linear infinite;
}


.maquetes-marquee-inner img {
  height: 260px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

@keyframes maquetes-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== Notebook lightbox ===== */
#history-sketchbook .maquetes-marquee-inner img { cursor: zoom-in; }

.nb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.nb-lightbox.is-open {
  opacity: 1;
  pointer-events: all;
}
.nb-lb-img {
  max-width: 88vw;
  max-height: 88vh;
  object-fit: contain;
  display: block;
}
.nb-book-wrap {
  flex: 0 0 auto;
  /* Aspect of source spreads is ~1.37 (3348x2448). Arrows are absolutely
     positioned overlays on the lightbox, so the wrap can use the full
     viewport without reserving horizontal space for them. */
  width: min(94vw, calc(86vh * 1.37));
  max-width: 94vw;
  max-height: 86vh;
  aspect-ratio: 1.37 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nb-book {
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
}
.nb-book .nb-page {
  background-color: #fdfaf3;
  overflow: hidden;
  /* IMPORTANT: do not set `position` here — page-flip's own CSS sets
     `position: absolute` on .stf__item, but only adds it inline for static
     pages. Overriding with a higher-specificity rule breaks the flipping
     pages' absolute positioning. */
}
.nb-book .nb-page__bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  /* The full spread image fills 2 page-widths × 1 page-height; positioning
     left/right reveals only the matching half of the spread. */
  background-size: 200% 100%;
  pointer-events: none;
}
.nb-book .nb-page__bg--left  { background-position: 0 center; }
.nb-book .nb-page__bg--right { background-position: 100% center; }
.nb-book .stf__parent { outline: none; }
.nb-lb-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
}
.nb-lb-close img {
  width: 2rem;
  height: auto;
  display: block;
}
.nb-lb-close:hover img {
  animation: nb-close-wobble 0.4s ease forwards;
}
.nb-lb-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.nb-lb-prev,
.nb-lb-next {
  position: absolute;
  top: 50%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  user-select: none;
  z-index: 2;
  /* Buttons sit on top of the book at narrow widths; the inner img stays
     rotated and centered, while the button itself is vertically centered. */
}
.nb-lb-prev { left: clamp(0.5rem, 1.5vw, 1.25rem); transform: translateY(-50%); }
.nb-lb-next { right: clamp(0.5rem, 1.5vw, 1.25rem); transform: translateY(-50%); }
.nb-lb-prev img,
.nb-lb-next img {
  width: clamp(1.5rem, 3vw, 2.5rem);
  height: auto;
  display: block;
}
.nb-lb-prev img  { transform: rotate(90deg); }
.nb-lb-next img  { transform: rotate(-90deg); }
.nb-lb-prev:hover img {
  animation: nb-arrow-bounce-l 0.4s ease forwards;
}
.nb-lb-next:hover img {
  animation: nb-arrow-bounce-r 0.4s ease forwards;
}
@keyframes nb-close-wobble {
  0%, 100% { transform: rotate(0deg)   scale(1); }
  30%       { transform: rotate(-20deg) scale(1.15); }
  70%       { transform: rotate(20deg)  scale(1.15); }
}
@keyframes nb-arrow-bounce-l {
  0%, 100% { transform: rotate(90deg)  translateX(0); }
  40%       { transform: rotate(90deg)  translateX(-6px); }
}
@keyframes nb-arrow-bounce-r {
  0%, 100% { transform: rotate(-90deg) translateX(0); }
  40%       { transform: rotate(-90deg) translateX(-6px); }
}
/* ============================== */

/* ===================================================== */

@keyframes ct-ring-wobble {
  0%          { transform: rotate(0deg) scale(1); }
  15%         { transform: rotate(-9deg) scale(1.04); }
  35%         { transform: rotate(7deg) scale(1.02); }
  55%         { transform: rotate(-4deg) scale(1.01); }
  75%         { transform: rotate(2deg) scale(1); }
  100%        { transform: rotate(0deg) scale(1); }
}
@keyframes ct-arrow-shake {
  0%, 100%    { transform: translateX(0)   rotate(0deg); }
  20%         { transform: translateX(-5px) rotate(-4deg); }
  50%         { transform: translateX(5px)  rotate(4deg); }
  80%         { transform: translateX(-3px) rotate(-2deg); }
}
@keyframes ct-stamp-press {
  0%          { transform: scale(1)    rotate(0deg); }
  30%         { transform: scale(0.86) rotate(-3deg); }
  65%         { transform: scale(1.06) rotate(2deg); }
  100%        { transform: scale(1)    rotate(0deg); }
}
@keyframes ct-voltage-jitter {
  0%, 100%    { transform: translateX(-50%) rotate(0deg); }
  20%         { transform: translateX(-44%) rotate(-5deg); }
  50%         { transform: translateX(-56%) rotate(5deg); }
  80%         { transform: translateX(-47%) rotate(-2deg); }
}

.ct-phone:hover .phone-circle   { animation: ct-ring-wobble   0.55s ease; }
.ct-email:hover .email-arrow     { animation: ct-arrow-shake    0.45s ease; }
.ct-linkedin:hover .linkedin-stamp { animation: ct-stamp-press  0.4s  ease; }
.ct-cv:hover .cv-arrow           { animation: ct-voltage-jitter 0.45s ease; }
.cv-arrow {
  display: block;
  position: absolute;
  top: calc(50% - 0.6em);
  left: 20%;
  transform: translateX(-50%);
  width: clamp(145px, 17vw, 200px);
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 820px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: clamp(1.5rem, 4vw, 2.5rem);
  }
  /* Keep email scribble from overflowing viewport in 2-column layout */
  .email-arrow {
    right: -8%;
  }
}
@media (max-width: 480px) {
  .contact-grid {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }

  /* Email row: scribble sits upper-right → push text to bottom of cell */
  .ct-email {
    min-height: 130px;
    justify-content: flex-end;
    padding-bottom: 0.5rem;
  }

  /* Email scribble: upper-right corner — arrow in image points down-left
     toward the email link sitting below it */
  .email-arrow {
    width: 150px;
    right: 0;
    left: auto;
    top: 5;
    bottom: auto;
    transform: none;
  }

  /* CV row: scribble sits lower-left → keep text at top of cell */
  .ct-cv {
    min-height: 130px;
    justify-content: flex-start;
    padding-top: 0.5rem;
  }

  /* CV scribble: lower-left corner — arrow in image points up-right
     toward the C.V. label sitting above it */
  .cv-arrow {
    width: 120px;
    left: 3rem;
    right: auto;
    top: auto;
    bottom: 0;
    transform: none;
  }

  /* The base animation uses translateX(-50%) for the centered desktop position.
     On mobile the arrow sits at left:3rem with transform:none, so the -50%
     offset would snap it off-screen. Override with a plain jitter. */
  @keyframes ct-voltage-jitter {
    0%, 100%    { transform: rotate(0deg); }
    20%         { transform: translateX(-4px) rotate(-5deg); }
    50%         { transform: translateX(4px) rotate(5deg); }
    80%         { transform: translateX(-2px) rotate(-2deg); }
  }
}

/* ----- Footer ----- */
.site-footer {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
  border-top: 1px solid var(--color-rule);
  padding: 2.5rem var(--gutter);
  font-family: var(--font-caps);
  font-size: 1rem;
  color: var(--color-muted);
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}

.site-footer a { border: none; color: var(--color-ink); }
.site-footer a:hover { color: var(--color-marker); }



/* ----- Projects entries wrapper (torn-paper transition, mirrors .about) ----- */
.projects-entries-wrapper {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  padding-top: calc(var(--section-y) + 4rem);
  overflow: visible;
}

#torn-edge-projects {
  position: absolute;
  top: -110px;
  left: 0;
  width: 100%;
  height: 260px;
  display: block;
  object-fit: cover;
  object-position: center 44%;
  pointer-events: none;
  z-index: 1;
}

.clip-anchor-projects {
  position: absolute;
  top: 40px;
  left: 4vw;
  transform: translateY(calc(-20% + var(--clip-drift-projects, 22px)));
  pointer-events: none;
  z-index: 3;
}

/* ----- Category section header (01 BODIES / 02 SPACES / 03 VIEW) ----- */
/* Category headers: full-viewport slide, content centered */
.category-header {
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  scroll-margin-top: var(--header-h);
}

.category-header .container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.category-header .overview-col {
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
}

.category-header .num-img {
  height: clamp(160px, 24vw, 320px);
}

.category-header .overview-category {
  font-size: clamp(1.6rem, 4.5vw, 3.5rem);
  margin-bottom: 0.75rem;
}

.category-header .overview-projects {
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  line-height: 2.4;
}

/* ----- Inline project entry ----- */
.project-entry {
  display: none;
  padding: clamp(2rem, 5vw, 4rem) 0;
  scroll-margin-top: var(--header-h);
}

.project-entry.is-active {
  display: block;
}

.entry-badge {
  display: none;
}

.badge-num {
  height: 1.75rem;
  width: auto;
}

.badge-label {
  font-family: var(--font-caps);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.entry-title {
  font-family: var(--font-caps);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.6rem, 4.1vw, 3.2rem);
  text-align: center;
  line-height: 1;
  margin: 0 0 clamp(1rem, 2.5vw, 1rem);
}

.entry-left {
  display: flex;
  flex-direction: column;
}

.entry-main {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.0rem, 2.0vw, 3.0rem);
  align-items: stretch;
}

.entry-hero {
  display: flex;
  flex-direction: column;
  justify-self: end;
  overflow: hidden;
}

/* entry-meta: extends project-meta but stretches full width of left column */
.entry-meta {
  grid-template-columns: 110px 1fr;
}

.entry-hero img,
.entry-hero-video {
  width: 100%;
  height: auto;
  display: block;
}

.abstract-dd {
  font-size: 0.9rem;
  line-height: 1.75;
  text-align: justify;
}

.abstract-dd p { margin: 0 0 0.75rem; }
.abstract-dd p:last-child { margin: 0; }

.entry-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  font-size: 0.85rem;
}

/* Detail gallery below each project */
.entry-gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(1.5rem, 4vw, 3rem);
}

.entry-gallery figure { margin: 0; overflow: hidden; }

.entry-gallery figure.gallery-full { grid-column: 1 / -1; }

.entry-gallery img {
  width: 100%;
  height: auto;
  display: block;
}

.entry-gallery-video {
  width: 100%;
  height: auto;
  display: block;
}

.entry-gallery iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 580 / 326;
  display: block;
}

/* SketchUp embed — loading state + toolbar overlays */
figure.sketchup-embed {
  position: relative;
  overflow: hidden;
  background: white;
  height: clamp(460px, 65vw, 650px);
  /* Extra crop to make the model feel closer without scaling. */
  --sketchup-crop-x: 450px;
  --sketchup-crop-y: 400px;
  --sketchup-crop-x-half: 300px;
  --sketchup-crop-y-half: 250px;
}

/* Expand iframe beyond figure edges so toolbars are clipped off-screen.
   Left toolbar ~45px wide → extend 55px left.
   Right sidebar ~180px wide → extend 190px right.
   Difference 190-55=135 = sidebar-toolbar → model stays centred. */
.sketchup-embed iframe {
  position: absolute;
  top: calc(0px - var(--sketchup-crop-y-half));
  left: calc(-150px - var(--sketchup-crop-x-half));
  width: calc(100% + 245px + var(--sketchup-crop-x)); /* 55 + 190 + crop */
  height: calc(100% + var(--sketchup-crop-y));
  aspect-ratio: unset; /* override the general .entry-gallery iframe rule */
  opacity: 0;
  transition: opacity 0.5s ease;
}

.sketchup-embed.is-ready iframe,
.sketchup-embed.is-fallback iframe {
  opacity: 1;
}

.sketchup-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: white;
  z-index: 10;
  transition: opacity 0.4s ease;
}

.sketchup-loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.sketchup-loading-msg {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  text-transform: lowercase;
}

.sketchup-fallback-msg,
.sketchup-fallback-link {
  display: none;
}

.sketchup-fallback-link {
  color: var(--color-ink);
  text-decoration: underline;
}

.sketchup-loading.is-fallback .sketchup-spinner,
.sketchup-loading.is-fallback .sketchup-loading-msg--active {
  display: none;
}

.sketchup-loading.is-fallback .sketchup-fallback-msg,
.sketchup-loading.is-fallback .sketchup-fallback-link {
  display: inline;
}

.sketchup-spinner {
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid var(--color-rule);
  border-top-color: var(--color-ink);
  border-radius: 50%;
  animation: sketchup-spin 0.8s linear infinite;
}

@keyframes sketchup-spin {
  to { transform: rotate(360deg); }
}

.sketchup-overlay {
  position: absolute;
  background: white;
  pointer-events: all;
  z-index: 2;
}

/* Bottom bar — watermark + fullscreen icon (~35 px tall; 40 px covers safely) */
.sketchup-overlay-bottom {
  bottom: 0; left: 0;
  width: 100%; height: 40px;
}

.entry-gallery figcaption {
  display: none;
}

/* QR image group: image with clickable overlays positioned by percent
   so the hit areas track the image at any size. Each link reads its
   coordinates from the four CSS custom properties set inline. */
.qr-image-group {
  position: relative;
  display: block;
  line-height: 0;
}

.qr-image-group img {
  width: 100%;
  height: auto;
  display: block;
}

.qr-image-group__link {
  position: absolute;
  left: var(--qr-left);
  top: var(--qr-top);
  width: var(--qr-width);
  height: var(--qr-height);
  border-bottom: 0;
  cursor: pointer;
}

.qr-image-group__link:focus-visible {
  outline: 2px solid rgba(190, 30, 45, 0.6);
  outline-offset: 2px;
}

/* Brasilidades: photo (2fr) + portrait video (1fr) as one unified row */
.entry-gallery-pair {
  grid-column: 1 / -1;
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.entry-gallery-pair__figure {
  flex: 2 0 0;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--color-rule);
}

.entry-gallery-pair__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.entry-gallery-pair__video {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.entry-gallery-pair__video video {
  width: 100%;
  height: auto;
  display: block;
}

/* Phone mockup — video overlaid on the hand-drawn phone screen sketch */
.phone-mockup {
  position: relative;
  line-height: 0;
  overflow: hidden;
}

.phone-screen-video {
  position: absolute;
  left: 62.2%;
  top: 15.3%;
  width: 21.4%;
  height: 64.3%;
  object-fit: cover;
  border-radius: 6px;
  pointer-events: none;
}

/* Sound toggle button */
.phone-sound-btn {
  position: absolute;
  right: calc(16.4% + 6px);
  bottom: calc(20.4% + 6px);
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  cursor: pointer;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s;
}
.phone-sound-btn:hover { background: #fff; }
.phone-sound-btn svg { width: 13px; height: 13px; display: block; fill: #333; }

/* Suppress touch tap-highlight and focus outline on all videos.
   transform: scale(1.01) hides codec/decoder edge artifacts (iOS hardware
   decoder pads frames to 16×16 macroblocks; H.264 encoders sometimes leave
   a 1px chroma-bleed band at the bottom/right). The 1% upscale pushes these
   pixels just outside the box; every <video> parent on the site has
   overflow: hidden, so the scaled edge is always clipped — works across
   devices and DPRs without depending on sub-pixel rounding behaviour. */
video {
  -webkit-tap-highlight-color: transparent;
  display: block;
  background: transparent;
  outline: none;
  transform: scale(1.01);
}
video:focus {
  outline: none;
}

/* ----- Responsive ----- */
@media (max-width: 820px) {
  :root { --header-h: 56px; }
  .site-header .container { height: 56px; }
  .site-nav { gap: 1rem; }
  .site-nav a { font-size: 0.95rem; }

  .about-grid { grid-template-columns: 1fr; }
  .about-data { grid-template-columns: 110px 1fr; }

  .project-grid { grid-template-columns: 1fr; }
  .project-meta { grid-template-columns: 100px 1fr; }

  .entry-main { grid-template-columns: 1fr; }
  .entry-meta { grid-template-columns: 100px 1fr; }

  .entry-hero { display: block; }
  .entry-hero img,
  .entry-hero-video { flex: none; height: auto; }

  .section-head .marker-num { font-size: 3.5rem; }

  /* SketchUp embed: reduce vertical crop so model is not cut off at top on mobile */
  figure.sketchup-embed {
    --sketchup-crop-y-half: 0px;
    --sketchup-crop-y: 0px;
    --sketchup-crop-x: 0px; /* increase horizontal crop to keep model centered with reduced vertical crop */
    --sketchup-crop-x-half: 0px;
  }
}

@media (max-width: 600px) {
  body { font-size: 14px; }
  .about-data, .project-meta { grid-template-columns: 1fr; gap: 0.25rem; }
  .about-data dt, .project-meta dt { padding-top: 0; }
  .about-data dd, .project-meta dd { margin-bottom: 0.85rem; }
  .project-hero h1 { font-size: 1.6rem; word-break: break-word; }

  .entry-meta { grid-template-columns: 1fr; gap: 0.25rem; }
  .entry-meta dt { padding-top: 0; }
  .entry-meta dd { margin-bottom: 0.85rem; }
  .entry-gallery { grid-template-columns: 1fr; }
  .entry-gallery figure.gallery-full { grid-column: 1; }
  .abstract-dd { text-align: left; }

  /* Notebook lightbox: on small screens shrink the book to 72 vh max so
     there is room below it, then place the arrows just below the bottom
     corners of the book (left arrow at bottom-left, right at bottom-right).
     Book is horizontally centred at 94 vw, so each outer margin = 3 vw.
     Book height when width-constrained = 94 vw / 1.37 ≈ 68.6 vw; its
     bottom edge sits at 50 vh + 34.3 vw from the top of the viewport. */
  .nb-book-wrap {
    width: min(94vw, calc(72vh * 1.37));
    max-height: 72vh;
  }
  .nb-lb-prev,
  .nb-lb-next {
    top: calc(50vh + 34.3vw + 1rem);
    padding: 0.5rem;
    transform: none;
  }
  .nb-lb-prev img,
  .nb-lb-next img { width: 2rem; }
  .nb-lb-prev { left: calc(3vw + 0.5rem); }
  .nb-lb-next { right: calc(3vw + 0.5rem); left: auto; }
}