/* ANSO: warm paper for the editorial room; the app's own UI is dark */
:root {
  --anso-ground: #EDE3D1;
  --anso-ink: #231C15;
  --anso-accent: #B4512A;
  --anso-app: #15151D;
}
body[data-room="anso"] { --bar-bg: var(--anso-ground); --bar-ink: var(--anso-ink); }

.room--anso {
  background: var(--anso-ground);
  color: var(--anso-ink);
  padding: 120px var(--gutter) 140px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  font-family: "Newsreader", serif;
  font-size: 20px;
}
.room--anso .room-n { grid-column: 1 / -1; font-family: var(--mono); color: var(--anso-accent); opacity: 1; margin-bottom: clamp(24px, 4vw, 56px); }
.anso-title {
  grid-column: 1 / -1;
  font-style: italic;
  font-size: clamp(110px, 25vw, 380px);
  line-height: .78;
  letter-spacing: -.045em;
  margin: 0 0 80px -.04em;
}
.anso-text { grid-column: 1 / span 5; grid-row: 3; max-width: 32ch; }
.anso-lede { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.12; letter-spacing: -.01em; margin-bottom: .8em; }
.anso-topics { font-style: italic; color: var(--anso-accent); font-size: 17px; line-height: 1.7; margin-top: 1.6em; }
.store--anso { font-size: 24px; font-style: italic; color: var(--anso-accent); text-underline-offset: 6px; }

/* Three phones staggered like a magazine spread rather than lined up in a row */
.anso-phone figcaption { font-family: var(--mono); }
.anso-phone--a { grid-column: 7 / span 3; grid-row: 3; }
.anso-phone--b { grid-column: 10 / span 3; grid-row: 3; margin-top: 180px; }
.anso-phone--c { grid-column: 3 / span 3; grid-row: 4; margin-top: -40px; }
.anso-phone .phone { box-shadow: 0 30px 60px -30px rgb(35 28 21 / .45); }

.anso-library { grid-column: 7 / -1; grid-row: 4; margin-top: 120px; align-self: end; }
.anso-library-label { font: 12px var(--mono); color: var(--anso-accent); margin-bottom: 16px; }
.anso-library li {
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.15;
  padding: 14px 0;
  border-top: 1px solid rgb(35 28 21 / .18);
  transition: color .25s ease, padding-left .35s cubic-bezier(.2, .7, .2, 1);
}
.anso-library li:hover { color: var(--anso-accent); font-style: italic; padding-left: 12px; }
@media (max-width: 1000px) {
  .anso-phone--a { grid-column: 1 / span 6; grid-row: 4; }
  .anso-phone--b { grid-column: 7 / span 6; grid-row: 4; margin-top: 120px; }
  .anso-phone--c { display: none; }
  .anso-text { grid-column: 1 / -1; grid-row: 3; margin-bottom: 80px; }
  .anso-library { grid-column: 1 / -1; grid-row: 5; }
}

@media (max-width: 640px) {
  .room--anso { padding-top: 88px; padding-bottom: 96px; }
  .anso-title { margin-bottom: 48px; }
  .anso-phone--b { margin-top: 64px; }
  .anso-library { margin-top: 72px; }
}