/* eyeforai.blog — an academic quarterly's table of contents.
   Left rail masthead (offset hard left, sticky) | contents & reading column.
   Warm paper, near-black ink, one accent (oxblood). Hairline rules only:
   no cards, no shadows, no radii, no tinted bands, no gradients. */

:root{
  --paper:#faf7f1;
  --paper2:#f4f0e7;
  --ink:#191815;
  --ink2:#3b3831;
  --dim:#5c574c;
  --rule:#d5cfc1;
  --rule2:#bdb5a3;
  --acc:#78202b;
  --acc-dk:#5d1821;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",Times,serif;
  --rail:15rem;
  --measure:36rem;      /* ~66 characters at the text size */
  --note:15rem;
  --gut:2.25rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:1.5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 1.0625rem/1.62 var(--serif);
  overflow-x:clip;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--acc);text-decoration:none;text-underline-offset:.18em}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
h1,h2,h3,h4{font-weight:600;line-height:1.16;margin:0}
p{margin:0 0 1.05em}
hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}

.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--ink);color:var(--paper);
  padding:.55rem .95rem;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.skip:focus{left:.5rem;top:.5rem}

.sc{text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;line-height:1.5}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ================================================== two-column masthead */
.sheet{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);align-items:start}
.rail{border-right:1px solid var(--rule);min-height:100vh}
.rail-in{position:sticky;top:0;padding:1.7rem 1.35rem 2rem 1.6rem;max-height:100vh;overflow:auto}

.wm{margin:0 0 .5rem;font-size:1.6rem;line-height:1.02;font-weight:600;letter-spacing:-.01em}
.wm a{color:var(--ink);display:block}
.wm a:hover{text-decoration:none;color:var(--acc)}
.wm em{display:block;font-style:normal;color:var(--acc)}
.issue{margin:0 0 1.2rem;color:var(--dim);text-transform:uppercase;letter-spacing:.13em;
  font-size:.64rem;line-height:1.6;font-variant-numeric:tabular-nums}
.rail-rule{border:0;border-top:1px solid var(--rule2);margin:0 0 1rem}

