/* The site's own layout: header, footer, main, and the per-page grids.
 *
 * `.site-*` is chrome that appears on every page; `.page-*` belongs to one
 * page. Neither is folheto, and both are free to change — which is the whole
 * reason they are named apart from the `.folheto-*` classes in components.css,
 * whose metrics may only move when packages/folheto does.
 *
 * Measurements are transcribed from the inline styles in AM2 Studio.dc.html.
 * Where the design writes a raw number that a token already names, the token
 * is used: `no_hex_literals_test.dart` forbids a hex colour outside
 * tokens/ and site.css, and the same discipline applies by hand to spacing.
 *
 * The declaration-order rule from components.css applies here too: `font:`
 * first, then `letter-spacing`, then `font-feature-settings`. Read the header
 * of that file before touching a rule that sets a `--type-*` font.
 */

/* The sticky header's own height, named once.
 *
 * Every deep-link target's `scroll-margin-top` is derived from it, so the two
 * cannot disagree — and they did while this was a literal: the phone header is
 * two rows, and a `scroll-margin-top` written for the one-row desktop header
 * left every `/privacidade#…` landing under it on a phone.
 *
 * Measured, not assumed: 64px of bar plus the 0.33px bottom rule, which the
 * browser resolves to 65. responsive.css overrides it for the two-row layout.
 */
:root{ --header-height:65px; }

/* ===========================================================================
 * Shared page scaffolding
 * ======================================================================== */
.page{
  max-width:1120px;
  margin:0 auto;
  padding:0 var(--site-gutter);
}

/* 64ch, not a pixel width. A measure is a function of the typeface, and the
 * legal pages are the longest running prose on the site — the one place where
 * a line too long to track back to is a real reading cost. */
.page__masthead{
  display:flex;
  flex-direction:column;
  gap:var(--space-xl);
  max-width:64ch;
  padding:72px 0 var(--space-xxl);
}
.page__title{
  font:var(--type-masthead);
  letter-spacing:var(--type-masthead-tracking);
}
.page__section-title{
  font:var(--type-sheet-title);
  letter-spacing:normal;
}
.page__lead{
  font:var(--type-list-body);
  letter-spacing:var(--type-list-body-tracking);
  line-height:var(--lh-lead);
  color:var(--ink-soft);
}
.page__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-md);
  padding-top:var(--space-sm);
}

/* Every heading that carries an `id` is a deep-link target, and the header is
 * sticky and 64 tall — without this the browser scrolls the heading to y=0 and
 * the header covers it. The store listings link straight into
 * `/privacidade#…`, so this is the difference between a working deep link and
 * one that lands on a blank strip. */
[id]{ scroll-margin-top:calc(var(--header-height) + var(--space-lg)); }

/* ===========================================================================
 * Skip link
 * ======================================================================== */
/* Visually hidden until focused, then a real, visible control. Clipping to a
 * 1px rect rather than `display:none` keeps it in the tab order — a skip link
 * that is `display:none` is not focusable and therefore is not a skip link. */
.site-skip{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border-bottom:0;
}
.site-skip:focus{
  z-index:30;
  top:var(--space-sm);
  left:var(--space-sm);
  width:auto;
  height:auto;
  padding:var(--space-sm) var(--space-lg);
  overflow:visible;
  clip-path:none;
  border:var(--stroke-outline) solid var(--ink);
  border-radius:var(--radius-control);
  background:var(--paper);
  font:var(--type-support);
  letter-spacing:normal;
}

/* A visible focus ring everywhere, at ≥3:1 against both paper and the red.
 * `currentColor` would vanish on a primary button, where the label is paper on
 * ink; ink with a paper offset reads on every surface the site has. */
:focus-visible{
  outline:var(--stroke-thick) solid var(--ink);
  outline-offset:2px;
}
/* `<main tabindex="-1">` is focused by the skip link, and it is not an
 * interactive control — a ring around the whole page is noise. */
main:focus,
main:focus-visible{ outline:none; }

/* ===========================================================================
 * Header
 * ======================================================================== */
