/* article.css — proposals lane.
   No uppercase micro-labels anywhere. No disclaimer boxes. Everything shown is built in HTML. */

.article-page{
  --a-ground:#F5EFE2;        /* the homepage ground, not a second paper */
  --a-raised:#FBF7EE;
  /* the site inks, not a second set. The article ground is the site ground, so
     the ink on it has to be the site ink or the copy reads harder here. */
  --a-ink:#161613;
  --a-ink-2:#4a4a44;
  --a-ink-3:#6B6B66;
  --a-rule:rgba(20,22,26,.10);
  --a-line:rgba(20,22,26,.06);
  --a-accent:#1F5FA8;
  --a-measure:46rem;
  --page-measure:46rem;
  --page-pad:1.5rem;
  background:var(--a-ground);
  color:var(--a-ink);
}

/* ── scroll progress ─────────────────────── */
.art-progress{
  position:fixed; inset:0 auto auto 0; z-index:80;
  height:4px; width:0%;
  background:#B3121B;
  transition:width .08s linear;
}

.article-page .art-wrap{
  max-width:var(--a-measure);
  margin-inline:auto;
  padding-inline:1.5rem;
}

/* ── masthead ─────────────────────────────── */
.art-head{ padding:clamp(2.5rem,7vw,5rem) 0 0; }
.art-back{
  display:inline-block; margin-bottom:2rem;
  font-size:.95rem; color:var(--a-ink-3); text-decoration:none;
}
.art-back:hover{ color:var(--a-ink); }
.art-eyebrow{
  font-size:.8125rem; color:var(--a-ink-3); margin:0 0 1.1rem; font-weight:400;
}
.art-title{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-weight:700; font-size:var(--t-title);
  line-height:1.05; letter-spacing:-.025em; margin:0 0 1.5rem;
  max-width:20ch; text-wrap:balance;
}
.art-title em{ font-style:normal; }
.art-standfirst{
  font-size:var(--t-lede); line-height:1.55; color:var(--a-ink-3);
  max-width:50ch; margin:0 0 2rem; text-wrap:pretty;
}
.art-byline{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:baseline;
  padding:1rem 0; border-top:1px solid var(--a-rule); border-bottom:1px solid var(--a-rule);
  font-size:.92rem; color:var(--a-ink-3);
}

/* ── topic tags ───────────────────────────── */
.art-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.6rem 0 0; padding:0; list-style:none; }
.art-tags a, .art-tags span{
  display:inline-block; padding:.35rem .8rem; border-radius:999px;
  border:1px solid var(--a-rule); font-size:.88rem;
  color:var(--a-ink-2); text-decoration:none; background:var(--a-raised);
}
.art-tags a:hover{ border-color:var(--a-ink-3); color:var(--a-ink); }

/* ── on-page nav, the sticky rail the case pages use ── */
.art-rail{ display:none; }
@media (min-width:1180px){
  .art-rail{
    display:block; position:fixed; top:132px; z-index:5;
    left:calc(50% + 24.5rem); width:132px;
  }
  .art-rail ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
  .art-rail a{
    display:block; padding:2px 0 2px 12px; margin-left:-1px;
    border-left:2px solid transparent;
    font-size:11px; line-height:1.4; color:var(--a-ink-3); white-space:nowrap;
    text-decoration:none;
    transition:font-size .16s ease, color .18s ease, border-color .18s ease;
  }
  .art-rail a:hover{ color:var(--a-ink); font-size:13.5px; }
  .art-rail a.is-current{ color:var(--a-ink); border-left-color:var(--a-ink); font-weight:600; }
  .art-rail{ transition:opacity .3s ease; }
}

/* ── body ─────────────────────────────────── */
.art-body{ padding:2.6rem 0 5rem; }
.art-body h2{
  font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:600;
  font-size:var(--t-head); line-height:1.18; letter-spacing:-.015em;
  margin:2.6rem 0 .85rem; max-width:30ch; scroll-margin-top:5rem; text-wrap:balance;
}
.art-body p{
  font-size:var(--t-body); line-height:1.66; color:var(--a-ink-2);
  max-width:64ch; margin:0 0 1.15rem; text-wrap:pretty;
}
/* the opening paragraph is the body size like everywhere else on the site; it
   used to carry a drop cap, which was the only serif here. */
.art-body p.lead{ color:var(--a-ink); margin-bottom:1.3rem; }
.art-body code{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.87em; background:rgba(20,22,26,.055);
  padding:.1em .3em; border-radius:4px; margin-inline:.04em;
}
.art-pull{
  margin:2.6rem 0; padding:1.5rem 0 0;
  border-top:1px solid var(--a-ink);
  font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:500;
  font-size:clamp(1.15rem,2.2vw,1.45rem); line-height:1.45; letter-spacing:-.01em;
  text-wrap:pretty; max-width:34rem;
}
.art-pull cite{
  display:block; margin-top:.9rem; font-family:Inter,system-ui,sans-serif;
  font-size:.9rem; font-style:normal; color:var(--a-ink-3); letter-spacing:.005em;
}

