/* ============================================================
   RK THEME — shared design system
   Loaded AFTER the Tailwind CDN script on every page so these
   rules can override matching-specificity utility classes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --rk-paper:#F3F1EB;
  --rk-paper-alt:#EAE6DA;
  --rk-ink:#1C2130;
  --rk-ink-soft:#5B5F6E;
  --rk-navy:#10182B;
  --rk-navy-soft:#232B41;
  --rk-brass:#AD8A3E;
  --rk-brass-deep:#8C6F2C;
  --rk-brass-tint:#EFE6CC;
  --rk-line:#DEDACC;

  --rk-tech:#3E6489;   --rk-tech-tint:#E3EBF1;
  --rk-life:#6E7A4E;   --rk-life-tint:#EBEFDF;
  --rk-astro:#6B4C7A;  --rk-astro-tint:#EEE6F0;
}

body{
  font-family:'Inter',sans-serif;
  background:var(--rk-paper) !important;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Fraunces',serif;
}

.rk-mono{
  font-family:'IBM Plex Mono',monospace;
  letter-spacing:.04em;
}

/* ---------- nav ---------- */
.rk-nav{
  background:rgba(16,24,43,.96) !important;
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.rk-nav a, .rk-logo{ color:#EDEFF4; }
.rk-nav .rk-navlink{ color:#B9BFCE !important; }
.rk-nav .rk-navlink:hover{ color:#fff !important; background:rgba(255,255,255,.06) !important; }
.rk-logo{ font-family:'Fraunces',serif; font-weight:600; }
.rk-logo span{ color:var(--rk-brass); }
.rk-cta-btn{
  background:var(--rk-brass) !important;
  color:var(--rk-navy) !important;
}
.rk-cta-btn:hover{ background:#c29d4c !important; }
.rk-mobile-menu{ background:var(--rk-navy) !important; border-color:rgba(255,255,255,.08) !important; }
.rk-mobile-menu a{ color:#D9DEE8 !important; }
.rk-lang-btn{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.18) !important;
  color:#D9DEE8 !important;
}
.rk-lang-btn:hover{ color:#fff !important; border-color:var(--rk-brass) !important; }

/* ---------- progress bar ---------- */
#scroll-progress{
  background:var(--rk-brass) !important;
  box-shadow:0 0 10px rgba(173,138,62,.5) !important;
}

/* ---------- pillars (homepage) ---------- */
.rk-pillar{
  background:#fff; border:1px solid var(--rk-line); border-top:4px solid transparent;
  border-radius:14px; padding:24px; transition:transform .2s ease, box-shadow .2s ease;
}
.rk-pillar:hover{ transform:translateY(-4px); box-shadow:0 14px 28px -14px rgba(16,24,43,.22); }
.rk-pillar.tech{ border-top-color:var(--rk-tech); }
.rk-pillar.life{ border-top-color:var(--rk-life); }
.rk-pillar.astro{ border-top-color:var(--rk-astro); }
.rk-pillar .count{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600; }
.rk-pillar.tech .count{ color:var(--rk-tech); }
.rk-pillar.life .count{ color:var(--rk-life); }
.rk-pillar.astro .count{ color:var(--rk-astro); }

/* ---------- timeline (journey section) ---------- */
.rk-timeline{ position:relative; padding-left:28px; border-left:2px solid var(--rk-line); }
.rk-tl-item{ position:relative; padding-bottom:34px; }
.rk-tl-item:last-child{ padding-bottom:0; }
.rk-tl-item::before{
  content:""; position:absolute; left:-34px; top:4px; width:12px; height:12px;
  border-radius:50%; background:var(--rk-paper); border:2px solid var(--rk-brass);
}
.rk-tl-year{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--rk-brass-deep); margin-bottom:6px; letter-spacing:.05em; font-weight:600; text-transform:uppercase; }

/* ---------- blog cards (shared across homepage + category pages) ---------- */
.rk-card{
  background:#fff; border:1px solid var(--rk-line); border-left:4px solid transparent;
  border-radius:14px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
}
.rk-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px -16px rgba(16,24,43,.22); }
.rk-card.tech{ border-left-color:var(--rk-tech); }
.rk-card.life{ border-left-color:var(--rk-life); }
.rk-card.astro{ border-left-color:var(--rk-astro); }
.rk-card .rk-cover{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--rk-paper-alt); }
.rk-card .rk-cover img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.rk-card:hover .rk-cover img{ transform:scale(1.06); }
.rk-chip{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; padding:5px 10px; border-radius:999px; color:#fff; display:inline-block;
}
.rk-chip.tech{ background:var(--rk-tech); }
.rk-chip.life{ background:var(--rk-life); }
.rk-chip.astro{ background:var(--rk-astro); }
.rk-chip-soft{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:6px 12px; border-radius:999px; }
.rk-chip-soft.tech{ background:var(--rk-tech-tint); color:var(--rk-tech); }
.rk-chip-soft.life{ background:var(--rk-life-tint); color:var(--rk-life); }
.rk-chip-soft.astro{ background:var(--rk-astro-tint); color:var(--rk-astro); }
.rk-card-foot{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--rk-ink-soft); display:flex; gap:12px; padding-top:10px; margin-top:10px; border-top:1px dashed var(--rk-line); }

/* ---------- category tabs ---------- */
.rk-tab{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; padding:9px 16px; border-radius:999px; border:1px solid var(--rk-line);
  color:var(--rk-ink-soft); background:#fff; transition:.15s ease;
}
.rk-tab:hover{ border-color:var(--rk-brass); color:var(--rk-brass-deep); }
.rk-tab.active.tech{ background:var(--rk-tech); border-color:var(--rk-tech); color:#fff; }
.rk-tab.active.life{ background:var(--rk-life); border-color:var(--rk-life); color:#fff; }
.rk-tab.active.astro{ background:var(--rk-astro); border-color:var(--rk-astro); color:#fff; }
.rk-tab.active.all{ background:var(--rk-navy); border-color:var(--rk-navy); color:#fff; }

/* ---------- category hero band ---------- */
.rk-cat-hero{ border-radius:18px; padding:44px; }
.rk-cat-hero.tech{ background:var(--rk-tech-tint); }
.rk-cat-hero.life{ background:var(--rk-life-tint); }
.rk-cat-hero.astro{ background:var(--rk-astro-tint); }
.rk-cat-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.rk-cat-eyebrow.tech{ color:var(--rk-tech); }
.rk-cat-eyebrow.life{ color:var(--rk-life); }
.rk-cat-eyebrow.astro{ color:var(--rk-astro); }
.rk-accent-bar{ height:4px; }
.rk-accent-bar.tech{ background:var(--rk-tech); }
.rk-accent-bar.life{ background:var(--rk-life); }
.rk-accent-bar.astro{ background:var(--rk-astro); }

/* ---------- year/month archive index ---------- */
.rk-index-rail{ position:sticky; top:88px; align-self:start; }
.rk-index-tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--rk-ink-soft); margin-bottom:14px; font-weight:600; }
.rk-yr-block{ margin-bottom:4px; }
.rk-yr-head{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; cursor:pointer; padding:8px 0; font-family:'Fraunces',serif;
  font-size:16px; font-weight:600; color:var(--rk-ink);
}
.rk-yr-head .n{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--rk-ink-soft); font-weight:400; }
.rk-yr-head svg{ transition:transform .2s ease; opacity:.6; flex:none; }
.rk-yr-block.collapsed .rk-yr-head svg{ transform:rotate(-90deg); }
.rk-mo-list{ display:flex; flex-direction:column; padding-left:2px; border-left:2px solid var(--rk-line); margin-left:2px; }
.rk-yr-block.collapsed .rk-mo-list{ display:none; }
.rk-mo-list button{
  display:flex; justify-content:space-between; text-align:left; background:none; border:none; cursor:pointer;
  padding:6px 0 6px 14px; font-family:'Inter',sans-serif; font-size:13px; color:var(--rk-ink-soft); width:100%;
}
.rk-mo-list button:hover{ color:var(--rk-brass-deep); }
.rk-mo-list button .n{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--rk-ink-soft); }
.rk-year-marker{
  grid-column:1/-1; display:flex; align-items:baseline; gap:12px; margin:30px 0 4px; scroll-margin-top:90px;
}
.rk-year-marker .yy{ font-family:'Fraunces',serif; font-size:24px; font-weight:600; color:var(--rk-ink); }
.rk-year-marker::after{ content:""; flex:1; height:1px; background:var(--rk-line); }
.rk-month-marker{
  grid-column:1/-1; font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--rk-brass-deep); margin:10px 0 -4px; scroll-margin-top:90px; font-weight:600;
}
.rk-jump-mobile select{
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:var(--rk-ink); background:#fff;
  border:1px solid var(--rk-line); border-radius:8px; padding:8px 30px 8px 12px; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0 5 6 10 0' fill='none' stroke='%235B5F6E' stroke-width='1.4'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; width:100%;
}