.site-header{
  position:sticky;
  top:0;
  /* Above the page, below the skip link. */
  z-index:20;
  border-bottom:var(--stroke-chrome) solid var(--chrome-hairline);
  background:var(--paper);
}
.site-header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  max-width:1120px;
  height:64px;
  margin:0 auto;
  padding:0 var(--site-gutter);
}
.site-header__mark{
  display:flex;
  align-items:center;
  padding-bottom:0;
  border-bottom:0;
}
.site-header__mark img{
  display:block;
  width:auto;
  height:26px;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:28px;
}
/* The nav link is a column so the 2px active rule can sit under the label at
 * the label's own width, rather than spanning a padded box. */
.site-nav__link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding-bottom:0;
  border-bottom:0;
  font:var(--type-support);
  letter-spacing:normal;
}
.site-nav__underline{
  display:block;
  width:100%;
  height:var(--stroke-thick);
  background:transparent;
}
/* The design uses the red for BOTH hover and the active tab, which makes the
 * two states visually identical — you cannot tell the tab you are pointing at
 * from the tab you are on. Thickness separates them: hover is the hairline,
 * current is the full 2px. The meaning is carried by `aria-current` either
 * way, so this is for the eye only. */
.site-nav__link:hover .site-nav__underline{
  height:var(--stroke-thin);
  background:var(--am2-red);
}
.site-nav__link--current .site-nav__underline,
.site-nav__link--current:hover .site-nav__underline{
  height:var(--stroke-thick);
  background:var(--am2-red);
}

.site-lang{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  padding-left:var(--space-lg);
  border-left:var(--stroke-hairline) solid var(--rule);
}
.site-lang__current,
.site-lang__link{
  /* ≥24×24 with spacing. Mistapping the language pair is a whole-site context
   * change, and at the `label` role's 10px the glyphs are 14px tall. */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  min-height:24px;
  padding-bottom:0;
  border-bottom:0;
  font:var(--type-label);
  letter-spacing:var(--type-label-tracking);
}
.site-lang__current{ font-weight:var(--weight-bold); }
.site-lang__link{ color:var(--ink-soft); }
.site-lang__link:hover{ color:var(--am2-red); }
.site-lang__sep{
  font:var(--type-label);
  letter-spacing:normal;
  color:var(--rule);
}

/* ===========================================================================
 * Footer
 * ======================================================================== */
.site-footer{ border-top:var(--stroke-outline) solid var(--ink); }
.site-footer__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-xxl);
  align-items:start;
  max-width:1120px;
  margin:0 auto;
  padding:40px var(--site-gutter) 56px;
}
.site-footer__mark img{
  display:block;
  width:auto;
  height:22px;
}
.site-footer__col{
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
}
.site-footer__link{
  width:fit-content;
  padding-bottom:0;
  border-bottom:0;
  font:var(--type-footnote);
  letter-spacing:normal;
}
.site-footer__copyright{
  margin:var(--space-lg) 0 0;
  font:var(--type-footnote);
  letter-spacing:normal;
  color:var(--ink-soft);
}

/* ===========================================================================
 * Home
 * ======================================================================== */
.page-home__hero{
  display:flex;
  flex-direction:column;
  gap:var(--space-xl);
  padding:88px 0 72px;
}
.page-home__lead{
  max-width:44ch;
  font:var(--type-list-body);
  letter-spacing:var(--type-list-body-tracking);
  line-height:var(--lh-lead);
  color:var(--ink-soft);
  text-wrap:pretty;
}
.page-home__lead strong{
  font-weight:var(--weight-semibold);
  color:var(--ink);
}
.page-home__showcase{
  display:grid;
  /* The fixed ratio needs roughly 700px of content to work; responsive.css
   * collapses it to one column at the tablet breakpoint. */
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:56px;
  align-items:start;
  padding:64px 0;
}
.page-home__figure{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:40px;
  overflow:hidden;
  /* `box-sizing: border-box` is set globally by base.css (checked, not
   * assumed), so the 1.5px border sits inside the ratio box and the frame is
   * 3:4 rather than 3px off it. */
  aspect-ratio:3/4;
  border:var(--stroke-outline) solid var(--ink);
  background:var(--card);
}
.page-home__figure img{
  display:block;
  width:100%;
  max-width:280px;
  height:auto;
}
.page-home__showcase-body{
  display:flex;
  flex-direction:column;
  gap:var(--space-xl);
}
.page-home__body{
  max-width:52ch;
  font:var(--type-list-body);
  letter-spacing:var(--type-list-body-tracking);
  line-height:var(--lh-lead);
  color:var(--ink-soft);
  text-wrap:pretty;
}
.page-home__tags{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm);
  margin:0;
  padding:0;
  list-style:none;
}