/* ── the record table ─────────────────────── */
.art-record{ margin:2.2rem 0; border-top:1px solid var(--a-rule); }
.art-record div{
  display:grid; grid-template-columns:5.5rem 1fr; gap:1.2rem;
  padding:.85rem 0; border-bottom:1px solid var(--a-line); align-items:baseline;
}
.art-record dt{ margin:0; font-weight:500; }
.art-record dd{ margin:0; color:var(--a-ink-2); }
.art-record div.is-now dt,.art-record div.is-now dd{ color:var(--a-accent); }

/* ── device frames, exported from the Figma file itself ──── */
.demo{ margin:2.6rem 0; }
/* Every screen is 16rem wide, on every row and every page, so nothing eclipses
   the viewport and nothing has to scroll sideways to fit. */
.demo__row{ display:grid; gap:1.7rem 1.2rem; justify-content:start;
  grid-template-columns:repeat(auto-fill, minmax(min(16rem,100%), 16rem)); }
.demo figure{ margin:0; }
.figframe{ display:block; width:100%; height:auto; overflow:visible; }
.demo figcaption{ margin-top:.5rem; font-size:.95rem; line-height:1.55; color:var(--a-ink-3); }
.demo figcaption b{ color:var(--a-ink); font-weight:500; display:block; margin-bottom:.15rem; }
.demo figcaption.is-flag b{ color:#B3121B; }
.demo figcaption.is-good b{ color:#1F7A52; }

/* Nothing in the body is wider than the copy. The on-page rail owns the space
   to the right of the column. */
.article-page article{ overflow-x:clip; }

/* hero demo sits wider */
.hero-demo{ margin:2.4rem 0 0; }

/* ── end matter ───────────────────────────── */
.art-end{ margin-top:3.2rem; padding-top:1.5rem; border-top:1px solid var(--a-rule);
  font-size:1rem; line-height:1.7; color:var(--a-ink-2); }
.art-end a{ color:var(--a-accent); }
.art-share{ margin-top:1.2rem; display:flex; flex-wrap:wrap; gap:1.1rem; font-size:.98rem; }
.art-share a{ color:var(--a-ink-2); }
.art-figlink{ margin:1.6rem 0 0; }
.art-figlink a{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.78rem 1.2rem; border-radius:10px;
  background:var(--a-ink); color:var(--a-ground);
  font-size:.95rem; font-weight:500; letter-spacing:-.005em; text-decoration:none;
  transition:transform .16s ease, background .16s ease;
}
.art-figlink a::after{ content:"\2197"; font-size:1em; opacity:.7; }
.art-figlink a:hover{ background:#000; transform:translateY(-1px); }

/* ── code block ───────────────────────────── */
.art-pre{
  margin:2rem 0; padding:1.4rem 1.5rem; overflow-x:auto;
  background:#141618; color:#D9D6D0; border-radius:12px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.8rem; line-height:1.8; letter-spacing:.005em;
}
.art-pre b{ color:#9BD8BC; font-weight:400; }
.art-pre em{ color:#8A8F98; font-style:normal; }

/* ── the three shipping layers ────────────── */
.art-layers{ margin:2.4rem 0; display:grid; gap:1px; background:var(--a-rule);
  border:1px solid var(--a-rule); border-radius:14px; overflow:hidden; }
.art-layers > div{ background:var(--a-raised); padding:1.4rem 1.5rem; }
.art-body .art-layers h3, .art-layers h3{ margin:0 0 .5rem; font-size:1.15rem; font-weight:500; letter-spacing:-.01em;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.7rem; }
.art-layers h3 span{ font-size:.85rem; font-weight:500; color:var(--a-ink-3);
  border:1px solid var(--a-rule); border-radius:999px; padding:.15rem .6rem; }
.art-layers h3 span.is-free{ color:#1F7A52; border-color:rgba(31,122,82,.3); }
.art-layers h3 span.is-cheap{ color:#8A6A12; border-color:rgba(138,106,18,.3); }
.art-layers h3 span.is-real{ color:#B3121B; border-color:rgba(179,18,27,.3); }
.art-body .art-layers p, .art-layers p{ margin:0 0 .6rem; font-size:1rem; line-height:1.6; color:var(--a-ink-2); }
.art-body .art-layers p:last-child, .art-layers p:last-child{ margin-bottom:0; }
.art-layers code{ font-size:.85em; }

/* ── screen frames, exported from the Figma file ── */
.bgrid{ display:grid; gap:1.7rem 1.2rem; justify-content:start;
  grid-template-columns:repeat(auto-fill, minmax(min(16rem,100%), 16rem)); }
/* the frames carry their own device corners, so the shadow has to follow the alpha
   rather than the box, and no border or backing may be painted behind them */
.bframe{ display:block; width:100%; height:auto;
  filter:drop-shadow(0 1px 1px rgba(20,22,26,.10)) drop-shadow(0 14px 26px rgba(20,22,26,.20)); }


/* the Figma panel is one shared component in style.css.
   The article only decides how wide it sits. */
.article-page .figma-out{
  padding-top:clamp(1.6rem,3vw,2.4rem); padding-bottom:0;
}

/* .art-body h2/p outrank the bare component classes, so the section rhythm
   would otherwise leak into the shared panel and inflate its height. */
.art-body .figma-out__h{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:clamp(1.4rem,2.4vw,2rem); font-weight:600;
  letter-spacing:-.022em; line-height:1.14; color:#F5EFE2; margin:0 0 10px;
}
.art-body .figma-out__p{
  font-size:.98rem; line-height:1.55; color:rgba(245,239,226,.62);
  margin:0; max-width:52ch;
}

/* ── the other proposal, as a deliberate step ── */
.art-next{
  display:grid; margin:1.6rem 0 0; padding:1.5rem 0 .2rem;
  border-top:1px solid var(--a-rule);
  text-decoration:none; color:inherit;
  grid-template-columns:1fr auto; align-items:start; column-gap:1.5rem;
}
.art-next__k{ grid-column:1; font-size:.9rem; color:var(--a-ink-3); margin-bottom:.45rem; }
.art-body .art-next__t, .art-next__t{ grid-column:1; font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.75rem); line-height:1.2; letter-spacing:-.015em;
  margin-bottom:.4rem; }
.art-body .art-next__s, .art-next__s{ grid-column:1; font-size:1rem; line-height:1.55; color:var(--a-ink-2);
  max-width:52ch; }
.art-next__go{ grid-column:2; grid-row:1 / span 3; align-self:center;
  width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid var(--a-rule);
  display:grid; place-items:center; font-size:1rem; color:var(--a-ink);
  transition:background .16s ease, color .16s ease, transform .16s ease; }
.art-next:hover .art-next__go{ background:var(--a-ink); color:var(--a-ground);
  transform:translateX(2px); }
.art-next:hover .art-next__t{ text-decoration:underline; text-underline-offset:3px; }


/* ── masthead, full bleed so the dot field runs behind the nav ── */
.art-hero{ position:relative; overflow:hidden; isolation:isolate; }
.art-hero > .art-wrap{ position:relative; z-index:1; }
.art-hero .hero__dots{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,0,0,0) 100%);
}

/* ── articles index ───────────────────────── */

.idx-head{ padding:clamp(2.5rem,7vw,5rem) 0 clamp(2rem,4vw,3rem); }
.idx-head .art-title, .idx-head .art-standfirst{ max-width:22ch; }
.idx-head .art-standfirst{ max-width:52ch; }
.idx-wrap{ padding-bottom:clamp(1.5rem,3vw,2.5rem); }
.idx{ list-style:none; margin:0; padding:0;
  border-top:1px solid var(--a-rule); }
.idx__row{ border-bottom:1px solid var(--a-rule); }
.idx__link{
  display:grid; gap:clamp(1.1rem,3vw,2rem);
  grid-template-columns:auto 1fr auto; align-items:center;
  padding:clamp(1.6rem,3.4vw,2.4rem) 0;
  text-decoration:none; color:inherit;
}
.idx__thumb{
  display:block; width:clamp(76px,11vw,116px); border-radius:12px; overflow:hidden;
  background:var(--a-raised);
  box-shadow:0 1px 2px rgba(20,22,26,.08), 0 12px 24px -14px rgba(20,22,26,.30);
  transition:transform .35s cubic-bezier(.32,.72,0,1);
}
.idx__thumb img{ display:block; width:100%; height:auto; }
.idx__link:hover .idx__thumb{ transform:translateY(-3px); }
.idx__body{ display:block; min-width:0; }
.idx__meta{ display:block; font-size:.9rem; color:var(--a-ink-3); margin-bottom:.55rem; }
.idx__sep{ white-space:pre; }
.art-body .idx__title, .idx__title{
  display:block; font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:600;
  font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.14; letter-spacing:-.018em;
  margin-bottom:.6rem; max-width:34ch; text-wrap:balance;
}
.idx__link:hover .idx__title{ text-decoration:underline; text-underline-offset:4px; }
.idx__stand{ display:block; max-width:60ch; font-size:var(--t-body); line-height:1.66;
  color:var(--a-ink-2); margin-bottom:.85rem; text-wrap:pretty; }
.idx__tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.idx__tags span{
  font-size:.84rem; color:var(--a-ink-3);
  border:1px solid var(--a-rule); border-radius:999px; padding:.2rem .65rem;
  background:var(--a-raised);
}
.idx__go{
  width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid var(--a-rule);
  display:grid; place-items:center; color:var(--a-ink); flex:none;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.idx__link:hover .idx__go{ background:var(--a-ink); color:var(--a-ground); transform:translateX(2px); }
@media (max-width:40rem){
  .idx__link{ grid-template-columns:auto 1fr; }
  .idx__go{ display:none; }
}

/* the other proposal, with its own thumbnail */
.art-next--thumb{ grid-template-columns:auto 1fr auto; column-gap:1.5rem; align-items:center; }
.art-next__thumb{
  grid-column:1; grid-row:1 / span 3; align-self:center;
  display:block; width:clamp(64px,8vw,88px); aspect-ratio:4/5;
  border-radius:10px; overflow:hidden;
  background:var(--a-raised);
  box-shadow:0 1px 2px rgba(20,22,26,.08), 0 10px 20px -12px rgba(20,22,26,.30);
  transition:transform .35s cubic-bezier(.32,.72,0,1);
}
.art-next__thumb img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.art-next--thumb:hover .art-next__thumb{ transform:translateY(-3px); }
.art-next--thumb .art-next__k,
.art-next--thumb .art-next__t,
.art-next--thumb .art-next__s{ grid-column:2; }
.art-next--thumb .art-next__go{ grid-column:3; }
@media (max-width:40rem){ .art-next__thumb{ display:none; } }

/* the articles index is a lane page like Product and Experience, not a piece
   of writing, so it uses the site shell rather than the reading measure. */
.article-index{ --page-measure:var(--max); --page-pad:var(--pad); }
.article-index .idx-wrap{ padding-bottom:clamp(1.5rem,3vw,2.5rem); }

/* On a phone the reading column is narrower than two screens and wider than
   one, so a fixed 16rem track left the images at 74% width against full width
   text, with a ragged empty gutter down the right. One screen per row, filling
   the column. */
@media (max-width:34rem){
  /* Two screens per row, always, including the before and after pairs, which
     only read as a comparison when they sit beside each other. One per row made
     the page 22 phone screens long. Captions sit under their own screen and
     align to the bottom of the row, so a short one does not float. */
  .demo__row, .bgrid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.4rem .8rem; }
  .demo figure, .bgrid figure{ display:flex; flex-direction:column; height:100%; }
  .demo figcaption, .bgrid figcaption{ margin-top:.55rem; font-size:.82rem; line-height:1.45; }
  .demo figcaption b, .bgrid figcaption b{ margin-bottom:.1rem; }

  /* the code block holds AOSP constants that are longer than a phone is wide,
     so it wraps with a hanging indent rather than scrolling sideways */
  .art-pre{
    font-size:11px; line-height:1.7; padding:1.1rem 1rem;
    overflow-x:visible; white-space:pre-wrap; overflow-wrap:anywhere;
    padding-left:2.1rem; text-indent:-1rem;
  }
}

/* ── tap a screen to inspect it ─────────────────────────────────────────────
   Two screens per row keeps the page short, but 166px on a phone is 40% scale
   and a UI is not readable at that size. Tapping one opens it at full width.
   Pointer devices already have the room, so this is phone only. */
.shot-view{
  position:fixed; inset:0; z-index:120; display:none;
  background:rgba(20,22,26,.92);
  padding:max(1.25rem, env(safe-area-inset-top)) 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  overflow:auto; overscroll-behavior:contain;
}
.shot-view[open]{ display:grid; grid-template-rows:1fr auto; gap:1rem; place-items:center; }
.shot-view__stage{ display:contents; }
.shot-view img, .shot-view svg{
  max-width:min(100%, 26rem); max-height:70vh; width:auto; height:auto;
  border-radius:14px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)) drop-shadow(0 24px 48px rgba(0,0,0,.45));
}
.shot-view__cap{
  color:#F5EFE2; font-size:.92rem; line-height:1.5; text-align:center;
  max-width:34rem; margin:0;
}
.shot-view__cap b{ display:block; font-weight:600; margin-bottom:.15rem; }
.shot-view__close{
  position:fixed; top:max(.75rem, env(safe-area-inset-top)); right:.9rem;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(245,239,226,.28);
  background:rgba(20,22,26,.72); color:#F5EFE2; font-size:1.05rem; line-height:1;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
@media (min-width:34.01rem){ .shot-view, .shot-view__close{ display:none !important; } }
@media (max-width:34rem){
  .demo figure img, .bgrid figure img,
  .demo figure > svg, .bgrid figure > svg{ cursor:zoom-in; }
}