/*
Theme Name: Denism Quiet Serif
Theme URI: https://denism.com.ua
Author: Denism Editorial
Description: Minimal quiet-luxury serif reading journal — single-column editorial layout for denism.com.ua. Sand/taupe canvas, ink type, muted-plum accent, Newsreader + Inter. Bespoke PBN theme, not a template.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: denism-quiet
*/

/* ==========================================================================
   Denism Quiet Serif — single-column quiet-luxury reading journal
   Deliberately NOT a card grid. One measured column, hairline rules,
   small-caps labels, generous air. dq- namespace throughout.
   ========================================================================== */

:root{
  --paper:#efe9e1;        /* sand / taupe canvas */
  --paper-deep:#e6dfd4;   /* faint recessed panel */
  --ink:#211d1a;          /* near-black ink */
  --ink-soft:#5c5449;     /* muted body / captions */
  --ink-faint:#8a8073;    /* small-caps labels, meta */
  --plum:#5a4a5e;         /* the ONE accent — used sparingly */
  --plum-deep:#453a49;
  --line:#cfc6b8;         /* hairline dividers */
  --line-soft:#dcd4c7;
  --measure:39rem;        /* the reading column */
  --measure-wide:52rem;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --ease:cubic-bezier(.2,.6,.2,1);
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.72;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
}

::selection{background:var(--plum);color:#f7f3ec}

a{color:inherit;text-decoration:none}

img{max-width:100%;height:auto;display:block}

/* --- shared shell --------------------------------------------------------- */
.dq-shell{
  width:100%;
  max-width:var(--measure);
  margin-inline:auto;
  padding-inline:26px;
}
.dq-shell--wide{max-width:var(--measure-wide)}

/* small-caps utility label */
.dq-label{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* hairline rule */
.dq-rule{border:0;border-top:1px solid var(--line);margin:0}

/* ==========================================================================
   Masthead — centered logo lockup (emblem MARK + wordmark), rules round nav.
   No tagline beside the brand.
   ========================================================================== */
.dq-masthead{
  padding:42px 0 0;
  text-align:center;
}
.dq-brand{
  display:inline-flex;
  align-items:center;
  gap:16px;
  line-height:1;
}
.dq-brand-mark{
  display:inline-flex;
  flex:0 0 auto;
}
.dq-brand-mark .dq-emblem{
  display:block;
  width:clamp(38px,2.4rem+1vw,52px);
  height:auto;
}
.dq-brand .dq-wordmark{
  display:block;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.1rem,1.4rem+2.6vw,3.1rem);
  letter-spacing:-.015em;
  color:var(--ink);
}
.dq-brand:hover .dq-wordmark{color:var(--plum-deep)}
.dq-nav{
  margin-top:30px;
  padding:15px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:8px 30px;
  justify-content:center;
}
.dq-nav a{
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.dq-nav a:hover,
.dq-nav a:focus-visible{color:var(--plum);border-bottom-color:var(--plum)}
.dq-nav a:focus-visible{outline:none}

/* ==========================================================================
   Front page
   ========================================================================== */
.dq-front{padding:56px 0 20px}

/* Lede block — the front-page h1, sits alone in the column */
.dq-lede{
  text-align:center;
  padding-bottom:52px;
  margin-bottom:52px;
  border-bottom:1px solid var(--line);
}
.dq-lede h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.9rem,1.2rem+2.4vw,2.9rem);
  line-height:1.18;
  letter-spacing:-.01em;
  margin:.5rem 0 .6rem;
  color:var(--ink);
}
.dq-lede .dq-lede-note{
  max-width:40ch;
  margin:0 auto;
  color:var(--ink-soft);
  font-size:1.04rem;
}

/* Opening / featured essay — large, image below headline, still single column */
.dq-open{margin-bottom:60px}
.dq-open .dq-open-cat{margin-bottom:16px;text-align:center}
.dq-open h2{
  font-family:var(--serif);
  font-weight:420;
  font-size:clamp(1.7rem,1.15rem+2vw,2.5rem);
  line-height:1.2;
  letter-spacing:-.012em;
  text-align:center;
  margin:0 0 22px;
}
.dq-open h2 a{transition:color .25s var(--ease)}
.dq-open h2 a:hover{color:var(--plum)}
.dq-open-figure{
  margin:0 0 22px;
  overflow:hidden;
}
.dq-open-figure img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  filter:saturate(.92);
}
.dq-open-dek{
  max-width:34ch;
  margin:0 auto 18px;
  text-align:center;
  color:var(--ink-soft);
  font-size:1.06rem;
}
.dq-open-meta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}

/* Category departments — each a hairline-ruled section, index-list style */
.dq-dept{margin-bottom:56px}
.dq-dept-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding-bottom:14px;
  margin-bottom:8px;
  border-bottom:2px solid var(--ink);
}
.dq-dept-head h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.45rem;
  letter-spacing:-.005em;
  margin:0;
}
.dq-dept-head .dq-more{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
  transition:color .25s var(--ease)}
