/* Native cross-fade between same-origin page loads (Chrome/Edge 126+); a
   no-op progressive enhancement everywhere else. */
@view-transition{
  navigation:auto;
}

:root{
  color-scheme: light;
  --paper:#eef0e7;
  --paper-2:#f8f8f3;
  --ink:#23251f;
  --ink-soft:#63665a;
  --ink-fixed:#1b1c17;
  --rule:#d7d9cb;
  --rule-soft:#e6e7dc;
  --accent:#96661f;
  --accent-soft:#c9a565;
  --accent-2:#6e4a16;
  --grad-accent: linear-gradient(135deg, var(--accent), var(--accent-2));
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --ease:cubic-bezier(.4,0,.2,1);
  --shadow-xs:0 1px 2px rgba(35,37,31,.05);
  --shadow-sm:0 1px 2px rgba(35,37,31,.06), 0 6px 16px -10px rgba(35,37,31,.22);
  --shadow-md:0 2px 6px rgba(35,37,31,.06), 0 18px 34px -18px rgba(35,37,31,.28);
  --shadow-lg:0 2px 6px rgba(35,37,31,.06), 0 24px 48px -22px rgba(35,37,31,.32);
  --shadow: var(--shadow-md);
  --serif:'Newsreader', Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#1b1c17;
    --paper-2:#232419;
    --ink:#ece9df;
    --ink-soft:#a3a294;
    --rule:#3a3c30;
    --rule-soft:#2c2e24;
    --accent:#c9a565;
    --accent-soft:#e0c48c;
    --accent-2:#96661f;
    --shadow-xs:0 1px 2px rgba(0,0,0,.35);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 6px 16px -10px rgba(0,0,0,.5);
    --shadow-md:0 2px 6px rgba(0,0,0,.3), 0 18px 34px -18px rgba(0,0,0,.55);
    --shadow-lg:0 2px 6px rgba(0,0,0,.3), 0 24px 48px -22px rgba(0,0,0,.6);
  }
}

/* elle seçilen tema, sistem tercihini geçersiz kılar */
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#1b1c17;
  --paper-2:#232419;
  --ink:#ece9df;
  --ink-soft:#a3a294;
  --rule:#3a3c30;
  --rule-soft:#2c2e24;
  --accent:#c9a565;
  --accent-soft:#e0c48c;
  --accent-2:#96661f;
  --shadow-xs:0 1px 2px rgba(0,0,0,.35);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 6px 16px -10px rgba(0,0,0,.5);
  --shadow-md:0 2px 6px rgba(0,0,0,.3), 0 18px 34px -18px rgba(0,0,0,.55);
  --shadow-lg:0 2px 6px rgba(0,0,0,.3), 0 24px 48px -22px rgba(0,0,0,.6);
}

*{ box-sizing:border-box; }

button{
  font-family:inherit;
  font-size:100%;
  line-height:inherit;
  margin:0;
  padding:0;
  border:none;
  background:none;
  color:inherit;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
}

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

html, body{ height:100%; }

body{
  margin:0;
  min-height:100dvh;
  position:relative;
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(8px,2vw,22px) clamp(12px,2.6vw,26px);
  isolation:isolate;
}

/* ---------- zemin: hafif çizim kağıdı dokusu (ışık lekeleri değil) ---------- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    repeating-linear-gradient(0deg, rgba(35,37,31,.035) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(90deg, rgba(35,37,31,.035) 0 1px, transparent 1px 88px);
  pointer-events:none;
}

/* ---------- sayfa düzeni: sol/sağ blog + orta kolon ---------- */
.page-layout{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  width:100%;
  margin:auto 0;
}

.main-col{
  width:min(1060px,100%);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.blog-side{
  width:min(1060px,100%);
}

.blog-heading{
  font-family:var(--serif);
  font-style:italic;
  font-size:.92rem;
  color:var(--ink-soft);
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--rule);
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}

