:root{color-scheme:light dark;--bg:#fff;--fg:#000;--rule:#ccc}
@media (prefers-color-scheme:dark){:root{--bg:#000;--fg:#fff;--rule:#444}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding:0 1.25rem;background:var(--bg);color:var(--fg);font:1.1875rem/1.65 Cardo,Georgia,serif}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
main{max-width:34rem;margin:0 auto;padding:12vh 0 8rem}
h1,h2{font-weight:400}

/* the texts, behind three lines in the top right corner */
.menu{position:fixed;top:0;right:0;z-index:1;background:var(--bg);font-size:.9375rem}
.menu[open]{border:solid var(--rule);border-width:0 0 1px 1px}
.menu summary{display:block;list-style:none;cursor:pointer;padding:1rem 1.25rem}
.menu summary::-webkit-details-marker{display:none}
.menu svg{display:block;margin-left:auto}
.menu nav{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;padding:0 1.25rem 1.25rem 2rem}
.menu a{text-decoration:none}
.menu a:hover{text-decoration:underline}
.menu a[lang=el]{letter-spacing:.1em}
.menu a[aria-current]{opacity:.45}

/* one pillar either side of the column */
@media (min-width:56rem){
  body::before,body::after{content:"";position:fixed;top:50%;width:3.75rem;height:min(72vh,40rem);transform:translateY(-50%);
    background:currentColor;opacity:.35;pointer-events:none;
    -webkit-mask:url(/pillar.svg) center/contain no-repeat;mask:url(/pillar.svg) center/contain no-repeat}
  body::before{left:calc(50% - 26rem)}
  body::after{right:calc(50% - 26rem)}
}
@media (min-width:56rem) and (prefers-reduced-motion:no-preference){
  body::before,body::after{animation:breathe 16s ease-in-out infinite}
  @keyframes breathe{50%{opacity:.15}}
}

/* martyria */
.text h1{text-align:center;font-size:clamp(2.25rem,9vw,4rem);line-height:1;letter-spacing:.15em;padding-left:.15em;margin:0 0 6rem}
.greek{letter-spacing:.06em;line-height:1.8;text-align:justify;overflow-wrap:anywhere;word-break:break-all;hyphens:none;margin:0 0 1.25em}
.divider{text-align:center;margin:3rem 0}
.colophon{margin-top:6rem;text-align:center}
.colophon p{letter-spacing:.15em;margin:0}
.colophon .greek{text-align:center;letter-spacing:.06em;margin-top:3rem}

/* essay */
article h1{font-size:2.25rem;line-height:1.15;margin:0 0 1.5rem}
article h2{font-size:1.375rem;line-height:1.3;margin:4rem 0 1rem}
article p{margin:0 0 1.1em;hyphens:auto;overflow-wrap:break-word}
article a{text-decoration-color:var(--rule)}
article a:hover{text-decoration-color:currentColor}
article ul,article ol{margin:0 0 1.1em;padding-left:1.25em}
article li{margin:0 0 .4em}
.contents{list-style:none;padding:0;line-height:1.45}
.contents a{text-decoration:none}
.contents a:hover{text-decoration:underline}
.wide{width:min(42rem,calc(100vw - 2.5rem));margin:1.5rem 0 2rem 50%;transform:translateX(-50%);overflow-x:auto}
.wide table{min-width:40rem;margin:0}
article table{width:100%;border-collapse:collapse;margin:1.5rem 0 2rem;font-size:.9375rem;line-height:1.45}
article th,article td{text-align:left;vertical-align:top;padding:.5rem .75rem .5rem 0;border-bottom:1px solid var(--rule)}
article th{font-weight:400;font-style:italic}
.note{font-size:.9375rem;overflow-wrap:anywhere}