.dq-dept-head .dq-more:hover{color:var(--plum)}

/* The index entry: horizontal, thumbnail small at the RIGHT, rule between */
.dq-entry{
  display:grid;
  grid-template-columns:1fr 120px;
  gap:26px;
  align-items:start;
  padding:26px 0;
  border-bottom:1px solid var(--line-soft);
}
.dq-entry:last-child{border-bottom:0}
.dq-entry-num{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--plum);
  display:block;
  margin-bottom:10px;
}
.dq-entry h3{
  font-family:var(--serif);
  font-weight:440;
  font-size:1.32rem;
  line-height:1.28;
  letter-spacing:-.006em;
  margin:0 0 10px;
}
.dq-entry h3 a{
  background-image:linear-gradient(var(--plum),var(--plum));
  background-size:0% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .35s var(--ease),color .25s var(--ease);
  padding-bottom:2px;
}
.dq-entry h3 a:hover{background-size:100% 1px;color:var(--plum)}
.dq-entry p{
  margin:0 0 12px;
  font-size:1rem;
  line-height:1.62;
  color:var(--ink-soft);
}
.dq-entry-meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--sans);
  font-size:.72rem;
  color:var(--ink-faint);
}
.dq-entry-thumb{
  overflow:hidden;
  align-self:stretch;
}
.dq-entry-thumb img{
  width:100%;
  height:100%;
  min-height:96px;
  object-fit:cover;
  filter:saturate(.9);
  transition:filter .3s var(--ease);
}
.dq-entry:hover .dq-entry-thumb img{filter:saturate(1)}

/* tiny author dot + initials */
.dq-byline{display:inline-flex;align-items:center;gap:8px}
.dq-byline .dq-av{
  display:inline-flex;
  width:22px;height:22px;
  flex:0 0 22px;
}
.dq-dot{
  width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.55;display:inline-block;
}

/* ==========================================================================
   Single post — one narrow measured column, drop treatment
   ========================================================================== */
.dq-article{padding:54px 0 30px}
.dq-crumb{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.04em;
  color:var(--ink-faint);
  margin-bottom:30px;
  text-align:center;
}
.dq-crumb a{color:var(--ink-soft);transition:color .25s var(--ease)}
.dq-crumb a:hover{color:var(--plum)}
.dq-crumb .sep{margin:0 8px;opacity:.55}

.dq-art-kicker{text-align:center;margin-bottom:18px}
.dq-art-kicker a{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--plum);
  transition:opacity .25s var(--ease)}
.dq-art-kicker a:hover{opacity:.7}

.dq-article h1{
  font-family:var(--serif);
  font-weight:420;
  font-size:clamp(2rem,1.3rem+2.6vw,3rem);
  line-height:1.16;
  letter-spacing:-.014em;
  text-align:center;
  margin:0 auto 24px;
  max-width:24ch;
}
.dq-art-meta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:11px;
  font-family:var(--sans);
  font-size:.76rem;
  color:var(--ink-faint);
  padding-bottom:34px;
  margin-bottom:0;
  border-bottom:1px solid var(--line);
}
.dq-art-meta b{color:var(--ink-soft);font-weight:600}

.dq-lead-figure{
  margin:40px 0 8px;
}
.dq-lead-figure img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  filter:saturate(.92);
}

/* the prose — the reading experience */
.dq-prose{
  margin-top:44px;
  font-size:1.19rem;
  line-height:1.78;
  color:var(--ink);
}
.dq-prose > p:first-of-type{font-size:1.28rem;line-height:1.62;color:var(--ink)}
/* drop cap on the opening paragraph */
.dq-prose > p:first-of-type::first-letter{
  font-family:var(--serif);
  float:left;
  font-size:4.1rem;
  line-height:.78;
  font-weight:500;
  padding:.05em .12em 0 0;
  color:var(--plum);
}
.dq-prose p{margin:0 0 1.5rem}
.dq-prose h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.7rem;
  line-height:1.25;
  letter-spacing:-.008em;
  margin:2.6rem 0 1rem;
}
.dq-prose h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.34rem;
  margin:2rem 0 .8rem;
}
.dq-prose h2::before{
  content:"";
  display:block;
  width:40px;
  height:2px;
  background:var(--plum);
  margin-bottom:1rem;
}
.dq-prose a{
  color:var(--plum);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  text-decoration-color:var(--line);
  transition:text-decoration-color .25s var(--ease)}