.blog-card{
  display:flex;
  flex-direction:column;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--shadow-xs);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}

.blog-card:hover{
  border-color:var(--accent-soft);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

.blog-card-image{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--rule-soft);
}

.blog-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}

.blog-card:hover .blog-card-image img{ transform:scale(1.05); }

.blog-card-body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:20px;
  flex:1;
}

.blog-card-title{
  font-family:var(--serif);
  font-size:1.02rem;
  font-weight:700;
  color:var(--ink);
  line-height:1.3;
  margin:0;
}

.blog-card-excerpt{
  font-size:.85rem;
  color:var(--ink-soft);
  margin:0;
  flex:1;
}

.blog-card-link{
  font-size:.82rem;
  font-weight:600;
  color:var(--accent-2);
}

.blog-card:hover .blog-card-link{ text-decoration:underline; }

@media (min-width:1600px){
  .page-layout{
    flex-direction:row;
    align-items:flex-start;
    justify-content:center;
    max-width:1600px;
    margin:0 auto;
  }
  .main-col{ order:2; }
  .blog-side{ order:1; width:240px; flex:0 0 240px; }
  .blog-side.blog-right{ order:3; }
  .blog-side .blog-grid{ grid-template-columns:1fr; }
}

.sheet{
  width:100%;
  margin:auto;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}

/* ---------- üst bant ---------- */
.masthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px 24px;
  flex-wrap:wrap;
  padding:clamp(12px,1.6vw,16px) clamp(18px,3vw,40px);
  border-bottom:1px solid var(--rule-soft);
}

.masthead-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.masthead-actions .btn{
  min-width:132px;
  justify-content:center;
}

.all-posts-panel{
  padding:clamp(16px,2.4vw,28px) clamp(18px,3vw,40px);
  border-bottom:1px solid var(--rule-soft);
  background:var(--paper);
}

.wordmark{
  display:flex;
  align-items:baseline;
  gap:12px;
  min-width:0;
}

.wordmark .mark{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.35rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
}

.wordmark .role{
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border-inline-start:1px solid var(--rule);
  padding-inline-start:12px;
}

.masthead-right{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.lang-switch{
  display:inline-flex;
  align-items:baseline;
  font-size:.71rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.lang-switch a{
  display:inline-block;
  text-decoration:none;
  color:var(--ink-soft);
  font-weight:600;
  padding:0 10px;
  border-inline-start:1px solid var(--rule);
  transition:color .18s ease;
}

.lang-switch a:first-child{
  border-inline-start:0;
  padding-inline-start:0;
}

.lang-switch a:hover{ color:var(--ink); }

.lang-switch a.active{
  color:var(--accent);
}

/* ---------- dil seçici (sağ üstte sabit, genişleyen hap) ---------- */
.lang-pill{
  position:fixed;
  top:20px;
  inset-inline-end:20px;
  z-index:40;
  display:flex;
  align-items:stretch;
  height:40px;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:999px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:box-shadow .18s var(--ease);
}

.lang-pill:hover{ box-shadow:var(--shadow-md); }

.lang-pill-options{
  display:grid;
  grid-template-columns:0fr;
  transition:grid-template-columns .32s cubic-bezier(.4,0,.2,1);
}

.lang-pill[data-open="true"] .lang-pill-options{
  grid-template-columns:1fr;
}

.lang-pill-options-inner{
  display:flex;
  align-items:stretch;
  min-width:0;
  overflow:hidden;
}

.lang-pill-opt{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink-soft);
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s ease, background-color .18s ease;
}

.lang-pill-opt:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); }

.lang-pill-opt.active{
  color:#fff;
  background:var(--grad-accent);
}

.lang-pill-toggle{
  width:40px;
  flex:0 0 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:none;
  color:var(--ink-soft);
  cursor:pointer;
  padding:0;
  transition:color .18s ease;
}

