/* Cause Diary: a court diary, in print.
   Paper, ruled lines, a red margin, typewritten case numbers, notes in ink. */
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-latin-wght-italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Courier Prime";src:url("/fonts/courier-prime-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url("/fonts/courier-prime-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Kalam";src:url("/fonts/kalam-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --paper:#f4f6f1;      /* ledger paper, cool white */
  --sheet:#fcfdfa;      /* a fresh page */
  --rule:#c3d1e4;       /* feint blue ruling */
  --margin:#c9484b;     /* the red margin line */
  --ink:#18224d;        /* blue-black printing ink */
  --pencil:#575e73;     /* secondary text */
  --pen:#23409c;        /* fountain pen, for handwritten notes */
  --stamp:#5b3fa3;      /* violet rubber-stamp ink */
  --edge:#dfe4dc;
  --line:2.25rem;       /* one ruled line */
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --typed:"Courier Prime","Courier New",Courier,monospace;
  --hand:"Kalam","Bradley Hand","Segoe Print",cursive;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#10152a;--sheet:#161c35;--rule:#2a3559;--margin:#b9484c;--ink:#e7e9f3;
  --pencil:#a3a9be;--pen:#9fb5ff;--stamp:#ab97ec;--edge:#232b49}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.6 var(--serif);font-variant-numeric:oldstyle-nums;text-rendering:optimizeLegibility}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
a:focus-visible,summary:focus-visible{outline:2px solid var(--pen);outline-offset:3px;border-radius:2px}
img{max-width:100%;display:block}
h1,h2,h3{font-weight:600;line-height:1.12;margin:0;letter-spacing:-.012em}
p{margin:0}
.wrap{max-width:70rem;margin:0 auto;padding:0 1.25rem}

/* Masthead */
.mast{border-bottom:1px solid var(--rule)}
.mast .wrap{display:flex;align-items:center;gap:.75rem 1.5rem;flex-wrap:wrap;padding-top:.9rem;padding-bottom:.9rem}
.mast .home{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-weight:650;font-size:1.25rem;margin-right:auto}
.mast .home img{width:2.1rem;height:2.1rem;border-radius:.5rem}
.mast nav{display:flex;gap:1.35rem;flex-wrap:wrap;font-size:1.02rem}
.mast nav a{text-decoration:none;color:var(--pencil)}
.mast nav a:hover{color:var(--ink);text-decoration:underline}
.mast nav a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--margin);text-decoration-thickness:2px}

/* Opening */
.open{padding:4.25rem 0 2.5rem}
.open h1{font-size:clamp(2.5rem,6.4vw,4.75rem);font-weight:500;max-width:17ch;text-wrap:balance}
.open .lead{font-size:1.3rem;line-height:1.5;max-width:36rem;margin-top:1.4rem;color:var(--ink)}
.open .soon{margin-top:1.6rem;font-family:var(--typed);font-size:1rem;font-variant-numeric:normal}
.open .soon b{display:inline-block;border:1.5px solid var(--stamp);color:var(--stamp);padding:.3rem .7rem .2rem;border-radius:3px;font-weight:700;transform:rotate(-1.2deg)}
.open .quiet{margin-top:1rem;color:var(--pencil);font-size:1rem;max-width:34rem}

/* The diary page and the phone that keeps it */
.spread{display:grid;grid-template-columns:minmax(0,1fr) 17.5rem;gap:0;align-items:start;padding-bottom:4.5rem}
.page{position:relative;background-color:var(--sheet);
  background-image:linear-gradient(90deg,transparent 5.6rem,var(--margin) 5.6rem,var(--margin) calc(5.6rem + 1.5px),transparent calc(5.6rem + 1.5px)),
    linear-gradient(to bottom,transparent calc(var(--line) - 1px),var(--rule) calc(var(--line) - 1px));
  background-size:100% 100%,100% var(--line);background-position:0 0,0 -.6rem;
  border:1px solid var(--edge);border-radius:2px 10px 10px 2px;box-shadow:0 1px 0 var(--edge),6px 7px 0 -1px var(--sheet),6px 7px 0 0 var(--edge),0 22px 40px -28px rgba(24,34,77,.45);
  padding:calc(var(--line)*1) 2.2rem calc(var(--line)*2) 0;margin-right:-3rem;transform:rotate(-.5deg)}