.dq-prose a:hover{text-decoration-color:var(--plum)}
.dq-prose img{margin:1.6rem auto}
.dq-prose figure{margin:2.2rem 0}
.dq-prose figure img{width:100%;filter:saturate(.94)}
.dq-prose figcaption{
  font-family:var(--sans);
  font-size:.8rem;
  color:var(--ink-faint);
  text-align:center;
  margin-top:.7rem;
  letter-spacing:.02em;
}
.dq-prose blockquote{
  margin:2.4rem 0;
  padding:.2rem 0 .2rem 1.6rem;
  border-left:2px solid var(--plum);
  font-style:italic;
  font-size:1.34rem;
  line-height:1.5;
  color:var(--ink-soft);
}
.dq-prose ul,.dq-prose ol{margin:0 0 1.5rem;padding-left:1.4rem}
.dq-prose li{margin-bottom:.55rem}
.dq-prose ul li::marker{color:var(--plum)}
.dq-prose strong{font-weight:600}
.dq-prose hr{border:0;border-top:1px solid var(--line);margin:2.6rem auto;width:60px}

/* end-mark */
.dq-endmark{
  text-align:center;
  margin:48px 0 6px;
  color:var(--plum);
  font-size:1.2rem;
  letter-spacing:.5em;
}

/* related — a quiet stacked list, not cards */
.dq-related{
  padding:44px 0 10px;
  border-top:1px solid var(--line);
}
.dq-related > .dq-label{text-align:center;display:block;margin-bottom:26px}
.dq-rel-list{list-style:none;margin:0;padding:0}
.dq-rel-item{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--line-soft);
}
.dq-rel-item:last-child{border-bottom:0}
.dq-rel-item .dq-rel-idx{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  color:var(--plum);
  flex:0 0 auto;
}
.dq-rel-item a{
  font-family:var(--serif);
  font-size:1.2rem;
  line-height:1.3;
  transition:color .25s var(--ease)}
.dq-rel-item a:hover{color:var(--plum)}
.dq-rel-item .dq-rel-time{
  margin-left:auto;
  font-family:var(--sans);
  font-size:.7rem;
  color:var(--ink-faint);
  white-space:nowrap;
}

/* ==========================================================================
   Archive / index list
   ========================================================================== */
.dq-arch-head{
  text-align:center;
  padding:56px 0 40px;
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
}
.dq-arch-head h1{
  font-family:var(--serif);
  font-weight:420;
  font-size:clamp(1.9rem,1.3rem+2.4vw,2.9rem);
  letter-spacing:-.012em;
  margin:.6rem 0 .5rem;
}
.dq-arch-head p{max-width:44ch;margin:0 auto;color:var(--ink-soft);font-size:1.04rem}

.dq-list{padding:8px 0 30px}

.dq-pager{
  margin-top:44px;
  padding-top:26px;
  border-top:1px solid var(--line);
  text-align:center;
}
.dq-pager .page-numbers{
  font-family:var(--sans);
  font-size:.82rem;
  color:var(--ink-soft);
  padding:6px 12px;
  margin:0 2px;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.dq-pager .page-numbers:hover,
.dq-pager .page-numbers.current{color:var(--plum);border-bottom-color:var(--plum)}
.dq-pager .current{font-weight:600}

.dq-empty{text-align:center;color:var(--ink-soft);padding:60px 0;font-style:italic}

/* ==========================================================================
   Footer — quiet, centered, hairline rules
   ========================================================================== */
.dq-foot{
  margin-top:70px;
  padding:52px 0 46px;
  border-top:1px solid var(--line);
  background:var(--paper-deep);
}
.dq-foot-mark{
  text-align:center;
  font-family:var(--serif);
  font-size:1.7rem;
  font-weight:500;
  letter-spacing:-.01em;
  margin-bottom:10px;
}
.dq-foot-note{
  text-align:center;
  max-width:46ch;
  margin:0 auto 30px;
  color:var(--ink-soft);
  font-size:.98rem;
  line-height:1.6;
}
.dq-foot-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 26px;
  padding:22px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  list-style:none;
  margin:0 auto 26px;
}
.dq-foot-nav a{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  transition:color .25s var(--ease)}
.dq-foot-nav a:hover{color:var(--plum)}
.dq-foot-bottom{
  text-align:center;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.03em;
  color:var(--ink-faint);
  line-height:1.9;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:640px){
  body{font-size:18px}
  .dq-shell{padding-inline:20px}
  .dq-entry{grid-template-columns:1fr;gap:16px}
  .dq-entry-thumb{order:-1}
  .dq-entry-thumb img{aspect-ratio:16/9;min-height:0}
  .dq-prose{font-size:1.12rem}
  .dq-prose > p:first-of-type{font-size:1.18rem}
  .dq-rel-item{flex-wrap:wrap}
  .dq-rel-item .dq-rel-time{margin-left:0;flex-basis:100%;margin-top:4px}
  .dq-nav{gap:6px 18px}
}

@media(max-width:400px){
  .dq-prose > p:first-of-type::first-letter{font-size:3.3rem}
}