/* ==========================================================================
   LP Scripts — design tokens
   ========================================================================== */

@font-face { font-family:"Public Sans"; font-weight:100; font-style:normal; src:url("fonts/PublicSans-Thin.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Public Sans"; font-weight:400; font-style:normal; src:url("fonts/PublicSans-Regular.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Public Sans"; font-weight:500; font-style:normal; src:url("fonts/PublicSans-Medium.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Public Sans"; font-weight:600; font-style:normal; src:url("fonts/PublicSans-SemiBold.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Public Sans"; font-weight:700; font-style:normal; src:url("fonts/PublicSans-Bold.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Public Sans"; font-weight:800; font-style:normal; src:url("fonts/PublicSans-ExtraBold.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Public Sans"; font-weight:900; font-style:normal; src:url("fonts/PublicSans-Black.otf") format("opentype"); font-display:swap; }

:root{
  --red:      #ed392f;
  --ink:      #211e1e;
  --white:    #ffffff;
  --gray:     #525252;

  --rail-w: 300px;
  --rail-w-collapsed: 64px;
  --gap-section: 2.75rem;   /* space between end of one script's content and the next script-name */
  --gap-para: 1.15rem;      /* space between paragraphs / paragraphs & images */
  --gap-preface: .65rem;    /* space between the two intro paragraphs */
  --content-max: 46rem;

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

.fw-semibold{ font-weight:600; }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Public Sans",sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
p{ margin:0; }
button{ font-family:inherit; }

.thin{ font-weight:100; }
strong{ font-weight:700; }
code{
  font-family:"Public Sans",sans-serif;
  font-weight:900;
  color:var(--red);
  font-size:0.94em;
}

/* ==========================================================================
   Page shell
   ========================================================================== */

.page{
  display:flex;
  min-height:100vh;
  min-height:100dvh;
}

/* ==========================================================================
   Rail (left nav) — static logo/header, scrollable script list, static footer
   ========================================================================== */

.rail{
  width:var(--rail-w);
  flex:0 0 var(--rail-w);
  background-color:var(--red);
  background-image:radial-gradient(ellipse at bottom, rgba(0,0,0,.15), transparent 65%);
  color:var(--white);
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
  position:sticky;
  top:0;
}

.rail-top{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.75rem 1.25rem 1rem;
}
.logo-link{ display:inline-flex; border-radius:50%; transition:opacity .15s var(--ease); }
.logo-link:hover{ opacity:.85; }
.logo{ width:120px; height:120px; display:block; }

.rail-divider{
  width:64px;
  height:2px;
  background:rgba(255,255,255,.55);
  margin:0 auto 1.25rem;
  flex:0 0 auto;
}

.rail-heading{
  flex:0 0 auto;
  margin:0 0 .85rem;
  padding:0 1.5rem;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.14em;
  text-align:center;
  color:var(--white);
}

.rail-scroll{
  flex:1 1 auto;
  overflow-y:auto;
  padding:0 1.5rem 1.25rem;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.4) transparent;
}
.rail-scroll::-webkit-scrollbar{ width:6px; }
.rail-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.35); border-radius:3px; }

.scripts-nav li + li{ margin-top:.55rem; }
.nav-link.script-link{
  display:block;
  text-align:center;
  font-family:"Public Sans",sans-serif;
  font-weight:600;
  font-size:.86rem;
  line-height:1.35;
  color:var(--white);
  transition:font-weight 0s, opacity .15s var(--ease);
}
.nav-link.script-link:hover,
.nav-link.script-link:focus-visible,
.nav-link.script-link.is-active{
  font-weight:800;
  color:var(--white);
}

.rail-bottom{
  flex:0 0 auto;
  padding:1rem 1.5rem 1.15rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  background:var(--gray);
  border-top:1px solid var(--white);
}
.rail-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
}
.icon-link.linkedin{
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  margin-right:.005rem;
  transition:transform .15s var(--ease), opacity .15s var(--ease);
}
.icon-link.linkedin:hover{ opacity:.8; transform:translateY(-1px); }
.icon-link.linkedin img{ width:100%; height:100%; object-fit:contain; display:block; }

.icon-link.email-icon{
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  color:var(--white);
  transition:transform .15s var(--ease), opacity .15s var(--ease);
}
.icon-link.email-icon:hover{ opacity:.8; transform:translateY(-1px); }
.icon-link.email-icon svg{ width:22px; height:22px; display:block; }

.wordmark{
  display:inline-flex;
  opacity:.9;
  margin-right:.15rem;
  transition:opacity .15s var(--ease);
}
.wordmark:hover{ opacity:1; }
.wordmark img{ width:140px; height:auto; display:block; }

.paypal-embed{ display:flex; justify-content:center; margin-top:.5rem; flex-shrink:0; }
.paypal-embed form{ display:inline-flex; justify-items:center; }

.last-updated{
  font-family:"Public Sans",sans-serif;
  font-weight:400;
  font-size:.56rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
  white-space:nowrap;
}
.last-updated-bar{ display:none; }

/* ==========================================================================
   Mobile nav toggle (hidden on desktop)
   ========================================================================== */

.nav-toggle{
  display:none;
  width:38px; height:32px;
  border:0; background:transparent;
  padding:0;
  cursor:pointer;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}
.nav-toggle span{
  display:block; height:2px; width:100%;
  background:var(--white);
  border-radius:2px;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.rail.is-open .nav-toggle span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.rail.is-open .nav-toggle span:nth-child(2){ opacity:0; }
.rail.is-open .nav-toggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   Main content
   ========================================================================== */

.content{
  flex:1 1 auto;
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.content-static{
  flex:0 0 auto;
  padding:1.5rem 3rem .9rem;
}
.preface{
  max-width:var(--content-max);
  display:flex;
  flex-direction:column;
  gap:var(--gap-preface);
}
.preface p{
  font-family:"Public Sans",sans-serif;
  font-weight:500;
  font-size:.85rem;
  line-height:1.49;
  color:var(--gray);
}
.preface a{
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-underline-offset:2px;
}
.preface a:hover{ text-decoration-color:var(--gray); }
.preface-note strong{ font-weight:700; }
.freelance-note{ font-weight:600; }

.kbd-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.3em; height:1.3em;
  border:1.5px solid currentColor;
  border-radius:3px;
  font-size:.78em;
  font-weight:800;
  vertical-align:middle;
  margin:0 .15em;
  transform:translateY(-1px);
  flex:0 0 auto;
}

.rule{
  max-width:var(--content-max);
  margin:.9rem 0 0;
  border:0;
  border-top:3px solid var(--red);
}

.content-scroll{
  flex:1 1 auto;
  overflow-y:auto;
  padding:1.5rem 3rem 6rem;
  scroll-behavior:smooth;
}

.script-section{
  max-width:var(--content-max);
  scroll-margin-top:1rem;
}
.script-section + .script-section{
  margin-top:var(--gap-section);
}

.script-heading{
  margin:0 0 .65rem;
  font-family:"Public Sans",sans-serif;
  font-weight:900;
  font-size:1.18rem;
  color:var(--red);
  display:flex;
  align-items:center;
  gap:.6rem;
}
.script-heading .kbd-icon{ color:var(--gray); margin:0; }

.dl-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.2rem; height:1.2rem;
  flex:0 0 auto;
  transition:opacity .15s var(--ease), transform .15s var(--ease);
}
.dl-icon:hover{ opacity:.7; transform:translateY(1px); }
.dl-icon img{ width:100%; height:100%; display:block; }

.script-section p{
  font-size:.95rem;
  line-height:1.65;
  color:var(--ink);
  font-weight:400;
}
.script-section p + p{ margin-top:var(--gap-para); }
.script-section p + .shot-row,
.script-section .shot-row + p{ margin-top:var(--gap-para); }
.script-section .shot-row + .shot-row{ margin-top:var(--gap-para); }

/* "Before" / "After" labels sit closer to the image they introduce */
.script-section p:has(> .fw-semibold) + .shot-row{ margin-top:calc(var(--gap-para) / 2); }

.script-link{
  font-family:"Public Sans",sans-serif;
  font-weight:600;
  color:var(--red);
  transition:font-weight 0s;
}
.script-link:hover,
.script-link:focus-visible{ font-weight:800; }
.script-link-unresolved{ font-weight:600; color:var(--red); }

.script-section a:not(.script-link){
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:rgba(237,57,47,.35);
  text-underline-offset:2px;
  color:var(--ink);
}
.script-section a:not(.script-link):hover{ text-decoration-color:var(--red); }

.shot-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:flex-start;
}
.shot{
  margin:0;
  border:1px solid #d9d9d9;
  border-radius:4px;
  overflow:hidden;
  background:#fafafa;
  flex:1 1 220px;
  max-width:100%;
}
.shot-row.cols-1 .shot{ flex-basis:100%; max-width:var(--content-max); }
.shot-row.cols-2 .shot{ flex-basis:calc(50% - .5rem); }
.shot-row.cols-3 .shot{ flex-basis:calc(33.333% - .667rem); }
/* A cols-2 row with only one image in it (no sibling to share the row) would
   otherwise flex-grow to fill the full row width on desktop; pin it to its
   basis so it renders at the same size as a paired cols-2 image. */
.shot-row-single .shot{ flex-grow:0; }
.shot img{
  width:100%;
  height:auto;
  display:block;
  /* source screenshots are high-res (2000px+), so scaling down here always looks sharp */
}
.shot-caption{
  font-size:.72rem;
  color:var(--gray);
  padding:.4rem .6rem;
  border-top:1px solid #eee;
}
.shot.img-missing{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  background:repeating-linear-gradient(45deg,#f2f2f2,#f2f2f2 10px,#fafafa 10px,#fafafa 20px);
}
.shot.img-missing img{ display:none; }
.shot.img-missing .missing-label{
  display:block;
  font-size:.7rem;
  color:var(--gray);
  text-align:center;
  padding:.75rem;
  word-break:break-word;
}
.shot .missing-label{ display:none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px){
  .page{ flex-direction:column; }

  .rail{
    position:sticky;
    top:0;
    width:100%;
    flex:0 0 auto;
    height:auto;
    z-index:40;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
  }
  .rail-top{
    flex:1 1 100%;
    padding:.75rem 1rem;
    justify-content:flex-start;
    gap:.75rem;
  }
  .logo{ width:52px; height:52px; }
  .nav-toggle{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    width:auto;
    height:auto;
    gap:6px;
    margin-left:0;
  }
  .nav-toggle span{ width:22px; }
  .nav-toggle::before{
    content:"SCRIPTS";
    font-weight:900;
    letter-spacing:.12em;
    font-size:.7rem;
    color:var(--white);
    white-space:nowrap;
  }
  .rail-divider{ display:none; }
  .rail-heading{ display:none; }
  .last-updated-bar{
    display:block;
    margin-left:auto;
    align-self:flex-end;
  }
  .last-updated-stack{ display:none; }

  .rail-scroll{
    order:3;
    flex:1 1 100%;
    max-height:0;
    padding:0 1.25rem;
    overflow:hidden;
    transition:max-height .25s var(--ease), padding .25s var(--ease);
  }
  .rail.is-open .rail-scroll{
    max-height:60vh;
    padding:.5rem 1.25rem 2rem;
    overflow-y:auto;
  }

  .rail-bottom{
    order:2;
    flex:1 1 100%;
    flex-direction:row;
    justify-content:flex-end;
    border-top:1px solid var(--white);
    padding:.75rem .75rem;
    margin-left:0;
    gap:.4rem;
  }
  .paypal-embed{ margin-top:0; order:2; }
  .rail-links{ order:1; }
  .wordmark img{ width:130px; }
  .icon-link.linkedin,
  .icon-link.email-icon{ width:28px; height:28px; }
  .icon-link.email-icon svg{ width:19px; height:19px; }

  .content{ height:auto; }
  .content-static{ padding:1.75rem 1.25rem 1.25rem; }
  .content-scroll{ overflow-y:visible; padding:1.75rem 1.25rem 4rem; }
  .rule{ margin-top:1.25rem; }

  .shot-row.cols-2 .shot,
  .shot-row.cols-3 .shot{ flex-basis:100%; }
}

@media (min-width:901px) and (max-width:1180px){
  :root{ --rail-w:250px; }
  .content-static, .content-scroll{ padding-left:2.25rem; padding-right:2rem; }
}