/* app.css — shared styling for brunomarinho.com side-project landing pages.
 *
 * Implements the "post template w images" frame from [Labs] Writer
 * (Figma 56l9wOe3T7hiy2Ba6cy52I, node 444:879). That file defines no Figma
 * variables, so every value below is the raw measurement off the node,
 * collected here as tokens. The numbers in the comments are the design's source
 * of truth — change the Figma first, then these.
 *
 * Self-contained by design: the portfolio serves its CSS from a content-hashed
 * URL (/_next/static/css/<hash>.css) that changes on every deploy touching CSS,
 * so linking to it would break these pages silently. Copy this file into each
 * project alongside index.html.
 */

/* Metric-matched fallback — sized so the system font occupies the same space as
   the Typekit face, eliminating layout shift when the web font swaps in. Adobe
   kits are domain-restricted, so this is what unlisted domains actually get. */
@font-face {
  font-family: "unica-fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  font-style: normal;
  font-weight: 400 700;
  size-adjust: 100.44%;
  ascent-override: 108.83%;
  descent-override: 27.38%;
  line-gap-override: 0%;
}

:root {
  /* Colour — the design uses #181818 at four alphas, not four separate greys. */
  --color-bg: #ffffff;
  --color-text: #181818; /* headings, FAQ questions, tags */
  --color-body: rgba(24, 24, 24, 0.88); /* body copy */
  --color-lead: rgba(24, 24, 24, 0.72); /* tagline + lead paragraph */
  --color-footer: rgba(24, 24, 24, 0.64); /* footer */
  --color-button: #272a2e;
  --color-border-icon: rgba(0, 0, 0, 0.1); /* 64px app icon */
  --color-border-media: rgba(0, 0, 0, 0.08); /* screenshot frame */

  /* Measure — text sits in 512px; media is wider at 768px. */
  --measure-text: 512px;
  --measure-media: 768px;
  --pad-top: 80px;
  --pad-left: 56px;

  /* Vertical rhythm, straight off the frame's auto-layout gaps. */
  --gap-body: 40px; /* heading / media / download / text / footer */
  --gap-text: 32px; /* between the Why, Details and FAQ groups */
  --gap-group: 24px; /* between blocks inside one group */
  --gap-para: 8px; /* heading to its paragraph */
  --gap-faq: 12px; /* between Q&A pairs */
  --gap-title: 4px; /* h1 to tagline */
  --gap-download: 24px; /* button to tags */

  --f-body: "neue-haas-unica", "unica-fallback", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, Arial, sans-serif;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-normal: 200ms;
  --duration-slow: 400ms;
}

/* Reset — replaces the separate css/reset.css these projects used to load. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
p,
ol,
ul,
figure,
dl,
dd {
  margin: 0;
  padding: 0;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto; /* companion to width/height attrs; without it the box collapses */
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-feature-settings: "kern", "liga", "calt";
  scroll-behavior: smooth;
}

/* The frame is left-aligned at x=56, y=80 — not centred. Matching that. */
body {
  font-family: var(--f-body);
  color: var(--color-body);
  background: var(--color-bg);
  padding: var(--pad-top) var(--pad-left);
}

.post {
  display: flex;
  flex-direction: column;
  gap: var(--gap-body);
  align-items: flex-start;
  max-width: var(--measure-media);
}

/* <main> sits between <header> and <footer> so each gets its own landmark
   (banner / main / contentinfo) for screen-reader navigation. It repeats the
   parent's column and gap, so the rhythm is identical to the flat structure the
   design describes — the element is there for semantics, not layout. */
.post-main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-body);
  align-items: flex-start;
  width: 100%;
}

/* Heading — 64px icon, 40px gap, then title and tagline 4px apart. */
.site-header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-body);
  align-items: flex-start;
  max-width: var(--measure-text);
}

.site-header .logo {
  width: 64px;
  height: 64px;
}

/* The design's 16px radius and hairline border are drawn around a square raster
   icon. The three SVG marks already carry their own corner shape (rx 8, and 24
   for Skimme), so imposing the container radius would clip the rounder ones.
   Raster icons get the frame; SVG marks keep theirs. */
.site-header img.logo {
  border-radius: 16px;
  border: 1px solid var(--color-border-icon);
  object-fit: cover;
}

.title-block {
  display: flex;
  flex-direction: column;
  gap: var(--gap-title);
}

h1 {
  font-size: 40px;
  /* The design specifies Bold (700), but the Adobe kit pfr2ias only serves
     neue-haas-unica at 400/500/600 — so this currently renders at 600. Left at
     700 deliberately: it states the design intent and will pick up the real
     Bold automatically if that weight is added to the kit. Add it there rather
     than faking weight here. */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--color-text);
}

.tagline {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-lead);
}