.navt{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.navbtn{display:none}
.rail-nav ul{list-style:none;margin:0;padding:0}
.rail-nav li{margin:0 0 .1rem}
.rail-nav a{display:block;padding:.24rem 0;color:var(--ink2);font-size:.95rem;
  border-bottom:1px solid transparent}
.rail-nav a:hover{color:var(--acc);text-decoration:none}
.rail-nav a.cur{color:var(--acc);font-weight:600}
.rail-nav a.cur::before{content:"\2014\00a0";color:var(--rule2)}
.rail-note{margin:1.35rem 0 0;padding-top:.9rem;border-top:1px solid var(--rule);
  color:var(--dim);font-size:.72rem;line-height:1.55}
.rail-note a{color:var(--dim);text-decoration:underline}

/* ================================================== reading column */
.col{min-width:0;padding:2.4rem clamp(1.15rem,3.2vw,3rem) 0}
.col>main{max-width:calc(var(--measure) + var(--note) + var(--gut))}
.wide{max-width:calc(var(--measure) + var(--note) + var(--gut))}
.measure{max-width:var(--measure)}

.crumb{margin:0 0 1.6rem;color:var(--dim);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em}
.crumb a{color:var(--dim)}
.crumb span{padding:0 .45rem;color:var(--rule2)}

.kicker{margin:0 0 .55rem;color:var(--acc);text-transform:uppercase;letter-spacing:.15em;font-size:.68rem}
h1{font-size:clamp(2rem,4.3vw,3.05rem);letter-spacing:-.015em;margin:0 0 .7rem}
.lede{font-size:1.14rem;line-height:1.55;color:var(--ink2);margin:0 0 1.5rem;max-width:60ch}
.byline{margin:0;color:var(--dim);font-size:.74rem;text-transform:uppercase;letter-spacing:.11em;
  font-variant-numeric:tabular-nums}
.byline b{font-weight:600;color:var(--ink2)}
.head{padding-bottom:1.4rem;border-bottom:2px solid var(--ink);margin-bottom:1.9rem}

/* --- journal front matter (home) */
.front{border-bottom:2px solid var(--ink);padding-bottom:1.5rem;margin-bottom:.4rem}
.front h1{font-size:clamp(2.4rem,6vw,4.2rem);letter-spacing:-.02em;margin:0 0 .35rem}
.front .strap{margin:0 0 1rem;color:var(--acc);font-size:1rem;font-style:italic}
.front .stmt{max-width:56ch;color:var(--ink2);font-size:1.06rem;margin:0}
.front .issueline{margin:0 0 1.1rem;color:var(--dim);text-transform:uppercase;letter-spacing:.16em;
  font-size:.68rem;font-variant-numeric:tabular-nums}

/* --- section label with hairline */
.slug{display:flex;align-items:baseline;gap:.9rem;margin:2.6rem 0 .2rem;
  color:var(--ink2);text-transform:uppercase;letter-spacing:.16em;font-size:.7rem}
.slug .r{flex:1;border-top:1px solid var(--rule2);align-self:center;min-width:1.5rem}
.slug a{color:var(--dim);letter-spacing:.1em;white-space:nowrap}
.slug a:hover{color:var(--acc)}

/* --- the contents list */
.toc{list-style:none;margin:0;padding:0}
.toc>li{border-top:1px solid var(--rule);padding:1.05rem 0}
.toc>li:first-child{border-top:1px solid var(--ink)}
.toc>li:last-child{border-bottom:1px solid var(--rule)}
.entry{display:grid;grid-template-columns:2.9rem minmax(0,1fr) 6.2rem;column-gap:1rem;align-items:baseline}
.entry .no{color:var(--acc);font-size:.9rem;font-variant-numeric:tabular-nums lining-nums;padding-top:.18rem}
.entry .rt{text-align:right;color:var(--dim);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.1em;font-variant-numeric:tabular-nums;white-space:nowrap}
.entry h3{font-size:1.3rem;font-weight:600;letter-spacing:-.008em;margin:0 0 .28rem;line-height:1.22}
.entry h3 a{color:var(--ink)}
.entry h3 a:hover{color:var(--acc);text-decoration:none}
.entry .auth{margin:0 0 .3rem;color:var(--dim);font-size:.69rem;text-transform:uppercase;letter-spacing:.11em}
.entry .abs{margin:0;color:var(--ink2);font-size:.97rem;line-height:1.55;max-width:58ch}
.toc .plain{grid-column:2/4}

/* --- departments line */
.depts{margin:1.4rem 0 0;color:var(--dim);font-size:.8rem}
.depts a{color:var(--ink2)}
.depts span{padding:0 .5rem;color:var(--rule2)}

/* ================================================== essay setting */
.piece{max-width:var(--measure);font-size:1.09rem;line-height:1.72}
.piece p{margin:0 0 1.15em}
.piece h2{font-size:1.28rem;margin:2.3rem 0 .85rem;letter-spacing:-.005em;
  display:flex;gap:.7rem;align-items:baseline}
.piece h2 .n{color:var(--acc);font-size:.82rem;font-variant-numeric:tabular-nums lining-nums;
  flex:0 0 auto;padding-top:.12rem}
.piece h2 + p{margin-top:0}
.opener::first-letter{
  float:left;font-size:3.5em;line-height:.8;padding:.06em .09em 0 0;color:var(--acc);
}
.opener{font-variant-caps:normal}
.opener .lead-sc{font-variant-caps:all-small-caps;letter-spacing:.05em}

.abstract{border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:.9rem 0 1rem;margin:0 0 2rem;max-width:var(--measure)}
.abstract .h{margin:0 0 .45rem;color:var(--acc);text-transform:uppercase;letter-spacing:.16em;font-size:.66rem}
.abstract p{margin:0 0 .5em;font-size:.98rem;line-height:1.58;color:var(--ink2)}
.abstract p:last-child{margin-bottom:0}

/* margin notes: inline on narrow screens, in the right margin when there is room */
.mnote{
  margin:0 0 1.3rem;padding:.55rem 0 0;border-top:1px solid var(--rule2);
  font-size:.84rem;line-height:1.5;color:var(--dim);max-width:34rem;
}
.mnote .lbl{display:block;color:var(--acc);text-transform:uppercase;letter-spacing:.13em;
  font-size:.6rem;margin-bottom:.25rem}
.mnote p{margin:0 0 .5em;font-size:.84rem;line-height:1.5}
.mnote p:last-child{margin-bottom:0}

@media (min-width:1200px){
  .piece{max-width:calc(var(--measure) + var(--note) + var(--gut));
    padding-right:calc(var(--note) + var(--gut))}
  .mnote{float:right;clear:right;width:var(--note);
    margin-right:calc(-1 * (var(--note) + var(--gut)));margin-bottom:1.6rem;margin-top:.35rem}
}

.ednote{border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule2);
  padding:.9rem 0;margin:2.2rem 0 0;font-size:.93rem;color:var(--ink2);max-width:var(--measure)}