.page>*{line-height:var(--line)}
.page .day{display:flex;align-items:baseline;gap:1rem;padding-left:6.5rem;height:calc(var(--line)*2)}
.page .day h2{font-size:2.35rem;line-height:calc(var(--line)*2);font-weight:500}
.page .day .date{font-size:1.2rem;color:var(--pencil)}
.page .day .count{margin-left:auto;padding-right:3.4rem;font-family:var(--typed);font-size:.9rem;color:var(--pencil);font-variant-numeric:normal}
.page ol{list-style:none;margin:0;padding:0}
.page li{display:grid;grid-template-columns:5.6rem 4rem 10.5rem minmax(0,1fr);column-gap:0;padding-right:3rem}
.page li>*{line-height:var(--line);min-height:var(--line)}
.page .ct{padding:0 .5rem 0 .9rem;font-size:.92rem;color:var(--pencil);white-space:nowrap}
.page .it{padding-left:1rem;font-weight:650;font-variant-numeric:lining-nums tabular-nums}
.page .no{font-family:var(--typed);font-size:1rem;font-variant-numeric:normal;white-space:nowrap}
.page .pt{font-weight:500}
.page .pt i{color:var(--pencil);font-weight:400}
.page .nt{grid-column:3 / -1;font-family:var(--hand);color:var(--pen);font-size:1.12rem;font-variant-numeric:normal;padding-top:.12rem}
.page .gap{height:var(--line)}
.page .fine{padding-left:6.5rem;font-size:.86rem;color:var(--pencil);font-style:italic}
@media (prefers-reduced-motion:no-preference){
  .page .nt{clip-path:inset(0 100% 0 0);animation:write .9s cubic-bezier(.3,.6,.3,1) forwards}
  .page li:nth-child(1) .nt{animation-delay:.5s}.page li:nth-child(2) .nt{animation-delay:1.2s}
  .page li:nth-child(3) .nt{animation-delay:1.9s}.page li:nth-child(4) .nt{animation-delay:2.6s}
  @keyframes write{to{clip-path:inset(0 -2% 0 0)}}
}
.phone{margin:0}
.phone img{width:100%;height:auto;filter:drop-shadow(0 26px 22px rgba(13,18,38,.32))}
.spread .phone-fig{margin:5.5rem 0 0;position:relative;z-index:1}
.spread .phone-fig figcaption{padding-left:3.5rem;text-align:left}
.spread figcaption{font-size:.95rem;color:var(--pencil);margin-top:.9rem;font-style:italic}

/* Sections */
.sec{padding:4rem 0;border-top:1px solid var(--rule)}
.sec>.wrap>h2{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:500;max-width:22ch;text-wrap:balance}
.sec>.wrap>.intro{color:var(--pencil);max-width:38rem;margin-top:.8rem;font-size:1.15rem}

/* The index: a margin, a red line, entries */
.index{margin-top:2.5rem}
.index section{display:grid;grid-template-columns:11rem minmax(0,1fr);border-top:1px solid var(--rule)}
.index section:last-child{border-bottom:1px solid var(--rule)}
.index h3.head{font-size:1.2rem;font-weight:500;font-style:italic;padding:1.5rem 1rem 1.5rem 0;color:var(--ink)}
.index .entries{border-left:1px solid var(--margin);box-shadow:-4px 0 0 -3px var(--margin);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 2.5rem;padding:1.5rem 0 1.7rem 1.75rem}
.index .entries h4{font-size:1.15rem;font-weight:650;margin:0 0 .2rem;line-height:1.3;letter-spacing:-.005em}
.index .entries p{color:var(--pencil);font-size:1.03rem;line-height:1.5;max-width:30rem}

/* Screens */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem 4rem;margin-top:2.75rem;align-items:start}
.shot{margin:0;display:grid;grid-template-columns:13.5rem minmax(0,1fr);gap:1.75rem;align-items:center}
.shot h3{font-size:1.45rem;font-weight:500}
.shot p{color:var(--pencil);margin-top:.6rem;font-size:1.05rem;line-height:1.5}
.shot .hand{font-family:var(--hand);color:var(--pen);font-size:1.1rem;margin-top:.9rem;font-variant-numeric:normal;line-height:1.4}

/* Steps: a real sequence, so they are numbered */
.steps{list-style:none;margin:2.25rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 3rem;counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:.9rem}
.steps li:before{content:counter(s);font-size:2.6rem;font-weight:400;line-height:1;display:block;margin-bottom:.5rem;font-variant-numeric:oldstyle-nums}
.steps h3{font-size:1.25rem;font-weight:650}
.steps p{color:var(--pencil);margin-top:.3rem;font-size:1.05rem;line-height:1.5}

/* The list of courts, typed like a cause list */
.typed{margin-top:2.25rem;font-family:var(--typed);font-variant-numeric:normal;font-size:1rem;line-height:1.5;width:100%;border-collapse:collapse}
.typed th,.typed td{text-align:left;vertical-align:top;padding:.8rem 1rem .7rem 0}
.typed thead th{font-weight:700;border-top:3px double var(--ink);border-bottom:1px solid var(--ink)}
.typed tbody td{border-bottom:1px dashed var(--rule)}
.typed tbody td:first-child{font-weight:700;width:19rem}
.typed tbody tr:last-child td{border-bottom:3px double var(--ink)}
.after{color:var(--pencil);margin-top:1.25rem;max-width:42rem;font-size:1.03rem}

