@font-face{
  font-family:'Playfair Display';
  font-style:italic;
  font-weight:400 900;
  font-display:swap;
  src:url('/assets/fonts/playfair-display-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('/assets/fonts/playfair-display-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:200 700;
  font-display:swap;
  src:url('/assets/fonts/newsreader-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:200 700;
  font-display:swap;
  src:url('/assets/fonts/newsreader-normal.woff2') format('woff2');
}

/* ==========================================================================
   SMB IT Journal — Modern Luxe editorial design
   Palette: deep navy + warm paper + gold + teal
   Type:    Playfair Display (display) · Newsreader (body)
   ========================================================================== */

:root{
  --paper:    #f4f1ea;
  --paper-2:  #ece6d8;
  --paper-3:  #e4ddcb;
  --ink:      #181b22;
  --ink-soft: #2c2f38;
  --navy:     #0f1c2e;
  --navy-2:   #16273d;
  --navy-3:   #1d3252;
  --gold:     #c9a227;
  --gold-2:   #b08d1c;
  --gold-soft:#e6cf86;
  --teal:     #0d4f4f;
  --teal-2:   #0a6a64;
  --muted:    #6b6657;
  --muted-2:  #8a8472;
  --line:     rgba(15,28,46,.16);
  --line-2:   rgba(15,28,46,.30);
  --gold-line:rgba(201,162,39,.45);

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --measure: 40rem;
  --wide: 75rem;
  --gutter: clamp(1.1rem, 4vw, 3rem);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-size:clamp(1.05rem, .6rem + .6vw, 1.18rem);
  line-height:1.72;
  font-weight:400;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--teal); text-decoration:none; }
a:hover{ color:var(--gold-2); }
::selection{ background:var(--gold-soft); color:var(--navy); }

/* paper grain — subtle */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(circle at 20% 10%, rgba(201,162,39,.05), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(13,79,79,.05), transparent 45%);
}

/* ---------- layout helpers ---------- */
.wrap{ width:min(100% - 2*var(--gutter), var(--wide)); margin-inline:auto; }
.measure{ width:min(100% - 2*var(--gutter), var(--measure)); margin-inline:auto; }
.rule{ border:0; border-top:1px solid var(--line); margin:0; }

/* ---------- masthead ---------- */
.masthead{
  background:
    linear-gradient(180deg, var(--navy-2), var(--navy));
  color:var(--paper);
  border-bottom:3px double var(--gold-line);
  text-align:center;
  padding:clamp(1.4rem,4vw,2.6rem) var(--gutter) clamp(1rem,3vw,1.6rem);
}
.masthead a{ color:inherit; }
.masthead .issue-line{
  font-family:var(--serif);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.62rem;
  color:var(--gold-soft);
  margin:0 0 .9rem;
  font-weight:500;
}
.masthead .issue-line span{ color:rgba(244,241,234,.55); }
.wordmark{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.5rem, 1rem + 7vw, 5.5rem);
  line-height:.92;
  letter-spacing:-.015em;
  margin:0;
  color:var(--gold);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.wordmark .amp{ font-style:italic; color:var(--gold-soft); }
.tagline{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(.95rem,.8rem + .3vw,1.15rem);
  color:rgba(244,241,234,.82);
  margin:.7rem 0 0;
  letter-spacing:.01em;
}
.masthead .flourish{
  width:min(90%,30rem); height:auto; margin:1rem auto 0; display:block;
}

