/* practicing-year/assets/study.css — the class pages.
   The one loud moment on a quiet site is the offer and the ink that goes
   through it. Everything else stays out of the way of the reading. */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 0;border-bottom:1px solid var(--rule-soft)}
.topbar .ink{color:var(--ink);text-decoration:none}

.sesslink{display:flex;gap:14px;padding:13px 4px;border-bottom:1px solid var(--rule-soft);
  align-items:baseline;width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;
  font:inherit;color:inherit;cursor:pointer}
.sesslink[disabled]{cursor:default;opacity:.55}
.sesslink:hover:not([disabled]){background:var(--sheet)}
.sesslink .d{font-family:Archivo,Arial,sans-serif;font-size:11px;letter-spacing:.06em;color:var(--faint);
  min-width:58px;font-variant-numeric:tabular-nums}
.sesslink .t{font-family:Newsreader,Georgia,serif;font-size:19px;line-height:1.2}
.sesslink .t small{display:block;font-family:"Source Serif 4",serif;font-size:13.5px;color:var(--muted);
  font-style:italic;margin-top:3px}

.seasonbar{height:4px;margin:0 0 20px}
.s-lent .seasonbar{background:var(--purple)} .s-ordinary .seasonbar{background:var(--green)}
.s-feast .seasonbar{background:var(--gold)} .s-advent .seasonbar{background:var(--advent)}
.s-winter .seasonbar{background:var(--faint)}

.blk{padding:24px 0;border-top:1px solid var(--rule-soft)}
.blk:first-of-type{border-top:0}
.blk h3{font-family:Archivo,Arial,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.blk p{margin:10px 0;max-width:66ch}
.blk ul,.blk ol{max-width:66ch;padding-left:20px}
.blk li{padding:5px 0}
.blk blockquote{margin:12px 0;padding-left:16px;border-left:2px solid var(--purple);
  font-family:Newsreader,Georgia,serif;font-size:23px;line-height:1.3;color:var(--purple);max-width:44ch}

/* the offer, and the ink */
.offerbtn{display:block;width:100%;max-width:400px;padding:0;margin:6px 0 0;border:0;background:none;
  text-align:left;cursor:pointer;font:inherit;color:inherit}
.offerbtn:focus-visible{outline:2px solid var(--purple);outline-offset:6px}
.xbox{position:relative}
.offer-card{background:var(--sheet);border:1px solid var(--rule);padding:20px 22px}
.offer-card .name{font-family:Archivo,Arial,sans-serif;font-weight:700;font-size:21px;letter-spacing:-.01em;
  line-height:1.15;margin:0 0 8px}
.offer-card p{font-size:15px;margin:8px 0}
.offer-card ul{list-style:none;padding-left:0;margin:10px 0 0}
.offer-card ul li{padding:8px 0;border-top:1px solid var(--rule-soft);font-size:14.5px}
.offer-card ul li:first-child{border-top:0}
.xmark{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);
  pointer-events:none;overflow:visible}
/* The ink. The dash length is set in JS from the path's own length — a unitless
   dasharray here would be read as pixels and the "hidden" X would draw solid. */
.xmark path{fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;opacity:0;
  transition:stroke-dashoffset .42s cubic-bezier(.5,0,.6,1),opacity .12s linear}
.xmark.ready path{opacity:.9}
.xmark path:nth-child(2){transition-delay:.17s}
.struck .xmark path{stroke-dashoffset:0}
.tapme{font-family:Archivo,Arial,sans-serif;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--purple);margin:12px 0 0}
.refuse{font-family:Newsreader,Georgia,serif;font-size:27px;color:var(--purple);margin:16px 0 4px;max-width:30ch}
.needs-line{font-family:Archivo,Arial,sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);padding:2px 7px;margin-left:8px}

/* the chapter */
.chapter{background:var(--sheet);border:1px solid var(--rule-soft);padding:6px 22px 18px;margin-top:10px}
.chapter h2{font-size:25px;margin:16px 0 8px}
.chapter h3{font-family:Newsreader,Georgia,serif;font-size:19px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ink);margin:22px 0 6px}
.chapter p{margin:12px 0;max-width:66ch}
.chapter blockquote{margin:14px 0;padding-left:18px;border-left:2px solid var(--rule);color:var(--muted)}
.chapter blockquote p{font-style:italic}

/* the three turns */
.turns{background:var(--sh-ordinary);border-left:3px solid var(--green);padding:16px 20px;margin-top:10px}
.turns .tl{font-family:Archivo,Arial,sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);margin:16px 0 6px}
.turns .tl:first-child{margin-top:4px}
.turns ol.steps{list-style:none;padding-left:0;margin:6px 0;counter-reset:s}
.turns ol.steps li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:baseline;
  padding:8px 0;border-top:1px solid var(--rule-soft);font-size:15.5px}
.turns ol.steps li:first-child{border-top:0}
.turns ol.steps li::before{counter-increment:s;content:counter(s);font-family:Archivo,Arial,sans-serif;
  font-size:11px;color:var(--green)}
.turns .who li{list-style:none;padding:7px 0;border-top:1px solid var(--rule-soft);font-size:15.5px}
.turns .who{padding-left:0;margin:6px 0}
.turns .who li:first-child{border-top:0}
.turns .ans{font-family:Archivo,Arial,sans-serif;font-size:10.5px;letter-spacing:.07em;color:var(--green);
  display:block;margin-top:3px}
.turns .onesent{font-family:Newsreader,Georgia,serif;font-size:22px;line-height:1.35;margin:6px 0}
.blankline{display:inline-block;min-width:92px;border-bottom:2px solid var(--green)}
.turns .small{font-size:13.5px;color:var(--muted);font-style:italic;margin:8px 0 0}

/* the rule of life */
.governing{font-family:Newsreader,Georgia,serif;font-size:22px;line-height:1.35;color:var(--purple);
  margin:14px 0 4px;max-width:34ch}
.rulegrid{margin-top:18px;border-top:1px solid var(--rule-soft)}
.ruleline{display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--rule-soft)}
.ruleline .when{font-family:Archivo,Arial,sans-serif;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.ruleline .what{font-size:16.5px;line-height:1.45}
.ruleline .mark{font-family:Archivo,Arial,sans-serif;font-size:10px;letter-spacing:.09em;
  color:var(--faint);background:none;border:1px solid var(--rule);padding:5px 9px;cursor:pointer;
  white-space:nowrap}
.ruleline .mark.kept{color:var(--green);border-color:var(--green)}
.ruleline .mark:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.rulenote{font-size:14px;color:var(--muted);font-style:italic;margin:14px 0 0;max-width:60ch}
.mature{margin-top:26px;border-top:1px solid var(--rule);padding-top:14px}
.mature summary{font-family:Archivo,Arial,sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple);cursor:pointer}
.mature p{max-width:62ch;margin:12px 0}
@media(max-width:620px){.ruleline{grid-template-columns:1fr;gap:4px}}