/* The caution */
.caution{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2.5rem;align-items:center}
.seal{font-family:var(--typed);font-weight:700;font-variant-numeric:normal;color:var(--stamp);border:2px solid var(--stamp);outline:1px solid var(--stamp);outline-offset:3px;border-radius:4px;padding:.7rem 1rem .5rem;text-transform:uppercase;letter-spacing:.08em;font-size:1rem;line-height:1.25;text-align:center;transform:rotate(-5deg);opacity:.9}
.caution p{max-width:42rem;font-size:1.1rem}
.caution p+p{margin-top:.8rem;color:var(--pencil);font-size:1.03rem}

/* Foot */
.foot{border-top:1px solid var(--rule);color:var(--pencil);font-size:.98rem}
.foot .wrap{display:flex;gap:.75rem 1.6rem;flex-wrap:wrap;padding-top:1.6rem;padding-bottom:3rem}
.foot p{flex:1 1 26rem;max-width:44rem}

/* Document pages: privacy, terms, support */
.doc{max-width:46rem;margin:0 auto;padding:1rem 1.25rem 4rem}
.doc .sheet{border-left:1px solid var(--margin);box-shadow:-4px 0 0 -3px var(--margin);padding-left:2rem}
.doc h1{font-size:clamp(2.2rem,5vw,3.1rem);font-weight:500;margin:2.25rem 0 .4rem}
.doc h2{font-size:1.4rem;font-weight:650;margin:2.4rem 0 .5rem}
.doc p{margin:.8em 0}
.doc li{margin:.45em 0}
.doc a{color:var(--pen)}
.doc p.updated{color:var(--pencil);font-size:1rem;font-style:italic;margin-top:0}
.doc p.cl{display:grid;grid-template-columns:3em 1fr;margin:.7em 0}
.doc p.cl>span:first-child{font-variant-numeric:lining-nums tabular-nums}
.doc ol.al{counter-reset:a;list-style:none;margin:.4em 0 .9em;padding-left:3em}
.doc ol.al li{counter-increment:a;position:relative;padding-left:2.2em}
.doc ol.al li:before{content:"(" counter(a,lower-alpha) ")";position:absolute;left:0}
.doc p.pre{margin:.9em 0}

@media (max-width:60rem){
  .spread{grid-template-columns:1fr;gap:2.5rem}
  .page{margin-right:0;transform:none}
  .spread .phone-fig{margin:0 auto;max-width:17.5rem}
  .spread .phone-fig figcaption{padding-left:0;text-align:center}
  .shots{grid-template-columns:1fr}
  .index .entries{grid-template-columns:1fr}
}
@media (max-width:44rem){
  body{font-size:1.06rem}
  .open{padding:2.75rem 0 2rem}
  .open .lead{font-size:1.17rem}
  .page{background-image:linear-gradient(90deg,transparent 3.4rem,var(--margin) 3.4rem,var(--margin) calc(3.4rem + 1px),transparent calc(3.4rem + 1px)),linear-gradient(to bottom,transparent calc(var(--line) - 1px),var(--rule) calc(var(--line) - 1px));padding-right:.9rem}
  .page .day{padding-left:4.1rem;flex-wrap:wrap;height:auto;gap:0 .7rem}
  .page .day h2{font-size:1.9rem}
  .page .day .date{line-height:calc(var(--line)*2)}
  .page .day .count{display:none}
  .page li{grid-template-columns:3.4rem minmax(0,1fr);padding-right:0}
  .page .ct{grid-column:2;grid-row:4;padding:0 0 0 .7rem;font-size:.9rem}
  .page .it{grid-column:1;grid-row:1;padding-left:.7rem}
  .page .no{grid-column:2;grid-row:1;padding-left:.7rem}
  .page .pt{grid-column:2;grid-row:2;padding-left:.7rem}
  .page .nt{grid-column:2;grid-row:3;padding-left:.7rem}
  .page .fine{padding-left:4.1rem}
  :root{--line:2rem}
  .sec{padding:3rem 0}
  .index section{grid-template-columns:1fr}
  .index h3.head{padding:1.2rem 0 .2rem}
  .index .entries{border-left:0;box-shadow:none;padding:.6rem 0 1.5rem}
  .shot{grid-template-columns:1fr;justify-items:center;text-align:left}
  .shot .phone{max-width:15rem}
  .steps{grid-template-columns:1fr}
  .typed,.typed tbody,.typed tr,.typed td{display:block;width:auto}
  .typed thead{display:none}
  .typed tbody td:first-child{width:auto;border-bottom:0;padding-bottom:0;border-top:1px solid var(--ink)}
  .typed tbody tr:last-child td:first-child{border-bottom:0}
  .caution{grid-template-columns:1fr;gap:1.75rem;justify-items:start}
  .doc .sheet{border-left:0;box-shadow:none;padding-left:0}
}