/* ---------- nav ---------- */
.topnav{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(1.1) blur(2px);
  background:rgba(244,241,234,.92);
}
.topnav .inner{
  display:flex; flex-wrap:wrap; gap:.2rem 1.4rem;
  align-items:center; justify-content:center;
  padding:.7rem var(--gutter);
}
.topnav a{
  font-family:var(--serif);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
  font-weight:600;
  color:var(--ink-soft);
  padding:.25rem 0;
  border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.topnav a:hover{ color:var(--navy); border-bottom-color:var(--gold); }
.topnav a.home{ color:var(--teal); }

/* ---------- section headers ---------- */
.section-head{
  display:flex; align-items:center; gap:1.2rem;
  margin:clamp(2.4rem,6vw,4rem) 0 1.6rem;
}
.section-head::before,.section-head::after{
  content:""; flex:1; border-top:1px solid var(--line-2);
}
.section-head h2{
  font-family:var(--serif);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:.82rem;
  color:var(--navy);
  margin:0;
  white-space:nowrap;
}
.section-head h2 .dot{ color:var(--gold); }

/* kicker / eyebrow */
.kicker{
  font-family:var(--serif);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.68rem;
  font-weight:600;
  color:var(--teal-2);
  display:inline-block;
  margin:0 0 .55rem;
}
.kicker.gold{ color:var(--gold-2); }

/* ---------- hero / lead story ---------- */
.lead{
  display:grid; gap:clamp(1.4rem,4vw,3rem);
  align-items:center;
  padding:clamp(1.8rem,5vw,3.4rem) 0 clamp(1.2rem,3vw,2rem);
}
.lead.has-img{ grid-template-columns:1.05fr 1fr; }
@media (max-width:820px){ .lead.has-img{ grid-template-columns:1fr; } }
.lead .frame{ order:2; }
.lead.has-img .lead-body{ order:1; }
.lead h1, .lead .lead-title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.1rem, 1rem + 4vw, 3.7rem);
  line-height:1.02;
  letter-spacing:-.018em;
  margin:.2rem 0 .8rem;
  color:var(--ink);
}
.lead a.lead-title:hover{ color:var(--gold-2); }
.lead .dek{
  font-size:1.22rem; line-height:1.6; color:var(--ink-soft);
  margin:0 0 1.2rem; max-width:34rem;
}
.byline{
  font-family:var(--serif); font-size:.74rem; text-transform:uppercase;
  letter-spacing:.16em; color:var(--muted);
}
.byline .sep{ color:var(--gold); margin:0 .5rem; }
.readmore{
  display:inline-block; margin-top:1.1rem;
  font-family:var(--serif); font-weight:600; letter-spacing:.04em;
  color:var(--navy); border-bottom:2px solid var(--gold);
  padding-bottom:1px;
}
.readmore:hover{ color:var(--gold-2); border-color:var(--gold-2); }

/* framed image */
.frame{
  position:relative; background:var(--paper-2);
  border:1px solid var(--line); padding:.55rem;
  box-shadow:0 18px 40px -28px rgba(15,28,46,.6);
}
.frame img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.frame .cap{
  font-family:var(--serif); font-style:italic; font-size:.78rem;
  color:var(--muted); margin:.5rem .2rem 0;
}

/* ---------- feature grid (cards) ---------- */
.grid{
  display:grid; gap:clamp(1.6rem,3vw,2.4rem);
  grid-template-columns:repeat(3,1fr);
}
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:880px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid,.grid.cols-2{ grid-template-columns:1fr; } }

.card{ display:flex; flex-direction:column; }
.card .frame{ margin-bottom:.9rem; }
.card .frame img{ aspect-ratio:16/10; transition:transform .5s ease; }
.card:hover .frame img{ transform:scale(1.04); }
.card.no-img{
  border-top:3px solid var(--navy);
  padding-top:.9rem;
}
.card.no-img::after{
  content:""; display:block; width:2.2rem; height:1px;
  background:var(--gold); margin-top:.9rem;
}
.card h3{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.25rem,1rem + .6vw,1.55rem);
  line-height:1.12; letter-spacing:-.01em;
  margin:.1rem 0 .5rem;
}
.card.lg h3{ font-size:clamp(1.5rem,1.1rem + 1vw,2rem); }
.card a.t{ color:var(--ink); }
.card a.t:hover{ color:var(--gold-2); }
.card .excerpt{
  font-size:.98rem; line-height:1.62; color:var(--ink-soft); margin:0 0 .7rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.card .byline{ margin-top:auto; }

/* small list (latest) */
.dispatch{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem;
  padding:1.1rem 0; border-top:1px solid var(--line);
  align-items:baseline;
}
.dispatch:first-child{ border-top:0; }
.dispatch .num{
  font-family:var(--display); font-weight:600; font-size:1.5rem;
  color:var(--gold); line-height:1;
  min-width:2ch;
}
.dispatch h3{
  font-family:var(--display); font-weight:550; font-size:1.18rem;
  line-height:1.2; margin:0 0 .25rem;
}
.dispatch h3 a{ color:var(--ink); }
.dispatch h3 a:hover{ color:var(--gold-2); }
.dispatch .byline{ font-size:.68rem; }

/* two-column homepage body */
.cover-grid{
  display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3.4rem);
}
@media (min-width:980px){
  .cover-grid.with-aside{ grid-template-columns:1fr 18rem; }
}
aside.rail > *{ margin-bottom:2.4rem; }