.ednote .h{margin:0 0 .4rem;color:var(--acc);text-transform:uppercase;letter-spacing:.15em;font-size:.64rem}
.ednote p{margin:0 0 .5em}
.ednote p:last-child{margin:0}

.refs{max-width:var(--measure);margin:1.1rem 0 0;padding:0 0 0 1.65rem;
  font-size:.88rem;line-height:1.5;color:var(--ink2)}
.refs li{margin:0 0 .6rem;padding-left:.25rem}
.refs li::marker{color:var(--acc);font-variant-numeric:tabular-nums}

.endmatter{max-width:var(--measure);margin:2.4rem 0 0;padding-top:1rem;border-top:1px solid var(--rule)}
.filed{margin:0;color:var(--dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.11em}
.filed a{color:var(--acc)}

/* ================================================== annotated bibliography */
.biblio{list-style:none;margin:0;padding:0}
.biblio>li{border-top:1px solid var(--rule);padding:1.15rem 0;max-width:calc(var(--measure) + 4rem)}
.biblio>li:first-child{border-top:1px solid var(--ink)}
.biblio>li:last-child{border-bottom:1px solid var(--rule)}
.biblio .bh{display:grid;grid-template-columns:2.9rem minmax(0,1fr);column-gap:1rem;align-items:baseline}
.biblio .no{color:var(--acc);font-size:.9rem;font-variant-numeric:tabular-nums lining-nums}
.biblio h3{font-size:1.22rem;margin:0 0 .25rem;line-height:1.24}
.biblio h3 a{color:var(--ink)}
.biblio h3 a:hover{color:var(--acc);text-decoration:none}
.biblio .auth{margin:0 0 .5rem;color:var(--dim);font-size:.69rem;text-transform:uppercase;letter-spacing:.11em}
.biblio .annot{margin:0;font-size:.98rem;line-height:1.6;color:var(--ink2)}
.biblio .annot + .annot{margin-top:.55em}

/* ================================================== prose blocks & lists */
.prose{max-width:var(--measure);font-size:1.06rem;line-height:1.68}
.prose h2{font-size:1.24rem;margin:2.1rem 0 .75rem}
.prose h2:first-child{margin-top:0}

.commit{list-style:none;margin:1rem 0 0;padding:0;max-width:var(--measure)}
.commit li{border-top:1px solid var(--rule);padding:.6rem 0 .6rem 1.6rem;position:relative;font-size:.98rem}
.commit li:last-child{border-bottom:1px solid var(--rule)}
.commit li::before{content:"\2014";position:absolute;left:0;color:var(--acc)}

figure.plate{margin:1.8rem 0;max-width:var(--measure)}
figure.plate img{width:100%;filter:grayscale(.35) contrast(.96)}
figure.plate figcaption{margin-top:.5rem;color:var(--dim);font-size:.78rem;line-height:1.5;
  padding-top:.4rem;border-top:1px solid var(--rule)}

/* ================================================== forms */
.formwrap{max-width:calc(var(--measure) + 4rem);margin:0}
.demo-flag{border:1px solid var(--rule2);padding:.7rem .85rem;margin:0 0 1.2rem;
  font-size:.82rem;line-height:1.5;color:var(--ink2);background:var(--paper2)}
.demo-flag strong{color:var(--acc)}
form label{display:block;margin:0 0 .9rem;color:var(--dim);text-transform:uppercase;
  letter-spacing:.11em;font-size:.66rem}
form input,form select,form textarea{
  display:block;width:100%;max-width:34rem;margin-top:.35rem;
  font:400 1rem/1.5 var(--serif);color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule2);
  border-radius:0;padding:.4rem .1rem;text-transform:none;letter-spacing:normal;
}
form textarea{border:1px solid var(--rule2);padding:.5rem .6rem}
form select{border:1px solid var(--rule2);padding:.45rem .5rem}
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--acc);outline-offset:2px}
form button{
  font:600 .72rem/1 var(--serif);text-transform:uppercase;letter-spacing:.16em;
  background:var(--ink);color:var(--paper);border:0;border-radius:0;
  padding:.75rem 1.5rem;cursor:pointer;
}
form button:hover{background:var(--acc)}
.smallnote{margin:.7rem 0 0;color:var(--dim);font-size:.75rem}

