/* Writing: a ring-binder notebook, one article per ruled line, with tab dividers. */

.title-wrap { filter: var(--lift); }
.title-strip {
  padding: 22px 30px;
  font: 400 54px/1 var(--font-head);
  background-color: var(--white);
  transform: rotate(-1.5deg);
  clip-path: var(--torn-bottom);
}

.postit {
  position: relative;
  display: block;
  width: 250px;
  margin-left: auto;
  padding: 22px 18px 18px;
  color: var(--ink);
  text-decoration: none;
  background-color: #ffe45c;
  transform: rotate(3deg);
  filter: var(--lift);
  transition: transform .15s;
}
.postit:hover, .postit:focus-visible { transform: rotate(1deg) translateY(-3px); }
.postit .clipsvg { position: absolute; top: -22px; left: 22px; width: 22px; height: 52px; fill: none; stroke: #8f98a0; stroke-width: 3; stroke-linecap: round; }
.postit .kick { display: block; font: 700 11px var(--font-type); letter-spacing: 1px; text-transform: uppercase; }
.postit .pt { display: block; margin: 6px 0; font: 800 17px/1.2 var(--font-body); }
.postit .ps { display: block; font-size: 13px; }

/* ---- the notebook ---- */
.nb-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: start; }
.notebook {
  position: relative;
  z-index: 2;
  padding: 34px 26px 34px 0;
  background-color: var(--white);
  background-image: var(--grain),
    linear-gradient(90deg, transparent 118px, #f19a9a 118px 120px, transparent 120px),
    repeating-linear-gradient(transparent 0 33px, #c4d9ef 33px 34px);
  filter: var(--lift);
}
.hole { position: absolute; left: 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--mat); box-shadow: inset 1px 2px 3px rgba(0, 0, 0, .35); }
.hole.h1 { top: 70px; }
.hole.h2 { top: 46%; }
.hole.h3 { bottom: 70px; }
.notebook .key { width: 96px; right: -40px; bottom: -30px; }

.yr { height: 34px; padding-left: 56px; font: 700 30px/40px var(--font-hand); color: var(--tomato-ink); }

.entry { display: grid; grid-template-columns: 120px minmax(0, 1fr) 190px; color: inherit; text-decoration: none; }
.entry > * { position: relative; top: 6px; }
.entry[hidden], .yr[hidden] { display: none; }
.entry .m { padding-left: 58px; padding-right: 6px; font: 700 12px/34px var(--font-type); text-transform: uppercase; color: var(--muted); }
.entry .tx { min-width: 0; padding-left: 18px; }
.entry .title { display: block; font: 800 17px/34px var(--font-body); }
.entry .hl {
  background: linear-gradient(transparent 58%, rgba(255, 228, 92, .95) 58%) no-repeat 0 0 / 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .3s;
}
.entry:hover .hl, .entry:focus-visible .hl { background-size: 100% 100%; }
.entry .sum { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 34px; color: var(--muted); }
.entry .meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-left: 14px; }
.entry .pub {
  margin-top: 7px;
  padding: 5px 8px;
  font: 800 12px/1 var(--font-body);
  white-space: nowrap;
  background-color: var(--c);
  background-image: var(--grain);
  transform: rotate(var(--r));
  box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
}
.entry .nl { margin-left: 5px; padding: 0 3px; border: 1.5px solid currentColor; border-radius: 2px; font: 700 10px var(--font-type); vertical-align: 1px; }
.entry .tp { display: flex; gap: 5px; margin-top: 12px; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.dot.authz { background: var(--tomato); }
.dot.ai { background: #4aa3d8; }
.dot.cloud { background: #3aa676; }

/* ---- tab dividers ---- */
.dividers { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding-top: 44px; }
.divider {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 13px 8px 13px 18px;
  border: 0;
  border-radius: 0 12px 12px 0;
  text-align: left;
  font: 800 14px var(--font-body);
  background-color: var(--c);
  background-image: var(--grain);
  filter: var(--lift);
  cursor: pointer;
  transform: translateX(-12px);
  transition: transform .15s;
}
.divider.on, .divider:hover, .divider:focus-visible { transform: translateX(2px); }

@media (max-width: 960px) {
  .postit { margin-left: 0; }
}

@media (max-width: 760px) {
  .title-strip { font-size: 42px; }
  .nb-wrap { display: flex; flex-direction: column; }
  .dividers { order: -1; flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 0 0 6px; }
  .divider, .divider.on { padding: 9px 12px; border-radius: 10px 10px 0 0; transform: none; }
  .divider.on { transform: translateY(4px); }
  .notebook {
    padding: 34px 12px 34px 0;
    background-image: var(--grain),
      linear-gradient(90deg, transparent 62px, #f19a9a 62px 64px, transparent 64px),
      repeating-linear-gradient(transparent 0 33px, #c4d9ef 33px 34px);
  }
  .hole { display: none; }
  .notebook .key { width: 80px; right: 4px; bottom: -40px; }
  .yr { padding-left: 8px; }
  .entry { grid-template-columns: 64px minmax(0, 1fr); }
  .entry .m { padding-left: 8px; font-size: 11px; line-height: 17px; padding-top: 8px; }
  .entry .meta { grid-column: 2; justify-content: flex-start; padding-left: 12px; height: 34px; }
  .entry .tx { padding-left: 12px; }
  .entry .title { font-size: 16px; }
  .entry .sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
}