@font-face{font-family:Literata;font-style:normal;font-weight:300;font-display:swap;
  src:url(/assets/fonts/literata-latin-300-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Literata;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/literata-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Literata;font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/literata-latin-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:Vazirmatn;font-style:normal;font-weight:300;font-display:swap;
  src:url(/assets/fonts/vazirmatn-arabic-300-normal.woff2) format('woff2')}
@font-face{font-family:Vazirmatn;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/vazirmatn-arabic-400-normal.woff2) format('woff2')}
@font-face{font-family:Vazirmatn;font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/vazirmatn-arabic-600-normal.woff2) format('woff2')}

:root{
  --paper:#F2EDE1;
  --paper-deep:#E7DFCE;
  --ink:#201D18;
  --ink-soft:#615949;
  --rule:#D3C9B4;
  --barn:#A8322A;
  --poesi:#2A5560;
  --latin:"Literata",Georgia,"Times New Roman",serif;
  --persian:"Vazirmatn","Noto Naskh Arabic",Tahoma,sans-serif;
  --measure:34rem;
  color-scheme:light only;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  font-family:var(--latin);font-weight:300;font-size:clamp(15px,1.5vw,17px);
  line-height:1.65;
}
html[lang="fa"] body{font-family:var(--persian);line-height:1.95}
html[lang="fa"] .lat{font-family:var(--latin)}
.fa{font-family:var(--persian)}

a{color:inherit}
:focus-visible{outline:2px solid var(--barn);outline-offset:3px}
.wrap{max-width:60rem;margin:0 auto;padding:0 1.5rem}

/* header */
header{border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;padding:1.4rem 0;flex-wrap:wrap}
.mark{text-decoration:none;display:flex;align-items:baseline;gap:.75rem}
.mark img{height:1.7rem;width:auto;display:block;align-self:center}
.mark b{font-family:var(--persian);font-weight:400;font-size:1.15rem;color:var(--ink-soft)}
/* on the Persian page the name reads first, so the Latin wordmark sits to its left */
html[lang="fa"] .mark{flex-direction:row-reverse}
.mark b{font-family:var(--latin);font-weight:600;font-size:1.45rem;letter-spacing:-.01em}
html[lang="fa"] .mark b{font-family:var(--persian)}
nav{display:flex;gap:.2rem;align-items:center;font-size:.86rem}
nav a,nav span[aria-current]{padding:.35rem .6rem;text-decoration:none;color:var(--ink-soft)}
nav span[aria-current]{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
nav a:hover{color:var(--ink)}
nav .sep{color:var(--rule);padding:0}

/* cover band */
.band{background:var(--paper-deep);border-bottom:1px solid var(--rule)}
.shelf{
  display:flex;align-items:flex-end;justify-content:center;gap:1.1rem;
  padding:2.75rem 1.5rem 0;overflow-x:auto;scrollbar-width:none;
}
.shelf::-webkit-scrollbar{display:none}
.shelf img{
  height:14rem;width:auto;display:block;flex:0 0 auto;
  box-shadow:0 1px 3px rgba(32,29,24,.18), 0 10px 22px rgba(32,29,24,.16);
}

/* hero */
.hero{padding:5rem 0 4.5rem}
.gutter{display:grid;grid-template-columns:1fr 1px 1fr;align-items:center}
.gutter .line{background:var(--rule);align-self:stretch}
.gutter .side{padding:.5rem 2rem}
.gutter .lft{text-align:end}
.gutter .rgt{text-align:start}
.gutter p{margin:0;font-size:clamp(1.35rem,3.4vw,2rem);line-height:1.35;font-weight:400}
html[lang="fa"] .gutter p{line-height:1.75}
.standfirst{margin:3rem auto 0;max-width:var(--measure);color:var(--ink-soft);font-size:1rem;text-align:center}
html[lang="fa"] .standfirst{font-size:.95rem}

/* sections */
section{padding:4.5rem 0}
.poesi{background:#EBE5D3;box-shadow:inset 0 1px 0 var(--rule),inset 0 -1px 0 var(--rule)}
.about{background:var(--paper-deep);box-shadow:inset 0 1px 0 var(--rule)}
h2{font-family:var(--latin);font-weight:600;font-size:clamp(1.5rem,3.6vw,2.15rem);
   margin:0 0 .5rem;letter-spacing:-.015em;line-height:1.15}
html[lang="fa"] h2{font-family:var(--persian);letter-spacing:0}
.strand-note{margin:0 0 3rem;color:var(--ink-soft);max-width:var(--measure);font-size:1rem}
.barn h2{color:var(--barn)}
.poesi h2{color:var(--poesi)}

/* books */
.book{display:grid;grid-template-columns:10rem 1fr;gap:2.5rem;
      padding:2.75rem 0;border-top:1px solid var(--rule);align-items:start}
.book:first-of-type{border-top:0;padding-top:.5rem}
.cover img{width:100%;height:auto;display:block;
  box-shadow:0 1px 2px rgba(32,29,24,.22), 0 12px 24px rgba(32,29,24,.15)}
.title{margin:0 0 .3rem;display:flex;flex-direction:column}
.title .sv{font-family:var(--latin);font-weight:600;font-size:1.32rem;line-height:1.3}
.title .fa{font-family:var(--persian);font-size:1.05rem;color:var(--ink-soft);direction:rtl;margin-top:.15rem}
html[lang="fa"] .title .sv{font-weight:400;font-size:1rem;color:var(--ink-soft);order:2}
html[lang="fa"] .title .fa{font-size:1.2rem;color:var(--ink);font-weight:600;order:1;margin-top:0}
.byline{margin:0 0 .9rem;color:var(--ink-soft);font-size:.92rem}
.blurb{margin:0 0 1.1rem;max-width:var(--measure);font-size:.96rem}
.meta{margin:0 0 1.1rem;padding:0;list-style:none;display:flex;flex-wrap:wrap;
      gap:.15rem 1.4rem;font-size:.83rem;color:var(--ink-soft)}
.meta li span{color:var(--ink)}
.buy{display:inline-block;font-size:.88rem;text-decoration:none;
     border-bottom:1px solid currentColor;padding-bottom:1px}
.barn .buy{color:var(--barn)}
.poesi .buy{color:var(--poesi)}
.buy:hover{border-bottom-width:2px}

/* about + document pages */
.about p{max-width:var(--measure);margin:0 0 1.1rem}
.doc h3{font-size:1.05rem;font-weight:600;margin:2rem 0 .3rem}

/* footer */
footer{border-top:1px solid var(--rule);padding:3rem 0 4rem;font-size:.86rem;color:var(--ink-soft);
       background:var(--paper-deep)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2rem}
footer b{display:block;color:var(--ink);font-weight:600;margin-bottom:.4rem;font-size:.86rem}
footer p{margin:0 0 .2rem}
.legal{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--rule);font-size:.8rem}
.legal a{margin-inline-start:.5rem}

@media (max-width:700px){
  .gutter{grid-template-columns:1fr;gap:1.5rem}
  .gutter .line{height:1px;width:4rem;justify-self:center}
  .gutter .side{padding:0;text-align:center}
  .gutter .lft,.gutter .rgt{text-align:center}
  .shelf{gap:.6rem;padding:1.75rem 1rem 0;justify-content:flex-start}
  .shelf img{height:8.5rem}
  .book{grid-template-columns:6.5rem 1fr;gap:1.25rem;padding:2rem 0}
  .hero{padding:3.5rem 0 3rem}
  section{padding:3rem 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}