/* ===========================================================================
 * Interregnum
 * ======================================================================== */
.page-game__masthead{
  display:flex;
  flex-direction:column;
  gap:var(--space-xl);
  padding:72px 0 56px;
}
.page-game__hero{
  margin:0;
  overflow:hidden;
  border:var(--stroke-outline) solid var(--ink);
}
.page-game__hero img{
  display:block;
  width:100%;
  height:auto;
}
.page-game__lead{ max-width:64ch; }
.page-game__steps{ padding:56px 0; }
.page-game__step-list{
  display:flex;
  flex-direction:column;
  gap:24px;
  margin:28px 0 0;
  padding:0;
  /* The numerals come from this counter, not from the markup: a literal "1"
   * in a heading would be read out by a screen reader on top of the list's own
   * "1 of 4". */
  counter-reset:step;
  list-style:none;
}
.page-game__step{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:var(--space-lg);
  counter-increment:step;
}
.page-game__step::before{
  content:counter(step);
  font:var(--type-sheet-title);
  letter-spacing:normal;
  font-feature-settings:var(--figures-tabular);
  /* 4.56:1 on paper — it passes AA for normal text with about 0.06 to spare,
   * which is why it is allowed here at 27px. Do not lighten it. */
  color:var(--am2-red);
}
.page-game__step-title{
  margin:0 0 6px;
  font:var(--type-bar-title);
  letter-spacing:var(--type-bar-title-tracking);
}
.page-game__step-text,
.page-game__press-text{
  font:var(--type-support);
  letter-spacing:normal;
  line-height:var(--lh-support);
  color:var(--ink-soft);
}
.page-game__gallery{ padding:56px 0; }
.page-game__shots{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--space-lg);
  margin:28px 0 0;
  padding:0;
  list-style:none;
}
.page-game__shots:focus-visible{
  outline:var(--stroke-outline) solid var(--ink);
  outline-offset:4px;
}
.page-game__shot img{
  display:block;
  width:100%;
  height:auto;
  border:var(--stroke-hairline) solid var(--card-hairline);
  border-radius:var(--radius-card);
}
.page-game__facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:48px;
  align-items:start;
  padding:56px 0 80px;
}
.page-game__press{
  display:flex;
  flex-direction:column;
  gap:var(--space-lg);
}
.page-game__icon{
  display:block;
  width:72px;
  height:72px;
  border:var(--stroke-hairline) solid var(--card-hairline);
  /* The icon is a square SVG; the radius clips it the way a home screen
   * would, which is the only shape a reader has ever seen it in. */
  overflow:hidden;
  border-radius:var(--radius-card);
}
.page-game__press-text{ max-width:44ch; }

/* ===========================================================================
 * Legal
 * ======================================================================== */
.page-legal__body{
  display:flex;
  flex-direction:column;
  gap:24px;
  max-width:64ch;
  padding:40px 0 80px;
}
.page-legal__sections{
  display:flex;
  flex-direction:column;
  gap:var(--space-xl);
}
.page-legal__section{
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
}
.page-legal__heading{
  font:var(--type-bar-title);
  letter-spacing:var(--type-bar-title-tracking);
}
.page-legal__paragraph{
  font:var(--type-support);
  letter-spacing:normal;
  line-height:var(--lh-support);
  color:var(--ink-soft);
}
.page-legal__paragraph a{ font-weight:var(--weight-semibold); }
.page-legal__updated{
  font:var(--type-footnote);
  letter-spacing:normal;
  color:var(--ink-soft);
}

/* ===========================================================================
 * Support
 * ======================================================================== */