/* ---------- departments ---------- */
.depts{ display:flex; flex-wrap:wrap; gap:.7rem; }
.dept{
  font-family:var(--serif); font-size:.8rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--navy); background:var(--paper-2);
  border:1px solid var(--line); border-radius:2px;
  padding:.5rem .85rem; display:inline-flex; gap:.5rem; align-items:center;
}
.dept:hover{ border-color:var(--gold); color:var(--gold-2); }
.dept .n{ color:var(--muted); font-weight:500; }

/* ---------- ads ---------- */
.ad{ text-align:center; margin:1rem 0; }
.ad .ad-label{
  font-family:var(--serif); text-transform:uppercase; letter-spacing:.28em;
  font-size:.56rem; color:var(--muted-2); margin:0 0 .5rem;
}
.ad a{ display:inline-block; }
.ad img{
  margin-inline:auto; border:1px solid var(--line);
  box-shadow:0 8px 24px -18px rgba(15,28,46,.5);
}
.ad.leaderboard{
  padding:clamp(1.2rem,3vw,2rem) 0; border-block:1px solid var(--line);
}
.ad.rail img{ width:100%; }

/* ---------- article page ---------- */
.article{ padding:clamp(1.6rem,4vw,3rem) 0 1rem; }
.article-header{ text-align:center; margin-bottom:clamp(1.6rem,4vw,2.6rem); }
.article-header .kicker{ font-size:.74rem; }
.article-header h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem, 1rem + 4.2vw, 3.9rem);
  line-height:1.04; letter-spacing:-.02em;
  margin:.5rem auto .7rem; max-width:18ch;
  color:var(--ink);
}
.article-meta{
  font-family:var(--serif); text-transform:uppercase; letter-spacing:.18em;
  font-size:.72rem; color:var(--muted);
}
.article-meta .sep{ color:var(--gold); margin:0 .55rem; }
.article-hero{ margin:clamp(1.6rem,4vw,2.6rem) 0; }
.article-hero img{ width:100%; max-height:60vh; object-fit:cover; }

/* body typography */
.prose{ font-size:1.18rem; line-height:1.78; color:var(--ink-soft); }
.prose > p:first-of-type::first-letter{
  font-family:var(--display); font-weight:600;
  float:left; font-size:4.4em; line-height:.74;
  padding:.06em .12em 0 0; margin:.02em 0 0;
  color:var(--gold-2);
}
.prose p{ margin:0 0 1.35rem; }
.prose a{ color:var(--teal); text-decoration:underline; text-decoration-color:var(--gold-line); text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--gold-2); text-decoration-color:var(--gold); }
.prose h2{
  font-family:var(--display); font-weight:600; font-size:1.75rem;
  line-height:1.15; letter-spacing:-.01em; color:var(--ink);
  margin:2.6rem 0 1rem;
}
.prose h3{
  font-family:var(--display); font-weight:600; font-size:1.35rem;
  color:var(--ink); margin:2rem 0 .8rem;
}
.prose ul,.prose ol{ margin:0 0 1.35rem; padding-left:1.4rem; }
.prose li{ margin:.4rem 0; }
.prose blockquote{
  margin:2rem 0; padding:.4rem 0 .4rem 1.6rem;
  border-left:3px solid var(--gold);
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:1.4rem; line-height:1.4; color:var(--navy);
}
.prose blockquote p{ margin:0 0 .6rem; }
.prose strong,.prose b{ font-weight:650; color:var(--ink); }
.prose em,.prose i{ font-style:italic; }
.prose sup{ font-size:.7em; color:var(--teal-2); }
.prose hr{
  border:0; text-align:center; margin:2.6rem 0;
}
.prose hr::before{
  content:"\00a7"; /* section mark */
  font-family:var(--display); color:var(--gold); font-size:1.4rem;
}
.prose img{ margin:1.6rem auto; border:1px solid var(--line); padding:.4rem; background:var(--paper-2); }