.lang-pill-toggle:hover,
.lang-pill-toggle[aria-expanded="true"]{ color:var(--accent); }

.lang-pill-toggle:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}

@media (max-width:520px){
  .lang-pill{ top:14px; inset-inline-end:14px; }
}

/* ---------- tema anahtarı (güneş/ay) ---------- */
.theme-toggle{
  position:fixed;
  top:20px;
  inset-inline-start:20px;
  z-index:40;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--paper-2);
  border:1px solid var(--rule);
  box-shadow:var(--shadow-sm);
  color:var(--ink-soft);
  cursor:pointer;
  transition:color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}

.theme-toggle:hover{
  color:var(--accent-2);
  border-color:var(--accent-soft);
  box-shadow:var(--shadow-md);
  transform:translateY(-1px);
}

.theme-toggle:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.theme-toggle .icon-moon{ display:none; }

:root[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display:none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display:block; }
}

@media (max-width:520px){
  .theme-toggle{ top:14px; inset-inline-start:14px; }
}

.status{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:6px 14px 6px 10px;
  border-radius:999px;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:600;
  color:var(--accent-2);
  white-space:nowrap;
}

.status .lamp{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
  animation:breathe 2.6s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{ opacity:1; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
  50%{ opacity:.55; box-shadow:0 0 0 7px color-mix(in srgb, var(--accent) 10%, transparent); }
}

/* ---------- gövde: asimetrik iki kolon ---------- */
.body-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
}

.col-left{
  padding:clamp(16px,2.4vw,28px) clamp(18px,3vw,40px);
  border-inline-end:1px solid var(--rule-soft);
}

.col-right{
  padding:clamp(16px,2.4vw,28px) clamp(18px,3vw,40px);
  background:var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.maintenance-layout{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  margin:auto 0;
}

.maintenance-view{
  padding:clamp(40px,8vw,88px) clamp(20px,4vw,48px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--paper);
}

.maintenance-view .clock{
  max-width:460px;
}

.eyebrow{
  font-size:.78rem;
  color:var(--ink-soft);
  margin:0 0 10px;
}

/* ---------- profil fotoğrafı ---------- */
.portrait{
  width:100%;
  margin:0 0 16px;
  display:flex;
  justify-content:center;
}

.portrait-frame{
  display:inline-flex;
  padding:10px;
  border:1px solid var(--rule);
  background:var(--paper-2);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  position:relative;
}

.portrait-frame::before{
  content:"";
  position:absolute;
  top:-1px; left:-1px;
  width:18px; height:18px;
  border-top:2px solid var(--accent);
  border-inline-start:2px solid var(--accent);
  border-start-start-radius:var(--radius-md);
  pointer-events:none;
}

.portrait-photo{
  display:block;
  /* min ve max, altın oran (φ≈1.618) ile ilişkili: 356 / 220 = φ */
  height:clamp(220px,31vw,356px);
  width:auto;
  max-width:100%;
  border-radius:calc(var(--radius-md) - 4px);
}

h1{
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  font-size:clamp(1.55rem,3.2vw,2.25rem);
  line-height:1.14;
  letter-spacing:-.01em;
  margin:0 0 12px;
  text-wrap:balance;
}

h1 em{
  font-style:italic;
  color:var(--accent);
}

.rule-short{
  width:56px; height:3px;
  border-radius:2px;
  background:var(--grad-accent);
  margin:0 0 14px;
}

.lead{
  margin:0 0 10px;
  color:var(--ink-soft);
  font-size:.94rem;
  max-width:46ch;
}

.lead strong{ color:var(--ink); font-weight:600; }

.scope{
  list-style:none;
  margin:14px 0 0;
  padding:0;
}

.scope li{
  padding:10px 0 10px 14px;
  border-inline-start:2px solid var(--rule);
  font-size:.87rem;
  color:var(--ink-soft);
  margin-bottom:8px;
}

.scope .v strong{
  display:block;
  color:var(--ink);
  font-weight:700;
  font-size:.96rem;
  margin-bottom:2px;
}

/* ---------- geri sayım (tek parça terminal okuması) ---------- */
.cd-label{
  font-size:.78rem;
  color:var(--ink-soft);
  margin:0 0 14px;
}

.clock{
  display:flex;
  align-items:stretch;
  justify-content:center;
  width:100%;
  gap:1px;
  background:var(--rule-soft);
  border:1px solid var(--rule);
  border-radius:var(--radius-sm);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

.unit{
  flex:1 1 0;
  max-width:110px;
  min-width:0;
  text-align:center;
  padding:16px 8px;
  background:var(--paper-2);
}

.unit .num{
  display:block;
  font-family:var(--mono);
  font-weight:600;
  font-size:clamp(1.4rem,3.4vw,2rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  color:var(--ink);
}

.unit .cap{
  display:block;
  margin-top:8px;
  font-size:.68rem;
  color:var(--ink-soft);
}

.unit.sec .num{
  color:var(--accent);
}

.tickbar{
  width:100%;
  height:3px;
  border-radius:2px;
  background:var(--rule-soft);
  margin-top:14px;
  overflow:hidden;
}

.tickbar span{
  display:block;
  height:100%;
  width:0%;
  background:var(--grad-accent);
  transition:width .35s linear;
}

.target{
  margin:26px 0 0;
  font-size:.85rem;
  color:var(--ink-soft);
}

.target strong{
  display:block;
  font-family:var(--serif);
  font-size:1rem;
  color:var(--ink);
  font-weight:400;
  margin-top:5px;
}

.done-note{
  margin:10px 0 0;
  font-size:.88rem;
  color:var(--accent);
  font-weight:600;
}

/* ---------- yetenekler ---------- */
.skills{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--rule-soft);
}

.skill-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:10px;
  max-height:340px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-inline-end:6px;
}

.skill-grid::-webkit-scrollbar{ width:6px; }
.skill-grid::-webkit-scrollbar-track{ background:transparent; }
.skill-grid::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:3px; }
.skill-grid::-webkit-scrollbar-thumb:hover{ background:var(--ink-soft); }

