/* ============================================================
   amitvirmani.com
   Two themes on one stylesheet:
     body.dark  -> home + contact (reverse text on dark)
     body.light -> My two cents   (dark text on white)
   ============================================================ */

:root{
  --marker:#f5e14b;          /* highlighter yellow */
  --measure:38em;            /* comfortable line length */
}

body.dark{
  --bg:#0e0f10;
  --ink:#e8e6e1;
  --dim:#8c8a85;
  --faint:#5c5a56;
  --rule:#232426;
}

body.light{
  --bg:#ffffff;
  --ink:#16171a;
  --dim:#6b6a66;
  --faint:#9a9894;
  --rule:#e6e4e0;
}

/* Dark page, white sheet - used for everything under My two cents,
   so the writing sits on white without the whole page turning white. */
body.panel{
  --bg:#0e0f10;
  --ink:#e8e6e1;
  --dim:#8c8a85;
  --faint:#5c5a56;
  --rule:#232426;
}

.sheet{
  --ink:#16171a;
  --dim:#6b6a66;
  --faint:#9a9894;
  --rule:#e6e4e0;
  background:#fff;
  color:var(--ink);
  border-radius:8px;
  padding:38px 40px 42px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-optical-sizing:auto;
  font-size:21px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.wrap{
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding:0 32px;
}


/* ---------- header / nav ---------- */

header{padding:44px 0 0}

nav{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
}

.logo{
  font-size:17px;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}

.menu{display:flex;gap:26px}

.menu a{
  font-size:15px;
  color:var(--dim);
  text-decoration:none;
  transition:color .18s ease;
}
.menu a:hover,
.menu a[aria-current="page"]{color:var(--ink)}

/* ---------- main ---------- */

main{flex:1;padding:80px 0 96px}
main.centred{display:flex;align-items:center}

.copy p{margin:0 0 1.5em;max-width:var(--measure)}
.copy p:last-child{margin-bottom:0}

/* Bold, but deliberately the same size as body text. */
h1{
  font-size:inherit;
  font-weight:700;
  line-height:inherit;
  margin:0 0 1.5em;
}

/* ---------- links ----------
   Yellow text rather than a highlighter block. The underline is
   invisible until hover, so links stay quiet but still announce
   themselves when you go looking. */

.copy a,
a.mark{
  color:var(--marker);
  text-decoration:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  transition:text-decoration-color .18s ease,color .18s ease;
}
.copy a:hover,
a.mark:hover{text-decoration-color:var(--marker)}
.copy a:focus-visible,
a.mark:focus-visible{outline:2px solid var(--marker);outline-offset:3px}

/* Yellow on white is unreadable, so light pages get a darker link
   with the yellow kept as the underline. */
body.light .copy a,
.sheet .copy a,
body.light a.mark{
  color:var(--ink);
  text-decoration-color:var(--marker);
  text-decoration-thickness:2px;
}
body.light .copy a:hover,
.sheet .copy a:hover,
body.light a.mark:hover{text-decoration-color:var(--ink)}

/* ---------- My two cents: the list ---------- */

.page-title{
  font-size:inherit;
  font-weight:700;
  margin:0 0 .4em;
}
.page-note{
  color:var(--dim);
  font-size:17px;
  margin:0 0 56px;
  max-width:var(--measure);
}

.posts{list-style:none;margin:0;padding:0}

.posts li{
  padding:26px 0;
  border-top:1px solid var(--rule);
}
.posts li:last-child{border-bottom:1px solid var(--rule)}

.posts h2{
  font-size:inherit;
  font-weight:700;
  margin:0 0 .25em;
  line-height:1.35;
}
.posts h2 a{color:var(--ink);text-decoration:none}
.posts h2 a{
  text-decoration:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
  transition:text-decoration-color .18s ease;
}
.posts h2 a:hover{text-decoration-color:var(--marker)}

.posts .meta{
  display:block;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:.5em;
}

.posts .summary{
  margin:0;
  color:var(--dim);
  font-size:18px;
  max-width:var(--measure);
}

/* ---------- My two cents: a single post ---------- */

article.post{max-width:var(--measure)}

article.post .post-title{
  font-size:1.35em;
  font-weight:700;
  line-height:1.28;
  margin:0 0 .3em;
}

article.post .meta{
  display:block;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:2em;
}

article.post p{margin:0 0 1.4em}
article.post h2{font-size:1.05em;font-weight:700;margin:2em 0 .6em}
article.post h3{font-size:1em;font-weight:700;margin:1.8em 0 .5em}
article.post ul,article.post ol{margin:0 0 1.4em;padding-left:1.3em}
article.post li{margin-bottom:.5em}
article.post img{max-width:100%;height:auto;display:block;margin:2em 0}

article.post blockquote{
  margin:2em 0;
  padding-left:1.2em;
  border-left:2px solid var(--marker);
  color:var(--dim);
}

article.post a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--marker);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
article.post a:hover{
  text-decoration-color:var(--ink);
}