.page-support__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:56px;
  align-items:start;
  padding:72px 0 56px;
}
.page-support__intro{
  display:flex;
  flex-direction:column;
  gap:var(--space-xl);
}
.page-support__intro .page__lead{ max-width:44ch; }
/* Ready for `brand/arthur.png` when it is exported — see SupportPage's
 * dartdoc. 132px, circular, with the kit's 1.5px contour. */
.page-support__portrait{
  width:fit-content;
  margin:0 0 var(--space-xs);
}
.page-support__portrait img{
  display:block;
  width:132px;
  height:132px;
  border:var(--stroke-outline) solid var(--ink);
  border-radius:50%;
  object-fit:cover;
  object-position:50% 18%;
}
.page-support__aside{
  display:flex;
  flex-direction:column;
  gap:var(--space-xxl);
}
.page-support__faq{
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
}
.page-support__note{
  max-width:40ch;
  font:var(--type-support);
  letter-spacing:normal;
  line-height:var(--lh-support);
  color:var(--ink-soft);
}
.page-support__launch{
  display:flex;
  flex-direction:column;
  gap:var(--space-lg);
  padding:56px 0 80px;
}

/* ===========================================================================
 * FAQ
 * ======================================================================== */
.page-faq__columns{
  display:grid;
  /* Grid, never `column-count`: multi-column breaks reading order on reflow
   * and prints the second half of column one above the first half of column
   * two. A page of questions is exactly what people print. */
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:56px;
  align-items:start;
  padding:48px 0 0;
}
.page-faq__column{
  display:flex;
  flex-direction:column;
  gap:var(--space-xl);
}
.page-faq__question{
  margin:0 0 6px;
  font:var(--type-bar-title);
  letter-spacing:var(--type-bar-title-tracking);
}
.page-faq__answer{
  font:var(--type-support);
  letter-spacing:normal;
  line-height:var(--lh-support);
  color:var(--ink-soft);
}
.page-faq__more{ padding:var(--space-xxl) 0 80px; }

/* ===========================================================================
 * 404
 *
 * `web/404.html` is hand-written and is not a Jaspr route, so nothing in
 * `lib/` references these classes and no Dart change will ever remind you they
 * exist. They are here rather than inline in that file so the error page is
 * styled by the same cascade as every real page — an unstyled 404 is the one
 * page a reader meets when something has already gone wrong.
 *
 * It is bilingual, so it carries two blocks: `<h1>` for Portuguese and `<h2>`
 * for English, which keeps one h1 per document while drawing both at the same
 * size.
 * ======================================================================== */
.page-404{
  max-width:1120px;
  margin:0 auto;
  padding:0 var(--site-gutter);
}
.page-404__block{
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  max-width:64ch;
  padding:56px 0;
}
.page-404__title{
  font:var(--type-masthead);
  letter-spacing:var(--type-masthead-tracking);
}
.page-404__lead{
  font:var(--type-list-body);
  letter-spacing:var(--type-list-body-tracking);
  line-height:var(--lh-lead);
  color:var(--ink-soft);
}
.page-404__links{
  font:var(--type-support);
  letter-spacing:normal;
  color:var(--ink-soft);
}

/* ===========================================================================
 * Print — the two legal pages
 *
 * Reviewers and users save a policy to PDF, and there is no other way to get a
 * copy off this site. Without these rules the sticky header prints on page one
 * and every link's destination is lost.
 * ======================================================================== */
@media print{
  .site-header,
  .site-footer,
  .site-skip,
  .page__actions{ display:none; }

  .page{ max-width:none; padding:0; }

  .page__lead,
  .page-legal__paragraph,
  .page-legal__updated{ color:var(--ink); }

  /* A URL a reader can type. Only for external and mailto links — expanding
   * every internal href would put "https://am2studio.com.br/faq" inline in
   * the middle of a sentence for no gain on paper. */
  .page-legal__paragraph a[href^="http"]::after,
  .page-legal__paragraph a[href^="mailto:"]::after{
    content:" (" attr(href) ")";
    font:var(--type-footnote);
    letter-spacing:normal;
    word-break:break-all;
  }

  .page-legal__heading,
  .page__title{ break-after:avoid; }
  .page-legal__section{ break-inside:avoid; }
}