.skill-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:0 0 8px;
  font-size:.92rem;
}

.skill-name{ font-weight:600; color:var(--ink); }

.skill-value{
  font-family:var(--mono);
  font-size:1rem;
  font-weight:600;
  color:var(--accent-2);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

.skill-bar{
  height:7px;
  border-radius:4px;
  background:var(--rule-soft);
  overflow:hidden;
}

.skill-fill{
  display:block;
  height:100%;
  width:0%;
  border-radius:4px;
  background:var(--grad-accent);
}

/* ---------- iletişim ---------- */
.contact{
  border-top:1px solid var(--rule-soft);
  padding:clamp(12px,1.8vw,18px) clamp(18px,3vw,40px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px 28px;
  flex-wrap:wrap;
}

.contact-note{
  margin:0;
  font-size:.9rem;
  color:var(--ink-soft);
  max-width:40ch;
}

.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:12px 20px;
  border-radius:var(--radius-sm);
  font-size:.88rem;
  font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  transition:background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.btn svg{ flex:0 0 auto; }

.btn:active{ transform:translateY(1px); box-shadow:none; }

.btn-solid{
  background:var(--grad-accent);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), var(--shadow-sm);
}
.btn-solid:hover{
  background:var(--accent-2);
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), var(--shadow-md);
}

.btn-ghost{
  background:var(--paper-2);
  color:var(--ink);
  border-color:var(--rule);
  box-shadow:var(--shadow-xs);
}
.btn-ghost:hover{
  border-color:var(--accent-soft);
  color:var(--accent-2);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

.btn:focus-visible,
a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

footer{
  width:min(1060px,100%);
  margin:8px auto 0;
  display:flex;
  justify-content:space-between;
  gap:6px 20px;
  flex-wrap:wrap;
  font-size:.74rem;
  color:var(--ink-soft);
}

footer span{ white-space:nowrap; }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- makale sayfaları ---------- */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.82rem;
  font-weight:600;
  color:var(--accent);
  text-decoration:none;
}

