:root{
    --paper:#EFE9DB;
    --ink:#1E1A14;
    --ink-soft:#4E4636;
    --quiet:#706751;
    --hair:#CFC6B2;
    --rubric:#8E2B20;
    --measure:33rem;
    --rail:7rem;
    --edge:1.5rem;
  }

  @media (prefers-color-scheme:dark){
    :root{
      --paper:#16150F;
      --ink:#E4DECB;
      --ink-soft:#B0A891;
      --quiet:#AAA18C;
      --hair:#33301F;
      --rubric:#C2614C;
    }
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;overflow-x:clip}

  body{
    margin:0;
    overflow-x:clip;
    background:var(--paper);
    color:var(--ink);
    font-family:"EB Garamond",Garamond,Georgia,"Times New Roman",serif;
    font-optical-sizing:auto;
    font-size:1.26rem;
    line-height:1.68;
    font-variant-numeric:oldstyle-nums;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  ::selection{background:var(--ink);color:var(--paper)}

  .shell{
    max-width:calc(var(--rail) + var(--measure) + 6rem);
    margin:0 auto;
    padding:2.25rem var(--edge) 8rem;
  }

  a:focus-visible,button:focus-visible{outline:1.5px solid var(--rubric);outline-offset:4px;border-radius:1px}

  /* ---------- top bar ---------- */

  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
  }

  .back{
    display:inline-block;
    font-size:.85rem;
    letter-spacing:.06em;
    color:var(--quiet);
    text-decoration:none;
    border-bottom:1px solid transparent;
  }
  .back:hover,.back:focus-visible{color:var(--ink);border-bottom-color:var(--hair)}

  /* Three languages, held within a small manuscript marginal mark; the star travels the orbit to the one chosen. */
  .lang-toggle{appearance:none;position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;width:120px;height:60px;padding:0 12px;border:0;background:none;color:var(--quiet);font:inherit;cursor:pointer}
  .language-orbit{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--hair);stroke-width:.8;overflow:visible;transition:stroke .4s}
  .language-star{fill:var(--rubric);stroke:var(--rubric);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  html[lang=en] .language-star{transform:translate(46px,-19px)}
  html[lang=de] .language-star{transform:translate(92px,0)}
  .lang-option{font-size:1rem;font-style:italic;line-height:1;text-align:center;transition:color .4s,transform .4s;opacity:.65}
  html[lang=tr] .lang-tr,html[lang=en] .lang-en,html[lang=de] .lang-de{color:var(--ink);transform:translateY(-2px);opacity:1}
  .lang-toggle:hover .language-orbit{stroke:var(--quiet)}

  /* ---------- opening ---------- */

  .masthead{
    min-height:74vh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding-bottom:clamp(3rem,9vh,6rem);
  }

  .masthead-top{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1.5rem 2rem;
  }

  .masthead h1{
    margin:0;
    font-family:"Cormorant Garamond","EB Garamond",Garamond,Georgia,serif;
    font-style:italic;
    font-weight:300;
    font-size:clamp(3.4rem,12.5vw,8.25rem);
    line-height:.9;
    letter-spacing:-.015em;
  }

  .gloss{
    margin:0 0 .5rem;
    max-width:15rem;
    font-style:italic;
    font-size:.95rem;
    line-height:1.5;
    color:var(--ink-soft);
    text-align:right;
  }

  .masthead p.lede{
    margin:1.9rem 0 0;
    max-width:24rem;
    color:var(--ink-soft);
    font-size:1.02rem;
    font-weight:300;
    line-height:1.6;
  }

  /* ---------- the ruled margin ---------- */

  .stream{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:clamp(4.5rem,9vh,7rem);
    min-height:7rem;
  }

  .rule{
    position:absolute;
    left:-3px;
    top:.4rem;
    bottom:0;
    width:12px;
    color:var(--hair);
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 52%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 52%,transparent 100%);
    pointer-events:none;
  }

  /* ---------- entries ---------- */

  .entry{
    display:grid;
    grid-template-columns:var(--rail) minmax(0,var(--measure));
    column-gap:2.75rem;
    align-items:start;
    scroll-margin-top:3rem;
  }

  .meta{
    padding:.62rem 0 .62rem 1.15rem;
    font-size:.82rem;
    line-height:1.55;
    color:var(--quiet);
    font-variant-numeric:oldstyle-nums proportional-nums;
    background:var(--paper);
  }
  .meta a{color:var(--rubric);text-decoration:none;opacity:.85}
  .meta a:hover,.meta a:focus-visible,button:focus-visible{opacity:1}
  .meta .date{display:block;margin-top:.1rem;opacity:.8;color:var(--quiet)}

  .body > *:first-child{margin-top:0}
  .body > *:last-child{margin-bottom:0}
  .body p{margin:0 0 1.15rem}

  .entry h2{
    margin:0 0 1.05rem;
    font-family:"Cormorant Garamond","EB Garamond",Garamond,Georgia,serif;
    font-weight:500;
    font-size:1.95rem;
    line-height:1.3;
    letter-spacing:-.005em;
  }
  .entry h2 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair)}
  .entry h2 a:hover,.entry h2 a:focus-visible,button:focus-visible{border-bottom-color:var(--ink)}

  /* versal: only where a piece is long enough to open formally */
  .entry.essay .body > p:first-of-type::first-letter{
    float:left;
    color:var(--rubric);
    font-family:"UnifrakturMaguntia","Cormorant Garamond",Garamond,serif;
    font-weight:400;
    font-size:3.05rem;
    line-height:.92;
    padding:.04em .1em 0 0;
  }

  .more{
    color:var(--ink-soft);
    font-style:italic;
    text-decoration:none;
    border-bottom:1px solid var(--hair);
  }
  .more:hover,.more:focus-visible{color:var(--ink);border-bottom-color:var(--ink)}

  .verse{
    margin:0;
    font-style:italic;
    font-weight:300;
    font-size:1.28rem;
    line-height:1.55;
    color:var(--ink-soft);
  }

  /* ---------- sections (Birey / Psikoloji / Seks / Toplum / Felsefe) ---------- */

  .strands{
    margin-top:clamp(6rem,14vh,9rem);
    --sheet:216 194 158;
    --pale:.4;
  }
  .strands ul{
    --w:min(100vw - 3rem,60rem);
    --m:calc((100vw - var(--w)) / 2);
    list-style:none;
    width:var(--w);
    margin:0 0 0 calc((100% - var(--w)) / 2);
    padding:0;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:0 2rem;
    position:relative;
    isolation:isolate;
  }
  /* A landscape plate is a fold-out leaf: it takes two columns. */
  .strands li.wide{grid-column:span 2}
  .strands a{display:block;text-decoration:none}

  /* Behind the plates, a pale strip of the same old paper. It surfaces from the far edge of the
     page grain by grain, runs under the sheets, and dissolves the same way at the other edge. */
  .strands ul::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    left:calc(-1 * var(--m));
    width:100vw;
    height:12rem;
    background:rgb(var(--sheet) / var(--pale));
    -webkit-mask:url(dissolve-l.png) 0 0 / calc(var(--m) + 2rem) 100% no-repeat,linear-gradient(#000,#000) var(--m) 0 / var(--w) 100% no-repeat,url(dissolve-r.png) 100% 0 / calc(var(--m) + 2rem) 100% no-repeat;
    mask:url(dissolve-l.png) 0 0 / calc(var(--m) + 2rem) 100% no-repeat,linear-gradient(#000,#000) var(--m) 0 / var(--w) 100% no-repeat,url(dissolve-r.png) 100% 0 / calc(var(--m) + 2rem) 100% no-repeat;
    pointer-events:none;
  }

  /* Each sheet keeps its own leaf: full paper at its heart, paling towards its edges,
     so between two plates the colour thins into the strip and gathers again. */
  .strands .sheet{
    display:flex;
    align-items:center;
    height:12rem;
    background:rgb(var(--sheet));
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 78%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 78%,transparent 100%);
  }
  .strands .plate{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
  /* A wide drawing keeps its whole width and rests in the middle of its sheet. */
  .strands .wide .plate{
    height:auto;
    max-height:100%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
  }
  .strands .label{
    display:block;
    font-variant:small-caps;
    letter-spacing:.08em;
    margin-top:.7rem;
    font-size:.95rem;
    color:var(--ink-soft);
    border-bottom:1px solid transparent;
    width:fit-content;
    margin-inline:auto;
    transition:color .3s ease,border-color .3s ease;
  }
  .strands a:hover .label,.strands a:focus-visible .label{color:var(--ink);border-bottom-color:var(--hair)}


  /* ---------- foot ---------- */

  .foot{
    margin-top:clamp(6rem,15vh,10rem);
    padding-left:calc(var(--rail) + 2.75rem);
    font-size:.85rem;
    color:var(--quiet);
  }
  .foot a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair)}
  .foot a:hover,.foot a:focus-visible,button:focus-visible{color:var(--ink)}

  /* ---------- narrow ---------- */

  @media (max-width:48rem){
    :root{--rail:0;--edge:1.35rem}
    body{font-size:1.18rem}
    .masthead{min-height:62vh}
    .masthead-top{flex-direction:column;align-items:flex-start}
    .gloss{text-align:left;max-width:none}
    .rule{display:none}
    .entry{grid-template-columns:minmax(0,1fr);row-gap:.6rem}
    .meta{padding:0;background:none}
    .meta .date{display:inline;margin-left:.8rem}
    .entry.essay .body > p:first-of-type::first-letter{font-size:2.7rem}
    .foot{padding-left:0}
    /* Rows of two; each row lays its own strip from edge to edge.
       With the present order the rows start at the 1st, 3rd and 5th leaf. */
    .strands ul{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem 1.25rem;width:auto;margin:0}
    .strands ul::before{content:none}
    .strands li{position:relative;isolation:isolate;flex:1 1 38%}
    .strands li.wide{flex:1.5 1 54%}
    .strands li:nth-child(odd){--m:var(--edge);--w:calc(100vw - 2 * var(--edge))}
    .strands li:nth-child(odd)::before{content:"";position:absolute;z-index:-1;top:0;left:calc(-1 * var(--m));width:100vw;height:12rem;background:rgb(var(--sheet) / var(--pale));-webkit-mask:url(dissolve-l.png) 0 0 / calc(var(--m) + 1rem) 100% no-repeat,linear-gradient(#000,#000) var(--m) 0 / var(--w) 100% no-repeat,url(dissolve-r.png) 100% 0 / calc(var(--m) + 1rem) 100% no-repeat;mask:url(dissolve-l.png) 0 0 / calc(var(--m) + 1rem) 100% no-repeat,linear-gradient(#000,#000) var(--m) 0 / var(--w) 100% no-repeat,url(dissolve-r.png) 100% 0 / calc(var(--m) + 1rem) 100% no-repeat;pointer-events:none}
    /* A leaf left alone closes the list at the centre, with wide margins to dissolve into. */
    .strands li:last-child:nth-child(odd){flex:0 0 calc((100vw - 2 * var(--edge)) * .42);--w:calc((100vw - 2 * var(--edge)) * .42);--m:calc((100vw - var(--w)) / 2)}
  }

  /* ---------- one moment ---------- */

  .fade{opacity:0;animation:rise 1.1s cubic-bezier(.2,.6,.2,1) .15s forwards}
  @keyframes rise{from{opacity:0;transform:translateY(.4rem)}to{opacity:1;transform:none}}

  @media (prefers-reduced-motion:reduce){
    .fade{animation:none;opacity:1;transform:none}
  }

  @media print{
    body{background:#fff;color:#000}
    .back,.foot,.rule,.lang-toggle{display:none}
    .masthead{min-height:0;padding-bottom:3rem}
  }

  /* Navigation, empty collections, and language behavior. */
  [hidden]{display:none!important}
  .skip-link{position:absolute;left:1rem;top:-6rem;padding:.5rem 1rem;background:var(--ink);color:var(--paper);z-index:10}
  .skip-link:focus{top:1rem}
  .back{min-height:44px;display:inline-flex;align-items:center}
  .masthead{min-height:clamp(16rem,44svh,30rem)}
  .stream.is-empty{display:none}
  .strands{margin-top:clamp(2rem,5vh,4rem)}
  .strands a[aria-current=page]{border-top-color:var(--rubric)}
  .strands a[aria-current=page] .label{color:var(--rubric)}
  .category-masthead{min-height:clamp(12rem,30svh,22rem);padding-bottom:3rem}
  .category-masthead h1{font-size:clamp(2.7rem,9vw,5rem);overflow-wrap:anywhere}
  .category-parent{margin:0 0 1.5rem;font-size:1rem;font-style:italic}
  .category-parent a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--hair)}
  .empty-collection{padding:1.5rem 0 2.5rem;border-top:1px solid var(--hair);color:var(--ink-soft)}
  .empty-collection p{margin:0;font-style:italic}
  .foot{margin-top:clamp(4rem,9vh,7rem)}
  @media(max-width:48rem){.shell{padding-top:1.25rem;padding-bottom:3rem}.strands ul{gap:1.75rem 1.25rem}}

  .stream.is-empty:has(.entry){display:flex}
  .entry.essay .body > [data-tr] > p:first-of-type::first-letter,
  .entry.essay .body > [data-en] > p:first-of-type::first-letter{float:left;color:var(--rubric);font-family:"UnifrakturMaguntia","Cormorant Garamond",Garamond,serif;font-weight:400;font-size:3.05rem;line-height:.92;padding:.04em .1em 0 0}

  /* Quiet chapter opening: the other plates recede before the page turns. */
  .strands li{transition:opacity .55s ease,transform .7s ease,filter .7s ease}
  body.is-departing .strands li:not(.chosen-chapter){opacity:0;transform:translateY(9px);filter:blur(3px)}
  body.is-departing .masthead,body.is-departing .foot{opacity:0;transition:opacity .55s ease}
  body.is-departing .chosen-chapter .plate{opacity:0;transition:opacity .6s ease}
  body.is-departing .chosen-chapter .label{color:var(--rubric);transition:color .5s}
  .chapter-page .category-masthead{position:relative;min-height:clamp(18rem,43svh,28rem);padding-top:4rem}
  .chapter-flourish{display:block;color:var(--rubric);font-size:2rem;margin-bottom:1.2rem;line-height:1}
  .chapter-page .category-masthead h1{animation:ink-arrives 1.2s ease both}
  .chapter-page .chapter-flourish{animation:ink-arrives 1.5s ease both}
  .chapter-page #writing{animation:folio-opens 1.5s cubic-bezier(.2,.7,.2,1) both;transform-origin:top left;min-height:12rem}
  .folio-return{display:inline-flex;align-items:center;gap:.35rem;min-height:48px;text-decoration:none;color:var(--quiet);font-size:.8rem;font-style:italic}
  .folio-return svg{width:55px;height:42px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s,color .5s}
  .folio-return:hover,.folio-return:focus-visible{color:var(--rubric)}
  .folio-return:hover svg{transform:translateX(-4px)}
  .chapter-page.is-returning .category-masthead,.chapter-page.is-returning #writing{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s}
  @keyframes ink-arrives{from{opacity:0;transform:translateY(12px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
  @keyframes folio-opens{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
  @media(prefers-reduced-motion:reduce){
    .chapter-page .category-masthead h1,.chapter-page .chapter-flourish,.chapter-page #writing{animation:none}
    .strands li,.language-star,.lang-option,.language-orbit,.folio-return svg{transition:none}
  }

  /* The opening remains a title with a marginal note in either language. */
  .masthead-top{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);align-items:end;gap:clamp(.75rem,3vw,2rem)}
  .masthead-top h1{font-size:clamp(2.65rem,10vw,6.3rem);white-space:nowrap}
  .masthead-top .gloss{max-width:none;margin:0 0 .2rem;text-align:left;font-size:clamp(.75rem,1.6vw,.95rem);line-height:1.45}

  /* Faint manuscript ruling, impressed into the paper rather than boxed. */
  .chapter-page #writing{
    position:relative;
    border:0;
    padding:clamp(2rem,5vw,3.5rem) clamp(1.5rem,4vw,3rem);
    min-height:17rem;
    background:none;
  }
  .chapter-page #writing::before,.chapter-page #writing::after{
    content:"";position:absolute;pointer-events:none;
    width:clamp(4rem,16vw,8rem);height:4rem;
    opacity:.55;
    background:linear-gradient(to right,var(--hair),transparent) left top/100% 1px no-repeat,
      linear-gradient(to bottom,var(--hair),transparent) left top/1px 100% no-repeat;
  }
  .chapter-page #writing::before{top:0;left:0}
  .chapter-page #writing::after{bottom:0;right:0;transform:rotate(180deg)}
  .chapter-page .empty-collection p{max-width:33rem}
  @media(max-width:380px){
    .masthead-top{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:.65rem}
    .masthead-top h1{font-size:2.45rem}
    .masthead-top .gloss{font-size:.72rem}
  }

  /* ---------- entering a leaf ----------
     The chosen plate travels from the strip to the head of its chapter, and its name becomes
     the title; the rest of the page quietly gives way. Browsers without cross-document view
     transitions keep the older departure above. */
  @view-transition{navigation:auto}
  @media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

  .chapter-page .category-masthead{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    align-content:end;
    column-gap:clamp(1.5rem,5vw,3rem);
    row-gap:2rem;
  }
  .chapter-page .category-masthead h1{grid-column:1;grid-row:1}
  /* On its chapter the plate stands as one leaf of the strip: a detail where the drawing is nude,
     the drawing brought closer elsewhere; pale paper at either side scattering into the page near by. */
  .leaf{
    --sheet:216 194 158;
    grid-column:2;
    grid-row:1;
    position:relative;
    isolation:isolate;
    margin:0;
    height:clamp(11rem,26svh,14rem);
    aspect-ratio:var(--ar);
  }
  .leaf::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0 -4.5rem;
    background:rgb(var(--sheet) / .4);
    -webkit-mask:url(dissolve-near-l.png) 0 0 / 6rem 100% no-repeat,linear-gradient(#000,#000) 6rem 0 / calc(100% - 12rem) 100% no-repeat,url(dissolve-near-r.png) 100% 0 / 6rem 100% no-repeat;
    mask:url(dissolve-near-l.png) 0 0 / 6rem 100% no-repeat,linear-gradient(#000,#000) 6rem 0 / calc(100% - 12rem) 100% no-repeat,url(dissolve-near-r.png) 100% 0 / 6rem 100% no-repeat;
    pointer-events:none;
  }
  .leaf-sheet{
    display:block;
    height:100%;
    background:rgb(var(--sheet));
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
  }
  .leaf img{display:block;width:100%;height:100%;object-fit:cover}
  /* A wide leaf is too broad to stand beside the title: it rises above it. */
  .leaf.wide{grid-column:1 / -1;justify-self:end;height:clamp(8.5rem,19svh,11rem);margin-right:4.5rem}
  .leaf.wide + h1{grid-row:2}
  html.by-leaf .chapter-page .category-masthead h1{animation:none}

  ::view-transition-group(*){animation-duration:.85s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  ::view-transition-old(root){animation:leaf-page-out .4s ease both}
  ::view-transition-new(root){animation:leaf-page-in .6s ease .3s both}
  @keyframes leaf-page-out{to{opacity:0;filter:blur(3px)}}
  @keyframes leaf-page-in{from{opacity:0}}

  @media (max-width:48rem){
    .chapter-page .category-masthead{grid-template-columns:minmax(0,1fr)}
    .leaf,.leaf.wide{grid-column:1;grid-row:1;justify-self:center;margin-right:0}
    .chapter-page .category-masthead h1,.leaf.wide + h1{grid-row:2}
    .leaf{height:clamp(11rem,28svh,13rem)}
    .leaf.wide{height:auto;width:calc(100% - 6rem)}
  }