/* ==========================================================================
   Studio notebook frame: makes the notebook wear the same header and footer
   nav as calebfeinstein.studio. Frame only (no note text lives here).
   To undo it, delete publish.css and publish.js from the vault and republish.
   ========================================================================== */

@font-face{
  font-family:'TAY Road Runner';
  src:url('https://calebfeinstein.studio/fonts/TAYRoadRunner.woff') format('woff');
  font-weight:400 700;
  font-display:swap;
}

:root{
  --cf-coral:#E98374;
  --cf-yellow:#F1BD4D;
  --cf-indigo:#4346A3;
  --cf-mauve:#C9AEC1;
  --cf-mint:#9ED0C4;
  --cf-teal:#00ACC4;
  --cf-ink:#3F4045;
  --cf-ink-soft:#6A6C70;
  --cf-bg:#FFFFFF;
  --cf-display:'TAY Road Runner','Arial Narrow',sans-serif;
  --cf-palette-rule:linear-gradient(to bottom,
    var(--cf-coral)  0      16.666%,
    var(--cf-yellow) 16.666% 33.333%,
    var(--cf-indigo) 33.333% 50%,
    var(--cf-mauve)  50%     66.666%,
    var(--cf-mint)   66.666% 83.333%,
    var(--cf-teal)   83.333% 100%);
}

/* The frame: header on top, Publish in the middle, footer nav on the bottom. */
body.cf-framed{
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;overflow:hidden;
}
body.cf-framed .published-container{
  flex:1 1 auto;min-height:0;height:auto !important;
}
/* Publish's own "Powered by" line floats above our footer nav instead of under it */
body.cf-framed .site-footer{bottom:calc(var(--cf-footer-h,80px) + 12px) !important}

/* ---------- Header ---------- */
.cf-header{flex:none;background:var(--cf-bg);padding:14px 32px 0}
.cf-header-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.cf-name-link{text-decoration:none;color:inherit}
.cf-name{
  font-family:var(--cf-display);font-weight:700;font-size:26px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cf-ink);
}
.cf-subtitle{
  font-family:var(--cf-display);font-weight:600;font-size:14px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cf-ink-soft);
}
.cf-social{margin-left:auto;display:flex;gap:12px;align-items:center}
.cf-social a{color:var(--cf-ink);display:inline-flex}
.cf-social a:hover{color:var(--cf-teal)}
.cf-social svg{width:20px;height:20px}
.cf-rule{height:8px;margin:8px 0 0;background:var(--cf-palette-rule)}

/* ---------- Footer nav (same grid trick as the main site) ---------- */
.cf-footer-nav{
  flex:none;background:var(--cf-bg);
  box-shadow:0 -6px 16px rgba(0,0,0,.05);
  position:relative;z-index:100;
}
.cf-footer-nav-inner{padding:0 32px 14px}
.cf-nav-row{
  display:grid;
  grid-template-columns:repeat(4,auto);
  grid-template-rows:auto 8px 8px auto;
  justify-content:space-between;
  row-gap:0;
}
.cf-nav-link{
  align-self:end;padding-top:10px;
  font-family:var(--cf-display);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;font-size:15px;text-decoration:none;color:var(--cf-ink-soft);
  transition:color .2s ease;
}
.cf-nav-link:hover{color:var(--cf-ink)}
.cf-nav-link.active{grid-row:1;align-self:end;color:var(--cf-ink);padding-top:0}
.cf-nav-mini-rule{grid-row:2;align-self:stretch;background:var(--cf-palette-rule)}
.cf-nav-shared-rule{grid-column:1/-1;grid-row:3;background:var(--cf-palette-rule)}

@media (max-width:700px){
  .cf-header{padding:10px 16px 0}
  .cf-header-row{gap:10px;flex-wrap:nowrap;align-items:baseline}
  .cf-name{font-size:17px;letter-spacing:.1em;white-space:nowrap}
  .cf-subtitle{font-size:10px;letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .cf-social svg{width:18px;height:18px}
  .cf-footer-nav-inner{padding:0 16px 12px}
  .cf-nav-row{grid-template-rows:auto 7px 7px auto}
  .cf-nav-link{font-size:11px;letter-spacing:.14em;padding-top:8px}
  .cf-nav-link.active{font-size:12px}
}