/* tags + footer of article */
.tags{ margin:2.6rem 0 1rem; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.tags .lbl{ font-family:var(--serif); text-transform:uppercase; letter-spacing:.2em; font-size:.62rem; color:var(--muted); margin-right:.3rem; }
.tags a,.tags span:not(.lbl){
  font-size:.82rem; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:.25rem .8rem;
}
.tags a:hover{ border-color:var(--teal); color:var(--teal); }

.article-foot{
  border-top:3px double var(--gold-line); margin-top:2.4rem; padding-top:2rem;
}

/* related */
.related{ background:var(--paper-2); border-block:1px solid var(--line); margin-top:3rem; padding:2.4rem 0 3rem; }

/* ---------- archive / category ---------- */
.page-head{ text-align:center; padding:clamp(2rem,5vw,3.6rem) 0 1rem; }
.page-head h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem,1rem + 4vw,3.4rem); margin:.3rem 0 .4rem; color:var(--ink);
}
.page-head p{ color:var(--muted); font-style:italic; margin:0; }

.index-list{ margin:1rem 0 2rem; }
.index-row{
  display:grid; grid-template-columns:1fr auto; gap:.6rem 1.4rem;
  align-items:baseline; padding:1.3rem 0; border-top:1px solid var(--line);
}
.index-row h2,.index-row h3{ font-family:var(--display); font-weight:600; font-size:1.5rem; line-height:1.12; margin:0 0 .3rem; }
.index-row h2 a,.index-row h3 a{ color:var(--ink); }
.index-row h2 a:hover,.index-row h3 a:hover{ color:var(--gold-2); }
.index-row .excerpt{ font-size:.98rem; color:var(--ink-soft); margin:0; max-width:48rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.index-row .meta{ font-family:var(--serif); text-transform:uppercase; letter-spacing:.14em; font-size:.66rem; color:var(--muted); text-align:right; white-space:nowrap; }
.index-row .cat{ color:var(--teal-2); display:block; }

/* ---------- footer ---------- */
.site-foot{
  background:linear-gradient(180deg,var(--navy),var(--navy-2));
  color:rgba(244,241,234,.8);
  margin-top:clamp(3rem,7vw,5rem);
  border-top:3px double var(--gold-line);
  padding:clamp(2.4rem,5vw,3.6rem) 0 2rem;
}
.site-foot a{ color:rgba(244,241,234,.8); }
.site-foot a:hover{ color:var(--gold-soft); }
.foot-grid{ display:grid; gap:2rem clamp(2rem,5vw,4rem); grid-template-columns:1.4fr 1fr 1fr; }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-wordmark{ font-family:var(--display); font-weight:600; font-size:1.9rem; color:var(--gold); margin:0 0 .5rem; }
.foot-grid h2{ font-family:var(--serif); text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; color:var(--gold-soft); margin:0 0 1rem; font-weight:600; }
.foot-grid ul{ list-style:none; margin:0; padding:0; }
.foot-grid li{ margin:.5rem 0; font-size:.95rem; }
.foot-bottom{
  border-top:1px solid rgba(244,241,234,.15); margin-top:2.4rem; padding-top:1.4rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  font-size:.74rem; color:rgba(244,241,234,.55); letter-spacing:.04em;
}

/* ---------- misc ---------- */
.skip{ position:absolute; left:-999px; }
.skip:focus{ left:1rem; top:1rem; background:var(--navy); color:var(--paper); padding:.6rem 1rem; z-index:99; }
.center{ text-align:center; }
.mt{ margin-top:2rem; }
.btn-more{
  display:inline-block; font-family:var(--serif); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; font-size:.74rem;
  color:var(--navy); border:1px solid var(--navy); padding:.7rem 1.6rem;
  transition:all .15s;
}
.btn-more:hover{ background:var(--navy); color:var(--gold-soft); border-color:var(--navy); }

.notfound{ text-align:center; padding:clamp(3rem,10vw,7rem) 0; }
.notfound .big{ font-family:var(--display); font-weight:600; font-size:clamp(4rem,20vw,9rem); color:var(--gold); line-height:1; }