/* ---------- article reading page ---------- */
#content p:first-of-type::first-letter{
  font-family:'Fraunces',serif; font-size:56px; font-weight:600; float:left; line-height:.85;
  padding-right:10px; padding-top:4px; color:var(--rk-cat-accent, var(--rk-brass));
}
#content blockquote{
  font-family:'Fraunces',serif; font-style:italic; font-size:22px !important; line-height:1.5 !important;
  color:var(--rk-ink) !important; border-left:3px solid var(--rk-brass) !important;
  background:transparent !important; padding:4px 0 4px 24px !important; margin:34px 0 !important;
}
.rk-share-rail{ position:sticky; top:120px; display:flex; flex-direction:column; gap:10px; align-items:center; }
.rk-share-rail button, .rk-share-rail a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--rk-line); background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--rk-ink-soft);
  transition:.15s ease;
}
.rk-share-rail button:hover, .rk-share-rail a:hover{ border-color:var(--rk-brass); color:var(--rk-brass-deep); }
.js-save-btn.saved, .js-bookmark-btn.saved{ background:var(--rk-brass) !important; color:#fff !important; border-color:var(--rk-brass) !important; }
.rk-more-card{
  background:#fff; border:1px solid var(--rk-line); border-left:4px solid var(--rk-brass); border-radius:12px;
  padding:16px; transition:box-shadow .2s ease;
}
.rk-more-card:hover{ box-shadow:0 12px 24px -14px rgba(16,24,43,.2); }
.rk-more-card.tech{ border-left-color:var(--rk-tech); }
.rk-more-card.life{ border-left-color:var(--rk-life); }
.rk-more-card.astro{ border-left-color:var(--rk-astro); }

/* ---------- related cross-category strip ---------- */
.rk-rel-card{ display:flex; gap:14px; background:#fff; border:1px solid var(--rk-line); border-radius:12px; padding:16px; align-items:center; transition:box-shadow .2s ease; }
.rk-rel-card:hover{ box-shadow:0 12px 24px -14px rgba(16,24,43,.2); }
.rk-rel-dot{ width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; }
.rk-rel-dot.tech{ background:var(--rk-tech-tint); color:var(--rk-tech); }
.rk-rel-dot.life{ background:var(--rk-life-tint); color:var(--rk-life); }
.rk-rel-dot.astro{ background:var(--rk-astro-tint); color:var(--rk-astro); }


/* ---------- RESPONSIVE / TOUCH LAYER ---------- */
/* Added to fix mobile portrait + landscape layout, tap targets and
   navigation visibility. Loaded on every page via this stylesheet. */

html{ -webkit-text-size-adjust:100%; scroll-padding-top:84px; }
/* overflow-x:clip contains sideways overflow WITHOUT turning the page into a
   scroll container (overflow-x:hidden here breaks sticky nav + page scrolling) */
body{ max-width:100%; overflow-x:clip; }
img,video,iframe,svg{ max-width:100%; height:auto; }
section,main,article,aside,footer,.rk-card,.rk-pillar,.rk-rel-card,.rk-more-card{ min-width:0; }
[id]{ scroll-margin-top:84px; }

/* --- navigation: readable, reachable, never overflowing --- */
.rk-nav{ gap:12px; }
.rk-nav > div{ gap:12px; }
.rk-logo{ white-space:nowrap; }
.rk-navlink{ min-height:44px; display:inline-flex; align-items:center; }
.rk-nav button{ min-width:44px; min-height:44px; }
.rk-mobile-menu{ max-height:calc(100dvh - 60px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.rk-mobile-menu a{ min-height:44px; display:flex; align-items:center; }
.rk-lang-btn, .rk-cta-btn{ min-height:44px; }

/* the ribbon must never overflow its bar */
.rk-nav ul{ min-width:0; flex-shrink:1; }
.rk-nav ul li{ flex:none; }

/* On a real touch device (phone/tablet, any orientation) always use the
   hamburger. A landscape phone reports a wide viewport, so the full ribbon
   would render, and its ~1300px minimum width forces the whole document wider
   than the screen — the browser then zooms the page out and leaves an empty
   column on the right. Computers (fine pointer) keep every button visible. */
@media (hover:none) and (pointer:coarse){
  .rk-nav ul{ display:none !important; }
  .rk-nav #google_translate_element{ display:none !important; }
  .rk-nav button[aria-label="Open menu"]{ display:flex !important; }
  .rk-mobile-menu:not(.hidden){ display:block !important; }
  .rk-nav.flex{ padding:10px 16px !important; }
  .rk-nav.flex .rk-logo{ font-size:1.15rem !important; }
}

/* Every nav item stays visible on a computer screen — from 1024px up the full
   ribbon shows, tightening progressively so it always fits its bar. */
@media (min-width:1024px) and (max-width:1439px){
  .rk-nav .rk-navlink{ padding-left:10px !important; padding-right:10px !important; font-size:13px !important; }
  .rk-nav .rk-cta-btn{ margin-left:4px !important; padding:8px 16px !important; font-size:12.5px !important; }
  .rk-nav .rk-lang-btn{ padding:8px 12px !important; font-size:12.5px !important; }
  .rk-nav ul{ gap:0 !important; }
  .rk-logo{ font-size:1.25rem !important; }
}
@media (min-width:1024px) and (max-width:1279px){
  /* the widest single item is the ArthRoute badge; the globe stands in for the
     word "Language" so nothing has to drop off the row */
  .rk-nav #lang-label{ display:none !important; }
  .rk-nav .rk-navlink{ padding-left:8px !important; padding-right:8px !important; font-size:12.5px !important; }
  .rk-nav ul li a[href*="arthroutestudios"]{ padding:8px 12px !important; font-size:11px !important; }
  .rk-logo{ font-size:1.1rem !important; }
}

@media (max-width:1023px){
  /* the homepage lays its nav out directly and switches to the hamburger here */
  .rk-nav.flex{ padding:10px clamp(14px,4vw,24px) !important; }
  .rk-nav.flex .rk-logo{ font-size:1.15rem !important; }
}
@media (max-width:1023px){
  /* the other pages use an inner wrapper for their nav */
  .rk-nav:not(.flex){ padding:0 !important; }
  .rk-nav > div{ padding-left:16px !important; padding-right:16px !important; }
  .rk-nav > div.rk-mobile-menu{ padding-left:20px !important; padding-right:20px !important; }
  .rk-logo{ font-size:1.05rem !important; }
}

/* --- phone landscape: short viewports need their vertical space back --- */
@media (orientation:landscape) and (max-height:540px){
  .rk-nav{ position:static !important; }
  .rk-mobile-menu{ max-height:calc(100dvh - 52px); }
  .rk-index-rail, .rk-share-rail{ position:static !important; }
  section[id]{ padding-top:40px !important; padding-bottom:40px !important; }
}

/* --- typography that fits a phone --- */
@media (max-width:640px){
  .text-6xl{ font-size:2.5rem !important; line-height:1.1 !important; }
  .text-5xl{ font-size:2.125rem !important; line-height:1.15 !important; }
  .text-4xl{ font-size:1.875rem !important; line-height:1.2 !important; }
  .text-3xl{ font-size:1.55rem !important; line-height:1.25 !important; }
  h1,h2,h3,h4{ text-wrap:pretty; overflow-wrap:break-word; }
  .rk-cat-hero{ padding:22px !important; border-radius:14px; }
  section{ padding-left:0; padding-right:0; }
  .rk-tab{ font-size:11px; padding:8px 13px; }
}

/* iOS zooms the page in when a font-size below 16px gets focus */
@media (max-width:768px){
  input,select,textarea{ font-size:16px !important; }
}

/* --- touch targets --- */
.rk-tab{ min-height:42px; display:inline-flex; align-items:center; }
.rk-share-rail button, .rk-share-rail a{ min-width:40px; min-height:40px; }
@media (hover:none){
  .rk-card:hover, .rk-pillar:hover{ transform:none; }
}

/* --- article reading page --- */
@media (max-width:640px){
  #content p:first-of-type::first-letter{ font-size:44px; padding-right:8px; }
  #content blockquote{ font-size:18px !important; padding-left:16px !important; margin:24px 0 !important; }
  #content img{ margin:1.75rem 0 !important; border-radius:1rem !important; }
}
#content pre{ overflow-x:auto; }
#content table{ display:block; width:100%; overflow-x:auto; border-collapse:collapse; margin:1.5rem 0; }
#content table th, #content table td{ border:1px solid var(--rk-line); padding:8px 12px; font-size:14px; text-align:left; }
#content a{ overflow-wrap:anywhere; }

/* --- back-to-top: the .visible state was missing on some pages --- */
#back-to-top{ transition:opacity .3s ease, transform .3s ease; }
#back-to-top.visible{ opacity:1 !important; pointer-events:auto !important; transform:translateY(0) !important; }
@media (max-width:640px){
  #back-to-top{ bottom:16px !important; right:16px !important; width:44px !important; height:44px !important; }
}

/* --- contact form stacks on narrow phones --- */
@media (max-width:520px){
  #contact form .grid.grid-cols-2{ grid-template-columns:1fr !important; }
}

/* --- lightbox uses the real (dynamic) viewport height on mobile --- */
#lightbox img{ max-height:85dvh; }

/* --- archive rail / jump control --- */
@media (max-width:767px){
  .rk-year-marker .yy{ font-size:20px; }
  .rk-index-rail{ display:none; }
}