.back-link:hover{ text-decoration:underline; }

.article-wrap{
  padding:clamp(20px,3vw,48px) clamp(18px,3vw,40px) clamp(32px,4vw,56px);
}

.article-title{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.6rem,3.4vw,2.4rem);
  line-height:1.16;
  letter-spacing:-.01em;
  margin:0 0 14px;
  color:var(--ink);
  text-wrap:balance;
}

.article-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--ink-soft);
  margin:0 0 22px;
}

.article-hero{
  width:100%;
  max-width:68ch;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--radius-md);
  margin:0 0 22px;
  background:var(--rule-soft);
  border:1px solid var(--rule);
  box-shadow:var(--shadow-sm);
}

.article-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.article-body{
  max-width:68ch;
}

.article-body p{
  margin:0 0 16px;
  color:var(--ink);
  font-size:.96rem;
}

.article-body p:last-child{ margin-bottom:0; }

.article-body code{
  font-family:var(--mono);
  font-size:.85em;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
  padding:.15em .4em;
  border-radius:4px;
}

.code-block{
  max-width:68ch;
  margin:0 0 16px;
  padding:16px 20px;
  background:var(--ink-fixed);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  overflow-x:auto;
}

.code-block::before{
  content:attr(data-lang);
  display:block;
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--accent-soft);
  opacity:.8;
  margin-bottom:8px;
}

.code-block:not([data-lang])::before,
.code-block[data-lang=""]::before{
  content:none;
  margin:0;
}

.code-block code{
  display:block;
  font-family:var(--mono);
  font-size:.84rem;
  line-height:1.6;
  color:#ece9df;
  background:none;
  padding:0;
  white-space:pre;
}

.article-note{
  margin-top:28px;
  padding:16px 16px;
  border:1px dashed var(--rule);
  border-radius:var(--radius-sm);
  font-size:.82rem;
  color:var(--ink-soft);
  background:var(--paper);
}

.article-sources{
  max-width:68ch;
  margin-top:32px;
  padding-top:20px;
  border-top:1px solid var(--rule-soft);
}

.article-sources h2{
  font-family:var(--serif);
  font-size:1rem;
  font-weight:700;
  margin:0 0 10px;
  color:var(--ink);
}

.article-sources h3{
  font-family:var(--serif);
  font-size:.92rem;
  font-weight:700;
  margin:20px 0 8px;
  color:var(--ink);
}

.article-sources ul{
  margin:0;
  padding-inline-start:20px;
  color:var(--ink-soft);
  font-size:.88rem;
}

.article-sources li{ margin-bottom:6px; }

.article-sources a{ color:var(--accent); }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .body-grid{ grid-template-columns:1fr; }
  .col-left{ border-inline-end:0; border-bottom:1px solid var(--rule-soft); }
}

@media (max-width:520px){
  body{ padding:16px; }
  .masthead{ padding:18px 20px; }
  .wordmark{ flex-direction:column; align-items:flex-start; gap:4px; }
  .wordmark .role{ border-inline-start:0; padding-inline-start:0; }
  .col-left,.col-right,.contact{ padding-left:20px; padding-right:20px; }
  .unit{ padding:12px 4px; }
  .unit .cap{ font-size:.58rem; }
  .actions{ width:100%; }
  .btn{ flex:1 1 100%; justify-content:center; }
  .masthead-right{ width:100%; justify-content:space-between; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

@media print{
  body{ background:#fff; }
  body::before{ display:none; }
  .sheet{ box-shadow:none; backdrop-filter:none; background:#fff; }
}