/* Media — wider than the text column, softly framed, deep layered shadow. */
.media {
  width: 100%;
  max-width: var(--measure-media);
  border: 1px solid var(--color-border-media);
  border-radius: 12px;
  overflow: hidden;
  /* Six stops rather than one: the falloff is what makes this read as depth
     rather than a grey halo. Values are the design's, rounded to 2dp. */
  box-shadow: 0 100px 80px rgba(0, 0, 0, 0.07), 0 41.78px 33.42px rgba(0, 0, 0, 0.05),
    0 22.34px 17.87px rgba(0, 0, 0, 0.04), 0 12.52px 10.02px rgba(0, 0, 0, 0.04),
    0 6.65px 5.32px rgba(0, 0, 0, 0.03), 0 2.77px 2.21px rgba(0, 0, 0, 0.02);
}

.media img,
.media video {
  width: 100%;
  display: block;
}

/* Action row — button on the left, plain-text tags alongside. */
.download {
  display: flex;
  gap: var(--gap-download);
  align-items: center;
}

.button,
.bookmarklet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 10px 12px 12px;
  border-radius: 4px;
  background: var(--color-button);
  color: #ffffff;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.1px;
  text-decoration: none;
  transition: opacity var(--duration-normal) var(--ease-out-quart);
}

.bookmarklet {
  cursor: grab;
}

.button:hover,
.bookmarklet:hover {
  color: #ffffff;
  opacity: 0.86;
  text-decoration: none;
}

.bookmarklet:active {
  cursor: grabbing;
}

/* The reset sets img{display:block}, which would push an icon inside the chip
   onto its own line. Keep it inline and optically centred with the label. */
.bookmarklet img {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.45em;
  border-radius: 3px;
}

/* Explicit row + zero padding: the generic `ol, ul` rule below sets a column
   direction and a list indent, which would stack these and push them off the
   button. */
.tags {
  display: flex;
  flex-direction: row;
  gap: var(--gap-download);
  align-items: center;
  padding-left: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.1px;
  white-space: nowrap;
  list-style: none;
}

/* Same trap as the footer: the generic `li` rule matches these directly and
   beats anything inherited from .tags, so they rendered at the body's 88%
   instead of full strength. Set size and colour on the items themselves. */
.tags li {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.1px;
  color: var(--color-text);
}

/* Prose */
.text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-text);
  max-width: var(--measure-text);
}

.text > section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}

/* The opening paragraph is set at tagline size, not body size. */
.lead {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.5px;
  color: var(--color-lead);
}

h2 {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.21px;
  color: var(--color-text);
}

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.1px;
  color: var(--color-body);
}

/* A heading sits 8px above its paragraph; consecutive paragraphs 16px apart. */
.block {
  display: flex;
  flex-direction: column;
  gap: var(--gap-para);
}

.block p + p {
  margin-top: 8px;
}

ol,
ul {
  display: flex;
  flex-direction: column;
  gap: var(--gap-para);
  padding-left: 1.25em;
}

li {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.1px;
  color: var(--color-body);
}

/* FAQ — question in medium at body size, answer directly beneath. */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--gap-faq);
}

.faq dt {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.16px;
  color: var(--color-text);
}

.faq dd {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.1px;
  color: var(--color-body);
  margin-bottom: var(--gap-para);
}

.faq dd:last-child {
  margin-bottom: 0;
}

/* The design has no bold-in-body case, so this picks the system's own emphasis
   weight: Medium (500), the same one h2, FAQ questions and the button use.
   Browser default would be 700, which the kit resolves to 600 — as heavy as the
   h1, which is too much for a line inside a paragraph. */
strong,
b {
  font-weight: 500;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

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

/* Footer — an em dash, 16px of space, then the credit. 14px, lightest alpha. */
footer {
  max-width: var(--measure-text);
}

/* Set on the paragraphs, not on <footer>. The generic `p` rule matches these
   directly, and a matching rule always beats an inherited one — so sizing the
   footer element alone left the credit rendering at the body's 16px/88%. */
footer p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.1px;
  color: var(--color-footer);
}

footer .rule {
  margin-bottom: 16px;
}

/* Page fade-in. Replaces the anime.js the Amazon page pulled from a CDN for
   exactly this one effect: same result, no third-party dependency. */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body {
  animation: fade-in var(--duration-slow) var(--ease-out-quart) both;
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }

  a,
  .button,
  .bookmarklet {
    transition: none;
  }
}

/* The frame is a fixed 1360px artboard; below the media width everything
   collapses to one fluid column. */
@media (max-width: 880px) {
  :root {
    --pad-top: 48px;
    --pad-left: 24px;
    --gap-body: 32px;
  }

  h1 {
    font-size: 32px;
    letter-spacing: -0.7px;
  }

  .tagline,
  .lead {
    font-size: 20px;
    letter-spacing: -0.3px;
  }

  .download {
    flex-wrap: wrap;
    gap: 16px;
  }

  .media {
    box-shadow: 0 40px 32px rgba(0, 0, 0, 0.06), 0 12px 10px rgba(0, 0, 0, 0.04),
      0 3px 2px rgba(0, 0, 0, 0.02);
  }
}