/*
Theme Name: Lalit K. Jha — Sentence
Version: 4.0.6
Author: Om Jha
Requires PHP: 8.0
License: GPL-2.0-or-later
*/
/* Variant A — Sentence. One face (Helvetica Neue system stack), one size (14px). Flexoki system light/dark. */
:root {
  color-scheme: light dark;
  --paper: #FFFCF0; --bg2: #F2F0E5; --ui: #E6E4D9; --ui2: #DAD8CE; --ui3: #CECDC3;
  --tx3: #B7B5AC; --tx2: #6F6E69; --tx: #100F0F; --link: #205EA6; --link-soft: #4385BE;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #100F0F; --bg2: #1C1B1A; --ui: #282726; --ui2: #343331; --ui3: #403E3C;
    --tx3: #575653; --tx2: #878580; --tx: #CECDC3; --link: #4385BE; --link-soft: #205EA6;
  }
}
* { box-sizing: border-box; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--tx);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, input, select, button, label { font: inherit; font-size: 1rem; margin: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.16em; }
strong, b { font-weight: 600; }
em { font-style: italic; }

/* A left-anchored column with bounded vertical spacing. */
.col { max-width: 44rem; padding: clamp(5rem, 14vh, 10rem) 1.5rem 4rem clamp(1.5rem, 16vw, 18rem); }
.col > p, .col > ul, .col > form, .col > div, .col > h1 { max-width: 46ch; }
p + p, p + ul, ul + p, div + p, form + p, p + form, p + div { margin-top: 1.1em; }

.name { font-weight: 600; }
.name a { color: inherit; }
.nav { color: var(--tx2); }
.nav a { color: var(--tx2); }
.nav a[aria-current="page"] { color: var(--tx); }
.nav a:hover { color: var(--tx); }
.gap { margin-top: 2.6em !important; }
.muted { color: var(--tx2); }

/* Lists are sentences, one per line. */
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 0.18em 0; }
.list .when { color: var(--tx2); }
.list .when::before { content: " "; }

/* Reporting: the controls sit inside a sentence. */
.sentence input, .sentence select {
  display: inline-block; font: inherit; color: var(--tx); background: transparent;
  border: 0; border-bottom: 1px solid var(--tx3); border-radius: 0; padding: 0 0.1em;
  -webkit-appearance: none; appearance: none; vertical-align: baseline; cursor: text;
}
.sentence input { width: 11em; }
.sentence select { cursor: pointer; padding-right: 0.2em; }
.sentence input:focus, .sentence select:focus { outline: none; border-bottom-color: var(--tx); }
.sentence input::placeholder { color: var(--tx3); }
button.link { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; }
button.link:hover { text-decoration: underline; }
.on { color: var(--tx); font-weight: 600; }

/* Story */
.title { font-weight: 600; }
.body p { margin-top: 1em; }
.body p:first-child { margin-top: 0; }

/* About */
.prose h2 { font-weight: 600; margin-top: 2em; }
.prose p { margin-top: 1em; }

.foot { margin-top: 5em; color: var(--tx2); }
.foot p { margin: 0; padding: 0.18em 0; }
.foot a { color: var(--tx2); }
.foot a:hover { color: var(--tx); }

@media (max-width: 640px) {
  .col { padding: 4rem 1.25rem 3rem 1.25rem; }
  .sentence input { width: 9em; }
}

/* WordPress integration: preserve the selected single type specification. */
.col,.col *{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;font-size:14px!important}
.col .sharedaddy,.col .jetpack-likes-widget-wrapper{display:none!important}
.col img,.col video{max-width:100%;height:auto}
.body,.prose{overflow-wrap:anywhere}
.body ul,.body ol{padding-left:1.5em;margin-top:1em}
.skip{position:absolute;left:1rem;top:-100px}.skip:focus{top:1rem}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:1px solid var(--link);outline-offset:3px}