/* learntres.com, Direction C (App style). Built from apps/tres/site; Georgia only (the Gelasio fallback ships with the next full deploy). */
.site {
  --ink: #1D2024; --ink2: #5A6068; --rule: #E3E5E8; --paper: #FFFFFF; --soft: #F3F4F6;
  --todo: #FFF1B8; --todo-ink: #5C4A00;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  container-type: inline-size;
}
.site * { box-sizing: border-box; }
.site main { flex: 1; }
.site a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site a:hover { text-decoration-thickness: 2px; }
.site a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.site .wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
.site .wordmark { font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.site .site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.site .site-head nav, .site .site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site .site-head nav a { text-decoration: none; color: var(--ink2); }
.site .site-foot { font-size: 14px; color: var(--ink2); }
.site .site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 24px 32px; }
.dir-c {
  --paper: #F4F2EE; --ink: #1C1B19; --ink2: #5E5A53; --ink3: #8A857C; --rule: #E2DED6; --surface: #FFFFFF;
  --lip: #E2DED6; --dark: #3A3631; --dark-lip: #1E1C19; --mid-lip: #BBB3A5;
  --new: #DCE6F3; --learn: #CFE5D6;
  --read: Georgia, serif;
}
.dir-c .home h1, .dir-c .wordmark { font-weight: 800; letter-spacing: -.03em; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.dir-c .home h1::after, .dir-c .wordmark::after {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; margin: 10px 26px 0 0; background: var(--dark);
  box-shadow: 13px -4px 0 var(--dark), 26px 0 0 var(--dark), 0 2px 0 var(--dark-lip), 13px -2px 0 var(--dark-lip), 26px 2px 0 var(--dark-lip);
}
.dir-c .wordmark { font-size: 24px; }
.dir-c .wordmark::after { transform: scale(.8); transform-origin: 0 50%; margin-right: 21px; }
.dir-c.page-home .site-head { display: none; }
.dir-c .site-foot { font-weight: 600; }
.dir-c a:focus-visible { outline-color: #C24A2E; }
.dir-c .home { display: flex; align-items: center; padding-block: 72px; }
.dir-c .home .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.dir-c .home h1 { font-size: 32px; line-height: 1; margin: 0 0 48px; }
.dir-c .home .line { font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -.03em; margin: 0 0 18px; text-wrap: balance; }
.dir-c .home .lede { font-size: 19px; line-height: 1.4; font-weight: 600; color: var(--ink2); margin: 0 0 32px; max-width: 30em; }
.dir-c .home .soon { display: inline-block; margin: 0; font-size: 15px; font-weight: 700; color: var(--ink2); padding: 7px 14px; border: 1.5px dashed var(--mid-lip); border-radius: 12px; }
.dir-c .sample { margin: 0; background: var(--surface); border-radius: 26px; padding: 22px 26px 24px; box-shadow: 0 4px 0 var(--lip); }
.dir-c .sample .src { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.dir-c .sample .src b { font-weight: 700; color: var(--ink2); letter-spacing: 0; text-transform: none; font-size: 15px; display: block; margin-top: 2px; }
.dir-c .sample blockquote { margin: 0; font-family: var(--read); font-size: 20px; line-height: 1.7; color: var(--ink); }
.dir-c .sample .n, .dir-c .key .n { background: var(--new); border-radius: 3px; }
.dir-c .sample .l, .dir-c .key .l { background: var(--learn); border-radius: 3px; }
.dir-c .sample .f, .dir-c .key .f { text-decoration: underline dotted var(--ink3); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.dir-c .key { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid #EFEBE4; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; font-weight: 600; color: var(--ink2); }
.dir-c .key span { color: var(--ink); padding: 0 2px; }
@container (max-width: 760px) {
  .dir-c .home { padding-block: 56px 40px; }
  .dir-c .home .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .dir-c .home h1 { margin-bottom: 40px; }
  .dir-c .home .line { font-size: 32px; }
  .dir-c .home .lede { font-size: 17px; margin-bottom: 24px; }
  .dir-c .sample { padding: 18px 20px 20px; }
  .dir-c .sample blockquote { font-size: 18px; line-height: 1.67; }
  .dir-c .site-foot .wrap { flex-direction: column; }
}