article.post hr{
  border:0;
  border-top:1px solid var(--rule);
  margin:2.5em 0;
}

.back{
  display:inline-block;
  margin-top:56px;
  font-size:16px;
  color:var(--dim);
  text-decoration:none;
}
.back:hover{color:var(--ink)}

/* ---------- contact ---------- */

.form-slot{
  margin-top:40px;
  max-width:var(--measure);
}

/* The Tally form sits on a light panel so its own text stays legible
   against the dark page. */
.form-slot iframe{
  display:block;
  background:#fff;
  border-radius:6px;
  padding:20px 22px;
  min-height:484px;
}

/* ---------- footer ---------- */

footer{
  padding:0 0 40px;
  font-size:13px;
  color:var(--faint);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

/* ---------- small screens ---------- */

@media (max-width:640px){
  body{font-size:18px;line-height:1.65}
  .wrap{padding:0 22px}
  header{padding-top:30px}
  main{padding:52px 0 72px}
  main.centred{align-items:flex-start}
  .menu{gap:18px}
  .menu a{font-size:14px}
  .page-note{margin-bottom:38px;font-size:16px}
  .posts li{padding:22px 0}
  .posts .summary{font-size:16px}
  article.post .post-title{font-size:1.25em}
}

/* Respect people who ask for less motion. */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}

/* ---------- tags ---------- */

.tag-filter{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 44px;
  padding-bottom:22px;
  border-bottom:1px solid var(--rule);
}

.tag-filter-label{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
  margin-right:6px;
}

.tag-filter a{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  font-size:15px;
  line-height:1;
  color:var(--ink);
  text-decoration:none;
  padding:7px 12px;
  border:1px solid var(--rule);
  border-radius:999px;
  transition:border-color .18s ease,background-color .18s ease;
}
.tag-filter a:hover{
  border-color:var(--marker);
  background:color-mix(in srgb, var(--marker) 16%, transparent);
}

.tag-filter .count{
  font-size:12px;
  color:var(--faint);
}

/* Tags shown under each entry. */
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  margin:.7em 0 0;
}
.tags a{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--faint);
  text-decoration:none;
  transition:color .18s ease;
}
.tags a:hover{color:var(--ink)}
.tags a::before{content:"#";opacity:.55;margin-right:1px}

a.plain{
  color:var(--dim);
  text-decoration:underline;
  text-decoration-color:var(--rule);
  text-underline-offset:3px;
}
a.plain:hover{text-decoration-color:var(--marker)}

/* Tags on a post page, under the date. */
article.post .tags{margin:-1.2em 0 2.4em}

/* ---------- archive layout (grouped by year) ---------- */

.archive .year{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--faint);
  margin:44px 0 4px;
  padding-bottom:10px;
  border-bottom:1px solid var(--rule);
}
.archive .year:first-child{margin-top:0}

ul.index{list-style:none;margin:0;padding:0}
ul.index li{padding:20px 0;border-bottom:1px solid var(--rule)}

a.entry{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  text-decoration:none;
  color:var(--ink);
}
.entry-title{
  font-weight:700;
  line-height:1.35;
  text-decoration:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
  transition:text-decoration-color .18s ease;
}
a.entry:hover .entry-title{text-decoration-color:var(--marker)}

.entry-date{
  flex:none;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--faint);
  white-space:nowrap;
}

@media (max-width:640px){
  .tag-filter{margin-bottom:32px;gap:7px}
  .tag-filter a{font-size:14px;padding:6px 11px}
  a.entry{flex-direction:column;gap:4px}
  .entry-date{font-size:13px}
}

/* The tag you're currently looking at, or "All" when you're not
   filtered to anything. */
.tag-filter a.is-active{
  border-color:var(--marker);
  background:var(--marker);
  color:#14150f;
}
.tag-filter a.is-active .count{color:#5c5423}
.tag-filter a.is-active:hover{background:var(--marker)}

/* ---------- yellow emphasis ---------- */
/* Same yellow as the links, no underline. Safe here because the
   contact page has no links in its copy to confuse it with. */

.accent{color:var(--marker)}

/* The sheet gets tighter on small screens - a 46px inset eats a phone. */
@media (max-width:640px){
  .sheet{padding:24px 20px 28px;border-radius:6px}
}

/* ---------- the head block, sitting on the black ---------- */

.page-head{margin-bottom:34px}
body.panel .page-head .page-note{color:var(--ink)}
.page-head .page-note{margin-bottom:0}
.page-head .post-title{margin-bottom:.25em}
.page-head .meta{margin-bottom:0}
.page-head .tags{margin-top:.8em}
body.panel .page-head .tags a{color:var(--dim)}
body.panel .page-head .tags a:hover{color:var(--ink)}

/* In the intro line, anything bolded comes out yellow rather than bold.
   Lets the words be picked in the writing panel without any markup. */
.page-note strong{
  color:var(--marker);
  font-weight:inherit;
}

.sheet .back{margin-top:40px}

@media (max-width:640px){
  .page-head{margin-bottom:24px}
}