.side-notes{max-width:var(--measure);margin:2.2rem 0 0}
.side-notes h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--acc);
  margin:1.3rem 0 .35rem}
.side-notes h4:first-child{margin-top:0}
.side-notes p{margin:0 0 .5rem;font-size:.95rem;color:var(--ink2)}

.subscribe{max-width:calc(var(--measure) + 4rem);margin:3rem 0 0;padding:1.4rem 0 0;
  border-top:2px solid var(--ink)}
.subscribe h2{font-size:1.2rem;margin:0 0 .5rem}
.subscribe p{max-width:56ch;font-size:.98rem;color:var(--ink2)}

/* ================================================== colophon */
.colophon{margin:4rem 0 0;border-top:1px solid var(--ink);padding:1.4rem 0 3rem;
  max-width:calc(var(--measure) + var(--note) + var(--gut))}
.colophon .cl-h{margin:0 0 .5rem;color:var(--acc);text-transform:uppercase;letter-spacing:.16em;font-size:.64rem}
.colophon p{color:var(--dim);font-size:.85rem;line-height:1.6;max-width:70ch}
.colophon .links{margin:1rem 0 .4rem;font-size:.78rem}
.colophon .links a{color:var(--ink2)}
.colophon .links span{padding:0 .45rem;color:var(--rule2)}
.colophon .legal{margin:0;font-size:.72rem}

/* ================================================== narrow */
@media (max-width:899px){
  .sheet{display:block}
  .rail{border-right:0;border-bottom:1px solid var(--ink);min-height:0}
  .rail-in{position:static;max-height:none;overflow:visible;
    padding:1.15rem clamp(1.15rem,4vw,2rem) 1.1rem}
  .wm{font-size:1.35rem;margin-bottom:.3rem}
  .wm em{display:inline;margin-left:.3em}
  .issue{margin-bottom:.75rem}
  .navbtn{display:inline-block;border:1px solid var(--rule2);padding:.42rem .85rem;
    text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;cursor:pointer;color:var(--ink2)}
  .navbtn:hover{color:var(--acc);border-color:var(--acc)}
  .rail-nav{display:none;margin-top:.9rem;border-top:1px solid var(--rule)}
  .navt:checked ~ .rail-nav{display:block}
  .rail-nav a{border-bottom:1px solid var(--rule);padding:.55rem 0}
  .rail-note{display:none}
  .col{padding:1.9rem clamp(1.15rem,4vw,2rem) 0}
  .entry{grid-template-columns:2.2rem minmax(0,1fr);row-gap:.15rem}
  .entry .rt{grid-column:2;text-align:left;margin-top:.35rem}
  .toc .plain{grid-column:2}
}
@media (max-width:520px){
  body{font-size:1.02rem}
  .entry h3{font-size:1.15rem}
  .opener::first-letter{font-size:3em}
}